85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState, useTransition } from 'react';
|
|
import { Loader2, NotebookPen } from 'lucide-react';
|
|
import { saveHelpRequest } from '../actions';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface HelpRequestCardProps {
|
|
patientId: string;
|
|
screeningId: string;
|
|
initialValue?: string | null;
|
|
}
|
|
|
|
export function HelpRequestCard({ patientId, screeningId, initialValue }: HelpRequestCardProps) {
|
|
const [value, setValue] = useState(initialValue || '');
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [success, setSuccess] = useState(false);
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
useEffect(() => {
|
|
setValue(initialValue || '');
|
|
}, [initialValue]);
|
|
|
|
const handleSave = () => {
|
|
setError(null);
|
|
setSuccess(false);
|
|
|
|
startTransition(async () => {
|
|
try {
|
|
await saveHelpRequest({
|
|
patientId,
|
|
screeningId,
|
|
request: value,
|
|
});
|
|
setSuccess(true);
|
|
} catch (err) {
|
|
console.error(err);
|
|
setError(err instanceof Error ? err.message : 'Opslaan mislukt');
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<section className="bg-white rounded-lg border border-slate-200 p-6 shadow-sm">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="p-2 rounded-md bg-teal-50 text-teal-600">
|
|
<NotebookPen className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-slate-900">Hulpvraag</h3>
|
|
<p className="text-sm text-slate-500">Beschrijf de zorgvraag van de cliënt</p>
|
|
</div>
|
|
</div>
|
|
|
|
<textarea
|
|
className="w-full min-h-[160px] rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 focus:bg-white focus:border-teal-500 focus:ring-2 focus:ring-teal-100 transition"
|
|
placeholder="Beschrijf de hulpvraag van de cliënt..."
|
|
value={value}
|
|
onChange={(event) => {
|
|
setValue(event.target.value);
|
|
setSuccess(false);
|
|
}}
|
|
/>
|
|
|
|
<div className="mt-4 flex items-center justify-between">
|
|
<div className="text-sm">
|
|
{error && <span className="text-red-600">{error}</span>}
|
|
{success && !error && <span className="text-emerald-600">Opgeslagen</span>}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={handleSave}
|
|
disabled={isPending}
|
|
className={cn(
|
|
'inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium text-white bg-teal-600 hover:bg-teal-700 transition disabled:opacity-60 disabled:cursor-not-allowed'
|
|
)}
|
|
>
|
|
{isPending && <Loader2 className="h-4 w-4 animate-spin" />}
|
|
Opslaan
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|