Task 10: Build LatestResults tile

- 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>
This commit is contained in:
2026-02-13 17:21:32 +00:00
parent 6501439cef
commit 040e46cbea
2 changed files with 74 additions and 0 deletions
+2
View File
@@ -3,6 +3,7 @@ import { motion } from 'framer-motion'
import { TopBar } from './TopBar'
import Sidebar from './Sidebar'
import { PatientSummaryTile } from './tiles/PatientSummaryTile'
import { LatestResultsTile } from './tiles/LatestResultsTile'
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
@@ -98,6 +99,7 @@ export function DashboardLayout() {
<PatientSummaryTile />
{/* LatestResultsTile — half width (left) */}
<LatestResultsTile />
{/* CoreSkillsTile — half width (right) */}
{/* LastConsultationTile — full width */}
{/* CareerActivityTile — full width */}