@optifye/dashboard-core 6.6.11 → 6.6.13

package/dist/index.js

@@ -4044,12 +4044,8 @@ var S3ClipsSupabaseService = class {
         id: clip.clip_id,
         src: clip.playlist,
         // Raw playlist content
-        timestamp: new Date(clip.date).toLocaleTimeString("en-US", {
-          hour12: false,
-          hour: "2-digit",
-          minute: "2-digit",
-          second: "2-digit"
-        }),
+        timestamp: clip.timestamp,
+        // Use pre-formatted timestamp from API (already in 12-hour format with seconds)
         severity: this.getSeverityFromClipType(clip.clip_type_name),
         description: this.getDescriptionFromClipType(clip.clip_type_name),
         type: clip.clip_type_name,
@@ -6545,6 +6541,10 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
   const lineIdRef = React21.useRef(lineId);
   const isFetchingRef = React21.useRef(false);
   const updateQueueRef = React21.useRef(false);
+  const onLineMetricsUpdateRef = React21.useRef(onLineMetricsUpdate);
+  React21.useEffect(() => {
+    onLineMetricsUpdateRef.current = onLineMetricsUpdate;
+  }, [onLineMetricsUpdate]);
   const companySpecificMetricsTable = React21.useMemo(
     () => getCompanyMetricsTableName(entityConfig.companyId, "performance_metrics"),
     [entityConfig.companyId]
@@ -6660,13 +6660,17 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
     defaultTimezone,
     shiftConfig
   ]);
+  const fetchAllMetricsRef = React21.useRef(fetchAllMetrics);
+  React21.useEffect(() => {
+    fetchAllMetricsRef.current = fetchAllMetrics;
+  }, [fetchAllMetrics]);
   const queueUpdate = React21.useCallback(() => {
     if (updateQueueRef.current || !supabase) {
       return;
     }
     updateQueueRef.current = true;
-    fetchAllMetrics();
-  }, [fetchAllMetrics, supabase]);
+    fetchAllMetricsRef.current();
+  }, [supabase]);
   React21.useEffect(() => {
     if (lineId && supabase) {
       fetchAllMetrics();
@@ -6681,11 +6685,11 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
     const operationalDateForSubscription = getOperationalDate(defaultTimezone);
     const targetLineIds = currentLineIdToUse === (entityConfig.factoryViewId || "factory") ? getConfiguredLineIds(entityConfig) : [currentLineIdToUse];
     if (targetLineIds.length === 0) return;
-    const wsMetricsFilter = `date=eq.${operationalDateForSubscription}&shift_id=eq.${currentShiftDetails.shiftId}&line_id=in.(${targetLineIds.join(",")})`;
-    const lineMetricsFilter = `date=eq.${operationalDateForSubscription}&shift_id=eq.${currentShiftDetails.shiftId}&line_id=in.(${targetLineIds.join(",")})`;
+    const wsMetricsFilter = `line_id=in.(${targetLineIds.map((id3) => `"${id3}"`).join(",")})`;
+    const lineMetricsFilter = `line_id=in.(${targetLineIds.map((id3) => `"${id3}"`).join(",")})`;
     const channels = [];
     const createSubscription = (table, filter2, channelNameBase, callback) => {
-      const channelName = `${channelNameBase}-${currentLineIdToUse}-${operationalDateForSubscription}-${currentShiftDetails.shiftId}`.replace(/[^a-zA-Z0-9_-]/g, "");
+      const channelName = `${channelNameBase}-${Date.now()}`.replace(/[^a-zA-Z0-9_-]/g, "");
       const channel = supabase.channel(channelName).on(
         "postgres_changes",
         { event: "*", schema, table, filter: filter2 },
@@ -6695,40 +6699,29 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
             callback();
           }
         }
-      ).subscribe((status, err) => {
-        if (status === supabaseJs.REALTIME_SUBSCRIBE_STATES.CHANNEL_ERROR && err) {
-          console.error(`[useDashboardMetrics] Subscription error for ${table} on ${currentLineIdToUse}:`, err.message);
-        } else if (status === supabaseJs.REALTIME_SUBSCRIBE_STATES.TIMED_OUT) {
-          console.warn(`[useDashboardMetrics] Subscription timeout for ${table} on ${currentLineIdToUse}.`);
-        }
-      });
+      ).subscribe();
       channels.push(channel);
     };
     createSubscription(companySpecificMetricsTable, wsMetricsFilter, "dashboard-ws-metrics", queueUpdate);
     createSubscription(configuredLineMetricsTable, lineMetricsFilter, "dashboard-line-metrics", () => {
       queueUpdate();
-      onLineMetricsUpdate?.();
+      onLineMetricsUpdateRef.current?.();
     });
     return () => {
       channels.forEach((channel) => {
-        supabase?.removeChannel(channel).catch((err) => console.error("[useDashboardMetrics] Error removing channel:", err.message));
+        supabase?.removeChannel(channel);
       });
     };
   }, [
     supabase,
-    // fetchAllMetrics, // fetchAllMetrics is now a dependency of queueUpdate
     queueUpdate,
-    // Section 6: Add queueUpdate as dependency
     companySpecificMetricsTable,
     configuredLineMetricsTable,
     schema,
-    entityConfig,
-    // For companyId, factoryViewId, default/secondaryLineId
+    entityConfig?.companyId,
+    entityConfig?.factoryViewId,
     defaultTimezone,
-    shiftConfig,
-    onLineMetricsUpdate,
     lineId
-    // Add lineId from props to re-run effect if it changes, managed by lineIdRef inside effect
   ]);
   return {
     workspaceMetrics: metrics2?.workspaceMetrics || [],
@@ -6889,6 +6882,7 @@ var useRealtimeLineMetrics = ({
   const updateQueueRef = React21.useRef(false);
   const isFetchingRef = React21.useRef(false);
   const channelsRef = React21.useRef([]);
+  const fetchTimeoutRef = React21.useRef(null);
   const currentShift = React21.useMemo(() => getCurrentShift(dateTimeConfig.defaultTimezone || "Asia/Kolkata", shiftConfig), [dateTimeConfig.defaultTimezone, shiftConfig]);
   const shiftId = React21.useMemo(
     () => urlShiftId !== void 0 ? urlShiftId : currentShift.shiftId,
@@ -7098,9 +7092,17 @@ var useRealtimeLineMetrics = ({
     }
   }, [supabase, date, shiftId, urlShiftId, onMetricsUpdate, entityConfig, dateTimeConfig.defaultTimezone]);
   const queueUpdate = React21.useCallback(() => {
-    if (updateQueueRef.current) return;
-    updateQueueRef.current = true;
-    fetchData();
+    console.log("[useRealtimeLineMetrics] Update queued, debouncing...");
+    if (fetchTimeoutRef.current) {
+      clearTimeout(fetchTimeoutRef.current);
+    }
+    fetchTimeoutRef.current = setTimeout(() => {
+      if (updateQueueRef.current) return;
+      updateQueueRef.current = true;
+      console.log("[useRealtimeLineMetrics] Debounced fetch triggered");
+      fetchData();
+      fetchTimeoutRef.current = null;
+    }, 500);
   }, [fetchData]);
   const setupSubscriptions = React21.useCallback(() => {
     if (channelsRef.current.length > 0) {
@@ -7178,6 +7180,10 @@ var useRealtimeLineMetrics = ({
     }
     setupSubscriptions();
     return () => {
+      if (fetchTimeoutRef.current) {
+        clearTimeout(fetchTimeoutRef.current);
+        fetchTimeoutRef.current = null;
+      }
       if (channelsRef.current.length > 0) {
         channelsRef.current.forEach((channel) => {
           if (process.env.NODE_ENV === "development") {
@@ -8124,13 +8130,10 @@ var getWorkspaceDisplayName = (workspaceId, lineId) => {
     }
   }
   if (displayName) {
-    console.log(`getWorkspaceDisplayName(${workspaceId}, lineId: ${lineId}) -> ${displayName} (from Supabase)`);
     return displayName;
   } else {
     if (isInitialized) {
-      console.log(`getWorkspaceDisplayName(${workspaceId}, lineId: ${lineId}) -> ${workspaceId} (not found in Supabase data)`);
-    } else {
-      console.log(`getWorkspaceDisplayName(${workspaceId}, lineId: ${lineId}) -> ${workspaceId} (Supabase not initialized yet)`);
+      console.warn(`getWorkspaceDisplayName(${workspaceId}, lineId: ${lineId}) -> ${workspaceId} (not found in Supabase data)`);
     }
     return workspaceId;
   }
@@ -8167,13 +8170,10 @@ var getShortWorkspaceDisplayName = (workspaceId, lineId) => {
     }
   }
   if (displayName) {
-    console.log(`getShortWorkspaceDisplayName(${workspaceId}, lineId: ${lineId}) -> ${displayName} (from Supabase)`);
     return displayName;
   } else {
     if (isInitialized) {
-      console.log(`getShortWorkspaceDisplayName(${workspaceId}, lineId: ${lineId}) -> ${workspaceId} (not found in Supabase data)`);
-    } else {
-      console.log(`getShortWorkspaceDisplayName(${workspaceId}, lineId: ${lineId}) -> ${workspaceId} (Supabase not initialized yet)`);
+      console.warn(`getShortWorkspaceDisplayName(${workspaceId}, lineId: ${lineId}) -> ${workspaceId} (not found in Supabase data)`);
     }
     return workspaceId;
   }
@@ -8479,6 +8479,8 @@ var useAllWorkspaceMetrics = (options) => {
   const [loading, setLoading] = React21.useState(true);
   const [error, setError] = React21.useState(null);
   const [initialized, setInitialized] = React21.useState(false);
+  const fetchTimeoutRef = React21.useRef(null);
+  const isFetchingRef = React21.useRef(false);
   const queryShiftId = React21.useMemo(() => {
     const currentShift = getCurrentShift(
       dateTimeConfig.defaultTimezone || "Asia/Kolkata",
@@ -8497,16 +8499,15 @@ var useAllWorkspaceMetrics = (options) => {
   }, [entityConfig.companyId]);
   const schema = databaseConfig.schema ?? "public";
   const fetchWorkspaceMetrics = React21.useCallback(async () => {
+    if (isFetchingRef.current) {
+      return;
+    }
+    isFetchingRef.current = true;
     if (!initialized) {
       setLoading(true);
     }
     setError(null);
     try {
-      console.log("Fetching all workspace metrics with params:", {
-        queryDate,
-        queryShiftId,
-        metricsTable
-      });
       const configuredLineIds = getConfiguredLineIds(entityConfig);
       let enabledWorkspaceIds = [];
       for (const lineId of configuredLineIds) {
@@ -8549,13 +8550,26 @@ var useAllWorkspaceMetrics = (options) => {
         efficiency: item.efficiency || 0,
         action_threshold: item.total_day_output || 0
       }));
-      setWorkspaces(transformedData);
+      setWorkspaces((prevWorkspaces) => {
+        if (prevWorkspaces.length !== transformedData.length) {
+          return transformedData;
+        }
+        const hasChanges = transformedData.some((newWs) => {
+          const prevWs = prevWorkspaces.find((w) => w.workspace_uuid === newWs.workspace_uuid);
+          if (!prevWs) {
+            return true;
+          }
+          return prevWs.efficiency !== newWs.efficiency || prevWs.action_count !== newWs.action_count || prevWs.action_threshold !== newWs.action_threshold || prevWs.avg_cycle_time !== newWs.avg_cycle_time || prevWs.workspace_name !== newWs.workspace_name;
+        });
+        return hasChanges ? transformedData : prevWorkspaces;
+      });
       setInitialized(true);
     } catch (err) {
-      console.error("Error fetching all workspace metrics:", err);
+      console.error("[useAllWorkspaceMetrics] Error:", err.message);
       setError({ message: err.message, code: err.code || "FETCH_ERROR" });
     } finally {
       setLoading(false);
+      isFetchingRef.current = false;
     }
   }, [queryDate, queryShiftId, metricsTable, supabase, entityConfig.companyId]);
   React21.useEffect(() => {
@@ -8563,25 +8577,37 @@ var useAllWorkspaceMetrics = (options) => {
       fetchWorkspaceMetrics();
     }
     const setupSubscription = () => {
-      const filter2 = `date=eq.${queryDate} AND shift_id=eq.${queryShiftId}`;
-      console.log("Setting up subscription for all workspaces with filter:", filter2);
       const channel2 = supabase.channel(`all-workspace-metrics-${Date.now()}`).on(
         "postgres_changes",
         {
           event: "*",
           schema,
-          table: metricsTable,
-          filter: filter2
+          table: metricsTable
         },
         async (payload) => {
-          console.log("All workspace metrics update received:", payload);
-          await fetchWorkspaceMetrics();
+          const data = payload.new || payload.old;
+          if (data?.date !== queryDate || data?.shift_id !== queryShiftId) {
+            return;
+          }
+          if (fetchTimeoutRef.current) {
+            clearTimeout(fetchTimeoutRef.current);
+          }
+          fetchTimeoutRef.current = setTimeout(async () => {
+            if (!isFetchingRef.current) {
+              await fetchWorkspaceMetrics();
+            }
+            fetchTimeoutRef.current = null;
+          }, 300);
         }
       ).subscribe();
       return channel2;
     };
     const channel = setupSubscription();
     return () => {
+      if (fetchTimeoutRef.current) {
+        clearTimeout(fetchTimeoutRef.current);
+        fetchTimeoutRef.current = null;
+      }
       if (channel) {
         supabase.removeChannel(channel);
       }
@@ -21983,7 +22009,16 @@ var VideoCard = React21__namespace.default.memo(({
     }
   );
 }, (prevProps, nextProps) => {
-  return prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.workspace_name === nextProps.workspace.workspace_name && Math.abs(prevProps.workspace.efficiency - nextProps.workspace.efficiency) < 1 && prevProps.hlsUrl === nextProps.hlsUrl && prevProps.shouldPlay === nextProps.shouldPlay && prevProps.cropping?.x === nextProps.cropping?.x && prevProps.cropping?.y === nextProps.cropping?.y && prevProps.cropping?.width === nextProps.cropping?.width && prevProps.cropping?.height === nextProps.cropping?.height;
+  if (prevProps.workspace.efficiency !== nextProps.workspace.efficiency || prevProps.workspace.trend !== nextProps.workspace.trend || prevProps.workspace.performance_score !== nextProps.workspace.performance_score || prevProps.workspace.pph !== nextProps.workspace.pph) {
+    return false;
+  }
+  if (prevProps.hlsUrl !== nextProps.hlsUrl || prevProps.shouldPlay !== nextProps.shouldPlay) {
+    return false;
+  }
+  if (prevProps.cropping?.x !== nextProps.cropping?.x || prevProps.cropping?.y !== nextProps.cropping?.y || prevProps.cropping?.width !== nextProps.cropping?.width || prevProps.cropping?.height !== nextProps.cropping?.height) {
+    return false;
+  }
+  return true;
 });
 VideoCard.displayName = "VideoCard";
 var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
@@ -22991,7 +23026,8 @@ var BreakNotificationPopup = ({
   onDismiss,
   isVisible = true,
   className = "",
-  lineNames = {}
+  lineNames = {},
+  axelImagePath = "/axel-profile.png"
 }) => {
   const [isDismissed, setIsDismissed] = React21.useState(false);
   const [currentTime, setCurrentTime] = React21.useState(/* @__PURE__ */ new Date());
@@ -23016,6 +23052,109 @@ var BreakNotificationPopup = ({
   if (!isVisible || isDismissed || activeBreaks.length === 0) {
     return null;
   }
+  return /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { children: activeBreaks.map((breakItem, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, x: 100, y: -20 },
+      animate: { opacity: 1, x: 0, y: 0 },
+      exit: { opacity: 0, x: 100, y: -20 },
+      transition: { duration: 0.3, ease: "easeOut", delay: index * 0.1 },
+      className: `fixed right-4 z-50 max-w-xs w-full ${className}`,
+      style: { top: `${6 + index * 12}rem` },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: axelImagePath,
+              alt: "Axel AI",
+              className: "w-10 h-10 rounded-full object-cover border-2 border-gray-200 shadow-sm",
+              onError: (e) => {
+                const target = e.currentTarget;
+                target.style.display = "none";
+                const fallback = document.createElement("div");
+                fallback.className = "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-base shadow-sm border-2 border-gray-200";
+                fallback.textContent = "A";
+                target.parentElement?.appendChild(fallback);
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "font-semibold text-sm text-gray-900", children: [
+                breakItem.remarks || "Break",
+                (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500 ml-1", children: [
+                  "\u2022 ",
+                  lineNames[breakItem.lineId] || `Line ${breakItem.lineId.substring(0, 8)}`
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Coffee, { className: "w-4 h-4 text-amber-500" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-600 leading-relaxed mb-2", children: [
+              "Currently active from ",
+              breakItem.startTime,
+              " to ",
+              breakItem.endTime,
+              ". ",
+              formatTime3(breakItem.elapsedMinutes),
+              " elapsed of ",
+              formatTime3(breakItem.duration),
+              " total."
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "h-1.5 bg-blue-500 rounded-full transition-all duration-1000",
+                style: {
+                  width: `${Math.min(100, Math.max(0, breakItem.elapsedMinutes / breakItem.duration * 100))}%`
+                }
+              }
+            ) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleDismiss,
+            onTouchStart: () => {
+            },
+            className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-2 sm:p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 touch-manipulation min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center flex-shrink-0",
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
+          }
+        )
+      ] }) }) })
+    },
+    `${breakItem.lineId}-${breakItem.startTime}-${index}`
+  )) });
+};
+var AxelNotificationPopup = ({
+  suggestion,
+  isVisible = true,
+  onDismiss,
+  className = "",
+  axelImagePath = "/axel-profile.png"
+}) => {
+  const [isDismissed, setIsDismissed] = React21.useState(false);
+  const handleDismiss = () => {
+    setIsDismissed(true);
+    onDismiss?.();
+  };
+  if (!isVisible || isDismissed || !suggestion) {
+    return null;
+  }
+  const getTypeIcon = () => {
+    switch (suggestion.type) {
+      case "improvement":
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "w-4 h-4 text-blue-500" });
+      case "alert":
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-4 h-4 text-amber-500" });
+      case "insight":
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4 text-purple-500" });
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-4 h-4 text-blue-500" });
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
     motion.div,
     {
@@ -23023,58 +23162,54 @@ var BreakNotificationPopup = ({
       animate: { opacity: 1, x: 0, y: 0 },
       exit: { opacity: 0, x: 100, y: -20 },
       transition: { duration: 0.3, ease: "easeOut" },
-      className: `fixed top-24 right-4 z-50 max-w-xs w-full ${className}`,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-lg overflow-hidden", children: activeBreaks.map((breakItem, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      className: `fixed top-24 right-4 z-40 max-w-xs w-full ${className}`,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
         motion.div,
         {
-          initial: { opacity: 0, y: 20 },
+          initial: { opacity: 0, y: 10 },
           animate: { opacity: 1, y: 0 },
-          transition: { delay: index * 0.1 },
-          className: `p-3 ${index > 0 ? "border-t border-gray-100" : ""}`,
+          transition: { delay: 0.1 },
+          className: "p-3",
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse flex-shrink-0 mt-2" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: axelImagePath,
+                  alt: "Axel AI",
+                  className: "w-10 h-10 rounded-full object-cover border-2 border-gray-200 shadow-sm",
+                  onError: (e) => {
+                    const target = e.currentTarget;
+                    target.style.display = "none";
+                    const fallback = document.createElement("div");
+                    fallback.className = "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-base shadow-sm border-2 border-gray-200";
+                    fallback.textContent = "A";
+                    target.parentElement?.appendChild(fallback);
+                  }
+                }
+              ) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-base sm:text-sm text-gray-900", children: breakItem.remarks || "Break" }),
-                  (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-xs text-gray-500 mt-0.5", children: lineNames[breakItem.lineId] || `Line ${breakItem.lineId.substring(0, 8)}` })
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm text-gray-900", children: suggestion.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: getTypeIcon() })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm sm:text-xs text-gray-600 font-medium", children: [
-                  breakItem.startTime,
-                  " - ",
-                  breakItem.endTime
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm sm:text-xs text-gray-500", children: [
-                  formatTime3(breakItem.elapsedMinutes),
-                  " / ",
-                  formatTime3(breakItem.duration)
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "h-1.5 bg-blue-500 rounded-full transition-all duration-1000",
-                    style: {
-                      width: `${Math.min(100, Math.max(0, breakItem.elapsedMinutes / breakItem.duration * 100))}%`
-                    }
-                  }
-                ) }) })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-600 leading-relaxed", children: suggestion.message })
               ] })
             ] }),
-            index === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: handleDismiss,
                 onTouchStart: () => {
                 },
-                className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-2 sm:p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 touch-manipulation min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center",
+                className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-2 sm:p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 touch-manipulation min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center flex-shrink-0",
                 "aria-label": "Dismiss notification",
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
               }
             )
           ] })
-        },
-        `${breakItem.lineId}-${breakItem.startTime}-${index}`
-      )) })
+        }
+      ) })
     }
   ) });
 };
@@ -25905,12 +26040,6 @@ var WorkspaceHistoryCalendar = ({
     ] })
   ] });
 };
-
-// src/lib/constants/design-tokens.ts
-var designTokens = {
-  // Typography scale with clear hierarchy
-  typography: {
-    body: "text-sm text-gray-600"}};
 var WEEKDAYS3 = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var getOrdinal = (n) => {
   const suffix = ["th", "st", "nd", "rd"];
@@ -26094,10 +26223,13 @@ var WorkspaceMonthlyHistory = ({
     }
   }, [workspaceId, onShiftChange]);
   if (monthlyDataLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 animate-spin rounded-full border-4 border-blue-200", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full border-4 border-blue-600 border-t-transparent" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: designTokens.typography.body + " font-medium", children: "Loading monthly performance data..." })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      OptifyeLogoLoader_default,
+      {
+        size: "lg",
+        message: "Loading monthly performance data..."
+      }
+    ) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-2 min-h-0 overflow-y-auto pb-6 ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 border border-gray-200 rounded-lg p-1 bg-gray-50", children: [
@@ -26534,7 +26666,7 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
         doc.roundedRect(22, y - 7, 165, 12, 2, 2, "S");
       };
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, 95, 180, 70, 3, 3, "F");
+      doc.roundedRect(15, 95, 180, 60, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
@@ -26563,34 +26695,29 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
       doc.text("PPH (Pieces Per Hour):", 25, kpiStartY + kpiSpacing * 3);
       doc.setFont("helvetica", "bold");
       doc.text(`${workspace.avg_pph.toFixed(1)} (Standard: ${workspace.pph_threshold.toFixed(1)})`, 120, kpiStartY + kpiSpacing * 3);
-      createKPIBox(kpiStartY + kpiSpacing * 4);
-      doc.setFont("helvetica", "normal");
-      doc.text("Rank:", 25, kpiStartY + kpiSpacing * 4);
-      doc.setFont("helvetica", "bold");
-      doc.text(`${workspace.workspace_rank} of ${workspace.total_workspaces}`, 120, kpiStartY + kpiSpacing * 4);
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
-      doc.line(20, 180, 190, 180);
+      doc.line(20, 170, 190, 170);
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, 185, 180, 85, 3, 3, "F");
+      doc.roundedRect(15, 175, 180, 85, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text("Hourly Performance", 20, 195);
+      doc.text("Hourly Performance", 20, 185);
       doc.setTextColor(0, 0, 0);
       doc.setFontSize(11);
       doc.setFont("helvetica", "bold");
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(20, 187, 170, 8, 1, 1, "F");
-      doc.text("Time Range", 25, 192);
-      doc.text("Output", 95, 192);
-      doc.text("Target", 135, 192);
-      doc.text("Status", 170, 192);
+      doc.roundedRect(20, 177, 170, 8, 1, 1, "F");
+      doc.text("Time Range", 25, 182);
+      doc.text("Output", 95, 182);
+      doc.text("Target", 135, 182);
+      doc.text("Status", 170, 182);
       doc.setLineWidth(0.2);
       doc.setDrawColor(220, 220, 220);
-      doc.line(20, 195, 190, 195);
+      doc.line(20, 185, 190, 185);
       doc.setFont("helvetica", "normal");
-      let yPos = 201;
+      let yPos = 191;
       const hourlyData = workspace.hourly_action_counts || [];
       const hourlyTarget = workspace.pph_threshold;
       hourlyData.forEach((output, index) => {
@@ -28384,7 +28511,10 @@ var FilterDialogTrigger = ({
     }
   );
 };
-var getSeverityIcon = (severity) => {
+var getSeverityIcon = (severity, categoryId) => {
+  if (categoryId === "idle_time" || categoryId === "low_value" || categoryId === "longest-idles") {
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3 w-3 text-red-500" });
+  }
   switch (severity) {
     case "high":
       return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3 w-3 text-red-500" });
@@ -28611,17 +28741,17 @@ var FileManagerFilters = ({
         const colorClasses = getColorClasses(category.color);
         const clipNodes = filteredClips.map((clip, index) => {
           const timeString = new Date(clip.clip_timestamp).toLocaleTimeString("en-US", {
-            hour12: false,
-            hour: "2-digit",
+            hour12: true,
+            hour: "numeric",
             minute: "2-digit",
             timeZone: timezone
             // Use database timezone for display
           });
           return {
             id: clip.id,
-            label: `${timeString} - ${clip.description}${clip.duration && category.id !== "idle_time" ? ` (${clip.duration.toFixed(1)}s)` : ""}`,
+            label: `${timeString}${clip.duration && category.id !== "idle_time" ? ` - (${clip.duration.toFixed(1)}s)` : ""}`,
             type: "video",
-            icon: getSeverityIcon(clip.severity),
+            icon: getSeverityIcon(clip.severity, category.id),
             timestamp: clip.clip_timestamp,
             severity: clip.severity,
             clipId: clip.clipId,
@@ -28661,9 +28791,9 @@ var FileManagerFilters = ({
         children: (percentileClips["fast-cycles"] || []).map((clip, index) => ({
           id: clip.id,
           // Remove prefix to match currentVideoId
-          label: `${clip.timestamp} - ${clip.description}${clip.cycle_time_seconds ? ` (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
+          label: `${clip.timestamp}${clip.cycle_time_seconds ? ` - (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
           type: "video",
-          icon: getSeverityIcon(clip.severity),
+          icon: getSeverityIcon(clip.severity, "fast-cycles"),
           timestamp: clip.creation_timestamp,
           severity: clip.severity,
           clipId: clip.id,
@@ -28684,9 +28814,9 @@ var FileManagerFilters = ({
         children: (percentileClips["slow-cycles"] || []).map((clip, index) => ({
           id: clip.id,
           // Remove prefix to match currentVideoId
-          label: `${clip.timestamp} - ${clip.description}${clip.cycle_time_seconds ? ` (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
+          label: `${clip.timestamp}${clip.cycle_time_seconds ? ` - (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
           type: "video",
-          icon: getSeverityIcon(clip.severity),
+          icon: getSeverityIcon(clip.severity, "slow-cycles"),
           timestamp: clip.creation_timestamp,
           severity: clip.severity,
           clipId: clip.id,
@@ -28707,9 +28837,9 @@ var FileManagerFilters = ({
         isPercentile: true,
         children: (percentileClips['idle-times'] || []).map((clip, index) => ({
           id: clip.id, // Remove prefix to match currentVideoId
-          label: `${clip.timestamp} - ${clip.description}${clip.cycle_time_seconds ? ` (${clip.cycle_time_seconds.toFixed(1)}s)` : ''}`,
+          label: `${clip.timestamp}${clip.cycle_time_seconds ? ` - (${clip.cycle_time_seconds.toFixed(1)}s)` : ''}`,
           type: 'video' as const,
-          icon: getSeverityIcon(clip.severity),
+          icon: getSeverityIcon(clip.severity, 'longest-idles'),
           timestamp: clip.creation_timestamp,
           severity: clip.severity,
           clipId: clip.id,
@@ -28764,7 +28894,7 @@ var FileManagerFilters = ({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: `flex items-center cursor-pointer transition-all duration-300 ease-out group relative overflow-hidden ${node.type === "category" && depth === 0 ? `py-3 px-4 rounded-2xl hover:bg-gradient-to-r hover:from-slate-50 hover:to-blue-50/30 hover:shadow-lg hover:shadow-blue-100/20 hover:scale-[1.02] hover:-translate-y-0.5 ${isActive ? "bg-gradient-to-r from-blue-50 via-blue-50/80 to-indigo-50/60 border border-blue-200/50 shadow-lg shadow-blue-100/30 scale-[1.02]" : "border border-transparent"}` : `py-2 px-3 rounded-xl hover:bg-gradient-to-r hover:from-slate-50 hover:to-slate-50/50 hover:shadow-sm ${isActive ? "bg-gradient-to-r from-blue-50/80 to-blue-50/40 border border-blue-200/30 shadow-sm" : "border border-transparent"} ${isCurrentVideo ? "bg-gradient-to-r from-emerald-50 to-green-50/60 border border-emerald-200/50 shadow-md shadow-emerald-100/20" : ""}`} ${node.type === "video" ? "ml-6" : ""}`,
+          className: `flex items-center cursor-pointer transition-all duration-300 ease-out group relative overflow-hidden ${node.type === "category" && depth === 0 ? `py-3 px-4 rounded-2xl hover:bg-gradient-to-r hover:from-slate-50 hover:to-blue-50/30 hover:shadow-lg hover:shadow-blue-100/20 hover:scale-[1.02] hover:-translate-y-0.5 ${isActive ? "bg-gradient-to-r from-blue-50 via-blue-50/80 to-indigo-50/60 border border-blue-200/50 shadow-lg shadow-blue-100/30 scale-[1.02]" : "border border-transparent"}` : `py-2 px-3 rounded-xl hover:bg-gradient-to-r hover:from-slate-50 hover:to-slate-50/50 hover:shadow-sm ${isActive ? "bg-gradient-to-r from-blue-50/80 to-blue-50/40 border border-blue-200/30 shadow-sm" : "border border-transparent"} ${isCurrentVideo ? "bg-gradient-to-r from-blue-50 to-blue-50/60 border border-blue-200/50 shadow-md shadow-blue-100/20" : ""}`} ${node.type === "video" ? "ml-6" : ""}`,
           onClick: () => handleNodeClick(node),
           children: [
             hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
@@ -28781,13 +28911,10 @@ var FileManagerFilters = ({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 mr-3 ${node.type === "category" || node.type === "percentile-category" ? "p-2 rounded-lg shadow-sm group-hover:scale-110 transition-transform duration-200" : "p-0.5"} ${colorClasses && (node.type === "category" || node.type === "percentile-category") ? `${colorClasses.bg} border border-white/60` : ""}`, children: node.icon }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex items-center justify-between", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-semibold tracking-tight ${node.type === "category" || node.type === "percentile-category" ? "text-slate-800 text-sm" : "text-slate-700 text-xs"} ${isCurrentVideo ? "text-emerald-700 font-bold" : ""} group-hover:text-slate-900 transition-colors duration-200`, children: node.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-semibold tracking-tight ${node.type === "category" || node.type === "percentile-category" ? "text-slate-800 text-sm" : "text-slate-700 text-xs"} ${isCurrentVideo ? "text-blue-700 font-bold" : ""} group-hover:text-slate-900 transition-colors duration-200`, children: node.label }),
                 node.type === "category" && categories.find((c) => c.id === node.id)?.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: categories.find((c) => c.id === node.id)?.description }),
                 node.type === "percentile-category" && node.subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: node.subtitle }),
-                node.type === "video" && node.severity && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${node.severity === "high" ? "bg-red-100 text-red-700" : node.severity === "medium" ? "bg-yellow-100 text-yellow-700" : "bg-green-100 text-green-700"}`, children: [
-                  node.severity,
-                  " priority"
-                ] }) })
+                node.type === "video" && node.severity && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${node.categoryId === "idle_time" || node.categoryId === "low_value" ? "bg-red-100 text-red-700" : node.severity === "high" ? "bg-red-100 text-red-700" : node.severity === "medium" ? "bg-yellow-100 text-yellow-700" : "bg-green-100 text-green-700"}`, children: node.categoryId === "idle_time" || node.categoryId === "low_value" ? "Idle" : node.severity === "low" ? "Fast" : node.severity === "medium" ? "Average" : "Slow" }) })
               ] }),
               node.count !== void 0 && (node.type === "category" || node.type === "percentile-category") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-2.5 py-1 text-sm font-bold rounded-lg shadow-sm border backdrop-blur-sm flex-shrink-0 group-hover:scale-105 transition-all duration-200 ${colorClasses ? `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border} bg-opacity-80` : "bg-slate-100/80 text-slate-700 border-slate-200/60"}`, children: node.count }) })
             ] })
@@ -37028,6 +37155,8 @@ function HomeView({
   const [errorMessage, setErrorMessage] = React21.useState(null);
   const [displayNamesInitialized, setDisplayNamesInitialized] = React21.useState(false);
   const [hasInitialDataLoaded, setHasInitialDataLoaded] = React21.useState(false);
+  const [axelSuggestion, setAxelSuggestion] = React21.useState(null);
+  const [showAxelNotification, setShowAxelNotification] = React21.useState(false);
   const dashboardConfig = useDashboardConfig();
   const timezone = useAppTimezone();
   React21.useEffect(() => {
@@ -37102,12 +37231,7 @@ function HomeView({
   }, []);
   const handleWorkspaceHoverEnd = React21.useCallback((workspaceId) => {
   }, []);
-  const memoizedWorkspaceMetrics = React21.useMemo(() => workspaceMetrics, [
-    // Only update reference if meaningful properties change
-    workspaceMetrics.length,
-    // Use stable string representation instead of spreading array
-    JSON.stringify(workspaceMetrics.map((w) => `${w.workspace_uuid}-${Math.round(w.efficiency)}-${w.trend}`))
-  ]);
+  const memoizedWorkspaceMetrics = workspaceMetrics;
   const memoizedKPIs = React21.useMemo(() => kpis, [
     // Only update reference when values change by at least 1%
     kpis?.efficiency?.value ? Math.round(kpis.efficiency.value) : null,
@@ -37135,6 +37259,9 @@ function HomeView({
     setIsChangingFilter(true);
     setSelectedLineId(value);
   }, []);
+  const handleDismissAxelNotification = React21.useCallback(() => {
+    setShowAxelNotification(false);
+  }, []);
   React21.useEffect(() => {
     if (!metricsLoading && !kpisLoading && isChangingFilter) {
       if (workspaceMetrics.length > 0 || selectedLineId === factoryViewId) {
@@ -37246,6 +37373,14 @@ function HomeView({
             lineNames,
             isVisible: !breaksLoading && !breaksError
           }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AxelNotificationPopup,
+          {
+            suggestion: axelSuggestion,
+            isVisible: showAxelNotification,
+            onDismiss: handleDismissAxelNotification
+          }
         )
       ] })
     }
@@ -38679,7 +38814,7 @@ var KPIsOverviewView = ({
 var KPIsOverviewView_default = KPIsOverviewView;
 var IsolatedTimer = React21.memo(() => {
   return /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {});
-}, () => true);
+});
 IsolatedTimer.displayName = "IsolatedTimer";
 var HeaderRibbon = React21.memo(({
   currentDate,
@@ -38687,42 +38822,49 @@ var HeaderRibbon = React21.memo(({
   shiftId,
   getShiftIcon,
   getShiftName
-}) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden mt-3 flex items-center justify-center gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-gray-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: currentMobileDate }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon(shiftId) }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: getShiftName(shiftId) })
+}) => {
+  const shiftIcon = React21.useMemo(() => getShiftIcon(shiftId), [getShiftIcon, shiftId]);
+  const shiftName = React21.useMemo(() => getShiftName(shiftId), [getShiftName, shiftId]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden mt-3 flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-gray-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: currentMobileDate }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-700 scale-90", children: shiftIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: shiftName })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }) })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: currentDate }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftId) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-medium text-blue-600", children: [
-        getShiftName(shiftId),
-        " Shift"
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: currentDate }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: shiftIcon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-medium text-blue-600", children: [
+          shiftName,
+          " Shift"
+        ] })
       ] })
-    ] })
-  ] }) })
-] }));
+    ] }) })
+  ] });
+});
 HeaderRibbon.displayName = "HeaderRibbon";
 var MobileWorkspaceCard = React21.memo(({
   workspace,
   rank,
   cardClass,
   onWorkspaceClick,
-  getMedalIcon,
-  getLineName
+  getMedalIcon
 }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
     onClick: () => onWorkspaceClick(workspace, rank),
-    className: `${cardClass} p-3 rounded-lg border shadow-sm active:scale-[0.98] transition-all cursor-pointer`,
+    className: `${cardClass} p-3 rounded-lg border shadow-sm active:scale-[0.98] transition-all duration-300 cursor-pointer`,
+    style: {
+      willChange: "opacity, transform",
+      animation: "fadeIn 0.3s ease-in-out"
+    },
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
@@ -38734,8 +38876,8 @@ var MobileWorkspaceCard = React21.memo(({
             getMedalIcon(rank)
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-gray-900", children: getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: getLineName(workspace.line_id) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-gray-900", children: workspace.displayName }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: workspace.lineName })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
@@ -38765,27 +38907,32 @@ var MobileWorkspaceCard = React21.memo(({
       ] })
     ]
   }
-));
+), (prevProps, nextProps) => {
+  return prevProps.rank === nextProps.rank && prevProps.cardClass === nextProps.cardClass && prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.efficiency === nextProps.workspace.efficiency && prevProps.workspace.action_count === nextProps.workspace.action_count && prevProps.workspace.action_threshold === nextProps.workspace.action_threshold && prevProps.workspace.avg_cycle_time === nextProps.workspace.avg_cycle_time && prevProps.workspace.displayName === nextProps.workspace.displayName && prevProps.workspace.lineName === nextProps.workspace.lineName && prevProps.onWorkspaceClick === nextProps.onWorkspaceClick && prevProps.getMedalIcon === nextProps.getMedalIcon;
+});
 MobileWorkspaceCard.displayName = "MobileWorkspaceCard";
 var DesktopWorkspaceRow = React21.memo(({
   workspace,
   index,
   rowClass,
   onWorkspaceClick,
-  getMedalIcon,
-  getLineName
+  getMedalIcon
 }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "tr",
   {
     onClick: () => onWorkspaceClick(workspace, index + 1),
-    className: `${rowClass} hover:bg-gray-50/90 transition-colors cursor-pointer group`,
+    className: `${rowClass} hover:bg-gray-50/90 transition-all duration-300 cursor-pointer group`,
+    style: {
+      willChange: "opacity, background-color",
+      animation: "fadeIn 0.3s ease-in-out"
+    },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap group-hover:font-medium", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: index + 1 }),
         getMedalIcon(index + 1)
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: getLineName(workspace.line_id) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: workspace.displayName }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: workspace.lineName }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base font-medium whitespace-nowrap", children: [
         (workspace.efficiency || 0).toFixed(1),
         "%"
@@ -38803,7 +38950,9 @@ var DesktopWorkspaceRow = React21.memo(({
       ] })
     ]
   }
-));
+), (prevProps, nextProps) => {
+  return prevProps.index === nextProps.index && prevProps.rowClass === nextProps.rowClass && prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.efficiency === nextProps.workspace.efficiency && prevProps.workspace.action_count === nextProps.workspace.action_count && prevProps.workspace.action_threshold === nextProps.workspace.action_threshold && prevProps.workspace.avg_cycle_time === nextProps.workspace.avg_cycle_time && prevProps.workspace.displayName === nextProps.workspace.displayName && prevProps.workspace.lineName === nextProps.workspace.lineName && prevProps.onWorkspaceClick === nextProps.onWorkspaceClick && prevProps.getMedalIcon === nextProps.getMedalIcon;
+});
 DesktopWorkspaceRow.displayName = "DesktopWorkspaceRow";
 var LeaderboardDetailView = React21.memo(({
   lineId,
@@ -38819,6 +38968,13 @@ var LeaderboardDetailView = React21.memo(({
   const navigation = useNavigation();
   const entityConfig = useEntityConfig();
   const [sortAscending, setSortAscending] = React21.useState(false);
+  const [isMobile, setIsMobile] = React21.useState(false);
+  React21__namespace.default.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
   const configuredLineNames = React21.useMemo(() => {
     return getAllLineDisplayNames(entityConfig);
   }, [entityConfig]);
@@ -38836,18 +38992,10 @@ var LeaderboardDetailView = React21.memo(({
   const handleSortToggle = React21.useCallback(() => {
     setSortAscending(!sortAscending);
   }, [sortAscending]);
-  const realtimeMetricsParams = React21.useMemo(() => ({
-    lineId: lineId || "",
-    date,
-    shiftId: typeof shift === "number" ? shift : typeof shift === "string" ? parseInt(shift) : void 0
-  }), [lineId, date, shift]);
-  const {
-    metrics: metrics2,
-    lineDetails,
-    loading: metricsLoading,
-    error: metricsError,
-    refreshMetrics
-  } = useRealtimeLineMetrics(realtimeMetricsParams);
+  const shiftId = React21.useMemo(
+    () => typeof shift === "number" ? shift : typeof shift === "string" ? parseInt(shift) : void 0,
+    [shift]
+  );
   const {
     workspaces,
     loading: workspacesLoading,
@@ -38857,12 +39005,12 @@ var LeaderboardDetailView = React21.memo(({
     initialDate: date,
     initialShiftId: typeof shift === "number" ? shift : typeof shift === "string" ? parseInt(shift) : void 0
   });
-  const getShiftName = React21.useCallback((shiftId) => {
-    if (shiftId === void 0) return "Day";
-    return shiftId === 0 ? "Day" : "Night";
+  const getShiftName = React21.useCallback((shiftId2) => {
+    if (shiftId2 === void 0) return "Day";
+    return shiftId2 === 0 ? "Day" : "Night";
   }, []);
-  const getShiftIcon = React21.useCallback((shiftId) => {
-    const shift2 = getShiftName(shiftId);
+  const getShiftIcon = React21.useCallback((shiftId2) => {
+    const shift2 = getShiftName(shiftId2);
     if (shift2 === "Day") {
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) });
     } else {
@@ -38904,17 +39052,18 @@ var LeaderboardDetailView = React21.memo(({
         return null;
     }
   }, [sortAscending]);
+  const workspacesLength = React21.useMemo(() => workspaces?.length || 0, [workspaces?.length]);
   const handleWorkspaceClick = React21.useCallback((workspace, rank) => {
     trackCoreEvent("Workspace from Leaderboard Clicked", {
       workspace_name: workspace.workspace_name,
       workspace_id: workspace.workspace_uuid,
       rank,
-      total_workspaces: workspaces?.length || 0,
+      total_workspaces: workspacesLength,
       efficiency: workspace.efficiency,
       action_count: workspace.action_count,
       action_threshold: workspace.action_threshold
     });
-    const displayName = getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
+    const displayName = workspace.displayName || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
     const navParams = workspace.workspace_uuid ? getWorkspaceNavigationParams(workspace.workspace_uuid, displayName, workspace.line_id) : "";
     const returnToParam = `&returnTo=${encodeURIComponent(`/leaderboard`)}`;
     if (onWorkspaceClick) {
@@ -38922,20 +39071,33 @@ var LeaderboardDetailView = React21.memo(({
     } else {
       navigation.navigate(`/workspace/${workspace.workspace_uuid}${navParams}${returnToParam}`);
     }
-  }, [onWorkspaceClick, navigation, lineId, workspaces?.length]);
-  const sortedWorkspaces = React21.useMemo(() => {
+  }, [onWorkspaceClick, navigation, lineId, workspacesLength]);
+  const workspaceDisplayData = React21.useMemo(() => {
     if (!workspaces) return [];
-    return [...workspaces].sort((a, b) => {
+    return workspaces.map((ws) => ({
+      ...ws,
+      displayName: getWorkspaceDisplayName(ws.workspace_name, ws.line_id),
+      lineName: getLineName(ws.line_id)
+    }));
+  }, [workspaces, getLineName]);
+  const sortedWorkspaces = React21.useMemo(() => {
+    return [...workspaceDisplayData].sort((a, b) => {
       const effA = a.efficiency || 0;
       const effB = b.efficiency || 0;
       return sortAscending ? effA - effB : effB - effA;
     });
-  }, [workspaces, sortAscending]);
-  const loading = React21.useMemo(() => metricsLoading || workspacesLoading, [metricsLoading, workspacesLoading]);
-  const error = React21.useMemo(() => metricsError || workspacesError, [metricsError, workspacesError]);
-  const currentDateFormatted = React21.useMemo(() => formatDate(/* @__PURE__ */ new Date()), [formatDate]);
-  const currentMobileDateFormatted = React21.useMemo(() => formatMobileDate(/* @__PURE__ */ new Date()), [formatMobileDate]);
-  if (loading) {
+  }, [workspaceDisplayData, sortAscending]);
+  const loading = workspacesLoading;
+  const error = workspacesError;
+  const currentDateFormatted = React21.useMemo(() => {
+    const dateStr = (/* @__PURE__ */ new Date()).toDateString();
+    return formatDate(new Date(dateStr));
+  }, [formatDate, date]);
+  const currentMobileDateFormatted = React21.useMemo(() => {
+    const dateStr = (/* @__PURE__ */ new Date()).toDateString();
+    return formatMobileDate(new Date(dateStr));
+  }, [formatMobileDate, date]);
+  if (loading && (!workspaces || workspaces.length === 0)) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-[calc(100vh-64px)] flex items-center justify-center bg-slate-50 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl text-gray-600", children: "Loading workspaces..." }) });
   }
   if (error) {
@@ -38944,7 +39106,7 @@ var LeaderboardDetailView = React21.memo(({
       error.message
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, style: { willChange: "contents" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-6 md:px-8 py-2 sm:py-2.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -39036,31 +39198,30 @@ var LeaderboardDetailView = React21.memo(({
         {
           currentDate: currentDateFormatted,
           currentMobileDate: currentMobileDateFormatted,
-          shiftId: metrics2?.shift_id,
+          shiftId,
           getShiftIcon,
           getShiftName
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 w-full mx-auto p-3 sm:p-4 md:p-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden space-y-3", children: sortedWorkspaces.map((ws, index) => {
-        const rank = index + 1;
-        const isTopThree = index < 3;
-        const cardClass = sortAscending ? isTopThree ? "bg-red-50/90 border-red-200" : "bg-white" : isTopThree ? "bg-green-50/90 border-green-200" : "bg-white";
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          MobileWorkspaceCard,
-          {
-            workspace: ws,
-            rank,
-            cardClass,
-            onWorkspaceClick: handleWorkspaceClick,
-            getMedalIcon,
-            getLineName
-          },
-          ws.workspace_uuid
-        );
-      }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block bg-white rounded-lg shadow-md overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse table-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full mx-auto p-3 sm:p-4 md:p-6", children: isMobile ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: sortedWorkspaces.map((ws, index) => {
+      const rank = index + 1;
+      const isTopThree = index < 3;
+      const cardClass = sortAscending ? isTopThree ? "bg-red-50/90 border-red-200" : "bg-white" : isTopThree ? "bg-green-50/90 border-green-200" : "bg-white";
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MobileWorkspaceCard,
+        {
+          workspace: ws,
+          rank,
+          cardClass,
+          onWorkspaceClick: handleWorkspaceClick,
+          getMedalIcon
+        },
+        ws.workspace_uuid
+      );
+    }) }) : (
+      /* Desktop table view - only render on desktop */
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg shadow-md overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse table-auto", children: [
         /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50 border-b border-gray-200 sticky top-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2.5 sm:p-4 text-left text-xs sm:text-sm font-semibold text-gray-600 whitespace-nowrap", children: "Rank" }),
           /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2.5 sm:p-4 text-left text-xs sm:text-sm font-semibold text-gray-600 whitespace-nowrap", children: "Workspace" }),
@@ -39079,17 +39240,16 @@ var LeaderboardDetailView = React21.memo(({
               index,
               rowClass,
               onWorkspaceClick: handleWorkspaceClick,
-              getMedalIcon,
-              getLineName
+              getMedalIcon
             },
             ws.workspace_uuid
           );
         }) })
       ] }) }) })
-    ] })
+    ) })
   ] });
 }, (prevProps, nextProps) => {
-  return prevProps.lineId === nextProps.lineId && prevProps.date === nextProps.date && prevProps.shift === nextProps.shift && prevProps.line1Id === nextProps.line1Id && prevProps.line2Id === nextProps.line2Id && JSON.stringify(prevProps.lineNames) === JSON.stringify(nextProps.lineNames) && prevProps.className === nextProps.className && prevProps.onBackClick === nextProps.onBackClick && prevProps.onWorkspaceClick === nextProps.onWorkspaceClick;
+  return prevProps.lineId === nextProps.lineId && prevProps.date === nextProps.date && prevProps.shift === nextProps.shift && prevProps.line1Id === nextProps.line1Id && prevProps.line2Id === nextProps.line2Id && JSON.stringify(prevProps.lineNames) === JSON.stringify(nextProps.lineNames) && prevProps.className === nextProps.className;
 });
 LeaderboardDetailView.displayName = "LeaderboardDetailView";
 var LeaderboardDetailViewWithDisplayNames = withAllWorkspaceDisplayNames(LeaderboardDetailView);
@@ -40198,24 +40358,12 @@ var ACTION_NAMES = {
 // src/views/TargetsView.utils.ts
 var calculatePPH = (cycleTime, breaks = [], shiftHours = 0) => {
   if (cycleTime === "" || cycleTime === 0) return "";
-  const basicPPH = 3600 / cycleTime;
-  if (breaks.length === 0 || shiftHours === 0) {
-    return Number(basicPPH.toFixed(1));
-  }
-  const safeBreaks = Array.isArray(breaks) ? breaks : [];
-  const totalBreakMinutes = safeBreaks.reduce((total, breakItem) => total + breakItem.duration, 0);
-  const totalBreakHours = totalBreakMinutes / 60;
-  const realWorkHours = shiftHours - totalBreakHours;
-  const effectivePPH = basicPPH * (realWorkHours / shiftHours);
-  return Number(effectivePPH.toFixed(1));
+  const pph = 3600 / cycleTime;
+  return Number(pph.toFixed(1));
 };
 var calculateDayOutput = (pph, shiftHours, breaks = []) => {
   if (pph === "") return "";
-  const safeBreaks = Array.isArray(breaks) ? breaks : [];
-  const totalBreakMinutes = safeBreaks.reduce((total, breakItem) => total + breakItem.duration, 0);
-  const totalBreakHours = totalBreakMinutes / 60;
-  const realWorkHours = shiftHours - totalBreakHours;
-  return Math.round(pph * realWorkHours);
+  return Math.round(pph * shiftHours);
 };
 var formatWorkspaceName = (name, lineId) => {
   return getWorkspaceDisplayName(name, lineId);
@@ -44263,6 +44411,7 @@ exports.AuthenticatedHomeView = AuthenticatedHomeView;
 exports.AuthenticatedShiftsView = AuthenticatedShiftsView;
 exports.AuthenticatedTargetsView = AuthenticatedTargetsView;
 exports.AuthenticatedWorkspaceHealthView = AuthenticatedWorkspaceHealthView;
+exports.AxelNotificationPopup = AxelNotificationPopup;
 exports.BackButton = BackButton;
 exports.BackButtonMinimal = BackButtonMinimal;
 exports.BarChart = BarChart;