139 lines
5.4 KiB
TypeScript
139 lines
5.4 KiB
TypeScript
'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>
|
|
);
|
|
}
|
|
|