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