"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, ArrowDown, ArrowUp, ArrowUpDown, CalendarDays, Calendar as CalendarIcon, CheckSquare, ChevronLeft, ChevronRight, ClipboardList, Clock, Columns3, Copy, Edit, FileText, List, MoreHorizontal, SlidersHorizontal, StickyNote, 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 { Checkbox } from "@/components/ui/checkbox"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { SearchInput } from "@/components/ui/search-input"; import { Separator } from "@/components/ui/separator"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { categoryOptions, columns, type DataViewItem, formatDate, type ItemCategory, type ItemStatus, initialItems, } from "./data"; type ViewMode = "kanban" | "table" | "timeline" | "calendar"; const COLUMN_IDS: Set = new Set(columns.map((c) => c.id)); const statusColors: Record< ItemStatus, { dot: string; count: string; badge: string } > = { todo: { dot: "bg-muted-foreground/50", count: "text-muted-foreground", badge: "bg-muted text-muted-foreground", }, "in-progress": { dot: "bg-blue-500", count: "text-blue-600 dark:text-blue-400", badge: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300", }, review: { dot: "bg-amber-500", count: "text-amber-600 dark:text-amber-400", badge: "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300", }, done: { dot: "bg-emerald-500", count: "text-emerald-600 dark:text-emerald-400", badge: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300", }, }; const statusLabels: Record = { todo: "To Do", "in-progress": "In Progress", review: "Review", done: "Done", }; const categoryIcons: Record = { document: FileText, task: CheckSquare, requirement: ClipboardList, note: StickyNote, }; /* ------------------------------------------------------------------ */ /* Shared action menu */ /* ------------------------------------------------------------------ */ function ItemActions() { return ( Edit Duplicate Archive Delete ); } /* ------------------------------------------------------------------ */ /* Filter popover */ /* ------------------------------------------------------------------ */ function FilterPopover({ statusFilters, categoryFilters, onStatusChange, onCategoryChange, onClear, }: { statusFilters: Set; categoryFilters: Set; onStatusChange: (status: ItemStatus) => void; onCategoryChange: (category: ItemCategory) => void; onClear: () => void; }) { const activeCount = statusFilters.size + categoryFilters.size; return (

Status

{columns.map((col) => ( onStatusChange(col.id)} /> {col.title} ))}

{column.title}

{items.length}

{items.map((item) => ( ))} {items.length === 0 && !isReceiving && (

No items

)}

); } const collisionDetection: CollisionDetection = (args) => { const pointerCollisions = pointerWithin(args); if (pointerCollisions.length > 0) return pointerCollisions; const rectCollisions = rectIntersection(args); if (rectCollisions.length > 0) return rectCollisions; return closestCorners(args); }; function KanbanView({ items, filteredItems, setItems, }: { items: DataViewItem[]; filteredItems: DataViewItem[]; setItems: React.Dispatch>; }) { 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 itemsByColumn = useMemo(() => { const map: Record = {}; for (const col of columns) { map[col.id] = []; } for (const item of filteredItems) { map[item.status]?.push(item); } return map; }, [filteredItems]); const activeItem = useMemo( () => (activeId ? (items.find((t) => t.id === activeId) ?? null) : null), [activeId, items], ); const findColumnId = useCallback( (id: string): string | null => { if (COLUMN_IDS.has(id)) return id; const item = items.find((t) => t.id === id); return item?.status ?? null; }, [items], ); const handleDragStart = useCallback( (event: DragStartEvent) => { const id = event.active.id as string; setActiveId(id); const sourceCol = items.find((t) => t.id === id)?.status ?? null; activeSourceColumnRef.current = sourceCol; setOverColumnId(null); const node = event.active.rect.current.initial; setActiveWidth(node ? node.width : null); }, [items], ); 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; setOverColumnId(targetColumnId); if (activeColumnId === targetColumnId) return; setItems((prev) => { const activeIndex = prev.findIndex((t) => t.id === activeId); if (activeIndex === -1) return prev; const targetItems = prev.filter((t) => t.status === targetColumnId); let newIndex: number; if (COLUMN_IDS.has(overId)) { newIndex = targetItems.length; } else { const overItemIndex = targetItems.findIndex((t) => t.id === overId); newIndex = overItemIndex === -1 ? targetItems.length : overItemIndex; } const updated = [...prev]; const [moved] = updated.splice(activeIndex, 1); const movedItem = { ...moved, status: targetColumnId as ItemStatus, }; if (newIndex >= targetItems.length) { const lastItem = targetItems[targetItems.length - 1]; const insertAt = lastItem ? updated.findIndex((t) => t.id === lastItem.id) + 1 : updated.length; updated.splice(insertAt, 0, movedItem); } else { const refItem = targetItems[newIndex]; const insertAt = updated.findIndex((t) => t.id === refItem.id); updated.splice(insertAt, 0, movedItem); } return updated; }); }, [findColumnId, setItems], ); 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); if (!activeColumnId || !overColumnId || activeColumnId !== overColumnId) return; setItems((prev) => { const columnItems = prev.filter((t) => t.status === activeColumnId); const oldIndex = columnItems.findIndex((t) => t.id === activeId); const newIndex = columnItems.findIndex((t) => t.id === overId); if (oldIndex === -1 || newIndex === -1 || oldIndex === newIndex) return prev; const reordered = arrayMove(columnItems, oldIndex, newIndex); const result: DataViewItem[] = []; let colIdx = 0; for (const item of prev) { if (item.status === activeColumnId) { result.push(reordered[colIdx++]); } else { result.push(item); } } return result; }); }, [findColumnId, setItems], ); return (

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

{activeItem && (

)} ); } /* ------------------------------------------------------------------ */ /* Table view */ /* ------------------------------------------------------------------ */ type SortField = "title" | "status" | "category" | "date" | "assignee"; type SortDir = "asc" | "desc"; const statusOrder: Record = { todo: 0, "in-progress": 1, review: 2, done: 3, }; function SortHeader({ label, field, activeField, direction, onSort, className, }: { label: string; field: SortField; activeField: SortField | null; direction: SortDir; onSort: (field: SortField) => void; className?: string; }) { const isActive = activeField === field; const Icon = isActive ? direction === "asc" ? ArrowUp : ArrowDown : ArrowUpDown; return ( ); } function sortItems( items: DataViewItem[], field: SortField | null, dir: SortDir, ): DataViewItem[] { if (!field) return items; const sorted = [...items]; const m = dir === "asc" ? 1 : -1; sorted.sort((a, b) => { switch (field) { case "title": return m * a.title.localeCompare(b.title); case "status": return m * (statusOrder[a.status] - statusOrder[b.status]); case "category": return m * a.category.localeCompare(b.category); case "date": return m * a.date.localeCompare(b.date); case "assignee": return m * a.assignee.name.localeCompare(b.assignee.name); default: return 0; } }); return sorted; } function TableView({ items }: { items: DataViewItem[] }) { const [sortField, setSortField] = useState(null); const [sortDir, setSortDir] = useState("asc"); const handleSort = useCallback( (field: SortField) => { if (sortField === field) { setSortDir((d) => (d === "asc" ? "desc" : "asc")); } else { setSortField(field); setSortDir("asc"); } }, [sortField], ); const sortedItems = useMemo( () => sortItems(items, sortField, sortDir), [items, sortField, sortDir], ); if (items.length === 0) { return (

No items found

); } return (

{sortedItems.map((item) => { const CategoryIcon = categoryIcons[item.category]; const colors = statusColors[item.status]; return (

{ categoryOptions.find((c) => c.id === item.category) ?.label } {item.title} {item.badges.length > 0 && (

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

)}

{statusLabels[item.status]} {item.category} {formatDate(item.date)}

{item.assignee.initials} {item.assignee.name}

); })}

); } /* ------------------------------------------------------------------ */ /* Timeline / Gantt view */ /* ------------------------------------------------------------------ */ const DAY_WIDTH = 36; const LABEL_WIDTH = 200; const ROW_HEIGHT = 36; function diffDays(a: string, b: string): number { return Math.round( (new Date(`${b}T00:00:00`).getTime() - new Date(`${a}T00:00:00`).getTime()) / 86400000, ); } function addDays(iso: string, n: number): string { const d = new Date(`${iso}T00:00:00`); d.setDate(d.getDate() + n); return toISODate(d); } function getMonthSpans( dates: { date: Date }[], ): { label: string; span: number }[] { const spans: { label: string; span: number }[] = []; let curMonth = -1; let curYear = -1; for (const { date } of dates) { const m = date.getMonth(); const y = date.getFullYear(); if (m !== curMonth || y !== curYear) { spans.push({ label: `${MONTH_NAMES[m]} ${y}`, span: 1 }); curMonth = m; curYear = y; } else { spans[spans.length - 1].span++; } } return spans; } function TimelineView({ items }: { items: DataViewItem[] }) { const { rangeStart, dateCols, monthSpans, totalWidth } = useMemo(() => { if (items.length === 0) { return { rangeStart: "", dateCols: [], monthSpans: [], totalWidth: 0 }; } let minDate = items[0].date; let maxDate = items[0].endDate; for (const item of items) { if (item.date < minDate) minDate = item.date; if (item.endDate > maxDate) maxDate = item.endDate; } const start = addDays(minDate, -2); const end = addDays(maxDate, 2); const total = diffDays(start, end) + 1; const cols: { date: Date; iso: string; day: number; isWeekend: boolean }[] = []; for (let i = 0; i < total; i++) { const iso = addDays(start, i); const d = new Date(`${iso}T00:00:00`); cols.push({ date: d, iso, day: d.getDate(), isWeekend: d.getDay() === 0 || d.getDay() === 6, }); } return { rangeStart: start, dateCols: cols, monthSpans: getMonthSpans(cols), totalWidth: LABEL_WIDTH + cols.length * DAY_WIDTH, }; }, [items]); const sortedItems = useMemo( () => [...items].sort((a, b) => a.date.localeCompare(b.date)), [items], ); const todayIso = toISODate(new Date()); const todayOffset = rangeStart ? diffDays(rangeStart, todayIso) : -1; if (items.length === 0) { return (

No items found

); } return (

{/* Month headers */}

{monthSpans.map((m, i) => (

{m.label}

))}

{/* Day headers */}

{dateCols.map((col) => (

{col.day}

))}

{/* Item rows */} {sortedItems.map((item) => { const offset = diffDays(rangeStart, item.date); const duration = diffDays(item.date, item.endDate); const colors = statusColors[item.status]; return (

{/* Label */}

{item.title}

{formatDate(item.date)} – {formatDate(item.endDate)}{" "} · {item.assignee.name}

{/* Timeline area */}

{/* Weekend stripes */} {dateCols.map( (col, i) => col.isWeekend && (

), )} {/* Today line */} {todayOffset >= 0 && todayOffset < dateCols.length && (

)} {/* Bar */}

{item.title}

{formatDate(item.date)} – {formatDate(item.endDate)}

{item.assignee.name}

); })}

); } /* ------------------------------------------------------------------ */ /* Calendar view */ /* ------------------------------------------------------------------ */ const MONTH_NAMES = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ]; const DAY_NAMES = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; function toISODate(date: Date): string { return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`; } function getMonthGrid(year: number, month: number) { const firstDay = new Date(year, month, 1); const lastDay = new Date(year, month + 1, 0); const startDow = (firstDay.getDay() + 6) % 7; // Monday = 0 const days: { date: Date; iso: string; isCurrentMonth: boolean }[] = []; for (let i = startDow - 1; i >= 0; i--) { const d = new Date(year, month, -i); days.push({ date: d, iso: toISODate(d), isCurrentMonth: false }); } for (let d = 1; d <= lastDay.getDate(); d++) { const date = new Date(year, month, d); days.push({ date, iso: toISODate(date), isCurrentMonth: true }); } while (days.length % 7 !== 0) { const d = new Date( year, month + 1, days.length - startDow - lastDay.getDate() + 1, ); days.push({ date: d, iso: toISODate(d), isCurrentMonth: false }); } return days; } function CalendarView({ items }: { items: DataViewItem[] }) { const [month, setMonth] = useState(() => { const first = items[0]?.date; if (first) { const d = new Date(`${first}T00:00:00`); return { year: d.getFullYear(), month: d.getMonth() }; } const now = new Date(); return { year: now.getFullYear(), month: now.getMonth() }; }); const itemsByDate = useMemo(() => { const map: Record = {}; for (const item of items) { if (!map[item.date]) map[item.date] = []; map[item.date].push(item); } return map; }, [items]); const days = useMemo( () => getMonthGrid(month.year, month.month), [month.year, month.month], ); const today = toISODate(new Date()); const prevMonth = useCallback(() => { setMonth((m) => { if (m.month === 0) return { year: m.year - 1, month: 11 }; return { ...m, month: m.month - 1 }; }); }, []); const nextMonth = useCallback(() => { setMonth((m) => { if (m.month === 11) return { year: m.year + 1, month: 0 }; return { ...m, month: m.month + 1 }; }); }, []); const goToToday = useCallback(() => { const now = new Date(); setMonth({ year: now.getFullYear(), month: now.getMonth() }); }, []); return (

{/* Month header */}

{MONTH_NAMES[month.month]} {month.year}

{/* Day names */}

{DAY_NAMES.map((name) => (

{name}

))}

{/* Calendar grid */}

{days.map((day) => { const dayItems = itemsByDate[day.iso] ?? []; const isToday = day.iso === today; return (

{day.date.getDate()}

{dayItems.slice(0, 3).map((item) => { const colors = statusColors[item.status]; return (

{item.title}

{statusLabels[item.status]} ·{" "} {item.assignee.name}

); })} {dayItems.length > 3 && (

+{dayItems.length - 3} more

)}

); })}

); } /* ------------------------------------------------------------------ */ /* Main component */ /* ------------------------------------------------------------------ */ const viewOptions: { id: ViewMode; icon: typeof Columns3; label: string }[] = [ { id: "kanban", icon: Columns3, label: "Kanban" }, { id: "table", icon: List, label: "Table" }, { id: "timeline", icon: Clock, label: "Timeline" }, { id: "calendar", icon: CalendarDays, label: "Calendar" }, ]; export function DataViewBlock() { const [view, setView] = useState("kanban"); const [search, setSearch] = useState(""); const [items, setItems] = useState(initialItems); const [statusFilters, setStatusFilters] = useState>( new Set(), ); const [categoryFilters, setCategoryFilters] = useState>( new Set(), ); const toggleStatus = useCallback((status: ItemStatus) => { setStatusFilters((prev) => { const next = new Set(prev); if (next.has(status)) next.delete(status); else next.add(status); return next; }); }, []); const toggleCategory = useCallback((category: ItemCategory) => { setCategoryFilters((prev) => { const next = new Set(prev); if (next.has(category)) next.delete(category); else next.add(category); return next; }); }, []); const clearFilters = useCallback(() => { setStatusFilters(new Set()); setCategoryFilters(new Set()); }, []); const filteredItems = useMemo(() => { return items.filter((item) => { if (search) { const q = search.toLowerCase(); if ( !item.title.toLowerCase().includes(q) && !item.badges.some((b) => b.label.toLowerCase().includes(q)) ) return false; } if (statusFilters.size > 0 && !statusFilters.has(item.status)) return false; if (categoryFilters.size > 0 && !categoryFilters.has(item.category)) return false; return true; }); }, [items, search, statusFilters, categoryFilters]); return (

{viewOptions.map((opt) => ( {opt.label} ))}

{view === "kanban" && ( )} {view === "table" && } {view === "timeline" && } {view === "calendar" && }

); }

Data View