Supervisor feature

components/shoot-log/NewSetupDialog.tsx

@@ -26,7 +26,7 @@ interface Props {
   shootDayId: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onCreated: (setup: { id: string; name: string }) => void;
+  onCreated: (setup: { id: string; name: string }) => Promise<void> | void;
 }
 
 export function NewSetupDialog({ shootDayId, open, onOpenChange, onCreated }: Props) {

components/shoot-log/NewShootDayDialog.tsx

@@ -30,7 +30,7 @@ interface Props {
   projectId: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onCreate: (day: { id: string; date: string; unit: string; label: string | null }) => void;
+  onCreate: (day: { id: string; date: string; unit: string; label: string | null }) => Promise<void> | void;
 }
 
 export function NewShootDayDialog({ projectId, open, onOpenChange, onCreate }: Props) {

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}
         />
       )}
     </>

components/shoot-log/TakeListPanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useCallback, useRef, useEffect } from "react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
 import { Plus, ChevronDown, ChevronRight, Image, MessageSquare, Loader2, Clapperboard } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -64,7 +64,8 @@ interface Props {
   onNewDay: () => void;
   onNewSetup: (dayId: string) => void;
   onNewTake: (setupId: string) => void;
-  refreshToken?: number;
+  /** When set, auto-expands this day ID (e.g. after creation) */
+  expandDayId?: string | null;
 }
 
 export function TakeListPanel({
@@ -74,21 +75,21 @@ export function TakeListPanel({
   onNewDay,
   onNewSetup,
   onNewTake,
-  refreshToken,
+  expandDayId,
 }: Props) {
   const [expandedDays, setExpandedDays] = useState<Set<string>>(new Set());
   const [expandedSetups, setExpandedSetups] = useState<Set<string>>(new Set());
   const autoExpandedRef = useRef(false);
 
   const { data, isLoading } = useQuery<{ days: ShootDayWithSetups[] }>({
-    queryKey: ["shoot-log-days", projectId, refreshToken],
+    queryKey: ["shoot-log-days", projectId],
     queryFn: async () => {
       const res = await fetch(`/api/shoot-log/days?projectId=${projectId}`);
       if (!res.ok) throw new Error("Failed to load days");
       return res.json();
     },
     enabled: !!projectId,
-    staleTime: 30_000,
+    staleTime: 0,
   });
 
   const days = data?.days ?? [];
@@ -121,6 +122,17 @@ export function TakeListPanel({
     }
   }, [days]);
 
+  // Expand a specific day when requested (e.g. after creation)
+  useEffect(() => {
+    if (!expandDayId) return;
+    setExpandedDays((prev) => new Set([...prev, expandDayId]));
+    // Also expand the first setup within that day if present
+    const day = days.find((d) => d.id === expandDayId);
+    if (day?.setups[0]) {
+      setExpandedSetups((prev) => new Set([...prev, day.setups[0].id]));
+    }
+  }, [expandDayId]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const hasNotes = (take: TakeSummary) =>
     !!(take.supervisorNotes || take.continuityNotes || take.vfxRequirements);