From f40b98a6e5e981351b4523ce7cd0a146ed5c6f9a Mon Sep 17 00:00:00 2001
From: A Charlwood <andrew.charlwood@gmail.com>
Date: Wed, 11 Feb 2026 01:33:55 +0000
Subject: [PATCH] feat: implement SummaryView with Clinical Alert (Task 6)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create SummaryView component with clinical alert banner
- Clinical alert: amber background, warning icon, acknowledge interaction
- Alert animates in with spring effect, dismisses with checkmark → collapse
- Demographics card: full width, two-column key-value layout
- Active Problems card: 3 active/in-progress items with traffic lights
- Current Medications Quick View: 4-column table showing top 5 skills
- Last Consultation card: preview of most recent role
- Add navigation handlers for view switching
- Respects prefers-reduced-motion for all animations
- Proper table semantics and accessibility attributes
---
 src/components/PMRInterface.tsx      |  39 ++-
 src/components/views/SummaryView.tsx | 376 +++++++++++++++++++++++++++
 2 files changed, 403 insertions(+), 12 deletions(-)
 create mode 100644 src/components/views/SummaryView.tsx

diff --git a/src/components/PMRInterface.tsx b/src/components/PMRInterface.tsx
index dac3d73..5af11ed 100644
--- a/src/components/PMRInterface.tsx
+++ b/src/components/PMRInterface.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import type { ViewId } from '../types/pmr'
 import { ClinicalSidebar } from './ClinicalSidebar'
 import { PatientBanner } from './PatientBanner'
+import { SummaryView } from './views/SummaryView'
 
 interface PMRInterfaceProps {
   children?: React.ReactNode
@@ -26,6 +27,30 @@ export function PMRInterface({ children }: PMRInterfaceProps) {
     setActiveView(view)
   }
 
+  const handleNavigate = (view: ViewId, itemId?: string) => {
+    void itemId
+    setActiveView(view)
+    window.location.hash = view
+  }
+
+  const renderView = () => {
+    switch (activeView) {
+      case 'summary':
+        return <SummaryView onNavigate={handleNavigate} />
+      default:
+        return (
+          <div className="bg-white border border-gray-200 rounded p-6">
+            <h1 className="font-inter font-semibold text-lg text-gray-900 capitalize">
+              {activeView} View
+            </h1>
+            <p className="font-inter text-sm text-gray-500 mt-2">
+              Content for {activeView} will be implemented in a separate task.
+            </p>
+          </div>
+        )
+    }
+  }
+
   return (
     <div className="min-h-screen bg-pmr-content">
       <PatientBanner />
@@ -33,20 +58,10 @@ export function PMRInterface({ children }: PMRInterfaceProps) {
         <ClinicalSidebar activeView={activeView} onViewChange={handleViewChange} />
         <main
           role="main"
+          aria-label={`${activeView} view`}
           className="flex-1 min-h-[calc(100vh-80px)] p-6"
         >
-          {children ? (
-            children
-          ) : (
-            <div className="bg-white border border-gray-200 rounded p-6">
-              <h1 className="font-inter font-semibold text-lg text-gray-900 capitalize">
-                {activeView} View
-              </h1>
-              <p className="font-inter text-sm text-gray-500 mt-2">
-                Content for {activeView} will be implemented in a separate task.
-              </p>
-            </div>
-          )}
+          {children || renderView()}
         </main>
       </div>
     </div>
diff --git a/src/components/views/SummaryView.tsx b/src/components/views/SummaryView.tsx
new file mode 100644
index 0000000..b5ae5c7
--- /dev/null
+++ b/src/components/views/SummaryView.tsx
@@ -0,0 +1,376 @@
+import { useState, useEffect } from 'react'
+import { AlertTriangle, Check, ChevronRight } from 'lucide-react'
+import { patient } from '@/data/patient'
+import { consultations } from '@/data/consultations'
+import { problems } from '@/data/problems'
+import { medications } from '@/data/medications'
+import type { ViewId } from '@/types/pmr'
+
+interface SummaryViewProps {
+  onNavigate?: (view: ViewId, itemId?: string) => void
+}
+
+export function SummaryView({ onNavigate }: SummaryViewProps) {
+  const [alertDismissed, setAlertDismissed] = useState(false)
+  const [alertAnimating, setAlertAnimating] = useState(false)
+  const [alertVisible, setAlertVisible] = useState(false)
+
+  const prefersReducedMotion = typeof window !== 'undefined'
+    ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    : false
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAlertVisible(true)
+    }, prefersReducedMotion ? 0 : 300)
+    return () => clearTimeout(timer)
+  }, [prefersReducedMotion])
+
+  const handleDismissAlert = () => {
+    setAlertAnimating(true)
+    setTimeout(() => {
+      setAlertDismissed(true)
+    }, prefersReducedMotion ? 0 : 400)
+  }
+
+  const activeProblems = problems.filter(p => p.status === 'Active' || p.status === 'In Progress')
+  const topMedications = medications.filter(m => m.category === 'Active').slice(0, 5)
+  const lastConsultation = consultations[0]
+
+  return (
+    <div className="space-y-6">
+      {!alertDismissed && (
+        <ClinicalAlert
+          visible={alertVisible}
+          animating={alertAnimating}
+          onDismiss={handleDismissAlert}
+          prefersReducedMotion={prefersReducedMotion}
+        />
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <DemographicsCard />
+        <div className="lg:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <ActiveProblemsCard
+            problems={activeProblems}
+            onNavigate={onNavigate}
+          />
+          <QuickMedsCard
+            medications={topMedications}
+            onNavigate={onNavigate}
+          />
+        </div>
+        <LastConsultationCard
+          consultation={lastConsultation}
+          onNavigate={onNavigate}
+        />
+      </div>
+    </div>
+  )
+}
+
+interface ClinicalAlertProps {
+  visible: boolean
+  animating: boolean
+  onDismiss: () => void
+  prefersReducedMotion: boolean
+}
+
+function ClinicalAlert({ visible, animating, onDismiss, prefersReducedMotion }: ClinicalAlertProps) {
+  const [showCheck, setShowCheck] = useState(false)
+
+  const handleClick = () => {
+    if (!prefersReducedMotion) {
+      setShowCheck(true)
+      setTimeout(onDismiss, 200)
+    } else {
+      onDismiss()
+    }
+  }
+
+  return (
+    <div
+      role="alert"
+      aria-live="assertive"
+      className={`
+        overflow-hidden transition-all duration-200 ease-out
+        ${visible && !animating ? 'max-h-24 opacity-100' : 'max-h-0 opacity-0'}
+        ${prefersReducedMotion ? '!max-h-24 !opacity-100' : ''}
+      `}
+    >
+      <div
+        className="flex items-start gap-3 p-4 rounded border-l-4"
+        style={{
+          backgroundColor: '#FEF3C7',
+          borderColor: '#F59E0B',
+        }}
+      >
+        <div className="flex-shrink-0 mt-0.5 relative w-5 h-5">
+          <AlertTriangle
+            size={20}
+            className={`
+              text-amber-600 transition-opacity duration-200
+              ${showCheck ? 'opacity-0' : 'opacity-100'}
+            `}
+          />
+          <Check
+            size={20}
+            className={`
+              text-green-600 absolute inset-0 transition-opacity duration-200
+              ${showCheck ? 'opacity-100' : 'opacity-0'}
+            `}
+          />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="font-inter font-medium text-sm" style={{ color: '#92400E' }}>
+            <span className="font-semibold">ALERT:</span> This patient has identified <span className="font-semibold">£14.6M</span> in prescribing efficiency savings across Norfolk & Waveney ICS.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={handleClick}
+          className="flex-shrink-0 px-3 py-1.5 text-xs font-medium border rounded transition-colors duration-100"
+          style={{
+            borderColor: '#F59E0B',
+            color: '#92400E',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = '#F59E0B'
+            e.currentTarget.style.color = '#FFFFFF'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = 'transparent'
+            e.currentTarget.style.color = '#92400E'
+          }}
+        >
+          Acknowledge
+        </button>
+      </div>
+    </div>
+  )
+}
+
+function DemographicsCard() {
+  return (
+    <div className="lg:col-span-2 bg-white border border-gray-200 rounded">
+      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+        <h2 className="font-inter font-semibold text-sm uppercase tracking-wide text-gray-500">
+          Patient Demographics
+        </h2>
+      </div>
+      <div className="p-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3">
+          <DemographicsRow label="Name" value={patient.displayName} />
+          <DemographicsRow
+            label="Status"
+            value={
+              <span className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-pmr-green" />
+                <span>{patient.status}</span>
+              </span>
+            }
+          />
+          <DemographicsRow label="DOB" value={patient.dob} />
+          <DemographicsRow label="Location" value={patient.address} />
+          <DemographicsRow
+            label="Registration"
+            value={
+              <span>
+                <span className="text-gray-500">GPhC</span>{' '}
+                <span className="font-geist text-sm">{patient.nhsNumber.replace(/ /g, '')}</span>
+              </span>
+            }
+          />
+          <DemographicsRow label="Since" value={patient.registrationYear} />
+          <DemographicsRow label="Qualification" value={patient.qualification} />
+          <DemographicsRow label="University" value={patient.university} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface DemographicsRowProps {
+  label: string
+  value: React.ReactNode
+}
+
+function DemographicsRow({ label, value }: DemographicsRowProps) {
+  return (
+    <div className="flex items-start gap-4">
+      <span className="font-inter font-medium text-sm text-gray-500 min-w-[100px] text-right flex-shrink-0">
+        {label}:
+      </span>
+      <span className="font-inter text-sm text-gray-900">{value}</span>
+    </div>
+  )
+}
+
+interface ActiveProblemsCardProps {
+  problems: typeof problems
+  onNavigate?: (view: ViewId, itemId?: string) => void
+}
+
+function ActiveProblemsCard({ problems, onNavigate }: ActiveProblemsCardProps) {
+  return (
+    <div className="bg-white border border-gray-200 rounded">
+      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+        <h2 className="font-inter font-semibold text-sm uppercase tracking-wide text-gray-500">
+          Active Problems
+        </h2>
+      </div>
+      <div className="divide-y divide-gray-100">
+        {problems.map((problem) => (
+          <button
+            key={problem.id}
+            type="button"
+            onClick={() => onNavigate?.('problems', problem.id)}
+            className="w-full px-4 py-3 flex items-start gap-3 text-left hover:bg-gray-50 transition-colors"
+          >
+            <TrafficLight status={problem.status} />
+            <div className="flex-1 min-w-0">
+              <p className="font-inter font-medium text-sm text-gray-900 line-clamp-2">
+                {problem.description}
+              </p>
+              {problem.since && (
+                <p className="font-geist text-xs text-gray-500 mt-1">{problem.since}</p>
+              )}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+interface TrafficLightProps {
+  status: 'Active' | 'In Progress' | 'Resolved'
+}
+
+function TrafficLight({ status }: TrafficLightProps) {
+  const colors = {
+    'Active': { bg: 'bg-green-500', label: 'Active' },
+    'In Progress': { bg: 'bg-amber-500', label: 'In Progress' },
+    'Resolved': { bg: 'bg-green-500', label: 'Resolved' },
+  }
+  const color = colors[status]
+
+  return (
+    <span className="flex items-center gap-2 flex-shrink-0 mt-0.5">
+      <span className={`w-2 h-2 rounded-full ${color.bg}`} />
+    </span>
+  )
+}
+
+interface QuickMedsCardProps {
+  medications: typeof medications
+  onNavigate?: (view: ViewId) => void
+}
+
+function QuickMedsCard({ medications, onNavigate }: QuickMedsCardProps) {
+  return (
+    <div className="bg-white border border-gray-200 rounded">
+      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+        <h2 className="font-inter font-semibold text-sm uppercase tracking-wide text-gray-500">
+          Current Medications (Quick View)
+        </h2>
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-gray-200">
+              <th className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+                Drug
+              </th>
+              <th className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+                Dose
+              </th>
+              <th className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+                Freq
+              </th>
+              <th className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+                Status
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {medications.map((med, index) => (
+              <tr
+                key={med.id}
+                className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
+              >
+                <td className="px-4 py-2 font-inter text-sm text-gray-900">
+                  {med.name}
+                </td>
+                <td className="px-4 py-2 font-geist text-sm text-gray-700">
+                  {med.dose}%
+                </td>
+                <td className="px-4 py-2 font-inter text-sm text-gray-700">
+                  {med.frequency}
+                </td>
+                <td className="px-4 py-2">
+                  <span className="flex items-center gap-1.5">
+                    <span className="w-1.5 h-1.5 rounded-full bg-pmr-green" />
+                    <span className="font-inter text-xs text-gray-600">{med.status}</span>
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="px-4 py-2 border-t border-gray-100">
+        <button
+          type="button"
+          onClick={() => onNavigate?.('medications')}
+          className="flex items-center gap-1 font-inter text-sm text-pmr-nhsblue hover:underline"
+        >
+          View Full List
+          <ChevronRight size={14} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+interface LastConsultationCardProps {
+  consultation: typeof consultations[0]
+  onNavigate?: (view: ViewId, itemId?: string) => void
+}
+
+function LastConsultationCard({ consultation, onNavigate }: LastConsultationCardProps) {
+  return (
+    <div className="lg:col-span-2 bg-white border border-gray-200 rounded">
+      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+        <h2 className="font-inter font-semibold text-sm uppercase tracking-wide text-gray-500">
+          Last Consultation
+        </h2>
+      </div>
+      <div className="p-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-3 text-sm text-gray-500 mb-2">
+              <span className="font-geist">{consultation.date}</span>
+              <span>|</span>
+              <span className="text-pmr-nhsblue">{consultation.organization}</span>
+            </div>
+            <h3 className="font-inter font-semibold text-base text-gray-900 mb-2">
+              {consultation.role}
+            </h3>
+            <p className="font-inter text-sm text-gray-600 line-clamp-3">
+              {consultation.history}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => onNavigate?.('consultations', consultation.id)}
+            className="flex-shrink-0 flex items-center gap-1 font-inter text-sm text-pmr-nhsblue hover:underline"
+          >
+            View Full Record
+            <ChevronRight size={14} />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}