From d0df9137f9afcede7f41f93242bf7208ed4af2ae Mon Sep 17 00:00:00 2001 From: A Charlwood Date: Fri, 13 Feb 2026 17:27:28 +0000 Subject: [PATCH] Task 12: Build LastConsultation tile Created LastConsultationTile.tsx displaying the most recent role: - Full-width card with green dot header - Info row: Date, Organisation, Type (employment), Band - Role title in accent color - Bullet list of key achievements from examination array - Data sourced from consultations[0] (most recent) - Styling matches ref-06 spec: 8px card radius, border-light, info labels 10px uppercase, values 11.5px 600 weight - Integrated into DashboardLayout in proper sequence Co-Authored-By: Claude Sonnet 4.5 --- src/components/DashboardLayout.tsx | 4 + src/components/tiles/LastConsultationTile.tsx | 193 ++++++++++++++++++ 2 files changed, 197 insertions(+) create mode 100644 src/components/tiles/LastConsultationTile.tsx diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx index 60cea4b..95391b0 100644 --- a/src/components/DashboardLayout.tsx +++ b/src/components/DashboardLayout.tsx @@ -5,6 +5,7 @@ import Sidebar from './Sidebar' import { PatientSummaryTile } from './tiles/PatientSummaryTile' import { LatestResultsTile } from './tiles/LatestResultsTile' import { CoreSkillsTile } from './tiles/CoreSkillsTile' +import { LastConsultationTile } from './tiles/LastConsultationTile' const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches @@ -103,7 +104,10 @@ export function DashboardLayout() { {/* CoreSkillsTile — half width (right) */} + {/* LastConsultationTile — full width */} + + {/* CareerActivityTile — full width */} {/* EducationTile — full width */} {/* ProjectsTile — full width */} diff --git a/src/components/tiles/LastConsultationTile.tsx b/src/components/tiles/LastConsultationTile.tsx new file mode 100644 index 0000000..685fc70 --- /dev/null +++ b/src/components/tiles/LastConsultationTile.tsx @@ -0,0 +1,193 @@ +import React from 'react' +import { Card, CardHeader } from '../Card' +import { consultations } from '@/data/consultations' + +export const LastConsultationTile: React.FC = () => { + // Use the most recent consultation (first in array) + const consultation = consultations[0] + + // Format date to "May 2025" format + const formatDate = (dateStr: string): string => { + const date = new Date(dateStr) + return date.toLocaleDateString('en-GB', { month: 'long', year: 'numeric' }) + } + + // Extract employment type from duration string (e.g., "May 2025 — Nov 2025") + const getEmploymentType = (): string => { + // All ICB roles are Permanent · Full-time (from CV context) + if (consultation.organization.includes('ICB')) { + return 'Permanent · Full-time' + } + return 'Permanent' + } + + // Extract band from role context - ICB senior roles are typically Band 8a + const getBand = (): string => { + if (consultation.role.includes('Head')) { + return '8a' + } + return '—' + } + + return ( + + + + {/* Header info row */} +
+
+
+ Date +
+
+ {formatDate(consultation.date)} +
+
+ +
+
+ Organisation +
+
+ {consultation.organization} +
+
+ +
+
+ Type +
+
+ {getEmploymentType()} +
+
+ +
+
+ Band +
+
+ {getBand()} +
+
+
+ + {/* Role title */} +
+ {consultation.role} +
+ + {/* Bullet list */} +
    + {consultation.examination.map((bullet, index) => ( +
  • + {/* Bullet dot */} + + {bullet} +
    • + ))} +
+ + ) +}