@optifye/dashboard-core 6.9.11 → 6.9.13

package/dist/index.mjs

@@ -2,8 +2,8 @@ import * as React23 from 'react';
 import React23__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, forwardRef, useImperativeHandle, useLayoutEffect, memo, useContext, useId, Children, isValidElement, useInsertionEffect, Fragment as Fragment$1, createElement, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
-import { toZonedTime, formatInTimeZone } from 'date-fns-tz';
-import { subDays, format, parseISO, isValid, formatDistanceToNow, isFuture, isToday } from 'date-fns';
+import { toZonedTime, formatInTimeZone, fromZonedTime } from 'date-fns-tz';
+import { subDays, format, parseISO, isValid, addMinutes, differenceInMinutes, formatDistanceToNow, isFuture, isToday } from 'date-fns';
 import mixpanel from 'mixpanel-browser';
 import { EventEmitter } from 'events';
 import { createClient, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js';
@@ -2134,6 +2134,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 = fromZonedTime(`${date}T${shiftStartStr}:00`, timezone);
+    const totalMinutes = getShiftDurationMinutes(shiftStartStr, shiftEndStr);
+    const shiftEndDate = addMinutes(shiftStartDate, totalMinutes);
+    const now2 = /* @__PURE__ */ new Date();
+    let completedMinutes = 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 = formatInTimeZone(minuteDate, timezone, "H");
+    const minuteKey = Number.parseInt(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");
@@ -2150,15 +2232,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) => {
@@ -2174,16 +2254,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 [];
@@ -2221,6 +2314,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 = addMinutes(shiftStartDate, minuteIndex);
+      const timestamp = 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 = addMinutes(shiftStartDate, startIndex);
+      const segmentEndDate = addMinutes(shiftStartDate, endIndex);
+      downtimeSegments.push({
+        startMinuteIndex: startIndex,
+        endMinuteIndex: endIndex,
+        startTime: formatInTimeZone(segmentStartDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+        endTime: 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: formatInTimeZone(shiftStartDate, timezone, "yyyy-MM-dd'T'HH:mm:ssXXX"),
+      shiftEnd: 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);
@@ -2358,145 +2572,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 = 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()
         });
@@ -2896,8 +3028,8 @@ var AuthService = class {
             "Authorization": `Bearer ${accessToken}`,
             "Content-Type": "application/json"
           },
-          timeout: 3e5,
-          // 5 minutes
+          timeout: 1e4,
+          // 10 seconds
           retries: 1,
           silentErrors: false
           // We want to know about auth errors
@@ -2934,8 +3066,8 @@ var AuthService = class {
             "Authorization": `Bearer ${accessToken}`,
             "Content-Type": "application/json"
           },
-          timeout: 3e5,
-          // 5 minutes
+          timeout: 1e4,
+          // 10 seconds
           retries: 2,
           // More retries for validation
           silentErrors: true,
@@ -2967,8 +3099,8 @@ var AuthService = class {
           "Authorization": `Bearer ${accessToken}`,
           "Content-Type": "application/json"
         },
-        timeout: 3e5,
-        // 5 minutes
+        timeout: 1e4,
+        // 10 seconds
         retries: 1,
         silentErrors: false
       }
@@ -10868,6 +11000,65 @@ var useWorkspaceHealthStatus = (workspaceId) => {
     refetch: fetchHealthStatus
   };
 };
+var useWorkspaceUptimeTimeline = (options) => {
+  const {
+    workspaceId,
+    companyId,
+    enabled = true,
+    refreshInterval
+  } = options;
+  const [timeline, setTimeline] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const isFetchingRef = useRef(false);
+  const intervalRef = useRef(null);
+  const fetchTimeline = 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]);
+  useEffect(() => {
+    fetchTimeline();
+  }, [fetchTimeline]);
+  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 = useCallback(
@@ -10883,7 +11074,7 @@ function useDateFormatter() {
     },
     [defaultTimezone, defaultLocale, dateFormatOptions]
   );
-  const formatTime3 = useCallback(
+  const formatTime5 = useCallback(
     (date, formatString) => {
       const dateObj = typeof date === "string" ? parseISO(date) : date;
       if (!isValid(dateObj)) return "Invalid Time";
@@ -10914,7 +11105,7 @@ function useDateFormatter() {
   }, []);
   return {
     formatDate,
-    formatTime: formatTime3,
+    formatTime: formatTime5,
     formatDateTime,
     getNow,
     timezone: defaultTimezone || "UTC",
@@ -23900,7 +24091,7 @@ var HourlyOutputChartComponent = ({
       endHour = Math.floor(endDecimalHour) % 24;
       endMinute = Math.round(endDecimalHour % 1 * 60);
     }
-    const formatTime3 = (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) {
@@ -23908,9 +24099,9 @@ var HourlyOutputChartComponent = ({
       }
       return `${hour12}:${m.toString().padStart(2, "0")}${period}`;
     };
-    return `${formatTime3(startHour, startMinute)}-${formatTime3(endHour, endMinute)}`;
+    return `${formatTime5(startHour, startMinute)}-${formatTime5(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const formatTimeRange = React23__default.useCallback((hourIndex) => {
+  const formatTimeRange2 = React23__default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -23924,12 +24115,12 @@ var HourlyOutputChartComponent = ({
       endHour = Math.floor(endDecimalHour) % 24;
       endMinute = Math.round(endDecimalHour % 1 * 60);
     }
-    const formatTime3 = (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 `${formatTime3(startHour, startMinute)} - ${formatTime3(endHour, endMinute)}`;
+    return `${formatTime5(startHour, startMinute)} - ${formatTime5(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
   const chartData = React23__default.useMemo(() => {
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
@@ -23990,7 +24181,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
@@ -23999,7 +24190,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__default.useMemo(() => {
     if (!idleBarState.visible) return null;
     return /* @__PURE__ */ jsx(
@@ -25100,7 +25291,7 @@ var SOPComplianceChart = ({
       }
     };
   }, [data, animateToNewData, mockData]);
-  const formatTime3 = (minuteIndex) => {
+  const formatTime5 = (minuteIndex) => {
     const totalMinutes = shiftStartHour * 60 + minuteIndex;
     const hours = Math.floor(totalMinutes / 60) % 24;
     const minutes = totalMinutes % 60;
@@ -25112,7 +25303,7 @@ var SOPComplianceChart = ({
     const hasDataForMinute = index < animatedData.length - 10;
     return {
       minute: index,
-      time: formatTime3(index),
+      time: formatTime5(index),
       compliance: hasDataForMinute ? animatedData[index] : null
     };
   });
@@ -25546,7 +25737,7 @@ var DateTimeDisplay = ({
   const {
     defaultTimezone
   } = useDateTimeConfig();
-  const { formatDate, formatTime: formatTime3 } = useDateFormatter();
+  const { formatDate, formatTime: formatTime5 } = useDateFormatter();
   const [now2, setNow] = useState(() => getCurrentTimeInZone(defaultTimezone || "UTC"));
   useEffect(() => {
     const timerId = setInterval(() => {
@@ -25558,7 +25749,7 @@ var DateTimeDisplay = ({
     return null;
   }
   const formattedDate = showDate ? formatDate(now2) : "";
-  const formattedTime = showTime ? formatTime3(now2) : "";
+  const formattedTime = showTime ? formatTime5(now2) : "";
   return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex items-center space-x-2 text-sm text-gray-700 dark:text-gray-300", className), children: [
     showDate && /* @__PURE__ */ jsx("span", { className: "date-display", "aria-label": `Current date: ${formattedDate}`, children: formattedDate }),
     showDate && showTime && formattedDate && formattedTime && /* @__PURE__ */ jsx("span", { className: "separator", "aria-hidden": "true", children: "|" }),
@@ -25722,7 +25913,7 @@ var BreakNotificationPopup = ({
   const handlePrevious = () => {
     setCurrentIndex((prev) => (prev - 1 + visibleBreaks.length) % visibleBreaks.length);
   };
-  const formatTime3 = (minutes) => {
+  const formatTime5 = (minutes) => {
     const hours = Math.floor(minutes / 60);
     const mins = minutes % 60;
     if (hours > 0) {
@@ -25796,9 +25987,9 @@ var BreakNotificationPopup = ({
                 formatTo12Hour(currentBreak.endTime)
               ] }),
               /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 mb-2", children: [
-                formatTime3(currentBreak.elapsedMinutes),
+                formatTime5(currentBreak.elapsedMinutes),
                 " elapsed of ",
-                formatTime3(currentBreak.duration),
+                formatTime5(currentBreak.duration),
                 " total"
               ] }),
               /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-1.5", children: /* @__PURE__ */ jsx(
@@ -26102,64 +26293,208 @@ var getSeverityColor = (severity) => {
       return "bg-gray-500";
   }
 };
-var PlayPauseIndicator = ({
-  show,
+var formatTime2 = (seconds) => {
+  if (!seconds || isNaN(seconds)) return "0:00";
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor(seconds % 3600 / 60);
+  const s = Math.floor(seconds % 60);
+  if (h > 0) {
+    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+  }
+  return `${m}:${s.toString().padStart(2, "0")}`;
+};
+var VideoControls = ({
   isPlaying,
-  duration = 600
+  currentTime,
+  duration,
+  buffered,
+  showControls,
+  controlsPinned = false,
+  onTogglePinControls,
+  playbackRate = 1,
+  onPlayPause,
+  onSeek,
+  onSeekStart,
+  onSeekEnd,
+  onToggleFullscreen,
+  onPlaybackRateChange,
+  className = ""
 }) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const [isFading, setIsFading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragTime, setDragTime] = useState(0);
+  const [isHoveringProgressBar, setIsHoveringProgressBar] = useState(false);
+  const [showSpeedMenu, setShowSpeedMenu] = useState(false);
+  const speedMenuRef = useRef(null);
+  const progressColor = "#4b5563";
+  const controlsVisible = showControls || controlsPinned;
+  const getPercentage = (current, total) => {
+    if (!total || total === 0) return 0;
+    return Math.min(Math.max(current / total * 100, 0), 100);
+  };
+  const handleSeekChange = (e) => {
+    const newTime = parseFloat(e.target.value);
+    setDragTime(newTime);
+    onSeek(newTime);
+  };
+  const handleSeekStart = () => {
+    setIsDragging(true);
+    setDragTime(currentTime);
+    onSeekStart?.();
+  };
+  const handleSeekEnd = () => {
+    setIsDragging(false);
+    onSeekEnd?.();
+  };
   useEffect(() => {
-    if (show) {
-      setIsVisible(true);
-      setIsFading(false);
-      const fadeTimer = setTimeout(() => {
-        setIsFading(true);
-      }, 100);
-      const hideTimer = setTimeout(() => {
-        setIsVisible(false);
-        setIsFading(false);
-      }, duration);
-      return () => {
-        clearTimeout(fadeTimer);
-        clearTimeout(hideTimer);
-      };
-    }
-  }, [show, duration]);
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsx(
+    const handleClickOutside = (event) => {
+      if (speedMenuRef.current && !speedMenuRef.current.contains(event.target)) {
+        setShowSpeedMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const displayTime = isDragging ? dragTime : currentTime;
+  const progressPercent = getPercentage(displayTime, duration);
+  const bufferedPercent = getPercentage(buffered, duration);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "absolute inset-0 flex items-center justify-center pointer-events-none z-10",
-      style: {
-        opacity: isFading ? 0 : 1,
-        transition: `opacity ${duration - 100}ms ease-out`
-      },
-      children: /* @__PURE__ */ jsx("div", { className: "bg-black/70 rounded-full p-6", children: isPlaying ? (
-        // Play icon (triangle)
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "white",
-            className: "w-16 h-16",
-            children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
-          }
-        )
-      ) : (
-        // Pause icon (two bars)
-        /* @__PURE__ */ jsx(
-          "svg",
+      className: `absolute bottom-0 left-0 right-0 px-3 pb-3 pt-12 bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity duration-300 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"} ${className}`,
+      style: { touchAction: "none" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "white",
-            className: "w-16 h-16",
-            children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
+            className: "relative h-1 mb-4 group cursor-pointer",
+            onMouseEnter: () => setIsHoveringProgressBar(true),
+            onMouseLeave: () => setIsHoveringProgressBar(false),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute -top-2 -bottom-2 left-0 right-0 z-20" }),
+              /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 bottom-0 bg-white/20 rounded-full overflow-hidden z-0", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute top-0 left-0 bottom-0 bg-white/40 transition-all duration-200",
+                  style: { width: `${bufferedPercent}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute top-0 left-0 bottom-0 bg-[#007bff] transition-all duration-75 z-10",
+                  style: { width: `${progressPercent}%`, backgroundColor: progressColor },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-3 h-3 rounded-full shadow transform transition-transform duration-200 ${isHoveringProgressBar || isDragging ? "scale-100" : "scale-0"}`,
+                      style: { backgroundColor: progressColor }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: duration || 100,
+                  step: "0.1",
+                  value: displayTime,
+                  onChange: handleSeekChange,
+                  onMouseDown: handleSeekStart,
+                  onMouseUp: handleSeekEnd,
+                  onTouchStart: handleSeekStart,
+                  onTouchEnd: handleSeekEnd,
+                  className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer z-30 margin-0 padding-0"
+                }
+              )
+            ]
           }
-        )
-      ) })
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-white", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onPlayPause();
+                },
+                className: "hover:text-[#007bff] transition-colors focus:outline-none",
+                "aria-label": isPlaying ? "Pause" : "Play",
+                children: isPlaying ? /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) }) : /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs font-medium font-sans", children: [
+              /* @__PURE__ */ jsx("span", { children: formatTime2(displayTime) }),
+              /* @__PURE__ */ jsx("span", { className: "mx-1 text-white/70", children: "/" }),
+              /* @__PURE__ */ jsx("span", { className: "text-white/70", children: formatTime2(duration) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            onTogglePinControls && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onTogglePinControls();
+                },
+                className: `transition-colors focus:outline-none ${controlsPinned ? "text-[#007bff]" : "hover:text-[#007bff]"}`,
+                "aria-label": controlsPinned ? "Unpin controls" : "Pin controls",
+                title: controlsPinned ? "Unpin controls" : "Pin controls",
+                children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: controlsPinned ? /* @__PURE__ */ jsx("path", { d: "M9 3h6l-1 7h3v2h-4.5l-.5 4.5-2 1L10 12H6v-2h3z" }) : /* @__PURE__ */ jsx("path", { d: "M9 3h6l-1 7h3v2h-4v5l-2 1-1-6H6v-2h3z" }) })
+              }
+            ),
+            onPlaybackRateChange && /* @__PURE__ */ jsxs("div", { className: "relative", ref: speedMenuRef, children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowSpeedMenu(!showSpeedMenu);
+                  },
+                  className: "text-xs font-medium hover:text-[#007bff] transition-colors focus:outline-none min-w-[32px]",
+                  "aria-label": "Playback Speed",
+                  children: [
+                    playbackRate,
+                    "x"
+                  ]
+                }
+              ),
+              showSpeedMenu && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full right-0 mb-2 bg-black/90 text-white rounded shadow-lg overflow-hidden z-50 min-w-[80px]", children: [0.5, 1, 1.5, 2, 2.5, 3, 4, 5].map((rate) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onPlaybackRateChange(rate);
+                    setShowSpeedMenu(false);
+                  },
+                  className: `block w-full text-left px-4 py-2 text-xs hover:bg-white/20 transition-colors ${playbackRate === rate ? "text-[#007bff] font-bold" : ""}`,
+                  children: [
+                    rate,
+                    "x"
+                  ]
+                },
+                rate
+              )) })
+            ] }),
+            onToggleFullscreen && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggleFullscreen();
+                },
+                className: "hover:text-[#007bff] transition-colors focus:outline-none",
+                "aria-label": "Toggle Fullscreen",
+                children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }) })
+              }
+            )
+          ] })
+        ] })
+      ]
     }
   );
 };
@@ -26287,9 +26622,15 @@ var HlsVideoPlayer = forwardRef(({
   const blobUrlRef = useRef(null);
   const [isReady, setIsReady] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
-  const [showIndicator, setShowIndicator] = useState(false);
-  const [indicatorIsPlaying, setIndicatorIsPlaying] = useState(false);
-  const indicatorKeyRef = useRef(0);
+  const [showControls, setShowControls] = useState(true);
+  const [controlsPinned, setControlsPinned] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [buffered, setBuffered] = useState(0);
+  const [playbackRate, setPlaybackRate] = useState(1);
+  const userSeekingRef = useRef(false);
+  const controlsTimeoutRef = useRef(null);
   const eventCallbacksRef = useRef({
     onReady,
     onPlay,
@@ -26468,8 +26809,6 @@ var HlsVideoPlayer = forwardRef(({
             }
           });
           hls.on(Events.FRAG_LOADING, () => {
-            setIsLoading(true);
-            eventCallbacksRef.current.onLoadingChange?.(true);
           });
           hls.on(Events.FRAG_LOADED, () => {
             setIsLoading(false);
@@ -26523,25 +26862,52 @@ var HlsVideoPlayer = forwardRef(({
     const handleCanPlay = () => {
       if (!hlsRef.current) {
         setIsReady(true);
-        onReady?.(player);
       }
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      onReady?.(player);
+    };
+    const handlePlay = () => {
+      setIsPlaying(true);
+      eventCallbacksRef.current.onPlay?.(player);
+    };
+    const handlePause = () => {
+      if (userSeekingRef.current && videoRef.current) {
+        videoRef.current.play().catch((err) => console.warn("Auto-resume after seek pause failed:", err));
+        return;
+      }
+      setIsPlaying(false);
+      eventCallbacksRef.current.onPause?.(player);
     };
-    const handlePlay = () => eventCallbacksRef.current.onPlay?.(player);
-    const handlePause = () => eventCallbacksRef.current.onPause?.(player);
     const handlePlaying = () => {
       setIsLoading(false);
+      setIsPlaying(true);
       eventCallbacksRef.current.onLoadingChange?.(false);
       eventCallbacksRef.current.onPlaying?.(player);
     };
     const handleTimeUpdate = () => {
       const currentTime2 = video.currentTime || 0;
+      setCurrentTime(currentTime2);
+      if (video.buffered.length > 0) {
+        for (let i = 0; i < video.buffered.length; i++) {
+          if (video.buffered.start(i) <= currentTime2 && video.buffered.end(i) >= currentTime2) {
+            setBuffered(video.buffered.end(i));
+            break;
+          }
+        }
+      }
       eventCallbacksRef.current.onTimeUpdate?.(player, currentTime2);
     };
     const handleDurationChange = () => {
       const duration2 = video.duration || 0;
+      setDuration(duration2);
       eventCallbacksRef.current.onDurationChange?.(player, duration2);
     };
-    const handleEnded = () => eventCallbacksRef.current.onEnded?.(player);
+    const handleEnded = () => {
+      setIsPlaying(false);
+      userSeekingRef.current = false;
+      eventCallbacksRef.current.onEnded?.(player);
+    };
     const handleLoadStart = () => {
       setIsLoading(true);
       eventCallbacksRef.current.onLoadingChange?.(true);
@@ -26557,8 +26923,19 @@ var HlsVideoPlayer = forwardRef(({
       setIsLoading(true);
       eventCallbacksRef.current.onLoadingChange?.(true);
     };
-    const handleSeeking = () => eventCallbacksRef.current.onSeeking?.(player);
-    const handleSeeked = () => eventCallbacksRef.current.onSeeked?.(player);
+    const handleSeeking = () => {
+      userSeekingRef.current = true;
+      eventCallbacksRef.current.onSeeking?.(player);
+    };
+    const handleSeeked = () => {
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      if (videoRef.current) {
+        videoRef.current.play().catch((err) => console.warn("Resume playback after seek failed:", err));
+      }
+      userSeekingRef.current = false;
+      eventCallbacksRef.current.onSeeked?.(player);
+    };
     const handleError = () => {
       const error = video.error;
       if (error) {
@@ -26571,6 +26948,10 @@ var HlsVideoPlayer = forwardRef(({
         eventCallbacksRef.current.onError?.(player, errorInfo);
       }
     };
+    const handlePlaybackRateChange2 = (e) => {
+      const target = e.target;
+      setPlaybackRate(target.playbackRate);
+    };
     video.addEventListener("canplay", handleCanPlay);
     video.addEventListener("play", handlePlay);
     video.addEventListener("pause", handlePause);
@@ -26585,6 +26966,7 @@ var HlsVideoPlayer = forwardRef(({
     video.addEventListener("seeking", handleSeeking);
     video.addEventListener("seeked", handleSeeked);
     video.addEventListener("error", handleError);
+    video.addEventListener("ratechange", handlePlaybackRateChange2);
     return () => {
       video.removeEventListener("canplay", handleCanPlay);
       video.removeEventListener("play", handlePlay);
@@ -26600,6 +26982,7 @@ var HlsVideoPlayer = forwardRef(({
       video.removeEventListener("seeking", handleSeeking);
       video.removeEventListener("seeked", handleSeeked);
       video.removeEventListener("error", handleError);
+      video.removeEventListener("ratechange", handlePlaybackRateChange2);
     };
   }, [
     src,
@@ -26628,20 +27011,46 @@ var HlsVideoPlayer = forwardRef(({
       }
     }
   }, [autoplay]);
+  const resetControlsTimeout = useCallback(() => {
+    if (controlsPinned) {
+      setShowControls(true);
+      return;
+    }
+    setShowControls(true);
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+    }
+    if (isPlaying) {
+      controlsTimeoutRef.current = setTimeout(() => {
+        setShowControls(false);
+      }, 3e3);
+    }
+  }, [isPlaying, controlsPinned]);
+  const handleMouseMove = useCallback(() => {
+    resetControlsTimeout();
+  }, [resetControlsTimeout]);
+  useEffect(() => {
+    resetControlsTimeout();
+    return () => {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    };
+  }, [isPlaying, resetControlsTimeout]);
   const play = useCallback(() => {
     return videoRef.current?.play();
   }, []);
   const pause = useCallback(() => {
     videoRef.current?.pause();
   }, []);
-  const currentTime = useCallback((time2) => {
+  const currentTimeProp = useCallback((time2) => {
     if (time2 !== void 0 && videoRef.current) {
       videoRef.current.currentTime = time2;
       return time2;
     }
     return videoRef.current?.currentTime || 0;
   }, []);
-  const duration = useCallback(() => {
+  const durationProp = useCallback(() => {
     return videoRef.current?.duration || 0;
   }, []);
   const paused = useCallback(() => {
@@ -26654,95 +27063,144 @@ var HlsVideoPlayer = forwardRef(({
     }
     return videoRef.current?.muted ?? false;
   }, []);
-  const volume = useCallback((level) => {
+  const volumeProp = useCallback((level) => {
     if (level !== void 0 && videoRef.current) {
       videoRef.current.volume = level;
       return level;
     }
     return videoRef.current?.volume ?? 1;
   }, []);
-  const playbackRate = useCallback((rate) => {
+  const playbackRateProp = useCallback((rate) => {
     if (rate !== void 0 && videoRef.current) {
       videoRef.current.playbackRate = rate;
       return rate;
     }
     return videoRef.current?.playbackRate ?? 1;
   }, []);
+  const handleTogglePlay = useCallback(() => {
+    if (videoRef.current) {
+      if (videoRef.current.paused) {
+        videoRef.current.play();
+      } else {
+        videoRef.current.pause();
+      }
+    }
+  }, []);
+  const handleSeek = useCallback((time2) => {
+    if (videoRef.current) {
+      videoRef.current.currentTime = time2;
+      videoRef.current.play().catch((err) => console.warn("Resume playback failed during seek:", err));
+    }
+  }, []);
+  const handleSeekStart = useCallback(() => {
+    userSeekingRef.current = true;
+  }, []);
+  const handleSeekEnd = useCallback(() => {
+    if (videoRef.current) {
+      videoRef.current.play().catch((err) => console.warn("Resume playback failed after seek:", err));
+    }
+  }, []);
+  const handlePlaybackRateChange = useCallback((rate) => {
+    if (videoRef.current) {
+      videoRef.current.playbackRate = rate;
+    }
+  }, []);
+  const handleToggleFullscreen = useCallback(() => {
+    if (videoContainerRef.current) {
+      if (!document.fullscreenElement) {
+        videoContainerRef.current.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }
+  }, []);
   useImperativeHandle(ref, () => ({
     hls: hlsRef.current,
     video: videoRef.current,
     play,
     pause,
-    currentTime,
-    duration,
+    currentTime: currentTimeProp,
+    duration: durationProp,
     paused,
     mute,
-    volume,
-    playbackRate,
+    volume: volumeProp,
+    playbackRate: playbackRateProp,
     dispose,
     isReady,
     // For backward compatibility with Video.js API
     player: playerLikeObject()
-  }), [play, pause, currentTime, duration, paused, mute, volume, playbackRate, dispose, isReady, playerLikeObject]);
-  const handleClickWithIndicator = useCallback(() => {
-    if (!onClick || !videoRef.current) return;
-    const willBePlaying = videoRef.current.paused;
-    setIndicatorIsPlaying(willBePlaying);
-    setShowIndicator(false);
-    setTimeout(() => {
-      indicatorKeyRef.current += 1;
-      setShowIndicator(true);
-    }, 0);
-    onClick();
-  }, [onClick]);
-  return /* @__PURE__ */ jsxs("div", { className: `hls-video-player-wrapper ${className}`, style: { position: "relative", width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "hls-video-player-container",
-        ref: videoContainerRef,
-        children: /* @__PURE__ */ jsx(
-          "video",
+  }), [play, pause, currentTimeProp, durationProp, paused, mute, volumeProp, playbackRateProp, dispose, isReady, playerLikeObject]);
+  const handleContainerClick = useCallback(() => {
+    if (!onClick && !controls) {
+      handleTogglePlay();
+    }
+    if (onClick) {
+      onClick();
+    }
+  }, [onClick, controls, handleTogglePlay]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `hls-video-player-wrapper ${className} group`,
+      style: { position: "relative", width: "100%", height: "100%" },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => isPlaying && !controlsPinned && setShowControls(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            ref: videoRef,
-            className: "hls-video-element",
-            poster,
-            controls,
-            loop,
-            muted,
-            playsInline,
-            autoPlay: autoplay,
-            preload: "metadata"
+            className: "hls-video-player-container",
+            ref: videoContainerRef,
+            onClick: handleContainerClick,
+            children: [
+              /* @__PURE__ */ jsx(
+                "video",
+                {
+                  ref: videoRef,
+                  className: "hls-video-element",
+                  poster,
+                  controls: false,
+                  loop,
+                  muted,
+                  playsInline,
+                  autoPlay: autoplay,
+                  preload: "metadata"
+                }
+              ),
+              controls && /* @__PURE__ */ jsx(
+                VideoControls,
+                {
+                  isPlaying,
+                  currentTime,
+                  duration,
+                  buffered,
+                  showControls: controlsPinned || showControls || !isPlaying,
+                  controlsPinned,
+                  playbackRate,
+                  onPlayPause: handleTogglePlay,
+                  onSeek: handleSeek,
+                  onSeekStart: handleSeekStart,
+                  onSeekEnd: handleSeekEnd,
+                  onPlaybackRateChange: handlePlaybackRateChange,
+                  onTogglePinControls: () => setControlsPinned((prev) => {
+                    const next = !prev;
+                    if (next) {
+                      setShowControls(true);
+                    } else {
+                      resetControlsTimeout();
+                    }
+                    return next;
+                  }),
+                  onToggleFullscreen: handleToggleFullscreen
+                }
+              )
+            ]
           }
-        )
-      }
-    ),
-    isLoading && !externalLoadingControl && /* @__PURE__ */ jsx("div", { className: "hls-video-player-loading", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-    onClick && !controls && /* @__PURE__ */ jsx(
-      "div",
-      {
-        onClick: handleClickWithIndicator,
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: 1,
-          cursor: "pointer"
-        },
-        "aria-label": "Click to play/pause"
-      }
-    ),
-    onClick && !controls && /* @__PURE__ */ jsx(
-      PlayPauseIndicator,
-      {
-        show: showIndicator,
-        isPlaying: indicatorIsPlaying
-      },
-      indicatorKeyRef.current
-    )
-  ] });
+        ),
+        isLoading && !externalLoadingControl && /* @__PURE__ */ jsx("div", { className: "hls-video-player-loading", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) })
+      ]
+    }
+  );
 });
 HlsVideoPlayer.displayName = "HlsVideoPlayer";
 var VideoPlayer = HlsVideoPlayer;
@@ -26750,6 +27208,7 @@ var CroppedHlsVideoPlayer = forwardRef(({
   crop,
   debug = false,
   onClick,
+  controls = true,
   ...videoProps
 }, ref) => {
   const {
@@ -26771,9 +27230,15 @@ var CroppedHlsVideoPlayer = forwardRef(({
   const [isVideoReady, setIsVideoReady] = useState(false);
   const [canvasDimensions, setCanvasDimensions] = useState({ width: 0, height: 0 });
   const [isProcessing, setIsProcessing] = useState(false);
-  const [showIndicator, setShowIndicator] = useState(false);
-  const [indicatorIsPlaying, setIndicatorIsPlaying] = useState(false);
-  const indicatorKeyRef = useRef(0);
+  const [showControls, setShowControls] = useState(true);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [buffered, setBuffered] = useState(0);
+  const [playbackRate, setPlaybackRate] = useState(1);
+  const controlsTimeoutRef = useRef(null);
+  const userSeekingRef = useRef(false);
+  const [controlsPinned, setControlsPinned] = useState(false);
   const stopCanvasRendering = useCallback(() => {
     if (animationFrameRef.current) {
       cancelAnimationFrame(animationFrameRef.current);
@@ -26858,7 +27323,7 @@ var CroppedHlsVideoPlayer = forwardRef(({
     const canvas = canvasRef.current;
     const video = videoElementRef.current;
     const ctx = canvas.getContext("2d");
-    if (!ctx || video.paused || video.ended) {
+    if (!ctx || video.readyState < 2) {
       return;
     }
     const videoWidth = video.videoWidth;
@@ -26885,7 +27350,9 @@ var CroppedHlsVideoPlayer = forwardRef(({
       canvas.height
       // Destination (full canvas)
     );
-    animationFrameRef.current = requestAnimationFrame(renderFrameToCanvas);
+    if (!video.paused && !video.ended) {
+      animationFrameRef.current = requestAnimationFrame(renderFrameToCanvas);
+    }
   }, [crop]);
   const handleVideoReady = useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video player ready");
@@ -26893,11 +27360,15 @@ var CroppedHlsVideoPlayer = forwardRef(({
     if (videoEl) {
       videoElementRef.current = videoEl;
       setIsVideoReady(true);
+      if (videoEl.readyState >= 2) {
+        renderFrameToCanvas();
+      }
     }
     onReadyProp?.(player);
-  }, [onReadyProp]);
+  }, [onReadyProp, renderFrameToCanvas]);
   const handleVideoPlay = useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video playing, starting canvas rendering");
+    setIsPlaying(true);
     if (crop && canvasRef.current) {
       setIsProcessing(true);
       renderFrameToCanvas();
@@ -26905,43 +27376,40 @@ var CroppedHlsVideoPlayer = forwardRef(({
     onPlayProp?.(player);
   }, [crop, renderFrameToCanvas, onPlayProp]);
   const handleVideoPause = useCallback((player) => {
-    console.log("[CroppedHlsVideoPlayer] Video paused, stopping canvas rendering and CLEARING canvas");
+    console.log("[CroppedHlsVideoPlayer] Video paused, stopping canvas rendering (keeping last frame)");
+    if (userSeekingRef.current && hiddenVideoRef.current) {
+      hiddenVideoRef.current.play()?.catch(() => {
+      });
+      return;
+    }
     stopCanvasRendering();
     setIsProcessing(false);
-    if (canvasRef.current) {
-      const ctx = canvasRef.current.getContext("2d");
-      if (ctx) {
-        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-      }
-    }
+    setIsPlaying(false);
+    renderFrameToCanvas();
     onPauseProp?.(player);
-  }, [stopCanvasRendering, onPauseProp]);
+  }, [stopCanvasRendering, onPauseProp, renderFrameToCanvas]);
   const handleVideoEnded = useCallback((player) => {
-    console.log("[CroppedHlsVideoPlayer] Video ended, CLEARING canvas");
+    console.log("[CroppedHlsVideoPlayer] Video ended, stopping canvas rendering (keeping last frame)");
     stopCanvasRendering();
     setIsProcessing(false);
-    if (canvasRef.current) {
-      const ctx = canvasRef.current.getContext("2d");
-      if (ctx) {
-        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-      }
-    }
+    setIsPlaying(false);
+    userSeekingRef.current = false;
     onEndedProp?.(player);
   }, [stopCanvasRendering, onEndedProp]);
   const handleSeeking = useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video seeking");
-    if (crop && !videoElementRef.current?.paused) {
+    userSeekingRef.current = true;
+    if (crop) {
       renderFrameToCanvas();
     }
     onSeekingProp?.(player);
   }, [crop, renderFrameToCanvas, onSeekingProp]);
   const handleSeeked = useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video seeked");
-    if (crop && !videoElementRef.current?.paused) {
+    hiddenVideoRef.current?.play()?.catch(() => {
+    });
+    userSeekingRef.current = false;
+    if (crop) {
       renderFrameToCanvas();
     }
     onSeekedProp?.(player);
@@ -26949,8 +27417,29 @@ var CroppedHlsVideoPlayer = forwardRef(({
   const handleLoadedMetadata = useCallback((player) => {
     console.log("[CroppedHlsVideoPlayer] Video metadata loaded");
     calculateCanvasDimensions();
+    if (hiddenVideoRef.current?.video) {
+      setDuration(hiddenVideoRef.current.video.duration || 0);
+    }
+    requestAnimationFrame(() => renderFrameToCanvas());
     onLoadedMetadataProp?.(player);
-  }, [calculateCanvasDimensions, onLoadedMetadataProp]);
+  }, [calculateCanvasDimensions, onLoadedMetadataProp, renderFrameToCanvas]);
+  const handleTimeUpdate = useCallback((player, time2) => {
+    setCurrentTime(time2);
+    if (hiddenVideoRef.current?.video && hiddenVideoRef.current.video.buffered.length > 0) {
+      const video = hiddenVideoRef.current.video;
+      for (let i = 0; i < video.buffered.length; i++) {
+        if (video.buffered.start(i) <= time2 && video.buffered.end(i) >= time2) {
+          setBuffered(video.buffered.end(i));
+          break;
+        }
+      }
+    }
+    videoProps.onTimeUpdate?.(player, time2);
+  }, [videoProps.onTimeUpdate]);
+  const handleDurationChange = useCallback((player, dur) => {
+    setDuration(dur);
+    videoProps.onDurationChange?.(player, dur);
+  }, [videoProps.onDurationChange]);
   useEffect(() => {
     calculateCanvasDimensions();
     const handleResize = () => {
@@ -26978,33 +27467,97 @@ var CroppedHlsVideoPlayer = forwardRef(({
       stopCanvasRendering();
     };
   }, [stopCanvasRendering]);
+  const resetControlsTimeout = useCallback(() => {
+    if (controlsPinned) {
+      setShowControls(true);
+      return;
+    }
+    setShowControls(true);
+    if (controlsTimeoutRef.current) {
+      clearTimeout(controlsTimeoutRef.current);
+    }
+    if (isPlaying) {
+      controlsTimeoutRef.current = setTimeout(() => {
+        setShowControls(false);
+      }, 3e3);
+    }
+  }, [isPlaying, controlsPinned]);
+  const handleMouseMove = useCallback(() => {
+    resetControlsTimeout();
+  }, [resetControlsTimeout]);
+  useEffect(() => {
+    resetControlsTimeout();
+    return () => {
+      if (controlsTimeoutRef.current) {
+        clearTimeout(controlsTimeoutRef.current);
+      }
+    };
+  }, [isPlaying, resetControlsTimeout]);
+  const handleTogglePlay = useCallback(() => {
+    if (hiddenVideoRef.current?.video) {
+      if (hiddenVideoRef.current.video.paused) {
+        hiddenVideoRef.current.play();
+      } else {
+        hiddenVideoRef.current.pause();
+      }
+    }
+  }, []);
+  const handleSeek = useCallback((time2) => {
+    if (hiddenVideoRef.current) {
+      hiddenVideoRef.current.currentTime(time2);
+      hiddenVideoRef.current.play()?.catch(() => {
+      });
+      setTimeout(() => renderFrameToCanvas(), 50);
+    }
+  }, [renderFrameToCanvas]);
+  const handleSeekStart = useCallback(() => {
+    userSeekingRef.current = true;
+  }, []);
+  const handleSeekEnd = useCallback(() => {
+    if (hiddenVideoRef.current) {
+      hiddenVideoRef.current.play()?.catch(() => {
+      });
+    }
+  }, []);
+  const handlePlaybackRateChange = useCallback((rate) => {
+    if (hiddenVideoRef.current) {
+      hiddenVideoRef.current.playbackRate(rate);
+      setPlaybackRate(rate);
+    }
+  }, []);
+  const handleToggleFullscreen = useCallback(() => {
+    if (videoContainerRef.current) {
+      if (!document.fullscreenElement) {
+        videoContainerRef.current.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }
+  }, []);
   if (!crop) {
-    return /* @__PURE__ */ jsx(HlsVideoPlayer, { ref, ...videoProps, onClick });
-  }
-  const handleClickWithIndicator = () => {
-    if (!onClick || !hiddenVideoRef.current?.video) return;
-    const video = hiddenVideoRef.current.video;
-    const willBePlaying = video.paused;
-    setIndicatorIsPlaying(willBePlaying);
-    setShowIndicator(false);
-    setTimeout(() => {
-      indicatorKeyRef.current += 1;
-      setShowIndicator(true);
-    }, 0);
-    onClick();
+    return /* @__PURE__ */ jsx(HlsVideoPlayer, { ref, ...videoProps, onClick, controls });
+  }
+  const handleClick = () => {
+    if (!onClick && !controls) {
+      handleTogglePlay();
+    }
+    if (onClick) onClick();
   };
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: videoContainerRef,
-      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${inheritedClassName}`,
-      onClick: handleClickWithIndicator,
+      className: `relative w-full h-full flex items-center justify-center bg-black group ${inheritedClassName} ${onClick || controls ? "cursor-pointer" : ""}`,
+      onClick: handleClick,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => isPlaying && !controlsPinned && setShowControls(false),
       children: [
         /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(
           HlsVideoPlayer,
           {
             ref: hiddenVideoRef,
             ...videoProps,
+            controls: false,
             onReady: handleVideoReady,
             onPlay: handleVideoPlay,
             onPause: handleVideoPause,
@@ -27014,7 +27567,9 @@ var CroppedHlsVideoPlayer = forwardRef(({
             onLoadedMetadata: handleLoadedMetadata,
             onLoadedData: videoProps.onLoadedData,
             onPlaying: videoProps.onPlaying,
-            onLoadingChange: videoProps.onLoadingChange
+            onLoadingChange: videoProps.onLoadingChange,
+            onTimeUpdate: handleTimeUpdate,
+            onDurationChange: handleDurationChange
           }
         ) }),
         /* @__PURE__ */ jsx(
@@ -27031,8 +27586,8 @@ var CroppedHlsVideoPlayer = forwardRef(({
             }
           }
         ),
-        !isVideoReady && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-        debug && isVideoReady && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 bg-black/80 text-white text-xs p-2 rounded font-mono", children: [
+        !isVideoReady && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+        debug && isVideoReady && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 bg-black/80 text-white text-xs p-2 rounded font-mono pointer-events-none z-20", children: [
           /* @__PURE__ */ jsxs("div", { children: [
             "Crop: ",
             crop.x,
@@ -27056,13 +27611,32 @@ var CroppedHlsVideoPlayer = forwardRef(({
             isProcessing ? "Yes" : "No"
           ] })
         ] }),
-        onClick && /* @__PURE__ */ jsx(
-          PlayPauseIndicator,
+        controls && isVideoReady && /* @__PURE__ */ jsx(
+          VideoControls,
           {
-            show: showIndicator,
-            isPlaying: indicatorIsPlaying
-          },
-          indicatorKeyRef.current
+            isPlaying,
+            currentTime,
+            duration,
+            buffered,
+            showControls: controlsPinned || showControls || !isPlaying,
+            controlsPinned,
+            playbackRate,
+            onPlayPause: handleTogglePlay,
+            onSeek: handleSeek,
+            onSeekStart: handleSeekStart,
+            onSeekEnd: handleSeekEnd,
+            onPlaybackRateChange: handlePlaybackRateChange,
+            onTogglePinControls: () => setControlsPinned((prev) => {
+              const next = !prev;
+              if (next) {
+                setShowControls(true);
+              } else {
+                resetControlsTimeout();
+              }
+              return next;
+            }),
+            onToggleFullscreen: handleToggleFullscreen
+          }
         )
       ]
     }
@@ -27601,6 +28175,67 @@ var SilentErrorBoundary = class extends React23__default.Component {
     ] }) });
   }
 };
+var PlayPauseIndicator = ({
+  show,
+  isPlaying,
+  duration = 600
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isFading, setIsFading] = useState(false);
+  useEffect(() => {
+    if (show) {
+      setIsVisible(true);
+      setIsFading(false);
+      const fadeTimer = setTimeout(() => {
+        setIsFading(true);
+      }, 100);
+      const hideTimer = setTimeout(() => {
+        setIsVisible(false);
+        setIsFading(false);
+      }, duration);
+      return () => {
+        clearTimeout(fadeTimer);
+        clearTimeout(hideTimer);
+      };
+    }
+  }, [show, duration]);
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute inset-0 flex items-center justify-center pointer-events-none z-10",
+      style: {
+        opacity: isFading ? 0 : 1,
+        transition: `opacity ${duration - 100}ms ease-out`
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "bg-black/70 rounded-full p-6", children: isPlaying ? (
+        // Play icon (triangle)
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "white",
+            className: "w-16 h-16",
+            children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+          }
+        )
+      ) : (
+        // Pause icon (two bars)
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "white",
+            className: "w-16 h-16",
+            children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
+          }
+        )
+      ) })
+    }
+  );
+};
 var BackButton = ({
   onClick,
   text = "Back",
@@ -31020,7 +31655,7 @@ function DiagnosisVideoModal({
     }
     loadClip();
   }, [clipId, supabase, transformPlaylistUrls]);
-  const formatTime3 = (seconds) => {
+  const formatTime5 = (seconds) => {
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);
     return `${mins}:${secs.toString().padStart(2, "0")}`;
@@ -31212,9 +31847,9 @@ function DiagnosisVideoModal({
                 }
               ),
               /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium", children: [
-                formatTime3(currentTime),
+                formatTime5(currentTime),
                 " / ",
-                formatTime3(duration)
+                formatTime5(duration)
               ] }),
               /* @__PURE__ */ jsx(
                 "input",
@@ -33034,45 +33669,35 @@ var LinePdfGenerator = ({
       const doc = new jsPDF$1();
       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);
@@ -33118,37 +33743,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(":");
@@ -33185,7 +33820,7 @@ var LinePdfGenerator = ({
           }
           hourEndTime.setSeconds(0);
           hourEndTime.setMilliseconds(0);
-          const formatTime3 = (date2) => {
+          const formatTime5 = (date2) => {
             return date2.toLocaleTimeString("en-IN", {
               hour: "2-digit",
               minute: "2-digit",
@@ -33193,7 +33828,7 @@ var LinePdfGenerator = ({
               timeZone: "Asia/Kolkata"
             });
           };
-          return `${formatTime3(hourStartTime)} - ${formatTime3(hourEndTime)}`;
+          return `${formatTime5(hourStartTime)} - ${formatTime5(hourEndTime)}`;
         });
       };
       const hourlyTimeRanges = lineInfo.metrics.shift_start ? getHourlyTimeRanges(lineInfo.metrics.shift_start, lineInfo.metrics.shift_end) : [];
@@ -33340,86 +33975,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);
@@ -33427,9 +34070,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);
@@ -34603,25 +35243,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);
@@ -34632,8 +35272,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",
@@ -34646,11 +35286,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");
@@ -34658,66 +35298,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);
@@ -34729,14 +35375,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);
@@ -34746,15 +35395,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);
@@ -35834,7 +36476,8 @@ var WorkspaceHealthCard = ({
   workspace,
   onClick,
   showDetails = true,
-  className = ""
+  className = "",
+  onViewDetails
 }) => {
   const getStatusConfig = () => {
     switch (workspace.status) {
@@ -35887,38 +36530,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__ */ 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
@@ -35928,7 +36634,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__ */ jsxs("div", { className: "p-4", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "p-4 flex-grow flex flex-col", children: [
         /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start gap-2 sm:gap-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ 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)}` }),
@@ -35950,21 +36656,20 @@ var WorkspaceHealthCard = ({
               /* @__PURE__ */ jsx("span", { className: "font-medium", children: formatTimeAgo(workspace.timeSinceLastUpdate) })
             ] })
           ] }),
-          workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx(Activity, { className: "h-3.5 w-3.5 text-gray-400" }),
-            /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
-              "Uptime today: ",
-              /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
-                workspace.uptimePercentage.toFixed(1),
-                "%"
-              ] })
-            ] })
-          ] }),
-          workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "mt-3 pt-3 border-t border-slate-100 dark:border-slate-800", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-slate-500 uppercase tracking-wide", children: "Total Downtime" }),
+            /* @__PURE__ */ jsx("span", { className: clsx("text-sm font-semibold", downtimeConfig.className), children: downtimeConfig.text })
+          ] }) })
+        ] }),
+        onViewDetails && /* @__PURE__ */ jsx("div", { className: "pt-4 mt-auto", children: /* @__PURE__ */ 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"
+          }
+        ) })
       ] })
     }
   );
@@ -35972,8 +36677,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":
@@ -36013,6 +36721,13 @@ var CompactWorkspaceHealthCard = ({
       onClick(workspace);
     }
   };
+  const handleViewDetails = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    if (onViewDetails) {
+      onViewDetails(workspace);
+    }
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -36040,14 +36755,20 @@ var CompactWorkspaceHealthCard = ({
               workspace.uptimePercentage.toFixed(1),
               "%"
             ] }),
-            workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-400", children: "\u2022" }),
-            workspace.uptimeDetails && workspace.uptimeDetails.expectedMinutes > workspace.uptimeDetails.actualMinutes && /* @__PURE__ */ 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__ */ jsx("p", { className: "text-xs text-gray-400 dark:text-gray-400", children: "\u2022" }),
+            downtimeLabel && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: downtimeLabel })
           ] }),
           /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: workspace.timeSinceLastUpdate }),
-          /* @__PURE__ */ jsx("div", { className: clsx("h-2 w-2 rounded-full", config.dot) })
+          /* @__PURE__ */ jsx("div", { className: clsx("h-2 w-2 rounded-full", config.dot) }),
+          onViewDetails && /* @__PURE__ */ 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"
+            }
+          )
         ] })
       ]
     }
@@ -36056,6 +36777,7 @@ var CompactWorkspaceHealthCard = ({
 var HealthStatusGrid = ({
   workspaces,
   onWorkspaceClick,
+  onWorkspaceViewDetails,
   showFilters = true,
   groupBy: initialGroupBy = "none",
   className = ""
@@ -36243,7 +36965,8 @@ var HealthStatusGrid = ({
           {
             workspace,
             onClick: onWorkspaceClick,
-            showDetails: true
+            showDetails: true,
+            onViewDetails: onWorkspaceViewDetails
           },
           workspace.workspace_id
         )) })
@@ -39779,7 +40502,7 @@ var AIAgentView = () => {
     }
     return formattedLines.join("");
   };
-  const formatTime3 = (timestamp) => {
+  const formatTime5 = (timestamp) => {
     const date = new Date(timestamp);
     return date.toLocaleTimeString([], {
       hour: "2-digit",
@@ -41043,7 +41766,7 @@ var AIAgentView = () => {
                         }
                       ),
                       /* @__PURE__ */ 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__ */ jsx("span", { children: formatTime3(message.created_at) }),
+                        /* @__PURE__ */ jsx("span", { children: formatTime5(message.created_at) }),
                         message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                           /* @__PURE__ */ jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full" }),
                           /* @__PURE__ */ jsx("span", { children: "Axel" })
@@ -43874,8 +44597,7 @@ var KPIsOverviewView = ({
             " Shift"
           ] })
         ] })
-      ] }) }),
-      /* @__PURE__ */ 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__ */ jsx("main", { className: "flex-1 p-3 sm:p-4 md:p-6 overflow-y-auto", children: /* @__PURE__ */ 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__ */ jsx(
       LineCard,
@@ -48192,18 +48914,41 @@ var useWorkspaceHealth = (options) => {
   const isFetchingRef = useRef(false);
   const refreshIntervalRef = 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 = 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 = useCallback(async () => {
-    if (!supabase || isFetchingRef.current) return;
+    if (isFetchingRef.current) return;
     if (!options.companyId) {
+      setWorkspaces([]);
+      setSummary(computeSummary([]));
       setLoading(false);
       return;
     }
@@ -48211,39 +48956,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" });
@@ -48252,7 +48970,7 @@ var useWorkspaceHealth = (options) => {
       setLoading(false);
       isFetchingRef.current = false;
     }
-  }, [supabase, options.companyId, options.lineId, healthTable]);
+  }, [options.companyId, options.lineId, computeSummary]);
   useEffect(() => {
     fetchWorkspacesHealth();
   }, [fetchWorkspacesHealth]);
@@ -48297,6 +49015,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 = 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 = 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 = 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__ */ 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__ */ jsxs("div", { className: `relative w-full ${className}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-3 text-sm", children: /* @__PURE__ */ jsxs("span", { className: "text-gray-900 font-semibold", children: [
+      uptimePercentage.toFixed(1),
+      " % uptime ",
+      downtimeMinutes > 0 && /* @__PURE__ */ jsxs("span", { className: "text-gray-600 font-normal", children: [
+        "(",
+        formatDowntimeLabel(downtimeMinutes),
+        ")"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(
+        "div",
+        {
+          className: "absolute flex -translate-x-1/2 flex-col items-center",
+          style: { left: `${left}%` },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "mb-1.5 h-2 w-px bg-gray-300" }),
+            /* @__PURE__ */ 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 = useRef(null);
+  const [showScrollIndicator, setShowScrollIndicator] = 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
+  });
+  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 = useMemo(
+    () => [...downtimeSegments].sort(
+      (a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime()
+    ),
+    [downtimeSegments]
+  );
+  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__ */ jsxs(
+      "div",
+      {
+        className: `rounded-lg border px-5 py-3 ${containerClasses}`,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-gray-900", children: formatTimeRange(start, end, timezone) }),
+          /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0 mr-4", children: [
+                /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2.5 text-sm text-gray-600", children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: timeline?.shiftLabel || "Current Shift" }),
+                  shiftStart && shiftEnd && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-gray-300", children: "\u2022" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: formatTimeRange(shiftStart, shiftEnd, timezone) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "text-gray-300", children: "\u2022" }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500", children: [
+                    "Last heartbeat ",
+                    workspace.timeSinceLastUpdate
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+                /* @__PURE__ */ 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__ */ jsx(RefreshCw, { className: `h-4 w-4 ${loading ? "animate-spin" : ""}` }),
+                      /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Refresh" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ 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__ */ jsx(X, { className: "h-5 w-5" })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-8 py-6 space-y-6", children: error ? /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-rose-100 bg-rose-50 p-5 text-sm text-rose-700", children: [
+              /* @__PURE__ */ jsx("p", { className: "font-semibold mb-1", children: "Unable to load uptime details" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-rose-600/90", children: error.message })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative pb-4 border-b border-gray-200", children: [
+                /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600 mt-4", children: [
+                  /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 animate-spin text-gray-500" }),
+                  /* @__PURE__ */ jsx("span", { children: "Updating timeline\u2026" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "pt-4", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3", children: "Downtime Logs" }),
+                downtimeSegments.length === 0 ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-gray-100 bg-gray-50/50 px-5 py-4 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: "No downtime events recorded for this shift." }) }) : /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                  /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-gray-500 animate-bounce", children: [
+                    /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Scroll for more" }),
+                    /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+                  ] }) })
+                ] })
+              ] })
+            ] }) }) })
+          ]
+        }
+      )
+    }
+  );
+};
+var WorkspaceUptimeDetailModal_default = WorkspaceUptimeDetailModal;
 var WorkspaceHealthView = ({
   lineId,
   companyId,
@@ -48306,6 +49413,7 @@ var WorkspaceHealthView = ({
   const router = useRouter();
   const [groupBy, setGroupBy] = useState("line");
   const timezone = useAppTimezone();
+  const [selectedWorkspace, setSelectedWorkspace] = useState(null);
   const operationalDate = getOperationalDate(timezone || "UTC");
   const currentHour = (/* @__PURE__ */ new Date()).getHours();
   const isNightShift = currentHour >= 18 || currentHour < 6;
@@ -48346,6 +49454,12 @@ var WorkspaceHealthView = ({
     },
     [router, onNavigate]
   );
+  const handleViewDetails = useCallback((workspace) => {
+    setSelectedWorkspace(workspace);
+  }, []);
+  const handleCloseDetails = useCallback(() => {
+    setSelectedWorkspace(null);
+  }, []);
   const handleExport = useCallback(() => {
     const csv = [
       ["Workspace", "Line", "Company", "Status", "Last Heartbeat", "Consecutive Misses"],
@@ -48403,178 +49517,189 @@ var WorkspaceHealthView = ({
       )
     ] }) }) }) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
-    /* @__PURE__ */ 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__ */ jsxs("div", { className: "sm:hidden", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-          /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "sm:hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+            /* @__PURE__ */ jsx(
+              BackButtonMinimal,
+              {
+                onClick: () => router.push("/"),
+                text: "Back",
+                size: "sm",
+                "aria-label": "Navigate back to dashboard"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => {
+                    refetch();
+                  },
+                  className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+                  "aria-label": "Refresh",
+                  children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ 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__ */ jsx(Download, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
+              /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsx(
             BackButtonMinimal,
             {
               onClick: () => router.push("/"),
               text: "Back",
-              size: "sm",
+              size: "default",
               "aria-label": "Navigate back to dashboard"
             }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
+              /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute right-0 flex gap-2", children: [
             /* @__PURE__ */ 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__ */ jsx(RefreshCw, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-5 w-5" })
               }
             ),
             /* @__PURE__ */ 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__ */ jsx(Download, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx(Download, { className: "h-5 w-5" })
               }
             )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
-          /* @__PURE__ */ jsxs("div", { className: "relative flex h-2 w-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
-            /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
+        ] }) }),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
+          /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
+          /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
+              shiftType,
+              " Shift"
+            ] })
           ] })
         ] }) })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsx(
-          BackButtonMinimal,
+      /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto p-4 space-y-6", children: [
+        summary && /* @__PURE__ */ jsxs(
+          motion.div,
           {
-            onClick: () => router.push("/"),
-            text: "Back",
-            size: "default",
-            "aria-label": "Navigate back to dashboard"
-          }
-        ) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
-          /* @__PURE__ */ jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
-            /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "absolute right-0 flex gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                refetch();
-              },
-              className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-              "aria-label": "Refresh",
-              children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-5 w-5" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: handleExport,
-              className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
-              "aria-label": "Export CSV",
-              children: /* @__PURE__ */ jsx(Download, { className: "h-5 w-5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
-      ] }) }),
-      /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
-        /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
-        /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
-            shiftType,
-            " Shift"
-          ] })
-        ] })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto p-4 space-y-6", children: [
-      summary && /* @__PURE__ */ 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__ */ jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2 bg-white", children: [
-              /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "System Availability" }) }),
-              /* @__PURE__ */ jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
-                  /* @__PURE__ */ 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__ */ jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2 bg-white", children: [
+                /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "System Availability" }) }),
+                /* @__PURE__ */ jsxs(CardContent2, { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+                    /* @__PURE__ */ jsxs("span", { className: clsx("text-3xl font-bold", getUptimeColor(summary.uptimePercentage)), children: [
+                      summary.uptimePercentage.toFixed(1),
+                      "%"
+                    ] }),
+                    summary.uptimePercentage >= 97 ? /* @__PURE__ */ jsx(TrendingUp, { className: "h-5 w-5 text-green-500" }) : summary.uptimePercentage >= 90 ? /* @__PURE__ */ jsx(Activity, { className: "h-5 w-5 text-yellow-500" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "h-5 w-5 text-red-500" })
                   ] }),
-                  summary.uptimePercentage >= 97 ? /* @__PURE__ */ jsx(TrendingUp, { className: "h-5 w-5 text-green-500" }) : summary.uptimePercentage >= 90 ? /* @__PURE__ */ jsx(Activity, { className: "h-5 w-5 text-yellow-500" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "h-5 w-5 text-red-500" })
-                ] }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Overall system uptime today" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(Card2, { className: "bg-white", children: [
-              /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
-                getStatusIcon("healthy"),
-                "Healthy"
-              ] }) }),
-              /* @__PURE__ */ jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.healthyWorkspaces }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Operating normally" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(Card2, { className: "bg-white", children: [
-              /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
-                getStatusIcon("warning"),
-                "Warning"
-              ] }) }),
-              /* @__PURE__ */ jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.warningWorkspaces }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Delayed updates" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(Card2, { className: "bg-white", children: [
-              /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
-                getStatusIcon("unhealthy"),
-                "Unhealthy"
-              ] }) }),
-              /* @__PURE__ */ jsxs(CardContent2, { children: [
-                /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.unhealthyWorkspaces }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Requires attention" })
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Overall system uptime today" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Card2, { className: "bg-white", children: [
+                /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
+                  getStatusIcon("healthy"),
+                  "Healthy"
+                ] }) }),
+                /* @__PURE__ */ jsxs(CardContent2, { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.healthyWorkspaces }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Operating normally" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Card2, { className: "bg-white", children: [
+                /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
+                  getStatusIcon("warning"),
+                  "Warning"
+                ] }) }),
+                /* @__PURE__ */ jsxs(CardContent2, { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.warningWorkspaces }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Delayed updates" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Card2, { className: "bg-white", children: [
+                /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxs(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400 flex items-center gap-2", children: [
+                  getStatusIcon("unhealthy"),
+                  "Unhealthy"
+                ] }) }),
+                /* @__PURE__ */ jsxs(CardContent2, { children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold text-gray-900 dark:text-gray-50", children: summary.unhealthyWorkspaces }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Requires attention" })
+                ] })
               ] })
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        motion.div,
-        {
-          initial: { opacity: 0, y: 20 },
-          animate: { opacity: 1, y: 0 },
-          transition: { duration: 0.3, delay: 0.2 },
-          children: /* @__PURE__ */ jsx(
-            HealthStatusGrid,
-            {
-              workspaces,
-              onWorkspaceClick: handleWorkspaceClick,
-              showFilters: true,
-              groupBy
-            }
-          )
-        }
-      )
-    ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.3, delay: 0.2 },
+            children: /* @__PURE__ */ jsx(
+              HealthStatusGrid,
+              {
+                workspaces,
+                onWorkspaceClick: handleWorkspaceClick,
+                onWorkspaceViewDetails: handleViewDetails,
+                showFilters: true,
+                groupBy
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      WorkspaceUptimeDetailModal_default,
+      {
+        workspace: selectedWorkspace,
+        isOpen: Boolean(selectedWorkspace),
+        onClose: handleCloseDetails
+      }
+    )
   ] });
 };
 var WorkspaceHealthView_default = withAuth(WorkspaceHealthView, {
@@ -52143,4 +53268,4 @@ function shuffleArray(array) {
   return shuffled;
 }
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AcceptInvite, AcceptInviteView_default as AcceptInviteView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthService, AuthenticatedBottleneckClipsView, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedTicketsView, AuthenticatedWorkspaceHealthView, AxelNotificationPopup, AxelOrb, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottleneckClipsModal, BottleneckClipsView_default as BottleneckClipsView, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ClipFilterProvider, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedHlsVideoPlayer, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_MAP_VIEW_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, DiagnosisVideoModal, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HlsVideoPlayer, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, InvitationService, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, Logo, MainLayout, MapGridView, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PlayPauseIndicator, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SignupWithInvitation, SilentErrorBoundary, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, TeamManagementView_default as TeamManagementView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TicketsView_default as TicketsView, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserManagementService, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createInvitationService, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserManagementService, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatRelativeTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getBrowserName, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getNextUpdateInterval, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isSafari, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useActiveLineId, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useAxelNotifications, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useDynamicShiftConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHasLineAccess, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineShiftConfig, useLineSupervisor, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useSessionKeepAlive, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTeamManagementPermissions, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useUserLineAccess, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealthById, useWorkspaceHealthStatus, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AcceptInvite, AcceptInviteView_default as AcceptInviteView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthService, AuthenticatedBottleneckClipsView, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedTicketsView, AuthenticatedWorkspaceHealthView, AxelNotificationPopup, AxelOrb, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottleneckClipsModal, BottleneckClipsView_default as BottleneckClipsView, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ClipFilterProvider, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedHlsVideoPlayer, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_MAP_VIEW_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, DiagnosisVideoModal, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HlsVideoPlayer, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, InvitationService, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, Logo, MainLayout, MapGridView, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PlayPauseIndicator, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SignupWithInvitation, SilentErrorBoundary, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, TeamManagementView_default as TeamManagementView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TicketsView_default as TicketsView, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserManagementService, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createInvitationService, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserManagementService, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatRelativeTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getBrowserName, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getNextUpdateInterval, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isSafari, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useActiveLineId, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useAxelNotifications, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useDynamicShiftConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHasLineAccess, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineShiftConfig, useLineSupervisor, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useSessionKeepAlive, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTeamManagementPermissions, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useUserLineAccess, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealthById, useWorkspaceHealthStatus, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, useWorkspaceUptimeTimeline, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };