updated shot status pages

app/(dashboard)/shot-status/ShotStatusClient.tsx

@@ -3,6 +3,7 @@
 import { useState, useTransition, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
+import Link from "next/link";
 import {
   Select,
   SelectContent,
@@ -118,12 +119,12 @@ function NotesCell({
   );
 }
 
-function ShotTable({ shots, canManage }: { shots: ShotRow[]; canManage: boolean }) {
+function ShotTable({ shots, canManage, projectId }: { shots: ShotRow[]; canManage: boolean; projectId: string }) {
   return (
     <table className="w-full text-sm">
       <thead>
         <tr className="border-b border-zinc-800">
-          <th className="text-left py-2 px-3 text-xs font-medium text-zinc-500 w-14">Thumb</th>
+          <th className="text-left py-2 px-3 text-xs font-medium text-zinc-500 w-32">Thumb</th>
           <th className="text-left py-2 px-3 text-xs font-medium text-zinc-500">Shot</th>
           <th className="text-left py-2 px-3 text-xs font-medium text-zinc-500 w-32">Status</th>
           <th className="text-left py-2 px-3 text-xs font-medium text-zinc-500 w-32">Due Date</th>
@@ -141,12 +142,12 @@ function ShotTable({ shots, canManage }: { shots: ShotRow[]; canManage: boolean
             <tr key={shot.id} className="hover:bg-zinc-800/30 transition-colors">
               {/* Thumbnail */}
               <td className="py-2 px-3">
-                <div className="w-10 h-10 rounded overflow-hidden bg-zinc-800 flex items-center justify-center shrink-0">
+                <div className="w-24 aspect-[2.39/1] rounded overflow-hidden bg-zinc-800 flex items-center justify-center shrink-0">
                   {shot.thumbnailUrl ? (
                     <Image
                       src={shot.thumbnailUrl}
                       alt={shot.shotCode}
-                      width={40}
+                      width={96}
                       height={40}
                       className="object-cover w-full h-full"
                     />
@@ -158,7 +159,12 @@ function ShotTable({ shots, canManage }: { shots: ShotRow[]; canManage: boolean
 
               {/* Shot name */}
               <td className="py-2 px-3">
-                <span className="font-mono text-sm text-white">{shot.shotCode}</span>
+                <Link
+                  href={`/projects/${projectId}/shots/${shot.id}`}
+                  className="font-mono text-sm text-white hover:text-blue-400 transition-colors"
+                >
+                  {shot.shotCode}
+                </Link>
                 {shot.description && (
                   <p className="text-xs text-zinc-500 mt-0.5 truncate max-w-[200px]">
                     {shot.description}
@@ -328,7 +334,7 @@ export function ShotStatusClient({
                       </button>
                       {!collapsed && (
                         <div className="overflow-x-auto">
-                          <ShotTable shots={episodeShots} canManage={canManage} />
+                          <ShotTable shots={episodeShots} canManage={canManage} projectId={selectedProjectId!} />
                         </div>
                       )}
                     </div>
@@ -337,7 +343,7 @@ export function ShotStatusClient({
               </div>
             ) : (
               <div className="overflow-x-auto">
-                <ShotTable shots={shots} canManage={canManage} />
+                <ShotTable shots={shots} canManage={canManage} projectId={selectedProjectId!} />
               </div>
             )}
           </div>