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

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