kanban thumbnails

app/(dashboard)/projects/[id]/kanban/page.tsx

@@ -41,7 +41,7 @@ export default async function KanbanPage({
       where: { projectId: id },
       orderBy: [{ status: "asc" }, { sortOrder: "asc" }],
       include: {
-        shot: { select: { id: true, shotCode: true } },
+        shot: { select: { id: true, shotCode: true, thumbnailUrl: true } },
         asset: { select: { id: true, assetCode: true, name: true } },
         assignedArtist: {
           select: { id: true, name: true, email: true, image: true },
@@ -55,6 +55,8 @@ export default async function KanbanPage({
             versionNumber: true,
             approvalStatus: true,
             createdAt: true,
+            thumbnailUrl: true,
+            posterUrl: true,
           },
         },
       },

app/(dashboard)/projects/[id]/page.tsx

@@ -60,14 +60,14 @@ async function getProject(id: string) {
       tasks: {
         orderBy: [{ status: "asc" }, { sortOrder: "asc" }],
         include: {
-          shot: { select: { id: true, shotCode: true } },
+          shot: { select: { id: true, shotCode: true, thumbnailUrl: true } },
           asset: { select: { id: true, assetCode: true, name: true } },
           assignedArtist: { select: { id: true, name: true, email: true, image: true } },
           _count: { select: { versions: true } },
           versions: {
             take: 1,
             orderBy: { versionNumber: "desc" },
-            select: { id: true, versionNumber: true, approvalStatus: true, createdAt: true },
+            select: { id: true, versionNumber: true, approvalStatus: true, createdAt: true, thumbnailUrl: true, posterUrl: true },
           },
         },
       },

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}`}