@optifye/dashboard-core 4.2.8 → 4.2.9

package/dist/index.d.mts

@@ -630,10 +630,6 @@ interface WorkspaceMonthlyMetric {
     avg_pph: number;
     pph_threshold: number;
     workspace_rank: number;
-    /**
-     * Total idle time for the shift in seconds
-     */
-    idle_time: number;
 }
 interface LineMonthlyMetric {
     date: string;

package/dist/index.d.ts

@@ -630,10 +630,6 @@ interface WorkspaceMonthlyMetric {
     avg_pph: number;
     pph_threshold: number;
     workspace_rank: number;
-    /**
-     * Total idle time for the shift in seconds
-     */
-    idle_time: number;
 }
 interface LineMonthlyMetric {
     date: string;

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) {
@@ -14731,16 +14730,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 +14756,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 +16891,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 +17012,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 +17318,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" })
@@ -19775,6 +19791,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 +19835,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 +19862,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 +19872,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 +19892,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 +19950,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 +19988,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 +20044,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" })
@@ -22602,7 +22635,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 +22686,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 })
@@ -30164,6 +30197,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 +30219,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 +30707,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,

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) {
@@ -14702,16 +14701,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 +14727,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 +16862,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 +16983,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 +17289,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" })
@@ -19746,6 +19762,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 +19806,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 +19833,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 +19843,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 +19863,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 +19921,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 +19959,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 +20015,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" })
@@ -22573,7 +22606,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 +22657,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 })
@@ -30135,6 +30168,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 +30190,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 +30678,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "4.2.8",
+  "version": "4.2.9",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",