feat(02-04): add ApproveButton, CommentForm, CommentList; wire interactive elements into client dashboard

- ApproveButton: 'use client', POSTs to /api/client/approve with token + deliverableId, calls router.refresh(); shows immutable "Approvato il [date]" badge once approved_at is set - CommentForm: 'use client', POSTs to /api/client/comment, calls router.refresh() on success; clears textarea after submit - CommentList: presentational Server Component, labels client author as "Tu" and admin as "iamcavalli" - page.tsx: fetches all comments server-side (scoped to client's task/deliverable ids), passes token + comments to ClientDashboard; revalidate=0 ensures approvals and comments always fresh - client-dashboard.tsx: passes token + comments down to PhaseTimeline - phase-timeline.tsx: renders ApproveButton on each deliverable (pending/submitted/approved), CommentList + CommentForm below each deliverable and each task
2026-05-15 21:50:07 +02:00
parent c24bdde603
commit dc512ec758
6 changed files with 236 additions and 18 deletions
@@ -0,0 +1,67 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+type Props = {
+  token: string;
+  entityType: "task" | "deliverable";
+  entityId: string;
+};
+
+export function CommentForm({ token, entityType, entityId }: Props) {
+  const router = useRouter();
+  const [body, setBody] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!body.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/client/comment", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token, entity_type: entityType, entity_id: entityId, body }),
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        setError(data.error ?? "Errore durante l'invio");
+        return;
+      }
+      setBody("");
+      router.refresh(); // Re-fetch Server Component to show new comment
+    } catch {
+      setError("Errore di rete");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="mt-3 flex gap-2 items-end">
+      <Textarea
+        value={body}
+        onChange={(e) => setBody(e.target.value)}
+        placeholder="Lascia un commento..."
+        rows={2}
+        className="text-sm resize-none flex-1"
+      />
+      <div className="flex flex-col justify-end">
+        <Button
+          type="submit"
+          size="sm"
+          disabled={loading || !body.trim()}
+          className="text-xs"
+        >
+          {loading ? "Invio..." : "Invia"}
+        </Button>
+      </div>
+      {error && <p className="text-xs text-red-500 mt-1">{error}</p>}
+    </form>
+  );
+}