@optifye/dashboard-core 6.0.0 → 6.0.1

package/dist/index.js

@@ -1027,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) => ({
@@ -1040,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) {
@@ -17520,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";
@@ -17648,7 +17648,6 @@ var VideoGridView = React14__namespace.default.memo(({
   workspaces,
   selectedLine,
   className = "",
-  lineIdMapping = {},
   videoSources = {}
 }) => {
   const router$1 = router.useRouter();
@@ -17797,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);
@@ -21394,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);
@@ -21434,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":
@@ -21673,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;
@@ -21710,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;
@@ -21943,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);
@@ -21951,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);
@@ -22063,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 = [];
@@ -22357,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;
@@ -22410,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 {
@@ -22439,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(
-        Card2,
-        {
-          onClick: () => {
-            setActiveFilter("best_cycle_time");
-            trackCoreEvent("Best Cycle Time Filter Clicked", {
-              workspaceId,
-              workspaceName,
-              date,
-              filterType: "best_cycle_time",
-              clipCount: clipCounts.bestCycleTimes
-            });
-          },
-          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)`,
-          role: "button",
-          tabIndex: 0,
-          onKeyDown: (e) => e.key === "Enter" && setActiveFilter("best_cycle_time"),
-          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(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.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.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("worst_cycle_time");
-            trackCoreEvent("Worst Cycle Time Filter Clicked", {
+            setActiveFilter(category.id);
+            trackCoreEvent(`${category.label} Filter Clicked`, {
               workspaceId,
               workspaceName,
               date,
-              filterType: "worst_cycle_time",
-              clipCount: clipCounts.worstCycleTimes
+              filterType: category.id,
+              clipCount: count
             });
           },
-          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)`,
+          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("worst_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 === "worst_cycle_time" ? "text-blue-600" : ""}`, children: "Worst 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-red-700", children: clipCounts.worstCycleTimes }),
+              /* @__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-red-700 mr-1.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Slowest 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("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(
@@ -24970,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);
@@ -27366,14 +27332,20 @@ function HomeView({
 }) {
   const [isHydrated, setIsHydrated] = React14.useState(false);
   const availableLineIds = React14.useMemo(() => [factoryViewId, ...allLineIds], [factoryViewId, allLineIds]);
-  const [selectedLineId, setSelectedLineId] = React14.useState(defaultLineId);
+  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);
@@ -27381,7 +27353,7 @@ function HomeView({
       }
     };
     initDisplayNames();
-  }, [selectedLineId]);
+  }, [selectedLineId, factoryViewId, allLineIds]);
   const {
     displayNames: workspaceDisplayNames,
     loading: displayNamesLoading,
@@ -27461,10 +27433,15 @@ function HomeView({
   const lineTitle = React14.useMemo(() => {
     return factoryName;
   }, [factoryName]);
-  const lineSelectorComponent = React14.useMemo(() => /* @__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]);
+  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..." }) });
@@ -27500,7 +27477,7 @@ function HomeView({
               }
             ) }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-2 sm:right-6 sm:top-3 z-30", children: lineSelectorComponent }),
+              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,