@optifye/dashboard-core 6.11.23 → 6.11.25

package/dist/index.mjs

@@ -13255,7 +13255,7 @@ var parseEfficiencyLegend = (legend) => {
     critical_threshold: coerce(legend.critical_threshold, DEFAULT_EFFICIENCY_LEGEND.critical_threshold)
   };
 };
-var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds }) => {
+var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, lineIds, userAccessibleLineIds }) => {
   const { supabaseUrl, supabaseKey } = useDashboardConfig();
   const entityConfig = useEntityConfig();
   const databaseConfig = useDatabaseConfig();
@@ -13272,9 +13272,9 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
     return getConfiguredLineIds(entityConfig);
   }, [entityConfig]);
   const targetFactoryLineIds = useMemo(() => {
-    const sourceLineIds = userAccessibleLineIds !== void 0 ? userAccessibleLineIds : configuredLineIds;
+    const sourceLineIds = lineIds !== void 0 ? lineIds : userAccessibleLineIds !== void 0 ? userAccessibleLineIds : configuredLineIds;
     return Array.from(new Set((sourceLineIds || []).filter(Boolean)));
-  }, [userAccessibleLineIds, configuredLineIds]);
+  }, [lineIds, userAccessibleLineIds, configuredLineIds]);
   const { shiftConfig: staticShiftConfig } = useDashboardConfig();
   const {
     shiftConfigMap: multiLineShiftConfigMap,
@@ -13327,6 +13327,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
   const operationalShiftKeyRef = useRef(operationalShiftKey);
   const configuredLineIdsRef = useRef(configuredLineIds);
   const userAccessibleLineIdsRef = useRef(userAccessibleLineIds);
+  const explicitLineIdsRef = useRef(lineIds);
   useEffect(() => {
     onLineMetricsUpdateRef.current = onLineMetricsUpdate;
   }, [onLineMetricsUpdate]);
@@ -13342,6 +13343,9 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
   useEffect(() => {
     userAccessibleLineIdsRef.current = userAccessibleLineIds;
   }, [userAccessibleLineIds]);
+  useEffect(() => {
+    explicitLineIdsRef.current = lineIds;
+  }, [lineIds]);
   const companySpecificMetricsTable = useMemo(
     () => getCompanyMetricsTableName(entityConfig.companyId, "performance_metrics"),
     [entityConfig.companyId]
@@ -13692,6 +13696,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
     isFactoryView,
     multiLineShiftConfigMap,
     staticShiftConfig,
+    lineIds,
     userAccessibleLineIds,
     effectiveWorkspaceConfig,
     shiftLoading,
@@ -13809,7 +13814,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
       logDebug("[useDashboardMetrics] Setting up group subscriptions:", {
         groupCount: currentShiftGroups.length
       });
-      const targetFactoryLineIdsForSubscriptions = currentUserAccessibleLineIds !== void 0 ? currentUserAccessibleLineIds : currentConfiguredLineIds;
+      const targetFactoryLineIdsForSubscriptions = explicitLineIdsRef.current !== void 0 ? explicitLineIdsRef.current : currentUserAccessibleLineIds !== void 0 ? currentUserAccessibleLineIds : currentConfiguredLineIds;
       const targetFactoryLineIdSet = new Set(
         (targetFactoryLineIdsForSubscriptions || []).filter(Boolean)
       );
@@ -13980,7 +13985,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
       });
       const currentShiftDetails = shiftConfig ? getCurrentShift(defaultTimezone, shiftConfig) : getCurrentShift(defaultTimezone, staticShiftConfig);
       const operationalDateForSubscription = currentShiftDetails.date;
-      const targetLineIds = isFactory ? currentUserAccessibleLineIds || currentConfiguredLineIds : [currentLineIdToUse];
+      const targetLineIds = isFactory ? explicitLineIdsRef.current || currentUserAccessibleLineIds || currentConfiguredLineIds : [currentLineIdToUse];
       const filteredLineIds = targetLineIds.filter((id3) => id3 && id3 !== factoryViewIdentifier);
       if (filteredLineIds.length === 0) {
         logDebug("[useDashboardMetrics] Realtime setup skipped: no line IDs after filtering", {
@@ -20394,13 +20399,15 @@ var buildKPIsFromLineMetricsRow = (row) => {
 };
 var aggregateKPIsFromLineMetricsRows = (rows) => {
   if (!rows || rows.length === 0) return createDefaultKPIs();
-  const currentOutputSum = rows.reduce((sum, row) => sum + toNumber(row.current_output), 0);
-  const lineThresholdSum = rows.reduce((sum, row) => sum + toNumber(row.line_threshold), 0);
-  const idealOutputSum = rows.reduce(
+  const eligibleRows = rows.filter((row) => toNumber(row?.avg_efficiency) >= 5);
+  if (eligibleRows.length === 0) return createDefaultKPIs();
+  const currentOutputSum = eligibleRows.reduce((sum, row) => sum + toNumber(row.current_output), 0);
+  const lineThresholdSum = eligibleRows.reduce((sum, row) => sum + toNumber(row.line_threshold), 0);
+  const idealOutputSum = eligibleRows.reduce(
     (sum, row) => sum + (toNumber(row.ideal_output) || toNumber(row.line_threshold)),
     0
   );
-  const efficiencyValues = rows.map((row) => {
+  const efficiencyValues = eligibleRows.map((row) => {
     const value = row?.avg_efficiency;
     if (typeof value === "number" && Number.isFinite(value)) return value;
     if (typeof value === "string" && value.trim() !== "") {
@@ -20410,10 +20417,10 @@ var aggregateKPIsFromLineMetricsRows = (rows) => {
     return null;
   }).filter((value) => value !== null);
   const avgEfficiency = efficiencyValues.length > 0 ? efficiencyValues.reduce((sum, value) => sum + value, 0) / efficiencyValues.length : 0;
-  const numLines = rows.length;
-  const avgCycleTime = numLines > 0 ? rows.reduce((sum, row) => sum + toNumber(row.avg_cycle_time), 0) / numLines : 0;
-  const totalUnderperforming = rows.reduce((sum, row) => sum + toNumber(row.underperforming_workspaces), 0);
-  const totalWorkspaces = rows.reduce((sum, row) => sum + toNumber(row.total_workspaces), 0);
+  const numLines = eligibleRows.length;
+  const avgCycleTime = numLines > 0 ? eligibleRows.reduce((sum, row) => sum + toNumber(row.avg_cycle_time), 0) / numLines : 0;
+  const totalUnderperforming = eligibleRows.reduce((sum, row) => sum + toNumber(row.underperforming_workspaces), 0);
+  const totalWorkspaces = eligibleRows.reduce((sum, row) => sum + toNumber(row.total_workspaces), 0);
   return {
     underperformingWorkers: {
       current: totalUnderperforming,
@@ -34569,6 +34576,8 @@ var logDebug2 = (...args) => {
 var VideoGridView = React142__default.memo(({
   workspaces,
   selectedLine,
+  lineNames = {},
+  lineOrder = [],
   className = "",
   legend,
   videoSources = {},
@@ -34671,6 +34680,44 @@ var VideoGridView = React142__default.memo(({
       }
     }) : workspaces;
   }, [workspaces, selectedLine]);
+  const sortedWorkspaces = useMemo(() => {
+    return [...filteredWorkspaces].sort((a, b) => {
+      if (a.line_id !== b.line_id) {
+        return (a.line_id || "").localeCompare(b.line_id || "");
+      }
+      const aMatch = a.workspace_name.match(/WS(\d+)/);
+      const bMatch = b.workspace_name.match(/WS(\d+)/);
+      if (aMatch && bMatch) {
+        const aNum = parseInt(aMatch[1], 10);
+        const bNum = parseInt(bMatch[1], 10);
+        return aNum - bNum;
+      }
+      return a.workspace_name.localeCompare(b.workspace_name);
+    });
+  }, [filteredWorkspaces]);
+  const lineGroups = useMemo(() => {
+    const grouped = /* @__PURE__ */ new Map();
+    sortedWorkspaces.forEach((workspace) => {
+      const lineId = workspace.line_id || "unknown";
+      const existing = grouped.get(lineId);
+      if (existing) {
+        existing.push(workspace);
+        return;
+      }
+      grouped.set(lineId, [workspace]);
+    });
+    const sortedRemainingLineIds = Array.from(grouped.keys()).sort((a, b) => a.localeCompare(b));
+    const orderedLineIds = [
+      ...lineOrder.filter((lineId) => grouped.has(lineId)),
+      ...sortedRemainingLineIds.filter((lineId) => !lineOrder.includes(lineId))
+    ];
+    return orderedLineIds.map((lineId) => ({
+      lineId,
+      lineName: lineNames[lineId] || `Line ${lineId.substring(0, 4)}`,
+      workspaces: grouped.get(lineId) || []
+    }));
+  }, [sortedWorkspaces, lineOrder, lineNames]);
+  lineGroups.length > 1;
   const streamsReady = !videoStreamsLoading;
   const calculateOptimalGrid = useCallback(() => {
     if (!containerRef.current) return;
@@ -34834,108 +34881,130 @@ var VideoGridView = React142__default.memo(({
       stream_source: isR2Stream ? "r2" : "media_config"
     });
   }, []);
+  const workspaceCards = useMemo(() => {
+    return sortedWorkspaces.map((workspace) => {
+      const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+      const workspaceKey = `${workspace.line_id || "unknown"}-${workspaceId}`;
+      const isVisible = visibleWorkspaces.has(workspaceId);
+      const isVeryLowEfficiency = workspace.show_exclamation ?? (workspace.efficiency < 50 && workspace.efficiency >= 10);
+      const workspaceCropping = getWorkspaceCropping(workspaceId, workspace.workspace_name);
+      const workspaceStream = videoStreamsByWorkspaceId?.[workspaceId];
+      const lastSeenLabel = workspace.workspace_uuid ? lastSeenByWorkspaceId[workspace.workspace_uuid]?.timeSinceLastUpdate : void 0;
+      const r2Url = workspaceStream?.hls_url;
+      const fallbackUrl = getWorkspaceHlsUrl(workspace.workspace_name, workspace.line_id);
+      const hasR2Stream = Boolean(r2Url);
+      const useFallback = r2FallbackWorkspaces.has(workspaceId) || streamsReady && !hasR2Stream;
+      const hlsUrl = useFallback ? fallbackUrl : r2Url ?? "";
+      const isR2Stream = !useFallback && hasR2Stream;
+      const canAttemptR2 = hasR2Stream && !r2FallbackWorkspaces.has(workspaceId);
+      const shouldPlay = isVisible && Boolean(hlsUrl) && (!failedStreams.has(workspaceId) || canAttemptR2);
+      return {
+        workspace,
+        workspaceId,
+        workspaceKey,
+        isVisible,
+        isVeryLowEfficiency,
+        workspaceCropping,
+        fallbackUrl,
+        hlsUrl,
+        isR2Stream,
+        shouldPlay,
+        lastSeenLabel
+      };
+    });
+  }, [
+    sortedWorkspaces,
+    visibleWorkspaces,
+    getWorkspaceCropping,
+    videoStreamsByWorkspaceId,
+    lastSeenByWorkspaceId,
+    getWorkspaceHlsUrl,
+    r2FallbackWorkspaces,
+    streamsReady,
+    failedStreams
+  ]);
+  useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    workspaceCards.forEach((card) => {
+      map.set(card.workspaceKey, card);
+    });
+    return map;
+  }, [workspaceCards]);
+  const croppedActiveCount = useMemo(() => {
+    return workspaceCards.reduce((count, card) => {
+      if (card.shouldPlay && card.workspaceCropping) {
+        return count + 1;
+      }
+      return count;
+    }, 0);
+  }, [workspaceCards]);
+  const throttleCropping = croppedActiveCount > 10;
+  const effectiveCanvasFps = throttleCropping ? 10 : canvasConfig?.fps;
+  const effectiveUseRAF = throttleCropping ? false : canvasConfig?.useRAF;
   const displayMinuteBucket = Math.floor(Date.now() / 6e4);
-  return /* @__PURE__ */ jsx("div", { className: `relative overflow-hidden h-full w-full ${className}`, children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "h-full w-full p-3 sm:p-2", children: /* @__PURE__ */ jsx(
+  const renderWorkspaceCard = useCallback((card, className2) => /* @__PURE__ */ jsx(
     "div",
     {
-      className: "grid h-full w-full gap-3 sm:gap-2",
-      style: {
-        gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-        gridTemplateRows: `repeat(${gridRows}, 1fr)`,
-        gridAutoFlow: "row"
-      },
-      children: (() => {
-        const sortedWorkspaces = [...filteredWorkspaces].sort((a, b) => {
-          if (a.line_id !== b.line_id) {
-            return (a.line_id || "").localeCompare(b.line_id || "");
-          }
-          const aMatch = a.workspace_name.match(/WS(\d+)/);
-          const bMatch = b.workspace_name.match(/WS(\d+)/);
-          if (aMatch && bMatch) {
-            const aNum = parseInt(aMatch[1]);
-            const bNum = parseInt(bMatch[1]);
-            return aNum - bNum;
-          }
-          return a.workspace_name.localeCompare(b.workspace_name);
-        });
-        const workspaceCards = sortedWorkspaces.map((workspace) => {
-          const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
-          `${workspace.line_id || "unknown"}-${workspaceId}`;
-          const isVisible = visibleWorkspaces.has(workspaceId);
-          const isVeryLowEfficiency = workspace.show_exclamation ?? (workspace.efficiency < 50 && workspace.efficiency >= 10);
-          const workspaceCropping = getWorkspaceCropping(workspaceId, workspace.workspace_name);
-          const workspaceStream = videoStreamsByWorkspaceId?.[workspaceId];
-          const lastSeenLabel = workspace.workspace_uuid ? lastSeenByWorkspaceId[workspace.workspace_uuid]?.timeSinceLastUpdate : void 0;
-          const r2Url = workspaceStream?.hls_url;
-          const fallbackUrl = getWorkspaceHlsUrl(workspace.workspace_name, workspace.line_id);
-          const hasR2Stream = Boolean(r2Url);
-          const useFallback = r2FallbackWorkspaces.has(workspaceId) || streamsReady && !hasR2Stream;
-          const hlsUrl = useFallback ? fallbackUrl : r2Url ?? "";
-          const isR2Stream = !useFallback && hasR2Stream;
-          const canAttemptR2 = hasR2Stream && !r2FallbackWorkspaces.has(workspaceId);
-          const shouldPlay = isVisible && Boolean(hlsUrl) && (!failedStreams.has(workspaceId) || canAttemptR2);
-          return {
-            workspace,
-            workspaceId,
-            isVisible,
-            isVeryLowEfficiency,
-            workspaceCropping,
-            fallbackUrl,
-            hlsUrl,
-            isR2Stream,
-            shouldPlay,
-            lastSeenLabel
-          };
-        });
-        const croppedActiveCount = workspaceCards.reduce((count, card) => {
-          if (card.shouldPlay && card.workspaceCropping) {
-            return count + 1;
-          }
-          return count;
-        }, 0);
-        const throttleCropping = croppedActiveCount > 10;
-        const effectiveCanvasFps = throttleCropping ? 10 : canvasConfig?.fps;
-        const effectiveUseRAF = throttleCropping ? false : canvasConfig?.useRAF;
-        return workspaceCards.map((card) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-workspace-id": card.workspaceId,
-            className: "workspace-card relative w-full h-full",
-            children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx(
-              VideoCard,
-              {
-                workspace: card.workspace,
-                hlsUrl: card.hlsUrl,
-                shouldPlay: card.shouldPlay,
-                onClick: () => handleWorkspaceClick(card.workspace),
-                onFatalError: () => handleStreamError(card.workspaceId, {
-                  isR2Stream: card.isR2Stream,
-                  fallbackUrl: card.fallbackUrl
-                }),
-                isVeryLowEfficiency: card.isVeryLowEfficiency,
-                legend: effectiveLegend,
-                cropping: card.workspaceCropping,
-                canvasFps: effectiveCanvasFps,
-                displayName: (
-                  // Create line-aware lookup key: lineId_workspaceName
-                  // This ensures correct mapping when multiple lines have same workspace names
-                  displayNames[`${card.workspace.line_id}_${card.workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
-                  getWorkspaceDisplayName(card.workspace.workspace_name, card.workspace.line_id)
-                ),
-                lastSeenLabel: card.lastSeenLabel,
-                useRAF: effectiveUseRAF,
-                displayMinuteBucket,
-                compact: !selectedLine,
-                onMouseEnter: onWorkspaceHover ? () => onWorkspaceHover(card.workspaceId) : void 0,
-                onMouseLeave: onWorkspaceHoverEnd ? () => onWorkspaceHoverEnd(card.workspaceId) : void 0
-              }
-            ) })
+      "data-workspace-id": card.workspaceId,
+      className: className2,
+      children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx(
+        VideoCard,
+        {
+          workspace: card.workspace,
+          hlsUrl: card.hlsUrl,
+          shouldPlay: card.shouldPlay,
+          onClick: () => handleWorkspaceClick(card.workspace),
+          onFatalError: () => handleStreamError(card.workspaceId, {
+            isR2Stream: card.isR2Stream,
+            fallbackUrl: card.fallbackUrl
+          }),
+          isVeryLowEfficiency: card.isVeryLowEfficiency,
+          legend: effectiveLegend,
+          cropping: card.workspaceCropping,
+          canvasFps: effectiveCanvasFps,
+          displayName: displayNames[`${card.workspace.line_id}_${card.workspace.workspace_name}`] || getWorkspaceDisplayName(card.workspace.workspace_name, card.workspace.line_id),
+          lastSeenLabel: card.lastSeenLabel,
+          useRAF: effectiveUseRAF,
+          displayMinuteBucket,
+          compact: !selectedLine,
+          onMouseEnter: onWorkspaceHover ? () => onWorkspaceHover(card.workspaceId) : void 0,
+          onMouseLeave: onWorkspaceHoverEnd ? () => onWorkspaceHoverEnd(card.workspaceId) : void 0
+        }
+      ) })
+    },
+    card.workspaceKey
+  ), [
+    displayNames,
+    displayMinuteBucket,
+    effectiveCanvasFps,
+    effectiveLegend,
+    effectiveUseRAF,
+    getWorkspaceDisplayName,
+    handleStreamError,
+    handleWorkspaceClick,
+    onWorkspaceHover,
+    onWorkspaceHoverEnd,
+    selectedLine
+  ]);
+  return /* @__PURE__ */ jsx("div", { className: `relative overflow-hidden h-full w-full bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "h-full w-full px-1 sm:px-2 py-1 sm:py-2",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid h-full w-full gap-1.5 sm:gap-2",
+          style: {
+            gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
+            gridTemplateRows: `repeat(${gridRows}, 1fr)`,
+            gridAutoFlow: "row"
           },
-          card.workspaceId
-        ));
-      })()
+          children: workspaceCards.map((card) => renderWorkspaceCard(card, "workspace-card relative w-full h-full"))
+        }
+      )
     }
-  ) }) });
+  ) });
 });
 VideoGridView.displayName = "VideoGridView";
 var MapGridView = React142__default.memo(({
@@ -47648,7 +47717,7 @@ var LinePdfGenerator = ({
       doc.text(`${lineInfo.metrics.current_output} / ${lineInfo.metrics.line_threshold}`, 120, kpiStartY);
       createKPIBox(kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "normal");
-      doc.text("Average Issue Resolution Time:", 25, kpiStartY + kpiSpacing);
+      doc.text("Issue Resolution Time:", 25, kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "bold");
       const resolutionSeconds = issueResolutionSummary ? issueResolutionSummary.mean_resolution_seconds ?? issueResolutionSummary.median_resolution_seconds : null;
       const displayValue = resolutionSeconds !== null ? formatResolutionDuration2(resolutionSeconds) : "-";
@@ -50358,29 +50427,29 @@ var Legend5 = ({
 }) => {
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const exclamationLabel = useBottleneckLabel ? "Bottleneck" : "<50% efficiency";
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-3 bg-white/95 rounded-lg shadow-sm px-2 sm:px-4 py-1 sm:py-1.5 border border-gray-200/60 backdrop-blur-sm text-[10px] sm:text-sm", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 sm:gap-4 text-xs font-medium text-slate-600", children: [
     /* @__PURE__ */ jsxs("div", { className: "font-medium text-gray-700 hidden sm:block", children: [
       metricLabel,
       ":"
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#00AB45]/90 ring-1 ring-[#00AB45]/20" }),
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.green_min, effectiveLegend.green_max) })
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-[#00AB45]" }),
+        /* @__PURE__ */ jsx("span", { children: formatPercentRange(effectiveLegend.green_min, effectiveLegend.green_max) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#FFB020]/90 ring-1 ring-[#FFB020]/20" }),
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.yellow_min, effectiveLegend.yellow_max) })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-[#FFB020]" }),
+        /* @__PURE__ */ jsx("span", { children: formatPercentRange(effectiveLegend.yellow_min, effectiveLegend.yellow_max) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#E34329]/90 ring-1 ring-[#E34329]/20" }),
-        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.red_min, effectiveLegend.red_max) })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-2 h-2 sm:w-2.5 sm:h-2.5 rounded-full bg-[#E34329]" }),
+        /* @__PURE__ */ jsx("span", { children: formatPercentRange(effectiveLegend.red_min, effectiveLegend.red_max) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-6 bg-gray-200 mx-1" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-3 h-3 sm:w-5 sm:h-5 bg-[#E34329]/90 rounded-full ring-1 ring-[#E34329]/20 text-white font-bold text-[8px] sm:text-xs", children: "!" }),
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: exclamationLabel })
+    /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-slate-200 mx-1" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-3 h-3 sm:w-4 sm:h-4 bg-[#E34329] rounded-full text-white font-bold text-[8px] sm:text-[10px]", children: "!" }),
+      /* @__PURE__ */ jsx("span", { children: exclamationLabel })
     ] })
   ] });
 };
@@ -50490,6 +50559,7 @@ var WorkspaceGrid = React142__default.memo(({
   isPdfMode = false,
   customWorkspacePositions,
   lineNames = {},
+  lineOrder = [],
   factoryView = "factory",
   line2Uuid = "line-2",
   className = "",
@@ -50500,7 +50570,8 @@ var WorkspaceGrid = React142__default.memo(({
   videoStreamsLoading = false,
   displayNames = {},
   onWorkspaceHover,
-  onWorkspaceHoverEnd
+  onWorkspaceHoverEnd,
+  toolbarRightContent
 }) => {
   const dashboardConfig = useDashboardConfig();
   const mapViewEnabled = dashboardConfig?.mapViewConfig?.enabled ?? false;
@@ -50534,29 +50605,30 @@ var WorkspaceGrid = React142__default.memo(({
     () => viewMode === "video" ? getVideoGridLegendLabel(workspaces) : MAP_GRID_LEGEND_LABEL,
     [viewMode, workspaces]
   );
-  return /* @__PURE__ */ jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) }),
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col w-full h-full overflow-hidden bg-slate-50/50 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-none px-4 py-3 z-20 flex flex-row items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx("div", { className: "inline-flex bg-white/95 rounded-lg shadow-sm px-4 py-2 border border-slate-200/60 backdrop-blur-sm", children: /* @__PURE__ */ jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3 shrink-0", children: [
+        toolbarRightContent,
         mapViewEnabled && /* @__PURE__ */ jsx(
           "button",
           {
             onClick: handleViewModeToggle,
-            className: "flex items-center gap-2 px-3 py-1.5 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 transition-colors duration-200",
+            className: "flex items-center gap-2 px-3 py-1.5 bg-white border border-slate-200 rounded-md shadow-sm hover:bg-slate-50 transition-colors duration-200 text-slate-700",
             title: viewMode === "video" ? "Switch to Map View" : "Switch to Video View",
             children: viewMode === "video" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Map$1, { className: "w-4 h-4 text-gray-600" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-sm text-gray-700", children: "Map View" })
+              /* @__PURE__ */ jsx(Map$1, { className: "w-4 h-4 text-slate-500" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Map View" })
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Video, { className: "w-4 h-4 text-gray-600" }),
-              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-sm text-gray-700", children: "Video View" })
+              /* @__PURE__ */ jsx(Video, { className: "w-4 h-4 text-slate-500" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-sm font-medium", children: "Video View" })
             ] })
           }
         )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "sm:hidden mt-1 mr-32", children: /* @__PURE__ */ jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "absolute top-14 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: viewMode === "video" ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "sm:hidden px-3 py-2 bg-white border-b border-slate-200/60 z-10", children: /* @__PURE__ */ jsx(Legend5, { legend, useBottleneckLabel: hasFlowBuffers, metricLabel: legendMetricLabel }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 relative overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: viewMode === "video" ? /* @__PURE__ */ jsx(
       motion.div,
       {
         initial: { opacity: 0 },
@@ -50568,6 +50640,8 @@ var WorkspaceGrid = React142__default.memo(({
           VideoGridViewComponent,
           {
             workspaces,
+            lineNames,
+            lineOrder,
             videoSources,
             videoStreamsByWorkspaceId,
             videoStreamsLoading,
@@ -59430,6 +59504,7 @@ function HomeView({
     [dbLines]
   );
   const isSupervisor = user?.role_level === "supervisor";
+  const hasUser = Boolean(user);
   const visibleLineIds = useMemo(() => {
     const scoped = Array.from(new Set(allLineIds.filter(Boolean)));
     if (enabledLineIdSet.size === 0) {
@@ -59439,57 +59514,100 @@ function HomeView({
   }, [allLineIds, enabledLineIdSet]);
   const fallbackLineId = visibleLineIds[0] || defaultLineId;
   const defaultHomeLineId = fallbackLineId;
-  const availableLineIds = useMemo(() => {
-    if (visibleLineIds.length > 1) {
-      return [...visibleLineIds, factoryViewId];
-    }
-    return visibleLineIds;
-  }, [visibleLineIds, factoryViewId]);
-  const LINE_FILTER_STORAGE_KEY = "optifye_home_line_filter";
-  const [selectedLineId, setSelectedLineId] = useState(() => {
+  const visibleLineIdsKey = visibleLineIds.join(",");
+  const normalizeSelectedLineIds = (lineIdsToNormalize) => {
+    const allowedLineIds = new Set(visibleLineIds);
+    const requestedLineIds = new Set((lineIdsToNormalize || []).filter(Boolean));
+    const normalized = visibleLineIds.filter((lineId) => requestedLineIds.has(lineId) && allowedLineIds.has(lineId));
+    if (normalized.length > 0) {
+      return normalized;
+    }
+    if (defaultHomeLineId && allowedLineIds.has(defaultHomeLineId)) {
+      return [defaultHomeLineId];
+    }
+    return visibleLineIds.length > 0 ? [visibleLineIds[0]] : [];
+  };
+  const selectedLineIdsEqual = (left, right) => {
+    if (left.length !== right.length) return false;
+    return left.every((value, index) => value === right[index]);
+  };
+  const isAllLinesSelection = (lineIdsToCheck) => visibleLineIds.length > 0 && lineIdsToCheck.length === visibleLineIds.length;
+  const readPersistedSelectedLineIds = () => {
     if (typeof window === "undefined") {
-      return defaultHomeLineId;
+      return null;
     }
     try {
-      const savedLineId = sessionStorage.getItem(LINE_FILTER_STORAGE_KEY);
-      if (savedLineId) {
-        if (availableLineIds.includes(savedLineId)) {
-          return savedLineId;
+      const savedLineIds = sessionStorage.getItem("optifye_home_line_filters_v2");
+      if (savedLineIds) {
+        const parsedLineIds = JSON.parse(savedLineIds);
+        if (Array.isArray(parsedLineIds)) {
+          return normalizeSelectedLineIds(parsedLineIds.map((lineId) => String(lineId)));
+        }
+      }
+      const legacyLineId = sessionStorage.getItem("optifye_home_line_filter");
+      if (legacyLineId) {
+        if (legacyLineId === factoryViewId) {
+          return normalizeSelectedLineIds(visibleLineIds);
         }
+        return normalizeSelectedLineIds([legacyLineId]);
       }
     } catch (error) {
       console.warn("Failed to read line filter from sessionStorage:", error);
     }
-    return defaultHomeLineId;
-  });
+    return null;
+  };
+  const [selectedLineIds, setSelectedLineIds] = useState(() => readPersistedSelectedLineIds() || normalizeSelectedLineIds([defaultHomeLineId]));
+  const [isLineSelectorOpen, setIsLineSelectorOpen] = useState(false);
+  const [pendingSelectedLineIds, setPendingSelectedLineIds] = useState([]);
+  const lineSelectorRef = useRef(null);
   useEffect(() => {
-    if (!user || availableLineIds.length === 0) {
+    if (isLineSelectorOpen) {
+      setPendingSelectedLineIds(selectedLineIds);
+    }
+  }, [isLineSelectorOpen, selectedLineIds]);
+  useEffect(() => {
+    if (!hasUser || visibleLineIds.length === 0) {
       return;
     }
-    try {
-      const savedLineId = sessionStorage.getItem(LINE_FILTER_STORAGE_KEY);
-      if (savedLineId && availableLineIds.includes(savedLineId)) {
-        if (savedLineId !== selectedLineId) {
-          setSelectedLineId(savedLineId);
-        }
-        return;
+    const restoredLineIds = readPersistedSelectedLineIds();
+    setSelectedLineIds((previousSelectedLineIds) => {
+      if (restoredLineIds) {
+        return selectedLineIdsEqual(restoredLineIds, previousSelectedLineIds) ? previousSelectedLineIds : restoredLineIds;
       }
+      const normalizedCurrentLineIds = normalizeSelectedLineIds(previousSelectedLineIds);
+      return selectedLineIdsEqual(normalizedCurrentLineIds, previousSelectedLineIds) ? previousSelectedLineIds : normalizedCurrentLineIds;
+    });
+  }, [hasUser, visibleLineIdsKey, defaultHomeLineId, factoryViewId]);
+  useEffect(() => {
+    try {
+      sessionStorage.setItem("optifye_home_line_filters_v2", JSON.stringify(selectedLineIds));
+      sessionStorage.removeItem("optifye_home_line_filter");
     } catch (error) {
-      console.warn("Failed to read line filter from sessionStorage:", error);
+      console.warn("Failed to save line filter to sessionStorage:", error);
     }
-    if (availableLineIds.includes(selectedLineId)) {
+  }, [selectedLineIds]);
+  useEffect(() => {
+    if (!isLineSelectorOpen) {
       return;
     }
-    if (defaultHomeLineId !== selectedLineId) {
-      setSelectedLineId(defaultHomeLineId);
-    }
-  }, [
-    user,
-    availableLineIds,
-    defaultHomeLineId,
-    selectedLineId,
-    LINE_FILTER_STORAGE_KEY
-  ]);
+    const handleClickOutside = (event) => {
+      if (lineSelectorRef.current && !lineSelectorRef.current.contains(event.target)) {
+        setIsLineSelectorOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isLineSelectorOpen]);
+  const primarySelectedLineId = selectedLineIds[0] || defaultHomeLineId;
+  const isMultiLineSelection = selectedLineIds.length > 1;
+  const selectedLineIdsKey = selectedLineIds.join(",");
+  const selectedLineIdSet = useMemo(
+    () => new Set(selectedLineIds),
+    [selectedLineIds]
+  );
+  const metricsScopeLineId = isMultiLineSelection ? factoryViewId : primarySelectedLineId;
   const userCompanyId = useMemo(() => {
     return user?.properties?.company_id || user?.company_id || entityConfig.companyId;
   }, [user, entityConfig.companyId]);
@@ -59509,12 +59627,8 @@ function HomeView({
   useEffect(() => {
     const initDisplayNames = async () => {
       try {
-        if (selectedLineId === factoryViewId) {
-          for (const lineId of visibleLineIds) {
-            await preInitializeWorkspaceDisplayNames(lineId);
-          }
-        } else {
-          await preInitializeWorkspaceDisplayNames(selectedLineId);
+        for (const lineId of selectedLineIds) {
+          await preInitializeWorkspaceDisplayNames(lineId);
         }
         setDisplayNamesInitialized(true);
       } catch (error) {
@@ -59523,8 +59637,8 @@ function HomeView({
       }
     };
     initDisplayNames();
-  }, [selectedLineId, factoryViewId, visibleLineIds]);
-  const displayNameLineId = selectedLineId === factoryViewId ? void 0 : selectedLineId;
+  }, [selectedLineIdsKey]);
+  const displayNameLineId = isMultiLineSelection ? void 0 : primarySelectedLineId;
   const {
     displayNames: workspaceDisplayNames,
     loading: displayNamesLoading,
@@ -59553,7 +59667,8 @@ function HomeView({
     error: metricsError,
     refetch: refetchMetrics
   } = useDashboardMetrics({
-    lineId: selectedLineId,
+    lineId: metricsScopeLineId,
+    lineIds: selectedLineIds,
     onLineMetricsUpdate: handleLineMetricsUpdate,
     userAccessibleLineIds: visibleLineIds
     // Pass user's accessible lines for supervisor filtering
@@ -59561,10 +59676,8 @@ function HomeView({
   const trendGroups = useMemo(() => {
     const lineMetricsRows = lineMetrics || [];
     if (!lineMetricsRows.length) return null;
-    if (selectedLineId === factoryViewId) {
-      const candidateLineIds = visibleLineIds.filter((id3) => id3 && id3 !== factoryViewId);
-      if (!candidateLineIds.length) return null;
-      const rowsForLines = lineMetricsRows.filter((row2) => candidateLineIds.includes(row2?.line_id));
+    if (selectedLineIds.length > 1) {
+      const rowsForLines = lineMetricsRows.filter((row2) => selectedLineIdSet.has(row2?.line_id));
       if (!rowsForLines.length) return null;
       const groupsMap = /* @__PURE__ */ new Map();
       rowsForLines.forEach((row2) => {
@@ -59587,16 +59700,16 @@ function HomeView({
         shiftId: group.shiftId
       }));
     }
-    const row = lineMetricsRows.find((r2) => r2?.line_id === selectedLineId);
+    const row = lineMetricsRows.find((r2) => r2?.line_id === primarySelectedLineId);
     if (!row?.date || row?.shift_id === void 0 || row?.shift_id === null) {
       return null;
     }
     return [{
-      lineIds: [selectedLineId],
+      lineIds: [primarySelectedLineId],
       date: row.date,
       shiftId: row.shift_id
     }];
-  }, [selectedLineId, factoryViewId, visibleLineIds, lineMetrics]);
+  }, [lineMetrics, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
   const trendOptions = useMemo(() => {
     if (!trendGroups || !userCompanyId) return null;
     return {
@@ -59624,17 +59737,18 @@ function HomeView({
   }, [workspaceMetrics, metricsLoading, metricsError]);
   const kpis = useMemo(() => {
     const lineMetricsRows = lineMetrics || [];
-    if (selectedLineId === factoryViewId) {
-      if (metricsLoading && lineMetricsRows.length === 0) return null;
-      return aggregateKPIsFromLineMetricsRows(lineMetricsRows);
+    if (selectedLineIds.length > 1) {
+      const rowsForSelectedLines = lineMetricsRows.filter((row2) => selectedLineIdSet.has(row2?.line_id));
+      if (metricsLoading && rowsForSelectedLines.length === 0) return null;
+      return aggregateKPIsFromLineMetricsRows(rowsForSelectedLines);
     }
-    const row = lineMetricsRows.find((r2) => r2?.line_id === selectedLineId);
+    const row = lineMetricsRows.find((r2) => r2?.line_id === primarySelectedLineId);
     if (!row) {
       if (metricsLoading) return null;
       return buildKPIsFromLineMetricsRow(null);
     }
     return buildKPIsFromLineMetricsRow(row);
-  }, [selectedLineId, factoryViewId, lineMetrics, metricsLoading]);
+  }, [lineMetrics, metricsLoading, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
   const kpisWithTrend = useMemo(() => {
     if (!kpis) return null;
     if (!kpiTrend) return kpis;
@@ -59659,30 +59773,30 @@ function HomeView({
     };
   }, [kpis, kpiTrend]);
   const selectedLineMeta = useMemo(
-    () => dbLines.find((line) => line.id === selectedLineId),
-    [dbLines, selectedLineId]
+    () => selectedLineIds.length === 1 ? dbLines.find((line) => line.id === primarySelectedLineId) : void 0,
+    [dbLines, primarySelectedLineId, selectedLineIds.length]
   );
-  const selectedMonitoringMode = selectedLineId === factoryViewId ? "output" : selectedLineMeta?.monitoring_mode ?? "output";
+  const selectedMonitoringMode = selectedLineIds.length === 1 ? selectedLineMeta?.monitoring_mode ?? "output" : "output";
   const isUptimeMode = selectedMonitoringMode === "uptime";
   const averageIdleTimeSeconds = useMemo(() => {
     if (!isUptimeMode) return null;
-    const targetWorkspaces = selectedLineId === factoryViewId ? workspaceMetrics : workspaceMetrics.filter((ws) => ws.line_id === selectedLineId);
+    const targetWorkspaces = workspaceMetrics.filter((ws) => ws.line_id === primarySelectedLineId);
     const idleValues = targetWorkspaces.map((ws) => ws.idle_time).filter((value) => Number.isFinite(value));
     if (idleValues.length === 0) return 0;
     const totalIdle = idleValues.reduce((sum, value) => sum + value, 0);
     return totalIdle / idleValues.length;
-  }, [isUptimeMode, selectedLineId, factoryViewId, workspaceMetrics]);
+  }, [isUptimeMode, primarySelectedLineId, workspaceMetrics]);
   const {
     activeBreaks: allActiveBreaks,
     isLoading: breaksLoading,
     error: breaksError
-  } = useActiveBreaks(allLineIds);
+  } = useActiveBreaks(visibleLineIds);
   const activeBreaks = useMemo(() => {
-    if (selectedLineId === factoryViewId) {
+    if (isAllLinesSelection(selectedLineIds)) {
       return allActiveBreaks;
     }
-    return allActiveBreaks.filter((breakItem) => breakItem.lineId === selectedLineId);
-  }, [allActiveBreaks, selectedLineId, factoryViewId]);
+    return allActiveBreaks.filter((breakItem) => selectedLineIdSet.has(breakItem.lineId));
+  }, [allActiveBreaks, selectedLineIdSet, selectedLineIds]);
   const activeBreakLineIds = useMemo(
     () => new Set(activeBreaks.map((breakItem) => breakItem.lineId)),
     [activeBreaks]
@@ -59989,7 +60103,7 @@ function HomeView({
     // Round to 1 decimal
     kpisWithTrend?.avgCycleTime?.change,
     kpisWithTrend?.qualityCompliance?.value ? Math.round(kpisWithTrend.qualityCompliance.value) : null,
-    selectedLineId
+    selectedLineIdsKey
   ]);
   useEffect(() => {
     setIsHydrated(true);
@@ -60006,27 +60120,62 @@ function HomeView({
       setErrorMessage(null);
     }
   }, [metricsError]);
-  const handleLineChange = useCallback((value) => {
+  const getTrackedLineScope = useCallback((lineIdsForScope) => {
+    if (isAllLinesSelection(lineIdsForScope)) {
+      return factoryViewId;
+    }
+    if (lineIdsForScope.length === 1) {
+      return lineIdsForScope[0];
+    }
+    return "custom_multi";
+  }, [factoryViewId, visibleLineIds.length]);
+  const getLineSelectionLabel = useCallback((lineIdsForScope) => {
+    if (isAllLinesSelection(lineIdsForScope)) {
+      return "All Lines";
+    }
+    if (lineIdsForScope.length === 1) {
+      const lineId = lineIdsForScope[0];
+      return mergedLineNames[lineId] || `Line ${lineId.substring(0, 4)}`;
+    }
+    return `${lineIdsForScope.length} Lines Selected`;
+  }, [mergedLineNames, visibleLineIds.length]);
+  const updateSelectedLineIds = useCallback((nextLineIds) => {
+    const normalizedLineIds = normalizeSelectedLineIds(nextLineIds);
+    if (selectedLineIdsEqual(normalizedLineIds, selectedLineIds)) {
+      return;
+    }
     setIsChangingFilter(true);
-    setSelectedLineId(value);
+    setSelectedLineIds(normalizedLineIds);
     trackCoreEvent("monitor line filter changed", {
-      previous_line_id: selectedLineId,
-      new_line_id: value,
-      line_name: mergedLineNames[value] || (value === factoryViewId ? "All Lines" : `Line ${value.substring(0, 4)}`)
+      previous_line_id: getTrackedLineScope(selectedLineIds),
+      new_line_id: getTrackedLineScope(normalizedLineIds),
+      previous_line_ids: selectedLineIds,
+      new_line_ids: normalizedLineIds,
+      selected_line_count: normalizedLineIds.length,
+      selection_mode: isAllLinesSelection(normalizedLineIds) ? "all" : normalizedLineIds.length === 1 ? "single" : "custom",
+      line_name: getLineSelectionLabel(normalizedLineIds)
     });
-    try {
-      sessionStorage.setItem(LINE_FILTER_STORAGE_KEY, value);
-    } catch (error) {
-      console.warn("Failed to save line filter to sessionStorage:", error);
+  }, [factoryViewId, getLineSelectionLabel, getTrackedLineScope, selectedLineIds, selectedLineIdsKey, visibleLineIds]);
+  useCallback(() => {
+    updateSelectedLineIds(visibleLineIds);
+  }, [updateSelectedLineIds, visibleLineIds]);
+  useCallback((lineId) => {
+    const currentSelection = new Set(selectedLineIds);
+    if (currentSelection.has(lineId)) {
+      if (currentSelection.size <= 1) {
+        return;
+      }
+      currentSelection.delete(lineId);
+    } else {
+      currentSelection.add(lineId);
     }
-  }, [LINE_FILTER_STORAGE_KEY, selectedLineId, mergedLineNames, factoryViewId]);
+    updateSelectedLineIds(Array.from(currentSelection));
+  }, [selectedLineIds, updateSelectedLineIds]);
   useEffect(() => {
     if (!metricsLoading && isChangingFilter) {
-      if (workspaceMetrics.length > 0 || selectedLineId === factoryViewId) {
-        setIsChangingFilter(false);
-      }
+      setIsChangingFilter(false);
     }
-  }, [metricsLoading, workspaceMetrics, isChangingFilter, selectedLineId, factoryViewId]);
+  }, [metricsLoading, isChangingFilter]);
   useEffect(() => {
     if (!metricsLoading && !hasInitialDataLoaded) {
       setHasInitialDataLoaded(true);
@@ -60045,11 +60194,107 @@ function HomeView({
     if (visibleLineIds.length <= 1) {
       return null;
     }
-    return /* @__PURE__ */ jsxs(Select, { onValueChange: handleLineChange, value: selectedLineId, children: [
-      /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full sm:w-[200px] bg-white border border-gray-200 shadow-sm rounded-md h-9 sm:h-9 text-xs sm:text-sm px-2 sm:px-3", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a line" }) }),
-      /* @__PURE__ */ jsx(SelectContent, { className: "z-50 bg-white shadow-lg border border-gray-200 rounded-md text-xs sm:text-sm", children: availableLineIds.map((id3) => /* @__PURE__ */ jsx(SelectItem, { value: id3, children: mergedLineNames[id3] || (id3 === factoryViewId ? "All Lines" : `Line ${id3.substring(0, 4)}`) }, id3)) })
+    const allLinesSelected = isAllLinesSelection(pendingSelectedLineIds);
+    return /* @__PURE__ */ jsxs("div", { ref: lineSelectorRef, className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsLineSelectorOpen((previous) => !previous),
+          className: "flex min-w-[180px] items-center justify-between gap-2 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-left text-sm font-medium shadow-sm transition-colors hover:bg-slate-50 text-slate-700",
+          "aria-haspopup": "menu",
+          "aria-expanded": isLineSelectorOpen,
+          "aria-label": "Select lines",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: getLineSelectionLabel(selectedLineIds) }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: `h-4 w-4 text-slate-400 transition-transform ${isLineSelectorOpen ? "rotate-180" : ""}` })
+          ]
+        }
+      ),
+      isLineSelectorOpen ? /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 w-[280px] rounded-lg border border-slate-200 bg-white p-3 shadow-xl flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2 border-b border-slate-100", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-slate-800", children: "Select Lines" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setPendingSelectedLineIds([]),
+              className: "text-xs font-medium text-blue-600 hover:text-blue-700 transition-colors",
+              children: "Clear All"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-sm font-medium text-slate-900 hover:bg-slate-50 transition-colors", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              className: "h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500",
+              checked: allLinesSelected,
+              onChange: () => setPendingSelectedLineIds(allLinesSelected ? [] : visibleLineIds)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "All Lines" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-56 space-y-0.5 overflow-y-auto pr-1", children: visibleLineIds.map((lineId) => {
+          const isChecked = pendingSelectedLineIds.includes(lineId);
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors text-slate-700 hover:bg-slate-50",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500",
+                    checked: isChecked,
+                    onChange: () => {
+                      setPendingSelectedLineIds((prev) => {
+                        const current = new Set(prev);
+                        if (current.has(lineId)) {
+                          current.delete(lineId);
+                        } else {
+                          current.add(lineId);
+                        }
+                        return Array.from(current);
+                      });
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: mergedLineNames[lineId] || `Line ${lineId.substring(0, 4)}` })
+              ]
+            },
+            lineId
+          );
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "pt-3 pb-1 mt-1 border-t border-slate-100 flex justify-end", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (pendingSelectedLineIds.length > 0) {
+                updateSelectedLineIds(pendingSelectedLineIds);
+              }
+              setIsLineSelectorOpen(false);
+            },
+            disabled: pendingSelectedLineIds.length === 0,
+            className: "bg-blue-600 text-white px-4 py-1.5 rounded-md text-sm font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors w-full",
+            children: "Apply"
+          }
+        ) })
+      ] }) : null
     ] });
-  }, [availableLineIds, handleLineChange, selectedLineId, mergedLineNames, factoryViewId, visibleLineIds.length]);
+  }, [
+    getLineSelectionLabel,
+    isLineSelectorOpen,
+    mergedLineNames,
+    selectedLineIds,
+    pendingSelectedLineIds,
+    visibleLineIds,
+    updateSelectedLineIds,
+    isAllLinesSelection
+  ]);
   const useSmoothLoading = (isLoading, minDuration = 400) => {
     const [showLoading, setShowLoading] = useState(isLoading);
     const loadingStartRef2 = useRef(null);
@@ -60095,11 +60340,11 @@ function HomeView({
   const isDataLoading = metricsLoading || displayNamesLoading && workspaceMetrics.length === 0;
   const hasKpiDataReady = useMemo(() => {
     const lineMetricsRows = lineMetrics || [];
-    if (selectedLineId === factoryViewId) {
-      return lineMetricsRows.length > 0;
+    if (selectedLineIds.length > 1) {
+      return lineMetricsRows.some((row) => selectedLineIdSet.has(row?.line_id));
     }
-    return lineMetricsRows.some((row) => row?.line_id === selectedLineId);
-  }, [lineMetrics, selectedLineId, factoryViewId]);
+    return lineMetricsRows.some((row) => row?.line_id === primarySelectedLineId);
+  }, [lineMetrics, primarySelectedLineId, selectedLineIdSet, selectedLineIds.length]);
   const isKpiLoading = !hasKpiDataReady;
   useEffect(() => {
     const minLoadingDurationMs = 250;
@@ -60161,76 +60406,77 @@ function HomeView({
             DashboardHeader,
             {
               lineTitle,
-              lineId: selectedLineId === factoryViewId ? allLineIds[0] : selectedLineId,
+              lineId: primarySelectedLineId,
               className: "w-full",
               headerControls: kpiSectionControl
             }
           ) }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative", children: [
-            /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-1 sm:right-6 sm:top-3 z-30 flex items-center space-x-2", children: lineSelectorComponent && lineSelectorComponent }),
-            /* @__PURE__ */ jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-100px)] sm:min-h-0", children: workspaceMetricsWithBreakState.length > 0 ? /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                initial: { opacity: 0, scale: 0.98 },
-                animate: { opacity: 1, scale: 1 },
-                transition: { duration: 0.3 },
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative flex flex-col", children: /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[calc(100vh-100px)] sm:min-h-0", children: workspaceMetricsWithBreakState.length > 0 ? /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.98 },
+              animate: { opacity: 1, scale: 1 },
+              transition: { duration: 0.3 },
+              className: "h-full",
+              children: React142__default.createElement(WorkspaceGrid, {
+                workspaces: workspaceMetricsWithBreakState,
+                lineNames: mergedLineNames,
+                lineOrder: selectedLineIds,
+                factoryView: factoryViewId,
+                legend: efficiencyLegend,
+                videoSources,
+                videoStreamsByWorkspaceId,
+                videoStreamsLoading,
+                displayNames: workspaceDisplayNames,
+                hasFlowBuffers,
                 className: "h-full",
-                children: React142__default.createElement(WorkspaceGrid, {
-                  workspaces: workspaceMetricsWithBreakState,
-                  lineNames,
-                  factoryView: factoryViewId,
-                  legend: efficiencyLegend,
-                  videoSources,
-                  videoStreamsByWorkspaceId,
-                  videoStreamsLoading,
-                  displayNames: workspaceDisplayNames,
-                  hasFlowBuffers,
-                  className: "h-full",
-                  onWorkspaceHover: handleWorkspaceHover,
-                  onWorkspaceHoverEnd: handleWorkspaceHoverEnd
-                })
-              },
-              selectedLineId
-            ) : !shouldShowDataLoading && hasInitialDataLoaded ? /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                initial: { opacity: 0 },
-                animate: { opacity: 1 },
-                transition: { duration: 0.3 },
-                children: /* @__PURE__ */ jsx(NoWorkspaceData, { message: "No workspace data available. Select another line or check configurations." })
-              }
-            ) : /* @__PURE__ */ jsx(
-              motion.div,
-              {
-                initial: { opacity: 0, scale: 0.98 },
-                animate: { opacity: 1, scale: 1 },
-                transition: { duration: 0.3 },
+                toolbarRightContent: lineSelectorComponent,
+                onWorkspaceHover: handleWorkspaceHover,
+                onWorkspaceHoverEnd: handleWorkspaceHoverEnd
+              })
+            },
+            selectedLineIdsKey
+          ) : !shouldShowDataLoading && hasInitialDataLoaded ? /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              transition: { duration: 0.3 },
+              children: /* @__PURE__ */ jsx(NoWorkspaceData, { message: "No workspace data available. Adjust the selected lines or check configurations." })
+            }
+          ) : /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.98 },
+              animate: { opacity: 1, scale: 1 },
+              transition: { duration: 0.3 },
+              className: "h-full",
+              children: React142__default.createElement(WorkspaceGrid, {
+                workspaces: [],
+                // Show empty grid while loading
+                lineNames: mergedLineNames,
+                lineOrder: selectedLineIds,
+                factoryView: factoryViewId,
+                legend: efficiencyLegend,
+                videoSources,
+                videoStreamsByWorkspaceId,
+                videoStreamsLoading,
+                displayNames: workspaceDisplayNames,
+                hasFlowBuffers,
                 className: "h-full",
-                children: React142__default.createElement(WorkspaceGrid, {
-                  workspaces: [],
-                  // Show empty grid while loading
-                  lineNames,
-                  factoryView: factoryViewId,
-                  legend: efficiencyLegend,
-                  videoSources,
-                  videoStreamsByWorkspaceId,
-                  videoStreamsLoading,
-                  displayNames: workspaceDisplayNames,
-                  hasFlowBuffers,
-                  className: "h-full",
-                  onWorkspaceHover: handleWorkspaceHover,
-                  onWorkspaceHoverEnd: handleWorkspaceHoverEnd
-                })
-              },
-              selectedLineId
-            ) })
-          ] })
+                toolbarRightContent: lineSelectorComponent,
+                onWorkspaceHover: handleWorkspaceHover,
+                onWorkspaceHoverEnd: handleWorkspaceHoverEnd
+              })
+            },
+            selectedLineIdsKey
+          ) }) })
         ] }),
         /* @__PURE__ */ jsx(
           BreakNotificationPopup,
           {
             activeBreaks,
-            lineNames,
+            lineNames: mergedLineNames,
             isVisible: !breaksLoading && !breaksError && !breakNotificationsDismissed,
             onDismiss: () => setBreakNotificationsDismissed(true)
           }
@@ -61379,9 +61625,9 @@ var MetricCards = memo$1(({
       animate: "animate",
       className: `grid grid-cols-1 sm:grid-cols-2 ${largeGridColumns} gap-3 sm:gap-4 mb-2 h-auto lg:flex-[2] lg:min-h-[250px]`,
       children: [
-        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 mb-2 text-center", children: "Line Output" }),
-          /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Line Output" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(
             OutputProgressChart,
             {
               currentOutput: lineInfo?.metrics.current_output || 0,
@@ -61389,19 +61635,19 @@ var MetricCards = memo$1(({
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
-            /* @__PURE__ */ jsxs("span", { className: "text-xl sm:text-2xl md:text-2xl lg:text-3xl text-gray-500 ml-1 sm:ml-2", children: [
+        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Underperforming Workspaces" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-1 min-h-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline", children: [
+            /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap tracking-tight text-4xl sm:text-5xl md:text-5xl lg:text-4xl xl:text-5xl 2xl:text-6xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xl sm:text-2xl md:text-2xl lg:text-xl xl:text-2xl 2xl:text-3xl text-gray-500 ml-1 sm:ml-2", children: [
               "/ ",
               lineInfo?.metrics.total_workspaces
             ] })
-          ] })
+          ] }) })
         ] }),
-        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxs("span", { className: `whitespace-nowrap tracking-tight text-3xl sm:text-4xl md:text-5xl lg:text-5xl xl:text-5xl 2xl:text-6xl font-bold ${efficiencyColorClass}`, children: [
+        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Average Efficiency" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-1 min-h-0", children: /* @__PURE__ */ jsxs("span", { className: `whitespace-nowrap tracking-tight text-4xl sm:text-5xl md:text-5xl lg:text-4xl xl:text-5xl 2xl:text-6xl font-bold ${efficiencyColorClass}`, children: [
             efficiency.toFixed(1),
             "%"
           ] }) })
@@ -61410,11 +61656,11 @@ var MetricCards = memo$1(({
           motion.div,
           {
             variants: itemVariants,
-            className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 h-[240px] sm:h-[260px] md:h-auto",
+            className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1.5 mb-2 relative group z-10", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700", children: "Average Issue Resolution Time" }),
-                /* @__PURE__ */ jsx(InformationCircleIcon, { className: "w-4 h-4 text-gray-400 cursor-help" }),
+              /* @__PURE__ */ jsxs("div", { className: "h-10 sm:h-12 flex items-start justify-center gap-1.5 mb-2 mt-1 relative group z-10", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Issue Resolution Time" }),
+                /* @__PURE__ */ jsx(InformationCircleIcon, { className: "w-4 h-4 text-gray-400 cursor-help flex-shrink-0" }),
                 /* @__PURE__ */ jsxs("div", { className: "absolute top-full left-1/2 transform -translate-x-1/2 mt-2.5 w-[260px] p-3 bg-white rounded-lg shadow-xl border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none z-50", children: [
                   /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-gray-600 leading-relaxed mb-2.5 px-1", children: "The average time a supervisor takes to resolve a workstation in red." }),
                   /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-md py-1.5 border border-gray-100/80", children: /* @__PURE__ */ jsxs("p", { className: "text-center font-medium text-[11px] text-gray-500", children: [
@@ -61424,13 +61670,13 @@ var MetricCards = memo$1(({
                   /* @__PURE__ */ jsx("div", { className: "absolute -top-1.5 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-white border-l border-t border-gray-200 rotate-45" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-2.5rem)] flex flex-col items-center justify-center gap-3", children: /* @__PURE__ */ jsx("span", { className: `whitespace-nowrap tracking-tight text-3xl sm:text-4xl md:text-5xl lg:text-5xl xl:text-5xl 2xl:text-6xl font-bold ${shouldMaskIssueResolution ? "text-gray-400" : "text-gray-900"}`, children: issueResolutionValue }) })
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-1 min-h-0", children: /* @__PURE__ */ jsx("span", { className: `whitespace-nowrap tracking-tight text-3xl sm:text-4xl md:text-4xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold ${shouldMaskIssueResolution ? "text-gray-400" : "text-gray-900"}`, children: issueResolutionValue }) })
             ]
           }
         ),
-        showIdleTime && /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center mb-2", children: "Idle Time Breakdown" }),
-          /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx(
+        showIdleTime && /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Idle Time Breakdown" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
             IdleTimeReasonChart,
             {
               data: idleTimeData?.chartData,
@@ -61490,9 +61736,9 @@ var LineUptimeMetricCards = memo$1(({
       animate: "animate",
       className: `grid grid-cols-1 sm:grid-cols-2 ${showIdleTime ? "lg:grid-cols-4" : "lg:grid-cols-3"} gap-3 sm:gap-4 mb-2 h-auto lg:flex-[2] lg:min-h-[250px]`,
       children: [
-        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 mb-2 text-center", children: "Utilization" }),
-          /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Utilization" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(
             OutputProgressChart,
             {
               currentOutput: Number(utilizationText),
@@ -61500,17 +61746,17 @@ var LineUptimeMetricCards = memo$1(({
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center mb-2", children: "Stoppages" }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx("span", { className: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-red-600", children: stoppages }) })
+        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Stoppages" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-1 min-h-0", children: /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap tracking-tight text-4xl sm:text-5xl md:text-5xl lg:text-4xl xl:text-5xl 2xl:text-6xl font-bold text-red-600", children: stoppages }) })
         ] }),
-        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center mb-2", children: "Average Idle Time" }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx("span", { className: `text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold ${idleTimeSeconds <= 0 ? "text-green-500" : idleTimeSeconds <= 300 ? "text-yellow-500" : "text-red-500"}`, children: formatIdleTime(idleTimeSeconds) }) })
+        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Average Idle Time" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-1 min-h-0", children: /* @__PURE__ */ jsx("span", { className: `whitespace-nowrap tracking-tight text-3xl sm:text-4xl md:text-5xl lg:text-4xl xl:text-5xl 2xl:text-6xl font-bold ${idleTimeSeconds <= 0 ? "text-green-500" : idleTimeSeconds <= 300 ? "text-yellow-500" : "text-red-500"}`, children: formatIdleTime(idleTimeSeconds) }) })
         ] }),
-        showIdleTime && /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center mb-2", children: "Idle Time Breakdown" }),
-          /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx(
+        showIdleTime && /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Idle Time Breakdown" }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
             IdleTimeReasonChart,
             {
               data: idleTimeData?.chartData,