chore(strip): verwijder dubbele diagnosemodule op patientniveau
De intake-variant (intakes/[intakeId]/diagnosis) is de meest complete en blijft. Sidebar-items Diagnose en Behandelplan (level 2) verwijderd — behandelplan-module zelf volgt in de volgende commit. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
colinislit
@@ -17,8 +17,6 @@ import {
|
||||
LayoutDashboard,
|
||||
User,
|
||||
ClipboardList,
|
||||
Stethoscope,
|
||||
Calendar,
|
||||
FileBarChart,
|
||||
PenLine,
|
||||
Zap
|
||||
@@ -70,8 +68,6 @@ const level2NavigationItems: NavigationItem[] = [
|
||||
{ id: "basisgegevens", name: "Basisgegevens", icon: User, href: "/basisgegevens" },
|
||||
{ id: "screening", name: "Screening", icon: ClipboardList, href: "/screening" },
|
||||
{ id: "intake", name: "Intake", icon: FileText, href: "/intakes" },
|
||||
{ id: "diagnose", name: "Diagnose", icon: Stethoscope, href: "/diagnose" },
|
||||
{ id: "behandelplan", name: "Behandelplan", icon: Calendar, href: "/behandelplan" },
|
||||
{ id: "rapportage", name: "Rapportage", icon: FileBarChart, href: "/rapportage" },
|
||||
];
|
||||
|
||||
|
||||
@@ -1,201 +0,0 @@
|
||||
'use server';
|
||||
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { createClient } from '@/lib/auth/server';
|
||||
import type { Database } from '@/lib/supabase/database.types';
|
||||
|
||||
export type Condition = Database['public']['Tables']['conditions']['Row'];
|
||||
type ClinicalStatus = 'active' | 'recurrence' | 'relapse' | 'inactive' | 'remission' | 'resolved';
|
||||
|
||||
export type IntakeInfo = {
|
||||
id: string;
|
||||
title: string | null;
|
||||
department: string | null;
|
||||
start_date: string | null;
|
||||
};
|
||||
|
||||
export type DiagnosisWithIntake = Condition & {
|
||||
intake?: IntakeInfo | null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Haal alle diagnoses op voor een patiënt (uit alle intakes)
|
||||
*/
|
||||
export async function getPatientDiagnoses(patientId: string): Promise<DiagnosisWithIntake[]> {
|
||||
const supabase = await createClient();
|
||||
|
||||
// Haal eerst alle diagnoses op
|
||||
const { data: conditions, error: conditionsError } = await supabase
|
||||
.from('conditions')
|
||||
.select('*')
|
||||
.eq('patient_id', patientId)
|
||||
.order('recorded_date', { ascending: false });
|
||||
|
||||
if (conditionsError) {
|
||||
console.error('getPatientDiagnoses error', conditionsError);
|
||||
throw new Error('Kon diagnoses niet ophalen');
|
||||
}
|
||||
|
||||
if (!conditions || conditions.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Haal de intake IDs op
|
||||
const intakeIds = [...new Set(conditions.map((c) => c.encounter_id).filter((id): id is string => id !== null))];
|
||||
|
||||
if (intakeIds.length === 0) {
|
||||
return conditions.map((c) => ({ ...c, intake: null }));
|
||||
}
|
||||
|
||||
// Haal intake informatie op
|
||||
const { data: intakes, error: intakesError } = await supabase
|
||||
.from('intakes')
|
||||
.select('id, title, department, start_date')
|
||||
.in('id', intakeIds);
|
||||
|
||||
if (intakesError) {
|
||||
console.error('getPatientDiagnoses intakes error', intakesError);
|
||||
// Return conditions zonder intake info als de query faalt
|
||||
return conditions.map((c) => ({ ...c, intake: null }));
|
||||
}
|
||||
|
||||
// Maak lookup map
|
||||
const intakeMap = new Map<string, IntakeInfo>();
|
||||
intakes?.forEach((intake) => {
|
||||
intakeMap.set(intake.id, intake);
|
||||
});
|
||||
|
||||
// Combineer data
|
||||
return conditions.map((condition) => ({
|
||||
...condition,
|
||||
intake: condition.encounter_id ? intakeMap.get(condition.encounter_id) || null : null,
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Haal alle intakes op voor een patiënt (voor intake selectie dropdown)
|
||||
*/
|
||||
export async function getPatientIntakes(patientId: string) {
|
||||
const supabase = await createClient();
|
||||
const { data, error } = await supabase
|
||||
.from('intakes')
|
||||
.select('id, title, department, start_date')
|
||||
.eq('patient_id', patientId)
|
||||
.order('start_date', { ascending: false });
|
||||
|
||||
if (error) {
|
||||
console.error('getPatientIntakes error', error);
|
||||
throw new Error('Kon intakes niet ophalen');
|
||||
}
|
||||
return data || [];
|
||||
}
|
||||
|
||||
// ---------------- CRUD Actions ----------------
|
||||
|
||||
export interface CreateDiagnosisPayload {
|
||||
patientId: string;
|
||||
intakeId: string;
|
||||
code: string;
|
||||
description: string;
|
||||
severity?: string;
|
||||
status?: ClinicalStatus;
|
||||
notes?: string;
|
||||
diagnosisType?: 'primary' | 'secondary';
|
||||
}
|
||||
|
||||
export async function createPatientDiagnosis(payload: CreateDiagnosisPayload) {
|
||||
const supabase = await createClient();
|
||||
|
||||
const insertData = {
|
||||
patient_id: payload.patientId,
|
||||
encounter_id: payload.intakeId,
|
||||
code_code: payload.code,
|
||||
code_display: payload.description,
|
||||
code_system: 'ICD-10',
|
||||
clinical_status: payload.status || 'active',
|
||||
severity_display: payload.severity || null,
|
||||
category: payload.diagnosisType === 'primary' ? 'primary-diagnosis' : 'encounter-diagnosis',
|
||||
note: payload.notes || null,
|
||||
recorded_date: new Date().toISOString(),
|
||||
};
|
||||
|
||||
console.log('createPatientDiagnosis payload:', JSON.stringify(insertData, null, 2));
|
||||
|
||||
const { error } = await supabase.from('conditions').insert(insertData);
|
||||
|
||||
if (error) {
|
||||
console.error('createPatientDiagnosis error:', error.message, error.details, error.hint);
|
||||
throw new Error(`Diagnose opslaan mislukt: ${error.message}`);
|
||||
}
|
||||
|
||||
revalidatePath(`/epd/patients/${payload.patientId}/diagnose`);
|
||||
}
|
||||
|
||||
export interface UpdateDiagnosisPayload {
|
||||
code?: string;
|
||||
description?: string;
|
||||
severity?: string;
|
||||
status?: string;
|
||||
notes?: string;
|
||||
diagnosisType?: 'primary' | 'secondary';
|
||||
}
|
||||
|
||||
export async function updatePatientDiagnosis(
|
||||
patientId: string,
|
||||
diagnosisId: string,
|
||||
payload: UpdateDiagnosisPayload
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
const supabase = await createClient();
|
||||
|
||||
const updateData: Record<string, unknown> = {
|
||||
updated_at: new Date().toISOString(),
|
||||
};
|
||||
|
||||
if (payload.code !== undefined) {
|
||||
updateData.code_code = payload.code;
|
||||
}
|
||||
if (payload.description !== undefined) {
|
||||
updateData.code_display = payload.description;
|
||||
}
|
||||
if (payload.status !== undefined) {
|
||||
updateData.clinical_status = payload.status;
|
||||
}
|
||||
if (payload.severity !== undefined) {
|
||||
updateData.severity_display = payload.severity;
|
||||
}
|
||||
if (payload.notes !== undefined) {
|
||||
updateData.note = payload.notes;
|
||||
}
|
||||
if (payload.diagnosisType !== undefined) {
|
||||
updateData.category = payload.diagnosisType === 'primary' ? 'primary-diagnosis' : 'encounter-diagnosis';
|
||||
}
|
||||
|
||||
const { error } = await supabase
|
||||
.from('conditions')
|
||||
.update(updateData)
|
||||
.eq('id', diagnosisId);
|
||||
|
||||
if (error) {
|
||||
console.error('updatePatientDiagnosis error', error);
|
||||
return { success: false, error: 'Diagnose bijwerken mislukt' };
|
||||
}
|
||||
|
||||
revalidatePath(`/epd/patients/${patientId}/diagnose`);
|
||||
return { success: true };
|
||||
}
|
||||
|
||||
export async function deletePatientDiagnosis(
|
||||
patientId: string,
|
||||
diagnosisId: string
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
const supabase = await createClient();
|
||||
const { error } = await supabase.from('conditions').delete().eq('id', diagnosisId);
|
||||
|
||||
if (error) {
|
||||
console.error('deletePatientDiagnosis error', error);
|
||||
return { success: false, error: 'Diagnose verwijderen mislukt' };
|
||||
}
|
||||
|
||||
revalidatePath(`/epd/patients/${patientId}/diagnose`);
|
||||
return { success: true };
|
||||
}
|
||||
@@ -1,435 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { Loader2, Stethoscope, Trash2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { ICD10Combobox } from '@/app/epd/patients/[id]/intakes/[intakeId]/diagnosis/components/icd10-combobox';
|
||||
import {
|
||||
diagnosisSchema,
|
||||
diagnosisDefaults,
|
||||
type DiagnosisFormData,
|
||||
DIAGNOSIS_SEVERITIES,
|
||||
DIAGNOSIS_TYPES,
|
||||
DIAGNOSIS_STATUSES,
|
||||
} from '@/lib/schemas/diagnosis';
|
||||
import {
|
||||
createPatientDiagnosis,
|
||||
updatePatientDiagnosis,
|
||||
deletePatientDiagnosis,
|
||||
type DiagnosisWithIntake,
|
||||
type IntakeInfo,
|
||||
} from '../actions';
|
||||
import type { ICD10Code } from '@/lib/types/icd10';
|
||||
|
||||
interface DiagnosisDetailFormProps {
|
||||
patientId: string;
|
||||
intakes: IntakeInfo[];
|
||||
diagnosis: DiagnosisWithIntake | null;
|
||||
isNew: boolean;
|
||||
onSaved: () => void;
|
||||
onDeleted: () => void;
|
||||
}
|
||||
|
||||
const STATUS_LABELS: Record<string, string> = {
|
||||
active: 'Actief',
|
||||
remission: 'In remissie',
|
||||
resolved: 'Opgelost',
|
||||
inactive: 'Inactief',
|
||||
};
|
||||
|
||||
const SEVERITY_LABELS: Record<string, string> = {
|
||||
licht: 'Licht',
|
||||
matig: 'Matig',
|
||||
ernstig: 'Ernstig',
|
||||
};
|
||||
|
||||
const DIAGNOSIS_TYPE_LABELS: Record<string, string> = {
|
||||
primary: 'Hoofddiagnose',
|
||||
secondary: 'Nevendiagnose',
|
||||
};
|
||||
|
||||
export function DiagnosisDetailForm({
|
||||
patientId,
|
||||
intakes,
|
||||
diagnosis,
|
||||
isNew,
|
||||
onSaved,
|
||||
onDeleted,
|
||||
}: DiagnosisDetailFormProps) {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [selectedICD10Code, setSelectedICD10Code] = useState<ICD10Code | null>(null);
|
||||
const [selectedIntakeId, setSelectedIntakeId] = useState<string>(
|
||||
diagnosis?.encounter_id || intakes[0]?.id || ''
|
||||
);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset,
|
||||
setValue,
|
||||
watch,
|
||||
} = useForm<DiagnosisFormData>({
|
||||
resolver: zodResolver(diagnosisSchema),
|
||||
defaultValues: diagnosisDefaults,
|
||||
});
|
||||
|
||||
const diagnosisType = watch('diagnosisType');
|
||||
const severity = watch('severity');
|
||||
const status = watch('status');
|
||||
|
||||
// Reset form wanneer diagnosis wijzigt
|
||||
useEffect(() => {
|
||||
if (diagnosis) {
|
||||
setValue('code', diagnosis.code_code || '');
|
||||
setValue('description', diagnosis.code_display || '');
|
||||
setValue('severity', (diagnosis.severity_display as 'licht' | 'matig' | 'ernstig') || 'matig');
|
||||
setValue('status', (diagnosis.clinical_status as 'active' | 'remission' | 'resolved' | 'inactive') || 'active');
|
||||
setValue('diagnosisType', diagnosis.category === 'primary-diagnosis' ? 'primary' : 'secondary');
|
||||
setValue('notes', diagnosis.note || '');
|
||||
|
||||
if (diagnosis.code_code && diagnosis.code_display) {
|
||||
setSelectedICD10Code({
|
||||
code: diagnosis.code_code,
|
||||
display: diagnosis.code_display,
|
||||
keywords: [],
|
||||
});
|
||||
}
|
||||
setSelectedIntakeId(diagnosis.encounter_id || intakes[0]?.id || '');
|
||||
} else {
|
||||
reset(diagnosisDefaults);
|
||||
setSelectedICD10Code(null);
|
||||
setSelectedIntakeId(intakes[0]?.id || '');
|
||||
}
|
||||
setShowDeleteConfirm(false);
|
||||
}, [diagnosis, reset, setValue, intakes]);
|
||||
|
||||
const handleICD10Select = (code: ICD10Code) => {
|
||||
setSelectedICD10Code(code);
|
||||
setValue('code', code.code);
|
||||
setValue('description', code.display);
|
||||
};
|
||||
|
||||
const onSubmit = async (data: DiagnosisFormData) => {
|
||||
if (!selectedIntakeId) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Intake vereist',
|
||||
description: 'Selecteer een intake om de diagnose aan te koppelen.',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
if (isNew) {
|
||||
await createPatientDiagnosis({
|
||||
patientId,
|
||||
intakeId: selectedIntakeId,
|
||||
code: data.code,
|
||||
description: data.description,
|
||||
severity: data.severity,
|
||||
status: data.status,
|
||||
notes: data.notes || undefined,
|
||||
diagnosisType: data.diagnosisType,
|
||||
});
|
||||
|
||||
toast({
|
||||
title: 'Diagnose toegevoegd',
|
||||
description: `${data.code} — ${data.description}`,
|
||||
});
|
||||
} else if (diagnosis) {
|
||||
const result = await updatePatientDiagnosis(patientId, diagnosis.id, {
|
||||
code: data.code,
|
||||
description: data.description,
|
||||
severity: data.severity,
|
||||
status: data.status,
|
||||
notes: data.notes || undefined,
|
||||
diagnosisType: data.diagnosisType,
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Bijwerken mislukt',
|
||||
description: result.error || 'Er ging iets mis.',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
toast({
|
||||
title: 'Diagnose bijgewerkt',
|
||||
description: `${data.code} — ${data.description}`,
|
||||
});
|
||||
}
|
||||
|
||||
onSaved();
|
||||
} catch (error) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Opslaan mislukt',
|
||||
description: error instanceof Error ? error.message : 'Er ging iets mis.',
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!diagnosis) return;
|
||||
|
||||
setIsDeleting(true);
|
||||
|
||||
try {
|
||||
const result = await deletePatientDiagnosis(patientId, diagnosis.id);
|
||||
|
||||
if (!result.success) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Verwijderen mislukt',
|
||||
description: result.error || 'Er ging iets mis.',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
toast({
|
||||
title: 'Diagnose verwijderd',
|
||||
description: `${diagnosis.code_code} is verwijderd.`,
|
||||
});
|
||||
|
||||
onDeleted();
|
||||
} catch (error) {
|
||||
toast({
|
||||
variant: 'destructive',
|
||||
title: 'Verwijderen mislukt',
|
||||
description: error instanceof Error ? error.message : 'Er ging iets mis.',
|
||||
});
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
setShowDeleteConfirm(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Empty state
|
||||
if (!isNew && !diagnosis) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full py-12 text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100 mb-4">
|
||||
<Stethoscope className="h-8 w-8 text-slate-400" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-slate-900 mb-1">Geen diagnose geselecteerd</h3>
|
||||
<p className="text-sm text-slate-500">
|
||||
Selecteer een diagnose uit de lijst of voeg een nieuwe toe.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const selectedIntake = intakes.find((i) => i.id === selectedIntakeId);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
|
||||
{/* Header */}
|
||||
<div className="border-b border-slate-200 pb-4">
|
||||
<h3 className="text-lg font-semibold text-slate-900">
|
||||
{isNew ? 'Nieuwe diagnose' : 'Diagnose bewerken'}
|
||||
</h3>
|
||||
{!isNew && diagnosis && (
|
||||
<p className="text-sm text-slate-500 mt-1">
|
||||
Gekoppeld aan: {diagnosis.intake?.title || diagnosis.intake?.department || 'Intake'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Intake selectie (alleen bij nieuwe diagnose) */}
|
||||
{isNew && intakes.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
Intake <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Select
|
||||
value={selectedIntakeId}
|
||||
onValueChange={setSelectedIntakeId}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecteer intake" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{intakes.map((intake) => (
|
||||
<SelectItem key={intake.id} value={intake.id}>
|
||||
{intake.title || intake.department || 'Intake'}{' '}
|
||||
{intake.start_date && `(${new Date(intake.start_date).toLocaleDateString('nl-NL')})`}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ICD-10 Code */}
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
ICD-10 Code <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<ICD10Combobox
|
||||
value={selectedICD10Code?.code || ''}
|
||||
onSelect={handleICD10Select}
|
||||
placeholder="Zoek op code of beschrijving..."
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
{errors.code && <p className="text-sm text-red-600">{errors.code.message}</p>}
|
||||
{errors.description && <p className="text-sm text-red-600">{errors.description.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Ernst en Type */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
Ernst <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Select
|
||||
value={severity}
|
||||
onValueChange={(value) => setValue('severity', value as 'licht' | 'matig' | 'ernstig')}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecteer" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{DIAGNOSIS_SEVERITIES.map((sev) => (
|
||||
<SelectItem key={sev} value={sev}>
|
||||
{SEVERITY_LABELS[sev]}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.severity && <p className="text-sm text-red-600">{errors.severity.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
Type <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<div className="flex gap-4 pt-2">
|
||||
{DIAGNOSIS_TYPES.map((type) => (
|
||||
<label key={type} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
value={type}
|
||||
checked={diagnosisType === type}
|
||||
onChange={(e) => setValue('diagnosisType', e.target.value as 'primary' | 'secondary')}
|
||||
disabled={isSubmitting}
|
||||
className="h-4 w-4 text-teal-600 focus:ring-teal-500"
|
||||
/>
|
||||
<span className="text-sm">{DIAGNOSIS_TYPE_LABELS[type]}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{errors.diagnosisType && <p className="text-sm text-red-600">{errors.diagnosisType.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="space-y-2">
|
||||
<Label>
|
||||
Status <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Select
|
||||
value={status}
|
||||
onValueChange={(value) => setValue('status', value as 'active' | 'remission' | 'resolved' | 'inactive')}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecteer" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{DIAGNOSIS_STATUSES.map((stat) => (
|
||||
<SelectItem key={stat} value={stat}>
|
||||
{STATUS_LABELS[stat]}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.status && <p className="text-sm text-red-600">{errors.status.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Onderbouwing */}
|
||||
<div className="space-y-2">
|
||||
<Label>Onderbouwing (optioneel)</Label>
|
||||
<Textarea
|
||||
{...register('notes')}
|
||||
placeholder="Klinische redenering..."
|
||||
rows={4}
|
||||
disabled={isSubmitting}
|
||||
maxLength={500}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">{watch('notes')?.length || 0} / 500 karakters</p>
|
||||
{errors.notes && <p className="text-sm text-red-600">{errors.notes.message}</p>}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-slate-200">
|
||||
{!isNew && diagnosis && !showDeleteConfirm && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={isSubmitting || isDeleting}
|
||||
className="text-red-600 hover:text-red-700 hover:bg-red-50"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
Verwijderen
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{showDeleteConfirm && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-red-600">Zeker weten?</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Ja, verwijder'}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowDeleteConfirm(false)}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
Annuleren
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(isNew || !showDeleteConfirm) && (
|
||||
<Button type="submit" disabled={isSubmitting} className={isNew ? 'ml-auto' : ''}>
|
||||
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{isSubmitting ? 'Opslaan...' : 'Opslaan'}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { DiagnosisWithIntake } from '../actions';
|
||||
|
||||
interface DiagnosisListItemProps {
|
||||
diagnosis: DiagnosisWithIntake;
|
||||
isSelected: boolean;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
const STATUS_CONFIG: Record<string, { label: string; className: string }> = {
|
||||
active: { label: 'Actief', className: 'bg-green-100 text-green-700 border-green-300' },
|
||||
remission: { label: 'Remissie', className: 'bg-blue-100 text-blue-700 border-blue-300' },
|
||||
resolved: { label: 'Opgelost', className: 'bg-slate-100 text-slate-700 border-slate-300' },
|
||||
inactive: { label: 'Inactief', className: 'bg-amber-100 text-amber-700 border-amber-300' },
|
||||
};
|
||||
|
||||
export function DiagnosisListItem({ diagnosis, isSelected, onClick }: DiagnosisListItemProps) {
|
||||
const code = diagnosis.code_code || '';
|
||||
const description = diagnosis.code_display || '';
|
||||
const status = diagnosis.clinical_status || 'active';
|
||||
const isPrimary = diagnosis.category === 'primary-diagnosis';
|
||||
const statusConfig = STATUS_CONFIG[status] || STATUS_CONFIG.active;
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
'w-full text-left p-3 rounded-lg border transition-all',
|
||||
'hover:border-teal-300 hover:bg-teal-50/50',
|
||||
isSelected
|
||||
? 'border-teal-500 bg-teal-50 ring-1 ring-teal-500'
|
||||
: 'border-slate-200 bg-white'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-medium text-slate-900 truncate">
|
||||
<span className="font-mono text-sm">{code}</span>
|
||||
{description && (
|
||||
<span className="ml-1.5 text-slate-700 font-normal">{description}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn('text-xs', statusConfig.className)}
|
||||
>
|
||||
{statusConfig.label}
|
||||
</Badge>
|
||||
{isPrimary && (
|
||||
<Badge className="bg-green-600 text-white text-xs hover:bg-green-600">
|
||||
HOOFD
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,133 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useSearchParams, useRouter, usePathname } from 'next/navigation';
|
||||
import { Plus, Stethoscope } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DiagnosisListItem } from './diagnosis-list-item';
|
||||
import { DiagnosisDetailForm } from './diagnosis-detail-form';
|
||||
import type { DiagnosisWithIntake, IntakeInfo } from '../actions';
|
||||
|
||||
interface DiagnosisMasterDetailProps {
|
||||
patientId: string;
|
||||
diagnoses: DiagnosisWithIntake[];
|
||||
intakes: IntakeInfo[];
|
||||
}
|
||||
|
||||
export function DiagnosisMasterDetail({
|
||||
patientId,
|
||||
diagnoses,
|
||||
intakes,
|
||||
}: DiagnosisMasterDetailProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
const selectedId = searchParams.get('selected');
|
||||
const isNew = selectedId === 'new';
|
||||
const selectedDiagnosis = selectedId && !isNew
|
||||
? diagnoses.find((d) => d.id === selectedId) || null
|
||||
: null;
|
||||
|
||||
const updateSelection = (id: string | null) => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (id) {
|
||||
params.set('selected', id);
|
||||
} else {
|
||||
params.delete('selected');
|
||||
}
|
||||
router.push(`${pathname}?${params.toString()}`, { scroll: false });
|
||||
};
|
||||
|
||||
const handleNewDiagnosis = () => {
|
||||
updateSelection('new');
|
||||
};
|
||||
|
||||
const handleSelectDiagnosis = (id: string) => {
|
||||
updateSelection(id);
|
||||
};
|
||||
|
||||
const handleSaved = () => {
|
||||
// Na opslaan blijven we op dezelfde selectie (of clear bij new)
|
||||
if (isNew) {
|
||||
updateSelection(null);
|
||||
}
|
||||
// Router refresh gebeurt automatisch door revalidatePath
|
||||
};
|
||||
|
||||
const handleDeleted = () => {
|
||||
updateSelection(null);
|
||||
};
|
||||
|
||||
// Sorteer: hoofddiagnoses eerst, dan actieve, dan op datum
|
||||
const sortedDiagnoses = [...diagnoses].sort((a, b) => {
|
||||
const aIsPrimary = a.category === 'primary-diagnosis';
|
||||
const bIsPrimary = b.category === 'primary-diagnosis';
|
||||
if (aIsPrimary && !bIsPrimary) return -1;
|
||||
if (!aIsPrimary && bIsPrimary) return 1;
|
||||
|
||||
const aIsActive = a.clinical_status === 'active';
|
||||
const bIsActive = b.clinical_status === 'active';
|
||||
if (aIsActive && !bIsActive) return -1;
|
||||
if (!aIsActive && bIsActive) return 1;
|
||||
|
||||
const aDate = a.recorded_date ? new Date(a.recorded_date).getTime() : 0;
|
||||
const bDate = b.recorded_date ? new Date(b.recorded_date).getTime() : 0;
|
||||
return bDate - aDate;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6 min-h-[500px]">
|
||||
{/* Master: Lijst (2 kolommen) */}
|
||||
<div className="lg:col-span-2 space-y-3">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-medium text-slate-700">
|
||||
{diagnoses.length} diagnose{diagnoses.length !== 1 ? 's' : ''}
|
||||
</h3>
|
||||
<Button onClick={handleNewDiagnosis} size="sm" disabled={intakes.length === 0}>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Nieuw
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{intakes.length === 0 && (
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-800">
|
||||
Er is nog geen intake voor deze patiënt. Maak eerst een intake aan.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sortedDiagnoses.length === 0 && intakes.length > 0 ? (
|
||||
<div className="text-center py-8 text-slate-500">
|
||||
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 mb-3">
|
||||
<Stethoscope className="h-6 w-6 text-slate-400" />
|
||||
</div>
|
||||
<p className="text-sm">Nog geen diagnoses</p>
|
||||
<p className="text-xs mt-1">Klik op "Nieuw" om er een toe te voegen.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{sortedDiagnoses.map((diagnosis) => (
|
||||
<DiagnosisListItem
|
||||
key={diagnosis.id}
|
||||
diagnosis={diagnosis}
|
||||
isSelected={selectedId === diagnosis.id}
|
||||
onClick={() => handleSelectDiagnosis(diagnosis.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Detail: Formulier (3 kolommen) */}
|
||||
<div className="lg:col-span-3 bg-white rounded-lg border border-slate-200 p-5">
|
||||
<DiagnosisDetailForm
|
||||
patientId={patientId}
|
||||
intakes={intakes}
|
||||
diagnosis={selectedDiagnosis}
|
||||
isNew={isNew}
|
||||
onSaved={handleSaved}
|
||||
onDeleted={handleDeleted}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,182 +0,0 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Diagnosis Overview Card Component
|
||||
*
|
||||
* Read-only weergave van een diagnose voor het patiënt-breed overzicht.
|
||||
* Toont ook de gekoppelde intake informatie.
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { format } from 'date-fns';
|
||||
import { nl } from 'date-fns/locale';
|
||||
import { ChevronDown, ChevronUp, ExternalLink } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { DiagnosisWithIntake } from '../actions';
|
||||
|
||||
interface DiagnosisOverviewCardProps {
|
||||
diagnosis: DiagnosisWithIntake;
|
||||
patientId: string;
|
||||
}
|
||||
|
||||
// Status badge configuratie
|
||||
const STATUS_CONFIG: Record<string, { label: string; color: string; bgColor: string }> = {
|
||||
active: {
|
||||
label: 'Actief',
|
||||
color: 'text-green-700',
|
||||
bgColor: 'bg-green-100 border-green-300',
|
||||
},
|
||||
remission: {
|
||||
label: 'In remissie',
|
||||
color: 'text-blue-700',
|
||||
bgColor: 'bg-blue-100 border-blue-300',
|
||||
},
|
||||
resolved: {
|
||||
label: 'Opgelost',
|
||||
color: 'text-slate-700',
|
||||
bgColor: 'bg-slate-100 border-slate-300',
|
||||
},
|
||||
inactive: {
|
||||
label: 'Inactief',
|
||||
color: 'text-amber-700',
|
||||
bgColor: 'bg-amber-100 border-amber-300',
|
||||
},
|
||||
};
|
||||
|
||||
// Severity labels
|
||||
const SEVERITY_LABELS: Record<string, string> = {
|
||||
licht: 'Licht',
|
||||
matig: 'Matig',
|
||||
ernstig: 'Ernstig',
|
||||
};
|
||||
|
||||
export function DiagnosisOverviewCard({ diagnosis, patientId }: DiagnosisOverviewCardProps) {
|
||||
const [isNotesExpanded, setIsNotesExpanded] = useState(false);
|
||||
|
||||
const code = diagnosis.code_code || '';
|
||||
const description = diagnosis.code_display || '';
|
||||
const severity = diagnosis.severity_display || '';
|
||||
const status = diagnosis.clinical_status || 'active';
|
||||
const notes = diagnosis.note || '';
|
||||
const recordedDate = diagnosis.recorded_date ? new Date(diagnosis.recorded_date) : null;
|
||||
const isPrimary = diagnosis.category === 'primary-diagnosis';
|
||||
|
||||
const statusConfig = STATUS_CONFIG[status] || STATUS_CONFIG.active;
|
||||
const hasNotes = notes.trim().length > 0;
|
||||
|
||||
// Intake informatie
|
||||
const intake = diagnosis.intake;
|
||||
const intakeUrl = intake
|
||||
? `/epd/patients/${patientId}/intakes/${intake.id}/diagnosis`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Card className="transition-all hover:border-teal-300 hover:shadow-sm">
|
||||
<CardHeader className="p-4 pb-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
{/* Code + beschrijving */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-slate-900">
|
||||
{code && description ? (
|
||||
<>
|
||||
<span className="font-mono">{code}</span>
|
||||
{' — '}
|
||||
<span>{description}</span>
|
||||
</>
|
||||
) : (
|
||||
code || description || 'Geen diagnose code'
|
||||
)}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Badges */}
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{/* HOOFD badge */}
|
||||
{isPrimary && (
|
||||
<Badge className="bg-green-600 text-white border-green-700 hover:bg-green-600">
|
||||
HOOFD
|
||||
</Badge>
|
||||
)}
|
||||
|
||||
{/* Status badge */}
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`text-xs ${statusConfig.color} ${statusConfig.bgColor}`}
|
||||
>
|
||||
{statusConfig.label}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="p-4 pt-0 space-y-3">
|
||||
{/* Meta informatie */}
|
||||
<div className="flex flex-wrap items-center gap-4 text-sm text-slate-600">
|
||||
{severity && (
|
||||
<div>
|
||||
<span className="font-medium">Ernst:</span>{' '}
|
||||
<span>{SEVERITY_LABELS[severity] || severity}</span>
|
||||
</div>
|
||||
)}
|
||||
{recordedDate && (
|
||||
<div>
|
||||
<span className="font-medium">Datum:</span>{' '}
|
||||
<span>{format(recordedDate, 'd MMM yyyy', { locale: nl })}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Intake link */}
|
||||
{intake && intakeUrl && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="text-slate-500">Intake:</span>
|
||||
<Link
|
||||
href={intakeUrl}
|
||||
className="text-teal-600 hover:text-teal-700 hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
{intake.title || intake.department || 'Intake'}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Onderbouwing (expand/collapse) */}
|
||||
{hasNotes && (
|
||||
<div className="border-t border-slate-100 pt-3">
|
||||
<button
|
||||
onClick={() => setIsNotesExpanded(!isNotesExpanded)}
|
||||
className="flex items-center gap-2 w-full text-left text-sm font-medium text-slate-700 hover:text-slate-900 transition-colors"
|
||||
>
|
||||
{isNotesExpanded ? (
|
||||
<ChevronUp className="h-4 w-4 text-slate-500" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-slate-500" />
|
||||
)}
|
||||
<span>Onderbouwing</span>
|
||||
</button>
|
||||
{isNotesExpanded && (
|
||||
<div className="mt-2 pl-6 text-sm text-slate-600 whitespace-pre-line">
|
||||
{notes}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bewerk link naar intake */}
|
||||
{intakeUrl && (
|
||||
<div className="pt-2">
|
||||
<Button variant="outline" size="sm" asChild>
|
||||
<Link href={intakeUrl}>
|
||||
Bewerken in intake
|
||||
<ExternalLink className="ml-2 h-3 w-3" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
/**
|
||||
* Diagnose Overzicht Pagina
|
||||
*
|
||||
* Master-detail layout voor diagnoses:
|
||||
* - Links: lijst van diagnoses met selectie
|
||||
* - Rechts: formulier voor bekijken/bewerken/toevoegen
|
||||
*/
|
||||
|
||||
import { Suspense } from 'react';
|
||||
import { Activity } from 'lucide-react';
|
||||
import { getPatientDiagnoses, getPatientIntakes } from './actions';
|
||||
import { DiagnosisMasterDetail } from './components/diagnosis-master-detail';
|
||||
|
||||
export default async function DiagnosePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id: patientId } = await params;
|
||||
|
||||
// Haal diagnoses en intakes parallel op
|
||||
const [diagnoses, intakes] = await Promise.all([
|
||||
getPatientDiagnoses(patientId),
|
||||
getPatientIntakes(patientId),
|
||||
]);
|
||||
|
||||
// Tel actieve diagnoses
|
||||
const activeDiagnoses = diagnoses.filter((d) => d.clinical_status === 'active');
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Page Header */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-slate-900">Diagnoses</h2>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<Activity className="h-4 w-4 text-green-600" />
|
||||
<span className="text-sm">
|
||||
<span className="font-medium text-green-600">{activeDiagnoses.length} actief</span>
|
||||
<span className="text-slate-500"> van {diagnoses.length} totaal</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Master-Detail Layout */}
|
||||
<Suspense fallback={<div className="text-sm text-slate-500">Laden...</div>}>
|
||||
<DiagnosisMasterDetail
|
||||
patientId={patientId}
|
||||
diagnoses={diagnoses}
|
||||
intakes={intakes}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user