106 lines
3.6 KiB
TypeScript
106 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useTransition } from 'react';
|
|
import { addScreeningActivity } from '../actions';
|
|
import type { ScreeningActivity } from '@/lib/types/screening';
|
|
import { Loader2, MessageSquare } from 'lucide-react';
|
|
import { format } from 'date-fns';
|
|
import { nl } from 'date-fns/locale';
|
|
|
|
interface ActivityLogProps {
|
|
patientId: string;
|
|
screeningId: string;
|
|
activities: ScreeningActivity[];
|
|
}
|
|
|
|
export function ActivityLog({ patientId, screeningId, activities }: ActivityLogProps) {
|
|
const [text, setText] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const handleSubmit = () => {
|
|
if (!text.trim()) {
|
|
setError('Vul eerst een activiteit in.');
|
|
return;
|
|
}
|
|
|
|
setError(null);
|
|
|
|
startTransition(async () => {
|
|
try {
|
|
await addScreeningActivity({
|
|
patientId,
|
|
screeningId,
|
|
text,
|
|
});
|
|
setText('');
|
|
} catch (err) {
|
|
console.error(err);
|
|
setError(err instanceof Error ? err.message : 'Toevoegen mislukt');
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<section className="bg-white rounded-lg border border-slate-200 p-6 shadow-sm h-full flex flex-col">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 rounded-md bg-blue-50 text-blue-600">
|
|
<MessageSquare className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900">Activiteitenlog</h3>
|
|
<p className="text-sm text-slate-500">Chronologisch overzicht</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4 overflow-y-auto flex-1 pr-1">
|
|
{activities.length === 0 && (
|
|
<p className="text-sm text-slate-500">
|
|
Nog geen activiteiten. Voeg de eerste notitie toe om het dossier te starten.
|
|
</p>
|
|
)}
|
|
{activities.map((activity) => (
|
|
<div
|
|
key={activity.id}
|
|
className="border border-slate-200 rounded-lg p-3 bg-slate-50"
|
|
>
|
|
<div className="flex items-center justify-between text-xs text-slate-500 mb-1">
|
|
<span className="font-medium text-slate-700">
|
|
{activity.created_by_name || 'Onbekende gebruiker'}
|
|
</span>
|
|
{activity.created_at && (
|
|
<span>
|
|
{format(new Date(activity.created_at), 'd MMM yyyy HH:mm', { locale: nl })}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-slate-700 whitespace-pre-line">{activity.activity_text}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 pt-4 border-t border-slate-100">
|
|
<label className="text-sm font-medium text-slate-700 mb-2 block">
|
|
Nieuwe activiteit
|
|
</label>
|
|
<textarea
|
|
value={text}
|
|
onChange={(event) => setText(event.target.value)}
|
|
placeholder="Bijv. Huisarts gesproken, verwijsbrief ontvangen..."
|
|
className="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-teal-500 focus:ring-2 focus:ring-teal-100"
|
|
/>
|
|
{error && <p className="text-sm text-red-600 mt-1">{error}</p>}
|
|
<button
|
|
type="button"
|
|
onClick={handleSubmit}
|
|
disabled={isPending}
|
|
className="mt-3 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" />}
|
|
Toevoegen
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|