feat: move patient info to top header with React Context

Refactored patient display from separate ClientHeader to integrated EPDHeader.

Architecture changes:
- Implemented React Context pattern for patient data sharing
- Created PatientContext with useState + setPatient for dynamic updates
- Created useSetPatient hook for patient injection from nested layouts
- Created EPDLayoutClient wrapper with PatientProvider
- Context flow: EPDLayout → EPDLayoutClient → EPDHeader (consumer)

UI improvements:
- Removed "Mini-ECD" logo from header
- Left-aligned patient info: name + status + John Doe indicator
- Added geboortedatum (dd-mm-yyyy Dutch format)
- Added BSN extraction from FHIR identifiers
- Compact layout: Patient details | Timestamp | Actions ⋮ | Search
- Actions dropdown with "Nieuwe rapportage" (expandable)

Cleanup:
- Deleted ClientHeader component (141 lines duplicate code)
- Simplified PatientLayoutClient (only useSetPatient hook)
- Single source of truth for patient display

Result: Clean context-based architecture, improved UX, -141 LOC

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
colinislit
2025-11-24 14:11:35 +01:00
parent ce2e08449d
commit 0130e28f1e
7 changed files with 292 additions and 175 deletions

View File

@@ -1,9 +1,8 @@
'use client';
import { useMemo } from 'react';
import type { ReactNode } from 'react';
import type { FHIRPatient } from '@/lib/fhir';
import { ClientHeader } from './client-header';
import { useSetPatient } from '@/app/epd/components/patient-context';
interface PatientLayoutClientProps {
patient: FHIRPatient;
@@ -11,22 +10,12 @@ interface PatientLayoutClientProps {
children: ReactNode;
}
export function PatientLayoutClient({ patient, patientId, children }: PatientLayoutClientProps) {
const patientName = useMemo(() => {
const name = patient.name?.[0];
if (!name) return 'deze patiënt';
return [
...(name.prefix || []),
...(name.given || []),
name.family,
]
.filter(Boolean)
.join(' ');
}, [patient]);
export function PatientLayoutClient({ patient, children }: PatientLayoutClientProps) {
// Inject patient data into the context (provided by parent EPDLayoutClient)
useSetPatient(patient);
return (
<div className="flex h-full flex-1 flex-col bg-white">
<ClientHeader patient={patient} focusElementId="rapportage-composer" />
<div className="flex-1 overflow-auto bg-slate-50">{children}</div>
</div>
);