Task 7: Rebuild SummaryView + ClinicalAlert

- ClinicalAlert: Framer Motion spring animation entrance, icon crossfade
  (AlertTriangle → CheckCircle), hold beat, height collapse sequence
- Demographics card: Full-width 2-column key-value layout with proper
  label alignment, monospace data values
- Active Problems card: Traffic light dots with text labels (guardrail)
- Quick Medications table: Semantic <table>, alternating rows, hover states
- Last Consultation card: Date in Geist Mono, NHS blue org, role preview
- All cards: font-ui (Elvaro Grotesque), multi-layered shadows, #E5E7EB borders
- Grid: 2-column desktop layout, single column mobile
- prefers-reduced-motion: instant alert, no animations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/views/SummaryView.tsx

@@ -1,65 +1,79 @@
-import { useState, useEffect } from 'react'
+import { useState, useCallback } from 'react'
-import { AlertTriangle, Check, ChevronRight } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { AlertTriangle, CheckCircle, 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'
+import type { ViewId, Problem, Medication, Consultation } from '@/types/pmr'
 
+// ─── Alert state machine ────────────────────────────────────────────────────
+type AlertState = 'visible' | 'acknowledging' | 'dismissed'
+
+// ─── Props ──────────────────────────────────────────────────────────────────
 interface SummaryViewProps {
   onNavigate?: (view: ViewId, itemId?: string) => void
 }
 
 export function SummaryView({ onNavigate }: SummaryViewProps) {
-  const [alertDismissed, setAlertDismissed] = useState(false)
+  const [alertState, setAlertState] = useState<AlertState>('visible')
-  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 handleAcknowledge = useCallback(() => {
+    if (prefersReducedMotion) {
+      setAlertState('dismissed')
+      return
+    }
+    setAlertState('acknowledging')
+    // Icon crossfade (200ms) + hold beat (200ms) = 400ms before collapse
     const timer = setTimeout(() => {
-      setAlertVisible(true)
+      setAlertState('dismissed')
-    }, prefersReducedMotion ? 0 : 300)
+    }, 400)
     return () => clearTimeout(timer)
   }, [prefersReducedMotion])
 
-  const handleDismissAlert = () => {
+  const activeProblems = problems.filter(
-    setAlertAnimating(true)
+    (p) => p.status === 'Active' || p.status === 'In Progress'
-    setTimeout(() => {
+  )
-      setAlertDismissed(true)
+  const topMedications = medications
-    }, prefersReducedMotion ? 0 : 400)
+    .filter((m) => m.category === 'Active')
-  }
+    .slice(0, 5)
-
-  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 && (
+      {/* Clinical Alert */}
+      <AnimatePresence>
+        {alertState !== 'dismissed' && (
           <ClinicalAlert
-          visible={alertVisible}
+            state={alertState}
-          animating={alertAnimating}
+            onAcknowledge={handleAcknowledge}
-          onDismiss={handleDismissAlert}
             prefersReducedMotion={prefersReducedMotion}
           />
         )}
+      </AnimatePresence>
 
+      {/* Summary cards grid */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Card 1: Demographics — full width */}
         <DemographicsCard />
-        <div className="lg:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+        {/* Card 2: Active Problems — left column */}
         <ActiveProblemsCard
           problems={activeProblems}
           onNavigate={onNavigate}
         />
+
+        {/* Card 3: Current Medications Quick View — right column */}
         <QuickMedsCard
           medications={topMedications}
           onNavigate={onNavigate}
         />
-        </div>
+
+        {/* Card 4: Last Consultation — full width */}
         <LastConsultationCard
           consultation={lastConsultation}
           onNavigate={onNavigate}
@@ -69,120 +83,154 @@ export function SummaryView({ onNavigate }: SummaryViewProps) {
   )
 }
 
+// ─── Clinical Alert ─────────────────────────────────────────────────────────
+
 interface ClinicalAlertProps {
-  visible: boolean
+  state: AlertState
-  animating: boolean
+  onAcknowledge: () => void
-  onDismiss: () => void
   prefersReducedMotion: boolean
 }
 
-function ClinicalAlert({ visible, animating, onDismiss, prefersReducedMotion }: ClinicalAlertProps) {
+function ClinicalAlert({
-  const [showCheck, setShowCheck] = useState(false)
+  state,
-
+  onAcknowledge,
-  const handleClick = () => {
+  prefersReducedMotion,
-    if (!prefersReducedMotion) {
+}: ClinicalAlertProps) {
-      setShowCheck(true)
+  const isAcknowledging = state === 'acknowledging'
-      setTimeout(onDismiss, 200)
-    } else {
-      onDismiss()
-    }
-  }
 
   return (
-    <div
+    <motion.div
       role="alert"
       aria-live="assertive"
-      className={`
+      initial={
-        overflow-hidden transition-all duration-200 ease-out
+        prefersReducedMotion
-        ${visible && !animating ? 'max-h-24 opacity-100' : 'max-h-0 opacity-0'}
+          ? { y: 0, opacity: 1 }
-        ${prefersReducedMotion ? '!max-h-24 !opacity-100' : ''}
+          : { y: '-100%', opacity: 0 }
-      `}
+      }
+      animate={{ y: 0, opacity: 1 }}
+      exit={
+        prefersReducedMotion
+          ? { opacity: 0 }
+          : { height: 0, opacity: 0, marginBottom: 0 }
+      }
+      transition={
+        prefersReducedMotion
+          ? { duration: 0 }
+          : state === 'acknowledging'
+            ? { duration: 0.2, ease: 'easeOut' }
+            : { type: 'spring', stiffness: 300, damping: 25 }
+      }
+      className="overflow-hidden"
     >
       <div
         className="flex items-start gap-3 p-4 rounded border-l-4"
         style={{
           backgroundColor: '#FEF3C7',
-          borderColor: '#F59E0B',
+          borderLeftColor: '#F59E0B',
         }}
       >
+        {/* Icon area — crossfade between AlertTriangle and CheckCircle */}
         <div className="flex-shrink-0 mt-0.5 relative w-5 h-5">
-          <AlertTriangle
+          <AnimatePresence mode="wait">
-            size={20}
+            {isAcknowledging ? (
-            className={`
+              <motion.span
-              text-amber-600 transition-opacity duration-200
+                key="check"
-              ${showCheck ? 'opacity-0' : 'opacity-100'}
+                initial={{ opacity: 0, scale: 0.8 }}
-            `}
+                animate={{ opacity: 1, scale: 1 }}
-          />
+                transition={{ duration: 0.2 }}
-          <Check
+                className="absolute inset-0 flex items-center justify-center"
-            size={20}
+              >
-            className={`
+                <CheckCircle size={20} className="text-green-600" />
-              text-green-600 absolute inset-0 transition-opacity duration-200
+              </motion.span>
-              ${showCheck ? 'opacity-100' : 'opacity-0'}
+            ) : (
-            `}
+              <motion.span
-          />
+                key="warning"
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="absolute inset-0 flex items-center justify-center"
+              >
+                <AlertTriangle size={20} className="text-amber-600" />
+              </motion.span>
+            )}
+          </AnimatePresence>
         </div>
+
+        {/* Message */}
         <div className="flex-1 min-w-0">
-          <p className="font-inter font-medium text-sm" style={{ color: '#92400E' }}>
+          <p className="font-ui 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.
+            <span className="font-semibold">ALERT:</span> This patient has
+            identified{' '}
+            <span className="font-semibold">£14.6M</span> in prescribing
+            efficiency savings across Norfolk &amp; Waveney ICS.
           </p>
         </div>
+
+        {/* Acknowledge button */}
         <button
           type="button"
-          onClick={handleClick}
+          onClick={onAcknowledge}
-          className="flex-shrink-0 px-3 py-1.5 text-xs font-medium border rounded transition-colors duration-100"
+          disabled={isAcknowledging}
+          className="flex-shrink-0 px-3 py-1.5 text-xs font-ui font-medium border rounded transition-colors duration-100 hover:bg-[#F59E0B] hover:text-white disabled:opacity-50"
           style={{
             borderColor: '#F59E0B',
-            color: '#92400E',
+            color: isAcknowledging ? '#16A34A' : '#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
+          {isAcknowledging ? 'Acknowledged' : 'Acknowledge'}
         </button>
       </div>
+    </motion.div>
+  )
+}
+
+// ─── Shared Card Components ─────────────────────────────────────────────────
+
+function CardHeader({ title }: { title: string }) {
+  return (
+    <div className="bg-[#F9FAFB] border-b border-[#E5E7EB] px-4 py-3">
+      <h2 className="font-ui font-semibold text-sm uppercase tracking-wide text-gray-500">
+        {title}
+      </h2>
     </div>
   )
 }
 
+// ─── Demographics Card ──────────────────────────────────────────────────────
+
 function DemographicsCard() {
   return (
-    <div className="lg:col-span-2 bg-white border border-gray-200 rounded">
+    <div className="lg:col-span-2 bg-white border border-[#E5E7EB] rounded shadow-pmr">
-      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+      <CardHeader title="Patient Demographics" />
-        <h2 className="font-inter font-semibold text-sm uppercase tracking-wide text-gray-500">
+      <div className="p-4 md:p-6">
-          Patient Demographics
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-2">
-        </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 className="w-2 h-2 rounded-full bg-green-500" />
                 <span>{patient.status}</span>
               </span>
             }
           />
-          <DemographicsRow label="DOB" value={patient.dob} />
+          <DemographicsRow label="DOB" value={patient.dob} mono />
           <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 className="font-geist text-[13px]">
+                  {patient.nhsNumber.replace(/ /g, '')}
+                </span>
               </span>
             }
           />
-          <DemographicsRow label="Since" value={patient.registrationYear} />
+          <DemographicsRow label="Since" value={patient.registrationYear} mono />
-          <DemographicsRow label="Qualification" value={patient.qualification} />
+          <DemographicsRow
+            label="Qualification"
+            value={patient.qualification}
+          />
           <DemographicsRow label="University" value={patient.university} />
         </div>
       </div>
@@ -193,47 +241,52 @@ function DemographicsCard() {
 interface DemographicsRowProps {
   label: string
   value: React.ReactNode
+  mono?: boolean
 }
 
-function DemographicsRow({ label, value }: DemographicsRowProps) {
+function DemographicsRow({ label, value, mono }: DemographicsRowProps) {
   return (
-    <div className="flex items-start gap-4">
+    <div className="flex items-start gap-4 py-1">
-      <span className="font-inter font-medium text-sm text-gray-500 min-w-[100px] text-right flex-shrink-0">
+      <span className="font-ui font-medium text-[13px] text-gray-500 min-w-[100px] text-right flex-shrink-0">
         {label}:
       </span>
-      <span className="font-inter text-sm text-gray-900">{value}</span>
+      <span
+        className={`text-sm text-gray-900 ${mono ? 'font-geist' : 'font-ui'}`}
+      >
+        {value}
+      </span>
     </div>
   )
 }
 
+// ─── Active Problems Card ───────────────────────────────────────────────────
+
 interface ActiveProblemsCardProps {
-  problems: typeof problems
+  problems: Problem[]
   onNavigate?: (view: ViewId, itemId?: string) => void
 }
 
 function ActiveProblemsCard({ problems, onNavigate }: ActiveProblemsCardProps) {
   return (
-    <div className="bg-white border border-gray-200 rounded">
+    <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr">
-      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+      <CardHeader title="Active Problems" />
-        <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"
+            className="w-full px-4 py-3 flex items-start gap-3 text-left hover:bg-[#EFF6FF] transition-colors duration-100"
           >
             <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">
+              <p className="font-ui 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>
+                <p className="font-geist text-xs text-gray-500 mt-1">
+                  {problem.since}
+                </p>
               )}
             </div>
           </button>
@@ -243,52 +296,71 @@ function ActiveProblemsCard({ problems, onNavigate }: ActiveProblemsCardProps) {
   )
 }
 
+// ─── Traffic Light (always with text label — guardrail) ─────────────────────
+
 interface TrafficLightProps {
   status: 'Active' | 'In Progress' | 'Resolved'
 }
 
 function TrafficLight({ status }: TrafficLightProps) {
-  const colors = {
+  const config: Record<
-    'Active': { bg: 'bg-green-500', label: 'Active' },
+    TrafficLightProps['status'],
-    'In Progress': { bg: 'bg-amber-500', label: 'In Progress' },
+    { dotClass: string; label: string }
-    'Resolved': { bg: 'bg-green-500', label: 'Resolved' },
+  > = {
+    Active: { dotClass: 'bg-green-500', label: 'Active' },
+    'In Progress': { dotClass: 'bg-amber-500', label: 'In Progress' },
+    Resolved: { dotClass: 'bg-green-500', label: 'Resolved' },
   }
-  const color = colors[status]
+  const { dotClass, label } = config[status]
 
   return (
-    <span className="flex items-center gap-2 flex-shrink-0 mt-0.5">
+    <span className="flex items-center gap-1.5 flex-shrink-0 mt-0.5">
-      <span className={`w-2 h-2 rounded-full ${color.bg}`} />
+      <span
+        className={`w-2 h-2 rounded-full ${dotClass}`}
+        aria-hidden="true"
+      />
+      <span className="font-ui text-xs text-gray-500">{label}</span>
     </span>
   )
 }
 
+// ─── Quick Medications Card ─────────────────────────────────────────────────
+
 interface QuickMedsCardProps {
-  medications: typeof medications
+  medications: Medication[]
   onNavigate?: (view: ViewId) => void
 }
 
 function QuickMedsCard({ medications, onNavigate }: QuickMedsCardProps) {
   return (
-    <div className="bg-white border border-gray-200 rounded">
+    <div className="bg-white border border-[#E5E7EB] rounded shadow-pmr">
-      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+      <CardHeader title="Current Medications (Quick View)" />
-        <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">
+            <tr className="border-b border-[#E5E7EB]">
-              <th scope="col" className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+              <th
+                scope="col"
+                className="px-4 py-2 text-left font-ui font-semibold text-xs uppercase tracking-wider text-gray-400"
+              >
                 Drug
               </th>
-              <th scope="col" className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+              <th
+                scope="col"
+                className="px-4 py-2 text-left font-ui font-semibold text-xs uppercase tracking-wider text-gray-400"
+              >
                 Dose
               </th>
-              <th scope="col" className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+              <th
+                scope="col"
+                className="px-4 py-2 text-left font-ui font-semibold text-xs uppercase tracking-wider text-gray-400"
+              >
                 Freq
               </th>
-              <th scope="col" className="px-4 py-2 text-left font-inter font-semibold text-xs uppercase tracking-wide text-gray-400">
+              <th
+                scope="col"
+                className="px-4 py-2 text-left font-ui font-semibold text-xs uppercase tracking-wider text-gray-400"
+              >
                 Status
               </th>
             </tr>
@@ -297,21 +369,29 @@ function QuickMedsCard({ medications, onNavigate }: QuickMedsCardProps) {
             {medications.map((med, index) => (
               <tr
                 key={med.id}
-                className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}
+                className={`${
+                  index % 2 === 0 ? 'bg-white' : 'bg-[#F9FAFB]'
+                } hover:bg-[#EFF6FF] transition-colors duration-100`}
+                style={{ height: '40px' }}
               >
-                <td className="px-4 py-2 font-inter text-sm text-gray-900">
+                <td className="px-4 py-2 font-ui text-sm text-gray-900">
                   {med.name}
                 </td>
-                <td className="px-4 py-2 font-geist text-sm text-gray-700">
+                <td className="px-4 py-2 font-geist text-[13px] text-gray-700">
                   {med.dose}%
                 </td>
-                <td className="px-4 py-2 font-inter text-sm text-gray-700">
+                <td className="px-4 py-2 font-ui 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
-                    <span className="font-inter text-xs text-gray-600">{med.status}</span>
+                      className="w-1.5 h-1.5 rounded-full bg-green-500"
+                      aria-hidden="true"
+                    />
+                    <span className="font-ui text-xs text-gray-600">
+                      {med.status}
+                    </span>
                   </span>
                 </td>
               </tr>
@@ -319,11 +399,11 @@ function QuickMedsCard({ medications, onNavigate }: QuickMedsCardProps) {
           </tbody>
         </table>
       </div>
-      <div className="px-4 py-2 border-t border-gray-100">
+      <div className="px-4 py-2 border-t border-[#E5E7EB]">
         <button
           type="button"
           onClick={() => onNavigate?.('medications')}
-          className="flex items-center gap-1 font-inter text-sm text-pmr-nhsblue hover:underline"
+          className="flex items-center gap-1 font-ui text-sm text-pmr-nhsblue hover:underline"
         >
           View Full List
           <ChevronRight size={14} />
@@ -333,38 +413,43 @@ function QuickMedsCard({ medications, onNavigate }: QuickMedsCardProps) {
   )
 }
 
+// ─── Last Consultation Card ─────────────────────────────────────────────────
+
 interface LastConsultationCardProps {
-  consultation: typeof consultations[0]
+  consultation: Consultation
   onNavigate?: (view: ViewId, itemId?: string) => void
 }
 
-function LastConsultationCard({ consultation, onNavigate }: LastConsultationCardProps) {
+function LastConsultationCard({
+  consultation,
+  onNavigate,
+}: LastConsultationCardProps) {
   return (
-    <div className="lg:col-span-2 bg-white border border-gray-200 rounded">
+    <div className="lg:col-span-2 bg-white border border-[#E5E7EB] rounded shadow-pmr">
-      <div className="px-4 py-3 border-b border-gray-200 bg-gray-50">
+      <CardHeader title="Last Consultation" />
-        <h2 className="font-inter font-semibold text-sm uppercase tracking-wide text-gray-500">
+      <div className="p-4 md:p-6">
-          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 className="font-geist text-[12px]">
-              <span>|</span>
+                {consultation.date}
-              <span className="text-pmr-nhsblue">{consultation.organization}</span>
+              </span>
+              <span className="text-gray-300">|</span>
+              <span className="font-ui text-pmr-nhsblue">
+                {consultation.organization}
+              </span>
             </div>
-            <h3 className="font-inter font-semibold text-base text-gray-900 mb-2">
+            <h3 className="font-ui font-semibold text-[15px] text-gray-900 mb-2">
               {consultation.role}
             </h3>
-            <p className="font-inter text-sm text-gray-600 line-clamp-3">
+            <p className="font-ui text-sm text-gray-600 leading-relaxed 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"
+            className="flex-shrink-0 flex items-center gap-1 font-ui text-sm text-pmr-nhsblue hover:underline"
           >
             View Full Record
             <ChevronRight size={14} />