feat: migrate clients module to patients + add docs

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

@@ -0,0 +1,67 @@
+import { Intake } from '@/lib/types/intake';
+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 statusLabels: Record<string, string> = {
+        bezig: 'Bezig',
+        afgerond: 'Afgerond',
+    };
+    const statusColors: Record<string, string> = {
+        bezig: 'bg-blue-50 text-blue-700 border-blue-200',
+        afgerond: 'bg-green-50 text-green-700 border-green-200',
+    };
+
+    const status = intake.status || 'bezig';
+    const statusClass = statusColors[status] || 'bg-slate-50 text-slate-700 border-slate-200';
+
+    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}`}>
+                                {statusLabels[status] || 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/patients/[id]/intakes/[intakeId]/components/intake-tabs.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+
+interface IntakeTabsProps {
+    patientId: string;
+    intakeId: string;
+}
+
+export function IntakeTabs({ patientId, intakeId }: IntakeTabsProps) {
+    const pathname = usePathname();
+    const baseUrl = `/epd/patients/${patientId}/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: 'Onderzoeken', href: `${baseUrl}/examination` },
+        { name: 'ROM', href: `${baseUrl}/rom` },
+        { name: 'Diagnose', href: `${baseUrl}/diagnosis` },
+        { name: 'Behandeladvies', href: `${baseUrl}/behandeladvies` },
+    ];
+
+    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>
+    );
+}