From 9f5a6dcbe568150f1bf3759a98a470dc900f9da3 Mon Sep 17 00:00:00 2001 From: Simone Cavalli Date: Sat, 20 Jun 2026 08:58:06 +0200 Subject: [PATCH] =?UTF-8?q?feat(20-03):=20add=20transcript=20UI=20?= =?UTF-8?q?=E2=80=94=20modal,=20list,=20expand/collapse,=20delete?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/app/admin/leads/[id]/page.tsx | 10 +- src/components/admin/leads/LeadDetail.tsx | 100 +++++++++++- .../admin/leads/TranscriptModal.tsx | 147 ++++++++++++++++++ 3 files changed, 252 insertions(+), 5 deletions(-) create mode 100644 src/components/admin/leads/TranscriptModal.tsx diff --git a/src/app/admin/leads/[id]/page.tsx b/src/app/admin/leads/[id]/page.tsx index f9aee2f..aeb89b4 100644 --- a/src/app/admin/leads/[id]/page.tsx +++ b/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 ( ); } diff --git a/src/components/admin/leads/LeadDetail.tsx b/src/components/admin/leads/LeadDetail.tsx index df23b9e..5bd8a9f 100644 --- a/src/components/admin/leads/LeadDetail.tsx +++ b/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 = { 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(null); + const [expandedIds, setExpandedIds] = useState>(new Set()); + const [deletingId, setDeletingId] = useState(null); function run(fn: () => Promise) { 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 (
{/* Header + Actions */} @@ -69,6 +97,7 @@ export function LeadDetail({
+
@@ -194,6 +223,73 @@ export function LeadDetail({ )} + + {/* Transcript Call */} + + + Transcript Call + + {transcripts.length} {transcripts.length === 1 ? "transcript" : "transcript"} + + + + {transcripts.length > 0 ? ( +
+ {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 ( +
+
+
+
+ {formattedDate} + {t.title && ( + — {t.title} + )} +
+
+ {isExpanded ? t.content : preview} + {!isExpanded && hasMore && ( + ... + )} +
+ {hasMore && ( + + )} +
+ +
+
+ ); + })} +
+ ) : ( +

Nessun transcript registrato

+ )} + + ); } diff --git a/src/components/admin/leads/TranscriptModal.tsx b/src/components/admin/leads/TranscriptModal.tsx new file mode 100644 index 0000000..dbc4bf4 --- /dev/null +++ b/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; + +export function TranscriptModal({ leadId }: { leadId: string }) { + const [open, setOpen] = useState(false); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + const form = useForm({ + 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 ( + + + + + + + Aggiungi Transcript Call + +
+ +
+ ( + + Data call + + + + + + )} + /> + ( + + Titolo (opzionale) + + + + + + )} + /> +
+ + ( + + Transcript + +