feat: migrate clients module to patients + add docs
This commit is contained in:
colinislit
@@ -0,0 +1,130 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import { Loader2, Mic, Square } from 'lucide-react';
|
||||
|
||||
interface SpeechRecorderProps {
|
||||
onTranscript: (text: string) => void;
|
||||
}
|
||||
|
||||
export function SpeechRecorder({ onTranscript }: SpeechRecorderProps) {
|
||||
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
|
||||
const chunksRef = useRef<Blob[]>([]);
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [permissionDenied, setPermissionDenied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
mediaRecorderRef.current?.stream.getTracks().forEach((track) => track.stop());
|
||||
};
|
||||
}, []);
|
||||
|
||||
const stopStream = () => {
|
||||
mediaRecorderRef.current?.stream.getTracks().forEach((track) => track.stop());
|
||||
mediaRecorderRef.current = null;
|
||||
};
|
||||
|
||||
const handleStop = useCallback(async () => {
|
||||
setIsRecording(false);
|
||||
const chunks = chunksRef.current;
|
||||
chunksRef.current = [];
|
||||
stopStream();
|
||||
|
||||
if (chunks.length === 0) return;
|
||||
|
||||
const blob = new Blob(chunks, { type: 'audio/webm' });
|
||||
const formData = new FormData();
|
||||
formData.append('file', blob, 'recording.webm');
|
||||
|
||||
try {
|
||||
setIsUploading(true);
|
||||
setError(null);
|
||||
const response = await fetch('/api/deepgram/transcribe', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json().catch(() => ({}));
|
||||
throw new Error(data.error || 'Transcriptie mislukt');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.transcript) {
|
||||
onTranscript(data.transcript as string);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError(err instanceof Error ? err.message : 'Onbekende fout');
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
}, [onTranscript]);
|
||||
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
setError(null);
|
||||
setPermissionDenied(false);
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
|
||||
mediaRecorderRef.current = mediaRecorder;
|
||||
chunksRef.current = [];
|
||||
|
||||
mediaRecorder.ondataavailable = (event) => {
|
||||
if (event.data.size > 0) {
|
||||
chunksRef.current.push(event.data);
|
||||
}
|
||||
};
|
||||
|
||||
mediaRecorder.onstop = handleStop;
|
||||
mediaRecorder.start();
|
||||
setIsRecording(true);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setPermissionDenied(true);
|
||||
setError('Toegang tot microfoon geweigerd of niet beschikbaar.');
|
||||
}
|
||||
};
|
||||
|
||||
const stopRecording = () => {
|
||||
if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
|
||||
mediaRecorderRef.current.stop();
|
||||
}
|
||||
};
|
||||
|
||||
const isBusy = isRecording || isUploading;
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-slate-200 p-4 bg-white space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-900">Spraak-naar-tekst</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
{isRecording ? 'Opname loopt…' : 'Neem een fragment op en laat Deepgram transcriberen.'}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={isRecording ? stopRecording : startRecording}
|
||||
disabled={isUploading}
|
||||
className="inline-flex items-center gap-2 rounded-md border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-60"
|
||||
>
|
||||
{isRecording ? <><Square className="h-3 w-3 text-red-600" /> Stop</> : <><Mic className="h-3 w-3 text-teal-600" /> Opnemen</>}
|
||||
</button>
|
||||
</div>
|
||||
{isUploading && (
|
||||
<p className="text-xs text-slate-500 inline-flex items-center gap-1">
|
||||
<Loader2 className="h-3 w-3 animate-spin" /> Transcriptie bezig…
|
||||
</p>
|
||||
)}
|
||||
{permissionDenied && (
|
||||
<p className="text-xs text-red-600">Microfoontoegang nodig om op te nemen.</p>
|
||||
)}
|
||||
{error && !permissionDenied && (
|
||||
<p className="text-xs text-red-600">{error}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,245 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useTransition } from 'react';
|
||||
import { saveTreatmentAdvice } from '../../actions';
|
||||
import { Loader2, Calendar, UserCircle, ClipboardList, Share2, CheckCircle2 } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { RichTextEditor } from '@/components/rich-text-editor';
|
||||
import { SpeechRecorder } from './speech-recorder';
|
||||
|
||||
interface AdviceData {
|
||||
advice?: string;
|
||||
department?: string;
|
||||
program?: string;
|
||||
notes?: string;
|
||||
psychologist?: string;
|
||||
outcome?: 'in_zorg' | 'doorverwijzing' | 'extra_diagnostiek';
|
||||
outcomeNotes?: string;
|
||||
}
|
||||
|
||||
const departments = ['Blijft huidige afdeling', 'Volwassenen', 'Jeugd', 'Forensisch'];
|
||||
const programs = ['Algemeen GGZ', 'FACT', 'Verslaving', 'Trauma'];
|
||||
const outcomeOptions = [
|
||||
{ value: 'in_zorg', label: 'Cliënt gaat in zorg' },
|
||||
{ value: 'doorverwijzing', label: 'Doorverwijzen' },
|
||||
{ value: 'extra_diagnostiek', label: 'Extra diagnostiek nodig' },
|
||||
];
|
||||
|
||||
const DEFAULT_PLACEHOLDER = `- Aanbevolen behandelvorm…
|
||||
- Frequentie en duur…
|
||||
- Aanvullende interventies…
|
||||
- Medicatie-overleg indien relevant…
|
||||
- Monitoring en evaluatie…`;
|
||||
|
||||
interface TreatmentAdviceFormProps {
|
||||
patientId: string;
|
||||
intakeId: string;
|
||||
initialData: AdviceData;
|
||||
initialDate: string;
|
||||
initialPsychologist?: string;
|
||||
}
|
||||
|
||||
export function TreatmentAdviceForm({ patientId, intakeId, initialData, initialDate, initialPsychologist }: TreatmentAdviceFormProps) {
|
||||
const [form, setForm] = useState<AdviceData>({
|
||||
advice: initialData.advice || '',
|
||||
department: initialData.department || '',
|
||||
program: initialData.program || '',
|
||||
notes: initialData.notes || '',
|
||||
psychologist: initialData.psychologist || initialPsychologist || '',
|
||||
outcome: initialData.outcome,
|
||||
outcomeNotes: initialData.outcomeNotes || '',
|
||||
});
|
||||
const [finalize, setFinalize] = useState(Boolean(initialData.outcome));
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isPending, startTransition] = useTransition();
|
||||
|
||||
const appendTranscript = (text: string) => {
|
||||
if (!text) return;
|
||||
const sanitized = text
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean)
|
||||
.map((line) =>
|
||||
`<p>${line
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')}</p>`
|
||||
)
|
||||
.join('');
|
||||
setForm((prev) => ({ ...prev, advice: `${prev.advice || ''}${sanitized}` }));
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!form.advice) {
|
||||
setError('Behandeladvies is verplicht.');
|
||||
return;
|
||||
}
|
||||
if (finalize && !form.outcome) {
|
||||
setError('Kies een vervolgoptie voordat je afrondt.');
|
||||
return;
|
||||
}
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await saveTreatmentAdvice({
|
||||
patientId,
|
||||
intakeId,
|
||||
advice: form.advice || '',
|
||||
department: form.department,
|
||||
program: form.program,
|
||||
notes: form.notes,
|
||||
psychologist: form.psychologist,
|
||||
finalize,
|
||||
outcome: form.outcome,
|
||||
outcomeNotes: form.outcomeNotes,
|
||||
});
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Opslaan mislukt');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div className="rounded-lg border border-slate-200 p-4 space-y-3">
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-slate-500 flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4" /> Datum advies
|
||||
</label>
|
||||
<div className="text-sm text-slate-900">{initialDate}</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-slate-500 flex items-center gap-2">
|
||||
<UserCircle className="h-4 w-4" /> Behandelend psycholoog
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={form.psychologist}
|
||||
onChange={(e) => setForm((prev) => ({ ...prev, psychologist: e.target.value }))}
|
||||
className="mt-1 h-9 w-full rounded-md border border-slate-300 px-3 text-sm"
|
||||
placeholder="Naam psycholoog"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-slate-500 flex items-center gap-2">
|
||||
<ClipboardList className="h-4 w-4" /> Afdeling
|
||||
</label>
|
||||
<select
|
||||
value={form.department}
|
||||
onChange={(e) => setForm((prev) => ({ ...prev, department: e.target.value }))}
|
||||
className="mt-1 h-9 w-full rounded-md border border-slate-300 px-3 text-sm"
|
||||
>
|
||||
<option value="">Selecteer afdeling…</option>
|
||||
{departments.map((dept) => (
|
||||
<option key={dept} value={dept}>
|
||||
{dept}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-slate-500 flex items-center gap-2">
|
||||
<ClipboardList className="h-4 w-4" /> Zorgprogramma
|
||||
</label>
|
||||
<select
|
||||
value={form.program}
|
||||
onChange={(e) => setForm((prev) => ({ ...prev, program: e.target.value }))}
|
||||
className="mt-1 h-9 w-full rounded-md border border-slate-300 px-3 text-sm"
|
||||
>
|
||||
<option value="">Selecteer zorgprogramma…</option>
|
||||
{programs.map((prog) => (
|
||||
<option key={prog} value={prog}>
|
||||
{prog}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-slate-200 p-4 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<label className="text-xs font-semibold text-slate-500 flex items-center gap-2">
|
||||
<CheckCircle2 className="h-4 w-4" /> Intake afronden
|
||||
</label>
|
||||
<p className="text-xs text-slate-500">
|
||||
Kies vervolgoptie om de intake definitief af te sluiten.
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={finalize}
|
||||
onChange={(e) => setFinalize(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-slate-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{outcomeOptions.map((option) => (
|
||||
<label key={option.value} className="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input
|
||||
type="radio"
|
||||
name="outcome"
|
||||
value={option.value}
|
||||
disabled={!finalize}
|
||||
checked={form.outcome === option.value}
|
||||
onChange={(e) => setForm((prev) => ({ ...prev, outcome: e.target.value as AdviceData['outcome'] }))}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
{option.label}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<textarea
|
||||
value={form.outcomeNotes}
|
||||
disabled={!finalize}
|
||||
onChange={(e) => setForm((prev) => ({ ...prev, outcomeNotes: e.target.value }))}
|
||||
placeholder="Toelichting op vervolg"
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm disabled:bg-slate-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-slate-200 p-4 bg-slate-50 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-semibold text-slate-700">
|
||||
<Share2 className="h-4 w-4" /> Doorzetten naar behandelplan
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">
|
||||
Gebruik dit advies als basis voor het behandelplan of koppel direct door.
|
||||
</p>
|
||||
<Link
|
||||
href={`/epd/patients/${patientId}/behandelplan`}
|
||||
className="inline-flex items-center justify-center rounded-md border border-slate-300 px-3 py-2 text-xs font-medium text-slate-700 hover:bg-white"
|
||||
>
|
||||
Open behandelplan
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<SpeechRecorder onTranscript={appendTranscript} />
|
||||
<RichTextEditor
|
||||
value={form.advice}
|
||||
onChange={(html) => setForm((prev) => ({ ...prev, advice: html }))}
|
||||
placeholder={DEFAULT_PLACEHOLDER}
|
||||
/>
|
||||
<textarea
|
||||
value={form.notes}
|
||||
onChange={(e) => setForm((prev) => ({ ...prev, notes: e.target.value }))}
|
||||
placeholder="Aanvullende notities"
|
||||
className="w-full rounded-md border border-slate-300 px-3 py-2 text-sm"
|
||||
/>
|
||||
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={isPending}
|
||||
className="inline-flex items-center gap-2 rounded-md bg-teal-600 px-4 py-2 text-sm font-medium text-white hover:bg-teal-700 disabled:opacity-60"
|
||||
>
|
||||
{isPending && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
Opslaan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user