Kanban shenanigans

src/app/commissions/kanban/page.tsx

@@ -0,0 +1,10 @@
+import { KanbanBoard } from "@/components/kanban/KanbanBoard"
+
+export default function KanbanPage() {
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">Commission Queue</h1>
+      <KanbanBoard />
+    </div>
+  )
+}

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 }

src/data/mockCards.ts

@@ -0,0 +1,124 @@
+import type { KanbanCardData } from "@/types/kanban"
+
+export const mockCards: Record<string, KanbanCardData[]> = {
+  PENDING: [
+    {
+      id: "card-1",
+      title: "New Commission Request",
+      description: "A shaded full body request with background.",
+      labels: [
+        { id: "l1", name: "Full Body", color: "#6366f1" },
+        { id: "l2", name: "Shaded", color: "#10b981" },
+      ],
+      todos: [
+        { id: "t1", text: "Confirm client", done: true },
+        { id: "t2", text: "Send invoice", done: false },
+        { id: "t3", text: "Start sketch", done: false },
+      ],
+    },
+    {
+      id: "c1",
+      title: "Initial sketch",
+      description: "Draft the sketch layout for the dragon commission.",
+      labels: [{ id: "l1", name: "Sketch", color: "#7c3aed" }],
+      todos: [
+        { id: "t1", text: "Outline basic pose", done: true },
+        { id: "t2", text: "Add background elements", done: false },
+      ],
+    },
+    {
+      id: "c6",
+      title: "Color palette ideas",
+      description: "Brainstorm palette options for upcoming sticker set.",
+      labels: [{ id: "l3", name: "Palette", color: "#f59e0b" }],
+      todos: [
+        { id: "t11", text: "Collect 5 references", done: true },
+        { id: "t12", text: "Make base color variants", done: false },
+      ],
+    },
+  ],
+  ACCEPTED: [
+    {
+      id: "c2",
+      title: "Full body sketch (Fox)",
+      description: "Accepted commission from Alex, full body fox.",
+      labels: [
+        { id: "l2", name: "Commission", color: "#10b981" },
+        { id: "l3", name: "Lineart", color: "#3b82f6" },
+      ],
+      todos: [
+        { id: "t3", text: "Line pose", done: false },
+        { id: "t4", text: "Inking details", done: false },
+      ],
+    },
+    {
+      id: "c7",
+      title: "Badge template layout",
+      description: "Design a reusable layout for convention badges.",
+      labels: [{ id: "l6", name: "Template", color: "#a855f7" }],
+      todos: [
+        { id: "t13", text: "Vertical layout sketch", done: true },
+        { id: "t14", text: "Add social name field", done: false },
+      ],
+    },
+  ],
+  IN_PROGRESS: [
+    {
+      id: "c3",
+      title: "Shaded portrait (Wolf)",
+      description: "Working on detailed portrait with complex lighting.",
+      labels: [
+        { id: "l4", name: "Portrait", color: "#f97316" },
+        { id: "l5", name: "Shaded", color: "#6366f1" },
+      ],
+      todos: [
+        { id: "t5", text: "Refine shadows", done: false },
+        { id: "t6", text: "Color correction", done: false },
+      ],
+    },
+    {
+      id: "c8",
+      title: "Telegram stickers",
+      description: "Finish final 2 stickers for the feline set.",
+      labels: [
+        { id: "l1", name: "Sticker", color: "#84cc16" },
+        { id: "l5", name: "Flat", color: "#eab308" },
+      ],
+      todos: [
+        { id: "t15", text: "Render #5", done: true },
+        { id: "t16", text: "Render #6", done: false },
+      ],
+    },
+  ],
+  DONE: [
+    {
+      id: "c4",
+      title: "Refsheet (Tiger)",
+      description: "Complete refsheet for character submission.",
+      labels: [{ id: "l6", name: "Refsheet", color: "#ec4899" }],
+      todos: [
+        { id: "t7", text: "Label layers", done: true },
+        { id: "t8", text: "Export PNG", done: true },
+      ],
+    },
+    {
+      id: "c9",
+      title: "Artfight entry",
+      description: "Submitted and posted Artfight attack.",
+      labels: [{ id: "l7", name: "Artfight", color: "#0ea5e9" }],
+      todos: [
+        { id: "t17", text: "Add watermark", done: true },
+        { id: "t18", text: "Post to site", done: true },
+      ],
+    },
+  ],
+  REJECTED: [
+  {
+      id: "c5",
+      title: "NSFW icon (cancelled)",
+      description: "Client cancelled due to budget.",
+      labels: [{ id: "l8", name: "NSFW", color: "#ef4444" }],
+      todos: [],
+    },
+  ],
+}

src/types/kanban.ts

@@ -0,0 +1,21 @@
+// src/types/kanban.ts
+
+export type KanbanLabel = {
+  id: string
+  name: string
+  color: string // e.g. "red", "green", "blue"
+}
+
+export type KanbanTodo = {
+  id: string
+  text: string
+  done: boolean
+}
+
+export type KanbanCardData = {
+  id: string
+  title: string
+  labels: KanbanLabel[]
+  description: string
+  todos: KanbanTodo[]
+}