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:T45ef,"use client" import * as React from "react" import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, type DragEndEvent, 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, AvatarGroup, AvatarGroupCount, AvatarImage, } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" import { IconPlaceholder } from "@/components/icons/icon-placeholder" /** Props a call site may pass through to an icon. */ type IconProps = { className?: string; size?: number | string } type Priority = "critical" | "high" | "medium" | "low" type LabelTag = "Frontend" | "Backend" | "Design" | "API" | "DevOps" | "QA" type Assignee = { name: string initials: string } type Task = { id: string title: string description: string priority: Priority labels: LabelTag[] dueDate: string assignees: Assignee[] commentCount: number } const priorityConfig: Record< Priority, { label: string icon: React.ElementType variant: "destructive" | "default" | "secondary" | "outline" dot: string } > = { critical: { label: "Critical", icon: (p: IconProps) => ( ), variant: "destructive", dot: "bg-destructive", }, high: { label: "High", icon: (p: IconProps) => ( ), variant: "default", dot: "bg-primary", }, medium: { label: "Medium", icon: (p: IconProps) => ( ), variant: "secondary", dot: "bg-muted-foreground", }, low: { label: "Low", icon: (p: IconProps) => ( ), variant: "outline", dot: "bg-border", }, } const labelVariant: Record = { Frontend: "outline", Backend: "secondary", Design: "outline", API: "secondary", DevOps: "secondary", QA: "outline", } const assigneeAvatars: Record = { "Sam Rivera": "https://i.pravatar.cc/150?img=15", "Jordan Kim": "https://i.pravatar.cc/150?img=8", "Morgan Lee": "https://i.pravatar.cc/150?img=26", "Taylor Obi": "https://i.pravatar.cc/150?img=59", "Jamie Park": "https://i.pravatar.cc/150?img=12", "Alex Chen": "https://i.pravatar.cc/150?img=33", } const initialTasks: Task[] = [ { id: "ACM-412", title: "Resolve CORS error on the upload endpoint", description: "POST /api/v2/files returns 403 for cross-origin requests; preflight OPTIONS never reaches the handler.", priority: "critical", labels: ["Backend", "API"], dueDate: "Jun 18", assignees: [ { name: "Sam Rivera", initials: "SR" }, { name: "Jordan Kim", initials: "JK" }, ], commentCount: 7, }, { id: "ACM-398", title: "Redesign the account settings page", description: "Consolidate billing, profile, and notification preferences into a single tabbed layout using the new design tokens.", priority: "high", labels: ["Frontend", "Design"], dueDate: "Jun 23", assignees: [ { name: "Morgan Lee", initials: "ML" }, { name: "Taylor Obi", initials: "TO" }, { name: "Jamie Park", initials: "JP" }, ], commentCount: 4, }, { id: "ACM-385", title: "Add rate limiting to the public REST API", description: "Implement a sliding-window limiter (100 req/min per key) with proper Retry-After headers on 429 responses.", priority: "high", labels: ["Backend", "API", "DevOps"], dueDate: "Jun 26", assignees: [{ name: "Alex Chen", initials: "AC" }], commentCount: 2, }, { id: "ACM-371", title: "Write end-to-end tests for the checkout flow", description: "Cover happy path, declined card, and coupon-code scenarios using Playwright against the staging environment.", priority: "medium", labels: ["QA", "Frontend"], dueDate: "Jul 2", assignees: [ { name: "Sam Rivera", initials: "SR" }, { name: "Morgan Lee", initials: "ML" }, ], commentCount: 0, }, { id: "ACM-360", title: "Document the webhook payload schema", description: "Add OpenAPI 3.1 schemas for all event types and publish the spec to the developer portal.", priority: "low", labels: ["Backend", "API"], dueDate: "Jul 8", assignees: [{ name: "Jamie Park", initials: "JP" }], commentCount: 1, }, ] function TaskCardBody({ task, dragHandle, dragging, }: { task: Task dragHandle?: React.ReactNode dragging?: boolean }) { const pCfg = priorityConfig[task.priority] const PriorityIcon = pCfg.icon const visibleAssignees = task.assignees.slice(0, 3) const overflow = task.assignees.length - visibleAssignees.length return (

{task.id} {dragHandle ?? ( )}

{task.title} {task.description}

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

{task.dueDate}

{task.commentCount > 0 && (

{task.commentCount}

)}

{visibleAssignees.map((a) => ( {a.initials} ))} {overflow > 0 && +{overflow}}

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

) } export default function KanbanBlock() { const [tasks, setTasks] = React.useState(initialTasks) const [activeId, setActiveId] = React.useState(null) const [detailTask, setDetailTask] = React.useState(null) const [detailOpen, setDetailOpen] = React.useState(false) const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }) ) const activeTask = activeId ? (tasks.find((t) => t.id === activeId) ?? null) : null function handleDragStart(event: DragStartEvent) { setActiveId(String(event.active.id)) } function handleDragEnd(event: DragEndEvent) { const { active, over } = event setActiveId(null) if (!over || active.id === over.id) return setTasks((prev) => { const oldIndex = prev.findIndex((t) => t.id === active.id) const newIndex = prev.findIndex((t) => t.id === over.id) if (oldIndex < 0 || newIndex < 0) return prev return arrayMove(prev, oldIndex, newIndex) }) } function openDetail(task: Task) { setDetailTask(task) setDetailOpen(true) } return (

In Progress {tasks.length}

setActiveId(null)} > t.id)} strategy={verticalListSortingStrategy} >

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

{activeTask ? (

) : null}

) } 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","separator"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/kanban/2/kanban-block.tsx","content":"$50","type":"registry:component","target":"components/blocks/kanban-2.tsx"}],"className":"h-[70svh] min-h-80"}]]}]