Kanban

import { KanbanBoard, type KanbanColumnDef } from "@vortex/ui-foundation"
 
const columns: KanbanColumnDef[] = [
  { id: "todo", title: "To Do", color: "#9ca3af" },
  { id: "in_progress", title: "In Progress", color: "#60a5fa" },
  { id: "in_review", title: "In Review", color: "#facc15" },
  { id: "completed", title: "Completed", color: "#34d399" },
]
 
<KanbanBoard
  columns={columns}
  tasks={tasks}
  groupBy="status"
  draggable={false}
  columnDraggable={false}
  showAddCard={false}
/>

const [columns, setColumns] = useState(sampleColumns)
const [tasks, setTasks] = useState(sampleTasks)
 
const handleTaskMove = (result: KanbanDropResult) => {
  setTasks((prev) => {
    const idx = prev.findIndex((t) => t.id === result.taskId)
    if (idx === -1) return prev
    const task = { ...prev[idx], status: result.targetColumnId }
    const inTarget = prev.filter(
      (t) => t.id !== result.taskId && t.status === result.targetColumnId,
    )
    inTarget.splice(result.targetIndex, 0, task)
    const others = prev.filter(
      (t) => t.id !== result.taskId && t.status !== result.targetColumnId,
    )
    return [...others, ...inTarget]
  })
}
 
const handleColumnMove = (result: KanbanColumnMoveResult) => {
  setColumns((prev) => {
    const next = [...prev]
    const [removed] = next.splice(result.sourceIndex, 1)
    next.splice(result.targetIndex, 0, removed)
    return next
  })
}
 
<KanbanBoard<Task>
  columns={columns}
  tasks={tasks}
  groupBy="status"
  showAddCard
  showAddColumn
  renderCard={(task, columnId, dragHandleProps) => (
    <TaskCard task={task} dragHandleProps={dragHandleProps} />
  )}
  onTaskMove={handleTaskMove}
  onColumnMove={handleColumnMove}
  onTaskAdd={(colId) => console.log("add:", colId)}
  onColumnAdd={() => console.log("add column")}
  onColumnMenuClick={(colId) => console.log("menu:", colId)}
/>

<KanbanBoard
  columns={columns}
  tasks={[]}
  groupBy="status"
  showAddCard
  showAddColumn
  onTaskAdd={(colId) => console.log("add:", colId)}
  onColumnAdd={() => console.log("add column")}
/>

const priorityColumns: KanbanColumnDef[] = [
  { id: "High", title: "High Priority", color: "#ef4444" },
  { id: "Normal", title: "Normal Priority", color: "#eab308" },
  { id: "Low", title: "Low Priority", color: "#22c55e" },
]
 
<KanbanBoard<Task>
  columns={priorityColumns}
  tasks={tasks}
  groupBy="priority"
  renderCard={(task, columnId, dragHandleProps) => (
    <TaskCard task={task} dragHandleProps={dragHandleProps} />
  )}
/>