# CLQMS Frontend Development Checklist

> **Framework:** SvelteKit  
> **Key Change:** Value Sets moved to Phase 3 (from Phase 10) - needed for dropdowns in all forms

## Phase 1: Project Setup

- [x] Initialize project with SvelteKit
- [x] Install and configure TypeScript
- [ ] Set up ESLint and Prettier
- [x] Create SvelteKit folder structure (`src/routes/`, `src/lib/components/`, `src/lib/stores/`, `src/lib/server/`)
- [x] Configure SvelteKit adapter (auto/vercel/node for deployment target)
- [x] Set up API client using SvelteKit's fetch or axios wrapper
- [x] Configure handle hook for auth middleware (`src/hooks.server.ts`)
- [x] Set up Svelte stores for state management
- [x] Install UI component library or design system (Skeleton, Flowbite, or custom)
- [x] Create base layout components (`+layout.svelte` with Header, Sidebar, Footer)
- [x] Configure environment variables (`.env`, `.env.local`)
- [x] Set up build scripts (`vite build`, `vite preview`)
- [x] Configure form validation library (Superforms with Zod)
- [ ] Configure CI/CD pipeline (GitHub Actions/GitLab CI)
- [x] Create README with setup instructions

**Acceptance Criteria:**
- [x] Project builds without errors (`npm run build`)
- [ ] Linting and formatting configured
- [ ] API client successfully connects to backend
- [x] SvelteKit file-based routing works
- [x] Handle hook properly intercepts requests

---

## Phase 2: Authentication Module

- [x] Create login page component
- [x] Implement login form with username/password fields
- [x] Add form validation (required fields)
- [ ] Implement login API call to `/api/auth/login`
- [ ] Handle JWT token from HTTP-only cookie
- [ ] Create logout functionality (call `/api/auth/logout`)
- [ ] Implement auth state management (store user data, auth status)
- [ ] Create protected route using SvelteKit `+page.server.ts` load functions or `+layout.server.ts`
- [ ] Implement auth check using SvelteKit hooks (`src/hooks.server.ts`)
- [ ] Handle 401 errors globally (redirect to login)
- [ ] Create password change form (current password, new password)
- [ ] Implement password change API call to `/api/auth/change_pass`
- [ ] Add loading states for auth operations
- [ ] Add error messages for failed login attempts
- [ ] Create registration page (optional, if needed)

**Acceptance Criteria:**
- User can login successfully
- JWT token is stored/managed correctly
- Protected routes redirect unauthenticated users
- Logout clears auth state and token
- Password change works with proper validation

---

## Phase 4: Organization Module

### Accounts
- [ ] Create accounts list page
- [ ] Implement account creation form
- [ ] Implement account edit form
- [ ] Implement account delete with confirmation
- [ ] Add search/filter for accounts

### Sites
- [ ] Create sites list page (filtered by selected account)
- [ ] Implement site creation form (with AccountID)
- [ ] Implement site edit form
- [ ] Implement site delete with confirmation
- [ ] Add site search/filter

### Disciplines
- [ ] Create disciplines list page
- [ ] Implement discipline creation form
- [ ] Implement discipline edit form
- [ ] Implement discipline delete with confirmation
- [ ] Add discipline search/filter

### Departments
- [ ] Create departments list page (filtered by site)
- [ ] Implement department creation form (with SiteID)
- [ ] Implement department edit form
- [ ] Implement department delete with confirmation
- [ ] Add department search/filter

### Workstations
- [ ] Create workstations list page (filtered by department)
- [ ] Implement workstation creation form (with SiteID, DepartmentID)
- [ ] Implement workstation edit form
- [ ] Implement workstation delete with confirmation
- [ ] Add workstation search/filter

### Hierarchy Navigation
- [ ] Create organization tree view component
- [ ] Implement breadcrumb navigation
- [ ] Add filters to cascade (Account → Site → Department → Workstation)

**Acceptance Criteria:**
- All CRUD operations work for each entity
- Filtering and cascading selection works
- Delete operations have confirmation dialogs
- List pages support pagination

---

## Phase 5: Master Data Module

### Locations
- [ ] Create locations list page
- [ ] Implement location creation/edit form
- [ ] Implement location delete with confirmation
- [ ] Add search/filter by location code, name, type

### Contacts
- [ ] Create contacts list page
- [ ] Implement contact creation/edit form
- [ ] Implement contact delete with confirmation
- [ ] Add search/filter by name, type, specialty

### Occupations
- [ ] Create occupations list page
- [ ] Implement occupation creation/edit form
- [ ] Implement occupation delete with confirmation

### Medical Specialties
- [ ] Create medical specialties list page
- [ ] Implement specialty creation/edit form
- [ ] Implement specialty delete with confirmation

### Counters
- [ ] Create counters list page
- [ ] Implement counter creation/edit form
- [ ] Implement counter delete with confirmation
- [ ] Add ability to reset counter value

### Geographical Areas
- [ ] Create provinces list page (API: `/api/areageo/provinces`)
- [ ] Create cities list page (API: `/api/areageo/cities` with province_id filter)
- [ ] Create province → city dropdown components
- [ ] Add caching for geographical data

**Acceptance Criteria:**
- All master data CRUD operations work
- Province/city dropdowns cascade correctly
- Search and filtering works across all entities
- Geographical data is cached appropriately

---

## Phase 6: Patient Management Module

### Patient List & Search
- [ ] Create patients list page
- [ ] Implement search by PatientID or name (API parameter)
- [ ] Add pagination controls
- [ ] Implement patient detail view (click to view)
- [ ] Add quick actions (view, edit, delete)

### Patient Registration
- [ ] Create patient registration form with all fields
- [ ] Implement field validation:
  - [ ] PatientID: alphanumeric, max 30 chars, pattern validation
  - [ ] Sex: required, dropdown (1=Female, 2=Male)
  - [ ] NameFirst: required, 1-60 chars, letters/spaces/periods
  - [ ] Birthdate: required, date-time picker
  - [ ] Email: format validation
  - [ ] Phone/Mobile: regex validation (8-15 digits, optional +)
  - [ ] ZIP: numeric only, max 10 chars
- [ ] Add optional fields (NameMiddle, NameMaiden, NameLast, etc.)
- [ ] Add identifier section (IdentifierType, Identifier)
- [ ] Implement patient check existence (API: `/api/patient/check`)
- [ ] Add duplicate patient warning if exists

### Patient Edit
- [ ] Create patient edit form (same as registration)
- [ ] Pre-fill with existing patient data
- [ ] Implement PATCH API call
- [ ] Add save confirmation

### Patient Delete
- [ ] Implement delete confirmation dialog
- [ ] Call DELETE API with PatientID
- [ ] Show success/error feedback

### Patient Visits
- [ ] Create visits list page
- [ ] Filter visits by PatientID
- [ ] Implement visit creation form
- [ ] Implement visit edit form
- [ ] Implement visit delete with confirmation
- [ ] Add visit detail view

### ADT Events
- [ ] Create ADT event form
- [ ] Implement ADT event types:
  - [ ] A01: Admit
  - [ ] A02: Transfer
  - [ ] A03: Discharge
  - [ ] A04: Register
  - [ ] A08: Update
- [ ] Add validation for ADT events
- [ ] Call `/api/patvisitadt` endpoint

**Acceptance Criteria:**
- Patient CRUD operations work with proper validation
- Search finds patients by ID or name
- Duplicate patient check prevents duplicates
- Visit management works correctly
- ADT events are handled properly

---

## Phase 7: Test Catalog Module

### Test Definitions
- [ ] Create test definitions list page
- [ ] Add filter by TestType (TEST, PARAM, CALC, GROUP, TITLE)
- [ ] Add filter by DisciplineID
- [ ] Add filter by DepartmentID
- [ ] Add pagination
- [ ] Implement test detail view
- [ ] Display test metadata (code, name, unit, formula, specimen type)

### Test Browser
- [ ] Create test browser/search component
- [ ] Add search by TestCode or TestName
- [ ] Add filter by SpecimenType
- [ ] Add multi-select functionality (for ordering)
- [ ] Display test details on hover/click

### Panels & Groups
- [ ] Identify and display test groups (TestType = GROUP)
- [ ] Expand/collapse group functionality
- [ ] Show tests within groups
- [ ] Add section headers (TestType = TITLE)

### Test Mapping
- [ ] Create test mapping view (if needed for admin)
- [ ] Display HostCode ↔ ClientCode mappings
- [ ] Filter by HostType or ClientType

**Acceptance Criteria:**
- Test catalog browsable with filters
- Multi-select works for test ordering
- Groups and panels display correctly
- Search returns relevant results

---

## Phase 8: Specimen Module

### Specimen Management
- [ ] Create specimens list page
- [ ] Add filter by SpecimenStatus
- [ ] Add filter by PatientID
- [ ] Add filter by SpecimenType
- [ ] Implement specimen creation form
- [ ] Implement specimen edit form
- [ ] Implement specimen status update
- [ ] Add specimen detail view

### Container Definitions
- [ ] Create container definitions list page
- [ ] Implement container creation form (code, name, category, size, cap color)
- [ ] Implement container edit form
- [ ] Implement container delete with confirmation
- [ ] Display container metadata in specimen view

### Specimen Preparations
- [ ] Create preparations list page
- [ ] Implement preparation creation form
- [ ] Implement preparation edit form
- [ ] Implement preparation delete

### Specimen Statuses
- [ ] Create specimen statuses list page
- [ ] Implement status creation form
- [ ] Implement status edit form
- [ ] Display status activity labels

### Collection Methods
- [ ] Create collection methods list page
- [ ] Implement method creation form (code, name, method, additive, role)
- [ ] Implement method edit form
- [ ] Display method metadata

### Specimen Tracking
- [ ] Create specimen timeline/status view
- [ ] Visual status indicators (color-coded)
- [ ] History log display (if available)
- [ ] Barcode display (SpecimenID)

**Acceptance Criteria:**
- Specimen CRUD operations work
- Containers, preparations, statuses, methods manageable
- Specimen status tracking is visible
- Filters work correctly

---

## Phase 9: Orders Module

### Orders List
- [ ] Create orders list page
- [ ] Add filter by OrderStatus (pending, in-progress, completed, cancelled)
- [ ] Add filter by PatientID
- [ ] Add filter by date range
- [ ] Add pagination
- [ ] Display order priority (color-coded: stat=red, urgent=orange, routine=gray)
- [ ] Display order status badges
- [ ] Add quick actions (view, edit, delete)

### Order Creation
- [ ] Create order creation form
- [ ] Patient selection (search by PatientID)
- [ ] Visit selection (optional, dropdown)
- [ ] Priority selection (routine, stat, urgent)
- [ ] Site selection (dropdown)
- [ ] Requesting physician (text input)
- [ ] Test selection (multi-select from test catalog)
- [ ] Specimen type selection per test (if needed)
- [ ] Validate required fields (PatientID, Tests)
- [ ] Call POST `/api/ordertest`

### Order Detail View
- [ ] Display order information (OrderID, PatientID, VisitID, Date, Status, Priority)
- [ ] Display ordered tests with specimen types
- [ ] Display current status
- [ ] Add edit button
- [ ] Add delete button
- [ ] Add status change action

### Order Status Update
- [ ] Implement status change dropdown
- [ ] Call POST `/api/ordertest/status` with OrderID and OrderStatus
- [ ] Update local state on success
- [ ] Add confirmation for status changes

### Order Cancellation
- [ ] Add cancel button
- [ ] Show confirmation dialog
- [ ] Update status to 'cancelled'
- [ ] Show success/error feedback

### Order Deletion
- [ ] Implement delete confirmation
- [ ] Call DELETE `/api/ordertest`
- [ ] Show success/error feedback

**Acceptance Criteria:**
- Order creation works with all required fields
- Order list filters work
- Priority and status display correctly
- Status updates work
- Cancellation and deletion work with confirmation

---

## Phase 10: Results Module

### Results List
- [ ] Create results list page
- [ ] Add filter by PatientID
- [ ] Add filter by date range
- [ ] Add pagination
- [ ] Display patient info with results
- [ ] Add click to view details

### Results Detail View
- [ ] Display patient information
- [ ] Display order information
- [ ] Display test results in table format
- [ ] Show result values with units
- [ ] Display flags (H=High, L=Low, N=Normal, A=Abnormal) with color coding
- [ ] Highlight abnormal/critical results
- [ ] Add result reference ranges (if available)

### Results Entry (Manual)
- [ ] Create results entry form
- [ ] Select order (from pending orders)
- [ ] Display tests for order
- [ ] Input result values for each test
- [ ] Validate result values (numeric for quantitative tests)
- [ ] Auto-calculate flags (H/L/N/A) if ranges available
- [ ] Add units display
- [ ] Add remarks/comment field
- [ ] Save results to API

### Results Approval Workflow
- [ ] Add "Review" status for results
- [ ] Add "Approved" status
- [ ] Implement approve/reject actions (if required)
- [ ] Show reviewer info
- [ ] Lock approved results (if needed)

### Critical Results Alerting
- [ ] Identify critical results (flagged as critical)
- [ ] Show prominent alerts/warnings
- [ ] Add "acknowledge" action for critical results
- [ ] Log critical result acknowledgments

### Results Export/Print
- [ ] Add print results button
- [ ] Generate printable report format
- [ ] Add export to PDF
- [ ] Add export to CSV (if needed)

**Acceptance Criteria:**
- Results display correctly with flags
- Abnormal results highlighted
- Manual entry works with validation
- Approval workflow works (if implemented)
- Critical results are prominent
- Print/export functions work

---

## Phase 3: Value Sets Module

### Value Set Definitions
- [ ] Create value sets list page
- [ ] Display VSetCode, VSetName, Description, Category
- [ ] Add search/filter by code or name
- [ ] Add refresh button (call `/api/valueset/refresh`)
- [ ] Show last refresh time

### Value Set Items
- [ ] Create value set items page
- [ ] Filter by VSetID
- [ ] Display items in list/table (VValue, VLabel, VSeq, IsActive)
- [ ] Implement item creation form
- [ ] Implement item edit form
- [ ] Implement item delete with confirmation
- [ ] Add active/inactive toggle
- [ ] Implement sorting by VSeq

### Dynamic Dropdowns
- [ ] Create reusable dropdown component using value sets
- [ ] Load dropdown options from `/api/valueset/items?VSetID=X`
- [ ] Cache dropdown options in store
- [ ] Implement refresh/reload dropdown data
- [ ] Use value sets for:
  - [ ] Patient prefixes
  - [ ] Patient marital status
  - [ ] Specimen types
  - [ ] Collection methods
  - [ ] Specimen statuses
  - [ ] Order priorities
  - [ ] Order statuses
  - [ ] Test types
  - [ ] Any other configurable dropdowns

### Value Set Caching
- [ ] Implement cache strategy for value sets
- [ ] Load value sets on app initialization
- [ ] Refresh cache when `/api/valueset/refresh` called
- [ ] Use stale-while-revalidate pattern for dropdowns

**Acceptance Criteria:**
- Value sets display correctly
- Items CRUD works
- Refresh clears cache and reloads
- Dynamic dropdowns populate from value sets
- Caching reduces API calls

---

## Phase 11: Dashboard Module

### Dashboard Summary Cards
- [ ] Create dashboard page
- [ ] Display pending orders count (API: `/api/dashboard`)
- [ ] Display today's results count
- [ ] Display critical results count
- [ ] Display active patients count
- [ ] Add refresh button

### Orders Trend Chart
- [ ] Create orders over time chart
- [ ] Filter by date range
- [ ] Group by status
- [ ] Use charting library (Chart.js/Recharts/etc.)

### Results Volume Chart
- [ ] Create results volume chart
- [ ] Filter by date range
- [ ] Group by test type or department
- [ ] Use charting library

### Real-time Status Indicators
- [ ] Implement polling or WebSocket for real-time updates
- [ ] Update dashboard metrics automatically
- [ ] Show last update time
- [ ] Add auto-refresh toggle (e.g., every 30 seconds)

### Department Performance
- [ ] Display department-wise metrics
- [ ] Orders processed per department
- [ ] Average turnaround time
- [ ] Results volume per department

**Acceptance Criteria:**
- Dashboard displays all summary metrics
- Charts render correctly
- Real-time updates work
- Filters apply to charts
- Performance metrics are accurate

---

## Phase 12: Edge API Integration

### Instrument Status Monitoring
- [ ] Create instrument status page
- [ ] Display instrument list with status
- [ ] Color-code status (online=green, offline=gray, error=red, maintenance=orange)
- [ ] Implement status polling or WebSocket
- [ ] Display last status update timestamp
- [ ] Display status message (if available)

### Real-time Result Display
- [ ] Implement result streaming (WebSocket or SSE polling)
- [ ] Display incoming results as they arrive
- [ ] Parse EdgeResultRequest format (sample_id, instrument_id, results array)
- [ ] Display results in real-time feed
- [ ] Show test_code, result_value, unit, flags
- [ ] Add sound/notification for new results

### Order Acknowledgment
- [ ] Create edge orders list (API: `/api/edge/orders`)
- [ ] Filter by instrument_id
- [ ] Filter by status (pending, acknowledged)
- [ ] Display orders for instruments
- [ ] Implement acknowledge action (POST `/api/edge/orders/{orderId}/ack`)
- [ ] Update status to acknowledged
- [ ] Show acknowledgment confirmation

### Instrument Status Logging
- [ ] Create status log view
- [ ] Display status history per instrument
- [ ] Show timestamp, status, message
- [ ] Call `/api/edge/status` when receiving status updates

### Result Queue Management
- [ ] Display queued results (EdgeResultResponse: edge_res_id)
- [ ] Show queue status
- [ ] Manual trigger for processing (if needed)

**Acceptance Criteria:**
- Instrument status displays correctly
- Real-time results stream in
- Order acknowledgment works
- Status history is visible
- Result queue is manageable

---

## Phase 13: Testing & QA

### Unit Tests
- [ ] Set up testing framework (Jest, Vitest, etc.)
- [ ] Write unit tests for components
- [ ] Write unit tests for services/API calls
- [ ] Write unit tests for utility functions
- [ ] Write unit tests for state management
- [ ] Achieve >80% code coverage

### Integration Tests
- [ ] Set up API mocking (MSW, Mirage, etc.)
- [ ] Write tests for authentication flow
- [ ] Write tests for patient CRUD operations
- [ ] Write tests for order creation flow
- [ ] Write tests for specimen tracking
- [ ] Write tests for results entry

### E2E Tests (Critical Flows)
- [ ] Set up E2E testing (Cypress, Playwright)
- [ ] Test login → dashboard flow
- [ ] Test patient registration → order creation flow
- [ ] Test order → specimen → results flow
- [ ] Test critical results alerting
- [ ] Test logout

### Form Validation Testing
- [ ] Test all required field validations
- [ ] Test format validations (email, phone, regex)
- [ ] Test duplicate detection
- [ ] Test error message display

### Error Handling Testing
- [ ] Test 401 error handling (redirect to login)
- [ ] Test 404 error handling
- [ ] Test 500 error handling
- [ ] Test network error handling
- [ ] Test timeout handling

### Performance Testing
- [ ] Measure page load times
- [ ] Measure list rendering with large datasets
- [ ] Optimize bundle size (code splitting, lazy loading)
- [ ] Test with slow network (3G)
- [ ] Audit with Lighthouse (score >90)

### Accessibility Audit
- [ ] Test keyboard navigation
- [ ] Test screen reader compatibility
- [ ] Check color contrast ratios
- [ ] Ensure proper ARIA labels
- [ ] Test with accessibility tools (axe, WAVE)

**Acceptance Criteria:**
- All tests pass
- Code coverage >80%
- E2E tests cover critical flows
- Lighthouse score >90
- Accessibility audit passes

---

## Phase 14: Deployment

### Production Build
- [ ] Create production build
- [ ] Optimize assets (minify, compress)
- [ ] Generate source maps
- [ ] Verify build output
- [ ] Check bundle size

### Environment Configuration
- [ ] Set up production environment variables
- [ ] Configure production API base URL
- [ ] Disable development tools
- [ ] Enable error tracking (Sentry, etc.)
- [ ] Configure analytics (if needed)

### API Endpoint Verification
- [ ] Verify all endpoints are accessible
- [ ] Verify CORS configuration
- [ ] Test authentication flow with production backend
- [ ] Test with production data

### Database/Storage (if needed)
- [ ] Configure any client-side storage (IndexedDB, localStorage)
- [ ] Set up data migration scripts (if needed)
- [ ] Test storage operations

### Pre-deployment Checklist
- [ ] Run all tests and ensure they pass
- [ ] Review and merge all PRs
- [ ] Update version number
- [ ] Update CHANGELOG
- [ ] Create release notes

### Deployment
- [ ] Deploy to staging environment
- [ ] Smoke test on staging
- [ ] Deploy to production
- [ ] Verify production deployment
- [ ] Monitor error logs
- [ ] Monitor performance metrics

### Post-deployment
- [ ] Verify critical flows work in production
- [ ] Check user feedback
- [ ] Monitor for errors
- [ ] Rollback plan in case of issues

**Acceptance Criteria:**
- Production build completes without errors
- Application works in production environment
- All critical features verified
- No critical errors in logs
- Performance meets targets

---

## Notes

### API Base URL
- Development: `http://localhost/clqms01/`
- Production: `https://clqms01-api.services-summit.my.id/`

### Authentication
- JWT token stored in HTTP-only cookie
- Bearer token in Authorization header for API calls
- Check auth status on app load

### Common Patterns
- All list pages support pagination
- All forms include validation
- All delete operations require confirmation
- All API calls include error handling
- Loading states for async operations

### Dependencies Between Phases
- Phase 2 (Authentication) must be completed before protected routes
- Phase 3 (Value Sets) needed for dropdowns across all modules - **do this early!**
- Phase 4 (Organization) data needed for filtering in other modules
- Phase 6 (Patients) needed for Phase 9 (Orders)
- Phase 7 (Test Catalog) needed for Phase 9 (Orders)
- Phase 9 (Orders) needed for Phase 10 (Results)

### Testing Priority
- E2E: Login → Dashboard, Patient → Order → Result flow
- Unit: All services, all components with logic
- Integration: API calls, auth flows

---

## Completed Phases Tracker

- [x] Phase 1: Project Setup
- [ ] Phase 2: Authentication Module
- [ ] Phase 3: Value Sets Module
- [ ] Phase 4: Organization Module
- [ ] Phase 5: Master Data Module
- [ ] Phase 6: Patient Management Module
- [ ] Phase 7: Test Catalog Module
- [ ] Phase 8: Specimen Module
- [ ] Phase 9: Orders Module
- [ ] Phase 10: Results Module
- [ ] Phase 11: Dashboard Module
- [ ] Phase 12: Edge API Integration
- [ ] Phase 13: Testing & QA
- [ ] Phase 14: Deployment

---

**Last Updated:** 2026-02-08
**Version:** 1.0.0