@optifye/dashboard-core 4.2.2 → 4.2.4

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, memo, useState, useEffect, useRef, useCallback, useMemo, 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';
@@ -110,8 +110,9 @@ var DEFAULT_ENDPOINTS_CONFIG = {
   whatsapp: "/api/send-whatsapp-direct",
   agnoApiUrl: process.env.NEXT_PUBLIC_AGNO_URL || "https://optifye-agent-production.up.railway.app",
   // Default AGNO API URL
-  // Hard-coded Slack webhook so the Help page works out-of-the-box without any config
-  slackWebhookUrl: "https://hooks.slack.com/services/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",
+  // Use environment variable for Slack webhook URL for privacy/security
+  // Note: SLACK_WEBHOOK_URL is server-side only, NEXT_PUBLIC_SLACK_WEBHOOK_URL works client-side but is less secure
+  slackWebhookUrl: process.env.SLACK_WEBHOOK_URL || process.env.NEXT_PUBLIC_SLACK_WEBHOOK_URL || void 0,
   slackProxyEndpoint: void 0
 };
 var DEFAULT_THEME_CONFIG = {
@@ -187,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);
@@ -220,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;
 };
@@ -848,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,
@@ -868,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 }
           };
@@ -900,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,
@@ -939,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 }
       };
@@ -1459,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 = {
@@ -1497,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 }
       };
@@ -4283,8 +4435,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) => {
@@ -4368,6 +4538,7 @@ var clearWorkspaceDisplayNamesCache = () => {
   workspaceService.clearWorkspaceDisplayNamesCache();
   runtimeWorkspaceDisplayNames = {};
   isInitialized = false;
+  isInitializing = false;
 };
 
 // src/lib/hooks/useWorkspaceDisplayNames.ts
@@ -8036,7 +8207,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) {
@@ -8091,7 +8262,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
@@ -8128,7 +8299,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") {
@@ -15397,7 +15568,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.");
@@ -15440,10 +15611,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);
@@ -16130,10 +16301,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;
@@ -16163,7 +16334,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);
@@ -16387,7 +16558,7 @@ var CycleTimeOverTimeChart = ({
     renderLegend()
   ] });
 };
-var Card = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -16399,7 +16570,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,
@@ -16408,7 +16579,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,
@@ -16420,7 +16591,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,
@@ -16429,9 +16600,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,
@@ -16507,7 +16678,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(
@@ -16538,10 +16709,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;
@@ -16571,7 +16762,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);
@@ -16582,7 +16773,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);
@@ -16598,8 +16789,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);
@@ -16612,22 +16803,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);
@@ -16720,10 +16913,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;
@@ -16757,48 +16950,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);
+                        }) })
+                      ] })
                     ] })
                   ] })
                 ] });
@@ -16888,10 +17087,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: [
@@ -17320,7 +17549,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];
@@ -19886,7 +20115,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,
@@ -19902,7 +20131,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,
@@ -19912,7 +20141,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,
@@ -19922,7 +20151,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,
@@ -19950,7 +20179,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,
@@ -19959,7 +20188,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,
@@ -19975,7 +20204,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,
@@ -21717,7 +21946,7 @@ var TREND_STYLES = {
   // Up
 };
 var getTrendArrowAndColor = (trend) => TREND_STYLES[trend] || { arrow: "", color: "" };
-var VideoCard = React33__default.memo(({
+var VideoCard = React14__default.memo(({
   workspace,
   hlsUrl,
   shouldPlay,
@@ -21848,7 +22077,7 @@ var DEFAULT_WORKSPACE_HLS_URLS = {
   "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(({
+var VideoGridView = React14__default.memo(({
   workspaces,
   selectedLine,
   className = "",
@@ -22131,7 +22360,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,
@@ -22224,7 +22453,7 @@ var WorkspaceGridItem = React33__default.memo(({
   );
 }, arePropsEqual);
 WorkspaceGridItem.displayName = "WorkspaceGridItem";
-var WorkspaceGrid = React33__default.memo(({
+var WorkspaceGrid = React14__default.memo(({
   workspaces,
   isPdfMode = false,
   customWorkspacePositions,
@@ -22413,7 +22642,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";
@@ -22436,7 +22665,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);
     }
@@ -22450,7 +22679,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 });
@@ -22862,7 +23091,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",
@@ -23681,7 +23910,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",
     {
@@ -25127,6 +25356,17 @@ var SlackAPI = class {
       const config = _getDashboardConfigInstance();
       const endpointsConfig = config.endpoints ?? DEFAULT_ENDPOINTS_CONFIG;
       const { slackWebhookUrl, slackProxyEndpoint } = endpointsConfig;
+      console.log("SlackAPI Debug - Configuration check:", {
+        hasConfig: !!config,
+        hasEndpoints: !!config.endpoints,
+        slackWebhookUrl: slackWebhookUrl ? "configured" : "not configured",
+        slackProxyEndpoint: slackProxyEndpoint ? "configured" : "not configured",
+        envVariable: process.env.SLACK_WEBHOOK_URL ? "set" : "not set",
+        publicEnvVariable: process.env.NEXT_PUBLIC_SLACK_WEBHOOK_URL ? "set" : "not set"
+      });
+      if (process.env.NEXT_PUBLIC_SLACK_WEBHOOK_URL && !process.env.SLACK_WEBHOOK_URL) {
+        console.warn("\u26A0\uFE0F SECURITY WARNING: Using NEXT_PUBLIC_SLACK_WEBHOOK_URL exposes your webhook URL to the client. Consider using a server-side proxy instead.");
+      }
       if (slackWebhookUrl) {
         const slackMessage = this.formatSlackMessage(ticket);
         const response = await fetch(slackWebhookUrl, {
@@ -25161,6 +25401,10 @@ var SlackAPI = class {
         return;
       }
       console.warn("Slack notification skipped: No webhook or proxy endpoint configured");
+      console.info("To fix this, either:");
+      console.info("1. Set up a server-side proxy endpoint and configure slackProxyEndpoint in your dashboard config");
+      console.info("2. For development only: use NEXT_PUBLIC_SLACK_WEBHOOK_URL (not recommended for production)");
+      console.info("3. Configure the webhook URL directly in your dashboard config at runtime");
     } catch (error) {
       console.error("Failed to send Slack notification:", error);
       throw error;
@@ -25531,6 +25775,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");
   }, []);
@@ -25603,16 +25865,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
       ] })
     ] }) }) });
   }
@@ -25632,7 +25894,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,
@@ -25653,7 +25915,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
@@ -26486,7 +26748,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";
@@ -30450,4 +30712,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 };