feat(intake): implement epic 4 intake core (overview, new flow, layout)
This commit is contained in:
colinislit
70
app/epd/clients/[id]/intakes/components/intake-card.tsx
Normal file
70
app/epd/clients/[id]/intakes/components/intake-card.tsx
Normal file
@@ -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>→</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>
|
||||
);
|
||||
}
|
||||
50
app/epd/clients/[id]/intakes/components/intake-list.tsx
Normal file
50
app/epd/clients/[id]/intakes/components/intake-list.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
137
app/epd/clients/[id]/intakes/components/new-intake-form.tsx
Normal file
137
app/epd/clients/[id]/intakes/components/new-intake-form.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user