@optifye/dashboard-core 6.3.5 → 6.4.1

package/dist/index.js

@@ -3809,6 +3809,11 @@ var S3ClipsService = class {
     this.requestCache = new RequestDeduplicationCache();
     // Flag to prevent metadata fetching during index building
     this.isIndexBuilding = false;
+    // Flag to prevent metadata fetching during entire prefetch operation
+    this.isPrefetching = false;
+    // Global safeguard: limit concurrent metadata fetches to prevent flooding
+    this.currentMetadataFetches = 0;
+    this.MAX_CONCURRENT_METADATA = 3;
     this.config = config;
     if (!config.s3Config) {
       throw new Error("S3 configuration is required");
@@ -3854,7 +3859,12 @@ var S3ClipsService = class {
    */
   async listS3Clips(params) {
     const { workspaceId, date, shiftId, maxKeys } = params;
+    if (!isValidShiftId(shiftId)) {
+      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}. Must be 0 (day) or 1 (night)`);
+      return [];
+    }
     const prefix = `sop_violations/${workspaceId}/${date}/${shiftId}/`;
+    console.log(`[S3ClipsService] Listing clips for workspace: ${workspaceId}, date: ${date}, shift: ${shiftId}`);
     const deduplicationKey = `list-s3-clips:${prefix}:${maxKeys || "all"}`;
     return this.requestCache.deduplicate(
       deduplicationKey,
@@ -3956,20 +3966,36 @@ var S3ClipsService = class {
       return null;
     }
   }
+  /**
+   * Control prefetch mode to prevent metadata fetching during background operations
+   */
+  setPrefetchMode(enabled) {
+    this.isPrefetching = enabled;
+    console.log(`[S3ClipsService] Prefetch mode ${enabled ? "enabled" : "disabled"} - metadata fetching ${enabled ? "blocked" : "allowed"}`);
+  }
   /**
    * Fetches full metadata including timestamps with deduplication
    */
   async getFullMetadata(playlistUri) {
-    if (this.isIndexBuilding) {
-      console.warn(`[S3ClipsService] Skipping metadata fetch during index building for: ${playlistUri}`);
+    if (this.isIndexBuilding || this.isPrefetching) {
+      console.warn(`[S3ClipsService] Skipping metadata fetch - building: ${this.isIndexBuilding}, prefetching: ${this.isPrefetching}`);
       return null;
     }
-    const deduplicationKey = `full-metadata:${playlistUri}`;
-    return this.requestCache.deduplicate(
-      deduplicationKey,
-      () => this.executeGetFullMetadata(playlistUri),
-      "FullMetadata"
-    );
+    if (this.currentMetadataFetches >= this.MAX_CONCURRENT_METADATA) {
+      console.warn(`[S3ClipsService] Skipping metadata - max concurrent fetches (${this.MAX_CONCURRENT_METADATA}) reached`);
+      return null;
+    }
+    this.currentMetadataFetches++;
+    try {
+      const deduplicationKey = `full-metadata:${playlistUri}`;
+      return await this.requestCache.deduplicate(
+        deduplicationKey,
+        () => this.executeGetFullMetadata(playlistUri),
+        "FullMetadata"
+      );
+    } finally {
+      this.currentMetadataFetches--;
+    }
   }
   /**
    * Internal implementation of full metadata fetching
@@ -4019,6 +4045,10 @@ var S3ClipsService = class {
     return sopConfig.default;
   }
   async getClipCounts(workspaceId, date, shiftId, buildIndex) {
+    if (!isValidShiftId(shiftId)) {
+      console.error(`[S3ClipsService] getClipCounts - Invalid shift ID: ${shiftId}. Must be 0 (day) or 1 (night)`);
+      return buildIndex ? { counts: {}, videoIndex: { byCategory: /* @__PURE__ */ new Map(), allVideos: [], counts: {}, workspaceId, date, shiftId: "0", lastUpdated: /* @__PURE__ */ new Date() } } : {};
+    }
     const deduplicationKey = `clip-counts:${workspaceId}:${date}:${shiftId}:${buildIndex ? "with-index" : "counts-only"}`;
     return this.requestCache.deduplicate(
       deduplicationKey,
@@ -4048,7 +4078,8 @@ var S3ClipsService = class {
         "cycle_completion",
         "bottleneck"
       ];
-      console.log(`[S3ClipsService] ${buildIndex ? "Building video index and counting" : "Fast counting"} clips for ${workspaceId} on ${date}, shift ${shiftId}`);
+      const shiftName = shiftId === 0 || shiftId === "0" ? "Day" : "Night";
+      console.log(`[S3ClipsService] ${buildIndex ? "Building video index and counting" : "Fast counting"} clips for ${workspaceId} on ${date}, shift ${shiftId} (${shiftName} Shift)`);
       const startTime = performance.now();
       const videoIndex = buildIndex ? {
         byCategory: /* @__PURE__ */ new Map(),
@@ -4195,6 +4226,10 @@ var S3ClipsService = class {
    * Get first clip for a specific category with deduplication
    */
   async getFirstClipForCategory(workspaceId, date, shiftId, category) {
+    if (!isValidShiftId(shiftId)) {
+      console.error(`[S3ClipsService] getFirstClipForCategory - Invalid shift ID: ${shiftId}. Must be 0 (day) or 1 (night)`);
+      return null;
+    }
     const deduplicationKey = `first-clip:${workspaceId}:${date}:${shiftId}:${category}`;
     return this.requestCache.deduplicate(
       deduplicationKey,
@@ -4471,7 +4506,8 @@ var S3ClipsService = class {
         date,
         shiftId.toString(),
         includeCycleTime || false,
-        includeMetadata || (!!timestampStart || !!timestampEnd)
+        includeMetadata || false
+        // Never fetch metadata for timestamp filtering to prevent flooding
       );
     });
     const videoResults = await Promise.all(videoPromises);
@@ -4542,6 +4578,7 @@ var VideoPrefetchManager = class extends events.EventEmitter {
   }
   /**
    * Get or create S3 service instance for dashboard config
+   * Public method to allow sharing the same S3Service instance across components
    */
   getS3Service(dashboardConfig) {
     const configKey = JSON.stringify(dashboardConfig.s3Config);
@@ -4611,75 +4648,80 @@ var VideoPrefetchManager = class extends events.EventEmitter {
    * Perform the actual prefetch work
    */
   async performPrefetchWork(key, params, s3Service, buildIndex) {
-    const cacheKey = `clip-counts:${params.workspaceId}:${params.date}:${params.shift}`;
-    const cachedResult = await smartVideoCache.getClipCounts(cacheKey);
-    if (cachedResult) {
-      console.log(`[VideoPrefetchManager] Found cached data for ${key}`);
-      this.updateRequestStatus(key, "fully_indexed" /* FULLY_INDEXED */, cachedResult);
-      return cachedResult;
-    }
-    if (buildIndex) {
-      const countsOnly = await s3Service.getClipCounts(
+    s3Service.setPrefetchMode(true);
+    try {
+      const cacheKey = `clip-counts:${params.workspaceId}:${params.date}:${params.shift}`;
+      const cachedResult = await smartVideoCache.getClipCounts(cacheKey);
+      if (cachedResult) {
+        console.log(`[VideoPrefetchManager] Found cached data for ${key}`);
+        this.updateRequestStatus(key, "fully_indexed" /* FULLY_INDEXED */, cachedResult);
+        return cachedResult;
+      }
+      if (buildIndex) {
+        const countsOnly = await s3Service.getClipCounts(
+          params.workspaceId,
+          params.date,
+          params.shift
+        );
+        if (typeof countsOnly === "object" && countsOnly !== null) {
+          const renderReadyData = {
+            counts: countsOnly,
+            videoIndex: {
+              byCategory: /* @__PURE__ */ new Map(),
+              allVideos: [],
+              counts: countsOnly,
+              workspaceId: params.workspaceId,
+              date: params.date,
+              shiftId: params.shift,
+              lastUpdated: /* @__PURE__ */ new Date(),
+              _debugId: `vid_RENDER_READY_${Date.now()}_${Math.random().toString(36).substring(7)}`
+            }
+          };
+          this.updateRequestStatus(key, "render_ready" /* RENDER_READY */, renderReadyData);
+          console.log(`[VideoPrefetchManager] Render ready, building full index for ${key}`);
+        }
+      }
+      const fullResult = await s3Service.getClipCountsCacheFirst(
         params.workspaceId,
         params.date,
-        params.shift
+        params.shift,
+        true
       );
-      if (typeof countsOnly === "object" && countsOnly !== null) {
-        const renderReadyData = {
-          counts: countsOnly,
+      if (fullResult && typeof fullResult === "object" && "videoIndex" in fullResult) {
+        const clipCountsWithIndex = fullResult;
+        if (clipCountsWithIndex.videoIndex.allVideos.length > 0) {
+          console.log(`[VideoPrefetchManager] Video index properly populated with ${clipCountsWithIndex.videoIndex.allVideos.length} videos`);
+        } else {
+          console.warn(`[VideoPrefetchManager] Video index is empty, but counts available:`, clipCountsWithIndex.counts);
+        }
+        await smartVideoCache.setClipCounts(cacheKey, clipCountsWithIndex, 5 * 60);
+        this.updateRequestStatus(key, "fully_indexed" /* FULLY_INDEXED */, clipCountsWithIndex);
+        console.log(`[VideoPrefetchManager] Fully indexed: ${key} (${clipCountsWithIndex.videoIndex.allVideos.length} videos)`);
+        return clipCountsWithIndex;
+      } else if (fullResult && typeof fullResult === "object") {
+        console.log(`[VideoPrefetchManager] Received counts only, building fallback data structure`);
+        const countsResult = fullResult;
+        const fallbackData = {
+          counts: countsResult,
           videoIndex: {
             byCategory: /* @__PURE__ */ new Map(),
             allVideos: [],
-            counts: countsOnly,
+            counts: countsResult,
             workspaceId: params.workspaceId,
             date: params.date,
             shiftId: params.shift,
             lastUpdated: /* @__PURE__ */ new Date(),
-            _debugId: `vid_RENDER_READY_${Date.now()}_${Math.random().toString(36).substring(7)}`
+            _debugId: `vid_FALLBACK_${Date.now()}_${Math.random().toString(36).substring(7)}`
           }
         };
-        this.updateRequestStatus(key, "render_ready" /* RENDER_READY */, renderReadyData);
-        console.log(`[VideoPrefetchManager] Render ready, building full index for ${key}`);
-      }
-    }
-    const fullResult = await s3Service.getClipCountsCacheFirst(
-      params.workspaceId,
-      params.date,
-      params.shift,
-      true
-    );
-    if (fullResult && typeof fullResult === "object" && "videoIndex" in fullResult) {
-      const clipCountsWithIndex = fullResult;
-      if (clipCountsWithIndex.videoIndex.allVideos.length > 0) {
-        console.log(`[VideoPrefetchManager] Video index properly populated with ${clipCountsWithIndex.videoIndex.allVideos.length} videos`);
+        this.updateRequestStatus(key, "render_ready" /* RENDER_READY */, fallbackData);
+        return fallbackData;
       } else {
-        console.warn(`[VideoPrefetchManager] Video index is empty, but counts available:`, clipCountsWithIndex.counts);
-      }
-      await smartVideoCache.setClipCounts(cacheKey, clipCountsWithIndex, 5 * 60);
-      this.updateRequestStatus(key, "fully_indexed" /* FULLY_INDEXED */, clipCountsWithIndex);
-      console.log(`[VideoPrefetchManager] Fully indexed: ${key} (${clipCountsWithIndex.videoIndex.allVideos.length} videos)`);
-      return clipCountsWithIndex;
-    } else if (fullResult && typeof fullResult === "object") {
-      console.log(`[VideoPrefetchManager] Received counts only, building fallback data structure`);
-      const countsResult = fullResult;
-      const fallbackData = {
-        counts: countsResult,
-        videoIndex: {
-          byCategory: /* @__PURE__ */ new Map(),
-          allVideos: [],
-          counts: countsResult,
-          workspaceId: params.workspaceId,
-          date: params.date,
-          shiftId: params.shift,
-          lastUpdated: /* @__PURE__ */ new Date(),
-          _debugId: `vid_FALLBACK_${Date.now()}_${Math.random().toString(36).substring(7)}`
-        }
-      };
-      this.updateRequestStatus(key, "render_ready" /* RENDER_READY */, fallbackData);
-      return fallbackData;
-    } else {
-      console.error(`[VideoPrefetchManager] Received null/undefined result from S3 service`);
-      throw new Error("Failed to fetch clip counts from S3 service");
+        console.error(`[VideoPrefetchManager] Received null/undefined result from S3 service`);
+        throw new Error("Failed to fetch clip counts from S3 service");
+      }
+    } finally {
+      s3Service.setPrefetchMode(false);
     }
   }
   /**
@@ -4942,9 +4984,13 @@ var AuthProvider = ({ children }) => {
   const [loading, setLoading] = React19.useState(true);
   const [error, setError] = React19.useState(null);
   const router$1 = router.useRouter();
-  const userProfileTable = authConfig?.userProfileTable;
-  const roleColumn = authConfig?.roleColumn || "role";
+  authConfig?.userProfileTable;
+  authConfig?.roleColumn || "role";
   const fetchUserDetails = React19.useCallback(async (supabaseUser) => {
+    console.log("[fetchUserDetails] Called for user:", supabaseUser.id, {
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      stackTrace: new Error().stack?.split("\n").slice(1, 4).join(" -> ")
+    });
     if (!supabaseUser) return null;
     const basicUser = {
       id: supabaseUser.id,
@@ -4953,42 +4999,34 @@ var AuthProvider = ({ children }) => {
     if (!supabase) return basicUser;
     try {
       const timeoutPromise = new Promise(
-        (_, reject) => setTimeout(() => reject(new Error("Profile fetch timeout")), 5e3)
+        (_, reject) => setTimeout(() => {
+          console.log("[fetchUserDetails] Timeout triggered after 2 seconds");
+          reject(new Error("Profile fetch timeout"));
+        }, 2e3)
       );
       const rolePromise = supabase.from("user_roles").select("role_level").eq("user_id", supabaseUser.id).single();
-      let profilePromise = null;
-      if (userProfileTable) {
-        profilePromise = supabase.from(userProfileTable).select(roleColumn).eq("id", supabaseUser.id).single();
-      }
-      const [roleResult, profileResult] = await Promise.race([
-        Promise.all([
-          rolePromise,
-          profilePromise || Promise.resolve(null)
-        ]),
-        timeoutPromise.then(() => {
-          throw new Error("Timeout");
-        })
+      const roleResult = await Promise.race([
+        rolePromise,
+        timeoutPromise
+        // Fixed: removed .then() which was causing the bug
       ]);
       let roleLevel = void 0;
       if (roleResult && !roleResult.error && roleResult.data) {
         roleLevel = roleResult.data.role_level;
-      } else if (roleResult?.error) {
+      } else if (roleResult?.error && roleResult.error.code !== "PGRST116") {
         console.log("Error fetching role_level:", roleResult.error.message);
       }
-      let roleValue = void 0;
-      if (profileResult && !profileResult.error && profileResult.data) {
-        roleValue = profileResult.data[roleColumn];
-      }
       return {
         ...basicUser,
-        role: roleValue,
         role_level: roleLevel
       };
     } catch (err) {
-      console.error("Error fetching user details:", err);
+      if (err instanceof Error && err.message.includes("timeout")) {
+        console.warn("Auth fetch timeout - using basic user info");
+      }
       return basicUser;
     }
-  }, [supabase, userProfileTable, roleColumn]);
+  }, [supabase]);
   React19.useEffect(() => {
     if (!supabase) return;
     let mounted = true;
@@ -4999,6 +5037,7 @@ var AuthProvider = ({ children }) => {
       }
     }, 1e4);
     const initializeAuth = async () => {
+      const startTime = performance.now();
       try {
         const { data: { session: initialSession }, error: sessionError } = await supabase.auth.getSession();
         if (!mounted) return;
@@ -5041,12 +5080,38 @@ var AuthProvider = ({ children }) => {
         if (mounted) {
           setLoading(false);
           clearTimeout(safetyTimeout);
+          const duration = performance.now() - startTime;
+          if (duration > 3e3) {
+            console.warn(`[Auth] Initialization took ${duration.toFixed(0)}ms - consider optimization`);
+          } else if (process.env.NODE_ENV === "development") {
+            console.log(`[Auth] Initialized in ${duration.toFixed(0)}ms`);
+          }
         }
       }
     };
     initializeAuth();
-    const { data: { subscription } } = supabase.auth.onAuthStateChange(async (_event, currentSession) => {
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(async (event, currentSession) => {
       if (!mounted) return;
+      console.log("[AuthContext] Auth event fired:", {
+        event,
+        sessionId: currentSession?.user?.id,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        currentPath: typeof window !== "undefined" ? window.location.pathname : "unknown"
+      });
+      if (event === "TOKEN_REFRESHED") {
+        if (session?.user?.id === currentSession?.user?.id && session?.user?.email === currentSession?.user?.email) {
+          console.log("[AuthContext] Skipping TOKEN_REFRESHED - session unchanged");
+          return;
+        }
+      }
+      if (event !== "TOKEN_REFRESHED" && currentSession?.user) {
+        console.log("[AuthContext] Non-TOKEN_REFRESHED event will trigger fetchUserDetails:", event);
+      }
+      const sessionChanged = session?.user?.id !== currentSession?.user?.id || session?.user?.email !== currentSession?.user?.email;
+      if (!sessionChanged && user) {
+        console.log("[AuthContext] Session and user unchanged, skipping update");
+        return;
+      }
       setSession(currentSession);
       setUser(null);
       setLoading(false);
@@ -6967,16 +7032,12 @@ var useTargets = (options) => {
 };
 var DEFAULT_SHIFTS_TABLE_NAME = "shift_configurations";
 var useShifts = () => {
-  const { supabaseUrl, supabaseKey } = useDashboardConfig();
   const { companyId } = useEntityConfig();
   const { tables } = useDatabaseConfig();
+  const supabase = useSupabase();
   const [shifts, setShifts] = React19.useState([]);
   const [isLoading, setIsLoading] = React19.useState(true);
   const [error, setError] = React19.useState(null);
-  const supabase = React19.useMemo(() => {
-    if (!supabaseUrl || !supabaseKey) return null;
-    return supabaseJs.createClient(supabaseUrl, supabaseKey);
-  }, [supabaseUrl, supabaseKey]);
   const shiftsTable = tables?.shiftConfigurations || DEFAULT_SHIFTS_TABLE_NAME;
   const fetchData = React19.useCallback(async () => {
     if (!supabase) {
@@ -7675,6 +7736,7 @@ var runtimeWorkspaceDisplayNames = {};
 var isInitialized = false;
 var isInitializing = false;
 var initializedWithLineIds = [];
+var initializationPromise = null;
 function getCurrentLineIds() {
   try {
     const config = _getDashboardConfigInstance();
@@ -7695,52 +7757,79 @@ function getCurrentLineIds() {
 }
 async function initializeWorkspaceDisplayNames(explicitLineId) {
   console.log("\u{1F504} initializeWorkspaceDisplayNames called", { isInitialized, isInitializing, explicitLineId });
-  if (isInitialized || isInitializing) return;
-  isInitializing = true;
-  try {
-    console.log("\u{1F504} Starting Supabase workspace display names initialization...");
-    let targetLineIds = [];
-    if (explicitLineId) {
-      targetLineIds = [explicitLineId];
-    } else {
-      targetLineIds = getCurrentLineIds();
+  if (isInitialized) return;
+  if (initializationPromise) {
+    console.log("\u{1F504} Already initializing, waiting for existing initialization...");
+    await initializationPromise;
+    return;
+  }
+  initializationPromise = (async () => {
+    isInitializing = true;
+    try {
+      console.log("\u{1F504} Starting Supabase workspace display names initialization...");
+      let targetLineIds = [];
+      if (explicitLineId) {
+        targetLineIds = [explicitLineId];
+      } else {
+        targetLineIds = getCurrentLineIds();
+      }
+      console.log("\u{1F504} Target line IDs for workspace filtering:", targetLineIds);
+      runtimeWorkspaceDisplayNames = {};
+      if (targetLineIds.length > 0) {
+        for (const lineId of targetLineIds) {
+          console.log(`\u{1F504} Fetching workspaces for line: ${lineId}`);
+          const lineDisplayNamesMap = await workspaceService.getWorkspaceDisplayNames(void 0, lineId);
+          runtimeWorkspaceDisplayNames[lineId] = {};
+          lineDisplayNamesMap.forEach((displayName, workspaceId) => {
+            runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
+          });
+          console.log(`\u2705 Stored ${lineDisplayNamesMap.size} workspaces for line ${lineId}`);
+        }
+      } else {
+        console.warn("\u26A0\uFE0F No line IDs found, fetching all workspaces (less efficient)");
+        const allWorkspacesMap = await workspaceService.getWorkspaceDisplayNames();
+        runtimeWorkspaceDisplayNames["global"] = {};
+        allWorkspacesMap.forEach((displayName, workspaceId) => {
+          runtimeWorkspaceDisplayNames["global"][workspaceId] = displayName;
+        });
+      }
+      isInitialized = true;
+      initializedWithLineIds = targetLineIds;
+      console.log("\u2705 Workspace display names initialized from Supabase:", runtimeWorkspaceDisplayNames);
+      console.log("\u2705 Initialized with line IDs:", initializedWithLineIds);
+    } catch (error) {
+      console.error("\u274C Failed to initialize workspace display names from Supabase:", error);
+    } finally {
+      isInitializing = false;
+      initializationPromise = null;
     }
-    console.log("\u{1F504} Target line IDs for workspace filtering:", targetLineIds);
-    runtimeWorkspaceDisplayNames = {};
-    if (targetLineIds.length > 0) {
-      for (const lineId of targetLineIds) {
-        console.log(`\u{1F504} Fetching workspaces for line: ${lineId}`);
+  })();
+  await initializationPromise;
+}
+var preInitializeWorkspaceDisplayNames = async (lineId) => {
+  console.log("\u{1F504} preInitializeWorkspaceDisplayNames called for lineId:", lineId);
+  if (isInitialized) {
+    console.log("\u{1F504} Already initialized");
+    if (lineId && !runtimeWorkspaceDisplayNames[lineId]) {
+      console.log(`\u{1F504} Line ${lineId} not in cache, fetching...`);
+      try {
         const lineDisplayNamesMap = await workspaceService.getWorkspaceDisplayNames(void 0, lineId);
         runtimeWorkspaceDisplayNames[lineId] = {};
         lineDisplayNamesMap.forEach((displayName, workspaceId) => {
           runtimeWorkspaceDisplayNames[lineId][workspaceId] = displayName;
         });
-        console.log(`\u2705 Stored ${lineDisplayNamesMap.size} workspaces for line ${lineId}`);
+        console.log(`\u2705 Added ${lineDisplayNamesMap.size} workspaces for line ${lineId}`);
+      } catch (error) {
+        console.error(`\u274C Failed to fetch workspaces for line ${lineId}:`, error);
       }
-    } else {
-      console.warn("\u26A0\uFE0F No line IDs found, fetching all workspaces (less efficient)");
-      const allWorkspacesMap = await workspaceService.getWorkspaceDisplayNames();
-      runtimeWorkspaceDisplayNames["global"] = {};
-      allWorkspacesMap.forEach((displayName, workspaceId) => {
-        runtimeWorkspaceDisplayNames["global"][workspaceId] = displayName;
-      });
     }
-    isInitialized = true;
-    initializedWithLineIds = targetLineIds;
-    console.log("\u2705 Workspace display names initialized from Supabase:", runtimeWorkspaceDisplayNames);
-    console.log("\u2705 Initialized with line IDs:", initializedWithLineIds);
-  } catch (error) {
-    console.error("\u274C Failed to initialize workspace display names from Supabase:", error);
-  } finally {
-    isInitializing = false;
+    return;
   }
-}
-var preInitializeWorkspaceDisplayNames = async (lineId) => {
-  console.log("\u{1F504} preInitializeWorkspaceDisplayNames called for lineId:", lineId);
-  if (isInitialized || isInitializing) {
-    console.log("\u{1F504} Already initialized or initializing");
+  if (initializationPromise) {
+    console.log("\u{1F504} Already initializing, waiting for completion...");
+    await initializationPromise;
     if (lineId && !runtimeWorkspaceDisplayNames[lineId]) {
-      console.log(`\u{1F504} Line ${lineId} not in cache, fetching...`);
+      console.log(`\u{1F504} Line ${lineId} not in cache after init, fetching...`);
       try {
         const lineDisplayNamesMap = await workspaceService.getWorkspaceDisplayNames(void 0, lineId);
         runtimeWorkspaceDisplayNames[lineId] = {};
@@ -7758,7 +7847,12 @@ var preInitializeWorkspaceDisplayNames = async (lineId) => {
 };
 var forceRefreshWorkspaceDisplayNames = async (lineId) => {
   console.log("\u{1F504} forceRefreshWorkspaceDisplayNames called for lineId:", lineId);
+  if (initializationPromise) {
+    console.log("\u{1F504} Waiting for existing initialization to complete before refresh...");
+    await initializationPromise;
+  }
   clearWorkspaceDisplayNamesCache();
+  initializationPromise = null;
   await initializeWorkspaceDisplayNames(lineId);
 };
 console.log("\u{1F504} Module loaded, will initialize lazily when first function is called");
@@ -7906,6 +8000,7 @@ var clearWorkspaceDisplayNamesCache = () => {
   isInitialized = false;
   isInitializing = false;
   initializedWithLineIds = [];
+  initializationPromise = null;
 };
 
 // src/lib/hooks/useWorkspaceDisplayNames.ts
@@ -11542,7 +11637,18 @@ var usePrefetchClipCounts = ({
   }, [subscriberId]);
   const prefetchParams = React19.useMemo(() => {
     const operationalDate = date || getOperationalDate();
-    const shiftStr = shift?.toString() || "0";
+    let shiftStr;
+    if (shift !== void 0 && shift !== null) {
+      shiftStr = shift.toString();
+      console.log(`[usePrefetchClipCounts] Using provided shift: ${shiftStr} for date: ${operationalDate}`);
+    } else if (date) {
+      shiftStr = "0";
+      console.log(`[usePrefetchClipCounts] No shift provided for historical date ${date}, defaulting to day shift (0)`);
+    } else {
+      const currentShift = getCurrentShift2();
+      shiftStr = currentShift.shiftId.toString();
+      console.log(`[usePrefetchClipCounts] Using current operational shift: ${shiftStr} (${currentShift.shiftName})`);
+    }
     return {
       workspaceId: workspaceId || "",
       date: operationalDate,
@@ -19546,11 +19652,13 @@ var withAuth = (WrappedComponent2, options) => {
     requireAuth: true,
     ...options
   };
-  return function WithAuthComponent(props) {
+  const WithAuthComponent = React19__namespace.memo(function WithAuthComponent2(props) {
     const { session, loading } = useAuth();
     const router$1 = router.useRouter();
     React19__namespace.useEffect(() => {
-      console.log("withAuth state:", { loading, hasSession: !!session, requireAuth: defaultOptions.requireAuth });
+      if (process.env.NODE_ENV === "development" && process.env.DEBUG_AUTH === "true") {
+        console.log("withAuth state:", { loading, hasSession: !!session, requireAuth: defaultOptions.requireAuth });
+      }
     }, [session, loading]);
     React19__namespace.useEffect(() => {
       if (!loading && defaultOptions.requireAuth && !session) {
@@ -19565,7 +19673,9 @@ var withAuth = (WrappedComponent2, options) => {
       return null;
     }
     return /* @__PURE__ */ jsxRuntime.jsx(WrappedComponent2, { ...props });
-  };
+  });
+  WithAuthComponent.displayName = `withAuth(${WrappedComponent2.displayName || WrappedComponent2.name || "Component"})`;
+  return WithAuthComponent;
 };
 var LoginPage = ({
   onRateLimitCheck,
@@ -26153,7 +26263,7 @@ var BottlenecksContent = ({
   const [duration, setDuration] = React19.useState(0);
   const [currentIndex, setCurrentIndex] = React19.useState(0);
   const [activeFilter, setActiveFilter] = React19.useState(initialFilter);
-  const previousFilterRef = React19.useRef(initialFilter);
+  const previousFilterRef = React19.useRef("");
   const [allVideos, setAllVideos] = React19.useState([]);
   const [isLoading, setIsLoading] = React19.useState(true);
   const [isCategoryLoading, setIsCategoryLoading] = React19.useState(false);
@@ -26203,8 +26313,23 @@ var BottlenecksContent = ({
       console.warn("S3 configuration not found in dashboard config");
       return null;
     }
-    return new S3ClipsService(dashboardConfig);
+    return videoPrefetchManager.getS3Service(dashboardConfig);
   }, [dashboardConfig]);
+  const effectiveShift = React19.useMemo(() => {
+    if (shift !== void 0 && shift !== null) {
+      const shiftStr = shift.toString();
+      console.log(`[BottlenecksContent] Using provided shift: ${shiftStr} for date: ${date}`);
+      return shiftStr;
+    }
+    if (date) {
+      console.log(`[BottlenecksContent] No shift provided for historical date ${date}, defaulting to day shift (0)`);
+      return "0";
+    } else {
+      const currentShift = getCurrentShift2();
+      console.log(`[BottlenecksContent] Using current operational shift: ${currentShift.shiftId} (${currentShift.shiftName})`);
+      return currentShift.shiftId.toString();
+    }
+  }, [shift, date]);
   const {
     data: prefetchData,
     isFullyIndexed,
@@ -26213,7 +26338,7 @@ var BottlenecksContent = ({
   } = usePrefetchClipCounts({
     workspaceId,
     date: date || getOperationalDate(),
-    shift: shift?.toString() || "0",
+    shift: effectiveShift,
     enabled: !!workspaceId && !!s3ClipsService,
     buildIndex: true
   });
@@ -26227,7 +26352,7 @@ var BottlenecksContent = ({
     fetchInProgressRef.current.add(operationKey);
     try {
       const operationalDate = date || getOperationalDate();
-      const shiftStr = shift?.toString() || "0";
+      const shiftStr = effectiveShift;
       console.log(`[BottlenecksContent] Fetching clip counts directly for ${workspaceId}`);
       const cacheKey = `clip-counts:${workspaceId}:${operationalDate}:${shiftStr}`;
       const cachedResult = await smartVideoCache.getClipCounts(cacheKey);
@@ -26268,7 +26393,7 @@ var BottlenecksContent = ({
     } finally {
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, shift, dashboardConfig, updateClipCounts, updateVideoIndex]);
+  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts, updateVideoIndex]);
   const loadingCategoryRef = React19.useRef(null);
   const videoRetryCountRef = React19.useRef(0);
   const loadingVideosRef = React19.useRef(/* @__PURE__ */ new Set());
@@ -26310,13 +26435,13 @@ var BottlenecksContent = ({
             index,
             true,
             // includeCycleTime - OK for preloading
-            true
-            // includeMetadata - OK for just +3/-1 videos, not ALL videos
+            false
+            // includeMetadata - NO metadata during bulk preloading to prevent flooding
           );
         }
         if (!video) {
           const operationalDate = date || getOperationalDate();
-          const shiftStr = shift?.toString() || "0";
+          const shiftStr = effectiveShift;
           video = await s3ClipsService.getClipByIndex(
             workspaceId,
             operationalDate,
@@ -26325,8 +26450,8 @@ var BottlenecksContent = ({
             index,
             true,
             // includeCycleTime - OK for preloading
-            true
-            // includeMetadata - OK for just +3/-1 videos, not ALL videos
+            false
+            // includeMetadata - NO metadata during bulk preloading to prevent flooding
           );
         }
         if (video && isMountedRef.current) {
@@ -26349,7 +26474,7 @@ var BottlenecksContent = ({
     Promise.all(loadPromises).catch((err) => {
       console.warn("[ensureVideosLoaded] Some videos failed to preload:", err);
     });
-  }, [s3ClipsService, workspaceId, clipCounts, sopCategories, date, shift]);
+  }, [s3ClipsService, workspaceId, clipCounts, sopCategories, date, effectiveShift]);
   const loadFirstVideoForCategory = React19.useCallback(async (category) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     const targetCategory = category || activeFilterRef.current;
@@ -26365,7 +26490,7 @@ var BottlenecksContent = ({
     }
     try {
       const operationalDate = date || getOperationalDate();
-      const shiftStr = shift?.toString() || "0";
+      const shiftStr = effectiveShift;
       if (!clipCounts[targetCategory] && !videoIndex) {
         const cacheKey = `clip-counts:${workspaceId}:${operationalDate}:${shiftStr}`;
         const cachedResult = await smartVideoCache.getClipCounts(cacheKey);
@@ -26386,8 +26511,16 @@ var BottlenecksContent = ({
         );
         if (firstVideo) {
           console.log(`[BottlenecksContent] Successfully loaded first video via direct S3 method`);
-          setAllVideos([firstVideo]);
+          setAllVideos((prev) => {
+            const exists = prev.some((v) => v.id === firstVideo.id);
+            if (!exists) {
+              return [...prev, firstVideo];
+            }
+            return prev;
+          });
           preloadVideoUrl(firstVideo.src);
+          setIsLoading(false);
+          setHasInitialLoad(true);
           loadingCategoryRef.current = null;
           setIsCategoryLoading(false);
           return;
@@ -26410,7 +26543,13 @@ var BottlenecksContent = ({
           );
           if (firstVideo && isMountedRef.current) {
             console.log(`[BottlenecksContent] Successfully loaded first video via video index`);
-            setAllVideos([firstVideo]);
+            setAllVideos((prev) => {
+              const exists = prev.some((v) => v.id === firstVideo.id);
+              if (!exists) {
+                return [...prev, firstVideo];
+              }
+              return prev;
+            });
             preloadVideoUrl(firstVideo.src);
             setIsCategoryLoading(false);
             return;
@@ -26433,17 +26572,19 @@ var BottlenecksContent = ({
       loadingCategoryRef.current = null;
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, clipCounts, videoIndex, shift, updateClipCounts, updateVideoIndex]);
+  }, [workspaceId, date, s3ClipsService, clipCounts, videoIndex, effectiveShift, updateClipCounts, updateVideoIndex]);
   React19.useEffect(() => {
-    if (s3ClipsService) {
+    if (s3ClipsService && !prefetchData) {
       fetchClipCounts();
     }
-  }, [workspaceId, date, shift, s3ClipsService, fetchClipCounts, updateClipCounts, updateVideoIndex]);
+  }, [workspaceId, date, effectiveShift, s3ClipsService, fetchClipCounts, updateClipCounts, updateVideoIndex, prefetchData]);
   React19.useEffect(() => {
     if (prefetchData) {
       console.log(`[BottlenecksContent] Received prefetch update - status: ${prefetchStatus}, videos: ${prefetchData.videoIndex.allVideos.length}, ID: ${prefetchData.videoIndex._debugId || "NO_ID"}`);
       updateClipCounts(prefetchData.counts);
-      updateVideoIndex(prefetchData.videoIndex);
+      if (prefetchData.videoIndex.allVideos.length > 0) {
+        updateVideoIndex(prefetchData.videoIndex);
+      }
       if (!hasInitialLoad && prefetchData.videoIndex.allVideos.length > 0) {
         setIsLoading(false);
         setHasInitialLoad(true);
@@ -26451,12 +26592,45 @@ var BottlenecksContent = ({
     }
   }, [prefetchData, prefetchStatus, updateClipCounts, updateVideoIndex, hasInitialLoad]);
   React19.useEffect(() => {
-    if (s3ClipsService && videoIndex && clipCounts[activeFilter] > 0) {
-      if (allVideos.length === 0) {
+    if (s3ClipsService && clipCounts[activeFilter] > 0) {
+      const hasVideosForCurrentFilter = allVideos.some((video) => {
+        if (sopCategories && sopCategories.length > 0) {
+          const selectedCategory = sopCategories.find((cat) => cat.id === activeFilter);
+          if (selectedCategory) {
+            return video.type === selectedCategory.id;
+          }
+        }
+        if (activeFilter === "all") return true;
+        if (activeFilter === "low_value") {
+          return video.type === "low_value";
+        }
+        if (activeFilter === "idle_time") {
+          return video.type === "idle_time";
+        }
+        if (activeFilter === "sop_deviations") {
+          return video.type === "missing_quality_check";
+        }
+        if (activeFilter === "best_cycle_time") {
+          return video.type === "best_cycle_time";
+        }
+        if (activeFilter === "worst_cycle_time") {
+          return video.type === "worst_cycle_time";
+        }
+        if (activeFilter === "cycle_completion") {
+          return video.type === "cycle_completion";
+        }
+        if (activeFilter === "long_cycle_time") {
+          return video.type === "long_cycle_time";
+        }
+        return video.type === "bottleneck" && video.severity === activeFilter;
+      });
+      if (!hasVideosForCurrentFilter) {
         loadFirstVideoForCategory(activeFilter);
+      } else {
+        setIsCategoryLoading(false);
       }
     }
-  }, [activeFilter, s3ClipsService, videoIndex, clipCounts, loadFirstVideoForCategory, allVideos.length]);
+  }, [activeFilter, s3ClipsService, videoIndex, clipCounts, loadFirstVideoForCategory, allVideos, sopCategories]);
   React19.useEffect(() => {
     if (previousFilterRef.current !== activeFilter) {
       console.log(`Filter changed from ${previousFilterRef.current} to ${activeFilter} - resetting to first video`);
@@ -26590,7 +26764,7 @@ var BottlenecksContent = ({
         }
         if (!video && s3ClipsService) {
           const operationalDate = date || getOperationalDate();
-          const shiftStr = shift?.toString() || "0";
+          const shiftStr = effectiveShift;
           video = await s3ClipsService.getClipByIndex(
             workspaceId,
             operationalDate,
@@ -26626,7 +26800,7 @@ var BottlenecksContent = ({
         }
       }
     }
-  }, [clipCounts, filteredVideos.length, s3ClipsService, workspaceId, date, shift]);
+  }, [clipCounts, filteredVideos.length, s3ClipsService, workspaceId, date, effectiveShift]);
   const handlePrevious = React19.useCallback(() => {
     if (!isMountedRef.current) return;
     const currentIdx = currentIndexRef.current;
@@ -26639,14 +26813,39 @@ var BottlenecksContent = ({
       }
     }
   }, [filteredVideos.length]);
+  const currentVideo = React19.useMemo(() => {
+    if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
+      return null;
+    }
+    return filteredVideos[currentIndex];
+  }, [filteredVideos, currentIndex]);
   const handleVideoReady = React19.useCallback((player) => {
     console.log("Video.js player ready");
   }, []);
-  const handleVideoPlay = React19.useCallback((player) => {
+  const handleVideoPlay = React19.useCallback(async (player) => {
     setIsPlaying(true);
     const currentIdx = currentIndexRef.current;
     ensureVideosLoaded(currentIdx);
-  }, []);
+    if (currentVideo && !currentVideo.creation_timestamp && s3ClipsService) {
+      try {
+        const originalUri = currentVideo.originalUri || currentVideo.src;
+        if (originalUri && originalUri.includes("s3://")) {
+          const metadata = await s3ClipsService.getFullMetadata(originalUri);
+          if (metadata && isMountedRef.current) {
+            setAllVideos((prev) => prev.map(
+              (v) => v.id === currentVideo.id ? {
+                ...v,
+                creation_timestamp: metadata.upload_timestamp || metadata.original_task_metadata?.timestamp || metadata.creation_timestamp,
+                cycle_time_seconds: metadata.original_task_metadata?.cycle_time || v.cycle_time_seconds
+              } : v
+            ));
+          }
+        }
+      } catch (error2) {
+        console.warn("[BottlenecksContent] Failed to load metadata for current video:", error2);
+      }
+    }
+  }, [currentVideo, s3ClipsService]);
   const handleVideoPause = React19.useCallback((player) => {
     setIsPlaying(false);
   }, []);
@@ -26673,13 +26872,6 @@ var BottlenecksContent = ({
       fetchInProgressRef.current.clear();
       setIsCategoryLoading(false);
       setIsNavigating(false);
-      if (s3ClipsService) {
-        try {
-          s3ClipsService.dispose();
-        } catch (error2) {
-          console.warn("[BottlenecksContent] Error disposing S3 service:", error2);
-        }
-      }
     };
   }, [s3ClipsService]);
   React19.useEffect(() => {
@@ -26720,12 +26912,6 @@ var BottlenecksContent = ({
     counts.bottlenecks = counts.bottleneck || counts.bottlenecks || 0;
     return counts;
   }, [clipCounts]);
-  const currentVideo = React19.useMemo(() => {
-    if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
-      return null;
-    }
-    return filteredVideos[currentIndex];
-  }, [filteredVideos, currentIndex]);
   const getClipTypeLabel = (video) => {
     if (!video) return "";
     switch (video.type) {
@@ -26960,8 +27146,8 @@ var BottlenecksContent = ({
       ] }),
       /* Priority 1: Show loading if initial load hasn't completed yet */
       isLoading && !hasInitialLoad ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading clips..." }) }) }) }) : (
-        /* Priority 2: Show loading if category is loading (prevents "no matching clips" flash) */
-        isCategoryLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading videos..." }) }) }) }) : (
+        /* Priority 2: Show loading if category is loading BUT only if no video is available */
+        isCategoryLoading && (!filteredVideos.length || !currentVideo) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading videos..." }) }) }) }) : (
           /* Priority 3: Show loading if navigating and current video not available */
           isNavigating || currentIndex >= filteredVideos.length && currentIndex < clipCounts[activeFilter] ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }) }) }) : (
             /* Priority 4: Show video if we have filtered videos and current video */
@@ -31759,9 +31945,25 @@ function withWorkspaceDisplayNames(Component3, options = {}) {
   return function WithWorkspaceDisplayNamesWrapper(props) {
     const [isInitialized2, setIsInitialized] = React19.useState(false);
     const [error, setError] = React19.useState(null);
+    const [lastInitKey, setLastInitKey] = React19.useState("");
+    const lineIdsKey = React19.useMemo(() => {
+      if (!props.lineIds) return "";
+      if (Array.isArray(props.lineIds)) {
+        return props.lineIds.sort().join(",");
+      }
+      const values = Object.values(props.lineIds).filter(Boolean);
+      return values.sort().join(",");
+    }, [props.lineIds]);
+    const initKey = React19.useMemo(() => {
+      return `${lineIdsKey}-${props.selectedLineId || ""}-${props.factoryViewId || ""}-${initializeFor}`;
+    }, [lineIdsKey, props.selectedLineId, props.factoryViewId]);
     React19.useEffect(() => {
-      setIsInitialized(false);
-      setError(null);
+      if (initKey === lastInitKey && isInitialized2) {
+        return;
+      }
+      if (initKey !== lastInitKey) {
+        setError(null);
+      }
       const initializeDisplayNames = async () => {
         try {
           const { lineIds, selectedLineId, factoryViewId } = props;
@@ -31787,20 +31989,17 @@ function withWorkspaceDisplayNames(Component3, options = {}) {
             await preInitializeWorkspaceDisplayNames();
           }
           setIsInitialized(true);
+          setLastInitKey(initKey);
         } catch (err) {
           console.error("Failed to initialize workspace display names:", err);
           setError(err);
           setIsInitialized(true);
+          setLastInitKey(initKey);
         }
       };
       initializeDisplayNames();
-    }, [
-      Array.isArray(props.lineIds) ? props.lineIds.join(",") : JSON.stringify(props.lineIds),
-      props.selectedLineId,
-      props.factoryViewId,
-      initializeFor
-    ]);
-    if (!isInitialized2 && showLoading) {
+    }, [initKey]);
+    if (!isInitialized2 && showLoading && lastInitKey === "") {
       return /* @__PURE__ */ jsxRuntime.jsx(LoadingPage, { message: loadingMessage });
     }
     if (error && showLoading) {
@@ -33871,7 +34070,15 @@ var ShiftsView = ({
   className = ""
 }) => {
   const supabase = useSupabase();
-  const auth = useAuth();
+  React19.useEffect(() => {
+    console.log("[ShiftsView] Component mounted/re-rendered", {
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      lineIds: lineIds.length
+    });
+    return () => {
+      console.log("[ShiftsView] Component unmounting");
+    };
+  }, []);
   const [lineConfigs, setLineConfigs] = React19.useState(
     () => lineIds.map((id3) => ({
       id: id3,
@@ -33969,7 +34176,7 @@ var ShiftsView = ({
       }
     };
     fetchShiftConfigs();
-  }, [supabase, lineIds, showToast]);
+  }, [lineIds, showToast]);
   React19.useCallback((lineId) => {
     setLineConfigs((prev) => {
       const typedPrev = prev;
@@ -34162,7 +34369,6 @@ var ShiftsView = ({
     }));
   }, []);
   const handleSaveShifts = React19.useCallback(async (lineId) => {
-    if (!auth.user?.id && false) ;
     setLineConfigs((prev) => prev.map(
       (config) => config.id === lineId ? { ...config, isSaving: true, saveSuccess: false } : config
     ));
@@ -34209,7 +34415,7 @@ var ShiftsView = ({
         (config) => config.id === lineId ? { ...config, isSaving: false, saveSuccess: false } : config
       ));
     }
-  }, [auth.user?.id, lineConfigs, supabase, showToast]);
+  }, [lineConfigs, supabase, showToast]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -34317,6 +34523,7 @@ var ShiftsView = ({
     ] })
   ] });
 };
+var AuthenticatedShiftsView = withAuth(React19__namespace.default.memo(ShiftsView));
 var ShiftsView_default = ShiftsView;
 
 // src/lib/constants/actions.ts
@@ -35104,6 +35311,7 @@ var TargetsViewUI = ({
   isLoading,
   lineWorkspaces,
   lineNames,
+  dropdownStates,
   savingLines,
   saveSuccess,
   selectedShift,
@@ -35189,13 +35397,13 @@ var TargetsViewUI = ({
                   {
                     onClick: () => onToggleLineDropdown(lineId),
                     className: "flex items-center gap-3 text-lg font-medium transition-colors duration-200 \n                          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n                          hover:bg-blue-50 px-3 py-2 group",
-                    "aria-expanded": line.isOpen,
+                    "aria-expanded": dropdownStates[lineId],
                     "aria-controls": `line-${lineId}-content`,
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         lucideReact.ChevronDown,
                         {
-                          className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${line.isOpen ? "rotate-180" : ""}`
+                          className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
@@ -35242,7 +35450,7 @@ var TargetsViewUI = ({
                 )
               ] })
             ] }) }),
-            line.isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `line-${lineId}-content`, className: "border-t border-gray-200", children: [
+            dropdownStates[lineId] && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `line-${lineId}-content`, className: "border-t border-gray-200", children: [
               skuEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700", children: "Select SKU:" }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -35279,68 +35487,71 @@ var TargetsViewUI = ({
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: "pieces per day" })
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: line.workspaces.map((workspace) => /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "px-6 py-4 hover:bg-gray-50 transition-all duration-200",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-6 items-center", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: formatWorkspaceName(workspace.name, lineId) }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      "select",
-                      {
-                        value: workspace.actionType,
-                        onChange: (e) => {
-                          const newActionType = e.target.value;
-                          onActionTypeChange(lineId, workspace.id, newActionType);
-                        },
-                        className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
-                        "aria-label": `Action type for ${formatWorkspaceName(workspace.name, lineId)}`,
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
-                        ]
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
-                      {
-                        type: "number",
-                        value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
-                        onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
-                        className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400",
-                        min: "0",
-                        step: "0.01",
-                        placeholder: "Enter cycle time"
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
-                      {
-                        type: "number",
-                        value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
-                        onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
-                        className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400 \n                                  placeholder:text-gray-400",
-                        min: "0",
-                        step: "0.1",
-                        placeholder: "Enter PPH"
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
-                      {
-                        type: "number",
-                        value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
-                        onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
-                        className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400 \n                                  placeholder:text-gray-400",
-                        min: "0",
-                        step: "1",
-                        placeholder: "Enter day output"
-                      }
-                    ) })
-                  ] })
-                },
-                workspace.id
-              )) })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: line.workspaces.map((workspace) => {
+                const formattedName = formatWorkspaceName(workspace.name, lineId);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "px-6 py-4 hover:bg-gray-50 transition-all duration-200",
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-6 items-center", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                        "select",
+                        {
+                          value: workspace.actionType,
+                          onChange: (e) => {
+                            const newActionType = e.target.value;
+                            onActionTypeChange(lineId, workspace.id, newActionType);
+                          },
+                          className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
+                          "aria-label": `Action type for ${formattedName}`,
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "number",
+                          value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
+                          onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
+                          className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400",
+                          min: "0",
+                          step: "0.01",
+                          placeholder: "Enter cycle time"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "number",
+                          value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
+                          onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
+                          className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400 \n                                  placeholder:text-gray-400",
+                          min: "0",
+                          step: "0.1",
+                          placeholder: "Enter PPH"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "number",
+                          value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
+                          onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
+                          className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                                  shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                                  transition-all duration-200 hover:border-gray-400 \n                                  placeholder:text-gray-400",
+                          min: "0",
+                          step: "1",
+                          placeholder: "Enter day output"
+                        }
+                      ) })
+                    ] })
+                  },
+                  workspace.id
+                );
+              }) })
             ] })
           ]
         },
@@ -35373,7 +35584,6 @@ var TargetsView = ({
     return lineIds.reduce((acc, lineId) => ({
       ...acc,
       [lineId]: {
-        isOpen: getStoredLineState2(lineId),
         productId: "",
         shiftStartTime: "08:00",
         shiftEndTime: "19:00",
@@ -35386,6 +35596,12 @@ var TargetsView = ({
       }
     }), {});
   }, [lineIds]);
+  const [dropdownStates, setDropdownStates] = React19.useState(() => {
+    return lineIds.reduce((acc, lineId) => ({
+      ...acc,
+      [lineId]: getStoredLineState2(lineId)
+    }), {});
+  });
   const [allShiftsData, setAllShiftsData] = React19.useState({
     0: initialLineWorkspaces,
     // Day shift
@@ -35403,6 +35619,8 @@ var TargetsView = ({
   const [isBulkConfigureOpen, setIsBulkConfigureOpen] = React19.useState(false);
   const [selectedWorkspaces, setSelectedWorkspaces] = React19.useState([]);
   const [selectedShift, setSelectedShift] = React19.useState(0);
+  const [dbValues, setDbValues] = React19.useState({ 0: {}, 1: {} });
+  const [userEditedFields, setUserEditedFields] = React19.useState(/* @__PURE__ */ new Set());
   const lineWorkspaces = allShiftsData[selectedShift] || initialLineWorkspaces;
   const setLineWorkspaces = React19.useCallback((updater) => {
     setAllShiftsData((prev) => ({
@@ -35411,18 +35629,123 @@ var TargetsView = ({
     }));
   }, [selectedShift]);
   const supabase = useSupabase();
-  const auth = useAuth();
-  userId || auth?.user?.id;
+  const effectiveUserId = userId || "6bf6f271-1e55-4a95-9b89-1c3820b58739";
   const dashboardConfig = useDashboardConfig();
   const { skus, isLoading: skusLoading } = useSKUs(companyId);
   const skuEnabled = dashboardConfig?.skuConfig?.enabled || false;
+  const loadOperatingHours = React19.useCallback(async (lineId, shiftId) => {
+    try {
+      if (!supabase) return null;
+      const { data, error } = await supabase.from("line_operating_hours").select("start_time, end_time, breaks").eq("line_id", lineId).eq("shift_id", shiftId).maybeSingle();
+      if (error) {
+        if (error.code === "PGRST116") {
+          console.log(`No operating hours found for line ${lineId}, shift ${shiftId}`);
+          return {
+            startTime: "08:00",
+            // Default values
+            endTime: "19:00",
+            breaks: []
+          };
+        } else {
+          console.error("Error fetching operating hours:", error);
+          return null;
+        }
+      }
+      let breaks = [];
+      if (data?.breaks) {
+        if (Array.isArray(data.breaks)) {
+          breaks = data.breaks.map((breakItem) => {
+            const startTime = breakItem.start || breakItem.startTime || "00:00";
+            const endTime = breakItem.end || breakItem.endTime || "00:00";
+            const calculateDuration = (start, end) => {
+              const [startHour, startMinute] = start.split(":").map(Number);
+              const [endHour, endMinute] = end.split(":").map(Number);
+              let startMinutes = startHour * 60 + startMinute;
+              let endMinutes = endHour * 60 + endMinute;
+              if (endMinutes < startMinutes) {
+                endMinutes += 24 * 60;
+              }
+              return endMinutes - startMinutes;
+            };
+            return {
+              startTime,
+              endTime,
+              duration: breakItem.duration || calculateDuration(startTime, endTime)
+            };
+          });
+        } else if (typeof data.breaks === "object" && data.breaks.breaks) {
+          breaks = data.breaks.breaks.map((breakItem) => {
+            const startTime = breakItem.start || breakItem.startTime || "00:00";
+            const endTime = breakItem.end || breakItem.endTime || "00:00";
+            const calculateDuration = (start, end) => {
+              const [startHour, startMinute] = start.split(":").map(Number);
+              const [endHour, endMinute] = end.split(":").map(Number);
+              let startMinutes = startHour * 60 + startMinute;
+              let endMinutes = endHour * 60 + endMinute;
+              if (endMinutes < startMinutes) {
+                endMinutes += 24 * 60;
+              }
+              return endMinutes - startMinutes;
+            };
+            return {
+              startTime,
+              endTime,
+              duration: breakItem.duration || calculateDuration(startTime, endTime)
+            };
+          });
+        } else if (typeof data.breaks === "string") {
+          try {
+            const parsedBreaks = JSON.parse(data.breaks);
+            if (Array.isArray(parsedBreaks)) {
+              breaks = parsedBreaks.map((breakItem) => ({
+                startTime: breakItem.start || breakItem.startTime || "00:00",
+                endTime: breakItem.end || breakItem.endTime || "00:00",
+                duration: breakItem.duration || 0
+              }));
+            } else if (parsedBreaks.breaks && Array.isArray(parsedBreaks.breaks)) {
+              breaks = parsedBreaks.breaks.map((breakItem) => ({
+                startTime: breakItem.start || breakItem.startTime || "00:00",
+                endTime: breakItem.end || breakItem.endTime || "00:00",
+                duration: breakItem.duration || 0
+              }));
+            }
+          } catch (e) {
+            console.error("Error parsing breaks data:", e);
+          }
+        }
+      }
+      return {
+        startTime: data?.start_time || "08:00",
+        endTime: data?.end_time || "19:00",
+        breaks
+      };
+    } catch (e) {
+      console.error("Exception when loading operating hours:", e);
+      return {
+        startTime: "08:00",
+        endTime: "19:00",
+        breaks: []
+      };
+    }
+  }, [supabase]);
+  React19.useEffect(() => {
+    console.log("[TargetsView] Component mounted/re-rendered", {
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      lineIds: lineIds.length,
+      effectiveUserId
+    });
+    return () => {
+      console.log("[TargetsView] Component unmounting");
+    };
+  }, []);
   React19.useEffect(() => {
     let timeoutId;
     let retryCount = 0;
     const MAX_RETRIES2 = 2;
     const LOADING_TIMEOUT = 15e3;
     const fetchInitialData = async () => {
-      if (!supabase || lineIds.length === 0) return;
+      if (lineIds.length === 0) return;
+      console.log("[TargetsView] Starting fetchInitialData");
       setIsLoading(true);
       timeoutId = setTimeout(() => {
         console.error("Loading timeout reached");
@@ -35486,10 +35809,32 @@ var TargetsView = ({
             const actionThresholds = await workspaceService.getActionThresholds(
               lineId,
               currentDate,
-              selectedShift
+              0
+              // Always use day shift for initial load
             );
+            const operatingHoursData = await loadOperatingHours(lineId, 0);
+            if (operatingHoursData) {
+              updatedLineWorkspaces[lineId].shiftStartTime = operatingHoursData.startTime;
+              updatedLineWorkspaces[lineId].shiftEndTime = operatingHoursData.endTime;
+              updatedLineWorkspaces[lineId].breaks = operatingHoursData.breaks;
+              updatedLineWorkspaces[lineId].shiftHours = calculateShiftHours2(
+                operatingHoursData.startTime,
+                operatingHoursData.endTime,
+                operatingHoursData.breaks
+              );
+            }
             const mappedWorkspaces = enabledWorkspaces.map((ws) => {
               const threshold = actionThresholds.find((t) => t.workspace_id === ws.id);
+              if (!dbValues[0][lineId]) {
+                dbValues[0][lineId] = {};
+              }
+              if (threshold) {
+                dbValues[0][lineId][ws.id] = {
+                  targetPPH: threshold.pph_threshold,
+                  targetCycleTime: threshold.ideal_cycle_time,
+                  targetDayOutput: threshold.total_day_output
+                };
+              }
               return {
                 id: ws.id,
                 name: ws.workspace_id,
@@ -35530,90 +35875,7 @@ var TargetsView = ({
     return () => {
       clearTimeout(timeoutId);
     };
-  }, [supabase, lineIds, companyId]);
-  React19.useCallback(async (shiftId) => {
-    try {
-      if (!supabase) return;
-      const currentDate = getOperationalDate();
-      const updatedLineWorkspaces = { ...lineWorkspaces };
-      let hasUpdates = false;
-      for (const lineId of lineIds) {
-        const lineState = lineWorkspaces[lineId];
-        if (!lineState || !lineState.factoryId) {
-          console.warn(`Skipping line thresholds for ${lineId} as factoryId is not yet available.`);
-          continue;
-        }
-        const currentFactoryId = lineState.factoryId;
-        try {
-          const { data: lineThresholdsRows, error: thresholdError } = await supabase.from("line_thresholds").select("product_code").eq("line_id", lineId).eq("date", currentDate).eq("shift_id", selectedShift).eq("factory_id", currentFactoryId);
-          if (thresholdError) {
-            console.error(`Error fetching line threshold for line ${lineId}, factory ${currentFactoryId}:`, thresholdError);
-            continue;
-          }
-          let determinedProductId = updatedLineWorkspaces[lineId]?.productId || "";
-          if (lineThresholdsRows && lineThresholdsRows.length > 0) {
-            if (lineThresholdsRows.length > 1) {
-              console.warn(
-                `Multiple line_thresholds records found for line ${lineId}, factory ${currentFactoryId}, date ${currentDate}, shift ${selectedShift}. Using product_code from the first record. Rows:`,
-                lineThresholdsRows
-              );
-            }
-            determinedProductId = lineThresholdsRows[0].product_code;
-          } else {
-            console.log(
-              `No line_thresholds record found for line ${lineId}, factory ${currentFactoryId}, date ${currentDate}, shift ${selectedShift}. Using existing/default product ID.`
-            );
-          }
-          const { data: operatingHours, error: hoursError } = await supabase.from("line_operating_hours").select("start_time, end_time, breaks").eq("line_id", lineId).eq("shift_id", selectedShift).maybeSingle();
-          if (hoursError) {
-            console.error(`Error fetching operating hours for line ${lineId}:`, hoursError);
-            continue;
-          }
-          const startTime = operatingHours?.start_time || updatedLineWorkspaces[lineId]?.shiftStartTime || "08:00";
-          const endTime = operatingHours?.end_time || updatedLineWorkspaces[lineId]?.shiftEndTime || "19:00";
-          let breaks = [];
-          if (operatingHours?.breaks) {
-            if (Array.isArray(operatingHours.breaks)) {
-              breaks = operatingHours.breaks.map((breakItem) => ({
-                startTime: breakItem.start || breakItem.startTime || "00:00",
-                endTime: breakItem.end || breakItem.endTime || "00:00",
-                duration: breakItem.duration || calculateShiftHours2(breakItem.start || breakItem.startTime || "00:00", breakItem.end || breakItem.endTime || "00:00", []) * 60
-              }));
-            } else if (typeof operatingHours.breaks === "object" && operatingHours.breaks.breaks) {
-              breaks = operatingHours.breaks.breaks.map((breakItem) => ({
-                startTime: breakItem.start || breakItem.startTime || "00:00",
-                endTime: breakItem.end || breakItem.endTime || "00:00",
-                duration: breakItem.duration || calculateShiftHours2(breakItem.start || breakItem.startTime || "00:00", breakItem.end || breakItem.endTime || "00:00", []) * 60
-              }));
-            }
-          }
-          const shiftHours = calculateShiftHours2(startTime, endTime, breaks);
-          const currentLineStateFromLoop = updatedLineWorkspaces[lineId];
-          if (determinedProductId !== currentLineStateFromLoop?.productId || startTime !== currentLineStateFromLoop?.shiftStartTime || endTime !== currentLineStateFromLoop?.shiftEndTime || shiftHours !== currentLineStateFromLoop?.shiftHours || JSON.stringify(breaks) !== JSON.stringify(currentLineStateFromLoop?.breaks)) {
-            updatedLineWorkspaces[lineId] = {
-              ...currentLineStateFromLoop || {},
-              factoryId: currentFactoryId,
-              // Ensure factoryId is preserved
-              productId: determinedProductId,
-              shiftStartTime: startTime,
-              shiftEndTime: endTime,
-              breaks,
-              shiftHours: Number(shiftHours),
-              workspaces: currentLineStateFromLoop?.workspaces || []
-            };
-            hasUpdates = true;
-          }
-        } catch (lineError) {
-          console.error(`Error processing line ${lineId}:`, lineError);
-        }
-      }
-      if (hasUpdates) {
-        setLineWorkspaces(updatedLineWorkspaces);
-      }
-    } catch (error) {
-      console.error("Error in fetchLineThresholds outer try-catch:", error);
-    }
-  }, [selectedShift, supabase, lineIds, lineWorkspaces, allShiftsData]);
+  }, [lineIds, companyId, loadOperatingHours]);
   const fetchAllShiftsData = React19.useCallback(async (currentWorkspaces) => {
     if (!supabase) return;
     const currentDate = getOperationalDate();
@@ -35623,32 +35885,25 @@ var TargetsView = ({
       1: JSON.parse(JSON.stringify(currentWorkspaces))
       // Deep clone for night shift
     };
+    const newDbValues = { 0: {}, 1: {} };
     for (const shiftId of [0, 1]) {
       for (const lineId of lineIds) {
         try {
-          const { data: operatingHours, error: hoursError } = await supabase.from("line_operating_hours").select("start_time, end_time, breaks").eq("line_id", lineId).eq("shift_id", shiftId).maybeSingle();
-          if (hoursError) {
-            console.error(`Error fetching operating hours for line ${lineId}, shift ${shiftId}:`, hoursError);
+          const operatingHoursData = await loadOperatingHours(lineId, shiftId);
+          if (!operatingHoursData) {
+            console.warn(`No operating hours for line ${lineId}, shift ${shiftId} - using defaults`);
             continue;
           }
-          let breaks = [];
-          if (operatingHours?.breaks) {
-            if (Array.isArray(operatingHours.breaks)) {
-              breaks = operatingHours.breaks.map((breakItem) => ({
-                startTime: breakItem.start || breakItem.startTime || "00:00",
-                endTime: breakItem.end || breakItem.endTime || "00:00",
-                duration: breakItem.duration || calculateShiftHours2(breakItem.start || breakItem.startTime || "00:00", breakItem.end || breakItem.endTime || "00:00", []) * 60
-              }));
-            }
-          }
-          const startTime = operatingHours?.start_time || "08:00";
-          const endTime = operatingHours?.end_time || "19:00";
+          const { startTime, endTime, breaks } = operatingHoursData;
           const shiftHours = calculateShiftHours2(startTime, endTime, breaks);
           const actionThresholds = await workspaceService.getActionThresholds(
             lineId,
             currentDate,
             shiftId
           );
+          if (!newDbValues[shiftId][lineId]) {
+            newDbValues[shiftId][lineId] = {};
+          }
           const existingLine = newAllShiftsData[shiftId][lineId];
           if (existingLine) {
             newAllShiftsData[shiftId][lineId] = {
@@ -35660,6 +35915,11 @@ var TargetsView = ({
               workspaces: existingLine.workspaces.map((ws) => {
                 const threshold = actionThresholds.find((t) => t.workspace_id === ws.id);
                 if (threshold) {
+                  newDbValues[shiftId][lineId][ws.id] = {
+                    targetPPH: threshold.pph_threshold,
+                    targetCycleTime: threshold.ideal_cycle_time,
+                    targetDayOutput: threshold.total_day_output
+                  };
                   return {
                     ...ws,
                     targetPPH: threshold.pph_threshold,
@@ -35677,114 +35937,17 @@ var TargetsView = ({
       }
     }
     setAllShiftsData(newAllShiftsData);
-  }, [supabase, lineIds]);
-  const loadOperatingHours = React19.useCallback(async (lineId, shiftId) => {
-    try {
-      if (!supabase) return null;
-      const { data, error } = await supabase.from("line_operating_hours").select("start_time, end_time, breaks").eq("line_id", lineId).eq("shift_id", shiftId).maybeSingle();
-      if (error) {
-        if (error.code === "PGRST116") {
-          console.log(`No operating hours found for line ${lineId}, shift ${shiftId}`);
-          return {
-            startTime: "08:00",
-            // Default values
-            endTime: "19:00",
-            breaks: []
-          };
-        } else {
-          console.error("Error fetching operating hours:", error);
-          return null;
-        }
-      }
-      let breaks = [];
-      if (data?.breaks) {
-        if (Array.isArray(data.breaks)) {
-          breaks = data.breaks.map((breakItem) => {
-            const startTime = breakItem.start || breakItem.startTime || "00:00";
-            const endTime = breakItem.end || breakItem.endTime || "00:00";
-            const calculateDuration = (start, end) => {
-              const [startHour, startMinute] = start.split(":").map(Number);
-              const [endHour, endMinute] = end.split(":").map(Number);
-              let startMinutes = startHour * 60 + startMinute;
-              let endMinutes = endHour * 60 + endMinute;
-              if (endMinutes < startMinutes) {
-                endMinutes += 24 * 60;
-              }
-              return endMinutes - startMinutes;
-            };
-            return {
-              startTime,
-              endTime,
-              duration: breakItem.duration || calculateDuration(startTime, endTime)
-            };
-          });
-        } else if (typeof data.breaks === "object" && data.breaks.breaks) {
-          breaks = data.breaks.breaks.map((breakItem) => {
-            const startTime = breakItem.start || breakItem.startTime || "00:00";
-            const endTime = breakItem.end || breakItem.endTime || "00:00";
-            const calculateDuration = (start, end) => {
-              const [startHour, startMinute] = start.split(":").map(Number);
-              const [endHour, endMinute] = end.split(":").map(Number);
-              let startMinutes = startHour * 60 + startMinute;
-              let endMinutes = endHour * 60 + endMinute;
-              if (endMinutes < startMinutes) {
-                endMinutes += 24 * 60;
-              }
-              return endMinutes - startMinutes;
-            };
-            return {
-              startTime,
-              endTime,
-              duration: breakItem.duration || calculateDuration(startTime, endTime)
-            };
-          });
-        } else if (typeof data.breaks === "string") {
-          try {
-            const parsedBreaks = JSON.parse(data.breaks);
-            if (Array.isArray(parsedBreaks)) {
-              breaks = parsedBreaks.map((breakItem) => ({
-                startTime: breakItem.start || breakItem.startTime || "00:00",
-                endTime: breakItem.end || breakItem.endTime || "00:00",
-                duration: breakItem.duration || 0
-              }));
-            } else if (parsedBreaks.breaks && Array.isArray(parsedBreaks.breaks)) {
-              breaks = parsedBreaks.breaks.map((breakItem) => ({
-                startTime: breakItem.start || breakItem.startTime || "00:00",
-                endTime: breakItem.end || breakItem.endTime || "00:00",
-                duration: breakItem.duration || 0
-              }));
-            }
-          } catch (e) {
-            console.error("Error parsing breaks data:", e);
-          }
-        }
-      }
-      return {
-        startTime: data?.start_time || "08:00",
-        endTime: data?.end_time || "19:00",
-        breaks
-      };
-    } catch (e) {
-      console.error("Exception when loading operating hours:", e);
-      return {
-        startTime: "08:00",
-        endTime: "19:00",
-        breaks: []
-      };
-    }
-  }, [supabase]);
+    setDbValues(newDbValues);
+  }, [supabase, lineIds, loadOperatingHours]);
   const toggleLineDropdown = React19.useCallback((lineId) => {
-    setLineWorkspaces((prev) => {
-      const newIsOpen = !prev[lineId].isOpen;
+    setDropdownStates((prev) => {
+      const newIsOpen = !prev[lineId];
       if (typeof window !== "undefined") {
         localStorage.setItem(`line_${lineId}_open`, JSON.stringify(newIsOpen));
       }
       return {
         ...prev,
-        [lineId]: {
-          ...prev[lineId],
-          isOpen: newIsOpen
-        }
+        [lineId]: newIsOpen
       };
     });
   }, []);
@@ -35833,6 +35996,8 @@ var TargetsView = ({
     }
   };
   const updateWorkspaceTarget = (lineId, workspaceId, field, value) => {
+    const fieldKey = `${lineId}-${workspaceId}-${field}`;
+    setUserEditedFields((prev) => new Set(prev).add(fieldKey));
     setLineWorkspaces((prev) => {
       const shiftHours = prev[lineId].shiftHours;
       return {
@@ -35857,11 +36022,7 @@ var TargetsView = ({
             } else if (field === "targetDayOutput") {
               updates.targetDayOutput = value;
               if (value !== "") {
-                const breaks = prev[lineId].breaks;
-                const totalBreakMinutes = breaks.reduce((total, b) => total + b.duration, 0);
-                const totalBreakHours = totalBreakMinutes / 60;
-                const realWorkHours = shiftHours - totalBreakHours;
-                const calculatedPPH = Math.round(value / realWorkHours);
+                const calculatedPPH = Math.round(value / shiftHours);
                 updates.targetPPH = calculatedPPH;
               } else {
                 updates.targetPPH = "";
@@ -35876,62 +36037,35 @@ var TargetsView = ({
   };
   const handleShiftChange = (shiftId) => {
     setSelectedShift(shiftId);
-    const loadShiftHours = async () => {
-      const updatedLineWorkspaces = { ...allShiftsData[shiftId] };
-      let hasUpdates = false;
-      for (const lineId of lineIds) {
-        try {
-          const operatingHours = await loadOperatingHours(lineId, shiftId);
-          if (!operatingHours) continue;
-          const shiftHours = calculateShiftHours2(
-            operatingHours.startTime,
-            operatingHours.endTime,
-            operatingHours.breaks
-          );
-          updatedLineWorkspaces[lineId] = {
-            ...updatedLineWorkspaces[lineId],
-            shiftStartTime: operatingHours.startTime,
-            shiftEndTime: operatingHours.endTime,
-            breaks: operatingHours.breaks,
-            shiftHours: Number(shiftHours),
-            workspaces: updatedLineWorkspaces[lineId].workspaces.map((ws) => {
-              let updatedPPH = ws.targetPPH;
-              if (ws.targetCycleTime !== "") {
-                const idealPPH = calculatePPH(
-                  ws.targetCycleTime,
-                  operatingHours.breaks,
-                  Number(shiftHours)
-                );
-                const shouldUpdatePPH = typeof ws.targetPPH === "string" ? ws.targetPPH === "" : ws.targetPPH === 0 || !ws.targetPPH;
-                if (shouldUpdatePPH) {
-                  updatedPPH = idealPPH;
+    setUserEditedFields(/* @__PURE__ */ new Set());
+    if (dbValues[shiftId] && Object.keys(dbValues[shiftId]).length > 0) {
+      setAllShiftsData((prev) => {
+        const updatedShiftData = { ...prev[shiftId] };
+        for (const lineId of Object.keys(updatedShiftData)) {
+          if (dbValues[shiftId][lineId]) {
+            updatedShiftData[lineId] = {
+              ...updatedShiftData[lineId],
+              workspaces: updatedShiftData[lineId].workspaces.map((ws) => {
+                const dbValue = dbValues[shiftId][lineId][ws.id];
+                if (dbValue) {
+                  return {
+                    ...ws,
+                    targetPPH: dbValue.targetPPH,
+                    targetCycleTime: dbValue.targetCycleTime,
+                    targetDayOutput: dbValue.targetDayOutput
+                  };
                 }
-              }
-              const updatedDayOutput = calculateDayOutput(
-                updatedPPH,
-                Number(shiftHours),
-                operatingHours.breaks
-              );
-              return {
-                ...ws,
-                targetPPH: updatedPPH,
-                targetDayOutput: updatedDayOutput
-              };
-            })
-          };
-          hasUpdates = true;
-        } catch (e) {
-          console.error(`Exception when loading shift hours for line ${lineId}:`, e);
+                return ws;
+              })
+            };
+          }
         }
-      }
-      if (hasUpdates) {
-        setAllShiftsData((prev) => ({
+        return {
           ...prev,
-          [shiftId]: updatedLineWorkspaces
-        }));
-      }
-    };
-    loadShiftHours();
+          [shiftId]: updatedShiftData
+        };
+      });
+    }
   };
   const handleActionTypeChange = React19.useCallback((lineId, workspaceId, newActionType) => {
     if (!actionIds) return;
@@ -36021,6 +36155,31 @@ var TargetsView = ({
         throw lineUpsertError;
       }
       console.log(`[handleSaveLine] Successfully upserted line_thresholds for ${lineId}`);
+      setDbValues((prev) => ({
+        ...prev,
+        [selectedShift]: {
+          ...prev[selectedShift],
+          [lineId]: lineDataToSave.workspaces.reduce((acc, ws) => ({
+            ...acc,
+            [ws.id]: {
+              targetPPH: ws.targetPPH,
+              targetCycleTime: ws.targetCycleTime,
+              targetDayOutput: ws.targetDayOutput
+            }
+          }), {})
+        }
+      }));
+      console.log(`[handleSaveLine] Updated dbValues for line ${lineId}, shift ${selectedShift}`);
+      setUserEditedFields((prev) => {
+        const newSet = new Set(prev);
+        lineDataToSave.workspaces.forEach((ws) => {
+          newSet.delete(`${lineId}-${ws.id}-targetPPH`);
+          newSet.delete(`${lineId}-${ws.id}-targetCycleTime`);
+          newSet.delete(`${lineId}-${ws.id}-targetDayOutput`);
+        });
+        return newSet;
+      });
+      console.log(`[handleSaveLine] Cleared user edited fields for line ${lineId}`);
       setSaveSuccess((prev) => ({ ...prev, [lineId]: true }));
       sonner.toast.success(`${lineNames[lineId] || lineId} targets saved successfully`);
       if (onSaveChanges) onSaveChanges(lineId);
@@ -36034,7 +36193,7 @@ var TargetsView = ({
       setSavingLines((prev) => ({ ...prev, [lineId]: false }));
       console.log(`[handleSaveLine] Set savingLines to false for ${lineId} in finally block`);
     }
-  }, [supabase, lineWorkspaces, selectedShift, lineNames, onSaveChanges]);
+  }, [supabase, lineWorkspaces, selectedShift, lineNames, onSaveChanges, skuEnabled, dashboardConfig]);
   const handleBulkConfigure = async (updates) => {
     if (!actionIds) return;
     if (updates.productId !== void 0) {
@@ -36082,6 +36241,7 @@ var TargetsView = ({
       isLoading: isLoading || skusLoading,
       lineWorkspaces,
       lineNames,
+      dropdownStates,
       savingLines,
       saveSuccess,
       selectedShift,
@@ -36106,7 +36266,7 @@ var TargetsView = ({
 };
 var TargetsViewWithDisplayNames = withAllWorkspaceDisplayNames(TargetsView);
 var TargetsView_default = TargetsViewWithDisplayNames;
-var AuthenticatedTargetsView = withAuth(TargetsViewWithDisplayNames);
+var AuthenticatedTargetsView = withAuth(React19__namespace.default.memo(TargetsViewWithDisplayNames));
 
 // src/views/workspace-detail-view.utils.ts
 var formatISTDate2 = (date = /* @__PURE__ */ new Date(), options) => {
@@ -37586,6 +37746,7 @@ exports.AuthProvider = AuthProvider;
 exports.AuthenticatedFactoryView = AuthenticatedFactoryView;
 exports.AuthenticatedHelpView = AuthenticatedHelpView;
 exports.AuthenticatedHomeView = AuthenticatedHomeView;
+exports.AuthenticatedShiftsView = AuthenticatedShiftsView;
 exports.AuthenticatedTargetsView = AuthenticatedTargetsView;
 exports.BarChart = BarChart;
 exports.BaseHistoryCalendar = BaseHistoryCalendar;