feat(19-01): wire LeadsViewToggle into leads page + build verified

- page.tsx: import LeadsViewToggle from @/components/admin/leads/LeadsViewToggle - page.tsx: render <LeadsViewToggle leads={leads} options={options} /> - Removed direct LeadsSearch import from page (re-exported via LeadsSearch.tsx) - Build: Next.js 16.2.6 Turbopack — Compiled successfully, TypeScript clean
feat(19-01): add LeadsViewToggle with integrated search + list/kanban pill toggle
2026-06-19 17:49:28 +02:00 · 2026-06-19 17:48:31 +02:00 · 2026-06-19 17:48:00 +02:00 · 2026-06-19 17:37:32 +02:00
6 changed files with 822 additions and 49 deletions
@@ -176,7 +176,10 @@ Plans:
  1. I lead sono mostrati in colonne per stage (contacted → qualified → proposal_sent → negotiating → won/lost) con drag-drop che aggiorna `leads.status`
  2. La tabella inline-edit esistente resta disponibile come vista alternativa
  3. Spostare un lead su "Vinto"/"Perso" è l'azione manuale che ne registra l'esito
-**Status**: Pending planning — `/gsd-plan-phase 19`
+**Plans**: 1 plan
+**Plan list**:
+  - [ ] 19-01-PLAN.md — LeadsKanbanBoard + LeadsViewToggle + page wiring (PIPE-01, PIPE-02)
+**Status**: Planned — ready for `/gsd-execute-phase 19`

 ### Phase 20: Knowledge Base Cliente
 **Goal**: Memorizzare i transcript datati delle call (multipli per lead/cliente) e mostrarli nel profilo, pronti per essere dati in pasto all'AI.
@@ -0,0 +1,553 @@
+---
+phase: 19-pipeline-crm-kanban
+plan: 01
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+  - src/components/admin/leads/LeadsKanbanBoard.tsx
+  - src/components/admin/leads/LeadsViewToggle.tsx
+  - src/app/admin/leads/LeadsSearch.tsx
+  - src/app/admin/leads/page.tsx
+autonomous: true
+requirements:
+  - PIPE-01
+  - PIPE-02
+
+must_haves:
+  truths:
+    - "I lead sono visibili in una board Kanban con 6 colonne per stage (contacted, qualified, proposal_sent, negotiating, won, lost)"
+    - "Trascinare un lead da una colonna a un'altra aggiorna leads.status in modo persistente"
+    - "Spostare un lead nella colonna Vinto o Perso registra l'esito cambiando il campo status"
+    - "La vista tabella inline-edit (LeadTable) resta disponibile e funzionante come vista alternativa"
+    - "Il toggle Lista/Kanban è visibile sopra il contenuto e preserva lo stato della ricerca quando si cambia vista"
+  artifacts:
+    - path: "src/components/admin/leads/LeadsKanbanBoard.tsx"
+      provides: "Board Kanban con DndContext, 6 DroppableColumn, DraggableLeadCard, DragOverlay, ottimistic update"
+      exports: ["LeadsKanbanBoard"]
+    - path: "src/components/admin/leads/LeadsViewToggle.tsx"
+      provides: "Client wrapper con useState<'list' | 'kanban'> e pill toggle"
+      exports: ["LeadsViewToggle"]
+    - path: "src/app/admin/leads/LeadsSearch.tsx"
+      provides: "Search + toggle integrati; passa filtered leads sia a LeadTable che a LeadsKanbanBoard"
+    - path: "src/app/admin/leads/page.tsx"
+      provides: "Server component aggiornato che non renderizza più LeadsSearch direttamente ma LeadsViewToggle"
+  key_links:
+    - from: "LeadsKanbanBoard.tsx — handleDragEnd"
+      to: "src/app/admin/leads/actions.ts — updateLeadField"
+      via: "startTransition async + router.refresh()"
+      pattern: "updateLeadField\\(leadId.*status"
+    - from: "LeadsSearch.tsx — filtered"
+      to: "LeadsKanbanBoard — leads prop"
+      via: "filtered array passato come prop"
+      pattern: "LeadsKanbanBoard.*leads=\\{filtered\\}"
+    - from: "LeadsViewToggle / LeadsSearch"
+      to: "LeadTable + LeadsKanbanBoard"
+      via: "view state (list | kanban)"
+      pattern: "useState<.list.*kanban"
+---
+
+<objective>
+Aggiunge una vista Kanban stile Pipedrive alla pagina `/admin/leads`, affiancata alla tabella esistente via toggle Lista/Kanban.
+
+Purpose: Completare PIPE-01 (board drag-drop per stage) e PIPE-02 (vinto/perso come cambio-colonna manuale) senza toccare il data layer e senza rimuovere la LeadTable esistente.
+
+Output:
+- `LeadsKanbanBoard.tsx` — nuovo componente client con @dnd-kit drag-drop tra 6 colonne stage
+- `LeadsViewToggle.tsx` — nuovo wrapper client con pill toggle Lista/Kanban
+- `LeadsSearch.tsx` — modificato per ospitare il toggle e passare `filtered` leads a entrambe le viste
+- `page.tsx` — modificato per rimuovere il render diretto di `<LeadsSearch>` e invece renderizzare `<LeadsViewToggle>`
+</objective>
+
+<execution_context>
+@$HOME/.claude/get-shit-done/workflows/execute-plan.md
+@$HOME/.claude/get-shit-done/templates/summary.md
+</execution_context>
+
+<context>
+@.planning/PROJECT.md
+@.planning/ROADMAP.md
+@.planning/phases/19-pipeline-crm-kanban/19-RESEARCH.md
+
+<interfaces>
+<!-- Tipi e contratti estratti dal codebase. L'executor li usa direttamente — nessuna esplorazione necessaria. -->
+
+Da src/lib/admin-queries.ts (VERIFIED):
+```typescript
+// LeadWithTags = leads row + tags array
+export type LeadWithTags = {
+  id: string;
+  name: string;
+  email: string | null;
+  phone: string | null;
+  company: string | null;
+  status: string;          // one of LEAD_STAGES values
+  next_action: string | null;
+  created_at: Date;
+  updated_at: Date;
+  tags: string[];
+};
+
+export type LeadFieldOptions = {
+  tags: string[];
+};
+```
+
+Da src/lib/lead-validators.ts (VERIFIED):
+```typescript
+export const LEAD_STAGES = [
+  "contacted",
+  "qualified",
+  "proposal_sent",
+  "negotiating",
+  "won",
+  "lost",
+] as const;
+
+export type LeadStage = typeof LEAD_STAGES[number];
+```
+
+Da src/app/admin/leads/actions.ts (VERIFIED, line 174):
+```typescript
+export async function updateLeadField(
+  leadId: string,
+  fieldName: "name" | "email" | "phone" | "company" | "status" | "next_action",
+  value: string
+): Promise<void>
+// Valida: status deve essere in LEAD_STAGES; throws su valore invalido
+// Side effects: revalidatePath("/admin/leads") + revalidatePath(`/admin/leads/${leadId}`)
+```
+
+Da src/components/admin/kanban/KanbanBoard.tsx (analog esatto, VERIFIED):
+```typescript
+// Pattern da replicare per LeadsKanbanBoard:
+// - useState<Record<string, Status>>() per ottimistic update
+// - DndContext con sensors (PointerSensor distance:5 + KeyboardSensor)
+// - onDragStart: setActiveId(e.active.id as string)
+// - onDragEnd: setActiveId(null); if (!over) return; guard su valore valido;
+//   setTaskStatuses(...); startTransition(async () => { await action; router.refresh(); })
+// - DroppableColumn: useDroppable({ id }) → setNodeRef, isOver
+// - DraggableCard: useDraggable({ id }) → setNodeRef, transform, isDragging, listeners, attributes
+// - DragOverlay dropAnimation={null} con ghost card
+```
+
+Da src/components/admin/kanban/PhasesViewToggle.tsx (analog esatto, VERIFIED):
+```typescript
+// Toggle pill pattern:
+// className pill: "flex items-center gap-1 mb-5 bg-[#f4f4f5] rounded-lg p-1 w-fit"
+// Active button: "bg-white text-[#1A463C] shadow-sm"
+// Inactive button: "text-[#71717a] hover:text-[#1a1a1a]"
+// Testo: "Lista" / "Kanban"
+```
+
+Da src/components/admin/leads/LeadTable.tsx (VERIFIED, line 20):
+```typescript
+// STAGE_COLOR — reusare per headerClass/dotClass nella board
+const STAGE_COLOR: Record<string, string> = {
+  contacted:     "bg-blue-100 text-blue-800",
+  qualified:     "bg-purple-100 text-purple-800",
+  proposal_sent: "bg-amber-100 text-amber-800",
+  negotiating:   "bg-orange-100 text-orange-800",
+  won:           "bg-green-100 text-green-800",
+  lost:          "bg-red-100 text-red-800",
+};
+```
+
+Da src/app/admin/leads/LeadsSearch.tsx (VERIFIED — STATO ATTUALE):
+```typescript
+// Attualmente: search input + LeadTable(filtered, options)
+// Dopo questa fase: search input + LeadsViewToggle (che gestisce il rendering di LeadTable o LeadsKanbanBoard)
+// Alternativa più pulita: LeadsSearch mantiene la search, ma il toggle vive in LeadsViewToggle
+// Approccio scelto (vedi task 1): LeadsSearch riceve `view` + `onViewChange` da LeadsViewToggle
+```
+</interfaces>
+</context>
+
+<tasks>
+
+<task type="auto">
+  <name>Task 1: LeadsKanbanBoard.tsx — board Kanban con drag-drop tra 6 stage</name>
+  <files>src/components/admin/leads/LeadsKanbanBoard.tsx</files>
+
+  <read_first>
+    - src/components/admin/kanban/KanbanBoard.tsx — analog esatto da replicare strutturalmente
+    - src/lib/lead-validators.ts — LEAD_STAGES canonical values
+    - src/app/admin/leads/actions.ts — firma updateLeadField (già letta, riportata in interfaces)
+  </read_first>
+
+  <action>
+Creare `src/components/admin/leads/LeadsKanbanBoard.tsx` come componente client. Seguire la struttura esatta di `KanbanBoard.tsx`, adattata per i lead.
+
+**Struttura richiesta:**
+
+1. `"use client"` in cima.
+
+2. Definire `type LeadStage` e `LEAD_COLUMNS` come costante di modulo (NON importare LEAD_STAGES da lead-validators — definire il tipo locale per evitare dipendenze circolari con il barrel del server):
+
+```typescript
+type LeadStage = "contacted" | "qualified" | "proposal_sent" | "negotiating" | "won" | "lost";
+
+const LEAD_COLUMNS: {
+  id: LeadStage;
+  label: string;
+  headerClass: string;
+  dotClass: string;
+}[] = [
+  { id: "contacted",     label: "Contattato",      headerClass: "text-[#71717a]",    dotClass: "bg-[#d4d4d8]" },
+  { id: "qualified",     label: "Qualificato",      headerClass: "text-purple-700",   dotClass: "bg-purple-400" },
+  { id: "proposal_sent", label: "Offerta inviata",  headerClass: "text-amber-700",    dotClass: "bg-amber-400" },
+  { id: "negotiating",   label: "Trattativa",       headerClass: "text-orange-700",   dotClass: "bg-orange-400" },
+  { id: "won",           label: "Vinto",            headerClass: "text-green-700",    dotClass: "bg-green-500" },
+  { id: "lost",          label: "Perso",            headerClass: "text-red-700",      dotClass: "bg-red-400" },
+];
+```
+
+3. Componente `DroppableColumn` (analogo al `DroppableColumn` di KanbanBoard.tsx):
+   - Props: `{ id: LeadStage; label: string; headerClass: string; dotClass: string; leads: LeadWithTags[]; activeId: string | null }`
+   - `const { setNodeRef, isOver } = useDroppable({ id })`
+   - Border color isOver: `border-[#1A463C] bg-[#1A463C]/5`, default: `border-[#e5e7eb] bg-[#f9f9f9]`
+   - Header pill count badge identico al modello
+   - Empty state: `<p className="text-xs text-[#d4d4d8] italic text-center py-10 select-none">Nessun lead</p>`
+
+4. Componente `DraggableLeadCard` (analogo a `DraggableCard` di KanbanBoard.tsx):
+   - Props: `{ lead: LeadWithTags; isActive: boolean }`
+   - `const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: lead.id })`
+   - Contenuto card: riga primaria `lead.name` (text-sm font-medium text-[#1a1a1a]), riga secondaria `lead.company` se presente (text-xs text-[#71717a]), riga hint `lead.next_action` se presente (text-xs text-[#71717a] mt-1 line-clamp-1)
+   - Stili drag: opacity-30 quando isDragging, hover:border-[#1A463C]/40 quando non in drag
+
+5. Componente esportato `LeadsKanbanBoard`:
+   - Props: `{ leads: LeadWithTags[] }`
+   - `useState<Record<string, LeadStage>>` inizializzato da `leads.map(l => [l.id, l.status as LeadStage])`
+   - `useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor))`
+   - `leadsByStage`: `LEAD_COLUMNS.reduce` che raggruppa leads per stage corrente (legge `leadStatuses[l.id] ?? l.status`)
+   - `handleDragEnd`: `setActiveId(null)` → guard `if (!over) return` → guard `if (!(LEAD_COLUMNS.map(c => c.id) as string[]).includes(over.id as string)) return` → guard stesso stage → ottimistic `setLeadStatuses` → `startTransition(async () => { await updateLeadField(leadId, "status", newStage); router.refresh(); })`
+   - Layout: wrapper `overflow-x-auto` → griglia `grid grid-cols-6 gap-3 min-w-[1080px]` (6 colonne × 180px min)
+   - `DragOverlay dropAnimation={null}`: ghost card con `border-2 border-[#1A463C] shadow-xl rotate-1`, mostra `name` e `company` del lead attivo
+
+6. Imports richiesti:
+```typescript
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import {
+  DndContext, DragEndEvent, DragOverlay,
+  PointerSensor, KeyboardSensor, useSensor, useSensors,
+  useDroppable, useDraggable,
+} from "@dnd-kit/core";
+import { updateLeadField } from "@/app/admin/leads/actions";
+import type { LeadWithTags } from "@/lib/admin-queries";
+```
+  </action>
+
+  <verify>
+    <automated>grep -n "useDroppable\|useDraggable\|DragOverlay\|DndContext\|updateLeadField\|LeadsKanbanBoard" /Users/simonecavalli/Vault/IAMCAVALLI/src/components/admin/leads/LeadsKanbanBoard.tsx | head -20</automated>
+  </verify>
+
+  <acceptance_criteria>
+    - `LeadsKanbanBoard.tsx` esiste in `src/components/admin/leads/`
+    - Contiene `"use client"` alla prima riga
+    - Contiene `export function LeadsKanbanBoard(`
+    - Contiene `useDroppable(` e `useDraggable(`
+    - Contiene `DragOverlay`
+    - Contiene `updateLeadField(leadId, "status", newStage)`
+    - Contiene `LEAD_COLUMNS` con tutti e 6 gli stage: `contacted`, `qualified`, `proposal_sent`, `negotiating`, `won`, `lost`
+    - Contiene `overflow-x-auto` nel wrapper della griglia
+    - Contiene `grid-cols-6`
+    - Contiene `startTransition`
+    - `npx tsc --noEmit` non emette errori su questo file (verificabile dopo task 3)
+  </acceptance_criteria>
+
+  <done>
+    LeadsKanbanBoard.tsx esiste, esporta LeadsKanbanBoard, implementa drag-drop tra 6 colonne lead stage via @dnd-kit primitives, persiste su updateLeadField con ottimistic update, mostra card con name/company/next_action.
+  </done>
+</task>
+
+<task type="auto">
+  <name>Task 2: LeadsViewToggle.tsx — wrapper client con pill toggle Lista/Kanban + search integrata</name>
+  <files>
+    src/components/admin/leads/LeadsViewToggle.tsx
+    src/app/admin/leads/LeadsSearch.tsx
+  </files>
+
+  <read_first>
+    - src/components/admin/kanban/PhasesViewToggle.tsx — analog esatto del pill toggle (già letto)
+    - src/app/admin/leads/LeadsSearch.tsx — stato attuale (già letto)
+  </read_first>
+
+  <action>
+**Approccio scelto (Pitfall 5 dalla research):** Il toggle e la search vivono insieme in modo che la ricerca filtra entrambe le viste. Si implementa così:
+
+**File 1 — `src/components/admin/leads/LeadsViewToggle.tsx` (NUOVO):**
+
+`LeadsViewToggle` è il nuovo client wrapper che:
+- Contiene `useState<"list" | "kanban">("list")`
+- Contiene `useState("")` per la query di ricerca
+- Calcola `filtered` con `useMemo` (stessa logica di LeadsSearch attuale: filtra per name/email/company/status/tags)
+- Renderizza:
+  1. Barra superiore: search input (a sinistra) + pill toggle Lista/Kanban (a destra), su una singola riga `flex justify-between items-center mb-4`
+  2. Se `view === "list"`: `<LeadTable leads={filtered} options={options} />`
+  3. Se `view === "kanban"`: `<LeadsKanbanBoard leads={filtered} />`
+
+```typescript
+"use client";
+
+import { useState, useMemo } from "react";
+import { Input } from "@/components/ui/input";
+import { Search } from "lucide-react";
+import { LeadTable } from "@/components/admin/leads/LeadTable";
+import { LeadsKanbanBoard } from "@/components/admin/leads/LeadsKanbanBoard";
+import type { LeadWithTags, LeadFieldOptions } from "@/lib/admin-queries";
+
+export function LeadsViewToggle({
+  leads,
+  options,
+}: {
+  leads: LeadWithTags[];
+  options: LeadFieldOptions;
+}) {
+  const [view, setView] = useState<"list" | "kanban">("list");
+  const [query, setQuery] = useState("");
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return leads;
+    return leads.filter((l) => {
+      if (l.name.toLowerCase().includes(q)) return true;
+      if (l.email?.toLowerCase().includes(q)) return true;
+      if (l.company?.toLowerCase().includes(q)) return true;
+      if (l.status.toLowerCase().includes(q)) return true;
+      if (l.tags.some((t) => t.toLowerCase().includes(q))) return true;
+      return false;
+    });
+  }, [leads, query]);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        {/* Search */}
+        <div className="relative max-w-sm flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#71717a]" />
+          <Input
+            type="text"
+            placeholder="Cerca lead..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="pl-9 h-9"
+          />
+        </div>
+        {/* Toggle pill */}
+        <div className="flex items-center gap-1 bg-[#f4f4f5] rounded-lg p-1 w-fit flex-shrink-0">
+          <button
+            onClick={() => setView("list")}
+            className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
+              view === "list"
+                ? "bg-white text-[#1A463C] shadow-sm"
+                : "text-[#71717a] hover:text-[#1a1a1a]"
+            }`}
+          >
+            Lista
+          </button>
+          <button
+            onClick={() => setView("kanban")}
+            className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
+              view === "kanban"
+                ? "bg-white text-[#1A463C] shadow-sm"
+                : "text-[#71717a] hover:text-[#1a1a1a]"
+            }`}
+          >
+            Kanban
+          </button>
+        </div>
+      </div>
+
+      {view === "list" ? (
+        <LeadTable leads={filtered} options={options} />
+      ) : (
+        <LeadsKanbanBoard leads={filtered} />
+      )}
+    </div>
+  );
+}
+```
+
+**File 2 — `src/app/admin/leads/LeadsSearch.tsx` (MODIFICATO):**
+
+`LeadsSearch` non è più necessario: la sua logica (search + filtered + LeadTable) è stata trasferita in `LeadsViewToggle`. Svuotare il file sostituendo il contenuto con un re-export di `LeadsViewToggle` per non rompere eventuali import esistenti:
+
+```typescript
+// LeadsSearch is superseded by LeadsViewToggle (Phase 19).
+// Re-exported here to avoid breaking any existing import.
+export { LeadsViewToggle as LeadsSearch } from "@/components/admin/leads/LeadsViewToggle";
+```
+
+Nota: se page.tsx verrà aggiornato nel task 3 ad importare direttamente `LeadsViewToggle`, questo re-export è solo una rete di sicurezza e non causa conflitti.
+  </action>
+
+  <verify>
+    <automated>grep -n "useState\|LeadsKanbanBoard\|LeadTable\|LeadsViewToggle\|list.*kanban\|kanban.*list" /Users/simonecavalli/Vault/IAMCAVALLI/src/components/admin/leads/LeadsViewToggle.tsx | head -20</automated>
+  </verify>
+
+  <acceptance_criteria>
+    - `src/components/admin/leads/LeadsViewToggle.tsx` esiste
+    - Contiene `"use client"`
+    - Contiene `useState<"list" | "kanban">("list")`
+    - Contiene `useState("")` per la query
+    - Contiene `useMemo(` per `filtered`
+    - Contiene `LeadsKanbanBoard` importato da `@/components/admin/leads/LeadsKanbanBoard`
+    - Contiene `LeadTable` importato da `@/components/admin/leads/LeadTable`
+    - Contiene `export function LeadsViewToggle(`
+    - Contiene il pill toggle con classi `bg-[#f4f4f5] rounded-lg p-1`
+    - `src/app/admin/leads/LeadsSearch.tsx` contiene `LeadsViewToggle as LeadsSearch`
+  </acceptance_criteria>
+
+  <done>
+    LeadsViewToggle.tsx esiste con search integrata + toggle Lista/Kanban. LeadsSearch.tsx ri-esporta LeadsViewToggle per retrocompatibilità. La ricerca filtra entrambe le viste simultaneamente.
+  </done>
+</task>
+
+<task type="auto">
+  <name>Task 3: page.tsx — cablaggio LeadsViewToggle + build check</name>
+  <files>src/app/admin/leads/page.tsx</files>
+
+  <read_first>
+    - src/app/admin/leads/page.tsx — stato attuale (già letto: 23 righe, renderizza LeadsSearch)
+  </read_first>
+
+  <action>
+Aggiornare `src/app/admin/leads/page.tsx` per usare `LeadsViewToggle` al posto di `LeadsSearch`.
+
+Stato attuale:
+```typescript
+import { LeadsSearch } from "./LeadsSearch";
+// ...
+<LeadsSearch leads={leads} options={options} />
+```
+
+Nuovo stato — sostituire l'import e il render:
+```typescript
+import { LeadsViewToggle } from "@/components/admin/leads/LeadsViewToggle";
+// ...
+<LeadsViewToggle leads={leads} options={options} />
+```
+
+Il file completo aggiornato:
+```typescript
+import { getLeadsWithTags, getLeadFieldOptions } from "@/lib/admin-queries";
+import { LeadsViewToggle } from "@/components/admin/leads/LeadsViewToggle";
+import { CreateLeadModal } from "@/components/admin/leads/LeadForm";
+
+export const revalidate = 0;
+
+export default async function LeadsPage() {
+  const [leads, options] = await Promise.all([
+    getLeadsWithTags(),
+    getLeadFieldOptions(),
+  ]);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-2xl font-bold text-[#1a1a1a]">Lead Pipeline</h1>
+        <CreateLeadModal />
+      </div>
+
+      <LeadsViewToggle leads={leads} options={options} />
+    </div>
+  );
+}
+```
+
+Dopo aver scritto il file, eseguire il build per verificare zero errori TypeScript:
+```bash
+cd /Users/simonecavalli/Vault/IAMCAVALLI && npx next build 2>&1 | tail -30
+```
+
+Se il build fallisce per errori TypeScript, correggerli prima di considerare il task completo.
+  </action>
+
+  <verify>
+    <automated>grep -n "LeadsViewToggle\|LeadsSearch" /Users/simonecavalli/Vault/IAMCAVALLI/src/app/admin/leads/page.tsx</automated>
+  </verify>
+
+  <acceptance_criteria>
+    - `page.tsx` importa `LeadsViewToggle` da `@/components/admin/leads/LeadsViewToggle`
+    - `page.tsx` NON importa più `LeadsSearch` direttamente (o se lo importa, è solo tramite il re-export che risolve in LeadsViewToggle)
+    - `page.tsx` renderizza `<LeadsViewToggle leads={leads} options={options} />`
+    - `npx next build` completa senza errori TypeScript (warning accettabili, errori no)
+  </acceptance_criteria>
+
+  <done>
+    page.tsx aggiornato. Build Next.js verde. La pagina /admin/leads mostra il toggle Lista/Kanban con la board drag-drop funzionante.
+  </done>
+</task>
+
+<task type="checkpoint:human-verify" gate="blocking">
+  <what-built>
+    LeadsKanbanBoard con 6 colonne stage, drag-drop che persiste su updateLeadField, LeadsViewToggle con search integrata e pill toggle, page.tsx aggiornato.
+  </what-built>
+  <how-to-verify>
+    1. Aprire http://localhost:3000/admin/leads (avviare il dev server con `npm run dev` se non già attivo)
+    2. Verificare che la pagina mostri: barra di ricerca a sinistra + pill toggle "Lista / Kanban" a destra
+    3. La vista Lista deve mostrare la tabella esistente (identica a prima della fase)
+    4. Cliccare "Kanban": deve apparire una board con 6 colonne (Contattato, Qualificato, Offerta inviata, Trattativa, Vinto, Perso) e i lead nelle colonne corrispondenti al loro stage
+    5. Trascinare un lead da una colonna a un'altra: la card deve spostarsi ottimisticamente; dopo pochi secondi la pagina si aggiorna e il lead rimane nella nuova colonna
+    6. Spostare un lead nella colonna "Vinto" o "Perso": verificare che il lead rimanga lì dopo il refresh
+    7. Digitare un nome nella barra di ricerca mentre si è in vista Kanban: la board deve filtrare le card in tempo reale
+    8. Tornare alla vista Lista: la ricerca deve ancora essere attiva con lo stesso testo
+  </how-to-verify>
+  <resume-signal>Digita "approvato" se tutto funziona, oppure descrivi i problemi riscontrati</resume-signal>
+</task>
+
+</tasks>
+
+<threat_model>
+## Trust Boundaries
+
+| Boundary | Description |
+|----------|-------------|
+| Browser → Server Action | `handleDragEnd` invia `(leadId, "status", newStage)` via `updateLeadField`; newStage arriva dal DOM (over.id) |
+
+## STRIDE Threat Register
+
+| Threat ID | Category | Component | Disposition | Mitigation Plan |
+|-----------|----------|-----------|-------------|-----------------|
+| T-19-01 | Tampering | `handleDragEnd` — over.id come colonna di destinazione | mitigate | Guard client-side: `if (!(LEAD_COLUMNS.map(c => c.id) as string[]).includes(over.id as string)) return` prima di chiamare updateLeadField. Guard server-side: `updateLeadField` valida già `LEAD_STAGES.includes(value)` e lancia errore su valore invalido (Phase 14 pattern invariato). |
+| T-19-02 | Elevation of Privilege | `updateLeadField` server action | accept | `requireAdmin()` già presente nell'azione (Phase 14); il kanban chiama la stessa azione della tabella inline-edit, stessa protezione. |
+</threat_model>
+
+<verification>
+## Verifica fase completa
+
+```bash
+# 1. Build pulito
+cd /Users/simonecavalli/Vault/IAMCAVALLI && npx next build 2>&1 | grep -E "error|Error|✓ Compiled"
+
+# 2. File creati
+ls /Users/simonecavalli/Vault/IAMCAVALLI/src/components/admin/leads/LeadsKanbanBoard.tsx
+ls /Users/simonecavalli/Vault/IAMCAVALLI/src/components/admin/leads/LeadsViewToggle.tsx
+
+# 3. Struttura corretta LeadsKanbanBoard
+grep -c "useDroppable\|useDraggable\|DragOverlay\|updateLeadField" /Users/simonecavalli/Vault/IAMCAVALLI/src/components/admin/leads/LeadsKanbanBoard.tsx
+
+# 4. Tutti e 6 gli stage nella board
+grep -v '^//' /Users/simonecavalli/Vault/IAMCAVALLI/src/components/admin/leads/LeadsKanbanBoard.tsx | grep -c '"contacted"\|"qualified"\|"proposal_sent"\|"negotiating"\|"won"\|"lost"'
+
+# 5. Toggle presente in LeadsViewToggle
+grep -c 'useState<"list" | "kanban">' /Users/simonecavalli/Vault/IAMCAVALLI/src/components/admin/leads/LeadsViewToggle.tsx
+
+# 6. page.tsx non importa più LeadsSearch direttamente
+grep "LeadsSearch" /Users/simonecavalli/Vault/IAMCAVALLI/src/app/admin/leads/page.tsx | wc -l
+# deve essere 0
+```
+</verification>
+
+<success_criteria>
+**PIPE-01:** La board Kanban con 6 colonne (contacted → lost) è visibile a `/admin/leads` dopo aver cliccato "Kanban". Drag-drop aggiorna `leads.status` in modo persistente (il lead rimane nella nuova colonna dopo refresh).
+
+**PIPE-02:** Spostare un lead nella colonna "Vinto" o "Perso" è il gesto manuale che registra l'esito — nessun modale, nessuna conferma, solo il drag-drop su quella colonna.
+
+**Retrocompatibilità:** La vista Lista (LeadTable con inline edit) resta invariata e accessibile tramite il toggle "Lista".
+</success_criteria>
+
+<output>
+Dopo il completamento, creare `.planning/phases/19-pipeline-crm-kanban/19-01-SUMMARY.md` seguendo il template in `@$HOME/.claude/get-shit-done/templates/summary.md`.
+</output>
@@ -1,46 +1,3 @@
-"use client";
-
-import { useState, useMemo } from "react";
-import { Input } from "@/components/ui/input";
-import { Search } from "lucide-react";
-import { LeadTable } from "@/components/admin/leads/LeadTable";
-import type { LeadWithTags, LeadFieldOptions } from "@/lib/admin-queries";
-
-export function LeadsSearch({
-  leads,
-  options,
-}: {
-  leads: LeadWithTags[];
-  options: LeadFieldOptions;
-}) {
-  const [query, setQuery] = useState("");
-
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return leads;
-    return leads.filter((l) => {
-      if (l.name.toLowerCase().includes(q)) return true;
-      if (l.email?.toLowerCase().includes(q)) return true;
-      if (l.company?.toLowerCase().includes(q)) return true;
-      if (l.status.toLowerCase().includes(q)) return true;
-      if (l.tags.some((t) => t.toLowerCase().includes(q))) return true;
-      return false;
-    });
-  }, [leads, query]);
-
-  return (
-    <div className="space-y-4">
-      <div className="relative max-w-sm">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#71717a]" />
-        <Input
-          type="text"
-          placeholder="Cerca lead..."
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          className="pl-9 h-9"
-        />
-      </div>
-      <LeadTable leads={filtered} options={options} />
-    </div>
-  );
-}
+// LeadsSearch is superseded by LeadsViewToggle (Phase 19).
+// Re-exported here to avoid breaking any existing import.
+export { LeadsViewToggle as LeadsSearch } from "@/components/admin/leads/LeadsViewToggle";
@@ -1,5 +1,5 @@
 import { getLeadsWithTags, getLeadFieldOptions } from "@/lib/admin-queries";
-import { LeadsSearch } from "./LeadsSearch";
+import { LeadsViewToggle } from "@/components/admin/leads/LeadsViewToggle";
 import { CreateLeadModal } from "@/components/admin/leads/LeadForm";

 export const revalidate = 0;
@@ -17,7 +17,7 @@ export default async function LeadsPage() {
        <CreateLeadModal />
      </div>

-      <LeadsSearch leads={leads} options={options} />
+      <LeadsViewToggle leads={leads} options={options} />
    </div>
  );
 }
@@ -0,0 +1,183 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  useDroppable,
+  useDraggable,
+} from "@dnd-kit/core";
+import { updateLeadField } from "@/app/admin/leads/actions";
+import type { LeadWithTags } from "@/lib/admin-queries";
+
+type LeadStage = "contacted" | "qualified" | "proposal_sent" | "negotiating" | "won" | "lost";
+
+const LEAD_COLUMNS: {
+  id: LeadStage;
+  label: string;
+  headerClass: string;
+  dotClass: string;
+}[] = [
+  { id: "contacted",     label: "Contattato",      headerClass: "text-[#71717a]",    dotClass: "bg-[#d4d4d8]" },
+  { id: "qualified",     label: "Qualificato",      headerClass: "text-purple-700",   dotClass: "bg-purple-400" },
+  { id: "proposal_sent", label: "Offerta inviata",  headerClass: "text-amber-700",    dotClass: "bg-amber-400" },
+  { id: "negotiating",   label: "Trattativa",       headerClass: "text-orange-700",   dotClass: "bg-orange-400" },
+  { id: "won",           label: "Vinto",            headerClass: "text-green-700",    dotClass: "bg-green-500" },
+  { id: "lost",          label: "Perso",            headerClass: "text-red-700",      dotClass: "bg-red-400" },
+];
+
+const VALID_STAGES = LEAD_COLUMNS.map((c) => c.id) as string[];
+
+function DroppableColumn({
+  id, label, headerClass, dotClass, leads, activeId,
+}: {
+  id: LeadStage;
+  label: string;
+  headerClass: string;
+  dotClass: string;
+  leads: LeadWithTags[];
+  activeId: string | null;
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={`flex flex-col rounded-xl border-2 transition-colors ${
+        isOver ? "border-[#1A463C] bg-[#1A463C]/5" : "border-[#e5e7eb] bg-[#f9f9f9]"
+      } min-h-[240px]`}
+    >
+      <div className={`px-4 py-3 flex items-center justify-between ${headerClass}`}>
+        <div className="flex items-center gap-2">
+          <span className={`w-2 h-2 rounded-full ${dotClass}`} />
+          <span className="text-xs font-bold uppercase tracking-wider">{label}</span>
+        </div>
+        <span className="text-xs font-semibold tabular-nums bg-white rounded-full px-2 py-0.5 border border-[#e5e7eb]">
+          {leads.length}
+        </span>
+      </div>
+
+      <div className="flex-1 p-3 space-y-2">
+        {leads.map((lead) => (
+          <DraggableLeadCard key={lead.id} lead={lead} isActive={activeId === lead.id} />
+        ))}
+        {leads.length === 0 && (
+          <p className="text-xs text-[#d4d4d8] italic text-center py-10 select-none">
+            Nessun lead
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DraggableLeadCard({ lead, isActive }: { lead: LeadWithTags; isActive: boolean }) {
+  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: lead.id });
+
+  const style = transform
+    ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)` }
+    : undefined;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...listeners}
+      {...attributes}
+      className={`bg-white rounded-lg border border-[#e5e7eb] px-3 py-2.5 cursor-grab active:cursor-grabbing shadow-sm select-none transition-opacity ${
+        isDragging ? "opacity-30" : "hover:border-[#1A463C]/40 hover:shadow"
+      }`}
+    >
+      <p className="text-sm font-medium text-[#1a1a1a]">{lead.name}</p>
+      {lead.company && (
+        <p className="text-xs text-[#71717a]">{lead.company}</p>
+      )}
+      {lead.next_action && (
+        <p className="text-xs text-[#71717a] mt-1 line-clamp-1">{lead.next_action}</p>
+      )}
+    </div>
+  );
+}
+
+export function LeadsKanbanBoard({ leads }: { leads: LeadWithTags[] }) {
+  const router = useRouter();
+  const [, startTransition] = useTransition();
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  const [leadStatuses, setLeadStatuses] = useState<Record<string, LeadStage>>(() =>
+    Object.fromEntries(leads.map((l) => [l.id, l.status as LeadStage]))
+  );
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor)
+  );
+
+  const leadsByStage = LEAD_COLUMNS.reduce(
+    (acc, col) => {
+      acc[col.id] = leads.filter((l) => (leadStatuses[l.id] ?? l.status) === col.id);
+      return acc;
+    },
+    {} as Record<LeadStage, LeadWithTags[]>
+  );
+
+  const activeLead = activeId ? leads.find((l) => l.id === activeId) : null;
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    setActiveId(null);
+    if (!over) return;
+
+    const leadId = active.id as string;
+    const newStage = over.id as LeadStage;
+    const currentStage = leadStatuses[leadId];
+
+    if (!VALID_STAGES.includes(newStage)) return;
+    if (newStage === currentStage) return;
+
+    setLeadStatuses((prev) => ({ ...prev, [leadId]: newStage }));
+
+    startTransition(async () => {
+      await updateLeadField(leadId, "status", newStage);
+      router.refresh();
+    });
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragStart={(e) => setActiveId(e.active.id as string)}
+      onDragEnd={handleDragEnd}
+    >
+      <div className="overflow-x-auto">
+        <div className="grid grid-cols-6 gap-3 min-w-[1080px]">
+          {LEAD_COLUMNS.map((col) => (
+            <DroppableColumn
+              key={col.id}
+              {...col}
+              leads={leadsByStage[col.id]}
+              activeId={activeId}
+            />
+          ))}
+        </div>
+      </div>
+
+      <DragOverlay dropAnimation={null}>
+        {activeLead && (
+          <div className="bg-white rounded-lg border-2 border-[#1A463C] px-3 py-2.5 shadow-xl rotate-1 pointer-events-none">
+            <p className="text-sm font-medium text-[#1a1a1a]">{activeLead.name}</p>
+            {activeLead.company && (
+              <p className="text-xs text-[#71717a]">{activeLead.company}</p>
+            )}
+          </div>
+        )}
+      </DragOverlay>
+    </DndContext>
+  );
+}
@@ -0,0 +1,77 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Input } from "@/components/ui/input";
+import { Search } from "lucide-react";
+import { LeadTable } from "@/components/admin/leads/LeadTable";
+import { LeadsKanbanBoard } from "@/components/admin/leads/LeadsKanbanBoard";
+import type { LeadWithTags, LeadFieldOptions } from "@/lib/admin-queries";
+
+export function LeadsViewToggle({
+  leads,
+  options,
+}: {
+  leads: LeadWithTags[];
+  options: LeadFieldOptions;
+}) {
+  const [view, setView] = useState<"list" | "kanban">("list");
+  const [query, setQuery] = useState("");
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return leads;
+    return leads.filter((l) => {
+      if (l.name.toLowerCase().includes(q)) return true;
+      if (l.email?.toLowerCase().includes(q)) return true;
+      if (l.company?.toLowerCase().includes(q)) return true;
+      if (l.status.toLowerCase().includes(q)) return true;
+      if (l.tags.some((t) => t.toLowerCase().includes(q))) return true;
+      return false;
+    });
+  }, [leads, query]);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        <div className="relative max-w-sm flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#71717a]" />
+          <Input
+            type="text"
+            placeholder="Cerca lead..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="pl-9 h-9"
+          />
+        </div>
+        <div className="flex items-center gap-1 bg-[#f4f4f5] rounded-lg p-1 w-fit flex-shrink-0">
+          <button
+            onClick={() => setView("list")}
+            className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
+              view === "list"
+                ? "bg-white text-[#1A463C] shadow-sm"
+                : "text-[#71717a] hover:text-[#1a1a1a]"
+            }`}
+          >
+            Lista
+          </button>
+          <button
+            onClick={() => setView("kanban")}
+            className={`px-3 py-1.5 rounded-md text-xs font-semibold transition-all ${
+              view === "kanban"
+                ? "bg-white text-[#1A463C] shadow-sm"
+                : "text-[#71717a] hover:text-[#1a1a1a]"
+            }`}
+          >
+            Kanban
+          </button>
+        </div>
+      </div>
+
+      {view === "list" ? (
+        <LeadTable leads={filtered} options={options} />
+      ) : (
+        <LeadsKanbanBoard leads={filtered} />
+      )}
+    </div>
+  );
+}
Author	SHA1	Message	Date
simone	34be9341bb	feat(19-01): wire LeadsViewToggle into leads page + build verified - page.tsx: import LeadsViewToggle from @/components/admin/leads/LeadsViewToggle - page.tsx: render <LeadsViewToggle leads={leads} options={options} /> - Removed direct LeadsSearch import from page (re-exported via LeadsSearch.tsx) - Build: Next.js 16.2.6 Turbopack — Compiled successfully, TypeScript clean	2026-06-19 17:49:28 +02:00
simone	607c2578f0	feat(19-01): add LeadsViewToggle with integrated search + list/kanban pill toggle - LeadsViewToggle: client wrapper with useState<list\|kanban>, useMemo filtered - Search input (left) + pill toggle Lista/Kanban (right) on single row - Filters leads by name/email/company/status/tags across both views - Search state preserved when switching between Lista and Kanban - LeadsSearch.tsx: replaced with re-export of LeadsViewToggle (backward compat)	2026-06-19 17:48:31 +02:00
simone	2c67e6fd72	feat(19-01): add LeadsKanbanBoard with @dnd-kit drag-drop between 6 stage columns - 6-column Kanban board: contacted, qualified, proposal_sent, negotiating, won, lost - DroppableColumn with useDroppable, isOver highlight (border-[#1A463C]) - DraggableLeadCard with useDraggable, opacity-30 on drag, name/company/next_action - Optimistic update via setLeadStatuses + startTransition + updateLeadField + router.refresh - Client-side guard: VALID_STAGES check before calling server action (T-19-01) - DragOverlay dropAnimation={null} ghost card with rotate-1 shadow-xl - overflow-x-auto wrapper with grid-cols-6 min-w-[1080px]	2026-06-19 17:48:00 +02:00
simone	5e4b2239cb	docs(phase-19): create phase plan — LeadsKanbanBoard + view toggle (PIPE-01, PIPE-02) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-06-19 17:37:32 +02:00