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

app/epd/clients/[id]/components/intake-tab.tsx

@@ -1,99 +1,56 @@
 'use client';
 
-import { FileText, Plus, Calendar, Clock } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
+import { getIntakesByClientId, Intake } from '../intakes/actions';
+import { IntakeList } from '../intakes/components/intake-list';
 
 interface IntakeTabProps {
   clientId: string;
 }
 
 export function IntakeTab({ clientId }: IntakeTabProps) {
+  const [intakes, setIntakes] = useState<Intake[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchIntakes() {
+      try {
+        const data = await getIntakesByClientId(clientId);
+        setIntakes(data);
+      } catch (error) {
+        console.error('Failed to fetch intakes:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchIntakes();
+  }, [clientId]);
+
   return (
     <div className="p-6">
       {/* Header */}
       <div className="flex items-center justify-between mb-6">
         <div>
           <h2 className="text-lg font-semibold text-slate-900">
-            Intake Notities
+            Intakes
           </h2>
           <p className="text-sm text-slate-600 mt-1">
-            Gespreksverslagen en intake documenten
+            Overzicht van alle intakes
           </p>
         </div>
-        <button
-          disabled
-          className="inline-flex items-center gap-2 px-4 py-2 bg-slate-100 text-slate-400 font-medium rounded-lg cursor-not-allowed"
-          title="Beschikbaar in Week 3"
+        <Link
+          href={`/epd/clients/${clientId}/intakes/new`}
+          className="inline-flex items-center gap-2 px-4 py-2 bg-teal-600 text-white font-medium rounded-lg hover:bg-teal-700 transition-colors"
         >
           <Plus className="h-4 w-4" />
-          <span>Nieuwe notitie</span>
-        </button>
+          <span>Nieuwe Intake</span>
+        </Link>
       </div>
 
-      {/* Coming Soon State */}
-      <div className="py-12 text-center">
-        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-amber-50 mb-4">
-          <FileText className="h-8 w-8 text-amber-500" />
-        </div>
-        <h3 className="text-lg font-semibold text-slate-900 mb-2">
-          Coming Soon - Week 3
-        </h3>
-        <p className="text-sm text-slate-600 max-w-md mx-auto mb-6">
-          De intake module met TipTap rich text editor en AI-samenvatting wordt
-          toegevoegd in Week 3 van de development sprint.
-        </p>
-
-        {/* Feature Preview */}
-        <div className="max-w-2xl mx-auto">
-          <div className="bg-slate-50 rounded-lg border border-slate-200 p-6 text-left">
-            <h4 className="font-medium text-slate-900 mb-3">
-              📋 Geplande Features:
-            </h4>
-            <ul className="space-y-2 text-sm text-slate-700">
-              <li className="flex items-start gap-2">
-                <span className="text-teal-600 font-bold">✓</span>
-                <span>
-                  <strong>TipTap Rich Text Editor</strong> - Professionele
-                  tekstverwerking
-                </span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-teal-600 font-bold">✓</span>
-                <span>
-                  <strong>AI Samenvatting</strong> - Claude 3.5 Sonnet
-                  generatie (&lt; 5 sec)
-                </span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-teal-600 font-bold">✓</span>
-                <span>
-                  <strong>B1 Readability</strong> - Automatische
-                  tekstvereenvoudiging
-                </span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-teal-600 font-bold">✓</span>
-                <span>
-                  <strong>Tags & Categorieën</strong> - Intake, Evaluatie, Plan
-                </span>
-              </li>
-              <li className="flex items-start gap-2">
-                <span className="text-teal-600 font-bold">✓</span>
-                <span>
-                  <strong>Versiehistorie</strong> - Track alle wijzigingen
-                </span>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        {/* Timeline Preview */}
-        <div className="mt-8 inline-flex items-center gap-2 px-4 py-2 bg-teal-50 border border-teal-200 rounded-full text-sm">
-          <Clock className="h-4 w-4 text-teal-600" />
-          <span className="text-teal-800">
-            <strong>Week 3:</strong> 18-24 November 2024
-          </span>
-        </div>
-      </div>
+      <IntakeList intakes={intakes} clientId={clientId} isLoading={isLoading} />
     </div>
   );
 }

app/epd/clients/[id]/intakes/[intakeId]/components/intake-header.tsx

@@ -0,0 +1,65 @@
+import { Intake } from '../../actions';
+import { format } from 'date-fns';
+import { nl } from 'date-fns/locale';
+import { Calendar, Clock, FileText } from 'lucide-react';
+
+interface IntakeHeaderProps {
+    intake: Intake;
+}
+
+export function IntakeHeader({ intake }: IntakeHeaderProps) {
+    const statusColors = {
+        Open: 'bg-blue-50 text-blue-700 border-blue-200',
+        Completed: 'bg-green-50 text-green-700 border-green-200',
+        Cancelled: 'bg-red-50 text-red-700 border-red-200',
+        Draft: 'bg-slate-50 text-slate-700 border-slate-200',
+    };
+
+    const status = intake.status || 'Draft';
+    const statusClass = statusColors[status as keyof typeof statusColors] || statusColors.Draft;
+
+    return (
+        <div className="bg-white border-b border-slate-200 px-6 py-4">
+            <div className="flex items-start justify-between">
+                <div className="flex items-center gap-4">
+                    <div className="p-3 bg-teal-50 rounded-lg text-teal-600">
+                        <FileText className="h-6 w-6" />
+                    </div>
+                    <div>
+                        <div className="flex items-center gap-3 mb-1">
+                            <h1 className="text-xl font-bold text-slate-900">{intake.title}</h1>
+                            <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium border ${statusClass}`}>
+                                {status}
+                            </span>
+                        </div>
+                        <div className="flex items-center gap-4 text-sm text-slate-500">
+                            <span className="font-medium text-slate-700">{intake.department}</span>
+                            <span className="text-slate-300">|</span>
+                            <div className="flex items-center gap-1.5">
+                                <Calendar className="h-4 w-4" />
+                                <span>
+                                    Start: {format(new Date(intake.start_date), 'd MMM yyyy', { locale: nl })}
+                                </span>
+                            </div>
+                            {intake.end_date && (
+                                <div className="flex items-center gap-1.5">
+                                    <Clock className="h-4 w-4" />
+                                    <span>
+                                        Eind: {format(new Date(intake.end_date), 'd MMM yyyy', { locale: nl })}
+                                    </span>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                    {/* Placeholder for actions like Edit, Close, etc. */}
+                    <button className="px-3 py-1.5 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-md transition-colors">
+                        Bewerken
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

app/epd/clients/[id]/intakes/[intakeId]/components/intake-tabs.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+
+interface IntakeTabsProps {
+    clientId: string;
+    intakeId: string;
+}
+
+export function IntakeTabs({ clientId, intakeId }: IntakeTabsProps) {
+    const pathname = usePathname();
+    const baseUrl = `/epd/clients/${clientId}/intakes/${intakeId}`;
+
+    const tabs = [
+        { name: 'Algemeen', href: baseUrl, exact: true },
+        { name: 'Contactmomenten', href: `${baseUrl}/contacts` },
+        { name: 'Kindcheck', href: `${baseUrl}/kindcheck` },
+        { name: 'Risicotaxatie', href: `${baseUrl}/risk` },
+        { name: 'Anamnese', href: `${baseUrl}/anamnese` },
+        { name: 'Onderzoek', href: `${baseUrl}/examination` },
+        { name: 'Diagnose & Advies', href: `${baseUrl}/diagnosis` },
+    ];
+
+    return (
+        <div className="border-b border-slate-200 bg-white px-6">
+            <nav className="-mb-px flex space-x-6 overflow-x-auto">
+                {tabs.map((tab) => {
+                    const isActive = tab.exact
+                        ? pathname === tab.href
+                        : pathname.startsWith(tab.href);
+
+                    return (
+                        <Link
+                            key={tab.name}
+                            href={tab.href}
+                            className={cn(
+                                'whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium transition-colors',
+                                isActive
+                                    ? 'border-teal-500 text-teal-600'
+                                    : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'
+                            )}
+                        >
+                            {tab.name}
+                        </Link>
+                    );
+                })}
+            </nav>
+        </div>
+    );
+}

app/epd/clients/[id]/intakes/[intakeId]/layout.tsx

@@ -0,0 +1,29 @@
+import { getIntakeById } from '../../actions';
+import { IntakeHeader } from './components/intake-header';
+import { IntakeTabs } from './components/intake-tabs';
+import { notFound } from 'next/navigation';
+import { ReactNode } from 'react';
+
+interface IntakeLayoutProps {
+    children: ReactNode;
+    params: Promise<{ id: string; intakeId: string }>;
+}
+
+export default async function IntakeLayout({ children, params }: IntakeLayoutProps) {
+    const { id, intakeId } = await params;
+    const intake = await getIntakeById(intakeId);
+
+    if (!intake) {
+        notFound();
+    }
+
+    return (
+        <div className="flex flex-col h-full bg-slate-50">
+            <IntakeHeader intake={intake} />
+            <IntakeTabs clientId={id} intakeId={intakeId} />
+            <div className="flex-1 p-6 overflow-auto">
+                {children}
+            </div>
+        </div>
+    );
+}

app/epd/clients/[id]/intakes/[intakeId]/page.tsx

@@ -0,0 +1,52 @@
+import { getIntakeById } from '../actions';
+import { notFound } from 'next/navigation';
+
+interface IntakePageProps {
+    params: Promise<{ intakeId: string }>;
+}
+
+export default async function IntakePage({ params }: IntakePageProps) {
+    const { intakeId } = await params;
+    const intake = await getIntakeById(intakeId);
+
+    if (!intake) {
+        notFound();
+    }
+
+    return (
+        <div className="max-w-3xl">
+            <div className="bg-white rounded-lg border border-slate-200 p-6 shadow-sm">
+                <h2 className="text-lg font-semibold text-slate-900 mb-4">Algemene Informatie</h2>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label className="block text-sm font-medium text-slate-500 mb-1">Titel</label>
+                        <p className="text-slate-900">{intake.title}</p>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-slate-500 mb-1">Afdeling</label>
+                        <p className="text-slate-900">{intake.department}</p>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-slate-500 mb-1">Status</label>
+                        <p className="text-slate-900">{intake.status}</p>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-slate-500 mb-1">Startdatum</label>
+                        <p className="text-slate-900">{intake.start_date}</p>
+                    </div>
+                </div>
+
+                <div className="mt-6 pt-6 border-t border-slate-100">
+                    <label className="block text-sm font-medium text-slate-500 mb-2">Notities</label>
+                    <div className="bg-slate-50 rounded-md p-4 text-slate-600 text-sm min-h-[100px]">
+                        {intake.notes || 'Geen notities beschikbaar.'}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

app/epd/clients/[id]/intakes/actions.ts

@@ -0,0 +1,83 @@
+'use server';
+
+import { createClient } from '@/lib/supabase/server';
+import { Database } from '@/lib/supabase/database.types';
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+import { z } from 'zod';
+
+export type Intake = Database['public']['Tables']['intakes']['Row'];
+
+const CreateIntakeSchema = z.object({
+  title: z.string().min(1, 'Titel is verplicht'),
+  department: z.enum(['Volwassenen', 'Jeugd', 'Ouderen']),
+  start_date: z.string().min(1, 'Startdatum is verplicht'),
+  patient_id: z.string().uuid(),
+});
+
+export type CreateIntakeInput = z.infer<typeof CreateIntakeSchema>;
+
+export async function getIntakesByClientId(clientId: string) {
+  const supabase = await createClient();
+
+  const { data, error } = await supabase
+    .from('intakes')
+    .select('*')
+    .eq('patient_id', clientId)
+    .order('start_date', { ascending: false });
+
+  if (error) {
+    console.error('Error fetching intakes:', error);
+    throw new Error('Failed to fetch intakes');
+  }
+
+  return data as Intake[];
+}
+
+export async function createIntake(input: CreateIntakeInput) {
+  const result = CreateIntakeSchema.safeParse(input);
+
+  if (!result.success) {
+    throw new Error('Invalid input data');
+  }
+
+  const { title, department, start_date, patient_id } = result.data;
+  const supabase = await createClient();
+
+  const { data, error } = await supabase
+    .from('intakes')
+    .insert({
+      title,
+      department,
+      start_date,
+      patient_id,
+      status: 'Open', // Default status
+    })
+    .select()
+    .single();
+
+  if (error) {
+    console.error('Error creating intake:', error);
+    throw new Error('Failed to create intake');
+  }
+
+  revalidatePath(`/epd/clients/${patient_id}`);
+  redirect(`/epd/clients/${patient_id}?tab=intake`);
+}
+
+export async function getIntakeById(intakeId: string) {
+  const supabase = await createClient();
+
+  const { data, error } = await supabase
+    .from('intakes')
+    .select('*')
+    .eq('id', intakeId)
+    .single();
+
+  if (error) {
+    console.error('Error fetching intake:', error);
+    return null;
+  }
+
+  return data as Intake;
+}

app/epd/clients/[id]/intakes/components/intake-card.tsx

@@ -0,0 +1,70 @@
+import { Calendar, ChevronRight, FileText } from 'lucide-react';
+import { Intake } from '../actions';
+import Link from 'next/link';
+import { format } from 'date-fns';
+import { nl } from 'date-fns/locale';
+
+interface IntakeCardProps {
+    intake: Intake;
+    clientId: string;
+}
+
+export function IntakeCard({ intake, clientId }: IntakeCardProps) {
+    const statusColors = {
+        Open: 'bg-blue-50 text-blue-700 border-blue-200',
+        Completed: 'bg-green-50 text-green-700 border-green-200',
+        Cancelled: 'bg-red-50 text-red-700 border-red-200',
+        Draft: 'bg-slate-50 text-slate-700 border-slate-200',
+    };
+
+    const status = intake.status || 'Draft';
+    const statusClass = statusColors[status as keyof typeof statusColors] || statusColors.Draft;
+
+    return (
+        <Link
+            href={`/epd/clients/${clientId}/intakes/${intake.id}`}
+            className="block group"
+        >
+            <div className="bg-white border border-slate-200 rounded-lg p-4 hover:border-teal-500 hover:shadow-sm transition-all">
+                <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 bg-teal-50 rounded-md text-teal-600 group-hover:bg-teal-100 transition-colors">
+                            <FileText className="h-5 w-5" />
+                        </div>
+                        <div>
+                            <h3 className="font-medium text-slate-900 group-hover:text-teal-700 transition-colors">
+                                {intake.title}
+                            </h3>
+                            <p className="text-sm text-slate-500">{intake.department}</p>
+                        </div>
+                    </div>
+                    <span
+                        className={`px-2.5 py-0.5 rounded-full text-xs font-medium border ${statusClass}`}
+                    >
+                        {status}
+                    </span>
+                </div>
+
+                <div className="flex items-center gap-4 text-sm text-slate-500 mt-4 pt-4 border-t border-slate-100">
+                    <div className="flex items-center gap-1.5">
+                        <Calendar className="h-4 w-4" />
+                        <span>
+                            {format(new Date(intake.start_date), 'd MMM yyyy', { locale: nl })}
+                        </span>
+                    </div>
+                    {intake.end_date && (
+                        <>
+                            <span>&rarr;</span>
+                            <span>
+                                {format(new Date(intake.end_date), 'd MMM yyyy', { locale: nl })}
+                            </span>
+                        </>
+                    )}
+                    <div className="ml-auto">
+                        <ChevronRight className="h-4 w-4 text-slate-300 group-hover:text-teal-500 transition-colors" />
+                    </div>
+                </div>
+            </div>
+        </Link>
+    );
+}

app/epd/clients/[id]/intakes/components/intake-list.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { Intake } from '../actions';
+import { IntakeCard } from './intake-card';
+import { FileText } from 'lucide-react';
+
+interface IntakeListProps {
+    intakes: Intake[];
+    clientId: string;
+    isLoading?: boolean;
+}
+
+export function IntakeList({ intakes, clientId, isLoading }: IntakeListProps) {
+    if (isLoading) {
+        return (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {[1, 2].map((i) => (
+                    <div
+                        key={i}
+                        className="h-32 bg-slate-50 rounded-lg border border-slate-200 animate-pulse"
+                    />
+                ))}
+            </div>
+        );
+    }
+
+    if (intakes.length === 0) {
+        return (
+            <div className="text-center py-12 bg-slate-50 rounded-lg border border-dashed border-slate-300">
+                <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 mb-4">
+                    <FileText className="h-6 w-6 text-slate-400" />
+                </div>
+                <h3 className="text-sm font-medium text-slate-900 mb-1">
+                    Geen intakes gevonden
+                </h3>
+                <p className="text-sm text-slate-500">
+                    Start een nieuwe intake om te beginnen.
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {intakes.map((intake) => (
+                <IntakeCard key={intake.id} intake={intake} clientId={clientId} />
+            ))}
+        </div>
+    );
+}

app/epd/clients/[id]/intakes/components/new-intake-form.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { createIntake } from '../actions';
+import { useState, useTransition } from 'react';
+import { CalendarIcon, Loader2 } from 'lucide-react';
+import { format } from 'date-fns';
+import { nl } from 'date-fns/locale';
+import { cn } from '@/lib/utils';
+
+const formSchema = z.object({
+    title: z.string().min(1, 'Titel is verplicht'),
+    department: z.enum(['Volwassenen', 'Jeugd', 'Ouderen']),
+    start_date: z.string().min(1, 'Startdatum is verplicht'),
+});
+
+type FormData = z.infer<typeof formSchema>;
+
+interface NewIntakeFormProps {
+    clientId: string;
+}
+
+export function NewIntakeForm({ clientId }: NewIntakeFormProps) {
+    const [isPending, startTransition] = useTransition();
+    const [error, setError] = useState<string | null>(null);
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm<FormData>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            title: '',
+            department: 'Volwassenen',
+            start_date: format(new Date(), 'yyyy-MM-dd'),
+        },
+    });
+
+    const onSubmit = (data: FormData) => {
+        setError(null);
+        startTransition(async () => {
+            try {
+                await createIntake({
+                    ...data,
+                    patient_id: clientId,
+                });
+            } catch (e) {
+                setError('Er is een fout opgetreden bij het aanmaken van de intake.');
+                console.error(e);
+            }
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 max-w-md">
+            {error && (
+                <div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+                    {error}
+                </div>
+            )}
+
+            <div className="space-y-2">
+                <label htmlFor="title" className="text-sm font-medium text-slate-900">
+                    Titel Intake
+                </label>
+                <input
+                    id="title"
+                    type="text"
+                    {...register('title')}
+                    placeholder="Bijv. Intake Depressie"
+                    className={cn(
+                        "flex h-10 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+                        errors.title && "border-red-500 focus:ring-red-500"
+                    )}
+                    disabled={isPending}
+                />
+                {errors.title && (
+                    <p className="text-xs text-red-500">{errors.title.message}</p>
+                )}
+            </div>
+
+            <div className="space-y-2">
+                <label htmlFor="department" className="text-sm font-medium text-slate-900">
+                    Afdeling
+                </label>
+                <select
+                    id="department"
+                    {...register('department')}
+                    className="flex h-10 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50"
+                    disabled={isPending}
+                >
+                    <option value="Volwassenen">Volwassenen</option>
+                    <option value="Jeugd">Jeugd</option>
+                    <option value="Ouderen">Ouderen</option>
+                </select>
+                {errors.department && (
+                    <p className="text-xs text-red-500">{errors.department.message}</p>
+                )}
+            </div>
+
+            <div className="space-y-2">
+                <label htmlFor="start_date" className="text-sm font-medium text-slate-900">
+                    Startdatum
+                </label>
+                <div className="relative">
+                    <input
+                        id="start_date"
+                        type="date"
+                        {...register('start_date')}
+                        className={cn(
+                            "flex h-10 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
+                            errors.start_date && "border-red-500 focus:ring-red-500"
+                        )}
+                        disabled={isPending}
+                    />
+                </div>
+                {errors.start_date && (
+                    <p className="text-xs text-red-500">{errors.start_date.message}</p>
+                )}
+            </div>
+
+            <div className="pt-4">
+                <button
+                    type="submit"
+                    disabled={isPending}
+                    className="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-teal-600 text-white font-medium rounded-lg hover:bg-teal-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    {isPending && <Loader2 className="h-4 w-4 animate-spin" />}
+                    {isPending ? 'Aanmaken...' : 'Start Intake'}
+                </button>
+            </div>
+        </form>
+    );
+}

app/epd/clients/[id]/intakes/new/page.tsx

@@ -0,0 +1,33 @@
+import { NewIntakeForm } from '../../components/new-intake-form';
+import Link from 'next/link';
+import { ChevronLeft } from 'lucide-react';
+
+interface NewIntakePageProps {
+    params: Promise<{ id: string }>;
+}
+
+export default async function NewIntakePage({ params }: NewIntakePageProps) {
+    const { id } = await params;
+
+    return (
+        <div className="max-w-2xl mx-auto py-8">
+            <div className="mb-8">
+                <Link
+                    href={`/epd/clients/${id}?tab=intake`}
+                    className="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-900 mb-4 transition-colors"
+                >
+                    <ChevronLeft className="h-4 w-4" />
+                    Terug naar overzicht
+                </Link>
+                <h1 className="text-2xl font-bold text-slate-900">Nieuwe Intake Starten</h1>
+                <p className="text-slate-600 mt-2">
+                    Vul de basisgegevens in om een nieuwe intake te starten.
+                </p>
+            </div>
+
+            <div className="bg-white rounded-lg border border-slate-200 p-6 shadow-sm">
+                <NewIntakeForm clientId={id} />
+            </div>
+        </div>
+    );
+}

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