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>

app/epd/patients/[id]/components/client-header.tsx

@@ -1,140 +0,0 @@
-'use client';
-
-/**
- * Client Header Component
- * E2.S3: Context-aware header showing client name, status, last modified en acties
- */
-
-import { Mic } from 'lucide-react';
-import { useRouter, usePathname } from 'next/navigation';
-import type { FHIRPatient } from '@/lib/fhir';
-import { Button } from '@/components/ui/button';
-
-interface ClientHeaderProps {
-  patient: FHIRPatient;
-  focusElementId?: string;
-}
-
-// Status badge component
-function StatusBadge({ status }: { status?: string }) {
-  const badges = {
-    planned: { label: 'Screening', className: 'bg-amber-100 text-amber-800 border-amber-200' },
-    active: { label: 'Actief', className: 'bg-emerald-100 text-emerald-800 border-emerald-200' },
-    finished: { label: 'Afgerond', className: 'bg-slate-100 text-slate-800 border-slate-200' },
-    cancelled: { label: 'Afgemeld', className: 'bg-red-100 text-red-800 border-red-200' },
-  };
-
-  const badge = status && status in badges ? badges[status as keyof typeof badges] : null;
-
-  if (!badge) {
-    return <span className="text-sm text-slate-400">-</span>;
-  }
-
-  return (
-    <span
-      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${badge.className}`}
-    >
-      {badge.label}
-    </span>
-  );
-}
-
-export function ClientHeader({ patient, focusElementId = 'rapportage-composer' }: ClientHeaderProps) {
-  const router = useRouter();
-  const pathname = usePathname();
-
-  const handleNewReportClick = (patientId?: string) => {
-    if (!patientId) return;
-    const rapportagePath = `/epd/patients/${patientId}/rapportage`;
-    const onRapportagePage = pathname?.startsWith(rapportagePath);
-
-    if (onRapportagePage) {
-      handleScrollToComposer(focusElementId);
-      return;
-    }
-
-    const hash = focusElementId ? `#${focusElementId}` : '';
-    router.push(`${rapportagePath}${hash}`);
-  };
-  // Extract name
-  const name = patient.name?.[0];
-  const fullName = [
-    ...(name?.prefix || []),
-    ...(name?.given || []),
-    name?.family,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  // Extract status from extension
-  const statusExtension = (patient as any).extension?.find(
-    (ext: any) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/episode-status'
-  );
-  const status = statusExtension?.valueCode;
-
-  // Extract last modified
-  const lastModified = patient.meta?.lastUpdated
-    ? new Date(patient.meta.lastUpdated).toLocaleString('nl-NL', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      })
-    : null;
-
-  // Check if John Doe
-  const isJohnDoe = (patient as any).extension?.find(
-    (ext: any) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/john-doe'
-  )?.valueBoolean;
-
-  return (
-    <div className="bg-white border-b border-slate-200 px-6 py-4">
-      <div className="flex items-start justify-between">
-        <div className="flex-1">
-          {/* Name and John Doe indicator */}
-          <div className="flex items-center gap-3 mb-2">
-            <h1 className="text-2xl font-bold text-slate-900">{fullName}</h1>
-            {isJohnDoe && (
-              <span className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-orange-100 text-orange-800 border border-orange-200">
-                John Doe
-              </span>
-            )}
-          </div>
-
-          {/* Status and Last Modified */}
-          <div className="flex items-center gap-4 text-sm">
-            <div className="flex items-center gap-2">
-              <span className="text-slate-500">Status:</span>
-              <StatusBadge status={status} />
-            </div>
-            {lastModified && (
-              <div className="flex items-center gap-2 text-slate-500">
-                <span>Laatst gewijzigd:</span>
-                <span className="font-medium text-slate-700">{lastModified}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <div className="text-xs text-slate-400">
-            ID: {patient.id}
-          </div>
-          <Button type="button" size="sm" onClick={() => handleNewReportClick(patient.id)}>
-            <Mic className="mr-2 h-4 w-4" /> Nieuwe rapportage
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function handleScrollToComposer(targetId?: string) {
-  if (!targetId) return;
-  const element = document.getElementById(targetId);
-  if (element) {
-    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    (element as HTMLElement).focus?.();
-  }
-}

app/epd/patients/[id]/components/patient-layout-client.tsx

@@ -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>
   );