c6616d85b2
E5.S1 compleet: AI filtert op behandelrelevantie voor psychiaters. Voortgang: 56 SP / 72 SP (78%) - Epic 5 in progress! Implementatie: - Twee-staps filtering: Server (include_in_handover=true) → AI (psychiater: behandelrelevant) - Role toggle UI: Verpleegkundige/Psychiater knoppen in OverdrachtBlock - buildSystemPrompt(role) functie met psychiater-specifieke filtering regels - filterForRole parameter toegevoegd aan GenerateOverdrachtSchema - API route verwerkt role parameter en stuurt door naar Claude AI Psychiater filtering regels: ✅ WEL RELEVANT: - Medicatie-issues: weigering, bijwerkingen, dosisaanpassingen - Stemming/gedrag: veranderingen, afwijkend gedrag, agitatie - Risico-signalen: suïcidaliteit, automutilatie, agressie - Psychotische symptomen: wanen, hallucinaties - Crisis/dwang: separatie, fixatie, dwangmedicatie - Afwijkende vitals: HH, LL met behandelimpact ❌ FILTER UIT: - Routine medicatie ("volgens schema", "zonder problemen") - ADL activiteiten (douchen, eten) tenzij significant afwijkend - Sociale activiteiten ("groepstherapie", "gesprek gehad") - Standaard observaties ("rustige dag", "geen bijzonderheden") - Routine vitals (normaal bereik, N interpretatie) - Dagstructuur ("dagprogramma gevolgd") UI/UX verbeteringen: - Role toggle met 2 knoppen (verpleegkundige/psychiater) - Visual hints: "Alle gemarkeerde items" vs "Behandelrelevante items" - Dynamic description tekst onder toggle - filterRole state + useCallback dependency update Files Changed: - lib/types/overdracht.ts: +1 line (filterForRole in schema) - lib/ai/overdracht-prompt.ts: +52 lines (buildSystemPrompt functie) - app/api/overdracht/generate/route.ts: +8/-8 lines (role parameter) - components/swift/blocks/overdracht-block.tsx: +43 lines (UI + logic) Technische details: - filterForRole default: 'verpleegkundige' - Psychiater max: 3 aandachtspunten, 2 actiepunten - Verpleegkundige max: 5 aandachtspunten, 3 actiepunten - Role parameter propageert van UI → API → Claude prompt Testing: - Build succesvol (pnpm build) - Geen nieuwe type errors - UI toggle functioneel Voortgang: 56 SP / 72 SP (78%) - E5.S1 compleet (5 SP) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
497 lines
18 KiB
TypeScript
497 lines
18 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Overdracht Block
|
|
*
|
|
* Block voor het genereren van overdracht samenvattingen per patiënt.
|
|
* E3.S6: Volledige implementatie met AI samenvatting per patiënt.
|
|
*/
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { useSwiftStore } from '@/stores/swift-store';
|
|
import { BlockContainer } from './block-container';
|
|
import type { BlockPrefillData } from '@/stores/swift-store';
|
|
import { BLOCK_CONFIGS } from '@/lib/swift/types';
|
|
import type { PatientOverzicht, AISamenvatting } from '@/lib/types/overdracht';
|
|
import {
|
|
Sparkles,
|
|
Loader2,
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
Clock,
|
|
RefreshCw,
|
|
Calendar,
|
|
Users,
|
|
} from 'lucide-react';
|
|
import { format } from 'date-fns';
|
|
import { nl } from 'date-fns/locale/nl';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
import { safeFetch, getErrorInfo, retryFetch } from '@/lib/swift/error-handler';
|
|
|
|
interface OverdrachtBlockProps {
|
|
prefill?: BlockPrefillData;
|
|
}
|
|
|
|
type PeriodValue = '1d' | '3d' | '7d' | '14d';
|
|
|
|
const PERIOD_OPTIONS: { value: PeriodValue; label: string; description: string }[] = [
|
|
{ value: '1d', label: 'Vandaag', description: 'Laatste 24 uur' },
|
|
{ value: '3d', label: '3 dagen', description: 'Afgelopen 3 dagen' },
|
|
{ value: '7d', label: '1 week', description: 'Afgelopen 7 dagen' },
|
|
{ value: '14d', label: '2 weken', description: 'Afgelopen 14 dagen' },
|
|
];
|
|
|
|
interface PatientSummary {
|
|
patient: PatientOverzicht;
|
|
summary: AISamenvatting | null;
|
|
loading: boolean;
|
|
error: string | null;
|
|
}
|
|
|
|
export function OverdrachtBlock({ prefill }: OverdrachtBlockProps) {
|
|
const config = BLOCK_CONFIGS.overdracht;
|
|
const { activePatient } = useSwiftStore();
|
|
const { toast } = useToast();
|
|
|
|
const [period, setPeriod] = useState<PeriodValue>('1d');
|
|
const [filterRole, setFilterRole] = useState<'verpleegkundige' | 'psychiater'>('verpleegkundige');
|
|
const [patients, setPatients] = useState<PatientOverzicht[]>([]);
|
|
const [isLoadingPatients, setIsLoadingPatients] = useState(true);
|
|
const [patientSummaries, setPatientSummaries] = useState<Map<string, PatientSummary>>(new Map());
|
|
|
|
// Load patients list
|
|
useEffect(() => {
|
|
const fetchPatients = async () => {
|
|
setIsLoadingPatients(true);
|
|
try {
|
|
const response = await safeFetch(
|
|
'/api/overdracht/patients',
|
|
undefined,
|
|
{ operation: 'Patiëntenlijst laden' }
|
|
);
|
|
const data = await response.json();
|
|
setPatients(data.patients || []);
|
|
|
|
// Initialize summaries map
|
|
const summaries = new Map<string, PatientSummary>();
|
|
(data.patients || []).forEach((patient: PatientOverzicht) => {
|
|
summaries.set(patient.id, {
|
|
patient,
|
|
summary: null,
|
|
loading: false,
|
|
error: null,
|
|
});
|
|
});
|
|
setPatientSummaries(summaries);
|
|
} catch (error) {
|
|
console.error('Failed to fetch patients:', error);
|
|
const statusCode = (error as any)?.statusCode;
|
|
const errorInfo = getErrorInfo(error, {
|
|
operation: 'Patiëntenlijst laden',
|
|
statusCode,
|
|
});
|
|
toast({
|
|
variant: 'destructive',
|
|
title: errorInfo.title,
|
|
description: errorInfo.description,
|
|
});
|
|
} finally {
|
|
setIsLoadingPatients(false);
|
|
}
|
|
};
|
|
|
|
fetchPatients();
|
|
}, [toast]);
|
|
|
|
// Auto-generate summary for activePatient if set (only once when block opens)
|
|
useEffect(() => {
|
|
if (activePatient && patients.length > 0 && patientSummaries.size > 0) {
|
|
const summaryData = patientSummaries.get(activePatient.id);
|
|
// Only auto-generate if no summary exists and not already loading
|
|
if (summaryData && !summaryData.summary && !summaryData.loading) {
|
|
generateSummary(activePatient.id);
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [activePatient?.id, patients.length, patientSummaries.size]);
|
|
|
|
// Generate summary for a patient
|
|
const generateSummary = useCallback(async (patientId: string) => {
|
|
setPatientSummaries((prev) => {
|
|
const updated = new Map(prev);
|
|
const existing = updated.get(patientId);
|
|
if (existing) {
|
|
updated.set(patientId, {
|
|
...existing,
|
|
loading: true,
|
|
error: null,
|
|
});
|
|
}
|
|
return updated;
|
|
});
|
|
|
|
try {
|
|
const response = await retryFetch(
|
|
() =>
|
|
safeFetch(
|
|
'/api/overdracht/generate',
|
|
{
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ patientId, period, filterForRole: filterRole }),
|
|
},
|
|
{ operation: 'Overdracht genereren' }
|
|
),
|
|
3,
|
|
1000
|
|
);
|
|
|
|
const summary: AISamenvatting = await response.json();
|
|
|
|
setPatientSummaries((prev) => {
|
|
const updated = new Map(prev);
|
|
const existing = updated.get(patientId);
|
|
if (existing) {
|
|
updated.set(patientId, {
|
|
...existing,
|
|
summary,
|
|
loading: false,
|
|
error: null,
|
|
});
|
|
}
|
|
return updated;
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to generate summary:', error);
|
|
const statusCode = (error as any)?.statusCode;
|
|
const errorInfo = getErrorInfo(error, {
|
|
operation: 'Overdracht genereren',
|
|
statusCode,
|
|
});
|
|
setPatientSummaries((prev) => {
|
|
const updated = new Map(prev);
|
|
const existing = updated.get(patientId);
|
|
if (existing) {
|
|
updated.set(patientId, {
|
|
...existing,
|
|
loading: false,
|
|
error: errorInfo.description,
|
|
});
|
|
}
|
|
return updated;
|
|
});
|
|
}
|
|
}, [period, filterRole]);
|
|
|
|
// Filter patients: if activePatient is set, only show that one
|
|
const displayPatients = activePatient
|
|
? patients.filter((p) => p.id === activePatient.id)
|
|
: patients;
|
|
|
|
const formatPatientName = (patient: PatientOverzicht): string => {
|
|
return `${patient.name_given?.join(' ') || ''} ${patient.name_family || ''}`.trim();
|
|
};
|
|
|
|
const formatDuration = (ms: number): string => {
|
|
if (ms < 1000) return `${ms}ms`;
|
|
return `${(ms / 1000).toFixed(1)}s`;
|
|
};
|
|
|
|
const formatTime = (datetime: string): string => {
|
|
return format(new Date(datetime), 'HH:mm', { locale: nl });
|
|
};
|
|
|
|
return (
|
|
<BlockContainer title={config.title} size={config.size}>
|
|
<div className="space-y-6">
|
|
{/* Period Selector */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-700">Periode</label>
|
|
<div className="grid grid-cols-4 gap-2">
|
|
{PERIOD_OPTIONS.map((option) => (
|
|
<button
|
|
key={option.value}
|
|
type="button"
|
|
onClick={() => setPeriod(option.value)}
|
|
className={cn(
|
|
'px-3 py-2 rounded-lg text-sm font-medium transition-colors',
|
|
period === option.value
|
|
? 'bg-slate-900 text-white border-2 border-slate-700'
|
|
: 'bg-slate-50 text-slate-600 border border-slate-200 hover:bg-slate-100 hover:text-slate-900'
|
|
)}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<p className="text-xs text-slate-500">
|
|
{PERIOD_OPTIONS.find((o) => o.value === period)?.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Role Filter Toggle */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-slate-700">Doelgroep</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setFilterRole('verpleegkundige')}
|
|
className={cn(
|
|
'px-3 py-2.5 rounded-lg text-sm font-medium transition-colors text-left',
|
|
filterRole === 'verpleegkundige'
|
|
? 'bg-slate-900 text-white border-2 border-slate-700'
|
|
: 'bg-slate-50 text-slate-600 border border-slate-200 hover:bg-slate-100 hover:text-slate-900'
|
|
)}
|
|
>
|
|
<div className="font-semibold">Verpleegkundige</div>
|
|
<div className="text-xs opacity-80 mt-0.5">Alle gemarkeerde items</div>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setFilterRole('psychiater')}
|
|
className={cn(
|
|
'px-3 py-2.5 rounded-lg text-sm font-medium transition-colors text-left',
|
|
filterRole === 'psychiater'
|
|
? 'bg-slate-900 text-white border-2 border-slate-700'
|
|
: 'bg-slate-50 text-slate-600 border border-slate-200 hover:bg-slate-100 hover:text-slate-900'
|
|
)}
|
|
>
|
|
<div className="font-semibold">Psychiater</div>
|
|
<div className="text-xs opacity-80 mt-0.5">Behandelrelevante items</div>
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-slate-500">
|
|
{filterRole === 'psychiater'
|
|
? 'AI filtert op behandelrelevantie voor psychiater'
|
|
: 'Toont alle door verpleegkundige gemarkeerde items'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Patients List */}
|
|
{isLoadingPatients ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Loader2 className="h-6 w-6 animate-spin text-slate-400 mr-2" />
|
|
<span className="text-sm text-slate-500">Patiënten laden...</span>
|
|
</div>
|
|
) : displayPatients.length === 0 ? (
|
|
<div className="text-center py-8 text-slate-400">
|
|
<Users className="h-8 w-8 mx-auto mb-2 opacity-50" />
|
|
<p className="text-sm">Geen patiënten gevonden voor deze periode</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{displayPatients.map((patient) => {
|
|
const summaryData = patientSummaries.get(patient.id);
|
|
const summary = summaryData?.summary;
|
|
const loading = summaryData?.loading || false;
|
|
const error = summaryData?.error;
|
|
|
|
return (
|
|
<div
|
|
key={patient.id}
|
|
className="p-4 rounded-lg bg-slate-50 border border-slate-200"
|
|
>
|
|
{/* Patient Header */}
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<h3 className="text-base font-medium text-slate-900">
|
|
{formatPatientName(patient)}
|
|
</h3>
|
|
{patient.alerts.total > 0 && (
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className="text-xs text-slate-500">
|
|
{patient.alerts.total} alert{patient.alerts.total > 1 ? 's' : ''}
|
|
</span>
|
|
{patient.alerts.high_risk_count > 0 && (
|
|
<span className="text-xs px-1.5 py-0.5 rounded bg-red-100 text-red-700 border border-red-200">
|
|
{patient.alerts.high_risk_count} risico
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{!summary && !loading && (
|
|
<Button
|
|
size="sm"
|
|
onClick={() => generateSummary(patient.id)}
|
|
className="bg-violet-600 hover:bg-violet-700"
|
|
>
|
|
<Sparkles className="h-4 w-4 mr-1.5" />
|
|
Genereer
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Loading State */}
|
|
{loading && (
|
|
<div className="py-6 text-center">
|
|
<Loader2 className="h-6 w-6 text-violet-600 mx-auto mb-2 animate-spin" />
|
|
<p className="text-sm text-slate-500">Samenvatting wordt gegenereerd...</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Error State */}
|
|
{error && (
|
|
<div className="py-4">
|
|
<div className="p-3 bg-red-50 rounded-lg border border-red-200 mb-3">
|
|
<div className="flex items-start gap-2">
|
|
<AlertTriangle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />
|
|
<p className="text-sm text-red-700">{error}</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => generateSummary(patient.id)}
|
|
className="w-full"
|
|
>
|
|
<RefreshCw className="h-4 w-4 mr-1.5" />
|
|
Opnieuw proberen
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Summary Content */}
|
|
{summary && (
|
|
<div className="space-y-4 pt-4 border-t border-slate-200">
|
|
{/* Samenvatting */}
|
|
<div>
|
|
<h4 className="text-sm font-medium text-slate-700 mb-2">Samenvatting</h4>
|
|
<p className="text-sm text-slate-600 leading-relaxed bg-white p-3 rounded-lg border border-slate-200">
|
|
{summary.samenvatting}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Aandachtspunten */}
|
|
{summary.aandachtspunten.length > 0 && (
|
|
<div>
|
|
<h4 className="text-sm font-medium text-slate-700 mb-2">
|
|
Aandachtspunten ({summary.aandachtspunten.length})
|
|
</h4>
|
|
<div className="space-y-2">
|
|
{summary.aandachtspunten.map((punt, index) => (
|
|
<AandachtspuntItem key={index} punt={punt} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Actiepunten */}
|
|
{summary.actiepunten.length > 0 && (
|
|
<div>
|
|
<h4 className="text-sm font-medium text-slate-700 mb-2">
|
|
Actiepunten ({summary.actiepunten.length})
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
{summary.actiepunten.map((actie, index) => (
|
|
<li
|
|
key={index}
|
|
className="flex items-start gap-2 text-sm text-slate-600"
|
|
>
|
|
<CheckCircle2 className="h-4 w-4 text-teal-600 flex-shrink-0 mt-0.5" />
|
|
<span>{actie}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<div className="pt-3 border-t border-slate-200 flex items-center justify-between">
|
|
<div className="flex items-center gap-2 text-xs text-slate-500">
|
|
<Clock className="h-3.5 w-3.5" />
|
|
<span>
|
|
{formatTime(summary.generatedAt)} ({formatDuration(summary.durationMs)})
|
|
</span>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => generateSummary(patient.id)}
|
|
disabled={loading}
|
|
className="text-xs h-7"
|
|
>
|
|
<RefreshCw className="h-3.5 w-3.5 mr-1" />
|
|
Vernieuwen
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</BlockContainer>
|
|
);
|
|
}
|
|
|
|
function AandachtspuntItem({ punt }: { punt: AISamenvatting['aandachtspunten'][0] }) {
|
|
const getBronTypeLabel = (type: string): string => {
|
|
const labels: Record<string, string> = {
|
|
observatie: 'Vitale functie',
|
|
rapportage: 'Rapportage',
|
|
verpleegkundig: 'Verpleegkundig',
|
|
risico: 'Risicobeoordeling',
|
|
};
|
|
return labels[type] || type;
|
|
};
|
|
|
|
const getBronTypeStyle = (type: string): { bg: string; text: string } => {
|
|
switch (type) {
|
|
case 'observatie':
|
|
return { bg: 'bg-teal-50', text: 'text-teal-700' };
|
|
case 'rapportage':
|
|
return { bg: 'bg-indigo-50', text: 'text-indigo-700' };
|
|
case 'verpleegkundig':
|
|
return { bg: 'bg-amber-50', text: 'text-amber-700' };
|
|
case 'risico':
|
|
return { bg: 'bg-red-50', text: 'text-red-700' };
|
|
default:
|
|
return { bg: 'bg-slate-100', text: 'text-slate-600' };
|
|
}
|
|
};
|
|
|
|
const bronStyle = getBronTypeStyle(punt.bron.type);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'p-3 rounded-lg border-l-4',
|
|
punt.urgent
|
|
? 'bg-red-50 border-red-500'
|
|
: 'bg-white border border-slate-200 border-l-slate-400'
|
|
)}
|
|
>
|
|
<div className="flex items-start gap-2 mb-2">
|
|
{punt.urgent && <AlertTriangle className="h-4 w-4 text-red-500 flex-shrink-0 mt-0.5" />}
|
|
<p
|
|
className={cn(
|
|
'text-sm flex-1',
|
|
punt.urgent ? 'text-red-700 font-medium' : 'text-slate-700'
|
|
)}
|
|
>
|
|
{punt.tekst}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs',
|
|
bronStyle.bg,
|
|
bronStyle.text
|
|
)}
|
|
>
|
|
{getBronTypeLabel(punt.bron.type)}
|
|
</span>
|
|
<span className="text-xs text-slate-500">
|
|
{punt.bron.label} • {punt.bron.datum}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|