202 lines
8.2 KiB
Markdown
202 lines
8.2 KiB
Markdown
# 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`
|
||
- [x] Create `src/data/profile.ts` (personal statement)
|
||
- [x] Create `src/data/tags.ts` (sidebar tags)
|
||
- [x] Create `src/data/alerts.ts` (sidebar alert flags)
|
||
- [x] Create `src/data/kpis.ts` (Latest Results metrics)
|
||
- [x] Create `src/data/skills.ts` (skills with medication frequency + years)
|
||
- [x] Update `src/types/pmr.ts` (new interfaces)
|
||
- [x] 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)
|
||
- [x] Create `src/components/TopBar.tsx`
|
||
- [x] Brand section (icon + name + version tag)
|
||
- [x] Search bar (triggers command palette, not inline search)
|
||
- [x] Session info (mono font, pill badge)
|
||
- [x] Fixed position, 48px height, white bg, bottom border
|
||
- [x] Run quality checks
|
||
|
||
#### Task 5: Build new Sidebar — PersonHeader
|
||
> Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (Sidebar PersonHeader section)
|
||
- [x] Create `src/components/Sidebar.tsx`
|
||
- [x] Avatar circle (52px, teal gradient, initials)
|
||
- [x] Name, title, status badge with pulse dot
|
||
- [x] Details grid (GPhC, Education, Location, Phone, Email, Registered)
|
||
- [x] 272px width, light background, right border
|
||
- [x] Run quality checks
|
||
|
||
#### Task 6: Build new Sidebar — Tags + Alerts
|
||
> Detail: `Ralph/refs/ref-03-topbar-sidebar.md` (Tags and Alerts section)
|
||
- [x] Section title component (uppercase, divider line)
|
||
- [x] Tags section (flex wrap pills, color variants)
|
||
- [x] Alerts section (colored flag items with icons)
|
||
- [x] Run quality checks
|
||
|
||
#### Task 7: Build DashboardLayout and wire up App.tsx
|
||
> Detail: `Ralph/refs/ref-04-dashboard-layout.md`
|
||
- [x] Create `src/components/DashboardLayout.tsx`
|
||
- [x] Three-zone layout: TopBar (fixed) + Sidebar (fixed) + Main (scrollable card grid)
|
||
- [x] Card grid: 2 columns desktop, 1 column <900px
|
||
- [x] Framer Motion entrance animations (topbar → sidebar → content)
|
||
- [x] Update App.tsx: replace PMRInterface with DashboardLayout in PMR phase
|
||
- [x] Verify boot → ECG → login → dashboard transition works
|
||
- [x] 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)
|
||
- [x] Create `src/components/Card.tsx`
|
||
- [x] Base card styling (white, border, radius 8px, shadow-sm, hover shadow-md)
|
||
- [x] `full` variant (spans both grid columns)
|
||
- [x] CardHeader sub-component (dot + title + optional right text)
|
||
- [x] Run quality checks
|
||
|
||
#### Task 9: Build PatientSummary tile
|
||
> Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (PatientSummary section)
|
||
- [x] Create `src/components/tiles/PatientSummaryTile.tsx`
|
||
- [x] Full-width card, first in grid
|
||
- [x] Personal statement from `src/data/profile.ts`
|
||
- [x] Run quality checks
|
||
|
||
#### Task 10: Build LatestResults tile
|
||
> Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (LatestResults section)
|
||
- [x] Create `src/components/tiles/LatestResultsTile.tsx`
|
||
- [x] Half-width card, 2x2 metric grid
|
||
- [x] Four KPI metric cards with colored values
|
||
- [x] Data from `src/data/kpis.ts`
|
||
- [x] Run quality checks
|
||
|
||
#### Task 11: Build CoreSkills tile ("Repeat Medications")
|
||
> Detail: `Ralph/refs/ref-05-card-and-top-tiles.md` (CoreSkills section)
|
||
- [x] Create `src/components/tiles/CoreSkillsTile.tsx`
|
||
- [x] Half-width card, next to LatestResults
|
||
- [x] Skills listed as medications with frequency + years
|
||
- [x] Data from `src/data/skills.ts`
|
||
- [x] Run quality checks
|
||
|
||
#### Task 12: Build LastConsultation tile
|
||
> Detail: `Ralph/refs/ref-06-bottom-tiles.md` (LastConsultation section)
|
||
- [x] Create `src/components/tiles/LastConsultationTile.tsx`
|
||
- [x] Full-width card
|
||
- [x] Header info row (Date, Org, Type, Band)
|
||
- [x] Role title + achievement bullet list
|
||
- [x] Data from first entry in `src/data/consultations.ts`
|
||
- [x] Run quality checks
|
||
|
||
#### Task 13: Build CareerActivity tile
|
||
> Detail: `Ralph/refs/ref-06-bottom-tiles.md` (CareerActivity section)
|
||
- [x] Create `src/components/tiles/CareerActivityTile.tsx`
|
||
- [x] Full-width card, two-column activity grid
|
||
- [x] Merge roles + projects + certs + education into timeline
|
||
- [x] Color-coded dots by entry type
|
||
- [x] Run quality checks
|
||
|
||
#### Task 14: Build Education tile
|
||
> Detail: `Ralph/refs/ref-06-bottom-tiles.md` (Education section)
|
||
- [x] Create `src/components/tiles/EducationTile.tsx`
|
||
- [x] Full-width card, below Career Activity
|
||
- [x] Education entries from documents data
|
||
- [x] Run quality checks
|
||
|
||
#### Task 15: Build Projects tile
|
||
> Detail: `Ralph/refs/ref-06-bottom-tiles.md` (Projects section)
|
||
- [x] Create `src/components/tiles/ProjectsTile.tsx`
|
||
- [x] Full-width card, prominent presentation
|
||
- [x] Status badges, project names, years, descriptions
|
||
- [x] Data from `src/data/investigations.ts`
|
||
- [x] Run quality checks
|
||
|
||
### Phase 3: Interactions
|
||
|
||
#### Task 16: Tile expansion system
|
||
> Detail: `Ralph/refs/ref-07-interactions.md` (Tile Expansion section)
|
||
- [x] CareerActivity items expand to show full role detail
|
||
- [x] Projects items expand to show methodology, tech stack, results
|
||
- [x] CoreSkills items expand to show prescribing history
|
||
- [x] Height-only animation (200ms, no opacity fade)
|
||
- [x] Single-expand accordion
|
||
- [x] Keyboard: Enter/Space to expand, Escape to collapse
|
||
- [x] 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)
|