86 lines
4.5 KiB
Plaintext
86 lines
4.5 KiB
Plaintext
# Progress Log — Clinical Record PMR Phase
|
|
|
|
## Phase Transition
|
|
|
|
**Previous phase completed:** React conversion of ECG Heartbeat CV (all 12 tasks done)
|
|
**New phase started:** Clinical Record PMR System — Design 7 implementation
|
|
**Date:** 2026-02-11
|
|
|
|
This is a complete redesign of the CV presentation, moving from the ECG animation concept to a Patient Medical Record system interface. All previous components (Hero, Skills, Experience, etc.) will be replaced with PMR-specific views and components.
|
|
|
|
## Codebase Patterns
|
|
|
|
### PMR Design System
|
|
- **Source of truth**: `designs/07-the-clinical-record.md` — Complete specification for the PMR interface
|
|
- **Color palette (light-mode only)**:
|
|
- Main content: `#F5F7FA` (cool light gray)
|
|
- Cards: `#FFFFFF` (white)
|
|
- Sidebar: `#1E293B` (dark blue-gray)
|
|
- Patient banner: `#334155` (lighter blue-gray)
|
|
- NHS blue: `#005EB8` (primary interactive)
|
|
- Green: `#22C55E` (active/resolved)
|
|
- Amber: `#F59E0B` (alerts/in-progress)
|
|
- Red: `#EF4444` (urgent)
|
|
- Borders: `#E5E7EB` (gray-200)
|
|
- **Typography**: Inter for general text, Geist Mono for coded entries/data values
|
|
- **Spacing**: 4px base unit, tighter than previous design (clinical system density)
|
|
- **Borders**: 1px solid gray-200, 4px radius (clinical systems use minimal rounding)
|
|
- **Table rows**: 40px height, alternating colors
|
|
|
|
### Data Architecture
|
|
- All PMR content lives in `src/data/` as typed arrays
|
|
- Separation of data from components enables easy CV updates
|
|
- Types defined in `src/types/pmr.ts`
|
|
|
|
### Animation Approach
|
|
- **Login typing**: `setInterval` with character-by-character reveal (30ms/char username, 20ms/dot password)
|
|
- **View switching**: Instant (no animation) — matches clinical system behavior
|
|
- **Consultation expand**: Height 0→auto, 200ms, ease-out
|
|
- **Alert entrance**: Slide down with spring, 250ms
|
|
- **Alert dismiss**: Icon → checkmark (200ms) → collapse (200ms)
|
|
- **Patient banner condensation**: Smooth height transition, 200ms
|
|
- **Reduced motion**: Typing instant, slides become fades, expand instant
|
|
|
|
### Clinical System Authenticity
|
|
- Navigation is instant — no crossfade
|
|
- Tables use explicit borders on all cells
|
|
- Traffic lights are 8px circles with text labels (never sole indicator)
|
|
- Consultation format: History / Examination / Plan (clinical SOAP note structure)
|
|
- Medications table mimics actual prescribing lists
|
|
- Coded entries use [XXX000] format (SNOMED-style)
|
|
|
|
### Responsive Breakpoints
|
|
- Desktop (>1024px): 220px sidebar, full tables
|
|
- Tablet (768-1024px): 56px icon-only sidebar, scrollable tables
|
|
- Mobile (<768px): Bottom nav bar, card layouts instead of tables
|
|
|
|
### Accessibility Requirements
|
|
- Tables must be proper `<table>` markup with `scope="col"`
|
|
- Clinical alert uses `role="alert"` and `aria-live="assertive"`
|
|
- Keyboard shortcuts: Alt+1-7 for navigation
|
|
- Focus management after view changes and expansions
|
|
- Screen reader announces views and table structure
|
|
|
|
## Iteration Log
|
|
|
|
### Iteration 1 — Task 1: Create PMR data layer and TypeScript types
|
|
- **Completed**: Task 1 - Created PMR data layer with TypeScript interfaces and data files
|
|
- **Files created**:
|
|
- `src/types/pmr.ts` - All PMR TypeScript interfaces (Patient, Consultation, Medication, Problem, Investigation, Document, etc.)
|
|
- `src/data/consultations.ts` - 5 roles mapped to consultation format with History/Examination/Plan structure
|
|
- `src/data/medications.ts` - 18 skills mapped to medication format across 3 categories (Active, Clinical, PRN)
|
|
- `src/data/problems.ts` - 11 problems with traffic light status (3 Active, 2 In Progress, 6 Resolved)
|
|
- `src/data/investigations.ts` - 5 projects as investigations with methodology/results
|
|
- `src/data/documents.ts` - 5 education/certification documents
|
|
- `src/data/patient.ts` - Patient demographic data
|
|
- **Design decisions**:
|
|
- Used SNOMED-style codes for coded entries (EFF001, ALG001, AUT001, etc.)
|
|
- Mapped employer colors: NHS blue (#005EB8) for ICB, Teal (#00897B) for Tesco
|
|
- Proficiency percentages estimated from CV skill descriptions
|
|
- Prescribing history for each skill shows progression over time
|
|
- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
|
|
- **Learnings**:
|
|
- CV has 5 roles but only 4 explicitly listed dates - inferred Duty Pharmacy Manager from GPhC registration date (Aug 2016)
|
|
- Key numbers verified: £14.6M efficiency, 14,000 patients, £2.6M savings, 70% reduction, 200 hours, £1M revenue, £220M budget
|
|
- Skills categorized into Active (technical), Clinical (healthcare domain), PRN (strategic/leadership)
|