@optifye/dashboard-core 6.11.13 → 6.11.15

package/dist/index.js

@@ -11771,6 +11771,9 @@ var toWorkspaceDetailedMetrics = ({
   const idealOutput = coerceNumber(data.ideal_output ?? data.ideal_output_until_now, 0);
   const outputDifference = totalActions - idealOutput;
   const hourlyCycleTimes = Array.isArray(data.hourly_cycle_times) ? data.hourly_cycle_times.map((value) => coerceNumber(value, 0)) : [];
+  const cycleCompletionClipCount = data.cycle_completion_clip_count === null || data.cycle_completion_clip_count === void 0 ? null : coerceNumber(data.cycle_completion_clip_count, 0);
+  const cycleTimeDataStatus = data.cycle_time_data_status === "missing_clips" ? "missing_clips" : data.cycle_time_data_status === "available" ? "available" : null;
+  const cycleTimeTimezone = typeof data.cycle_time_timezone === "string" ? data.cycle_time_timezone : null;
   const totalWorkspacesValue = coerceNumber(
     data.total_workspaces ?? lineMetricsById?.[data.line_id || ""]?.total_workspaces ?? workspaceConfig.totalWorkspaces,
     0
@@ -11818,6 +11821,9 @@ var toWorkspaceDetailedMetrics = ({
     total_actions: totalActions,
     hourly_action_counts: hourlyActionCounts,
     hourly_cycle_times: hourlyCycleTimes,
+    cycle_completion_clip_count: cycleCompletionClipCount,
+    cycle_time_data_status: cycleTimeDataStatus,
+    cycle_time_timezone: cycleTimeTimezone,
     workspace_rank: coerceNumber(data.workspace_rank, 0),
     total_workspaces: totalWorkspacesValue,
     ideal_output_until_now: idealOutput,
@@ -32698,16 +32704,162 @@ var CycleTimeOverTimeChart = ({
       return `${minutes} minutes ${seconds} seconds ago`;
     }
   };
+  const getNumericValue = React141__namespace.default.useCallback((value) => typeof value === "number" && Number.isFinite(value) ? value : null, []);
+  const renderChartTooltip = React141__namespace.default.useCallback((tooltipProps) => {
+    const { active, payload } = tooltipProps;
+    if (!active || !Array.isArray(payload) || payload.length === 0) {
+      return null;
+    }
+    const visibleEntries = payload.filter((entry) => getNumericValue(entry.value) !== null);
+    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 renderCycleDot = React141__namespace.default.useCallback((props) => {
+    const { cx: cx2, cy, payload } = props;
+    const cycleTime = getNumericValue(payload?.cycleTime);
+    if (cycleTime === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("g", {});
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: cx2,
+        cy,
+        r: 4,
+        fill: cycleTime <= idealCycleTime ? "#00AB45" : "#E34329",
+        stroke: "#fff",
+        strokeWidth: 1,
+        style: {
+          filter: "brightness(1)",
+          transition: "filter 0.3s ease, transform 0.3s ease",
+          cursor: "pointer"
+        },
+        onMouseEnter: (e) => {
+          const target = e.target;
+          target.style.filter = "brightness(1.2)";
+          target.style.transform = "scale(1.2)";
+        },
+        onMouseLeave: (e) => {
+          const target = e.target;
+          target.style.filter = "brightness(1)";
+          target.style.transform = "scale(1)";
+        }
+      }
+    );
+  }, [getNumericValue, idealCycleTime]);
+  const renderCycleActiveDot = React141__namespace.default.useCallback((props) => {
+    const { cx: cx2, cy, payload } = props;
+    const cycleTime = getNumericValue(payload?.cycleTime);
+    if (cycleTime === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("g", {});
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: cx2,
+        cy,
+        r: 6,
+        fill: cycleTime <= idealCycleTime ? "#00AB45" : "#E34329",
+        stroke: "#fff",
+        strokeWidth: 2,
+        style: {
+          filter: "drop-shadow(0 0 2px rgba(0,0,0,0.2))"
+        }
+      }
+    );
+  }, [getNumericValue, idealCycleTime]);
+  const renderIdleDot = React141__namespace.default.useCallback((props) => {
+    const { cx: cx2, cy, payload } = props;
+    const idleMinutes = getNumericValue(payload?.idleMinutes);
+    if (idleMinutes === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("g", {});
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: cx2,
+        cy,
+        r: 4,
+        fill: "#f59e0b",
+        stroke: "#fff",
+        strokeWidth: 1
+      }
+    );
+  }, [getNumericValue]);
+  const renderIdleActiveDot = React141__namespace.default.useCallback((props) => {
+    const { cx: cx2, cy, payload } = props;
+    const idleMinutes = getNumericValue(payload?.idleMinutes);
+    if (idleMinutes === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("g", {});
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: cx2,
+        cy,
+        r: 6,
+        fill: "#f59e0b",
+        stroke: "#fff",
+        strokeWidth: 2
+      }
+    );
+  }, [getNumericValue]);
   const chartData = React141__namespace.default.useMemo(() => Array.from({ length: DURATION }, (_, i) => {
+    const cycleTime = getNumericValue(finalData[i]);
+    const idleMinutes = showIdleTime ? getNumericValue(idleTimeData[i]) : null;
     return {
       timeIndex: i,
       label: formatTimeLabel(i),
       tooltip: formatTooltipTime(i),
-      cycleTime: finalData[i] || 0,
-      idleMinutes: showIdleTime && idleTimeData && idleTimeData[i] || 0,
-      color: (finalData[i] || 0) <= idealCycleTime ? "#00AB45" : "#E34329"
+      cycleTime,
+      idleMinutes,
+      color: cycleTime !== null && cycleTime <= idealCycleTime ? "#00AB45" : "#E34329"
     };
-  }), [DURATION, finalData, showIdleTime, idleTimeData, idealCycleTime]);
+  }), [DURATION, finalData, showIdleTime, idleTimeData, 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: [
@@ -32794,36 +32946,7 @@ var CycleTimeOverTimeChart = ({
                 recharts.Tooltip,
                 {
                   cursor: { stroke: "#E5E7EB", strokeWidth: 1 },
-                  contentStyle: {
-                    backgroundColor: "white",
-                    border: "none",
-                    borderRadius: "8px",
-                    boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
-                    padding: "8px 12px",
-                    fontSize: "13px"
-                  },
-                  labelStyle: {
-                    color: "#374151",
-                    fontWeight: 600,
-                    marginBottom: "4px"
-                  },
-                  itemStyle: {
-                    color: "#4B5563",
-                    padding: "2px 0"
-                  },
-                  labelFormatter: (label, payload) => {
-                    if (payload && payload[0]) {
-                      return payload[0].payload.tooltip;
-                    }
-                    return label;
-                  },
-                  formatter: (value, name) => {
-                    const numValue = typeof value === "number" ? value : Number(value);
-                    if (name === "idleMinutes") {
-                      return [`${numValue.toFixed(0)} minutes`, "Idle Time"];
-                    }
-                    return [`${numValue.toFixed(1)} seconds`, "Cycle Time"];
-                  },
+                  content: renderChartTooltip,
                   animationDuration: 200
                 }
               ),
@@ -32852,52 +32975,9 @@ var CycleTimeOverTimeChart = ({
                   dataKey: "cycleTime",
                   stroke: "#3B82F6",
                   strokeWidth: 2,
-                  dot: (props) => {
-                    const { cx: cx2, cy, payload } = props;
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      "circle",
-                      {
-                        cx: cx2,
-                        cy,
-                        r: 4,
-                        fill: payload.cycleTime <= idealCycleTime ? "#00AB45" : "#E34329",
-                        stroke: "#fff",
-                        strokeWidth: 1,
-                        style: {
-                          filter: "brightness(1)",
-                          transition: "filter 0.3s ease, transform 0.3s ease",
-                          cursor: "pointer"
-                        },
-                        onMouseEnter: (e) => {
-                          const target = e.target;
-                          target.style.filter = "brightness(1.2)";
-                          target.style.transform = "scale(1.2)";
-                        },
-                        onMouseLeave: (e) => {
-                          const target = e.target;
-                          target.style.filter = "brightness(1)";
-                          target.style.transform = "scale(1)";
-                        }
-                      }
-                    );
-                  },
-                  activeDot: (props) => {
-                    const { cx: cx2, cy, payload } = props;
-                    return /* @__PURE__ */ jsxRuntime.jsx(
-                      "circle",
-                      {
-                        cx: cx2,
-                        cy,
-                        r: 6,
-                        fill: payload.cycleTime <= idealCycleTime ? "#00AB45" : "#E34329",
-                        stroke: "#fff",
-                        strokeWidth: 2,
-                        style: {
-                          filter: "drop-shadow(0 0 2px rgba(0,0,0,0.2))"
-                        }
-                      }
-                    );
-                  },
+                  connectNulls: false,
+                  dot: renderCycleDot,
+                  activeDot: renderCycleActiveDot,
                   isAnimationActive: shouldAnimate,
                   animationBegin: 0,
                   animationDuration: 1200,
@@ -32915,8 +32995,9 @@ var CycleTimeOverTimeChart = ({
                   stroke: "#f59e0b",
                   strokeWidth: 2,
                   strokeDasharray: "4 4",
-                  dot: { r: 4, fill: "#f59e0b", stroke: "#fff", strokeWidth: 1 },
-                  activeDot: { r: 6, fill: "#f59e0b", stroke: "#fff", strokeWidth: 2 },
+                  connectNulls: false,
+                  dot: renderIdleDot,
+                  activeDot: renderIdleActiveDot,
                   isAnimationActive: shouldAnimate,
                   animationBegin: 0,
                   animationDuration: 1200,
@@ -34644,8 +34725,20 @@ var CardFooter2 = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RegisteredCardFooter, { ...props });
 };
 
+// src/lib/utils/workspaceDetailCycleTime.ts
+var resolveWorkspaceDetailActionFamily = (workspace) => {
+  if (workspace?.action_family === "assembly" || workspace?.action_family === "output" || workspace?.action_family === "other") {
+    return workspace.action_family;
+  }
+  if (workspace?.action_type === "assembly" || workspace?.action_type === "output") {
+    return workspace.action_type;
+  }
+  return null;
+};
+var shouldUseAssemblyCycleTimeLayout = (workspace) => workspace?.line_assembly_enabled === true && resolveWorkspaceDetailActionFamily(workspace) === "assembly";
+
 // src/components/dashboard/workspace/workspaceDetailCardRules.ts
-var shouldHideWorkspaceEfficiencyCard = (workspace) => workspace?.line_assembly_enabled === true && workspace?.action_type === "assembly";
+var shouldHideWorkspaceEfficiencyCard = (workspace) => shouldUseAssemblyCycleTimeLayout(workspace);
 var WorkspaceMetricCardsImpl = ({
   workspace,
   className,
@@ -35354,6 +35447,37 @@ var getShiftElapsedMinutes = ({
   const elapsed = dateFns.differenceInMinutes(now4, shiftStartDate);
   return Math.min(Math.max(elapsed, 0), shiftMinutes);
 };
+var maskFutureHourlySeries = ({
+  data,
+  shiftStart,
+  shiftEnd,
+  shiftDate,
+  timezone,
+  now: now4 = /* @__PURE__ */ new Date()
+}) => {
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  const normalizedData = data.map((value) => typeof value === "number" && Number.isFinite(value) ? value : null);
+  if (!normalizedData.length) {
+    return normalizedData;
+  }
+  const shiftMinutes = getShiftDurationMinutes(shiftStart, shiftEnd);
+  const elapsedMinutes = getShiftElapsedMinutes({
+    shiftStart,
+    shiftEnd,
+    shiftDate,
+    timezone,
+    now: now4
+  });
+  if (shiftMinutes === null || elapsedMinutes === null || elapsedMinutes >= shiftMinutes) {
+    return normalizedData;
+  }
+  return normalizedData.map((value, index) => {
+    const slotStartMinutes = index * 60;
+    return slotStartMinutes > elapsedMinutes ? null : value;
+  });
+};
 var buildUptimeSeries = ({
   idleTimeHourly,
   shiftStart,
@@ -48892,7 +49016,7 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons, efficiency
     setIsGenerating(true);
     try {
       const isUptimeMode = workspace.monitoring_mode === "uptime";
-      const isAssemblyCycleMode = !isUptimeMode && workspace.line_assembly_enabled === true && workspace.action_type === "assembly";
+      const isAssemblyCycleMode = !isUptimeMode && shouldUseAssemblyCycleTimeLayout(workspace);
       const shiftMinutes = getShiftDurationMinutes(workspace.shift_start, workspace.shift_end);
       const shiftSeconds = shiftMinutes ? shiftMinutes * 60 : 0;
       const idleSeconds = Math.max(workspace.idle_time || 0, 0);
@@ -60353,6 +60477,7 @@ var MonthlyRangeFilter = ({
       {
         type: "button",
         onClick: () => setIsOpen((prev) => !prev),
+        "aria-label": showLabel ? void 0 : singleDateOnly ? "Select date" : "Select date range",
         className: clsx(
           "flex items-center transition-all duration-200 focus:outline-none",
           !showLabel && "p-2 rounded-full hover:bg-gray-100",
@@ -62965,7 +63090,7 @@ var KPIsOverviewView = ({
     () => getShiftEndDate(currentShiftDetails, configuredTimezone),
     [currentShiftDetails, configuredTimezone]
   );
-  React141__namespace.default.useMemo(() => {
+  const leaderboardShiftOptions = React141__namespace.default.useMemo(() => {
     if (shiftConfig?.shifts && shiftConfig.shifts.length > 0) {
       return shiftConfig.shifts.map((shift) => ({
         id: shift.shiftId,
@@ -63764,6 +63889,17 @@ var KPIsOverviewView = ({
                   singleDateOnly: true
                 }
               ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "select",
+                {
+                  "aria-label": "Leaderboard shift",
+                  value: effectiveLeaderboardShiftId,
+                  onChange: (e) => setSelectedLeaderboardShiftId(Number(e.target.value)),
+                  className: "appearance-none pl-3 pr-8 py-1.5 text-sm font-medium bg-white border border-gray-200 hover:border-gray-300 rounded-lg text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all cursor-pointer shadow-sm min-w-[170px]",
+                  style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.5rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.2em 1.2em` },
+                  children: leaderboardShiftOptions.map((shiftOption) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: shiftOption.id, children: shiftOption.label }, shiftOption.id))
+                }
+              ) }),
               isHistoricalLeaderboardDaily && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -68051,8 +68187,74 @@ var TargetsView = ({
 var TargetsViewWithDisplayNames = withAllWorkspaceDisplayNames(TargetsView);
 var TargetsView_default = TargetsViewWithDisplayNames;
 var AuthenticatedTargetsView = withAuth(React141__namespace.default.memo(TargetsViewWithDisplayNames));
+function useTimezone(options = {}) {
+  const dashboardConfig = useDashboardConfig();
+  const workspaceConfig = useWorkspaceConfig();
+  const defaultTimezone = dashboardConfig?.dateTimeConfig?.defaultTimezone || "Asia/Kolkata";
+  const [timezone, setTimezone] = React141.useState(defaultTimezone);
+  const [isLoading, setIsLoading] = React141.useState(true);
+  const [error, setError] = React141.useState(null);
+  const fetchTimezone = React141.useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      let fetchedTimezone = defaultTimezone;
+      if (options.lineId) {
+        fetchedTimezone = await timezoneService.getTimezoneForLine(options.lineId, defaultTimezone);
+      } else if (options.workspaceId || workspaceConfig && "id" in workspaceConfig) {
+        const wsId = options.workspaceId || (workspaceConfig && "id" in workspaceConfig ? workspaceConfig.id : void 0);
+        if (wsId) {
+          fetchedTimezone = await timezoneService.getTimezoneForWorkspace(wsId, defaultTimezone);
+        }
+      } else if (options.companyId || dashboardConfig && "company" in dashboardConfig) {
+        const compId = options.companyId || (dashboardConfig && "company" in dashboardConfig ? dashboardConfig.company?.id : void 0);
+        if (compId) {
+          fetchedTimezone = await timezoneService.getTimezoneForCompany(compId, defaultTimezone);
+        }
+      }
+      setTimezone(fetchedTimezone);
+    } catch (err) {
+      console.error("Error fetching timezone:", err);
+      setError(err instanceof Error ? err : new Error("Failed to fetch timezone"));
+      setTimezone(defaultTimezone);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [
+    options.lineId,
+    options.workspaceId,
+    options.companyId,
+    workspaceConfig,
+    dashboardConfig,
+    defaultTimezone
+  ]);
+  React141.useEffect(() => {
+    fetchTimezone();
+  }, [fetchTimezone]);
+  return {
+    timezone,
+    isLoading,
+    error,
+    refetch: fetchTimezone
+  };
+}
 
 // src/views/workspace-detail-view.utils.ts
+var getWorkspaceCycleTimePresentation = ({
+  workspace,
+  showCycleTimeChart
+}) => {
+  if (workspace?.monitoring_mode === "uptime") {
+    return "output";
+  }
+  if (showCycleTimeChart === false) {
+    return "output";
+  }
+  if (!shouldUseAssemblyCycleTimeLayout(workspace)) {
+    return "output";
+  }
+  return workspace?.cycle_time_data_status === "missing_clips" ? "cycle_unavailable" : "cycle_chart";
+};
 var formatDateInTimezone = (date = /* @__PURE__ */ new Date(), timezone, options) => {
   const defaultOptions = {
     day: "numeric",
@@ -68436,6 +68638,7 @@ var WorkspaceDetailView = ({
       date: cachedOverviewMetrics.date,
       shift_id: cachedOverviewMetrics.shift_id,
       action_name: "",
+      action_family: cachedOverviewMetrics.action_family ?? null,
       action_type: cachedOverviewMetrics.action_type ?? null,
       monitoring_mode: cachedOverviewMetrics.monitoring_mode ?? "output",
       shift_start: shiftDefinition?.startTime || "",
@@ -68459,6 +68662,11 @@ var WorkspaceDetailView = ({
     };
   }, [cachedOverviewMetrics, shiftConfig?.shifts]);
   const workspace = (isHistoricView ? historicMetrics : liveMetrics) || cachedDetailedMetrics || overviewFallback;
+  const { timezone: cycleTimeTimezone } = useTimezone({
+    lineId: effectiveLineId || workspace?.line_id || void 0,
+    workspaceId: workspaceId || void 0
+  });
+  const effectiveCycleTimeTimezone = cycleTimeTimezone || timezone;
   const detailedWorkspaceMetrics = (isHistoricView ? historicMetrics : liveMetrics) || cachedDetailedMetrics;
   const cycleTimeChartData = React141.useMemo(
     () => Array.isArray(workspace?.hourly_cycle_times) ? workspace.hourly_cycle_times.map((value) => {
@@ -68467,12 +68675,31 @@ var WorkspaceDetailView = ({
     }) : [],
     [workspace?.hourly_cycle_times]
   );
+  const maskedCycleTimeChartData = React141.useMemo(
+    () => maskFutureHourlySeries({
+      data: cycleTimeChartData,
+      shiftStart: workspace?.shift_start,
+      shiftEnd: workspace?.shift_end,
+      shiftDate: workspace?.date || date || calculatedOperationalDate || null,
+      timezone: effectiveCycleTimeTimezone
+    }),
+    [
+      cycleTimeChartData,
+      workspace?.shift_start,
+      workspace?.shift_end,
+      workspace?.date,
+      date,
+      calculatedOperationalDate,
+      effectiveCycleTimeTimezone
+    ]
+  );
   const cycleTimeDatasetKey = React141.useMemo(
     () => [
       workspace?.workspace_id || workspaceId || "workspace",
       date || workspace?.date || "live",
       parsedShiftId ?? workspace?.shift_id ?? "current",
-      "hourly"
+      "hourly",
+      "backend"
     ].join(":"),
     [workspace?.workspace_id, workspaceId, date, workspace?.date, parsedShiftId, workspace?.shift_id]
   );
@@ -68717,14 +68944,28 @@ var WorkspaceDetailView = ({
     return filterDataByDateKeyRange(monthlyData, range);
   }, [monthlyData, range]);
   const formattedWorkspaceName = displayName || formatWorkspaceName3(workspace?.workspace_name || "", effectiveLineId);
-  const workspaceActionType = workspace && "action_type" in workspace ? workspace.action_type : void 0;
-  const workspaceAssemblyEnabled = workspace && "line_assembly_enabled" in workspace ? workspace.line_assembly_enabled === true : false;
-  const isAssemblyWorkspace = workspaceActionType === "assembly" || workspaceAssemblyEnabled;
-  const shouldShowCycleTimeChart = !isUptimeMode && (showCycleTimeChart ?? isAssemblyWorkspace);
+  const workspaceCycleTimeEligibility = workspace ? {
+    line_assembly_enabled: workspace.line_assembly_enabled,
+    action_family: workspace.action_family,
+    action_type: workspace.action_type
+  } : null;
+  const isAssemblyWorkspace = shouldUseAssemblyCycleTimeLayout(workspaceCycleTimeEligibility);
+  const cycleTimePresentation = getWorkspaceCycleTimePresentation({
+    workspace: workspace ? {
+      monitoring_mode: workspace.monitoring_mode,
+      line_assembly_enabled: workspace.line_assembly_enabled,
+      action_family: workspace.action_family,
+      action_type: workspace.action_type,
+      cycle_time_data_status: workspace.cycle_time_data_status
+    } : null,
+    showCycleTimeChart
+  });
+  const shouldShowCycleTimeChart = cycleTimePresentation !== "output";
+  const shouldShowCycleTimeUnavailableState = cycleTimePresentation === "cycle_unavailable";
   const showIdleBreakdownChart = !shouldShowCycleTimeChart && idleTimeVlmEnabled;
   const idleClipDate = date || workspace?.date || calculatedOperationalDate || getOperationalDate(timezone);
   const idleClipShiftId = parsedShiftId ?? workspace?.shift_id;
-  const hourlyIdleMinutes = React141.useMemo(() => {
+  const rawHourlyIdleMinutes = React141.useMemo(() => {
     if (!shouldShowCycleTimeChart || !workspace?.idle_time_hourly || !workspace?.shift_start) return [];
     const parseTimeToMinutes3 = (time2) => {
       const [h, m] = time2.split(":").map(Number);
@@ -68758,6 +68999,30 @@ var WorkspaceDetailView = ({
     }
     return result;
   }, [shouldShowCycleTimeChart, workspace?.idle_time_hourly, workspace?.shift_start, workspace?.shift_end]);
+  const hourlyIdleMinutes = React141.useMemo(
+    () => maskFutureHourlySeries({
+      data: rawHourlyIdleMinutes,
+      shiftStart: workspace?.shift_start,
+      shiftEnd: workspace?.shift_end,
+      shiftDate: idleClipDate,
+      timezone: effectiveCycleTimeTimezone
+    }),
+    [
+      rawHourlyIdleMinutes,
+      workspace?.shift_start,
+      workspace?.shift_end,
+      idleClipDate,
+      effectiveCycleTimeTimezone
+    ]
+  );
+  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." }),
+    typeof workspace?.cycle_completion_clip_count === "number" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-3 text-xs font-medium uppercase tracking-[0.08em] text-amber-700", children: [
+      "matched cycle clips: ",
+      workspace.cycle_completion_clip_count
+    ] })
+  ] }), [workspace?.cycle_completion_clip_count]);
   const shiftDurationMinutes = React141.useMemo(
     () => getShiftDurationMinutes(workspace?.shift_start, workspace?.shift_end),
     [workspace?.shift_start, workspace?.shift_end]
@@ -69254,7 +69519,7 @@ var WorkspaceDetailView = ({
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-4", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle time trend" : "Hourly Output" }),
-                      !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsx(
+                      !isUptimeMode && !shouldShowCycleTimeUnavailableState && /* @__PURE__ */ jsxRuntime.jsx(
                         "button",
                         {
                           onClick: () => setShowChartIdleTime(!showChartIdleTime),
@@ -69283,10 +69548,10 @@ var WorkspaceDetailView = ({
                             timezone,
                             elapsedMinutes: elapsedShiftMinutes
                           }
-                        ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
+                        ) : shouldShowCycleTimeUnavailableState ? cycleTimeUnavailableView : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
                           CycleTimeOverTimeChart,
                           {
-                            data: cycleTimeChartData,
+                            data: maskedCycleTimeChartData,
                             idealCycleTime: workspace.ideal_cycle_time || 0,
                             shiftStart: workspace.shift_start || "",
                             shiftEnd: workspace.shift_end || "",
@@ -69387,7 +69652,7 @@ var WorkspaceDetailView = ({
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
                             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle time trend" : "Hourly Output" }),
-                            !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsx(
+                            !isUptimeMode && !shouldShowCycleTimeUnavailableState && /* @__PURE__ */ jsxRuntime.jsx(
                               "button",
                               {
                                 onClick: () => setShowChartIdleTime(!showChartIdleTime),
@@ -69412,10 +69677,10 @@ var WorkspaceDetailView = ({
                               timezone,
                               elapsedMinutes: elapsedShiftMinutes
                             }
-                          ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
+                          ) : shouldShowCycleTimeUnavailableState ? cycleTimeUnavailableView : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
                             CycleTimeOverTimeChart,
                             {
-                              data: cycleTimeChartData,
+                              data: maskedCycleTimeChartData,
                               idealCycleTime: workspace.ideal_cycle_time || 0,
                               shiftStart: workspace.shift_start || "",
                               shiftEnd: workspace.shift_end || "",