"use client"; import { type CollisionDetection, closestCorners, DndContext, type DragEndEvent, type DragOverEvent, DragOverlay, type DragStartEvent, KeyboardSensor, PointerSensor, pointerWithin, rectIntersection, TouchSensor, useDroppable, useSensor, useSensors, } from "@dnd-kit/core"; import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable"; import { Archive, Calendar, Copy, Edit, MoreHorizontal, Trash2, } from "lucide-react"; import { memo, useCallback, useMemo, useRef, useState } from "react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { cn } from "@/lib/utils"; import { type ColumnDefinition, columnDefinitions, initialTasks, type KanbanTask, } from "./data"; const statusColors: Record< ColumnDefinition["status"], { dot: string; count: string } > = { todo: { dot: "bg-muted-foreground/50", count: "text-muted-foreground", }, "in-progress": { dot: "bg-blue-500", count: "text-blue-600 dark:text-blue-400", }, review: { dot: "bg-amber-500", count: "text-amber-600 dark:text-amber-400", }, done: { dot: "bg-emerald-500", count: "text-emerald-600 dark:text-emerald-400", }, }; const COLUMN_IDS = new Set(columnDefinitions.map((c) => c.id)); const CardContent = memo(function CardContent({ task }: { task: KanbanTask }) { return (

{task.title} Edit Duplicate Archive Delete

{task.badges.length > 0 && (

{task.badges.map((badge) => ( {badge.label} ))}

)}

{task.deadline} {task.assignee.initials}

); }); const SortableCard = memo(function SortableCard({ task, isDragActive, }: { task: KanbanTask; isDragActive: boolean; }) { const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: task.id }); const style = { transform: transform ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)` : undefined, transition: isDragActive ? transition : undefined, }; return (

); }); function DroppableColumn({ column, tasks, isReceiving, isDragActive, }: { column: ColumnDefinition; tasks: KanbanTask[]; isReceiving: boolean; isDragActive: boolean; }) { const colors = statusColors[column.status]; const { setNodeRef } = useDroppable({ id: column.id }); const taskIds = useMemo(() => tasks.map((t) => t.id), [tasks]); return (

{column.title}

{tasks.length}

{tasks.map((task) => ( ))} {tasks.length === 0 && !isReceiving && (

No items

)}

); } const collisionDetection: CollisionDetection = (args) => { // First try pointer-based detection for precision const pointerCollisions = pointerWithin(args); if (pointerCollisions.length > 0) return pointerCollisions; // Fall back to rectangle intersection const rectCollisions = rectIntersection(args); if (rectCollisions.length > 0) return rectCollisions; // Last resort: closest corners (best for kanban grids) return closestCorners(args); }; export function KanbanBoard() { const [tasks, setTasks] = useState(initialTasks); const [activeId, setActiveId] = useState(null); const [overColumnId, setOverColumnId] = useState(null); const [activeWidth, setActiveWidth] = useState(null); const activeSourceColumnRef = useRef(null); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 6 }, }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }), ); const tasksByColumn = useMemo(() => { const map: Record = {}; for (const col of columnDefinitions) { map[col.id] = []; } for (const task of tasks) { map[task.columnId]?.push(task); } return map; }, [tasks]); const activeTask = useMemo( () => (activeId ? (tasks.find((t) => t.id === activeId) ?? null) : null), [activeId, tasks], ); const findColumnId = useCallback( (id: string): string | null => { if (COLUMN_IDS.has(id)) return id; const task = tasks.find((t) => t.id === id); return task?.columnId ?? null; }, [tasks], ); const handleDragStart = useCallback( (event: DragStartEvent) => { const id = event.active.id as string; setActiveId(id); const sourceCol = tasks.find((t) => t.id === id)?.columnId ?? null; activeSourceColumnRef.current = sourceCol; setOverColumnId(null); const node = event.active.rect.current.initial; setActiveWidth(node ? node.width : null); }, [tasks], ); const handleDragOver = useCallback( (event: DragOverEvent) => { const { active, over } = event; if (!over) { setOverColumnId(null); return; } const activeId = active.id as string; const overId = over.id as string; const activeColumnId = findColumnId(activeId); const targetColumnId = findColumnId(overId); if (!activeColumnId || !targetColumnId) return; // Track which column the cursor is over for highlight setOverColumnId(targetColumnId); // Only move when crossing columns if (activeColumnId === targetColumnId) return; setTasks((prev) => { const activeIndex = prev.findIndex((t) => t.id === activeId); if (activeIndex === -1) return prev; // Determine insertion position in target column const targetTasks = prev.filter((t) => t.columnId === targetColumnId); let newIndex: number; if (COLUMN_IDS.has(overId)) { // Dropped on column itself: place at end newIndex = targetTasks.length; } else { // Dropped on a task: insert at that task's position const overTaskIndex = targetTasks.findIndex((t) => t.id === overId); newIndex = overTaskIndex === -1 ? targetTasks.length : overTaskIndex; } // Update columnId and reposition const updated = [...prev]; const [moved] = updated.splice(activeIndex, 1); const movedTask = { ...moved, columnId: targetColumnId }; // Find the actual insertion index in the flat array if (newIndex >= targetTasks.length) { // Append after the last task in this column const lastTask = targetTasks[targetTasks.length - 1]; const insertAt = lastTask ? updated.findIndex((t) => t.id === lastTask.id) + 1 : updated.length; updated.splice(insertAt, 0, movedTask); } else { const refTask = targetTasks[newIndex]; const insertAt = updated.findIndex((t) => t.id === refTask.id); updated.splice(insertAt, 0, movedTask); } return updated; }); }, [findColumnId], ); const handleDragEnd = useCallback( (event: DragEndEvent) => { setActiveId(null); setOverColumnId(null); setActiveWidth(null); activeSourceColumnRef.current = null; const { active, over } = event; if (!over || active.id === over.id) return; const activeId = active.id as string; const overId = over.id as string; const activeColumnId = findColumnId(activeId); const overColumnId = findColumnId(overId); // Only handle within-column reorder (cross-column is done in dragOver) if (!activeColumnId || !overColumnId || activeColumnId !== overColumnId) return; setTasks((prev) => { const columnTasks = prev.filter((t) => t.columnId === activeColumnId); const oldIndex = columnTasks.findIndex((t) => t.id === activeId); const newIndex = columnTasks.findIndex((t) => t.id === overId); if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return prev; const reordered = arrayMove(columnTasks, oldIndex, newIndex); // Rebuild full task list with the new order for this column const result: KanbanTask[] = []; let colIdx = 0; for (const task of prev) { if (task.columnId === activeColumnId) { result.push(reordered[colIdx++]); } else { result.push(task); } } return result; }); }, [findColumnId], ); return (

{columnDefinitions.map((column) => ( ))}

{activeTask && (

)} ); }

Kanban Board