158 lines
12 KiB
Plaintext
158 lines
12 KiB
Plaintext
# Progress Log
|
|
|
|
## Codebase Patterns
|
|
|
|
### Project Structure
|
|
- Components in `src/components/`, tiles in `src/components/tiles/`
|
|
- Old views still in `src/components/views/` (to be removed in Task 21)
|
|
- Data files in `src/data/` — consultations.ts, medications.ts, problems.ts, investigations.ts, documents.ts, patient.ts + new files: profile.ts, tags.ts, alerts.ts, kpis.ts, skills.ts
|
|
- Types in `src/types/pmr.ts` (PMR interfaces) and `src/types/index.ts` (Phase type)
|
|
- Hooks in `src/hooks/` — useScrollCondensation.ts, useBreakpoint.ts
|
|
- Contexts in `src/contexts/` — AccessibilityContext.tsx (has 1 pre-existing ESLint warning — expected)
|
|
- Lib in `src/lib/` — search.ts (fuse.js integration)
|
|
- Path alias: `@/` maps to `./src/`
|
|
|
|
### Phase Management
|
|
- App.tsx controls phase: 'boot' -> 'ecg' -> 'login' -> 'pmr'
|
|
- Phase type defined in `src/types/index.ts` as `'boot' | 'ecg' | 'login' | 'pmr'`
|
|
- BootSequence.tsx handles terminal animation — LOCKED
|
|
- ECGAnimation.tsx handles heartbeat + letter tracing + flatline exit — LOCKED
|
|
- LoginScreen.tsx bridges to dashboard (was PMRInterface, now DashboardLayout)
|
|
|
|
### Data Architecture (CORRECT — do not modify existing files)
|
|
- All data files are populated with accurate CV content from References/CV_v4.md
|
|
- 5 consultation entries (roles), 18 medications (skills with prescribingHistory), 11 problems (achievements), 6 investigations (projects), 5 documents (education)
|
|
- Types are properly defined in pmr.ts — Consultation, Medication, Problem, Investigation, Document, Patient, ViewId
|
|
- New types needed: Tag, Alert, KPI, SkillMedication (Task 2)
|
|
|
|
### Known Dependencies
|
|
- React 18.3.1, TypeScript, Vite
|
|
- Tailwind CSS for utility classes
|
|
- Framer Motion 11.15.0 for animations
|
|
- Lucide React 0.468.0 for icons
|
|
- fuse.js 7.0.0 (already installed) for fuzzy search
|
|
|
|
### Typography
|
|
- Elvaro Grotesque (`font-ui`) — primary UI font, 7 weights (300-900), loaded from Fonts/ directory
|
|
- Blumir (`font-ui-alt`) — alternative, variable font (100-700)
|
|
- Geist Mono (`font-geist`) — timestamps, data values, coded entries
|
|
- Fira Code (`font-mono`) — boot/ECG terminal only
|
|
- Do NOT use Inter, Roboto, DM Sans, or system defaults
|
|
- DM Sans in the concept HTML is a PLACEHOLDER — use Elvaro Grotesque
|
|
- Font mapping was corrected in Task 1: Elvaro = font-ui (primary), Blumir = font-ui-alt (alternative)
|
|
|
|
### Design Tokens
|
|
- Dashboard background: use `--bg-dashboard` (#F0F5F4), NOT `--bg` (#FFFFFF which is for boot/ECG)
|
|
- Three-tier shadows: `--shadow-sm` (resting), `--shadow-md` (hover/interactive), `--shadow-lg` (overlays)
|
|
- Border tiers: `--border` (#D4E0DE, structural), `--border-light` (#E4EDEB, cards)
|
|
- Accent: `--accent` (#0D6E6E teal), `--accent-hover` (#0A8080), `--accent-light` (rgba 0.08), `--accent-border` (rgba 0.18)
|
|
- Status colors each have base + light + border variants (success, amber, alert, purple)
|
|
- Tailwind: `pmr-*` prefix for all dashboard colors (e.g., `bg-pmr-bg`, `text-pmr-accent`, `border-pmr-border-light`)
|
|
- Tailwind shadows: `shadow-pmr-sm`, `shadow-pmr-md`, `shadow-pmr-lg`
|
|
- Tailwind radius: `rounded-card` (8px), `rounded-card-sm` (6px), `rounded-login` (12px)
|
|
|
|
### Visual Review
|
|
- Dev server runs on `http://localhost:5173` throughout the loop
|
|
- App has boot→ECG→login→dashboard sequence (~15s on first load)
|
|
- If browser tools fail, skip visual review and note in iteration log — don't block progress
|
|
|
|
## Manual Intervention — 2026-02-13
|
|
### Reason: Complete redesign — replacing CareerRecord PMR with GP System Dashboard
|
|
### Changes made:
|
|
- **IMPLEMENTATION_PLAN.md**: Completely rewritten with 21 new tasks for GP System dashboard overhaul
|
|
- **guardrails.md**: Completely rewritten for new design direction (teal palette, tile-based layout, 8px radius, new shadow system)
|
|
- **progress.txt**: This intervention entry added
|
|
- **CLAUDE.md**: Will be updated by Task 3 in the new plan (architecture, colors, components, styling)
|
|
|
|
### Previous plan status: 15/15 tasks completed (all checked off)
|
|
### New plan: 21 tasks across 4 phases (Foundation → Core Layout → Dashboard Tiles → Interactions → Polish)
|
|
|
|
### What's being replaced:
|
|
- `PatientBanner.tsx` → `TopBar.tsx` (white top bar with search and session info)
|
|
- `ClinicalSidebar.tsx` → `Sidebar.tsx` (light background #F7FAFA, person header, tags, alerts only)
|
|
- `PMRInterface.tsx` → `DashboardLayout.tsx` (topbar + sidebar + scrollable card grid)
|
|
- All 7 `views/*.tsx` files → Dashboard tile components in `src/components/tiles/`
|
|
- Color palette: dark sidebar (#1E293B) + NHS Blue (#005EB8) → light sidebar (#F7FAFA) + teal (#0D6E6E)
|
|
- Navigation: sidebar-nav view-switching → single scrollable dashboard with expandable tiles
|
|
- Patient banner scroll condensation → removed (no banner, just topbar)
|
|
|
|
### What's preserved:
|
|
- Boot sequence (BootSequence.tsx) — LOCKED
|
|
- ECG animation (ECGAnimation.tsx) — LOCKED
|
|
- Login screen (LoginScreen.tsx) — unchanged
|
|
- Font setup: Elvaro Grotesque (primary UI), Blumir (alt), Geist Mono (data), Fira Code (terminal only)
|
|
- All data files in src/data/ — content unchanged, new data files added
|
|
- fuse.js dependency — reused for command palette search
|
|
- App.tsx phase management (boot → ecg → login → pmr) — pmr phase now renders DashboardLayout
|
|
|
|
### Context for next iteration:
|
|
- The reference design is `References/GPSystemconcept.html` — READ THIS before starting any visual task
|
|
- The old PMR components STILL EXIST in the codebase. Don't delete them yet — some expand/collapse patterns and data rendering can be reused inside tile expansion (Task 16). Cleanup happens in Task 21.
|
|
- Login screen still transitions to `#1E293B` background. The new dashboard has `#F0F5F4` background. The LoginScreen.tsx may need a background color update, or the transition can be handled in DashboardLayout's entrance animation.
|
|
- The concept HTML uses DM Sans font — this is a PLACEHOLDER. Production uses Elvaro Grotesque (font-ui). Do not switch to DM Sans.
|
|
- The concept's command palette has a comprehensive data model — use it as reference for building the palette in Task 18.
|
|
- Tile interactions (expansion, KPI flip) are in Phase 3. Tiles in Phase 2 should be built as static/display-only first, with data attributes or props that Phase 3 can hook into.
|
|
|
|
### New guardrails added:
|
|
- Accent color: teal #0D6E6E (replacing NHS Blue #005EB8 as primary interactive color)
|
|
- Border radius: 8px for cards (was 4px)
|
|
- Shadow system: three-tier (sm/md/lg) replacing single pmr shadow
|
|
- Sidebar: light background, PersonHeader + Tags + Alerts ONLY (projects, skills, education moved to tiles)
|
|
- Layout: TopBar + Sidebar + Card Grid (replacing PatientBanner + ClinicalSidebar + view switching)
|
|
- Tile ordering: Patient Summary → Latest Results + Core Skills → Last Consultation → Career Activity → Education → Projects
|
|
- Skills frequency: user-specified values (Data Analysis=twice daily, etc.)
|
|
|
|
## Iteration Log
|
|
|
|
### Iteration 1 — Task 1: Update design tokens and Tailwind config
|
|
**Status:** Complete
|
|
**Changes:**
|
|
- Updated `src/index.css`: Added full GP System Dashboard token set (colors, shadows, layout vars, status colors with light/border variants). Kept legacy `--pmr-*` aliases for backward compat. Updated values of legacy tokens to match new palette (e.g., `--pmr-content` → `#F0F5F4`, `--pmr-sidebar` → `#F7FAFA`, `--pmr-radius` → `8px`).
|
|
- Updated `tailwind.config.js`: New pmr color tokens (bg, surface, sidebar, accent, text-primary/secondary/tertiary, border/border-light, success, amber, alert, purple). Three-tier shadow system (pmr-sm/md/lg). Border-radius updated (card=8px, card-sm=6px, login=12px).
|
|
- **Fixed font-ui/font-ui-alt swap**: Previous iterations had Blumir as `font-ui` and Elvaro as `font-ui-alt` — this was backwards. Now corrected: Elvaro Grotesque = `font-ui` (primary), Blumir = `font-ui-alt` (alternative). No components were using these classes directly, so no breakage.
|
|
- Used `--bg-dashboard` for the dashboard background (not `--bg`) to avoid conflicting with the existing `--bg: #FFFFFF` used by boot/ECG phases.
|
|
**Learnings:**
|
|
- The `--bg` CSS var is used for boot/ECG phases (#FFFFFF). Dashboard background uses `--bg-dashboard` (#F0F5F4) to avoid collision.
|
|
- No existing components reference `font-ui` or `font-ui-alt` Tailwind classes, so the font swap was safe.
|
|
- The old shadow tokens (`pmr-hover`, `pmr-banner`) were not referenced in any component code.
|
|
**Quality checks:** typecheck ✓, lint ✓ (1 pre-existing warning), build ✓
|
|
**Visual review:** Not applicable (token-only changes, no visual components yet)
|
|
|
|
### Iteration 2 — Task 2: Create new data files and update types
|
|
**Status:** Complete
|
|
**Changes:**
|
|
- Created `src/data/profile.ts` — personal statement extracted from CV_v4.md (exact match)
|
|
- Created `src/data/tags.ts` — 5 sidebar tags with color variants (teal, amber, green)
|
|
- Created `src/data/alerts.ts` — 2 sidebar alert flags (£14.6M savings, £220M budget) with severity and lucide-react icon names
|
|
- Created `src/data/kpis.ts` — 4 KPI metrics (Budget, Savings, Years, Team Size) with values, labels, subs, color variants, and explanation text for flip cards
|
|
- Created `src/data/skills.ts` — 5 technical skills as "SkillMedication" entries with user-specified frequencies (Data Analysis="Twice daily", Python="Daily", SQL="Daily", Power BI="Once weekly", JS/TS="When required"), plus years, proficiency, category, status, and lucide-react icon names
|
|
- Updated `src/types/pmr.ts` — added 4 new interfaces: Tag, Alert, KPI, SkillMedication
|
|
**Learnings:**
|
|
- All new data files follow the established pattern: import types, export const array
|
|
- Icon names are stored as strings (lucide-react icon names) — components will dynamically import them
|
|
- Skills frequency strings are user-specified values (not standardized enum like old Medication type)
|
|
- KPI explanations are substantial text blocks for flip card backs — these will be displayed in full when users flip the cards
|
|
- All CV numbers/dates verified against CV_v4.md — £220M, £14.6M, 9+ years, team of 12, start years for skills
|
|
**Quality checks:** typecheck ✓, lint ✓ (1 pre-existing warning), build ✓
|
|
**Visual review:** Not applicable (data-only changes, no visual components yet)
|
|
|
|
### Iteration 3 — Task 4: Build TopBar component
|
|
**Status:** Complete
|
|
**Changes:**
|
|
- Created `src/components/TopBar.tsx` — fixed 48px header with three zones:
|
|
- Left: Home icon (lucide-react, 18px, accent) + "Headhunt Medical Center" (13px, 600 weight) + "Remote" version badge (11px, tertiary)
|
|
- Center: Search bar button (max-width 560px, min-width 400px, 42px height) with Search icon, placeholder text, Ctrl+K kbd badge. On click triggers `onSearchClick` prop (for command palette in Task 18). Hidden on mobile (<768px). Hover/focus border transitions to accent color with focus ring.
|
|
- Right: "Dr. A.CHARLWOOD" text (hidden on <640px) + "Active Session · [time]" pill badge (Geist Mono, accent-light bg, accent-border)
|
|
- Component uses CSS custom properties from Task 1 tokens (--surface, --border, --accent, --text-primary, --text-secondary, --text-tertiary, --bg-dashboard, --accent-light, --accent-border)
|
|
- Live time updates every 60 seconds using setInterval
|
|
- Search bar is a `<button>` element (not input) — it doesn't do inline search, only triggers the command palette
|
|
- Responsive: search bar hidden on <768px (md breakpoint), user name hidden on <640px (sm breakpoint)
|
|
**Learnings:**
|
|
- Search bar should be a button, not an input — it triggers the command palette overlay (Task 18). No inline filtering.
|
|
- Using `var(--radius-card)` for 8px border radius on the search bar container
|
|
- Time format: 24-hour (en-GB locale), no seconds — matches clinical system convention
|
|
- TopBar is not yet wired into DashboardLayout (that's Task 7) — component is created and ready
|
|
**Quality checks:** typecheck ✓, lint ✓ (1 pre-existing warning), build ✓
|
|
**Visual review:** Not applicable (component not yet wired into App — will be visible after Task 7)
|
|
|