Describe it. Get a running Next.js app you can read, diff, and keep.

// src/components/KanbanBoard.tsx
'use client';

import React, { useState } from 'react';
import { Task, ColumnId } from '@/types/kanban';

export function KanbanBoard({ initialTasks }: { initialTasks: Task[] }) {
  const [tasks, setTasks] = useState<Task[]>(initialTasks);
  const [filter, setFilter] = useState<'all' | 'high' | 'urgent'>('all');

  const moveTask = (taskId: string, targetColumn: ColumnId) => {
    setTasks(prev => prev.map(t => t.id === taskId ? { ...t, column: targetColumn } : t));
  };

  const filteredTasks = tasks.filter(t => filter === 'all' || t.priority === filter);

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-6 bg-zinc-950">
      {/* 3 Drag-and-drop workflow columns with type-safe state */}
      <KanbanColumn id="todo" title="To Do" tasks={filteredTasks.filter(t => t.column === 'todo')} onDrop={moveTask} />
      <KanbanColumn id="progress" title="In Progress" tasks={filteredTasks.filter(t => t.column === 'progress')} onDrop={moveTask} />
      <KanbanColumn id="done" title="Completed" tasks={filteredTasks.filter(t => t.column === 'done')} onDrop={moveTask} />
    </div>
  );
}