@optifye/dashboard-core 6.10.29 → 6.10.31

package/dist/index.js

@@ -2569,6 +2569,7 @@ var workspaceService = {
     }
   }
 };
+var DATA_PROCESSING_DELAY_MINUTES = 5;
 var WorkspaceHealthService = class _WorkspaceHealthService {
   constructor() {
     this.cache = /* @__PURE__ */ new Map();
@@ -2624,9 +2625,11 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     const totalMinutes = getShiftDurationMinutes(shiftStartStr, shiftEndStr);
     const shiftEndDate = dateFns.addMinutes(shiftStartDate, totalMinutes);
     const now4 = /* @__PURE__ */ new Date();
-    let completedMinutes = dateFns.differenceInMinutes(now4 < shiftEndDate ? now4 : shiftEndDate, shiftStartDate);
-    if (completedMinutes < 0) completedMinutes = 0;
-    if (completedMinutes > totalMinutes) completedMinutes = totalMinutes;
+    let rawCompletedMinutes = dateFns.differenceInMinutes(now4 < shiftEndDate ? now4 : shiftEndDate, shiftStartDate);
+    if (rawCompletedMinutes < 0) rawCompletedMinutes = 0;
+    if (rawCompletedMinutes > totalMinutes) rawCompletedMinutes = totalMinutes;
+    const isShiftComplete = shiftEndDate <= now4;
+    const completedMinutes = isShiftComplete ? rawCompletedMinutes : Math.max(0, rawCompletedMinutes - DATA_PROCESSING_DELAY_MINUTES);
     const pendingMinutes = Math.max(0, totalMinutes - completedMinutes);
     return {
       shiftId,
@@ -2661,7 +2664,8 @@ var WorkspaceHealthService = class _WorkspaceHealthService {
     } else if (shiftStartDate > now4) {
       completedMinutes = 0;
     } else {
-      completedMinutes = Math.floor((now4.getTime() - shiftStartDate.getTime()) / (1e3 * 60));
+      const rawCompleted = Math.floor((now4.getTime() - shiftStartDate.getTime()) / (1e3 * 60));
+      completedMinutes = Math.max(0, rawCompleted - DATA_PROCESSING_DELAY_MINUTES);
     }
     const pendingMinutes = totalMinutes - completedMinutes;
     return {
@@ -4009,7 +4013,7 @@ var initializeCoreMixpanel = (token, debugOrOptions, trackPageViewArg) => {
     track_pageview: trackPageView ?? true,
     persistence: "localStorage"
   };
-  const recordSessionsPercent = sessionOpts.recordSessionsPercent ?? 0;
+  const recordSessionsPercent = sessionOpts.recordSessionsPercent ?? 20;
   initOptions.record_sessions_percent = recordSessionsPercent;
   const defaultIdleTimeoutMs = 10 * 60 * 1e3;
   const recordIdleTimeoutMs = sessionOpts.recordIdleTimeoutMs ?? (recordSessionsPercent > 0 ? defaultIdleTimeoutMs : void 0);
@@ -11687,6 +11691,8 @@ var FAILURE_EXPIRY_MS = 5 * 60 * 1e3;
 var LIVE_RELOAD_MIN_INTERVAL_MS = 15 * 1e3;
 var DEFAULT_LIVE_OFFSET_SECONDS = 120;
 var DEFAULT_MAX_MANIFEST_AGE_MS = 10 * 60 * 1e3;
+var SEGMENT_MAX_AGE_MS = 10 * 60 * 1e3;
+var SEGMENT_TIMESTAMP_REGEX = /(\d{8}T\d{6}Z)(?=\.ts(?:$|[?#]))/;
 var STALE_MANIFEST_POLL_INITIAL_DELAY_MS = 15 * 1e3;
 var STALE_MANIFEST_POLL_MAX_DELAY_MS = 60 * 1e3;
 function resetFailedUrl(url) {
@@ -11722,6 +11728,8 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
     });
   };
   const [restartKey, setRestartKey] = React25.useState(0);
+  const [isStale, setIsStale] = React25.useState(false);
+  const [staleReason, setStaleReason] = React25.useState(null);
   const hlsRef = React25.useRef(null);
   const stallCheckIntervalRef = React25.useRef(null);
   const noProgressTimerRef = React25.useRef(null);
@@ -11733,6 +11741,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
   const playRetryTimerRef = React25.useRef(null);
   const playRetryCountRef = React25.useRef(0);
   const manifestWatchdogRef = React25.useRef(null);
+  const nativeFreshnessIntervalRef = React25.useRef(null);
   const lastHiddenAtRef = React25.useRef(null);
   const manifestRetryTimerRef = React25.useRef(null);
   const manifestRetryDelayRef = React25.useRef(5e3);
@@ -11757,6 +11766,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
   const staleManifestEndSnRef = React25.useRef(null);
   const staleManifestPollTimerRef = React25.useRef(null);
   const staleManifestPollDelayRef = React25.useRef(STALE_MANIFEST_POLL_INITIAL_DELAY_MS);
+  const lastSegmentTimestampMsRef = React25.useRef(null);
   const authTokenRef = React25.useRef(null);
   const proxyEnabled = process.env.NEXT_PUBLIC_HLS_PROXY_ENABLED === "true";
   const proxyBaseUrl = (process.env.NEXT_PUBLIC_HLS_PROXY_URL || "/api/stream").replace(/\/$/, "");
@@ -11766,6 +11776,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
     const parsed = raw ? Number(raw) : NaN;
     return Number.isFinite(parsed) ? parsed : DEFAULT_MAX_MANIFEST_AGE_MS;
   })();
+  const manifestStaleThresholdMs = maxManifestAgeMs > 0 ? Math.min(maxManifestAgeMs, SEGMENT_MAX_AGE_MS) : SEGMENT_MAX_AGE_MS;
   const debugLog = (...args) => {
     if (debugEnabled) {
       console.log(...args);
@@ -11780,10 +11791,49 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
     }
     return null;
   };
+  const parseSegmentTimestampMs = (value) => {
+    const match = value.match(SEGMENT_TIMESTAMP_REGEX);
+    if (!match) return null;
+    const stamp = match[1];
+    const year = Number(stamp.slice(0, 4));
+    const month = Number(stamp.slice(4, 6));
+    const day = Number(stamp.slice(6, 8));
+    const hour = Number(stamp.slice(9, 11));
+    const minute = Number(stamp.slice(11, 13));
+    const second = Number(stamp.slice(13, 15));
+    if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(day) || !Number.isFinite(hour) || !Number.isFinite(minute) || !Number.isFinite(second) || month < 1 || month > 12 || day < 1 || day > 31 || hour < 0 || hour > 23 || minute < 0 || minute > 59 || second < 0 || second > 59) {
+      return null;
+    }
+    const timestampMs = Date.UTC(year, month - 1, day, hour, minute, second);
+    return Number.isNaN(timestampMs) ? null : timestampMs;
+  };
+  const getFragmentTimestampMs = (fragment, enforceSegmentAge = false) => {
+    if (fragment?.relurl) {
+      const parsed = parseSegmentTimestampMs(fragment.relurl);
+      if (parsed !== null) return parsed;
+    }
+    if (fragment?.url) {
+      const parsed = parseSegmentTimestampMs(fragment.url);
+      if (parsed !== null) return parsed;
+    }
+    if (enforceSegmentAge) return null;
+    return getProgramDateTimeMs(fragment?.programDateTime);
+  };
+  const getLatestFragmentTimestampMs = (fragments, enforceSegmentAge = false) => {
+    if (!Array.isArray(fragments) || fragments.length === 0) return null;
+    for (let i = fragments.length - 1; i >= 0; i -= 1) {
+      const timestampMs = getFragmentTimestampMs(fragments[i], enforceSegmentAge);
+      if (timestampMs !== null) {
+        return timestampMs;
+      }
+    }
+    return null;
+  };
   const parseManifestStatus = (manifestText) => {
     let mediaSequence = null;
     let segmentCount = 0;
     let lastProgramDateTimeMs = null;
+    let lastSegmentTimestampMs = null;
     const lines = manifestText.split(/\r?\n/);
     for (const rawLine of lines) {
       const line = rawLine.trim();
@@ -11801,13 +11851,60 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
         }
       } else if (line.startsWith("#EXTINF:")) {
         segmentCount += 1;
+      } else if (!line.startsWith("#")) {
+        const segmentTimestampMs = parseSegmentTimestampMs(line);
+        if (segmentTimestampMs !== null) {
+          lastSegmentTimestampMs = segmentTimestampMs;
+        }
       }
     }
     let lastSequenceNumber = null;
     if (mediaSequence !== null && segmentCount > 0) {
       lastSequenceNumber = mediaSequence + segmentCount - 1;
     }
-    return { lastProgramDateTimeMs, lastSequenceNumber };
+    return { lastProgramDateTimeMs, lastSequenceNumber, lastSegmentTimestampMs };
+  };
+  const evaluateSegmentFreshness = ({
+    segmentTimestampMs,
+    fallbackTimestampMs,
+    enforceSegmentAge
+  }) => {
+    if (segmentTimestampMs !== null) {
+      const ageMs = Date.now() - segmentTimestampMs;
+      return {
+        isFresh: ageMs <= SEGMENT_MAX_AGE_MS,
+        ageMs,
+        reason: `segment age ${Math.round(ageMs / 1e3)}s`
+      };
+    }
+    if (enforceSegmentAge) {
+      return { isFresh: false, ageMs: null, reason: "segment timestamp missing" };
+    }
+    if (fallbackTimestampMs !== null) {
+      const ageMs = Date.now() - fallbackTimestampMs;
+      return {
+        isFresh: ageMs <= SEGMENT_MAX_AGE_MS,
+        ageMs,
+        reason: `program date time age ${Math.round(ageMs / 1e3)}s`
+      };
+    }
+    return { isFresh: true, ageMs: null, reason: null };
+  };
+  const fetchManifestStatus = async (manifestUrl) => {
+    const headers = {};
+    if (authTokenRef.current) {
+      headers.Authorization = `Bearer ${authTokenRef.current}`;
+    }
+    const response = await fetch(buildCacheBustedUrl(manifestUrl), {
+      method: "GET",
+      cache: "no-store",
+      headers
+    });
+    if (!response.ok) {
+      throw new Error(`Manifest fetch failed: ${response.status}`);
+    }
+    const manifestText = await response.text();
+    return parseManifestStatus(manifestText);
   };
   const stopStaleManifestPolling = () => {
     if (staleManifestPollTimerRef.current) {
@@ -11818,6 +11915,8 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
     staleManifestUrlRef.current = null;
     staleManifestEndSnRef.current = null;
     staleManifestPollDelayRef.current = STALE_MANIFEST_POLL_INITIAL_DELAY_MS;
+    setIsStale(false);
+    setStaleReason(null);
   };
   const pollStaleManifestOnce = async () => {
     if (!staleManifestTriggeredRef.current) return;
@@ -11831,25 +11930,24 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
       return;
     }
     try {
-      const headers = {};
-      if (authTokenRef.current) {
-        headers.Authorization = `Bearer ${authTokenRef.current}`;
-      }
-      const response = await fetch(buildCacheBustedUrl(manifestUrl), {
-        method: "GET",
-        cache: "no-store",
-        headers
+      const {
+        lastProgramDateTimeMs,
+        lastSequenceNumber,
+        lastSegmentTimestampMs
+      } = await fetchManifestStatus(manifestUrl);
+      if (lastSegmentTimestampMs !== null) {
+        lastSegmentTimestampMsRef.current = lastSegmentTimestampMs;
+      }
+      const enforceSegmentAge = isR2StreamRef.current;
+      const hasAnyTimestamp = lastSegmentTimestampMs !== null || lastProgramDateTimeMs !== null;
+      const freshness = evaluateSegmentFreshness({
+        segmentTimestampMs: lastSegmentTimestampMs,
+        fallbackTimestampMs: lastProgramDateTimeMs,
+        enforceSegmentAge
       });
-      if (!response.ok) {
-        throw new Error(`Manifest poll failed: ${response.status}`);
-      }
-      const manifestText = await response.text();
-      const { lastProgramDateTimeMs, lastSequenceNumber } = parseManifestStatus(manifestText);
-      const now4 = Date.now();
-      const isFreshByProgramDateTime = lastProgramDateTimeMs !== null && now4 - lastProgramDateTimeMs <= maxManifestAgeMs;
       const priorEndSn = staleManifestEndSnRef.current;
       const isSequenceAdvanced = typeof lastSequenceNumber === "number" && (priorEndSn === null || lastSequenceNumber > priorEndSn);
-      if (isFreshByProgramDateTime || isSequenceAdvanced) {
+      if (freshness.isFresh || !enforceSegmentAge && !hasAnyTimestamp && isSequenceAdvanced) {
         stopStaleManifestPolling();
         if (hlsRef.current) {
           hlsRef.current.startLoad(-1);
@@ -11884,6 +11982,8 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
     staleManifestUrlRef.current = activeStreamUrlRef.current || latestSrcRef.current;
     staleManifestEndSnRef.current = lastManifestEndSnRef.current;
     staleManifestPollDelayRef.current = STALE_MANIFEST_POLL_INITIAL_DELAY_MS;
+    setIsStale(true);
+    setStaleReason(reason);
     const hls = hlsRef.current;
     if (hls) {
       hls.stopLoad();
@@ -11941,6 +12041,10 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
       clearInterval(manifestWatchdogRef.current);
       manifestWatchdogRef.current = null;
     }
+    if (nativeFreshnessIntervalRef.current) {
+      clearInterval(nativeFreshnessIntervalRef.current);
+      nativeFreshnessIntervalRef.current = null;
+    }
     if (manifestRetryTimerRef.current) {
       clearTimeout(manifestRetryTimerRef.current);
       manifestRetryTimerRef.current = null;
@@ -11965,6 +12069,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
     lastManifestEndSnRef.current = null;
     lastManifestEndSnUpdatedAtRef.current = null;
     staleManifestTriggeredRef.current = false;
+    lastSegmentTimestampMsRef.current = null;
     manifestRetryDelayRef.current = 5e3;
     playRetryCountRef.current = 0;
     if (hlsRef.current) {
@@ -12084,6 +12189,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
   const attemptPlay = (reason) => {
     const video = videoRef.current;
     if (!video || !shouldPlayRef.current) return;
+    if (staleManifestTriggeredRef.current) return;
     if (!video.paused || video.seeking) return;
     if (video.readyState < 2) return;
     video.play().then(() => {
@@ -12109,7 +12215,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
     lastHiddenAtRef.current = null;
     if (!lastHiddenAt) return;
     if (Date.now() - lastHiddenAt < 3e4) return;
-    refreshLiveStream("tab visible after idle");
+    void refreshLiveStream("tab visible after idle");
     attemptPlay();
   };
   const startManifestWatchdog = () => {
@@ -12185,7 +12291,38 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
       return `${url}${separator}ts=${Date.now()}`;
     }
   };
-  const refreshLiveStream = (reason) => {
+  const ensureManifestFreshness = async (manifestUrl, enforceSegmentAge, reason) => {
+    try {
+      const status = await fetchManifestStatus(manifestUrl);
+      if (status.lastSegmentTimestampMs !== null) {
+        lastSegmentTimestampMsRef.current = status.lastSegmentTimestampMs;
+      }
+      const freshness = evaluateSegmentFreshness({
+        segmentTimestampMs: status.lastSegmentTimestampMs,
+        fallbackTimestampMs: status.lastProgramDateTimeMs,
+        enforceSegmentAge
+      });
+      if (!freshness.isFresh) {
+        markStaleStream(freshness.reason || reason);
+        return false;
+      }
+      return true;
+    } catch (error) {
+      debugLog("[HLS] Manifest freshness check failed", error);
+      {
+        markStaleStream("manifest freshness check failed");
+        return false;
+      }
+    }
+  };
+  const startNativeFreshnessMonitor = (manifestUrl) => {
+    if (nativeFreshnessIntervalRef.current) return;
+    nativeFreshnessIntervalRef.current = setInterval(() => {
+      if (staleManifestTriggeredRef.current) return;
+      void ensureManifestFreshness(manifestUrl, true, "native freshness check");
+    }, 3e4);
+  };
+  const refreshLiveStream = async (reason) => {
     if (!isR2StreamRef.current) return;
     const now4 = Date.now();
     if (now4 - lastLiveReloadRef.current < LIVE_RELOAD_MIN_INTERVAL_MS) {
@@ -12201,6 +12338,10 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
     }
     if (video && nativeStreamUrlRef.current) {
       console.log(`[HLS] Native live reload (${reason})`);
+      const isFresh = await ensureManifestFreshness(nativeStreamUrlRef.current, true, "native live reload");
+      if (!isFresh) {
+        return;
+      }
       const refreshedUrl = buildCacheBustedUrl(nativeStreamUrlRef.current);
       video.src = refreshedUrl;
       video.load();
@@ -12292,7 +12433,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
   };
   const handleEnded = () => {
     if (isNativeHlsRef.current) {
-      refreshLiveStream("ended");
+      void refreshLiveStream("ended");
       return;
     }
     if (isR2StreamRef.current) {
@@ -12306,7 +12447,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
     if (isNativeHlsRef.current) {
       if (!isR2StreamRef.current) return;
       waitingTimerRef.current = setTimeout(() => {
-        refreshLiveStream("native waiting timeout");
+        void refreshLiveStream("native waiting timeout");
       }, getWaitingTimeoutMs());
       return;
     }
@@ -12429,12 +12570,17 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
           nativeStreamUrlRef.current = resolvedSrc;
           activeStreamUrlRef.current = resolvedSrc;
           console.log("[HLS] Using proxy playlist for Safari R2 stream");
+          const isFresh = await ensureManifestFreshness(resolvedSrc, true, "native proxy start");
+          if (!isFresh) {
+            return;
+          }
           video.src = resolvedSrc;
           video.addEventListener("waiting", handleWaiting);
           video.addEventListener("loadedmetadata", handleLoadedMetadata);
           video.addEventListener("canplay", handleCanPlay);
           video.addEventListener("ended", handleEnded);
           video.addEventListener("error", handleNativeError);
+          startNativeFreshnessMonitor(resolvedSrc);
           attemptPlay();
           return;
         }
@@ -12602,20 +12748,29 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
               }
             }
           }
-          if (maxManifestAgeMs > 0 && !details.endList) {
+          if (!details.endList) {
             const now4 = Date.now();
             const fragments = Array.isArray(details.fragments) ? details.fragments : [];
             const lastFragment = fragments.length ? fragments[fragments.length - 1] : void 0;
-            const programDateTimeMs = getProgramDateTimeMs(lastFragment?.programDateTime);
-            if (programDateTimeMs && now4 - programDateTimeMs > maxManifestAgeMs) {
-              markStaleStream(`segment age ${Math.round((now4 - programDateTimeMs) / 1e3)}s`);
+            const segmentTimestampMs = getLatestFragmentTimestampMs(fragments, true);
+            const enforceSegmentAge = isR2StreamRef.current;
+            if (segmentTimestampMs !== null) {
+              lastSegmentTimestampMsRef.current = segmentTimestampMs;
+            }
+            const freshness = evaluateSegmentFreshness({
+              segmentTimestampMs,
+              fallbackTimestampMs: getProgramDateTimeMs(lastFragment?.programDateTime),
+              enforceSegmentAge
+            });
+            if (!freshness.isFresh) {
+              markStaleStream(freshness.reason || "segment stale");
               return;
             }
             const endSn = typeof details.endSN === "number" ? details.endSN : lastFragment?.sn;
             if (typeof endSn === "number") {
               if (lastManifestEndSnRef.current === endSn) {
                 const lastUpdatedAt = lastManifestEndSnUpdatedAtRef.current;
-                if (lastUpdatedAt && now4 - lastUpdatedAt > maxManifestAgeMs) {
+                if (lastUpdatedAt && now4 - lastUpdatedAt > manifestStaleThresholdMs) {
                   markStaleStream(`sequence stalled at ${endSn}`);
                   return;
                 }
@@ -12640,6 +12795,27 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
           lastManifestLoadRef.current = Date.now();
           resetManifestRetry();
         });
+        hls.on(Hls__default.default.Events.FRAG_LOADING, (_event, data) => {
+          if (staleManifestTriggeredRef.current) return;
+          const frag = data?.frag;
+          if (!frag || frag.sn === "initSegment") return;
+          const enforceSegmentAge = isR2StreamRef.current;
+          const segmentTimestampMs = getFragmentTimestampMs(frag, true);
+          if (segmentTimestampMs !== null) {
+            lastSegmentTimestampMsRef.current = segmentTimestampMs;
+          }
+          const freshness = evaluateSegmentFreshness({
+            segmentTimestampMs,
+            fallbackTimestampMs: getProgramDateTimeMs(frag.programDateTime),
+            enforceSegmentAge
+          });
+          if (!freshness.isFresh) {
+            if (frag.loader?.abort) {
+              frag.loader.abort();
+            }
+            markStaleStream(freshness.reason || "segment stale");
+          }
+        });
         hls.on(Hls__default.default.Events.FRAG_LOADED, (_event, data) => {
           if (!isR2Stream) return;
           lastFragLoadRef.current = Date.now();
@@ -12664,9 +12840,15 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
       if (canUseNative) {
         isNativeHlsRef.current = true;
         console.log("[HLS] Using native HLS");
-        video.src = resolvedSrc;
         nativeStreamUrlRef.current = resolvedSrc;
         activeStreamUrlRef.current = resolvedSrc;
+        if (isR2Stream) {
+          const isFresh = await ensureManifestFreshness(resolvedSrc, true, "native start");
+          if (!isFresh) {
+            return;
+          }
+        }
+        video.src = resolvedSrc;
         video.addEventListener("waiting", handleWaiting);
         video.addEventListener("loadedmetadata", handleLoadedMetadata);
         video.addEventListener("canplay", handleCanPlay);
@@ -12674,6 +12856,9 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
         video.addEventListener("error", handleNativeError);
         startPlaybackGovernor();
         startManifestWatchdog();
+        if (isR2Stream) {
+          startNativeFreshnessMonitor(resolvedSrc);
+        }
         attemptPlay();
       } else {
         console.error("[HLS] HLS not supported");
@@ -12687,7 +12872,10 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError, hlsConfig }) {
   }, [src, shouldPlay, restartKey, isPermanentlyFailed]);
   return {
     restartKey,
-    isNativeHls: isNativeHlsRef.current
+    isNativeHls: isNativeHlsRef.current,
+    isStale,
+    staleReason,
+    lastSegmentTimestampMs: lastSegmentTimestampMsRef.current
   };
 }
 function useHlsStreamWithCropping(videoRef, canvasRef, options) {
@@ -14823,7 +15011,77 @@ function getNextUpdateInterval(timestamp) {
   }
 }
 
-// src/lib/hooks/useWorkspaceHealthStatus.ts
+// src/lib/hooks/useWorkspaceHealthLastSeen.ts
+var DEFAULT_REFRESH_INTERVAL_MS = 3e4;
+var useWorkspaceHealthLastSeen = (workspaceIds, options = {}) => {
+  const supabase = useSupabase();
+  const databaseConfig = useDatabaseConfig();
+  const refreshInterval = options.refreshInterval ?? DEFAULT_REFRESH_INTERVAL_MS;
+  const workspaceIdsKey = React25.useMemo(() => {
+    const ids = Array.from(new Set(workspaceIds.filter(Boolean)));
+    return ids.sort().join(",");
+  }, [workspaceIds]);
+  const [lastSeenByWorkspaceId, setLastSeenByWorkspaceId] = React25.useState({});
+  const [isLoading, setIsLoading] = React25.useState(Boolean(workspaceIdsKey));
+  const [error, setError] = React25.useState(null);
+  const isFetchingRef = React25.useRef(false);
+  const refreshIntervalRef = React25.useRef(null);
+  const fetchLastSeen = React25.useCallback(async () => {
+    if (!supabase || !workspaceIdsKey || isFetchingRef.current) return;
+    const healthTable = databaseConfig?.tables?.workspace_health || "workspace_health_status";
+    try {
+      isFetchingRef.current = true;
+      setIsLoading(true);
+      setError(null);
+      const workspaceIdsList = workspaceIdsKey.split(",").filter(Boolean);
+      if (!workspaceIdsList.length) {
+        setLastSeenByWorkspaceId({});
+        return;
+      }
+      const { data, error: fetchError } = await supabase.from(healthTable).select("workspace_id,last_heartbeat,is_healthy").in("workspace_id", workspaceIdsList);
+      if (fetchError) throw fetchError;
+      const nextMap = {};
+      (data || []).forEach((row) => {
+        if (!row?.workspace_id) return;
+        const lastHeartbeat = row.last_heartbeat || null;
+        nextMap[row.workspace_id] = {
+          lastHeartbeat,
+          timeSinceLastUpdate: formatRelativeTime(lastHeartbeat),
+          isHealthy: Boolean(row.is_healthy)
+        };
+      });
+      setLastSeenByWorkspaceId(nextMap);
+    } catch (err) {
+      console.error("[useWorkspaceHealthLastSeen] Error fetching workspace health:", err);
+      setError(err?.message || "Failed to load workspace health");
+      setLastSeenByWorkspaceId({});
+    } finally {
+      setIsLoading(false);
+      isFetchingRef.current = false;
+    }
+  }, [supabase, workspaceIdsKey, databaseConfig?.tables?.workspace_health]);
+  React25.useEffect(() => {
+    fetchLastSeen();
+  }, [fetchLastSeen]);
+  React25.useEffect(() => {
+    if (!refreshInterval || !workspaceIdsKey) return;
+    refreshIntervalRef.current = setInterval(() => {
+      fetchLastSeen();
+    }, refreshInterval);
+    return () => {
+      if (refreshIntervalRef.current) {
+        clearInterval(refreshIntervalRef.current);
+        refreshIntervalRef.current = null;
+      }
+    };
+  }, [fetchLastSeen, refreshInterval, workspaceIdsKey]);
+  return {
+    lastSeenByWorkspaceId,
+    isLoading,
+    error,
+    refetch: fetchLastSeen
+  };
+};
 var useWorkspaceHealthStatus = (workspaceId) => {
   const supabase = useSupabase();
   const databaseConfig = useDatabaseConfig();
@@ -15504,6 +15762,7 @@ var useSupervisorsByLineIds = (lineIds, options) => {
   const targetLineIdSet = React25.useMemo(() => new Set(lineIds || []), [lineIdsKey]);
   const [supervisorsByLineId, setSupervisorsByLineId] = React25.useState(/* @__PURE__ */ new Map());
   const [supervisorNamesByLineId, setSupervisorNamesByLineId] = React25.useState(/* @__PURE__ */ new Map());
+  const [allSupervisorsMap, setAllSupervisorsMap] = React25.useState(/* @__PURE__ */ new Map());
   const [isLoading, setIsLoading] = React25.useState(true);
   const [error, setError] = React25.useState(null);
   const fetchSupervisors = React25.useCallback(async () => {
@@ -15519,9 +15778,9 @@ var useSupervisorsByLineIds = (lineIds, options) => {
         throw fetchError;
       }
       const nextSupervisorsByLineId = /* @__PURE__ */ new Map();
+      const nextAllSupervisorsMap = /* @__PURE__ */ new Map();
       (data || []).forEach((row) => {
         const assignedLineIds = row?.properties?.line_id || row?.properties?.line_ids || [];
-        if (!Array.isArray(assignedLineIds) || assignedLineIds.length === 0) return;
         const email = row.email || "";
         let displayName;
         if (row.first_name) {
@@ -15535,6 +15794,8 @@ var useSupervisorsByLineIds = (lineIds, options) => {
           displayName,
           profilePhotoUrl: row.profile_photo_url
         };
+        nextAllSupervisorsMap.set(supervisor.userId, supervisor);
+        if (!Array.isArray(assignedLineIds) || assignedLineIds.length === 0) return;
         assignedLineIds.forEach((lineId) => {
           if (typeof lineId !== "string") return;
           if (targetLineIdSet.size > 0 && !targetLineIdSet.has(lineId)) return;
@@ -15549,10 +15810,12 @@ var useSupervisorsByLineIds = (lineIds, options) => {
       });
       setSupervisorsByLineId(nextSupervisorsByLineId);
       setSupervisorNamesByLineId(nextSupervisorNamesByLineId);
+      setAllSupervisorsMap(nextAllSupervisorsMap);
     } catch (err) {
       setError(err instanceof Error ? err : new Error("Failed to fetch supervisors"));
       setSupervisorsByLineId(/* @__PURE__ */ new Map());
       setSupervisorNamesByLineId(/* @__PURE__ */ new Map());
+      setAllSupervisorsMap(/* @__PURE__ */ new Map());
     } finally {
       setIsLoading(false);
     }
@@ -15577,6 +15840,7 @@ var useSupervisorsByLineIds = (lineIds, options) => {
   return {
     supervisorNamesByLineId,
     supervisorsByLineId,
+    allSupervisorsMap,
     isLoading,
     error,
     refetch: fetchSupervisors
@@ -29782,13 +30046,14 @@ var VideoCard = React25__namespace.default.memo(({
   className = "",
   compact = false,
   displayName,
+  lastSeenLabel,
   onMouseEnter,
   onMouseLeave
 }) => {
   const videoRef = React25.useRef(null);
   const canvasRef = React25.useRef(null);
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
-  useHlsStreamWithCropping(videoRef, canvasRef, {
+  const { isStale: isStreamStale } = useHlsStreamWithCropping(videoRef, canvasRef, {
     src: hlsUrl,
     shouldPlay,
     cropping,
@@ -29796,6 +30061,8 @@ var VideoCard = React25__namespace.default.memo(({
     useRAF,
     onFatalError: onFatalError ?? (() => throttledReloadDashboard())
   });
+  const showOffline = Boolean(isStreamStale);
+  const lastSeenText = lastSeenLabel || "Unknown";
   const workspaceDisplayName = displayName || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
   const efficiencyColor = getEfficiencyColor(workspace.efficiency, effectiveLegend);
   const efficiencyOverlayClass = efficiencyColor === "green" ? "bg-[#00D654]/25" : efficiencyColor === "yellow" ? "bg-[#FFD700]/30" : "bg-[#FF2D0A]/30";
@@ -29865,6 +30132,14 @@ var VideoCard = React25__namespace.default.memo(({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-0 z-20 pointer-events-none ${efficiencyOverlayClass}` }),
+          showOffline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-40 flex items-center justify-center bg-black/70 px-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: `${compact ? "w-4 h-4" : "w-5 h-5"} text-amber-300` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `font-semibold text-white ${compact ? "text-[11px]" : "text-xs"}`, children: "Not streaming" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-gray-200 ${compact ? "text-[10px]" : "text-[11px]"}`, children: [
+              "Last seen: ",
+              lastSeenText
+            ] })
+          ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute ${compact ? "top-1 right-1" : "top-2 right-2"} z-30 bg-black/70 backdrop-blur-sm rounded ${compact ? "px-1.5 py-0.5" : "px-2 py-0.5"} text-white ${compact ? "text-[10px]" : "text-xs"} font-semibold border border-white/10`, children: [
             Math.round(workspace.efficiency),
             "%"
@@ -29891,8 +30166,13 @@ var VideoCard = React25__namespace.default.memo(({
                 children: trendInfo.arrow
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full bg-green-500` }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"}`, children: "Live" })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full ${showOffline ? "bg-red-500" : "bg-green-500"}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"}`, children: showOffline ? "Offline" : "Live" })
           ] })
         ] })
       ]
@@ -29908,6 +30188,9 @@ var VideoCard = React25__namespace.default.memo(({
   if (prevProps.displayName !== nextProps.displayName) {
     return false;
   }
+  if (prevProps.lastSeenLabel !== nextProps.lastSeenLabel) {
+    return false;
+  }
   if (prevProps.legend !== nextProps.legend) {
     return false;
   }
@@ -29965,6 +30248,16 @@ var VideoGridView = React25__namespace.default.memo(({
   const supabase = useSupabase();
   const { cropping, canvasConfig, hlsUrls } = videoConfig;
   const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
+  const workspaceHealthIds = React25.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const workspace of workspaces) {
+      if (workspace.workspace_uuid) {
+        ids.add(workspace.workspace_uuid);
+      }
+    }
+    return Array.from(ids);
+  }, [workspaces]);
+  const { lastSeenByWorkspaceId } = useWorkspaceHealthLastSeen(workspaceHealthIds);
   React25.useEffect(() => {
     const sample = workspaces.slice(0, 3).map((workspace) => ({
       id: workspace.workspace_uuid || workspace.workspace_name,
@@ -30216,6 +30509,7 @@ var VideoGridView = React25__namespace.default.memo(({
           const isVeryLowEfficiency = workspace.show_exclamation ?? (workspace.efficiency < 50 && workspace.efficiency >= 10);
           const workspaceCropping = getWorkspaceCropping(workspaceId, workspace.workspace_name);
           const workspaceStream = videoStreamsByWorkspaceId?.[workspaceId];
+          const lastSeenLabel = workspace.workspace_uuid ? lastSeenByWorkspaceId[workspace.workspace_uuid]?.timeSinceLastUpdate : void 0;
           const r2Url = workspaceStream?.hls_url;
           const fallbackUrl = getWorkspaceHlsUrl(workspace.workspace_name, workspace.line_id);
           const hasR2Stream = Boolean(r2Url);
@@ -30233,7 +30527,8 @@ var VideoGridView = React25__namespace.default.memo(({
             fallbackUrl,
             hlsUrl,
             isR2Stream,
-            shouldPlay
+            shouldPlay,
+            lastSeenLabel
           };
         });
         const croppedActiveCount = workspaceCards.reduce((count, card) => {
@@ -30271,6 +30566,7 @@ var VideoGridView = React25__namespace.default.memo(({
                   displayNames[`${card.workspace.line_id}_${card.workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
                   getWorkspaceDisplayName(card.workspace.workspace_name, card.workspace.line_id)
                 ),
+                lastSeenLabel: card.lastSeenLabel,
                 useRAF: effectiveUseRAF,
                 compact: !selectedLine,
                 onMouseEnter: onWorkspaceHover ? () => onWorkspaceHover(card.workspaceId) : void 0,
@@ -33988,6 +34284,53 @@ var BackButtonMinimal = ({
     }
   );
 };
+var FittingTitle = ({
+  title,
+  className,
+  as: Component3 = "h3"
+}) => {
+  const containerRef = React25.useRef(null);
+  const textRef = React25.useRef(null);
+  const [fontSize, setFontSize] = React25.useState(null);
+  React25.useLayoutEffect(() => {
+    const adjustFontSize = () => {
+      if (!containerRef.current || !textRef.current) return;
+      const containerWidth = containerRef.current.offsetWidth;
+      if (containerWidth <= 0) return;
+      textRef.current.style.fontSize = "";
+      textRef.current.style.display = "inline-block";
+      const naturalWidth = textRef.current.offsetWidth;
+      if (naturalWidth > containerWidth) {
+        const computedStyle = window.getComputedStyle(textRef.current);
+        const currentFontSize = parseFloat(computedStyle.fontSize);
+        const ratio = (containerWidth - 2) / naturalWidth;
+        const newFontSize = Math.max(8, currentFontSize * ratio);
+        setFontSize(newFontSize);
+      } else {
+        setFontSize(null);
+      }
+      textRef.current.style.display = "";
+    };
+    adjustFontSize();
+    const observer = new ResizeObserver(() => {
+      window.requestAnimationFrame(adjustFontSize);
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => observer.disconnect();
+  }, [title]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "w-full overflow-hidden min-w-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Component3,
+    {
+      ref: textRef,
+      className: cn("whitespace-nowrap font-bold text-gray-900 tracking-tight", className),
+      style: fontSize ? { fontSize: `${fontSize}px`, lineHeight: 1.2 } : {},
+      title,
+      children: title
+    }
+  ) });
+};
 var InlineEditableText = ({
   value,
   onSave,
@@ -53349,7 +53692,7 @@ var KPIDetailView = ({
   const configuredTimezone = timezone || dashboardConfig.dateTimeConfig?.defaultTimezone || "UTC";
   React25.useMemo(() => getCurrentTimeInZone(configuredTimezone), [configuredTimezone]);
   const supervisorEnabled = dashboardConfig?.supervisorConfig?.enabled || false;
-  const { supervisorName } = useLineSupervisor(lineId);
+  const { supervisorName, supervisors } = useLineSupervisor(lineId);
   const { displayNames: workspaceDisplayNames } = useWorkspaceDisplayNames(lineId, companyId);
   React25.useEffect(() => {
     if (urlDate || urlShift !== void 0) {
@@ -53944,10 +54287,20 @@ var KPIDetailView = ({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
             ] })
           ] }),
-          supervisorEnabled && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-gray-500 mt-1 text-center", children: [
+          supervisorEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex justify-center", children: supervisors && supervisors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 justify-center", children: supervisors.map((supervisor) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 bg-gray-50 rounded-full pl-0.5 pr-2 py-0.5 border border-gray-100", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-5 rounded-full overflow-hidden bg-white border border-gray-100 shadow-sm flex-shrink-0", children: supervisor.profilePhotoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: supervisor.profilePhotoUrl,
+                alt: supervisor.displayName,
+                className: "w-full h-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-[8px] font-bold text-gray-500 uppercase", children: getInitials(supervisor.displayName) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-gray-700 truncate max-w-[100px]", children: supervisor.displayName })
+          ] }, supervisor.userId)) }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-gray-500 text-center", children: [
             "Supervisor: ",
             supervisorName || "Unassigned"
-          ] })
+          ] }) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9" })
       ] }) }),
@@ -53966,10 +54319,17 @@ var KPIDetailView = ({
             /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center truncate", children: resolvedLineInfo?.line_name || "Line" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
           ] }),
-          supervisorEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-600 font-medium", children: [
-            "Supervisor: ",
-            supervisorName || "Unassigned"
-          ] })
+          supervisorEnabled && supervisors && supervisors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-6", children: supervisors.map((supervisor) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full overflow-hidden bg-gray-100 border border-gray-200 shadow-sm flex-shrink-0", children: supervisor.profilePhotoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: supervisor.profilePhotoUrl,
+                alt: supervisor.displayName,
+                className: "w-full h-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-[10px] font-bold text-gray-500 uppercase", children: getInitials(supervisor.displayName) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700", children: supervisor.displayName })
+          ] }, supervisor.userId)) }) })
         ] }) })
       ] }) }),
       (activeTab !== "monthly_history" || urlDate || urlShift) && chartMetrics && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -53984,20 +54344,26 @@ var KPIDetailView = ({
           ] }),
           !urlDate && !urlShift ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) }) : urlDate && chartMetrics.date ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-blue-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-blue-700", children: getDaysDifference2(chartMetrics.date) }) }) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50/50 px-4 py-2 rounded-xl border border-blue-100/50 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-6", children: [
           !urlDate && !urlShift && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-700", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: chartMetrics && formatLocalDate(new Date(chartMetrics.date)) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium", children: chartMetrics && formatLocalDate(new Date(chartMetrics.date)) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
           urlDate && chartMetrics.date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference2(chartMetrics.date) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-100 text-blue-700 border border-blue-200 rounded-md", children: getDaysDifference2(chartMetrics.date) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(chartMetrics.shift_id ?? 0) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-medium text-blue-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon(chartMetrics.shift_id ?? 0) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-semibold uppercase tracking-wider", children: [
               getShiftName(chartMetrics.shift_id ?? 0).replace(/ Shift$/i, ""),
               " Shift"
             ] })
@@ -54018,18 +54384,24 @@ var KPIDetailView = ({
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700", children: getShiftName(selectedShiftId) })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: (() => {
-            const monthBounds2 = getMonthKeyBounds(currentYear, currentMonth);
-            const normalizedRange = normalizeDateKeyRange(rangeStart, rangeEnd, monthBounds2.startKey, monthBounds2.endKey);
-            const startDate = new Date(normalizedRange.startKey);
-            const endDate = new Date(normalizedRange.endKey);
-            return `${startDate.toLocaleDateString("en-US", { month: "short", day: "numeric" })} - ${endDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
-          })() }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(selectedShiftId) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: getShiftName(selectedShiftId) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50/50 px-4 py-2 rounded-xl border border-blue-100/50 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium", children: (() => {
+              const monthBounds2 = getMonthKeyBounds(currentYear, currentMonth);
+              const normalizedRange = normalizeDateKeyRange(rangeStart, rangeEnd, monthBounds2.startKey, monthBounds2.endKey);
+              const startDate = new Date(normalizedRange.startKey);
+              const endDate = new Date(normalizedRange.endKey);
+              return `${startDate.toLocaleDateString("en-US", { month: "short", day: "numeric" })} - ${endDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
+            })() })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon(selectedShiftId) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-semibold uppercase tracking-wider", children: [
+              getShiftName(selectedShiftId).replace(/ Shift$/i, ""),
+              " Shift"
+            ] })
           ] })
         ] }) })
       ] }),
@@ -54225,21 +54597,65 @@ var LineCard = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 sm:mb-5 md:mb-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-start gap-2 sm:gap-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 break-words", children: line.line_name }),
-            supervisorEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1.5", children: supervisors && supervisors.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: supervisors.map((supervisor) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 bg-gray-50 rounded-full pl-0.5 pr-2.5 py-0.5 border border-gray-100 hover:border-gray-200 transition-all duration-300 ease-out group/supervisor hover:scale-150 hover:z-50 hover:shadow-lg relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full overflow-hidden bg-white border border-gray-100 shadow-sm flex-shrink-0", children: supervisor.profilePhotoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  src: supervisor.profilePhotoUrl,
-                  alt: supervisor.displayName,
-                  className: "w-full h-full object-cover"
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-[9px] font-bold text-gray-500 uppercase", children: getInitials(supervisor.displayName) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700 truncate max-w-[120px]", children: supervisor.displayName })
-            ] }, supervisor.userId)) }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
-              "Supervisor: ",
-              supervisorName || "Unassigned"
-            ] }) })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              FittingTitle,
+              {
+                title: line.line_name,
+                className: "text-[10px] sm:text-xs md:text-sm"
+              }
+            ),
+            supervisorEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1.5", children: "Assigned To" }),
+              supervisors && supervisors.length > 0 ? supervisors.length === 1 ? (
+                // Single supervisor - just avatar with tooltip
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-12 h-12 rounded-full bg-white border border-gray-100 shadow-sm flex-shrink-0 group/avatar hover:scale-110 transition-transform", children: [
+                  supervisors[0].profilePhotoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: supervisors[0].profilePhotoUrl,
+                      alt: supervisors[0].displayName,
+                      className: "w-full h-full object-cover rounded-full"
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-base font-bold text-gray-500 uppercase rounded-full", children: getInitials(supervisors[0].displayName) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-[10px] font-medium rounded shadow-lg opacity-0 group-hover/avatar:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-20", children: [
+                    supervisors[0].displayName,
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 -mt-[1px] border-4 border-transparent border-t-gray-900" })
+                  ] })
+                ] })
+              ) : (
+                // Multiple supervisors - overlapping avatars
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex -space-x-4 py-1", children: [
+                  supervisors.slice(0, 3).map((supervisor) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: "relative inline-block w-12 h-12 rounded-full ring-2 ring-white bg-white shadow-sm z-0 hover:z-10 transition-all hover:scale-110 group/avatar",
+                      children: [
+                        supervisor.profilePhotoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "img",
+                          {
+                            src: supervisor.profilePhotoUrl,
+                            alt: supervisor.displayName,
+                            className: "w-full h-full object-cover rounded-full"
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-100 text-sm font-bold text-gray-600 uppercase rounded-full", children: getInitials(supervisor.displayName) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-[10px] font-medium rounded shadow-lg opacity-0 group-hover/avatar:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-20", children: [
+                          supervisor.displayName,
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 -mt-[1px] border-4 border-transparent border-t-gray-900" })
+                        ] })
+                      ]
+                    },
+                    supervisor.userId
+                  )),
+                  supervisors.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex w-12 h-12 rounded-full ring-2 ring-white bg-gray-100 items-center justify-center text-sm font-medium text-gray-600 z-0", children: [
+                    "+",
+                    supervisors.length - 3
+                  ] })
+                ] })
+              ) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", children: [
+                "Supervisor: ",
+                supervisorName || "Unassigned"
+              ] })
+            ] })
           ] }),
           kpis && isOnTrack !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs font-medium flex-shrink-0 ${isOnTrack ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-red-100 text-red-700 border border-red-200"}`, style: { minWidth: "fit-content" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-2 h-2 rounded-full ${isOnTrack ? "bg-emerald-500" : "bg-red-500"} animate-pulse` }),
@@ -54261,7 +54677,7 @@ var LineCard = ({
           ] })
         ] }),
         error && !kpis && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Unable to load metrics" }) }),
-        kpis && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-5", children: [
+        kpis && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-5 pb-8 sm:pb-10", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Efficiency" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between", children: [
@@ -54298,16 +54714,6 @@ var LineCard = ({
                 }
               }
             ) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Underperforming Workspaces" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-xl sm:text-2xl font-semibold ${kpis.underperformingWorkers.current === 0 ? "text-emerald-600" : kpis.underperformingWorkers.current <= 2 ? "text-yellow-600" : "text-red-600"}`, children: kpis.underperformingWorkers.current }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
-                "of ",
-                kpis.underperformingWorkers.total
-              ] })
-            ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-3 right-3 sm:bottom-4 sm:right-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 sm:p-2.5 rounded-full bg-gray-50 group-hover:bg-blue-50 transition-colors shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors" }) }) })
@@ -54369,7 +54775,7 @@ var KPIsOverviewView = ({
     return map;
   }, [lineMetrics]);
   const visibleLineIds = React25__namespace.default.useMemo(() => lines.map((l) => l.id), [lines]);
-  const { supervisorNamesByLineId, supervisorsByLineId } = useSupervisorsByLineIds(visibleLineIds, {
+  const { supervisorNamesByLineId, supervisorsByLineId, allSupervisorsMap } = useSupervisorsByLineIds(visibleLineIds, {
     enabled: supervisorEnabled && visibleLineIds.length > 0
   });
   React25.useEffect(() => {
@@ -54441,17 +54847,34 @@ var KPIsOverviewView = ({
     return `${startLabel} - ${endLabel}`;
   };
   const buildTopPerformerDisplay = (record) => {
-    const name = record.recipient_name || "Supervisor";
+    let displayName = record.recipient_name || "Supervisor";
+    if (record.first_name) {
+      displayName = record.last_name ? `${record.first_name} ${record.last_name}` : record.first_name;
+    } else if (record.recipient_user_id && allSupervisorsMap?.has(record.recipient_user_id)) {
+      const supervisor = allSupervisorsMap.get(record.recipient_user_id);
+      if (supervisor) {
+        displayName = supervisor.displayName;
+      }
+    } else if (displayName.includes(".") || displayName.includes("@")) {
+      const parts = displayName.split(/[.@]/);
+      if (parts.length >= 2) {
+        const firstName = parts[0].charAt(0).toUpperCase() + parts[0].slice(1);
+        const lastName = parts[1].charAt(0).toUpperCase() + parts[1].slice(1);
+        displayName = `${firstName} ${lastName}`;
+      } else if (parts.length === 1) {
+        displayName = parts[0].charAt(0).toUpperCase() + parts[0].slice(1);
+      }
+    }
     const efficiencyValue = typeof record.avg_efficiency === "number" ? record.avg_efficiency : Number.parseFloat(String(record.avg_efficiency));
     const efficiency = Number.isFinite(efficiencyValue) ? efficiencyValue : null;
     return {
-      name,
+      name: displayName,
       role: "Sup.",
       unit: record.unit || "Line",
       periodLabel: formatTopPerformerWeek(record.period_start, record.period_end),
       efficiency,
       imageUrl: record.profile_photo_url || null,
-      initials: getInitials(name)
+      initials: getInitials(displayName)
     };
   };
   const handleLineClick = (line, kpis) => {
@@ -54493,8 +54916,8 @@ var KPIsOverviewView = ({
   const currentShiftDetails = getCurrentShift(configuredTimezone, shiftConfig);
   const shiftName = (currentShiftDetails.shiftName || "Day").replace(/ Shift$/i, "");
   const showTopPerformerImage = Boolean(topPerformer.imageUrl) && !topPerformerImageError;
-  const hasTopPerformerEfficiency = typeof topPerformer.efficiency === "number" && Number.isFinite(topPerformer.efficiency);
-  const topPerformerEfficiencyLabel = topPerformerLoading ? "--" : typeof topPerformer.efficiency === "number" && Number.isFinite(topPerformer.efficiency) ? `${topPerformer.efficiency.toFixed(1)}%` : "--";
+  typeof topPerformer.efficiency === "number" && Number.isFinite(topPerformer.efficiency);
+  topPerformerLoading ? "--" : typeof topPerformer.efficiency === "number" && Number.isFinite(topPerformer.efficiency) ? `${topPerformer.efficiency.toFixed(1)}%` : "--";
   const getShiftIcon = (shiftId) => {
     const shiftNameLower = shiftName.toLowerCase();
     if (shiftNameLower.includes("day") || shiftNameLower.includes("morning") || shiftId === 0) {
@@ -54523,7 +54946,7 @@ var KPIsOverviewView = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Shop-floor overview" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Overview" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-emerald-500 animate-pulse ring-2 ring-emerald-500/20" })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12" })
@@ -54539,7 +54962,7 @@ var KPIsOverviewView = ({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Overview" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
           ] }) })
         ] }) })
@@ -54559,7 +54982,7 @@ var KPIsOverviewView = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Shop-floor overview" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Overview" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-emerald-500 animate-pulse ring-2 ring-emerald-500/20" })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12" })
@@ -54575,7 +54998,7 @@ var KPIsOverviewView = ({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Overview" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
           ] }) })
         ] }) })
@@ -54598,7 +55021,7 @@ var KPIsOverviewView = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Shop-floor overview" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Overview" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-emerald-500 animate-pulse ring-2 ring-emerald-500/20" })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12" })
@@ -54611,43 +55034,46 @@ var KPIsOverviewView = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 bg-white shadow-sm hover:shadow-md transition-all duration-300 ease-out hover:scale-[1.02] relative rounded-full pl-1.5 pr-4 py-1.5 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full border border-gray-100 overflow-hidden bg-gray-50", children: showTopPerformerImage ? /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 bg-white shadow-md hover:shadow-lg transition-all duration-300 ease-out hover:scale-[1.01] relative rounded-2xl border border-amber-100 pl-2 pr-4 py-1.5 flex items-center justify-between group", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full border-2 border-amber-100 overflow-hidden bg-amber-50 shadow-sm transition-transform group-hover:scale-105", children: showTopPerformerImage ? /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: topPerformer.imageUrl || "",
+              alt: "Top Performer",
+              className: "w-full h-full object-cover",
+              onError: () => setTopPerformerImageError(true)
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-amber-50 text-sm font-bold text-amber-600", children: topPerformer.initials }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 leading-none mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-amber-600 uppercase tracking-widest", children: "Performer of the week" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1 h-1 bg-amber-200 rounded-full" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold text-gray-400", children: topPerformerLoading ? "Loading" : topPerformer.periodLabel })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 leading-none", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[140px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                FittingTitle,
                 {
-                  src: topPerformer.imageUrl || "",
-                  alt: "Top Performer",
-                  className: "w-full h-full object-cover",
-                  onError: () => setTopPerformerImageError(true)
+                  title: topPerformer.name,
+                  as: "span",
+                  className: "text-sm text-gray-900 font-bold"
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-[11px] font-semibold text-gray-600", children: topPerformer.initials }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-1 -right-1 bg-white rounded-full p-1 shadow-sm border border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trophy, { className: "w-3 h-3 text-amber-500 fill-amber-500" }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 leading-none mb-0.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-amber-600 uppercase tracking-wide", children: "Top Performer" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-0.5 h-0.5 bg-gray-300 rounded-full" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-gray-500", children: topPerformerLoading ? "Loading" : topPerformer.periodLabel })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 leading-none", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-gray-900", children: topPerformer.unit }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-px h-2.5 bg-gray-200" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-gray-500", children: [
-                  topPerformer.role,
-                  " ",
-                  topPerformer.name
-                ] })
-              ] })
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-px h-3 bg-gray-200 flex-shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                FittingTitle,
+                {
+                  title: topPerformer.unit,
+                  className: "text-xs font-medium text-gray-500"
+                }
+              ) })
             ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-gray-700", children: topPerformerEfficiencyLabel })
-        ] })
+          ] })
+        ] }) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:block", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative mb-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center relative mb-4 h-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
             BackButtonMinimal,
             {
               onClick: handleBackClick,
@@ -54656,45 +55082,61 @@ var KPIsOverviewView = ({
               "aria-label": "Navigate back to previous page"
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 z-10 flex items-center gap-1.5 sm:gap-2 lg:gap-3 cursor-default group pr-2 sm:pr-4 xl:pr-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 sm:w-8 sm:h-8 md:w-9 md:h-9 lg:w-10 lg:h-10 xl:w-12 xl:h-12 rounded-full border border-gray-100 overflow-hidden shadow-sm transition-all duration-300", children: showTopPerformerImage ? /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  src: topPerformer.imageUrl || "",
-                  alt: "Top Performer",
-                  className: "w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-105",
-                  onError: () => setTopPerformerImageError(true)
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-[10px] sm:text-xs lg:text-sm font-semibold text-gray-600", children: topPerformer.initials }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-0.5 sm:-bottom-1 -right-0.5 sm:-right-1 bg-white rounded-full p-0.5 sm:p-1 shadow-sm border border-gray-100 flex items-center justify-center ring-2 ring-white", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trophy, { className: "w-2 h-2 sm:w-2.5 sm:h-2.5 lg:w-3 lg:h-3 xl:w-3.5 xl:h-3.5 text-amber-500 fill-amber-500 transition-all duration-300" }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center z-10 gap-0.5 min-w-0", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5 lg:gap-2 leading-none", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px] sm:text-[9px] lg:text-[10px] font-bold text-amber-600 uppercase tracking-wide sm:tracking-widest transition-all duration-300 truncate", children: "Top Performer" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-0.5 h-0.5 bg-gray-300 rounded-full flex-shrink-0" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px] sm:text-[9px] lg:text-[10px] font-medium text-gray-500 transition-all duration-300 truncate", children: topPerformerLoading ? "Loading" : topPerformer.periodLabel })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl md:text-3xl lg:text-4xl font-semibold text-gray-900 tracking-tight", children: "Overview" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2.5 w-2.5 rounded-full bg-emerald-500 animate-pulse ring-4 ring-emerald-500/10 flex-shrink-0" })
+          ] }),
+          !topPerformerLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-2xl border border-amber-200 shadow-md pl-1.5 pr-4 py-1.5 flex items-center gap-4 transition-all hover:shadow-lg hover:border-amber-300 group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full ring-2 ring-amber-100 overflow-hidden bg-amber-50 shadow-inner flex-shrink-0 transition-transform group-hover:scale-105", children: showTopPerformerImage ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: topPerformer.imageUrl || "",
+                alt: topPerformer.name,
+                className: "w-full h-full object-cover",
+                onError: () => setTopPerformerImageError(true)
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center text-sm font-bold text-amber-600 uppercase", children: topPerformer.initials }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[10px] leading-tight mb-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-amber-600 uppercase tracking-widest", children: "Performer of the week" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-amber-200 opacity-50", children: "\u2022" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-gray-400", children: topPerformer.periodLabel })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5 lg:gap-2 xl:gap-3 mt-0.5 transition-all duration-300 min-w-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm lg:text-base font-semibold text-gray-900 tracking-tight transition-all duration-300 truncate", children: topPerformer.unit }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-px h-2.5 sm:h-3 lg:h-3.5 bg-gray-200 flex-shrink-0" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] sm:text-[10px] lg:text-xs font-bold text-gray-700 transition-all duration-300 truncate whitespace-nowrap", children: hasTopPerformerEfficiency ? `${topPerformer.efficiency?.toFixed(1)}% Eff.` : "TBD" })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 leading-tight", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[140px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  FittingTitle,
+                  {
+                    title: topPerformer.name,
+                    as: "span",
+                    className: "text-sm text-gray-900 font-bold"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-px h-3.5 bg-gray-200 flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[150px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  FittingTitle,
+                  {
+                    title: topPerformer.unit,
+                    className: "text-xs font-medium text-gray-500"
+                  }
+                ) })
               ] })
             ] })
-          ] })
+          ] }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(currentShiftDetails.shiftId) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-medium text-blue-600", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-blue-50/50 px-4 py-2 rounded-xl border border-blue-100/50 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-700", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: formatLocalDate2(/* @__PURE__ */ new Date()) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon(currentShiftDetails.shiftId) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold uppercase tracking-wider", children: [
               shiftName,
               " Shift"
             ] })
@@ -54742,16 +55184,22 @@ var HeaderRibbon = React25.memo(({
       ] }),
       showTimer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50/50 px-4 py-2 rounded-xl border border-blue-100/50 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-6", children: [
       showTimer && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-700", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: currentDate }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: shiftIcon }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-medium text-blue-600", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: currentDate })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: shiftIcon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-semibold uppercase tracking-wider", children: [
           shiftName.replace(/ Shift$/i, ""),
           " Shift"
         ] })
@@ -58650,14 +59098,6 @@ var getInitialTab = (sourceType, defaultTab, fromMonthly, urlDate) => {
   }
   return "overview";
 };
-var getInitials3 = (name) => {
-  if (!name) return "??";
-  const parts = name.trim().split(" ");
-  if (parts.length >= 2) {
-    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
-  }
-  return name.substring(0, 2).toUpperCase();
-};
 var chartCardVariants = {
   initial: { opacity: 0, y: 10 },
   animate: {
@@ -58739,7 +59179,7 @@ var WorkspaceDetailView = ({
   const prewarmedClipsRef = React25.useRef(/* @__PURE__ */ new Set());
   const prewarmInFlightRef = React25.useRef(/* @__PURE__ */ new Set());
   const isClipsEnabled = dashboardConfig?.clipsConfig?.enabled ?? true;
-  const supervisorEnabled = dashboardConfig?.supervisorConfig?.enabled || false;
+  dashboardConfig?.supervisorConfig?.enabled || false;
   const effectiveLineId = lineId || selectedLineId;
   const { shiftConfig, isLoading: isShiftConfigLoading, isFromDatabase: isShiftConfigFromDatabase } = useDynamicShiftConfig(effectiveLineId);
   const currentShiftDetails = React25.useMemo(() => {
@@ -59371,29 +59811,16 @@ var WorkspaceDetailView = ({
                 "aria-label": "Navigate back to previous page"
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: formattedWorkspaceName }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
-                  isLive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
-                    "relative inline-flex rounded-full h-2.5 w-2.5",
-                    isLive ? "bg-green-500" : "bg-red-500"
-                  ) })
-                ] })
-              ] }),
-              supervisorEnabled && supervisors && supervisors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 justify-center", children: supervisors.map((supervisor) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 bg-gray-50 rounded-full pl-0.5 pr-2.5 py-0.5 border border-gray-100 hover:border-gray-200 transition-all duration-300 ease-out group/supervisor hover:scale-150 hover:z-50 hover:shadow-lg relative", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full overflow-hidden bg-white border border-gray-100 shadow-sm flex-shrink-0", children: supervisor.profilePhotoUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: supervisor.profilePhotoUrl,
-                    alt: supervisor.displayName,
-                    className: "w-full h-full object-cover"
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-50 text-[9px] font-bold text-gray-500 uppercase", children: getInitials3(supervisor.displayName) }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-700 truncate max-w-[120px]", children: supervisor.displayName })
-              ] }, supervisor.userId)) })
-            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: formattedWorkspaceName }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
+                isLive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
+                  "relative inline-flex rounded-full h-2.5 w-2.5",
+                  isLive ? "bg-green-500" : "bg-red-500"
+                ) })
+              ] })
+            ] }) }) }),
             activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 flex flex-col items-end gap-1", children: workspaceHealth && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [
               "Last update: ",
               workspaceHealth.timeSinceLastUpdate
@@ -59425,28 +59852,32 @@ var WorkspaceDetailView = ({
                 })() })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: (() => {
-                const monthBounds2 = getMonthKeyBounds(selectedYear, selectedMonth);
-                const normalizedRange = normalizeDateKeyRange(rangeStart, rangeEnd, monthBounds2.startKey, monthBounds2.endKey);
-                const startDate = new Date(normalizedRange.startKey);
-                const endDate = new Date(normalizedRange.endKey);
-                const isFullMonth = normalizedRange.startKey === monthBounds2.startKey && normalizedRange.endKey === monthBounds2.endKey;
-                if (isFullMonth) {
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50/50 px-4 py-2 rounded-xl border border-blue-100/50 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-6", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium", children: (() => {
+                  const monthBounds2 = getMonthKeyBounds(selectedYear, selectedMonth);
+                  const normalizedRange = normalizeDateKeyRange(rangeStart, rangeEnd, monthBounds2.startKey, monthBounds2.endKey);
+                  const startDate = new Date(normalizedRange.startKey);
+                  const endDate = new Date(normalizedRange.endKey);
+                  const isFullMonth = normalizedRange.startKey === monthBounds2.startKey && normalizedRange.endKey === monthBounds2.endKey;
+                  if (isFullMonth) {
+                    return `${startDate.toLocaleDateString("en-US", { month: "short", day: "numeric" })} - ${endDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
+                  }
                   return `${startDate.toLocaleDateString("en-US", { month: "short", day: "numeric" })} - ${endDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
-                }
-                return `${startDate.toLocaleDateString("en-US", { month: "short", day: "numeric" })} - ${endDate.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}`;
-              })() }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: (() => {
+                })() })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: (() => {
                   const shift2 = shiftConfig?.shifts?.find((s) => s.shiftId === selectedShift);
                   const shiftName = shift2?.shiftName || (selectedShift === 0 ? "Day Shift" : "Night Shift");
                   return getShiftIcon(shiftName);
                 })() }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: (() => {
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-semibold uppercase tracking-wider", children: (() => {
                   const shift2 = shiftConfig?.shifts?.find((s) => s.shiftId === selectedShift);
-                  return shift2?.shiftName || (selectedShift === 0 ? "Day Shift" : "Night Shift");
+                  const name = shift2?.shiftName || (selectedShift === 0 ? "Day Shift" : "Night Shift");
+                  return name.replace(/ Shift$/i, "") + " Shift";
                 })() })
               ] })
             ] }) })
@@ -59459,28 +59890,37 @@ var WorkspaceDetailView = ({
               ] }),
               !date && !shift && !usingFallbackData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }) }) : date ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-blue-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-blue-700", children: getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00") }) }) : usingFallbackData ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-amber-100 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-amber-700", children: getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00") }) }) : null
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block mt-3 bg-blue-50/50 px-4 py-2 rounded-xl border border-blue-100/50 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-6", children: [
               !date && !shift && !usingFallbackData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-700", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold tabular-nums", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 opacity-70", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium", children: formatISTDate2(new Date(workspace.date)) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" }),
               date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00") }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-100 text-blue-700 border border-blue-200 rounded-md", children: getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00") }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" })
               ] }),
               !date && !shift && usingFallbackData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-2 py-1 text-xs font-medium bg-amber-100 text-amber-700 rounded-md", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-2 py-1 text-xs font-medium bg-amber-50 text-amber-700 border border-amber-200 rounded-md", children: [
                   "Latest available data (",
                   getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00"),
                   ")"
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-200" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(workspace.shift_type) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: workspace.shift_type })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-blue-600", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "opacity-70", children: getShiftIcon(workspace.shift_type) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm md:text-base font-semibold uppercase tracking-wider", children: [
+                  workspace.shift_type.replace(/ Shift$/i, ""),
+                  " Shift"
+                ] })
               ] })
             ] }) })
           ] }) }),
@@ -66179,6 +66619,7 @@ exports.FileManagerFilters = FileManagerFilters;
 exports.FilterDialogTrigger = FilterDialogTrigger;
 exports.FirstTimeLoginDebug = FirstTimeLoginDebug;
 exports.FirstTimeLoginHandler = FirstTimeLoginHandler;
+exports.FittingTitle = FittingTitle;
 exports.GaugeChart = GaugeChart;
 exports.GridComponentsPlaceholder = GridComponentsPlaceholder;
 exports.HamburgerButton = HamburgerButton;
@@ -66567,6 +67008,7 @@ exports.useWorkspaceDisplayName = useWorkspaceDisplayName;
 exports.useWorkspaceDisplayNames = useWorkspaceDisplayNames;
 exports.useWorkspaceDisplayNamesMap = useWorkspaceDisplayNamesMap;
 exports.useWorkspaceHealthById = useWorkspaceHealthById;
+exports.useWorkspaceHealthLastSeen = useWorkspaceHealthLastSeen;
 exports.useWorkspaceHealthStatus = useWorkspaceHealthStatus;
 exports.useWorkspaceMetrics = useWorkspaceMetrics;
 exports.useWorkspaceNavigation = useWorkspaceNavigation;