admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c88ceba1364b682e8cc983ed1130a1e708088966
portfolio/Ralph/IMPLEMENTATION_PLAN.md
T
admin c88ceba136 Update progress: Task 1 completed (design tokens) 
Also includes manual intervention files: updated CLAUDE.md,
IMPLEMENTATION_PLAN.md, and ref files for GP System Dashboard redesign.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-13 17:01:29 +00:00

8.2 KiB
Raw Blame History

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

  • Update CSS custom properties in src/index.css (new palette, shadows, layout vars)
  • Update tailwind.config.js (colors, shadows, borders, radius)
  • Keep boot/ECG/login tokens unchanged
  • 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

  • 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)
Reference in New Issue View Git Blame Copy Permalink