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/app/admin/leads/[id]/page.tsx

@@ -1,5 +1,5 @@
 import { notFound } from "next/navigation";
-import { getActivityLog, getUpcomingReminders } from "@/lib/lead-service";
+import { getActivityLog, getUpcomingReminders, getTranscripts } from "@/lib/lead-service";
 import { getLeadsWithTags, getLeadFieldOptions } from "@/lib/admin-queries";
 import { LeadDetail } from "@/components/admin/leads/LeadDetail";
 
@@ -17,8 +17,11 @@ export default async function LeadDetailPage({ params }: { params: Promise<{ id:
     notFound();
   }
 
-  const activities = await getActivityLog(id);
-  const reminders = await getUpcomingReminders(id);
+  const [activities, reminders, transcripts] = await Promise.all([
+    getActivityLog(id),
+    getUpcomingReminders(id),
+    getTranscripts(id),
+  ]);
 
   return (
     <LeadDetail
@@ -27,6 +30,7 @@ export default async function LeadDetailPage({ params }: { params: Promise<{ id:
       reminders={reminders}
       tags={lead.tags}
       tagOptions={options.tags}
+      transcripts={transcripts}
     />
   );
 }

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>
   );
 }

src/components/admin/leads/TranscriptModal.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { addTranscript } from "@/app/admin/leads/actions";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+
+const transcriptSchema = z.object({
+  lead_id: z.string().min(1),
+  title: z.string().optional(),
+  content: z.string().min(1, "Il testo del transcript è obbligatorio"),
+  call_date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/, "Data non valida"),
+});
+
+type TranscriptInput = z.infer<typeof transcriptSchema>;
+
+export function TranscriptModal({ leadId }: { leadId: string }) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const form = useForm<TranscriptInput>({
+    resolver: zodResolver(transcriptSchema),
+    defaultValues: {
+      lead_id: leadId,
+      title: "",
+      content: "",
+      call_date: new Date().toISOString().split("T")[0],
+    },
+  });
+
+  async function onSubmit(data: TranscriptInput) {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await addTranscript(data);
+      if (result.success) {
+        setOpen(false);
+        form.reset({
+          lead_id: leadId,
+          title: "",
+          content: "",
+          call_date: new Date().toISOString().split("T")[0],
+        });
+      } else {
+        setError(result.error ?? "Errore nel salvataggio");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          Aggiungi Transcript
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Aggiungi Transcript Call</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="call_date"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Data call</FormLabel>
+                    <FormControl>
+                      <Input type="date" {...field} value={field.value || ""} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Titolo (opzionale)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="es. Discovery call"
+                        {...field}
+                        value={field.value || ""}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="content"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Transcript</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Incolla qui il testo del transcript..."
+                      className="min-h-48 resize-y"
+                      {...field}
+                      value={field.value || ""}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {error && <p className="text-sm text-red-600">{error}</p>}
+
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? "Salvataggio..." : "Salva Transcript"}
+            </Button>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}