@optifye/dashboard-core 4.2.8 → 4.3.3

package/dist/index.mjs

@@ -10,7 +10,7 @@ import Hls2 from 'hls.js';
 import useSWR from 'swr';
 import { noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds, memo as memo$1 } from 'motion-utils';
 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 { Bar, LabelList, ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Cell, PieChart, Pie, Legend, LineChart as LineChart$1, Line } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
 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';
@@ -991,7 +991,7 @@ var dashboardService = {
     const formattedStartDate = formatDate(startDate);
     const formattedEndDate = formatDate(endDate);
     try {
-      const { data, error } = await supabase.from(metricsTable).select("date, shift_id, efficiency, total_output, avg_cycle_time, idle_time, ideal_output, avg_pph, pph_threshold, workspace_rank").eq("workspace_id", workspaceUuid).gte("date", formattedStartDate).lte("date", formattedEndDate).order("date", { ascending: true }).order("shift_id", { ascending: true });
+      const { data, error } = await supabase.from(metricsTable).select("date, shift_id, efficiency, total_output, avg_cycle_time, ideal_output, avg_pph, pph_threshold, workspace_rank").eq("workspace_id", workspaceUuid).gte("date", formattedStartDate).lte("date", formattedEndDate).order("date", { ascending: true }).order("shift_id", { ascending: true });
       if (error) throw error;
       if (!data) return [];
       const transformedData = data.map((item) => ({
@@ -1004,8 +1004,7 @@ var dashboardService = {
         ideal_output: item.ideal_output || 0,
         avg_pph: item.avg_pph || 0,
         pph_threshold: item.pph_threshold || 0,
-        workspace_rank: item.workspace_rank || 0,
-        idle_time: item.idle_time || 0
+        workspace_rank: item.workspace_rank || 0
       }));
       return transformedData;
     } catch (err) {
@@ -2081,28 +2080,42 @@ var AuthProvider = ({ children }) => {
       id: supabaseUser.id,
       email: supabaseUser.email
     };
-    if (!userProfileTable || !supabase) return basicUser;
+    if (!supabase) return basicUser;
     try {
       const timeoutPromise = new Promise(
         (_, reject) => setTimeout(() => reject(new Error("Profile fetch timeout")), 5e3)
       );
-      const fetchPromise = supabase.from(userProfileTable).select(roleColumn).eq("id", supabaseUser.id).single();
-      const { data: profile, error: profileError } = await Promise.race([
-        fetchPromise,
-        timeoutPromise
+      const rolePromise = supabase.from("user_roles").select("role_level").eq("user_id", supabaseUser.id).single();
+      let profilePromise = null;
+      if (userProfileTable) {
+        profilePromise = supabase.from(userProfileTable).select(roleColumn).eq("id", supabaseUser.id).single();
+      }
+      const [roleResult, profileResult] = await Promise.race([
+        Promise.all([
+          rolePromise,
+          profilePromise || Promise.resolve(null)
+        ]),
+        timeoutPromise.then(() => {
+          throw new Error("Timeout");
+        })
       ]);
-      if (profileError) {
-        if (profileError.message.includes("does not exist") || profileError.message.includes("No rows found") || profileError.code === "PGRST116") {
-          console.log("User profile table not found or user not in table, using basic auth info");
-          return basicUser;
-        }
-        console.error("Error fetching user profile:", profileError);
-        return basicUser;
+      let roleLevel = void 0;
+      if (roleResult && !roleResult.error && roleResult.data) {
+        roleLevel = roleResult.data.role_level;
+      } else if (roleResult?.error) {
+        console.log("Error fetching role_level:", roleResult.error.message);
+      }
+      let roleValue = void 0;
+      if (profileResult && !profileResult.error && profileResult.data) {
+        roleValue = profileResult.data[roleColumn];
       }
-      const roleValue = profile ? profile[roleColumn] : void 0;
-      return { ...basicUser, role: roleValue };
+      return {
+        ...basicUser,
+        role: roleValue,
+        role_level: roleLevel
+      };
     } catch (err) {
-      console.error("Error fetching user profile:", err);
+      console.error("Error fetching user details:", err);
       return basicUser;
     }
   }, [supabase, userProfileTable, roleColumn]);
@@ -2137,7 +2150,8 @@ var AuthProvider = ({ children }) => {
                   email: userDetails.email,
                   name: userDetails.email,
                   // using email as the display name for now
-                  role: userDetails.role
+                  role: userDetails.role,
+                  role_level: userDetails.role_level
                 });
               }
             }
@@ -2175,7 +2189,8 @@ var AuthProvider = ({ children }) => {
               identifyCoreUser(userDetails.id, {
                 email: userDetails.email,
                 name: userDetails.email,
-                role: userDetails.role
+                role: userDetails.role,
+                role_level: userDetails.role_level
               });
             }
           }
@@ -14702,16 +14717,16 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
       if (!this.isVisible) {
         return hiddenVisibility;
       }
-      const styles = {
+      const styles2 = {
         visibility: ""
       };
       const transformTemplate = this.getTransformTemplate();
       if (this.needsReset) {
         this.needsReset = false;
-        styles.opacity = "";
-        styles.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
-        styles.transform = transformTemplate ? transformTemplate(this.latestValues, "") : "none";
-        return styles;
+        styles2.opacity = "";
+        styles2.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
+        styles2.transform = transformTemplate ? transformTemplate(this.latestValues, "") : "none";
+        return styles2;
       }
       const lead = this.getLead();
       if (!this.projectionDelta || !this.layout || !lead.target) {
@@ -14728,35 +14743,35 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
       }
       const valuesToRender = lead.animationValues || lead.latestValues;
       this.applyTransformsToTarget();
-      styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
+      styles2.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
       if (transformTemplate) {
-        styles.transform = transformTemplate(valuesToRender, styles.transform);
+        styles2.transform = transformTemplate(valuesToRender, styles2.transform);
       }
       const { x, y } = this.projectionDelta;
-      styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
+      styles2.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
       if (lead.animationValues) {
-        styles.opacity = lead === this ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1 : this.preserveOpacity ? this.latestValues.opacity : valuesToRender.opacityExit;
+        styles2.opacity = lead === this ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1 : this.preserveOpacity ? this.latestValues.opacity : valuesToRender.opacityExit;
       } else {
-        styles.opacity = lead === this ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : "" : valuesToRender.opacityExit !== void 0 ? valuesToRender.opacityExit : 0;
+        styles2.opacity = lead === this ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : "" : valuesToRender.opacityExit !== void 0 ? valuesToRender.opacityExit : 0;
       }
       for (const key in scaleCorrectors) {
         if (valuesToRender[key] === void 0)
           continue;
         const { correct, applyTo } = scaleCorrectors[key];
-        const corrected = styles.transform === "none" ? valuesToRender[key] : correct(valuesToRender[key], lead);
+        const corrected = styles2.transform === "none" ? valuesToRender[key] : correct(valuesToRender[key], lead);
         if (applyTo) {
           const num = applyTo.length;
           for (let i = 0; i < num; i++) {
-            styles[applyTo[i]] = corrected;
+            styles2[applyTo[i]] = corrected;
           }
         } else {
-          styles[key] = corrected;
+          styles2[key] = corrected;
         }
       }
       if (this.options.layoutId) {
-        styles.pointerEvents = lead === this ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "" : "none";
+        styles2.pointerEvents = lead === this ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "" : "none";
       }
-      return styles;
+      return styles2;
     }
     clearSnapshot() {
       this.resumeFrom = this.snapshot = void 0;
@@ -16863,23 +16878,35 @@ var HourlyOutputChart = ({
   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 [idleBarState, setIdleBarState] = React14__default.useState({
+    visible: showIdleTime,
+    key: 0,
+    shouldAnimate: false
+  });
   const prevShowIdleTimeRef = React14__default.useRef(showIdleTime);
-  const animationTimeoutRef = React14__default.useRef(null);
+  const stateUpdateTimeoutRef = React14__default.useRef(null);
   React14__default.useEffect(() => {
+    if (stateUpdateTimeoutRef.current) {
+      clearTimeout(stateUpdateTimeoutRef.current);
+    }
     if (showIdleTime && !prevShowIdleTimeRef.current) {
-      setShouldAnimateIdle(true);
-      if (animationTimeoutRef.current) {
-        clearTimeout(animationTimeoutRef.current);
-      }
-      animationTimeoutRef.current = setTimeout(() => {
-        setShouldAnimateIdle(false);
-      }, 1e3);
+      requestAnimationFrame(() => {
+        setIdleBarState({
+          visible: true,
+          key: Date.now(),
+          shouldAnimate: true
+        });
+        stateUpdateTimeoutRef.current = setTimeout(() => {
+          setIdleBarState((prev) => ({ ...prev, shouldAnimate: false }));
+        }, 1100);
+      });
+    } else if (!showIdleTime && prevShowIdleTimeRef.current) {
+      setIdleBarState((prev) => ({ ...prev, visible: false }));
     }
     prevShowIdleTimeRef.current = showIdleTime;
     return () => {
-      if (animationTimeoutRef.current) {
-        clearTimeout(animationTimeoutRef.current);
+      if (stateUpdateTimeoutRef.current) {
+        clearTimeout(stateUpdateTimeoutRef.current);
       }
     };
   }, [showIdleTime]);
@@ -16972,6 +16999,55 @@ var HourlyOutputChart = ({
       };
     });
   }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, formatHour, formatTimeRange]);
+  const IdleBar = React14__default.useMemo(() => {
+    if (!idleBarState.visible) return null;
+    return /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: "idleMinutes",
+        yAxisId: "idle",
+        maxBarSize: 35,
+        radius: [10, 10, 0, 0],
+        fill: "url(#idlePattern)",
+        opacity: 0.7,
+        isAnimationActive: idleBarState.shouldAnimate,
+        animationBegin: 0,
+        animationDuration: 1e3,
+        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"
+                  ]
+                }
+              );
+            }
+          }
+        )
+      },
+      `idle-bar-${idleBarState.key}`
+    );
+  }, [idleBarState.visible, idleBarState.key, idleBarState.shouldAnimate]);
   const maxYValue = Math.ceil(pphThreshold * 1.5);
   const generateYAxisTicks = () => {
     const targetValue = Math.round(pphThreshold);
@@ -17229,51 +17305,7 @@ var HourlyOutputChart = ({
               ]
             }
           ),
-          showIdleTime && /* @__PURE__ */ jsx(
-            Bar,
-            {
-              dataKey: "idleMinutes",
-              yAxisId: "idle",
-              maxBarSize: 35,
-              radius: [10, 10, 0, 0],
-              fill: "url(#idlePattern)",
-              opacity: 0.7,
-              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"
-                        ]
-                      }
-                    );
-                  }
-                }
-              )
-            }
-          ),
+          IdleBar,
           /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("pattern", { id: "idlePattern", patternUnits: "userSpaceOnUse", width: "4", height: "4", children: [
             /* @__PURE__ */ jsx("rect", { width: "4", height: "4", fill: "#9ca3af", opacity: "0.2" }),
             /* @__PURE__ */ jsx("path", { d: "M 0,4 l 4,-4 M -1,1 l 2,-2 M 3,5 l 2,-2", stroke: "#6b7280", strokeWidth: "0.5", opacity: "0.3" })
@@ -17944,6 +17976,187 @@ var SOPComplianceChart = ({
     renderLegend()
   ] });
 };
+var GaugeChart = ({
+  value,
+  min,
+  max,
+  target,
+  label,
+  unit = "",
+  thresholds,
+  className = ""
+}) => {
+  const normalizedValue = (value - min) / (max - min) * 100;
+  const clampedValue = Math.max(0, Math.min(100, normalizedValue));
+  const data = [
+    { name: "value", value: clampedValue },
+    { name: "empty", value: 100 - clampedValue }
+  ];
+  const getColor = () => {
+    if (thresholds && thresholds.length > 0) {
+      const sortedThresholds = [...thresholds].sort((a, b) => a.value - b.value);
+      for (let i = sortedThresholds.length - 1; i >= 0; i--) {
+        if (value >= sortedThresholds[i].value) {
+          return sortedThresholds[i].color;
+        }
+      }
+      return sortedThresholds[0].color;
+    }
+    if (clampedValue < 33) return "#ef4444";
+    if (clampedValue < 66) return "#f59e0b";
+    return "#10b981";
+  };
+  const gaugeColor = getColor();
+  const targetAngle = target !== void 0 ? 180 - (target - min) / (max - min) * 180 : null;
+  return /* @__PURE__ */ jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", children: [
+    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsxs(
+      Pie,
+      {
+        data,
+        cx: "50%",
+        cy: "50%",
+        startAngle: 180,
+        endAngle: 0,
+        innerRadius: "65%",
+        outerRadius: "85%",
+        paddingAngle: 0,
+        dataKey: "value",
+        animationBegin: 0,
+        animationDuration: 1e3,
+        animationEasing: "ease-out",
+        children: [
+          /* @__PURE__ */ jsx(Cell, { fill: gaugeColor }),
+          /* @__PURE__ */ jsx(Cell, { fill: "#f3f4f6" })
+        ]
+      }
+    ) }) }),
+    targetAngle !== null && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-1/2 left-1/2 w-1 h-[42%] bg-gray-800 origin-bottom",
+        style: {
+          transform: `translate(-50%, -100%) rotate(${targetAngle}deg)`,
+          transition: "transform 0.3s ease-out"
+        },
+        children: /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -left-1.5 w-3 h-3 bg-gray-800 rounded-full" })
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-3xl font-bold text-gray-800", children: [
+        value.toFixed(unit === "%" ? 1 : 0),
+        unit
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600 mt-1 font-medium", children: label }),
+      target !== void 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
+        "Target: ",
+        target,
+        unit
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-[15%] left-[15%] text-xs text-gray-500", children: [
+      min,
+      unit
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-[15%] right-[15%] text-xs text-gray-500", children: [
+      max,
+      unit
+    ] })
+  ] }) });
+};
+var DEFAULT_COLORS = [
+  "#3b82f6",
+  // blue-500
+  "#10b981",
+  // green-500
+  "#f59e0b",
+  // amber-500
+  "#ef4444",
+  // red-500
+  "#8b5cf6",
+  // violet-500
+  "#06b6d4",
+  // cyan-500
+  "#f97316",
+  // orange-500
+  "#6366f1"
+  // indigo-500
+];
+var PieChart4 = ({
+  data,
+  className = "",
+  showPercentages = false,
+  colors = DEFAULT_COLORS
+}) => {
+  const total = data.reduce((sum, entry) => sum + entry.value, 0);
+  const dataWithPercentage = data.map((entry) => ({
+    ...entry,
+    percentage: (entry.value / total * 100).toFixed(1)
+  }));
+  const renderCustomLabel = (props) => {
+    if (!showPercentages) return null;
+    const { cx: cx2, cy, midAngle, innerRadius, outerRadius, percentage } = props;
+    const RADIAN = Math.PI / 180;
+    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+    const x = cx2 + radius * Math.cos(-midAngle * RADIAN);
+    const y = cy + radius * Math.sin(-midAngle * RADIAN);
+    return /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x,
+        y,
+        fill: "white",
+        textAnchor: x > cx2 ? "start" : "end",
+        dominantBaseline: "central",
+        className: "text-xs font-medium",
+        children: [
+          percentage,
+          "%"
+        ]
+      }
+    );
+  };
+  const CustomTooltip = ({ active, payload }) => {
+    if (active && payload && payload.length) {
+      const data2 = payload[0];
+      return /* @__PURE__ */ jsxs("div", { className: "bg-white px-3 py-2 shadow-lg rounded-lg border border-gray-200", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900", children: data2.name }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
+          "Value: ",
+          data2.value,
+          showPercentages && ` (${data2.payload.percentage}%)`
+        ] })
+      ] });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx("div", { className: `w-full h-full ${className}`, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data: dataWithPercentage,
+        cx: "50%",
+        cy: "50%",
+        labelLine: false,
+        label: showPercentages ? renderCustomLabel : void 0,
+        outerRadius: "80%",
+        fill: "#8884d8",
+        dataKey: "value",
+        animationBegin: 0,
+        animationDuration: 800,
+        children: dataWithPercentage.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
+      }
+    ),
+    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}) }),
+    /* @__PURE__ */ jsx(
+      Legend,
+      {
+        verticalAlign: "bottom",
+        height: 36,
+        formatter: (value) => /* @__PURE__ */ jsx("span", { className: "text-sm", children: value })
+      }
+    )
+  ] }) }) });
+};
 var TrendIcon = ({ trend }) => {
   if (trend === "up") {
     return /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4 text-green-500" });
@@ -19746,6 +19959,32 @@ var WorkspaceCard = ({
     }
   );
 };
+var styles = `
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  .calendar-container {
+    will-change: transform, opacity;
+    animation: fadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+  
+  .calendar-wrapper:not(.animation-complete) * {
+    transition: none !important;
+  }
+  
+  .calendar-wrapper:not(.animation-complete) .group:hover {
+    opacity: 1 !important;
+    transform: scale(1) !important;
+  }
+`;
 var WEEKDAYS2 = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var getTimeInZoneAsDate = (timezone) => {
   const time2 = getCurrentTimeInZone(timezone);
@@ -19764,20 +20003,20 @@ var WorkspaceHistoryCalendar = ({
 }) => {
   const { dateTimeConfig } = useDashboardConfig();
   const configuredTimezone = dateTimeConfig?.defaultTimezone || "Asia/Kolkata";
+  const [animationComplete, setAnimationComplete] = useState(false);
+  useEffect(() => {
+    setAnimationComplete(false);
+    const timer = setTimeout(() => {
+      setAnimationComplete(true);
+    }, 600);
+    return () => clearTimeout(timer);
+  }, [month, year]);
   const calendarData = useMemo(() => {
     const startOfMonth = toZonedTime(new Date(year, month, 1), configuredTimezone);
     const endOfMonth = toZonedTime(new Date(year, month + 1, 0), configuredTimezone);
     const totalDays = endOfMonth.getDate();
     let startOffset = startOfMonth.getDay() - 1;
     if (startOffset === -1) startOffset = 6;
-    console.log("Calendar generation for:", {
-      month: month + 1,
-      year,
-      startOffset,
-      totalDays,
-      configuredTimezone
-    });
-    console.log("Data points received:", data);
     const calendar = Array(startOffset).fill(null);
     for (let day = 1; day <= totalDays; day++) {
       const currentDate = new Date(year, month, day);
@@ -19791,15 +20030,6 @@ var WorkspaceHistoryCalendar = ({
         const dataDate = new Date(d.date);
         const dataDateStr = dataDate.toISOString().split("T")[0];
         const matches = dataDateStr === dateToMatch;
-        if (day <= 3 && matches) {
-          console.log(`Found data match for day ${day}:`, {
-            dataDate: dataDate.toISOString(),
-            currentDate: currentTimezoneDate.toISOString(),
-            dataDateStr,
-            dateToMatch,
-            data: d
-          });
-        }
         return matches;
       });
       if (matchingData.length > 0) {
@@ -19810,32 +20040,10 @@ var WorkspaceHistoryCalendar = ({
           // Use the timezone-adjusted date for display
         });
       } else {
-        calendar.push({
-          date: currentTimezoneDate,
-          dayShift: {
-            efficiency: 0,
-            output: 0,
-            cycleTime: 0,
-            pph: 0,
-            pphThreshold: 0,
-            idealOutput: 0,
-            rank: 0,
-            idleTime: 0
-          },
-          nightShift: {
-            efficiency: 0,
-            output: 0,
-            cycleTime: 0,
-            pph: 0,
-            pphThreshold: 0,
-            idealOutput: 0,
-            rank: 0,
-            idleTime: 0
-          }
-        });
+        calendar.push(null);
       }
     }
-    return calendar;
+    return { calendar, startOffset };
   }, [data, month, year, configuredTimezone]);
   const monthlyMetrics = useMemo(() => {
     const validDays = data.filter((day) => {
@@ -19852,15 +20060,17 @@ var WorkspaceHistoryCalendar = ({
         return [];
       }
       return [day.dayShift, day.nightShift];
-    }).filter((shift) => shift.efficiency > 0);
+    });
     if (validShifts.length === 0) return null;
     const badShiftsCount = validShifts.filter((shift) => shift.efficiency < 75).length;
+    const totalIdleTime = validShifts.reduce((sum, shift) => sum + shift.idleTime, 0);
+    const avgIdleTime = Math.round(totalIdleTime / validShifts.length);
     return {
       avgEfficiency: Math.round(validShifts.reduce((sum, shift) => sum + shift.efficiency, 0) / validShifts.length),
       avgCycleTime: Math.round(validShifts.reduce((sum, shift) => sum + shift.cycleTime, 0) / validShifts.length),
+      avgIdleTime,
       badDaysCount: badShiftsCount,
-      totalDays: validShifts.length,
-      avgIdleTime: Math.round(validShifts.reduce((sum, shift) => sum + (shift.idleTime || 0), 0) / validShifts.length)
+      totalDays: validShifts.length
     };
   }, [data, month, year, configuredTimezone]);
   const handleDayClick = useCallback((day, shift) => {
@@ -19908,7 +20118,6 @@ var WorkspaceHistoryCalendar = ({
     compareDate.setHours(0, 0, 0, 0);
     if (compareDate.getDay() === 0) return "bg-gray-300";
     if (compareDate > istNow) return "bg-gray-200";
-    if (efficiency < 10) return "bg-gray-300";
     if (efficiency >= 80) return "bg-[#00AB45]/90";
     if (efficiency >= 70) return "bg-[#FFB020]/90";
     return "bg-[#E34329]/90";
@@ -19947,38 +20156,55 @@ var WorkspaceHistoryCalendar = ({
       ] })
     ] }) });
   };
-  const renderDayCell = useCallback((day) => {
-    if (!day) return /* @__PURE__ */ jsx("div", { className: "h-full border border-gray-100 rounded-lg bg-gray-50 transition-all duration-200 ease-in-out" });
+  const renderDayCell = useCallback((day, dayNumber, index) => {
+    if (dayNumber === null) {
+      return /* @__PURE__ */ jsx("div", { className: "h-full" });
+    }
+    const cellDate = toZonedTime(new Date(year, month, dayNumber), configuredTimezone);
+    const isToday = isCurrentDate(cellDate);
+    const isFuture = isFutureDate(cellDate);
+    const isSunday = cellDate.getDay() === 0;
+    if (!day) {
+      let bgColor = "bg-gray-100";
+      let textColor = "text-gray-400";
+      if (isSunday) {
+        bgColor = "bg-gray-200";
+        textColor = "text-gray-500";
+      }
+      if (isFuture) {
+        bgColor = "bg-gray-50";
+        textColor = "text-gray-300";
+      }
+      return /* @__PURE__ */ jsx("div", { className: `h-full border border-gray-200 rounded-lg ${bgColor} ${animationComplete ? "transition-all duration-300 ease-in-out" : ""} cursor-not-allowed opacity-60`, children: /* @__PURE__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ jsx("div", { className: `text-base font-medium ${textColor} ${isToday ? "text-blue-500" : ""}`, children: dayNumber }) }) });
+    }
     const shiftData = selectedShift === "day" ? day.dayShift : day.nightShift;
-    const isToday = isCurrentDate(day.date);
-    const isFuture = isFutureDate(day.date);
-    const isInactive = shiftData.efficiency < 10;
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: `group h-full transition-all duration-200 ease-in-out ${!isFuture && !isInactive ? "cursor-pointer hover:opacity-90" : "cursor-not-allowed"}`,
-        onClick: () => !isFuture && !isInactive && handleDayClick(day, selectedShift),
+        className: `group h-full ${animationComplete ? "transition-all duration-300 ease-in-out" : ""} ${!isFuture && animationComplete ? "cursor-pointer hover:opacity-90 hover:scale-105" : "cursor-not-allowed"}`,
+        onClick: () => !isFuture && handleDayClick(day, selectedShift),
         children: /* @__PURE__ */ jsxs("div", { className: `
           ${getPerformanceColor(shiftData.efficiency, day.date)} 
-          rounded-lg h-full p-2 relative transition-all duration-200 ease-in-out
+          rounded-lg h-full p-2 relative ${animationComplete ? "transition-all duration-300 ease-in-out" : ""} shadow-sm
           ${isToday ? "ring-2 ring-blue-500 ring-offset-2 shadow-md" : ""}
         `, children: [
           /* @__PURE__ */ jsx("div", { className: `
-            text-base font-medium text-white flex items-center transition-all duration-200 ease-in-out
+            text-base font-medium text-white flex items-center ${animationComplete ? "transition-all duration-300 ease-in-out" : ""}
             ${isToday ? "bg-blue-500 rounded-full w-7 h-7 justify-center" : ""}
           `, children: day.date.getDate() }),
-          !isFuture && !isInactive && renderStats(shiftData, day.date)
+          !isFuture && animationComplete && renderStats(shiftData, day.date)
         ] })
       }
     );
-  }, [selectedShift, isCurrentDate, isFutureDate, getPerformanceColor, handleDayClick]);
-  return /* @__PURE__ */ jsxs("div", { className: `space-y-6 ${className || ""}`, children: [
+  }, [selectedShift, isCurrentDate, isFutureDate, getPerformanceColor, handleDayClick, year, month, configuredTimezone, animationComplete]);
+  return /* @__PURE__ */ jsxs("div", { className: `calendar-wrapper space-y-6 ${className || ""} ${animationComplete ? "animation-complete" : ""}`, children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: styles } }),
     /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 border border-gray-200 rounded-lg p-1 bg-gray-50", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           onClick: () => handleShiftChange("day"),
-          className: `px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${selectedShift === "day" ? "bg-white text-blue-600 shadow-sm ring-1 ring-gray-200" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"}`,
+          className: `px-4 py-2 text-sm font-medium rounded-md ${animationComplete ? "transition-all duration-200" : ""} ${selectedShift === "day" ? "bg-white text-blue-600 shadow-sm ring-1 ring-gray-200" : `text-gray-600 ${animationComplete ? "hover:text-gray-900 hover:bg-gray-100" : ""}`}`,
           children: "Day Shift"
         }
       ),
@@ -19986,23 +20212,27 @@ var WorkspaceHistoryCalendar = ({
         "button",
         {
           onClick: () => handleShiftChange("night"),
-          className: `px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${selectedShift === "night" ? "bg-white text-blue-600 shadow-sm ring-1 ring-gray-200" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"}`,
+          className: `px-4 py-2 text-sm font-medium rounded-md ${animationComplete ? "transition-all duration-200" : ""} ${selectedShift === "night" ? "bg-white text-blue-600 shadow-sm ring-1 ring-gray-200" : `text-gray-600 ${animationComplete ? "hover:text-gray-900 hover:bg-gray-100" : ""}`}`,
           children: "Night Shift"
         }
       )
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
-      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
+      /* @__PURE__ */ jsxs("div", { className: "calendar-container bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900 text-lg", children: selectedShift === "day" ? "Day Shifts" : "Night Shifts" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Calendar view of daily performance" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-6", children: [
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: WEEKDAYS2.map((day) => /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-600 text-center", children: day }, day)) }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: calendarData.map((day, index) => /* @__PURE__ */ jsx("div", { className: "aspect-square relative transition-all duration-200 ease-in-out", children: renderDayCell(day) }, index)) })
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: calendarData.calendar.map((day, index) => {
+            const startOffset = calendarData.startOffset;
+            const dayNumber = index >= startOffset ? index - startOffset + 1 : null;
+            return /* @__PURE__ */ jsx("div", { className: "aspect-square relative transition-all duration-200 ease-in-out", children: renderDayCell(day, dayNumber && dayNumber <= new Date(year, month + 1, 0).getDate() ? dayNumber : null, index) }, index);
+          }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
+      /* @__PURE__ */ jsxs("div", { className: "calendar-container bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
         /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900 text-lg", children: "Monthly Summary" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Overview of monthly performance metrics" })
@@ -22525,7 +22755,7 @@ var getWorkspaceStyles = (position, isPlaceholder = false) => {
           ${additionalStyles}
           ${isPlaceholder ? "cursor-default" : ""}`;
 };
-var Legend5 = () => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3 bg-white/95 rounded-lg shadow-sm px-2 sm:px-4 py-1 sm:py-1.5 border border-gray-200/60 backdrop-blur-sm text-xs sm:text-sm", children: [
+var Legend6 = () => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-3 bg-white/95 rounded-lg shadow-sm px-2 sm:px-4 py-1 sm:py-1.5 border border-gray-200/60 backdrop-blur-sm text-xs sm:text-sm", children: [
   /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-700 hidden sm:block", children: "Efficiency:" }),
   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
@@ -22573,7 +22803,7 @@ var WorkspaceGridItem = React14__default.memo(({
   }, [data.efficiency, isInactive, position.size, position.orientation]);
   const { arrow, color: arrowColor } = useMemo(() => getTrendArrowAndColor2(data.trend_score), [data.trend_score]);
   const workspaceNumber = useMemo(() => getWorkspaceNumber(data.workspace_name), [data.workspace_name]);
-  const styles = useMemo(() => getWorkspaceStyles(position, isInactive), [position, isInactive]);
+  const styles2 = useMemo(() => getWorkspaceStyles(position, isInactive), [position, isInactive]);
   const arrowPosition = useMemo(() => getArrowPositionClass(position), [position]);
   const handleClick = useCallback((e) => {
     e.preventDefault();
@@ -22624,7 +22854,7 @@ var WorkspaceGridItem = React14__default.memo(({
           "button",
           {
             onClick: handleClick,
-            className: `${styles} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg`,
+            className: `${styles2} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg`,
             "aria-label": isInactive ? `Inactive workspace ${workspaceNumber}` : `View details for workspace ${workspaceNumber}`,
             title: isInactive ? `Inactive: ${getWorkspaceDisplayName(data.workspace_name)}` : getWorkspaceDisplayName(data.workspace_name),
             children: /* @__PURE__ */ jsx("div", { className: `font-semibold tracking-wide text-[min(4vw,2rem)] uppercase ${isInactive ? "text-gray-400" : "text-white"} drop-shadow-sm`, children: workspaceNumber })
@@ -22663,8 +22893,8 @@ var WorkspaceGrid = React14__default.memo(({
   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: "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(Legend6, {}) }) }),
+      /* @__PURE__ */ jsx("div", { className: "sm:hidden mt-1", children: /* @__PURE__ */ jsx(Legend6, {}) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "absolute top-10 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsx(
       VideoGridViewComponent,
@@ -23267,6 +23497,78 @@ var WorkspaceMonthlyDataFetcher = ({
   }, [workspaceId, selectedMonth, selectedYear, supabase, onDataLoaded, onLoadingChange]);
   return null;
 };
+var WorkspaceDisplayNameExample = () => {
+  const { displayNames, loading, error } = useWorkspaceDisplayNames();
+  const { displayName: singleWorkspaceName, loading: singleLoading } = useWorkspaceDisplayName("WS01");
+  const { displayNames: displayNamesMap, loading: mapLoading } = useWorkspaceDisplayNamesMap(["WS01", "WS02", "WS03"]);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "p-4", children: "Loading workspace display names..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "p-4 text-red-600", children: [
+      "Error loading workspace display names: ",
+      error.message
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "p-6 max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold mb-6", children: "Workspace Display Names Examples" }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "1. All Workspace Display Names" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: Object.entries(displayNames).map(([workspaceId, displayName]) => /* @__PURE__ */ jsxs("div", { className: "p-3 border rounded-lg", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium", children: workspaceId }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: displayName })
+      ] }, workspaceId)) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+        /* @__PURE__ */ jsx("strong", { children: "Using utility function:" }),
+        ` getWorkspaceDisplayName('WS01') = "`,
+        getWorkspaceDisplayName("WS01"),
+        '"'
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "2. Single Workspace Display Name" }),
+      /* @__PURE__ */ jsx("div", { className: "p-3 border rounded-lg", children: singleLoading ? /* @__PURE__ */ jsx("div", { children: "Loading WS01..." }) : /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "WS01:" }),
+        " ",
+        singleWorkspaceName
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: "3. Specific Workspaces Map" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: mapLoading ? /* @__PURE__ */ jsx("div", { children: "Loading specific workspaces..." }) : Object.entries(displayNamesMap).map(([workspaceId, displayName]) => /* @__PURE__ */ jsxs("div", { className: "p-3 border rounded-lg", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium", children: workspaceId }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: displayName })
+      ] }, workspaceId)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-8 p-4 bg-blue-50 rounded-lg", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Migration Guide" }),
+      /* @__PURE__ */ jsxs("div", { className: "text-sm space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: "Before (hardcoded):" }) }),
+        /* @__PURE__ */ jsxs("code", { className: "block p-2 bg-gray-100 rounded", children: [
+          "import ",
+          `{getWorkspaceDisplayName}`,
+          " from '@optifye/dashboard-core';",
+          /* @__PURE__ */ jsx("br", {}),
+          "const name = getWorkspaceDisplayName('WS01'); // Synchronous, hardcoded"
+        ] }),
+        /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: "After (from Supabase):" }) }),
+        /* @__PURE__ */ jsxs("code", { className: "block p-2 bg-gray-100 rounded", children: [
+          "import ",
+          `{useWorkspaceDisplayName}`,
+          " from '@optifye/dashboard-core';",
+          /* @__PURE__ */ jsx("br", {}),
+          "const ",
+          `{displayName, loading}`,
+          " = useWorkspaceDisplayName('WS01'); // Async, from database"
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-blue-700", children: [
+          /* @__PURE__ */ jsx("strong", { children: "Note:" }),
+          " The old synchronous functions are still available as fallbacks and for backward compatibility."
+        ] })
+      ] })
+    ] })
+  ] });
+};
 var Breadcrumbs = ({ items }) => {
   const navigation = useNavigation();
   if (!items || items.length === 0) return null;
@@ -24712,6 +25014,234 @@ var AIAgentView = () => {
     });
   }
   const renderAssistantContent = (content) => {
+    const parseChartPatterns = (text) => {
+      const chartElements = [];
+      let lastIndex = 0;
+      const chartRegex = /\[\s*(?:Calling\s+|CALL\s+)?(create_[a-z_]+)\s*\(([\s\S]*?)\)\s*\]/g;
+      let match;
+      const processedIndices = /* @__PURE__ */ new Set();
+      while ((match = chartRegex.exec(text)) !== null) {
+        const startIndex = match.index;
+        const endIndex = startIndex + match[0].length;
+        if (!processedIndices.has(startIndex)) {
+          processedIndices.add(startIndex);
+          if (startIndex > lastIndex) {
+            const beforeText = text.substring(lastIndex, startIndex);
+            chartElements.push(
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  dangerouslySetInnerHTML: { __html: formatMessage(beforeText) }
+                },
+                `text-${lastIndex}`
+              )
+            );
+          }
+          const chartType = match[1];
+          const argsString = match[2];
+          try {
+            const args = parseChartArguments(argsString);
+            const chartElement = renderChart(chartType, args, startIndex);
+            if (chartElement) {
+              chartElements.push(chartElement);
+            }
+          } catch (error) {
+            console.error(`Failed to parse chart ${chartType}:`, error);
+            chartElements.push(
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "text-red-500 text-sm",
+                  children: [
+                    "Error rendering chart: ",
+                    match[0]
+                  ]
+                },
+                `error-${startIndex}`
+              )
+            );
+          }
+          lastIndex = endIndex;
+        }
+      }
+      if (lastIndex < text.length) {
+        const remainingText = text.substring(lastIndex);
+        chartElements.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              dangerouslySetInnerHTML: { __html: formatMessage(remainingText) }
+            },
+            `text-${lastIndex}`
+          )
+        );
+      }
+      if (chartElements.length === 1 && lastIndex === 0) {
+        return null;
+      }
+      return chartElements;
+    };
+    const parseChartArguments = (argsString) => {
+      const args = {};
+      const jsonParamRegex = /(\w+)\s*=\s*(\[[\s\S]*?\](?=\s*(?:,|\s*\)|\s*$))|\{[\s\S]*?\}(?=\s*(?:,|\s*\)|\s*$)))/g;
+      let jsonMatch;
+      while ((jsonMatch = jsonParamRegex.exec(argsString)) !== null) {
+        const paramName = jsonMatch[1];
+        const jsonValue = jsonMatch[2];
+        try {
+          args[paramName] = JSON.parse(jsonValue);
+          argsString = argsString.replace(jsonMatch[0], "");
+        } catch (e) {
+          console.error(`Failed to parse ${paramName} JSON:`, e);
+        }
+      }
+      const argRegex = /(\w+)\s*=\s*("([^"]*)"|'([^']*)'|([^,\s\)]+))/g;
+      let argMatch;
+      while ((argMatch = argRegex.exec(argsString)) !== null) {
+        const key = argMatch[1];
+        const value = argMatch[3] || argMatch[4] || argMatch[5];
+        if (key === "data") continue;
+        if (value === "true" || value === "True") {
+          args[key] = true;
+        } else if (value === "false" || value === "False") {
+          args[key] = false;
+        } else if (value === "null" || value === "None") {
+          args[key] = null;
+        } else if (!isNaN(Number(value)) && value !== "") {
+          args[key] = Number(value);
+        } else {
+          args[key] = value;
+        }
+      }
+      return args;
+    };
+    const renderChart = (chartType, args, key) => {
+      switch (chartType) {
+        case "create_gauge_chart":
+          return /* @__PURE__ */ jsx("div", { className: "my-6 h-64 w-full flex justify-center", children: /* @__PURE__ */ jsx(
+            GaugeChart,
+            {
+              value: args.value || 0,
+              min: args.min_value || 0,
+              max: args.max_value || 100,
+              target: args.target,
+              label: args.title || "",
+              unit: args.unit || "",
+              thresholds: args.thresholds,
+              className: "w-full max-w-sm"
+            }
+          ) }, `gauge-${key}`);
+        case "create_bar_chart":
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Bar chart missing required parameters");
+            return null;
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", style: { maxWidth: args.max_width || "100%" }, children: [
+            /* @__PURE__ */ jsx(
+              BarChart,
+              {
+                data: args.data,
+                bars: [{
+                  dataKey: args.y_field,
+                  fill: args.color || "#3b82f6",
+                  labelList: args.show_values
+                }],
+                xAxisDataKey: args.x_field,
+                className: "h-64",
+                showLegend: false
+              }
+            ),
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `bar-${key}`);
+        case "create_line_chart":
+          if (!args.data || !args.x_field || !args.y_field) {
+            console.error("Line chart missing required parameters");
+            return null;
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full", style: {
+            height: args.height || 256,
+            width: args.width || "100%"
+          }, children: [
+            /* @__PURE__ */ jsx(
+              LineChart,
+              {
+                data: args.data,
+                lines: [{
+                  dataKey: args.y_field,
+                  stroke: "#3b82f6",
+                  strokeWidth: 2
+                }],
+                xAxisDataKey: args.x_field,
+                className: "h-full",
+                showLegend: false
+              }
+            ),
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
+          ] }, `line-${key}`);
+        case "create_pie_chart":
+          if (!args.data || !args.label_field || !args.value_field) {
+            console.error("Pie chart missing required parameters");
+            return null;
+          }
+          const pieData = args.data.map((item) => ({
+            name: item[args.label_field],
+            value: item[args.value_field]
+          }));
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full flex flex-col items-center", children: [
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
+            /* @__PURE__ */ jsx("div", { className: "h-64 w-full max-w-md", children: /* @__PURE__ */ jsx(
+              PieChart4,
+              {
+                data: pieData,
+                showPercentages: args.show_percentages || false
+              }
+            ) })
+          ] }, `pie-${key}`);
+        case "create_comparison_table":
+          if (!args.data) {
+            console.error("Comparison table missing required data");
+            return null;
+          }
+          const columns = args.columns || Object.keys(args.data[0] || {});
+          let sortedData = [...args.data];
+          if (args.sort_by && columns.includes(args.sort_by)) {
+            sortedData.sort((a, b) => {
+              const aVal = a[args.sort_by];
+              const bVal = b[args.sort_by];
+              const comparison = aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
+              return args.sort_descending === false ? comparison : -comparison;
+            });
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "my-6 w-full overflow-x-auto", children: [
+            args.title && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
+            /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+              /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  className: `px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${col === args.highlight_column ? "bg-blue-50" : ""}`,
+                  children: col
+                },
+                col
+              )) }) }),
+              /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: `px-4 py-2 whitespace-nowrap text-sm ${col === args.highlight_column ? "font-medium text-blue-600 bg-blue-50" : "text-gray-900"}`,
+                  children: row[col]
+                },
+                col
+              )) }, rowIdx)) })
+            ] })
+          ] }, `table-${key}`);
+        default:
+          console.warn(`Unknown chart type: ${chartType}`);
+          return null;
+      }
+    };
+    const chartContent = parseChartPatterns(content);
+    if (chartContent) {
+      return /* @__PURE__ */ jsx("div", { className: "formatted-content", children: chartContent });
+    }
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -30135,6 +30665,11 @@ var WorkspaceDetailView = ({
     return getOperationalDate();
   }, [isHistoricView, date]);
   const handleMonthlyDataLoaded = useCallback((data) => {
+    console.log("[handleMonthlyDataLoaded] Received data:", {
+      dataLength: data?.length,
+      isArray: Array.isArray(data),
+      sample: data?.[0]
+    });
     if (!data || !Array.isArray(data)) {
       console.error("Invalid monthly metrics data received:", data);
       setMonthlyData([]);
@@ -30152,22 +30687,35 @@ var WorkspaceDetailView = ({
       if (!dayEntry) {
         dayEntry = {
           date: dateObj,
-          dayShift: { efficiency: 0, output: 0, cycleTime: 0, pph: 0, pphThreshold: 0, idealOutput: 0, rank: 0, idleTime: 0 },
-          nightShift: { efficiency: 0, output: 0, cycleTime: 0, pph: 0, pphThreshold: 0, idealOutput: 0, rank: 0, idleTime: 0 }
+          dayShift: null,
+          // Start with null instead of zeros
+          nightShift: null
+          // Start with null instead of zeros
         };
         dayDataMap.set(dateKey, dayEntry);
       }
-      const shiftTarget = metric.shift_id === 0 ? dayEntry.dayShift : dayEntry.nightShift;
-      shiftTarget.efficiency = metric.avg_efficiency || 0;
-      shiftTarget.output = metric.total_output || 0;
-      shiftTarget.cycleTime = metric.avg_cycle_time || 0;
-      shiftTarget.pph = metric.avg_pph || 0;
-      shiftTarget.pphThreshold = metric.pph_threshold || 0;
-      shiftTarget.idealOutput = metric.ideal_output || 0;
-      shiftTarget.rank = metric.workspace_rank || 0;
-      shiftTarget.idleTime = metric.idle_time || 0;
+      const shiftData = {
+        efficiency: metric.avg_efficiency || 0,
+        output: metric.total_output || 0,
+        cycleTime: metric.avg_cycle_time || 0,
+        pph: metric.avg_pph || 0,
+        pphThreshold: metric.pph_threshold || 0,
+        idealOutput: metric.ideal_output || 0,
+        rank: metric.workspace_rank || 0,
+        idleTime: metric.idle_time || 0
+      };
+      if (metric.shift_id === 0) {
+        dayEntry.dayShift = shiftData;
+      } else {
+        dayEntry.nightShift = shiftData;
+      }
     });
-    const processedData = Array.from(dayDataMap.values());
+    const processedData = Array.from(dayDataMap.values()).filter((entry) => entry.dayShift !== null || entry.nightShift !== null).map((entry) => ({
+      date: entry.date,
+      // If a shift is null (no data), provide zeros for compatibility
+      dayShift: entry.dayShift || { efficiency: 0, output: 0, cycleTime: 0, pph: 0, pphThreshold: 0, idealOutput: 0, rank: 0, idleTime: 0 },
+      nightShift: entry.nightShift || { efficiency: 0, output: 0, cycleTime: 0, pph: 0, pphThreshold: 0, idealOutput: 0, rank: 0, idleTime: 0 }
+    }));
     console.log(`[handleMonthlyDataLoaded] Transformed data for calendar:`, {
       count: processedData.length,
       sample: processedData.slice(0, 1)
@@ -30627,7 +31175,7 @@ var WorkspaceDetailView = ({
                 }
               )
             ] }),
-            monthlyDataLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-5rem)]", children: /* @__PURE__ */ jsx("div", { className: "text-xl text-gray-600", children: "Loading monthly data..." }) }) : /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(
               WorkspaceHistoryCalendar,
               {
                 data: monthlyData,
@@ -30906,4 +31454,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_VIDEO_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, useHlsStreamWithCropping, useHookOverride, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, useRealtimeLineMetrics, useRegistry, useShiftConfig, useShifts, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useVideoConfig, 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_VIDEO_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, GaugeChart, 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, Legend6 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, PieChart4 as PieChart, 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, WorkspaceDisplayNameExample, 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, useHlsStreamWithCropping, useHookOverride, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, useRealtimeLineMetrics, useRegistry, useShiftConfig, useShifts, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPreloader, whatsappService, withAuth, withRegistry, workspaceService };