feat: implement client header and navigation (E2.S3)

Epic 2 - Cliëntenbeheer: Complete Level 2 navigation structure with
context-aware header and sidebar for patient dossier.

E2.S3 - Cliënt Header & Nav:
- Create ClientHeader component showing:
  * Full patient name with prefix support
  * Color-coded status badge (screening/actief/afgerond/afgemeld)
  * Last modified timestamp (Dutch format)
  * John Doe indicator badge
  * Patient ID (subtle display)
- Create ClientSidebar navigation component with:
  * Back button to patient list
  * Navigation items for all tabs (always visible)
  * Active state highlighting
  * Icon support for each tab
- Create patient detail layout wrapper:
  * Combines header and sidebar
  * Full-height flex layout
  * Scrollable main content area
- Update patient detail page to dashboard view:
  * Quick action cards for Basisgegevens, Screening, Intake
  * Next steps guide for workflow
  * Remove old edit-only view
- Create Basisgegevens tab page:
  * Patient form for editing
  * John Doe warning for incomplete registrations
  * Pre-populated with existing data
- Create placeholder pages for future epics:
  * Screening (Epic 3)
  * Intake (Epic 4)
  * Diagnose (Epic 6)
  * Behandelplan (future)
  * Rapportage (future)

Technical implementation:
- app/epd/patients/[id]/components/client-header.tsx: New
- app/epd/patients/[id]/components/client-sidebar.tsx: New
- app/epd/patients/[id]/layout.tsx: New
- app/epd/patients/[id]/page.tsx: Completely rewritten as dashboard
- app/epd/patients/[id]/basisgegevens/page.tsx: New
- app/epd/patients/[id]/screening/page.tsx: New placeholder
- app/epd/patients/[id]/intake/page.tsx: New placeholder
- app/epd/patients/[id]/diagnose/page.tsx: New placeholder
- app/epd/patients/[id]/behandelplan/page.tsx: New placeholder
- app/epd/patients/[id]/rapportage/page.tsx: New placeholder
- docs/specs/screening-intake/bouwplan-screening-intake-v1.0.md: Updated

Epic 2 is now complete with all 3 stories implemented!

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

Co-Authored-By: Claude <noreply@anthropic.com>

app/epd/patients/[id]/basisgegevens/page.tsx

@@ -0,0 +1,62 @@
+/**
+ * Basisgegevens Page
+ * E2.S3: Patient basic information with edit functionality
+ */
+
+import { getPatient } from '../../actions';
+import { PatientForm } from '../../components/patient-form';
+import { AlertCircle } from 'lucide-react';
+
+export default async function BasisgegevensPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const patient = await getPatient(id);
+
+  // Check if John Doe
+  const isJohnDoe = (patient as any).extension?.find(
+    (ext: any) => ext.url === 'http://mini-epd.local/fhir/StructureDefinition/john-doe'
+  )?.valueBoolean;
+
+  // Check if BSN is missing or placeholder
+  const bsn = patient.identifier?.find(
+    (id) => id.system === 'http://fhir.nl/fhir/NamingSystem/bsn'
+  )?.value;
+  const hasMissingBSN = !bsn || bsn === '999999990';
+
+  return (
+    <div className="p-6">
+      {/* Page Header */}
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-slate-900">Basisgegevens</h2>
+        <p className="text-sm text-slate-600 mt-1">
+          NAW-gegevens en contactinformatie
+        </p>
+      </div>
+
+      {/* John Doe Warning */}
+      {isJohnDoe && hasMissingBSN && (
+        <div className="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-6">
+          <div className="flex items-start gap-3">
+            <AlertCircle className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium text-orange-900">
+                Incomplete gegevens - John Doe registratie
+              </p>
+              <p className="text-xs text-orange-700 mt-1">
+                Vul BSN aan zodra deze beschikbaar is voor volledige registratie.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Patient Form */}
+      <div className="bg-white rounded-lg border border-slate-200 p-6">
+        <PatientForm patient={patient} />
+      </div>
+    </div>
+  );
+}

app/epd/patients/[id]/behandelplan/page.tsx

@@ -0,0 +1,40 @@
+/**
+ * Behandelplan Page
+ * E2.S3: Placeholder for behandelplan functionality (future epic)
+ */
+
+import { Calendar } from 'lucide-react';
+
+export default async function BehandelplanPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return (
+    <div className="p-6">
+      {/* Page Header */}
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-slate-900">Behandelplan</h2>
+        <p className="text-sm text-slate-600 mt-1">
+          Behandeldoelen, interventies en planning
+        </p>
+      </div>
+
+      {/* Placeholder */}
+      <div className="bg-white rounded-lg border border-slate-200 p-12 text-center">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-indigo-50 mb-4">
+          <Calendar className="h-8 w-8 text-indigo-500" />
+        </div>
+        <h3 className="text-lg font-semibold text-slate-900 mb-2">
+          Behandelplan Module - Coming Soon
+        </h3>
+        <p className="text-sm text-slate-600 max-w-md mx-auto">
+          De behandelplan functionaliteit wordt in een latere fase geïmplementeerd.
+          Dit omvat doelstellingen, interventies en planning van de behandeling.
+        </p>
+      </div>
+    </div>
+  );
+}

app/epd/patients/[id]/diagnose/page.tsx

@@ -0,0 +1,40 @@
+/**
+ * Diagnose Page
+ * E2.S3: Placeholder for diagnose functionality (to be implemented in Epic 6)
+ */
+
+import { Stethoscope } from 'lucide-react';
+
+export default async function DiagnosePage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return (
+    <div className="p-6">
+      {/* Page Header */}
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-slate-900">Diagnose</h2>
+        <p className="text-sm text-slate-600 mt-1">
+          DSM-5 diagnoses en behandeladvies
+        </p>
+      </div>
+
+      {/* Placeholder */}
+      <div className="bg-white rounded-lg border border-slate-200 p-12 text-center">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-50 mb-4">
+          <Stethoscope className="h-8 w-8 text-purple-500" />
+        </div>
+        <h3 className="text-lg font-semibold text-slate-900 mb-2">
+          Diagnose Module - Coming Soon
+        </h3>
+        <p className="text-sm text-slate-600 max-w-md mx-auto">
+          De diagnose functionaliteit wordt geïmplementeerd in Epic 6. Dit omvat
+          DSM-5 diagnose registratie en behandeladvies formulering.
+        </p>
+      </div>
+    </div>
+  );
+}

app/epd/patients/[id]/intake/page.tsx

@@ -0,0 +1,41 @@
+/**
+ * Intake Page
+ * E2.S3: Placeholder for intake functionality (to be implemented in Epic 4)
+ */
+
+import { FileText } from 'lucide-react';
+
+export default async function IntakePage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return (
+    <div className="p-6">
+      {/* Page Header */}
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-slate-900">Intake</h2>
+        <p className="text-sm text-slate-600 mt-1">
+          Overzicht van intakes en intake details
+        </p>
+      </div>
+
+      {/* Placeholder */}
+      <div className="bg-white rounded-lg border border-slate-200 p-12 text-center">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-teal-50 mb-4">
+          <FileText className="h-8 w-8 text-teal-500" />
+        </div>
+        <h3 className="text-lg font-semibold text-slate-900 mb-2">
+          Intake Module - Coming Soon
+        </h3>
+        <p className="text-sm text-slate-600 max-w-md mx-auto">
+          De intake functionaliteit wordt geïmplementeerd in Epic 4 en 5. Dit omvat
+          intake overzicht, contactmomenten, kindcheck, risicotaxatie, anamnese,
+          onderzoek en ROM-metingen.
+        </p>
+      </div>
+    </div>
+  );
+}

app/epd/patients/[id]/rapportage/page.tsx

@@ -0,0 +1,40 @@
+/**
+ * Rapportage Page
+ * E2.S3: Placeholder for rapportage functionality (future epic)
+ */
+
+import { FileBarChart } from 'lucide-react';
+
+export default async function RapportagePage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return (
+    <div className="p-6">
+      {/* Page Header */}
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-slate-900">Rapportage</h2>
+        <p className="text-sm text-slate-600 mt-1">
+          Overzichten, statistieken en export mogelijkheden
+        </p>
+      </div>
+
+      {/* Placeholder */}
+      <div className="bg-white rounded-lg border border-slate-200 p-12 text-center">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-50 mb-4">
+          <FileBarChart className="h-8 w-8 text-slate-500" />
+        </div>
+        <h3 className="text-lg font-semibold text-slate-900 mb-2">
+          Rapportage Module - Coming Soon
+        </h3>
+        <p className="text-sm text-slate-600 max-w-md mx-auto">
+          De rapportage functionaliteit wordt in een latere fase geïmplementeerd.
+          Dit omvat overzichten, statistieken en exportfunctionaliteit.
+        </p>
+      </div>
+    </div>
+  );
+}

app/epd/patients/[id]/screening/page.tsx

@@ -0,0 +1,40 @@
+/**
+ * Screening Page
+ * E2.S3: Placeholder for screening functionality (to be implemented in Epic 3)
+ */
+
+import { ClipboardList } from 'lucide-react';
+
+export default async function ScreeningPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return (
+    <div className="p-6">
+      {/* Page Header */}
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-slate-900">Screening</h2>
+        <p className="text-sm text-slate-600 mt-1">
+          Activiteitenlog, documenten, hulpvraag en screeningsbesluit
+        </p>
+      </div>
+
+      {/* Placeholder */}
+      <div className="bg-white rounded-lg border border-slate-200 p-12 text-center">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-amber-50 mb-4">
+          <ClipboardList className="h-8 w-8 text-amber-500" />
+        </div>
+        <h3 className="text-lg font-semibold text-slate-900 mb-2">
+          Screening Module - Coming Soon
+        </h3>
+        <p className="text-sm text-slate-600 max-w-md mx-auto">
+          De screening functionaliteit wordt geïmplementeerd in Epic 3. Dit omvat
+          activiteitenlog, documentbeheer, hulpvraag registratie en screeningsbesluit.
+        </p>
+      </div>
+    </div>
+  );
+}