feat(#17): implement kanban board view

2026-01-29 20:36:14 -06:00
parent 1cb54b56b0
commit 4fcc2b1efb
6 changed files with 184 additions and 837 deletions
--- a/apps/web/src/components/kanban/TaskCard.tsx
+++ b/apps/web/src/components/kanban/TaskCard.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import type { Task } from "@mosaic/shared";
+import { TaskPriority } from "@mosaic/shared";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Calendar, Flag, User } from "lucide-react";
+import { format } from "date-fns";
+
+interface TaskCardProps {
+  task: Task & { assignee?: { name: string; image?: string | null } };
+}
+
+const priorityConfig = {
+  [TaskPriority.HIGH]: {
+    label: "High",
+    className: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400",
+  },
+  [TaskPriority.MEDIUM]: {
+    label: "Medium",
+    className: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  },
+  [TaskPriority.LOW]: {
+    label: "Low",
+    className: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400",
+  },
+};
+
+/**
+ * Generate initials from a name (e.g., "John Doe" -> "JD")
+ */
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+/**
+ * Task Card component for Kanban board
+ * 
+ * Displays:
+ * - Task title
+ * - Priority badge
+ * - Assignee avatar (if assigned)
+ * - Due date (if set)
+ */
+export function TaskCard({ task }: TaskCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: task.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const isOverdue =
+    task.dueDate &&
+    new Date(task.dueDate) < new Date() &&
+    task.status !== "COMPLETED";
+
+  const isDueSoon =
+    task.dueDate &&
+    !isOverdue &&
+    new Date(task.dueDate).getTime() - new Date().getTime() <
+      3 * 24 * 60 * 60 * 1000; // 3 days
+
+  const priorityInfo = priorityConfig[task.priority];
+
+  return (
+    <article
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className={`
+        bg-white dark:bg-gray-800 
+        rounded-lg shadow-sm border border-gray-200 dark:border-gray-700
+        p-4 space-y-3
+        cursor-grab active:cursor-grabbing
+        transition-all duration-200
+        hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600
+        ${isDragging ? "opacity-50" : "opacity-100"}
+      `}
+    >
+      {/* Task Title */}
+      <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 line-clamp-2">
+        {task.title}
+      </h4>
+
+      {/* Task Metadata */}
+      <div className="flex items-center gap-2 flex-wrap">
+        {/* Priority Badge */}
+        <span
+          data-priority={task.priority}
+          className={`
+            inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium
+            ${priorityInfo.className}
+          `}
+        >
+          <Flag className="w-3 h-3" aria-hidden="true" />
+          {priorityInfo.label}
+        </span>
+
+        {/* Due Date */}
+        {task.dueDate && (
+          <span
+            className={`
+              inline-flex items-center gap-1 px-2 py-1 rounded-md text-xs
+              ${
+                isOverdue
+                  ? "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400"
+                  : isDueSoon
+                    ? "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
+                    : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+              }
+            `}
+          >
+            <Calendar className="w-3 h-3" aria-label="Due date" />
+            {format(new Date(task.dueDate), "MMM d")}
+          </span>
+        )}
+      </div>
+
+      {/* Assignee Avatar */}
+      {task.assignee && (
+        <div className="flex items-center gap-2 pt-2 border-t border-gray-100 dark:border-gray-700">
+          {task.assignee.image ? (
+            <img
+              src={task.assignee.image}
+              alt={task.assignee.name}
+              className="w-6 h-6 rounded-full object-cover"
+            />
+          ) : (
+            <div
+              className="w-6 h-6 rounded-full bg-indigo-500 text-white flex items-center justify-center text-xs font-medium"
+              aria-label={`Assigned to ${task.assignee.name}`}
+            >
+              {getInitials(task.assignee.name)}
+            </div>
+          )}
+          <span className="text-xs text-gray-600 dark:text-gray-400 truncate">
+            {task.assignee.name}
+          </span>
+        </div>
+      )}
+
+      {/* Fallback for unassigned tasks */}
+      {!task.assignee && task.assigneeId && (
+        <div className="flex items-center gap-2 pt-2 border-t border-gray-100 dark:border-gray-700">
+          <div
+            className="w-6 h-6 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center"
+            aria-label="Assigned user"
+          >
+            <User className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          </div>
+          <span className="text-xs text-gray-500 dark:text-gray-500">
+            Assigned
+          </span>
+        </div>
+      )}
+    </article>
+  );
+}