@optifye/dashboard-core 4.2.7 → 4.2.9

package/dist/index.js

@@ -7,8 +7,8 @@ var dateFnsTz = require('date-fns-tz');
 var dateFns = require('date-fns');
 var mixpanel = require('mixpanel-browser');
 var supabaseJs = require('@supabase/supabase-js');
-var useSWR = require('swr');
 var Hls2 = require('hls.js');
+var useSWR = require('swr');
 var motionUtils = require('motion-utils');
 var motionDom = require('motion-dom');
 var recharts = require('recharts');
@@ -46,8 +46,8 @@ function _interopNamespace(e) {
 
 var React14__namespace = /*#__PURE__*/_interopNamespace(React14);
 var mixpanel__default = /*#__PURE__*/_interopDefault(mixpanel);
-var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
 var Hls2__default = /*#__PURE__*/_interopDefault(Hls2);
+var useSWR__default = /*#__PURE__*/_interopDefault(useSWR);
 var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
 var jsPDF__default = /*#__PURE__*/_interopDefault(jsPDF);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
@@ -154,6 +154,12 @@ var DEFAULT_ANALYTICS_CONFIG = {
 var DEFAULT_AUTH_CONFIG = {
   // Defaults related to auth providers, redirects etc.
 };
+var DEFAULT_VIDEO_CONFIG = {
+  canvasConfig: {
+    fps: 30,
+    useRAF: true
+  }
+};
 var LINE_1_UUID = "910a224b-0abc-459a-babb-4c899824cfe7";
 var DEFAULT_CONFIG = {
   apiBaseUrl: void 0,
@@ -167,7 +173,8 @@ var DEFAULT_CONFIG = {
   // Add entity config here
   shiftConfig: DEFAULT_SHIFT_CONFIG,
   workspaceConfig: DEFAULT_WORKSPACE_CONFIG,
-  endpoints: DEFAULT_ENDPOINTS_CONFIG
+  endpoints: DEFAULT_ENDPOINTS_CONFIG,
+  videoConfig: DEFAULT_VIDEO_CONFIG
 };
 
 // src/lib/utils/config.ts
@@ -299,6 +306,10 @@ function useCustomConfig() {
   const { customConfig } = useDashboardConfig();
   return customConfig ?? {};
 }
+function useVideoConfig() {
+  const { videoConfig } = useDashboardConfig();
+  return videoConfig ?? DEFAULT_VIDEO_CONFIG;
+}
 
 // src/lib/internal/supabaseClientInstance.ts
 var supabaseInstance = null;
@@ -1009,7 +1020,7 @@ var dashboardService = {
     const formattedStartDate = formatDate(startDate);
     const formattedEndDate = formatDate(endDate);
     try {
-      const { data, error } = await supabase.from(metricsTable).select("date, shift_id, efficiency, total_output, avg_cycle_time, idle_time, ideal_output, avg_pph, pph_threshold, workspace_rank").eq("workspace_id", workspaceUuid).gte("date", formattedStartDate).lte("date", formattedEndDate).order("date", { ascending: true }).order("shift_id", { ascending: true });
+      const { data, error } = await supabase.from(metricsTable).select("date, shift_id, efficiency, total_output, avg_cycle_time, ideal_output, avg_pph, pph_threshold, workspace_rank").eq("workspace_id", workspaceUuid).gte("date", formattedStartDate).lte("date", formattedEndDate).order("date", { ascending: true }).order("shift_id", { ascending: true });
       if (error) throw error;
       if (!data) return [];
       const transformedData = data.map((item) => ({
@@ -1022,8 +1033,7 @@ var dashboardService = {
         ideal_output: item.ideal_output || 0,
         avg_pph: item.avg_pph || 0,
         pph_threshold: item.pph_threshold || 0,
-        workspace_rank: item.workspace_rank || 0,
-        idle_time: item.idle_time || 0
+        workspace_rank: item.workspace_rank || 0
       }));
       return transformedData;
     } catch (err) {
@@ -4247,6 +4257,351 @@ var useWorkspaceOperators = (workspaceId, options) => {
     refetch: fetchData
   };
 };
+
+// src/lib/utils/dashboardReload.ts
+var createThrottledReload = (interval = 5e3) => {
+  let last = 0;
+  let queued = false;
+  const doReload = () => {
+    if (typeof window !== "undefined") {
+      window.location.reload();
+    }
+  };
+  return () => {
+    const now2 = Date.now();
+    if (now2 - last >= interval) {
+      last = now2;
+      doReload();
+    } else if (!queued) {
+      queued = true;
+      setTimeout(() => {
+        queued = false;
+        last = Date.now();
+        doReload();
+      }, interval - (now2 - last));
+    }
+  };
+};
+var throttledReloadDashboard = createThrottledReload(5e3);
+
+// src/lib/hooks/useHlsStream.ts
+var HLS_CONFIG = {
+  maxBufferLength: 8,
+  maxMaxBufferLength: 15,
+  lowLatencyMode: false,
+  enableWorker: true,
+  // Retry + timeout tuned for quick recovery
+  manifestLoadingMaxRetry: 4,
+  levelLoadingMaxRetry: 3,
+  fragLoadingMaxRetry: 4,
+  manifestLoadingRetryDelay: 500,
+  levelLoadingRetryDelay: 500,
+  fragLoadingRetryDelay: 500,
+  manifestLoadingTimeOut: 1e4,
+  levelLoadingTimeOut: 8e3,
+  fragLoadingTimeOut: 1e4,
+  liveSyncDurationCount: 2
+  // Follow live edge aggressively
+};
+function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
+  const [restartKey, setRestartKey] = React14.useState(0);
+  const hlsRef = React14.useRef(null);
+  const stallCheckIntervalRef = React14.useRef(null);
+  const noProgressTimerRef = React14.useRef(null);
+  const lastTimeUpdateRef = React14.useRef(0);
+  const softRestartCountRef = React14.useRef(0);
+  const isNativeHlsRef = React14.useRef(false);
+  const waitingTimerRef = React14.useRef(null);
+  const cleanup = () => {
+    if (stallCheckIntervalRef.current) {
+      clearInterval(stallCheckIntervalRef.current);
+      stallCheckIntervalRef.current = null;
+    }
+    if (noProgressTimerRef.current) {
+      clearTimeout(noProgressTimerRef.current);
+      noProgressTimerRef.current = null;
+    }
+    if (waitingTimerRef.current) {
+      clearTimeout(waitingTimerRef.current);
+      waitingTimerRef.current = null;
+    }
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    const video = videoRef.current;
+    if (video) {
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+      video.removeEventListener("waiting", handleWaiting);
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.removeEventListener("error", handleNativeError);
+    }
+    lastTimeUpdateRef.current = 0;
+    softRestartCountRef.current = 0;
+  };
+  const seekToLiveEdge = () => {
+    const hls = hlsRef.current;
+    const video = videoRef.current;
+    if (!hls || !video) return;
+    if (hls.liveSyncPosition !== null && hls.liveSyncPosition !== void 0) {
+      video.currentTime = hls.liveSyncPosition;
+    } else if (hls.levels?.[hls.currentLevel]?.details) {
+      const levelDetails = hls.levels[hls.currentLevel].details;
+      if (levelDetails && levelDetails.edge !== void 0) {
+        video.currentTime = Math.max(0, levelDetails.edge - 5);
+      }
+    }
+  };
+  const softRestart = (reason) => {
+    console.warn(`[HLS] Soft restart: ${reason}`);
+    const hls = hlsRef.current;
+    if (!hls) return;
+    try {
+      hls.stopLoad();
+      hls.startLoad(-1);
+      seekToLiveEdge();
+      softRestartCountRef.current++;
+      if (softRestartCountRef.current >= 5) {
+        hardRestart(`${reason} (escalated after ${softRestartCountRef.current} soft restarts)`);
+      }
+    } catch (error) {
+      console.error("[HLS] Soft restart failed:", error);
+      hardRestart(`${reason} (soft restart error)`);
+    }
+  };
+  const hardRestart = (reason) => {
+    console.warn(`[HLS] Hard restart: ${reason}`);
+    cleanup();
+    setRestartKey((k) => k + 1);
+    softRestartCountRef.current = 0;
+    if (reason.includes("hard restart") || reason.includes("native video error")) {
+      if (onFatalError) {
+        onFatalError();
+      } else {
+        throttledReloadDashboard();
+      }
+    }
+  };
+  const handleWaiting = () => {
+    if (isNativeHlsRef.current) return;
+    console.log("[HLS] Video waiting (buffer underrun)");
+    if (waitingTimerRef.current) {
+      clearTimeout(waitingTimerRef.current);
+    }
+    waitingTimerRef.current = setTimeout(() => {
+      const video = videoRef.current;
+      if (video && video.readyState < 3) {
+        softRestart("waiting timeout");
+      }
+    }, 1e4);
+  };
+  const handleTimeUpdate = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    lastTimeUpdateRef.current = video.currentTime;
+    if (waitingTimerRef.current) {
+      clearTimeout(waitingTimerRef.current);
+      waitingTimerRef.current = null;
+    }
+  };
+  const handleNativeError = () => {
+    console.error("[HLS] Native video error");
+    hardRestart("native video error");
+  };
+  const startStallDetection = () => {
+    if (isNativeHlsRef.current) return;
+    stallCheckIntervalRef.current = setInterval(() => {
+      const video = videoRef.current;
+      if (!video || video.paused || video.ended) return;
+      const currentTime = video.currentTime;
+      const lastTime = lastTimeUpdateRef.current;
+      if (Math.abs(currentTime - lastTime) < 0.1 && video.readyState >= 2) {
+        console.warn("[HLS] Playback stall detected");
+        if (!noProgressTimerRef.current) {
+          noProgressTimerRef.current = setTimeout(() => {
+            softRestart("playback stall");
+            noProgressTimerRef.current = null;
+          }, 8e3);
+        }
+      } else {
+        if (noProgressTimerRef.current) {
+          clearTimeout(noProgressTimerRef.current);
+          noProgressTimerRef.current = null;
+        }
+      }
+    }, 7e3);
+  };
+  React14.useEffect(() => {
+    if (!src || !shouldPlay) {
+      cleanup();
+      return;
+    }
+    const video = videoRef.current;
+    if (!video) return;
+    isNativeHlsRef.current = video.canPlayType("application/vnd.apple.mpegurl") === "probably";
+    if (Hls2__default.default.isSupported() && !isNativeHlsRef.current) {
+      const hls = new Hls2__default.default(HLS_CONFIG);
+      hlsRef.current = hls;
+      hls.attachMedia(video);
+      hls.loadSource(src);
+      hls.on(Hls2__default.default.Events.ERROR, (_, data) => {
+        if (!data.fatal) return;
+        console.error("[HLS] Fatal error:", data.type, data.details);
+        if (data.response?.code === 404) {
+          hardRestart("404 hard restart");
+          return;
+        }
+        switch (data.type) {
+          case Hls2__default.default.ErrorTypes.NETWORK_ERROR:
+          case Hls2__default.default.ErrorTypes.MEDIA_ERROR:
+            softRestart(`${data.type}: ${data.details}`);
+            break;
+          default:
+            hardRestart(`Fatal ${data.type}: ${data.details}`);
+            break;
+        }
+      });
+      hls.on(Hls2__default.default.Events.MANIFEST_PARSED, () => {
+        video.play().catch((err) => {
+          console.error("[HLS] Play failed:", err);
+        });
+      });
+      video.addEventListener("waiting", handleWaiting);
+      video.addEventListener("timeupdate", handleTimeUpdate);
+      startStallDetection();
+    } else if (isNativeHlsRef.current) {
+      console.log("[HLS] Using native HLS");
+      video.src = src;
+      video.addEventListener("error", handleNativeError);
+      video.play().catch((err) => {
+        console.error("[HLS] Native play failed:", err);
+      });
+    } else {
+      console.error("[HLS] HLS not supported");
+    }
+    return cleanup;
+  }, [src, shouldPlay, restartKey, onFatalError]);
+  return {
+    restartKey,
+    isNativeHls: isNativeHlsRef.current
+  };
+}
+function useHlsStreamWithCropping(videoRef, canvasRef, options) {
+  const { src, shouldPlay, cropping, canvasFps = 30, useRAF = true, onFatalError } = options;
+  const animationFrameRef = React14.useRef(null);
+  const intervalRef = React14.useRef(null);
+  const isDrawingRef = React14.useRef(false);
+  const hlsState = useHlsStream(videoRef, { src, shouldPlay, onFatalError });
+  const calculateCropRect = React14.useCallback((video, cropping2) => {
+    const videoWidth = video.videoWidth;
+    const videoHeight = video.videoHeight;
+    const sx = cropping2.x / 100 * videoWidth;
+    const sy = cropping2.y / 100 * videoHeight;
+    const sw = cropping2.width / 100 * videoWidth;
+    const sh = cropping2.height / 100 * videoHeight;
+    return { sx, sy, sw, sh };
+  }, []);
+  const drawFrame = React14.useCallback(() => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas || !cropping) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    if (video.readyState < 2) return;
+    try {
+      const videoWidth = video.videoWidth;
+      const videoHeight = video.videoHeight;
+      if (!videoWidth || !videoHeight) return;
+      const { sx, sy, sw, sh } = calculateCropRect(video, cropping);
+      const canvasContainer = canvas.parentElement;
+      if (canvasContainer) {
+        const containerWidth = canvasContainer.clientWidth;
+        const containerHeight = canvasContainer.clientHeight;
+        if (canvas.width !== containerWidth || canvas.height !== containerHeight) {
+          canvas.width = containerWidth;
+          canvas.height = containerHeight;
+        }
+      }
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(
+        video,
+        sx,
+        sy,
+        sw,
+        sh,
+        // Source rectangle (cropped portion)
+        0,
+        0,
+        canvas.width,
+        canvas.height
+        // Destination rectangle (full canvas)
+      );
+    } catch (err) {
+      console.warn("Canvas drawing error:", err);
+    }
+  }, [videoRef, canvasRef, cropping, calculateCropRect]);
+  const startCanvasRendering = React14.useCallback(() => {
+    if (isDrawingRef.current) return;
+    isDrawingRef.current = true;
+    if (useRAF) {
+      const animate = () => {
+        drawFrame();
+        animationFrameRef.current = requestAnimationFrame(animate);
+      };
+      animate();
+    } else {
+      const frameInterval = 1e3 / canvasFps;
+      intervalRef.current = setInterval(drawFrame, frameInterval);
+    }
+  }, [drawFrame, canvasFps, useRAF]);
+  const stopCanvasRendering = React14.useCallback(() => {
+    isDrawingRef.current = false;
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  React14.useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !cropping || !shouldPlay) {
+      stopCanvasRendering();
+      return;
+    }
+    const handlePlay = () => {
+      if (cropping) {
+        startCanvasRendering();
+      }
+    };
+    const handlePause = () => {
+      stopCanvasRendering();
+    };
+    const handleEnded = () => {
+      stopCanvasRendering();
+    };
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    video.addEventListener("ended", handleEnded);
+    if (!video.paused && video.readyState >= 2) {
+      startCanvasRendering();
+    }
+    return () => {
+      stopCanvasRendering();
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      video.removeEventListener("ended", handleEnded);
+    };
+  }, [videoRef, cropping, shouldPlay, startCanvasRendering, stopCanvasRendering]);
+  return {
+    ...hlsState,
+    isCanvasRendering: isDrawingRef.current
+  };
+}
 function useThreads() {
   const supabase = _getSupabaseInstance();
   const fetcher = async (key) => {
@@ -4926,327 +5281,96 @@ function useNavigation(customNavigate) {
     goToProfile,
     navigate
   };
-}
-function useWorkspaceNavigation() {
-  const { defaultTimezone } = useDateTimeConfig();
-  const getWorkspaceNavigationParams3 = React14.useCallback(
-    (workspaceId, options) => {
-      let dateToUse = options?.date;
-      if (!dateToUse && options?.useCurrentDate) {
-        dateToUse = getOperationalDate(defaultTimezone || "UTC");
-      }
-      return {
-        workspaceId,
-        date: dateToUse,
-        shift: options?.shift,
-        sourceType: options?.sourceType
-      };
-    },
-    [defaultTimezone]
-  );
-  return {
-    getWorkspaceNavigationParams: getWorkspaceNavigationParams3
-  };
-}
-function useDateFormatter() {
-  const { defaultTimezone, defaultLocale, dateFormatOptions, timeFormatOptions, dateTimeFormatOptions } = useDateTimeConfig();
-  const formatDate = React14.useCallback(
-    (date, formatString) => {
-      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
-      if (!dateFns.isValid(dateObj)) return "Invalid Date";
-      const tz = defaultTimezone || "UTC";
-      if (formatString) {
-        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
-      }
-      const effectiveOptions = dateFormatOptions || { year: "numeric", month: "short", day: "numeric" };
-      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
-    },
-    [defaultTimezone, defaultLocale, dateFormatOptions]
-  );
-  const formatTime2 = React14.useCallback(
-    (date, formatString) => {
-      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
-      if (!dateFns.isValid(dateObj)) return "Invalid Time";
-      const tz = defaultTimezone || "UTC";
-      if (formatString) {
-        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
-      }
-      const effectiveOptions = timeFormatOptions || { hour: "numeric", minute: "numeric" };
-      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
-    },
-    [defaultTimezone, defaultLocale, timeFormatOptions]
-  );
-  const formatDateTime = React14.useCallback(
-    (date, formatString) => {
-      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
-      if (!dateFns.isValid(dateObj)) return "Invalid Date/Time";
-      const tz = defaultTimezone || "UTC";
-      if (formatString) {
-        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
-      }
-      const effectiveOptions = dateTimeFormatOptions || { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric" };
-      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
-    },
-    [defaultTimezone, defaultLocale, dateTimeFormatOptions]
-  );
-  const getNow = React14.useCallback(() => {
-    return /* @__PURE__ */ new Date();
-  }, []);
-  return {
-    formatDate,
-    formatTime: formatTime2,
-    formatDateTime,
-    getNow,
-    timezone: defaultTimezone || "UTC",
-    locale: defaultLocale || "en-US"
-  };
-}
-var useFormatNumber = () => {
-  const { defaultLocale } = useDateTimeConfig();
-  const formatNumber = React14.useCallback(
-    (value, options) => {
-      try {
-        return new Intl.NumberFormat(defaultLocale || "en-US", options).format(value);
-      } catch (error) {
-        console.error("Error formatting number:", error);
-        return String(value);
-      }
-    },
-    [defaultLocale]
-  );
-  return { formatNumber };
-};
-
-// src/lib/utils/dashboardReload.ts
-var createThrottledReload = (interval = 5e3) => {
-  let last = 0;
-  let queued = false;
-  const doReload = () => {
-    if (typeof window !== "undefined") {
-      window.location.reload();
-    }
-  };
-  return () => {
-    const now2 = Date.now();
-    if (now2 - last >= interval) {
-      last = now2;
-      doReload();
-    } else if (!queued) {
-      queued = true;
-      setTimeout(() => {
-        queued = false;
-        last = Date.now();
-        doReload();
-      }, interval - (now2 - last));
-    }
-  };
-};
-var throttledReloadDashboard = createThrottledReload(5e3);
-
-// src/lib/hooks/useHlsStream.ts
-var HLS_CONFIG = {
-  maxBufferLength: 8,
-  maxMaxBufferLength: 15,
-  lowLatencyMode: false,
-  enableWorker: true,
-  // Retry + timeout tuned for quick recovery
-  manifestLoadingMaxRetry: 4,
-  levelLoadingMaxRetry: 3,
-  fragLoadingMaxRetry: 4,
-  manifestLoadingRetryDelay: 500,
-  levelLoadingRetryDelay: 500,
-  fragLoadingRetryDelay: 500,
-  manifestLoadingTimeOut: 1e4,
-  levelLoadingTimeOut: 8e3,
-  fragLoadingTimeOut: 1e4,
-  liveSyncDurationCount: 2
-  // Follow live edge aggressively
-};
-function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
-  const [restartKey, setRestartKey] = React14.useState(0);
-  const hlsRef = React14.useRef(null);
-  const stallCheckIntervalRef = React14.useRef(null);
-  const noProgressTimerRef = React14.useRef(null);
-  const lastTimeUpdateRef = React14.useRef(0);
-  const softRestartCountRef = React14.useRef(0);
-  const isNativeHlsRef = React14.useRef(false);
-  const waitingTimerRef = React14.useRef(null);
-  const cleanup = () => {
-    if (stallCheckIntervalRef.current) {
-      clearInterval(stallCheckIntervalRef.current);
-      stallCheckIntervalRef.current = null;
-    }
-    if (noProgressTimerRef.current) {
-      clearTimeout(noProgressTimerRef.current);
-      noProgressTimerRef.current = null;
-    }
-    if (waitingTimerRef.current) {
-      clearTimeout(waitingTimerRef.current);
-      waitingTimerRef.current = null;
-    }
-    if (hlsRef.current) {
-      hlsRef.current.destroy();
-      hlsRef.current = null;
-    }
-    const video = videoRef.current;
-    if (video) {
-      video.pause();
-      video.removeAttribute("src");
-      video.load();
-      video.removeEventListener("waiting", handleWaiting);
-      video.removeEventListener("timeupdate", handleTimeUpdate);
-      video.removeEventListener("error", handleNativeError);
-    }
-    lastTimeUpdateRef.current = 0;
-    softRestartCountRef.current = 0;
-  };
-  const seekToLiveEdge = () => {
-    const hls = hlsRef.current;
-    const video = videoRef.current;
-    if (!hls || !video) return;
-    if (hls.liveSyncPosition !== null && hls.liveSyncPosition !== void 0) {
-      video.currentTime = hls.liveSyncPosition;
-    } else if (hls.levels?.[hls.currentLevel]?.details) {
-      const levelDetails = hls.levels[hls.currentLevel].details;
-      if (levelDetails && levelDetails.edge !== void 0) {
-        video.currentTime = Math.max(0, levelDetails.edge - 5);
-      }
-    }
-  };
-  const softRestart = (reason) => {
-    console.warn(`[HLS] Soft restart: ${reason}`);
-    const hls = hlsRef.current;
-    if (!hls) return;
-    try {
-      hls.stopLoad();
-      hls.startLoad(-1);
-      seekToLiveEdge();
-      softRestartCountRef.current++;
-      if (softRestartCountRef.current >= 5) {
-        hardRestart(`${reason} (escalated after ${softRestartCountRef.current} soft restarts)`);
-      }
-    } catch (error) {
-      console.error("[HLS] Soft restart failed:", error);
-      hardRestart(`${reason} (soft restart error)`);
-    }
-  };
-  const hardRestart = (reason) => {
-    console.warn(`[HLS] Hard restart: ${reason}`);
-    cleanup();
-    setRestartKey((k) => k + 1);
-    softRestartCountRef.current = 0;
-    if (reason.includes("hard restart") || reason.includes("native video error")) {
-      if (onFatalError) {
-        onFatalError();
-      } else {
-        throttledReloadDashboard();
-      }
-    }
-  };
-  const handleWaiting = () => {
-    if (isNativeHlsRef.current) return;
-    console.log("[HLS] Video waiting (buffer underrun)");
-    if (waitingTimerRef.current) {
-      clearTimeout(waitingTimerRef.current);
-    }
-    waitingTimerRef.current = setTimeout(() => {
-      const video = videoRef.current;
-      if (video && video.readyState < 3) {
-        softRestart("waiting timeout");
-      }
-    }, 1e4);
-  };
-  const handleTimeUpdate = () => {
-    const video = videoRef.current;
-    if (!video) return;
-    lastTimeUpdateRef.current = video.currentTime;
-    if (waitingTimerRef.current) {
-      clearTimeout(waitingTimerRef.current);
-      waitingTimerRef.current = null;
-    }
-  };
-  const handleNativeError = () => {
-    console.error("[HLS] Native video error");
-    hardRestart("native video error");
-  };
-  const startStallDetection = () => {
-    if (isNativeHlsRef.current) return;
-    stallCheckIntervalRef.current = setInterval(() => {
-      const video = videoRef.current;
-      if (!video || video.paused || video.ended) return;
-      const currentTime = video.currentTime;
-      const lastTime = lastTimeUpdateRef.current;
-      if (Math.abs(currentTime - lastTime) < 0.1 && video.readyState >= 2) {
-        console.warn("[HLS] Playback stall detected");
-        if (!noProgressTimerRef.current) {
-          noProgressTimerRef.current = setTimeout(() => {
-            softRestart("playback stall");
-            noProgressTimerRef.current = null;
-          }, 8e3);
-        }
-      } else {
-        if (noProgressTimerRef.current) {
-          clearTimeout(noProgressTimerRef.current);
-          noProgressTimerRef.current = null;
-        }
+}
+function useWorkspaceNavigation() {
+  const { defaultTimezone } = useDateTimeConfig();
+  const getWorkspaceNavigationParams3 = React14.useCallback(
+    (workspaceId, options) => {
+      let dateToUse = options?.date;
+      if (!dateToUse && options?.useCurrentDate) {
+        dateToUse = getOperationalDate(defaultTimezone || "UTC");
       }
-    }, 7e3);
+      return {
+        workspaceId,
+        date: dateToUse,
+        shift: options?.shift,
+        sourceType: options?.sourceType
+      };
+    },
+    [defaultTimezone]
+  );
+  return {
+    getWorkspaceNavigationParams: getWorkspaceNavigationParams3
   };
-  React14.useEffect(() => {
-    if (!src || !shouldPlay) {
-      cleanup();
-      return;
-    }
-    const video = videoRef.current;
-    if (!video) return;
-    isNativeHlsRef.current = video.canPlayType("application/vnd.apple.mpegurl") === "probably";
-    if (Hls2__default.default.isSupported() && !isNativeHlsRef.current) {
-      const hls = new Hls2__default.default(HLS_CONFIG);
-      hlsRef.current = hls;
-      hls.attachMedia(video);
-      hls.loadSource(src);
-      hls.on(Hls2__default.default.Events.ERROR, (_, data) => {
-        if (!data.fatal) return;
-        console.error("[HLS] Fatal error:", data.type, data.details);
-        if (data.response?.code === 404) {
-          hardRestart("404 hard restart");
-          return;
-        }
-        switch (data.type) {
-          case Hls2__default.default.ErrorTypes.NETWORK_ERROR:
-          case Hls2__default.default.ErrorTypes.MEDIA_ERROR:
-            softRestart(`${data.type}: ${data.details}`);
-            break;
-          default:
-            hardRestart(`Fatal ${data.type}: ${data.details}`);
-            break;
-        }
-      });
-      hls.on(Hls2__default.default.Events.MANIFEST_PARSED, () => {
-        video.play().catch((err) => {
-          console.error("[HLS] Play failed:", err);
-        });
-      });
-      video.addEventListener("waiting", handleWaiting);
-      video.addEventListener("timeupdate", handleTimeUpdate);
-      startStallDetection();
-    } else if (isNativeHlsRef.current) {
-      console.log("[HLS] Using native HLS");
-      video.src = src;
-      video.addEventListener("error", handleNativeError);
-      video.play().catch((err) => {
-        console.error("[HLS] Native play failed:", err);
-      });
-    } else {
-      console.error("[HLS] HLS not supported");
-    }
-    return cleanup;
-  }, [src, shouldPlay, restartKey, onFatalError]);
+}
+function useDateFormatter() {
+  const { defaultTimezone, defaultLocale, dateFormatOptions, timeFormatOptions, dateTimeFormatOptions } = useDateTimeConfig();
+  const formatDate = React14.useCallback(
+    (date, formatString) => {
+      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
+      if (!dateFns.isValid(dateObj)) return "Invalid Date";
+      const tz = defaultTimezone || "UTC";
+      if (formatString) {
+        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
+      }
+      const effectiveOptions = dateFormatOptions || { year: "numeric", month: "short", day: "numeric" };
+      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
+    },
+    [defaultTimezone, defaultLocale, dateFormatOptions]
+  );
+  const formatTime2 = React14.useCallback(
+    (date, formatString) => {
+      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
+      if (!dateFns.isValid(dateObj)) return "Invalid Time";
+      const tz = defaultTimezone || "UTC";
+      if (formatString) {
+        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
+      }
+      const effectiveOptions = timeFormatOptions || { hour: "numeric", minute: "numeric" };
+      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
+    },
+    [defaultTimezone, defaultLocale, timeFormatOptions]
+  );
+  const formatDateTime = React14.useCallback(
+    (date, formatString) => {
+      const dateObj = typeof date === "string" ? dateFns.parseISO(date) : date;
+      if (!dateFns.isValid(dateObj)) return "Invalid Date/Time";
+      const tz = defaultTimezone || "UTC";
+      if (formatString) {
+        return dateFnsTz.formatInTimeZone(dateObj, tz, formatString);
+      }
+      const effectiveOptions = dateTimeFormatOptions || { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric" };
+      return new Intl.DateTimeFormat(defaultLocale || "en-US", effectiveOptions).format(dateObj);
+    },
+    [defaultTimezone, defaultLocale, dateTimeFormatOptions]
+  );
+  const getNow = React14.useCallback(() => {
+    return /* @__PURE__ */ new Date();
+  }, []);
   return {
-    restartKey,
-    isNativeHls: isNativeHlsRef.current
+    formatDate,
+    formatTime: formatTime2,
+    formatDateTime,
+    getNow,
+    timezone: defaultTimezone || "UTC",
+    locale: defaultLocale || "en-US"
   };
 }
+var useFormatNumber = () => {
+  const { defaultLocale } = useDateTimeConfig();
+  const formatNumber = React14.useCallback(
+    (value, options) => {
+      try {
+        return new Intl.NumberFormat(defaultLocale || "en-US", options).format(value);
+      } catch (error) {
+        console.error("Error formatting number:", error);
+        return String(value);
+      }
+    },
+    [defaultLocale]
+  );
+  return { formatNumber };
+};
 
 // src/lib/utils/api.ts
 var apiUtils = {
@@ -14606,16 +14730,16 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
       if (!this.isVisible) {
         return hiddenVisibility;
       }
-      const styles = {
+      const styles2 = {
         visibility: ""
       };
       const transformTemplate = this.getTransformTemplate();
       if (this.needsReset) {
         this.needsReset = false;
-        styles.opacity = "";
-        styles.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
-        styles.transform = transformTemplate ? transformTemplate(this.latestValues, "") : "none";
-        return styles;
+        styles2.opacity = "";
+        styles2.pointerEvents = resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
+        styles2.transform = transformTemplate ? transformTemplate(this.latestValues, "") : "none";
+        return styles2;
       }
       const lead = this.getLead();
       if (!this.projectionDelta || !this.layout || !lead.target) {
@@ -14632,35 +14756,35 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
       }
       const valuesToRender = lead.animationValues || lead.latestValues;
       this.applyTransformsToTarget();
-      styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
+      styles2.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender);
       if (transformTemplate) {
-        styles.transform = transformTemplate(valuesToRender, styles.transform);
+        styles2.transform = transformTemplate(valuesToRender, styles2.transform);
       }
       const { x, y } = this.projectionDelta;
-      styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
+      styles2.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`;
       if (lead.animationValues) {
-        styles.opacity = lead === this ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1 : this.preserveOpacity ? this.latestValues.opacity : valuesToRender.opacityExit;
+        styles2.opacity = lead === this ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1 : this.preserveOpacity ? this.latestValues.opacity : valuesToRender.opacityExit;
       } else {
-        styles.opacity = lead === this ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : "" : valuesToRender.opacityExit !== void 0 ? valuesToRender.opacityExit : 0;
+        styles2.opacity = lead === this ? valuesToRender.opacity !== void 0 ? valuesToRender.opacity : "" : valuesToRender.opacityExit !== void 0 ? valuesToRender.opacityExit : 0;
       }
       for (const key in scaleCorrectors) {
         if (valuesToRender[key] === void 0)
           continue;
         const { correct, applyTo } = scaleCorrectors[key];
-        const corrected = styles.transform === "none" ? valuesToRender[key] : correct(valuesToRender[key], lead);
+        const corrected = styles2.transform === "none" ? valuesToRender[key] : correct(valuesToRender[key], lead);
         if (applyTo) {
           const num = applyTo.length;
           for (let i = 0; i < num; i++) {
-            styles[applyTo[i]] = corrected;
+            styles2[applyTo[i]] = corrected;
           }
         } else {
-          styles[key] = corrected;
+          styles2[key] = corrected;
         }
       }
       if (this.options.layoutId) {
-        styles.pointerEvents = lead === this ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "" : "none";
+        styles2.pointerEvents = lead === this ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "" : "none";
       }
-      return styles;
+      return styles2;
     }
     clearSnapshot() {
       this.resumeFrom = this.snapshot = void 0;
@@ -16767,23 +16891,35 @@ var HourlyOutputChart = ({
   const [animatedData, setAnimatedData] = React14__namespace.default.useState(Array(SHIFT_DURATION).fill(0));
   const prevDataRef = React14__namespace.default.useRef(Array(SHIFT_DURATION).fill(0));
   const animationFrameRef = React14__namespace.default.useRef(null);
-  const [shouldAnimateIdle, setShouldAnimateIdle] = React14__namespace.default.useState(false);
+  const [idleBarState, setIdleBarState] = React14__namespace.default.useState({
+    visible: showIdleTime,
+    key: 0,
+    shouldAnimate: false
+  });
   const prevShowIdleTimeRef = React14__namespace.default.useRef(showIdleTime);
-  const animationTimeoutRef = React14__namespace.default.useRef(null);
+  const stateUpdateTimeoutRef = React14__namespace.default.useRef(null);
   React14__namespace.default.useEffect(() => {
+    if (stateUpdateTimeoutRef.current) {
+      clearTimeout(stateUpdateTimeoutRef.current);
+    }
     if (showIdleTime && !prevShowIdleTimeRef.current) {
-      setShouldAnimateIdle(true);
-      if (animationTimeoutRef.current) {
-        clearTimeout(animationTimeoutRef.current);
-      }
-      animationTimeoutRef.current = setTimeout(() => {
-        setShouldAnimateIdle(false);
-      }, 1e3);
+      requestAnimationFrame(() => {
+        setIdleBarState({
+          visible: true,
+          key: Date.now(),
+          shouldAnimate: true
+        });
+        stateUpdateTimeoutRef.current = setTimeout(() => {
+          setIdleBarState((prev) => ({ ...prev, shouldAnimate: false }));
+        }, 1100);
+      });
+    } else if (!showIdleTime && prevShowIdleTimeRef.current) {
+      setIdleBarState((prev) => ({ ...prev, visible: false }));
     }
     prevShowIdleTimeRef.current = showIdleTime;
     return () => {
-      if (animationTimeoutRef.current) {
-        clearTimeout(animationTimeoutRef.current);
+      if (stateUpdateTimeoutRef.current) {
+        clearTimeout(stateUpdateTimeoutRef.current);
       }
     };
   }, [showIdleTime]);
@@ -16876,6 +17012,55 @@ var HourlyOutputChart = ({
       };
     });
   }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, formatHour, formatTimeRange]);
+  const IdleBar = React14__namespace.default.useMemo(() => {
+    if (!idleBarState.visible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Bar,
+      {
+        dataKey: "idleMinutes",
+        yAxisId: "idle",
+        maxBarSize: 35,
+        radius: [10, 10, 0, 0],
+        fill: "url(#idlePattern)",
+        opacity: 0.7,
+        isAnimationActive: idleBarState.shouldAnimate,
+        animationBegin: 0,
+        animationDuration: 1e3,
+        animationEasing: "ease-out",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.LabelList,
+          {
+            dataKey: "idleMinutes",
+            position: "top",
+            content: (props) => {
+              const { x, y, width, value } = props;
+              if (!value || value === 0) return null;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "text",
+                {
+                  x: x + width / 2,
+                  y: y - 2,
+                  textAnchor: "middle",
+                  fontSize: "9",
+                  fontWeight: "600",
+                  fill: "#6b7280",
+                  style: {
+                    opacity: 1,
+                    pointerEvents: "none"
+                  },
+                  children: [
+                    value,
+                    "m"
+                  ]
+                }
+              );
+            }
+          }
+        )
+      },
+      `idle-bar-${idleBarState.key}`
+    );
+  }, [idleBarState.visible, idleBarState.key, idleBarState.shouldAnimate]);
   const maxYValue = Math.ceil(pphThreshold * 1.5);
   const generateYAxisTicks = () => {
     const targetValue = Math.round(pphThreshold);
@@ -17133,51 +17318,7 @@ var HourlyOutputChart = ({
               ]
             }
           ),
-          showIdleTime && /* @__PURE__ */ jsxRuntime.jsx(
-            recharts.Bar,
-            {
-              dataKey: "idleMinutes",
-              yAxisId: "idle",
-              maxBarSize: 35,
-              radius: [10, 10, 0, 0],
-              fill: "url(#idlePattern)",
-              opacity: 0.7,
-              isAnimationActive: shouldAnimateIdle,
-              animationBegin: shouldAnimateIdle ? 200 : 0,
-              animationDuration: shouldAnimateIdle ? 800 : 0,
-              animationEasing: "ease-out",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.LabelList,
-                {
-                  dataKey: "idleMinutes",
-                  position: "top",
-                  content: (props) => {
-                    const { x, y, width, value } = props;
-                    if (!value || value === 0) return null;
-                    return /* @__PURE__ */ jsxRuntime.jsxs(
-                      "text",
-                      {
-                        x: x + width / 2,
-                        y: y - 2,
-                        textAnchor: "middle",
-                        fontSize: "9",
-                        fontWeight: "600",
-                        fill: "#6b7280",
-                        style: {
-                          opacity: 1,
-                          pointerEvents: "none"
-                        },
-                        children: [
-                          value,
-                          "m"
-                        ]
-                      }
-                    );
-                  }
-                }
-              )
-            }
-          ),
+          IdleBar,
           /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("pattern", { id: "idlePattern", patternUnits: "userSpaceOnUse", width: "4", height: "4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "4", height: "4", fill: "#9ca3af", opacity: "0.2" }),
             /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 0,4 l 4,-4 M -1,1 l 2,-2 M 3,5 l 2,-2", stroke: "#6b7280", strokeWidth: "0.5", opacity: "0.3" })
@@ -17188,15 +17329,15 @@ var HourlyOutputChart = ({
     renderLegend()
   ] });
 };
-var TREND_STYLES = {
-  0: { arrow: "\u2193", color: "text-red-500 font-bold text-shadow" },
-  // Down
-  1: { arrow: "\u2013", color: "text-gray-500 font-bold text-shadow" },
-  // Unchanged
-  2: { arrow: "\u2191", color: "text-green-500 font-bold text-shadow" }
-  // Up
-};
-var getTrendArrowAndColor = (trend) => TREND_STYLES[trend] || { arrow: "", color: "" };
+function getTrendArrowAndColor(trend) {
+  if (trend > 0) {
+    return { arrow: "\u2191", color: "text-green-400" };
+  } else if (trend < 0) {
+    return { arrow: "\u2193", color: "text-red-400" };
+  } else {
+    return { arrow: "\u2192", color: "text-gray-400" };
+  }
+}
 var VideoCard = React14__namespace.default.memo(({
   workspace,
   hlsUrl,
@@ -17204,14 +17345,29 @@ var VideoCard = React14__namespace.default.memo(({
   onClick,
   onFatalError,
   isVeryLowEfficiency = false,
+  cropping,
+  canvasFps = 30,
+  useRAF = true,
   className = ""
 }) => {
   const videoRef = React14.useRef(null);
-  useHlsStream(videoRef, {
-    src: hlsUrl,
-    shouldPlay,
-    onFatalError: onFatalError ?? (() => throttledReloadDashboard())
-  });
+  const canvasRef = React14.useRef(null);
+  if (cropping) {
+    useHlsStreamWithCropping(videoRef, canvasRef, {
+      src: hlsUrl,
+      shouldPlay,
+      cropping,
+      canvasFps,
+      useRAF,
+      onFatalError: onFatalError ?? (() => throttledReloadDashboard())
+    });
+  } else {
+    useHlsStream(videoRef, {
+      src: hlsUrl,
+      shouldPlay,
+      onFatalError: onFatalError ?? (() => throttledReloadDashboard())
+    });
+  }
   const displayName = getWorkspaceDisplayName(workspace.workspace_name);
   workspace.workspace_uuid || workspace.workspace_name;
   const getEfficiencyOverlayColor = (efficiency) => {
@@ -17266,17 +17422,26 @@ var VideoCard = React14__namespace.default.memo(({
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: "w-6 h-6 text-gray-500" }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 mt-1", children: "Loading..." })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "video",
-            {
-              ref: videoRef,
-              className: "h-full w-full object-cover",
-              playsInline: true,
-              muted: true,
-              disablePictureInPicture: true,
-              controlsList: "nodownload noplaybackrate"
-            }
-          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-10", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "video",
+              {
+                ref: videoRef,
+                className: `h-full w-full object-cover ${cropping ? "hidden" : ""}`,
+                playsInline: true,
+                muted: true,
+                disablePictureInPicture: true,
+                controlsList: "nodownload noplaybackrate"
+              }
+            ),
+            cropping && /* @__PURE__ */ jsxRuntime.jsx(
+              "canvas",
+              {
+                ref: canvasRef,
+                className: "h-full w-full object-cover"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute inset-0 z-20 pointer-events-none ${efficiencyOverlayClass}` }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 right-2 z-30 bg-black/70 backdrop-blur-sm rounded px-2 py-0.5 text-white text-xs font-semibold border border-white/10", children: [
             Math.round(workspace.efficiency),
@@ -17312,7 +17477,7 @@ var VideoCard = React14__namespace.default.memo(({
     }
   );
 }, (prevProps, nextProps) => {
-  return prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.workspace_name === nextProps.workspace.workspace_name && Math.abs(prevProps.workspace.efficiency - nextProps.workspace.efficiency) < 1 && prevProps.hlsUrl === nextProps.hlsUrl && prevProps.shouldPlay === nextProps.shouldPlay;
+  return prevProps.workspace.workspace_uuid === nextProps.workspace.workspace_uuid && prevProps.workspace.workspace_name === nextProps.workspace.workspace_name && Math.abs(prevProps.workspace.efficiency - nextProps.workspace.efficiency) < 1 && prevProps.hlsUrl === nextProps.hlsUrl && prevProps.shouldPlay === nextProps.shouldPlay && prevProps.cropping?.x === nextProps.cropping?.x && prevProps.cropping?.y === nextProps.cropping?.y && prevProps.cropping?.width === nextProps.cropping?.width && prevProps.cropping?.height === nextProps.cropping?.height;
 });
 VideoCard.displayName = "VideoCard";
 var DEFAULT_WORKSPACE_HLS_URLS = {
@@ -17340,6 +17505,8 @@ var VideoGridView = React14__namespace.default.memo(({
   const observerRef = React14.useRef(null);
   const [gridCols, setGridCols] = React14.useState(4);
   const [visibleWorkspaces, setVisibleWorkspaces] = React14.useState(/* @__PURE__ */ new Set());
+  const videoConfig = useVideoConfig();
+  const { cropping, canvasConfig } = videoConfig;
   const mergedVideoSources = {
     defaultHlsUrl: videoSources.defaultHlsUrl || DEFAULT_HLS_URL,
     workspaceHlsUrls: { ...DEFAULT_WORKSPACE_HLS_URLS, ...videoSources.workspaceHlsUrls }
@@ -17348,6 +17515,13 @@ var VideoGridView = React14__namespace.default.memo(({
     const wsName = workspaceName.toUpperCase();
     return mergedVideoSources.workspaceHlsUrls[wsName] || mergedVideoSources.defaultHlsUrl;
   }, [mergedVideoSources]);
+  const getWorkspaceCropping = React14.useCallback((workspaceName) => {
+    if (!cropping) return void 0;
+    if (cropping.workspaceOverrides?.[workspaceName]) {
+      return cropping.workspaceOverrides[workspaceName];
+    }
+    return cropping.default;
+  }, [cropping]);
   const veryLowEfficiencyWorkspaces = React14.useMemo(() => {
     return new Set(
       workspaces.filter((w) => w.efficiency < 50 && w.efficiency >= 10).map((w) => w.workspace_name)
@@ -17486,6 +17660,7 @@ var VideoGridView = React14__namespace.default.memo(({
         const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
         const isVisible = visibleWorkspaces.has(workspaceId);
         const isVeryLowEfficiency = veryLowEfficiencyWorkspaces.has(workspace.workspace_name);
+        const workspaceCropping = getWorkspaceCropping(workspace.workspace_name);
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -17500,7 +17675,10 @@ var VideoGridView = React14__namespace.default.memo(({
                 shouldPlay: isVisible,
                 onClick: () => handleWorkspaceClick(workspace),
                 onFatalError: throttledReloadDashboard,
-                isVeryLowEfficiency
+                isVeryLowEfficiency,
+                cropping: workspaceCropping,
+                canvasFps: canvasConfig?.fps,
+                useRAF: canvasConfig?.useRAF
               }
             )
           },
@@ -19613,6 +19791,32 @@ var WorkspaceCard = ({
     }
   );
 };
+var styles = `
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  
+  .calendar-container {
+    will-change: transform, opacity;
+    animation: fadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+  
+  .calendar-wrapper:not(.animation-complete) * {
+    transition: none !important;
+  }
+  
+  .calendar-wrapper:not(.animation-complete) .group:hover {
+    opacity: 1 !important;
+    transform: scale(1) !important;
+  }
+`;
 var WEEKDAYS2 = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var getTimeInZoneAsDate = (timezone) => {
   const time2 = getCurrentTimeInZone(timezone);
@@ -19631,20 +19835,20 @@ var WorkspaceHistoryCalendar = ({
 }) => {
   const { dateTimeConfig } = useDashboardConfig();
   const configuredTimezone = dateTimeConfig?.defaultTimezone || "Asia/Kolkata";
+  const [animationComplete, setAnimationComplete] = React14.useState(false);
+  React14.useEffect(() => {
+    setAnimationComplete(false);
+    const timer = setTimeout(() => {
+      setAnimationComplete(true);
+    }, 600);
+    return () => clearTimeout(timer);
+  }, [month, year]);
   const calendarData = React14.useMemo(() => {
     const startOfMonth = dateFnsTz.toZonedTime(new Date(year, month, 1), configuredTimezone);
     const endOfMonth = dateFnsTz.toZonedTime(new Date(year, month + 1, 0), configuredTimezone);
     const totalDays = endOfMonth.getDate();
     let startOffset = startOfMonth.getDay() - 1;
     if (startOffset === -1) startOffset = 6;
-    console.log("Calendar generation for:", {
-      month: month + 1,
-      year,
-      startOffset,
-      totalDays,
-      configuredTimezone
-    });
-    console.log("Data points received:", data);
     const calendar = Array(startOffset).fill(null);
     for (let day = 1; day <= totalDays; day++) {
       const currentDate = new Date(year, month, day);
@@ -19658,15 +19862,6 @@ var WorkspaceHistoryCalendar = ({
         const dataDate = new Date(d.date);
         const dataDateStr = dataDate.toISOString().split("T")[0];
         const matches = dataDateStr === dateToMatch;
-        if (day <= 3 && matches) {
-          console.log(`Found data match for day ${day}:`, {
-            dataDate: dataDate.toISOString(),
-            currentDate: currentTimezoneDate.toISOString(),
-            dataDateStr,
-            dateToMatch,
-            data: d
-          });
-        }
         return matches;
       });
       if (matchingData.length > 0) {
@@ -19677,32 +19872,10 @@ var WorkspaceHistoryCalendar = ({
           // Use the timezone-adjusted date for display
         });
       } else {
-        calendar.push({
-          date: currentTimezoneDate,
-          dayShift: {
-            efficiency: 0,
-            output: 0,
-            cycleTime: 0,
-            pph: 0,
-            pphThreshold: 0,
-            idealOutput: 0,
-            rank: 0,
-            idleTime: 0
-          },
-          nightShift: {
-            efficiency: 0,
-            output: 0,
-            cycleTime: 0,
-            pph: 0,
-            pphThreshold: 0,
-            idealOutput: 0,
-            rank: 0,
-            idleTime: 0
-          }
-        });
+        calendar.push(null);
       }
     }
-    return calendar;
+    return { calendar, startOffset };
   }, [data, month, year, configuredTimezone]);
   const monthlyMetrics = React14.useMemo(() => {
     const validDays = data.filter((day) => {
@@ -19719,15 +19892,17 @@ var WorkspaceHistoryCalendar = ({
         return [];
       }
       return [day.dayShift, day.nightShift];
-    }).filter((shift) => shift.efficiency > 0);
+    });
     if (validShifts.length === 0) return null;
     const badShiftsCount = validShifts.filter((shift) => shift.efficiency < 75).length;
+    const totalIdleTime = validShifts.reduce((sum, shift) => sum + shift.idleTime, 0);
+    const avgIdleTime = Math.round(totalIdleTime / validShifts.length);
     return {
       avgEfficiency: Math.round(validShifts.reduce((sum, shift) => sum + shift.efficiency, 0) / validShifts.length),
       avgCycleTime: Math.round(validShifts.reduce((sum, shift) => sum + shift.cycleTime, 0) / validShifts.length),
+      avgIdleTime,
       badDaysCount: badShiftsCount,
-      totalDays: validShifts.length,
-      avgIdleTime: Math.round(validShifts.reduce((sum, shift) => sum + (shift.idleTime || 0), 0) / validShifts.length)
+      totalDays: validShifts.length
     };
   }, [data, month, year, configuredTimezone]);
   const handleDayClick = React14.useCallback((day, shift) => {
@@ -19775,7 +19950,6 @@ var WorkspaceHistoryCalendar = ({
     compareDate.setHours(0, 0, 0, 0);
     if (compareDate.getDay() === 0) return "bg-gray-300";
     if (compareDate > istNow) return "bg-gray-200";
-    if (efficiency < 10) return "bg-gray-300";
     if (efficiency >= 80) return "bg-[#00AB45]/90";
     if (efficiency >= 70) return "bg-[#FFB020]/90";
     return "bg-[#E34329]/90";
@@ -19814,38 +19988,55 @@ var WorkspaceHistoryCalendar = ({
       ] })
     ] }) });
   };
-  const renderDayCell = React14.useCallback((day) => {
-    if (!day) return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full border border-gray-100 rounded-lg bg-gray-50 transition-all duration-200 ease-in-out" });
+  const renderDayCell = React14.useCallback((day, dayNumber, index) => {
+    if (dayNumber === null) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full" });
+    }
+    const cellDate = dateFnsTz.toZonedTime(new Date(year, month, dayNumber), configuredTimezone);
+    const isToday = isCurrentDate(cellDate);
+    const isFuture = isFutureDate(cellDate);
+    const isSunday = cellDate.getDay() === 0;
+    if (!day) {
+      let bgColor = "bg-gray-100";
+      let textColor = "text-gray-400";
+      if (isSunday) {
+        bgColor = "bg-gray-200";
+        textColor = "text-gray-500";
+      }
+      if (isFuture) {
+        bgColor = "bg-gray-50";
+        textColor = "text-gray-300";
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-full border border-gray-200 rounded-lg ${bgColor} ${animationComplete ? "transition-all duration-300 ease-in-out" : ""} cursor-not-allowed opacity-60`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `text-base font-medium ${textColor} ${isToday ? "text-blue-500" : ""}`, children: dayNumber }) }) });
+    }
     const shiftData = selectedShift === "day" ? day.dayShift : day.nightShift;
-    const isToday = isCurrentDate(day.date);
-    const isFuture = isFutureDate(day.date);
-    const isInactive = shiftData.efficiency < 10;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: `group h-full transition-all duration-200 ease-in-out ${!isFuture && !isInactive ? "cursor-pointer hover:opacity-90" : "cursor-not-allowed"}`,
-        onClick: () => !isFuture && !isInactive && handleDayClick(day, selectedShift),
+        className: `group h-full ${animationComplete ? "transition-all duration-300 ease-in-out" : ""} ${!isFuture && animationComplete ? "cursor-pointer hover:opacity-90 hover:scale-105" : "cursor-not-allowed"}`,
+        onClick: () => !isFuture && handleDayClick(day, selectedShift),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `
           ${getPerformanceColor(shiftData.efficiency, day.date)} 
-          rounded-lg h-full p-2 relative transition-all duration-200 ease-in-out
+          rounded-lg h-full p-2 relative ${animationComplete ? "transition-all duration-300 ease-in-out" : ""} shadow-sm
           ${isToday ? "ring-2 ring-blue-500 ring-offset-2 shadow-md" : ""}
         `, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: `
-            text-base font-medium text-white flex items-center transition-all duration-200 ease-in-out
+            text-base font-medium text-white flex items-center ${animationComplete ? "transition-all duration-300 ease-in-out" : ""}
             ${isToday ? "bg-blue-500 rounded-full w-7 h-7 justify-center" : ""}
           `, children: day.date.getDate() }),
-          !isFuture && !isInactive && renderStats(shiftData, day.date)
+          !isFuture && animationComplete && renderStats(shiftData, day.date)
         ] })
       }
     );
-  }, [selectedShift, isCurrentDate, isFutureDate, getPerformanceColor, handleDayClick]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `space-y-6 ${className || ""}`, children: [
+  }, [selectedShift, isCurrentDate, isFutureDate, getPerformanceColor, handleDayClick, year, month, configuredTimezone, animationComplete]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `calendar-wrapper space-y-6 ${className || ""} ${animationComplete ? "animation-complete" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: styles } }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 border border-gray-200 rounded-lg p-1 bg-gray-50", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: () => handleShiftChange("day"),
-          className: `px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${selectedShift === "day" ? "bg-white text-blue-600 shadow-sm ring-1 ring-gray-200" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"}`,
+          className: `px-4 py-2 text-sm font-medium rounded-md ${animationComplete ? "transition-all duration-200" : ""} ${selectedShift === "day" ? "bg-white text-blue-600 shadow-sm ring-1 ring-gray-200" : `text-gray-600 ${animationComplete ? "hover:text-gray-900 hover:bg-gray-100" : ""}`}`,
           children: "Day Shift"
         }
       ),
@@ -19853,23 +20044,27 @@ var WorkspaceHistoryCalendar = ({
         "button",
         {
           onClick: () => handleShiftChange("night"),
-          className: `px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${selectedShift === "night" ? "bg-white text-blue-600 shadow-sm ring-1 ring-gray-200" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"}`,
+          className: `px-4 py-2 text-sm font-medium rounded-md ${animationComplete ? "transition-all duration-200" : ""} ${selectedShift === "night" ? "bg-white text-blue-600 shadow-sm ring-1 ring-gray-200" : `text-gray-600 ${animationComplete ? "hover:text-gray-900 hover:bg-gray-100" : ""}`}`,
           children: "Night Shift"
         }
       )
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "calendar-container bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-gray-900 text-lg", children: selectedShift === "day" ? "Day Shifts" : "Night Shifts" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Calendar view of daily performance" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: WEEKDAYS2.map((day) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-600 text-center", children: day }, day)) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: calendarData.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square relative transition-all duration-200 ease-in-out", children: renderDayCell(day) }, index)) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: calendarData.calendar.map((day, index) => {
+            const startOffset = calendarData.startOffset;
+            const dayNumber = index >= startOffset ? index - startOffset + 1 : null;
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square relative transition-all duration-200 ease-in-out", children: renderDayCell(day, dayNumber && dayNumber <= new Date(year, month + 1, 0).getDate() ? dayNumber : null, index) }, index);
+          }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "calendar-container bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-gray-900 text-lg", children: "Monthly Summary" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Overview of monthly performance metrics" })
@@ -22327,12 +22522,12 @@ var getEfficiencyColor = (efficiency) => {
     return "bg-[#E34329]/90 hover:bg-[#E34329]/95";
   }
 };
-var TREND_STYLES2 = {
+var TREND_STYLES = {
   0: { arrow: "\u2193", color: "text-red-500 font-bold text-shadow" },
   1: { arrow: "=", color: "text-gray-500 font-bold text-shadow" },
   2: { arrow: "\u2191", color: "text-green-500 font-bold text-shadow" }
 };
-var getTrendArrowAndColor2 = (trend) => TREND_STYLES2[trend] || { arrow: "", color: "" };
+var getTrendArrowAndColor2 = (trend) => TREND_STYLES[trend] || { arrow: "", color: "" };
 var ARROW_POSITIONS = {
   top: "-bottom-6",
   "middle-top": "-bottom-6",
@@ -22440,7 +22635,7 @@ var WorkspaceGridItem = React14__namespace.default.memo(({
   }, [data.efficiency, isInactive, position.size, position.orientation]);
   const { arrow, color: arrowColor } = React14.useMemo(() => getTrendArrowAndColor2(data.trend_score), [data.trend_score]);
   const workspaceNumber = React14.useMemo(() => getWorkspaceNumber(data.workspace_name), [data.workspace_name]);
-  const styles = React14.useMemo(() => getWorkspaceStyles(position, isInactive), [position, isInactive]);
+  const styles2 = React14.useMemo(() => getWorkspaceStyles(position, isInactive), [position, isInactive]);
   const arrowPosition = React14.useMemo(() => getArrowPositionClass(position), [position]);
   const handleClick = React14.useCallback((e) => {
     e.preventDefault();
@@ -22491,7 +22686,7 @@ var WorkspaceGridItem = React14__namespace.default.memo(({
           "button",
           {
             onClick: handleClick,
-            className: `${styles} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg`,
+            className: `${styles2} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg`,
             "aria-label": isInactive ? `Inactive workspace ${workspaceNumber}` : `View details for workspace ${workspaceNumber}`,
             title: isInactive ? `Inactive: ${getWorkspaceDisplayName(data.workspace_name)}` : getWorkspaceDisplayName(data.workspace_name),
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-semibold tracking-wide text-[min(4vw,2rem)] uppercase ${isInactive ? "text-gray-400" : "text-white"} drop-shadow-sm`, children: workspaceNumber })
@@ -30002,6 +30197,11 @@ var WorkspaceDetailView = ({
     return getOperationalDate();
   }, [isHistoricView, date]);
   const handleMonthlyDataLoaded = React14.useCallback((data) => {
+    console.log("[handleMonthlyDataLoaded] Received data:", {
+      dataLength: data?.length,
+      isArray: Array.isArray(data),
+      sample: data?.[0]
+    });
     if (!data || !Array.isArray(data)) {
       console.error("Invalid monthly metrics data received:", data);
       setMonthlyData([]);
@@ -30019,22 +30219,35 @@ var WorkspaceDetailView = ({
       if (!dayEntry) {
         dayEntry = {
           date: dateObj,
-          dayShift: { efficiency: 0, output: 0, cycleTime: 0, pph: 0, pphThreshold: 0, idealOutput: 0, rank: 0, idleTime: 0 },
-          nightShift: { efficiency: 0, output: 0, cycleTime: 0, pph: 0, pphThreshold: 0, idealOutput: 0, rank: 0, idleTime: 0 }
+          dayShift: null,
+          // Start with null instead of zeros
+          nightShift: null
+          // Start with null instead of zeros
         };
         dayDataMap.set(dateKey, dayEntry);
       }
-      const shiftTarget = metric.shift_id === 0 ? dayEntry.dayShift : dayEntry.nightShift;
-      shiftTarget.efficiency = metric.avg_efficiency || 0;
-      shiftTarget.output = metric.total_output || 0;
-      shiftTarget.cycleTime = metric.avg_cycle_time || 0;
-      shiftTarget.pph = metric.avg_pph || 0;
-      shiftTarget.pphThreshold = metric.pph_threshold || 0;
-      shiftTarget.idealOutput = metric.ideal_output || 0;
-      shiftTarget.rank = metric.workspace_rank || 0;
-      shiftTarget.idleTime = metric.idle_time || 0;
+      const shiftData = {
+        efficiency: metric.avg_efficiency || 0,
+        output: metric.total_output || 0,
+        cycleTime: metric.avg_cycle_time || 0,
+        pph: metric.avg_pph || 0,
+        pphThreshold: metric.pph_threshold || 0,
+        idealOutput: metric.ideal_output || 0,
+        rank: metric.workspace_rank || 0,
+        idleTime: metric.idle_time || 0
+      };
+      if (metric.shift_id === 0) {
+        dayEntry.dayShift = shiftData;
+      } else {
+        dayEntry.nightShift = shiftData;
+      }
     });
-    const processedData = Array.from(dayDataMap.values());
+    const processedData = Array.from(dayDataMap.values()).filter((entry) => entry.dayShift !== null || entry.nightShift !== null).map((entry) => ({
+      date: entry.date,
+      // If a shift is null (no data), provide zeros for compatibility
+      dayShift: entry.dayShift || { efficiency: 0, output: 0, cycleTime: 0, pph: 0, pphThreshold: 0, idealOutput: 0, rank: 0, idleTime: 0 },
+      nightShift: entry.nightShift || { efficiency: 0, output: 0, cycleTime: 0, pph: 0, pphThreshold: 0, idealOutput: 0, rank: 0, idleTime: 0 }
+    }));
     console.log(`[handleMonthlyDataLoaded] Transformed data for calendar:`, {
       count: processedData.length,
       sample: processedData.slice(0, 1)
@@ -30494,7 +30707,7 @@ var WorkspaceDetailView = ({
                 }
               )
             ] }),
-            monthlyDataLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-5rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xl text-gray-600", children: "Loading monthly data..." }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(
               WorkspaceHistoryCalendar,
               {
                 data: monthlyData,
@@ -30803,6 +31016,7 @@ exports.DEFAULT_ENDPOINTS_CONFIG = DEFAULT_ENDPOINTS_CONFIG;
 exports.DEFAULT_ENTITY_CONFIG = DEFAULT_ENTITY_CONFIG;
 exports.DEFAULT_SHIFT_CONFIG = DEFAULT_SHIFT_CONFIG;
 exports.DEFAULT_THEME_CONFIG = DEFAULT_THEME_CONFIG;
+exports.DEFAULT_VIDEO_CONFIG = DEFAULT_VIDEO_CONFIG;
 exports.DEFAULT_WORKSPACE_CONFIG = DEFAULT_WORKSPACE_CONFIG;
 exports.DEFAULT_WORKSPACE_POSITIONS = DEFAULT_WORKSPACE_POSITIONS;
 exports.DashboardHeader = DashboardHeader;
@@ -30992,6 +31206,7 @@ exports.useFeatureFlags = useFeatureFlags;
 exports.useFormatNumber = useFormatNumber;
 exports.useHistoricWorkspaceMetrics = useHistoricWorkspaceMetrics;
 exports.useHlsStream = useHlsStream;
+exports.useHlsStreamWithCropping = useHlsStreamWithCropping;
 exports.useHookOverride = useHookOverride;
 exports.useLeaderboardMetrics = useLeaderboardMetrics;
 exports.useLineDetailedMetrics = useLineDetailedMetrics;
@@ -31013,6 +31228,7 @@ exports.useTargets = useTargets;
 exports.useTheme = useTheme;
 exports.useThemeConfig = useThemeConfig;
 exports.useThreads = useThreads;
+exports.useVideoConfig = useVideoConfig;
 exports.useWorkspaceConfig = useWorkspaceConfig;
 exports.useWorkspaceDetailedMetrics = useWorkspaceDetailedMetrics;
 exports.useWorkspaceDisplayName = useWorkspaceDisplayName;