feat: migrate clients module to patients + add docs
This commit is contained in:
colinislit
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user