diff --git a/src/components/admin/leads/LeadsKanbanBoard.tsx b/src/components/admin/leads/LeadsKanbanBoard.tsx new file mode 100644 index 0000000..e5d17ca --- /dev/null +++ b/src/components/admin/leads/LeadsKanbanBoard.tsx @@ -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 ( +
+ Nessun lead +
+ )} +{lead.name}
+ {lead.company && ( +{lead.company}
+ )} + {lead.next_action && ( +{lead.next_action}
+ )} +{activeLead.name}
+ {activeLead.company && ( +{activeLead.company}
+ )} +