portfolio/Ralph/progress.txt

# 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)