Elvaro Grotesque 600, -0.02em tracking with responsive scale from
1.375rem (mobile) to 2.2rem (desktop). Refined from the baseline
700/2.4rem for a more premium, intentional feel.
SubNav: horizontal scroll with hidden scrollbar, 44px touch targets.
DetailPanel: close button enlarged to 44px. Touch target fixes on
CoreSkillsTile, ProjectsTile, and LastConsultationTile interactive elements.
- Created ConsultationDetail.tsx component to render full role details
- Displays role title, organization, dates with current badge
- Renders history paragraph (consultation.history)
- Shows achievement bullets (consultation.examination)
- Displays outcomes/impact (consultation.plan)
- Renders coded entries as badges with code + description
- Wired into DetailPanel for both 'consultation' and 'career-role' types
- Styled consistently with dashboard design system
- Typecheck and build pass successfully
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Created src/components/detail/KPIDetail.tsx that renders rich KPI story
content inside the detail panel. Wired into DetailPanel so content.type
=== 'kpi' renders this component.
Component displays:
- Large headline number (48px, colored by kpi.colorVariant)
- KPI label and subtitle
- Period badge (if story.period exists)
- Context paragraph (story.context)
- Your role paragraph (story.role)
- Key outcomes as bullet list (story.outcomes)
Graceful fallback implemented: if story is undefined, shows kpi.value
and kpi.explanation instead.
Styling matches dashboard design system with fonts (Elvaro Grotesque,
Geist Mono), colors (CSS custom properties), and spacing conventions.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add OSCE score (80%) to MPharm inline details via educationExtras data
- Show research project with full description (Drug delivery & cocrystals, 75.1%)
- Display A-level grades as Mathematics (A*) · Chemistry (B) · Politics (C)
- Include Mary Seacole programme detail from educationExtras
- Import and use educationExtras data for dynamic inline content
- Add osceScore field to EducationExtra type
- Each entry clickable to open detail panel, hover border shift intact
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Show richer inline content: MPharm research score (75.1%), Mary Seacole score (78%), A-level grades
- Each education entry is now clickable -> opens detail panel
- Hover state: border color shift to teal with shadow deepening
- Use documents data from documents.ts for accurate content
- Maintains existing visual hierarchy and spacing
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Replace in-place accordion expansion with detail panel triggers for role items
- Add hover preview showing lift effect, shadow deepens, and 1-2 lines preview text
- Integrate with DetailPanelContext to open career-role panels on click
- Keep color-coded dots and entry type styling (teal, amber, green, purple)
- Add placeholder container for CareerConstellation component (to be implemented later)
- Remove unused AnimatePresence, motion imports and accordion-related code
- Remove prefersReducedMotion and borderColorMap (no longer needed)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Import useDetailPanel hook and ChevronRight icon
- Make header info row clickable to open consultation detail panel
- Add "View full record" button at bottom of tile
- Both triggers call openPanel({ type: 'consultation', consultation })
- Add hover states to clickable areas
- Include keyboard navigation support (Enter/Space)
- Add aria-labels for accessibility
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove full prop from Card (now half-width, single grid column)
- Replace accordion expansion with detail panel trigger
- Compact project cards with status dot + name + year (right-aligned)
- Tech stack shown as small inline tags (9px, monospace)
- Each project card clickable → openPanel({ type: 'project', investigation })
- Hover effects: border color shift to accent + shadow deepens
- Remove AnimatePresence and expansion state management
- Simplified component with focus on panel delegation
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Full-width card with skills grouped by Technical, Healthcare Domain, and
Strategic & Leadership categories. Top 4 per category sorted by proficiency.
Individual skills open detail panel; categories with >4 skills show 'View all'
button triggering panel. Removed old single-expand accordion. Category headers
use sidebar section divider styling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Create src/data/constellation.ts with role-skill mapping for D3 career graph
- Export RoleSkillMapping interface defining roleId and skillIds structure
- Map 6 career roles to their associated skill IDs from skills.ts
- Export constellationNodes array (5 role nodes + 21 skill nodes) with organization, startYear, endYear, orgColor for roles and domain for skills
- Export constellationLinks array connecting skills to roles with strength values (0-1)
- Role orgColors: Tesco (#00897B), NHS (#005EB8) for distinct visual grouping
- All role IDs match consultation IDs from consultations.ts
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Wrap DashboardLayout with DetailPanelProvider in App.tsx
- Import and render DetailPanel component alongside CommandPalette
- Reorder tiles: PatientSummary (full) → LatestResults (half) + Projects (half) → CoreSkills (full) → LastConsultation (full) → CareerActivity (full) → Education (full)
- Update ProjectsTile from full-width to half-width (remove full prop)
- Update CoreSkillsTile from half-width to full-width (add full prop)
- SubNav already renders between TopBar and content
- Content area marginTop already accounts for both TopBar and SubNav heights
- All tiles already have data-tile-id attributes for SubNav scrolling
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add educationExtras.ts with expanded detail for education entries:
- MPharm: extracurriculars and research description from CV
- Mary Seacole: programme detail about leadership qualification
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Change 4th KPI from 'Team Size Led' to 'Population Served' (1.2M)
- Add story field to all 4 KPIs with context, role, outcomes, and period
- £220M story: ICB prescribing budget oversight with forecasting models
- £14.6M story: Efficiency programme identification through data analysis
- 9+ Years story: Career progression from community pharmacy to system leadership
- 1.2M story: Population health analytics for Norfolk & Waveney ICS
- All story content sourced from References/CV_v4.md
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>