import React, { useState, useEffect } from "react"; import { Plus, MoreHorizontal, Calendar as CalendarIcon, Tag as TagIcon, Trash2, Edit3, CheckCircle2, Clock, AlertCircle, Search, Filter, Columns, Sparkles, X, Check } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Badge } from "@/components/ui/badge"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { Toaster, toast } from "sonner"; type Priority = "low" | "medium" | "high"; type ColumnId = "todo" | "in_progress" | "done"; interface Task { id: string; title: string; description: string; status: ColumnId; priority: Priority; labels: string[]; dueDate: string; } const INITIAL_TASKS: Task[] = [ { id: "task-1", title: "Design System Audit", description: "Review color tokens and typography hierarchy across all primary screens.", status: "todo", priority: "high", labels: ["Design", "UI/UX"], dueDate: "2025-04-15" }, { id: "task-2", title: "API Endpoint Optimization", description: "Reduce latency on search queries by indexing user records correctly.", status: "in_progress", priority: "medium", labels: ["Backend", "Performance"], dueDate: "2025-04-12" }, { id: "task-3", title: "User Onboarding Flow", description: "Implement step-by-step tooltips for new workspace visitors.", status: "done", priority: "low", labels: ["Frontend", "Product"], dueDate: "2025-04-01" } ]; const AVAILABLE_LABELS = ["Design", "Backend", "Frontend", "Product", "Bug", "Performance", "Security"]; const LABEL_COLORS: Record = { Design: "bg-purple-50 text-purple-700 border-purple-200", Backend: "bg-blue-50 text-blue-700 border-blue-200", Frontend: "bg-emerald-50 text-emerald-700 border-emerald-200", Product: "bg-amber-50 text-amber-700 border-amber-200", Bug: "bg-rose-50 text-rose-700 border-rose-200", Performance: "bg-sky-50 text-sky-700 border-sky-200", Security: "bg-indigo-50 text-indigo-700 border-indigo-200", }; export default function App() { const [tasks, setTasks] = useState(() => { const saved = localStorage.getItem("cobalt_kanban_tasks"); if (saved) { try { return JSON.parse(saved); } catch (e) { console.error(e); } } return INITIAL_TASKS; }); const [searchQuery, setSearchQuery] = useState(""); const [selectedLabelFilter, setSelectedLabelFilter] = useState("all"); // Task Dialog State const [isDialogOpen, setIsDialogOpen] = useState(false); const [editingTask, setEditingTask] = useState(null); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [status, setStatus] = useState("todo"); const [priority, setPriority] = useState("medium"); const [taskLabels, setTaskLabels] = useState([]); const [dueDate, setDueDate] = useState(""); // Drag and Drop state const [draggedTaskId, setDraggedTaskId] = useState(null); useEffect(() => { localStorage.setItem("cobalt_kanban_tasks", JSON.stringify(tasks)); }, [tasks]); const handleOpenCreateDialog = (defaultStatus: ColumnId = "todo") => { setEditingTask(null); setTitle(""); setDescription(""); setStatus(defaultStatus); setPriority("medium"); setTaskLabels([]); setDueDate(new Date().toISOString().split("T")[0]); setIsDialogOpen(true); }; const handleOpenEditDialog = (task: Task) => { setEditingTask(task); setTitle(task.title); setDescription(task.description); setStatus(task.status); setPriority(task.priority); setTaskLabels(task.labels); setDueDate(task.dueDate); setIsDialogOpen(true); }; const handleSaveTask = (e: React.FormEvent) => { e.preventDefault(); if (!title.trim()) { toast.error("Please enter a task title."); return; } if (editingTask) { setTasks(tasks.map(t => t.id === editingTask.id ? { ...t, title, description, status, priority, labels: taskLabels, dueDate } : t)); toast.success("Task updated successfully."); } else { const newTask: Task = { id: `task-${Date.now()}`, title, description, status, priority, labels: taskLabels, dueDate: dueDate || new Date().toISOString().split("T")[0] }; setTasks([newTask, ...tasks]); toast.success("Task created successfully."); } setIsDialogOpen(false); }; const handleDeleteTask = (id: string) => { setTasks(tasks.filter(t => t.id !== id)); toast.success("Task deleted."); }; const handleDragStart = (e: React.DragEvent, id: string) => { setDraggedTaskId(id); e.dataTransfer.setData("text/plain", id); }; const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); }; const handleDrop = (e: React.DragEvent, targetStatus: ColumnId) => { e.preventDefault(); const taskId = e.dataTransfer.getData("text/plain") || draggedTaskId; if (!taskId) return; setTasks(tasks.map(t => t.id === taskId ? { ...t, status: targetStatus } : t)); setDraggedTaskId(null); toast.success(`Task moved to ${targetStatus === "todo" ? "To Do" : targetStatus === "in_progress" ? "In Progress" : "Done"}`); }; const toggleLabelSelection = (label: string) => { if (taskLabels.includes(label)) { setTaskLabels(taskLabels.filter(l => l !== label)); } else { setTaskLabels([...taskLabels, label]); } }; const filteredTasks = tasks.filter(task => { const matchesSearch = task.title.toLowerCase().includes(searchQuery.toLowerCase()) || task.description.toLowerCase().includes(searchQuery.toLowerCase()); const matchesLabel = selectedLabelFilter === "all" || task.labels.includes(selectedLabelFilter); return matchesSearch && matchesLabel; }); const columns: { id: ColumnId; title: string; count: number; badgeColor: string }[] = [ { id: "todo", title: "To Do", count: filteredTasks.filter(t => t.status === "todo").length, badgeColor: "bg-neutral-100 text-neutral-700 border-neutral-200" }, { id: "in_progress", title: "In Progress", count: filteredTasks.filter(t => t.status === "in_progress").length, badgeColor: "bg-blue-50 text-blue-700 border-blue-200" }, { id: "done", title: "Done", count: filteredTasks.filter(t => t.status === "done").length, badgeColor: "bg-emerald-50 text-emerald-700 border-emerald-200" }, ]; return (

{/* Top Header */}

Cobalt Board

Project workflow and task tracker

{/* Toolbar / Filters */}

setSearchQuery(e.target.value)} className="pl-9 bg-neutral-50 border-neutral-200 text-sm rounded-md focus-visible:ring-blue-500" />

Label:

{/* Kanban Board Grid */}

{columns.map(col => { const colTasks = filteredTasks.filter(t => t.status === col.id); return (

handleDrop(e, col.id)} className="bg-white/80 backdrop-blur rounded-xl border border-neutral-200 flex flex-col min-h-[500px] shadow-sm overflow-hidden" > {/* Column Header */}

{col.title}

{col.count}

{/* Task Cards Container */}

{colTasks.length === 0 ? (

No tasks in {col.title}

) : ( colTasks.map(task => (

handleDragStart(e, task.id)} className="bg-white p-4 rounded-lg border border-neutral-200 shadow-sm hover:border-neutral-300 transition-all cursor-grab active:cursor-grabbing group relative" >

{task.title}

handleOpenEditDialog(task)} className="text-xs cursor-pointer"> Edit Task handleDeleteTask(task.id)} className="text-xs text-rose-600 cursor-pointer"> Delete

{task.description && (

{task.description}

)} {/* Labels */} {task.labels && task.labels.length > 0 && (

{task.labels.map(lbl => ( {lbl} ))}

)} {/* Card Footer: Due Date & Priority */}

{task.dueDate}

{task.priority}

)) )}

); })}

{/* Create / Edit Task Dialog */}