0130e28f1e
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>
39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { createContext, useContext, useState, useEffect } from 'react';
|
|
import type { FHIRPatient } from '@/lib/fhir';
|
|
|
|
interface PatientContextValue {
|
|
patient: FHIRPatient | null;
|
|
setPatient: (patient: FHIRPatient | null) => void;
|
|
}
|
|
|
|
const PatientContext = createContext<PatientContextValue>({
|
|
patient: null,
|
|
setPatient: () => {},
|
|
});
|
|
|
|
export function usePatientContext() {
|
|
return useContext(PatientContext);
|
|
}
|
|
|
|
export function PatientProvider({ children }: { children: React.ReactNode }) {
|
|
const [patient, setPatient] = useState<FHIRPatient | null>(null);
|
|
|
|
return (
|
|
<PatientContext.Provider value={{ patient, setPatient }}>
|
|
{children}
|
|
</PatientContext.Provider>
|
|
);
|
|
}
|
|
|
|
// Hook to inject patient data into context from nested layouts
|
|
export function useSetPatient(patient: FHIRPatient | null) {
|
|
const { setPatient } = usePatientContext();
|
|
|
|
useEffect(() => {
|
|
setPatient(patient);
|
|
return () => setPatient(null); // Cleanup when unmounting
|
|
}, [patient, setPatient]);
|
|
}
|