clqms-fe1/.serena/memories/task_completion.md

CLQMS Frontend - Task Completion Checklist

When Completing a Task

1. Code Quality

• Code follows project conventions (camelCase, 2-space indent, semicolons)
• Components use Svelte 5 runes ($state, $derived, $effect, $props)
• All exported functions have JSDoc comments
• Imports are ordered correctly (Svelte, $lib, external)
• No hardcoded values (use environment variables or constants)
• Error handling is properly implemented
• Loading states are shown for async operations
• Toast notifications for user feedback

2. Testing (when test framework is configured)

• Unit tests written for new functions
• Component tests written for new components
• All tests pass: pnpm test
• Test coverage is adequate

3. Linting and Formatting (when configured)

• Run linter: pnpm run lint
• Fix any linting errors
• Run formatter: pnpm run format
• No linting or formatting errors

4. Build Verification

• Production build succeeds: pnpm run build
• No build errors or warnings
• Preview build works: pnpm run preview
• Application runs without console errors

5. Manual Testing

• Feature works as expected in dev environment
• Navigation works correctly
• Forms validate properly
• Error messages are clear
• Loading states display correctly
• Toast notifications appear for success/error
• Responsive design works on mobile/tablet
• Accessibility: keyboard navigation, ARIA labels

6. Documentation

• API endpoints documented in comments
• Complex logic explained in comments
• New components documented
• README updated (if needed)
• Implementation plan updated (if applicable)

7. Security Considerations

• No sensitive data exposed to client
• API calls use proper authentication
• User input is validated
• XSS vulnerabilities checked
• CSRF protection (if applicable)

8. Performance

• No unnecessary re-renders
• Large lists use pagination
• Images are optimized (if applicable)
• Bundle size impact is minimal

9. Browser Compatibility

• Works in modern browsers (Chrome, Firefox, Edge, Safari)
• Feature detection used for newer APIs (if needed)
• Polyfills considered (if needed)

Before Marking Task Complete

1. Review Code: Check all items in the checklist above
2. Test Thoroughly: Manual testing of all new/modified features
3. Check Build: Ensure production build succeeds
4. Run Tests: Ensure all tests pass (when test framework is configured)
5. Run Linter: Ensure no linting errors (when configured)

Common Issues to Check

API Issues

• Check API endpoints match backend documentation
• Verify request/response format
• Check error handling for failed requests
• Ensure 401 redirects to login work

Svelte/Component Issues

• Check reactivity with $state and $derived
• Verify lifecycle hooks (onMount, onDestroy)
• Check prop passing between components
• Ensure event handlers work correctly

Styling Issues

• Check responsive design (mobile, tablet, desktop)
• Verify DaisyUI component usage
• Check color scheme consistency
• Ensure accessibility (contrast, focus states)

State Management Issues

• Verify store updates trigger UI updates
• Check localStorage handling (browser check)
• Ensure auth state is managed correctly
• Verify derived state calculations

Git Commit Guidelines (if committing)

Follow conventional commits format:

• feat: add new feature
• fix: fix bug
• docs: update documentation
• style: format code
• refactor: refactor code
• test: add tests
• chore: maintenance tasks

Examples:

• feat: add patient create form with validation
• fix: handle API errors properly in patient list
• docs: update API endpoint documentation
• refactor: extract form handling logic to utility function

When Tests Are Not Available

Currently, no test framework is configured. Until tests are added:

• Focus on manual testing
• Test all user flows
• Check edge cases (empty data, errors, network issues)
• Verify error handling
• Test responsive design

Future: When Tests Are Added

Once Vitest and Playwright are configured:

• Add unit tests for new functions
• Add component tests for new components
• Add E2E tests for user flows
• Ensure test coverage is maintained
• Run tests before marking task complete