Kanban shenanigans

src/components/kanban/KanbanBoard.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { mockCards } from "@/data/mockCards"
+import type { KanbanCardData } from "@/types/kanban"
+import { DndContext, DragEndEvent, closestCenter } from "@dnd-kit/core"
+import { useState } from "react"
+import { KanbanColumn } from "./KanbanColumn"
+
+export type Status = "PENDING" | "ACCEPTED" | "IN_PROGRESS" | "DONE" | "REJECTED"
+
+const columns: Status[] = ["PENDING", "ACCEPTED", "IN_PROGRESS", "DONE", "REJECTED"]
+
+export function KanbanBoard() {
+  const [cards, setCards] = useState<Record<Status, KanbanCardData[]>>(mockCards)
+
+  function findColumnByCardId(cardId: string): Status | null {
+    for (const status of columns) {
+      if (cards[status].some((c) => c.id === cardId)) return status
+    }
+    return null
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!active || !over || active.id === over.id) return
+
+    const from = findColumnByCardId(active.id as string)
+    const to = over.id as Status
+    if (!from || !to || from === to) return
+
+    const card = cards[from].find((c) => c.id === active.id)
+    if (!card) return
+
+    setCards((prev) => {
+      return {
+        ...prev,
+        [from]: prev[from].filter((c) => c.id !== card.id),
+        [to]: [card, ...prev[to]],
+      }
+    })
+  }
+
+  return (
+    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-4">
+        {columns.map((status) => (
+          <KanbanColumn key={status} status={status} items={cards[status]} />
+        ))}
+      </div>
+    </DndContext>
+  )
+}

src/components/kanban/KanbanCardModal.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+import type { KanbanCardData } from "@/types/kanban"
+
+export interface KanbanCardModalProps {
+  card: KanbanCardData | null
+  onClose: () => void
+}
+
+export function KanbanCardModal({ card, onClose }: KanbanCardModalProps) {
+  return (
+    <Dialog open={!!card} onOpenChange={onClose}>
+      <DialogContent>
+        {card && (
+          <div className="space-y-4">
+            <h3 className="text-xl font-semibold">{card.title}</h3>
+
+            <div className="flex gap-2 flex-wrap">
+              {card.labels?.map((label) => (
+                <span
+                  key={label.id}
+                  className="text-xs px-2 py-1 rounded-full"
+                  style={{ backgroundColor: label.color }}
+                >
+                  {label.name}
+                </span>
+              ))}
+            </div>
+
+            {card.description && (
+              <p className="text-sm text-muted-foreground">{card.description}</p>
+            )}
+
+            {card.todos?.length > 0 && (
+              <div className="space-y-1">
+                {card.todos.map((todo) => (
+                  <div key={todo.id} className="flex items-center gap-2">
+                    <input type="checkbox" checked={todo.done} readOnly />
+                    <span
+                      className={`text-sm ${todo.done ? "line-through text-muted-foreground" : ""
+                        }`}
+                    >
+                      {todo.text}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/kanban/KanbanCardPreview.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import type { KanbanCardData } from "@/types/kanban"
+import { useDraggable } from "@dnd-kit/core"
+
+interface KanbanCardPreviewProps extends KanbanCardData {
+  onClick: () => void
+}
+
+export function KanbanCardPreview({
+  id,
+  title,
+  labels = [],
+  todos = [],
+  onClick,
+}: KanbanCardPreviewProps) {
+  const { setNodeRef, attributes, listeners, transform, isDragging } = useDraggable({
+    id,
+  })
+
+  const done = todos.filter((t) => t.done).length
+  const total = todos.length
+
+  return (
+    <div
+      ref={setNodeRef}
+      {...listeners}
+      {...attributes}
+      onClick={onClick}
+      className={`rounded-md bg-white dark:bg-zinc-900 border border-border p-3 shadow-sm cursor-pointer hover:ring-2 hover:ring-primary/40 transition ${isDragging ? "opacity-50" : ""
+        }`}
+      style={{
+        transform: transform
+          ? `translate(${transform.x}px, ${transform.y}px)`
+          : undefined,
+      }}
+    >
+      <div className="flex gap-1 mb-2 flex-wrap">
+        {labels.map((label) => (
+          <span
+            key={label.id}
+            className="w-3 h-3 rounded-full"
+            style={{ backgroundColor: label.color }}
+            title={label.name}
+          />
+        ))}
+      </div>
+
+      <div className="font-medium text-sm mb-1">{title}</div>
+
+      {total > 0 && (
+        <div className="text-xs text-muted-foreground">
+          {done} / {total} tasks done
+        </div>
+      )}
+    </div>
+  )
+}

src/components/kanban/KanbanColumn.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import type { KanbanCardData } from "@/types/kanban"
+import { useDroppable } from "@dnd-kit/core"
+import { useState } from "react"
+import type { Status } from "./KanbanBoard"
+import { KanbanCardModal } from "./KanbanCardModal"
+import { KanbanCardPreview } from "./KanbanCardPreview"
+
+interface KanbanColumnProps {
+  status: Status
+  items: KanbanCardData[]
+}
+
+export function KanbanColumn({ status, items }: KanbanColumnProps) {
+  const { setNodeRef } = useDroppable({ id: status })
+  const [activeCard, setActiveCard] = useState<KanbanCardData | null>(null)
+
+  return (
+    <div
+      ref={setNodeRef}
+      className="bg-muted rounded-lg p-2 flex flex-col gap-2 min-h-[200px]"
+    >
+      <h2 className="text-lg font-semibold text-center mb-2">
+        {status.replace("_", " ")}
+      </h2>
+      {items.map((item) => (
+        <KanbanCardPreview
+          key={item.id}
+          {...item}
+          onClick={() => setActiveCard(item)}
+        />
+      ))}
+
+      <KanbanCardModal card={activeCard} onClose={() => setActiveCard(null)} />
+    </div>
+  )
+}

src/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }