@optifye/dashboard-core 6.5.0 → 6.5.2

package/dist/index.js

@@ -3286,35 +3286,6 @@ var useAudioService = () => {
 };
 
 // src/lib/utils/dateShiftUtils.ts
-function getOperationalDate2(timezone = "Asia/Kolkata") {
-  const now2 = /* @__PURE__ */ new Date();
-  const localTime = new Date(now2.toLocaleString("en-US", { timeZone: timezone }));
-  const hour = localTime.getHours();
-  if (hour < 6) {
-    localTime.setDate(localTime.getDate() - 1);
-  }
-  return localTime.toISOString().split("T")[0];
-}
-function getCurrentShift2(timezone = "Asia/Kolkata") {
-  const now2 = /* @__PURE__ */ new Date();
-  const localTime = new Date(now2.toLocaleString("en-US", { timeZone: timezone }));
-  const hour = localTime.getHours();
-  if (hour >= 6 && hour < 18) {
-    return {
-      shiftId: 0,
-      shiftName: "Day Shift",
-      startTime: "06:00",
-      endTime: "18:00"
-    };
-  } else {
-    return {
-      shiftId: 1,
-      shiftName: "Night Shift",
-      startTime: "18:00",
-      endTime: "06:00"
-    };
-  }
-}
 function isValidDateFormat(date) {
   return /^\d{4}-\d{2}-\d{2}$/.test(date);
 }
@@ -4181,6 +4152,23 @@ var S3ClipsAPIClient = class {
       };
     });
   }
+  /**
+   * Batch fetch multiple videos in parallel
+   */
+  async batchFetchVideos(workspaceId, date, shiftId, requests) {
+    const batchKey = `batch:${workspaceId}:${date}:${shiftId}:${requests.length}`;
+    return this.deduplicate(batchKey, async () => {
+      const response = await this.fetchWithAuth("/api/clips/batch", {
+        workspaceId,
+        date,
+        shift: shiftId.toString(),
+        requests,
+        sopCategories: this.sopCategories
+      });
+      console.log(`[S3ClipsAPIClient] Batch fetched ${response.videos.length} videos in ${response.performance.duration}ms`);
+      return response.videos;
+    });
+  }
   /**
    * Convert S3 URI to CloudFront URL
    * In the API client, URLs are already signed from the server
@@ -4428,7 +4416,11 @@ var S3ClipsService = class {
     if (!workspaceId) {
       throw new Error("Valid Workspace ID is required");
     }
-    const date = inputDate || getOperationalDate2(this.config.dateTimeConfig?.defaultTimezone);
+    const date = inputDate || getOperationalDate(
+      this.config.dateTimeConfig?.defaultTimezone || "Asia/Kolkata",
+      /* @__PURE__ */ new Date(),
+      this.config.shiftConfig?.dayShift?.startTime || "06:00"
+    );
     if (!isValidDateFormat(date)) {
       throw new Error("Invalid date format. Use YYYY-MM-DD.");
     }
@@ -4439,7 +4431,10 @@ var S3ClipsService = class {
       }
       shiftId = parseInt(shift, 10);
     } else {
-      const { shiftId: currentShiftId } = getCurrentShift2(this.config.dateTimeConfig?.defaultTimezone);
+      const { shiftId: currentShiftId } = getCurrentShift(
+        this.config.dateTimeConfig?.defaultTimezone || "Asia/Kolkata",
+        this.config.shiftConfig
+      );
       shiftId = currentShiftId;
     }
     console.log(`[S3ClipsService] Fetching clips for workspace ${workspaceId}`);
@@ -4457,6 +4452,23 @@ var S3ClipsService = class {
     );
     return result.videos;
   }
+  /**
+   * Batch fetch multiple videos in parallel
+   */
+  async batchFetchVideos(workspaceId, date, shiftId, requests) {
+    try {
+      const results = await this.apiClient.batchFetchVideos(
+        workspaceId,
+        date,
+        shiftId,
+        requests
+      );
+      return results.map((r2) => r2.video).filter((v) => v !== null);
+    } catch (error) {
+      console.error("[S3ClipsService] Error batch fetching videos:", error);
+      return [];
+    }
+  }
   /**
    * Get videos page using pagination API
    */
@@ -8079,7 +8091,7 @@ var useActiveBreaks = (lineIds) => {
     }
     return { elapsedMinutes, remainingMinutes };
   };
-  const getCurrentShift3 = (currentMinutes, dayStart, nightStart) => {
+  const getCurrentShift2 = (currentMinutes, dayStart, nightStart) => {
     const dayStartMinutes = parseTimeToMinutes2(dayStart);
     const nightStartMinutes = parseTimeToMinutes2(nightStart);
     if (nightStartMinutes < dayStartMinutes) {
@@ -8111,7 +8123,7 @@ var useActiveBreaks = (lineIds) => {
         const dayShift = dayShifts?.find((s) => s.line_id === lineId);
         const nightShift = nightShifts?.find((s) => s.line_id === lineId);
         if (!dayShift || !nightShift) continue;
-        const currentShift = getCurrentShift3(
+        const currentShift = getCurrentShift2(
           currentMinutes,
           dayShift.start_time || "06:00",
           nightShift.start_time || "18:00"
@@ -11608,9 +11620,12 @@ var usePrefetchClipCounts = ({
       shiftStr = "0";
       console.log(`[usePrefetchClipCounts] No shift provided for historical date ${date}, defaulting to day shift (0)`);
     } else {
-      const currentShift = getCurrentShift2();
+      const currentShift = getCurrentShift(
+        dashboardConfig.dateTimeConfig?.defaultTimezone || "Asia/Kolkata",
+        dashboardConfig.shiftConfig
+      );
       shiftStr = currentShift.shiftId.toString();
-      console.log(`[usePrefetchClipCounts] Using current operational shift: ${shiftStr} (${currentShift.shiftName})`);
+      console.log(`[usePrefetchClipCounts] Using current operational shift: ${shiftStr}`);
     }
     return {
       workspaceId: workspaceId || "",
@@ -26947,11 +26962,14 @@ var BottlenecksContent = ({
       console.log(`[BottlenecksContent] No shift provided for historical date ${date}, defaulting to day shift (0)`);
       return "0";
     } else {
-      const currentShift = getCurrentShift2();
-      console.log(`[BottlenecksContent] Using current operational shift: ${currentShift.shiftId} (${currentShift.shiftName})`);
+      const currentShift = getCurrentShift(
+        dashboardConfig.dateTimeConfig?.defaultTimezone || "Asia/Kolkata",
+        dashboardConfig.shiftConfig
+      );
+      console.log(`[BottlenecksContent] Using current operational shift: ${currentShift.shiftId}`);
       return currentShift.shiftId.toString();
     }
-  }, [shift, date]);
+  }, [shift, date, dashboardConfig]);
   const {
     data: prefetchData,
     isFullyIndexed,
@@ -27040,44 +27058,73 @@ var BottlenecksContent = ({
     if (indicesToLoad.length === 0) return;
     console.log(`[ensureVideosLoaded] Preloading ${indicesToLoad.length} videos around index ${centerIndex}: [${indicesToLoad.join(", ")}]`);
     indicesToLoad.forEach((idx) => loadingVideosRef.current.add(idx));
-    const loadPromises = indicesToLoad.map(async (index) => {
-      try {
-        let video = null;
-        if (!video) {
-          const operationalDate = date || getOperationalDate();
-          const shiftStr = effectiveShift;
-          video = await s3ClipsService.getClipByIndex(
+    const operationalDate = date || getOperationalDate();
+    const shiftStr = effectiveShift;
+    console.log(`[ensureVideosLoaded] Batch fetching ${indicesToLoad.length} videos in parallel`);
+    try {
+      const batchRequests = indicesToLoad.map((index) => ({
+        category: effectiveFilter,
+        index,
+        includeMetadata: false
+        // No metadata during bulk preloading
+      }));
+      const videos = await s3ClipsService.batchFetchVideos(
+        workspaceId,
+        operationalDate,
+        shiftStr,
+        batchRequests
+      );
+      if (videos.length > 0 && isMountedRef.current) {
+        videos.forEach((video, idx) => {
+          if (video) {
+            setAllVideos((prev) => {
+              const exists = prev.some((v) => v.id === video.id);
+              if (!exists) {
+                return [...prev, video];
+              }
+              return prev;
+            });
+            const originalIndex = indicesToLoad[idx];
+            loadedIndices.add(originalIndex);
+            preloadVideoUrl(video.src);
+          }
+        });
+        console.log(`[ensureVideosLoaded] Successfully loaded ${videos.length} videos in batch`);
+      }
+    } catch (error2) {
+      console.error("[ensureVideosLoaded] Batch fetch failed:", error2);
+      const loadPromises = indicesToLoad.map(async (index) => {
+        try {
+          const video = await s3ClipsService.getClipByIndex(
             workspaceId,
             operationalDate,
             shiftStr,
             effectiveFilter,
             index,
             true,
-            // includeCycleTime - OK for preloading
+            // includeCycleTime
             false
-            // includeMetadata - NO metadata during bulk preloading to prevent flooding
+            // includeMetadata
           );
+          if (video && isMountedRef.current) {
+            setAllVideos((prev) => {
+              const exists = prev.some((v) => v.id === video.id);
+              if (!exists) {
+                return [...prev, video];
+              }
+              return prev;
+            });
+            loadedIndices.add(index);
+            preloadVideoUrl(video.src);
+          }
+        } catch (err) {
+          console.warn(`[ensureVideosLoaded] Failed to load video at index ${index}:`, err);
         }
-        if (video && isMountedRef.current) {
-          setAllVideos((prev) => {
-            const exists = prev.some((v) => v.id === video.id);
-            if (!exists) {
-              return [...prev, video];
-            }
-            return prev;
-          });
-          loadedIndices.add(index);
-          preloadVideoUrl(video.src);
-        }
-      } catch (error2) {
-        console.warn(`[ensureVideosLoaded] Failed to load video at index ${index}:`, error2);
-      } finally {
-        loadingVideosRef.current.delete(index);
-      }
-    });
-    Promise.all(loadPromises).catch((err) => {
-      console.warn("[ensureVideosLoaded] Some videos failed to preload:", err);
-    });
+      });
+      await Promise.all(loadPromises);
+    } finally {
+      indicesToLoad.forEach((idx) => loadingVideosRef.current.delete(idx));
+    }
   }, [s3ClipsService, workspaceId, clipCounts, sopCategories, date, effectiveShift]);
   const loadFirstVideoForCategory = React19.useCallback(async (category) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
@@ -28663,7 +28710,6 @@ var WorkspaceHealthCard = ({
   };
   const config = getStatusConfig();
   const StatusIcon = config.icon;
-  workspace.isStale ? lucideReact.WifiOff : lucideReact.Wifi;
   const handleClick = () => {
     if (onClick) {
       onClick(workspace);
@@ -28711,34 +28757,13 @@ var WorkspaceHealthCard = ({
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: config.statusText })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5 text-gray-400" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
-                "Last seen: ",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
-              ] })
-            ] }),
-            workspace.isStale && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.WifiOff, { className: "h-3.5 w-3.5 text-amber-500" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-amber-600 dark:text-amber-400 text-xs", children: "No recent updates" })
-            ] })
-          ] }),
-          config.pulse && !workspace.isStale && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
-                "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
-                workspace.status === "healthy" ? "bg-emerald-400" : "bg-amber-400"
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
-                "relative inline-flex rounded-full h-2 w-2",
-                workspace.status === "healthy" ? "bg-emerald-500" : "bg-amber-500"
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Live" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
+            "Last seen: ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
           ] })
-        ] })
+        ] }) }) })
       ] })
     }
   );
@@ -28819,16 +28844,16 @@ var CompactWorkspaceHealthCard = ({
 var HealthStatusGrid = ({
   workspaces,
   onWorkspaceClick,
-  viewMode: initialViewMode = "grid",
   showFilters = true,
   groupBy: initialGroupBy = "none",
   className = ""
 }) => {
-  const [viewMode, setViewMode] = React19.useState(initialViewMode);
   const [searchTerm, setSearchTerm] = React19.useState("");
   const [statusFilter, setStatusFilter] = React19.useState("all");
   const [groupBy, setGroupBy] = React19.useState(initialGroupBy);
   const [expandedGroups, setExpandedGroups] = React19.useState(/* @__PURE__ */ new Set());
+  const lastGroupByRef = React19.useRef(initialGroupBy);
+  const hasInitializedGroupsRef = React19.useRef(false);
   const filteredWorkspaces = React19.useMemo(() => {
     let filtered = [...workspaces];
     if (searchTerm) {
@@ -28869,7 +28894,17 @@ var HealthStatusGrid = ({
     return sortedGroups;
   }, [filteredWorkspaces, groupBy]);
   React19.useEffect(() => {
-    if (groupBy !== "none") {
+    if (groupBy !== lastGroupByRef.current) {
+      lastGroupByRef.current = groupBy;
+      hasInitializedGroupsRef.current = false;
+      if (groupBy === "none") {
+        setExpandedGroups(/* @__PURE__ */ new Set());
+      }
+    }
+  }, [groupBy]);
+  React19.useEffect(() => {
+    if (groupBy !== "none" && !hasInitializedGroupsRef.current && Object.keys(groupedWorkspaces).length > 0) {
+      hasInitializedGroupsRef.current = true;
       setExpandedGroups(new Set(Object.keys(groupedWorkspaces)));
     }
   }, [groupBy, groupedWorkspaces]);
@@ -28913,13 +28948,13 @@ var HealthStatusGrid = ({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: statusFilter, onValueChange: (value) => setStatusFilter(value), children: [
           /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full sm:w-[180px] bg-white border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "All statuses" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: "all", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { className: "bg-white border border-gray-200 shadow-lg", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(SelectItem, { value: "all", className: "text-gray-700 hover:bg-gray-50 focus:bg-gray-50 border-b border-gray-100 last:border-b-0", children: [
               "All (",
               workspaces.length,
               ")"
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "healthy", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "healthy", className: "text-gray-700 hover:bg-gray-50 focus:bg-gray-50 border-b border-gray-100 last:border-b-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                 "Healthy (",
@@ -28927,7 +28962,7 @@ var HealthStatusGrid = ({
                 ")"
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "unhealthy", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "unhealthy", className: "text-gray-700 hover:bg-gray-50 focus:bg-gray-50 border-b border-gray-100 last:border-b-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-red-500" }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                 "Unhealthy (",
@@ -28935,57 +28970,23 @@ var HealthStatusGrid = ({
                 ")"
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "warning", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "warning", className: "text-gray-700 hover:bg-gray-50 focus:bg-gray-50 border-b border-gray-100 last:border-b-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-500" }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                 "Warning (",
                 statusCounts.warning,
                 ")"
               ] })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "unknown", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-gray-400" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                "Unknown (",
-                statusCounts.unknown,
-                ")"
-              ] })
             ] }) })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: groupBy, onValueChange: (value) => setGroupBy(value), children: [
           /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "w-full sm:w-[160px] bg-white border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Group by" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "none", children: "No grouping" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "line", children: "Group by Line" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "status", children: "Group by Status" })
+          /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { className: "bg-white border border-gray-200 shadow-lg", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "none", className: "text-gray-700 hover:bg-gray-50 focus:bg-gray-50 border-b border-gray-100 last:border-b-0", children: "No grouping" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "line", className: "text-gray-700 hover:bg-gray-50 focus:bg-gray-50 border-b border-gray-100 last:border-b-0", children: "Group by Line" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "status", className: "text-gray-700 hover:bg-gray-50 focus:bg-gray-50 border-b border-gray-100 last:border-b-0", children: "Group by Status" })
           ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => setViewMode("grid"),
-              className: clsx(
-                "p-2 rounded-lg transition-colors",
-                viewMode === "grid" ? "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
-              ),
-              "aria-label": "Grid view",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid3x3, { className: "h-5 w-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => setViewMode("list"),
-              className: clsx(
-                "p-2 rounded-lg transition-colors",
-                viewMode === "list" ? "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
-              ),
-              "aria-label": "List view",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "h-5 w-5" })
-            }
-          )
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-sm text-gray-500 dark:text-gray-400", children: [
@@ -29025,32 +29026,15 @@ var HealthStatusGrid = ({
             ]
           }
         ),
-        isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", children: groupWorkspaces.map((workspace) => /* @__PURE__ */ jsxRuntime.jsx(
+          WorkspaceHealthCard,
           {
-            className: clsx(
-              viewMode === "grid" ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" : "space-y-2"
-            ),
-            children: groupWorkspaces.map(
-              (workspace) => viewMode === "grid" ? /* @__PURE__ */ jsxRuntime.jsx(
-                WorkspaceHealthCard,
-                {
-                  workspace,
-                  onClick: onWorkspaceClick,
-                  showDetails: true
-                },
-                workspace.workspace_id
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                CompactWorkspaceHealthCard,
-                {
-                  workspace,
-                  onClick: onWorkspaceClick
-                },
-                workspace.workspace_id
-              )
-            )
-          }
-        )
+            workspace,
+            onClick: onWorkspaceClick,
+            showDetails: true
+          },
+          workspace.workspace_id
+        )) })
       ] }, groupName);
     }) }),
     filteredWorkspaces.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500 dark:text-gray-400", children: searchTerm || statusFilter !== "all" ? "No workspaces found matching your filters." : "No workspaces available." }) })
@@ -37772,7 +37756,23 @@ var WorkspaceDetailView = ({
                   "aria-label": "Navigate back to previous page"
                 }
               ) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }),
+                workspaceHealth && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
+                    "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
+                    workspaceHealth.status === "healthy" ? "bg-green-400" : "bg-red-400"
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
+                    "relative inline-flex rounded-full h-2.5 w-2.5",
+                    workspaceHealth.status === "healthy" ? "bg-green-500" : "bg-red-500"
+                  ) })
+                ] })
+              ] }) }),
+              workspaceHealth && activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 flex items-center h-8", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [
+                "Last update: ",
+                workspaceHealth.timeSinceLastUpdate
+              ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
             ] }),
             activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
@@ -37800,19 +37800,6 @@ var WorkspaceDetailView = ({
                   workspace.shift_type,
                   " Shift"
                 ] })
-              ] }),
-              workspaceHealth && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx(
-                    "h-1.5 w-1.5 rounded-full",
-                    workspaceHealth.status === "healthy" ? "bg-green-600" : workspaceHealth.status === "unhealthy" ? "bg-red-600" : workspaceHealth.status === "warning" ? "bg-amber-600" : "bg-gray-500"
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-blue-700", children: [
-                    "Last update: ",
-                    workspaceHealth.timeSinceLastUpdate
-                  ] })
-                ] })
               ] })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 sm:mt-1.5 lg:mt-2 flex items-center justify-between", children: [
@@ -38356,7 +38343,6 @@ var WorkspaceHealthView = ({
   className = ""
 }) => {
   const router$1 = router.useRouter();
-  const [viewMode, setViewMode] = React19.useState("grid");
   const [groupBy, setGroupBy] = React19.useState("line");
   const operationalDate = getOperationalDate();
   const currentHour = (/* @__PURE__ */ new Date()).getHours();
@@ -38521,7 +38507,7 @@ var WorkspaceHealthView = ({
           transition: { duration: 0.3, delay: 0.1 },
           className: "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-2 sm:gap-3 lg:gap-4",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2 bg-white", children: [
               /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "Overall System Status" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
@@ -38539,33 +38525,33 @@ var WorkspaceHealthView = ({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "bg-white", children: [
               /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
                 getStatusIcon("healthy"),
                 "Healthy"
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-green-600 dark:text-green-400", children: summary.healthyWorkspaces }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.healthyWorkspaces }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Operating normally" })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "bg-white", children: [
               /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
                 getStatusIcon("warning"),
                 "Warning"
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-yellow-600 dark:text-yellow-400", children: summary.warningWorkspaces }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.warningWorkspaces }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Delayed updates" })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "bg-white", children: [
               /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
                 getStatusIcon("unhealthy"),
                 "Unhealthy"
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-red-600 dark:text-red-400", children: summary.unhealthyWorkspaces }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.unhealthyWorkspaces }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Requires attention" })
               ] })
             ] })
@@ -38583,7 +38569,6 @@ var WorkspaceHealthView = ({
             {
               workspaces,
               onWorkspaceClick: handleWorkspaceClick,
-              viewMode,
               showFilters: true,
               groupBy
             }