docs(20): create phase plan — Knowledge Base Cliente transcript
3 piani: 20-01 migration BLOCKING, 20-02 schema+actions, 20-03 UI. KB-01 e KB-02 coperti. Wave 1→2→3 sequenziali per vincolo migration-prima-del-codice. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,626 @@
|
||||
---
|
||||
phase: 20-knowledge-base-cliente
|
||||
plan: 03
|
||||
type: execute
|
||||
wave: 3
|
||||
depends_on:
|
||||
- 20-01
|
||||
- 20-02
|
||||
files_modified:
|
||||
- src/components/admin/leads/TranscriptModal.tsx
|
||||
- src/components/admin/leads/LeadDetail.tsx
|
||||
- src/app/admin/leads/[id]/page.tsx
|
||||
autonomous: true
|
||||
requirements:
|
||||
- KB-02
|
||||
must_haves:
|
||||
truths:
|
||||
- "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"
|
||||
artifacts:
|
||||
- path: "src/components/admin/leads/TranscriptModal.tsx"
|
||||
provides: "Modal form per aggiungere transcript (call_date, title opzionale, content textarea)"
|
||||
exports: ["TranscriptModal"]
|
||||
- path: "src/components/admin/leads/LeadDetail.tsx"
|
||||
provides: "Sezione Transcript con lista collassabile e azione Elimina"
|
||||
contains: "Transcript"
|
||||
- path: "src/app/admin/leads/[id]/page.tsx"
|
||||
provides: "getTranscripts(id) nel Promise.all + prop transcripts passato a LeadDetail"
|
||||
contains: "getTranscripts"
|
||||
key_links:
|
||||
- from: "src/components/admin/leads/TranscriptModal.tsx"
|
||||
to: "src/app/admin/leads/actions.ts"
|
||||
via: "import addTranscript"
|
||||
pattern: "addTranscript"
|
||||
- from: "src/components/admin/leads/LeadDetail.tsx"
|
||||
to: "src/app/admin/leads/actions.ts"
|
||||
via: "import deleteTranscript"
|
||||
pattern: "deleteTranscript"
|
||||
- from: "src/app/admin/leads/[id]/page.tsx"
|
||||
to: "src/lib/lead-service.ts"
|
||||
via: "import getTranscripts"
|
||||
pattern: "getTranscripts"
|
||||
---
|
||||
|
||||
<objective>
|
||||
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.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@$HOME/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@$HOME/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/phases/20-knowledge-base-cliente/20-CONTEXT.md
|
||||
@.planning/phases/20-knowledge-base-cliente/20-02-SUMMARY.md
|
||||
|
||||
<interfaces>
|
||||
<!-- Pattern estratti da file esistenti — l'executor NON deve rileggere questi file -->
|
||||
|
||||
Da LogActivityModal.tsx — pattern modal con react-hook-form + zod + shadcn Dialog:
|
||||
```typescript
|
||||
"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):
|
||||
```typescript
|
||||
"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:
|
||||
```typescript
|
||||
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):
|
||||
```typescript
|
||||
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):
|
||||
```typescript
|
||||
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"
|
||||
```
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Creare TranscriptModal.tsx e aggiornare page.tsx</name>
|
||||
<files>src/components/admin/leads/TranscriptModal.tsx, src/app/admin/leads/[id]/page.tsx</files>
|
||||
<read_first>
|
||||
- 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)
|
||||
</read_first>
|
||||
<action>
|
||||
**Creare src/components/admin/leads/TranscriptModal.tsx:**
|
||||
|
||||
```typescript
|
||||
"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:
|
||||
```typescript
|
||||
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:
|
||||
|
||||
```typescript
|
||||
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`:
|
||||
```typescript
|
||||
const transcripts = await getTranscripts(id);
|
||||
```
|
||||
|
||||
Passare la prop al componente:
|
||||
```typescript
|
||||
return (
|
||||
<LeadDetail
|
||||
lead={lead}
|
||||
activities={activities}
|
||||
reminders={reminders}
|
||||
tags={lead.tags}
|
||||
tagOptions={options.tags}
|
||||
transcripts={transcripts}
|
||||
/>
|
||||
);
|
||||
```
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /Users/simonecavalli/Vault/IAMCAVALLI && npx tsc --noEmit 2>&1 | grep -E "TranscriptModal|page" | head -10</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- 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
|
||||
</acceptance_criteria>
|
||||
<done>TranscriptModal creato, page.tsx aggiornata con getTranscripts e prop transcripts passata a LeadDetail.</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Aggiornare LeadDetail.tsx — aggiungere prop transcripts e sezione Transcript</name>
|
||||
<files>src/components/admin/leads/LeadDetail.tsx</files>
|
||||
<read_first>
|
||||
- src/components/admin/leads/LeadDetail.tsx (leggere per vedere la struttura attuale — dove finisce la sezione Attività e dove inserire Transcript)
|
||||
</read_first>
|
||||
<action>
|
||||
Aggiornare `src/components/admin/leads/LeadDetail.tsx` con le seguenti modifiche:
|
||||
|
||||
**1. Aggiungere import:**
|
||||
```typescript
|
||||
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:**
|
||||
```typescript
|
||||
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:
|
||||
```typescript
|
||||
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):**
|
||||
```typescript
|
||||
<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à):**
|
||||
|
||||
```typescript
|
||||
{/* 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>
|
||||
```
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /Users/simonecavalli/Vault/IAMCAVALLI && npx tsc --noEmit 2>&1 | grep "LeadDetail" | head -10</automated>
|
||||
</verify>
|
||||
<acceptance_criteria>
|
||||
- `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)
|
||||
</acceptance_criteria>
|
||||
<done>LeadDetail aggiornato con prop transcripts, sezione Transcript con lista expand/collapse e azione Elimina posizionata dopo Storico Attività.</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<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>
|
||||
|
||||
<verification>
|
||||
```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>
|
||||
Reference in New Issue
Block a user