@optifye/dashboard-core 4.2.3 → 4.2.5

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React33 from 'react';
-import React33__default, { createContext, memo, useState, useEffect, useRef, useCallback, useMemo, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, forwardRef, Fragment as Fragment$1, createElement, Component } from 'react';
+import * as React14 from 'react';
+import React14__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, memo, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, forwardRef, Fragment as Fragment$1, createElement, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
 import { subDays, format, parseISO, isValid, isFuture, isToday } from 'date-fns';
@@ -12,7 +12,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 { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Bar, Cell, LabelList, PieChart, Pie, Legend, LineChart as LineChart$1, Line } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
-import { ChevronDown, ChevronUp, Check, Camera, ShieldCheck, Star, Award, X, Coffee, Plus, Clock, Minus, ArrowDown, ArrowUp, Search, CheckCircle, AlertTriangle, Info, Share2, Download, User, XCircle, ChevronLeft, ChevronRight, AlertCircle, Sun, Moon, MessageSquare, Trash2, ArrowLeft, RefreshCw, Menu, Send, Copy, Edit2, UserCheck, Save, LogOut, Calendar, Settings, LifeBuoy, Loader2, ArrowLeftIcon as ArrowLeftIcon$1, Settings2, CheckCircle2, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, X, Coffee, Plus, Clock, Minus, ArrowDown, ArrowUp, Search, CheckCircle, AlertTriangle, Info, Share2, Download, User, XCircle, ChevronLeft, ChevronRight, AlertCircle, Sun, Moon, MessageSquare, Trash2, ArrowLeft, RefreshCw, Menu, Send, Copy, Edit2, UserCheck, Save, LogOut, Calendar, Settings, LifeBuoy, Loader2, ArrowLeftIcon as ArrowLeftIcon$1, Settings2, CheckCircle2, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
 import html2canvas from 'html2canvas';
 import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';
@@ -188,14 +188,14 @@ var _getDashboardConfigInstance = () => {
   }
   return dashboardConfigInstance;
 };
-var DashboardConfigContext = React33.createContext(void 0);
+var DashboardConfigContext = React14.createContext(void 0);
 var DashboardProvider = ({ config: userProvidedConfig, children }) => {
-  const fullConfig = React33.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
+  const fullConfig = React14.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
   _setDashboardConfigInstance(fullConfig);
-  React33.useEffect(() => {
+  React14.useEffect(() => {
     _setDashboardConfigInstance(fullConfig);
   }, [fullConfig]);
-  React33.useEffect(() => {
+  React14.useEffect(() => {
     if (!fullConfig.theme) return;
     const styleId = "dashboard-core-theme-vars";
     let styleEl = document.getElementById(styleId);
@@ -221,7 +221,7 @@ var DashboardProvider = ({ config: userProvidedConfig, children }) => {
   return /* @__PURE__ */ jsx(DashboardConfigContext.Provider, { value: fullConfig, children });
 };
 var useDashboardConfig = () => {
-  const ctx = React33.useContext(DashboardConfigContext);
+  const ctx = React14.useContext(DashboardConfigContext);
   if (!ctx) throw new Error("useDashboardConfig must be used within a DashboardProvider");
   return ctx;
 };
@@ -849,6 +849,63 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
         if (recentData) {
           console.log(`[useWorkspaceDetailedMetrics] Found fallback data from date: ${recentData.date}, shift: ${recentData.shift_id}`);
           const outputDifference2 = (recentData.total_output || 0) - (recentData.ideal_output || 0);
+          const workspaceMatch2 = recentData.workspace_name?.match(/WS(\d+)/);
+          const workspaceNumber2 = workspaceMatch2 ? parseInt(workspaceMatch2[1]) : 0;
+          const specialWsStart2 = workspaceConfig.specialWorkspaces?.startId ?? 19;
+          const specialWsEnd2 = workspaceConfig.specialWorkspaces?.endId ?? 34;
+          const isSpecialWorkspace2 = workspaceNumber2 >= specialWsStart2 && workspaceNumber2 <= specialWsEnd2;
+          const outputHourly2 = recentData.output_hourly || {};
+          const hasOutputHourlyData2 = outputHourly2 && typeof outputHourly2 === "object" && Object.keys(outputHourly2).length > 0;
+          let hourlyActionCounts2 = [];
+          if (hasOutputHourlyData2) {
+            console.log("Using new output_hourly column for workspace (fallback):", recentData.workspace_name);
+            console.log("Raw output_hourly data (fallback):", outputHourly2);
+            const isNightShift = recentData.shift_id === 1;
+            const shiftStart = recentData.shift_start || (isNightShift ? "22:00" : "06:00");
+            const shiftEnd = recentData.shift_end || (isNightShift ? "06:00" : "14:00");
+            const startHour = parseInt(shiftStart.split(":")[0]);
+            let expectedHours = [];
+            if (isNightShift) {
+              for (let i = 0; i < 9; i++) {
+                expectedHours.push((startHour + i) % 24);
+              }
+            } else {
+              for (let i = 0; i < 9; i++) {
+                expectedHours.push((startHour + i) % 24);
+              }
+            }
+            console.log("Expected shift hours (fallback):", expectedHours);
+            console.log("Available data hours (fallback):", Object.keys(outputHourly2));
+            hourlyActionCounts2 = expectedHours.map((expectedHour) => {
+              let hourData = outputHourly2[expectedHour.toString()];
+              if (!hourData && isNightShift) {
+                for (const [storedHour, data2] of Object.entries(outputHourly2)) {
+                  if (Array.isArray(data2) && data2.length > 0 && data2.some((val) => val > 0)) {
+                    if (storedHour === "18" && expectedHour === 1) {
+                      hourData = data2;
+                      console.log(`Mapping stored hour ${storedHour} to expected hour ${expectedHour} (fallback)`);
+                      break;
+                    }
+                  }
+                }
+              }
+              return Array.isArray(hourData) ? hourData.reduce((sum, count) => sum + (count || 0), 0) : 0;
+            });
+            console.log("Final hourly action counts (fallback):", hourlyActionCounts2);
+          } else {
+            console.log("Using output_array fallback for workspace (fallback):", recentData.workspace_name);
+            const minuteByMinuteArray = recentData.output_array || [];
+            if (isSpecialWorkspace2) {
+              const last40Readings = minuteByMinuteArray.slice(Math.max(0, minuteByMinuteArray.length - 40));
+              hourlyActionCounts2 = last40Readings;
+            } else {
+              for (let i = 0; i < minuteByMinuteArray.length; i += 60) {
+                const hourSlice = minuteByMinuteArray.slice(i, Math.min(i + 60, minuteByMinuteArray.length));
+                const hourlySum = hourSlice.reduce((sum, count) => sum + count, 0);
+                hourlyActionCounts2.push(hourlySum);
+              }
+            }
+          }
           const transformedData2 = {
             workspace_id: recentData.workspace_id,
             workspace_name: recentData.workspace_name,
@@ -869,12 +926,14 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
             ideal_cycle_time: recentData.ideal_cycle_time || 0,
             avg_efficiency: recentData.efficiency || 0,
             total_actions: recentData.total_output || 0,
-            hourly_action_counts: recentData.output_array || [],
+            hourly_action_counts: hourlyActionCounts2,
+            // Now uses the NEW logic with fallback
             workspace_rank: recentData.workspace_rank || 0,
             total_workspaces: recentData.total_workspaces || workspaceConfig.totalWorkspaces || 42,
             ideal_output_until_now: recentData.ideal_output || 0,
             output_difference: outputDifference2,
             idle_time: recentData.idle_time || 0,
+            idle_time_hourly: recentData.idle_time_hourly || void 0,
             ...recentData.compliance_efficiency !== void 0 && { compliance_efficiency: recentData.compliance_efficiency },
             ...recentData.sop_check !== void 0 && { sop_check: recentData.sop_check }
           };
@@ -901,17 +960,66 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
       const specialWsStart = workspaceConfig.specialWorkspaces?.startId ?? 19;
       const specialWsEnd = workspaceConfig.specialWorkspaces?.endId ?? 34;
       const isSpecialWorkspace = workspaceNumber >= specialWsStart && workspaceNumber <= specialWsEnd;
-      const minuteByMinuteArray = data.output_array || [];
+      const outputHourly = data.output_hourly || {};
+      console.log("[DEBUG] Raw data.output_hourly:", data.output_hourly);
+      console.log("[DEBUG] outputHourly after || {}:", outputHourly);
+      console.log("[DEBUG] typeof outputHourly:", typeof outputHourly);
+      console.log("[DEBUG] Object.keys(outputHourly):", Object.keys(outputHourly));
+      console.log("[DEBUG] Object.keys(outputHourly).length:", Object.keys(outputHourly).length);
+      const hasOutputHourlyData = outputHourly && typeof outputHourly === "object" && Object.keys(outputHourly).length > 0;
+      console.log("[DEBUG] hasOutputHourlyData:", hasOutputHourlyData);
       let hourlyActionCounts = [];
-      if (isSpecialWorkspace) {
-        const last40Readings = minuteByMinuteArray.slice(Math.max(0, minuteByMinuteArray.length - 40));
-        hourlyActionCounts = last40Readings;
+      if (hasOutputHourlyData) {
+        console.log("\u2705 Using new output_hourly column for workspace:", data.workspace_name);
+        console.log("Raw output_hourly data:", JSON.stringify(outputHourly));
+        const isNightShift = data.shift_id === 1;
+        const shiftStart = data.shift_start || (isNightShift ? "22:00" : "06:00");
+        const shiftEnd = data.shift_end || (isNightShift ? "06:00" : "14:00");
+        const startHour = parseInt(shiftStart.split(":")[0]);
+        let expectedHours = [];
+        if (isNightShift) {
+          for (let i = 0; i < 9; i++) {
+            expectedHours.push((startHour + i) % 24);
+          }
+        } else {
+          for (let i = 0; i < 9; i++) {
+            expectedHours.push((startHour + i) % 24);
+          }
+        }
+        console.log("Expected shift hours:", expectedHours);
+        console.log("Available data hours:", Object.keys(outputHourly));
+        hourlyActionCounts = expectedHours.map((expectedHour) => {
+          let hourData = outputHourly[expectedHour.toString()];
+          if (!hourData && isNightShift) {
+            for (const [storedHour, data2] of Object.entries(outputHourly)) {
+              if (Array.isArray(data2) && data2.length > 0 && data2.some((val) => val > 0)) {
+                if (storedHour === "18" && expectedHour === 1) {
+                  hourData = data2;
+                  console.log(`Mapping stored hour ${storedHour} to expected hour ${expectedHour}`);
+                  break;
+                }
+              }
+            }
+          }
+          return Array.isArray(hourData) ? hourData.reduce((sum, count) => sum + (count || 0), 0) : 0;
+        });
+        console.log("Final hourly action counts:", hourlyActionCounts);
       } else {
-        for (let i = 0; i < minuteByMinuteArray.length; i += 60) {
-          const hourSlice = minuteByMinuteArray.slice(i, Math.min(i + 60, minuteByMinuteArray.length));
-          const hourlySum = hourSlice.reduce((sum, count) => sum + count, 0);
-          hourlyActionCounts.push(hourlySum);
+        console.log("\u274C Using output_array fallback for workspace:", data.workspace_name);
+        console.log("[DEBUG] Fallback reason - hasOutputHourlyData is false");
+        console.log("[DEBUG] data.output_hourly was:", data.output_hourly);
+        const minuteByMinuteArray = data.output_array || [];
+        if (isSpecialWorkspace) {
+          const last40Readings = minuteByMinuteArray.slice(Math.max(0, minuteByMinuteArray.length - 40));
+          hourlyActionCounts = last40Readings;
+        } else {
+          for (let i = 0; i < minuteByMinuteArray.length; i += 60) {
+            const hourSlice = minuteByMinuteArray.slice(i, Math.min(i + 60, minuteByMinuteArray.length));
+            const hourlySum = hourSlice.reduce((sum, count) => sum + count, 0);
+            hourlyActionCounts.push(hourlySum);
+          }
         }
+        console.log("Final hourly action counts:", hourlyActionCounts);
       }
       const transformedData = {
         workspace_id: data.workspace_id,
@@ -940,6 +1048,8 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
         output_difference: outputDifference,
         idle_time: data.idle_time || 0,
         // Add idle_time from performance_metrics table
+        idle_time_hourly: data.idle_time_hourly || void 0,
+        // Add idle_time_hourly from performance_metrics table
         ...data.compliance_efficiency !== void 0 && { compliance_efficiency: data.compliance_efficiency },
         ...data.sop_check !== void 0 && { sop_check: data.sop_check }
       };
@@ -1460,16 +1570,56 @@ var dashboardService = {
       const specialStart = workspaceConfig.specialWorkspaces?.startId ?? 19;
       const specialEnd = workspaceConfig.specialWorkspaces?.endId ?? 34;
       const isSpecialWorkspace = workspaceNumber >= specialStart && workspaceNumber <= specialEnd;
-      const minuteByMinuteArray = data.output_array || [];
+      const outputHourly = data.output_hourly || {};
+      const hasOutputHourlyData = outputHourly && typeof outputHourly === "object" && Object.keys(outputHourly).length > 0;
       let hourlyActionCounts = [];
-      if (isSpecialWorkspace) {
-        const numReadings = workspaceConfig.specialWorkspaces?.hourlyReadingsCount ?? 40;
-        hourlyActionCounts = minuteByMinuteArray.slice(-numReadings);
+      if (hasOutputHourlyData) {
+        console.log("Using new output_hourly column for workspace:", data.workspace_name);
+        console.log("Raw output_hourly data:", outputHourly);
+        const isNightShift = data.shift_id === 1;
+        const shiftStart = data.shift_start || (isNightShift ? "22:00" : "06:00");
+        const shiftEnd = data.shift_end || (isNightShift ? "06:00" : "14:00");
+        const startHour = parseInt(shiftStart.split(":")[0]);
+        let expectedHours = [];
+        if (isNightShift) {
+          for (let i = 0; i < 9; i++) {
+            expectedHours.push((startHour + i) % 24);
+          }
+        } else {
+          for (let i = 0; i < 9; i++) {
+            expectedHours.push((startHour + i) % 24);
+          }
+        }
+        console.log("Expected shift hours:", expectedHours);
+        console.log("Available data hours:", Object.keys(outputHourly));
+        hourlyActionCounts = expectedHours.map((expectedHour) => {
+          let hourData = outputHourly[expectedHour.toString()];
+          if (!hourData && isNightShift) {
+            for (const [storedHour, data2] of Object.entries(outputHourly)) {
+              if (Array.isArray(data2) && data2.length > 0 && data2.some((val) => val > 0)) {
+                if (storedHour === "18" && expectedHour === 1) {
+                  hourData = data2;
+                  console.log(`Mapping stored hour ${storedHour} to expected hour ${expectedHour}`);
+                  break;
+                }
+              }
+            }
+          }
+          return Array.isArray(hourData) ? hourData.reduce((sum, count) => sum + (count || 0), 0) : 0;
+        });
+        console.log("Final hourly action counts:", hourlyActionCounts);
       } else {
-        for (let i = 0; i < minuteByMinuteArray.length; i += 60) {
-          const hourSlice = minuteByMinuteArray.slice(i, Math.min(i + 60, minuteByMinuteArray.length));
-          const hourlySum = hourSlice.reduce((sum, count) => sum + (count ?? 0), 0);
-          hourlyActionCounts.push(hourlySum);
+        console.log("Using output_array fallback for workspace:", data.workspace_name);
+        const minuteByMinuteArray = data.output_array || [];
+        if (isSpecialWorkspace) {
+          const numReadings = workspaceConfig.specialWorkspaces?.hourlyReadingsCount ?? 40;
+          hourlyActionCounts = minuteByMinuteArray.slice(-numReadings);
+        } else {
+          for (let i = 0; i < minuteByMinuteArray.length; i += 60) {
+            const hourSlice = minuteByMinuteArray.slice(i, Math.min(i + 60, minuteByMinuteArray.length));
+            const hourlySum = hourSlice.reduce((sum, count) => sum + (count ?? 0), 0);
+            hourlyActionCounts.push(hourlySum);
+          }
         }
       }
       const transformedData = {
@@ -1498,6 +1648,7 @@ var dashboardService = {
         ideal_output_until_now: data.ideal_output || 0,
         output_difference: outputDifference,
         idle_time: data.idle_time || 0,
+        idle_time_hourly: data.idle_time_hourly || void 0,
         ...data.compliance_efficiency !== void 0 && { compliance_efficiency: data.compliance_efficiency },
         ...data.sop_check !== void 0 && { sop_check: data.sop_check }
       };
@@ -1650,18 +1801,20 @@ var dashboardService = {
           date: queryDate,
           shift_id: queryShiftId,
           metrics: {
-            avg_efficiency: avgEfficiencyFromLineMetrics,
-            avg_cycle_time: 0,
+            avg_efficiency: avgEfficiencyFromPerf2 > 0 ? avgEfficiencyFromPerf2 : avgEfficiencyFromLineMetrics,
+            // Use performance data first, fallback to line metrics
+            avg_cycle_time: combinedMetricsData.avg_cycle_time / numLines,
             current_output: combinedMetricsData.current_output,
             ideal_output: combinedMetricsData.ideal_output,
-            total_workspaces: 44,
+            total_workspaces: combinedMetricsData.total_workspaces || 44,
+            // Use combined or default
             underperforming_workspaces: underperformingCount2,
-            line_threshold: combinedMetricsData.ideal_output,
-            threshold_pph: 0,
-            shift_start: "06:00",
-            shift_end: "14:00",
+            line_threshold: combinedMetricsData.line_threshold,
+            threshold_pph: combinedMetricsData.threshold_pph / numLines,
+            shift_start: metricsData?.[0]?.shift_start || shiftConfig.dayShift?.startTime || "06:00",
+            shift_end: metricsData?.[0]?.shift_end || shiftConfig.dayShift?.endTime || "18:00",
             last_updated: (/* @__PURE__ */ new Date()).toISOString(),
-            output_array: combinedMetricsData.output_array || [],
+            output_array: combinedMetricsData.output_array,
             underperforming_workspace_names: [],
             underperforming_workspace_uuids: [],
             poorest_performing_workspaces: []
@@ -1693,7 +1846,8 @@ var dashboardService = {
         date: queryDate,
         shift_id: queryShiftId,
         metrics: {
-          avg_efficiency: metrics2?.avg_efficiency ?? avgEfficiencyFromPerf,
+          avg_efficiency: avgEfficiencyFromPerf > 0 ? avgEfficiencyFromPerf : metrics2?.avg_efficiency ?? 0,
+          // Use performance data first, fallback to line metrics
           avg_cycle_time: metrics2?.avg_cycle_time || 0,
           current_output: metrics2?.current_output || 0,
           ideal_output: metrics2?.ideal_output || metrics2?.line_threshold || 0,
@@ -1701,8 +1855,8 @@ var dashboardService = {
           underperforming_workspaces: underperformingCount,
           line_threshold: metrics2?.line_threshold || 0,
           threshold_pph: metrics2?.threshold_pph || 0,
-          shift_start: metrics2?.shift_start || shiftConfig.dayShift?.startTime || "00:00",
-          shift_end: metrics2?.shift_end || shiftConfig.dayShift?.endTime || "00:00",
+          shift_start: metrics2?.shift_start || shiftConfig.dayShift?.startTime || "06:00",
+          shift_end: metrics2?.shift_end || shiftConfig.dayShift?.endTime || "18:00",
           last_updated: metrics2?.last_updated || (/* @__PURE__ */ new Date()).toISOString(),
           output_array: metrics2?.output_array || [],
           underperforming_workspace_names: metrics2?.underperforming_workspace_names || [],
@@ -4284,8 +4438,26 @@ async function initializeWorkspaceDisplayNames(explicitLineId) {
     isInitializing = false;
   }
 }
+var preInitializeWorkspaceDisplayNames = async (lineId) => {
+  console.log("\u{1F504} preInitializeWorkspaceDisplayNames called for lineId:", lineId);
+  if (isInitialized || isInitializing) {
+    console.log("\u{1F504} Already initialized or initializing, skipping pre-init");
+    return;
+  }
+  await initializeWorkspaceDisplayNames(lineId);
+};
+var forceRefreshWorkspaceDisplayNames = async (lineId) => {
+  console.log("\u{1F504} forceRefreshWorkspaceDisplayNames called for lineId:", lineId);
+  clearWorkspaceDisplayNamesCache();
+  await initializeWorkspaceDisplayNames(lineId);
+};
 console.log("\u{1F504} Module loaded, will initialize lazily when first function is called");
 var getWorkspaceDisplayName = (workspaceId, lineId) => {
+  if (!isInitialized && !isInitializing) {
+    console.log(`\u{1F504} [DEBUG] getWorkspaceDisplayName(${workspaceId}) - Not initialized, triggering lazy init...`);
+  } else if (isInitializing) {
+    console.log(`\u{1F504} [DEBUG] getWorkspaceDisplayName(${workspaceId}) - Currently initializing...`);
+  }
   if (!isInitialized && !isInitializing) {
     console.log("\u{1F504} Lazy initialization triggered by getWorkspaceDisplayName");
     initializeWorkspaceDisplayNames(lineId).catch((error) => {
@@ -4369,6 +4541,7 @@ var clearWorkspaceDisplayNamesCache = () => {
   workspaceService.clearWorkspaceDisplayNamesCache();
   runtimeWorkspaceDisplayNames = {};
   isInitialized = false;
+  isInitializing = false;
 };
 
 // src/lib/hooks/useWorkspaceDisplayNames.ts
@@ -8037,7 +8210,7 @@ var MotionConfigContext = createContext({
 });
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
-var PopChildMeasure = class extends React33.Component {
+var PopChildMeasure = class extends React14.Component {
   getSnapshotBeforeUpdate(prevProps) {
     const element = this.props.childRef.current;
     if (element && prevProps.isPresent && !this.props.isPresent) {
@@ -8092,7 +8265,7 @@ function PopChild({ children, isPresent }) {
       document.head.removeChild(style);
     };
   }, [isPresent]);
-  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React33.cloneElement(children, { ref }) });
+  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React14.cloneElement(children, { ref }) });
 }
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
@@ -8129,7 +8302,7 @@ var PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, pre
   useMemo(() => {
     presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
   }, [isPresent]);
-  React33.useEffect(() => {
+  React14.useEffect(() => {
     !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
   }, [isPresent]);
   if (mode === "popLayout") {
@@ -15398,7 +15571,7 @@ var LoadingPage = ({
   subMessage = "Please wait while we prepare your data",
   className
 }) => {
-  React33__default.useEffect(() => {
+  React14__default.useEffect(() => {
     console.log("LoadingPage rendered with message:", message);
     const timeout = setTimeout(() => {
       console.warn("LoadingPage has been visible for more than 8 seconds. This might indicate an issue.");
@@ -15441,10 +15614,10 @@ var withAuth = (WrappedComponent2, options) => {
   return function WithAuthComponent(props) {
     const { session, loading } = useAuth();
     const router = useRouter();
-    React33.useEffect(() => {
+    React14.useEffect(() => {
       console.log("withAuth state:", { loading, hasSession: !!session, requireAuth: defaultOptions.requireAuth });
     }, [session, loading]);
-    React33.useEffect(() => {
+    React14.useEffect(() => {
       if (!loading && defaultOptions.requireAuth && !session) {
         console.log("Redirecting to login from withAuth");
         router.replace(defaultOptions.redirectTo);
@@ -16131,10 +16304,10 @@ var CycleTimeOverTimeChart = ({
   };
   const displayData = getDisplayData(data);
   const DURATION = displayData.length;
-  const [animatedData, setAnimatedData] = React33__default.useState(Array(DURATION).fill(0));
-  const prevDataRef = React33__default.useRef(Array(DURATION).fill(0));
-  const animationFrameRef = React33__default.useRef(null);
-  const animateToNewData = React33__default.useCallback((targetData) => {
+  const [animatedData, setAnimatedData] = React14__default.useState(Array(DURATION).fill(0));
+  const prevDataRef = React14__default.useRef(Array(DURATION).fill(0));
+  const animationFrameRef = React14__default.useRef(null);
+  const animateToNewData = React14__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -16164,7 +16337,7 @@ var CycleTimeOverTimeChart = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React33__default.useEffect(() => {
+  React14__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const processedData = getDisplayData(data);
       animateToNewData(processedData);
@@ -16388,7 +16561,7 @@ var CycleTimeOverTimeChart = ({
     renderLegend()
   ] });
 };
-var Card = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -16400,7 +16573,7 @@ var Card = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -16409,7 +16582,7 @@ var CardHeader = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -16421,7 +16594,7 @@ var CardTitle = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -16430,9 +16603,9 @@ var CardDescription = React33.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -16508,7 +16681,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React33.forwardRef(
+var Button = React14.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -16539,10 +16712,30 @@ var HourlyOutputChart = ({
   };
   const shiftStartTime = getTimeFromTimeString(shiftStart);
   const SHIFT_DURATION = 11;
-  const [animatedData, setAnimatedData] = React33__default.useState(Array(SHIFT_DURATION).fill(0));
-  const prevDataRef = React33__default.useRef(Array(SHIFT_DURATION).fill(0));
-  const animationFrameRef = React33__default.useRef(null);
-  const animateToNewData = React33__default.useCallback((targetData) => {
+  const [animatedData, setAnimatedData] = React14__default.useState(Array(SHIFT_DURATION).fill(0));
+  const prevDataRef = React14__default.useRef(Array(SHIFT_DURATION).fill(0));
+  const animationFrameRef = React14__default.useRef(null);
+  const [shouldAnimateIdle, setShouldAnimateIdle] = React14__default.useState(false);
+  const prevShowIdleTimeRef = React14__default.useRef(showIdleTime);
+  const animationTimeoutRef = React14__default.useRef(null);
+  React14__default.useEffect(() => {
+    if (showIdleTime && !prevShowIdleTimeRef.current) {
+      setShouldAnimateIdle(true);
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+      }
+      animationTimeoutRef.current = setTimeout(() => {
+        setShouldAnimateIdle(false);
+      }, 1e3);
+    }
+    prevShowIdleTimeRef.current = showIdleTime;
+    return () => {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+      }
+    };
+  }, [showIdleTime]);
+  const animateToNewData = React14__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -16572,7 +16765,7 @@ var HourlyOutputChart = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React33__default.useEffect(() => {
+  React14__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const shiftData = data.slice(0, SHIFT_DURATION);
       animateToNewData(shiftData);
@@ -16583,7 +16776,7 @@ var HourlyOutputChart = ({
       }
     };
   }, [data, animateToNewData]);
-  const formatHour = (hourIndex) => {
+  const formatHour = React14__default.useCallback((hourIndex) => {
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
     const startMinute = Math.round(startDecimalHour % 1 * 60);
@@ -16599,8 +16792,8 @@ var HourlyOutputChart = ({
       return `${hour12}:${m.toString().padStart(2, "0")}${period}`;
     };
     return `${formatTime2(startHour, startMinute)}-${formatTime2(endHour, endMinute)}`;
-  };
-  const formatTimeRange = (hourIndex) => {
+  }, [shiftStartTime.decimalHour]);
+  const formatTimeRange = React14__default.useCallback((hourIndex) => {
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
     const startMinute = Math.round(startDecimalHour % 1 * 60);
@@ -16613,22 +16806,24 @@ var HourlyOutputChart = ({
       return `${hour12}:${m.toString().padStart(2, "0")} ${period}`;
     };
     return `${formatTime2(startHour, startMinute)} - ${formatTime2(endHour, endMinute)}`;
-  };
-  const chartData = Array.from({ length: SHIFT_DURATION }, (_, i) => {
-    const actualHour = (shiftStartTime.hour + i) % 24;
-    const idleArray = idleTimeHourly?.[actualHour.toString()] || [];
-    const idleMinutes = idleArray.filter((val) => val === "1").length;
-    return {
-      hour: formatHour(i),
-      timeRange: formatTimeRange(i),
-      output: animatedData[i] || 0,
-      originalOutput: data[i] || 0,
-      // Keep original data for labels
-      color: (animatedData[i] || 0) >= Math.round(pphThreshold) ? "#00AB45" : "#E34329",
-      idleMinutes,
-      idleArray
-    };
-  });
+  }, [shiftStartTime.decimalHour]);
+  const chartData = React14__default.useMemo(() => {
+    return Array.from({ length: SHIFT_DURATION }, (_, i) => {
+      const actualHour = (shiftStartTime.hour + i) % 24;
+      const idleArray = idleTimeHourly?.[actualHour.toString()] || [];
+      const idleMinutes = idleArray.filter((val) => val === "1").length;
+      return {
+        hour: formatHour(i),
+        timeRange: formatTimeRange(i),
+        output: animatedData[i] || 0,
+        originalOutput: data[i] || 0,
+        // Keep original data for labels
+        color: (animatedData[i] || 0) >= Math.round(pphThreshold) ? "#00AB45" : "#E34329",
+        idleMinutes,
+        idleArray
+      };
+    });
+  }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, formatHour, formatTimeRange]);
   const maxYValue = Math.ceil(pphThreshold * 1.5);
   const generateYAxisTicks = () => {
     const targetValue = Math.round(pphThreshold);
@@ -16721,10 +16916,10 @@ var HourlyOutputChart = ({
               contentStyle: {
                 backgroundColor: "white",
                 border: "none",
-                borderRadius: "8px",
-                boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
-                padding: "8px 12px",
-                fontSize: "13px"
+                borderRadius: "12px",
+                boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+                padding: "0",
+                fontSize: "14px"
               },
               content: (props) => {
                 if (!props.active || !props.payload || props.payload.length === 0) return null;
@@ -16758,48 +16953,54 @@ var HourlyOutputChart = ({
                   const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
                   return `${hour12}:${minute.toString().padStart(2, "0")} ${period}`;
                 };
-                return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-lg p-3 min-w-[180px]", children: [
-                  /* @__PURE__ */ jsx("p", { className: "font-semibold text-gray-700 mb-2", children: data2.timeRange }),
-                  /* @__PURE__ */ jsxs("p", { className: "text-gray-600", children: [
-                    "Output: ",
-                    /* @__PURE__ */ jsxs("span", { className: "font-medium text-gray-800", children: [
-                      Math.round(data2.output),
-                      " units"
-                    ] })
-                  ] }),
-                  showIdleTime && data2.idleMinutes > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsxs("p", { className: "text-gray-600 mb-1 border-t pt-1 mt-1", children: [
-                      "Idle Time: ",
-                      /* @__PURE__ */ jsxs("span", { className: "font-medium text-gray-700", children: [
-                        data2.idleMinutes,
-                        " minutes"
+                return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-xl border border-gray-100 p-4 min-w-[220px]", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsx("p", { className: "font-semibold text-gray-900 text-sm", children: data2.timeRange }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: "Output" }),
+                      /* @__PURE__ */ jsxs("span", { className: "font-semibold text-gray-900 text-sm", children: [
+                        Math.round(data2.output),
+                        " units"
                       ] })
                     ] }),
-                    idleRanges.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 text-xs", children: [
-                      /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-600 mb-1", children: "Idle periods:" }),
-                      /* @__PURE__ */ jsx("div", { className: "space-y-0.5 max-h-32 overflow-y-auto", children: idleRanges.map((range, index) => {
-                        const duration = range.end - range.start + 1;
-                        const startTime = formatIdleTimestamp(range.start);
-                        const endTime = formatIdleTimestamp(range.end + 1);
-                        return /* @__PURE__ */ jsxs("div", { className: "text-gray-500 flex items-center gap-1", children: [
-                          /* @__PURE__ */ jsx("span", { className: "inline-block w-1 h-1 bg-gray-400 rounded-full" }),
-                          duration === 1 ? /* @__PURE__ */ jsxs("span", { children: [
-                            startTime,
-                            " ",
-                            /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "(1 min)" })
-                          ] }) : /* @__PURE__ */ jsxs("span", { children: [
-                            startTime,
-                            " - ",
-                            endTime,
-                            " ",
-                            /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
-                              "(",
-                              duration,
-                              " min)"
-                            ] })
-                          ] })
-                        ] }, index);
-                      }) })
+                    showIdleTime && data2.idleMinutes > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("div", { className: "border-t border-gray-100 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: "Idle Time" }),
+                        /* @__PURE__ */ jsxs("span", { className: "font-semibold text-orange-600 text-sm", children: [
+                          data2.idleMinutes,
+                          " minutes"
+                        ] })
+                      ] }) }),
+                      idleRanges.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 bg-gray-50 rounded-lg p-2.5", children: [
+                        /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-700 text-xs mb-2", children: "Idle periods:" }),
+                        /* @__PURE__ */ jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto pr-1", children: idleRanges.map((range, index) => {
+                          const duration = range.end - range.start + 1;
+                          const startTime = formatIdleTimestamp(range.start);
+                          const endTime = formatIdleTimestamp(range.end + 1);
+                          return /* @__PURE__ */ jsxs("div", { className: "text-gray-600 flex items-center gap-2 text-xs", children: [
+                            /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" }),
+                            /* @__PURE__ */ jsx("span", { children: duration === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              startTime,
+                              " ",
+                              /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+                                "(",
+                                duration,
+                                " min)"
+                              ] })
+                            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                              startTime,
+                              " - ",
+                              endTime,
+                              " ",
+                              /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+                                "(",
+                                duration,
+                                " min)"
+                              ] })
+                            ] }) })
+                          ] }, index);
+                        }) })
+                      ] })
                     ] })
                   ] })
                 ] });
@@ -16889,10 +17090,40 @@ var HourlyOutputChart = ({
               radius: [10, 10, 0, 0],
               fill: "url(#idlePattern)",
               opacity: 0.7,
-              isAnimationActive: true,
-              animationBegin: 200,
-              animationDuration: 800,
-              animationEasing: "ease-out"
+              isAnimationActive: shouldAnimateIdle,
+              animationBegin: shouldAnimateIdle ? 200 : 0,
+              animationDuration: shouldAnimateIdle ? 800 : 0,
+              animationEasing: "ease-out",
+              children: /* @__PURE__ */ jsx(
+                LabelList,
+                {
+                  dataKey: "idleMinutes",
+                  position: "top",
+                  content: (props) => {
+                    const { x, y, width, value } = props;
+                    if (!value || value === 0) return null;
+                    return /* @__PURE__ */ jsxs(
+                      "text",
+                      {
+                        x: x + width / 2,
+                        y: y - 2,
+                        textAnchor: "middle",
+                        fontSize: "9",
+                        fontWeight: "600",
+                        fill: "#6b7280",
+                        style: {
+                          opacity: 1,
+                          pointerEvents: "none"
+                        },
+                        children: [
+                          value,
+                          "m"
+                        ]
+                      }
+                    );
+                  }
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("pattern", { id: "idlePattern", patternUnits: "userSpaceOnUse", width: "4", height: "4", children: [
@@ -16905,155 +17136,479 @@ var HourlyOutputChart = ({
     renderLegend()
   ] });
 };
-var defaults = {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  Button,
-  HourlyOutputChart
-};
-var RegistryCtx = createContext(defaults);
-var useRegistry = () => {
-  const context = useContext(RegistryCtx);
-  if (!context) {
-    throw new Error("useRegistry must be used within a RegistryProvider");
-  }
-  return context;
-};
-function RegistryProvider({
-  children,
-  components = {}
-}) {
-  if (process.env.NODE_ENV === "development") {
-    const validKeys = Object.keys(defaults);
-    Object.keys(components).forEach((key) => {
-      if (!validKeys.includes(key)) {
-        console.warn(`[RegistryProvider] Unknown component key: "${key}". Valid keys are: ${validKeys.join(", ")}`);
-      }
-    });
-  }
-  const mergedComponents = { ...defaults, ...components };
-  return /* @__PURE__ */ jsx(RegistryCtx.Provider, { value: mergedComponents, children });
-}
-function withRegistry(Component3) {
-  function WithRegistry(props) {
-    useRegistry();
-    return /* @__PURE__ */ jsx(Component3, { ...props });
-  }
-  WithRegistry.displayName = `withRegistry(${Component3.displayName || Component3.name})`;
-  return WithRegistry;
-}
-var HourlyOutputChart2 = (props) => {
-  const { HourlyOutputChart: RegisteredHourlyOutputChart } = useRegistry();
-  return /* @__PURE__ */ jsx(RegisteredHourlyOutputChart, { ...props });
-};
-var HourlyComplianceDot = (props) => {
-  const { cx: cx2, cy, index, payload, targetCompliance } = props;
-  const complianceValue = payload?.compliance;
-  if (typeof index !== "number" || index % 60 !== 0 || typeof complianceValue !== "number" || complianceValue === null) {
-    return null;
-  }
-  const roundedValue = Math.round(complianceValue);
-  const isAboveTarget = roundedValue >= targetCompliance;
-  const labelColor = isAboveTarget ? "#10B981" : "#EF4444";
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("circle", { cx: cx2, cy, r: 4, fill: "#EF4444" }),
-    " ",
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: cx2,
-        y: cy ? cy - 10 : 0,
-        dy: 0,
-        textAnchor: "middle",
-        fill: labelColor,
-        fontSize: 12,
-        fontWeight: 600,
-        children: `${roundedValue}%`
-      }
-    )
-  ] });
+var TREND_STYLES = {
+  0: { arrow: "\u2193", color: "text-red-500 font-bold text-shadow" },
+  // Down
+  1: { arrow: "\u2013", color: "text-gray-500 font-bold text-shadow" },
+  // Unchanged
+  2: { arrow: "\u2191", color: "text-green-500 font-bold text-shadow" }
+  // Up
 };
-var SOPComplianceChart = ({
-  data = [],
-  targetCompliance = 95,
-  shiftStart,
+var getTrendArrowAndColor = (trend) => TREND_STYLES[trend] || { arrow: "", color: "" };
+var VideoCard = React14__default.memo(({
+  workspace,
+  hlsUrl,
+  shouldPlay,
+  onClick,
+  onFatalError,
+  isVeryLowEfficiency = false,
   className = ""
 }) => {
-  const getHourFromTimeString = (timeStr) => {
-    const [hours, minutes] = timeStr.split(":");
-    return parseInt(hours);
-  };
-  const shiftStartHour = getHourFromTimeString(shiftStart);
-  const SHIFT_DURATION_HOURS = 9;
-  const MINUTES_PER_HOUR = 60;
-  const TOTAL_MINUTES = SHIFT_DURATION_HOURS * MINUTES_PER_HOUR;
-  const mockData = Array.from(
-    { length: TOTAL_MINUTES },
-    () => Math.floor(Math.random() * 10) + 90
-  );
-  const [animatedData, setAnimatedData] = useState([]);
-  const prevDataRef = useRef([]);
-  const animationFrameRef = useRef(null);
-  const animateToNewData = useCallback((targetData) => {
-    const startData = [...prevDataRef.current];
-    while (startData.length < targetData.length) {
-      startData.push(startData.length > 0 ? startData[startData.length - 1] : 0);
-    }
-    const startTime = performance.now();
-    const duration = 400;
-    const animate = (currentTime) => {
-      const elapsed = currentTime - startTime;
-      const progress6 = Math.min(elapsed / duration, 1);
-      const easeOutQuad = (t) => 1 - (1 - t) * (1 - t);
-      const easedProgress = easeOutQuad(progress6);
-      const newData = startData.map((start, index) => {
-        if (index >= targetData.length) return start;
-        const target = targetData[index];
-        const change = target - start;
-        return start + change * easedProgress;
-      });
-      setAnimatedData(newData);
-      prevDataRef.current = newData;
-      if (progress6 < 1) {
-        animationFrameRef.current = requestAnimationFrame(animate);
-      } else {
-        setAnimatedData(targetData);
-        prevDataRef.current = targetData;
-      }
-    };
-    if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current);
-    }
-    animationFrameRef.current = requestAnimationFrame(animate);
-  }, []);
-  useEffect(() => {
-    if (data.length === 0) {
-      if (prevDataRef.current.length === 0) {
-        animateToNewData(mockData);
-      }
-      return;
+  const videoRef = useRef(null);
+  useHlsStream(videoRef, {
+    src: hlsUrl,
+    shouldPlay,
+    onFatalError: onFatalError ?? (() => throttledReloadDashboard())
+  });
+  const displayName = getWorkspaceDisplayName(workspace.workspace_name);
+  workspace.workspace_uuid || workspace.workspace_name;
+  const getEfficiencyOverlayColor = (efficiency) => {
+    if (efficiency >= 80) {
+      return "bg-[#00D654]/25";
+    } else if (efficiency >= 70) {
+      return "bg-[#FFD700]/30";
+    } else {
+      return "bg-[#FF2D0A]/30";
     }
-    const actualData = [...data];
-    if (JSON.stringify(actualData) !== JSON.stringify(prevDataRef.current)) {
-      animateToNewData(actualData);
+  };
+  const getEfficiencyBarColor = (efficiency) => {
+    if (efficiency >= 80) {
+      return "bg-[#00AB45]";
+    } else if (efficiency >= 70) {
+      return "bg-[#FFB020]";
+    } else {
+      return "bg-[#E34329]";
     }
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    };
-  }, [data, animateToNewData, mockData]);
-  const formatTime2 = (minuteIndex) => {
-    const totalMinutes = shiftStartHour * 60 + minuteIndex;
-    const hours = Math.floor(totalMinutes / 60) % 24;
-    const minutes = totalMinutes % 60;
-    const formattedHour = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
-    const ampm = hours >= 12 ? "PM" : "AM";
-    return `${formattedHour}:${minutes.toString().padStart(2, "0")} ${ampm}`;
+  };
+  const efficiencyOverlayClass = getEfficiencyOverlayColor(workspace.efficiency);
+  const efficiencyBarClass = getEfficiencyBarColor(workspace.efficiency);
+  const trendInfo = workspace.trend !== void 0 ? getTrendArrowAndColor(workspace.trend) : null;
+  const handleClick = useCallback(() => {
+    if (onClick) {
+      onClick();
+    }
+  }, [onClick]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] transition-transform duration-200 shadow-sm ${className}`,
+      style: { width: "100%", height: "100%" },
+      onClick: handleClick,
+      title: displayName,
+      tabIndex: 0,
+      "aria-label": `Open workspace ${displayName}`,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      children: [
+        isVeryLowEfficiency && /* @__PURE__ */ jsx("div", { className: "absolute top-1 left-2 z-30", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute -inset-1 bg-red-400/50 rounded-full blur-sm animate-pulse" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute -inset-0.5 bg-red-500/30 rounded-full blur-md animate-ping [animation-duration:1.5s]" }),
+          /* @__PURE__ */ jsx("div", { className: "bg-[#E34329] w-5 h-5 rounded-full flex items-center justify-center text-white font-bold text-xs shadow-lg ring-2 ring-red-400/40 border border-red-400/80 animate-pulse", children: "!" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx(Camera, { className: "w-6 h-6 text-gray-500" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 mt-1", children: "Loading..." })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10", children: /* @__PURE__ */ jsx(
+            "video",
+            {
+              ref: videoRef,
+              className: "h-full w-full object-cover",
+              playsInline: true,
+              muted: true,
+              disablePictureInPicture: true,
+              controlsList: "nodownload noplaybackrate"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: `absolute inset-0 z-20 pointer-events-none ${efficiencyOverlayClass}` }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 z-30 bg-black/70 backdrop-blur-sm rounded px-2 py-0.5 text-white text-xs font-semibold border border-white/10", children: [
+            Math.round(workspace.efficiency),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-black/50 z-30", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `h-full ${efficiencyBarClass} transition-all duration-500`,
+              style: { width: `${Math.min(100, workspace.efficiency)}%` }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 flex justify-between items-center z-10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Camera, { size: 12, className: "text-white" }),
+            /* @__PURE__ */ jsx("p", { className: "text-white text-xs font-medium tracking-wide", children: displayName })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            trendInfo && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `text-lg ${trendInfo.color}`,
+                style: { lineHeight: 1, display: "flex", alignItems: "center" },
+                children: trendInfo.arrow
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500" }),
+            /* @__PURE__ */ jsx("span", { className: "text-white text-xs", children: "Live" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}, (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;
+});
+VideoCard.displayName = "VideoCard";
+var DEFAULT_WORKSPACE_HLS_URLS = {
+  "WS1": "https://dnh-hls.optifye.ai/cam1/index.m3u8",
+  "WS2": "https://dnh-hls.optifye.ai/cam2/index.m3u8",
+  "WS3": "https://dnh-hls.optifye.ai/cam3/index.m3u8",
+  "WS4": "https://dnh-hls.optifye.ai/cam3/index.m3u8",
+  "WS01": "https://59.144.218.58:8443/camera6.m3u8",
+  "WS02": "https://59.144.218.58:8443/camera2.m3u8",
+  "WS03": "https://59.144.218.58:8443/camera3.m3u8",
+  "WS04": "https://59.144.218.58:8443/camera4.m3u8",
+  "WS05": "https://59.144.218.58:8443/camera1.m3u8",
+  "WS06": "https://59.144.218.58:8443/camera5.m3u8"
+};
+var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
+var VideoGridView = React14__default.memo(({
+  workspaces,
+  selectedLine,
+  className = "",
+  lineIdMapping = {},
+  videoSources = {}
+}) => {
+  const router = useRouter();
+  const containerRef = useRef(null);
+  const observerRef = useRef(null);
+  const [gridCols, setGridCols] = useState(4);
+  const [visibleWorkspaces, setVisibleWorkspaces] = useState(/* @__PURE__ */ new Set());
+  const mergedVideoSources = {
+    defaultHlsUrl: videoSources.defaultHlsUrl || DEFAULT_HLS_URL,
+    workspaceHlsUrls: { ...DEFAULT_WORKSPACE_HLS_URLS, ...videoSources.workspaceHlsUrls }
+  };
+  const getWorkspaceHlsUrl = useCallback((workspaceName) => {
+    const wsName = workspaceName.toUpperCase();
+    return mergedVideoSources.workspaceHlsUrls[wsName] || mergedVideoSources.defaultHlsUrl;
+  }, [mergedVideoSources]);
+  const veryLowEfficiencyWorkspaces = useMemo(() => {
+    return new Set(
+      workspaces.filter((w) => w.efficiency < 50 && w.efficiency >= 10).map((w) => w.workspace_name)
+    );
+  }, [workspaces]);
+  const filteredWorkspaces = useMemo(() => {
+    return selectedLine === 1 ? workspaces.filter((w) => {
+      if (w.workspace_name === "WS5-5") return true;
+      if (w.workspace_name === "WS32-5") return false;
+      try {
+        const wsNumber = parseInt(w.workspace_name.replace("WS", ""));
+        return wsNumber >= 1 && wsNumber <= 22;
+      } catch {
+        return true;
+      }
+    }) : selectedLine === 2 ? workspaces.filter((w) => {
+      if (w.workspace_name === "WS5-5") return false;
+      if (w.workspace_name === "WS32-5") return true;
+      try {
+        const wsNumber = parseInt(w.workspace_name.replace("WS", ""));
+        return wsNumber >= 23 && wsNumber <= 44;
+      } catch {
+        return false;
+      }
+    }) : workspaces;
+  }, [workspaces, selectedLine]);
+  const calculateOptimalGrid = useCallback(() => {
+    if (!containerRef.current) return;
+    const containerPadding = 16;
+    const containerWidth = containerRef.current.clientWidth - containerPadding;
+    const containerHeight = containerRef.current.clientHeight - containerPadding;
+    const count = filteredWorkspaces.length;
+    if (count === 0) {
+      setGridCols(1);
+      return;
+    }
+    let bestCols = 1;
+    let bestScore = 0;
+    const targetAspectRatio = 16 / 9;
+    const gap = 8;
+    const maxCols = Math.min(count, 6);
+    for (let cols = 1; cols <= maxCols; cols++) {
+      const rows = Math.ceil(count / cols);
+      const availableWidth = containerWidth - gap * (cols - 1);
+      const availableHeight = containerHeight - gap * (rows - 1);
+      const cellWidth = availableWidth / cols;
+      const cellHeight = availableHeight / rows;
+      const minCellWidth = containerWidth < 800 ? 120 : 150;
+      const minCellHeight = containerHeight < 600 ? 80 : 100;
+      if (cellWidth < minCellWidth || cellHeight < minCellHeight) continue;
+      const totalUsedArea = cellWidth * cellHeight * count;
+      const totalAvailableArea = containerWidth * containerHeight;
+      const spaceUtilization = totalUsedArea / totalAvailableArea;
+      const actualAspectRatio = cellWidth / cellHeight;
+      const aspectRatioScore = 1 / (1 + Math.abs(actualAspectRatio - targetAspectRatio) * 0.3);
+      const score = spaceUtilization * 0.9 + aspectRatioScore * 0.1;
+      if (score > bestScore) {
+        bestScore = score;
+        bestCols = cols;
+      }
+    }
+    if (bestScore === 0) {
+      bestCols = Math.ceil(Math.sqrt(count));
+    }
+    setGridCols(bestCols);
+  }, [filteredWorkspaces.length]);
+  useEffect(() => {
+    calculateOptimalGrid();
+    const handleResize = () => calculateOptimalGrid();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [calculateOptimalGrid]);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const options = {
+      root: null,
+      rootMargin: "50px",
+      threshold: 0.1
+    };
+    observerRef.current = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        const workspaceId = entry.target.getAttribute("data-workspace-id");
+        if (!workspaceId) return;
+        setVisibleWorkspaces((prev) => {
+          const next = new Set(prev);
+          if (entry.isIntersecting) {
+            next.add(workspaceId);
+          } else {
+            next.delete(workspaceId);
+          }
+          return next;
+        });
+      });
+    }, options);
+    const elements = containerRef.current.querySelectorAll("[data-workspace-id]");
+    elements.forEach((el) => observerRef.current?.observe(el));
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [filteredWorkspaces]);
+  const handleWorkspaceClick = useCallback((workspace) => {
+    const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+    trackCoreEvent("Workspace Detail Clicked", {
+      workspace_name: workspace.workspace_name,
+      workspace_id: workspaceId,
+      view_type: "video_grid",
+      performance_score: workspace.performance_score,
+      efficiency: workspace.efficiency,
+      action_count: workspace.action_count
+    });
+    const displayName = getWorkspaceDisplayName(workspace.workspace_name);
+    const navParams = getWorkspaceNavigationParams(workspaceId, displayName);
+    router.push(`/workspace/${workspaceId}${navParams}`);
+  }, [router]);
+  return /* @__PURE__ */ jsx("div", { className: `relative overflow-hidden h-full w-full ${className}`, children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full w-full p-2", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "grid h-full w-full gap-2",
+      style: {
+        gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
+        gridTemplateRows: `repeat(${Math.ceil(filteredWorkspaces.length / gridCols)}, 1fr)`,
+        minHeight: "100%"
+      },
+      children: filteredWorkspaces.sort((a, b) => {
+        const aNum = parseInt(a.workspace_name.slice(2));
+        const bNum = parseInt(b.workspace_name.slice(2));
+        if (!selectedLine) {
+          const aIsLine2 = a.line_id === lineIdMapping.line2;
+          const bIsLine2 = b.line_id === lineIdMapping.line2;
+          if (aIsLine2 !== bIsLine2) {
+            return aIsLine2 ? 1 : -1;
+          }
+        }
+        return aNum - bNum;
+      }).map((workspace) => {
+        const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+        const isVisible = visibleWorkspaces.has(workspaceId);
+        const isVeryLowEfficiency = veryLowEfficiencyWorkspaces.has(workspace.workspace_name);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-workspace-id": workspaceId,
+            className: "workspace-card relative min-h-0 min-w-0",
+            style: { width: "100%", height: "100%" },
+            children: /* @__PURE__ */ jsx(
+              VideoCard,
+              {
+                workspace,
+                hlsUrl: getWorkspaceHlsUrl(workspace.workspace_name),
+                shouldPlay: isVisible,
+                onClick: () => handleWorkspaceClick(workspace),
+                onFatalError: throttledReloadDashboard,
+                isVeryLowEfficiency
+              }
+            )
+          },
+          workspaceId
+        );
+      })
+    }
+  ) }) });
+});
+VideoGridView.displayName = "VideoGridView";
+var defaults = {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Button,
+  HourlyOutputChart,
+  VideoGridView
+};
+var RegistryCtx = createContext(defaults);
+var useRegistry = () => {
+  const context = useContext(RegistryCtx);
+  if (!context) {
+    throw new Error("useRegistry must be used within a RegistryProvider");
+  }
+  return context;
+};
+function RegistryProvider({
+  children,
+  components = {}
+}) {
+  if (process.env.NODE_ENV === "development") {
+    const validKeys = Object.keys(defaults);
+    Object.keys(components).forEach((key) => {
+      if (!validKeys.includes(key)) {
+        console.warn(`[RegistryProvider] Unknown component key: "${key}". Valid keys are: ${validKeys.join(", ")}`);
+      }
+    });
+  }
+  const mergedComponents = { ...defaults, ...components };
+  return /* @__PURE__ */ jsx(RegistryCtx.Provider, { value: mergedComponents, children });
+}
+function withRegistry(Component3) {
+  function WithRegistry(props) {
+    useRegistry();
+    return /* @__PURE__ */ jsx(Component3, { ...props });
+  }
+  WithRegistry.displayName = `withRegistry(${Component3.displayName || Component3.name})`;
+  return WithRegistry;
+}
+var HourlyOutputChart2 = (props) => {
+  const { HourlyOutputChart: RegisteredHourlyOutputChart } = useRegistry();
+  return /* @__PURE__ */ jsx(RegisteredHourlyOutputChart, { ...props });
+};
+var HourlyComplianceDot = (props) => {
+  const { cx: cx2, cy, index, payload, targetCompliance } = props;
+  const complianceValue = payload?.compliance;
+  if (typeof index !== "number" || index % 60 !== 0 || typeof complianceValue !== "number" || complianceValue === null) {
+    return null;
+  }
+  const roundedValue = Math.round(complianceValue);
+  const isAboveTarget = roundedValue >= targetCompliance;
+  const labelColor = isAboveTarget ? "#10B981" : "#EF4444";
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx("circle", { cx: cx2, cy, r: 4, fill: "#EF4444" }),
+    " ",
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx2,
+        y: cy ? cy - 10 : 0,
+        dy: 0,
+        textAnchor: "middle",
+        fill: labelColor,
+        fontSize: 12,
+        fontWeight: 600,
+        children: `${roundedValue}%`
+      }
+    )
+  ] });
+};
+var SOPComplianceChart = ({
+  data = [],
+  targetCompliance = 95,
+  shiftStart,
+  className = ""
+}) => {
+  const getHourFromTimeString = (timeStr) => {
+    const [hours, minutes] = timeStr.split(":");
+    return parseInt(hours);
+  };
+  const shiftStartHour = getHourFromTimeString(shiftStart);
+  const SHIFT_DURATION_HOURS = 9;
+  const MINUTES_PER_HOUR = 60;
+  const TOTAL_MINUTES = SHIFT_DURATION_HOURS * MINUTES_PER_HOUR;
+  const mockData = Array.from(
+    { length: TOTAL_MINUTES },
+    () => Math.floor(Math.random() * 10) + 90
+  );
+  const [animatedData, setAnimatedData] = useState([]);
+  const prevDataRef = useRef([]);
+  const animationFrameRef = useRef(null);
+  const animateToNewData = useCallback((targetData) => {
+    const startData = [...prevDataRef.current];
+    while (startData.length < targetData.length) {
+      startData.push(startData.length > 0 ? startData[startData.length - 1] : 0);
+    }
+    const startTime = performance.now();
+    const duration = 400;
+    const animate = (currentTime) => {
+      const elapsed = currentTime - startTime;
+      const progress6 = Math.min(elapsed / duration, 1);
+      const easeOutQuad = (t) => 1 - (1 - t) * (1 - t);
+      const easedProgress = easeOutQuad(progress6);
+      const newData = startData.map((start, index) => {
+        if (index >= targetData.length) return start;
+        const target = targetData[index];
+        const change = target - start;
+        return start + change * easedProgress;
+      });
+      setAnimatedData(newData);
+      prevDataRef.current = newData;
+      if (progress6 < 1) {
+        animationFrameRef.current = requestAnimationFrame(animate);
+      } else {
+        setAnimatedData(targetData);
+        prevDataRef.current = targetData;
+      }
+    };
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+    }
+    animationFrameRef.current = requestAnimationFrame(animate);
+  }, []);
+  useEffect(() => {
+    if (data.length === 0) {
+      if (prevDataRef.current.length === 0) {
+        animateToNewData(mockData);
+      }
+      return;
+    }
+    const actualData = [...data];
+    if (JSON.stringify(actualData) !== JSON.stringify(prevDataRef.current)) {
+      animateToNewData(actualData);
+    }
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [data, animateToNewData, mockData]);
+  const formatTime2 = (minuteIndex) => {
+    const totalMinutes = shiftStartHour * 60 + minuteIndex;
+    const hours = Math.floor(totalMinutes / 60) % 24;
+    const minutes = totalMinutes % 60;
+    const formattedHour = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+    const ampm = hours >= 12 ? "PM" : "AM";
+    return `${formattedHour}:${minutes.toString().padStart(2, "0")} ${ampm}`;
   };
   const chartData = Array.from({ length: TOTAL_MINUTES }, (_, index) => {
     const hasDataForMinute = index < animatedData.length - 10;
@@ -17321,7 +17876,7 @@ var EmptyStateMessage = ({
   iconClassName
 }) => {
   let IconContent = null;
-  if (React33__default.isValidElement(iconType)) {
+  if (React14__default.isValidElement(iconType)) {
     IconContent = iconType;
   } else if (typeof iconType === "string") {
     const MappedIcon = IconMap[iconType];
@@ -17420,11 +17975,6 @@ var BreakNotificationPopup = ({
     }, 6e4);
     return () => clearInterval(timer);
   }, []);
-  useEffect(() => {
-    if (activeBreaks.length > 0) {
-      setIsDismissed(false);
-    }
-  }, [activeBreaks]);
   const handleDismiss = () => {
     setIsDismissed(true);
     onDismiss?.();
@@ -17447,57 +17997,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-4 right-4 z-50 max-w-sm w-full ${className}`,
-      children: /* @__PURE__ */ jsxs("div", { className: "bg-card text-card-foreground rounded-lg border shadow-sm overflow-hidden", children: [
-        activeBreaks.map((breakItem, index) => /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            transition: { delay: index * 0.1 },
-            className: `p-4 ${index > 0 ? "border-t" : ""}`,
-            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-1 min-w-0", children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm", children: breakItem.remarks || "Break" }) }),
-                  /* @__PURE__ */ jsx("div", { className: "space-y-1 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      "Duration: ",
-                      breakItem.duration,
-                      " min"
-                    ] }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      "Elapsed: ",
-                      formatTime2(breakItem.elapsedMinutes)
-                    ] })
-                  ] }) }),
-                  /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-1", children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "h-1 bg-primary rounded-full transition-all duration-1000",
-                      style: {
-                        width: `${Math.min(100, Math.max(0, breakItem.elapsedMinutes / breakItem.duration * 100))}%`
-                      }
+      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(
+        motion.div,
+        {
+          initial: { opacity: 0, y: 20 },
+          animate: { opacity: 1, y: 0 },
+          transition: { delay: index * 0.1 },
+          className: `p-3 ${index > 0 ? "border-t border-gray-100" : ""}`,
+          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-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm text-gray-900", children: breakItem.remarks || "Break" }) }),
+                /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-600 font-medium", children: [
+                  breakItem.startTime,
+                  " - ",
+                  breakItem.endTime
+                ] }) }),
+                /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500", children: [
+                  formatTime2(breakItem.elapsedMinutes),
+                  " / ",
+                  breakItem.duration,
+                  " min"
+                ] }) }),
+                /* @__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))}%`
                     }
-                  ) }) })
-                ] })
-              ] }),
-              index === 0 && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: handleDismiss,
-                  className: "ml-3 text-muted-foreground hover:text-foreground transition-colors p-1 -mt-1",
-                  "aria-label": "Dismiss notification",
-                  children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
-                }
-              )
-            ] })
-          },
-          `${breakItem.lineId}-${breakItem.startTime}-${index}`
-        )),
-        /* @__PURE__ */ jsx("div", { className: "px-4 py-2 text-xs text-muted-foreground text-center border-t", children: "Updates automatically every minute" })
-      ] })
+                  }
+                ) }) })
+              ] })
+            ] }),
+            index === 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleDismiss,
+                className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-full hover:bg-gray-100",
+                "aria-label": "Dismiss notification",
+                children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+              }
+            )
+          ] })
+        },
+        `${breakItem.lineId}-${breakItem.startTime}-${index}`
+      )) })
     }
   ) });
 };
@@ -19887,7 +20434,7 @@ function Skeleton({ className, ...props }) {
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React33.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -19903,7 +20450,7 @@ var SelectTrigger = React33.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -19913,7 +20460,7 @@ var SelectScrollUpButton = React33.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -19923,7 +20470,7 @@ var SelectScrollDownButton = React33.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React33.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React14.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -19951,7 +20498,7 @@ var SelectContent = React33.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -19960,7 +20507,7 @@ var SelectLabel = React33.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React33.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -19976,7 +20523,7 @@ var SelectItem = React33.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -21686,352 +22233,29 @@ var BottlenecksContent = ({
                 handlePrevious();
               },
               disabled: currentIndex === 0 || filteredVideos.length === 0,
-              className: `absolute left-4 top-1/2 -translate-y-1/2 z-[102] p-3 rounded-full bg-black/30 hover:bg-black/50 text-white transition-all ${currentIndex === 0 ? "opacity-30 cursor-not-allowed" : ""}`,
-              "aria-label": "Previous video",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-7 w-7" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                handleNext();
-              },
-              disabled: currentIndex === filteredVideos.length - 1 || filteredVideos.length === 0,
-              className: `absolute right-4 top-1/2 -translate-y-1/2 z-[102] p-3 rounded-full bg-black/30 hover:bg-black/50 text-white transition-all ${currentIndex === filteredVideos.length - 1 ? "opacity-30 cursor-not-allowed" : ""}`,
-              "aria-label": "Next video",
-              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-7 w-7" })
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-var TREND_STYLES = {
-  0: { arrow: "\u2193", color: "text-red-500 font-bold text-shadow" },
-  // Down
-  1: { arrow: "\u2013", color: "text-gray-500 font-bold text-shadow" },
-  // Unchanged
-  2: { arrow: "\u2191", color: "text-green-500 font-bold text-shadow" }
-  // Up
-};
-var getTrendArrowAndColor = (trend) => TREND_STYLES[trend] || { arrow: "", color: "" };
-var VideoCard = React33__default.memo(({
-  workspace,
-  hlsUrl,
-  shouldPlay,
-  onClick,
-  onFatalError,
-  isVeryLowEfficiency = false,
-  className = ""
-}) => {
-  const videoRef = useRef(null);
-  useHlsStream(videoRef, {
-    src: hlsUrl,
-    shouldPlay,
-    onFatalError: onFatalError ?? (() => throttledReloadDashboard())
-  });
-  const displayName = getWorkspaceDisplayName(workspace.workspace_name);
-  workspace.workspace_uuid || workspace.workspace_name;
-  const getEfficiencyOverlayColor = (efficiency) => {
-    if (efficiency >= 80) {
-      return "bg-[#00D654]/25";
-    } else if (efficiency >= 70) {
-      return "bg-[#FFD700]/30";
-    } else {
-      return "bg-[#FF2D0A]/30";
-    }
-  };
-  const getEfficiencyBarColor = (efficiency) => {
-    if (efficiency >= 80) {
-      return "bg-[#00AB45]";
-    } else if (efficiency >= 70) {
-      return "bg-[#FFB020]";
-    } else {
-      return "bg-[#E34329]";
-    }
-  };
-  const efficiencyOverlayClass = getEfficiencyOverlayColor(workspace.efficiency);
-  const efficiencyBarClass = getEfficiencyBarColor(workspace.efficiency);
-  const trendInfo = workspace.trend !== void 0 ? getTrendArrowAndColor(workspace.trend) : null;
-  const handleClick = useCallback(() => {
-    if (onClick) {
-      onClick();
-    }
-  }, [onClick]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] transition-transform duration-200 shadow-sm ${className}`,
-      style: { width: "100%", height: "100%" },
-      onClick: handleClick,
-      title: displayName,
-      tabIndex: 0,
-      "aria-label": `Open workspace ${displayName}`,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleClick();
-        }
-      },
-      children: [
-        isVeryLowEfficiency && /* @__PURE__ */ jsx("div", { className: "absolute top-1 left-2 z-30", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute -inset-1 bg-red-400/50 rounded-full blur-sm animate-pulse" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute -inset-0.5 bg-red-500/30 rounded-full blur-md animate-ping [animation-duration:1.5s]" }),
-          /* @__PURE__ */ jsx("div", { className: "bg-[#E34329] w-5 h-5 rounded-full flex items-center justify-center text-white font-bold text-xs shadow-lg ring-2 ring-red-400/40 border border-red-400/80 animate-pulse", children: "!" })
-        ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
-            /* @__PURE__ */ jsx(Camera, { className: "w-6 h-6 text-gray-500" }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 mt-1", children: "Loading..." })
-          ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10", children: /* @__PURE__ */ jsx(
-            "video",
-            {
-              ref: videoRef,
-              className: "h-full w-full object-cover",
-              playsInline: true,
-              muted: true,
-              disablePictureInPicture: true,
-              controlsList: "nodownload noplaybackrate"
+              className: `absolute left-4 top-1/2 -translate-y-1/2 z-[102] p-3 rounded-full bg-black/30 hover:bg-black/50 text-white transition-all ${currentIndex === 0 ? "opacity-30 cursor-not-allowed" : ""}`,
+              "aria-label": "Previous video",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-7 w-7" })
             }
-          ) }),
-          /* @__PURE__ */ jsx("div", { className: `absolute inset-0 z-20 pointer-events-none ${efficiencyOverlayClass}` }),
-          /* @__PURE__ */ jsxs("div", { className: "absolute top-2 right-2 z-30 bg-black/70 backdrop-blur-sm rounded px-2 py-0.5 text-white text-xs font-semibold border border-white/10", children: [
-            Math.round(workspace.efficiency),
-            "%"
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-black/50 z-30", children: /* @__PURE__ */ jsx(
-            "div",
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
             {
-              className: `h-full ${efficiencyBarClass} transition-all duration-500`,
-              style: { width: `${Math.min(100, workspace.efficiency)}%` }
+              onClick: (e) => {
+                e.stopPropagation();
+                handleNext();
+              },
+              disabled: currentIndex === filteredVideos.length - 1 || filteredVideos.length === 0,
+              className: `absolute right-4 top-1/2 -translate-y-1/2 z-[102] p-3 rounded-full bg-black/30 hover:bg-black/50 text-white transition-all ${currentIndex === filteredVideos.length - 1 ? "opacity-30 cursor-not-allowed" : ""}`,
+              "aria-label": "Next video",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-7 w-7" })
             }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 flex justify-between items-center z-10", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx(Camera, { size: 12, className: "text-white" }),
-            /* @__PURE__ */ jsx("p", { className: "text-white text-xs font-medium tracking-wide", children: displayName })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            trendInfo && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: `text-lg ${trendInfo.color}`,
-                style: { lineHeight: 1, display: "flex", alignItems: "center" },
-                children: trendInfo.arrow
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500" }),
-            /* @__PURE__ */ jsx("span", { className: "text-white text-xs", children: "Live" })
-          ] })
-        ] })
-      ]
-    }
-  );
-}, (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;
-});
-VideoCard.displayName = "VideoCard";
-var DEFAULT_WORKSPACE_HLS_URLS = {
-  "WS1": "https://dnh-hls.optifye.ai/cam1/index.m3u8",
-  "WS2": "https://dnh-hls.optifye.ai/cam2/index.m3u8",
-  "WS3": "https://dnh-hls.optifye.ai/cam3/index.m3u8",
-  "WS4": "https://dnh-hls.optifye.ai/cam3/index.m3u8",
-  "WS01": "https://59.144.218.58:8443/camera6.m3u8",
-  "WS02": "https://59.144.218.58:8443/camera2.m3u8",
-  "WS03": "https://59.144.218.58:8443/camera3.m3u8",
-  "WS04": "https://59.144.218.58:8443/camera4.m3u8",
-  "WS05": "https://59.144.218.58:8443/camera1.m3u8",
-  "WS06": "https://59.144.218.58:8443/camera5.m3u8"
-};
-var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
-var VideoGridView = React33__default.memo(({
-  workspaces,
-  selectedLine,
-  className = "",
-  lineIdMapping = {},
-  videoSources = {}
-}) => {
-  const router = useRouter();
-  const containerRef = useRef(null);
-  const observerRef = useRef(null);
-  const [gridCols, setGridCols] = useState(4);
-  const [visibleWorkspaces, setVisibleWorkspaces] = useState(/* @__PURE__ */ new Set());
-  const mergedVideoSources = {
-    defaultHlsUrl: videoSources.defaultHlsUrl || DEFAULT_HLS_URL,
-    workspaceHlsUrls: { ...DEFAULT_WORKSPACE_HLS_URLS, ...videoSources.workspaceHlsUrls }
-  };
-  const getWorkspaceHlsUrl = useCallback((workspaceName) => {
-    const wsName = workspaceName.toUpperCase();
-    return mergedVideoSources.workspaceHlsUrls[wsName] || mergedVideoSources.defaultHlsUrl;
-  }, [mergedVideoSources]);
-  const veryLowEfficiencyWorkspaces = useMemo(() => {
-    return new Set(
-      workspaces.filter((w) => w.efficiency < 50 && w.efficiency >= 10).map((w) => w.workspace_name)
-    );
-  }, [workspaces]);
-  const filteredWorkspaces = useMemo(() => {
-    return selectedLine === 1 ? workspaces.filter((w) => {
-      if (w.workspace_name === "WS5-5") return true;
-      if (w.workspace_name === "WS32-5") return false;
-      try {
-        const wsNumber = parseInt(w.workspace_name.replace("WS", ""));
-        return wsNumber >= 1 && wsNumber <= 22;
-      } catch {
-        return true;
-      }
-    }) : selectedLine === 2 ? workspaces.filter((w) => {
-      if (w.workspace_name === "WS5-5") return false;
-      if (w.workspace_name === "WS32-5") return true;
-      try {
-        const wsNumber = parseInt(w.workspace_name.replace("WS", ""));
-        return wsNumber >= 23 && wsNumber <= 44;
-      } catch {
-        return false;
-      }
-    }) : workspaces;
-  }, [workspaces, selectedLine]);
-  const calculateOptimalGrid = useCallback(() => {
-    if (!containerRef.current) return;
-    const containerPadding = 16;
-    const containerWidth = containerRef.current.clientWidth - containerPadding;
-    const containerHeight = containerRef.current.clientHeight - containerPadding;
-    const count = filteredWorkspaces.length;
-    if (count === 0) {
-      setGridCols(1);
-      return;
-    }
-    let bestCols = 1;
-    let bestScore = 0;
-    const targetAspectRatio = 16 / 9;
-    const gap = 8;
-    const maxCols = Math.min(count, 6);
-    for (let cols = 1; cols <= maxCols; cols++) {
-      const rows = Math.ceil(count / cols);
-      const availableWidth = containerWidth - gap * (cols - 1);
-      const availableHeight = containerHeight - gap * (rows - 1);
-      const cellWidth = availableWidth / cols;
-      const cellHeight = availableHeight / rows;
-      const minCellWidth = containerWidth < 800 ? 120 : 150;
-      const minCellHeight = containerHeight < 600 ? 80 : 100;
-      if (cellWidth < minCellWidth || cellHeight < minCellHeight) continue;
-      const totalUsedArea = cellWidth * cellHeight * count;
-      const totalAvailableArea = containerWidth * containerHeight;
-      const spaceUtilization = totalUsedArea / totalAvailableArea;
-      const actualAspectRatio = cellWidth / cellHeight;
-      const aspectRatioScore = 1 / (1 + Math.abs(actualAspectRatio - targetAspectRatio) * 0.3);
-      const score = spaceUtilization * 0.9 + aspectRatioScore * 0.1;
-      if (score > bestScore) {
-        bestScore = score;
-        bestCols = cols;
+          )
+        ]
       }
-    }
-    if (bestScore === 0) {
-      bestCols = Math.ceil(Math.sqrt(count));
-    }
-    setGridCols(bestCols);
-  }, [filteredWorkspaces.length]);
-  useEffect(() => {
-    calculateOptimalGrid();
-    const handleResize = () => calculateOptimalGrid();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [calculateOptimalGrid]);
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const options = {
-      root: null,
-      rootMargin: "50px",
-      threshold: 0.1
-    };
-    observerRef.current = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        const workspaceId = entry.target.getAttribute("data-workspace-id");
-        if (!workspaceId) return;
-        setVisibleWorkspaces((prev) => {
-          const next = new Set(prev);
-          if (entry.isIntersecting) {
-            next.add(workspaceId);
-          } else {
-            next.delete(workspaceId);
-          }
-          return next;
-        });
-      });
-    }, options);
-    const elements = containerRef.current.querySelectorAll("[data-workspace-id]");
-    elements.forEach((el) => observerRef.current?.observe(el));
-    return () => {
-      observerRef.current?.disconnect();
-    };
-  }, [filteredWorkspaces]);
-  const handleWorkspaceClick = useCallback((workspace) => {
-    const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
-    trackCoreEvent("Workspace Detail Clicked", {
-      workspace_name: workspace.workspace_name,
-      workspace_id: workspaceId,
-      view_type: "video_grid",
-      performance_score: workspace.performance_score,
-      efficiency: workspace.efficiency,
-      action_count: workspace.action_count
-    });
-    const displayName = getWorkspaceDisplayName(workspace.workspace_name);
-    const navParams = getWorkspaceNavigationParams(workspaceId, displayName);
-    router.push(`/workspace/${workspaceId}${navParams}`);
-  }, [router]);
-  return /* @__PURE__ */ jsx("div", { className: `relative overflow-hidden h-full w-full ${className}`, children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full w-full p-2", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "grid h-full w-full gap-2",
-      style: {
-        gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-        gridTemplateRows: `repeat(${Math.ceil(filteredWorkspaces.length / gridCols)}, 1fr)`,
-        minHeight: "100%"
-      },
-      children: filteredWorkspaces.sort((a, b) => {
-        const aNum = parseInt(a.workspace_name.slice(2));
-        const bNum = parseInt(b.workspace_name.slice(2));
-        if (!selectedLine) {
-          const aIsLine2 = a.line_id === lineIdMapping.line2;
-          const bIsLine2 = b.line_id === lineIdMapping.line2;
-          if (aIsLine2 !== bIsLine2) {
-            return aIsLine2 ? 1 : -1;
-          }
-        }
-        return aNum - bNum;
-      }).map((workspace) => {
-        const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
-        const isVisible = visibleWorkspaces.has(workspaceId);
-        const isVeryLowEfficiency = veryLowEfficiencyWorkspaces.has(workspace.workspace_name);
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-workspace-id": workspaceId,
-            className: "workspace-card relative min-h-0 min-w-0",
-            style: { width: "100%", height: "100%" },
-            children: /* @__PURE__ */ jsx(
-              VideoCard,
-              {
-                workspace,
-                hlsUrl: getWorkspaceHlsUrl(workspace.workspace_name),
-                shouldPlay: isVisible,
-                onClick: () => handleWorkspaceClick(workspace),
-                onFatalError: throttledReloadDashboard,
-                isVeryLowEfficiency
-              }
-            )
-          },
-          workspaceId
-        );
-      })
-    }
-  ) }) });
-});
-VideoGridView.displayName = "VideoGridView";
+    )
+  ] });
+};
 var getEfficiencyColor = (efficiency) => {
   if (efficiency >= 80) {
     return "bg-[#00AB45]/90 hover:bg-[#00AB45]/95";
@@ -22132,7 +22356,7 @@ var arePropsEqual = (prevProps, nextProps) => {
   return prevProps.data.efficiency === nextProps.data.efficiency && prevProps.data.trend_score === nextProps.data.trend_score && prevProps.data.workspace_id === nextProps.data.workspace_id && prevProps.data.workspace_name === nextProps.data.workspace_name && prevProps.isBottleneck === nextProps.isBottleneck && prevProps.isLowEfficiency === nextProps.isLowEfficiency && prevProps.isVeryLowEfficiency === nextProps.isVeryLowEfficiency && // Position doesn't need deep equality check as it's generally static
   prevProps.position.id === nextProps.position.id;
 };
-var WorkspaceGridItem = React33__default.memo(({
+var WorkspaceGridItem = React14__default.memo(({
   data,
   position,
   isBottleneck = false,
@@ -22225,7 +22449,7 @@ var WorkspaceGridItem = React33__default.memo(({
   );
 }, arePropsEqual);
 WorkspaceGridItem.displayName = "WorkspaceGridItem";
-var WorkspaceGrid = React33__default.memo(({
+var WorkspaceGrid = React14__default.memo(({
   workspaces,
   isPdfMode = false,
   customWorkspacePositions,
@@ -22241,13 +22465,14 @@ var WorkspaceGrid = React33__default.memo(({
       total_workspaces: workspaces.length
     });
   }, [workspaces.length]);
+  const { VideoGridView: VideoGridViewComponent } = useRegistry();
   return /* @__PURE__ */ jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
       /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx(Legend5, {}) }) }),
       /* @__PURE__ */ jsx("div", { className: "sm:hidden mt-1", children: /* @__PURE__ */ jsx(Legend5, {}) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "absolute top-10 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsx(
-      VideoGridView,
+      VideoGridViewComponent,
       {
         workspaces,
         videoSources
@@ -22414,7 +22639,7 @@ var KPICard = ({
 }) => {
   useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  const trendInfo = React33__default.useMemo(() => {
+  const trendInfo = React14__default.useMemo(() => {
     let trendValue = trend || "neutral";
     if (change !== void 0 && trend === void 0) {
       trendValue = change > 0 ? "up" : change < 0 ? "down" : "neutral";
@@ -22437,7 +22662,7 @@ var KPICard = ({
     const shouldShowTrend = !(change === 0 && trend === void 0);
     return { trendValue, Icon: Icon2, colorClass, shouldShowTrend };
   }, [trend, change]);
-  const formattedValue = React33__default.useMemo(() => {
+  const formattedValue = React14__default.useMemo(() => {
     if (title === "Quality Compliance" && typeof value === "number") {
       return value.toFixed(1);
     }
@@ -22451,7 +22676,7 @@ var KPICard = ({
     }
     return value;
   }, [value, title]);
-  const formattedChange = React33__default.useMemo(() => {
+  const formattedChange = React14__default.useMemo(() => {
     if (change === void 0 || change === 0) return null;
     const absChange = Math.abs(change);
     return formatNumber(absChange, { minimumFractionDigits: 0, maximumFractionDigits: 1 });
@@ -22863,7 +23088,7 @@ var Breadcrumbs = ({ items }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React33__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React14__default.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-gray-400 dark:text-gray-500" }),
     /* @__PURE__ */ jsxs(
       "span",
@@ -23682,7 +23907,7 @@ var ThreadSidebar = ({
   ] });
 };
 var axelProfilePng = "/axel-profile.png";
-var ProfilePicture = React33__default.memo(({ alt = "Axel", className = "w-12 h-12" }) => {
+var ProfilePicture = React14__default.memo(({ alt = "Axel", className = "w-12 h-12" }) => {
   return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: `${className} rounded-xl overflow-hidden shadow-sm`, children: /* @__PURE__ */ jsx(
     "img",
     {
@@ -24412,7 +24637,7 @@ var AIAgentView = () => {
                           timestamp: (/* @__PURE__ */ new Date()).toISOString()
                         });
                       },
-                      placeholder: "Ask me about production optimization, quality metrics, or any manufacturing challenge...",
+                      placeholder: "Ask me anything about your shop-floor",
                       className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
                       rows: 1,
                       style: { minHeight: "24px", maxHeight: "120px" }
@@ -24587,7 +24812,7 @@ var AIAgentView = () => {
                       timestamp: (/* @__PURE__ */ new Date()).toISOString()
                     });
                   },
-                  placeholder: "Ask me about production optimization, quality metrics, or any manufacturing challenge...",
+                  placeholder: "Ask me anything about your shop-floor",
                   className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
                   rows: 1,
                   style: { minHeight: "24px", maxHeight: "120px" }
@@ -25547,6 +25772,24 @@ function HomeView({
   const [selectedLineId, setSelectedLineId] = useState(defaultLineId);
   const [isChangingFilter, setIsChangingFilter] = useState(false);
   const [errorMessage, setErrorMessage] = useState(null);
+  const [displayNamesInitialized, setDisplayNamesInitialized] = useState(false);
+  useEffect(() => {
+    const initDisplayNames = async () => {
+      try {
+        await preInitializeWorkspaceDisplayNames(selectedLineId);
+        setDisplayNamesInitialized(true);
+      } catch (error) {
+        console.error("Failed to pre-initialize workspace display names:", error);
+        setDisplayNamesInitialized(true);
+      }
+    };
+    initDisplayNames();
+  }, [selectedLineId]);
+  const {
+    displayNames: workspaceDisplayNames,
+    loading: displayNamesLoading,
+    error: displayNamesError
+  } = useWorkspaceDisplayNames(void 0, selectedLineId);
   useCallback(() => {
     console.log("Refetching KPIs after line metrics update");
   }, []);
@@ -25619,16 +25862,16 @@ function HomeView({
   const lineTitle = useMemo(() => {
     return factoryName;
   }, [factoryName]);
-  const isLoading = !isHydrated || metricsLoading || kpisLoading || isChangingFilter;
+  const isLoading = !isHydrated || metricsLoading || kpisLoading || isChangingFilter || displayNamesLoading || !displayNamesInitialized;
   if (isLoading) {
     return /* @__PURE__ */ jsx("div", { className: "min-h-screen bg-slate-50", children: /* @__PURE__ */ jsx(LoadingPageCmp, { message: "Loading dashboard..." }) });
   }
-  if (errorMessage) {
+  if (errorMessage || displayNamesError) {
     return /* @__PURE__ */ jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-white p-6 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 text-red-500", children: [
       /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
       /* @__PURE__ */ jsxs("span", { className: "text-lg font-medium", children: [
         "Error: ",
-        errorMessage
+        errorMessage || displayNamesError?.message
       ] })
     ] }) }) });
   }
@@ -25648,7 +25891,7 @@ function HomeView({
             /* @__PURE__ */ jsx(DashboardHeader, { lineTitle, className: "mb-1 sm:mb-0" }),
             memoizedKPIs && /* @__PURE__ */ jsx(KPISection2, { kpis: memoizedKPIs, className: "w-full sm:w-auto" })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden", children: memoizedWorkspaceMetrics.length > 0 ? /* @__PURE__ */ jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-80px)] sm:min-h-0", children: React33__default.createElement(WorkspaceGrid, {
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden", children: memoizedWorkspaceMetrics.length > 0 ? /* @__PURE__ */ jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-80px)] sm:min-h-0", children: React14__default.createElement(WorkspaceGrid, {
             workspaces: memoizedWorkspaceMetrics,
             lineNames,
             factoryView: factoryViewId,
@@ -25669,7 +25912,7 @@ function HomeView({
     }
   );
 }
-var AuthenticatedHomeView = withAuth(React33__default.memo(HomeView));
+var AuthenticatedHomeView = withAuth(React14__default.memo(HomeView));
 var HomeView_default = HomeView;
 
 // src/views/kpi-detail-view.types.ts
@@ -26502,7 +26745,7 @@ var LineCard = ({ line, onClick }) => {
   const { kpis, isLoading, error } = useLineKPIs({ lineId: line.id });
   const shiftConfig = useShiftConfig();
   const dateTimeConfig = useDateTimeConfig();
-  const isOnTrack = React33__default.useMemo(() => {
+  const isOnTrack = React14__default.useMemo(() => {
     if (!kpis) return null;
     const currentTime = /* @__PURE__ */ new Date();
     const timezone = dateTimeConfig.defaultTimezone || "Asia/Kolkata";
@@ -30466,4 +30709,4 @@ var S3Service = class {
   }
 };
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedTargetsView, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, 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_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, EmptyStateMessage, FactoryView_default as FactoryView, GridComponentsPlaceholder, Header, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend5 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSpinner_default as LoadingSpinner, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OutputProgressChart, PageHeader, ProfileView_default as ProfileView, RegistryProvider, S3Service, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SlackAPI, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceGrid, WorkspaceGridItem, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultTabForWorkspace, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isTransitionPeriod, isValidLineInfoPayload, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, optifyeAgentClient, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, s3VideoPreloader, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAnalyticsConfig, useAuth, useAuthConfig, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHookOverride, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, useRealtimeLineMetrics, useRegistry, useShiftConfig, useShifts, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPreloader, whatsappService, withAuth, withRegistry, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedTargetsView, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, 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_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, EmptyStateMessage, FactoryView_default as FactoryView, GridComponentsPlaceholder, Header, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend5 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSpinner_default as LoadingSpinner, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OutputProgressChart, PageHeader, ProfileView_default as ProfileView, RegistryProvider, S3Service, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SlackAPI, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceGrid, WorkspaceGridItem, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultTabForWorkspace, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isTransitionPeriod, isValidLineInfoPayload, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, optifyeAgentClient, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, s3VideoPreloader, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAnalyticsConfig, useAuth, useAuthConfig, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHookOverride, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, useRealtimeLineMetrics, useRegistry, useShiftConfig, useShifts, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPreloader, whatsappService, withAuth, withRegistry, workspaceService };