clqms-fe1/CLQMS-CHECKLIST.md

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

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

Acceptance Criteria:

• Project builds without errors (npm run build)
• Linting and formatting configured
• API client successfully connects to backend
• SvelteKit file-based routing works
• Handle hook properly intercepts requests

---

Phase 2: Authentication Module

• Create login page component
• Implement login form with username/password fields
• 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

• 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