feat(diagnose+agenda): Diagnose module met ICD-10 en agenda uitbreidingen
Diagnose Module: - Diagnose overzicht pagina met alle patiënt diagnoses - Diagnosis manager met ICD-10 combobox zoekfunctie - Diagnose kaarten met hoofddiagnose markering - Modal voor nieuwe/bewerkte diagnoses - ICD-10 GGZ codes dataset (lib/data/) - Zod schemas voor diagnose validatie - TypeScript types voor ICD-10 (lib/types/icd10.ts) - Complete documentatie (PRD, FO, TO, Bouwplan) Agenda Uitbreidingen: - Patient context card in afspraak modal - Rapportage composer direct in afspraak modal - Rapportage bewerken vanuit gekoppelde rapportages - Verbeterde focus styling voor inputs Behandelplan: - Flat componenten structuur (behandeldoel-card, form, planning) - Context header component - Uitgebreide types (lib/types/behandelplan.ts) - Actions voor behandelplan beheer UI Componenten: - Command component (shadcn/ui) voor combobox - Popover component (shadcn/ui) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
colinislit
71
app/epd/patients/[id]/diagnose/actions.ts
Normal file
71
app/epd/patients/[id]/diagnose/actions.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
'use server';
|
||||
|
||||
import { createClient } from '@/lib/auth/server';
|
||||
import type { Database } from '@/lib/supabase/database.types';
|
||||
|
||||
export type Condition = Database['public']['Tables']['conditions']['Row'];
|
||||
|
||||
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,
|
||||
}));
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
'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,40 +1,145 @@
|
||||
/**
|
||||
* Diagnose Page
|
||||
* E2.S3: Placeholder for diagnose functionality (to be implemented in Epic 6)
|
||||
* Diagnose Overzicht Pagina
|
||||
*
|
||||
* Toont alle diagnoses van een patiënt (uit alle intakes).
|
||||
* Diagnoses kunnen worden bewerkt via de gekoppelde intake.
|
||||
*/
|
||||
|
||||
import { Stethoscope } from 'lucide-react';
|
||||
import { Stethoscope, Plus } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { getPatientDiagnoses } from './actions';
|
||||
import { DiagnosisOverviewCard } from './components/diagnosis-overview-card';
|
||||
import { createClient } from '@/lib/auth/server';
|
||||
|
||||
export default async function DiagnosePage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = await params;
|
||||
const { id: patientId } = await params;
|
||||
|
||||
// Haal alle diagnoses op
|
||||
const diagnoses = await getPatientDiagnoses(patientId);
|
||||
|
||||
// Sorteer: hoofddiagnoses eerst, dan actieve, dan op datum
|
||||
const sortedDiagnoses = [...diagnoses].sort((a, b) => {
|
||||
// Hoofddiagnoses eerst
|
||||
const aIsPrimary = a.category === 'primary-diagnosis';
|
||||
const bIsPrimary = b.category === 'primary-diagnosis';
|
||||
if (aIsPrimary && !bIsPrimary) return -1;
|
||||
if (!aIsPrimary && bIsPrimary) return 1;
|
||||
|
||||
// Actieve diagnoses eerst
|
||||
const aIsActive = a.clinical_status === 'active';
|
||||
const bIsActive = b.clinical_status === 'active';
|
||||
if (aIsActive && !bIsActive) return -1;
|
||||
if (!aIsActive && bIsActive) return 1;
|
||||
|
||||
// Dan op datum (nieuwste eerst)
|
||||
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;
|
||||
});
|
||||
|
||||
// Tel actieve diagnoses
|
||||
const activeDiagnoses = diagnoses.filter((d) => d.clinical_status === 'active');
|
||||
const primaryDiagnosis = diagnoses.find((d) => d.category === 'primary-diagnosis');
|
||||
|
||||
// Haal meest recente intake op voor "Nieuwe diagnose" link
|
||||
const supabase = await createClient();
|
||||
const { data: recentIntake } = await supabase
|
||||
.from('intakes')
|
||||
.select('id')
|
||||
.eq('patient_id', patientId)
|
||||
.order('start_date', { ascending: false })
|
||||
.limit(1)
|
||||
.maybeSingle();
|
||||
|
||||
const newDiagnosisUrl = recentIntake
|
||||
? `/epd/patients/${patientId}/intakes/${recentIntake.id}/diagnosis`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Page Header */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900">Diagnose</h2>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
DSM-5 diagnoses en behandeladvies
|
||||
</p>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-slate-900">Diagnoses</h2>
|
||||
<p className="text-sm text-slate-600 mt-1">
|
||||
Overzicht van alle diagnoses (ICD-10) voor deze patiënt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{newDiagnosisUrl && (
|
||||
<Button asChild>
|
||||
<Link href={newDiagnosisUrl}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Nieuwe diagnose
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Placeholder */}
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-12 text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-50 mb-4">
|
||||
<Stethoscope className="h-8 w-8 text-purple-500" />
|
||||
{/* Summary cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-4">
|
||||
<div className="text-2xl font-bold text-slate-900">{diagnoses.length}</div>
|
||||
<div className="text-sm text-slate-600">Totaal diagnoses</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-4">
|
||||
<div className="text-2xl font-bold text-green-600">{activeDiagnoses.length}</div>
|
||||
<div className="text-sm text-slate-600">Actieve diagnoses</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-4">
|
||||
<div className="text-sm font-medium text-slate-900 truncate">
|
||||
{primaryDiagnosis ? (
|
||||
<>
|
||||
<span className="font-mono">{primaryDiagnosis.code_code}</span>
|
||||
{' — '}
|
||||
{primaryDiagnosis.code_display}
|
||||
</>
|
||||
) : (
|
||||
<span className="text-slate-400">Geen hoofddiagnose</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-slate-600">Hoofddiagnose</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-2">
|
||||
Diagnose Module - Coming Soon
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 max-w-md mx-auto">
|
||||
De diagnose functionaliteit wordt geïmplementeerd in Epic 6. Dit omvat
|
||||
DSM-5 diagnose registratie en behandeladvies formulering.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Diagnoses lijst */}
|
||||
{sortedDiagnoses.length === 0 ? (
|
||||
<div className="bg-white rounded-lg border border-slate-200 p-12 text-center">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-50 mb-4">
|
||||
<Stethoscope className="h-8 w-8 text-purple-500" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-slate-900 mb-2">
|
||||
Nog geen diagnoses
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600 max-w-md mx-auto mb-4">
|
||||
Er zijn nog geen diagnoses geregistreerd voor deze patiënt.
|
||||
Diagnoses worden vastgelegd tijdens een intake.
|
||||
</p>
|
||||
{newDiagnosisUrl && (
|
||||
<Button asChild>
|
||||
<Link href={newDiagnosisUrl}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Eerste diagnose toevoegen
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{sortedDiagnoses.map((diagnosis) => (
|
||||
<DiagnosisOverviewCard
|
||||
key={diagnosis.id}
|
||||
diagnosis={diagnosis}
|
||||
patientId={patientId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user