@optifye/dashboard-core 6.11.14 → 6.11.15

package/dist/index.css

@@ -2639,6 +2639,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
 }
+.bg-amber-50\/70 {
+  background-color: rgb(255 251 235 / 0.7);
+}
 .bg-amber-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
@@ -4253,6 +4256,9 @@ body {
 .tracking-\[0\.05em\] {
   letter-spacing: 0.05em;
 }
+.tracking-\[0\.08em\] {
+  letter-spacing: 0.08em;
+}
 .tracking-\[0\.25em\] {
   letter-spacing: 0.25em;
 }
@@ -4369,6 +4375,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(146 64 14 / var(--tw-text-opacity, 1));
 }
+.text-amber-900 {
+  --tw-text-opacity: 1;
+  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
+}
 .text-blue-300 {
   --tw-text-opacity: 1;
   color: rgb(147 197 253 / var(--tw-text-opacity, 1));

package/dist/index.d.mts

@@ -124,6 +124,9 @@ interface WorkspaceDetailedMetrics {
     total_actions: number;
     hourly_action_counts: number[];
     hourly_cycle_times?: number[];
+    cycle_completion_clip_count?: number | null;
+    cycle_time_data_status?: 'available' | 'missing_clips' | null;
+    cycle_time_timezone?: string | null;
     workspace_rank: number;
     total_workspaces: number;
     ideal_output_until_now: number;
@@ -2832,6 +2835,7 @@ interface HistoricWorkspaceMetrics {
     workspace_name: string;
     line_id: string;
     line_name: string;
+    line_assembly_enabled?: boolean;
     company_id: string;
     company_name: string;
     date: string;
@@ -2852,9 +2856,15 @@ interface HistoricWorkspaceMetrics {
     idle_time_hourly?: Record<string, string[]>;
     hourly_action_counts: number[];
     hourly_cycle_times?: number[];
+    cycle_completion_clip_count?: number | null;
+    cycle_time_data_status?: 'available' | 'missing_clips' | null;
+    cycle_time_timezone?: string | null;
     shift_start: string;
     shift_end: string;
     action_name: string;
+    action_type?: 'assembly' | 'output' | null;
+    action_family?: 'assembly' | 'output' | 'other' | null;
+    action_display_name?: string | null;
     monitoring_mode?: 'output' | 'uptime';
     workspace_rank: number;
     total_workspaces: number;
@@ -7193,7 +7203,7 @@ interface CycleTimeChartProps {
 declare const CycleTimeChart: React__default.NamedExoticComponent<CycleTimeChartProps>;
 
 interface CycleTimeOverTimeChartProps {
-    data: number[];
+    data: Array<number | null>;
     idealCycleTime: number;
     shiftStart: string;
     shiftEnd?: string;
@@ -7201,7 +7211,7 @@ interface CycleTimeOverTimeChartProps {
     datasetKey?: string;
     className?: string;
     showIdleTime?: boolean;
-    idleTimeData?: number[];
+    idleTimeData?: Array<number | null>;
 }
 declare const CycleTimeOverTimeChart: React__default.FC<CycleTimeOverTimeChartProps>;
 

package/dist/index.d.ts

@@ -124,6 +124,9 @@ interface WorkspaceDetailedMetrics {
     total_actions: number;
     hourly_action_counts: number[];
     hourly_cycle_times?: number[];
+    cycle_completion_clip_count?: number | null;
+    cycle_time_data_status?: 'available' | 'missing_clips' | null;
+    cycle_time_timezone?: string | null;
     workspace_rank: number;
     total_workspaces: number;
     ideal_output_until_now: number;
@@ -2832,6 +2835,7 @@ interface HistoricWorkspaceMetrics {
     workspace_name: string;
     line_id: string;
     line_name: string;
+    line_assembly_enabled?: boolean;
     company_id: string;
     company_name: string;
     date: string;
@@ -2852,9 +2856,15 @@ interface HistoricWorkspaceMetrics {
     idle_time_hourly?: Record<string, string[]>;
     hourly_action_counts: number[];
     hourly_cycle_times?: number[];
+    cycle_completion_clip_count?: number | null;
+    cycle_time_data_status?: 'available' | 'missing_clips' | null;
+    cycle_time_timezone?: string | null;
     shift_start: string;
     shift_end: string;
     action_name: string;
+    action_type?: 'assembly' | 'output' | null;
+    action_family?: 'assembly' | 'output' | 'other' | null;
+    action_display_name?: string | null;
     monitoring_mode?: 'output' | 'uptime';
     workspace_rank: number;
     total_workspaces: number;
@@ -7193,7 +7203,7 @@ interface CycleTimeChartProps {
 declare const CycleTimeChart: React__default.NamedExoticComponent<CycleTimeChartProps>;
 
 interface CycleTimeOverTimeChartProps {
-    data: number[];
+    data: Array<number | null>;
     idealCycleTime: number;
     shiftStart: string;
     shiftEnd?: string;
@@ -7201,7 +7211,7 @@ interface CycleTimeOverTimeChartProps {
     datasetKey?: string;
     className?: string;
     showIdleTime?: boolean;
-    idleTimeData?: number[];
+    idleTimeData?: Array<number | null>;
 }
 declare const CycleTimeOverTimeChart: React__default.FC<CycleTimeOverTimeChartProps>;
 

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);
@@ -68063,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",
@@ -68448,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 || "",
@@ -68471,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) => {
@@ -68479,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]
   );
@@ -68729,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);
@@ -68770,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]
@@ -69266,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),
@@ -69295,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 || "",
@@ -69399,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),
@@ -69424,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 || "",

package/dist/index.mjs

@@ -11742,6 +11742,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
@@ -11789,6 +11792,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,
@@ -32669,16 +32675,162 @@ var CycleTimeOverTimeChart = ({
       return `${minutes} minutes ${seconds} seconds ago`;
     }
   };
+  const getNumericValue = React141__default.useCallback((value) => typeof value === "number" && Number.isFinite(value) ? value : null, []);
+  const renderChartTooltip = React141__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__ */ 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__ */ 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__ */ 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__default.useCallback((props) => {
+    const { cx: cx2, cy, payload } = props;
+    const cycleTime = getNumericValue(payload?.cycleTime);
+    if (cycleTime === null) {
+      return /* @__PURE__ */ jsx("g", {});
+    }
+    return /* @__PURE__ */ 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__default.useCallback((props) => {
+    const { cx: cx2, cy, payload } = props;
+    const cycleTime = getNumericValue(payload?.cycleTime);
+    if (cycleTime === null) {
+      return /* @__PURE__ */ jsx("g", {});
+    }
+    return /* @__PURE__ */ 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__default.useCallback((props) => {
+    const { cx: cx2, cy, payload } = props;
+    const idleMinutes = getNumericValue(payload?.idleMinutes);
+    if (idleMinutes === null) {
+      return /* @__PURE__ */ jsx("g", {});
+    }
+    return /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: cx2,
+        cy,
+        r: 4,
+        fill: "#f59e0b",
+        stroke: "#fff",
+        strokeWidth: 1
+      }
+    );
+  }, [getNumericValue]);
+  const renderIdleActiveDot = React141__default.useCallback((props) => {
+    const { cx: cx2, cy, payload } = props;
+    const idleMinutes = getNumericValue(payload?.idleMinutes);
+    if (idleMinutes === null) {
+      return /* @__PURE__ */ jsx("g", {});
+    }
+    return /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: cx2,
+        cy,
+        r: 6,
+        fill: "#f59e0b",
+        stroke: "#fff",
+        strokeWidth: 2
+      }
+    );
+  }, [getNumericValue]);
   const chartData = React141__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__ */ jsx("div", { className: "flex items-center justify-start text-[10px] font-bold text-gray-500 mb-6 tracking-[0.05em] gap-5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
@@ -32765,36 +32917,7 @@ var CycleTimeOverTimeChart = ({
                 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
                 }
               ),
@@ -32823,52 +32946,9 @@ var CycleTimeOverTimeChart = ({
                   dataKey: "cycleTime",
                   stroke: "#3B82F6",
                   strokeWidth: 2,
-                  dot: (props) => {
-                    const { cx: cx2, cy, payload } = props;
-                    return /* @__PURE__ */ 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__ */ 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,
@@ -32886,8 +32966,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,
@@ -34615,8 +34696,20 @@ var CardFooter2 = (props) => {
   return /* @__PURE__ */ 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,
@@ -35325,6 +35418,37 @@ var getShiftElapsedMinutes = ({
   const elapsed = 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,
@@ -48863,7 +48987,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);
@@ -68034,8 +68158,74 @@ var TargetsView = ({
 var TargetsViewWithDisplayNames = withAllWorkspaceDisplayNames(TargetsView);
 var TargetsView_default = TargetsViewWithDisplayNames;
 var AuthenticatedTargetsView = withAuth(React141__default.memo(TargetsViewWithDisplayNames));
+function useTimezone(options = {}) {
+  const dashboardConfig = useDashboardConfig();
+  const workspaceConfig = useWorkspaceConfig();
+  const defaultTimezone = dashboardConfig?.dateTimeConfig?.defaultTimezone || "Asia/Kolkata";
+  const [timezone, setTimezone] = useState(defaultTimezone);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchTimezone = 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
+  ]);
+  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",
@@ -68419,6 +68609,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 || "",
@@ -68442,6 +68633,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 = useMemo(
     () => Array.isArray(workspace?.hourly_cycle_times) ? workspace.hourly_cycle_times.map((value) => {
@@ -68450,12 +68646,31 @@ var WorkspaceDetailView = ({
     }) : [],
     [workspace?.hourly_cycle_times]
   );
+  const maskedCycleTimeChartData = 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 = 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]
   );
@@ -68700,14 +68915,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 = useMemo(() => {
+  const rawHourlyIdleMinutes = useMemo(() => {
     if (!shouldShowCycleTimeChart || !workspace?.idle_time_hourly || !workspace?.shift_start) return [];
     const parseTimeToMinutes3 = (time2) => {
       const [h, m] = time2.split(":").map(Number);
@@ -68741,6 +68970,30 @@ var WorkspaceDetailView = ({
     }
     return result;
   }, [shouldShowCycleTimeChart, workspace?.idle_time_hourly, workspace?.shift_start, workspace?.shift_end]);
+  const hourlyIdleMinutes = 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 = useMemo(() => /* @__PURE__ */ 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__ */ jsx("h4", { className: "text-base font-semibold text-amber-900", children: "Cycle data unavailable" }),
+    /* @__PURE__ */ 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__ */ 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 = useMemo(
     () => getShiftDurationMinutes(workspace?.shift_start, workspace?.shift_end),
     [workspace?.shift_start, workspace?.shift_end]
@@ -69237,7 +69490,7 @@ var WorkspaceDetailView = ({
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-4", children: [
                       /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle time trend" : "Hourly Output" }),
-                      !isUptimeMode && /* @__PURE__ */ jsx(
+                      !isUptimeMode && !shouldShowCycleTimeUnavailableState && /* @__PURE__ */ jsx(
                         "button",
                         {
                           onClick: () => setShowChartIdleTime(!showChartIdleTime),
@@ -69266,10 +69519,10 @@ var WorkspaceDetailView = ({
                             timezone,
                             elapsedMinutes: elapsedShiftMinutes
                           }
-                        ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
+                        ) : shouldShowCycleTimeUnavailableState ? cycleTimeUnavailableView : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
                           CycleTimeOverTimeChart,
                           {
-                            data: cycleTimeChartData,
+                            data: maskedCycleTimeChartData,
                             idealCycleTime: workspace.ideal_cycle_time || 0,
                             shiftStart: workspace.shift_start || "",
                             shiftEnd: workspace.shift_end || "",
@@ -69370,7 +69623,7 @@ var WorkspaceDetailView = ({
                         children: [
                           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
                             /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle time trend" : "Hourly Output" }),
-                            !isUptimeMode && /* @__PURE__ */ jsx(
+                            !isUptimeMode && !shouldShowCycleTimeUnavailableState && /* @__PURE__ */ jsx(
                               "button",
                               {
                                 onClick: () => setShowChartIdleTime(!showChartIdleTime),
@@ -69395,10 +69648,10 @@ var WorkspaceDetailView = ({
                               timezone,
                               elapsedMinutes: elapsedShiftMinutes
                             }
-                          ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
+                          ) : shouldShowCycleTimeUnavailableState ? cycleTimeUnavailableView : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
                             CycleTimeOverTimeChart,
                             {
-                              data: cycleTimeChartData,
+                              data: maskedCycleTimeChartData,
                               idealCycleTime: workspace.ideal_cycle_time || 0,
                               shiftStart: workspace.shift_start || "",
                               shiftEnd: workspace.shift_end || "",

package/package.json

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