# 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