kanban thumbnails

components/tasks/KanbanBoard.tsx

@@ -42,7 +42,7 @@ interface KanbanTask {
   status: TaskStatus;
   priority: string;
   dueDate: Date | null;
-  shot?: { shotCode: string } | null;
+  shot?: { shotCode: string; thumbnailUrl?: string | null } | null;
   asset?: { assetCode: string; name: string } | null;
   assignedArtist?: {
     id: string;
@@ -56,6 +56,8 @@ interface KanbanTask {
     versionNumber: number;
     approvalStatus: string;
     createdAt: Date;
+    thumbnailUrl?: string | null;
+    posterUrl?: string | null;
   }[];
 }
 

components/tasks/KanbanCard.tsx

@@ -14,6 +14,7 @@ import {
   XCircle,
   Clock,
   GripVertical,
+  Film,
 } from "lucide-react";
 import { TaskStatus, TaskType } from "@prisma/client";
 import { TASK_STATUS_CONFIG, TASK_TYPE_LABELS } from "./TaskCard";
@@ -33,7 +34,7 @@ interface KanbanTask {
   status: TaskStatus;
   priority: string;
   dueDate: Date | null;
-  shot?: { shotCode: string } | null;
+  shot?: { shotCode: string; thumbnailUrl?: string | null } | null;
   asset?: { assetCode: string; name: string } | null;
   assignedArtist?: { id: string; name: string | null; email: string; image: string | null } | null;
   _count?: { versions: number };
@@ -42,6 +43,8 @@ interface KanbanTask {
     versionNumber: number;
     approvalStatus: string;
     createdAt: Date;
+    thumbnailUrl?: string | null;
+    posterUrl?: string | null;
   }[];
 }
 
@@ -68,6 +71,13 @@ export function KanbanCard({ task, isDragOverlay = false }: KanbanCardProps) {
 
   const contextCode = task.shot?.shotCode ?? task.asset?.assetCode;
 
+  // Resolve thumbnail: prefer latest version thumbnail, then shot thumbnail
+  const thumbnail =
+    latestVersion?.thumbnailUrl ??
+    latestVersion?.posterUrl ??
+    task.shot?.thumbnailUrl ??
+    null;
+
   return (
     <div
       ref={setNodeRef}
@@ -94,6 +104,22 @@ export function KanbanCard({ task, isDragOverlay = false }: KanbanCardProps) {
         )}
       </div>
 
+      {/* Thumbnail */}
+      {thumbnail ? (
+        <div className="w-full aspect-video rounded-md overflow-hidden bg-zinc-800">
+          <img
+            src={thumbnail}
+            alt={contextCode ?? task.title}
+            className="w-full h-full object-cover"
+            loading="lazy"
+          />
+        </div>
+      ) : contextCode && task.shot ? (
+        <div className="w-full aspect-video rounded-md bg-zinc-800 flex items-center justify-center">
+          <Film className="h-5 w-5 text-zinc-700" />
+        </div>
+      ) : null}
+
       {/* Title */}
       <Link
         href={`/tasks/${task.id}`}