feat: migrate clients module to patients + add docs

2025-11-23 10:13:00 +01:00
parent 8e3925ea09
commit 6fcb9a0e7b
277 changed files with 9131 additions and 458 deletions
--- a/app/epd/patients/[id]/screening/components/help-request-card.tsx
+++ b/app/epd/patients/[id]/screening/components/help-request-card.tsx
@@ -0,0 +1,84 @@
+'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>
+  );
+}