4e: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50:T455b,"use client" import * as React from "react" import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCorners, useDroppable, useSensor, useSensors, type DragEndEvent, type DragOverEvent, type DragStartEvent, } from "@dnd-kit/core" import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { ScrollArea } from "@/components/ui/scroll-area" type TaskLabel = "Bug" | "Feature" | "Docs" | "Design" | "Infra" | "Research" const labelVariant: Record< TaskLabel, "default" | "secondary" | "outline" | "destructive" > = { Bug: "destructive", Feature: "default", Docs: "secondary", Design: "secondary", Infra: "outline", Research: "outline", } type Task = { id: string title: string label: TaskLabel assignee: string initials: string avatarSrc: string priority: "high" | "medium" | "low" } type Column = { id: string title: string accent: string tasks: Task[] } const initialColumns: Column[] = [ { id: "todo", title: "To Do", accent: "bg-muted-foreground/20", tasks: [ { id: "t1", title: "Audit accessibility across all form components", label: "Docs", assignee: "Morgan Lee", initials: "ML", avatarSrc: "https://i.pravatar.cc/32?img=47", priority: "medium", }, { id: "t2", title: "Investigate memory leak in background worker", label: "Bug", assignee: "Sam Rivera", initials: "SR", avatarSrc: "https://i.pravatar.cc/32?img=12", priority: "high", }, { id: "t3", title: "Add dark-mode support to email templates", label: "Design", assignee: "Jamie Park", initials: "JP", avatarSrc: "https://i.pravatar.cc/32?img=33", priority: "low", }, { id: "t4", title: "Define quarterly OKRs with product team", label: "Research", assignee: "Alex Chen", initials: "AC", avatarSrc: "https://i.pravatar.cc/32?img=68", priority: "medium", }, ], }, { id: "in-progress", title: "In Progress", accent: "bg-primary", tasks: [ { id: "t5", title: "Migrate CI/CD pipeline to GitHub Actions", label: "Infra", assignee: "Jordan Kim", initials: "JK", avatarSrc: "https://i.pravatar.cc/32?img=51", priority: "high", }, { id: "t6", title: "Build multi-step onboarding wizard", label: "Feature", assignee: "Taylor Obi", initials: "TO", avatarSrc: "https://i.pravatar.cc/32?img=22", priority: "high", }, { id: "t7", title: "Fix pagination on the invoices list view", label: "Bug", assignee: "Sam Rivera", initials: "SR", avatarSrc: "https://i.pravatar.cc/32?img=12", priority: "medium", }, ], }, { id: "done", title: "Done", accent: "bg-muted-foreground/30", tasks: [ { id: "t8", title: "Set up error monitoring with Sentry", label: "Infra", assignee: "Alex Chen", initials: "AC", avatarSrc: "https://i.pravatar.cc/32?img=68", priority: "medium", }, { id: "t9", title: "Write API reference for webhooks endpoint", label: "Docs", assignee: "Jamie Park", initials: "JP", avatarSrc: "https://i.pravatar.cc/32?img=33", priority: "low", }, { id: "t10", title: "Redesign settings page layout", label: "Design", assignee: "Morgan Lee", initials: "ML", avatarSrc: "https://i.pravatar.cc/32?img=47", priority: "low", }, ], }, ] const priorityDot: Record = { high: "bg-destructive", medium: "bg-primary", low: "bg-muted-foreground/40", } const priorityLabel: Record = { high: "High priority", medium: "Medium priority", low: "Low priority", } function TaskCardBody({ task, dimmed, dragging, }: { task: Task dimmed?: boolean dragging?: boolean }) { return (

{task.title}

{task.label}

{task.assignee} {task.initials}

) } function SortableTaskCard({ task, dimmed, onOpen, }: { task: Task dimmed?: boolean onOpen: (task: Task) => void }) { const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: task.id }) const style: React.CSSProperties = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0 : 1, } const movedRef = React.useRef(false) return (

{ movedRef.current = false }} onPointerMoveCapture={() => { movedRef.current = true }} onClick={() => { if (!movedRef.current) onOpen(task) }} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault() onOpen(task) } }} >

) } function BoardColumn({ column, onOpen, reflowKey, }: { column: Column onOpen: (task: Task) => void reflowKey: number }) { const { setNodeRef, isOver } = useDroppable({ id: column.id }) return (

{column.title} {column.tasks.length}

t.id)} strategy={verticalListSortingStrategy} >

{column.tasks.map((task) => ( ))} {column.tasks.length === 0 && (

Drop here

)}

) } export default function KanbanBlock() { const [columns, setColumns] = React.useState(initialColumns) const [activeTask, setActiveTask] = React.useState(null) const [detailTask, setDetailTask] = React.useState(null) const [detailOpen, setDetailOpen] = React.useState(false) const [reflow, setReflow] = React.useState(0) const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }) ) const findColumnId = React.useCallback( (id: string): string | undefined => { if (columns.some((c) => c.id === id)) return id return columns.find((c) => c.tasks.some((t) => t.id === id))?.id }, [columns] ) const totalTasks = columns.reduce((n, c) => n + c.tasks.length, 0) const doneCount = columns.find((c) => c.id === "done")?.tasks.length ?? 0 function handleDragStart(event: DragStartEvent) { const id = String(event.active.id) const task = columns.flatMap((c) => c.tasks).find((t) => t.id === id) setActiveTask(task ?? null) } function handleDragOver(event: DragOverEvent) { const { active, over } = event if (!over) return const activeId = String(active.id) const overId = String(over.id) const activeCol = findColumnId(activeId) const overCol = findColumnId(overId) if (!activeCol || !overCol || activeCol === overCol) return setColumns((prev) => { const from = prev.find((c) => c.id === activeCol)! const to = prev.find((c) => c.id === overCol)! const moving = from.tasks.find((t) => t.id === activeId) if (!moving) return prev const overIndex = to.tasks.findIndex((t) => t.id === overId) const insertAt = overIndex >= 0 ? overIndex : to.tasks.length return prev.map((c) => { if (c.id === activeCol) { return { ...c, tasks: c.tasks.filter((t) => t.id !== activeId) } } if (c.id === overCol) { const next = [...c.tasks] next.splice(insertAt, 0, moving) return { ...c, tasks: next } } return c }) }) } function handleDragEnd(event: DragEndEvent) { const { active, over } = event setActiveTask(null) setReflow((n) => n + 1) if (!over) return const activeId = String(active.id) const overId = String(over.id) const activeCol = findColumnId(activeId) const overCol = findColumnId(overId) if (!activeCol || !overCol) return if (activeCol === overCol) { setColumns((prev) => prev.map((c) => { if (c.id !== activeCol) return c const oldIndex = c.tasks.findIndex((t) => t.id === activeId) const newIndex = c.tasks.findIndex((t) => t.id === overId) if (oldIndex < 0 || newIndex < 0 || oldIndex === newIndex) return c return { ...c, tasks: arrayMove(c.tasks, oldIndex, newIndex) } }) ) } } function openDetail(task: Task) { setDetailTask(task) setDetailOpen(true) } return (

Acme Engineering

Sprint Board

Q3 Sprint 7

{ setActiveTask(null) setReflow((n) => n + 1) }} >

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

{activeTask ? (

) : null}

{[ { src: "https://i.pravatar.cc/32?img=47", name: "Morgan Lee", initials: "ML", }, { src: "https://i.pravatar.cc/32?img=12", name: "Sam Rivera", initials: "SR", }, { src: "https://i.pravatar.cc/32?img=33", name: "Jamie Park", initials: "JP", }, { src: "https://i.pravatar.cc/32?img=68", name: "Alex Chen", initials: "AC", }, { src: "https://i.pravatar.cc/32?img=51", name: "Jordan Kim", initials: "JK", }, ].map((member) => ( {member.initials} ))}

5{" "} Contributors {totalTasks}{" "} Tasks {doneCount}{" "} Completed

) } 4d:["$","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","@dnd-kit/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","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":"@dnd-kit/core"}]]}]}],["$","li","@dnd-kit/sortable",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fsortable","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":"@dnd-kit/sortable"}]]}]}],["$","li","@dnd-kit/utilities",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Futilities","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":"@dnd-kit/utilities"}]]}]}],["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@7ovr","registryDependencies":["avatar","badge","card","dialog","scroll-area"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/kanban/1/kanban-block.tsx","content":"$50","type":"registry:component","target":"components/blocks/kanban-1.tsx"}],"className":"h-[70svh] min-h-80"}]]}]