admin
cd4aa1e240
- 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>
462 lines
16 KiB
TypeScript
462 lines
16 KiB
TypeScript
import { useState, useCallback } from '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, 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 [alertState, setAlertState] = useState<AlertState>('visible')
|
|
|
|
const prefersReducedMotion = typeof window !== 'undefined'
|
|
? window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
|
: false
|
|
|
|
const handleAcknowledge = useCallback(() => {
|
|
if (prefersReducedMotion) {
|
|
setAlertState('dismissed')
|
|
return
|
|
}
|
|
setAlertState('acknowledging')
|
|
// Icon crossfade (200ms) + hold beat (200ms) = 400ms before collapse
|
|
const timer = setTimeout(() => {
|
|
setAlertState('dismissed')
|
|
}, 400)
|
|
return () => clearTimeout(timer)
|
|
}, [prefersReducedMotion])
|
|
|
|
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">
|
|
{/* Clinical Alert */}
|
|
<AnimatePresence>
|
|
{alertState !== 'dismissed' && (
|
|
<ClinicalAlert
|
|
state={alertState}
|
|
onAcknowledge={handleAcknowledge}
|
|
prefersReducedMotion={prefersReducedMotion}
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* Summary cards grid */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Card 1: Demographics — full width */}
|
|
<DemographicsCard />
|
|
|
|
{/* Card 2: Active Problems — left column */}
|
|
<ActiveProblemsCard
|
|
problems={activeProblems}
|
|
onNavigate={onNavigate}
|
|
/>
|
|
|
|
{/* Card 3: Current Medications Quick View — right column */}
|
|
<QuickMedsCard
|
|
medications={topMedications}
|
|
onNavigate={onNavigate}
|
|
/>
|
|
|
|
{/* Card 4: Last Consultation — full width */}
|
|
<LastConsultationCard
|
|
consultation={lastConsultation}
|
|
onNavigate={onNavigate}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Clinical Alert ─────────────────────────────────────────────────────────
|
|
|
|
interface ClinicalAlertProps {
|
|
state: AlertState
|
|
onAcknowledge: () => void
|
|
prefersReducedMotion: boolean
|
|
}
|
|
|
|
function ClinicalAlert({
|
|
state,
|
|
onAcknowledge,
|
|
prefersReducedMotion,
|
|
}: ClinicalAlertProps) {
|
|
const isAcknowledging = state === 'acknowledging'
|
|
|
|
return (
|
|
<motion.div
|
|
role="alert"
|
|
aria-live="assertive"
|
|
initial={
|
|
prefersReducedMotion
|
|
? { y: 0, opacity: 1 }
|
|
: { 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',
|
|
borderLeftColor: '#F59E0B',
|
|
}}
|
|
>
|
|
{/* Icon area — crossfade between AlertTriangle and CheckCircle */}
|
|
<div className="flex-shrink-0 mt-0.5 relative w-5 h-5">
|
|
<AnimatePresence mode="wait">
|
|
{isAcknowledging ? (
|
|
<motion.span
|
|
key="check"
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="absolute inset-0 flex items-center justify-center"
|
|
>
|
|
<CheckCircle size={20} className="text-green-600" />
|
|
</motion.span>
|
|
) : (
|
|
<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-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.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Acknowledge button */}
|
|
<button
|
|
type="button"
|
|
onClick={onAcknowledge}
|
|
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: isAcknowledging ? '#16A34A' : '#92400E',
|
|
}}
|
|
>
|
|
{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-[#E5E7EB] rounded shadow-pmr">
|
|
<CardHeader title="Patient Demographics" />
|
|
<div className="p-4 md:p-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-2">
|
|
<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-green-500" />
|
|
<span>{patient.status}</span>
|
|
</span>
|
|
}
|
|
/>
|
|
<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-[13px]">
|
|
{patient.nhsNumber.replace(/ /g, '')}
|
|
</span>
|
|
</span>
|
|
}
|
|
/>
|
|
<DemographicsRow label="Since" value={patient.registrationYear} mono />
|
|
<DemographicsRow
|
|
label="Qualification"
|
|
value={patient.qualification}
|
|
/>
|
|
<DemographicsRow label="University" value={patient.university} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface DemographicsRowProps {
|
|
label: string
|
|
value: React.ReactNode
|
|
mono?: boolean
|
|
}
|
|
|
|
function DemographicsRow({ label, value, mono }: DemographicsRowProps) {
|
|
return (
|
|
<div className="flex items-start gap-4 py-1">
|
|
<span className="font-ui font-medium text-[13px] text-gray-500 min-w-[100px] text-right flex-shrink-0">
|
|
{label}:
|
|
</span>
|
|
<span
|
|
className={`text-sm text-gray-900 ${mono ? 'font-geist' : 'font-ui'}`}
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Active Problems Card ───────────────────────────────────────────────────
|
|
|
|
interface ActiveProblemsCardProps {
|
|
problems: Problem[]
|
|
onNavigate?: (view: ViewId, itemId?: string) => void
|
|
}
|
|
|
|
function ActiveProblemsCard({ problems, onNavigate }: ActiveProblemsCardProps) {
|
|
return (
|
|
<div className="bg-white border border-[#E5E7EB] rounded shadow-pmr">
|
|
<CardHeader title="Active Problems" />
|
|
<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-[#EFF6FF] transition-colors duration-100"
|
|
>
|
|
<TrafficLight status={problem.status} />
|
|
<div className="flex-1 min-w-0">
|
|
<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>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Traffic Light (always with text label — guardrail) ─────────────────────
|
|
|
|
interface TrafficLightProps {
|
|
status: 'Active' | 'In Progress' | 'Resolved'
|
|
}
|
|
|
|
function TrafficLight({ status }: TrafficLightProps) {
|
|
const config: Record<
|
|
TrafficLightProps['status'],
|
|
{ dotClass: string; label: string }
|
|
> = {
|
|
Active: { dotClass: 'bg-green-500', label: 'Active' },
|
|
'In Progress': { dotClass: 'bg-amber-500', label: 'In Progress' },
|
|
Resolved: { dotClass: 'bg-green-500', label: 'Resolved' },
|
|
}
|
|
const { dotClass, label } = config[status]
|
|
|
|
return (
|
|
<span className="flex items-center gap-1.5 flex-shrink-0 mt-0.5">
|
|
<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: Medication[]
|
|
onNavigate?: (view: ViewId) => void
|
|
}
|
|
|
|
function QuickMedsCard({ medications, onNavigate }: QuickMedsCardProps) {
|
|
return (
|
|
<div className="bg-white border border-[#E5E7EB] rounded shadow-pmr">
|
|
<CardHeader title="Current Medications (Quick View)" />
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-[#E5E7EB]">
|
|
<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-ui font-semibold text-xs uppercase tracking-wider text-gray-400"
|
|
>
|
|
Dose
|
|
</th>
|
|
<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-ui font-semibold text-xs uppercase tracking-wider text-gray-400"
|
|
>
|
|
Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{medications.map((med, index) => (
|
|
<tr
|
|
key={med.id}
|
|
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-ui text-sm text-gray-900">
|
|
{med.name}
|
|
</td>
|
|
<td className="px-4 py-2 font-geist text-[13px] text-gray-700">
|
|
{med.dose}%
|
|
</td>
|
|
<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-green-500"
|
|
aria-hidden="true"
|
|
/>
|
|
<span className="font-ui text-xs text-gray-600">
|
|
{med.status}
|
|
</span>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="px-4 py-2 border-t border-[#E5E7EB]">
|
|
<button
|
|
type="button"
|
|
onClick={() => onNavigate?.('medications')}
|
|
className="flex items-center gap-1 font-ui text-sm text-pmr-nhsblue hover:underline"
|
|
>
|
|
View Full List
|
|
<ChevronRight size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Last Consultation Card ─────────────────────────────────────────────────
|
|
|
|
interface LastConsultationCardProps {
|
|
consultation: Consultation
|
|
onNavigate?: (view: ViewId, itemId?: string) => void
|
|
}
|
|
|
|
function LastConsultationCard({
|
|
consultation,
|
|
onNavigate,
|
|
}: LastConsultationCardProps) {
|
|
return (
|
|
<div className="lg:col-span-2 bg-white border border-[#E5E7EB] rounded shadow-pmr">
|
|
<CardHeader title="Last Consultation" />
|
|
<div className="p-4 md:p-6">
|
|
<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 text-[12px]">
|
|
{consultation.date}
|
|
</span>
|
|
<span className="text-gray-300">|</span>
|
|
<span className="font-ui text-pmr-nhsblue">
|
|
{consultation.organization}
|
|
</span>
|
|
</div>
|
|
<h3 className="font-ui font-semibold text-[15px] text-gray-900 mb-2">
|
|
{consultation.role}
|
|
</h3>
|
|
<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-ui text-sm text-pmr-nhsblue hover:underline"
|
|
>
|
|
View Full Record
|
|
<ChevronRight size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|