Created LastConsultationTile.tsx displaying the most recent role:
- Full-width card with green dot header
- Info row: Date, Organisation, Type (employment), Band
- Role title in accent color
- Bullet list of key achievements from examination array
- Data sourced from consultations[0] (most recent)
- Styling matches ref-06 spec: 8px card radius, border-light,
info labels 10px uppercase, values 11.5px 600 weight
- Integrated into DashboardLayout in proper sequence
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Created CoreSkillsTile component that presents skills as medications
with frequency dosing metaphor:
- Half-width card with amber dot header "REPEAT MEDICATIONS"
- 5 skill items with teal icon containers (lucide-react icons)
- Each item shows: skill name, frequency (e.g., "Twice daily"),
start year, years of experience, and "Active" status badge
- Uses medication metaphor: "Data Analysis · Twice daily · Since
2016 · 9 yrs"
- Data from src/data/skills.ts with user-specified frequencies
- Styled to match GP System concept with 6px radius items on
dashboard background (#F0F5F4)
- Integrated into DashboardLayout in right column next to
LatestResultsTile
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Created LatestResultsTile with 2x2 metric grid displaying four KPIs
- Each MetricCard shows value (22px, colored by variant), label, and sub text
- Metric cards use 6px radius, border-light, dashboard background
- Data sourced from src/data/kpis.ts (Budget £220M, Savings £14.6M, Years 9+, Team 12)
- CardHeader with teal dot + "LATEST RESULTS" + "Updated May 2025" right text
- Added data-kpi-id attributes for Task 17 flip card interaction
- Wired into DashboardLayout as half-width tile (left column)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Created PatientSummaryTile component displaying personal statement from profile.ts.
Full-width card with teal dot header, 13px body text, line-height 1.6.
Wired into DashboardLayout as first tile in grid.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fixed 48px header with three zones — brand (Home icon + name + version),
center search bar (button triggering command palette), and session info
(doctor name + active session pill with live time). Uses GP System
Dashboard tokens. Responsive: search bar hidden on mobile.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Created five new data files for GP System Dashboard:
- src/data/profile.ts: Personal statement from CV_v4.md
- src/data/tags.ts: Sidebar tags (5 entries with color variants)
- src/data/alerts.ts: Sidebar alert flags (2 entries)
- src/data/kpis.ts: Latest Results metrics (4 KPI entries with explanations)
- src/data/skills.ts: Core technical skills as "medications" (5 entries with user-specified frequencies)
Updated src/types/pmr.ts with new interfaces:
- Tag: label + colorVariant
- Alert: message + severity + icon
- KPI: id + value + label + sub + colorVariant + explanation
- SkillMedication: full medication structure with frequency, years, proficiency, category, status, icon
All CV content matches References/CV_v4.md exactly. All quality checks pass.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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>
- Replace old dark PMR palette with light teal GP System tokens
- Add three-tier shadow system (sm/md/lg) with warm green-gray tints
- Update border-radius: cards now 8px, inner elements 6px
- Add layout vars (sidebar-width 272px, topbar-height 48px)
- Fix font-ui/font-ui-alt swap: Elvaro Grotesque is now primary
- Add status color tokens (success, amber, alert, purple) with light/border variants
- Keep legacy --pmr-* aliases for backward compat during transition
- Update pmr Tailwind colors to new palette values
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Sidebar: Replace <aside role="navigation"> with <nav> to avoid conflicting roles
- Sidebar search: Add combobox role, aria-expanded, aria-controls, aria-autocomplete
- Search results: Add listbox/option roles, group labels for screen reader navigation
- PMRInterface: Remove redundant role="main", fix aria-label to use CV-friendly labels
- Mobile search: Add aria-label and type="search" for proper semantics
- Breadcrumb: Add aria-current="page" to current item, aria-hidden on separators
- Clinical alert: Add aria-label="Acknowledge clinical alert" on button per spec
- Patient banner: Change focus:ring to focus-visible:ring on action buttons
- Patient banner: Add role="img" to StatusDot for aria-label accessibility
- Login screen: Change role="status" to role="dialog" with aria-modal
- Login screen: Add loginButtonRef with auto-focus when typing completes
- Login screen: Add focus-visible ring style to Log In button
- Medications tabs: Add id="tab-{id}" to tab buttons, fix aria-labelledby on panels
- Consultations: Wrap entries in <article> per semantic HTML spec
- Problems: Change TrafficLight dot from role="img" to aria-hidden (text label handles it)
- App: Add sr-only live region announcing "Patient Record for Charlwood, Andrew" on PMR entry
- Skip button: Add focus-visible ring for keyboard users
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Installed fuse.js for fuzzy search functionality
- Created src/lib/search.ts with buildSearchIndex and groupResultsBySection functions
- Search index includes all consultations, medications, problems, investigations, and documents
- Updated ClinicalSidebar to use fuse.js instead of simple filter
- Search results grouped by section (Experience, Skills, Achievements, Projects, Education)
- Section headers show icon and count
- Each result shows title and highlight text (truncated)
- Clicking a result navigates to the section and expands the matching item
- Minimum 2 characters required for search
- Top 10 results displayed
- Clean dropdown styling with hover states
- Integrates with AccessibilityContext to set expandedItem
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Replaced all font-inter references with font-ui (Elvaro Grotesque)
- Updated font-mono to font-geist for codes and dates ([MGT001], Jul 2024, etc.)
- Changed hover colors from bg-blue-50 to bg-[#EFF6FF] (blue tint)
- Added shadow-pmr to both Active and Resolved Problems cards
- Switched from CSS transitions to Framer Motion for expand/collapse animations
- AnimatePresence with height-only animation (no opacity fade per guardrail)
- Chevron rotation via motion.div (180° when expanded)
- prefersReducedMotion support (duration: 0)
- Updated font sizes: text-[13px] for headers, text-[14px] for body, text-xs for labels
- TrafficLight component now uses font-ui for text labels
- Added AccessibilityContext integration (setExpandedItem for breadcrumb)
- Mobile cards: added shadow-pmr, updated all font references to font-ui/font-geist
- Added focus-visible rings on linked consultation buttons
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Rebuild medications/skills view from ref-medications.md spec with
Clinical Luxury design direction. Three category tabs with count
badges, semantic table with sortable columns, expandable prescribing
history with vertical timeline, and Framer Motion height animation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- ClinicalAlert: Framer Motion spring animation entrance, icon crossfade
(AlertTriangle → CheckCircle), hold beat, height collapse sequence
- Demographics card: Full-width 2-column key-value layout with proper
label alignment, monospace data values
- Active Problems card: Traffic light dots with text labels (guardrail)
- Quick Medications table: Semantic <table>, alternating rows, hover states
- Last Consultation card: Date in Geist Mono, NHS blue org, role preview
- All cards: font-ui (Elvaro Grotesque), multi-layered shadows, #E5E7EB borders
- Grid: 2-column desktop layout, single column mobile
- prefers-reduced-motion: instant alert, no animations
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Changes made:
- Created Breadcrumb.tsx component with Patient Record > [View] > [Expanded Item] navigation
- Integrated Breadcrumb into PMRInterface (desktop/tablet only, not mobile)
- Breadcrumb receives currentView, expandedItem props and handles navigation callbacks
- Updated all font references from font-inter to font-ui (Elvaro Grotesque)
- Added shadow-pmr to default view placeholder card
- Mobile back button updated to use font-ui
Visual verification:
- Breadcrumb renders correctly with gray-400 text, chevron separators, 13px font size
- Navigation updates breadcrumb path correctly (tested Summary → Experience)
- Layout: fixed sidebar, sticky banner, scrollable content all working
- View switching is instant (no animation between views)
- Premium font (Elvaro Grotesque) rendering throughout interface
Quality checks: All passed (typecheck, lint, build — 396.39 KB bundle)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Replace clinical jargon labels with CV-friendly terms: Experience,
Skills, Achievements, Projects, Education, Contact
- Replace all font-inter references with font-ui (Elvaro Grotesque)
- Fix Tailwind opacity syntax: bg-white/12 → bg-white/[0.12] etc.
- Add right edge border (border-r border-[#334155]) for sidebar depth
- Add focus-visible ring styles on all nav buttons
- Set explicit h-[44px] and font-[14px] per design spec
- Add border-transparent on inactive items to prevent layout shift
- Update footer text color to #64748B per spec
- Update MobileBottomNav labels to match sidebar convention
- Update PMRInterface viewLabels to CV-friendly names
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Root cause: sentinel element with `absolute top-0` inside PatientBanner was
positioned at viewport top, always triggering the IntersectionObserver's
-100px rootMargin threshold — banner was permanently stuck in condensed state.
Fix: Restructured PMRInterface layout from document-scroll to flex container
with explicit scroll container (`overflow-y-auto` on main). Lifted scroll
condensation logic to PMRInterface, passing `isCondensed` prop down to
PatientBanner. Replaced IntersectionObserver with scroll event listener on
the main element for reliable scroll position detection.
Key changes:
- PMRInterface: flex h-screen overflow-hidden layout (sidebar + content column)
- PatientBanner: accepts isCondensed prop, removed sticky/sentinel/hook
- ClinicalSidebar: h-full instead of h-screen sticky (parent handles sizing)
- useScrollCondensation: scroll event on container element via callback ref
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace font-inter with font-ui (Elvaro Grotesque) throughout banner
- Add custom NHSNumberWithTooltip with Framer Motion animated reveal
- Add AnimatePresence crossfade between full/condensed banner states
- Animate mobile overflow menu enter/exit
- Add SkipButton to App.tsx for boot/ECG phase skip
- Add shadow-pmr-banner, focus ring styles, prefers-reduced-motion support
- Fix mobile banner to use patient data instead of hardcoded values
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
admin