feat(intake): implement epic 4 intake core (overview, new flow, layout)

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

@@ -0,0 +1,107 @@
+'use client';
+
+/**
+ * Client Header Component
+ * E2.S3: Context-aware header showing client name, status, and last modified
+ */
+
+import type { FHIRPatient } from '@/lib/fhir';
+
+interface ClientHeaderProps {
+  patient: FHIRPatient;
+}
+
+// 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 }: ClientHeaderProps) {
+  // 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>
+
+        {/* Patient ID (subtle) */}
+        <div className="text-xs text-slate-400">
+          ID: {patient.id}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+'use client';
+
+/**
+ * Client Sidebar Navigation Component
+ * E2.S3: Context-aware sidebar with tabs for client dossier
+ */
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  ChevronLeft,
+  LayoutDashboard,
+  User,
+  ClipboardList,
+  FileText,
+  Stethoscope,
+  Calendar,
+  FileBarChart,
+} from 'lucide-react';
+
+interface ClientSidebarProps {
+  patientId: string;
+}
+
+interface NavItem {
+  label: string;
+  href: string;
+  icon: React.ElementType;
+}
+
+export function ClientSidebar({ patientId }: ClientSidebarProps) {
+  const pathname = usePathname();
+
+  // Navigation items
+  const navItems: NavItem[] = [
+    {
+      label: 'Dashboard',
+      href: `/epd/patients/${patientId}`,
+      icon: LayoutDashboard,
+    },
+    {
+      label: 'Basisgegevens',
+      href: `/epd/patients/${patientId}/basisgegevens`,
+      icon: User,
+    },
+    {
+      label: 'Screening',
+      href: `/epd/patients/${patientId}/screening`,
+      icon: ClipboardList,
+    },
+    {
+      label: 'Intake',
+      href: `/epd/patients/${patientId}/intake`,
+      icon: FileText,
+    },
+    {
+      label: 'Diagnose',
+      href: `/epd/patients/${patientId}/diagnose`,
+      icon: Stethoscope,
+    },
+    {
+      label: 'Behandelplan',
+      href: `/epd/patients/${patientId}/behandelplan`,
+      icon: Calendar,
+    },
+    {
+      label: 'Rapportage',
+      href: `/epd/patients/${patientId}/rapportage`,
+      icon: FileBarChart,
+    },
+  ];
+
+  return (
+    <aside className="w-64 bg-white border-r border-slate-200 flex flex-col">
+      {/* Back to Patients */}
+      <div className="p-4 border-b border-slate-200">
+        <Link
+          href="/epd/patients"
+          className="inline-flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900 transition-colors group"
+        >
+          <ChevronLeft className="h-4 w-4 group-hover:-translate-x-1 transition-transform" />
+          <span className="font-medium">Cliënten</span>
+        </Link>
+      </div>
+
+      {/* Navigation Items */}
+      <nav className="flex-1 p-4 space-y-1">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = pathname === item.href;
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`
+                flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors
+                ${
+                  isActive
+                    ? 'bg-teal-50 text-teal-700 border border-teal-200'
+                    : 'text-slate-700 hover:bg-slate-50 hover:text-slate-900'
+                }
+              `}
+            >
+              <Icon className="h-4 w-4" />
+              <span>{item.label}</span>
+            </Link>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}

app/epd/patients/[id]/layout.tsx

@@ -0,0 +1,32 @@
+import { getPatient } from '../actions';
+import { ClientHeader } from './components/client-header';
+import { ClientSidebar } from './components/client-sidebar';
+
+export default async function PatientDetailLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const patient = await getPatient(id);
+
+  return (
+    <div className="h-screen flex flex-col">
+      {/* Client Header */}
+      <ClientHeader patient={patient} />
+
+      {/* Main Content Area with Sidebar */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Sidebar Navigation */}
+        <ClientSidebar patientId={id} />
+
+        {/* Page Content */}
+        <main className="flex-1 overflow-y-auto bg-slate-50">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

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

@@ -1,45 +1,108 @@
-import { getPatient } from '../actions';
-import { PatientForm } from '../components/patient-form';
-import Link from 'next/link';
-import { ChevronLeft } from 'lucide-react';
+/**
+ * Patient Dashboard Page
+ * E2.S3: Default view showing patient overview and status
+ */
 
-export default async function PatientDetailPage({
+import Link from 'next/link';
+import {
+  User,
+  ClipboardList,
+  FileText,
+  ArrowRight,
+  AlertCircle,
+} from 'lucide-react';
+
+export default async function PatientDashboardPage({
   params,
 }: {
   params: Promise<{ id: string }>;
 }) {
   const { id } = await params;
-  const patient = await getPatient(id);
-
-  const name = patient.name?.[0];
-  const fullName = [
-    ...(name?.prefix || []),
-    ...(name?.given || []),
-    name?.family,
-  ]
-    .filter(Boolean)
-    .join(' ');
 
   return (
-    <div className="px-4 sm:px-6 lg:px-8 py-8">
-      {/* Header with back button */}
-      <div className="mb-8">
-        <Link
-          href="/epd/patients"
-          className="inline-flex items-center gap-2 text-sm text-slate-600 hover:text-slate-900 mb-4 transition-colors"
-        >
-          <ChevronLeft className="h-4 w-4" />
-          <span>Terug naar patiënten</span>
-        </Link>
-        <h1 className="text-2xl font-bold text-slate-900">Patiënt bewerken</h1>
+    <div className="p-6">
+      {/* Page Header */}
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-slate-900">Dashboard</h2>
         <p className="text-sm text-slate-600 mt-1">
-          {fullName} - ID: {patient.id}
+          Overzicht van cliëntgegevens en voortgang
         </p>
       </div>
 
-      {/* Patient Form */}
-      <div className="bg-white rounded-lg border border-slate-200 p-6">
-        <PatientForm patient={patient} />
+      {/* Quick Actions Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
+        {/* Basisgegevens Card */}
+        <Link
+          href={`/epd/patients/${id}/basisgegevens`}
+          className="bg-white rounded-lg border border-slate-200 p-6 hover:border-teal-300 hover:shadow-md transition-all group"
+        >
+          <div className="flex items-start justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
+                <User className="h-5 w-5 text-blue-600" />
+              </div>
+              <div>
+                <h3 className="font-medium text-slate-900">Basisgegevens</h3>
+                <p className="text-xs text-slate-500">NAW & contactgegevens</p>
+              </div>
+            </div>
+            <ArrowRight className="h-4 w-4 text-slate-400 group-hover:text-teal-600 transition-colors" />
+          </div>
+        </Link>
+
+        {/* Screening Card */}
+        <Link
+          href={`/epd/patients/${id}/screening`}
+          className="bg-white rounded-lg border border-slate-200 p-6 hover:border-teal-300 hover:shadow-md transition-all group"
+        >
+          <div className="flex items-start justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center">
+                <ClipboardList className="h-5 w-5 text-amber-600" />
+              </div>
+              <div>
+                <h3 className="font-medium text-slate-900">Screening</h3>
+                <p className="text-xs text-slate-500">Activiteiten & besluit</p>
+              </div>
+            </div>
+            <ArrowRight className="h-4 w-4 text-slate-400 group-hover:text-teal-600 transition-colors" />
+          </div>
+        </Link>
+
+        {/* Intake Card */}
+        <Link
+          href={`/epd/patients/${id}/intake`}
+          className="bg-white rounded-lg border border-slate-200 p-6 hover:border-teal-300 hover:shadow-md transition-all group"
+        >
+          <div className="flex items-start justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-teal-50 rounded-lg flex items-center justify-center">
+                <FileText className="h-5 w-5 text-teal-600" />
+              </div>
+              <div>
+                <h3 className="font-medium text-slate-900">Intake</h3>
+                <p className="text-xs text-slate-500">Gesprekken & registraties</p>
+              </div>
+            </div>
+            <ArrowRight className="h-4 w-4 text-slate-400 group-hover:text-teal-600 transition-colors" />
+          </div>
+        </Link>
+      </div>
+
+      {/* Next Steps Section */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
+        <div className="flex items-start gap-3">
+          <AlertCircle className="h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" />
+          <div>
+            <h3 className="font-medium text-blue-900 mb-2">Volgende stappen</h3>
+            <ul className="text-sm text-blue-800 space-y-1">
+              <li>• Controleer en vul basisgegevens aan indien nodig</li>
+              <li>• Start screening door activiteiten te loggen</li>
+              <li>• Upload relevante documenten (verwijsbrief, etc.)</li>
+              <li>• Neem screeningsbesluit om door te gaan naar intake</li>
+            </ul>
+          </div>
+        </div>
       </div>
     </div>
   );