portfolio/Ralph/IMPLEMENTATION_PLAN.md

# Implementation Plan — GP System Dashboard Overhaul

## Project Overview

Replace the "CareerRecord PMR" sidebar-nav + view-switching interface with a tile-based GP System dashboard called "CVMIS" Reference design: `References/GPSystemconcept.html`.

## Quality Checks

- `npm run typecheck` — zero errors
- `npm run lint` — pass (pre-existing AccessibilityContext warning OK)
- `npm run build` — must succeed

## Important

**This file is for progress tracking only.** For implementation detail on any task, read the referenced file in `Ralph/refs/`. Do NOT bloat this file with implementation notes — keep it lean.

---

## Tasks

### Phase 0: Foundation

#### Task 1: Update design tokens and Tailwind config
> Detail: `Ralph/refs/ref-01-design-tokens.md`
- [x] Update CSS custom properties in `src/index.css` (new palette, shadows, layout vars)
- [x] Update `tailwind.config.js` (colors, shadows, borders, radius)
- [x] Keep boot/ECG/login tokens unchanged
- [x] Run quality checks

#### Task 2: Create new data files and update types
> Detail: `Ralph/refs/ref-02-data-types.md`
- [ ] Create `src/data/profile.ts` (personal statement)
- [ ] Create `src/data/tags.ts` (sidebar tags)
- [ ] Create `src/data/alerts.ts` (sidebar alert flags)
- [ ] Create `src/data/kpis.ts` (Latest Results metrics)
- [ ] Create `src/data/skills.ts` (skills with medication frequency + years)
- [ ] Update `src/types/pmr.ts` (new interfaces)
- [ ] Run quality checks

#### Task 3: Update CLAUDE.md for new architecture
- [x] Already completed during project setup (manual intervention 2026-02-13)

### Phase 1: Core Layout

#### Task 4: Build TopBar component
> Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (TopBar section)
- [ ] Create `src/components/TopBar.tsx`
- [ ] Brand section (icon + name + version tag)
- [ ] Search bar (triggers command palette, not inline search)
- [ ] Session info (mono font, pill badge)
- [ ] Fixed position, 48px height, white bg, bottom border
- [ ] Run quality checks

#### Task 5: Build new Sidebar — PersonHeader
> Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (Sidebar PersonHeader section)
- [ ] Create `src/components/Sidebar.tsx`
- [ ] Avatar circle (52px, teal gradient, initials)
- [ ] Name, title, status badge with pulse dot
- [ ] Details grid (GPhC, Education, Location, Phone, Email, Registered)
- [ ] 272px width, light background, right border
- [ ] Run quality checks

#### Task 6: Build new Sidebar — Tags + Alerts
> Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (Tags and Alerts section)
- [ ] Section title component (uppercase, divider line)
- [ ] Tags section (flex wrap pills, color variants)
- [ ] Alerts section (colored flag items with icons)
- [ ] Run quality checks

#### Task 7: Build DashboardLayout and wire up App.tsx
> Detail: `Ralph/refs/ref-04-dashboard-layout.md`
- [ ] Create `src/components/DashboardLayout.tsx`
- [ ] Three-zone layout: TopBar (fixed) + Sidebar (fixed) + Main (scrollable card grid)
- [ ] Card grid: 2 columns desktop, 1 column <900px
- [ ] Framer Motion entrance animations (topbar → sidebar → content)
- [ ] Update App.tsx: replace PMRInterface with DashboardLayout in PMR phase
- [ ] Verify boot → ECG → login → dashboard transition works
- [ ] Run quality checks

### Phase 2: Dashboard Tiles

#### Task 8: Build reusable Card component
> Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (Card section)
- [ ] Create `src/components/Card.tsx`
- [ ] Base card styling (white, border, radius 8px, shadow-sm, hover shadow-md)
- [ ] `full` variant (spans both grid columns)
- [ ] CardHeader sub-component (dot + title + optional right text)
- [ ] Run quality checks

#### Task 9: Build PatientSummary tile
> Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (PatientSummary section)
- [ ] Create `src/components/tiles/PatientSummaryTile.tsx`
- [ ] Full-width card, first in grid
- [ ] Personal statement from `src/data/profile.ts`
- [ ] Run quality checks

#### Task 10: Build LatestResults tile
> Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (LatestResults section)
- [ ] Create `src/components/tiles/LatestResultsTile.tsx`
- [ ] Half-width card, 2x2 metric grid
- [ ] Four KPI metric cards with colored values
- [ ] Data from `src/data/kpis.ts`
- [ ] Run quality checks

#### Task 11: Build CoreSkills tile ("Repeat Medications")
> Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (CoreSkills section)
- [ ] Create `src/components/tiles/CoreSkillsTile.tsx`
- [ ] Half-width card, next to LatestResults
- [ ] Skills listed as medications with frequency + years
- [ ] Data from `src/data/skills.ts`
- [ ] Run quality checks

#### Task 12: Build LastConsultation tile
> Detail: `Ralph/refs/ref-06-bottom-tiles.md` (LastConsultation section)
- [ ] Create `src/components/tiles/LastConsultationTile.tsx`
- [ ] Full-width card
- [ ] Header info row (Date, Org, Type, Band)
- [ ] Role title + achievement bullet list
- [ ] Data from first entry in `src/data/consultations.ts`
- [ ] Run quality checks

#### Task 13: Build CareerActivity tile
> Detail: `Ralph/refs/ref-06-bottom-tiles.md` (CareerActivity section)
- [ ] Create `src/components/tiles/CareerActivityTile.tsx`
- [ ] Full-width card, two-column activity grid
- [ ] Merge roles + projects + certs + education into timeline
- [ ] Color-coded dots by entry type
- [ ] Run quality checks

#### Task 14: Build Education tile
> Detail: `Ralph/refs/ref-06-bottom-tiles.md` (Education section)
- [ ] Create `src/components/tiles/EducationTile.tsx`
- [ ] Full-width card, below Career Activity
- [ ] Education entries from documents data
- [ ] Run quality checks

#### Task 15: Build Projects tile
> Detail: `Ralph/refs/ref-06-bottom-tiles.md` (Projects section)
- [ ] Create `src/components/tiles/ProjectsTile.tsx`
- [ ] Full-width card, prominent presentation
- [ ] Status badges, project names, years, descriptions
- [ ] Data from `src/data/investigations.ts`
- [ ] Run quality checks

### Phase 3: Interactions

#### Task 16: Tile expansion system
> Detail: `Ralph/refs/ref-07-interactions.md` (Tile Expansion section)
- [ ] CareerActivity items expand to show full role detail
- [ ] Projects items expand to show methodology, tech stack, results
- [ ] CoreSkills items expand to show prescribing history
- [ ] Height-only animation (200ms, no opacity fade)
- [ ] Single-expand accordion
- [ ] Keyboard: Enter/Space to expand, Escape to collapse
- [ ] Run quality checks

#### Task 17: KPI flip card interaction
> Detail: `Ralph/refs/ref-07-interactions.md` (KPI Flip section)
- [ ] LatestResults metrics flip on click
- [ ] Front: value + label. Back: explanation text
- [ ] CSS perspective flip (400ms) or instant swap with reduced motion
- [ ] One card flipped at a time
- [ ] Run quality checks

#### Task 18: Build Command Palette
> Detail: `Ralph/refs/ref-07-interactions.md` (Command Palette section)
- [ ] Create `src/components/CommandPalette.tsx`
- [ ] Ctrl+K trigger + search bar click trigger
- [ ] Overlay with backdrop blur, ESC to close
- [ ] Fuzzy search via fuse.js (adapt `src/lib/search.ts`)
- [ ] Grouped results by section + Quick Actions
- [ ] Keyboard navigation (arrows, Enter, Escape)
- [ ] Run quality checks

### Phase 4: Polish

#### Task 19: Responsive design
> Detail: `Ralph/refs/ref-08-polish.md` (Responsive section)
- [ ] Desktop (>1024px): full sidebar + 2-column grid
- [ ] Tablet (768–1024px): collapsed/hidden sidebar + adapted grid
- [ ] Mobile (<768px): no sidebar, single-column tiles, simplified topbar
- [ ] Touch-friendly targets (48px+)
- [ ] Run quality checks

#### Task 20: Accessibility audit
> Detail: `Ralph/refs/ref-08-polish.md` (Accessibility section)
- [ ] Semantic HTML (header, nav, main, article, section)
- [ ] Keyboard navigation (Tab, Enter/Space, Escape, Ctrl+K, arrows)
- [ ] ARIA (expanded, controls, labels, live regions, dialog)
- [ ] Focus management (trap in palette, visible rings, return focus)
- [ ] `prefers-reduced-motion` on all animations
- [ ] Color contrast verification
- [ ] Run quality checks

#### Task 21: Clean up and final polish
> Detail: `Ralph/refs/ref-08-polish.md` (Cleanup section)
- [ ] Remove unused old components (PatientBanner, ClinicalSidebar, Breadcrumb, etc.)
- [ ] Remove unused hooks (useScrollCondensation if unused)
- [ ] Verify no dead imports
- [ ] Final visual review against concept HTML
- [ ] Run quality checks (clean build)