Add original footage to shots function

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

@@ -19,9 +19,11 @@ import {
   CheckCircle2,
   Settings,
   ListTodo,
+  Video,
 } from "lucide-react";
 import type { ShotWithDetails } from "@/types";
 import { ShotSettingsTab } from "@/components/shots/ShotSettingsTab";
+import { FootageViewer } from "@/components/shots/FootageViewer";
 
 const STATUS_CONFIG: Record<
   string,
@@ -51,7 +53,7 @@ export default function ShotDetailPage() {
   const [tasks, setTasks] = useState<any[]>([]);
   const [artists, setArtists] = useState<any[]>([]);
   const [canManage, setCanManage] = useState(false);
-  const [activeTab, setActiveTab] = useState<"tasks" | "settings">("tasks");
+  const [activeTab, setActiveTab] = useState<"tasks" | "footage" | "settings">("tasks");
 
   const fetchShot = async () => {
     try {
@@ -190,6 +192,18 @@ export default function ShotDetailPage() {
             <ListTodo className="h-4 w-4" />
             Tasks
           </button>
+          <button
+            onClick={() => setActiveTab("footage")}
+            className={cn(
+              "flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors -mb-px",
+              activeTab === "footage"
+                ? "border-amber-500 text-amber-400"
+                : "border-transparent text-zinc-500 hover:text-zinc-300"
+            )}
+          >
+            <Video className="h-4 w-4" />
+            Footage
+          </button>
           {canManage && (
             <button
               onClick={() => setActiveTab("settings")}
@@ -217,6 +231,14 @@ export default function ShotDetailPage() {
           />
         )}
 
+        {activeTab === "footage" && (
+          <FootageViewer
+            shot={shot}
+            canManage={canManage}
+            onSaved={fetchShot}
+          />
+        )}
+
         {activeTab === "settings" && canManage && (
           <ShotSettingsTab shot={shot} artists={artists} onSaved={fetchShot} />
         )}