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:
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user