@optifye/dashboard-core 6.6.10 → 6.6.12

package/dist/index.mjs

@@ -13,7 +13,7 @@ import { noop, warning, invariant, progress, secondsToMilliseconds, milliseconds
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, PieChart, Pie, Cell, ReferenceLine, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
-import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, Minus, ArrowDown, ArrowUp, Settings2, CheckCircle2, Search, Loader2, AlertCircle, Edit2, CheckCircle, AlertTriangle, Info, Share2, Trophy, Target, Download, User, RefreshCw, Sliders, Sparkles, TrendingDown, TrendingUp, FolderOpen, Folder, HelpCircle, Play, Activity, Layers, Filter, XCircle, ChevronLeft, ChevronRight, Sun, Moon, MousePointer, ArrowRight, MessageSquare, Trash2, Menu, Send, Copy, UserCheck, LogOut, Package, Building2, Settings, LifeBuoy, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, Minus, ArrowDown, ArrowUp, Sparkles, AlertCircle, TrendingUp, Settings2, CheckCircle2, Search, Loader2, Edit2, CheckCircle, AlertTriangle, Info, Share2, Trophy, Target, Download, User, RefreshCw, Sliders, TrendingDown, FolderOpen, Folder, HelpCircle, Play, Activity, Layers, Filter, XCircle, ChevronLeft, ChevronRight, Sun, Moon, MousePointer, ArrowRight, MessageSquare, Trash2, Menu, Send, Copy, UserCheck, LogOut, Package, Building2, Settings, LifeBuoy, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
 import { XMarkIcon, ArrowRightIcon, HomeIcon, TrophyIcon, ChartBarIcon, AdjustmentsHorizontalIcon, ClockIcon, UsersIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, HeartIcon, UserCircleIcon, ExclamationCircleIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Bars3Icon, CheckCircleIcon, ChatBubbleLeftRightIcon, ArrowLeftIcon, XCircleIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/24/solid';
@@ -4014,12 +4014,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,
@@ -6515,6 +6511,10 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
   const lineIdRef = useRef(lineId);
   const isFetchingRef = useRef(false);
   const updateQueueRef = useRef(false);
+  const onLineMetricsUpdateRef = useRef(onLineMetricsUpdate);
+  useEffect(() => {
+    onLineMetricsUpdateRef.current = onLineMetricsUpdate;
+  }, [onLineMetricsUpdate]);
   const companySpecificMetricsTable = useMemo(
     () => getCompanyMetricsTableName(entityConfig.companyId, "performance_metrics"),
     [entityConfig.companyId]
@@ -6630,13 +6630,17 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
     defaultTimezone,
     shiftConfig
   ]);
+  const fetchAllMetricsRef = useRef(fetchAllMetrics);
+  useEffect(() => {
+    fetchAllMetricsRef.current = fetchAllMetrics;
+  }, [fetchAllMetrics]);
   const queueUpdate = useCallback(() => {
     if (updateQueueRef.current || !supabase) {
       return;
     }
     updateQueueRef.current = true;
-    fetchAllMetrics();
-  }, [fetchAllMetrics, supabase]);
+    fetchAllMetricsRef.current();
+  }, [supabase]);
   useEffect(() => {
     if (lineId && supabase) {
       fetchAllMetrics();
@@ -6651,11 +6655,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 },
@@ -6665,40 +6669,29 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
             callback();
           }
         }
-      ).subscribe((status, err) => {
-        if (status === REALTIME_SUBSCRIBE_STATES.CHANNEL_ERROR && err) {
-          console.error(`[useDashboardMetrics] Subscription error for ${table} on ${currentLineIdToUse}:`, err.message);
-        } else if (status === 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 || [],
@@ -6859,6 +6852,7 @@ var useRealtimeLineMetrics = ({
   const updateQueueRef = useRef(false);
   const isFetchingRef = useRef(false);
   const channelsRef = useRef([]);
+  const fetchTimeoutRef = useRef(null);
   const currentShift = useMemo(() => getCurrentShift(dateTimeConfig.defaultTimezone || "Asia/Kolkata", shiftConfig), [dateTimeConfig.defaultTimezone, shiftConfig]);
   const shiftId = useMemo(
     () => urlShiftId !== void 0 ? urlShiftId : currentShift.shiftId,
@@ -7068,9 +7062,17 @@ var useRealtimeLineMetrics = ({
     }
   }, [supabase, date, shiftId, urlShiftId, onMetricsUpdate, entityConfig, dateTimeConfig.defaultTimezone]);
   const queueUpdate = 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 = useCallback(() => {
     if (channelsRef.current.length > 0) {
@@ -7148,6 +7150,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") {
@@ -8094,13 +8100,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;
   }
@@ -8137,13 +8140,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;
   }
@@ -8449,6 +8449,8 @@ var useAllWorkspaceMetrics = (options) => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [initialized, setInitialized] = useState(false);
+  const fetchTimeoutRef = useRef(null);
+  const isFetchingRef = useRef(false);
   const queryShiftId = useMemo(() => {
     const currentShift = getCurrentShift(
       dateTimeConfig.defaultTimezone || "Asia/Kolkata",
@@ -8467,16 +8469,15 @@ var useAllWorkspaceMetrics = (options) => {
   }, [entityConfig.companyId]);
   const schema = databaseConfig.schema ?? "public";
   const fetchWorkspaceMetrics = 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) {
@@ -8519,13 +8520,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]);
   useEffect(() => {
@@ -8533,25 +8547,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);
       }
@@ -21953,7 +21979,16 @@ var VideoCard = React21__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";
@@ -22249,7 +22284,7 @@ var WorkspaceMetricCardsImpl = ({
     /* @__PURE__ */ jsxs(Card2, { className: "flex flex-col bg-white shadow-sm h-full min-h-[150px] sm:min-h-0", children: [
       /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Cycle Time (s)" }) }),
       /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6 sm:py-3", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold text-green-500`, children: workspace.avg_cycle_time.toFixed(1) }),
+        /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-green-500"}`, children: workspace.avg_cycle_time.toFixed(1) }),
         /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
           "Standard: ",
           workspace.ideal_cycle_time?.toFixed(1) || 0,
@@ -22961,7 +22996,8 @@ var BreakNotificationPopup = ({
   onDismiss,
   isVisible = true,
   className = "",
-  lineNames = {}
+  lineNames = {},
+  axelImagePath = "/axel-profile.png"
 }) => {
   const [isDismissed, setIsDismissed] = useState(false);
   const [currentTime, setCurrentTime] = useState(/* @__PURE__ */ new Date());
@@ -22986,6 +23022,109 @@ var BreakNotificationPopup = ({
   if (!isVisible || isDismissed || activeBreaks.length === 0) {
     return null;
   }
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: activeBreaks.map((breakItem, index) => /* @__PURE__ */ 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__ */ jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-lg overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
+              /* @__PURE__ */ jsxs("h4", { className: "font-semibold text-sm text-gray-900", children: [
+                breakItem.remarks || "Break",
+                (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500 ml-1", children: [
+                  "\u2022 ",
+                  lineNames[breakItem.lineId] || `Line ${breakItem.lineId.substring(0, 8)}`
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Coffee, { className: "w-4 h-4 text-amber-500" })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ 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__ */ 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__ */ jsx(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] = useState(false);
+  const handleDismiss = () => {
+    setIsDismissed(true);
+    onDismiss?.();
+  };
+  if (!isVisible || isDismissed || !suggestion) {
+    return null;
+  }
+  const getTypeIcon = () => {
+    switch (suggestion.type) {
+      case "improvement":
+        return /* @__PURE__ */ jsx(TrendingUp, { className: "w-4 h-4 text-blue-500" });
+      case "alert":
+        return /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4 text-amber-500" });
+      case "insight":
+        return /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4 text-purple-500" });
+      default:
+        return /* @__PURE__ */ jsx(Sparkles, { className: "w-4 h-4 text-blue-500" });
+    }
+  };
   return /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
     motion.div,
     {
@@ -22993,58 +23132,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__ */ jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-lg overflow-hidden", children: activeBreaks.map((breakItem, index) => /* @__PURE__ */ jsx(
+      className: `fixed top-24 right-4 z-40 max-w-xs w-full ${className}`,
+      children: /* @__PURE__ */ jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-lg overflow-hidden", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-amber-500 rounded-full animate-pulse flex-shrink-0 mt-2" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
-                  /* @__PURE__ */ jsx("h4", { className: "font-semibold text-base sm:text-sm text-gray-900", children: breakItem.remarks || "Break" }),
-                  (activeBreaks.length > 1 || lineNames[breakItem.lineId]) && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
+                  /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm text-gray-900", children: suggestion.title }),
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: getTypeIcon() })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs("div", { className: "text-sm sm:text-xs text-gray-600 font-medium", children: [
-                  breakItem.startTime,
-                  " - ",
-                  breakItem.endTime
-                ] }) }),
-                /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs("div", { className: "text-sm sm:text-xs text-gray-500", children: [
-                  formatTime3(breakItem.elapsedMinutes),
-                  " / ",
-                  formatTime3(breakItem.duration)
-                ] }) }),
-                /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ 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__ */ jsx("p", { className: "text-xs text-gray-600 leading-relaxed", children: suggestion.message })
               ] })
             ] }),
-            index === 0 && /* @__PURE__ */ jsx(
+            /* @__PURE__ */ 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__ */ jsx(X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
               }
             )
           ] })
-        },
-        `${breakItem.lineId}-${breakItem.startTime}-${index}`
-      )) })
+        }
+      ) })
     }
   ) });
 };
@@ -25875,12 +26010,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"];
@@ -25929,8 +26058,19 @@ var WorkspaceMonthlyHistory = ({
     const daysInMonth = new Date(year, month + 1, 0).getDate();
     const dailyData = [];
     let maxOutput = 0;
-    let totalIdealOutput = 0;
-    let validDaysCount = 0;
+    let lastSetTarget = 0;
+    for (let day = daysInMonth; day >= 1; day--) {
+      const dayData = data.find((d) => {
+        const date = new Date(d.date);
+        return date.getDate() === day;
+      });
+      const shiftData = dayData ? selectedShift === "day" ? dayData.dayShift : dayData.nightShift : null;
+      const idealOutput = shiftData ? shiftData.idealOutput : 0;
+      if (idealOutput > 0) {
+        lastSetTarget = idealOutput;
+        break;
+      }
+    }
     for (let day = 1; day <= daysInMonth; day++) {
       const dayData = data.find((d) => {
         const date = new Date(d.date);
@@ -25940,11 +26080,7 @@ var WorkspaceMonthlyHistory = ({
       const output = shiftData && hasRealData(shiftData) ? shiftData.output : 0;
       const idealOutput = shiftData ? shiftData.idealOutput : 0;
       if (output > maxOutput) maxOutput = output;
-      if (idealOutput > 0) {
-        totalIdealOutput += idealOutput;
-        validDaysCount++;
-      }
-      const color2 = output >= idealOutput ? "#00AB45" : "#E34329";
+      const color2 = output >= lastSetTarget ? "#00AB45" : "#E34329";
       dailyData.push({
         hour: getOrdinal(day),
         // Using ordinal format (1st, 2nd, 3rd, etc.)
@@ -25959,14 +26095,13 @@ var WorkspaceMonthlyHistory = ({
         // Not used but keeps structure consistent
       });
     }
-    const avgIdealOutput = validDaysCount > 0 ? totalIdealOutput / validDaysCount : 0;
-    const calculatedMax = Math.max(maxOutput, avgIdealOutput);
+    const calculatedMax = Math.max(maxOutput, lastSetTarget);
     const yAxisMax = calculatedMax > 0 ? calculatedMax * 1.1 : 100;
-    return { data: dailyData, maxOutput, avgIdealOutput, yAxisMax };
+    return { data: dailyData, maxOutput, lastSetTarget, yAxisMax };
   }, [data, month, year, selectedShift]);
   const yAxisTicks = useMemo(() => {
     const max = chartData.yAxisMax;
-    const target = chartData.avgIdealOutput;
+    const target = chartData.lastSetTarget;
     if (!max || max <= 0) return void 0;
     const desiredIntervals = 4;
     const roughStep = max / desiredIntervals;
@@ -25984,7 +26119,7 @@ var WorkspaceMonthlyHistory = ({
       ticks.push(Math.round(target));
     }
     return Array.from(new Set(ticks)).filter((v) => v >= 0 && v <= max).sort((a, b) => a - b);
-  }, [chartData.yAxisMax, chartData.avgIdealOutput]);
+  }, [chartData.yAxisMax, chartData.lastSetTarget]);
   const pieChartData = useMemo(() => {
     const validShifts = data.map((d) => selectedShift === "day" ? d.dayShift : d.nightShift).filter(hasRealData);
     if (validShifts.length === 0) return [];
@@ -26058,10 +26193,13 @@ var WorkspaceMonthlyHistory = ({
     }
   }, [workspaceId, onShiftChange]);
   if (monthlyDataLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "h-12 w-12 animate-spin rounded-full border-4 border-blue-200", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full border-4 border-blue-600 border-t-transparent" }) }) }),
-      /* @__PURE__ */ jsx("p", { className: designTokens.typography.body + " font-medium", children: "Loading monthly performance data..." })
-    ] }) });
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsx(
+      OptifyeLogoLoader_default,
+      {
+        size: "lg",
+        message: "Loading monthly performance data..."
+      }
+    ) });
   }
   return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-2 min-h-0 overflow-y-auto pb-6 ${className}`, children: [
     /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 border border-gray-200 rounded-lg p-1 bg-gray-50", children: [
@@ -26296,7 +26434,7 @@ var WorkspaceMonthlyHistory = ({
                     tick: (props) => {
                       const { x, y, payload } = props;
                       const value = Math.round(payload.value);
-                      const targetValue = Math.round(chartData.avgIdealOutput);
+                      const targetValue = Math.round(chartData.lastSetTarget);
                       const isTarget = Math.abs(value - targetValue) < 1 && targetValue > 0;
                       return /* @__PURE__ */ jsx(
                         "text",
@@ -26320,10 +26458,10 @@ var WorkspaceMonthlyHistory = ({
                     content: CustomTooltip
                   }
                 ),
-                chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsx(
+                chartData.lastSetTarget > 0 && /* @__PURE__ */ jsx(
                   ReferenceLine,
                   {
-                    y: chartData.avgIdealOutput,
+                    y: chartData.lastSetTarget,
                     stroke: "#E34329",
                     strokeDasharray: "5 5",
                     strokeWidth: 2
@@ -26381,11 +26519,11 @@ var WorkspaceMonthlyHistory = ({
               ]
             }
           ) }) }),
-          /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center gap-6 mt-3", children: chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center gap-6 mt-3", children: chartData.lastSetTarget > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx("div", { className: "w-12 h-0.5 border-t-2 border-dashed", style: { borderColor: "#E34329" } }),
             /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-600", children: [
               "Target: ",
-              Math.round(chartData.avgIdealOutput),
+              Math.round(chartData.lastSetTarget),
               " units/day"
             ] })
           ] }) })
@@ -26498,7 +26636,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);
@@ -26527,34 +26665,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) => {
@@ -27231,6 +27364,36 @@ var TimePickerDropdown = ({
     ] })
   ] });
 };
+var ERROR_MAPPING = {
+  1: {
+    // MEDIA_ERR_ABORTED
+    code: 1,
+    type: "recoverable" /* RECOVERABLE */,
+    message: "Video loading was interrupted",
+    canRetry: true
+  },
+  2: {
+    // MEDIA_ERR_NETWORK
+    code: 2,
+    type: "recoverable" /* RECOVERABLE */,
+    message: "Network error - please check your internet connection",
+    canRetry: true
+  },
+  3: {
+    // MEDIA_ERR_DECODE
+    code: 3,
+    type: "non_recoverable" /* NON_RECOVERABLE */,
+    message: "Stream corrupted due to internet connection",
+    canRetry: false
+  },
+  4: {
+    // MEDIA_ERR_SRC_NOT_SUPPORTED
+    code: 4,
+    type: "non_recoverable" /* NON_RECOVERABLE */,
+    message: "Video format not supported by your browser. Please use Google Chrome.",
+    canRetry: false
+  }
+};
 var videoPlayerStyles = `
   .video-player-container {
     width: 100%;
@@ -27461,8 +27624,21 @@ var VideoPlayer = React21__default.forwardRef(({
     player.on("seeked", () => onSeeked?.(player));
     player.on("error", () => {
       const error = player.error();
-      console.error("Video.js error:", error);
-      onError?.(player, error);
+      const errorCode = error?.code ?? 0;
+      const errorInfo = ERROR_MAPPING[errorCode] || {
+        code: errorCode || 0,
+        type: "non_recoverable" /* NON_RECOVERABLE */,
+        message: "Unknown playback error occurred",
+        canRetry: false
+      };
+      console.error("[VideoPlayer] Video.js error:", {
+        code: errorCode,
+        type: errorInfo.type,
+        message: errorInfo.message,
+        canRetry: errorInfo.canRetry,
+        originalError: error
+      });
+      onError?.(player, errorInfo);
     });
     if (src) {
       const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
@@ -28305,7 +28481,10 @@ var FilterDialogTrigger = ({
     }
   );
 };
-var getSeverityIcon = (severity) => {
+var getSeverityIcon = (severity, categoryId) => {
+  if (categoryId === "idle_time" || categoryId === "low_value" || categoryId === "longest-idles") {
+    return /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3 text-red-500" });
+  }
   switch (severity) {
     case "high":
       return /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3 text-red-500" });
@@ -28532,17 +28711,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,
@@ -28582,9 +28761,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,
@@ -28605,9 +28784,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,
@@ -28628,9 +28807,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,
@@ -28640,7 +28819,7 @@ var FileManagerFilters = ({
     ];
     percentileCategories.forEach((category) => {
       if (category.count > 0 && shouldShowCategory(category.id)) {
-        tree.unshift(category);
+        tree.push(category);
       }
     });
     return tree;
@@ -28685,7 +28864,7 @@ var FileManagerFilters = ({
       /* @__PURE__ */ 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__ */ jsx(
@@ -28702,13 +28881,10 @@ var FileManagerFilters = ({
             /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-center justify-between", children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: node.subtitle }),
-                node.type === "video" && node.severity && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ 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 }) })
             ] })
@@ -29357,7 +29533,12 @@ var BottlenecksContent = ({
     } catch (err) {
       console.error("[BottlenecksContent] Error fetching clip counts:", err);
       if (isMountedRef.current) {
-        setError("Failed to load clip counts. Please try again.");
+        setError({
+          type: "fatal",
+          message: "Failed to load clip counts. Please try again.",
+          canSkip: false,
+          canRetry: true
+        });
         setIsLoading(false);
       }
     } finally {
@@ -29441,7 +29622,12 @@ var BottlenecksContent = ({
     } catch (err) {
       console.error("Error loading first video for category:", err);
       if (isMountedRef.current) {
-        setError("Failed to load clips. Please try again.");
+        setError({
+          type: "fatal",
+          message: "Failed to load clips. Please try again.",
+          canSkip: false,
+          canRetry: true
+        });
         setIsCategoryLoading(false);
       }
     } finally {
@@ -29723,7 +29909,12 @@ var BottlenecksContent = ({
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
       if (isMountedRef.current) {
-        setError("Failed to load selected clip. Please try again.");
+        setError({
+          type: "fatal",
+          message: "Failed to load selected clip. Please try again.",
+          canSkip: true,
+          canRetry: true
+        });
         clearLoadingState();
       }
     }
@@ -29746,7 +29937,12 @@ var BottlenecksContent = ({
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error in legacy loadAndPlayClip:`, error2);
-      setError("Failed to load selected clip. Please try again.");
+      setError({
+        type: "fatal",
+        message: "Failed to load selected clip. Please try again.",
+        canSkip: true,
+        canRetry: true
+      });
       setIsNavigating(false);
     }
   }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById]);
@@ -29786,7 +29982,12 @@ var BottlenecksContent = ({
       }
     } catch (error2) {
       console.error(`[handleNext] Error navigating:`, error2);
-      setError("Failed to navigate to next clip");
+      setError({
+        type: "fatal",
+        message: "Failed to navigate to next clip",
+        canSkip: true,
+        canRetry: true
+      });
       clearLoadingState();
     }
   }, [clearLoadingState, s3ClipsService]);
@@ -29822,7 +30023,12 @@ var BottlenecksContent = ({
       }
     } catch (error2) {
       console.error(`[handlePrevious] Error navigating:`, error2);
-      setError("Failed to navigate to previous clip");
+      setError({
+        type: "fatal",
+        message: "Failed to navigate to previous clip",
+        canSkip: true,
+        canRetry: true
+      });
       clearLoadingState();
     }
   }, [clearLoadingState, s3ClipsService]);
@@ -29835,7 +30041,7 @@ var BottlenecksContent = ({
   const handleVideoReady = useCallback((player) => {
     console.log("Video.js player ready - NOT clearing loading (wait for playing event)");
     videoRetryCountRef.current = 0;
-    if (error?.includes("Retrying")) {
+    if (error?.isRetrying) {
       setError(null);
     }
   }, [error]);
@@ -29880,20 +30086,53 @@ var BottlenecksContent = ({
   }, [clearLoadingState]);
   const handleVideoLoadingChange = useCallback((isLoading2) => {
     console.log(`[BottlenecksContent] Video loading state changed: ${isLoading2}`);
+    if (error && error.type === "fatal") {
+      console.log(`[BottlenecksContent] Ignoring loading state change - fatal error is showing`);
+      return;
+    }
     setIsVideoBuffering(isLoading2);
-  }, []);
+  }, [error]);
   const handleVideoEnded = useCallback((player) => {
     handleNext();
   }, [handleNext]);
   const videoRetryCountRef = useRef(0);
-  const handleVideoError = useCallback((player, error2) => {
-    console.error("Video.js error:", error2);
+  const handleVideoError = useCallback((player, errorInfo) => {
+    console.error("[BottlenecksContent] Video.js error:", errorInfo);
     setIsPlaying(false);
+    setIsVideoBuffering(false);
+    const errorCode = errorInfo?.code || 0;
+    const canRetry = errorInfo?.canRetry ?? false;
+    const errorMessage = errorInfo?.message || "Unknown error";
+    console.log(`[Video Error] Code: ${errorCode}, Can Retry: ${canRetry}, Message: ${errorMessage}`);
+    if (!canRetry) {
+      console.log("[Video Error] Non-recoverable error - showing error overlay immediately");
+      setError({
+        type: "fatal",
+        code: errorCode,
+        message: errorMessage,
+        canSkip: true,
+        canRetry: false
+      });
+      clearLoadingState();
+      videoRetryCountRef.current = 0;
+      trackCoreEvent("clips_video_error_non_recoverable", {
+        workspaceId,
+        category: activeFilterRef.current,
+        videoId: currentVideo?.id,
+        errorCode,
+        errorMessage
+      });
+      return;
+    }
     if (videoRetryCountRef.current < 3 && currentVideo) {
       videoRetryCountRef.current++;
       const retryDelay = 1e3 * videoRetryCountRef.current;
-      console.log(`[Video Error] Retrying... Attempt ${videoRetryCountRef.current}/3 in ${retryDelay}ms`);
-      setError(`Retrying... (${videoRetryCountRef.current}/3)`);
+      console.log(`[Video Error] Recoverable error - Retrying... Attempt ${videoRetryCountRef.current}/3 in ${retryDelay}ms`);
+      setError({
+        type: "retrying",
+        message: `Retrying... (${videoRetryCountRef.current}/3)`,
+        isRetrying: true
+      });
       setTimeout(() => {
         if (videoRef.current && currentVideo && isMountedRef.current) {
           setError(null);
@@ -29901,16 +30140,26 @@ var BottlenecksContent = ({
         }
       }, retryDelay);
     } else {
-      setError("Video failed to load after 3 attempts. The stream may be corrupted.");
+      console.log("[Video Error] Retries exhausted - showing final error overlay");
+      setError({
+        type: "fatal",
+        code: errorCode,
+        message: errorMessage,
+        canSkip: true,
+        canRetry: true
+        // Allow manual retry for network errors
+      });
       videoRetryCountRef.current = 0;
       trackCoreEvent("clips_video_error_final", {
         workspaceId,
         category: activeFilterRef.current,
         videoId: currentVideo?.id,
-        attempts: videoRetryCountRef.current
+        errorCode,
+        errorMessage,
+        attempts: 3
       });
     }
-  }, [currentVideo, workspaceId]);
+  }, [currentVideo, workspaceId, clearLoadingState]);
   useEffect(() => {
     isMountedRef.current = true;
     return () => {
@@ -29928,9 +30177,13 @@ var BottlenecksContent = ({
   }, [s3ClipsService]);
   useEffect(() => {
     if (filteredVideos.length > 0 && currentIndex < filteredVideos.length) {
+      if (error && error.type === "fatal") {
+        console.log("[BottlenecksContent] Not clearing fatal error on video change - let user handle it");
+        return;
+      }
       setError(null);
     }
-  }, [currentIndex, filteredVideos]);
+  }, [currentIndex, filteredVideos, error]);
   useEffect(() => {
     if (!isTransitioning && pendingVideo) {
       const timer = setTimeout(() => {
@@ -30005,11 +30258,11 @@ var BottlenecksContent = ({
   if ((isLoading || clipTypesLoading) && allVideos.length === 0 && Object.keys(mergedCounts).length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "flex-grow p-4 flex items-center justify-center h-[calc(100vh-12rem)]", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
   }
-  if (error || clipTypesError) {
+  if (error && error.type === "fatal" && !hasInitialLoad || clipTypesError) {
     return /* @__PURE__ */ jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
       /* @__PURE__ */ jsx(XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
       /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-red-700 mb-1", children: "Error Loading Clips" }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-600 max-w-md", children: error || clipTypesError })
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 max-w-md", children: error?.message || clipTypesError })
     ] });
   }
   const categoriesToShow = clipTypes.length > 0 ? clipTypes : [];
@@ -30056,7 +30309,7 @@ var BottlenecksContent = ({
             ),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
               /* @__PURE__ */ jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: categoryMetadata.length > 0 ? `${currentMetadataIndex + 1} / ${categoryMetadata.length}` : "0 / 0" }),
-              error && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-600 font-medium", children: error })
+              error && error.type === "retrying" && /* @__PURE__ */ jsx("span", { className: "text-xs text-orange-600 font-medium", children: error.message })
             ] }),
             /* @__PURE__ */ jsx(
               "button",
@@ -30070,7 +30323,6 @@ var BottlenecksContent = ({
             )
           ] })
         ] }) }),
-        /* Show video if we have filtered videos and current video, or show loading */
         filteredVideos.length > 0 && currentVideo ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full group", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
           /* @__PURE__ */ jsx(
             CroppedVideoPlayer,
@@ -30102,30 +30354,44 @@ var BottlenecksContent = ({
               }
             }
           ),
-          (isTransitioning || isVideoBuffering && isInitialLoading) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-          !isTransitioning && isVideoBuffering && !isInitialLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-          error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/80 text-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
+          (isTransitioning || isVideoBuffering && isInitialLoading) && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+          !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+          error && error.type === "retrying" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md" }),
+            /* @__PURE__ */ jsx("p", { className: "text-white text-sm mt-4 font-medium", children: error.message })
+          ] }) }),
+          error && error.type === "fatal" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/90 text-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
             /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 mx-auto mb-4 text-red-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z" }) }),
-            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Video Stream Error" }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-300 mb-4", children: "The video stream appears to be corrupted or unavailable. This may be due to:" }),
-            /* @__PURE__ */ jsxs("ul", { className: "text-sm text-gray-300 text-left space-y-1 mb-4", children: [
-              /* @__PURE__ */ jsx("li", { children: "\u2022 Incomplete video encoding" }),
-              /* @__PURE__ */ jsx("li", { children: "\u2022 Network connectivity issues" }),
-              /* @__PURE__ */ jsx("li", { children: "\u2022 Server processing errors" })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => {
-                  setError(null);
-                  if (videoRef.current) {
-                    videoRef.current.dispose();
-                  }
-                },
-                className: "px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium",
-                children: "Retry"
-              }
-            )
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: error.code === 3 ? "Stream Corrupted" : error.code === 4 ? "Format Not Supported" : error.code === 2 ? "Network Error" : error.code === 1 ? "Loading Interrupted" : "Playback Error" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-300 mb-6", children: error.message }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
+              error.canSkip && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setError(null);
+                    videoRetryCountRef.current = 0;
+                    handleNext();
+                  },
+                  className: "px-5 py-2.5 bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition-colors",
+                  children: "Skip to Next Clip"
+                }
+              ),
+              error.canRetry && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    setError(null);
+                    videoRetryCountRef.current = 0;
+                    if (videoRef.current) {
+                      videoRef.current.dispose();
+                    }
+                  },
+                  className: "px-5 py-2.5 bg-gray-600 hover:bg-gray-700 rounded-md text-sm font-medium transition-colors",
+                  children: "Retry"
+                }
+              )
+            ] })
           ] }) }),
           (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "idle_time" || currentVideo.type === "low_value" ? /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
             /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" || currentVideo.type === "idle_time" ? "bg-purple-400" : isPercentileCategory(activeFilterRef.current) ? activeFilterRef.current === "fast-cycles" ? "bg-green-600" : activeFilterRef.current === "slow-cycles" ? "bg-red-700" : "bg-orange-500" : currentVideo.type === "cycle_completion" ? "bg-blue-600" : "bg-gray-500"} mr-2 animate-pulse` }),
@@ -36859,6 +37125,8 @@ function HomeView({
   const [errorMessage, setErrorMessage] = useState(null);
   const [displayNamesInitialized, setDisplayNamesInitialized] = useState(false);
   const [hasInitialDataLoaded, setHasInitialDataLoaded] = useState(false);
+  const [axelSuggestion, setAxelSuggestion] = useState(null);
+  const [showAxelNotification, setShowAxelNotification] = useState(false);
   const dashboardConfig = useDashboardConfig();
   const timezone = useAppTimezone();
   useEffect(() => {
@@ -36933,12 +37201,7 @@ function HomeView({
   }, []);
   const handleWorkspaceHoverEnd = useCallback((workspaceId) => {
   }, []);
-  const memoizedWorkspaceMetrics = 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 = useMemo(() => kpis, [
     // Only update reference when values change by at least 1%
     kpis?.efficiency?.value ? Math.round(kpis.efficiency.value) : null,
@@ -36966,6 +37229,9 @@ function HomeView({
     setIsChangingFilter(true);
     setSelectedLineId(value);
   }, []);
+  const handleDismissAxelNotification = useCallback(() => {
+    setShowAxelNotification(false);
+  }, []);
   useEffect(() => {
     if (!metricsLoading && !kpisLoading && isChangingFilter) {
       if (workspaceMetrics.length > 0 || selectedLineId === factoryViewId) {
@@ -37077,6 +37343,14 @@ function HomeView({
             lineNames,
             isVisible: !breaksLoading && !breaksError
           }
+        ),
+        /* @__PURE__ */ jsx(
+          AxelNotificationPopup,
+          {
+            suggestion: axelSuggestion,
+            isVisible: showAxelNotification,
+            onDismiss: handleDismissAxelNotification
+          }
         )
       ] })
     }
@@ -38510,7 +38784,7 @@ var KPIsOverviewView = ({
 var KPIsOverviewView_default = KPIsOverviewView;
 var IsolatedTimer = memo(() => {
   return /* @__PURE__ */ jsx(ISTTimer_default, {});
-}, () => true);
+});
 IsolatedTimer.displayName = "IsolatedTimer";
 var HeaderRibbon = memo(({
   currentDate,
@@ -38518,42 +38792,49 @@ var HeaderRibbon = memo(({
   shiftId,
   getShiftIcon,
   getShiftName
-}) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsxs("div", { className: "sm:hidden mt-3 flex items-center justify-center gap-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-gray-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: currentMobileDate }) }),
-    /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon(shiftId) }),
-      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: getShiftName(shiftId) })
+}) => {
+  const shiftIcon = useMemo(() => getShiftIcon(shiftId), [getShiftIcon, shiftId]);
+  const shiftName = useMemo(() => getShiftName(shiftId), [getShiftName, shiftId]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "sm:hidden mt-3 flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-gray-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: currentMobileDate }) }),
+      /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-gray-100 rounded-full", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-gray-700 scale-90", children: shiftIcon }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: shiftName })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsx(IsolatedTimer, {}) }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsx(IsolatedTimer, {}) }) })
-  ] }),
-  /* @__PURE__ */ jsx("div", { className: "hidden sm:block mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(IsolatedTimer, {}) }),
-    /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
-    /* @__PURE__ */ jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: currentDate }),
-    /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftId) }),
-      /* @__PURE__ */ jsxs("span", { className: "text-sm md:text-base font-medium text-blue-600", children: [
-        getShiftName(shiftId),
-        " Shift"
+    /* @__PURE__ */ jsx("div", { className: "hidden sm:block mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(IsolatedTimer, {}) }),
+      /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: currentDate }),
+      /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: shiftIcon }),
+        /* @__PURE__ */ jsxs("span", { className: "text-sm md:text-base font-medium text-blue-600", children: [
+          shiftName,
+          " Shift"
+        ] })
       ] })
-    ] })
-  ] }) })
-] }));
+    ] }) })
+  ] });
+});
 HeaderRibbon.displayName = "HeaderRibbon";
 var MobileWorkspaceCard = memo(({
   workspace,
   rank,
   cardClass,
   onWorkspaceClick,
-  getMedalIcon,
-  getLineName
+  getMedalIcon
 }) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -38565,8 +38846,8 @@ var MobileWorkspaceCard = memo(({
             getMedalIcon(rank)
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { className: "font-semibold text-gray-900", children: getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id) }),
-            /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: getLineName(workspace.line_id) })
+            /* @__PURE__ */ jsx("div", { className: "font-semibold text-gray-900", children: workspace.displayName }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: workspace.lineName })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
@@ -38596,27 +38877,32 @@ var MobileWorkspaceCard = 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 = memo(({
   workspace,
   index,
   rowClass,
   onWorkspaceClick,
-  getMedalIcon,
-  getLineName
+  getMedalIcon
 }) => /* @__PURE__ */ 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__ */ jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap group-hover:font-medium", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("span", { children: index + 1 }),
         getMedalIcon(index + 1)
       ] }) }),
-      /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "font-medium", children: getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id) }) }),
-      /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "font-medium", children: getLineName(workspace.line_id) }) }),
+      /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "font-medium", children: workspace.displayName }) }),
+      /* @__PURE__ */ jsx("td", { className: "px-3 py-2.5 sm:p-4 text-sm sm:text-base whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "font-medium", children: workspace.lineName }) }),
       /* @__PURE__ */ 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),
         "%"
@@ -38634,7 +38920,9 @@ var DesktopWorkspaceRow = 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 = memo(({
   lineId,
@@ -38650,6 +38938,13 @@ var LeaderboardDetailView = memo(({
   const navigation = useNavigation();
   const entityConfig = useEntityConfig();
   const [sortAscending, setSortAscending] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  React21__default.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
   const configuredLineNames = useMemo(() => {
     return getAllLineDisplayNames(entityConfig);
   }, [entityConfig]);
@@ -38667,18 +38962,10 @@ var LeaderboardDetailView = memo(({
   const handleSortToggle = useCallback(() => {
     setSortAscending(!sortAscending);
   }, [sortAscending]);
-  const realtimeMetricsParams = 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 = useMemo(
+    () => typeof shift === "number" ? shift : typeof shift === "string" ? parseInt(shift) : void 0,
+    [shift]
+  );
   const {
     workspaces,
     loading: workspacesLoading,
@@ -38688,12 +38975,12 @@ var LeaderboardDetailView = memo(({
     initialDate: date,
     initialShiftId: typeof shift === "number" ? shift : typeof shift === "string" ? parseInt(shift) : void 0
   });
-  const getShiftName = useCallback((shiftId) => {
-    if (shiftId === void 0) return "Day";
-    return shiftId === 0 ? "Day" : "Night";
+  const getShiftName = useCallback((shiftId2) => {
+    if (shiftId2 === void 0) return "Day";
+    return shiftId2 === 0 ? "Day" : "Night";
   }, []);
-  const getShiftIcon = useCallback((shiftId) => {
-    const shift2 = getShiftName(shiftId);
+  const getShiftIcon = useCallback((shiftId2) => {
+    const shift2 = getShiftName(shiftId2);
     if (shift2 === "Day") {
       return /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ 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 {
@@ -38735,17 +39022,18 @@ var LeaderboardDetailView = memo(({
         return null;
     }
   }, [sortAscending]);
+  const workspacesLength = useMemo(() => workspaces?.length || 0, [workspaces?.length]);
   const handleWorkspaceClick = 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) {
@@ -38753,20 +39041,33 @@ var LeaderboardDetailView = memo(({
     } else {
       navigation.navigate(`/workspace/${workspace.workspace_uuid}${navParams}${returnToParam}`);
     }
-  }, [onWorkspaceClick, navigation, lineId, workspaces?.length]);
-  const sortedWorkspaces = useMemo(() => {
+  }, [onWorkspaceClick, navigation, lineId, workspacesLength]);
+  const workspaceDisplayData = 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 = 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 = useMemo(() => metricsLoading || workspacesLoading, [metricsLoading, workspacesLoading]);
-  const error = useMemo(() => metricsError || workspacesError, [metricsError, workspacesError]);
-  const currentDateFormatted = useMemo(() => formatDate(/* @__PURE__ */ new Date()), [formatDate]);
-  const currentMobileDateFormatted = useMemo(() => formatMobileDate(/* @__PURE__ */ new Date()), [formatMobileDate]);
-  if (loading) {
+  }, [workspaceDisplayData, sortAscending]);
+  const loading = workspacesLoading;
+  const error = workspacesError;
+  const currentDateFormatted = useMemo(() => {
+    const dateStr = (/* @__PURE__ */ new Date()).toDateString();
+    return formatDate(new Date(dateStr));
+  }, [formatDate, date]);
+  const currentMobileDateFormatted = useMemo(() => {
+    const dateStr = (/* @__PURE__ */ new Date()).toDateString();
+    return formatMobileDate(new Date(dateStr));
+  }, [formatMobileDate, date]);
+  if (loading && (!workspaces || workspaces.length === 0)) {
     return /* @__PURE__ */ jsx("div", { className: `h-[calc(100vh-64px)] flex items-center justify-center bg-slate-50 ${className}`, children: /* @__PURE__ */ jsx("div", { className: "text-xl text-gray-600", children: "Loading workspaces..." }) });
   }
   if (error) {
@@ -38775,7 +39076,7 @@ var LeaderboardDetailView = memo(({
       error.message
     ] }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, style: { willChange: "contents" }, children: [
     /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-6 md:px-8 py-2 sm:py-2.5", children: [
       /* @__PURE__ */ jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
         /* @__PURE__ */ jsx(
@@ -38867,31 +39168,30 @@ var LeaderboardDetailView = memo(({
         {
           currentDate: currentDateFormatted,
           currentMobileDate: currentMobileDateFormatted,
-          shiftId: metrics2?.shift_id,
+          shiftId,
           getShiftIcon,
           getShiftName
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 w-full mx-auto p-3 sm:p-4 md:p-6", children: [
-      /* @__PURE__ */ 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__ */ jsx(
-          MobileWorkspaceCard,
-          {
-            workspace: ws,
-            rank,
-            cardClass,
-            onWorkspaceClick: handleWorkspaceClick,
-            getMedalIcon,
-            getLineName
-          },
-          ws.workspace_uuid
-        );
-      }) }),
-      /* @__PURE__ */ jsx("div", { className: "hidden sm:block bg-white rounded-lg shadow-md overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse table-auto", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 w-full mx-auto p-3 sm:p-4 md:p-6", children: isMobile ? /* @__PURE__ */ 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__ */ jsx(
+        MobileWorkspaceCard,
+        {
+          workspace: ws,
+          rank,
+          cardClass,
+          onWorkspaceClick: handleWorkspaceClick,
+          getMedalIcon
+        },
+        ws.workspace_uuid
+      );
+    }) }) : (
+      /* Desktop table view - only render on desktop */
+      /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg shadow-md overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse table-auto", children: [
         /* @__PURE__ */ jsx("thead", { className: "bg-gray-50 border-b border-gray-200 sticky top-0 z-10", children: /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ 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__ */ 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" }),
@@ -38910,17 +39210,16 @@ var LeaderboardDetailView = 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);
@@ -40029,16 +40328,8 @@ 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 "";
@@ -42634,7 +42925,7 @@ var WorkspaceDetailView = ({
                   /* @__PURE__ */ jsxs(Card2, { children: [
                     /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Cycle Time (s)" }) }),
                     /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center py-6", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                      /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold text-green-500`, children: workspace.avg_cycle_time.toFixed(1) }),
+                      /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-green-500"}`, children: workspace.avg_cycle_time.toFixed(1) }),
                       /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
                         "Standard: ",
                         workspace.ideal_cycle_time?.toFixed(1) || 0,
@@ -42754,7 +43045,7 @@ var WorkspaceDetailView = ({
                   /* @__PURE__ */ jsxs(Card2, { children: [
                     /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Cycle Time (s)" }) }),
                     /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-                      /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold text-green-500`, children: workspace.avg_cycle_time.toFixed(1) }),
+                      /* @__PURE__ */ jsx("p", { className: `text-5xl font-bold ${workspace.avg_cycle_time > (workspace.ideal_cycle_time || 0) ? "text-red-500" : "text-green-500"}`, children: workspace.avg_cycle_time.toFixed(1) }),
                       /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mt-2", children: [
                         "Standard: ",
                         workspace.ideal_cycle_time?.toFixed(1) || 0,
@@ -44080,4 +44371,4 @@ function shuffleArray(array) {
   return shuffled;
 }
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedWorkspaceHealthView, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ClipFilterProvider, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealth, useWorkspaceHealthById, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedWorkspaceHealthView, AxelNotificationPopup, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ClipFilterProvider, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealth, useWorkspaceHealthById, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };