Supervisor feature

components/shoot-log/ShootLogClient.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Clapperboard, Loader2 } from "lucide-react";
-import { cn } from "@/lib/utils";
 import { TakeListPanel } from "./TakeListPanel";
 import { TakeEditorPanel, type FullTake } from "./TakeEditorPanel";
 import { NewShootDayDialog } from "./NewShootDayDialog";
@@ -24,17 +23,23 @@ interface Props {
 }
 
 export function ShootLogClient({ projects }: Props) {
+  const queryClient = useQueryClient();
+
   const [projectId, setProjectId] = useState<string>(projects[0]?.id ?? "");
   const [selectedTakeId, setSelectedTakeId] = useState<string | null>(null);
   const [selectedSetupId, setSelectedSetupId] = useState<string | null>(null);
 
+  // Which day to auto-expand in the left panel after creation
+  const [expandDayId, setExpandDayId] = useState<string | null>(null);
+
   // Dialog state
   const [newDayOpen, setNewDayOpen] = useState(false);
   const [newSetupDayId, setNewSetupDayId] = useState<string | null>(null);
 
-  // Refresh token to force TakeListPanel to refetch
-  const [refreshToken, setRefreshToken] = useState(0);
-  const refresh = useCallback(() => setRefreshToken((t) => t + 1), []);
+  // ── Invalidate the days list ───────────────────────────────────────────────
+  const invalidateDays = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ["shoot-log-days", projectId] });
+  }, [queryClient, projectId]);
 
   // ── Fetch selected take ────────────────────────────────────────────────────
   const { data: takeData, isLoading: takeLoading } = useQuery<{ take: FullTake }>({
@@ -74,7 +79,7 @@ export function ShootLogClient({ projects }: Props) {
   const prevTakeNav = currentIdx > 0 ? allTakesInSetup[currentIdx - 1] : null;
   const nextTakeNav = currentIdx < allTakesInSetup.length - 1 ? allTakesInSetup[currentIdx + 1] : null;
 
-  // ── Actions ────────────────────────────────────────────────────────────────
+  // ── Create a take ──────────────────────────────────────────────────────────
   const createTake = useCallback(
     async (setupId: string, initialData?: object) => {
       const res = await fetch(`/api/shoot-log/setups/${setupId}/takes`, {
@@ -83,34 +88,78 @@ export function ShootLogClient({ projects }: Props) {
         body: JSON.stringify(initialData ?? {}),
       });
       if (!res.ok) throw new Error("Failed to create take");
-      const { take } = await res.json();
-      refresh();
-      setSelectedTakeId(take.id);
+      const { take: newTake } = await res.json();
+      invalidateDays();
+      setSelectedTakeId(newTake.id);
       setSelectedSetupId(setupId);
     },
-    [refresh]
+    [invalidateDays]
   );
 
+  // ── After shoot day creation: auto-create Setup A + Take 1 ────────────────
+  const handleDayCreated = useCallback(
+    async (day: { id: string }) => {
+      try {
+        // Create Setup A
+        const setupRes = await fetch(`/api/shoot-log/days/${day.id}/setups`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ name: "A" }),
+        });
+        if (!setupRes.ok) throw new Error();
+        const { setup } = await setupRes.json();
+
+        // Create Take 1
+        const takeRes = await fetch(`/api/shoot-log/setups/${setup.id}/takes`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({}),
+        });
+        if (!takeRes.ok) throw new Error();
+        const { take: newTake } = await takeRes.json();
+
+        invalidateDays();
+        setExpandDayId(day.id);
+        setSelectedTakeId(newTake.id);
+        setSelectedSetupId(setup.id);
+      } catch {
+        // Day was created but setup/take failed — still refresh
+        invalidateDays();
+        setExpandDayId(day.id);
+      }
+    },
+    [invalidateDays]
+  );
+
+  // ── After new setup creation ───────────────────────────────────────────────
+  const handleSetupCreated = useCallback(
+    async (setup: { id: string }) => {
+      invalidateDays();
+      setNewSetupDayId(null);
+      await createTake(setup.id);
+    },
+    [invalidateDays, createTake]
+  );
+
+  // ── Duplicate take ─────────────────────────────────────────────────────────
   const handleDuplicate = useCallback(async () => {
     if (!take) return;
-    // Build initial data from current take (omit id, notes, attachments)
-    const { id, takeNumber, attachments, setup, createdById, createdAt, updatedAt, ...rest } = take as FullTake & Record<string, unknown>;
-    void id; void takeNumber; void attachments; void setup; void createdById; void createdAt; void updatedAt;
-
-    // Increment clip name
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { id, takeNumber, attachments, setup, createdById, createdAt, updatedAt, ...rest } =
+      take as FullTake & Record<string, unknown>;
     const clipName = incrementClipName(take.clipName);
     const initial = { ...rest, clipName, supervisorNotes: null, continuityNotes: null, vfxRequirements: null };
-
     await createTake(take.setupId, initial);
   }, [take, createTake]);
 
+  // ── Delete take ────────────────────────────────────────────────────────────
   const handleDelete = useCallback(async () => {
     if (!selectedTakeId) return;
     if (!confirm("Delete this take? This cannot be undone.")) return;
     await fetch(`/api/shoot-log/takes/${selectedTakeId}`, { method: "DELETE" });
     setSelectedTakeId(null);
-    refresh();
-  }, [selectedTakeId, refresh]);
+    invalidateDays();
+  }, [selectedTakeId, invalidateDays]);
 
   // ── Render ─────────────────────────────────────────────────────────────────
   if (!projectId) {
@@ -132,10 +181,11 @@ export function ShootLogClient({ projects }: Props) {
           <select
             value={projectId}
             onChange={(e) => {
-              setProjectId(e.target.value);
+              const next = e.target.value;
+              setProjectId(next);
               setSelectedTakeId(null);
               setSelectedSetupId(null);
-              setRefreshToken((t) => t + 1);
+              setExpandDayId(null);
             }}
             className="bg-zinc-800 border border-zinc-700 rounded-lg text-sm text-white px-3 py-1.5 focus:outline-none focus:border-amber-600"
           >
@@ -162,7 +212,7 @@ export function ShootLogClient({ projects }: Props) {
           <TakeListPanel
             projectId={projectId}
             selectedTakeId={selectedTakeId}
-            refreshToken={refreshToken}
+            expandDayId={expandDayId}
             onSelectTake={(takeId, setupId) => {
               setSelectedTakeId(takeId);
               setSelectedSetupId(setupId);
@@ -189,7 +239,7 @@ export function ShootLogClient({ projects }: Props) {
               onDuplicate={handleDuplicate}
               onNewTake={() => createTake(take.setupId)}
               onDelete={handleDelete}
-              onAttachmentsChange={refresh}
+              onAttachmentsChange={invalidateDays}
             />
           ) : (
             <div className="flex flex-col items-center justify-center h-full gap-3 text-zinc-600">
@@ -205,17 +255,16 @@ export function ShootLogClient({ projects }: Props) {
         projectId={projectId}
         open={newDayOpen}
         onOpenChange={setNewDayOpen}
-        onCreate={refresh}
+        onCreate={handleDayCreated}
       />
       {newSetupDayId && (
         <NewSetupDialog
           shootDayId={newSetupDayId}
           open={!!newSetupDayId}
-          onOpenChange={(o) => { if (!o) setNewSetupDayId(null); }}
-          onCreated={() => {
-            setNewSetupDayId(null);
-            refresh();
+          onOpenChange={(o) => {
+            if (!o) setNewSetupDayId(null);
           }}
+          onCreated={handleSetupCreated}
         />
       )}
     </>