@optifye/dashboard-core 6.11.17 → 6.11.18

package/dist/index.js

@@ -4010,7 +4010,8 @@ var dashboardService = {
           enable,
           monitoring_mode,
           assembly,
-          video_grid_metric_mode
+          video_grid_metric_mode,
+          recent_flow_window_minutes
         `).eq("enable", true);
       if (companyId) {
         query = query.eq("company_id", companyId);
@@ -4035,7 +4036,8 @@ var dashboardService = {
         video_grid_metric_mode: normalizeVideoGridMetricMode(
           line.video_grid_metric_mode,
           line.assembly ?? false
-        )
+        ),
+        recent_flow_window_minutes: line.recent_flow_window_minutes ?? 7
       }));
       return transformedLines;
     } catch (err) {
@@ -4072,7 +4074,7 @@ var dashboardService = {
         }
         const lineIdsToQuery = configuredLineIds;
         const [line1Result, metricsResult2] = await Promise.all([
-          supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, assembly, video_grid_metric_mode, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", defaultLineId).single(),
+          supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, assembly, video_grid_metric_mode, recent_flow_window_minutes, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", defaultLineId).single(),
           supabase.from(lineMetricsTable).select("*").in("line_id", lineIdsToQuery).eq("shift_id", queryShiftId).eq("date", queryDate)
         ]);
         if (line1Result.error) throw line1Result.error;
@@ -4128,6 +4130,7 @@ var dashboardService = {
           date: queryDate,
           shift_id: queryShiftId,
           monitoring_mode: line1Data.monitoring_mode ?? void 0,
+          recent_flow_window_minutes: line1Data.recent_flow_window_minutes ?? 7,
           metrics: {
             avg_efficiency: avgEfficiency,
             avg_cycle_time: combinedMetricsData.avg_cycle_time / numLines,
@@ -4151,7 +4154,7 @@ var dashboardService = {
         throw new Error("Company ID must be configured for detailed line requests.");
       }
       const [lineResult, metricsResult] = await Promise.all([
-        supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, assembly, video_grid_metric_mode, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", lineIdToQuery).single(),
+        supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, assembly, video_grid_metric_mode, recent_flow_window_minutes, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", lineIdToQuery).single(),
         supabase.from(lineMetricsTable).select("*").eq("line_id", lineIdToQuery).eq("shift_id", queryShiftId).eq("date", queryDate)
       ]);
       if (lineResult.error) throw lineResult.error;
@@ -4176,6 +4179,7 @@ var dashboardService = {
         date: queryDate,
         shift_id: queryShiftId,
         monitoring_mode: lineData.monitoring_mode ?? void 0,
+        recent_flow_window_minutes: lineData.recent_flow_window_minutes ?? 7,
         metrics: {
           avg_efficiency: metrics2?.avg_efficiency ?? 0,
           avg_cycle_time: metrics2?.avg_cycle_time || 0,
@@ -8509,7 +8513,8 @@ var LinesService = class {
         videoGridMetricMode: normalizeVideoGridMetricMode(
           line.video_grid_metric_mode,
           line.assembly ?? false
-        )
+        ),
+        recentFlowWindowMinutes: line.recent_flow_window_minutes ?? 7
       }));
     } catch (error) {
       console.error("Error fetching lines:", error);
@@ -8557,7 +8562,8 @@ var LinesService = class {
         videoGridMetricMode: normalizeVideoGridMetricMode(
           line.video_grid_metric_mode,
           line.assembly ?? false
-        )
+        ),
+        recentFlowWindowMinutes: line.recent_flow_window_minutes ?? 7
       }));
     } catch (error) {
       console.error("Error fetching all lines:", error);
@@ -8614,7 +8620,8 @@ var LinesService = class {
         videoGridMetricMode: normalizeVideoGridMetricMode(
           data.video_grid_metric_mode,
           data.assembly ?? false
-        )
+        ),
+        recentFlowWindowMinutes: data.recent_flow_window_minutes ?? 7
       };
     } catch (error) {
       console.error("Error fetching line:", error);
@@ -13368,6 +13375,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
             actionName: item.action_name
           }),
           recent_flow_percent: item.recent_flow_percent ?? null,
+          recent_flow_window_minutes: item.recent_flow_window_minutes ?? null,
           recent_flow_effective_end_at: item.recent_flow_effective_end_at ?? null,
           recent_flow_computed_at: item.recent_flow_computed_at ?? null,
           incoming_wip_current: item.incoming_wip_current ?? null,
@@ -32624,6 +32632,212 @@ var CycleTimeChart = React141__namespace.default.memo(CycleTimeChartComponent, (
   });
 });
 CycleTimeChart.displayName = "CycleTimeChart";
+
+// src/lib/utils/hourlyIdle.ts
+var DEFAULT_SHIFT_DURATION = 11;
+var normalizeMinuteSeries = (idleTimeHourly) => {
+  if (!idleTimeHourly || typeof idleTimeHourly !== "object") {
+    return {};
+  }
+  return Object.fromEntries(
+    Object.entries(idleTimeHourly).map(([key, value]) => {
+      if (Array.isArray(value)) {
+        return [key, value];
+      }
+      if (value && Array.isArray(value.values)) {
+        return [key, value.values];
+      }
+      return [key, []];
+    })
+  );
+};
+var parseTimeString = (timeValue) => {
+  const [hoursPart, minutesPart] = timeValue.split(":");
+  const hour = Number.parseInt(hoursPart, 10);
+  const minute = Number.parseInt(minutesPart ?? "0", 10);
+  const safeHour = Number.isFinite(hour) ? hour : 0;
+  const safeMinute = Number.isFinite(minute) ? minute : 0;
+  return {
+    hour: safeHour,
+    minute: safeMinute,
+    decimalHour: safeHour + safeMinute / 60
+  };
+};
+var buildShiftLayout = ({
+  shiftStart,
+  shiftEnd
+}) => {
+  const shiftStartTime = parseTimeString(shiftStart);
+  if (!shiftEnd) {
+    return {
+      shiftDuration: DEFAULT_SHIFT_DURATION,
+      shiftStartTime,
+      shiftEndTime: null,
+      hasPartialLastHour: false
+    };
+  }
+  const shiftEndTime = parseTimeString(shiftEnd);
+  let duration = shiftEndTime.decimalHour - shiftStartTime.decimalHour;
+  if (duration <= 0) {
+    duration += 24;
+  }
+  const hasPartialLastHour = shiftEndTime.minute > 0 && shiftEndTime.minute < 60;
+  const shiftDuration = hasPartialLastHour ? Math.ceil(duration) : Math.round(duration);
+  return {
+    shiftDuration,
+    shiftStartTime,
+    shiftEndTime,
+    hasPartialLastHour
+  };
+};
+var formatCompactTime = (hour, minute) => {
+  const period = hour >= 12 ? "PM" : "AM";
+  const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+  if (minute === 0) {
+    return `${hour12}${period}`;
+  }
+  return `${hour12}:${minute.toString().padStart(2, "0")}${period}`;
+};
+var formatFullTime = (hour, minute) => {
+  const period = hour >= 12 ? "PM" : "AM";
+  const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+  return `${hour12}:${minute.toString().padStart(2, "0")} ${period}`;
+};
+var getSlotTimeBounds = (hourIndex, layout2) => {
+  const isLastHour = hourIndex === layout2.shiftDuration - 1;
+  const startDecimalHour = layout2.shiftStartTime.decimalHour + hourIndex;
+  const startHour = Math.floor(startDecimalHour) % 24;
+  const startMinute = Math.round(startDecimalHour % 1 * 60);
+  let endHour;
+  let endMinute;
+  if (isLastHour && layout2.shiftEndTime) {
+    endHour = layout2.shiftEndTime.hour;
+    endMinute = layout2.shiftEndTime.minute;
+  } else {
+    const endDecimalHour = startDecimalHour + 1;
+    endHour = Math.floor(endDecimalHour) % 24;
+    endMinute = Math.round(endDecimalHour % 1 * 60);
+  }
+  return {
+    startHour,
+    startMinute,
+    endHour,
+    endMinute
+  };
+};
+var getIdleArrayForHour = (hourIndex, idleTimeHourly, layout2) => {
+  const actualHour = (layout2.shiftStartTime.hour + hourIndex) % 24;
+  const startMinute = layout2.shiftStartTime.minute;
+  if (startMinute > 0) {
+    if (hourIndex === 0) {
+      const firstHourData = idleTimeHourly[actualHour.toString()] || [];
+      const nextHourData2 = idleTimeHourly[((actualHour + 1) % 24).toString()] || [];
+      return [
+        ...firstHourData.slice(startMinute),
+        ...nextHourData2.slice(0, startMinute)
+      ];
+    }
+    if (hourIndex < layout2.shiftDuration - 1) {
+      const currentHourData3 = idleTimeHourly[actualHour.toString()] || [];
+      const nextHourData2 = idleTimeHourly[((actualHour + 1) % 24).toString()] || [];
+      return [
+        ...currentHourData3.slice(startMinute),
+        ...nextHourData2.slice(0, startMinute)
+      ];
+    }
+    if (layout2.hasPartialLastHour && layout2.shiftEndTime) {
+      const currentHourData3 = idleTimeHourly[actualHour.toString()] || [];
+      const nextHourData2 = idleTimeHourly[((actualHour + 1) % 24).toString()] || [];
+      return [
+        ...currentHourData3.slice(startMinute),
+        ...nextHourData2.slice(0, layout2.shiftEndTime.minute)
+      ];
+    }
+    const currentHourData2 = idleTimeHourly[actualHour.toString()] || [];
+    const nextHourData = idleTimeHourly[((actualHour + 1) % 24).toString()] || [];
+    return [
+      ...currentHourData2.slice(startMinute),
+      ...nextHourData.slice(0, startMinute)
+    ];
+  }
+  const currentHourData = idleTimeHourly[actualHour.toString()] || [];
+  if (hourIndex === layout2.shiftDuration - 1 && layout2.hasPartialLastHour && layout2.shiftEndTime) {
+    return currentHourData.slice(0, layout2.shiftEndTime.minute);
+  }
+  return currentHourData;
+};
+var buildHourlyIdleSlots = ({
+  idleTimeHourly,
+  shiftStart,
+  shiftEnd
+}) => {
+  const normalizedIdleTimeHourly = normalizeMinuteSeries(idleTimeHourly);
+  const layout2 = buildShiftLayout({ shiftStart, shiftEnd });
+  return Array.from({ length: layout2.shiftDuration }, (_, hourIndex) => {
+    const { startHour, startMinute, endHour, endMinute } = getSlotTimeBounds(hourIndex, layout2);
+    const idleArray = getIdleArrayForHour(hourIndex, normalizedIdleTimeHourly, layout2);
+    const idleMinutes = idleArray.filter((value) => value === 1 || value === "1").length;
+    return {
+      hourIndex,
+      hour: `${formatCompactTime(startHour, startMinute)}-${formatCompactTime(endHour, endMinute)}`,
+      timeRange: `${formatFullTime(startHour, startMinute)} - ${formatFullTime(endHour, endMinute)}`,
+      idleMinutes,
+      idleArray
+    };
+  });
+};
+var formatIdleTimestamp = ({
+  shiftStart,
+  hourIndex,
+  minuteIndex
+}) => {
+  const shiftStartTime = parseTimeString(shiftStart);
+  const totalMinutes = (shiftStartTime.hour + hourIndex) * 60 + shiftStartTime.minute + minuteIndex;
+  const hour = Math.floor(totalMinutes / 60) % 24;
+  const minute = totalMinutes % 60;
+  return formatFullTime(hour, minute);
+};
+var getHourlyIdlePeriods = ({
+  idleArray,
+  shiftStart,
+  hourIndex
+}) => {
+  if (!Array.isArray(idleArray) || idleArray.length === 0) {
+    return [];
+  }
+  const periods = [];
+  let currentRange = null;
+  idleArray.forEach((value, minuteIndex) => {
+    if (value === 1 || value === "1") {
+      if (!currentRange) {
+        currentRange = { start: minuteIndex, end: minuteIndex };
+      } else {
+        currentRange.end = minuteIndex;
+      }
+    } else if (value !== "x" && currentRange) {
+      periods.push(currentRange);
+      currentRange = null;
+    }
+  });
+  if (currentRange) {
+    periods.push(currentRange);
+  }
+  return periods.map((period) => ({
+    start: period.start,
+    end: period.end,
+    duration: period.end - period.start + 1,
+    startTime: formatIdleTimestamp({
+      shiftStart,
+      hourIndex,
+      minuteIndex: period.start
+    }),
+    endTime: formatIdleTimestamp({
+      shiftStart,
+      hourIndex,
+      minuteIndex: period.end + 1
+    })
+  }));
+};
 var CycleTimeOverTimeChart = ({
   data,
   idealCycleTime,
@@ -32633,7 +32847,8 @@ var CycleTimeOverTimeChart = ({
   datasetKey,
   className = "",
   showIdleTime = false,
-  idleTimeData = []
+  idleTimeData = [],
+  idleTimeSlots = []
 }) => {
   const MAX_DATA_POINTS = 40;
   const containerRef = React141__namespace.default.useRef(null);
@@ -32736,50 +32951,60 @@ var CycleTimeOverTimeChart = ({
     if (!visibleEntries.length) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          backgroundColor: "white",
-          border: "none",
-          borderRadius: "8px",
-          boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
-          padding: "8px 12px",
-          fontSize: "13px"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                color: "#374151",
-                fontWeight: 600,
-                marginBottom: "4px"
-              },
-              children: payload[0]?.payload?.tooltip || ""
-            }
-          ),
-          visibleEntries.map((entry) => {
-            const numericValue = getNumericValue(entry.value);
-            if (numericValue === null) {
-              return null;
-            }
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  color: "#4B5563",
-                  padding: "2px 0"
-                },
-                children: entry.name === "idleMinutes" ? `Idle Time: ${numericValue.toFixed(0)} minutes` : `Cycle Time: ${numericValue.toFixed(1)} seconds`
-              },
-              `${entry.name}-${numericValue}`
-            );
-          })
-        ]
-      }
-    );
-  }, [getNumericValue]);
+    const dataPoint = payload[0]?.payload || {};
+    const idlePeriods = showIdleTime && typeof dataPoint.idleMinutes === "number" && dataPoint.idleMinutes > 0 ? getHourlyIdlePeriods({
+      idleArray: dataPoint.idleArray,
+      shiftStart,
+      hourIndex: Number.isFinite(dataPoint.hourIndex) ? dataPoint.hourIndex : 0
+    }) : [];
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-xl border border-gray-100 p-4 min-w-[220px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-gray-900 text-sm", children: dataPoint.timeRange || dataPoint.tooltip || "" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        visibleEntries.map((entry) => {
+          const numericValue = getNumericValue(entry.value);
+          if (numericValue === null) {
+            return null;
+          }
+          if (entry.name === "idleMinutes") {
+            if (!showIdleTime) return null;
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-100 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Idle Time" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-orange-600 text-sm", children: [
+                numericValue.toFixed(0),
+                " minutes"
+              ] })
+            ] }) }, `${entry.name}-${numericValue}`);
+          }
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: "Cycle Time" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900 text-sm", children: [
+              numericValue.toFixed(1),
+              " seconds"
+            ] })
+          ] }, `${entry.name}-${numericValue}`);
+        }),
+        idlePeriods.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 bg-gray-50 rounded-lg p-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-700 text-xs mb-2", children: "Idle periods:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto pr-1", children: idlePeriods.map((period, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600 flex items-center gap-2 text-xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: period.duration === 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              period.startTime,
+              " (",
+              period.duration,
+              " min)"
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              period.startTime,
+              " - ",
+              period.endTime,
+              " (",
+              period.duration,
+              " mins)"
+            ] }) })
+          ] }, index)) })
+        ] })
+      ] })
+    ] });
+  }, [getNumericValue, shiftStart, showIdleTime]);
   const renderCycleDot = React141__namespace.default.useCallback((props) => {
     const { cx: cx2, cy, payload } = props;
     const cycleTime = getNumericValue(payload?.cycleTime);
@@ -32848,14 +33073,18 @@ var CycleTimeOverTimeChart = ({
         r: 4,
         fill: "#f59e0b",
         stroke: "#fff",
-        strokeWidth: 1
+        strokeWidth: 1,
+        style: {
+          opacity: showIdleTime ? 1 : 0,
+          transition: "opacity 0.3s ease-in-out"
+        }
       }
     );
-  }, [getNumericValue]);
+  }, [getNumericValue, showIdleTime]);
   const renderIdleActiveDot = React141__namespace.default.useCallback((props) => {
     const { cx: cx2, cy, payload } = props;
     const idleMinutes = getNumericValue(payload?.idleMinutes);
-    if (idleMinutes === null) {
+    if (idleMinutes === null || !showIdleTime) {
       return /* @__PURE__ */ jsxRuntime.jsx("g", {});
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -32869,25 +33098,40 @@ var CycleTimeOverTimeChart = ({
         strokeWidth: 2
       }
     );
-  }, [getNumericValue]);
+  }, [getNumericValue, showIdleTime]);
   const chartData = React141__namespace.default.useMemo(() => Array.from({ length: DURATION }, (_, i) => {
     const cycleTime = getNumericValue(finalData[i]);
-    const idleMinutes = showIdleTime ? getNumericValue(idleTimeData[i]) : null;
+    const useIdleSlots = idleTimeSlots.length > 0;
+    const idleSlot = useIdleSlots ? idleTimeSlots[i] ?? null : null;
+    const idleMinutes = useIdleSlots ? idleSlot?.idleMinutes ?? null : getNumericValue(idleTimeData[i]);
     return {
       timeIndex: i,
       label: formatTimeLabel(i),
-      tooltip: formatTooltipTime(i),
+      tooltip: idleSlot?.timeRange || formatTooltipTime(i),
+      timeRange: idleSlot?.timeRange || formatTooltipTime(i),
+      hourIndex: idleSlot?.hourIndex ?? i,
       cycleTime,
       idleMinutes,
+      idleArray: idleSlot?.idleArray || [],
       color: cycleTime !== null && cycleTime <= idealCycleTime ? "#00AB45" : "#E34329"
     };
-  }), [DURATION, finalData, showIdleTime, idleTimeData, idealCycleTime, getNumericValue]);
+  }), [DURATION, finalData, idleTimeData, idleTimeSlots, idealCycleTime, getNumericValue]);
   const renderLegend = () => {
-    if (!showIdleTime) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-start text-[10px] font-bold text-gray-500 mb-6 tracking-[0.05em] gap-5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-[#f59e0b]" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Idle Time (min)" })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex items-center justify-start text-[10px] font-bold text-gray-500 mb-6 tracking-[0.05em] gap-5",
+        style: {
+          opacity: showIdleTime ? 1 : 0,
+          pointerEvents: showIdleTime ? "auto" : "none",
+          transition: "opacity 0.3s ease-in-out"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-[#f59e0b]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Idle Time (min)" })
+        ] })
+      }
+    );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -32958,7 +33202,7 @@ var CycleTimeOverTimeChart = ({
                       }
                     }
                   ),
-                  showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     recharts.YAxis,
                     {
                       yAxisId: "idle",
@@ -32967,7 +33211,11 @@ var CycleTimeOverTimeChart = ({
                       width: 35,
                       domain: [0, 60],
                       tickFormatter: (value) => `${value}m`,
-                      tick: { fontSize: 11, fill: "#f59e0b" },
+                      tick: {
+                        fontSize: 11,
+                        fill: showIdleTime ? "#f59e0b" : "transparent",
+                        style: { transition: "fill 0.3s ease-in-out" }
+                      },
                       axisLine: false,
                       tickLine: false
                     }
@@ -33015,7 +33263,7 @@ var CycleTimeOverTimeChart = ({
                     },
                     `${effectiveDatasetKey}:cycle`
                   ),
-                  showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     recharts.Line,
                     {
                       type: "monotone",
@@ -33030,7 +33278,11 @@ var CycleTimeOverTimeChart = ({
                       isAnimationActive: true,
                       animationBegin: 300,
                       animationDuration: 1500,
-                      animationEasing: "ease-out"
+                      animationEasing: "ease-out",
+                      style: {
+                        strokeOpacity: showIdleTime ? 1 : 0,
+                        transition: "stroke-opacity 0.3s ease-in-out"
+                      }
                     },
                     `${effectiveDatasetKey}:idle`
                   )
@@ -33185,89 +33437,20 @@ var HourlyOutputChartComponent = ({
   shiftEnd,
   showIdleTime = false,
   idleTimeHourly,
-  idleTimeClips,
-  idleTimeClipClassifications,
-  shiftDate,
-  timezone,
   className = ""
 }) => {
   const containerRef = React141__namespace.default.useRef(null);
   const [containerReady, setContainerReady] = React141__namespace.default.useState(false);
   const [containerWidth, setContainerWidth] = React141__namespace.default.useState(0);
-  const getTimeFromTimeString2 = (timeStr) => {
-    const [hours, minutes] = timeStr.split(":");
-    const hour = parseInt(hours);
-    const minute = parseInt(minutes || "0");
-    const decimalHour = hour + minute / 60;
-    return { hour, minute, decimalHour };
-  };
-  const shiftStartTime = getTimeFromTimeString2(shiftStart);
-  React141__namespace.default.useMemo(() => {
-    if (!shiftDate || !timezone) return null;
-    const hour = shiftStartTime.hour.toString().padStart(2, "0");
-    const minute = shiftStartTime.minute.toString().padStart(2, "0");
-    return dateFnsTz.fromZonedTime(`${shiftDate}T${hour}:${minute}:00`, timezone);
-  }, [shiftDate, timezone, shiftStartTime.hour, shiftStartTime.minute]);
-  const idleClipRanges = React141__namespace.default.useMemo(() => {
-    if (!idleTimeClips || idleTimeClips.length === 0) return [];
-    return idleTimeClips.map((clip) => ({
-      id: clip.id,
-      start: clip.idle_start_time ? new Date(clip.idle_start_time) : null,
-      end: clip.idle_end_time ? new Date(clip.idle_end_time) : null
-    })).filter((clip) => clip.start && clip.end);
-  }, [idleTimeClips]);
-  React141__namespace.default.useCallback((rangeStart, rangeEnd) => {
-    if (!rangeStart || !rangeEnd || idleClipRanges.length === 0) {
-      return "Reason unavailable";
-    }
-    const matchingClip = idleClipRanges.find((clip) => rangeStart >= clip.start && rangeEnd <= clip.end) || idleClipRanges.find((clip) => rangeStart < clip.end && rangeEnd > clip.start);
-    if (!matchingClip) {
-      return "Reason unavailable";
-    }
-    const classification = idleTimeClipClassifications?.[matchingClip.id];
-    if (!classification || classification.status === "processing") {
-      return "Analyzing...";
-    }
-    if (!classification.label) {
-      return "Reason unavailable";
-    }
-    return classification.displayName || classification.label.replace(/_/g, " ");
-  }, [idleClipRanges, idleTimeClipClassifications]);
-  const { shiftDuration, shiftEndTime, hasPartialLastHour } = React141__namespace.default.useMemo(() => {
-    console.log("[HourlyOutputChart] Calculating shift duration with:", {
+  const idleSlots = React141__namespace.default.useMemo(
+    () => buildHourlyIdleSlots({
+      idleTimeHourly,
       shiftStart,
-      shiftEnd,
-      shiftStartTime
-    });
-    if (!shiftEnd) {
-      console.log("[HourlyOutputChart] No shiftEnd provided, using default 11 hours");
-      return {
-        shiftDuration: 11,
-        shiftEndTime: null,
-        hasPartialLastHour: false
-      };
-    }
-    const endTime = getTimeFromTimeString2(shiftEnd);
-    let duration = endTime.decimalHour - shiftStartTime.decimalHour;
-    if (duration <= 0) {
-      duration += 24;
-    }
-    const hasPartial = endTime.minute > 0 && endTime.minute < 60;
-    const hourCount = hasPartial ? Math.ceil(duration) : Math.round(duration);
-    console.log("[HourlyOutputChart] Shift calculation results:", {
-      endTime,
-      duration,
-      hasPartial,
-      hourCount
-    });
-    return {
-      shiftDuration: hourCount,
-      shiftEndTime: endTime,
-      hasPartialLastHour: hasPartial
-    };
-  }, [shiftEnd, shiftStartTime.decimalHour]);
-  const SHIFT_DURATION = shiftDuration;
-  shiftEndTime ? shiftEndTime.hour : (shiftStartTime.hour + SHIFT_DURATION) % 24;
+      shiftEnd
+    }),
+    [idleTimeHourly, shiftStart, shiftEnd]
+  );
+  const SHIFT_DURATION = idleSlots.length;
   const [animatedData, setAnimatedData] = React141__namespace.default.useState(
     () => Array(SHIFT_DURATION).fill(0)
   );
@@ -33390,121 +33573,22 @@ var HourlyOutputChartComponent = ({
     }
     return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
   }, [containerWidth]);
-  const formatHour = React141__namespace.default.useCallback((hourIndex) => {
-    const isLastHour = hourIndex === SHIFT_DURATION - 1;
-    const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
-    const startHour = Math.floor(startDecimalHour) % 24;
-    const startMinute = Math.round(startDecimalHour % 1 * 60);
-    let endHour, endMinute;
-    if (isLastHour && shiftEndTime) {
-      endHour = shiftEndTime.hour;
-      endMinute = shiftEndTime.minute;
-    } else {
-      const endDecimalHour = startDecimalHour + 1;
-      endHour = Math.floor(endDecimalHour) % 24;
-      endMinute = Math.round(endDecimalHour % 1 * 60);
-    }
-    const formatTime5 = (h, m) => {
-      const period = h >= 12 ? "PM" : "AM";
-      const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-      if (m === 0) {
-        return `${hour12}${period}`;
-      }
-      return `${hour12}:${m.toString().padStart(2, "0")}${period}`;
-    };
-    return `${formatTime5(startHour, startMinute)}-${formatTime5(endHour, endMinute)}`;
-  }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const formatTimeRange2 = React141__namespace.default.useCallback((hourIndex) => {
-    const isLastHour = hourIndex === SHIFT_DURATION - 1;
-    const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
-    const startHour = Math.floor(startDecimalHour) % 24;
-    const startMinute = Math.round(startDecimalHour % 1 * 60);
-    let endHour, endMinute;
-    if (isLastHour && shiftEndTime) {
-      endHour = shiftEndTime.hour;
-      endMinute = shiftEndTime.minute;
-    } else {
-      const endDecimalHour = startDecimalHour + 1;
-      endHour = Math.floor(endDecimalHour) % 24;
-      endMinute = Math.round(endDecimalHour % 1 * 60);
-    }
-    const formatTime5 = (h, m) => {
-      const period = h >= 12 ? "PM" : "AM";
-      const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-      return `${hour12}:${m.toString().padStart(2, "0")} ${period}`;
-    };
-    return `${formatTime5(startHour, startMinute)} - ${formatTime5(endHour, endMinute)}`;
-  }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
   const chartData = React141__namespace.default.useMemo(() => {
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
-      const actualHour = (shiftStartTime.hour + i) % 24;
-      const startMinute = shiftStartTime.minute;
-      let idleArray = [];
-      let idleMinutes = 0;
-      if (idleTimeHourly) {
-        if (startMinute > 0) {
-          if (i === 0) {
-            const firstHourData = idleTimeHourly[actualHour.toString()] || [];
-            const nextHour = (actualHour + 1) % 24;
-            const nextHourData = idleTimeHourly[nextHour.toString()] || [];
-            idleArray = [
-              ...firstHourData.slice(startMinute) || [],
-              ...nextHourData.slice(0, startMinute) || []
-            ];
-          } else if (i < SHIFT_DURATION - 1) {
-            const currentHourData = idleTimeHourly[actualHour.toString()] || [];
-            const nextHour = (actualHour + 1) % 24;
-            const nextHourData = idleTimeHourly[nextHour.toString()] || [];
-            idleArray = [
-              ...currentHourData.slice(startMinute) || [],
-              ...nextHourData.slice(0, startMinute) || []
-            ];
-          } else {
-            const hasPartialLastHour2 = shiftEndTime && shiftEndTime.minute > 0 && shiftEndTime.minute < 60;
-            if (hasPartialLastHour2) {
-              const currentHourData = idleTimeHourly[actualHour.toString()] || [];
-              const nextHour = (actualHour + 1) % 24;
-              const nextHourData = idleTimeHourly[nextHour.toString()] || [];
-              if (startMinute > 0) {
-                const firstPart = currentHourData.slice(startMinute) || [];
-                const secondPart = nextHourData.slice(0, shiftEndTime.minute) || [];
-                idleArray = [...firstPart, ...secondPart];
-              } else {
-                idleArray = currentHourData.slice(0, shiftEndTime.minute) || [];
-              }
-            } else {
-              const currentHourData = idleTimeHourly[actualHour.toString()] || [];
-              const nextHour = (actualHour + 1) % 24;
-              const nextHourData = idleTimeHourly[nextHour.toString()] || [];
-              idleArray = [
-                ...currentHourData.slice(startMinute) || [],
-                ...nextHourData.slice(0, startMinute) || []
-              ];
-            }
-          }
-        } else {
-          const currentHourData = idleTimeHourly[actualHour.toString()] || [];
-          if (i === SHIFT_DURATION - 1 && shiftEndTime && shiftEndTime.minute > 0 && shiftEndTime.minute < 60) {
-            idleArray = currentHourData.slice(0, shiftEndTime.minute) || [];
-          } else {
-            idleArray = currentHourData || [];
-          }
-        }
-      }
-      idleMinutes = idleArray.filter((val) => val === "1" || val === 1).length;
+      const idleSlot = idleSlots[i];
       return {
-        hourIndex: i,
-        hour: formatHour(i),
-        timeRange: formatTimeRange2(i),
+        hourIndex: idleSlot?.hourIndex ?? i,
+        hour: idleSlot?.hour || "",
+        timeRange: idleSlot?.timeRange || "",
         output: animatedData[i] || 0,
         originalOutput: data[i] || 0,
         // Keep original data for labels
         color: (animatedData[i] || 0) >= Math.round(pphThreshold) ? "#00AB45" : "#E34329",
-        idleMinutes,
-        idleArray
+        idleMinutes: idleSlot?.idleMinutes || 0,
+        idleArray: idleSlot?.idleArray || []
       };
     });
-  }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, shiftStartTime.minute, shiftEndTime, formatHour, formatTimeRange2, SHIFT_DURATION]);
+  }, [animatedData, data, pphThreshold, idleSlots, SHIFT_DURATION]);
   const IdleBar = React141__namespace.default.useMemo(() => {
     if (!idleBarState.visible) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -33666,36 +33750,11 @@ var HourlyOutputChartComponent = ({
                   content: (props) => {
                     if (!props.active || !props.payload || props.payload.length === 0) return null;
                     const data2 = props.payload[0].payload;
-                    const idleRanges = [];
-                    if (showIdleTime && data2.idleArray) {
-                      let currentRange = null;
-                      data2.idleArray.forEach((val, idx) => {
-                        if (val === "1" || val === 1) {
-                          if (!currentRange) {
-                            currentRange = { start: idx, end: idx };
-                          } else {
-                            currentRange.end = idx;
-                          }
-                        } else if (val !== "x" && currentRange) {
-                          idleRanges.push(currentRange);
-                          currentRange = null;
-                        }
-                      });
-                      if (currentRange) {
-                        idleRanges.push(currentRange);
-                      }
-                    }
-                    const formatIdleTimestamp = (minuteIdx) => {
-                      const fallbackIndex = chartData.findIndex((item) => item.timeRange === data2.timeRange);
-                      const hourOffset = Number.isFinite(data2.hourIndex) ? data2.hourIndex : fallbackIndex;
-                      const safeHourOffset = hourOffset >= 0 ? hourOffset : 0;
-                      const totalMinutes = (shiftStartTime.hour + safeHourOffset) * 60 + shiftStartTime.minute + minuteIdx;
-                      const hour = Math.floor(totalMinutes / 60) % 24;
-                      const minute = totalMinutes % 60;
-                      const period = hour >= 12 ? "PM" : "AM";
-                      const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-                      return `${hour12}:${minute.toString().padStart(2, "0")} ${period}`;
-                    };
+                    const idlePeriods = showIdleTime ? getHourlyIdlePeriods({
+                      idleArray: data2.idleArray,
+                      shiftStart,
+                      hourIndex: Number.isFinite(data2.hourIndex) ? data2.hourIndex : 0
+                    }) : [];
                     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-xl border border-gray-100 p-4 min-w-[220px]", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-gray-900 text-sm", children: data2.timeRange }) }),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
@@ -33714,27 +33773,22 @@ var HourlyOutputChartComponent = ({
                               " minutes"
                             ] })
                           ] }) }),
-                          idleRanges.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 bg-gray-50 rounded-lg p-2.5", children: [
+                          idlePeriods.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 bg-gray-50 rounded-lg p-2.5", children: [
                             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-700 text-xs mb-2", children: "Idle periods:" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto pr-1", children: idleRanges.map((range, index) => {
-                              const duration = range.end - range.start + 1;
-                              const startTime = formatIdleTimestamp(range.start);
-                              const endTime = formatIdleTimestamp(range.end + 1);
-                              const fallbackIndex = chartData.findIndex((item) => item.timeRange === data2.timeRange);
-                              Number.isFinite(data2.hourIndex) ? data2.hourIndex : fallbackIndex;
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto pr-1", children: idlePeriods.map((period, index) => {
                               return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600 flex items-center gap-2 text-xs", children: [
                                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: duration === 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                  startTime,
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: period.duration === 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                  period.startTime,
                                   " (",
-                                  duration,
+                                  period.duration,
                                   " min)"
                                 ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                  startTime,
+                                  period.startTime,
                                   " - ",
-                                  endTime,
+                                  period.endTime,
                                   " (",
-                                  duration,
+                                  period.duration,
                                   " mins)"
                                 ] }) })
                               ] }, index);
@@ -33889,9 +33943,8 @@ var HourlyOutputChart = React141__namespace.default.memo(HourlyOutputChartCompon
 HourlyOutputChart.displayName = "HourlyOutputChart";
 
 // src/components/dashboard/grid/videoGridMetricUtils.ts
-var VIDEO_GRID_LEGEND_LABEL = "7 Minute Efficiency";
 var MAP_GRID_LEGEND_LABEL = "Efficiency";
-var MIXED_VIDEO_GRID_LEGEND_LABEL = "Efficiency";
+var MIXED_VIDEO_GRID_LEGEND_LABEL = "Flow Efficiency";
 var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
 var isVideoGridRecentFlowEnabled = (workspace) => isRecentFlowVideoGridMetricMode(
   workspace.video_grid_metric_mode,
@@ -33990,8 +34043,15 @@ var getVideoGridLegendLabel = (workspaces) => {
   if (recentFlowEnabledCount === 0) {
     return MAP_GRID_LEGEND_LABEL;
   }
+  const recentFlowWindows = new Set(
+    visibleWorkspaces.filter(isVideoGridRecentFlowEnabled).map((workspace) => workspace.recent_flow_window_minutes ?? 7).filter((value) => typeof value === "number" && Number.isFinite(value))
+  );
   if (recentFlowEnabledCount === visibleWorkspaces.length) {
-    return VIDEO_GRID_LEGEND_LABEL;
+    if (recentFlowWindows.size === 1) {
+      const [windowMinutes] = Array.from(recentFlowWindows);
+      return `${windowMinutes} Minute Efficiency`;
+    }
+    return MIXED_VIDEO_GRID_LEGEND_LABEL;
   }
   return MIXED_VIDEO_GRID_LEGEND_LABEL;
 };
@@ -35938,7 +35998,7 @@ var HourlyUptimeChartComponent = ({
                         idleRanges.push(currentRange);
                       }
                     }
-                    const formatIdleTimestamp = (minuteIdx) => {
+                    const formatIdleTimestamp2 = (minuteIdx) => {
                       const totalMinutes = (shiftStartTime.hour + data.hourIndex) * 60 + shiftStartTime.minute + minuteIdx;
                       const hour = Math.floor(totalMinutes / 60) % 24;
                       const minute = totalMinutes % 60;
@@ -35968,8 +36028,8 @@ var HourlyUptimeChartComponent = ({
                             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-gray-700 text-xs mb-2", children: "Idle periods:" }),
                             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 max-h-32 overflow-y-auto pr-1", children: idleRanges.map((range, index) => {
                               const duration = range.end - range.start + 1;
-                              const startTime = formatIdleTimestamp(range.start);
-                              const endTime = formatIdleTimestamp(range.end + 1);
+                              const startTime = formatIdleTimestamp2(range.start);
+                              const endTime = formatIdleTimestamp2(range.end + 1);
                               return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600 flex items-center gap-2 text-xs", children: [
                                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" }),
                                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: duration === 1 ? `${startTime} (${duration} min)` : `${startTime} - ${endTime} (${duration} mins)` })
@@ -69216,56 +69276,43 @@ var WorkspaceDetailView = ({
   const canToggleChartIdleTime = !isUptimeMode && !shouldShowCycleTimeLoadingState && !shouldShowCycleTimeUnavailableState;
   const idleClipDate = date || workspace?.date || calculatedOperationalDate || getOperationalDate(timezone);
   const idleClipShiftId = parsedShiftId ?? workspace?.shift_id;
-  const rawHourlyIdleMinutes = React141.useMemo(() => {
-    if (!shouldShowCycleTimeChart || !workspace?.idle_time_hourly || !workspace?.shift_start) return [];
-    const parseTimeToMinutes4 = (time2) => {
-      const [h, m] = time2.split(":").map(Number);
-      if (!Number.isFinite(h) || !Number.isFinite(m)) return 0;
-      return h * 60 + m;
-    };
-    const startTotal = parseTimeToMinutes4(workspace.shift_start);
-    const endTotalRaw = workspace.shift_end ? parseTimeToMinutes4(workspace.shift_end) : startTotal + 11 * 60;
-    const endTotal = endTotalRaw <= startTotal ? endTotalRaw + 24 * 60 : endTotalRaw;
-    const shiftDuration = Math.max(60, endTotal - startTotal);
-    const totalHourSlots = Math.max(1, Math.ceil(shiftDuration / 60));
-    const idleTimeHourlyObj = workspace.idle_time_hourly || {};
-    const result = Array(totalHourSlots).fill(0);
-    for (let i = 0; i < totalHourSlots; i++) {
-      const startSlotMins = startTotal + i * 60;
-      let endSlotMins = startSlotMins + 60;
-      if (endSlotMins > endTotal) endSlotMins = endTotal;
-      let idleCount = 0;
-      for (let m = startSlotMins; m < endSlotMins; m++) {
-        const hourKey = Math.floor(m / 60) % 24;
-        const minuteKey = m % 60;
-        const hourData = idleTimeHourlyObj[hourKey.toString()] || [];
-        if (Array.isArray(hourData)) {
-          const val = hourData[minuteKey];
-          if (val === 1 || val === "1") {
-            idleCount++;
-          }
-        }
-      }
-      result[i] = idleCount;
-    }
-    return result;
-  }, [shouldShowCycleTimeChart, workspace?.idle_time_hourly, workspace?.shift_start, workspace?.shift_end]);
+  const rawHourlyIdleSlots = React141.useMemo(
+    () => !shouldShowCycleTimeChart || !authoritativeCycleMetrics?.shift_start ? [] : buildHourlyIdleSlots({
+      idleTimeHourly: authoritativeCycleMetrics.idle_time_hourly,
+      shiftStart: authoritativeCycleMetrics.shift_start,
+      shiftEnd: authoritativeCycleMetrics.shift_end
+    }),
+    [
+      shouldShowCycleTimeChart,
+      authoritativeCycleMetrics?.idle_time_hourly,
+      authoritativeCycleMetrics?.shift_start,
+      authoritativeCycleMetrics?.shift_end
+    ]
+  );
+  const rawHourlyIdleMinutes = React141.useMemo(
+    () => rawHourlyIdleSlots.map((slot) => slot.idleMinutes),
+    [rawHourlyIdleSlots]
+  );
   const hourlyIdleMinutes = React141.useMemo(
     () => maskFutureHourlySeries({
       data: rawHourlyIdleMinutes,
-      shiftStart: workspace?.shift_start,
-      shiftEnd: workspace?.shift_end,
+      shiftStart: authoritativeCycleMetrics?.shift_start,
+      shiftEnd: authoritativeCycleMetrics?.shift_end,
       shiftDate: idleClipDate,
       timezone: effectiveCycleTimeTimezone
     }),
     [
       rawHourlyIdleMinutes,
-      workspace?.shift_start,
-      workspace?.shift_end,
+      authoritativeCycleMetrics?.shift_start,
+      authoritativeCycleMetrics?.shift_end,
       idleClipDate,
       effectiveCycleTimeTimezone
     ]
   );
+  const hourlyIdleSlots = React141.useMemo(
+    () => rawHourlyIdleSlots.map((slot, index) => hourlyIdleMinutes[index] === null ? null : slot),
+    [rawHourlyIdleSlots, hourlyIdleMinutes]
+  );
   const cycleTimeUnavailableView = React141.useMemo(() => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full rounded-lg border border-amber-200 bg-amber-50/70 px-6 py-5 text-center flex flex-col items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-semibold text-amber-900", children: "Cycle data unavailable" }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 max-w-md text-sm text-amber-800", children: "This workstation has cycle-time metrics for the selected shift, but no matching `cycle_completion` clips were found for the chart." }),
@@ -69821,7 +69868,8 @@ var WorkspaceDetailView = ({
                             xAxisMode: "hourly",
                             datasetKey: cycleTimeDatasetKey,
                             showIdleTime: showChartIdleTime,
-                            idleTimeData: hourlyIdleMinutes
+                            idleTimeData: hourlyIdleMinutes,
+                            idleTimeSlots: hourlyIdleSlots
                           }
                         ) : null : /* @__PURE__ */ jsxRuntime.jsx(
                           HourlyOutputChart2,
@@ -69950,7 +69998,8 @@ var WorkspaceDetailView = ({
                               xAxisMode: "hourly",
                               datasetKey: cycleTimeDatasetKey,
                               showIdleTime: showChartIdleTime,
-                              idleTimeData: hourlyIdleMinutes
+                              idleTimeData: hourlyIdleMinutes,
+                              idleTimeSlots: hourlyIdleSlots
                             }
                           ) : null : /* @__PURE__ */ jsxRuntime.jsx(
                             HourlyOutputChart2,