@optifye/dashboard-core 5.0.0 → 6.0.1

package/dist/index.js

@@ -79,12 +79,15 @@ var DEFAULT_DATABASE_CONFIG = {
   }
 };
 var DEFAULT_ENTITY_CONFIG = {
-  companyId: void 0,
-  factoryId: void 0,
-  defaultLineId: void 0,
-  secondaryLineId: void 0,
+  companyId: "87ca8ebc-ef29-4543-9e12-efc526a9b669",
+  factoryId: "b3e44be4-730e-4276-b2ce-701c79d66ffa",
+  defaultLineId: "98a2287e-8d55-4020-b00d-b9940437e3e1",
+  secondaryLineId: "d93997bb-ecac-4478-a4a6-008d536b724c",
   factoryViewId: "factory",
-  lineNames: {}
+  lineNames: {
+    "98a2287e-8d55-4020-b00d-b9940437e3e1": "Cell 8",
+    "d93997bb-ecac-4478-a4a6-008d536b724c": "Cell 7"
+  }
 };
 var DEFAULT_SHIFT_CONFIG = {
   dayShift: {
@@ -101,9 +104,12 @@ var DEFAULT_SHIFT_CONFIG = {
 };
 var DEFAULT_WORKSPACE_CONFIG = {
   displayNames: {
-    "WS01": "fillin",
-    "WS02": "Capping Station",
-    "WS03": "Filling station"
+    "Cell 8 WS1": "Swaging 1",
+    "Cell 8 WS2": "Bond Testing 1",
+    "Cell 8 WS3": "QA Check 1",
+    "Cell 7 WS1": "Swaging 2",
+    "Cell 7 WS2": "Bond Testing 2",
+    "Cell 7 WS3": "QA Check 2"
   },
   specialWorkspaces: {
     startId: 19,
@@ -160,7 +166,8 @@ var DEFAULT_VIDEO_CONFIG = {
     useRAF: true
   }
 };
-var LINE_1_UUID = "910a224b-0abc-459a-babb-4c899824cfe7";
+var LINE_1_UUID = "98a2287e-8d55-4020-b00d-b9940437e3e1";
+var LINE_2_UUID = "d93997bb-ecac-4478-a4a6-008d536b724c";
 var DEFAULT_CONFIG = {
   apiBaseUrl: void 0,
   // No default base URL
@@ -1020,7 +1027,7 @@ var dashboardService = {
     const formattedStartDate = formatDate(startDate);
     const formattedEndDate = formatDate(endDate);
     try {
-      const { data, error } = await supabase.from(metricsTable).select("date, shift_id, efficiency, total_output, avg_cycle_time, ideal_output, avg_pph, pph_threshold, workspace_rank").eq("workspace_id", workspaceUuid).gte("date", formattedStartDate).lte("date", formattedEndDate).order("date", { ascending: true }).order("shift_id", { ascending: true });
+      const { data, error } = await supabase.from(metricsTable).select("date, shift_id, efficiency, total_output, avg_cycle_time, ideal_output, avg_pph, pph_threshold, workspace_rank, idle_time").eq("workspace_id", workspaceUuid).gte("date", formattedStartDate).lte("date", formattedEndDate).order("date", { ascending: true }).order("shift_id", { ascending: true });
       if (error) throw error;
       if (!data) return [];
       const transformedData = data.map((item) => ({
@@ -1033,7 +1040,8 @@ var dashboardService = {
         ideal_output: item.ideal_output || 0,
         avg_pph: item.avg_pph || 0,
         pph_threshold: item.pph_threshold || 0,
-        workspace_rank: item.workspace_rank || 0
+        workspace_rank: item.workspace_rank || 0,
+        idle_time: item.idle_time || 0
       }));
       return transformedData;
     } catch (err) {
@@ -3392,6 +3400,9 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
   const databaseConfig = useDatabaseConfig();
   const dateTimeConfig = useDateTimeConfig();
   const shiftConfig = useShiftConfig();
+  const defaultTimezone = dateTimeConfig?.defaultTimezone || "UTC";
+  const configuredLineMetricsTable = databaseConfig?.tables?.lineMetrics ?? "line_metrics";
+  const schema = databaseConfig?.schema ?? "public";
   const supabase = useSupabase();
   const [metrics2, setMetrics] = React14.useState(() => getCache(lineId) || { workspaceMetrics: [], lineMetrics: [] });
   const [isLoading, setIsLoading] = React14.useState(() => !getCache(lineId));
@@ -3404,9 +3415,6 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
     () => getCompanyMetricsTableName(entityConfig.companyId, "performance_metrics"),
     [entityConfig.companyId]
   );
-  const configuredLineMetricsTable = databaseConfig.tables?.lineMetrics ?? "line_metrics";
-  const schema = databaseConfig.schema ?? "public";
-  const defaultTimezone = dateTimeConfig.defaultTimezone || "UTC";
   React14.useEffect(() => {
     lineIdRef.current = lineId;
     const cachedData = getCache(lineId);
@@ -3416,7 +3424,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
   const fetchAllMetrics = React14.useCallback(async () => {
     const currentLineIdToUse = lineIdRef.current;
     if (!currentLineIdToUse || !supabase || isFetchingRef.current || companySpecificMetricsTable.includes("unknown_company")) {
-      if (!metrics2.workspaceMetrics.length && !metrics2.lineMetrics.length) setIsLoading(false);
+      if (!metrics2?.workspaceMetrics?.length && !metrics2?.lineMetrics?.length) setIsLoading(false);
       if (companySpecificMetricsTable.includes("unknown_company") && !error) {
         setError({ message: "Company ID not configured for metrics table.", code: "CONFIG_ERROR" });
       }
@@ -3437,7 +3445,12 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
       if (targetLineIds.length === 0) {
         throw new Error("No target line IDs available for fetching metrics.");
       }
-      const { data: workspaceData, error: workspaceError } = await supabase.from(companySpecificMetricsTable).select("company_id,line_id,shift_id,date,workspace_id,workspace_name,total_output,avg_pph,performance_score,avg_cycle_time,trend_score,ideal_output,efficiency,total_day_output").eq("date", operationalDate).eq("shift_id", currentShiftDetails.shiftId).in("line_id", targetLineIds);
+      const isFactoryView = currentLineIdToUse === (entityConfig.factoryViewId || "factory");
+      let workspaceQuery = supabase.from(companySpecificMetricsTable).select("company_id,line_id,shift_id,date,workspace_id,workspace_name,total_output,avg_pph,performance_score,avg_cycle_time,trend_score,ideal_output,efficiency,total_day_output").eq("date", operationalDate).eq("shift_id", currentShiftDetails.shiftId);
+      if (!isFactoryView) {
+        workspaceQuery = workspaceQuery.in("line_id", targetLineIds);
+      }
+      const { data: workspaceData, error: workspaceError } = await workspaceQuery;
       if (workspaceError) {
         throw workspaceError;
       }
@@ -3468,7 +3481,11 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
         const wsNumB = parseInt(b.workspace_name?.replace(/[^0-9]/g, "") || "0");
         return wsNumA - wsNumB;
       });
-      const { data: lineData, error: lineError } = await supabase.from(configuredLineMetricsTable).select("*").eq("date", operationalDate).eq("shift_id", currentShiftDetails.shiftId).in("line_id", targetLineIds);
+      let lineMetricsQuery = supabase.from(configuredLineMetricsTable).select("*").eq("date", operationalDate).eq("shift_id", currentShiftDetails.shiftId);
+      if (!isFactoryView) {
+        lineMetricsQuery = lineMetricsQuery.in("line_id", targetLineIds);
+      }
+      const { data: lineData, error: lineError } = await lineMetricsQuery;
       if (lineError) {
         throw lineError;
       }
@@ -3488,9 +3505,9 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
     }
   }, [
     supabase,
-    metrics2.workspaceMetrics.length,
+    metrics2?.workspaceMetrics?.length || 0,
     // To re-evaluate setIsLoading in fetchAllMetrics if called directly
-    metrics2.lineMetrics.length,
+    metrics2?.lineMetrics?.length || 0,
     // To re-evaluate setIsLoading in fetchAllMetrics if called directly
     companySpecificMetricsTable,
     configuredLineMetricsTable,
@@ -3578,8 +3595,8 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
     // Add lineId from props to re-run effect if it changes, managed by lineIdRef inside effect
   ]);
   return {
-    workspaceMetrics: metrics2.workspaceMetrics,
-    lineMetrics: metrics2.lineMetrics,
+    workspaceMetrics: metrics2?.workspaceMetrics || [],
+    lineMetrics: metrics2?.lineMetrics || [],
     isLoading,
     error,
     refetch: fetchAllMetrics
@@ -3612,6 +3629,7 @@ var setCache2 = (lineId, data) => {
 var useLineKPIs = ({ lineId }) => {
   useDashboardConfig();
   const entityConfig = useEntityConfig();
+  const isFactoryView = lineId === (entityConfig.factoryViewId || "factory");
   const databaseConfig = useDatabaseConfig();
   const dateTimeConfig = useDateTimeConfig();
   const shiftConfig = useShiftConfig();
@@ -3669,7 +3687,7 @@ var useLineKPIs = ({ lineId }) => {
       isFetchingRef.current = false;
       updateQueueRef.current = false;
     }
-  }, [dashboardServiceInstance, kpis, defaultTimezone, shiftConfig, entityConfig.companyId]);
+  }, [dashboardServiceInstance, kpis, defaultTimezone, shiftConfig, entityConfig.companyId, isFactoryView]);
   const queueUpdate = React14.useCallback(() => {
     if (updateQueueRef.current) return;
     updateQueueRef.current = true;
@@ -3744,7 +3762,7 @@ var useLineKPIs = ({ lineId }) => {
       }
       activeChannels.forEach((ch) => supabase.removeChannel(ch).catch((err) => console.error("[useLineKPIs] Error removing KPI channel:", err)));
     };
-  }, [supabase, lineId, fetchKPIs, queueUpdate, dashboardServiceInstance, entityConfig, schema, lineMetricsTable, companySpecificMetricsTable, defaultTimezone, shiftConfig, kpis]);
+  }, [supabase, lineId, fetchKPIs, queueUpdate, dashboardServiceInstance, entityConfig, schema, lineMetricsTable, companySpecificMetricsTable, defaultTimezone, shiftConfig, kpis, isFactoryView]);
   return {
     kpis,
     isLoading,
@@ -5180,6 +5198,120 @@ var useActiveBreaks = (lineIds) => {
     error
   };
 };
+var useAllWorkspaceMetrics = (options) => {
+  const entityConfig = useEntityConfig();
+  const databaseConfig = useDatabaseConfig();
+  const dateTimeConfig = useDateTimeConfig();
+  const shiftConfig = useShiftConfig();
+  const supabase = useSupabase();
+  const [workspaces, setWorkspaces] = React14.useState([]);
+  const [loading, setLoading] = React14.useState(true);
+  const [error, setError] = React14.useState(null);
+  const [initialized, setInitialized] = React14.useState(false);
+  const queryShiftId = React14.useMemo(() => {
+    const currentShift = getCurrentShift(
+      dateTimeConfig.defaultTimezone || "Asia/Kolkata",
+      shiftConfig
+    );
+    return options?.initialShiftId !== void 0 ? options.initialShiftId : currentShift.shiftId;
+  }, [options?.initialShiftId, dateTimeConfig.defaultTimezone, shiftConfig]);
+  const queryDate = React14.useMemo(() => {
+    return options?.initialDate || getOperationalDate(dateTimeConfig.defaultTimezone);
+  }, [options?.initialDate, dateTimeConfig.defaultTimezone]);
+  const metricsTable = React14.useMemo(() => {
+    const companyId = entityConfig.companyId;
+    if (!companyId) return "";
+    const metricsTablePrefix = getMetricsTablePrefix();
+    return `${metricsTablePrefix}_${companyId.replace(/-/g, "_")}`;
+  }, [entityConfig.companyId]);
+  const schema = databaseConfig.schema ?? "public";
+  const fetchWorkspaceMetrics = React14.useCallback(async () => {
+    if (!initialized) {
+      setLoading(true);
+    }
+    setError(null);
+    try {
+      console.log("Fetching all workspace metrics with params:", {
+        queryDate,
+        queryShiftId,
+        metricsTable
+      });
+      const { data, error: fetchError } = await supabase.from(metricsTable).select(`
+          workspace_name,
+          total_output,
+          avg_pph,
+          efficiency,
+          workspace_id,
+          avg_cycle_time,
+          performance_score,
+          trend_score,
+          line_id,
+          total_day_output
+        `).eq("date", queryDate).eq("shift_id", queryShiftId).order("efficiency", { ascending: false });
+      if (fetchError) throw fetchError;
+      const transformedData = (data || []).map((item) => ({
+        company_id: entityConfig.companyId || "unknown",
+        line_id: item.line_id,
+        shift_id: queryShiftId,
+        date: queryDate,
+        workspace_uuid: item.workspace_id,
+        workspace_name: item.workspace_name,
+        action_count: item.total_output || 0,
+        pph: item.avg_pph || 0,
+        performance_score: item.performance_score || 0,
+        avg_cycle_time: item.avg_cycle_time || 0,
+        trend: item.trend_score === 1 ? 2 : 0,
+        predicted_output: 0,
+        efficiency: item.efficiency || 0,
+        action_threshold: item.total_day_output || 0
+      }));
+      setWorkspaces(transformedData);
+      setInitialized(true);
+    } catch (err) {
+      console.error("Error fetching all workspace metrics:", err);
+      setError({ message: err.message, code: err.code || "FETCH_ERROR" });
+    } finally {
+      setLoading(false);
+    }
+  }, [queryDate, queryShiftId, metricsTable, supabase, entityConfig.companyId]);
+  React14.useEffect(() => {
+    if (!initialized) {
+      fetchWorkspaceMetrics();
+    }
+    const setupSubscription = () => {
+      const filter2 = `date=eq.${queryDate} AND shift_id=eq.${queryShiftId}`;
+      console.log("Setting up subscription for all workspaces with filter:", filter2);
+      const channel2 = supabase.channel(`all-workspace-metrics-${Date.now()}`).on(
+        "postgres_changes",
+        {
+          event: "*",
+          schema,
+          table: metricsTable,
+          filter: filter2
+        },
+        async (payload) => {
+          console.log("All workspace metrics update received:", payload);
+          await fetchWorkspaceMetrics();
+        }
+      ).subscribe();
+      return channel2;
+    };
+    const channel = setupSubscription();
+    return () => {
+      if (channel) {
+        supabase.removeChannel(channel);
+      }
+    };
+  }, [queryDate, queryShiftId, metricsTable, fetchWorkspaceMetrics, initialized, supabase, schema]);
+  React14.useEffect(() => {
+    setInitialized(false);
+  }, [queryDate, queryShiftId]);
+  const refreshWorkspaces = fetchWorkspaceMetrics;
+  return React14.useMemo(
+    () => ({ workspaces, loading, error, refreshWorkspaces }),
+    [workspaces, loading, error, refreshWorkspaces]
+  );
+};
 var MAX_RETRIES = 10;
 var RETRY_DELAY = 500;
 function useNavigation(customNavigate) {
@@ -5226,8 +5358,8 @@ function useNavigation(customNavigate) {
     router$1.push("/shifts");
   }, [router$1]);
   const goToLeaderboard = React14.useCallback(() => {
-    const lineId = entityConfig?.defaultLineId || "line-1";
-    router$1.push(`/leaderboard/${lineId}`);
+    entityConfig?.defaultLineId || "line-1";
+    router$1.push(`/leaderboard`);
   }, [router$1, entityConfig?.defaultLineId]);
   const goToFactoryView = React14.useCallback(() => {
     router$1.push("/factory-view");
@@ -17367,7 +17499,8 @@ var VideoCard = React14__namespace.default.memo(({
   cropping,
   canvasFps = 30,
   useRAF = true,
-  className = ""
+  className = "",
+  compact = false
 }) => {
   const videoRef = React14.useRef(null);
   const canvasRef = React14.useRef(null);
@@ -17388,7 +17521,6 @@ var VideoCard = React14__namespace.default.memo(({
     });
   }
   const displayName = getWorkspaceDisplayName(workspace.workspace_name);
-  workspace.workspace_uuid || workspace.workspace_name;
   const getEfficiencyOverlayColor = (efficiency) => {
     if (efficiency >= 80) {
       return "bg-[#00D654]/25";
@@ -17431,15 +17563,15 @@ var VideoCard = React14__namespace.default.memo(({
         }
       },
       children: [
-        isVeryLowEfficiency && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1 left-2 z-30", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        isVeryLowEfficiency && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute ${compact ? "top-0.5 left-1" : "top-1 left-2"} z-30`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-1 bg-red-400/50 rounded-full blur-sm animate-pulse" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -inset-0.5 bg-red-500/30 rounded-full blur-md animate-ping [animation-duration:1.5s]" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[#E34329] w-5 h-5 rounded-full flex items-center justify-center text-white font-bold text-xs shadow-lg ring-2 ring-red-400/40 border border-red-400/80 animate-pulse", children: "!" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `bg-[#E34329] ${compact ? "w-4 h-4" : "w-5 h-5"} rounded-full flex items-center justify-center text-white font-bold ${compact ? "text-[10px]" : "text-xs"} shadow-lg ring-2 ring-red-400/40 border border-red-400/80 animate-pulse`, children: "!" })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: "w-6 h-6 text-gray-500" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 mt-1", children: "Loading..." })
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-10", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -17462,11 +17594,11 @@ var VideoCard = React14__namespace.default.memo(({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-0 z-20 pointer-events-none ${efficiencyOverlayClass}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 z-30 bg-black/70 backdrop-blur-sm rounded px-2 py-0.5 text-white text-xs font-semibold border border-white/10", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute ${compact ? "top-1 right-1" : "top-2 right-2"} z-30 bg-black/70 backdrop-blur-sm rounded ${compact ? "px-1.5 py-0.5" : "px-2 py-0.5"} text-white ${compact ? "text-[10px]" : "text-xs"} font-semibold border border-white/10`, children: [
             Math.round(workspace.efficiency),
             "%"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-1 bg-black/50 z-30", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute bottom-0 left-0 right-0 ${compact ? "h-0.5" : "h-1"} bg-black/50 z-30`, children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: `h-full ${efficiencyBarClass} transition-all duration-500`,
@@ -17474,22 +17606,22 @@ var VideoCard = React14__namespace.default.memo(({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 flex justify-between items-center z-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 ${compact ? "p-1" : "p-1.5"} flex justify-between items-center z-10`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { size: 12, className: "text-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-xs font-medium tracking-wide", children: displayName })
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { size: compact ? 10 : 12, className: "text-white" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-white ${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: displayName })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${compact ? "gap-1" : "gap-1.5"}`, children: [
             trendInfo && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: `text-lg ${trendInfo.color}`,
+                className: `${compact ? "text-sm" : "text-lg"} ${trendInfo.color}`,
                 style: { lineHeight: 1, display: "flex", alignItems: "center" },
                 children: trendInfo.arrow
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-xs", children: "Live" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full bg-green-500` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white ${compact ? "text-[10px]" : "text-xs"}`, children: "Live" })
           ] })
         ] })
       ]
@@ -17516,7 +17648,6 @@ var VideoGridView = React14__namespace.default.memo(({
   workspaces,
   selectedLine,
   className = "",
-  lineIdMapping = {},
   videoSources = {}
 }) => {
   const router$1 = router.useRouter();
@@ -17581,15 +17712,15 @@ var VideoGridView = React14__namespace.default.memo(({
     let bestScore = 0;
     const targetAspectRatio = 16 / 9;
     const gap = 8;
-    const maxCols = Math.min(count, 6);
+    const maxCols = Math.min(count, selectedLine ? 6 : 12);
     for (let cols = 1; cols <= maxCols; cols++) {
       const rows = Math.ceil(count / cols);
       const availableWidth = containerWidth - gap * (cols - 1);
       const availableHeight = containerHeight - gap * (rows - 1);
       const cellWidth = availableWidth / cols;
       const cellHeight = availableHeight / rows;
-      const minCellWidth = containerWidth < 800 ? 120 : 150;
-      const minCellHeight = containerHeight < 600 ? 80 : 100;
+      const minCellWidth = selectedLine ? containerWidth < 800 ? 120 : 150 : containerWidth < 800 ? 80 : 100;
+      const minCellHeight = selectedLine ? containerHeight < 600 ? 80 : 100 : containerHeight < 600 ? 60 : 80;
       if (cellWidth < minCellWidth || cellHeight < minCellHeight) continue;
       const totalUsedArea = cellWidth * cellHeight * count;
       const totalAvailableArea = containerWidth * containerHeight;
@@ -17606,7 +17737,7 @@ var VideoGridView = React14__namespace.default.memo(({
       bestCols = Math.ceil(Math.sqrt(count));
     }
     setGridCols(bestCols);
-  }, [filteredWorkspaces.length]);
+  }, [filteredWorkspaces.length, selectedLine]);
   React14.useEffect(() => {
     calculateOptimalGrid();
     const handleResize = () => calculateOptimalGrid();
@@ -17665,16 +17796,17 @@ var VideoGridView = React14__namespace.default.memo(({
         minHeight: "100%"
       },
       children: filteredWorkspaces.sort((a, b) => {
-        const aNum = parseInt(a.workspace_name.slice(2));
-        const bNum = parseInt(b.workspace_name.slice(2));
-        if (!selectedLine) {
-          const aIsLine2 = a.line_id === lineIdMapping.line2;
-          const bIsLine2 = b.line_id === lineIdMapping.line2;
-          if (aIsLine2 !== bIsLine2) {
-            return aIsLine2 ? 1 : -1;
-          }
+        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 aNum - bNum;
+        return a.workspace_name.localeCompare(b.workspace_name);
       }).map((workspace) => {
         const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
         const isVisible = visibleWorkspaces.has(workspaceId);
@@ -17697,7 +17829,8 @@ var VideoGridView = React14__namespace.default.memo(({
                 isVeryLowEfficiency,
                 cropping: workspaceCropping,
                 canvasFps: canvasConfig?.fps,
-                useRAF: canvasConfig?.useRAF
+                useRAF: canvasConfig?.useRAF,
+                compact: !selectedLine
               }
             )
           },
@@ -21261,7 +21394,7 @@ function isValidShiftId(shiftId) {
 }
 
 // src/lib/api/s3-clips-parser.ts
-function parseS3Uri(s3Uri) {
+function parseS3Uri(s3Uri, sopCategories) {
   const path = new URL(s3Uri).pathname;
   const parts = path.split("/").filter((p) => p);
   console.log("S3 URI:", s3Uri);
@@ -21301,6 +21434,27 @@ function parseS3Uri(s3Uri) {
     let description = "Analysis Clip";
     const normalizedViolationType = violationType.toLowerCase().trim();
     console.log(`Parsing violation type: "${violationType}" (normalized: "${normalizedViolationType}") from path: ${s3Uri}`);
+    if (sopCategories && sopCategories.length > 0) {
+      const matchedCategory = sopCategories.find((category) => {
+        const categoryId = category.id.toLowerCase();
+        const s3FolderName = (category.s3FolderName || category.id).toLowerCase();
+        return categoryId === normalizedViolationType || s3FolderName === normalizedViolationType || // Also check for partial matches for flexibility
+        normalizedViolationType.includes(categoryId) || normalizedViolationType.includes(s3FolderName);
+      });
+      if (matchedCategory) {
+        type = matchedCategory.id;
+        description = matchedCategory.description || matchedCategory.label;
+        if (matchedCategory.color.includes("red")) {
+          severity = "high";
+        } else if (matchedCategory.color.includes("yellow") || matchedCategory.color.includes("orange")) {
+          severity = "medium";
+        } else {
+          severity = "low";
+        }
+        console.log(`Matched SOP category: ${matchedCategory.id} for violation type: ${violationType}`);
+        return { timestamp, severity, description, type, originalUri: s3Uri };
+      }
+    }
     switch (normalizedViolationType) {
       case "idle_time":
       case "idle":
@@ -21540,11 +21694,23 @@ var S3ClipsService = class {
     const key = url.pathname.startsWith("/") ? url.pathname.substring(1) : url.pathname;
     return `${this.config.s3Config.cloudFrontDomain}/${key}`;
   }
+  /**
+   * Gets SOP categories for a specific workspace
+   */
+  getSOPCategories(workspaceId) {
+    const sopConfig = this.config.s3Config?.sopCategories;
+    if (!sopConfig) return void 0;
+    if (sopConfig.workspaceOverrides && sopConfig.workspaceOverrides[workspaceId]) {
+      return sopConfig.workspaceOverrides[workspaceId];
+    }
+    return sopConfig.default;
+  }
   /**
    * Processes a single video completely
    */
   async processFullVideo(uri, index, workspaceId, date, shiftId, includeCycleTime, includeMetadata = false) {
-    const parsedInfo = parseS3Uri(uri);
+    const sopCategories = this.getSOPCategories(workspaceId);
+    const parsedInfo = parseS3Uri(uri, sopCategories);
     if (!parsedInfo) {
       console.warn(`Skipping URI due to parsing failure: ${uri}`);
       return null;
@@ -21577,27 +21743,32 @@ var S3ClipsService = class {
   async getVideoSummary(workspaceId, date, shiftId) {
     const s3Uris = await this.listS3Clips({ workspaceId, date, shiftId });
     console.log(`S3ClipsService getVideoSummary: Processing ${s3Uris.length} total URIs for accurate category counts`);
-    const counts = {
-      best_cycle_time: 0,
-      worst_cycle_time: 0,
-      bottleneck: 0,
-      low_value: 0,
-      long_cycle_time: 0,
-      missing_quality_check: 0,
-      cycle_completions: 0,
-      total: 0
-    };
-    const samples = {
-      best_cycle_time: null,
-      worst_cycle_time: null,
-      bottleneck: null,
-      low_value: null,
-      long_cycle_time: null,
-      missing_quality_check: null,
-      cycle_completions: null
-    };
+    const sopCategories = this.getSOPCategories(workspaceId);
+    const counts = { total: 0 };
+    const samples = {};
+    if (sopCategories && sopCategories.length > 0) {
+      sopCategories.forEach((category) => {
+        counts[category.id] = 0;
+        samples[category.id] = null;
+      });
+    } else {
+      counts.best_cycle_time = 0;
+      counts.worst_cycle_time = 0;
+      counts.bottleneck = 0;
+      counts.low_value = 0;
+      counts.long_cycle_time = 0;
+      counts.missing_quality_check = 0;
+      counts.cycle_completions = 0;
+      samples.best_cycle_time = null;
+      samples.worst_cycle_time = null;
+      samples.bottleneck = null;
+      samples.low_value = null;
+      samples.long_cycle_time = null;
+      samples.missing_quality_check = null;
+      samples.cycle_completions = null;
+    }
     for (const uri of s3Uris) {
-      const parsedInfo = parseS3Uri(uri);
+      const parsedInfo = parseS3Uri(uri, sopCategories);
       if (parsedInfo) {
         const { type } = parsedInfo;
         counts[type] = (counts[type] || 0) + 1;
@@ -21659,7 +21830,7 @@ var S3ClipsService = class {
       }
       return summary;
     }
-    const limitPerCategory = limit ? Math.min(Math.max(limit, 1), 200) : 30;
+    const limitPerCategory = limit ? Math.min(Math.max(limit, 1), 1e3) : 30;
     const shouldFetchAll = category === "missing_quality_check" || category === "low_value";
     const initialFetchLimit = shouldFetchAll ? void 0 : category ? limitPerCategory * 3 : void 0;
     const s3Uris = await this.listS3Clips({ workspaceId, date, shiftId, maxKeys: initialFetchLimit });
@@ -21810,6 +21981,14 @@ var BottlenecksContent = ({
   className
 }) => {
   const dashboardConfig = useDashboardConfig();
+  const sopCategories = React14__namespace.default.useMemo(() => {
+    const sopConfig = dashboardConfig?.s3Config?.sopCategories;
+    if (!sopConfig) return null;
+    if (sopConfig.workspaceOverrides && sopConfig.workspaceOverrides[workspaceId]) {
+      return sopConfig.workspaceOverrides[workspaceId];
+    }
+    return sopConfig.default;
+  }, [dashboardConfig, workspaceId]);
   const videoRef = React14.useRef(null);
   const fullscreenContainerRef = React14.useRef(null);
   const timestampFilterRef = React14.useRef(null);
@@ -21818,7 +21997,9 @@ var BottlenecksContent = ({
   const [duration, setDuration] = React14.useState(0);
   const [isFullscreen, setIsFullscreen] = React14.useState(false);
   const [currentIndex, setCurrentIndex] = React14.useState(0);
-  const [activeFilter, setActiveFilter] = React14.useState("low_value");
+  const [activeFilter, setActiveFilter] = React14.useState(
+    sopCategories && sopCategories.length > 0 ? sopCategories[0].id : "low_value"
+  );
   const [allVideos, setAllVideos] = React14.useState([]);
   const [isLoading, setIsLoading] = React14.useState(true);
   const [error, setError] = React14.useState(null);
@@ -21930,27 +22111,41 @@ var BottlenecksContent = ({
     let filtered = [];
     if (activeFilter === "all") {
       filtered = [...allVideos];
-    } else if (activeFilter === "low_value") {
-      filtered = allVideos.filter((video) => video.type === "low_value");
-    } else if (activeFilter === "sop_deviations") {
-      filtered = allVideos.filter((video) => video.type === "missing_quality_check");
-    } else if (activeFilter === "best_cycle_time") {
-      filtered = allVideos.filter((video) => video.type === "best_cycle_time");
-    } else if (activeFilter === "worst_cycle_time") {
-      filtered = allVideos.filter((video) => video.type === "worst_cycle_time");
-    } else if (activeFilter === "cycle_completions") {
-      filtered = allVideos.filter((video) => video.type === "cycle_completions");
-    } else if (activeFilter === "long_cycle_time") {
-      filtered = allVideos.filter(
-        (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
-      );
     } else {
-      filtered = allVideos.filter((video) => video.type === "bottleneck" && video.severity === activeFilter);
+      if (sopCategories && sopCategories.length > 0) {
+        const selectedCategory = sopCategories.find((cat) => cat.id === activeFilter);
+        if (selectedCategory) {
+          filtered = allVideos.filter((video) => video.type === selectedCategory.id);
+          if (selectedCategory.id === "long_cycle_time") {
+            filtered = allVideos.filter(
+              (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
+            );
+          }
+        }
+      } else {
+        if (activeFilter === "low_value") {
+          filtered = allVideos.filter((video) => video.type === "low_value");
+        } else if (activeFilter === "sop_deviations") {
+          filtered = allVideos.filter((video) => video.type === "missing_quality_check");
+        } else if (activeFilter === "best_cycle_time") {
+          filtered = allVideos.filter((video) => video.type === "best_cycle_time");
+        } else if (activeFilter === "worst_cycle_time") {
+          filtered = allVideos.filter((video) => video.type === "worst_cycle_time");
+        } else if (activeFilter === "cycle_completions") {
+          filtered = allVideos.filter((video) => video.type === "cycle_completions");
+        } else if (activeFilter === "long_cycle_time") {
+          filtered = allVideos.filter(
+            (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
+          );
+        } else {
+          filtered = allVideos.filter((video) => video.type === "bottleneck" && video.severity === activeFilter);
+        }
+      }
     }
     return filtered.sort((a, b) => {
       return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
     });
-  }, [activeFilter, allVideos]);
+  }, [activeFilter, allVideos, sopCategories]);
   React14.useEffect(() => {
     if (filteredVideos.length === 0) return;
     const upcoming = [];
@@ -22224,35 +22419,34 @@ var BottlenecksContent = ({
     }
   };
   const clipCounts = React14.useMemo(() => {
-    if (!allVideos) return {
-      bottlenecks: 0,
-      lowValue: 0,
-      highSeverity: 0,
-      mediumSeverity: 0,
-      lowSeverity: 0,
-      sopDeviations: 0,
-      bestCycleTimes: 0,
-      worstCycleTimes: 0,
-      longCycleTimes: 0,
-      cycleCompletions: 0,
-      total: 0
-    };
-    return {
-      bottlenecks: allVideos.filter((video) => video.type === "bottleneck").length,
-      lowValue: allVideos.filter((video) => video.type === "low_value").length,
-      highSeverity: allVideos.filter((video) => video.severity === "high" && video.type === "bottleneck").length,
-      mediumSeverity: allVideos.filter((video) => video.severity === "medium" && video.type === "bottleneck").length,
-      lowSeverity: allVideos.filter((video) => video.severity === "low" && video.type === "bottleneck").length,
-      sopDeviations: allVideos.filter((video) => video.type === "missing_quality_check").length,
-      bestCycleTimes: allVideos.filter((video) => video.type === "best_cycle_time").length,
-      worstCycleTimes: allVideos.filter((video) => video.type === "worst_cycle_time").length,
-      longCycleTimes: allVideos.filter(
+    if (!allVideos) return {};
+    const counts = { total: allVideos.length };
+    if (sopCategories && sopCategories.length > 0) {
+      sopCategories.forEach((category) => {
+        if (category.id === "long_cycle_time") {
+          counts[category.id] = allVideos.filter(
+            (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
+          ).length;
+        } else {
+          counts[category.id] = allVideos.filter((video) => video.type === category.id).length;
+        }
+      });
+    } else {
+      counts.bottlenecks = allVideos.filter((video) => video.type === "bottleneck").length;
+      counts.lowValue = allVideos.filter((video) => video.type === "low_value").length;
+      counts.highSeverity = allVideos.filter((video) => video.severity === "high" && video.type === "bottleneck").length;
+      counts.mediumSeverity = allVideos.filter((video) => video.severity === "medium" && video.type === "bottleneck").length;
+      counts.lowSeverity = allVideos.filter((video) => video.severity === "low" && video.type === "bottleneck").length;
+      counts.sopDeviations = allVideos.filter((video) => video.type === "missing_quality_check").length;
+      counts.bestCycleTimes = allVideos.filter((video) => video.type === "best_cycle_time").length;
+      counts.worstCycleTimes = allVideos.filter((video) => video.type === "worst_cycle_time").length;
+      counts.longCycleTimes = allVideos.filter(
         (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
-      ).length,
-      cycleCompletions: allVideos.filter((video) => video.type === "cycle_completions").length,
-      total: allVideos.length
-    };
-  }, [allVideos]);
+      ).length;
+      counts.cycleCompletions = allVideos.filter((video) => video.type === "cycle_completions").length;
+    }
+    return counts;
+  }, [allVideos, sopCategories]);
   const currentVideo = React14.useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;
@@ -22277,6 +22471,19 @@ var BottlenecksContent = ({
         return "Bottleneck";
     }
   };
+  const getColorClasses = (color2) => {
+    const colorMap = {
+      purple: { text: "text-purple-500", bg: "bg-purple-500", dot: "bg-purple-500" },
+      green: { text: "text-green-600", bg: "bg-green-600", dot: "bg-green-600" },
+      red: { text: "text-red-700", bg: "bg-red-700", dot: "bg-red-700" },
+      "red-dark": { text: "text-red-500", bg: "bg-red-500", dot: "bg-red-500" },
+      blue: { text: "text-blue-600", bg: "bg-blue-600", dot: "bg-blue-600" },
+      orange: { text: "text-orange-600", bg: "bg-orange-600", dot: "bg-orange-600" },
+      yellow: { text: "text-yellow-600", bg: "bg-yellow-600", dot: "bg-yellow-600" },
+      gray: { text: "text-gray-600", bg: "bg-gray-600", dot: "bg-gray-600" }
+    };
+    return colorMap[color2] || colorMap.gray;
+  };
   const formatTimeOnly = (time2) => {
     if (!time2) return "";
     try {
@@ -22306,162 +22513,62 @@ var BottlenecksContent = ({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 max-w-md", children: error })
     ] });
   }
+  const categoriesToShow = sopCategories && sopCategories.length > 0 ? sopCategories : [
+    // Default hardcoded categories if no configuration
+    { id: "low_value", label: "Idle Moments", color: "purple", subtitle: "Idle time detected" },
+    { id: "best_cycle_time", label: "Best Cycle Time", color: "green", subtitle: "Fastest cycle today" },
+    { id: "worst_cycle_time", label: "Worst Cycle Time", color: "red", subtitle: "Slowest cycle today" },
+    { id: "long_cycle_time", label: "Long Cycle Time", color: "red-dark", subtitle: "Above standard cycle times" },
+    { id: "cycle_completions", label: "Cycle Completions", color: "blue", subtitle: "Completed production cycles" }
+  ];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4 h-[calc(100vh-12rem)]", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Card2,
-        {
-          onClick: () => {
-            setActiveFilter("low_value");
-            trackCoreEvent("Idle Moments Filter Clicked", {
-              workspaceId,
-              workspaceName,
-              date,
-              filterType: "low_value",
-              clipCount: clipCounts.lowValue
-            });
-          },
-          className: `bg-white shadow-sm cursor-pointer transition-all duration-200 hover:bg-gray-50 ${activeFilter === "low_value" ? "bg-blue-50 shadow-md ring-1 ring-blue-200" : ""}`,
-          "aria-label": `Filter by Idle Moments (${clipCounts.lowValue} clips)`,
-          role: "button",
-          tabIndex: 0,
-          onKeyDown: (e) => e.key === "Enter" && setActiveFilter("low_value"),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: `text-lg ${activeFilter === "low_value" ? "text-blue-600" : ""}`, children: "Idle Moments" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-purple-500", children: clipCounts.lowValue }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-purple-500 mr-1.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Idle time detected" })
-              ] })
-            ] }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid grid-cols-1 sm:grid-cols-2 ${categoriesToShow.length <= 5 ? "lg:grid-cols-5" : "lg:grid-cols-6"} gap-3 mb-4`, children: categoriesToShow.map((category) => {
+      const colorClasses = getColorClasses(category.color);
+      const count = clipCounts[category.id] || 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
         Card2,
         {
           onClick: () => {
-            setActiveFilter("best_cycle_time");
-            trackCoreEvent("Best Cycle Time Filter Clicked", {
+            setActiveFilter(category.id);
+            trackCoreEvent(`${category.label} Filter Clicked`, {
               workspaceId,
               workspaceName,
               date,
-              filterType: "best_cycle_time",
-              clipCount: clipCounts.bestCycleTimes
+              filterType: category.id,
+              clipCount: count
             });
           },
-          className: `bg-white shadow-sm cursor-pointer transition-all duration-200 hover:bg-gray-50 ${activeFilter === "best_cycle_time" ? "bg-blue-50 shadow-md ring-1 ring-blue-200" : ""}`,
-          "aria-label": `Filter by Best Cycle Time (${clipCounts.bestCycleTimes} clips)`,
+          className: `bg-white shadow-sm cursor-pointer transition-all duration-200 hover:bg-gray-50 ${activeFilter === category.id ? "bg-blue-50 shadow-md ring-1 ring-blue-200" : ""}`,
+          "aria-label": `Filter by ${category.label} (${count} clips)`,
           role: "button",
           tabIndex: 0,
-          onKeyDown: (e) => e.key === "Enter" && setActiveFilter("best_cycle_time"),
+          onKeyDown: (e) => e.key === "Enter" && setActiveFilter(category.id),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: `text-lg ${activeFilter === "best_cycle_time" ? "text-blue-600" : ""}`, children: "Best Cycle Time" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: `text-lg ${activeFilter === category.id ? "text-blue-600" : ""}`, children: category.label }) }),
             /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-green-600", children: clipCounts.bestCycleTimes }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-3xl font-bold ${colorClasses.text}`, children: count }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-600 mr-1.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Fastest cycle today" })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-2 w-2 rounded-full ${colorClasses.dot} mr-1.5` }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: category.subtitle || category.description || category.label })
               ] })
             ] }) })
           ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Card2,
-        {
-          onClick: () => {
-            setActiveFilter("worst_cycle_time");
-            trackCoreEvent("Worst Cycle Time Filter Clicked", {
-              workspaceId,
-              workspaceName,
-              date,
-              filterType: "worst_cycle_time",
-              clipCount: clipCounts.worstCycleTimes
-            });
-          },
-          className: `bg-white shadow-sm cursor-pointer transition-all duration-200 hover:bg-gray-50 ${activeFilter === "worst_cycle_time" ? "bg-blue-50 shadow-md ring-1 ring-blue-200" : ""}`,
-          "aria-label": `Filter by Worst Cycle Time (${clipCounts.worstCycleTimes} clips)`,
-          role: "button",
-          tabIndex: 0,
-          onKeyDown: (e) => e.key === "Enter" && setActiveFilter("worst_cycle_time"),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: `text-lg ${activeFilter === "worst_cycle_time" ? "text-blue-600" : ""}`, children: "Worst Cycle Time" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-red-700", children: clipCounts.worstCycleTimes }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-red-700 mr-1.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Slowest cycle today" })
-              ] })
-            ] }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Card2,
-        {
-          onClick: () => {
-            setActiveFilter("long_cycle_time");
-            trackCoreEvent("Long Cycle Time Filter Clicked", {
-              workspaceId,
-              workspaceName,
-              date,
-              filterType: "long_cycle_time",
-              clipCount: clipCounts.longCycleTimes
-            });
-          },
-          className: `bg-white shadow-sm cursor-pointer transition-all duration-200 hover:bg-gray-50 ${activeFilter === "long_cycle_time" ? "bg-blue-50 shadow-md ring-1 ring-blue-200" : ""}`,
-          "aria-label": `Filter by Long Cycle Time Bottlenecks (${clipCounts.longCycleTimes} clips)`,
-          role: "button",
-          tabIndex: 0,
-          onKeyDown: (e) => e.key === "Enter" && setActiveFilter("long_cycle_time"),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: `text-lg ${activeFilter === "long_cycle_time" ? "text-blue-600" : ""}`, children: "Long Cycle Time" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-red-500", children: clipCounts.longCycleTimes }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-red-500 mr-1.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Above standard cycle times" })
-              ] })
-            ] }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Card2,
-        {
-          onClick: () => {
-            setActiveFilter("cycle_completions");
-            trackCoreEvent("Cycle Completions Filter Clicked", {
-              workspaceId,
-              workspaceName,
-              date,
-              filterType: "cycle_completions",
-              clipCount: clipCounts.cycleCompletions
-            });
-          },
-          className: `bg-white shadow-sm cursor-pointer transition-all duration-200 hover:bg-gray-50 ${activeFilter === "cycle_completions" ? "bg-blue-50 shadow-md ring-1 ring-blue-200" : ""}`,
-          "aria-label": `Filter by Cycle Completions (${clipCounts.cycleCompletions} clips)`,
-          role: "button",
-          tabIndex: 0,
-          onKeyDown: (e) => e.key === "Enter" && setActiveFilter("cycle_completions"),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: `text-lg ${activeFilter === "cycle_completions" ? "text-blue-600" : ""}`, children: "Cycle Completions" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-blue-600", children: clipCounts.cycleCompletions }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-blue-600 mr-1.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Completed production cycles" })
-              ] })
-            ] }) })
-          ]
-        }
-      )
-    ] }),
+        },
+        category.id
+      );
+    }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden", style: { height: "calc(100% - 8.5rem)" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-800", children: activeFilter === "low_value" ? `Idle Moments (${clipCounts.lowValue})` : activeFilter === "best_cycle_time" ? `Best Cycle Time (${clipCounts.bestCycleTimes})` : activeFilter === "worst_cycle_time" ? `Worst Cycle Time (${clipCounts.worstCycleTimes})` : activeFilter === "long_cycle_time" ? `Long Cycle Time (${clipCounts.longCycleTimes})` : activeFilter === "cycle_completions" ? `Cycle Completions (${clipCounts.cycleCompletions})` : `All Clips (${clipCounts.total})` }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-800", children: (() => {
+          if (activeFilter === "all") {
+            return `All Clips (${clipCounts.total || 0})`;
+          }
+          const activeCategory = categoriesToShow.find((cat) => cat.id === activeFilter);
+          if (activeCategory) {
+            return `${activeCategory.label} (${clipCounts[activeCategory.id] || 0})`;
+          }
+          return activeFilter === "low_value" ? `Idle Moments (${clipCounts.lowValue || 0})` : activeFilter === "best_cycle_time" ? `Best Cycle Time (${clipCounts.bestCycleTimes || 0})` : activeFilter === "worst_cycle_time" ? `Worst Cycle Time (${clipCounts.worstCycleTimes || 0})` : activeFilter === "long_cycle_time" ? `Long Cycle Time (${clipCounts.longCycleTimes || 0})` : activeFilter === "cycle_completions" ? `Cycle Completions (${clipCounts.cycleCompletions || 0})` : `All Clips (${clipCounts.total || 0})`;
+        })() }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: timestampFilterRef, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -23501,7 +23608,7 @@ var KPISection = React14.memo(({
 });
 KPISection.displayName = "KPISection";
 var ISTTimer2 = ISTTimer_default;
-var DashboardHeader = React14.memo(({ lineTitle, className = "" }) => {
+var DashboardHeader = React14.memo(({ lineTitle, className = "", headerControls }) => {
   const getShiftName = () => {
     const now2 = /* @__PURE__ */ new Date();
     const currentHour = now2.getHours();
@@ -23515,30 +23622,33 @@ var DashboardHeader = React14.memo(({ lineTitle, className = "" }) => {
       return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2 md:gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base sm:text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: lineTitle }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-1 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 inline-flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-600", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ISTTimer2, {}),
-        " IST"
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-row items-center justify-between w-full ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2 md:gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base sm:text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: lineTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-1 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: getShiftIcon() }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-600", children: [
-          getShiftName(),
-          " Shift"
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 inline-flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ISTTimer2, {}),
+          " IST"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: getShiftIcon() }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-600", children: [
+            getShiftName(),
+            " Shift"
+          ] })
         ] })
       ] })
-    ] })
+    ] }),
+    headerControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: headerControls })
   ] });
 });
 DashboardHeader.displayName = "DashboardHeader";
-var NoWorkspaceData = React14.memo(({ className = "" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-full items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-white p-4 shadow-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 text-gray-500", children: [
+var NoWorkspaceData = React14.memo(({ message = "No workspace data available", className = "" }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex h-full items-center justify-center ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-white p-4 shadow-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 text-gray-500", children: [
   /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
-  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No workspace data available" })
+  /* @__PURE__ */ jsxRuntime.jsx("span", { children: message })
 ] }) }) }));
 NoWorkspaceData.displayName = "NoWorkspaceData";
 var WorkspaceMonthlyDataFetcher = ({
@@ -23880,15 +23990,14 @@ var SideNavBar = React14.memo(({
       }
     }
   }), [navigate, lineId]);
-  const handleLeaderboardClick = React14.useCallback(() => navigate(`/leaderboard/${lineId}`, {
+  const handleLeaderboardClick = React14.useCallback(() => navigate(`/leaderboard`, {
     trackingEvent: {
       name: "Leaderboard Page Clicked",
       properties: {
-        source: "side_nav",
-        line_id: lineId
+        source: "side_nav"
       }
     }
-  }), [navigate, lineId]);
+  }), [navigate]);
   const handleKPIsClick = React14.useCallback(() => navigate(`/kpis`, {
     trackingEvent: {
       name: "KPI Page Clicked",
@@ -24835,14 +24944,6 @@ var AIAgentView = () => {
               return newMap;
             });
           },
-          onReasoning: (text) => {
-            setStreamingStates((prev) => {
-              const newMap = new Map(prev);
-              const current = newMap.get(currentThreadId) || { message: "", reasoning: "" };
-              newMap.set(currentThreadId, { ...current, reasoning: current.reasoning + text });
-              return newMap;
-            });
-          },
           onComplete: async (messageId) => {
             if (currentThreadId && !currentThreadId.startsWith("temp-")) {
               const updatedMessages = await getAllThreadMessages(currentThreadId);
@@ -27220,8 +27321,8 @@ var LoadingOverlayCmp = LoadingOverlay_default;
 function HomeView({
   defaultLineId,
   factoryViewId,
-  line1Uuid,
-  line2Uuid,
+  lineIds: allLineIds = [],
+  // Default to empty array
   lineNames,
   videoSources = {
     workspaceHlsUrls: {},
@@ -27230,14 +27331,21 @@ function HomeView({
   factoryName = "Simba Beer - Line 1"
 }) {
   const [isHydrated, setIsHydrated] = React14.useState(false);
-  const [selectedLineId, setSelectedLineId] = React14.useState(defaultLineId);
+  const availableLineIds = React14.useMemo(() => [factoryViewId, ...allLineIds], [factoryViewId, allLineIds]);
+  const [selectedLineId, setSelectedLineId] = React14.useState(factoryViewId);
   const [isChangingFilter, setIsChangingFilter] = React14.useState(false);
   const [errorMessage, setErrorMessage] = React14.useState(null);
   const [displayNamesInitialized, setDisplayNamesInitialized] = React14.useState(false);
   React14.useEffect(() => {
     const initDisplayNames = async () => {
       try {
-        await preInitializeWorkspaceDisplayNames(selectedLineId);
+        if (selectedLineId === factoryViewId) {
+          for (const lineId of allLineIds) {
+            await preInitializeWorkspaceDisplayNames(lineId);
+          }
+        } else {
+          await preInitializeWorkspaceDisplayNames(selectedLineId);
+        }
         setDisplayNamesInitialized(true);
       } catch (error) {
         console.error("Failed to pre-initialize workspace display names:", error);
@@ -27245,7 +27353,7 @@ function HomeView({
       }
     };
     initDisplayNames();
-  }, [selectedLineId]);
+  }, [selectedLineId, factoryViewId, allLineIds]);
   const {
     displayNames: workspaceDisplayNames,
     loading: displayNamesLoading,
@@ -27311,18 +27419,29 @@ function HomeView({
       setErrorMessage(null);
     }
   }, [metricsError, kpisError]);
-  React14.useCallback((e) => {
+  const handleLineChange = React14.useCallback((value) => {
     setIsChangingFilter(true);
-    setSelectedLineId(e.target.value);
+    setSelectedLineId(value);
   }, []);
   React14.useEffect(() => {
-    if (!metricsLoading && !kpisLoading && isChangingFilter && workspaceMetrics.length > 0) {
-      setIsChangingFilter(false);
+    if (!metricsLoading && !kpisLoading && isChangingFilter) {
+      if (workspaceMetrics.length > 0 || selectedLineId === factoryViewId) {
+        setIsChangingFilter(false);
+      }
     }
-  }, [metricsLoading, kpisLoading, workspaceMetrics, isChangingFilter]);
+  }, [metricsLoading, kpisLoading, workspaceMetrics, isChangingFilter, selectedLineId, factoryViewId]);
   const lineTitle = React14.useMemo(() => {
     return factoryName;
   }, [factoryName]);
+  const lineSelectorComponent = React14.useMemo(() => {
+    if (allLineIds.length <= 1) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(Select, { onValueChange: handleLineChange, defaultValue: selectedLineId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full sm:w-[200px] bg-white border border-gray-200 shadow-sm rounded-md h-9 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Select a line" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "z-50 bg-white shadow-lg border border-gray-200 rounded-md", children: availableLineIds.map((id3) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: id3, children: lineNames[id3] || (id3 === factoryViewId ? "All Lines" : `Line ${id3.substring(0, 4)}`) }, id3)) })
+    ] });
+  }, [availableLineIds, handleLineChange, selectedLineId, lineNames, factoryViewId, allLineIds.length]);
   const isLoading = !isHydrated || metricsLoading || kpisLoading || isChangingFilter || displayNamesLoading || !displayNamesInitialized;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen bg-slate-50", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingPageCmp, { message: "Loading dashboard..." }) });
@@ -27336,7 +27455,7 @@ function HomeView({
       ] })
     ] }) }) });
   }
-  if ((metricsLoading || kpisLoading) && (!workspaceMetrics || workspaceMetrics.length === 0)) {
+  if ((metricsLoading || kpisLoading) && (!workspaceMetrics || workspaceMetrics.length === 0) && selectedLineId !== factoryViewId) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen bg-slate-50", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingPageCmp, { message: "Loading metrics..." }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -27347,28 +27466,36 @@ function HomeView({
       animate: { opacity: 1 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(LoadingOverlayCmp, { isVisible: isChangingFilter, message: "Loading new metrics..." }),
-        /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 sm:static bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between px-3 sm:px-6 lg:px-8 py-1.5 sm:py-2.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(DashboardHeader, { lineTitle, className: "mb-1 sm:mb-0" }),
-            memoizedKPIs && /* @__PURE__ */ jsxRuntime.jsx(KPISection2, { kpis: memoizedKPIs, className: "w-full sm:w-auto" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden", children: memoizedWorkspaceMetrics.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-80px)] sm:min-h-0", children: React14__namespace.default.createElement(WorkspaceGrid, {
-            workspaces: memoizedWorkspaceMetrics,
-            lineNames,
-            factoryView: factoryViewId,
-            line2Uuid,
-            videoSources,
-            className: "h-full"
-          }) }) : /* @__PURE__ */ jsxRuntime.jsx(NoWorkspaceData, {}) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          BreakNotificationPopup,
-          {
-            activeBreaks,
-            lineNames,
-            isVisible: !breaksLoading && !breaksError
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-30 sm:static bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between px-3 sm:px-6 lg:px-8 py-1.5 sm:py-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+              DashboardHeader,
+              {
+                lineTitle,
+                className: "w-full",
+                headerControls: memoizedKPIs ? /* @__PURE__ */ jsxRuntime.jsx(KPISection2, { kpis: memoizedKPIs, className: "w-full sm:w-auto" }) : null
+              }
+            ) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative", children: [
+              lineSelectorComponent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-2 sm:right-6 sm:top-3 z-30", children: lineSelectorComponent }),
+              memoizedWorkspaceMetrics.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full sm:h-full min-h-[calc(100vh-80px)] sm:min-h-0", children: React14__namespace.default.createElement(WorkspaceGrid, {
+                workspaces: memoizedWorkspaceMetrics,
+                lineNames,
+                factoryView: factoryViewId,
+                videoSources,
+                className: "h-full"
+              }) }) : /* @__PURE__ */ jsxRuntime.jsx(NoWorkspaceData, { message: "No workspace data available. Select another line or check configurations." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            BreakNotificationPopup,
+            {
+              activeBreaks,
+              lineNames,
+              isVisible: !breaksLoading && !breaksError
+            }
+          )
+        ] })
       ]
     }
   );
@@ -27532,7 +27659,7 @@ var BottomSection = React14.memo(({
               "div",
               {
                 className: "p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer",
-                onClick: () => handleNavigate && handleNavigate(`/leaderboard/${lineInfo?.line_id}`),
+                onClick: () => handleNavigate && handleNavigate(`/leaderboard`),
                 children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-5 h-5 text-gray-500" })
               }
             )
@@ -28631,7 +28758,7 @@ var LeaderboardDetailView = React14.memo(({
   className = ""
 }) => {
   const navigation = useNavigation();
-  const [sortAscending, setSortAscending] = React14.useState(true);
+  const [sortAscending, setSortAscending] = React14.useState(false);
   const handleSortToggle = React14.useCallback(() => {
     setSortAscending(!sortAscending);
   }, [sortAscending]);
@@ -28647,13 +28774,15 @@ var LeaderboardDetailView = React14.memo(({
     error: metricsError,
     refreshMetrics
   } = useRealtimeLineMetrics(realtimeMetricsParams);
-  const memoizedLineId = React14.useMemo(() => lineId || "", [lineId]);
   const {
     workspaces,
     loading: workspacesLoading,
     error: workspacesError,
     refreshWorkspaces
-  } = useLineWorkspaceMetrics(memoizedLineId);
+  } = useAllWorkspaceMetrics({
+    initialDate: date,
+    initialShiftId: typeof shift === "number" ? shift : typeof shift === "string" ? parseInt(shift) : void 0
+  });
   const getShiftName = React14.useCallback((shiftId) => {
     if (shiftId === void 0) return "Day";
     return shiftId === 0 ? "Day" : "Night";
@@ -28707,7 +28836,7 @@ var LeaderboardDetailView = React14.memo(({
     });
     const displayName = getWorkspaceDisplayName(workspace.workspace_name);
     const navParams = workspace.workspace_uuid ? getWorkspaceNavigationParams(workspace.workspace_uuid, displayName) : "";
-    const returnToParam = `&returnTo=${encodeURIComponent(`/leaderboard/${lineId}`)}`;
+    const returnToParam = `&returnTo=${encodeURIComponent(`/leaderboard`)}`;
     if (onWorkspaceClick) {
       onWorkspaceClick(workspace, rank);
     } else {
@@ -32247,6 +32376,7 @@ exports.KPIHeader = KPIHeader;
 exports.KPISection = KPISection;
 exports.KPIsOverviewView = KPIsOverviewView_default;
 exports.LINE_1_UUID = LINE_1_UUID;
+exports.LINE_2_UUID = LINE_2_UUID;
 exports.LargeOutputProgressChart = LargeOutputProgressChart;
 exports.LeaderboardDetailView = LeaderboardDetailView_default;
 exports.Legend = Legend6;
@@ -32396,6 +32526,7 @@ exports.trackCoreEvent = trackCoreEvent;
 exports.trackCorePageView = trackCorePageView;
 exports.updateThreadTitle = updateThreadTitle;
 exports.useActiveBreaks = useActiveBreaks;
+exports.useAllWorkspaceMetrics = useAllWorkspaceMetrics;
 exports.useAnalyticsConfig = useAnalyticsConfig;
 exports.useAuth = useAuth;
 exports.useAuthConfig = useAuthConfig;