clienthub/.planning/phases/20-knowledge-base-cliente/20-03-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
20-knowledge-base-cliente	03	execute	3	20-01 20-02	src/components/admin/leads/TranscriptModal.tsx src/components/admin/leads/LeadDetail.tsx src/app/admin/leads/[id]/page.tsx	true	KB-02	truths artifacts key_links L'admin può aggiungere un transcript dalla pagina dettaglio lead via modal I transcript sono elencati in call_date DESC con titolo, data formattata e anteprima del testo Il testo completo di ogni transcript è espandibile/collassabile L'admin può eliminare un transcript con un bottone 'Elimina' La sezione Transcript appare dopo lo Storico Attività nel LeadDetail path provides exports src/components/admin/leads/TranscriptModal.tsx Modal form per aggiungere transcript (call_date, title opzionale, content textarea) TranscriptModal path provides contains src/components/admin/leads/LeadDetail.tsx Sezione Transcript con lista collassabile e azione Elimina Transcript path provides contains src/app/admin/leads/[id]/page.tsx getTranscripts(id) nel Promise.all + prop transcripts passato a LeadDetail getTranscripts from to via pattern src/components/admin/leads/TranscriptModal.tsx src/app/admin/leads/actions.ts import addTranscript addTranscript from to via pattern src/components/admin/leads/LeadDetail.tsx src/app/admin/leads/actions.ts import deleteTranscript deleteTranscript from to via pattern src/app/admin/leads/[id]/page.tsx src/lib/lead-service.ts import getTranscripts getTranscripts

Creare il componente `TranscriptModal` (form per aggiungere transcript) e integrare la sezione Transcript in `LeadDetail`, con wiring nella page server.

Purpose: Completa il loop KB-02 — l'admin può incollare transcript datati e vederli elencati in ordine cronologico nel profilo lead. I dati sono pronti per essere letti dall'agente AI in Phase 21.

Output: UI completa funzionante — modal di aggiunta + lista con expand/collapse + elimina.

<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/phases/20-knowledge-base-cliente/20-CONTEXT.md @.planning/phases/20-knowledge-base-cliente/20-02-SUMMARY.md

Da LogActivityModal.tsx — pattern modal con react-hook-form + zod + shadcn Dialog:

"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
// ... action import ...
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";

export function LogActivityModal({ leadId }: { leadId: string }) {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const form = useForm<any>({
    resolver: zodResolver(schema),
    defaultValues: { lead_id: leadId, activity_date: new Date().toISOString().split("T")[0], ... },
  });
  async function onSubmit(data) {
    setLoading(true);
    try {
      const result = await logActivity(data);
      if (result.success) { setOpen(false); form.reset({...}); }
    } finally { setLoading(false); }
  }
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild><Button variant="outline" size="sm">...</Button></DialogTrigger>
      <DialogContent className="max-w-sm">
        ...
        <Input type="date" {...field} value={field.value || ""} />
        <Textarea className="resize-none h-24" {...field} value={field.value || ""} />
        <Button type="submit" className="w-full" disabled={loading}>...</Button>
      </DialogContent>
    </Dialog>
  );
}

Da LeadDetail.tsx — struttura esistente con Card shadcn + sezione attività (pattern da replicare per Transcript):

"use client";
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Lead, Activity, Reminder } from "@/db/schema";  // ← aggiungere ClientTranscript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { format } from "date-fns";
import { it } from "date-fns/locale";

// Signature attuale LeadDetail:
export function LeadDetail({
  lead, activities, reminders, tags, tagOptions
}: {
  lead: Lead; activities: Activity[]; reminders: Reminder[];
  tags: string[]; tagOptions: string[];
})

// Sezione Attività (pattern da replicare per Transcript):
<Card>
  <CardHeader><CardTitle>Storico Attività</CardTitle></CardHeader>
  <CardContent>
    {activities.length > 0 ? (
      <div className="space-y-4">
        {activities.map((activity) => (
          <div key={activity.id} className="border-l-4 border-blue-300 pl-4 pb-4">
            ...testo e date formattate con date-fns...
          </div>
        ))}
      </div>
    ) : (
      <p className="text-gray-500 text-sm">Nessuna attività registrata</p>
    )}
  </CardContent>
</Card>

Da page.tsx — pattern Promise.all e passaggio props:

import { getActivityLog, getUpcomingReminders } from "@/lib/lead-service";
// ← aggiungere: import { getTranscripts } from "@/lib/lead-service";

const activities = await getActivityLog(id);
const reminders = await getUpcomingReminders(id);
// ← aggiungere nel Promise.all oppure sequenzialmente dopo

return (
  <LeadDetail
    lead={lead}
    activities={activities}
    reminders={reminders}
    tags={lead.tags}
    tagOptions={options.tags}
    // ← aggiungere: transcripts={transcripts}
  />
);

Tipo ClientTranscript (da schema.ts dopo Plan 02):

export type ClientTranscript = typeof clientTranscripts.$inferSelect;
// Campi: id, lead_id, client_id, title, content, call_date, created_at

Formattazione date italiana con date-fns (già usato nel progetto):

import { format } from "date-fns";
import { it } from "date-fns/locale";
// call_date è string "YYYY-MM-DD" — usare new Date(t.call_date + "T00:00:00") per evitare timezone shift
format(new Date(t.call_date + "T00:00:00"), "d MMMM yyyy", { locale: it })
// → "12 giugno 2026"

Task 1: Creare TranscriptModal.tsx e aggiornare page.tsx src/components/admin/leads/TranscriptModal.tsx, src/app/admin/leads/[id]/page.tsx - src/components/admin/leads/LogActivityModal.tsx (pattern esatto del modal da replicare) - src/app/admin/leads/[id]/page.tsx (vedere la struttura attuale per capire dove aggiungere getTranscripts) **Creare src/components/admin/leads/TranscriptModal.tsx:**

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

---

Aggiornare src/app/admin/leads/[id]/page.tsx:

Aggiungere getTranscripts all'import da lead-service:

import { getActivityLog, getUpcomingReminders, getTranscripts } from "@/lib/lead-service";

Aggiungere la fetch nel corpo del componente. La page attualmente fa due call sequenziali dopo il Promise.all. Aggiungere getTranscripts(id) in parallelo con le altre:

const [leads, options, transcripts] = await Promise.all([
  getLeadsWithTags(),
  getLeadFieldOptions(),
  getTranscripts(id),
]);

Oppure, se la struttura attuale non usa Promise.all per tutte le chiamate, aggiungere sequenzialmente dopo reminders:

const transcripts = await getTranscripts(id);

Passare la prop al componente:

return (
  <LeadDetail
    lead={lead}
    activities={activities}
    reminders={reminders}
    tags={lead.tags}
    tagOptions={options.tags}
    transcripts={transcripts}
  />
);

cd /Users/simonecavalli/Vault/IAMCAVALLI && npx tsc --noEmit 2>&1 | grep -E "TranscriptModal|page" | head -10 - File `src/components/admin/leads/TranscriptModal.tsx` esiste - `grep -c "export function TranscriptModal" src/components/admin/leads/TranscriptModal.tsx` restituisce 1 - `grep -c "min-h-48" src/components/admin/leads/TranscriptModal.tsx` restituisce 1 (textarea generosa) - `grep -c "Aggiungi Transcript" src/components/admin/leads/TranscriptModal.tsx` restituisce almeno 1 - `grep -c "getTranscripts" src/app/admin/leads/[id]/page.tsx` restituisce almeno 2 (import + chiamata) - `grep -c "transcripts={transcripts}" src/app/admin/leads/[id]/page.tsx` restituisce 1 - `npx tsc --noEmit` passa senza errori su questi file TranscriptModal creato, page.tsx aggiornata con getTranscripts e prop transcripts passata a LeadDetail. Task 2: Aggiornare LeadDetail.tsx — aggiungere prop transcripts e sezione Transcript src/components/admin/leads/LeadDetail.tsx - src/components/admin/leads/LeadDetail.tsx (leggere per vedere la struttura attuale — dove finisce la sezione Attività e dove inserire Transcript) Aggiornare `src/components/admin/leads/LeadDetail.tsx` con le seguenti modifiche:

1. Aggiungere import:

import { ClientTranscript } from "@/db/schema";
import { useTransition } from "react";  // già importato — verificare che ci sia
import { TranscriptModal } from "./TranscriptModal";
import { deleteTranscript } from "@/app/admin/leads/actions";

2. Aggiungere transcripts alla prop interface:

export function LeadDetail({
  lead,
  activities,
  reminders,
  tags,
  tagOptions,
  transcripts,  // ← aggiungere
}: {
  lead: Lead;
  activities: Activity[];
  reminders: Reminder[];
  tags: string[];
  tagOptions: string[];
  transcripts: ClientTranscript[];  // ← aggiungere
})

3. Aggiungere state per expand/collapse e delete nel corpo del componente:

Aggiungere dopo gli useState esistenti:

const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
const [deletingId, setDeletingId] = useState<string | null>(null);
const [, startDeleteTransition] = useTransition();

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 handleDelete(transcriptId: string) {
  setDeletingId(transcriptId);
  startDeleteTransition(async () => {
    try {
      await deleteTranscript(transcriptId, lead.id);
      router.refresh();
    } catch (e) {
      console.error("deleteTranscript error:", e);
    } finally {
      setDeletingId(null);
    }
  });
}

4. Aggiungere il pulsante TranscriptModal nell'header (accanto a LogActivityModal):

<div className="flex gap-2">
  <LogActivityModal leadId={lead.id} />
  <TranscriptModal leadId={lead.id} />  {/* ← aggiungere */}
  <SendQuoteModal leadId={lead.id} />
  <EditLeadModal lead={lead} />
</div>

5. Aggiungere la sezione Transcript dopo la sezione Storico Attività (dopo la chiusura del </Card> dell'attività):

{/* Transcript */}
<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);
          // Formattare call_date come "12 giugno 2026"
          // call_date è string "YYYY-MM-DD" — aggiungere T00:00:00 per evitare timezone shift
          const formattedDate = format(
            new Date(t.call_date + "T00:00:00"),
            "d MMMM yyyy",
            { locale: it }
          );
          // Anteprima: prime 3 righe o 200 caratteri (il primo valore raggiunto)
          const preview = t.content
            .split("\n")
            .slice(0, 3)
            .join("\n")
            .slice(0, 200);
          const hasMore = t.content.length > preview.length || t.content.split("\n").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={() => handleDelete(t.id)}
                >
                  {deletingId === t.id ? "..." : "Elimina"}
                </Button>
              </div>
            </div>
          );
        })}
      </div>
    ) : (
      <p className="text-gray-500 text-sm">Nessun transcript registrato</p>
    )}
  </CardContent>
</Card>

cd /Users/simonecavalli/Vault/IAMCAVALLI && npx tsc --noEmit 2>&1 | grep "LeadDetail" | head -10 - `grep -c "transcripts: ClientTranscript\[\]" src/components/admin/leads/LeadDetail.tsx` restituisce 1 - `grep -c "TranscriptModal" src/components/admin/leads/LeadDetail.tsx` restituisce almeno 2 (import + uso nel JSX) - `grep -c "deleteTranscript" src/components/admin/leads/LeadDetail.tsx` restituisce almeno 2 (import + uso in handleDelete) - `grep -c "Transcript Call" src/components/admin/leads/LeadDetail.tsx` restituisce 1 (titolo Card sezione) - `grep -c "Mostra tutto" src/components/admin/leads/LeadDetail.tsx` restituisce 1 (expand/collapse) - `grep -c "T00:00:00" src/components/admin/leads/LeadDetail.tsx` restituisce 1 (fix timezone per call_date) - `grep -c "border-l-4 border-purple-300" src/components/admin/leads/LeadDetail.tsx` restituisce 1 (stile sezione transcript, distinto dal blu delle attività) - `npx tsc --noEmit` passa senza errori su LeadDetail.tsx - `npm run build` completa senza errori (verificare alla fine) LeadDetail aggiornato con prop transcripts, sezione Transcript con lista expand/collapse e azione Elimina posizionata dopo Storico Attività.

<threat_model>

Trust Boundaries

Boundary	Descrizione
browser → TranscriptModal form	Input utente admin non sanitizzato prima del submit
TranscriptModal → addTranscript server action	"use server" boundary — Zod valida il payload

STRIDE Threat Register

Threat ID	Category	Component	Disposition	Mitigation Plan
T-20-08	Tampering	TranscriptModal — content field	accept	Il content è testo grezzo (textarea), non renderizzato come HTML nella UI — nessun XSS possibile con whitespace-pre-wrap senza dangerouslySetInnerHTML; Zod valida min length 1
T-20-09	Elevation of Privilege	TranscriptModal — addTranscript call	mitigate	La route /admin/leads/[id] è protetta dal middleware Auth.js (sessione admin richiesta); addTranscript server action chiama requireAdmin() come prima istruzione
T-20-10	Elevation of Privilege	deleteTranscript client call	mitigate	deleteTranscript server action chiama requireAdmin() come prima istruzione; il transcriptId viene dalla prop SSR, non da input utente libero
T-20-11	Information Disclosure	Transcript content nel DOM	accept	La pagina è /admin/* — solo admin autenticato la vede; nessuna esposizione lato client pubblico
</threat_model>

```bash cd /Users/simonecavalli/Vault/IAMCAVALLI

Verificare che tutti i file esistano

ls -la src/components/admin/leads/TranscriptModal.tsx grep -c "getTranscripts" src/app/admin/leads/[id]/page.tsx grep -c "transcripts: ClientTranscript" src/components/admin/leads/LeadDetail.tsx

Verificare struttura sezione Transcript

grep -n "Transcript|deleteTranscript|TranscriptModal" src/components/admin/leads/LeadDetail.tsx

Build completo

npm run build 2>&1 | tail -15

</verification>

<success_criteria>
- `TranscriptModal.tsx` esiste con form: call_date (date input), title (optional text), content (textarea min-h-48) (KB-02)
- `LeadDetail.tsx` ha prop `transcripts: ClientTranscript[]` e sezione "Transcript Call" dopo "Storico Attività" (KB-02, D-05)
- Lista transcript mostra: data formattata in italiano, titolo se presente, anteprima testo con expand/collapse, bottone Elimina (KB-02)
- `page.tsx` chiama `getTranscripts(id)` e passa `transcripts` a `LeadDetail` (KB-02)
- `npm run build` completa senza errori TypeScript o di compilazione
</success_criteria>

<output>
Dopo il completamento, creare `.planning/phases/20-knowledge-base-cliente/20-03-SUMMARY.md` con:
- Componenti creati: TranscriptModal.tsx
- Componenti modificati: LeadDetail.tsx, page.tsx
- Features: modal aggiunta, lista con expand/collapse, eliminazione, data in italiano
- Build status: passed/failed
- Note su eventuali adattamenti ai pattern esistenti
</output>