feat: migrate clients module to patients + add docs

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

@@ -0,0 +1,138 @@
+'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 {
+    patientId: string;
+}
+
+export function NewIntakeForm({ patientId }: 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: patientId,
+                });
+            } 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>
+    );
+}
+