"use client"; import React, { useState, useMemo } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { LayoutList, KanbanSquare, Calendar, Clock, CheckCircle2, AlertCircle, ArrowUpCircle, MoreHorizontal, MessageSquare, Paperclip } from "lucide-react"; // --- Mock Data --- type TaskStatus = "Backlog" | "In Progress" | "Completed"; type Priority = "Low" | "Medium" | "High"; interface Task { id: string; title: string; status: TaskStatus; priority: Priority; assignee: { name: string; avatar: string; color: string }; dueDate: string; comments: number; attachments: number; } const tasksData: Task[] = [ { id: "TASK-401", title: "Implement OAuth2 Authentication", status: "Completed", priority: "High", assignee: { name: "Alex Chen", avatar: "AC", color: "bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400" }, dueDate: "Oct 12", comments: 5, attachments: 2 }, { id: "TASK-402", title: "Design System Migration", status: "In Progress", priority: "High", assignee: { name: "Sarah V.", avatar: "SV", color: "bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-500/20 dark:text-fuchsia-400" }, dueDate: "Oct 24", comments: 12, attachments: 4 }, { id: "TASK-403", title: "Fix Navigation Memory Leak", status: "In Progress", priority: "Medium", assignee: { name: "Mike Ross", avatar: "MR", color: "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400" }, dueDate: "Oct 25", comments: 3, attachments: 0 }, { id: "TASK-404", title: "Update Terms of Service Page", status: "Backlog", priority: "Low", assignee: { name: "Emily W.", avatar: "EW", color: "bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400" }, dueDate: "Nov 02", comments: 1, attachments: 1 }, { id: "TASK-405", title: "Database Indexing Optimization", status: "Backlog", priority: "High", assignee: { name: "Alex Chen", avatar: "AC", color: "bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400" }, dueDate: "Nov 05", comments: 8, attachments: 3 }, { id: "TASK-406", title: "User Profile Wireframes", status: "Completed", priority: "Medium", assignee: { name: "Sarah V.", avatar: "SV", color: "bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-500/20 dark:text-fuchsia-400" }, dueDate: "Oct 10", comments: 24, attachments: 6 }, ]; const STATUSES: TaskStatus[] = ["Backlog", "In Progress", "Completed"]; export default function KanbanStyleTable() { const [view, setView] = useState<"table" | "kanban">("table"); const getPriorityIcon = (priority: Priority) => { switch (priority) { case "High": return ; case "Medium": return ; case "Low": return ; } }; const tasksByStatus = useMemo(() => { const grouped: Record = { "Backlog": [], "In Progress": [], "Completed": [] }; tasksData.forEach(task => grouped[task.status].push(task)); return grouped; }, []); return (

{/* Header & View Toggle */}

Sprint Board

Toggle between dense list view and interactive kanban board.

{/* Content Area */}

{/* --- TABLE VIEW --- */} {view === "table" && (

{tasksData.map((task) => ( ))}

Task Details	Status	Priority	Assignee	Due Date
{task.title} {task.id}	{task.status}	{getPriorityIcon(task.priority)} {task.priority}	{task.assignee.avatar} {task.assignee.name}	{task.dueDate}

)} {/* --- KANBAN BOARD VIEW --- */} {view === "kanban" && ( {STATUSES.map((status) => (

{/* Column Header */}

{status === "Completed" && } {status === "In Progress" && } {status === "Backlog" && } {status}

{tasksByStatus[status].length}

{/* Column Cards Container */}

{tasksByStatus[status].map((task) => (

{task.id}

{task.title}

{task.assignee.avatar}

{task.comments > 0 && (

{task.comments}

)} {task.attachments > 0 && (

{task.attachments}

)}

{getPriorityIcon(task.priority)} {task.dueDate}

))}

))} )}