@optifye/dashboard-core 6.12.19 → 6.12.21

package/dist/index.js

@@ -19916,6 +19916,9 @@ function useNavigation(customNavigate) {
             await router$1.push(path, void 0, { shallow: options?.shallow ?? false });
           }
         } catch (error) {
+          if (error?.cancelled || error?.message?.includes("Route change aborted")) {
+            return;
+          }
           if (error.message?.includes("Page not compiled") && retryCount < MAX_RETRIES) {
             setTimeout(() => attemptNavigation(retryCount + 1), RETRY_DELAY);
           } else if (retryCount >= MAX_RETRIES) {
@@ -54907,27 +54910,34 @@ var WorkspaceGrid = React144__namespace.default.memo(({
     [viewMode, workspaces]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col w-full h-full overflow-hidden bg-slate-50/50 ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-none px-4 py-3 z-20 flex flex-row items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex bg-white/95 rounded-lg shadow-sm px-4 py-2 border border-slate-200/60 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, metricLabel: legendMetricLabel }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3 shrink-0", children: [
-        toolbarRightContent,
-        mapViewEnabled && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleViewModeToggle,
-            className: "flex items-center gap-2 px-3 py-1.5 bg-white border border-slate-200 rounded-md shadow-sm hover:bg-slate-50 transition-colors duration-200 text-slate-700",
-            title: viewMode === "video" ? "Switch to Map View" : "Switch to Video View",
-            children: viewMode === "video" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Map, { className: "w-4 h-4 text-slate-500" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Map View" })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { className: "w-4 h-4 text-slate-500" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Video View" })
-            ] })
-          }
-        )
-      ] })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-testid": "workspace-grid-toolbar",
+        className: "relative z-[100] flex-none px-4 py-3 flex flex-row items-center justify-between gap-4",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex bg-white/95 rounded-lg shadow-sm px-4 py-2 border border-slate-200/60 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, metricLabel: legendMetricLabel }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3 shrink-0", children: [
+            toolbarRightContent,
+            mapViewEnabled && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleViewModeToggle,
+                className: "flex items-center gap-2 px-3 py-1.5 bg-white border border-slate-200 rounded-md shadow-sm hover:bg-slate-50 transition-colors duration-200 text-slate-700",
+                title: viewMode === "video" ? "Switch to Map View" : "Switch to Video View",
+                children: viewMode === "video" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Map, { className: "w-4 h-4 text-slate-500" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Map View" })
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { className: "w-4 h-4 text-slate-500" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Video View" })
+                ] })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden px-3 py-2 bg-white border-b border-slate-200/60 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, { legend, metricLabel: legendMetricLabel }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 relative overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: viewMode === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
       motion.div,
@@ -72340,6 +72350,46 @@ var ClipsCostView = () => {
   ] });
 };
 var ClipsCostView_default = ClipsCostView;
+var DEFAULT_UNSAVED_CHANGES_MESSAGE = "You have unsaved changes. Leave this page and lose them?";
+var useUnsavedChangesPrompt = (shouldBlock, message = DEFAULT_UNSAVED_CHANGES_MESSAGE) => {
+  const router$1 = router.useRouter();
+  React144.useEffect(() => {
+    if (!shouldBlock || typeof window === "undefined") {
+      return;
+    }
+    const handleBeforeUnload = (event) => {
+      event.preventDefault();
+      event.returnValue = message;
+      return message;
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [message, shouldBlock]);
+  React144.useEffect(() => {
+    if (!shouldBlock || !router$1?.events || typeof window === "undefined") {
+      return;
+    }
+    const handleRouteChangeStart = (url) => {
+      const currentUrl = router$1.asPath || window.location.pathname;
+      if (url === currentUrl) {
+        return;
+      }
+      if (window.confirm(message)) {
+        return;
+      }
+      const routeChangeError = new Error("Route change aborted due to unsaved changes");
+      routeChangeError.cancelled = true;
+      router$1.events.emit("routeChangeError", routeChangeError, url, { shallow: false });
+      throw routeChangeError;
+    };
+    router$1.events.on("routeChangeStart", handleRouteChangeStart);
+    return () => {
+      router$1.events.off("routeChangeStart", handleRouteChangeStart);
+    };
+  }, [message, router$1, shouldBlock]);
+};
 var calculateShiftHours = (startTime, endTime, breaks = []) => {
   if (!startTime || !endTime) return 8;
   const [startHour, startMinute] = startTime.split(":").map(Number);
@@ -72669,6 +72719,11 @@ var ShiftsView = ({
   className = ""
 }) => {
   const supabase = useSupabase();
+  const lineIdsKey = React144.useMemo(() => lineIds.join("|"), [lineIds]);
+  const stableLineIds = React144.useMemo(
+    () => lineIdsKey.split("|").filter(Boolean),
+    [lineIdsKey]
+  );
   const { lines: dbLines } = useLines();
   const mergedLineNames = React144.useMemo(() => {
     const merged = { ...lineNames };
@@ -72682,14 +72737,14 @@ var ShiftsView = ({
   React144.useEffect(() => {
     console.log("[ShiftsView] Component mounted/re-rendered", {
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      lineIds: lineIds.length
+      lineIds: stableLineIds.length
     });
     return () => {
       console.log("[ShiftsView] Component unmounting");
     };
-  }, []);
+  }, [stableLineIds.length]);
   const [lineConfigs, setLineConfigs] = React144.useState(
-    () => lineIds.map((id3) => ({
+    () => stableLineIds.map((id3) => ({
       id: id3,
       name: lineNames[id3] || `Line ${id3.substring(0, 4)}`,
       timezone: "Asia/Kolkata",
@@ -72703,8 +72758,18 @@ var ShiftsView = ({
   const [loading, setLoading] = React144.useState(true);
   const [error, setError] = React144.useState(null);
   const [saveStatusMessages, setSaveStatusMessages] = React144.useState(
-    () => lineIds.reduce((acc, id3) => ({ ...acc, [id3]: null }), {})
+    () => stableLineIds.reduce((acc, id3) => ({ ...acc, [id3]: null }), {})
   );
+  const [dirtyLineIds, setDirtyLineIds] = React144.useState(/* @__PURE__ */ new Set());
+  useUnsavedChangesPrompt(dirtyLineIds.size > 0);
+  const markLineDirty = React144.useCallback((lineId) => {
+    setDirtyLineIds((prev) => {
+      if (prev.has(lineId)) return prev;
+      const next = new Set(prev);
+      next.add(lineId);
+      return next;
+    });
+  }, []);
   const showToast = React144.useCallback((type, message) => {
     if (onToast) {
       try {
@@ -72724,7 +72789,7 @@ var ShiftsView = ({
       try {
         setLoading(true);
         setError(null);
-        const { data: enabledLines, error: linesError } = await supabase.from("lines").select("id, enable").in("id", lineIds).eq("enable", true);
+        const { data: enabledLines, error: linesError } = await supabase.from("lines").select("id, enable").in("id", stableLineIds).eq("enable", true);
         if (linesError) {
           console.error("Error fetching enabled lines:", linesError);
           showToast("error", "Error loading lines");
@@ -72756,18 +72821,21 @@ var ShiftsView = ({
           return acc;
         }, {});
         setLineConfigs((prev) => {
-          const enabledConfigs = prev.filter((config) => enabledLineIds.includes(config.id));
-          return enabledConfigs.map((config) => {
-            const rows = shiftsByLine[config.id] || [];
+          const previousByLineId = new Map(prev.map((config) => [config.id, config]));
+          return enabledLineIds.map((lineId) => {
+            const existingConfig = previousByLineId.get(lineId);
+            const rows = shiftsByLine[lineId] || [];
             const builtConfig = buildShiftConfigFromOperatingHoursRows(rows);
-            const lineName = lineNameMap[config.id] || mergedLineNames[config.id] || `Line ${config.id.substring(0, 4)}`;
+            const lineName = lineNameMap[lineId] || mergedLineNames[lineId] || `Line ${lineId.substring(0, 4)}`;
             const sortedShifts = [...builtConfig.shifts || []].sort((a, b) => a.shiftId - b.shiftId);
             return {
-              ...config,
+              id: lineId,
               name: lineName,
+              timezone: builtConfig.timezone || existingConfig?.timezone || "Asia/Kolkata",
               shifts: sortedShifts,
-              timezone: builtConfig.timezone || config.timezone,
-              isOpen: config.isOpen ?? getStoredLineState(config.id)
+              isSaving: existingConfig?.isSaving ?? false,
+              saveSuccess: existingConfig?.saveSuccess ?? false,
+              isOpen: existingConfig?.isOpen ?? getStoredLineState(lineId)
             };
           });
         });
@@ -72780,7 +72848,7 @@ var ShiftsView = ({
       }
     };
     fetchShiftConfigs();
-  }, [lineIds, showToast]);
+  }, [stableLineIds, showToast]);
   React144.useCallback((lineId) => {
     setLineConfigs((prev) => {
       const typedPrev = prev;
@@ -72792,6 +72860,7 @@ var ShiftsView = ({
     });
   }, []);
   const updateShiftTime = React144.useCallback((lineId, shiftIndex, field, value) => {
+    markLineDirty(lineId);
     setLineConfigs((prev) => prev.map((config) => {
       if (config.id === lineId && config.shifts) {
         const newShifts = [...config.shifts];
@@ -72802,8 +72871,9 @@ var ShiftsView = ({
       }
       return config;
     }));
-  }, []);
+  }, [markLineDirty]);
   const addShiftBreak = React144.useCallback((lineId, shiftIndex) => {
+    markLineDirty(lineId);
     setLineConfigs((prev) => prev.map((config) => {
       if (config.id === lineId && config.shifts) {
         const newShifts = [...config.shifts];
@@ -72824,8 +72894,9 @@ var ShiftsView = ({
       }
       return config;
     }));
-  }, []);
+  }, [markLineDirty]);
   const updateShiftBreak = React144.useCallback((lineId, shiftIndex, breakIndex, field, value) => {
+    markLineDirty(lineId);
     setLineConfigs((prev) => prev.map((config) => {
       if (config.id === lineId && config.shifts) {
         const newShifts = [...config.shifts];
@@ -72851,8 +72922,9 @@ var ShiftsView = ({
       }
       return config;
     }));
-  }, []);
+  }, [markLineDirty]);
   const removeShiftBreak = React144.useCallback((lineId, shiftIndex, breakIndex) => {
+    markLineDirty(lineId);
     setLineConfigs((prev) => prev.map((config) => {
       if (config.id === lineId && config.shifts) {
         const newShifts = [...config.shifts];
@@ -72867,7 +72939,7 @@ var ShiftsView = ({
       }
       return config;
     }));
-  }, []);
+  }, [markLineDirty]);
   const getOperationalDateForLine = React144.useCallback((lineConfig) => {
     const sortedShifts = [...lineConfig.shifts || []].sort((a, b) => a.shiftId - b.shiftId);
     const dayBoundaryStart = sortedShifts[0]?.startTime || "06:00";
@@ -73152,6 +73224,11 @@ var ShiftsView = ({
       setLineConfigs((prev) => prev.map(
         (config) => config.id === lineId ? { ...config, isSaving: false, saveSuccess: true } : config
       ));
+      setDirtyLineIds((prev) => {
+        const next = new Set(prev);
+        next.delete(lineId);
+        return next;
+      });
       let successMessage = "Shift configurations saved successfully.";
       if (changedShiftCount > 0 && recalculatedTargetsCount > 0) {
         successMessage = `Shift configurations saved. Targets updated successfully for ${recalculatedTargetsCount} workspace${recalculatedTargetsCount === 1 ? "" : "s"}.`;
@@ -74236,8 +74313,13 @@ var TargetsView = ({
   onSaveChanges
 }) => {
   const timezone = useAppTimezone();
+  const lineIdsKey = React144.useMemo(() => lineIds.join("|"), [lineIds]);
+  const stableLineIds = React144.useMemo(
+    () => lineIdsKey.split("|").filter(Boolean),
+    [lineIdsKey]
+  );
   React144.useMemo(() => {
-    return lineIds.reduce((acc, lineId) => ({
+    return stableLineIds.reduce((acc, lineId) => ({
       ...acc,
       [lineId]: {
         productId: "",
@@ -74251,9 +74333,9 @@ var TargetsView = ({
         // Initialize factoryId
       }
     }), {});
-  }, [lineIds]);
+  }, [stableLineIds]);
   const [dropdownStates, setDropdownStates] = React144.useState(() => {
-    return lineIds.reduce((acc, lineId) => ({
+    return stableLineIds.reduce((acc, lineId) => ({
       ...acc,
       [lineId]: getStoredLineState2(lineId)
     }), {});
@@ -74261,10 +74343,10 @@ var TargetsView = ({
   const [allShiftsData, setAllShiftsData] = React144.useState({});
   const [actionIds, setActionIds] = React144.useState(null);
   const [savingLines, setSavingLines] = React144.useState(
-    () => lineIds.reduce((acc, id3) => ({ ...acc, [id3]: false }), {})
+    () => stableLineIds.reduce((acc, id3) => ({ ...acc, [id3]: false }), {})
   );
   const [saveSuccess, setSaveSuccess] = React144.useState(
-    () => lineIds.reduce((acc, id3) => ({ ...acc, [id3]: false }), {})
+    () => stableLineIds.reduce((acc, id3) => ({ ...acc, [id3]: false }), {})
   );
   const [isLoading, setIsLoading] = React144.useState(true);
   const [isConfigureLegendOpen, setIsConfigureLegendOpen] = React144.useState(false);
@@ -74274,6 +74356,8 @@ var TargetsView = ({
   const canSaveTargets = useCanSaveTargets();
   const [dbValues, setDbValues] = React144.useState({ 0: {}, 1: {} });
   const [userEditedFields, setUserEditedFields] = React144.useState(/* @__PURE__ */ new Set());
+  const hasUnsavedChanges = userEditedFields.size > 0;
+  useUnsavedChangesPrompt(hasUnsavedChanges);
   const lineWorkspaces = allShiftsData[selectedShift] || {};
   const setLineWorkspaces = React144.useCallback((updater) => {
     setAllShiftsData((prev) => ({
@@ -74290,13 +74374,13 @@ var TargetsView = ({
     dbLines.forEach((line) => {
       merged[line.id] = line.line_name;
     });
-    lineIds.forEach((lineId) => {
+    stableLineIds.forEach((lineId) => {
       if (!merged[lineId]) {
         merged[lineId] = `Line ${lineId.substring(0, 4)}`;
       }
     });
     return merged;
-  }, [lineNames, dbLines, lineIds]);
+  }, [lineNames, dbLines, stableLineIds]);
   const { legend, updateLegend } = useEfficiencyLegend(companyId);
   const { skus, isLoading: skusLoading } = useSKUs(companyId);
   const { skus: skuCatalog, isLoading: skuCatalogLoading } = useSKUs(companyId, {
@@ -74355,22 +74439,22 @@ var TargetsView = ({
   React144.useEffect(() => {
     console.log("[TargetsView] Component mounted/re-rendered", {
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      lineIds: lineIds.length,
+      lineIds: stableLineIds.length,
       effectiveUserId
     });
     return () => {
       console.log("[TargetsView] Component unmounting");
     };
-  }, []);
+  }, [effectiveUserId, stableLineIds.length]);
   React144.useEffect(() => {
     const fetchInitialData = async () => {
-      if (lineIds.length === 0 || !companyId) return;
+      if (stableLineIds.length === 0 || !companyId) return;
       if (skuCatalogLoading) return;
       console.log("[TargetsView] Starting optimized fetchInitialData with bulk endpoint");
       setIsLoading(true);
       try {
         const currentDate = getOperationalDate(timezone);
-        const { data: shiftsData, error: shiftsError } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name").in("line_id", lineIds);
+        const { data: shiftsData, error: shiftsError } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name").in("line_id", stableLineIds);
         if (shiftsError) {
           console.warn("[TargetsView] Error fetching shift definitions, falling back to defaults", shiftsError);
         }
@@ -74388,7 +74472,7 @@ var TargetsView = ({
         setSelectedShift(defaultShiftId);
         const bulkResponse = await workspaceService.fetchBulkTargets({
           companyId,
-          lineIds,
+          lineIds: stableLineIds,
           date: currentDate,
           shifts: effectiveShiftOptions.map((s) => s.id),
           // Fetch all configured shifts
@@ -74533,7 +74617,7 @@ var TargetsView = ({
           });
         });
         effectiveShiftOptions.forEach(({ id: shiftId }) => {
-          lineIds.forEach((lineId) => {
+          stableLineIds.forEach((lineId) => {
             if (!newAllShiftsData[shiftId][lineId]) {
               const lineData = data.lines[lineId];
               const shift0Data = newAllShiftsData[0]?.[lineId];
@@ -74603,7 +74687,7 @@ var TargetsView = ({
         });
         effectiveShiftOptions.forEach(({ id: shiftId }) => {
           const orderedLineWorkspaces = {};
-          lineIds.forEach((lineId) => {
+          stableLineIds.forEach((lineId) => {
             if (newAllShiftsData[shiftId][lineId]) {
               orderedLineWorkspaces[lineId] = newAllShiftsData[shiftId][lineId];
             }
@@ -74625,7 +74709,7 @@ var TargetsView = ({
       }
     };
     fetchInitialData();
-  }, [lineIds, companyId, timezone, skuEnabled, skuCatalogLoading]);
+  }, [stableLineIds, companyId, timezone, skuEnabled, skuCatalogLoading]);
   const toggleLineDropdown = React144.useCallback((lineId) => {
     setDropdownStates((prev) => {
       const newIsOpen = !prev[lineId];
@@ -74800,6 +74884,7 @@ var TargetsView = ({
   };
   const handleActionTypeChange = React144.useCallback((lineId, workspaceId, newActionType) => {
     if (!actionIds) return;
+    setUserEditedFields((prev) => new Set(prev).add(`${lineId}-${workspaceId}-actionType`));
     setLineWorkspaces((prev) => {
       const currentLineData = prev?.[lineId];
       if (!currentLineData?.workspaces) {
@@ -74997,10 +75082,10 @@ var TargetsView = ({
       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`);
+        Array.from(newSet).forEach((fieldKey) => {
+          if (fieldKey.startsWith(`${lineId}-`)) {
+            newSet.delete(fieldKey);
+          }
         });
         return newSet;
       });

package/dist/index.mjs

@@ -19887,6 +19887,9 @@ function useNavigation(customNavigate) {
             await router.push(path, void 0, { shallow: options?.shallow ?? false });
           }
         } catch (error) {
+          if (error?.cancelled || error?.message?.includes("Route change aborted")) {
+            return;
+          }
           if (error.message?.includes("Page not compiled") && retryCount < MAX_RETRIES) {
             setTimeout(() => attemptNavigation(retryCount + 1), RETRY_DELAY);
           } else if (retryCount >= MAX_RETRIES) {
@@ -54878,27 +54881,34 @@ var WorkspaceGrid = React144__default.memo(({
     [viewMode, workspaces]
   );
   return /* @__PURE__ */ jsxs("div", { className: `flex flex-col w-full h-full overflow-hidden bg-slate-50/50 ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex-none px-4 py-3 z-20 flex flex-row items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx("div", { className: "inline-flex bg-white/95 rounded-lg shadow-sm px-4 py-2 border border-slate-200/60 backdrop-blur-sm", children: /* @__PURE__ */ jsx(Legend5, { legend, metricLabel: legendMetricLabel }) }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3 shrink-0", children: [
-        toolbarRightContent,
-        mapViewEnabled && /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleViewModeToggle,
-            className: "flex items-center gap-2 px-3 py-1.5 bg-white border border-slate-200 rounded-md shadow-sm hover:bg-slate-50 transition-colors duration-200 text-slate-700",
-            title: viewMode === "video" ? "Switch to Map View" : "Switch to Video View",
-            children: viewMode === "video" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Map$1, { className: "w-4 h-4 text-slate-500" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Map View" })
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Video, { className: "w-4 h-4 text-slate-500" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Video View" })
-            ] })
-          }
-        )
-      ] })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "workspace-grid-toolbar",
+        className: "relative z-[100] flex-none px-4 py-3 flex flex-row items-center justify-between gap-4",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx("div", { className: "inline-flex bg-white/95 rounded-lg shadow-sm px-4 py-2 border border-slate-200/60 backdrop-blur-sm", children: /* @__PURE__ */ jsx(Legend5, { legend, metricLabel: legendMetricLabel }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3 shrink-0", children: [
+            toolbarRightContent,
+            mapViewEnabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleViewModeToggle,
+                className: "flex items-center gap-2 px-3 py-1.5 bg-white border border-slate-200 rounded-md shadow-sm hover:bg-slate-50 transition-colors duration-200 text-slate-700",
+                title: viewMode === "video" ? "Switch to Map View" : "Switch to Video View",
+                children: viewMode === "video" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Map$1, { className: "w-4 h-4 text-slate-500" }),
+                  /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Map View" })
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Video, { className: "w-4 h-4 text-slate-500" }),
+                  /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Video View" })
+                ] })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: "sm:hidden px-3 py-2 bg-white border-b border-slate-200/60 z-10", children: /* @__PURE__ */ jsx(Legend5, { legend, metricLabel: legendMetricLabel }) }),
     /* @__PURE__ */ jsx("div", { className: "flex-1 relative overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: viewMode === "video" ? /* @__PURE__ */ jsx(
       motion.div,
@@ -72311,6 +72321,46 @@ var ClipsCostView = () => {
   ] });
 };
 var ClipsCostView_default = ClipsCostView;
+var DEFAULT_UNSAVED_CHANGES_MESSAGE = "You have unsaved changes. Leave this page and lose them?";
+var useUnsavedChangesPrompt = (shouldBlock, message = DEFAULT_UNSAVED_CHANGES_MESSAGE) => {
+  const router = useRouter();
+  useEffect(() => {
+    if (!shouldBlock || typeof window === "undefined") {
+      return;
+    }
+    const handleBeforeUnload = (event) => {
+      event.preventDefault();
+      event.returnValue = message;
+      return message;
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [message, shouldBlock]);
+  useEffect(() => {
+    if (!shouldBlock || !router?.events || typeof window === "undefined") {
+      return;
+    }
+    const handleRouteChangeStart = (url) => {
+      const currentUrl = router.asPath || window.location.pathname;
+      if (url === currentUrl) {
+        return;
+      }
+      if (window.confirm(message)) {
+        return;
+      }
+      const routeChangeError = new Error("Route change aborted due to unsaved changes");
+      routeChangeError.cancelled = true;
+      router.events.emit("routeChangeError", routeChangeError, url, { shallow: false });
+      throw routeChangeError;
+    };
+    router.events.on("routeChangeStart", handleRouteChangeStart);
+    return () => {
+      router.events.off("routeChangeStart", handleRouteChangeStart);
+    };
+  }, [message, router, shouldBlock]);
+};
 var calculateShiftHours = (startTime, endTime, breaks = []) => {
   if (!startTime || !endTime) return 8;
   const [startHour, startMinute] = startTime.split(":").map(Number);
@@ -72640,6 +72690,11 @@ var ShiftsView = ({
   className = ""
 }) => {
   const supabase = useSupabase();
+  const lineIdsKey = useMemo(() => lineIds.join("|"), [lineIds]);
+  const stableLineIds = useMemo(
+    () => lineIdsKey.split("|").filter(Boolean),
+    [lineIdsKey]
+  );
   const { lines: dbLines } = useLines();
   const mergedLineNames = useMemo(() => {
     const merged = { ...lineNames };
@@ -72653,14 +72708,14 @@ var ShiftsView = ({
   useEffect(() => {
     console.log("[ShiftsView] Component mounted/re-rendered", {
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      lineIds: lineIds.length
+      lineIds: stableLineIds.length
     });
     return () => {
       console.log("[ShiftsView] Component unmounting");
     };
-  }, []);
+  }, [stableLineIds.length]);
   const [lineConfigs, setLineConfigs] = useState(
-    () => lineIds.map((id3) => ({
+    () => stableLineIds.map((id3) => ({
       id: id3,
       name: lineNames[id3] || `Line ${id3.substring(0, 4)}`,
       timezone: "Asia/Kolkata",
@@ -72674,8 +72729,18 @@ var ShiftsView = ({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [saveStatusMessages, setSaveStatusMessages] = useState(
-    () => lineIds.reduce((acc, id3) => ({ ...acc, [id3]: null }), {})
+    () => stableLineIds.reduce((acc, id3) => ({ ...acc, [id3]: null }), {})
   );
+  const [dirtyLineIds, setDirtyLineIds] = useState(/* @__PURE__ */ new Set());
+  useUnsavedChangesPrompt(dirtyLineIds.size > 0);
+  const markLineDirty = useCallback((lineId) => {
+    setDirtyLineIds((prev) => {
+      if (prev.has(lineId)) return prev;
+      const next = new Set(prev);
+      next.add(lineId);
+      return next;
+    });
+  }, []);
   const showToast = useCallback((type, message) => {
     if (onToast) {
       try {
@@ -72695,7 +72760,7 @@ var ShiftsView = ({
       try {
         setLoading(true);
         setError(null);
-        const { data: enabledLines, error: linesError } = await supabase.from("lines").select("id, enable").in("id", lineIds).eq("enable", true);
+        const { data: enabledLines, error: linesError } = await supabase.from("lines").select("id, enable").in("id", stableLineIds).eq("enable", true);
         if (linesError) {
           console.error("Error fetching enabled lines:", linesError);
           showToast("error", "Error loading lines");
@@ -72727,18 +72792,21 @@ var ShiftsView = ({
           return acc;
         }, {});
         setLineConfigs((prev) => {
-          const enabledConfigs = prev.filter((config) => enabledLineIds.includes(config.id));
-          return enabledConfigs.map((config) => {
-            const rows = shiftsByLine[config.id] || [];
+          const previousByLineId = new Map(prev.map((config) => [config.id, config]));
+          return enabledLineIds.map((lineId) => {
+            const existingConfig = previousByLineId.get(lineId);
+            const rows = shiftsByLine[lineId] || [];
             const builtConfig = buildShiftConfigFromOperatingHoursRows(rows);
-            const lineName = lineNameMap[config.id] || mergedLineNames[config.id] || `Line ${config.id.substring(0, 4)}`;
+            const lineName = lineNameMap[lineId] || mergedLineNames[lineId] || `Line ${lineId.substring(0, 4)}`;
             const sortedShifts = [...builtConfig.shifts || []].sort((a, b) => a.shiftId - b.shiftId);
             return {
-              ...config,
+              id: lineId,
               name: lineName,
+              timezone: builtConfig.timezone || existingConfig?.timezone || "Asia/Kolkata",
               shifts: sortedShifts,
-              timezone: builtConfig.timezone || config.timezone,
-              isOpen: config.isOpen ?? getStoredLineState(config.id)
+              isSaving: existingConfig?.isSaving ?? false,
+              saveSuccess: existingConfig?.saveSuccess ?? false,
+              isOpen: existingConfig?.isOpen ?? getStoredLineState(lineId)
             };
           });
         });
@@ -72751,7 +72819,7 @@ var ShiftsView = ({
       }
     };
     fetchShiftConfigs();
-  }, [lineIds, showToast]);
+  }, [stableLineIds, showToast]);
   useCallback((lineId) => {
     setLineConfigs((prev) => {
       const typedPrev = prev;
@@ -72763,6 +72831,7 @@ var ShiftsView = ({
     });
   }, []);
   const updateShiftTime = useCallback((lineId, shiftIndex, field, value) => {
+    markLineDirty(lineId);
     setLineConfigs((prev) => prev.map((config) => {
       if (config.id === lineId && config.shifts) {
         const newShifts = [...config.shifts];
@@ -72773,8 +72842,9 @@ var ShiftsView = ({
       }
       return config;
     }));
-  }, []);
+  }, [markLineDirty]);
   const addShiftBreak = useCallback((lineId, shiftIndex) => {
+    markLineDirty(lineId);
     setLineConfigs((prev) => prev.map((config) => {
       if (config.id === lineId && config.shifts) {
         const newShifts = [...config.shifts];
@@ -72795,8 +72865,9 @@ var ShiftsView = ({
       }
       return config;
     }));
-  }, []);
+  }, [markLineDirty]);
   const updateShiftBreak = useCallback((lineId, shiftIndex, breakIndex, field, value) => {
+    markLineDirty(lineId);
     setLineConfigs((prev) => prev.map((config) => {
       if (config.id === lineId && config.shifts) {
         const newShifts = [...config.shifts];
@@ -72822,8 +72893,9 @@ var ShiftsView = ({
       }
       return config;
     }));
-  }, []);
+  }, [markLineDirty]);
   const removeShiftBreak = useCallback((lineId, shiftIndex, breakIndex) => {
+    markLineDirty(lineId);
     setLineConfigs((prev) => prev.map((config) => {
       if (config.id === lineId && config.shifts) {
         const newShifts = [...config.shifts];
@@ -72838,7 +72910,7 @@ var ShiftsView = ({
       }
       return config;
     }));
-  }, []);
+  }, [markLineDirty]);
   const getOperationalDateForLine = useCallback((lineConfig) => {
     const sortedShifts = [...lineConfig.shifts || []].sort((a, b) => a.shiftId - b.shiftId);
     const dayBoundaryStart = sortedShifts[0]?.startTime || "06:00";
@@ -73123,6 +73195,11 @@ var ShiftsView = ({
       setLineConfigs((prev) => prev.map(
         (config) => config.id === lineId ? { ...config, isSaving: false, saveSuccess: true } : config
       ));
+      setDirtyLineIds((prev) => {
+        const next = new Set(prev);
+        next.delete(lineId);
+        return next;
+      });
       let successMessage = "Shift configurations saved successfully.";
       if (changedShiftCount > 0 && recalculatedTargetsCount > 0) {
         successMessage = `Shift configurations saved. Targets updated successfully for ${recalculatedTargetsCount} workspace${recalculatedTargetsCount === 1 ? "" : "s"}.`;
@@ -74207,8 +74284,13 @@ var TargetsView = ({
   onSaveChanges
 }) => {
   const timezone = useAppTimezone();
+  const lineIdsKey = useMemo(() => lineIds.join("|"), [lineIds]);
+  const stableLineIds = useMemo(
+    () => lineIdsKey.split("|").filter(Boolean),
+    [lineIdsKey]
+  );
   useMemo(() => {
-    return lineIds.reduce((acc, lineId) => ({
+    return stableLineIds.reduce((acc, lineId) => ({
       ...acc,
       [lineId]: {
         productId: "",
@@ -74222,9 +74304,9 @@ var TargetsView = ({
         // Initialize factoryId
       }
     }), {});
-  }, [lineIds]);
+  }, [stableLineIds]);
   const [dropdownStates, setDropdownStates] = useState(() => {
-    return lineIds.reduce((acc, lineId) => ({
+    return stableLineIds.reduce((acc, lineId) => ({
       ...acc,
       [lineId]: getStoredLineState2(lineId)
     }), {});
@@ -74232,10 +74314,10 @@ var TargetsView = ({
   const [allShiftsData, setAllShiftsData] = useState({});
   const [actionIds, setActionIds] = useState(null);
   const [savingLines, setSavingLines] = useState(
-    () => lineIds.reduce((acc, id3) => ({ ...acc, [id3]: false }), {})
+    () => stableLineIds.reduce((acc, id3) => ({ ...acc, [id3]: false }), {})
   );
   const [saveSuccess, setSaveSuccess] = useState(
-    () => lineIds.reduce((acc, id3) => ({ ...acc, [id3]: false }), {})
+    () => stableLineIds.reduce((acc, id3) => ({ ...acc, [id3]: false }), {})
   );
   const [isLoading, setIsLoading] = useState(true);
   const [isConfigureLegendOpen, setIsConfigureLegendOpen] = useState(false);
@@ -74245,6 +74327,8 @@ var TargetsView = ({
   const canSaveTargets = useCanSaveTargets();
   const [dbValues, setDbValues] = useState({ 0: {}, 1: {} });
   const [userEditedFields, setUserEditedFields] = useState(/* @__PURE__ */ new Set());
+  const hasUnsavedChanges = userEditedFields.size > 0;
+  useUnsavedChangesPrompt(hasUnsavedChanges);
   const lineWorkspaces = allShiftsData[selectedShift] || {};
   const setLineWorkspaces = useCallback((updater) => {
     setAllShiftsData((prev) => ({
@@ -74261,13 +74345,13 @@ var TargetsView = ({
     dbLines.forEach((line) => {
       merged[line.id] = line.line_name;
     });
-    lineIds.forEach((lineId) => {
+    stableLineIds.forEach((lineId) => {
       if (!merged[lineId]) {
         merged[lineId] = `Line ${lineId.substring(0, 4)}`;
       }
     });
     return merged;
-  }, [lineNames, dbLines, lineIds]);
+  }, [lineNames, dbLines, stableLineIds]);
   const { legend, updateLegend } = useEfficiencyLegend(companyId);
   const { skus, isLoading: skusLoading } = useSKUs(companyId);
   const { skus: skuCatalog, isLoading: skuCatalogLoading } = useSKUs(companyId, {
@@ -74326,22 +74410,22 @@ var TargetsView = ({
   useEffect(() => {
     console.log("[TargetsView] Component mounted/re-rendered", {
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      lineIds: lineIds.length,
+      lineIds: stableLineIds.length,
       effectiveUserId
     });
     return () => {
       console.log("[TargetsView] Component unmounting");
     };
-  }, []);
+  }, [effectiveUserId, stableLineIds.length]);
   useEffect(() => {
     const fetchInitialData = async () => {
-      if (lineIds.length === 0 || !companyId) return;
+      if (stableLineIds.length === 0 || !companyId) return;
       if (skuCatalogLoading) return;
       console.log("[TargetsView] Starting optimized fetchInitialData with bulk endpoint");
       setIsLoading(true);
       try {
         const currentDate = getOperationalDate(timezone);
-        const { data: shiftsData, error: shiftsError } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name").in("line_id", lineIds);
+        const { data: shiftsData, error: shiftsError } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name").in("line_id", stableLineIds);
         if (shiftsError) {
           console.warn("[TargetsView] Error fetching shift definitions, falling back to defaults", shiftsError);
         }
@@ -74359,7 +74443,7 @@ var TargetsView = ({
         setSelectedShift(defaultShiftId);
         const bulkResponse = await workspaceService.fetchBulkTargets({
           companyId,
-          lineIds,
+          lineIds: stableLineIds,
           date: currentDate,
           shifts: effectiveShiftOptions.map((s) => s.id),
           // Fetch all configured shifts
@@ -74504,7 +74588,7 @@ var TargetsView = ({
           });
         });
         effectiveShiftOptions.forEach(({ id: shiftId }) => {
-          lineIds.forEach((lineId) => {
+          stableLineIds.forEach((lineId) => {
             if (!newAllShiftsData[shiftId][lineId]) {
               const lineData = data.lines[lineId];
               const shift0Data = newAllShiftsData[0]?.[lineId];
@@ -74574,7 +74658,7 @@ var TargetsView = ({
         });
         effectiveShiftOptions.forEach(({ id: shiftId }) => {
           const orderedLineWorkspaces = {};
-          lineIds.forEach((lineId) => {
+          stableLineIds.forEach((lineId) => {
             if (newAllShiftsData[shiftId][lineId]) {
               orderedLineWorkspaces[lineId] = newAllShiftsData[shiftId][lineId];
             }
@@ -74596,7 +74680,7 @@ var TargetsView = ({
       }
     };
     fetchInitialData();
-  }, [lineIds, companyId, timezone, skuEnabled, skuCatalogLoading]);
+  }, [stableLineIds, companyId, timezone, skuEnabled, skuCatalogLoading]);
   const toggleLineDropdown = useCallback((lineId) => {
     setDropdownStates((prev) => {
       const newIsOpen = !prev[lineId];
@@ -74771,6 +74855,7 @@ var TargetsView = ({
   };
   const handleActionTypeChange = useCallback((lineId, workspaceId, newActionType) => {
     if (!actionIds) return;
+    setUserEditedFields((prev) => new Set(prev).add(`${lineId}-${workspaceId}-actionType`));
     setLineWorkspaces((prev) => {
       const currentLineData = prev?.[lineId];
       if (!currentLineData?.workspaces) {
@@ -74968,10 +75053,10 @@ var TargetsView = ({
       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`);
+        Array.from(newSet).forEach((fieldKey) => {
+          if (fieldKey.startsWith(`${lineId}-`)) {
+            newSet.delete(fieldKey);
+          }
         });
         return newSet;
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "6.12.19",
+  "version": "6.12.21",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",