feat: migrate clients module to patients + add docs

app/epd/patients/[id]/intakes/[intakeId]/diagnosis/components/diagnosis-manager.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { createDiagnosis, deleteDiagnosis, type Condition } from '../../actions';
+import { Loader2, Trash2 } from 'lucide-react';
+import { format } from 'date-fns';
+import { nl } from 'date-fns/locale';
+
+const severities = ['licht', 'matig', 'ernstig'];
+const statuses = ['active', 'resolved', 'entered-in-error'];
+
+interface DiagnosisManagerProps {
+  patientId: string;
+  intakeId: string;
+  diagnoses: Condition[];
+}
+
+export function DiagnosisManager({ patientId, intakeId, diagnoses }: DiagnosisManagerProps) {
+  const [form, setForm] = useState({ code: '', description: '', severity: severities[0], status: statuses[0], notes: '' });
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const handleSubmit = () => {
+    if (!form.code || !form.description) {
+      setError('Code en omschrijving zijn verplicht.');
+      return;
+    }
+    startTransition(async () => {
+      try {
+        await createDiagnosis({
+          patientId,
+          intakeId,
+          code: form.code,
+          description: form.description,
+          severity: form.severity,
+          status: form.status,
+          notes: form.notes,
+        });
+        setForm({ ...form, notes: '' });
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Opslaan mislukt');
+      }
+    });
+  };
+
+  const handleDelete = (id: string) => {
+    setDeletingId(id);
+    startTransition(async () => {
+      try {
+        await deleteDiagnosis(patientId, intakeId, id);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Verwijderen mislukt');
+      } finally {
+        setDeletingId(null);
+      }
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 gap-3">
+        {diagnoses.length === 0 && <p className="text-sm text-slate-500">Nog geen diagnoses.</p>}
+        {diagnoses.map((diag) => (
+          <div key={diag.id} className="rounded-lg border border-slate-200 p-4 space-y-1">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium text-slate-900">{diag.code_code} — {diag.code_display}</p>
+                <p className="text-xs text-slate-500">
+                  {diag.recorded_date
+                    ? format(new Date(diag.recorded_date), 'd MMM yyyy', { locale: nl })
+                    : 'Onbekende datum'}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => handleDelete(diag.id)}
+                disabled={deletingId === diag.id}
+                className="inline-flex items-center gap-1 rounded-md border border-red-200 px-3 py-1.5 text-xs text-red-600"
+              >
+                {deletingId === diag.id ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />} Verwijder
+              </button>
+            </div>
+            {diag.note && <p className="text-sm text-slate-700">{diag.note}</p>}
+          </div>
+        ))}
+      </div>
+
+      <div className="rounded-lg border border-slate-200 p-4 space-y-3">
+        <h3 className="text-sm font-semibold text-slate-900">Nieuwe diagnose</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <input
+            type="text"
+            placeholder="DSM code"
+            value={form.code}
+            onChange={(e) => setForm((prev) => ({ ...prev, code: e.target.value }))}
+            className="h-10 rounded-md border border-slate-300 px-3 text-sm"
+          />
+          <input
+            type="text"
+            placeholder="Omschrijving"
+            value={form.description}
+            onChange={(e) => setForm((prev) => ({ ...prev, description: e.target.value }))}
+            className="h-10 rounded-md border border-slate-300 px-3 text-sm"
+          />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <select
+            value={form.severity}
+            onChange={(e) => setForm((prev) => ({ ...prev, severity: e.target.value }))}
+            className="h-10 rounded-md border border-slate-300 px-3 text-sm"
+          >
+            {severities.map((sev) => (
+              <option key={sev} value={sev}>
+                {sev}
+              </option>
+            ))}
+          </select>
+          <select
+            value={form.status}
+            onChange={(e) => setForm((prev) => ({ ...prev, status: e.target.value }))}
+            className="h-10 rounded-md border border-slate-300 px-3 text-sm"
+          >
+            {statuses.map((status) => (
+              <option key={status} value={status}>
+                {status}
+              </option>
+            ))}
+          </select>
+        </div>
+        <textarea
+          value={form.notes}
+          onChange={(e) => setForm((prev) => ({ ...prev, notes: e.target.value }))}
+          placeholder="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"
+        >
+          {isPending && <Loader2 className="h-4 w-4 animate-spin" />}
+          Opslaan
+        </button>
+      </div>
+    </div>
+  );
+}