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>
admin