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

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