clienthub/.planning/phases/19-pipeline-crm-kanban/19-01-SUMMARY.md

phase, plan, status, completed_at, requirements_satisfied, commits

phase	plan	status	completed_at	requirements_satisfied	commits
19-pipeline-crm-kanban	01	complete	2026-06-19	PIPE-01 PIPE-02	2c67e6f 607c257 34be934

Plan 19-01 Summary — LeadsKanbanBoard + LeadsViewToggle

What Was Built

Plan 19-01 aggiunge una vista Kanban stile Pipedrive alla pagina /admin/leads, affiancata alla tabella esistente tramite un toggle Lista/Kanban.

Componenti creati / modificati

File	Tipo	Descrizione
src/components/admin/leads/LeadsKanbanBoard.tsx	Nuovo	Board Kanban con 6 colonne stage, drag-drop via @dnd-kit, ottimistic update
src/components/admin/leads/LeadsViewToggle.tsx	Nuovo	Client wrapper con useState<"list" | "kanban">, search integrata, pill toggle
src/app/admin/leads/LeadsSearch.tsx	Modificato	Svuotato e ri-esporta LeadsViewToggle as LeadsSearch per retrocompatibilità
src/app/admin/leads/page.tsx	Modificato	Ora renderizza <LeadsViewToggle> invece di <LeadsSearch>

Dettaglio implementazione

LeadsKanbanBoard.tsx

• "use client" — componente puramente client
• LEAD_COLUMNS definite come costante locale (6 stage: contacted, qualified, proposal_sent, negotiating, won, lost) con headerClass e dotClass per ogni colonna
• DroppableColumn — useDroppable({ id }), evidenziazione isOver, pill badge count, empty state "Nessun lead"
• DraggableLeadCard — useDraggable({ id: lead.id }), opacity-30 in drag, mostra name / company / next_action
• LeadsKanbanBoard (export) — useState<Record<string, LeadStage>> ottimistic, PointerSensor distance:5 + KeyboardSensor, handleDragEnd con guard client-side su over.id ∈ LEAD_COLUMNS, startTransition(async () => { await updateLeadField(leadId, "status", newStage); router.refresh(); })
• Layout: overflow-x-auto → grid grid-cols-6 gap-3 min-w-[1080px]
• DragOverlay dropAnimation={null} con ghost card rotate-1 border-2 border-[#1A463C] shadow-xl

LeadsViewToggle.tsx

• useState<"list" | "kanban">("list") per il toggle
• useState("") per la query di ricerca
• useMemo per filtered — filtra su name / email / company / status / tags
• Barra superiore: search input (max-w-sm, flex-1) + pill toggle (flex-shrink-0) su singola riga flex justify-between items-center
• Pill toggle con classi bg-[#f4f4f5] rounded-lg p-1, active: bg-white text-[#1A463C] shadow-sm
• Condizionale: view === "list" → <LeadTable> | view === "kanban" → <LeadsKanbanBoard>

LeadsSearch.tsx (ri-esportazione)

• Ridotto a una singola riga: export { LeadsViewToggle as LeadsSearch } from "@/components/admin/leads/LeadsViewToggle"
• Garantisce zero import-break su eventuali riferimenti residui

page.tsx

• Import aggiornato: LeadsViewToggle da @/components/admin/leads/LeadsViewToggle
• Render: <LeadsViewToggle leads={leads} options={options} />

Commits

Hash	Descrizione
2c67e6f	Task 1 — LeadsKanbanBoard.tsx con 6 colonne e drag-drop persistente
607c257	Task 2 — LeadsViewToggle.tsx + re-export LeadsSearch
34be934	Task 3 — page.tsx aggiornato + build check verde + fix overflow clipping

Nota: il commit 34be934 include anche un fix minore all'overflow del dropdown in LeadTable (il clipping del overflow-x-auto del wrapper Kanban tagliava il menu a tendina delle colonne tabella in vista Lista). Fix non bloccante, risolto nella stessa sessione.

Requirements Satisfied

Req	Descrizione	Verifica
PIPE-01	Board Kanban 6 colonne con drag-drop che aggiorna leads.status	Drag tra colonne → updateLeadField(id, "status", newStage) → router.refresh() — persistente dopo reload
PIPE-02	Vinto/Perso come cambio-colonna manuale, nessun modale	Trascinare su colonna "won" o "lost" registra l'esito direttamente

Must-Haves Verificati

Truth	Stato
Board 6 colonne (contacted → qualified → proposal_sent → negotiating → won → lost)	✅
Drag-drop aggiorna leads.status in modo persistente	✅
Colonne Vinto/Perso registrano l'esito via cambio stage	✅
Vista Lista (LeadTable inline-edit) resta disponibile e funzionante	✅
Toggle Lista/Kanban preserva la query di ricerca al cambio vista	✅
Search filtra entrambe le viste (Lista e Kanban) con lo stesso filtered array	✅

Deferred Items

Item	Motivazione	Priorità
Overflow clipping del dropdown LeadTable in vista Lista (da overflow-x-auto del wrapper Kanban)	Non bloccante — già parzialmente mitigato nel commit 34be934; comportamento accettabile	Bassa — da affrontare in phase futura se segnalato

Self-Check

PASSED — tutti i must_have verificati, build verde, checkpoint umano approvato ("approvato").

Durata esecuzione: ~1 sessione sincrona (2026-06-19).