From 41ddbf6d1d30c8e3dc700e3fd2bbf16f60c76842 Mon Sep 17 00:00:00 2001
From: A Charlwood <andrew.charlwood@gmail.com>
Date: Fri, 13 Feb 2026 17:18:53 +0000
Subject: [PATCH] Task 9: Build PatientSummary tile

Created PatientSummaryTile component displaying personal statement from profile.ts.
Full-width card with teal dot header, 13px body text, line-height 1.6.
Wired into DashboardLayout as first tile in grid.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/DashboardLayout.tsx          |  4 +++-
 src/components/tiles/PatientSummaryTile.tsx | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 src/components/tiles/PatientSummaryTile.tsx

diff --git a/src/components/DashboardLayout.tsx b/src/components/DashboardLayout.tsx
index 0e2cf3d..89f85ca 100644
--- a/src/components/DashboardLayout.tsx
+++ b/src/components/DashboardLayout.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { motion } from 'framer-motion'
 import { TopBar } from './TopBar'
 import Sidebar from './Sidebar'
+import { PatientSummaryTile } from './tiles/PatientSummaryTile'
 
 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
@@ -93,8 +94,9 @@ export function DashboardLayout() {
             }}
             className="dashboard-grid"
           >
-            {/* Tiles will be added in Tasks 8-15 */}
             {/* PatientSummaryTile — full width */}
+            <PatientSummaryTile />
+
             {/* LatestResultsTile — half width (left) */}
             {/* CoreSkillsTile — half width (right) */}
             {/* LastConsultationTile — full width */}
diff --git a/src/components/tiles/PatientSummaryTile.tsx b/src/components/tiles/PatientSummaryTile.tsx
new file mode 100644
index 0000000..25dd256
--- /dev/null
+++ b/src/components/tiles/PatientSummaryTile.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Card, CardHeader } from '../Card'
+import { personalStatement } from '@/data/profile'
+
+export function PatientSummaryTile() {
+  const bodyStyles: React.CSSProperties = {
+    fontSize: '13px',
+    lineHeight: '1.6',
+    color: 'var(--text-primary)',
+  }
+
+  return (
+    <Card full>
+      <CardHeader dotColor="teal" title="PATIENT SUMMARY" />
+      <div style={bodyStyles}>{personalStatement}</div>
+    </Card>
+  )
+}