diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx
index 8939a05..bd9a0de 100644
--- a/src/components/DashboardLayout.tsx
+++ b/src/components/DashboardLayout.tsx
@@ -6,7 +6,6 @@ import Sidebar from './Sidebar'
import { CommandPalette } from './CommandPalette'
import { DetailPanel } from './DetailPanel'
import { PatientSummaryTile } from './tiles/PatientSummaryTile'
-import { LatestResultsTile } from './tiles/LatestResultsTile'
import { CoreSkillsTile } from './tiles/CoreSkillsTile'
import { LastConsultationTile } from './tiles/LastConsultationTile'
import { CareerActivityTile } from './tiles/CareerActivityTile'
@@ -165,12 +164,10 @@ export function DashboardLayout() {
}}
>
- {/* PatientSummaryTile — full width */}
+ {/* PatientSummaryTile — full width (includes Latest Results subsection) */}
- {/* LatestResultsTile — half width (left) */}
-
- {/* ProjectsTile — half width (right) */}
+ {/* ProjectsTile — half width */}
{/* CoreSkillsTile — full width */}
diff --git a/src/components/tiles/PatientSummaryTile.tsx b/src/components/tiles/PatientSummaryTile.tsx
index 1e76f64..9b4b6bd 100644
--- a/src/components/tiles/PatientSummaryTile.tsx
+++ b/src/components/tiles/PatientSummaryTile.tsx
@@ -1,54 +1,105 @@
import React from 'react'
-import { Card, CardHeader } from '../Card'
+import { CardHeader } from '../Card'
+import { ParentSection } from '../ParentSection'
+import { kpis } from '@/data/kpis'
+import type { KPI } from '@/types/pmr'
+import { useDetailPanel } from '@/contexts/DetailPanelContext'
+
+const colorMap: Record
= {
+ green: '#059669',
+ amber: '#D97706',
+ teal: '#0D6E6E',
+}
+
+interface MetricCardProps {
+ kpi: KPI
+}
+
+function MetricCard({ kpi }: MetricCardProps) {
+ const { openPanel } = useDetailPanel()
+
+ const handleClick = () => {
+ openPanel({ type: 'kpi', kpi })
+ }
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ openPanel({ type: 'kpi', kpi })
+ }
+ }
+
+ const buttonStyles: React.CSSProperties = {
+ width: '100%',
+ textAlign: 'left',
+ padding: '16px',
+ background: 'var(--surface)',
+ border: '1px solid var(--border-light)',
+ borderRadius: 'var(--radius-sm)',
+ cursor: 'pointer',
+ transition: 'border-color 150ms ease-out, box-shadow 150ms ease-out',
+ }
+
+ const valueStyles: React.CSSProperties = {
+ fontSize: '28px',
+ fontWeight: 700,
+ letterSpacing: '-0.02em',
+ lineHeight: 1.2,
+ color: colorMap[kpi.colorVariant],
+ }
+
+ const labelStyles: React.CSSProperties = {
+ fontSize: '12px',
+ fontWeight: 500,
+ color: 'var(--text-primary)',
+ marginTop: '4px',
+ }
+
+ const subStyles: React.CSSProperties = {
+ fontSize: '10px',
+ color: 'var(--text-tertiary)',
+ fontFamily: 'var(--font-geist-mono)',
+ marginTop: '2px',
+ }
+
+ return (
+ {
+ e.currentTarget.style.borderColor = 'var(--accent-border)'
+ e.currentTarget.style.boxShadow = 'var(--shadow-md)'
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.borderColor = 'var(--border-light)'
+ e.currentTarget.style.boxShadow = 'none'
+ }}
+ >
+ {kpi.value}
+ {kpi.label}
+ {kpi.sub}
+
+ )
+}
export function PatientSummaryTile() {
- // Key statistics from CV_v4.md
- const highlights = [
- { label: '9+ Years', sublabel: 'Professional Experience' },
- { label: '1.2M', sublabel: 'Population Served' },
- { label: '£220M', sublabel: 'Budget Managed' },
- { label: '£14.6M+', sublabel: 'Savings Identified' },
- ]
-
- const highlightStripStyles: React.CSSProperties = {
- display: 'grid',
- gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
- gap: '12px',
- marginBottom: '20px',
- paddingBottom: '20px',
- borderBottom: '1px solid var(--border-light)',
- }
-
- const highlightItemStyles: React.CSSProperties = {
- display: 'flex',
- flexDirection: 'column',
- gap: '2px',
- }
-
- const highlightValueStyles: React.CSSProperties = {
- fontSize: '18px',
- fontWeight: 700,
- color: 'var(--accent)',
- fontFamily: 'var(--font-ui)',
- }
-
- const highlightLabelStyles: React.CSSProperties = {
- fontSize: '11px',
- fontWeight: 500,
- color: 'var(--text-secondary)',
- textTransform: 'uppercase',
- letterSpacing: '0.02em',
- }
-
const profileTextStyles: React.CSSProperties = {
fontSize: '13px',
lineHeight: '1.6',
color: 'var(--text-primary)',
}
- // Split profile text into structured sections with bold key phrases
- const renderProfileWithHierarchy = () => {
- return (
+ const kpiGridStyles: React.CSSProperties = {
+ display: 'grid',
+ gridTemplateColumns: '1fr 1fr',
+ gap: '12px',
+ }
+
+ return (
+
+ {/* Profile text */}
Healthcare leader combining clinical pharmacy expertise with proficiency in{' '}
Python, SQL, and data analytics , self-taught over the past decade through a drive to find root causes in data and build the most efficient solutions to complex problems. Currently{' '}
@@ -58,25 +109,16 @@ export function PatientSummaryTile() {
£14.6M+ through automated, data-driven analysis. Skilled at translating complex clinical, financial, and analytical requirements into clear recommendations for{' '}
executive stakeholders .
- )
- }
- return (
-
-
-
- {/* Highlight strip with key stats */}
-
- {highlights.map((highlight, idx) => (
-
-
{highlight.label}
-
{highlight.sublabel}
-
- ))}
+ {/* Latest Results subsection */}
+
+
+
+ {kpis.map((kpi) => (
+
+ ))}
+
-
- {/* Profile text with visual hierarchy through bold key phrases */}
- {renderProfileWithHierarchy()}
-
+
)
}