61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T2fd9,'use client' import * as React from 'react' import { Plus } from 'lucide-react' import { type KanbanColumn as KanbanColumnType, type KanbanTask, findTaskById } from '@/lib/use-kanban' import { PageHeader, PageHeaderHeading } from '@/components/ui/page' import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { KanbanToolbar } from './KanbanToolbar' import { KanbanColumn, type FilteredColumn } from './KanbanColumn' import { KanbanListView } from './KanbanListView' import { KanbanTaskSheet } from './KanbanTaskSheet' import { KanbanAddTaskDialog } from './KanbanAddTaskDialog' export { SimpleKanban, type SimpleKanbanProps, type SimpleKanbanColumn, type SimpleKanbanItem } from './SimpleKanban' export interface KanbanBoardProps { columns: KanbanColumnType[] onColumnsChange?: (value: KanbanColumnType[]) => void title?: string | null description?: string | null defaultColumnId?: string hideHeader?: boolean hideToolbar?: boolean lockParentScroll?: boolean } export function KanbanBoard({ columns, onColumnsChange, title = 'Kanban Board', description = 'Drag tasks across columns to update their status.', defaultColumnId = 'backlog', hideHeader = false, hideToolbar = false, lockParentScroll = true, }: KanbanBoardProps) { const kanbanEl = React.useRef(null) React.useEffect(() => { if (!lockParentScroll) return const parentMain = kanbanEl.current?.closest('main[data-slot="sidebar-inset"]') as HTMLElement | null if (parentMain) parentMain.style.overflow = 'hidden' document.documentElement.style.overflow = 'hidden' return () => { if (parentMain) parentMain.style.overflow = '' document.documentElement.style.overflow = '' } }, [lockParentScroll]) const [searchQuery, setSearchQuery] = React.useState('') const [selectedPriority, setSelectedPriority] = React.useState(null) const [selectedAssignee, setSelectedAssignee] = React.useState(null) const [viewMode, setViewMode] = React.useState<'board' | 'list'>('board') const [collapsedColumns, setCollapsedColumns] = React.useState>(new Set()) const [detailOpen, setDetailOpen] = React.useState(false) const [detailTask, setDetailTask] = React.useState(null) const [addTaskOpen, setAddTaskOpen] = React.useState(false) const [addTaskColumnId, setAddTaskColumnId] = React.useState(defaultColumnId) const draggedTaskRef = React.useRef(null) const dragOverColumnRef = React.useRef(null) const dropTargetIndexRef = React.useRef(-1) const lastDragEndRef = React.useRef(0) const [draggedTask, setDraggedTask] = React.useState(null) const [dragOverColumn, setDragOverColumn] = React.useState(null) const [dropTargetIndex, setDropTargetIndex] = React.useState(-1) // Mutating helper: the consumer owns `columns`, so we clone, mutate the // clone, and emit it back via onColumnsChange — mirroring the Vue v-model. function commitColumns(mutator: (cols: KanbanColumnType[]) => void) { const next = columns.map((c) => ({ ...c, tasks: [...c.tasks] })) mutator(next) onColumnsChange?.(next) } const filteredColumns = React.useMemo(() => { return columns.map((col) => ({ ...col, tasks: col.tasks.filter((task) => { const q = searchQuery.toLowerCase() const matchesSearch = !q || task.title.toLowerCase().includes(q) || task.id.toLowerCase().includes(q) const matchesPriority = !selectedPriority || task.priority === selectedPriority const matchesAssignee = !selectedAssignee || task.assignee.name === selectedAssignee return matchesSearch && matchesPriority && matchesAssignee }), })) }, [columns, searchQuery, selectedPriority, selectedAssignee]) const totalTasks = React.useMemo(() => columns.reduce((sum, col) => sum + col.tasks.length, 0), [columns]) function toggleCollapse(columnId: string) { setCollapsedColumns((prev) => { const next = new Set(prev) if (next.has(columnId)) next.delete(columnId) else next.add(columnId) return next }) } function addComment(task: KanbanTask, text: string) { commitColumns((cols) => { const target = findTaskById(cols, task.id) if (target) { target.commentItems = [ ...target.commentItems, { id: `c${Date.now()}`, author: 'Admin User', authorColor: 'bg-chart-1/15 text-chart-1', text, time: 'Just now', }, ] } }) } function moveTask(task: KanbanTask, targetColumnId: string) { commitColumns((cols) => { const sourceCol = cols.find((c) => c.tasks.some((t) => t.id === task.id)) const targetCol = cols.find((c) => c.id === targetColumnId) if (!sourceCol || !targetCol || sourceCol.id === targetColumnId) return const taskIndex = sourceCol.tasks.findIndex((t) => t.id === task.id) if (taskIndex === -1) return const removed = sourceCol.tasks.splice(taskIndex, 1) if (removed[0]) targetCol.tasks.push(removed[0]) }) } function openTaskDetail(task: KanbanTask) { setDetailTask(task) setDetailOpen(true) } function onDragStart(event: React.DragEvent, taskId: string) { draggedTaskRef.current = taskId setDraggedTask(taskId) if (event.dataTransfer) { event.dataTransfer.effectAllowed = 'move' event.dataTransfer.setData('text/plain', taskId) } } function resetDrag() { draggedTaskRef.current = null dragOverColumnRef.current = null dropTargetIndexRef.current = -1 setDraggedTask(null) setDragOverColumn(null) setDropTargetIndex(-1) lastDragEndRef.current = Date.now() } function onDrop() { const dragged = draggedTaskRef.current const overColumn = dragOverColumnRef.current if (!dragged || !overColumn) { resetDrag() return } commitColumns((cols) => { let sourceColIdx = -1 let taskIdx = -1 for (let c = 0; c < cols.length; c++) { const col = cols[c] if (!col) continue const tIdx = col.tasks.findIndex((t) => t.id === dragged) if (tIdx !== -1) { sourceColIdx = c taskIdx = tIdx break } } const targetColIdx = cols.findIndex((c) => c.id === overColumn) if (sourceColIdx === -1 || targetColIdx === -1) return const sourceCol = cols[sourceColIdx] const targetCol = cols[targetColIdx] if (!sourceCol || !targetCol) return const [task] = sourceCol.tasks.splice(taskIdx, 1) if (!task) return let insertAt = dropTargetIndexRef.current if (insertAt < 0) insertAt = targetCol.tasks.length if (sourceColIdx === targetColIdx && taskIdx < insertAt) insertAt-- targetCol.tasks.splice(insertAt, 0, task) }) resetDrag() } function onCardClick(task: KanbanTask) { if (Date.now() - lastDragEndRef.current < 200) return openTaskDetail(task) } function onCardDragOver(event: React.DragEvent, columnId: string, taskIndex: number) { dragOverColumnRef.current = columnId setDragOverColumn(columnId) const rect = (event.currentTarget as HTMLElement).getBoundingClientRect() const midY = rect.top + rect.height / 2 const idx = event.clientY < midY ? taskIndex : taskIndex + 1 dropTargetIndexRef.current = idx setDropTargetIndex(idx) } function onLaneDragOver(_event: React.DragEvent, columnId: string, taskCount: number) { dragOverColumnRef.current = columnId setDragOverColumn(columnId) dropTargetIndexRef.current = taskCount setDropTargetIndex(taskCount) } function openAddTask(columnId: string) { setAddTaskColumnId(columnId) setAddTaskOpen(true) } function onCreateTask(columnId: string, tasks: KanbanTask[]) { commitColumns((cols) => { const col = cols.find((c) => c.id === columnId) if (col) col.tasks.push(...tasks) }) } return (

{!hideHeader && (

{totalTasks} tasks

)} {!hideToolbar && ( )} {viewMode === 'board' ? (

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

) : ( )}

) } 64:T3809,'use client' import * as React from 'react' import { Plus, Calendar, GripVertical, Check } from 'lucide-react' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Avatar, AvatarFallback } from '@/components/ui/avatar' export interface SimpleKanbanItem { id: string title: string description?: string date?: string priority?: 'low' | 'medium' | 'high' | 'urgent' tag?: string tagColor?: string assignee?: { name: string initials?: string avatar?: string } } export interface SimpleKanbanColumn { id: string title: string color?: string dotColor?: string items: SimpleKanbanItem[] } export interface SimpleKanbanProps { columns: SimpleKanbanColumn[] onColumnsChange?: (columns: SimpleKanbanColumn[]) => void onCardClick?: (item: SimpleKanbanItem, columnId: string) => void onCardMove?: (item: SimpleKanbanItem, fromColumnId: string, toColumnId: string, newIndex: number) => void allowAdd?: boolean onAddItem?: (columnId: string, title: string) => void className?: string cardClassName?: string } const DEFAULT_DOT_COLORS: Record = { backlog: 'bg-muted-foreground/60', todo: 'bg-info', 'in-progress': 'bg-warning', review: 'bg-chart-1', done: 'bg-success', } const PRIORITY_STYLES: Record = { low: { label: 'Low', class: 'bg-muted text-muted-foreground' }, medium: { label: 'Medium', class: 'bg-info/10 text-info' }, high: { label: 'High', class: 'bg-warning/10 text-warning' }, urgent: { label: 'Urgent', class: 'bg-destructive/10 text-destructive font-medium' }, } export function SimpleKanban({ columns, onColumnsChange, onCardClick, onCardMove, allowAdd = true, onAddItem, className, cardClassName, }: SimpleKanbanProps) { const [draggedId, setDraggedId] = React.useState(null) const [dragOverColumnId, setDragOverColumnId] = React.useState(null) const [dropTargetIndex, setDropTargetIndex] = React.useState(-1) const [addingColumnId, setAddingColumnId] = React.useState(null) const [newTitle, setNewTitle] = React.useState('') const lastDragTimeRef = React.useRef(0) // Commit mutation helper const commit = React.useCallback( (mutator: (cols: SimpleKanbanColumn[]) => void) => { const next = columns.map((col) => ({ ...col, items: [...col.items], })) mutator(next) onColumnsChange?.(next) }, [columns, onColumnsChange], ) function handleDragStart(e: React.DragEvent, id: string) { setDraggedId(id) if (e.dataTransfer) { e.dataTransfer.effectAllowed = 'move' e.dataTransfer.setData('text/plain', id) } } function handleDragEnd() { setDraggedId(null) setDragOverColumnId(null) setDropTargetIndex(-1) lastDragTimeRef.current = Date.now() } function handleDragOverColumn(e: React.DragEvent, columnId: string, itemsCount: number) { e.preventDefault() e.dataTransfer.dropEffect = 'move' setDragOverColumnId(columnId) setDropTargetIndex(itemsCount) } function handleCardDragOver(e: React.DragEvent, columnId: string, index: number) { e.preventDefault() e.stopPropagation() e.dataTransfer.dropEffect = 'move' setDragOverColumnId(columnId) const rect = (e.currentTarget as HTMLElement).getBoundingClientRect() const midY = rect.top + rect.height / 2 const targetIdx = e.clientY < midY ? index : index + 1 setDropTargetIndex(targetIdx) } function handleDrop(e: React.DragEvent, targetColumnId: string) { e.preventDefault() if (!draggedId || !targetColumnId) { handleDragEnd() return } let sourceColIdx = -1 let itemIdx = -1 for (let c = 0; c < columns.length; c++) { const col = columns[c] if (!col) continue const idx = col.items.findIndex((item) => item.id === draggedId) if (idx !== -1) { sourceColIdx = c itemIdx = idx break } } const targetColIdx = columns.findIndex((c) => c.id === targetColumnId) if (sourceColIdx === -1 || targetColIdx === -1) { handleDragEnd() return } const sourceCol = columns[sourceColIdx] const targetCol = columns[targetColIdx] if (!sourceCol || !targetCol) { handleDragEnd() return } const item = sourceCol.items[itemIdx] if (!item) { handleDragEnd() return } commit((cols) => { const src = cols[sourceColIdx] const tgt = cols[targetColIdx] if (!src || !tgt) return const [removed] = src.items.splice(itemIdx, 1) if (!removed) return let at = dropTargetIndex if (at < 0) at = tgt.items.length if (sourceColIdx === targetColIdx && itemIdx < at) at-- tgt.items.splice(at, 0, removed) onCardMove?.(removed, sourceCol.id, targetColumnId, at) }) handleDragEnd() } function handleInlineAdd(columnId: string) { if (!newTitle.trim()) { setAddingColumnId(null) return } if (onAddItem) { onAddItem(columnId, newTitle.trim()) } else { const newItem: SimpleKanbanItem = { id: `item-${Date.now()}`, title: newTitle.trim(), } commit((cols) => { const col = cols.find((c) => c.id === columnId) if (col) col.items.push(newItem) }) } setNewTitle('') setAddingColumnId(null) } return (

{columns.map((column) => { const isColumnOver = dragOverColumnId === column.id const dot = column.dotColor || column.color || DEFAULT_DOT_COLORS[column.id] || 'bg-primary' return (

handleDragOverColumn(e, column.id, column.items.length)} onDrop={(e) => handleDrop(e, column.id)} > {/* Column Header */}

{column.title}

{column.items.length}

{allowAdd && ( )}

{/* Column Cards Container */}

{/* Inline quick add input */} {addingColumnId === column.id && (

setNewTitle(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') handleInlineAdd(column.id) if (e.key === 'Escape') setAddingColumnId(null) }} className="placeholder:text-muted-foreground/60 w-full bg-transparent text-sm font-medium outline-none" />

)} {/* Cards list */} {column.items.map((item, index) => { const isDragging = draggedId === item.id const isDropTarget = isColumnOver && dropTargetIndex === index return ( {isDropTarget && !isDragging &&

}

handleDragStart(e, item.id)} onDragEnd={handleDragEnd} onDragOver={(e) => handleCardDragOver(e, column.id, index)} onClick={() => { if (Date.now() - lastDragTimeRef.current < 150) return onCardClick?.(item, column.id) }} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault() onCardClick?.(item, column.id) } }} className={cn( 'group bg-card text-card-foreground border-border/80 hover:border-border relative flex cursor-grab flex-col gap-2 rounded-lg border p-3 shadow-xs transition-colors hover:shadow-sm active:cursor-grabbing', isDragging && 'ring-primary/40 opacity-40 shadow-md ring-2', cardClassName, )} > {/* Top row: Title + Grip handle */}

{item.title}

{/* Optional description */} {item.description && (

{item.description}

)} {/* Metadata row: Date, Tag, Priority, Assignee */} {(item.date || item.tag || item.priority || item.assignee) && (

{item.date && (

{item.date}

)} {item.tag && ( {item.tag} )} {item.priority && PRIORITY_STYLES[item.priority] && ( {PRIORITY_STYLES[item.priority].label} )}

{item.assignee && ( {item.assignee.initials || item.assignee.name.slice(0, 2).toUpperCase()} )}

)}

) })} {/* Trailing drop indicator */} {isColumnOver && dropTargetIndex >= column.items.length && draggedId && (

)} {/* Empty column placeholder */} {column.items.length === 0 && addingColumnId !== column.id && (

Drop items here

)}

) })}

) } 65:T1774,'use client' import * as React from 'react' import { MoreHorizontal, MessageSquare, Paperclip, ExternalLink } from 'lucide-react' import { cn } from '@/lib/utils' import { type KanbanColumn as KanbanColumnType, type KanbanTask, priorityConfig, getTaskColumn } from '@/lib/use-kanban' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' import { TagBadge } from './TagBadge' import { SubtaskProgress } from './SubtaskProgress' import { DueDateBadge } from './DueDateBadge' import { UserAvatar } from './UserAvatar' export function KanbanCard({ task, isDone, columns, onClick, onQuickView, }: { task: KanbanTask isDone: boolean columns: KanbanColumnType[] onClick?: (task: KanbanTask) => void onQuickView?: (task: KanbanTask) => void }) { const subtasksDone = React.useMemo(() => { if (!columns || !task.subtaskIds.length) return 0 return task.subtaskIds.filter((id) => getTaskColumn(columns, id)?.id === 'done').length }, [columns, task.subtaskIds]) // Screen-reader name: title first, then status + priority for context. const status = columns ? getTaskColumn(columns, task.id)?.title : undefined const ariaLabel = [task.title, status, `${priorityConfig[task.priority].label} priority`].filter(Boolean).join(', ') return (

onClick?.(task)} onKeyDown={(e) => { if (e.target !== e.currentTarget) return if (e.key !== 'Enter' && e.key !== ' ') return e.preventDefault() onClick?.(task) }} >

{task.id} { e.stopPropagation() onQuickView?.(task) }} > Quick view Open detail Edit Move to... Assign to... Delete

{task.title}

{task.tags.length > 0 && (

{task.tags.map((tag) => ( ))}

)} {task.subtaskIds.length > 0 && (

)}

{task.dueDate && } {task.commentItems.length > 0 && (

{task.commentItems.length}

)} {task.fileItems.length > 0 && (

{task.fileItems.length}

)}

{task.assignee.name}

) } 66:T1cf6,'use client' import * as React from 'react' import { Plus, MoreHorizontal, ChevronsLeft, ChevronsRight } from 'lucide-react' import { cn } from '@/lib/utils' import { type KanbanColumn as KanbanColumnType, type KanbanTask } from '@/lib/use-kanban' import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { KanbanCard } from './KanbanCard' export interface FilteredColumn { id: string title: string color: string dotColor: string tasks: KanbanTask[] } export function KanbanColumn({ column, collapsed, draggedTask, dragOverColumn, dropTargetIndex, allColumns, onToggleCollapse, onAddTask, onCardClick, onCardQuickView, onDragStart, onDragEnd, onCardDragOver, onLaneDragOver, onDrop, }: { column: FilteredColumn collapsed: boolean draggedTask: string | null dragOverColumn: string | null dropTargetIndex: number allColumns: KanbanColumnType[] onToggleCollapse: (columnId: string) => void onAddTask: (columnId: string) => void onCardClick: (task: KanbanTask) => void onCardQuickView: (task: KanbanTask) => void onDragStart: (event: React.DragEvent, taskId: string) => void onDragEnd: () => void onCardDragOver: (event: React.DragEvent, columnId: string, taskIndex: number) => void onLaneDragOver: (event: React.DragEvent, columnId: string, taskCount: number) => void onDrop: () => void }) { return (

e.preventDefault()} onDrop={() => onDrop()} > {collapsed ? ( ) : ( <>

{column.title}

{column.tasks.length}

{ e.preventDefault() onLaneDragOver(e, column.id, column.tasks.length) }} > {column.tasks.map((task, taskIndex) => (

onDragStart(e, task.id)} onDragEnd={() => onDragEnd()} onDragOver={(e) => { e.stopPropagation() e.preventDefault() onCardDragOver(e, column.id, taskIndex) }} >

))} {column.tasks.length > 0 && (

)} {column.tasks.length === 0 && ( )}

)}

) } 67:T2d3e,'use client' import * as React from 'react' import { ChevronDown, ChevronRight, ExternalLink, MessageSquare, Paperclip, ArrowUpDown } from 'lucide-react' import { cn } from '@/lib/utils' import { type KanbanColumn as KanbanColumnType, type KanbanTask, getTaskColumn } from '@/lib/use-kanban' import { Badge } from '@/components/ui/badge' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' import { type FilteredColumn } from './KanbanColumn' import { TagBadge } from './TagBadge' import { SubtaskProgress } from './SubtaskProgress' import { PriorityBadge } from './PriorityBadge' import { DueDateBadge } from './DueDateBadge' import { UserAvatar } from './UserAvatar' type SortField = 'id' | 'title' | 'priority' | 'assignee' | 'dueDate' | 'status' type SortDir = 'asc' | 'desc' interface FlatTask { task: KanbanTask columnId: string columnTitle: string dotColor: string } const priorityOrder: Record = { urgent: 0, high: 1, medium: 2, low: 3 } export function KanbanListView({ columns, allColumns, onTaskClick, onMoveTask, }: { columns: FilteredColumn[] allColumns: KanbanColumnType[] onTaskClick: (task: KanbanTask) => void onMoveTask: (task: KanbanTask, targetColumnId: string) => void }) { const [sortField, setSortField] = React.useState('status') const [sortDir, setSortDir] = React.useState('asc') const [collapsedGroups, setCollapsedGroups] = React.useState>(new Set()) function toggleSort(field: SortField) { if (sortField === field) { setSortDir((d) => (d === 'asc' ? 'desc' : 'asc')) } else { setSortField(field) setSortDir('asc') } } function toggleGroup(columnId: string) { setCollapsedGroups((prev) => { const next = new Set(prev) if (next.has(columnId)) next.delete(columnId) else next.add(columnId) return next }) } const flatTasks = React.useMemo(() => { const items: FlatTask[] = [] for (const col of columns) { for (const task of col.tasks) { items.push({ task, columnId: col.id, columnTitle: col.title, dotColor: col.dotColor }) } } return [...items].sort((a, b) => { let cmp = 0 switch (sortField) { case 'id': { const numA = parseInt(a.task.id.replace(/^[A-Z]+-/, ''), 10) const numB = parseInt(b.task.id.replace(/^[A-Z]+-/, ''), 10) cmp = numA - numB break } case 'title': cmp = a.task.title.localeCompare(b.task.title) break case 'priority': cmp = (priorityOrder[a.task.priority] ?? 99) - (priorityOrder[b.task.priority] ?? 99) break case 'assignee': cmp = a.task.assignee.name.localeCompare(b.task.assignee.name) break case 'dueDate': cmp = (a.task.dueDate ?? '9999').localeCompare(b.task.dueDate ?? '9999') break case 'status': { const colOrder = allColumns.map((c) => c.id) cmp = colOrder.indexOf(a.columnId) - colOrder.indexOf(b.columnId) break } } return sortDir === 'desc' ? -cmp : cmp }) }, [columns, allColumns, sortField, sortDir]) const groupedTasks = React.useMemo(() => { const groups: { column: KanbanColumnType; tasks: FlatTask[] }[] = [] for (const col of allColumns) { const tasks = flatTasks.filter((t) => t.columnId === col.id) groups.push({ column: col, tasks }) } return groups }, [allColumns, flatTasks]) function subtasksDone(task: KanbanTask): number { if (!task.subtaskIds.length) return 0 return task.subtaskIds.filter((id) => getTaskColumn(allColumns, id)?.id === 'done').length } const headerCols: { field: SortField; label: string }[] = [ { field: 'id', label: 'ID' }, { field: 'title', label: 'Task' }, { field: 'status', label: 'Status' }, { field: 'priority', label: 'Priority' }, { field: 'assignee', label: 'Assignee' }, { field: 'dueDate', label: 'Due' }, ] return (

{headerCols.map((h) => ( ))} Info

{groupedTasks.map((group) => ( {!collapsedGroups.has(group.column.id) && group.tasks.map((item) => (

onTaskClick(item.task)} > {item.task.id}

{item.task.title} e.stopPropagation()} >

{(item.task.tags.length > 0 || item.task.subtaskIds.length > 0) && (

{item.task.tags.map((tag) => ( ))} {item.task.subtaskIds.length > 0 && ( )}

)}

{item.task.assignee.name}

{item.task.dueDate ? ( ) : ( — )}

{item.task.commentItems.length > 0 && ( {item.task.commentItems.length} {item.task.commentItems.length} comments )} {item.task.fileItems.length > 0 && ( {item.task.fileItems.length} {item.task.fileItems.length} files )}

))} ))} {flatTasks.length === 0 && (

No tasks match your filters.

)}

) } 68:T25a3,'use client' import { Clock, ExternalLink, Download } from 'lucide-react' import { cn } from '@/lib/utils' import { type KanbanColumn as KanbanColumnType, type KanbanTask, priorityConfig, fileIconMap } from '@/lib/use-kanban' import { Button } from '@/components/ui/button' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Sheet, SheetContent, SheetTitle, SheetDescription, SheetFooter, SheetClose } from '@/components/ui/sheet' import { TagBadge } from './TagBadge' import { PriorityBadge } from './PriorityBadge' import { DueDateBadge } from './DueDateBadge' import { UserAvatar } from './UserAvatar' import { SubtaskList } from './SubtaskList' import { CommentList } from './CommentList' export function KanbanTaskSheet({ open, task, columns, onOpenChange, onMoveTask, onAddComment, }: { open: boolean task: KanbanTask | null columns: KanbanColumnType[] onOpenChange: (value: boolean) => void onMoveTask: (task: KanbanTask, columnId: string) => void onAddComment: (task: KanbanTask, text: string) => void }) { const columnIdForTask = task ? (columns.find((c) => c.tasks.some((t) => t.id === task.id))?.id ?? '') : '' return ( { // A status change re-renders the card in its new column, so the element that // opened the sheet is gone by close time; send focus to the card's new node. if (!task) return const card = document.querySelector(`[data-task-id="${task.id}"] > [role="button"]`) if (!card) return event.preventDefault() card.focus() }} > {task && ( <>

{task.id} ·

{task.title} Task details {task.description ? (

) : (

No description provided.

)}

{task.tags.length ? ( task.tags.map((tag) => ) ) : ( No tags )}

{task.assignee.name}

Assignee

{task.dueDate ? ( ) : (

No due date

)}

{task.parentId && (

Parent: onOpenChange(false)} > {task.parentId}

)}

Subtasks {task.subtaskIds.length > 0 && ( ({task.subtaskIds.length}) )}

Comments {task.commentItems.length > 0 && ( ({task.commentItems.length}) )}

onAddComment(task, text)} />

Files {task.fileItems.length > 0 && ( ({task.fileItems.length}) )}

{task.fileItems.length ? (

{task.fileItems.map((file) => { const FileIcon = fileIconMap[file.type] return (

{file.name}

{file.size}

) })}

) : (

No files attached.

)}

onOpenChange(false)}>

)} ) } 69:T2b50,'use client' import * as React from 'react' import { Plus, X, CheckCircle2, Calendar as CalendarIcon } from 'lucide-react' import { cn } from '@/lib/utils' import { type KanbanColumn as KanbanColumnType, type KanbanTask, priorityConfig, assignees, tagPresets, } from '@/lib/use-kanban' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Dialog, DialogScrollContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from '@/components/ui/dialog' import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover' import { Calendar } from '@/components/ui/calendar' import { RichTextEditor } from '@/components/ui/rich-text-editor' interface AddTaskForm { title: string description: string priority: KanbanTask['priority'] assigneeKey: keyof typeof assignees tagKeys: (keyof typeof tagPresets)[] subtaskTexts: string[] } const emptyForm = (): AddTaskForm => ({ title: '', description: '', priority: 'medium', assigneeKey: 'alice', tagKeys: [], subtaskTexts: [], }) export function KanbanAddTaskDialog({ open, columns, initialColumnId, onOpenChange, onCreate, }: { open: boolean columns: KanbanColumnType[] initialColumnId: string onOpenChange: (value: boolean) => void onCreate: (columnId: string, tasks: KanbanTask[]) => void }) { const [columnId, setColumnId] = React.useState(initialColumnId) const [dueDate, setDueDate] = React.useState(undefined) const [form, setForm] = React.useState(emptyForm) const [newSubtaskText, setNewSubtaskText] = React.useState('') React.useEffect(() => { setColumnId(initialColumnId) }, [initialColumnId]) React.useEffect(() => { if (open) { setColumnId(initialColumnId) setForm(emptyForm()) setDueDate(undefined) setNewSubtaskText('') } // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]) function addSubtask() { const text = newSubtaskText.trim() if (!text) return setForm((f) => ({ ...f, subtaskTexts: [...f.subtaskTexts, text] })) setNewSubtaskText('') } function removeSubtask(index: number) { setForm((f) => ({ ...f, subtaskTexts: f.subtaskTexts.filter((_, i) => i !== index) })) } function toggleTag(key: keyof typeof tagPresets) { setForm((f) => { const idx = f.tagKeys.indexOf(key) const tagKeys = idx >= 0 ? f.tagKeys.filter((k) => k !== key) : [...f.tagKeys, key] return { ...f, tagKeys } }) } function submit() { if (!form.title.trim()) return const maxId = columns .flatMap((c) => c.tasks) .reduce((max, t) => { const num = parseInt(t.id.replace(/^[A-Z]+-/, ''), 10) return num > max ? num : max }, 0) const idPrefix = columns.flatMap((c) => c.tasks)[0]?.id.split('-')[0] ?? 'TASK' const parentId = `${idPrefix}-${maxId + 1}` const subtaskTasks: KanbanTask[] = form.subtaskTexts.map((text, i) => ({ id: `${idPrefix}-${maxId + 2 + i}`, title: text, priority: 'medium' as const, assignee: assignees[form.assigneeKey], tags: [], parentId, subtaskIds: [], commentItems: [], fileItems: [], })) const newTask: KanbanTask = { id: parentId, title: form.title.trim(), description: form.description.trim() || undefined, priority: form.priority, assignee: assignees[form.assigneeKey], tags: form.tagKeys.map((k) => tagPresets[k]), dueDate: dueDate ? dueDate.toISOString().slice(0, 10) : undefined, subtaskIds: subtaskTasks.map((t) => t.id), commentItems: [], fileItems: [], } onCreate(columnId, [newTask, ...subtaskTasks]) onOpenChange(false) } return ( ) } 6a:T174b,'use client' import { Search, Filter, ChevronDown, X, LayoutGrid, List } from 'lucide-react' import { cn } from '@/lib/utils' import { priorityConfig, assignees, getInitials } from '@/lib/use-kanban' import { Button } from '@/components/ui/button' import { Badge } from '@/components/ui/badge' import { Input } from '@/components/ui/input' import { Avatar, AvatarFallback } from '@/components/ui/avatar' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip' export function KanbanToolbar({ searchQuery, selectedPriority, selectedAssignee, viewMode, onSearchQueryChange, onSelectedPriorityChange, onSelectedAssigneeChange, onViewModeChange, }: { searchQuery: string selectedPriority: string | null selectedAssignee: string | null viewMode: 'board' | 'list' onSearchQueryChange: (value: string) => void onSelectedPriorityChange: (value: string | null) => void onSelectedAssigneeChange: (value: string | null) => void onViewModeChange: (value: 'board' | 'list') => void }) { return (

onSearchQueryChange(e.target.value)} />

{Object.entries(priorityConfig).map(([key, config]) => { const Icon = config.icon return ( onSelectedPriorityChange(selectedPriority === key ? null : key)} > {config.label} {selectedPriority === key && } ) })} {selectedPriority && } {selectedPriority && ( onSelectedPriorityChange(null)}>Clear filter )} {selectedAssignee && ( onSelectedAssigneeChange(null)} > {selectedAssignee} )} v && onViewModeChange(v as 'board' | 'list')} >

{Object.entries(assignees).map(([key, a]) => ( {a.name} {selectedAssignee === a.name && (filtered)} ))}

) } 6b:T4a3,'use client' import { Clock } from 'lucide-react' import { cn } from '@/lib/utils' import { getDueStatus, formatDueDate } from '@/lib/use-kanban' export function DueDateBadge({ dueDate, variant, className, }: { dueDate: string variant?: 'chip' | 'inline' className?: string }) { const status = getDueStatus(dueDate) const formatted = formatDueDate(dueDate) const chipClasses = status === 'overdue' ? 'bg-destructive/10 text-destructive' : status === 'soon' ? 'bg-warning/10 text-warning' : 'text-muted-foreground bg-muted' const inlineClasses = status === 'overdue' ? 'text-destructive' : status === 'soon' ? 'text-warning' : 'text-foreground' if (variant === 'chip') { return (

{formatted}

) } return (

{formatted}

) } 6c:T46d,'use client' import { CheckCircle2 } from 'lucide-react' import { cn } from '@/lib/utils' export function SubtaskProgress({ done, total, className }: { done: number; total: number; className?: string }) { if (total <= 0) return null const percent = total > 0 ? Math.round((done / total) * 100) : 0 const isComplete = done === total && total > 0 return (

{isComplete && } {done}/{total} subtasks {percent}%

) } 6d:Tb51,'use client' import { cn } from '@/lib/utils' import { type KanbanColumn as KanbanColumnType, type KanbanTask, findTaskById, getTaskColumn } from '@/lib/use-kanban' export function SubtaskList({ subtaskIds, columns, compact = false, }: { subtaskIds: string[] columns: KanbanColumnType[] compact?: boolean }) { const subtasks = subtaskIds .map((id) => { const task = findTaskById(columns, id) const column = getTaskColumn(columns, id) return task ? { task, column } : null }) .filter(Boolean) as { task: KanbanTask; column: KanbanColumnType | undefined }[] const doneCount = subtasks.filter((s) => s.column?.id === 'done').length const percent = subtasks.length > 0 ? Math.round((doneCount / subtasks.length) * 100) : 0 if (!subtasks.length) { return (

No subtasks yet.

) } return (

{doneCount}/{subtasks.length} done {percent}%

{subtasks.map(({ task, column }) => ( {task.id} {task.title} {column?.title ?? 'Unknown'} ))}

) } 6e:Tb5b,'use client' import * as React from 'react' import { Send } from 'lucide-react' import { cn } from '@/lib/utils' import { type CommentItem } from '@/lib/use-kanban' import { Button } from '@/components/ui/button' import { RichTextEditor } from '@/components/ui/rich-text-editor' import { UserAvatar } from './UserAvatar' export function CommentList({ comments, compact = false, onAdd, }: { comments: CommentItem[] compact?: boolean onAdd?: (text: string) => void }) { const [newComment, setNewComment] = React.useState('') function submit() { const stripped = newComment.replace(/<[^>]*>/g, '').trim() if (!stripped) return onAdd?.(newComment) setNewComment('') } return ( <> {comments.length ? (

{comments.map((comment) => (

{compact ? comment.author.split(' ')[0] : comment.author} {comment.time}

))}

) : (

No comments yet.

)}

) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/use-kanban.json","https://uipkge.dev/r/react/page.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/input.json","https://uipkge.dev/r/react/label.json","https://uipkge.dev/r/react/select.json","https://uipkge.dev/r/react/sheet.json","https://uipkge.dev/r/react/dialog.json","https://uipkge.dev/r/react/popover.json","https://uipkge.dev/r/react/calendar.json","https://uipkge.dev/r/react/dropdown-menu.json","https://uipkge.dev/r/react/tooltip.json","https://uipkge.dev/r/react/avatar.json","https://uipkge.dev/r/react/toggle-group.json","https://uipkge.dev/r/react/rich-text-editor.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/kanban-task-board/KanbanBoard.tsx","content":"$63","type":"registry:page","target":"~/components/blocks/kanban-task-board/KanbanBoard.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/SimpleKanban.tsx","content":"$64","type":"registry:page","target":"~/components/blocks/kanban-task-board/SimpleKanban.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/KanbanCard.tsx","content":"$65","type":"registry:page","target":"~/components/blocks/kanban-task-board/KanbanCard.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/KanbanColumn.tsx","content":"$66","type":"registry:page","target":"~/components/blocks/kanban-task-board/KanbanColumn.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/KanbanListView.tsx","content":"$67","type":"registry:page","target":"~/components/blocks/kanban-task-board/KanbanListView.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/KanbanTaskSheet.tsx","content":"$68","type":"registry:page","target":"~/components/blocks/kanban-task-board/KanbanTaskSheet.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/KanbanAddTaskDialog.tsx","content":"$69","type":"registry:page","target":"~/components/blocks/kanban-task-board/KanbanAddTaskDialog.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/KanbanToolbar.tsx","content":"$6a","type":"registry:page","target":"~/components/blocks/kanban-task-board/KanbanToolbar.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/PriorityBadge.tsx","content":"'use client'\n\nimport { cn } from '@/lib/utils'\nimport { priorityConfig } from '@/lib/use-kanban'\n\nexport function PriorityBadge({\n priority,\n iconSize = 'size-3.5',\n className,\n}: {\n priority: string\n iconSize?: string\n className?: string\n}) {\n const config = priorityConfig[priority]\n if (!config) return null\n const Icon = config.icon\n return (\n

\n \n {config.label}\n

\n )\n}\n","type":"registry:page","target":"~/components/blocks/kanban-task-board/PriorityBadge.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/DueDateBadge.tsx","content":"$6b","type":"registry:page","target":"~/components/blocks/kanban-task-board/DueDateBadge.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/TagBadge.tsx","content":"'use client'\n\nimport { cn } from '@/lib/utils'\n\nexport function TagBadge({ label, color, className }: { label: string; color: string; className?: string }) {\n return (\n \n {label}\n \n )\n}\n","type":"registry:page","target":"~/components/blocks/kanban-task-board/TagBadge.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/UserAvatar.tsx","content":"'use client'\n\nimport { cn } from '@/lib/utils'\nimport { getInitials } from '@/lib/use-kanban'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\n\nconst userAvatarSizeMap = {\n xs: { avatar: 'size-6', text: 'text-xs' },\n sm: { avatar: 'size-7', text: 'text-xs' },\n md: { avatar: 'size-8', text: 'text-xs' },\n}\n\nexport function UserAvatar({\n name,\n color,\n size = 'sm',\n className,\n}: {\n name: string\n color: string\n size?: 'xs' | 'sm' | 'md'\n className?: string\n}) {\n return (\n \n \n {getInitials(name)}\n \n \n )\n}\n","type":"registry:page","target":"~/components/blocks/kanban-task-board/UserAvatar.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/SubtaskProgress.tsx","content":"$6c","type":"registry:page","target":"~/components/blocks/kanban-task-board/SubtaskProgress.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/SubtaskList.tsx","content":"$6d","type":"registry:page","target":"~/components/blocks/kanban-task-board/SubtaskList.tsx"},{"path":"packages/registry-react/blocks/kanban-task-board/CommentList.tsx","content":"$6e","type":"registry:page","target":"~/components/blocks/kanban-task-board/CommentList.tsx"}],"className":"h-[70svh] min-h-80"}]]}]