@optifye/dashboard-core 6.9.12 → 6.9.13

package/dist/index.js

@@ -2163,6 +2163,88 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
   setCache(key, data) {
     this.cache.set(key, { data, timestamp: Date.now() });
   }
+  getShiftTiming(timezone, shiftConfig) {
+    const { shiftId, date } = getCurrentShift(timezone, shiftConfig);
+    const dayShiftId = shiftConfig?.dayShift?.id ?? 0;
+    const isDayShift = shiftId === dayShiftId;
+    const defaultDayStart = "06:00";
+    const defaultDayEnd = "18:00";
+    const defaultNightStart = "18:00";
+    const defaultNightEnd = "06:00";
+    const shiftStartStr = isDayShift ? shiftConfig?.dayShift?.startTime || defaultDayStart : shiftConfig?.nightShift?.startTime || defaultNightStart;
+    const shiftEndStr = isDayShift ? shiftConfig?.dayShift?.endTime || defaultDayEnd : shiftConfig?.nightShift?.endTime || defaultNightEnd;
+    const shiftLabel = isDayShift ? "Day Shift" : "Night Shift";
+    const parseTime = (value) => {
+      const [hourPart = "0", minutePart = "0"] = value.split(":");
+      const hour = Number.parseInt(hourPart, 10);
+      const minute = Number.parseInt(minutePart, 10);
+      return {
+        hour: Number.isFinite(hour) ? hour : 0,
+        minute: Number.isFinite(minute) ? minute : 0
+      };
+    };
+    const getShiftDurationMinutes = (start, end) => {
+      const startParsed = parseTime(start);
+      const endParsed = parseTime(end);
+      const startTotal = startParsed.hour * 60 + startParsed.minute;
+      const endTotal = endParsed.hour * 60 + endParsed.minute;
+      let duration = endTotal - startTotal;
+      if (duration <= 0) {
+        duration += 24 * 60;
+      }
+      return duration;
+    };
+    const shiftStartDate = dateFnsTz.fromZonedTime(`${date}T${shiftStartStr}:00`, timezone);
+    const totalMinutes = getShiftDurationMinutes(shiftStartStr, shiftEndStr);
+    const shiftEndDate = dateFns.addMinutes(shiftStartDate, totalMinutes);
+    const now2 = /* @__PURE__ */ new Date();
+    let completedMinutes = dateFns.differenceInMinutes(now2 < shiftEndDate ? now2 : shiftEndDate, shiftStartDate);
+    if (completedMinutes < 0) completedMinutes = 0;
+    if (completedMinutes > totalMinutes) completedMinutes = totalMinutes;
+    const pendingMinutes = Math.max(0, totalMinutes - completedMinutes);
+    return {
+      shiftId,
+      date,
+      shiftLabel,
+      shiftStartDate,
+      shiftEndDate,
+      totalMinutes,
+      completedMinutes,
+      pendingMinutes
+    };
+  }
+  normalizeHourBucket(bucket) {
+    if (Array.isArray(bucket)) return bucket;
+    if (bucket && Array.isArray(bucket.values)) return bucket.values;
+    return void 0;
+  }
+  normalizeOutputHourly(outputHourlyRaw) {
+    return outputHourlyRaw && typeof outputHourlyRaw === "object" ? Object.fromEntries(
+      Object.entries(outputHourlyRaw).map(([key, value]) => [key, this.normalizeHourBucket(value) || []])
+    ) : {};
+  }
+  interpretUptimeValue(value) {
+    if (value === null || value === void 0) return "down";
+    if (typeof value === "string") {
+      return value.trim().toLowerCase() === "x" ? "down" : "up";
+    }
+    return "up";
+  }
+  deriveStatusForMinute(minuteOffset, minuteDate, outputHourly, outputArray, timezone) {
+    const hourKey = dateFnsTz.formatInTimeZone(minuteDate, timezone, "H");
+    const minuteKey = Number.parseInt(dateFnsTz.formatInTimeZone(minuteDate, timezone, "m"), 10);
+    const hourBucket = outputHourly[hourKey];
+    if (Array.isArray(hourBucket)) {
+      const value = hourBucket[minuteKey];
+      if (value !== void 0) {
+        return this.interpretUptimeValue(value);
+      }
+    }
+    if (minuteOffset < outputArray.length) {
+      return this.interpretUptimeValue(outputArray[minuteOffset]);
+    }
+    return "down";
+  }
   async getWorkspaceHealthStatus(options = {}) {
     const supabase = _getSupabaseInstance();
     if (!supabase) throw new Error("Supabase client not initialized");
@@ -2179,15 +2261,13 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
       throw error;
     }
     const processedData = (data || []).map((item) => this.processHealthStatus(item));
+    const companyId = options.companyId || data?.[0]?.company_id;
     let uptimeMap = /* @__PURE__ */ new Map();
-    if (options.companyId || data && data.length > 0) {
-      const companyId = options.companyId || data[0]?.company_id;
-      if (companyId) {
-        try {
-          uptimeMap = await this.calculateWorkspaceUptime(companyId);
-        } catch (error2) {
-          console.error("Error calculating uptime:", error2);
-        }
+    if (companyId) {
+      try {
+        uptimeMap = await this.calculateWorkspaceUptime(companyId);
+      } catch (error2) {
+        console.error("Error calculating uptime:", error2);
       }
     }
     const dataWithUptime = processedData.map((workspace) => {
@@ -2203,16 +2283,29 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     });
     let filteredData = dataWithUptime;
     try {
-      const { data: enabledWorkspaces, error: workspaceError } = await supabase.from("workspaces").select("workspace_id, display_name").eq("enable", true);
+      const enabledQuery = supabase.from("workspaces").select("workspace_id, display_name, line_id").eq("enable", true);
+      if (options.lineId) {
+        enabledQuery.eq("line_id", options.lineId);
+      }
+      const { data: enabledWorkspaces, error: workspaceError } = await enabledQuery;
       if (!workspaceError && enabledWorkspaces && enabledWorkspaces.length > 0) {
-        const enabledWorkspaceNames = /* @__PURE__ */ new Set();
+        const enabledByLineAndId = /* @__PURE__ */ new Set();
+        const enabledByLineAndName = /* @__PURE__ */ new Set();
         enabledWorkspaces.forEach((w) => {
-          if (w.workspace_id) enabledWorkspaceNames.add(w.workspace_id);
-          if (w.display_name) enabledWorkspaceNames.add(w.display_name);
+          const lineKey = w.line_id ? String(w.line_id) : "";
+          const idKey = w.workspace_id ? String(w.workspace_id) : "";
+          const nameKey = w.display_name ? String(w.display_name) : "";
+          if (lineKey && idKey) enabledByLineAndId.add(`${lineKey}::${idKey}`);
+          if (lineKey && nameKey) enabledByLineAndName.add(`${lineKey}::${nameKey}`);
         });
         filteredData = filteredData.filter((item) => {
-          const displayName = item.workspace_display_name || "";
-          return enabledWorkspaceNames.has(displayName);
+          const lineKey = item.line_id ? String(item.line_id) : "";
+          if (!lineKey) return false;
+          const idKey = item.workspace_id ? `${lineKey}::${item.workspace_id}` : "";
+          const nameKey = item.workspace_display_name ? `${lineKey}::${item.workspace_display_name}` : "";
+          if (idKey && enabledByLineAndId.has(idKey)) return true;
+          if (nameKey && enabledByLineAndName.has(nameKey)) return true;
+          return false;
         });
       } else if (!workspaceError && enabledWorkspaces && enabledWorkspaces.length === 0) {
         return [];
@@ -2250,6 +2343,127 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     }
     return filteredData;
   }
+  async getWorkspaceUptimeTimeline(workspaceId, companyId) {
+    if (!workspaceId) {
+      throw new Error("workspaceId is required to fetch uptime timeline");
+    }
+    if (!companyId) {
+      throw new Error("companyId is required to fetch uptime timeline");
+    }
+    const supabase = _getSupabaseInstance();
+    if (!supabase) throw new Error("Supabase client not initialized");
+    const dashboardConfig = _getDashboardConfigInstance();
+    const timezone = dashboardConfig?.dateTimeConfig?.defaultTimezone || "UTC";
+    const shiftConfig = dashboardConfig?.shiftConfig;
+    const {
+      shiftId,
+      shiftLabel,
+      shiftStartDate,
+      shiftEndDate,
+      totalMinutes,
+      completedMinutes,
+      pendingMinutes,
+      date
+    } = this.getShiftTiming(timezone, shiftConfig);
+    const tableName = `performance_metrics_${companyId.replace(/-/g, "_")}`;
+    const { data, error } = await supabase.from(tableName).select("workspace_id, output_hourly, output_array").eq("workspace_id", workspaceId).eq("date", date).eq("shift_id", shiftId).limit(1);
+    if (error) {
+      console.error("Error fetching uptime timeline metrics:", error);
+      throw error;
+    }
+    const record = Array.isArray(data) && data.length > 0 ? data[0] : null;
+    const outputHourly = this.normalizeOutputHourly(record?.output_hourly || {});
+    const outputArray = Array.isArray(record?.output_array) ? record.output_array : [];
+    const points = [];
+    let uptimeMinutes = 0;
+    let downtimeMinutes = 0;
+    const MIN_DOWNTIME_MINUTES = 2;
+    for (let minuteIndex = 0; minuteIndex < totalMinutes; minuteIndex++) {
+      const minuteDate = dateFns.addMinutes(shiftStartDate, minuteIndex);
+      const timestamp = dateFnsTz.formatInTimeZone(minuteDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX");
+      let status;
+      if (minuteIndex < completedMinutes) {
+        status = this.deriveStatusForMinute(
+          minuteIndex,
+          minuteDate,
+          outputHourly,
+          outputArray,
+          timezone
+        );
+        if (status === "up") {
+          uptimeMinutes += 1;
+        } else {
+          downtimeMinutes += 1;
+        }
+      } else {
+        status = "pending";
+      }
+      points.push({
+        minuteIndex,
+        timestamp,
+        status
+      });
+    }
+    const downtimeSegments = [];
+    let currentSegmentStart = null;
+    const pushSegment = (startIndex, endIndex) => {
+      if (endIndex <= startIndex) return;
+      const segmentStartDate = dateFns.addMinutes(shiftStartDate, startIndex);
+      const segmentEndDate = dateFns.addMinutes(shiftStartDate, endIndex);
+      downtimeSegments.push({
+        startMinuteIndex: startIndex,
+        endMinuteIndex: endIndex,
+        startTime: dateFnsTz.formatInTimeZone(segmentStartDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+        endTime: dateFnsTz.formatInTimeZone(segmentEndDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+        durationMinutes: endIndex - startIndex
+      });
+    };
+    for (let i = 0; i < completedMinutes; i++) {
+      const point = points[i];
+      if (point.status === "down") {
+        if (currentSegmentStart === null) {
+          currentSegmentStart = i;
+        }
+      } else if (currentSegmentStart !== null) {
+        pushSegment(currentSegmentStart, i);
+        currentSegmentStart = null;
+      }
+    }
+    if (currentSegmentStart !== null) {
+      pushSegment(currentSegmentStart, completedMinutes);
+    }
+    const filteredSegments = [];
+    downtimeSegments.forEach((segment) => {
+      if (segment.durationMinutes >= MIN_DOWNTIME_MINUTES) {
+        filteredSegments.push(segment);
+      } else {
+        for (let i = segment.startMinuteIndex; i < segment.endMinuteIndex; i++) {
+          if (points[i] && points[i].status === "down") {
+            points[i].status = "up";
+            downtimeMinutes = Math.max(0, downtimeMinutes - 1);
+            uptimeMinutes += 1;
+          }
+        }
+      }
+    });
+    const completedWindow = Math.max(1, uptimeMinutes + downtimeMinutes);
+    const uptimePercentage = completedMinutes > 0 ? Number((uptimeMinutes / completedWindow * 100).toFixed(1)) : 100;
+    return {
+      shiftId,
+      shiftLabel,
+      shiftStart: dateFnsTz.formatInTimeZone(shiftStartDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+      shiftEnd: dateFnsTz.formatInTimeZone(shiftEndDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+      totalMinutes,
+      completedMinutes,
+      uptimeMinutes,
+      downtimeMinutes,
+      pendingMinutes,
+      uptimePercentage,
+      generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      points,
+      downtimeSegments: filteredSegments
+    };
+  }
   async getWorkspaceHealthById(workspaceId) {
     const cacheKey = `health-${workspaceId}`;
     const cached = this.getFromCache(cacheKey);
@@ -2387,145 +2601,63 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     const dashboardConfig = _getDashboardConfigInstance();
     const timezone = dashboardConfig?.dateTimeConfig?.defaultTimezone || "UTC";
     const shiftConfig = dashboardConfig?.shiftConfig;
-    const currentShiftInfo = getCurrentShift(timezone, shiftConfig);
-    const currentDate = currentShiftInfo.date;
-    const currentShiftId = currentShiftInfo.shiftId;
-    const now2 = /* @__PURE__ */ new Date();
-    const currentHour = now2.getHours();
-    const currentMinute = now2.getMinutes();
-    const dayShiftStart = shiftConfig?.dayShift?.startTime || "08:00";
-    const dayShiftEnd = shiftConfig?.dayShift?.endTime || "19:30";
-    const nightShiftStart = shiftConfig?.nightShift?.startTime || "19:30";
-    const nightShiftEnd = shiftConfig?.nightShift?.endTime || "06:00";
-    const parseShiftTime = (timeStr) => {
-      const [hour, minute] = timeStr.split(":").map(Number);
-      return { hour, minute };
-    };
-    let shiftStart, shiftEnd;
-    if (currentShiftId === 0) {
-      shiftStart = parseShiftTime(dayShiftStart);
-      shiftEnd = parseShiftTime(dayShiftEnd);
-    } else {
-      shiftStart = parseShiftTime(nightShiftStart);
-      shiftEnd = parseShiftTime(nightShiftEnd);
-    }
-    let elapsedMinutes = 0;
-    if (currentShiftId === 0) {
-      const shiftStartTotalMinutes = shiftStart.hour * 60 + shiftStart.minute;
-      const currentTotalMinutes = currentHour * 60 + currentMinute;
-      const shiftEndTotalMinutes = shiftEnd.hour * 60 + shiftEnd.minute;
-      if (currentTotalMinutes >= shiftStartTotalMinutes && currentTotalMinutes < shiftEndTotalMinutes) {
-        elapsedMinutes = currentTotalMinutes - shiftStartTotalMinutes;
-      } else if (currentTotalMinutes >= shiftEndTotalMinutes) {
-        elapsedMinutes = shiftEndTotalMinutes - shiftStartTotalMinutes;
-      }
-    } else {
-      const shiftStartTotalMinutes = shiftStart.hour * 60 + shiftStart.minute;
-      const currentTotalMinutes = currentHour * 60 + currentMinute;
-      const shiftEndTotalMinutes = shiftEnd.hour * 60 + shiftEnd.minute;
-      if (currentHour >= shiftStart.hour || currentHour < shiftEnd.hour) {
-        if (currentHour >= shiftStart.hour) {
-          elapsedMinutes = currentTotalMinutes - shiftStartTotalMinutes;
-        } else {
-          elapsedMinutes = 24 * 60 - shiftStartTotalMinutes + currentTotalMinutes;
-        }
-        if (currentHour >= shiftEnd.hour && currentTotalMinutes >= shiftEndTotalMinutes) {
-          const totalShiftMinutes = 24 * 60 - shiftStartTotalMinutes + shiftEndTotalMinutes;
-          elapsedMinutes = Math.min(elapsedMinutes, totalShiftMinutes);
-        }
-      }
-    }
+    const {
+      shiftId,
+      date,
+      shiftStartDate,
+      completedMinutes
+    } = this.getShiftTiming(timezone, shiftConfig);
     const tableName = `performance_metrics_${companyId.replace(/-/g, "_")}`;
     try {
-      const { data: queryData, error } = await supabase.from(tableName).select("workspace_id, workspace_display_name, output_hourly").eq("date", currentDate).eq("shift_id", currentShiftId);
+      const { data: queryData, error } = await supabase.from(tableName).select("workspace_id, workspace_display_name, output_hourly, output_array").eq("date", date).eq("shift_id", shiftId);
       if (error) {
         console.error("Error fetching performance metrics:", error);
         return /* @__PURE__ */ new Map();
       }
       const uptimeMap = /* @__PURE__ */ new Map();
       for (const record of queryData || []) {
-        let actualMinutes = 0;
-        let totalPossibleMinutes = 0;
-        const outputHourly = record.output_hourly || {};
-        const hoursElapsed = Math.ceil(elapsedMinutes / 60);
-        for (let hourIndex = 0; hourIndex < hoursElapsed; hourIndex++) {
-          const actualHour = (shiftStart.hour + hourIndex) % 24;
-          let hourData = [];
-          let minutesInThisHour = 60;
-          if (shiftStart.minute > 0) {
-            if (hourIndex === 0) {
-              const firstHourData = outputHourly[actualHour.toString()] || [];
-              const nextHour = (actualHour + 1) % 24;
-              const nextHourData = outputHourly[nextHour.toString()] || [];
-              hourData = [
-                ...Array.isArray(firstHourData) ? firstHourData.slice(shiftStart.minute) : [],
-                ...Array.isArray(nextHourData) ? nextHourData.slice(0, shiftStart.minute) : []
-              ];
-            } else if (hourIndex < hoursElapsed - 1) {
-              const currentHourData = outputHourly[actualHour.toString()] || [];
-              const nextHour = (actualHour + 1) % 24;
-              const nextHourData = outputHourly[nextHour.toString()] || [];
-              hourData = [
-                ...Array.isArray(currentHourData) ? currentHourData.slice(shiftStart.minute) : [],
-                ...Array.isArray(nextHourData) ? nextHourData.slice(0, shiftStart.minute) : []
-              ];
-            } else {
-              const isLastHourPartial = hourIndex === hoursElapsed - 1 && elapsedMinutes % 60 > 0;
-              if (isLastHourPartial) {
-                minutesInThisHour = elapsedMinutes % 60;
-                const currentHourData = outputHourly[actualHour.toString()] || [];
-                if (shiftStart.minute > 0) {
-                  const nextHour = (actualHour + 1) % 24;
-                  const nextHourData = outputHourly[nextHour.toString()] || [];
-                  const firstPart = Array.isArray(currentHourData) ? currentHourData.slice(shiftStart.minute) : [];
-                  const secondPart = Array.isArray(nextHourData) ? nextHourData.slice(0, Math.min(shiftStart.minute, minutesInThisHour)) : [];
-                  hourData = [...firstPart, ...secondPart].slice(0, minutesInThisHour);
-                } else {
-                  hourData = Array.isArray(currentHourData) ? currentHourData.slice(0, minutesInThisHour) : [];
-                }
-              } else {
-                const currentHourData = outputHourly[actualHour.toString()] || [];
-                const nextHour = (actualHour + 1) % 24;
-                const nextHourData = outputHourly[nextHour.toString()] || [];
-                hourData = [
-                  ...Array.isArray(currentHourData) ? currentHourData.slice(shiftStart.minute) : [],
-                  ...Array.isArray(nextHourData) ? nextHourData.slice(0, shiftStart.minute) : []
-                ];
-              }
-            }
+        const outputHourly = this.normalizeOutputHourly(record.output_hourly || {});
+        const outputArray = Array.isArray(record.output_array) ? record.output_array : [];
+        let uptimeMinutes = 0;
+        let downtimeMinutes = 0;
+        const MIN_DOWNTIME_MINUTES = 2;
+        let currentDownRun = 0;
+        for (let minuteIndex = 0; minuteIndex < completedMinutes; minuteIndex++) {
+          const minuteDate = dateFns.addMinutes(shiftStartDate, minuteIndex);
+          const status = this.deriveStatusForMinute(
+            minuteIndex,
+            minuteDate,
+            outputHourly,
+            outputArray,
+            timezone
+          );
+          if (status === "down") {
+            currentDownRun += 1;
           } else {
-            hourData = outputHourly[actualHour.toString()] || [];
-            if (hourIndex === hoursElapsed - 1) {
-              const remainingMinutes = elapsedMinutes % 60;
-              if (remainingMinutes > 0) {
-                minutesInThisHour = remainingMinutes;
-                hourData = Array.isArray(hourData) ? hourData.slice(0, minutesInThisHour) : [];
+            if (currentDownRun > 0) {
+              if (currentDownRun >= MIN_DOWNTIME_MINUTES) {
+                downtimeMinutes += currentDownRun;
+              } else {
+                uptimeMinutes += currentDownRun;
               }
+              currentDownRun = 0;
             }
+            uptimeMinutes += 1;
           }
-          const hasXArchitecture = Array.isArray(hourData) && hourData.some((val) => val === "x");
-          if (hasXArchitecture) {
-            const xCount = hourData.filter((val) => val === "x").length;
-            if (xCount <= 2) {
-              actualMinutes += minutesInThisHour;
-            } else {
-              const uptimeCount = hourData.filter((val) => val !== "x").length;
-              actualMinutes += Math.min(uptimeCount, minutesInThisHour);
-            }
+        }
+        if (currentDownRun > 0) {
+          if (currentDownRun >= MIN_DOWNTIME_MINUTES) {
+            downtimeMinutes += currentDownRun;
           } else {
-            const arrayLength = Array.isArray(hourData) ? hourData.length : 0;
-            if (arrayLength >= Math.min(58, minutesInThisHour - 2)) {
-              actualMinutes += minutesInThisHour;
-            } else {
-              actualMinutes += Math.min(arrayLength, minutesInThisHour);
-            }
+            uptimeMinutes += currentDownRun;
           }
-          totalPossibleMinutes += minutesInThisHour;
+          currentDownRun = 0;
         }
-        const percentage = totalPossibleMinutes > 0 ? Math.round(actualMinutes / totalPossibleMinutes * 1e3) / 10 : 100;
+        const completedWindow = uptimeMinutes + downtimeMinutes;
+        const percentage = completedWindow > 0 ? Number((uptimeMinutes / completedWindow * 100).toFixed(1)) : 100;
         uptimeMap.set(record.workspace_id, {
-          expectedMinutes: totalPossibleMinutes,
-          actualMinutes,
+          expectedMinutes: completedMinutes,
+          actualMinutes: uptimeMinutes,
           percentage,
           lastCalculated: (/* @__PURE__ */ new Date()).toISOString()
         });
@@ -10897,6 +11029,65 @@ var useWorkspaceHealthStatus = (workspaceId) => {
     refetch: fetchHealthStatus
   };
 };
+var useWorkspaceUptimeTimeline = (options) => {
+  const {
+    workspaceId,
+    companyId,
+    enabled = true,
+    refreshInterval
+  } = options;
+  const [timeline, setTimeline] = React23.useState(null);
+  const [loading, setLoading] = React23.useState(false);
+  const [error, setError] = React23.useState(null);
+  const isFetchingRef = React23.useRef(false);
+  const intervalRef = React23.useRef(null);
+  const fetchTimeline = React23.useCallback(async () => {
+    if (!enabled) return;
+    if (!workspaceId || !companyId) {
+      setTimeline(null);
+      return;
+    }
+    if (isFetchingRef.current) return;
+    try {
+      isFetchingRef.current = true;
+      setLoading(true);
+      setError(null);
+      const data = await workspaceHealthService.getWorkspaceUptimeTimeline(
+        workspaceId,
+        companyId
+      );
+      setTimeline(data);
+    } catch (err) {
+      console.error("[useWorkspaceUptimeTimeline] Failed to fetch timeline:", err);
+      setError({ message: err?.message || "Failed to load uptime timeline", code: err?.code || "FETCH_ERROR" });
+    } finally {
+      setLoading(false);
+      isFetchingRef.current = false;
+    }
+  }, [enabled, workspaceId, companyId]);
+  React23.useEffect(() => {
+    fetchTimeline();
+  }, [fetchTimeline]);
+  React23.useEffect(() => {
+    if (!refreshInterval || refreshInterval <= 0 || !enabled) {
+      return;
+    }
+    intervalRef.current = setInterval(() => {
+      fetchTimeline();
+    }, refreshInterval);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [refreshInterval, enabled, fetchTimeline]);
+  return {
+    timeline,
+    loading,
+    error,
+    refetch: fetchTimeline
+  };
+};
 function useDateFormatter() {
   const { defaultTimezone, defaultLocale, dateFormatOptions, timeFormatOptions, dateTimeFormatOptions } = useDateTimeConfig();
   const formatDate = React23.useCallback(
@@ -10912,7 +11103,7 @@ function useDateFormatter() {
     },
     [defaultTimezone, defaultLocale, dateFormatOptions]
   );
-  const formatTime4 = React23.useCallback(
+  const formatTime5 = React23.useCallback(
     (date, formatString) => {
       const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
       if (!dateFns.isValid(dateObj)) return "Invalid Time";
@@ -10943,7 +11134,7 @@ function useDateFormatter() {
   }, []);
   return {
     formatDate,
-    formatTime: formatTime4,
+    formatTime: formatTime5,
     formatDateTime,
     getNow,
     timezone: defaultTimezone || "UTC",
@@ -23929,7 +24120,7 @@ var HourlyOutputChartComponent = ({
       endHour = Math.floor(endDecimalHour) % 24;
       endMinute = Math.round(endDecimalHour % 1 * 60);
     }
-    const formatTime4 = (h, m) => {
+    const formatTime5 = (h, m) => {
       const period = h >= 12 ? "PM" : "AM";
       const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
       if (m === 0) {
@@ -23937,9 +24128,9 @@ var HourlyOutputChartComponent = ({
       }
       return `${hour12}:${m.toString().padStart(2, "0")}${period}`;
     };
-    return `${formatTime4(startHour, startMinute)}-${formatTime4(endHour, endMinute)}`;
+    return `${formatTime5(startHour, startMinute)}-${formatTime5(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const formatTimeRange = React23__namespace.default.useCallback((hourIndex) => {
+  const formatTimeRange2 = React23__namespace.default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -23953,12 +24144,12 @@ var HourlyOutputChartComponent = ({
       endHour = Math.floor(endDecimalHour) % 24;
       endMinute = Math.round(endDecimalHour % 1 * 60);
     }
-    const formatTime4 = (h, m) => {
+    const formatTime5 = (h, m) => {
       const period = h >= 12 ? "PM" : "AM";
       const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
       return `${hour12}:${m.toString().padStart(2, "0")} ${period}`;
     };
-    return `${formatTime4(startHour, startMinute)} - ${formatTime4(endHour, endMinute)}`;
+    return `${formatTime5(startHour, startMinute)} - ${formatTime5(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
   const chartData = React23__namespace.default.useMemo(() => {
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
@@ -24019,7 +24210,7 @@ var HourlyOutputChartComponent = ({
       idleMinutes = idleArray.filter((val) => val === "1" || val === 1).length;
       return {
         hour: formatHour(i),
-        timeRange: formatTimeRange(i),
+        timeRange: formatTimeRange2(i),
         output: animatedData[i] || 0,
         originalOutput: data[i] || 0,
         // Keep original data for labels
@@ -24028,7 +24219,7 @@ var HourlyOutputChartComponent = ({
         idleArray
       };
     });
-  }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, shiftStartTime.minute, shiftEndTime, formatHour, formatTimeRange, SHIFT_DURATION]);
+  }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, shiftStartTime.minute, shiftEndTime, formatHour, formatTimeRange2, SHIFT_DURATION]);
   const IdleBar = React23__namespace.default.useMemo(() => {
     if (!idleBarState.visible) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -25129,7 +25320,7 @@ var SOPComplianceChart = ({
       }
     };
   }, [data, animateToNewData, mockData]);
-  const formatTime4 = (minuteIndex) => {
+  const formatTime5 = (minuteIndex) => {
     const totalMinutes = shiftStartHour * 60 + minuteIndex;
     const hours = Math.floor(totalMinutes / 60) % 24;
     const minutes = totalMinutes % 60;
@@ -25141,7 +25332,7 @@ var SOPComplianceChart = ({
     const hasDataForMinute = index < animatedData.length - 10;
     return {
       minute: index,
-      time: formatTime4(index),
+      time: formatTime5(index),
       compliance: hasDataForMinute ? animatedData[index] : null
     };
   });
@@ -25575,7 +25766,7 @@ var DateTimeDisplay = ({
   const {
     defaultTimezone
   } = useDateTimeConfig();
-  const { formatDate, formatTime: formatTime4 } = useDateFormatter();
+  const { formatDate, formatTime: formatTime5 } = useDateFormatter();
   const [now2, setNow] = React23.useState(() => getCurrentTimeInZone(defaultTimezone || "UTC"));
   React23.useEffect(() => {
     const timerId = setInterval(() => {
@@ -25587,7 +25778,7 @@ var DateTimeDisplay = ({
     return null;
   }
   const formattedDate = showDate ? formatDate(now2) : "";
-  const formattedTime = showTime ? formatTime4(now2) : "";
+  const formattedTime = showTime ? formatTime5(now2) : "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-300", className), children: [
     showDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "date-display", "aria-label": `Current date: ${formattedDate}`, children: formattedDate }),
     showDate && showTime && formattedDate && formattedTime && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "separator", "aria-hidden": "true", children: "|" }),
@@ -25751,7 +25942,7 @@ var BreakNotificationPopup = ({
   const handlePrevious = () => {
     setCurrentIndex((prev) => (prev - 1 + visibleBreaks.length) % visibleBreaks.length);
   };
-  const formatTime4 = (minutes) => {
+  const formatTime5 = (minutes) => {
     const hours = Math.floor(minutes / 60);
     const mins = minutes % 60;
     if (hours > 0) {
@@ -25825,9 +26016,9 @@ var BreakNotificationPopup = ({
                 formatTo12Hour(currentBreak.endTime)
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mb-2", children: [
-                formatTime4(currentBreak.elapsedMinutes),
+                formatTime5(currentBreak.elapsedMinutes),
                 " elapsed of ",
-                formatTime4(currentBreak.duration),
+                formatTime5(currentBreak.duration),
                 " total"
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -31493,7 +31684,7 @@ function DiagnosisVideoModal({
     }
     loadClip();
   }, [clipId, supabase, transformPlaylistUrls]);
-  const formatTime4 = (seconds) => {
+  const formatTime5 = (seconds) => {
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);
     return `${mins}:${secs.toString().padStart(2, "0")}`;
@@ -31685,9 +31876,9 @@ function DiagnosisVideoModal({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium", children: [
-                formatTime4(currentTime),
+                formatTime5(currentTime),
                 " / ",
-                formatTime4(duration)
+                formatTime5(duration)
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
@@ -33507,45 +33698,35 @@ var LinePdfGenerator = ({
       const doc = new jsPDF.jsPDF();
       const pageHeight = doc.internal.pageSize.height;
       const addHeaderPage1 = () => {
-        doc.setFontSize(12);
+        doc.setFontSize(14);
         doc.setFont("helvetica", "bold");
-        doc.setTextColor(70, 70, 70);
+        doc.setTextColor(50, 50, 50);
         doc.text("OPTIFYE.AI", 20, 15);
-        doc.setFontSize(10);
+        doc.setFontSize(9);
         doc.setFont("helvetica", "normal");
         doc.setTextColor(100, 100, 100);
-        const reportText = "REAL-TIME PERFORMANCE REPORT";
-        const reportTextWidth = doc.getStringUnitWidth(reportText) * 10 / doc.internal.scaleFactor;
-        doc.text(reportText, doc.internal.pageSize.width - 20 - reportTextWidth, 15);
-        doc.setDrawColor(220, 220, 220);
-        doc.setLineWidth(0.3);
+        const generatedText = `Generated on ${(/* @__PURE__ */ new Date()).toLocaleString("en-IN", { timeZone: "Asia/Kolkata" })}`;
+        const generatedTextWidth = doc.getStringUnitWidth(generatedText) * 9 / doc.internal.scaleFactor;
+        doc.text(generatedText, doc.internal.pageSize.width - 20 - generatedTextWidth, 15);
+        doc.setDrawColor(200, 200, 200);
+        doc.setLineWidth(0.5);
         doc.line(20, 20, 190, 20);
       };
       const addHeaderPage2 = () => {
-        doc.setFontSize(12);
+        doc.setFontSize(14);
         doc.setFont("helvetica", "bold");
-        doc.setTextColor(70, 70, 70);
+        doc.setTextColor(50, 50, 50);
         doc.text("OPTIFYE.AI", 20, 15);
-        doc.setFontSize(10);
+        doc.setFontSize(9);
         doc.setFont("helvetica", "normal");
         doc.setTextColor(100, 100, 100);
-        const reportText = "REAL-TIME PERFORMANCE REPORT";
-        const reportTextWidth = doc.getStringUnitWidth(reportText) * 10 / doc.internal.scaleFactor;
-        doc.text(reportText, doc.internal.pageSize.width - 20 - reportTextWidth, 15);
-        doc.text("Page 2", doc.internal.pageSize.width - 30, pageHeight - 15);
-        doc.setDrawColor(220, 220, 220);
-        doc.setLineWidth(0.3);
-        doc.line(20, 20, 190, 20);
-        return 35;
-      };
-      const addFooter = (pageNum) => {
-        doc.setFontSize(9);
-        doc.setTextColor(130, 130, 130);
         const generatedText = `Generated on ${(/* @__PURE__ */ new Date()).toLocaleString("en-IN", { timeZone: "Asia/Kolkata" })}`;
-        doc.text(generatedText, 20, pageHeight - 15);
-        if (pageNum === 1) {
-          doc.text("Page 1", doc.internal.pageSize.width - 30, pageHeight - 15);
-        }
+        const generatedTextWidth = doc.getStringUnitWidth(generatedText) * 9 / doc.internal.scaleFactor;
+        doc.text(generatedText, doc.internal.pageSize.width - 20 - generatedTextWidth, 15);
+        doc.setDrawColor(200, 200, 200);
+        doc.setLineWidth(0.5);
+        doc.line(20, 20, 190, 20);
+        return 30;
       };
       addHeaderPage1();
       doc.setFontSize(26);
@@ -33591,37 +33772,47 @@ var LinePdfGenerator = ({
       doc.setDrawColor(200, 200, 200);
       doc.setLineWidth(0.5);
       doc.line(20, 53, 190, 53);
-      doc.setFontSize(16);
+      const perfOverviewStartY = 58;
+      doc.setFillColor(245, 245, 245);
+      doc.roundedRect(15, perfOverviewStartY, 180, 50, 3, 3, "F");
+      doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
-      doc.setTextColor(70, 70, 70);
-      doc.text("Line Performance Overview", 20, 65);
+      doc.setTextColor(40, 40, 40);
+      doc.text("Line Performance Overview", 20, 68);
       doc.setTextColor(0, 0, 0);
       const createKPIBox = (y) => {
-        doc.setFillColor(250, 250, 250);
-        doc.roundedRect(22, y - 7, 165, 12, 1, 1, "F");
+        doc.setFillColor(255, 255, 255);
+        doc.roundedRect(22, y - 7, 165, 12, 2, 2, "F");
+        doc.setDrawColor(230, 230, 230);
+        doc.setLineWidth(0.2);
+        doc.roundedRect(22, y - 7, 165, 12, 2, 2, "S");
       };
-      createKPIBox(77);
-      doc.setFontSize(12);
+      const kpiStartY = 80;
+      const kpiSpacing = 10;
+      createKPIBox(kpiStartY);
+      doc.setFontSize(11);
       doc.setFont("helvetica", "normal");
-      doc.text("Output:", 25, 77);
+      doc.text("Output:", 25, kpiStartY);
       doc.setFont("helvetica", "bold");
-      doc.text(`${lineInfo.metrics.current_output} / ${lineInfo.metrics.line_threshold}`, 120, 77);
-      createKPIBox(87);
+      doc.text(`${lineInfo.metrics.current_output} / ${lineInfo.metrics.line_threshold}`, 120, kpiStartY);
+      createKPIBox(kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "normal");
-      doc.text("Underperforming Workspaces:", 25, 87);
+      doc.text("Underperforming Workspaces:", 25, kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "bold");
-      doc.text(`${lineInfo.metrics.underperforming_workspaces} / ${lineInfo.metrics.total_workspaces}`, 120, 87);
-      createKPIBox(97);
+      doc.text(`${lineInfo.metrics.underperforming_workspaces} / ${lineInfo.metrics.total_workspaces}`, 120, kpiStartY + kpiSpacing);
+      createKPIBox(kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "normal");
-      doc.text("Average Efficiency:", 25, 97);
+      doc.text("Average Efficiency:", 25, kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "bold");
-      doc.text(`${lineInfo.metrics.avg_efficiency.toFixed(1)}%`, 120, 97);
-      doc.setDrawColor(200, 200, 200);
-      doc.line(20, 110, 190, 110);
-      doc.setFontSize(16);
+      doc.text(`${lineInfo.metrics.avg_efficiency.toFixed(1)}%`, 120, kpiStartY + kpiSpacing * 2);
+      doc.setDrawColor(180, 180, 180);
+      doc.setLineWidth(0.8);
+      doc.line(20, 118, 190, 118);
+      const hourlyOverviewStartY = 123;
+      doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
-      doc.setTextColor(70, 70, 70);
-      doc.text("Hourly Output Overview", 20, 135);
+      doc.setTextColor(40, 40, 40);
+      doc.text("Hourly Output Overview", 20, 133);
       doc.setTextColor(0, 0, 0);
       const getHourlyTimeRanges = (startTimeStr, endTimeStr) => {
         const [hours, minutes] = startTimeStr.split(":");
@@ -33658,7 +33849,7 @@ var LinePdfGenerator = ({
           }
           hourEndTime.setSeconds(0);
           hourEndTime.setMilliseconds(0);
-          const formatTime4 = (date2) => {
+          const formatTime5 = (date2) => {
             return date2.toLocaleTimeString("en-IN", {
               hour: "2-digit",
               minute: "2-digit",
@@ -33666,7 +33857,7 @@ var LinePdfGenerator = ({
               timeZone: "Asia/Kolkata"
             });
           };
-          return `${formatTime4(hourStartTime)} - ${formatTime4(hourEndTime)}`;
+          return `${formatTime5(hourStartTime)} - ${formatTime5(hourEndTime)}`;
         });
       };
       const hourlyTimeRanges = lineInfo.metrics.shift_start ? getHourlyTimeRanges(lineInfo.metrics.shift_start, lineInfo.metrics.shift_end) : [];
@@ -33813,86 +34004,94 @@ var LinePdfGenerator = ({
           return Math.round(lineInfo.metrics.current_output / shiftDuration);
         });
       }
+      const tableHeaderY = 143;
+      const tableStartY = 151;
+      const rowSpacing = 8;
+      const bottomPadding = 8;
+      const hourlyTableHeight = hourlyTimeRanges.length * rowSpacing;
+      const backgroundHeight = tableStartY - hourlyOverviewStartY + hourlyTableHeight + bottomPadding;
+      doc.setFillColor(245, 245, 245);
+      doc.roundedRect(15, hourlyOverviewStartY, 180, backgroundHeight, 3, 3, "F");
       doc.setFontSize(11);
       doc.setFont("helvetica", "bold");
-      doc.setFillColor(245, 245, 245);
-      doc.roundedRect(20, 140, 170, 8, 1, 1, "F");
-      doc.text("Time Range", 25, 145);
-      doc.text("Actual Output", 80, 145);
-      doc.text("Target Output", 125, 145);
-      doc.text("Status", 170, 145);
-      doc.setLineWidth(0.2);
-      doc.setDrawColor(220, 220, 220);
-      doc.line(20, 148, 190, 148);
+      doc.text("Time Range", 25, tableHeaderY);
+      doc.text("Output", 80, tableHeaderY);
+      doc.text("Target", 125, tableHeaderY);
+      doc.text("Status", 170, tableHeaderY);
+      doc.setLineWidth(0.3);
+      doc.setDrawColor(200, 200, 200);
+      doc.line(20, 146, 190, 146);
       doc.setFont("helvetica", "normal");
-      let yPos = 155;
-      const rowSpacing = 7;
+      let yPos = tableStartY;
+      const lineDateForTable = new Date(lineInfo.date);
+      const todayForTable = /* @__PURE__ */ new Date();
+      todayForTable.setHours(0, 0, 0, 0);
+      lineDateForTable.setHours(0, 0, 0, 0);
+      const isTodayForTable = lineDateForTable.getTime() === todayForTable.getTime();
+      let currentHour = 24;
+      if (isTodayForTable) {
+        const now2 = /* @__PURE__ */ new Date();
+        const currentTimeIST = new Date(now2.toLocaleString("en-US", { timeZone: "Asia/Kolkata" }));
+        currentHour = currentTimeIST.getHours();
+      }
       hourlyTimeRanges.forEach((timeRange, index) => {
-        if (index % 2 === 0) {
-          doc.setFillColor(252, 252, 252);
-          doc.roundedRect(20, yPos - 5, 170, 8, 1, 1, "F");
-        }
-        const actualOutput = hourlyActualOutput[index];
-        const isOverTarget = actualOutput >= targetOutputPerHour;
+        const actualOutput = hourlyActualOutput[index] || 0;
+        const [startHourStr] = (lineInfo.metrics.shift_start || "6:00").split(":");
+        const startHour = parseInt(startHourStr);
+        const hourNumber = (startHour + index) % 24;
+        const dataCollected = !isTodayForTable || hourNumber < currentHour;
+        const outputStr = dataCollected ? actualOutput.toString() : "TBD";
+        const targetStr = targetOutputPerHour.toString();
         doc.text(timeRange, 25, yPos);
-        doc.text(actualOutput.toString(), 80, yPos);
-        doc.text(targetOutputPerHour.toString(), 125, yPos);
-        if (isOverTarget) {
-          doc.setDrawColor(0, 171, 69);
-          doc.setLineWidth(0.5);
-          const tickX = 170;
-          const tickY = yPos - 1;
-          doc.line(tickX - 2, tickY, tickX, tickY + 1.5);
-          doc.line(tickX, tickY + 1.5, tickX + 2, tickY - 2);
+        doc.text(outputStr, 80, yPos);
+        doc.text(targetStr, 125, yPos);
+        if (!dataCollected) {
+          doc.setTextColor(100, 100, 100);
+          doc.text("-", 170, yPos);
+        } else if (actualOutput >= targetOutputPerHour) {
+          doc.setTextColor(0, 171, 69);
+          doc.setFont("ZapfDingbats", "normal");
+          doc.text("4", 170, yPos);
+          doc.setFont("helvetica", "normal");
         } else {
-          doc.setDrawColor(227, 67, 41);
-          doc.setLineWidth(0.5);
-          const crossX = 170;
-          const crossY = yPos - 1;
-          doc.line(crossX - 2, crossY - 2, crossX + 2, crossY + 2);
-          doc.line(crossX - 2, crossY + 2, crossX + 2, crossY - 2);
+          doc.setTextColor(227, 67, 41);
+          doc.text("\xD7", 170, yPos);
         }
-        doc.setDrawColor(220, 220, 220);
-        doc.setLineWidth(0.2);
+        doc.setTextColor(0, 0, 0);
         yPos += rowSpacing;
       });
-      doc.roundedRect(20, 140, 170, yPos - 140 - 3, 1, 1, "S");
-      addFooter(1);
       doc.addPage();
       yPos = addHeaderPage2();
-      doc.setFontSize(16);
+      const workspaceSectionStartY = yPos;
+      const sortedWorkspaces = [...workspaceData].sort((a, b) => (a.efficiency || 0) - (b.efficiency || 0)).slice(0, 10);
+      const wsRowCount = sortedWorkspaces.length > 0 ? sortedWorkspaces.length : 1;
+      const wsTableHeight = 10 + 8 + 7 + wsRowCount * 8 + 8;
+      doc.setFillColor(245, 245, 245);
+      doc.roundedRect(15, workspaceSectionStartY, 180, wsTableHeight, 3, 3, "F");
+      doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
-      doc.setTextColor(70, 70, 70);
+      doc.setTextColor(40, 40, 40);
       doc.text("Poorest Performing Workspaces", 20, yPos);
       doc.setTextColor(0, 0, 0);
       yPos += 10;
       doc.setFontSize(11);
       doc.setFont("helvetica", "bold");
-      doc.setFillColor(245, 245, 245);
-      doc.roundedRect(20, yPos, 170, 8, 1, 1, "F");
       yPos += 5;
       doc.text("Workspace", 25, yPos);
-      doc.text("Current/Ideal", 85, yPos);
+      doc.text("Current/Target", 85, yPos);
       doc.text("Efficiency", 145, yPos);
       yPos += 3;
-      doc.setLineWidth(0.2);
-      doc.setDrawColor(220, 220, 220);
+      doc.setLineWidth(0.3);
+      doc.setDrawColor(200, 200, 200);
       doc.line(20, yPos, 190, yPos);
       doc.setFont("helvetica", "normal");
-      const tableStartY = yPos;
       yPos += 7;
-      const sortedWorkspaces = [...workspaceData].sort((a, b) => (a.efficiency || 0) - (b.efficiency || 0)).slice(0, 10);
       if (sortedWorkspaces.length === 0) {
         doc.text("No workspace data available", 25, yPos);
         yPos += 10;
       } else {
         sortedWorkspaces.forEach((ws, index) => {
-          if (index % 2 === 0) {
-            doc.setFillColor(252, 252, 252);
-            doc.roundedRect(20, yPos - 5, 170, 8, 1, 1, "F");
-          }
           const workspaceName = getWorkspaceDisplayName(ws.workspace_name, lineInfo.line_id);
-          const maxWidth = 55;
           const truncatedName = workspaceName.length > 25 ? workspaceName.substring(0, 22) + "..." : workspaceName;
           doc.text(truncatedName, 25, yPos);
           doc.text(`${ws.action_count || 0} / ${ws.action_threshold || 0}`, 85, yPos);
@@ -33900,9 +34099,6 @@ var LinePdfGenerator = ({
           yPos += 8;
         });
       }
-      const wsTableHeight = yPos - tableStartY - 3;
-      doc.roundedRect(20, tableStartY, 170, wsTableHeight, 1, 1, "S");
-      addFooter(2);
       doc.save(`${lineInfo.line_name}_${date.split(",")[0]}.pdf`);
     } catch (error) {
       console.error("PDF generation failed:", error);
@@ -35076,25 +35272,25 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
       doc.setFont("helvetica", "bold");
       doc.setTextColor(50, 50, 50);
       doc.text("OPTIFYE.AI", 20, 15);
-      doc.setFontSize(11);
+      doc.setFontSize(9);
       doc.setFont("helvetica", "normal");
-      doc.setTextColor(80, 80, 80);
-      const reportText = "REAL-TIME PERFORMANCE REPORT";
-      const reportTextWidth = doc.getStringUnitWidth(reportText) * 11 / doc.internal.scaleFactor;
-      doc.text(reportText, doc.internal.pageSize.width - 20 - reportTextWidth, 15);
+      doc.setTextColor(100, 100, 100);
+      const generatedText = `Generated on ${(/* @__PURE__ */ new Date()).toLocaleString("en-IN", { timeZone: "Asia/Kolkata" })}`;
+      const generatedTextWidth = doc.getStringUnitWidth(generatedText) * 9 / doc.internal.scaleFactor;
+      doc.text(generatedText, doc.internal.pageSize.width - 20 - generatedTextWidth, 15);
       doc.setDrawColor(200, 200, 200);
       doc.setLineWidth(0.5);
       doc.line(20, 20, 190, 20);
       doc.setFillColor(250, 250, 250);
-      doc.roundedRect(15, 25, 180, 55, 3, 3, "F");
+      doc.roundedRect(15, 25, 180, 53, 3, 3, "F");
       doc.setFontSize(32);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(0, 0, 0);
-      doc.text(lineName, 20, 40);
+      doc.text(lineName, 20, 39);
       doc.setFontSize(22);
       doc.setFont("helvetica", "normal");
       doc.setTextColor(40, 40, 40);
-      doc.text(getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id), 20, 52);
+      doc.text(getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id), 20, 51);
       doc.setFontSize(13);
       doc.setFont("helvetica", "normal");
       doc.setTextColor(60, 60, 60);
@@ -35105,8 +35301,8 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
         timeZone: "Asia/Kolkata"
       });
       const shiftType = "Day Shift";
-      doc.text(`${date}`, 20, 65);
-      doc.text(`${shiftType}`, 20, 73);
+      doc.text(`${date}`, 20, 63);
+      doc.text(`${shiftType}`, 20, 71);
       const currentTime = (/* @__PURE__ */ new Date()).toLocaleTimeString("en-IN", {
         hour: "2-digit",
         minute: "2-digit",
@@ -35119,11 +35315,11 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
       });
       doc.setFontSize(12);
       doc.setTextColor(80, 80, 80);
-      doc.text(`Report Period: ${shiftStartTime} - ${currentTime}`, 20, 81);
+      doc.text(`Report Period: ${shiftStartTime} - ${currentTime}`, 20, 79);
       doc.setTextColor(0, 0, 0);
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
-      doc.line(20, 90, 190, 90);
+      doc.line(20, 88, 190, 88);
       const createKPIBox = (y) => {
         doc.setFillColor(255, 255, 255);
         doc.roundedRect(22, y - 7, 165, 12, 2, 2, "F");
@@ -35131,66 +35327,72 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
         doc.setLineWidth(0.2);
         doc.roundedRect(22, y - 7, 165, 12, 2, 2, "S");
       };
+      const perfOverviewStartY = 93;
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, 95, 180, 60, 3, 3, "F");
+      doc.roundedRect(15, perfOverviewStartY, 180, 60, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text("Performance Overview", 20, 105);
+      doc.text("Performance Overview", 20, 103);
       doc.setTextColor(0, 0, 0);
-      const kpiStartY = 117;
+      const kpiStartY = 115;
       const kpiSpacing = 10;
       createKPIBox(kpiStartY);
       doc.setFontSize(11);
       doc.setFont("helvetica", "normal");
-      doc.text("Progress:", 25, kpiStartY);
+      doc.text("Current Output/Target Output:", 25, kpiStartY);
       doc.setFont("helvetica", "bold");
-      doc.text(`${(workspace.total_actions / workspace.target_output * 100).toFixed(0)}% of Today's target`, 120, kpiStartY);
+      doc.text(`${workspace.total_actions} / ${workspace.target_output}`, 120, kpiStartY);
       createKPIBox(kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "normal");
-      doc.text("Current Output/Ideal Output:", 25, kpiStartY + kpiSpacing);
+      doc.text("Efficiency:", 25, kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "bold");
-      doc.text(`${workspace.total_actions} / ${workspace.target_output}`, 120, kpiStartY + kpiSpacing);
+      doc.text(`${(workspace.avg_efficiency || 0).toFixed(1)}% (Target: 80%)`, 120, kpiStartY + kpiSpacing);
       createKPIBox(kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "normal");
-      doc.text("Efficiency:", 25, kpiStartY + kpiSpacing * 2);
-      doc.setFont("helvetica", "bold");
-      doc.text(`${(workspace.avg_efficiency || 0).toFixed(1)}% (Target: 80%)`, 120, kpiStartY + kpiSpacing * 2);
-      createKPIBox(kpiStartY + kpiSpacing * 3);
-      doc.setFont("helvetica", "normal");
-      doc.text("PPH (Pieces Per Hour):", 25, kpiStartY + kpiSpacing * 3);
+      doc.text("PPH (Pieces Per Hour):", 25, kpiStartY + kpiSpacing * 2);
       doc.setFont("helvetica", "bold");
-      doc.text(`${workspace.avg_pph.toFixed(1)} (Standard: ${workspace.pph_threshold.toFixed(1)})`, 120, kpiStartY + kpiSpacing * 3);
+      doc.text(`${workspace.avg_pph.toFixed(1)} (Standard: ${workspace.pph_threshold.toFixed(1)})`, 120, kpiStartY + kpiSpacing * 2);
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
-      doc.line(20, 170, 190, 170);
+      doc.line(20, 163, 190, 163);
+      const hourlyPerfStartY = 168;
+      const hourlyData = workspace.hourly_action_counts || [];
+      const hourlyTarget = workspace.pph_threshold;
+      const tableStartY = 199;
+      const rowHeight = 8;
+      const bottomPadding = 8;
+      const backgroundHeight = tableStartY - hourlyPerfStartY + hourlyData.length * rowHeight + bottomPadding;
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, 175, 180, 85, 3, 3, "F");
+      doc.roundedRect(15, hourlyPerfStartY, 180, backgroundHeight, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text("Hourly Performance", 20, 185);
+      doc.text("Hourly Performance", 20, 178);
       doc.setTextColor(0, 0, 0);
       doc.setFontSize(11);
       doc.setFont("helvetica", "bold");
-      doc.setFillColor(245, 245, 245);
-      doc.roundedRect(20, 177, 170, 8, 1, 1, "F");
-      doc.text("Time Range", 25, 182);
-      doc.text("Output", 95, 182);
-      doc.text("Target", 135, 182);
-      doc.text("Status", 170, 182);
-      doc.setLineWidth(0.2);
-      doc.setDrawColor(220, 220, 220);
-      doc.line(20, 185, 190, 185);
+      doc.text("Time Range", 25, 188);
+      doc.text("Output", 95, 188);
+      doc.text("Target", 135, 188);
+      doc.text("Status", 170, 188);
+      doc.setLineWidth(0.3);
+      doc.setDrawColor(200, 200, 200);
+      doc.line(20, 191, 190, 191);
       doc.setFont("helvetica", "normal");
-      let yPos = 191;
-      const hourlyData = workspace.hourly_action_counts || [];
-      const hourlyTarget = workspace.pph_threshold;
+      let yPos = tableStartY;
+      const workspaceDate = new Date(workspace.date);
+      const today = /* @__PURE__ */ new Date();
+      today.setHours(0, 0, 0, 0);
+      workspaceDate.setHours(0, 0, 0, 0);
+      const isToday = workspaceDate.getTime() === today.getTime();
+      let currentHour = 24;
+      if (isToday) {
+        const now2 = /* @__PURE__ */ new Date();
+        const currentTimeIST = new Date(now2.toLocaleString("en-US", { timeZone: "Asia/Kolkata" }));
+        currentHour = currentTimeIST.getHours();
+      }
       hourlyData.forEach((output, index) => {
-        if (index % 2 === 0) {
-          doc.setFillColor(252, 252, 252);
-          doc.roundedRect(20, yPos - 5, 170, 8, 1, 1, "F");
-        }
         const startTime = /* @__PURE__ */ new Date(`2000-01-01 ${workspace.shift_start}`);
         startTime.setHours(startTime.getHours() + index);
         const endTime = new Date(startTime);
@@ -35202,14 +35404,17 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
           hour: "numeric",
           hour12: true
         })}`;
-        const outputStr = output.toString();
+        const hourNumber = startTime.getHours();
+        const dataCollected = !isToday || hourNumber < currentHour;
+        const outputStr = dataCollected ? output.toString() : "TBD";
         const targetStr = hourlyTarget.toString();
-        const outputX = 95 + doc.getStringUnitWidth(outputStr) * doc.getFontSize() / (2 * doc.internal.scaleFactor);
-        const targetX = 135 + doc.getStringUnitWidth(targetStr) * doc.getFontSize() / (2 * doc.internal.scaleFactor);
         doc.text(timeRange, 25, yPos);
-        doc.text(outputStr, outputX, yPos);
-        doc.text(targetStr, targetX, yPos);
-        if (output >= hourlyTarget) {
+        doc.text(outputStr, 95, yPos);
+        doc.text(targetStr, 135, yPos);
+        if (!dataCollected) {
+          doc.setTextColor(100, 100, 100);
+          doc.text("-", 170, yPos);
+        } else if (output >= hourlyTarget) {
           doc.setTextColor(0, 171, 69);
           doc.setFont("ZapfDingbats", "normal");
           doc.text("4", 170, yPos);
@@ -35219,15 +35424,8 @@ var WorkspacePdfGenerator = ({ workspace, className }) => {
           doc.text("\xD7", 170, yPos);
         }
         doc.setTextColor(0, 0, 0);
-        yPos += 8;
+        yPos += rowHeight;
       });
-      doc.setLineWidth(0.2);
-      doc.setDrawColor(220, 220, 220);
-      doc.roundedRect(20, 187, 170, yPos - 187 - 3, 1, 1, "S");
-      doc.setFontSize(9);
-      doc.setTextColor(130, 130, 130);
-      const generatedText = `Generated on ${(/* @__PURE__ */ new Date()).toLocaleString("en-IN", { timeZone: "Asia/Kolkata" })}`;
-      doc.text(generatedText, 20, 280);
       doc.save(`${workspace.workspace_name}_${date.split(",")[0]}.pdf`);
     } catch (error) {
       console.error("PDF generation failed:", error);
@@ -36307,7 +36505,8 @@ var WorkspaceHealthCard = ({
   workspace,
   onClick,
   showDetails = true,
-  className = ""
+  className = "",
+  onViewDetails
 }) => {
   const getStatusConfig = () => {
     switch (workspace.status) {
@@ -36360,38 +36559,101 @@ var WorkspaceHealthCard = ({
       onClick(workspace);
     }
   };
+  const handleViewDetails = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (onViewDetails) {
+      onViewDetails(workspace);
+    }
+  };
   const handleKeyDown = (event) => {
     if (onClick && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       onClick(workspace);
     }
   };
+  const formatDuration3 = (minutes) => {
+    if (!minutes || minutes <= 0) return "0 min";
+    const rounded = Math.max(Math.round(minutes), 0);
+    const days = Math.floor(rounded / 1440);
+    const hours = Math.floor(rounded % 1440 / 60);
+    const mins = rounded % 60;
+    const parts = [];
+    if (days) parts.push(`${days} day${days === 1 ? "" : "s"}`);
+    if (hours) parts.push(`${hours} hr${hours === 1 ? "" : "s"}`);
+    if (mins) parts.push(`${mins} min${mins === 1 ? "" : "s"}`);
+    if (!parts.length) {
+      parts.push("1 min");
+    }
+    return parts.join(" ");
+  };
   const formatTimeAgo = (timeString) => {
-    return timeString.replace("about ", "").replace(" ago", "");
+    if (!timeString) return "Unknown";
+    const cleaned = timeString.replace("about ", "").trim();
+    if (cleaned.toLowerCase() === "never") return "Never";
+    const minuteMatch = cleaned.match(/(\d+)\s*m/);
+    if (!minuteMatch) {
+      return cleaned;
+    }
+    const minutes = parseInt(minuteMatch[1], 10);
+    if (!Number.isFinite(minutes)) return cleaned;
+    if (minutes < 1) return "Just now";
+    if (minutes < 60) {
+      return `${minutes} min ago`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+    if (hours < 24) {
+      const parts2 = [`${hours} hr${hours === 1 ? "" : "s"}`];
+      if (remainingMinutes) {
+        parts2.push(`${remainingMinutes} min`);
+      }
+      return `${parts2.join(" ")} ago`;
+    }
+    const days = Math.floor(hours / 24);
+    const remainingHours = hours % 24;
+    const parts = [`${days} day${days === 1 ? "" : "s"}`];
+    if (remainingHours) {
+      parts.push(`${remainingHours} hr${remainingHours === 1 ? "" : "s"}`);
+    }
+    return `${parts.join(" ")} ago`;
   };
-  const formatDowntime = (uptimeDetails) => {
-    if (!uptimeDetails) return "";
+  const getDowntimeConfig = (uptimeDetails) => {
+    if (!uptimeDetails) {
+      if (workspace.status === "healthy") {
+        return {
+          text: "0m",
+          className: "text-emerald-600 dark:text-emerald-400",
+          label: "Total Downtime"
+        };
+      }
+      return { text: "--", className: "text-slate-400", label: "Total Downtime" };
+    }
     const downtimeMinutes = Math.max(0, uptimeDetails.expectedMinutes - uptimeDetails.actualMinutes);
-    if (downtimeMinutes === 0) return "No downtime";
-    if (downtimeMinutes < 1) return "< 1 min downtime";
-    if (downtimeMinutes < 60) return `${downtimeMinutes} min downtime`;
-    const hours = Math.floor(downtimeMinutes / 60);
-    const minutes = downtimeMinutes % 60;
-    if (minutes === 0) {
-      return `${hours} hr downtime`;
+    if (downtimeMinutes === 0) {
+      return {
+        text: "0m",
+        className: "text-emerald-600 dark:text-emerald-400",
+        label: "Total Downtime"
+      };
     }
-    return `${hours} hr ${minutes} min downtime`;
+    return {
+      text: `${formatDuration3(downtimeMinutes)}`,
+      className: downtimeMinutes > 60 ? "text-rose-600 dark:text-rose-400" : "text-amber-600 dark:text-amber-400",
+      label: "Total Downtime"
+    };
   };
+  const downtimeConfig = getDowntimeConfig(workspace.uptimeDetails);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Card2,
     {
       className: clsx(
-        "relative overflow-hidden transition-all duration-300",
+        "relative overflow-hidden transition-all duration-300 h-full flex flex-col",
         "bg-gradient-to-br",
         config.gradient,
         "border",
         config.border,
-        "shadow-sm hover:shadow-md",
+        "shadow-sm hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-700",
         onClick && "cursor-pointer hover:scale-[1.01]",
         workspace.isStale && "opacity-90",
         className
@@ -36401,7 +36663,7 @@ var WorkspaceHealthCard = ({
       tabIndex: onClick ? 0 : void 0,
       role: onClick ? "button" : void 0,
       "aria-label": `Workspace ${workspace.workspace_display_name} status: ${workspace.status}`,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 flex-grow flex flex-col", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-start gap-2 sm:gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 break-words", children: workspace.workspace_display_name || `Workspace ${workspace.workspace_id.slice(0, 8)}` }),
@@ -36423,21 +36685,20 @@ var WorkspaceHealthCard = ({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
             ] })
           ] }),
-          workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { 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: [
-              "Uptime today: ",
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-                workspace.uptimePercentage.toFixed(1),
-                "%"
-              ] })
-            ] })
-          ] }),
-          workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
-            "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
-            workspace.uptimePercentage >= 97 ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : workspace.uptimePercentage >= 90 ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400" : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
-          ), children: formatDowntime(workspace.uptimeDetails) }) })
-        ] })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 pt-3 border-t border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-slate-500 uppercase tracking-wide", children: "Total Downtime" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx("text-sm font-semibold", downtimeConfig.className), children: downtimeConfig.text })
+          ] }) })
+        ] }),
+        onViewDetails && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4 mt-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleViewDetails,
+            className: "w-full inline-flex items-center justify-center rounded-lg border border-slate-200/60 bg-white/60 px-3 py-2 text-sm font-medium text-slate-700 shadow-sm backdrop-blur-sm transition-all hover:bg-white/90 hover:text-slate-900 dark:bg-white/10 dark:text-slate-200 dark:border-white/10 dark:hover:bg-white/20",
+            type: "button",
+            children: "View shift timeline"
+          }
+        ) })
       ] })
     }
   );
@@ -36445,8 +36706,11 @@ var WorkspaceHealthCard = ({
 var CompactWorkspaceHealthCard = ({
   workspace,
   onClick,
-  className = ""
+  className = "",
+  onViewDetails
 }) => {
+  const downtimeMinutes = workspace.uptimeDetails ? Math.max(0, workspace.uptimeDetails.expectedMinutes - workspace.uptimeDetails.actualMinutes) : null;
+  const downtimeLabel = downtimeMinutes === null ? "No downtime data" : downtimeMinutes === 0 ? "No downtime" : `${downtimeMinutes} min down`;
   const getStatusConfig = () => {
     switch (workspace.status) {
       case "healthy":
@@ -36486,6 +36750,13 @@ var CompactWorkspaceHealthCard = ({
       onClick(workspace);
     }
   };
+  const handleViewDetails = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (onViewDetails) {
+      onViewDetails(workspace);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -36513,14 +36784,20 @@ var CompactWorkspaceHealthCard = ({
               workspace.uptimePercentage.toFixed(1),
               "%"
             ] }),
-            workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-400", children: "\u2022" }),
-            workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
-              Math.max(0, workspace.uptimeDetails.expectedMinutes - workspace.uptimeDetails.actualMinutes),
-              "m down"
-            ] })
+            downtimeMinutes !== null && downtimeMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-400 dark:text-gray-400", children: "\u2022" }),
+            downtimeLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: downtimeLabel })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: workspace.timeSinceLastUpdate }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("h-2 w-2 rounded-full", config.dot) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("h-2 w-2 rounded-full", config.dot) }),
+          onViewDetails && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleViewDetails,
+              className: "rounded-full border border-gray-200 px-2 py-0.5 text-[11px] font-medium text-gray-600 hover:bg-gray-50",
+              type: "button",
+              children: "View"
+            }
+          )
         ] })
       ]
     }
@@ -36529,6 +36806,7 @@ var CompactWorkspaceHealthCard = ({
 var HealthStatusGrid = ({
   workspaces,
   onWorkspaceClick,
+  onWorkspaceViewDetails,
   showFilters = true,
   groupBy: initialGroupBy = "none",
   className = ""
@@ -36716,7 +36994,8 @@ var HealthStatusGrid = ({
           {
             workspace,
             onClick: onWorkspaceClick,
-            showDetails: true
+            showDetails: true,
+            onViewDetails: onWorkspaceViewDetails
           },
           workspace.workspace_id
         )) })
@@ -40252,7 +40531,7 @@ var AIAgentView = () => {
     }
     return formattedLines.join("");
   };
-  const formatTime4 = (timestamp) => {
+  const formatTime5 = (timestamp) => {
     const date = new Date(timestamp);
     return date.toLocaleTimeString([], {
       hour: "2-digit",
@@ -41516,7 +41795,7 @@ var AIAgentView = () => {
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mt-1.5 sm:mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime4(message.created_at) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime5(message.created_at) }),
                         message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full" }),
                           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Axel" })
@@ -44347,8 +44626,7 @@ var KPIsOverviewView = ({
             " Shift"
           ] })
         ] })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-600 text-center mt-2 sm:mt-3 px-2 sm:px-0", children: "Click on any line to view detailed performance metrics" })
+      ] }) })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-3 sm:p-4 md:p-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6", children: lines.map((line) => /* @__PURE__ */ jsxRuntime.jsx(
       LineCard,
@@ -48665,18 +48943,41 @@ var useWorkspaceHealth = (options) => {
   const isFetchingRef = React23.useRef(false);
   const refreshIntervalRef = React23.useRef(null);
   const healthTable = databaseConfig?.tables?.workspace_health || "workspace_health_status";
-  const calculateHealthStatus = (workspace) => {
-    if (!workspace.last_heartbeat) return "unknown";
-    const now2 = /* @__PURE__ */ new Date();
-    const lastHeartbeat = new Date(workspace.last_heartbeat);
-    const minutesSince = (now2.getTime() - lastHeartbeat.getTime()) / 6e4;
-    if (minutesSince < 5) return "healthy";
-    if (minutesSince < 15) return "warning";
-    return "unhealthy";
-  };
+  const computeSummary = React23.useCallback((data) => {
+    const total = data.length;
+    const healthy = data.filter((w) => w.status === "healthy").length;
+    const unhealthy = data.filter((w) => w.status === "unhealthy").length;
+    const warning6 = data.filter((w) => w.status === "warning").length;
+    let uptimePercentage = total > 0 ? healthy / total * 100 : 100;
+    let totalDowntimeMinutes;
+    const withUptime = data.filter(
+      (w) => w.uptimePercentage !== void 0 && w.uptimeDetails !== void 0
+    );
+    if (withUptime.length > 0) {
+      const totalUptime = withUptime.reduce((sum, w) => sum + (w.uptimePercentage || 0), 0);
+      uptimePercentage = totalUptime / withUptime.length;
+      totalDowntimeMinutes = withUptime.reduce((sum, w) => {
+        if (w.uptimeDetails) {
+          return sum + Math.max(0, w.uptimeDetails.expectedMinutes - w.uptimeDetails.actualMinutes);
+        }
+        return sum;
+      }, 0);
+    }
+    return {
+      totalWorkspaces: total,
+      healthyWorkspaces: healthy,
+      unhealthyWorkspaces: unhealthy,
+      warningWorkspaces: warning6,
+      uptimePercentage,
+      totalDowntimeMinutes,
+      lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }, []);
   const fetchWorkspacesHealth = React23.useCallback(async () => {
-    if (!supabase || isFetchingRef.current) return;
+    if (isFetchingRef.current) return;
     if (!options.companyId) {
+      setWorkspaces([]);
+      setSummary(computeSummary([]));
       setLoading(false);
       return;
     }
@@ -48684,39 +48985,12 @@ var useWorkspaceHealth = (options) => {
       isFetchingRef.current = true;
       setLoading(true);
       setError(null);
-      let query = supabase.from(healthTable).select("*").eq("company_id", options.companyId);
-      if (options.lineId) {
-        query = query.eq("line_id", options.lineId);
-      }
-      query = query.order("workspace_display_name", { ascending: true });
-      const { data, error: fetchError } = await query;
-      if (fetchError) throw fetchError;
-      const healthData = data || [];
-      const workspacesWithStatus = healthData.map((ws) => {
-        const status = calculateHealthStatus(ws);
-        const now2 = /* @__PURE__ */ new Date();
-        const lastUpdate = ws.last_heartbeat ? new Date(ws.last_heartbeat) : null;
-        const timeSinceLastUpdate = lastUpdate ? `${Math.floor((now2.getTime() - lastUpdate.getTime()) / 6e4)}m ago` : "Never";
-        return {
-          ...ws,
-          status,
-          timeSinceLastUpdate,
-          isStale: !lastUpdate || now2.getTime() - lastUpdate.getTime() > 15 * 6e4
-        };
+      const workspacesWithStatus = await workspaceHealthService.getWorkspaceHealthStatus({
+        lineId: options.lineId,
+        companyId: options.companyId
       });
       setWorkspaces(workspacesWithStatus);
-      const total = workspacesWithStatus.length;
-      const healthy = workspacesWithStatus.filter((w) => w.status === "healthy").length;
-      const unhealthy = workspacesWithStatus.filter((w) => w.status === "unhealthy").length;
-      const warning6 = workspacesWithStatus.filter((w) => w.status === "warning").length;
-      setSummary({
-        totalWorkspaces: total,
-        healthyWorkspaces: healthy,
-        unhealthyWorkspaces: unhealthy,
-        warningWorkspaces: warning6,
-        uptimePercentage: total > 0 ? healthy / total * 100 : 100,
-        lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
-      });
+      setSummary(computeSummary(workspacesWithStatus));
     } catch (err) {
       console.error("[useWorkspaceHealth] Error fetching workspace health:", err);
       setError({ message: err.message, code: err.code || "FETCH_ERROR" });
@@ -48725,7 +48999,7 @@ var useWorkspaceHealth = (options) => {
       setLoading(false);
       isFetchingRef.current = false;
     }
-  }, [supabase, options.companyId, options.lineId, healthTable]);
+  }, [options.companyId, options.lineId, computeSummary]);
   React23.useEffect(() => {
     fetchWorkspacesHealth();
   }, [fetchWorkspacesHealth]);
@@ -48770,6 +49044,395 @@ var useWorkspaceHealth = (options) => {
     refetch: fetchWorkspacesHealth
   };
 };
+var STATUS_COLORS = {
+  up: "bg-emerald-500",
+  down: "bg-rose-500",
+  pending: "bg-gray-200"
+};
+var STATUS_TITLES = {
+  up: "Uptime",
+  down: "Downtime",
+  pending: "Pending"
+};
+var formatTime4 = (date, timezone) => new Intl.DateTimeFormat("en-IN", {
+  hour: "numeric",
+  minute: "2-digit",
+  hour12: true,
+  timeZone: timezone
+}).format(date);
+var formatDuration = (minutes) => {
+  if (minutes < 1) return "<1 min";
+  if (minutes < 60) return `${minutes} min`;
+  const hours = Math.floor(minutes / 60);
+  const remainder = minutes % 60;
+  if (remainder === 0) return `${hours} hr${hours > 1 ? "s" : ""}`;
+  return `${hours} hr ${remainder} min`;
+};
+var formatDowntimeLabel = (minutes, includeSuffix = true) => {
+  if (!minutes || minutes <= 0) {
+    return includeSuffix ? "No downtime" : "0 min";
+  }
+  const rounded = Math.max(Math.round(minutes), 0);
+  const days = Math.floor(rounded / 1440);
+  const hours = Math.floor(rounded % 1440 / 60);
+  const mins = rounded % 60;
+  const parts = [];
+  if (days) parts.push(`${days} day${days === 1 ? "" : "s"}`);
+  if (hours) parts.push(`${hours} hr${hours === 1 ? "" : "s"}`);
+  if (mins) parts.push(`${mins} min${mins === 1 ? "" : "s"}`);
+  if (!parts.length) {
+    parts.push("1 min");
+  }
+  const label = parts.join(" ");
+  return includeSuffix ? `${label} down` : label;
+};
+var UptimeTimelineStrip = ({
+  points,
+  totalMinutes,
+  shiftStart,
+  shiftEnd,
+  timezone,
+  className = "",
+  uptimePercentage = 0,
+  downtimeMinutes = 0
+}) => {
+  const segments = React23.useMemo(() => {
+    if (!points.length || totalMinutes <= 0) return [];
+    const result = [];
+    let current = {
+      status: points[0].status,
+      length: 1,
+      startMinuteIndex: points[0].minuteIndex,
+      startTimestamp: points[0].timestamp,
+      endTimestamp: points[0].timestamp
+    };
+    for (let i = 1; i < points.length; i++) {
+      const point = points[i];
+      if (point.status === current.status) {
+        current.length += 1;
+        current.endTimestamp = point.timestamp;
+      } else {
+        result.push(current);
+        current = {
+          status: point.status,
+          length: 1,
+          startMinuteIndex: point.minuteIndex,
+          startTimestamp: point.timestamp,
+          endTimestamp: point.timestamp
+        };
+      }
+    }
+    result.push(current);
+    return result;
+  }, [points, totalMinutes]);
+  const markers = React23.useMemo(() => {
+    if (totalMinutes <= 0) return [];
+    const startDate = new Date(shiftStart);
+    const endDate = new Date(shiftEnd);
+    const roundedTotal = Math.max(totalMinutes, 1);
+    const markerInterval = totalMinutes > 360 ? 120 : 60;
+    const markerList = [];
+    for (let minute = 0; minute <= roundedTotal; minute += markerInterval) {
+      const markerMinute = Math.min(minute, roundedTotal);
+      const markerDate = dateFns.addMinutes(startDate, markerMinute);
+      markerList.push({
+        minute: markerMinute,
+        label: formatTime4(markerDate, timezone)
+      });
+    }
+    const endLabel = formatTime4(endDate, timezone);
+    if (!markerList.some((marker) => marker.minute === roundedTotal)) {
+      markerList.push({
+        minute: roundedTotal,
+        label: endLabel
+      });
+    } else {
+      markerList[markerList.length - 1] = {
+        minute: roundedTotal,
+        label: endLabel
+      };
+    }
+    return markerList;
+  }, [shiftStart, shiftEnd, timezone, totalMinutes]);
+  if (!points.length || totalMinutes <= 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full rounded-xl border border-dashed border-gray-200 bg-gray-50/50 p-6 text-center text-sm text-gray-600", children: "No uptime data available for this shift yet." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-3 text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-900 font-semibold", children: [
+      uptimePercentage.toFixed(1),
+      " % uptime ",
+      downtimeMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-600 font-normal", children: [
+        "(",
+        formatDowntimeLabel(downtimeMinutes),
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex h-4 overflow-hidden rounded-lg border border-gray-200 shadow-sm bg-white", children: segments.map((segment, index) => {
+      const startDate = new Date(segment.startTimestamp);
+      const endDate = new Date(segment.endTimestamp);
+      if (segment.length > 1) {
+        endDate.setMinutes(endDate.getMinutes() + 1);
+      }
+      const tooltip = `${STATUS_TITLES[segment.status]} \u2022 ${formatDuration(segment.length)} (${formatTime4(
+        startDate,
+        timezone
+      )} - ${formatTime4(endDate, timezone)})`;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `${STATUS_COLORS[segment.status]} transition-all hover:opacity-80 cursor-pointer`,
+          style: { flex: segment.length },
+          title: tooltip
+        },
+        `${segment.status}-${segment.startMinuteIndex}-${index}`
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none relative w-full mt-4 min-h-6", children: markers.map((marker) => {
+      const left = totalMinutes > 0 ? marker.minute / totalMinutes * 100 : 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "absolute flex -translate-x-1/2 flex-col items-center",
+          style: { left: `${left}%` },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1.5 h-2 w-px bg-gray-300" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-gray-600 whitespace-nowrap", children: marker.label })
+          ]
+        },
+        `${marker.label}-${marker.minute}`
+      );
+    }) })
+  ] });
+};
+var UptimeTimelineStrip_default = UptimeTimelineStrip;
+var SHORT_INTERRUPT_THRESHOLD_MINUTES = 3;
+var formatDuration2 = (minutes) => {
+  if (!minutes || minutes <= 0) return "0 min";
+  const rounded = Math.max(Math.round(minutes), 0);
+  const days = Math.floor(rounded / 1440);
+  const hours = Math.floor(rounded % 1440 / 60);
+  const mins = rounded % 60;
+  const parts = [];
+  if (days) parts.push(`${days} day${days === 1 ? "" : "s"}`);
+  if (hours) parts.push(`${hours} hr${hours === 1 ? "" : "s"}`);
+  if (mins) parts.push(`${mins} min${mins === 1 ? "" : "s"}`);
+  if (!parts.length) {
+    parts.push("1 min");
+  }
+  return parts.join(" ");
+};
+var formatDowntimeLabel2 = (minutes, includeSuffix = true) => {
+  if (!minutes || minutes <= 0) {
+    return includeSuffix ? "No downtime" : "0 min";
+  }
+  const label = formatDuration2(minutes);
+  return includeSuffix ? `${label} down` : label;
+};
+var formatTimeRange = (start, end, timezone) => {
+  const formatter = new Intl.DateTimeFormat("en-IN", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timezone
+  });
+  return `${formatter.format(start)} - ${formatter.format(end)}`;
+};
+var WorkspaceUptimeDetailModal = ({
+  workspace,
+  isOpen,
+  onClose
+}) => {
+  const timezone = useAppTimezone() || "UTC";
+  const logsContainerRef = React23.useRef(null);
+  const [showScrollIndicator, setShowScrollIndicator] = React23.useState(false);
+  const {
+    timeline,
+    loading,
+    error,
+    refetch
+  } = useWorkspaceUptimeTimeline({
+    workspaceId: workspace?.workspace_id,
+    companyId: workspace?.company_id,
+    enabled: isOpen && Boolean(workspace?.workspace_id && workspace?.company_id),
+    refreshInterval: 6e4
+  });
+  React23.useEffect(() => {
+    if (!isOpen || !workspace) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose, workspace]);
+  const shiftStart = timeline ? new Date(timeline.shiftStart) : null;
+  const shiftEnd = timeline ? new Date(timeline.shiftEnd) : null;
+  const downtimeSegments = timeline?.downtimeSegments || [];
+  downtimeSegments.length;
+  const downtimeMinutes = timeline?.downtimeMinutes ?? 0;
+  const uptimePercentage = timeline?.uptimePercentage ?? workspace?.uptimePercentage ?? 0;
+  const allInterruptionsSorted = React23.useMemo(
+    () => [...downtimeSegments].sort(
+      (a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime()
+    ),
+    [downtimeSegments]
+  );
+  React23.useEffect(() => {
+    const checkScroll = () => {
+      const container2 = logsContainerRef.current;
+      if (container2) {
+        const hasScroll = container2.scrollHeight > container2.clientHeight;
+        const isAtBottom = container2.scrollHeight - container2.scrollTop <= container2.clientHeight + 10;
+        setShowScrollIndicator(hasScroll && !isAtBottom);
+      }
+    };
+    checkScroll();
+    const container = logsContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", checkScroll);
+      return () => container.removeEventListener("scroll", checkScroll);
+    }
+  }, [downtimeSegments]);
+  const renderSegment = (segment) => {
+    const start = new Date(segment.startTime);
+    const end = new Date(segment.endTime);
+    const isMajor = segment.durationMinutes >= SHORT_INTERRUPT_THRESHOLD_MINUTES;
+    const containerClasses = isMajor ? "border-rose-200 bg-rose-50" : "border-gray-200 bg-white";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `rounded-lg border px-5 py-3 ${containerClasses}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-900", children: formatTimeRange(start, end, timezone) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-600 mt-1", children: [
+            "Duration: ",
+            formatDowntimeLabel2(segment.durationMinutes, false)
+          ] })
+        ]
+      },
+      `${segment.startMinuteIndex}-${segment.endMinuteIndex}`
+    );
+  };
+  if (!isOpen || !workspace) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm p-4",
+      onClick: onClose,
+      "aria-modal": "true",
+      role: "dialog",
+      "aria-labelledby": "uptime-detail-title",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "relative flex w-full max-w-4xl max-h-[90vh] flex-col rounded-2xl bg-white shadow-2xl border border-gray-100",
+          onClick: (event) => event.stopPropagation(),
+          role: "document",
+          "aria-labelledby": "uptime-detail-title",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-start justify-between border-b border-gray-100 px-8 py-6 sticky top-0 z-10 bg-white rounded-t-2xl", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 mr-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "uptime-detail-title", className: "text-2xl font-semibold text-gray-900 truncate mb-3", children: workspace.workspace_display_name || `Workspace ${workspace.workspace_id.slice(0, 6)}` }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 text-sm text-gray-600", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: timeline?.shiftLabel || "Current Shift" }),
+                  shiftStart && shiftEnd && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300", children: "\u2022" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: formatTimeRange(shiftStart, shiftEnd, timezone) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-2 h-2 rounded-full ${workspace.status === "healthy" ? "bg-emerald-500 animate-pulse" : workspace.status === "warning" ? "bg-amber-500" : "bg-rose-500"}` }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xs font-medium ${workspace.status === "healthy" ? "text-emerald-700" : workspace.status === "warning" ? "text-amber-700" : "text-rose-700"}`, children: workspace.status === "healthy" ? "Operational" : workspace.status === "warning" ? "Intermittent" : "Down" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300", children: "\u2022" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500", children: [
+                    "Last heartbeat ",
+                    workspace.timeSinceLastUpdate
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: refetch,
+                    disabled: loading,
+                    className: "inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200 shadow-sm",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: `h-4 w-4 ${loading ? "animate-spin" : ""}` }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Refresh" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors duration-200",
+                    "aria-label": "Close uptime details",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-8 py-6 space-y-6", children: error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-rose-100 bg-rose-50 p-5 text-sm text-rose-700", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold mb-1", children: "Unable to load uptime details" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-rose-600/90", children: error.message })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative pb-4 border-b border-gray-200", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  UptimeTimelineStrip_default,
+                  {
+                    points: timeline?.points || [],
+                    totalMinutes: timeline?.totalMinutes || 0,
+                    shiftStart: timeline?.shiftStart || (/* @__PURE__ */ new Date()).toISOString(),
+                    shiftEnd: timeline?.shiftEnd || (/* @__PURE__ */ new Date()).toISOString(),
+                    timezone,
+                    uptimePercentage,
+                    downtimeMinutes
+                  }
+                ),
+                loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 mt-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4 animate-spin text-gray-500" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Updating timeline\u2026" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3", children: "Downtime Logs" }),
+                downtimeSegments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-gray-100 bg-gray-50/50 px-5 py-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: "No downtime events recorded for this shift." }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      ref: logsContainerRef,
+                      className: "max-h-[400px] overflow-y-auto space-y-2 pr-2",
+                      style: {
+                        scrollbarWidth: "thin",
+                        scrollbarColor: "#CBD5E0 #F7FAFC"
+                      },
+                      children: allInterruptionsSorted.map((segment) => renderSegment(segment))
+                    }
+                  ),
+                  showScrollIndicator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white via-white/80 to-transparent pointer-events-none flex items-end justify-center pb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-gray-500 animate-bounce", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Scroll for more" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4" })
+                  ] }) })
+                ] })
+              ] })
+            ] }) }) })
+          ]
+        }
+      )
+    }
+  );
+};
+var WorkspaceUptimeDetailModal_default = WorkspaceUptimeDetailModal;
 var WorkspaceHealthView = ({
   lineId,
   companyId,
@@ -48779,6 +49442,7 @@ var WorkspaceHealthView = ({
   const router$1 = router.useRouter();
   const [groupBy, setGroupBy] = React23.useState("line");
   const timezone = useAppTimezone();
+  const [selectedWorkspace, setSelectedWorkspace] = React23.useState(null);
   const operationalDate = getOperationalDate(timezone || "UTC");
   const currentHour = (/* @__PURE__ */ new Date()).getHours();
   const isNightShift = currentHour >= 18 || currentHour < 6;
@@ -48819,6 +49483,12 @@ var WorkspaceHealthView = ({
     },
     [router$1, onNavigate]
   );
+  const handleViewDetails = React23.useCallback((workspace) => {
+    setSelectedWorkspace(workspace);
+  }, []);
+  const handleCloseDetails = React23.useCallback(() => {
+    setSelectedWorkspace(null);
+  }, []);
   const handleExport = React23.useCallback(() => {
     const csv = [
       ["Workspace", "Line", "Company", "Status", "Last Heartbeat", "Consecutive Misses"],
@@ -48876,178 +49546,189 @@ var WorkspaceHealthView = ({
       )
     ] }) }) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              BackButtonMinimal,
+              {
+                onClick: () => router$1.push("/"),
+                text: "Back",
+                size: "sm",
+                "aria-label": "Navigate back to dashboard"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => {
+                    refetch();
+                  },
+                  className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                  "aria-label": "Refresh",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handleExport,
+                  className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                  "aria-label": "Export CSV",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
             BackButtonMinimal,
             {
               onClick: () => router$1.push("/"),
               text: "Back",
-              size: "sm",
+              size: "default",
               "aria-label": "Navigate back to dashboard"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: () => {
                   refetch();
                 },
-                className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
                 "aria-label": "Refresh",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-5 w-5" })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 onClick: handleExport,
-                className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
                 "aria-label": "Export CSV",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-5 w-5" })
               }
             )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 sm:mt-2 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
+              shiftType,
+              " Shift"
+            ] })
           ] })
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
-          BackButtonMinimal,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto p-4 space-y-6", children: [
+        summary && /* @__PURE__ */ jsxRuntime.jsxs(
+          motion.div,
           {
-            onClick: () => router$1.push("/"),
-            text: "Back",
-            size: "default",
-            "aria-label": "Navigate back to dashboard"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => {
-                refetch();
-              },
-              className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-              "aria-label": "Refresh",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-5 w-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: handleExport,
-              className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-              "aria-label": "Export CSV",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-5 w-5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
-            shiftType,
-            " Shift"
-          ] })
-        ] })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto p-4 space-y-6", children: [
-      summary && /* @__PURE__ */ jsxRuntime.jsxs(
-        motion.div,
-        {
-          initial: { opacity: 0, y: 20 },
-          animate: { opacity: 1, y: 0 },
-          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 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: "System Availability" }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx("text-3xl font-bold", getUptimeColor(summary.uptimePercentage)), children: [
-                    summary.uptimePercentage.toFixed(1),
-                    "%"
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            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 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: "System Availability" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx("text-3xl font-bold", getUptimeColor(summary.uptimePercentage)), children: [
+                      summary.uptimePercentage.toFixed(1),
+                      "%"
+                    ] }),
+                    summary.uptimePercentage >= 97 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-5 w-5 text-green-500" }) : summary.uptimePercentage >= 90 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-5 w-5 text-yellow-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-5 w-5 text-red-500" })
                   ] }),
-                  summary.uptimePercentage >= 97 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-5 w-5 text-green-500" }) : summary.uptimePercentage >= 90 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-5 w-5 text-yellow-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-5 w-5 text-red-500" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Overall system uptime today" })
-              ] })
-            ] }),
-            /* @__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-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, { 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-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, { 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-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" })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Overall system uptime today" })
+                ] })
+              ] }),
+              /* @__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-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, { 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-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, { 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-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" })
+                ] })
               ] })
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        motion.div,
-        {
-          initial: { opacity: 0, y: 20 },
-          animate: { opacity: 1, y: 0 },
-          transition: { duration: 0.3, delay: 0.2 },
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            HealthStatusGrid,
-            {
-              workspaces,
-              onWorkspaceClick: handleWorkspaceClick,
-              showFilters: true,
-              groupBy
-            }
-          )
-        }
-      )
-    ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.3, delay: 0.2 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              HealthStatusGrid,
+              {
+                workspaces,
+                onWorkspaceClick: handleWorkspaceClick,
+                onWorkspaceViewDetails: handleViewDetails,
+                showFilters: true,
+                groupBy
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      WorkspaceUptimeDetailModal_default,
+      {
+        workspace: selectedWorkspace,
+        isOpen: Boolean(selectedWorkspace),
+        onClose: handleCloseDetails
+      }
+    )
   ] });
 };
 var WorkspaceHealthView_default = withAuth(WorkspaceHealthView, {
@@ -53007,6 +53688,7 @@ exports.useWorkspaceHealthStatus = useWorkspaceHealthStatus;
 exports.useWorkspaceMetrics = useWorkspaceMetrics;
 exports.useWorkspaceNavigation = useWorkspaceNavigation;
 exports.useWorkspaceOperators = useWorkspaceOperators;
+exports.useWorkspaceUptimeTimeline = useWorkspaceUptimeTimeline;
 exports.userService = userService;
 exports.videoPrefetchManager = videoPrefetchManager;
 exports.videoPreloader = videoPreloader;