@optifye/dashboard-core 4.2.7 → 4.2.9

package/dist/index.mjs

@@ -6,11 +6,11 @@ import { toZonedTime, formatInTimeZone } from 'date-fns-tz';
 import { subDays, format, parseISO, isValid, isFuture, isToday } from 'date-fns';
 import mixpanel from 'mixpanel-browser';
 import { REALTIME_SUBSCRIBE_STATES, createClient } from '@supabase/supabase-js';
-import useSWR from 'swr';
 import Hls2 from 'hls.js';
+import useSWR from 'swr';
 import { noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds, memo as memo$1 } from 'motion-utils';
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
-import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Bar, Cell, LabelList, PieChart, Pie, Legend, LineChart as LineChart$1, Line } from 'recharts';
+import { Bar, LabelList, ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Cell, PieChart, Pie, Legend, LineChart as LineChart$1, Line } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
 import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, X, Coffee, Plus, Clock, Minus, ArrowDown, ArrowUp, Search, CheckCircle, AlertTriangle, Info, Share2, Download, User, XCircle, ChevronLeft, ChevronRight, AlertCircle, Sun, Moon, MessageSquare, Trash2, ArrowLeft, RefreshCw, Menu, Send, Copy, Edit2, UserCheck, Save, LogOut, Calendar, Settings, LifeBuoy, Loader2, ArrowLeftIcon as ArrowLeftIcon$1, Settings2, CheckCircle2, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
@@ -125,6 +125,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,
@@ -138,7 +144,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
@@ -270,6 +277,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;
@@ -980,7 +991,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) => ({
@@ -993,8 +1004,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) {
@@ -4218,6 +4228,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] = useState(0);
+  const hlsRef = useRef(null);
+  const stallCheckIntervalRef = useRef(null);
+  const noProgressTimerRef = useRef(null);
+  const lastTimeUpdateRef = useRef(0);
+  const softRestartCountRef = useRef(0);
+  const isNativeHlsRef = useRef(false);
+  const waitingTimerRef = 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);
+  };
+  useEffect(() => {
+    if (!src || !shouldPlay) {
+      cleanup();
+      return;
+    }
+    const video = videoRef.current;
+    if (!video) return;
+    isNativeHlsRef.current = video.canPlayType("application/vnd.apple.mpegurl") === "probably";
+    if (Hls2.isSupported() && !isNativeHlsRef.current) {
+      const hls = new Hls2(HLS_CONFIG);
+      hlsRef.current = hls;
+      hls.attachMedia(video);
+      hls.loadSource(src);
+      hls.on(Hls2.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.ErrorTypes.NETWORK_ERROR:
+          case Hls2.ErrorTypes.MEDIA_ERROR:
+            softRestart(`${data.type}: ${data.details}`);
+            break;
+          default:
+            hardRestart(`Fatal ${data.type}: ${data.details}`);
+            break;
+        }
+      });
+      hls.on(Hls2.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 = useRef(null);
+  const intervalRef = useRef(null);
+  const isDrawingRef = useRef(false);
+  const hlsState = useHlsStream(videoRef, { src, shouldPlay, onFatalError });
+  const calculateCropRect = 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 = 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 = 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 = useCallback(() => {
+    isDrawingRef.current = false;
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  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) => {
@@ -4897,327 +5252,96 @@ function useNavigation(customNavigate) {
     goToProfile,
     navigate
   };
-}
-function useWorkspaceNavigation() {
-  const { defaultTimezone } = useDateTimeConfig();
-  const getWorkspaceNavigationParams3 = 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 = useCallback(
-    (date, formatString) => {
-      const dateObj = typeof date === "string" ? parseISO(date) : date;
-      if (!isValid(dateObj)) return "Invalid Date";
-      const tz = defaultTimezone || "UTC";
-      if (formatString) {
-        return 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 = useCallback(
-    (date, formatString) => {
-      const dateObj = typeof date === "string" ? parseISO(date) : date;
-      if (!isValid(dateObj)) return "Invalid Time";
-      const tz = defaultTimezone || "UTC";
-      if (formatString) {
-        return 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 = useCallback(
-    (date, formatString) => {
-      const dateObj = typeof date === "string" ? parseISO(date) : date;
-      if (!isValid(dateObj)) return "Invalid Date/Time";
-      const tz = defaultTimezone || "UTC";
-      if (formatString) {
-        return 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 = 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 = 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] = useState(0);
-  const hlsRef = useRef(null);
-  const stallCheckIntervalRef = useRef(null);
-  const noProgressTimerRef = useRef(null);
-  const lastTimeUpdateRef = useRef(0);
-  const softRestartCountRef = useRef(0);
-  const isNativeHlsRef = useRef(false);
-  const waitingTimerRef = 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 = 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
   };
-  useEffect(() => {
-    if (!src || !shouldPlay) {
-      cleanup();
-      return;
-    }
-    const video = videoRef.current;
-    if (!video) return;
-    isNativeHlsRef.current = video.canPlayType("application/vnd.apple.mpegurl") === "probably";
-    if (Hls2.isSupported() && !isNativeHlsRef.current) {
-      const hls = new Hls2(HLS_CONFIG);
-      hlsRef.current = hls;
-      hls.attachMedia(video);
-      hls.loadSource(src);
-      hls.on(Hls2.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.ErrorTypes.NETWORK_ERROR:
-          case Hls2.ErrorTypes.MEDIA_ERROR:
-            softRestart(`${data.type}: ${data.details}`);
-            break;
-          default:
-            hardRestart(`Fatal ${data.type}: ${data.details}`);
-            break;
-        }
-      });
-      hls.on(Hls2.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 = useCallback(
+    (date, formatString) => {
+      const dateObj = typeof date === "string" ? parseISO(date) : date;
+      if (!isValid(dateObj)) return "Invalid Date";
+      const tz = defaultTimezone || "UTC";
+      if (formatString) {
+        return 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 = useCallback(
+    (date, formatString) => {
+      const dateObj = typeof date === "string" ? parseISO(date) : date;
+      if (!isValid(dateObj)) return "Invalid Time";
+      const tz = defaultTimezone || "UTC";
+      if (formatString) {
+        return 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 = useCallback(
+    (date, formatString) => {
+      const dateObj = typeof date === "string" ? parseISO(date) : date;
+      if (!isValid(dateObj)) return "Invalid Date/Time";
+      const tz = defaultTimezone || "UTC";
+      if (formatString) {
+        return 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 = 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 = 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 = {
@@ -14577,16 +14701,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) {
@@ -14603,35 +14727,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;
@@ -16738,23 +16862,35 @@ var HourlyOutputChart = ({
   const [animatedData, setAnimatedData] = React14__default.useState(Array(SHIFT_DURATION).fill(0));
   const prevDataRef = React14__default.useRef(Array(SHIFT_DURATION).fill(0));
   const animationFrameRef = React14__default.useRef(null);
-  const [shouldAnimateIdle, setShouldAnimateIdle] = React14__default.useState(false);
+  const [idleBarState, setIdleBarState] = React14__default.useState({
+    visible: showIdleTime,
+    key: 0,
+    shouldAnimate: false
+  });
   const prevShowIdleTimeRef = React14__default.useRef(showIdleTime);
-  const animationTimeoutRef = React14__default.useRef(null);
+  const stateUpdateTimeoutRef = React14__default.useRef(null);
   React14__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]);
@@ -16847,6 +16983,55 @@ var HourlyOutputChart = ({
       };
     });
   }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, formatHour, formatTimeRange]);
+  const IdleBar = React14__default.useMemo(() => {
+    if (!idleBarState.visible) return null;
+    return /* @__PURE__ */ jsx(
+      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__ */ jsx(
+          LabelList,
+          {
+            dataKey: "idleMinutes",
+            position: "top",
+            content: (props) => {
+              const { x, y, width, value } = props;
+              if (!value || value === 0) return null;
+              return /* @__PURE__ */ 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);
@@ -17104,51 +17289,7 @@ var HourlyOutputChart = ({
               ]
             }
           ),
-          showIdleTime && /* @__PURE__ */ jsx(
-            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__ */ jsx(
-                LabelList,
-                {
-                  dataKey: "idleMinutes",
-                  position: "top",
-                  content: (props) => {
-                    const { x, y, width, value } = props;
-                    if (!value || value === 0) return null;
-                    return /* @__PURE__ */ 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__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("pattern", { id: "idlePattern", patternUnits: "userSpaceOnUse", width: "4", height: "4", children: [
             /* @__PURE__ */ jsx("rect", { width: "4", height: "4", fill: "#9ca3af", opacity: "0.2" }),
             /* @__PURE__ */ 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" })
@@ -17159,15 +17300,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__default.memo(({
   workspace,
   hlsUrl,
@@ -17175,14 +17316,29 @@ var VideoCard = React14__default.memo(({
   onClick,
   onFatalError,
   isVeryLowEfficiency = false,
+  cropping,
+  canvasFps = 30,
+  useRAF = true,
   className = ""
 }) => {
   const videoRef = useRef(null);
-  useHlsStream(videoRef, {
-    src: hlsUrl,
-    shouldPlay,
-    onFatalError: onFatalError ?? (() => throttledReloadDashboard())
-  });
+  const canvasRef = 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) => {
@@ -17237,17 +17393,26 @@ var VideoCard = React14__default.memo(({
             /* @__PURE__ */ jsx(Camera, { className: "w-6 h-6 text-gray-500" }),
             /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500 mt-1", children: "Loading..." })
           ] }) }),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10", children: /* @__PURE__ */ jsx(
-            "video",
-            {
-              ref: videoRef,
-              className: "h-full w-full object-cover",
-              playsInline: true,
-              muted: true,
-              disablePictureInPicture: true,
-              controlsList: "nodownload noplaybackrate"
-            }
-          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10", children: [
+            /* @__PURE__ */ jsx(
+              "video",
+              {
+                ref: videoRef,
+                className: `h-full w-full object-cover ${cropping ? "hidden" : ""}`,
+                playsInline: true,
+                muted: true,
+                disablePictureInPicture: true,
+                controlsList: "nodownload noplaybackrate"
+              }
+            ),
+            cropping && /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: canvasRef,
+                className: "h-full w-full object-cover"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx("div", { className: `absolute inset-0 z-20 pointer-events-none ${efficiencyOverlayClass}` }),
           /* @__PURE__ */ 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),
@@ -17283,7 +17448,7 @@ var VideoCard = React14__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 = {
@@ -17311,6 +17476,8 @@ var VideoGridView = React14__default.memo(({
   const observerRef = useRef(null);
   const [gridCols, setGridCols] = useState(4);
   const [visibleWorkspaces, setVisibleWorkspaces] = 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 }
@@ -17319,6 +17486,13 @@ var VideoGridView = React14__default.memo(({
     const wsName = workspaceName.toUpperCase();
     return mergedVideoSources.workspaceHlsUrls[wsName] || mergedVideoSources.defaultHlsUrl;
   }, [mergedVideoSources]);
+  const getWorkspaceCropping = useCallback((workspaceName) => {
+    if (!cropping) return void 0;
+    if (cropping.workspaceOverrides?.[workspaceName]) {
+      return cropping.workspaceOverrides[workspaceName];
+    }
+    return cropping.default;
+  }, [cropping]);
   const veryLowEfficiencyWorkspaces = useMemo(() => {
     return new Set(
       workspaces.filter((w) => w.efficiency < 50 && w.efficiency >= 10).map((w) => w.workspace_name)
@@ -17457,6 +17631,7 @@ var VideoGridView = React14__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__ */ jsx(
           "div",
           {
@@ -17471,7 +17646,10 @@ var VideoGridView = React14__default.memo(({
                 shouldPlay: isVisible,
                 onClick: () => handleWorkspaceClick(workspace),
                 onFatalError: throttledReloadDashboard,
-                isVeryLowEfficiency
+                isVeryLowEfficiency,
+                cropping: workspaceCropping,
+                canvasFps: canvasConfig?.fps,
+                useRAF: canvasConfig?.useRAF
               }
             )
           },
@@ -19584,6 +19762,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);
@@ -19602,20 +19806,20 @@ var WorkspaceHistoryCalendar = ({
 }) => {
   const { dateTimeConfig } = useDashboardConfig();
   const configuredTimezone = dateTimeConfig?.defaultTimezone || "Asia/Kolkata";
+  const [animationComplete, setAnimationComplete] = useState(false);
+  useEffect(() => {
+    setAnimationComplete(false);
+    const timer = setTimeout(() => {
+      setAnimationComplete(true);
+    }, 600);
+    return () => clearTimeout(timer);
+  }, [month, year]);
   const calendarData = useMemo(() => {
     const startOfMonth = toZonedTime(new Date(year, month, 1), configuredTimezone);
     const endOfMonth = 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);
@@ -19629,15 +19833,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) {
@@ -19648,32 +19843,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 = useMemo(() => {
     const validDays = data.filter((day) => {
@@ -19690,15 +19863,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 = useCallback((day, shift) => {
@@ -19746,7 +19921,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";
@@ -19785,38 +19959,55 @@ var WorkspaceHistoryCalendar = ({
       ] })
     ] }) });
   };
-  const renderDayCell = useCallback((day) => {
-    if (!day) return /* @__PURE__ */ jsx("div", { className: "h-full border border-gray-100 rounded-lg bg-gray-50 transition-all duration-200 ease-in-out" });
+  const renderDayCell = useCallback((day, dayNumber, index) => {
+    if (dayNumber === null) {
+      return /* @__PURE__ */ jsx("div", { className: "h-full" });
+    }
+    const cellDate = 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__ */ 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__ */ jsx("div", { className: "p-2", children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: `space-y-6 ${className || ""}`, children: [
+  }, [selectedShift, isCurrentDate, isFutureDate, getPerformanceColor, handleDayClick, year, month, configuredTimezone, animationComplete]);
+  return /* @__PURE__ */ jsxs("div", { className: `calendar-wrapper space-y-6 ${className || ""} ${animationComplete ? "animation-complete" : ""}`, children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: styles } }),
     /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1 border border-gray-200 rounded-lg p-1 bg-gray-50", children: [
       /* @__PURE__ */ 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"
         }
       ),
@@ -19824,23 +20015,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__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
-      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "mb-6", children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900 text-lg", children: selectedShift === "day" ? "Day Shifts" : "Night Shifts" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Calendar view of daily performance" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-6", children: [
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: WEEKDAYS2.map((day) => /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-600 text-center", children: day }, day)) }),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: calendarData.map((day, index) => /* @__PURE__ */ jsx("div", { className: "aspect-square relative transition-all duration-200 ease-in-out", children: renderDayCell(day) }, index)) })
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6 transition-all duration-200 ease-in-out", children: [
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "mb-6", children: [
           /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900 text-lg", children: "Monthly Summary" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Overview of monthly performance metrics" })
@@ -22298,12 +22493,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",
@@ -22411,7 +22606,7 @@ var WorkspaceGridItem = React14__default.memo(({
   }, [data.efficiency, isInactive, position.size, position.orientation]);
   const { arrow, color: arrowColor } = useMemo(() => getTrendArrowAndColor2(data.trend_score), [data.trend_score]);
   const workspaceNumber = useMemo(() => getWorkspaceNumber(data.workspace_name), [data.workspace_name]);
-  const styles = useMemo(() => getWorkspaceStyles(position, isInactive), [position, isInactive]);
+  const styles2 = useMemo(() => getWorkspaceStyles(position, isInactive), [position, isInactive]);
   const arrowPosition = useMemo(() => getArrowPositionClass(position), [position]);
   const handleClick = useCallback((e) => {
     e.preventDefault();
@@ -22462,7 +22657,7 @@ var WorkspaceGridItem = React14__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__ */ jsx("div", { className: `font-semibold tracking-wide text-[min(4vw,2rem)] uppercase ${isInactive ? "text-gray-400" : "text-white"} drop-shadow-sm`, children: workspaceNumber })
@@ -29973,6 +30168,11 @@ var WorkspaceDetailView = ({
     return getOperationalDate();
   }, [isHistoricView, date]);
   const handleMonthlyDataLoaded = 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([]);
@@ -29990,22 +30190,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)
@@ -30465,7 +30678,7 @@ var WorkspaceDetailView = ({
                 }
               )
             ] }),
-            monthlyDataLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-5rem)]", children: /* @__PURE__ */ jsx("div", { className: "text-xl text-gray-600", children: "Loading monthly data..." }) }) : /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(
               WorkspaceHistoryCalendar,
               {
                 data: monthlyData,
@@ -30744,4 +30957,4 @@ var S3Service = class {
   }
 };
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedTargetsView, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, EmptyStateMessage, FactoryView_default as FactoryView, GridComponentsPlaceholder, Header, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend5 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSpinner_default as LoadingSpinner, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OutputProgressChart, PageHeader, ProfileView_default as ProfileView, RegistryProvider, S3Service, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SlackAPI, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceGrid, WorkspaceGridItem, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultTabForWorkspace, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isTransitionPeriod, isValidLineInfoPayload, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, optifyeAgentClient, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, s3VideoPreloader, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAnalyticsConfig, useAuth, useAuthConfig, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHookOverride, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, useRealtimeLineMetrics, useRegistry, useShiftConfig, useShifts, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPreloader, whatsappService, withAuth, withRegistry, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedTargetsView, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, EmptyStateMessage, FactoryView_default as FactoryView, GridComponentsPlaceholder, Header, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend5 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSpinner_default as LoadingSpinner, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OutputProgressChart, PageHeader, ProfileView_default as ProfileView, RegistryProvider, S3Service, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SlackAPI, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceGrid, WorkspaceGridItem, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultTabForWorkspace, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isTransitionPeriod, isValidLineInfoPayload, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, optifyeAgentClient, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, s3VideoPreloader, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAnalyticsConfig, useAuth, useAuthConfig, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, useRealtimeLineMetrics, useRegistry, useShiftConfig, useShifts, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPreloader, whatsappService, withAuth, withRegistry, workspaceService };