feat(20-03): add transcript UI — modal, list, expand/collapse, delete

TranscriptModal.tsx: new component — call_date input, optional title,
content textarea (min-h-48). Calls addTranscript server action.

LeadDetail.tsx: adds transcripts prop (ClientTranscript[]), TranscriptModal
button in header, "Transcript Call" Card after Storico Attività with
call_date formatted in Italian, 3-line preview with expand/collapse toggle,
Elimina button via deleteTranscript. border-l-4 border-purple-300.

page.tsx: getTranscripts(id) added to Promise.all, transcripts prop
passed to LeadDetail. Build: clean, TypeScript: no errors.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/admin/leads/LeadDetail.tsx

@@ -2,17 +2,18 @@
 
 import { useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
-import { Lead, Activity, Reminder } from "@/db/schema";
+import { Lead, Activity, Reminder, ClientTranscript } from "@/db/schema";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { OptionMultiSelect } from "@/components/ui/option-multi-select";
-import { addLeadTag, removeLeadTag, renameLeadTag } from "@/app/admin/leads/actions";
+import { addLeadTag, removeLeadTag, renameLeadTag, deleteTranscript } from "@/app/admin/leads/actions";
 import { formatDistanceToNow, format } from "date-fns";
 import { it } from "date-fns/locale";
 import { LogActivityModal } from "./LogActivityModal";
 import { SendQuoteModal } from "./SendQuoteModal";
 import { EditLeadModal } from "./LeadForm";
+import { TranscriptModal } from "./TranscriptModal";
 
 const ACTIVITY_ICON: Record<string, string> = {
   call: "📞",
@@ -36,16 +37,20 @@ export function LeadDetail({
   reminders,
   tags,
   tagOptions,
+  transcripts,
 }: {
   lead: Lead;
   activities: Activity[];
   reminders: Reminder[];
   tags: string[];
   tagOptions: string[];
+  transcripts: ClientTranscript[];
 }) {
   const router = useRouter();
   const [, startTransition] = useTransition();
   const [tagError, setTagError] = useState<string | null>(null);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [deletingId, setDeletingId] = useState<string | null>(null);
 
   function run(fn: () => Promise<unknown>) {
     setTagError(null);
@@ -59,6 +64,29 @@ export function LeadDetail({
     });
   }
 
+  function toggleExpand(id: string) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function handleDeleteTranscript(transcriptId: string) {
+    setDeletingId(transcriptId);
+    startTransition(async () => {
+      try {
+        await deleteTranscript(transcriptId, lead.id);
+        router.refresh();
+      } catch (e) {
+        console.error("deleteTranscript error:", e);
+      } finally {
+        setDeletingId(null);
+      }
+    });
+  }
+
   return (
     <div className="space-y-6">
       {/* Header + Actions */}
@@ -69,6 +97,7 @@ export function LeadDetail({
         </div>
         <div className="flex gap-2">
           <LogActivityModal leadId={lead.id} />
+          <TranscriptModal leadId={lead.id} />
           <SendQuoteModal leadId={lead.id} />
           <EditLeadModal lead={lead} />
         </div>
@@ -194,6 +223,73 @@ export function LeadDetail({
           )}
         </CardContent>
       </Card>
+
+      {/* Transcript Call */}
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between">
+          <CardTitle>Transcript Call</CardTitle>
+          <span className="text-sm text-gray-500">
+            {transcripts.length} {transcripts.length === 1 ? "transcript" : "transcript"}
+          </span>
+        </CardHeader>
+        <CardContent>
+          {transcripts.length > 0 ? (
+            <div className="space-y-4">
+              {transcripts.map((t) => {
+                const isExpanded = expandedIds.has(t.id);
+                const formattedDate = format(
+                  new Date(t.call_date + "T00:00:00"),
+                  "d MMMM yyyy",
+                  { locale: it }
+                );
+                const lines = t.content.split("\n");
+                const preview = lines.slice(0, 3).join("\n").slice(0, 200);
+                const hasMore = t.content.length > preview.length || lines.length > 3;
+
+                return (
+                  <div key={t.id} className="border-l-4 border-purple-300 pl-4 pb-4">
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <span className="font-medium text-sm">{formattedDate}</span>
+                          {t.title && (
+                            <span className="text-gray-600 text-sm">— {t.title}</span>
+                          )}
+                        </div>
+                        <div className="mt-2 text-sm text-gray-700 whitespace-pre-wrap">
+                          {isExpanded ? t.content : preview}
+                          {!isExpanded && hasMore && (
+                            <span className="text-gray-400">...</span>
+                          )}
+                        </div>
+                        {hasMore && (
+                          <button
+                            onClick={() => toggleExpand(t.id)}
+                            className="text-xs text-blue-600 hover:underline mt-1"
+                          >
+                            {isExpanded ? "Mostra meno" : "Mostra tutto"}
+                          </button>
+                        )}
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-red-600 hover:text-red-700 shrink-0"
+                        disabled={deletingId === t.id}
+                        onClick={() => handleDeleteTranscript(t.id)}
+                      >
+                        {deletingId === t.id ? "..." : "Elimina"}
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <p className="text-gray-500 text-sm">Nessun transcript registrato</p>
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }