@optifye/dashboard-core 4.2.8 → 4.3.3

package/dist/index.js

@@ -1020,7 +1020,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) => ({
@@ -1033,8 +1033,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) {
@@ -2110,28 +2109,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]);
@@ -2166,7 +2179,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
                 });
               }
             }
@@ -2204,7 +2218,8 @@ var AuthProvider = ({ children }) => {
               identifyCoreUser(userDetails.id, {
                 email: userDetails.email,
                 name: userDetails.email,
-                role: userDetails.role
+                role: userDetails.role,
+                role_level: userDetails.role_level
               });
             }
           }
@@ -14731,16 +14746,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) {
@@ -14757,35 +14772,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;
@@ -16892,23 +16907,35 @@ var HourlyOutputChart = ({
   const [animatedData, setAnimatedData] = React14__namespace.default.useState(Array(SHIFT_DURATION).fill(0));
   const prevDataRef = React14__namespace.default.useRef(Array(SHIFT_DURATION).fill(0));
   const animationFrameRef = React14__namespace.default.useRef(null);
-  const [shouldAnimateIdle, setShouldAnimateIdle] = React14__namespace.default.useState(false);
+  const [idleBarState, setIdleBarState] = React14__namespace.default.useState({
+    visible: showIdleTime,
+    key: 0,
+    shouldAnimate: false
+  });
   const prevShowIdleTimeRef = React14__namespace.default.useRef(showIdleTime);
-  const animationTimeoutRef = React14__namespace.default.useRef(null);
+  const stateUpdateTimeoutRef = React14__namespace.default.useRef(null);
   React14__namespace.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]);
@@ -17001,6 +17028,55 @@ var HourlyOutputChart = ({
       };
     });
   }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, formatHour, formatTimeRange]);
+  const IdleBar = React14__namespace.default.useMemo(() => {
+    if (!idleBarState.visible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.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__ */ jsxRuntime.jsx(
+          recharts.LabelList,
+          {
+            dataKey: "idleMinutes",
+            position: "top",
+            content: (props) => {
+              const { x, y, width, value } = props;
+              if (!value || value === 0) return null;
+              return /* @__PURE__ */ jsxRuntime.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);
@@ -17258,51 +17334,7 @@ var HourlyOutputChart = ({
               ]
             }
           ),
-          showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
-            recharts.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__ */ jsxRuntime.jsx(
-                recharts.LabelList,
-                {
-                  dataKey: "idleMinutes",
-                  position: "top",
-                  content: (props) => {
-                    const { x, y, width, value } = props;
-                    if (!value || value === 0) return null;
-                    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("pattern", { id: "idlePattern", patternUnits: "userSpaceOnUse", width: "4", height: "4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "4", height: "4", fill: "#9ca3af", opacity: "0.2" }),
             /* @__PURE__ */ jsxRuntime.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" })
@@ -17973,6 +18005,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__ */ jsxRuntime.jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.PieChart, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      recharts.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__ */ jsxRuntime.jsx(recharts.Cell, { fill: gaugeColor }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: "#f3f4f6" })
+        ]
+      }
+    ) }) }),
+    targetAngle !== null && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute -top-1 -left-1.5 w-3 h-3 bg-gray-800 rounded-full" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-3xl font-bold text-gray-800", children: [
+        value.toFixed(unit === "%" ? 1 : 0),
+        unit
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600 mt-1 font-medium", children: label }),
+      target !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
+        "Target: ",
+        target,
+        unit
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-[15%] left-[15%] text-xs text-gray-500", children: [
+      min,
+      unit
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "bg-white px-3 py-2 shadow-lg rounded-lg border border-gray-200", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900", children: data2.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
+          "Value: ",
+          data2.value,
+          showPercentages && ` (${data2.payload.percentage}%)`
+        ] })
+      ] });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.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__ */ jsxRuntime.jsx(recharts.Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Legend,
+      {
+        verticalAlign: "bottom",
+        height: 36,
+        formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+      }
+    )
+  ] }) }) });
+};
 var TrendIcon = ({ trend }) => {
   if (trend === "up") {
     return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-4 w-4 text-green-500" });
@@ -19775,6 +19988,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);
@@ -19793,20 +20032,20 @@ var WorkspaceHistoryCalendar = ({
 }) => {
   const { dateTimeConfig } = useDashboardConfig();
   const configuredTimezone = dateTimeConfig?.defaultTimezone || "Asia/Kolkata";
+  const [animationComplete, setAnimationComplete] = React14.useState(false);
+  React14.useEffect(() => {
+    setAnimationComplete(false);
+    const timer = setTimeout(() => {
+      setAnimationComplete(true);
+    }, 600);
+    return () => clearTimeout(timer);
+  }, [month, year]);
   const calendarData = React14.useMemo(() => {
     const startOfMonth = dateFnsTz.toZonedTime(new Date(year, month, 1), configuredTimezone);
     const endOfMonth = dateFnsTz.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);
@@ -19820,15 +20059,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) {
@@ -19839,32 +20069,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 = React14.useMemo(() => {
     const validDays = data.filter((day) => {
@@ -19881,15 +20089,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 = React14.useCallback((day, shift) => {
@@ -19937,7 +20147,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";
@@ -19976,38 +20185,55 @@ var WorkspaceHistoryCalendar = ({
       ] })
     ] }) });
   };
-  const renderDayCell = React14.useCallback((day) => {
-    if (!day) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full border border-gray-100 rounded-lg bg-gray-50 transition-all duration-200 ease-in-out" });
+  const renderDayCell = React14.useCallback((day, dayNumber, index) => {
+    if (dayNumber === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full" });
+    }
+    const cellDate = dateFnsTz.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: `space-y-6 ${className || ""}`, children: [
+  }, [selectedShift, isCurrentDate, isFutureDate, getPerformanceColor, handleDayClick, year, month, configuredTimezone, animationComplete]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `calendar-wrapper space-y-6 ${className || ""} ${animationComplete ? "animation-complete" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: styles } }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 border border-gray-200 rounded-lg p-1 bg-gray-50", children: [
       /* @__PURE__ */ jsxRuntime.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"
         }
       ),
@@ -20015,23 +20241,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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-gray-900 text-lg", children: selectedShift === "day" ? "Day Shifts" : "Night Shifts" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Calendar view of daily performance" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: WEEKDAYS2.map((day) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-600 text-center", children: day }, day)) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: calendarData.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square relative transition-all duration-200 ease-in-out", children: renderDayCell(day) }, index)) })
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-gray-900 text-lg", children: "Monthly Summary" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Overview of monthly performance metrics" })
@@ -22554,7 +22784,7 @@ var getWorkspaceStyles = (position, isPlaceholder = false) => {
           ${additionalStyles}
           ${isPlaceholder ? "cursor-default" : ""}`;
 };
-var Legend5 = () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-700 hidden sm:block", children: "Efficiency:" }),
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
@@ -22602,7 +22832,7 @@ var WorkspaceGridItem = React14__namespace.default.memo(({
   }, [data.efficiency, isInactive, position.size, position.orientation]);
   const { arrow, color: arrowColor } = React14.useMemo(() => getTrendArrowAndColor2(data.trend_score), [data.trend_score]);
   const workspaceNumber = React14.useMemo(() => getWorkspaceNumber(data.workspace_name), [data.workspace_name]);
-  const styles = React14.useMemo(() => getWorkspaceStyles(position, isInactive), [position, isInactive]);
+  const styles2 = React14.useMemo(() => getWorkspaceStyles(position, isInactive), [position, isInactive]);
   const arrowPosition = React14.useMemo(() => getArrowPositionClass(position), [position]);
   const handleClick = React14.useCallback((e) => {
     e.preventDefault();
@@ -22653,7 +22883,7 @@ var WorkspaceGridItem = React14__namespace.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__ */ jsxRuntime.jsx("div", { className: `font-semibold tracking-wide text-[min(4vw,2rem)] uppercase ${isInactive ? "text-gray-400" : "text-white"} drop-shadow-sm`, children: workspaceNumber })
@@ -22692,8 +22922,8 @@ var WorkspaceGrid = React14__namespace.default.memo(({
   const { VideoGridView: VideoGridViewComponent } = useRegistry();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, {}) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(Legend5, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-10 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsxRuntime.jsx(
       VideoGridViewComponent,
@@ -23296,6 +23526,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__ */ jsxRuntime.jsx("div", { className: "p-4", children: "Loading workspace display names..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-red-600", children: [
+      "Error loading workspace display names: ",
+      error.message
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold mb-6", children: "Workspace Display Names Examples" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-4", children: "1. All Workspace Display Names" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "p-3 border rounded-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: workspaceId }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600", children: displayName })
+      ] }, workspaceId)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-3 bg-gray-50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Using utility function:" }),
+        ` getWorkspaceDisplayName('WS01') = "`,
+        getWorkspaceDisplayName("WS01"),
+        '"'
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-4", children: "2. Single Workspace Display Name" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border rounded-lg", children: singleLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading WS01..." }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "WS01:" }),
+        " ",
+        singleWorkspaceName
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-4", children: "3. Specific Workspaces Map" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: mapLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading specific workspaces..." }) : Object.entries(displayNamesMap).map(([workspaceId, displayName]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 border rounded-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: workspaceId }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-600", children: displayName })
+      ] }, workspaceId)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 p-4 bg-blue-50 rounded-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "Migration Guide" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Before (hardcoded):" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "block p-2 bg-gray-100 rounded", children: [
+          "import ",
+          `{getWorkspaceDisplayName}`,
+          " from '@optifye/dashboard-core';",
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          "const name = getWorkspaceDisplayName('WS01'); // Synchronous, hardcoded"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "After (from Supabase):" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "block p-2 bg-gray-100 rounded", children: [
+          "import ",
+          `{useWorkspaceDisplayName}`,
+          " from '@optifye/dashboard-core';",
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          "const ",
+          `{displayName, loading}`,
+          " = useWorkspaceDisplayName('WS01'); // Async, from database"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-blue-700", children: [
+          /* @__PURE__ */ jsxRuntime.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;
@@ -24741,6 +25043,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "my-6 h-64 w-full flex justify-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", style: { maxWidth: args.max_width || "100%" }, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", style: {
+            height: args.height || 256,
+            width: args.width || "100%"
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full flex flex-col items-center", children: [
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full max-w-md", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full overflow-x-auto", children: [
+            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
+            /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "formatted-content", children: chartContent });
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -30164,6 +30694,11 @@ var WorkspaceDetailView = ({
     return getOperationalDate();
   }, [isHistoricView, date]);
   const handleMonthlyDataLoaded = React14.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([]);
@@ -30181,22 +30716,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)
@@ -30656,7 +31204,7 @@ var WorkspaceDetailView = ({
                 }
               )
             ] }),
-            monthlyDataLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-5rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl text-gray-600", children: "Loading monthly data..." }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(
               WorkspaceHistoryCalendar,
               {
                 data: monthlyData,
@@ -30978,6 +31526,7 @@ exports.DebugAuth = DebugAuth;
 exports.DebugAuthView = DebugAuthView_default;
 exports.EmptyStateMessage = EmptyStateMessage;
 exports.FactoryView = FactoryView_default;
+exports.GaugeChart = GaugeChart;
 exports.GridComponentsPlaceholder = GridComponentsPlaceholder;
 exports.Header = Header;
 exports.HelpView = HelpView_default;
@@ -30993,7 +31542,7 @@ exports.KPIsOverviewView = KPIsOverviewView_default;
 exports.LINE_1_UUID = LINE_1_UUID;
 exports.LargeOutputProgressChart = LargeOutputProgressChart;
 exports.LeaderboardDetailView = LeaderboardDetailView_default;
-exports.Legend = Legend5;
+exports.Legend = Legend6;
 exports.LineChart = LineChart;
 exports.LineHistoryCalendar = LineHistoryCalendar;
 exports.LineMonthlyHistory = LineMonthlyHistory;
@@ -31013,6 +31562,7 @@ exports.NoWorkspaceData = NoWorkspaceData;
 exports.OptifyeAgentClient = OptifyeAgentClient;
 exports.OutputProgressChart = OutputProgressChart;
 exports.PageHeader = PageHeader;
+exports.PieChart = PieChart4;
 exports.ProfileView = ProfileView_default;
 exports.RegistryProvider = RegistryProvider;
 exports.S3Service = S3Service;
@@ -31047,6 +31597,7 @@ exports.WORKSPACE_POSITIONS = WORKSPACE_POSITIONS;
 exports.WhatsAppShareButton = WhatsAppShareButton;
 exports.WorkspaceCard = WorkspaceCard;
 exports.WorkspaceDetailView = WorkspaceDetailView_default;
+exports.WorkspaceDisplayNameExample = WorkspaceDisplayNameExample;
 exports.WorkspaceGrid = WorkspaceGrid;
 exports.WorkspaceGridItem = WorkspaceGridItem;
 exports.WorkspaceHistoryCalendar = WorkspaceHistoryCalendar;