diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 6784f0f..99a2fbc 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -28,7 +28,8 @@ "Bash(tasklist:*)", "Bash(npx -y serve -l 3333 .)", "Bash(npx serve:*)", - "Bash(timeout /t 3 /nobreak)" + "Bash(timeout /t 3 /nobreak)", + "Bash(jq:*)" ] } } diff --git a/LogoReveal/frame 1.jpg b/LogoReveal/frame 1.jpg new file mode 100644 index 0000000..654b585 Binary files /dev/null and b/LogoReveal/frame 1.jpg differ diff --git a/LogoReveal/frame 1.jpg:Zone.Identifier b/LogoReveal/frame 1.jpg:Zone.Identifier new file mode 100644 index 0000000..d6c1ec6 Binary files /dev/null and b/LogoReveal/frame 1.jpg:Zone.Identifier differ diff --git a/LogoReveal/frame 2.jpg b/LogoReveal/frame 2.jpg new file mode 100644 index 0000000..3939b4b Binary files /dev/null and b/LogoReveal/frame 2.jpg differ diff --git a/LogoReveal/frame 2.jpg:Zone.Identifier b/LogoReveal/frame 2.jpg:Zone.Identifier new file mode 100644 index 0000000..d6c1ec6 Binary files /dev/null and b/LogoReveal/frame 2.jpg:Zone.Identifier differ diff --git a/LogoReveal/frame 3.jpg b/LogoReveal/frame 3.jpg new file mode 100644 index 0000000..b2b9025 Binary files /dev/null and b/LogoReveal/frame 3.jpg differ diff --git a/LogoReveal/frame 3.jpg:Zone.Identifier b/LogoReveal/frame 3.jpg:Zone.Identifier new file mode 100644 index 0000000..d6c1ec6 Binary files /dev/null and b/LogoReveal/frame 3.jpg:Zone.Identifier differ diff --git a/LogoReveal/frame 4.jpg b/LogoReveal/frame 4.jpg new file mode 100644 index 0000000..4873993 Binary files /dev/null and b/LogoReveal/frame 4.jpg differ diff --git a/LogoReveal/frame 4.jpg:Zone.Identifier b/LogoReveal/frame 4.jpg:Zone.Identifier new file mode 100644 index 0000000..d6c1ec6 Binary files /dev/null and b/LogoReveal/frame 4.jpg:Zone.Identifier differ diff --git a/LogoReveal/frame 5.jpg b/LogoReveal/frame 5.jpg new file mode 100644 index 0000000..3ecdd80 Binary files /dev/null and b/LogoReveal/frame 5.jpg differ diff --git a/LogoReveal/frame 5.jpg:Zone.Identifier b/LogoReveal/frame 5.jpg:Zone.Identifier new file mode 100644 index 0000000..d6c1ec6 Binary files /dev/null and b/LogoReveal/frame 5.jpg:Zone.Identifier differ diff --git a/Ralph/archive/2026-02-14-dashboard-restructure/prd.json b/Ralph/archive/2026-02-14-dashboard-restructure/prd.json new file mode 100644 index 0000000..136ae31 --- /dev/null +++ b/Ralph/archive/2026-02-14-dashboard-restructure/prd.json @@ -0,0 +1,307 @@ +{ + "project": "Portfolio — Dashboard Restructure & Graph Improvements", + "branchName": "ralph/dashboard-restructure", + "description": "Restructure the dashboard into two parent sections (Patient Summary, Patient Pathway), improve constellation graph clarity, add hover-highlighting between experience/skills and graph, remove inaccurate CV data, and explore parent header typography.", + "userStories": [ + { + "id": "US-001", + "title": "Skip boot/login sequence for dev iteration", + "description": "As a developer, I want to skip the boot/ECG/login animation during this feature branch so I can iterate on the dashboard quickly.", + "acceptanceCriteria": [ + "In src/App.tsx, change the initial Phase state from 'boot' to 'pmr' so the app loads directly to the dashboard", + "The boot, ECG, and login phases are still present in code — only the initial state changes", + "App loads directly to the dashboard layout on refresh", + "Typecheck passes" + ], + "priority": 1, + "passes": true, + "notes": "Temporary — final story reverts this." + }, + { + "id": "US-002", + "title": "Remove inaccurate CV data from consultations and constellation", + "description": "As Andy, I want only real career entries so the portfolio doesn't contain fabricated content.", + "acceptanceCriteria": [ + "Remove the 'duty-pharmacist-2016' entry from src/data/consultations.ts — this role is not in References/CV_v4.md", + "Remove the corresponding role node for duty-pharmacist-2016 from src/data/constellation.ts constellationNodes array", + "Remove all links referencing duty-pharmacist-2016 from constellationLinks array", + "Remove duty-pharmacist-2016 from roleSkillMappings", + "Verify 4 roles remain in consultations.ts: interim-head-2025, deputy-head-2024, high-cost-drugs-2022, pharmacy-manager-2017", + "Verify 4 role nodes remain in constellation.ts", + "Typecheck passes" + ], + "priority": 2, + "passes": true, + "notes": "Check References/CV_v4.md for the accurate role list. The CV has 4 roles: Interim Head, Deputy Head, High-Cost Drugs, Pharmacy Manager (Tesco)." + }, + { + "id": "US-003", + "title": "Fix inaccurate timeline entries in CareerActivityTile", + "description": "As Andy, I want the career timeline to only show real certifications and remove fabricated project entries.", + "acceptanceCriteria": [ + "In src/components/tiles/CareerActivityTile.tsx buildTimeline() function, remove the 'Power BI Data Analyst Associate' certification entry — not in CV", + "Remove the 'Clinical Pharmacy Diploma' certification entry — not in CV", + "Add 'NHS Leadership Academy — Mary Seacole Programme' as a certification entry with date '2018' and meta 'NHS leadership qualification'", + "Remove the 'SQL Analytics Transformation' project entry — not a standalone project in the CV", + "Remove the 'Budget Oversight' project entry — budget management is a skill, not a project", + "Add A-Levels entry: title 'A-Levels: Mathematics (A*), Chemistry (B), Politics (C)', meta 'Highworth Grammar School', date '2009–2011', type 'edu'", + "Verify remaining timeline matches CV_v4.md: 4 roles + GPhC Registration + MPharm + Mary Seacole + A-Levels", + "Typecheck passes" + ], + "priority": 3, + "passes": true, + "notes": "Reference CV at References/CV_v4.md. The role entries in the timeline reference consultations by consultationId — since duty-pharmacist-2016 was removed in US-002, also remove any timeline entry referencing it." + }, + { + "id": "US-004", + "title": "Create ParentSection component for hierarchical layout", + "description": "As a developer, I need a parent section wrapper component that visually distinguishes top-level sections from child subsections.", + "acceptanceCriteria": [ + "Create src/components/ParentSection.tsx with props: title (string), children (ReactNode), optional className", + "Parent section renders as a Card (using existing Card component) spanning full width", + "Header text is large and prominent — at minimum 2.4rem (36px at 1920px) — clearly a top-level section marker, not a small label", + "Header uses font-ui (Elvaro Grotesque) at weight 600-700", + "Header text color is pmr-text-primary (#1A2B2A)", + "No colored dot on parent headers (dots are for subsections only)", + "20px (1.333rem) padding below header before children content", + "Component accepts children which will be the subsections", + "Typecheck passes" + ], + "priority": 4, + "passes": true, + "notes": "This is a new component — not modifying Card.tsx. ParentSection wraps Card and adds the large header treatment. Subsection headers continue to use the existing CardHeader style (12px uppercase with colored dot)." + }, + { + "id": "US-005", + "title": "Restructure Patient Summary as parent section with Latest Results subsection", + "description": "As a visitor, I want Patient Summary to contain the profile and Latest Results as a subsection.", + "acceptanceCriteria": [ + "In DashboardLayout.tsx, replace the standalone PatientSummaryTile and LatestResultsTile with a single ParentSection titled 'Patient Summary'", + "Inside the ParentSection, render the profile text (from PatientSummaryTile) first", + "Remove the 4 headline metric figures (9+ Years, 1.2M, £220M, £14.6M+) that are currently in PatientSummaryTile — these are redundant with the KPIs", + "Below the profile text, render Latest Results content as a subsection with its own CardHeader-style header ('LATEST RESULTS' with teal dot)", + "KPI flip cards retain their existing click-to-detail behaviour", + "The standalone LatestResultsTile import is removed from DashboardLayout", + "Typecheck passes", + "Verify in browser using dev-browser skill" + ], + "priority": 5, + "passes": true, + "notes": "The Latest Results subsection should look like a section within the parent card — use a CardHeader for 'LATEST RESULTS' and render the KPI grid below it. The parent ParentSection header 'Patient Summary' should be visually dominant." + }, + { + "id": "US-006", + "title": "Create Patient Pathway parent section with constellation graph", + "description": "As a visitor, I want a 'Patient Pathway' parent section that contains the constellation graph at the top.", + "acceptanceCriteria": [ + "In DashboardLayout.tsx, replace the standalone CareerActivityTile with a ParentSection titled 'Patient Pathway'", + "The constellation graph (CareerConstellation component) renders at the top of the Patient Pathway section", + "The CareerConstellation receives onRoleClick and onSkillClick handlers (same as current CareerActivityTile)", + "The standalone CareerActivityTile import is removed from DashboardLayout", + "Typecheck passes", + "Verify in browser using dev-browser skill" + ], + "priority": 6, + "passes": true, + "notes": "This story just sets up the parent section with the graph. The Last Consultation, experience/skills columns, and education are added in subsequent stories." + }, + { + "id": "US-007", + "title": "Move Last Consultation into Patient Pathway as subsection", + "description": "As a visitor, I want the most recent role details to appear within Patient Pathway below the graph.", + "acceptanceCriteria": [ + "Inside the Patient Pathway ParentSection (below the constellation graph), add a 'LAST CONSULTATION' subsection with green dot CardHeader", + "Render the last consultation content: date, organisation, type, band, role title, examination bullets — same content as the current LastConsultationTile", + "The standalone LastConsultationTile is removed from DashboardLayout grid", + "The LastConsultationTile.tsx file can be deleted (content is now inline in the Patient Pathway section)", + "Typecheck passes", + "Verify in browser using dev-browser skill" + ], + "priority": 7, + "passes": true, + "notes": "Reuse the rendering logic from LastConsultationTile — either inline it or extract a shared sub-component. The important thing is it lives inside the Patient Pathway ParentSection now." + }, + { + "id": "US-008", + "title": "Add two-column experience and skills layout in Patient Pathway", + "description": "As a visitor, I want work experience on the left and skills on the right within Patient Pathway.", + "acceptanceCriteria": [ + "Below the Last Consultation subsection in Patient Pathway, add a two-column CSS grid layout", + "Left column: subsection header 'WORK EXPERIENCE' (teal dot), lists all 4 roles from consultations.ts with accordion expand (one at a time)", + "Right column: subsection header 'REPEAT MEDICATIONS' (amber dot), shows categorised skills with expand — same content as CoreSkillsTile", + "Each role entry shows: role title, organisation, date range. Click to expand shows examination bullets and coded entries", + "On mobile (below md/768px), columns stack vertically: experience above skills", + "Grid gap matches the dashboard grid gap (16px / 1.067rem)", + "The standalone CoreSkillsTile is removed from DashboardLayout grid", + "Typecheck passes", + "Verify in browser using dev-browser skill" + ], + "priority": 8, + "passes": true, + "notes": "Reuse expansion patterns from existing CareerActivityTile and CoreSkillsTile. The two-column layout is within the Patient Pathway ParentSection card, not separate cards." + }, + { + "id": "US-009", + "title": "Move Education into Patient Pathway as subsection", + "description": "As a visitor, I want education entries at the bottom of Patient Pathway so all career-related info is in one place.", + "acceptanceCriteria": [ + "Below the two-column experience/skills grid in Patient Pathway, add an 'EDUCATION' subsection with purple dot CardHeader", + "Render education entries: MPharm, Mary Seacole Programme, A-Levels (same content as EducationTile plus A-Levels added in US-003)", + "The standalone EducationTile is removed from DashboardLayout grid", + "The EducationTile.tsx file can be deleted (content now in Patient Pathway)", + "Typecheck passes", + "Verify in browser using dev-browser skill" + ], + "priority": 9, + "passes": true, + "notes": "Education is the bottom-most subsection in Patient Pathway. Include A-Levels: Mathematics (A*), Chemistry (B), Politics (C) — Highworth Grammar School, 2009–2011." + }, + { + "id": "US-010", + "title": "Clean up removed standalone tiles and verify layout", + "description": "As a developer, I need to remove orphaned tile components and verify the dashboard grid has no gaps.", + "acceptanceCriteria": [ + "Delete src/components/tiles/LastConsultationTile.tsx if not already deleted", + "Delete src/components/tiles/CoreSkillsTile.tsx if not already deleted", + "Delete src/components/tiles/LatestResultsTile.tsx if not already deleted", + "Delete src/components/tiles/EducationTile.tsx if not already deleted", + "Delete src/components/tiles/CareerActivityTile.tsx if not already deleted", + "DashboardLayout grid contains only: PatientSummary ParentSection (full width) + Patient Pathway ParentSection (full width) + ProjectsTile (if it remains)", + "No broken imports or unused imports remain", + "No visual gaps in the dashboard grid", + "Typecheck passes", + "Verify in browser using dev-browser skill" + ], + "priority": 10, + "passes": true, + "notes": "ProjectsTile may remain as a standalone tile or be absorbed — check if it still makes sense as standalone. If so, keep it. The key outcome is that the deleted tiles have no remaining references." + }, + { + "id": "US-011", + "title": "Improve constellation graph visual clarity", + "description": "As a visitor, I want the graph to be clearer with better contrast, larger nodes, and an off-white background.", + "acceptanceCriteria": [ + "Graph container has an off-white background (e.g. #F5F7F6 or similar warm neutral) — can use the existing radial gradient approach but with a more visible base colour", + "Link lines use slightly thicker stroke (from 1px to 1.5-2px) and higher contrast colour (darker than current #D4E0DE at 0.3 opacity)", + "Role node radius increased from 24px to at least 30px", + "Skill node radius increased from 10px to at least 14px", + "Skill label font size increased from 9px to 10-11px for readability", + "Graph is initially scaled/zoomed so nodes fill the container at a comfortable viewing size — adjust force simulation parameters if needed (reduce charge repulsion, adjust link distance)", + "All existing interactions preserved (hover dim/highlight, click, keyboard nav)", + "Responsive height tiers still work (400/300/250px)", + "Typecheck passes", + "Verify in browser using dev-browser skill" + ], + "priority": 11, + "passes": true, + "notes": "The key issue is readability — the current graph is too sparse/faint. Larger nodes, thicker links, and stronger colours will help. The background should provide subtle contrast so the white card surface feels like the graph 'lives somewhere'." + }, + { + "id": "US-012", + "title": "Add hover-highlighting between experience/skills and constellation graph", + "description": "As a visitor, I want to hover over an experience or skill entry and see the corresponding node highlighted in the graph.", + "acceptanceCriteria": [ + "Add a highlightedNodeId state (string | null) to the Patient Pathway parent component", + "Pass highlightedNodeId as a prop to CareerConstellation", + "CareerConstellation applies its existing hover highlight logic when highlightedNodeId changes (dim non-connected nodes, brighten connected links)", + "When hovering a work experience entry, set highlightedNodeId to the corresponding consultation ID (which maps to a role node)", + "When hovering a skill entry, set highlightedNodeId to the skill ID", + "Highlight clears when mouse leaves the entry (set highlightedNodeId to null)", + "On touch devices: tap to highlight, tap elsewhere to clear", + "Highlighting feels immediate — no perceptible delay", + "Typecheck passes", + "Verify in browser using dev-browser skill" + ], + "priority": 12, + "passes": true, + "notes": "CareerConstellation already has hover logic that dims non-connected nodes. The new prop should trigger the same visual effect but from an external source. Use the existing adjacency map and opacity/stroke manipulation." + }, + { + "id": "US-013", + "title": "Update command palette data for restructured dashboard", + "description": "As a developer, I need the command palette search index to reflect the new section structure.", + "acceptanceCriteria": [ + "In src/lib/search.ts, update buildPaletteData() to reference new tile IDs (patient-summary, patient-pathway instead of old tile IDs)", + "Scroll actions target the correct data-tile-id values for the new ParentSection components", + "Skills palette items still open detail panels correctly", + "Experience items still open detail panels correctly", + "Remove any palette entries that reference deleted tiles (LastConsultation standalone, etc.)", + "Remove palette entries for deleted certifications (Power BI, Clinical Diploma) and projects (SQL Analytics Transformation, Budget Oversight)", + "Add palette entry for Mary Seacole Programme", + "Typecheck passes" + ], + "priority": 13, + "passes": true, + "notes": "The palette data model uses tileId for scroll targeting — these need to match the new data-tile-id attributes on ParentSection components." + }, + { + "id": "US-014", + "title": "Responsive verification and fixes", + "description": "As a developer, I need to verify the restructured dashboard works at all viewport sizes.", + "acceptanceCriteria": [ + "At 375px (mobile): single column, Patient Summary and Patient Pathway stack vertically, experience/skills columns stack, graph fits container, all text wraps", + "At 768px (tablet): single column, comfortable spacing", + "At 1024px (desktop): full layout, two-column experience/skills grid visible, sidebar inline", + "At 1920px: layout visually balanced, graph nodes and labels readable", + "No horizontal scrollbar at any tested width", + "Parent section headers scale appropriately across breakpoints", + "Fix any issues discovered during verification", + "Typecheck passes", + "Verify in browser using dev-browser skill at 375px, 768px, 1024px, and 1920px widths" + ], + "priority": 14, + "passes": true, + "notes": "Use Playwright to resize browser and take snapshots at each breakpoint. Fix any overflow, wrapping, or spacing issues found." + }, + { + "id": "US-015", + "title": "Explore parent header typography options", + "description": "As a designer, I want to evaluate different font treatments for parent section headers to find the most visually striking option.", + "acceptanceCriteria": [ + "Test Patient Summary and Patient Pathway headers with Elvaro Grotesque at weights 300, 400, 500, 600, 700, 900", + "Test headers with Blumir variable font at weights 100, 300, 500, 700", + "Test at sizes from 2rem (30px) up to 3.2rem (48px)", + "Consider uppercase vs title case vs sentence case for parent headers", + "Take screenshots of at least 3 different options for comparison", + "Headers must complement the clinical/luxury aesthetic — premium and intentional, not generic", + "Select the best option based on visual hierarchy, readability, and design coherence", + "Typecheck passes", + "Verify in browser using dev-browser skill" + ], + "priority": 15, + "passes": true, + "notes": "Explored 14 options across Elvaro (300-900) and Blumir (100-700), title case vs uppercase, sizes 1.4-3rem, various tracking. Selected: Elvaro Grotesque 600, 2.2rem, title case, -0.02em tracking. Rationale: font consistency, tight tracking feels premium, slightly reduced size is more data-dense/clinical, clear hierarchy above sub-headers." + }, + { + "id": "US-016", + "title": "Apply chosen parent header typography", + "description": "As a developer, I need to apply the selected font treatment to both parent section headers.", + "acceptanceCriteria": [ + "Apply the chosen font family, weight, size, and case to the ParentSection component header", + "Both Patient Summary and Patient Pathway headers use identical treatment", + "Font scales appropriately across breakpoints (may need responsive size adjustments)", + "Headers create clear visual hierarchy — unmistakably top-level sections", + "Typecheck passes", + "Verify in browser using dev-browser skill" + ], + "priority": 16, + "passes": true, + "notes": "Applied Elvaro Grotesque 600, -0.02em tracking with responsive scale: 1.375rem (mobile) → 1.6rem (sm) → 1.8rem (md) → 2.2rem (lg). Both headers identical. Verified at 375px (22px) and 1024px+ (35.2px)." + }, + { + "id": "US-017", + "title": "Re-enable boot/login sequence", + "description": "As a user, I want the full boot → ECG → login experience restored for production.", + "acceptanceCriteria": [ + "In src/App.tsx, change the initial Phase state back from 'pmr' to 'boot'", + "Boot → ECG → Login → Dashboard sequence works end to end", + "No other changes to App.tsx beyond reverting the initial state", + "Typecheck passes", + "Verify in browser using dev-browser skill: app starts at boot, progresses through ECG and login, arrives at restructured dashboard" + ], + "priority": 17, + "passes": true, + "notes": "Reverted initial phase from 'pmr' to 'boot'. Full flow verified: boot → ECG → login (credentials auto-typed) → click Log In → restructured dashboard loads with all sections." + } + ] +} diff --git a/Ralph/archive/2026-02-14-dashboard-restructure/progress.txt b/Ralph/archive/2026-02-14-dashboard-restructure/progress.txt new file mode 100644 index 0000000..1720e04 --- /dev/null +++ b/Ralph/archive/2026-02-14-dashboard-restructure/progress.txt @@ -0,0 +1,1168 @@ +# Progress Log + +## Codebase Patterns + +### Project Structure +- Components in `src/components/`, tiles in `src/components/tiles/` +- Detail renderers in `src/components/detail/` — KPIDetail, ConsultationDetail, SkillDetail, SkillsAllDetail, EducationDetail, ProjectDetail +- Data files in `src/data/` — consultations.ts, medications.ts, problems.ts, investigations.ts, documents.ts, patient.ts, tags.ts, alerts.ts, kpis.ts, skills.ts, educationExtras.ts, constellation.ts +- Types in `src/types/pmr.ts` (PMR interfaces) and `src/types/index.ts` (Phase type) +- Hooks in `src/hooks/` — useActiveSection.ts, useFocusTrap.ts +- Contexts in `src/contexts/` — AccessibilityContext.tsx (has 1 pre-existing ESLint warning — expected), DetailPanelContext.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) + +### Lucide Icons Typing +- Use `LucideIcon` type from `lucide-react` for icon maps, NOT `React.ComponentType<{ size: number }>` — the latter causes TS errors with ForwardRefExoticComponent + +### 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) + +### Dashboard Layout +- DashboardLayout.tsx is the main container for the pmr phase — replaces PMRInterface +- Three-zone: TopBar (fixed, z-100, 48px) + Sidebar (fixed left, 272px) + Main (scrollable card grid) +- Card grid: CSS Grid `repeat(2, 1fr)` gap 16px, responsive 1fr at ≤900px via `.dashboard-grid` class +- Entrance: three separate Framer Motion variants (topbar → sidebar → content), staggered with delays +- Sidebar: default export (`import Sidebar from './Sidebar'`), TopBar: named export (`import { TopBar } from './TopBar'`) +- Background color transition: DashboardLayout covers App.tsx's `bg-black` with `var(--bg-dashboard)` + `minHeight: 100vh` + +### Tile Expansion Pattern +- Framer Motion `AnimatePresence` + `motion.div` with `initial={{ height: 0 }}`, `animate={{ height: 'auto' }}`, `exit={{ height: 0 }}` +- `overflow: hidden` on the motion.div +- `prefers-reduced-motion` checked at module scope: `const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches` +- Transition: `prefersReducedMotion ? { duration: 0 } : { duration: 0.2, ease: 'easeOut' }` +- State: `expandedItemId: string | null` per tile component +- Keyboard: Enter/Space toggle, Escape collapse +- `role="button"`, `tabIndex={0}`, `aria-expanded` on clickable items +- Colored left border (2px) on expanded content panel +- CareerActivity maps activity→consultation via `consultationId`, CoreSkills maps skill→medication by name match + +### Command Palette +- `CommandPalette.tsx` renders at DashboardLayout level (z-index 1000, fixed overlay) +- Triggered by Ctrl+K (global listener in DashboardLayout) or TopBar search bar click +- Data model: `PaletteItem` with `PaletteAction` union (scroll, expand, link, download) +- `buildPaletteData()` returns 24 items across 6 sections, `buildSearchIndex()` wraps fuse.js +- `groupBySection()` maintains section order: Experience → Core Skills → Active Projects → Achievements → Education → Quick Actions +- All tiles have `data-tile-id` attribute (via Card `tileId` prop) for scroll targeting +- CSS animations in index.css: `palette-overlay-in`, `palette-modal-in` with `prefers-reduced-motion` overrides +- Legacy search exports (`SearchResult`, `buildLegacySearchIndex`, `groupResultsBySection`) kept for ClinicalSidebar backward compat — remove in Task 21 + +### 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 `