@optifye/dashboard-core 6.6.7 → 6.6.8

package/dist/index.mjs

@@ -1,12 +1,12 @@
-import * as React20 from 'react';
-import React20__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, memo, forwardRef, useImperativeHandle, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, Fragment as Fragment$1, createElement, Component } from 'react';
+import * as React21 from 'react';
+import React21__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, memo, forwardRef, useImperativeHandle, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, Fragment as Fragment$1, createElement, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
 import { toZonedTime, formatInTimeZone } from 'date-fns-tz';
 import { subDays, format, parseISO, isValid, formatDistanceToNow, isFuture, isToday } from 'date-fns';
 import mixpanel from 'mixpanel-browser';
 import { EventEmitter } from 'events';
-import { REALTIME_SUBSCRIBE_STATES, createClient } from '@supabase/supabase-js';
+import { createClient, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js';
 import Hls2 from 'hls.js';
 import useSWR from 'swr';
 import { noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds, memo as memo$1 } from 'motion-utils';
@@ -153,8 +153,9 @@ var DEFAULT_WORKSPACE_CONFIG = {
   totalWorkspaces: 42
 };
 var DEFAULT_DATE_TIME_CONFIG = {
-  defaultTimezone: "Asia/Kolkata",
-  defaultLocale: "en-IN",
+  defaultTimezone: "UTC",
+  // Should be overridden by database timezone
+  defaultLocale: "en-US",
   dateFormatOptions: {
     day: "2-digit",
     month: "short",
@@ -268,14 +269,14 @@ var _getDashboardConfigInstance = () => {
   }
   return dashboardConfigInstance;
 };
-var DashboardConfigContext = React20.createContext(void 0);
+var DashboardConfigContext = React21.createContext(void 0);
 var DashboardProvider = ({ config: userProvidedConfig, children }) => {
-  const fullConfig = React20.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
+  const fullConfig = React21.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
   _setDashboardConfigInstance(fullConfig);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     _setDashboardConfigInstance(fullConfig);
   }, [fullConfig]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!fullConfig.theme) return;
     const styleId = "dashboard-core-theme-vars";
     let styleEl = document.getElementById(styleId);
@@ -301,7 +302,7 @@ var DashboardProvider = ({ config: userProvidedConfig, children }) => {
   return /* @__PURE__ */ jsx(DashboardConfigContext.Provider, { value: fullConfig, children });
 };
 var useDashboardConfig = () => {
-  const ctx = React20.useContext(DashboardConfigContext);
+  const ctx = React21.useContext(DashboardConfigContext);
   if (!ctx) throw new Error("useDashboardConfig must be used within a DashboardProvider");
   return ctx;
 };
@@ -426,7 +427,7 @@ var memoizedOutputArrayAggregation = createMemoizedFunction(
   },
   (arrays) => arrays.map((arr) => arr.length).join("-")
 );
-var getOperationalDate = (timezone = "Asia/Kolkata", date = /* @__PURE__ */ new Date(), shiftStartTime = "06:00") => {
+var getOperationalDate = (timezone, date = /* @__PURE__ */ new Date(), shiftStartTime = "06:00") => {
   const zonedDate = toZonedTime(date, timezone);
   const hours = zonedDate.getHours();
   const [startHour = 6] = shiftStartTime.split(":").map(Number);
@@ -1888,7 +1889,7 @@ var workspaceService = {
     }
     const totalDayOutput = outputWorkspaces.reduce((sum, ws) => sum + (ws.action_total_day_output || 0), 0);
     const totalPPH = outputWorkspaces.reduce((sum, ws) => sum + (ws.action_pph_threshold || 0), 0);
-    const operationalDate = getOperationalDate(defaultTimezone);
+    const operationalDate = getOperationalDate(defaultTimezone || "UTC");
     const thresholdData = {
       factory_id: configuredFactoryId,
       line_id: lineId,
@@ -4528,6 +4529,154 @@ var createSupervisorService = (supabase) => {
 var simulateApiDelay = (ms = 1e3) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
+var TimezoneService = class _TimezoneService {
+  constructor() {
+    this.timezoneCache = /* @__PURE__ */ new Map();
+    this.supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || "";
+    this.supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || "";
+  }
+  static getInstance() {
+    if (!_TimezoneService.instance) {
+      _TimezoneService.instance = new _TimezoneService();
+    }
+    return _TimezoneService.instance;
+  }
+  /**
+   * Fetch timezone for a specific line from Supabase
+   */
+  async getTimezoneForLine(lineId, defaultTimezone = "Asia/Kolkata") {
+    if (this.timezoneCache.has(lineId)) {
+      return this.timezoneCache.get(lineId);
+    }
+    try {
+      const supabase = createClient(this.supabaseUrl, this.supabaseAnonKey);
+      const { data, error } = await supabase.from("line_operating_hours").select("timezone").eq("line_id", lineId).order("created_at", { ascending: false }).limit(1).single();
+      if (error) {
+        console.warn(`Failed to fetch timezone for line ${lineId}:`, error);
+        return defaultTimezone;
+      }
+      if (data?.timezone) {
+        this.timezoneCache.set(lineId, data.timezone);
+        return data.timezone;
+      }
+      return defaultTimezone;
+    } catch (error) {
+      console.error("Error fetching timezone:", error);
+      return defaultTimezone;
+    }
+  }
+  /**
+   * Fetch timezone for a company's factory
+   */
+  async getTimezoneForCompany(companyId, defaultTimezone = "Asia/Kolkata") {
+    const cacheKey = `company-${companyId}`;
+    if (this.timezoneCache.has(cacheKey)) {
+      return this.timezoneCache.get(cacheKey);
+    }
+    try {
+      const supabase = createClient(this.supabaseUrl, this.supabaseAnonKey);
+      const { data, error } = await supabase.from("line_operating_hours").select(`
+          timezone,
+          line:lines!inner(
+            company_id
+          )
+        `).eq("lines.company_id", companyId).order("created_at", { ascending: false }).limit(1);
+      if (error) {
+        console.warn(`Failed to fetch timezone for company ${companyId}:`, error);
+        return defaultTimezone;
+      }
+      if (data?.[0]?.timezone) {
+        this.timezoneCache.set(cacheKey, data[0].timezone);
+        return data[0].timezone;
+      }
+      return defaultTimezone;
+    } catch (error) {
+      console.error("Error fetching company timezone:", error);
+      return defaultTimezone;
+    }
+  }
+  /**
+   * Fetch timezone for a workspace
+   */
+  async getTimezoneForWorkspace(workspaceId, defaultTimezone = "Asia/Kolkata") {
+    const cacheKey = `workspace-${workspaceId}`;
+    if (this.timezoneCache.has(cacheKey)) {
+      return this.timezoneCache.get(cacheKey);
+    }
+    try {
+      const supabase = createClient(this.supabaseUrl, this.supabaseAnonKey);
+      const { data: workspaceData, error: workspaceError } = await supabase.from("workspaces").select("line_id").eq("id", workspaceId).single();
+      if (workspaceError) {
+        console.warn(`Failed to fetch workspace ${workspaceId}:`, workspaceError);
+        return defaultTimezone;
+      }
+      if (workspaceData?.line_id) {
+        return this.getTimezoneForLine(workspaceData.line_id, defaultTimezone);
+      }
+      const { data: cameraData, error: cameraError } = await supabase.from("cameras").select("line_id").eq("workspace_id", workspaceId).limit(1).single();
+      if (!cameraError && cameraData?.line_id) {
+        return this.getTimezoneForLine(cameraData.line_id, defaultTimezone);
+      }
+      return defaultTimezone;
+    } catch (error) {
+      console.error("Error fetching workspace timezone:", error);
+      return defaultTimezone;
+    }
+  }
+  /**
+   * Batch fetch timezones for multiple lines
+   */
+  async getTimezonesForLines(lineIds, defaultTimezone = "Asia/Kolkata") {
+    const result = /* @__PURE__ */ new Map();
+    const uncachedLineIds = lineIds.filter((id3) => !this.timezoneCache.has(id3));
+    if (uncachedLineIds.length === 0) {
+      lineIds.forEach((id3) => {
+        result.set(id3, this.timezoneCache.get(id3) || defaultTimezone);
+      });
+      return result;
+    }
+    try {
+      const supabase = createClient(this.supabaseUrl, this.supabaseAnonKey);
+      const { data, error } = await supabase.from("line_operating_hours").select("line_id, timezone").in("line_id", uncachedLineIds).order("created_at", { ascending: false });
+      if (error) {
+        console.warn("Failed to fetch timezones for lines:", error);
+        lineIds.forEach((id3) => result.set(id3, defaultTimezone));
+        return result;
+      }
+      const timezoneMap = /* @__PURE__ */ new Map();
+      data?.forEach((item) => {
+        if (!timezoneMap.has(item.line_id)) {
+          timezoneMap.set(item.line_id, item.timezone);
+          this.timezoneCache.set(item.line_id, item.timezone);
+        }
+      });
+      lineIds.forEach((id3) => {
+        const timezone = this.timezoneCache.get(id3) || timezoneMap.get(id3) || defaultTimezone;
+        result.set(id3, timezone);
+      });
+      return result;
+    } catch (error) {
+      console.error("Error batch fetching timezones:", error);
+      lineIds.forEach((id3) => result.set(id3, defaultTimezone));
+      return result;
+    }
+  }
+  /**
+   * Clear timezone cache
+   */
+  clearCache() {
+    this.timezoneCache.clear();
+  }
+  /**
+   * Clear specific entry from cache
+   */
+  clearCacheEntry(key) {
+    this.timezoneCache.delete(key);
+    this.timezoneCache.delete(`company-${key}`);
+    this.timezoneCache.delete(`workspace-${key}`);
+  }
+};
+var timezoneService = TimezoneService.getInstance();
 var AuthContext = createContext({
   session: null,
   user: null,
@@ -5001,18 +5150,96 @@ var useClipFilter = () => {
   }
   return context;
 };
+var TimezoneContext = createContext(void 0);
+function TimezoneProvider({
+  children,
+  workspaceId: propWorkspaceId,
+  lineId: propLineId,
+  companyId: propCompanyId,
+  fallbackTimezone = "Asia/Kolkata"
+  // Last resort fallback ONLY
+}) {
+  const dashboardConfig = useDashboardConfig();
+  const workspaceConfig = useWorkspaceConfig();
+  const [timezone, setTimezone] = useState(fallbackTimezone);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const workspaceId = propWorkspaceId || (workspaceConfig && typeof workspaceConfig === "object" && "id" in workspaceConfig ? workspaceConfig.id : void 0);
+  const lineId = propLineId;
+  const companyId = propCompanyId || (dashboardConfig && typeof dashboardConfig === "object" && "company" in dashboardConfig ? dashboardConfig.company?.id : void 0);
+  const fetchTimezone = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      let fetchedTimezone = null;
+      if (lineId) {
+        console.log(`[TimezoneContext] Fetching timezone for line: ${lineId}`);
+        fetchedTimezone = await timezoneService.getTimezoneForLine(lineId, fallbackTimezone);
+      } else if (workspaceId) {
+        console.log(`[TimezoneContext] Fetching timezone for workspace: ${workspaceId}`);
+        fetchedTimezone = await timezoneService.getTimezoneForWorkspace(workspaceId, fallbackTimezone);
+      } else if (companyId) {
+        console.log(`[TimezoneContext] Fetching timezone for company: ${companyId}`);
+        fetchedTimezone = await timezoneService.getTimezoneForCompany(companyId, fallbackTimezone);
+      } else {
+        console.warn("[TimezoneContext] No ID available to fetch timezone, using fallback");
+        fetchedTimezone = fallbackTimezone;
+      }
+      console.log(`[TimezoneContext] Timezone resolved to: ${fetchedTimezone}`);
+      if (fetchedTimezone === fallbackTimezone) {
+        console.warn(`[TimezoneContext] WARNING: Using fallback timezone ${fallbackTimezone}. This should not happen in production!`);
+      }
+      setTimezone(fetchedTimezone);
+    } catch (err) {
+      console.error("[TimezoneContext] Error fetching timezone:", err);
+      setError(err instanceof Error ? err : new Error("Failed to fetch timezone"));
+      console.error(`[TimezoneContext] CRITICAL: Failed to fetch timezone from database, falling back to ${fallbackTimezone}`);
+      setTimezone(fallbackTimezone);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    fetchTimezone();
+  }, [lineId, workspaceId, companyId]);
+  const value = {
+    timezone,
+    isLoading,
+    error,
+    refetch: fetchTimezone
+  };
+  return /* @__PURE__ */ jsx(TimezoneContext.Provider, { value, children });
+}
+function useTimezoneContext() {
+  const context = useContext(TimezoneContext);
+  if (!context) {
+    throw new Error("useTimezoneContext must be used within TimezoneProvider");
+  }
+  return context;
+}
+function useAppTimezone() {
+  const { timezone } = useTimezoneContext();
+  return timezone;
+}
+function withTimezone(Component3) {
+  return function WithTimezoneComponent(props) {
+    const timezone = useAppTimezone();
+    return /* @__PURE__ */ jsx(Component3, { ...props, timezone });
+  };
+}
 var DEFAULT_COMPANY_ID = "default-company-id";
 var useWorkspaceMetrics = (workspaceId) => {
   const supabase = useSupabase();
   const entityConfig = useEntityConfig();
   useDatabaseConfig();
   const dateTimeConfig = useDateTimeConfig();
+  const timezone = useAppTimezone();
   const [workspaceMetrics, setWorkspaceMetrics] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const fetchWorkspaceMetrics = useCallback(async () => {
     try {
-      const operationalDate = getOperationalDate(dateTimeConfig.defaultTimezone);
+      const operationalDate = getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
       const { data, error: fetchError } = await supabase.from("overview_workspace_metrics").select("*").eq("workspace_id", workspaceId).eq("date", operationalDate).single();
       if (fetchError) throw fetchError;
       setWorkspaceMetrics(data);
@@ -5025,7 +5252,7 @@ var useWorkspaceMetrics = (workspaceId) => {
   }, [supabase, workspaceId, dateTimeConfig.defaultTimezone]);
   useEffect(() => {
     let channels = [];
-    const operationalDate = getOperationalDate(dateTimeConfig.defaultTimezone);
+    const operationalDate = getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
     const setupSubscriptions = () => {
       const companyId = entityConfig.companyId || DEFAULT_COMPANY_ID;
       const metricsTablePrefix = getMetricsTablePrefix();
@@ -5076,12 +5303,13 @@ var useWorkspaceMetrics = (workspaceId) => {
 var useLineMetrics = (lineId) => {
   const supabase = useSupabase();
   const dateTimeConfig = useDateTimeConfig();
+  const timezone = useAppTimezone();
   const [lineMetrics, setLineMetrics] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const fetchLineMetrics = useCallback(async () => {
     try {
-      const operationalDate = getOperationalDate(dateTimeConfig.defaultTimezone);
+      const operationalDate = getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
       const { data, error: fetchError } = await supabase.from("overview_line_metrics").select("*").eq("line_id", lineId).eq("date", operationalDate).single();
       if (fetchError) throw fetchError;
       setLineMetrics(data);
@@ -5094,7 +5322,7 @@ var useLineMetrics = (lineId) => {
   }, [supabase, lineId, dateTimeConfig.defaultTimezone]);
   useEffect(() => {
     let channels = [];
-    const operationalDate = getOperationalDate(dateTimeConfig.defaultTimezone);
+    const operationalDate = getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
     const setupSubscriptions = () => {
       const lineMetricsChannel = supabase.channel("line-base-metrics").on(
         "postgres_changes",
@@ -5729,7 +5957,7 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
       return;
     }
     const channels = [];
-    const operationalDate = date || getOperationalDate();
+    const operationalDate = date || getOperationalDate(defaultTimezone || "UTC");
     const currentShift = getCurrentShift(defaultTimezone, shiftConfig);
     const queryShiftId = shiftId ?? currentShift.shiftId;
     const metricsChannel = supabase.channel(`workspace-metrics-${workspaceId}`).on(
@@ -5833,6 +6061,7 @@ var useLineWorkspaceMetrics = (lineId, options) => {
   const databaseConfig = useDatabaseConfig();
   const dateTimeConfig = useDateTimeConfig();
   const shiftConfig = useShiftConfig();
+  const timezone = useAppTimezone();
   const supabase = useSupabase();
   const [workspaces, setWorkspaces] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -5846,8 +6075,8 @@ var useLineWorkspaceMetrics = (lineId, options) => {
     return options?.initialShiftId !== void 0 ? options.initialShiftId : currentShift.shiftId;
   }, [options?.initialShiftId, dateTimeConfig.defaultTimezone, shiftConfig]);
   const queryDate = useMemo(() => {
-    return options?.initialDate || getOperationalDate(dateTimeConfig.defaultTimezone);
-  }, [options?.initialDate, dateTimeConfig.defaultTimezone]);
+    return options?.initialDate || getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
+  }, [options?.initialDate, timezone, dateTimeConfig.defaultTimezone]);
   const metricsTable = useMemo(() => {
     const companyId = entityConfig.companyId;
     if (!companyId) return "";
@@ -6634,7 +6863,8 @@ var useRealtimeLineMetrics = ({
     () => urlShiftId !== void 0 ? urlShiftId : currentShift.shiftId,
     [urlShiftId, currentShift.shiftId]
   );
-  const date = useMemo(() => urlDate || getOperationalDate(dateTimeConfig.defaultTimezone), [urlDate, dateTimeConfig.defaultTimezone]);
+  const timezone = useAppTimezone();
+  const date = useMemo(() => urlDate || getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC"), [urlDate, timezone, dateTimeConfig.defaultTimezone]);
   const fetchData = useCallback(async () => {
     try {
       if (!lineIdRef.current || isFetchingRef.current) return;
@@ -6874,7 +7104,7 @@ var useRealtimeLineMetrics = ({
         if (process.env.NODE_ENV === "development") {
           console.log("Line metrics update received:", payloadData);
         }
-        const currentDate = urlDate || getOperationalDate(dateTimeConfig.defaultTimezone);
+        const currentDate = urlDate || getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
         if (payloadData?.date === currentDate && payloadData?.shift_id === shiftId) {
           queueUpdate();
         }
@@ -6897,7 +7127,7 @@ var useRealtimeLineMetrics = ({
         if (process.env.NODE_ENV === "development") {
           console.log(`${metricsTablePrefix} update received:`, payloadData);
         }
-        const currentDate = urlDate || getOperationalDate(dateTimeConfig.defaultTimezone);
+        const currentDate = urlDate || getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
         if (payloadData?.date === currentDate && payloadData?.shift_id === shiftId) {
           queueUpdate();
         }
@@ -8212,6 +8442,7 @@ var useAllWorkspaceMetrics = (options) => {
   const databaseConfig = useDatabaseConfig();
   const dateTimeConfig = useDateTimeConfig();
   const shiftConfig = useShiftConfig();
+  const timezone = useAppTimezone();
   const supabase = useSupabase();
   const [workspaces, setWorkspaces] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -8225,8 +8456,8 @@ var useAllWorkspaceMetrics = (options) => {
     return options?.initialShiftId !== void 0 ? options.initialShiftId : currentShift.shiftId;
   }, [options?.initialShiftId, dateTimeConfig.defaultTimezone, shiftConfig]);
   const queryDate = useMemo(() => {
-    return options?.initialDate || getOperationalDate(dateTimeConfig.defaultTimezone);
-  }, [options?.initialDate, dateTimeConfig.defaultTimezone]);
+    return options?.initialDate || getOperationalDate(timezone || dateTimeConfig.defaultTimezone || "UTC");
+  }, [options?.initialDate, timezone, dateTimeConfig.defaultTimezone]);
   const metricsTable = useMemo(() => {
     const companyId = entityConfig.companyId;
     if (!companyId) return "";
@@ -12231,7 +12462,7 @@ var MotionConfigContext = createContext({
 });
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
-var PopChildMeasure = class extends React20.Component {
+var PopChildMeasure = class extends React21.Component {
   getSnapshotBeforeUpdate(prevProps) {
     const element = this.props.childRef.current;
     if (element && prevProps.isPresent && !this.props.isPresent) {
@@ -12286,7 +12517,7 @@ function PopChild({ children, isPresent }) {
       document.head.removeChild(style);
     };
   }, [isPresent]);
-  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React20.cloneElement(children, { ref }) });
+  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React21.cloneElement(children, { ref }) });
 }
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
@@ -12323,7 +12554,7 @@ var PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, pre
   useMemo(() => {
     presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
   }, [isPresent]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
   }, [isPresent]);
   if (mode === "popLayout") {
@@ -19607,7 +19838,7 @@ var LoadingPage = ({
   subMessage = "Please wait while we prepare your data",
   className
 }) => {
-  React20__default.useEffect(() => {
+  React21__default.useEffect(() => {
     console.log("LoadingPage rendered with message:", message);
     const timeout = setTimeout(() => {
       console.warn("LoadingPage has been visible for more than 8 seconds. This might indicate an issue.");
@@ -19648,15 +19879,15 @@ var withAuth = (WrappedComponent2, options) => {
     requireAuth: true,
     ...options
   };
-  const WithAuthComponent = React20.memo(function WithAuthComponent2(props) {
+  const WithAuthComponent = React21.memo(function WithAuthComponent2(props) {
     const { session, loading, error } = useAuth();
     const router = useRouter();
-    React20.useEffect(() => {
+    React21.useEffect(() => {
       if (process.env.NODE_ENV === "development" && process.env.DEBUG_AUTH === "true") {
         console.log("withAuth state:", { loading, hasSession: !!session, requireAuth: defaultOptions.requireAuth });
       }
     }, [session, loading]);
-    React20.useEffect(() => {
+    React21.useEffect(() => {
       if (!loading && defaultOptions.requireAuth && !session && !error) {
         console.log("Redirecting to login from withAuth");
         router.replace(defaultOptions.redirectTo);
@@ -20032,11 +20263,11 @@ var BarChartComponent = ({
   aspect = 2,
   ...restOfChartProps
 }) => {
-  const containerRef = React20__default.useRef(null);
-  const [containerReady, setContainerReady] = React20__default.useState(false);
+  const containerRef = React21__default.useRef(null);
+  const [containerReady, setContainerReady] = React21__default.useState(false);
   const themeConfig = useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  React20__default.useEffect(() => {
+  React21__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -20134,7 +20365,7 @@ var BarChartComponent = ({
   }
   return /* @__PURE__ */ jsx("div", { className: clsx("w-full", className), children: chartContent });
 };
-var BarChart = React20__default.memo(BarChartComponent, (prevProps, nextProps) => {
+var BarChart = React21__default.memo(BarChartComponent, (prevProps, nextProps) => {
   if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || prevProps.layout !== nextProps.layout || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect) {
     return false;
   }
@@ -20182,11 +20413,11 @@ var LineChartComponent = ({
   aspect = 2,
   ...restOfChartProps
 }) => {
-  const containerRef = React20__default.useRef(null);
-  const [containerReady, setContainerReady] = React20__default.useState(false);
+  const containerRef = React21__default.useRef(null);
+  const [containerReady, setContainerReady] = React21__default.useState(false);
   const themeConfig = useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  React20__default.useEffect(() => {
+  React21__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -20285,7 +20516,7 @@ var LineChartComponent = ({
   }
   return /* @__PURE__ */ jsx("div", { className: clsx("w-full", className), children: chartContent });
 };
-var LineChart = React20__default.memo(LineChartComponent, (prevProps, nextProps) => {
+var LineChart = React21__default.memo(LineChartComponent, (prevProps, nextProps) => {
   if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect || JSON.stringify(prevProps.yAxisDomain) !== JSON.stringify(nextProps.yAxisDomain)) {
     return false;
   }
@@ -20362,7 +20593,7 @@ var OutputProgressChartComponent = ({
     ] }) })
   ] }) });
 };
-var OutputProgressChart = React20__default.memo(OutputProgressChartComponent);
+var OutputProgressChart = React21__default.memo(OutputProgressChartComponent);
 OutputProgressChart.displayName = "OutputProgressChart";
 var LargeOutputProgressChart = ({
   currentOutput,
@@ -20478,7 +20709,7 @@ var CycleTimeChartComponent = ({
     }
   ) }) });
 };
-var CycleTimeChart = React20__default.memo(CycleTimeChartComponent, (prevProps, nextProps) => {
+var CycleTimeChart = React21__default.memo(CycleTimeChartComponent, (prevProps, nextProps) => {
   if (prevProps.className !== nextProps.className) {
     return false;
   }
@@ -20504,8 +20735,8 @@ var CycleTimeOverTimeChart = ({
   className = ""
 }) => {
   const MAX_DATA_POINTS = 40;
-  const containerRef = React20__default.useRef(null);
-  const [containerReady, setContainerReady] = React20__default.useState(false);
+  const containerRef = React21__default.useRef(null);
+  const [containerReady, setContainerReady] = React21__default.useState(false);
   const getHourFromTimeString = (timeStr) => {
     const [hours, minutes] = timeStr.split(":");
     return parseInt(hours);
@@ -20516,10 +20747,10 @@ var CycleTimeOverTimeChart = ({
   };
   const displayData = getDisplayData(data);
   const DURATION = displayData.length;
-  const [animatedData, setAnimatedData] = React20__default.useState(Array(DURATION).fill(0));
-  const prevDataRef = React20__default.useRef(Array(DURATION).fill(0));
-  const animationFrameRef = React20__default.useRef(null);
-  const animateToNewData = React20__default.useCallback((targetData) => {
+  const [animatedData, setAnimatedData] = React21__default.useState(Array(DURATION).fill(0));
+  const prevDataRef = React21__default.useRef(Array(DURATION).fill(0));
+  const animationFrameRef = React21__default.useRef(null);
+  const animateToNewData = React21__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -20549,7 +20780,7 @@ var CycleTimeOverTimeChart = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React20__default.useEffect(() => {
+  React21__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const processedData = getDisplayData(data);
       animateToNewData(processedData);
@@ -20560,7 +20791,7 @@ var CycleTimeOverTimeChart = ({
       }
     };
   }, [data, animateToNewData]);
-  React20__default.useEffect(() => {
+  React21__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -20803,7 +21034,7 @@ var CycleTimeOverTimeChart = ({
     }
   );
 };
-var Card = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -20815,7 +21046,7 @@ var Card = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -20824,7 +21055,7 @@ var CardHeader = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -20836,7 +21067,7 @@ var CardTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -20845,9 +21076,9 @@ var CardDescription = React20.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -20923,7 +21154,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React20.forwardRef(
+var Button = React21.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -20946,8 +21177,8 @@ var HourlyOutputChartComponent = ({
   idleTimeHourly,
   className = ""
 }) => {
-  const containerRef = React20__default.useRef(null);
-  const [containerReady, setContainerReady] = React20__default.useState(false);
+  const containerRef = React21__default.useRef(null);
+  const [containerReady, setContainerReady] = React21__default.useState(false);
   const getTimeFromTimeString = (timeStr) => {
     const [hours, minutes] = timeStr.split(":");
     const hour = parseInt(hours);
@@ -20956,7 +21187,7 @@ var HourlyOutputChartComponent = ({
     return { hour, minute, decimalHour };
   };
   const shiftStartTime = getTimeFromTimeString(shiftStart);
-  const { shiftDuration, shiftEndTime, hasPartialLastHour } = React20__default.useMemo(() => {
+  const { shiftDuration, shiftEndTime, hasPartialLastHour } = React21__default.useMemo(() => {
     console.log("[HourlyOutputChart] Calculating shift duration with:", {
       shiftStart,
       shiftEnd,
@@ -20991,12 +21222,12 @@ var HourlyOutputChartComponent = ({
   }, [shiftEnd, shiftStartTime.decimalHour]);
   const SHIFT_DURATION = shiftDuration;
   shiftEndTime ? shiftEndTime.hour : (shiftStartTime.hour + SHIFT_DURATION) % 24;
-  const [animatedData, setAnimatedData] = React20__default.useState(
+  const [animatedData, setAnimatedData] = React21__default.useState(
     () => Array(SHIFT_DURATION).fill(0)
   );
-  const prevDataRef = React20__default.useRef(Array(SHIFT_DURATION).fill(0));
-  const animationFrameRef = React20__default.useRef(null);
-  React20__default.useEffect(() => {
+  const prevDataRef = React21__default.useRef(Array(SHIFT_DURATION).fill(0));
+  const animationFrameRef = React21__default.useRef(null);
+  React21__default.useEffect(() => {
     setAnimatedData((prev) => {
       if (prev.length !== SHIFT_DURATION) {
         return Array(SHIFT_DURATION).fill(0);
@@ -21005,14 +21236,14 @@ var HourlyOutputChartComponent = ({
     });
     prevDataRef.current = Array(SHIFT_DURATION).fill(0);
   }, [SHIFT_DURATION]);
-  const [idleBarState, setIdleBarState] = React20__default.useState({
+  const [idleBarState, setIdleBarState] = React21__default.useState({
     visible: showIdleTime,
     key: 0,
     shouldAnimate: false
   });
-  const prevShowIdleTimeRef = React20__default.useRef(showIdleTime);
-  const stateUpdateTimeoutRef = React20__default.useRef(null);
-  React20__default.useEffect(() => {
+  const prevShowIdleTimeRef = React21__default.useRef(showIdleTime);
+  const stateUpdateTimeoutRef = React21__default.useRef(null);
+  React21__default.useEffect(() => {
     if (stateUpdateTimeoutRef.current) {
       clearTimeout(stateUpdateTimeoutRef.current);
     }
@@ -21037,7 +21268,7 @@ var HourlyOutputChartComponent = ({
       }
     };
   }, [showIdleTime]);
-  const animateToNewData = React20__default.useCallback((targetData) => {
+  const animateToNewData = React21__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -21067,7 +21298,7 @@ var HourlyOutputChartComponent = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React20__default.useEffect(() => {
+  React21__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const shiftData = data.slice(0, SHIFT_DURATION);
       animateToNewData(shiftData);
@@ -21078,7 +21309,7 @@ var HourlyOutputChartComponent = ({
       }
     };
   }, [data, animateToNewData]);
-  React20__default.useEffect(() => {
+  React21__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -21100,7 +21331,7 @@ var HourlyOutputChartComponent = ({
       clearTimeout(fallbackTimeout);
     };
   }, []);
-  const formatHour = React20__default.useCallback((hourIndex) => {
+  const formatHour = React21__default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -21124,7 +21355,7 @@ var HourlyOutputChartComponent = ({
     };
     return `${formatTime3(startHour, startMinute)}-${formatTime3(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const formatTimeRange = React20__default.useCallback((hourIndex) => {
+  const formatTimeRange = React21__default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -21145,7 +21376,7 @@ var HourlyOutputChartComponent = ({
     };
     return `${formatTime3(startHour, startMinute)} - ${formatTime3(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const chartData = React20__default.useMemo(() => {
+  const chartData = React21__default.useMemo(() => {
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
       const actualHour = (shiftStartTime.hour + i) % 24;
       const startMinute = shiftStartTime.minute;
@@ -21214,7 +21445,7 @@ var HourlyOutputChartComponent = ({
       };
     });
   }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, shiftStartTime.minute, shiftEndTime, formatHour, formatTimeRange, SHIFT_DURATION]);
-  const IdleBar = React20__default.useMemo(() => {
+  const IdleBar = React21__default.useMemo(() => {
     if (!idleBarState.visible) return null;
     return /* @__PURE__ */ jsx(
       Bar,
@@ -21539,7 +21770,7 @@ var HourlyOutputChartComponent = ({
     }
   );
 };
-var HourlyOutputChart = React20__default.memo(HourlyOutputChartComponent, (prevProps, nextProps) => {
+var HourlyOutputChart = React21__default.memo(HourlyOutputChartComponent, (prevProps, nextProps) => {
   if (prevProps.pphThreshold !== nextProps.pphThreshold || prevProps.shiftStart !== nextProps.shiftStart || prevProps.showIdleTime !== nextProps.showIdleTime || prevProps.className !== nextProps.className) {
     return false;
   }
@@ -21575,7 +21806,7 @@ function getTrendArrowAndColor(trend) {
     return { arrow: "\u2192", color: "text-gray-400" };
   }
 }
-var VideoCard = React20__default.memo(({
+var VideoCard = React21__default.memo(({
   workspace,
   hlsUrl,
   shouldPlay,
@@ -21724,7 +21955,7 @@ var VideoCard = React20__default.memo(({
 });
 VideoCard.displayName = "VideoCard";
 var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
-var VideoGridView = React20__default.memo(({
+var VideoGridView = React21__default.memo(({
   workspaces,
   selectedLine,
   className = "",
@@ -22639,7 +22870,7 @@ var EmptyStateMessage = ({
   iconClassName
 }) => {
   let IconContent = null;
-  if (React20__default.isValidElement(iconType)) {
+  if (React21__default.isValidElement(iconType)) {
     IconContent = iconType;
   } else if (typeof iconType === "string") {
     const MappedIcon = IconMap[iconType];
@@ -23458,7 +23689,8 @@ var ShiftDisplay_default = ShiftDisplay;
 var TimeDisplay = ({ className, variant = "default" }) => {
   const { dateTimeConfig } = useDashboardConfig();
   const [time2, setTime] = useState("");
-  const timezoneToDisplay = dateTimeConfig?.defaultTimezone || "UTC";
+  const dbTimezone = useAppTimezone();
+  const timezoneToDisplay = dbTimezone || dateTimeConfig?.defaultTimezone || "UTC";
   const localeToUse = dateTimeConfig?.defaultLocale || "en-US";
   const timeSuffix = "";
   useEffect(() => {
@@ -23522,6 +23754,17 @@ var ISTTimer = memo(() => {
 });
 ISTTimer.displayName = "ISTTimer";
 var ISTTimer_default = ISTTimer;
+var TimeDisplay3 = TimeDisplay_default;
+var Timer = memo(() => {
+  return /* @__PURE__ */ jsx(
+    TimeDisplay3,
+    {
+      variant: "minimal"
+    }
+  );
+});
+Timer.displayName = "Timer";
+var Timer_default = Timer;
 var TicketHistory = ({ companyId }) => {
   const { tickets, loading, error } = useTicketHistory(companyId);
   const [expandedTickets, setExpandedTickets] = useState(/* @__PURE__ */ new Set());
@@ -26619,8 +26862,9 @@ var LiveTimer = () => {
     }, 1e3);
     return () => clearInterval(timer);
   }, []);
-  const formatter = new Intl.DateTimeFormat("en-IN", {
-    timeZone: "Asia/Kolkata",
+  const timezone = useAppTimezone();
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone: timezone,
     hour: "2-digit",
     minute: "2-digit",
     second: "2-digit",
@@ -26654,7 +26898,7 @@ function Skeleton({ className, ...props }) {
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -26670,7 +26914,7 @@ var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -26680,7 +26924,7 @@ var SelectScrollUpButton = React20.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -26690,7 +26934,7 @@ var SelectScrollDownButton = React20.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React20.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React21.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -26718,7 +26962,7 @@ var SelectContent = React20.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -26727,7 +26971,7 @@ var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -26743,7 +26987,7 @@ var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -27036,7 +27280,7 @@ if (typeof document !== "undefined") {
     document.head.appendChild(style);
   }
 }
-var VideoPlayer = React20__default.forwardRef(({
+var VideoPlayer = React21__default.forwardRef(({
   src,
   poster,
   autoplay = false,
@@ -27046,15 +27290,19 @@ var VideoPlayer = React20__default.forwardRef(({
   playsInline = true,
   className = "",
   options = {},
+  externalLoadingControl = false,
+  onLoadingChange,
   onReady,
   onPlay,
   onPause,
+  onPlaying,
   onTimeUpdate,
   onDurationChange,
   onEnded,
   onError,
   onLoadStart,
   onLoadedMetadata,
+  onLoadedData,
   onSeeking,
   onSeeked
 }, ref) => {
@@ -27176,6 +27424,7 @@ var VideoPlayer = React20__default.forwardRef(({
     });
     player.on("play", () => onPlay?.(player));
     player.on("pause", () => onPause?.(player));
+    player.on("playing", () => onPlaying?.(player));
     player.on("timeupdate", () => {
       const currentTime2 = player.currentTime() || 0;
       onTimeUpdate?.(player, currentTime2);
@@ -27187,16 +27436,21 @@ var VideoPlayer = React20__default.forwardRef(({
     player.on("ended", () => onEnded?.(player));
     player.on("loadstart", () => {
       setIsLoading(true);
+      onLoadingChange?.(true);
       onLoadStart?.(player);
     });
     player.on("loadeddata", () => {
       setIsLoading(false);
+      onLoadingChange?.(false);
+      onLoadedData?.(player);
     });
     player.on("waiting", () => {
       setIsLoading(true);
+      onLoadingChange?.(true);
     });
     player.on("playing", () => {
       setIsLoading(false);
+      onLoadingChange?.(false);
     });
     player.on("loadedmetadata", () => {
       onLoadedMetadata?.(player);
@@ -27321,7 +27575,7 @@ var VideoPlayer = React20__default.forwardRef(({
       setIsReady(false);
     }
   }, []);
-  React20__default.useImperativeHandle(ref, () => ({
+  React21__default.useImperativeHandle(ref, () => ({
     player: playerRef.current,
     play,
     pause,
@@ -27342,7 +27596,7 @@ var VideoPlayer = React20__default.forwardRef(({
         "data-vjs-player": true
       }
     ),
-    isLoading && /* @__PURE__ */ jsx("div", { className: "video-player-loading", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) })
+    isLoading && !externalLoadingControl && /* @__PURE__ */ jsx("div", { className: "video-player-loading", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) })
   ] });
 });
 VideoPlayer.displayName = "VideoPlayer";
@@ -27524,7 +27778,10 @@ var CroppedVideoPlayer = forwardRef(({
             onEnded: handleVideoEnded,
             onSeeking: handleSeeking,
             onSeeked: handleSeeked,
-            onLoadedMetadata: handleLoadedMetadata
+            onLoadedMetadata: handleLoadedMetadata,
+            onLoadedData: videoProps.onLoadedData,
+            onPlaying: videoProps.onPlaying,
+            onLoadingChange: videoProps.onLoadingChange
           }
         ) }),
         /* @__PURE__ */ jsx(
@@ -28101,6 +28358,7 @@ var FileManagerFilters = ({
 }) => {
   const [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set());
   const [searchTerm, setSearchTerm] = useState("");
+  const timezone = useAppTimezone();
   const [clipMetadata, setClipMetadata] = useState({});
   const [loadingCategories, setLoadingCategories] = useState(/* @__PURE__ */ new Set());
   const [categoryPages, setCategoryPages] = useState({});
@@ -28156,8 +28414,8 @@ var FileManagerFilters = ({
   }, [workspaceId, date, shift]);
   const getAuthToken3 = async () => {
     try {
-      const { createClient: createClient4 } = await import('@supabase/supabase-js');
-      const supabase = createClient4(
+      const { createClient: createClient5 } = await import('@supabase/supabase-js');
+      const supabase = createClient5(
         process.env.NEXT_PUBLIC_SUPABASE_URL || "",
         process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
       );
@@ -28266,23 +28524,27 @@ var FileManagerFilters = ({
       }
       if (categoryCount > 0 && shouldShowCategory(category.id)) {
         const colorClasses = getColorClasses(category.color);
-        const clipNodes = filteredClips.map((clip) => {
+        const clipNodes = filteredClips.map((clip, index) => {
           const timeString = new Date(clip.clip_timestamp).toLocaleTimeString("en-US", {
             hour12: false,
             hour: "2-digit",
             minute: "2-digit",
-            second: "2-digit"
+            second: "2-digit",
+            timeZone: timezone
+            // Use database timezone for display
           });
           return {
             id: clip.id,
-            label: `${timeString} - ${clip.description}${clip.duration ? ` (${clip.duration.toFixed(1)}s)` : ""}`,
+            label: `${timeString} - ${clip.description}${clip.duration && category.id !== "idle_time" ? ` (${clip.duration.toFixed(1)}s)` : ""}`,
             type: "video",
             icon: getSeverityIcon(clip.severity),
             timestamp: clip.clip_timestamp,
             severity: clip.severity,
             clipId: clip.clipId,
             // Store stable UUID for navigation
-            categoryId: category.id
+            categoryId: category.id,
+            clipPosition: index + 1
+            // Store 1-based position
           };
         });
         tree.push({
@@ -28398,8 +28660,8 @@ var FileManagerFilters = ({
       onFilterChange(node.id);
     } else if (node.type === "video") {
       if (onClipSelect && node.categoryId !== void 0 && node.clipId !== void 0) {
-        console.log(`[FileManager] Selecting clip: category=${node.categoryId}, clipId=${node.clipId}`);
-        onClipSelect(node.categoryId, node.clipId);
+        console.log(`[FileManager] Selecting clip: category=${node.categoryId}, clipId=${node.clipId}, position=${node.clipPosition}`);
+        onClipSelect(node.categoryId, node.clipId, node.clipPosition);
       } else {
         const videoIndex = videos.findIndex((v) => v.id === node.id);
         if (videoIndex !== -1) {
@@ -28931,6 +29193,7 @@ var BottlenecksContent = ({
   className
 }) => {
   const dashboardConfig = useDashboardConfig();
+  const timezone = useAppTimezone();
   const effectiveShift = useMemo(() => {
     if (shift !== void 0 && shift !== null) {
       const shiftStr = shift.toString();
@@ -28942,13 +29205,14 @@ var BottlenecksContent = ({
       return "0";
     } else {
       const currentShift = getCurrentShift(
-        dashboardConfig.dateTimeConfig?.defaultTimezone || "Asia/Kolkata",
+        timezone,
+        // Use dynamic timezone instead of hardcoded default
         dashboardConfig.shiftConfig
       );
-      console.log(`[BottlenecksContent] Using current operational shift: ${currentShift.shiftId}`);
+      console.log(`[BottlenecksContent] Using current operational shift: ${currentShift.shiftId} with timezone: ${timezone}`);
       return currentShift.shiftId.toString();
     }
-  }, [shift, date, dashboardConfig]);
+  }, [shift, date, timezone, dashboardConfig]);
   const { crop: workspaceCrop} = useWorkspaceCrop(workspaceId);
   const videoRef = useRef(null);
   const [initialFilter, setInitialFilter] = useState("");
@@ -28961,6 +29225,11 @@ var BottlenecksContent = ({
   const [duration, setDuration] = useState(0);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [currentClipId, setCurrentClipId] = useState(null);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [pendingVideo, setPendingVideo] = useState(null);
+  const [isVideoBuffering, setIsVideoBuffering] = useState(false);
+  const [isInitialLoading, setIsInitialLoading] = useState(false);
+  const loadingTimeoutRef = useRef(null);
   const [activeFilter, setActiveFilter] = useState(initialFilter);
   const previousFilterRef = useRef("");
   const [allVideos, setAllVideos] = useState([]);
@@ -28970,7 +29239,11 @@ var BottlenecksContent = ({
   const [isNavigating, setIsNavigating] = useState(false);
   const [error, setError] = useState(null);
   const [clipCounts, setClipCounts] = useState({});
-  const [categoryPosition, setCategoryPosition] = useState(1);
+  const [categoryMetadata, setCategoryMetadata] = useState([]);
+  const [currentMetadataIndex, setCurrentMetadataIndex] = useState(0);
+  const [metadataCache, setMetadataCache] = useState({});
+  const categoryMetadataRef = useRef([]);
+  const currentMetadataIndexRef = useRef(0);
   const {
     newClipsNotification,
     hasNewClips,
@@ -28978,7 +29251,7 @@ var BottlenecksContent = ({
     clearNotification
   } = useClipsRealtimeUpdates({
     workspaceId,
-    date: date || getOperationalDate(),
+    date: date || getOperationalDate(timezone),
     shiftId: effectiveShift,
     enabled: true,
     // Supabase implementation
@@ -29015,7 +29288,7 @@ var BottlenecksContent = ({
     counts: dynamicCounts
   } = useClipTypesWithCounts(
     workspaceId,
-    date || getOperationalDate(),
+    date || getOperationalDate(timezone),
     effectiveShift
     // Use same shift as video loading for consistency
   );
@@ -29026,7 +29299,7 @@ var BottlenecksContent = ({
     clipTypesError,
     dynamicCounts,
     workspaceId,
-    date: date || getOperationalDate(),
+    date: date || getOperationalDate(timezone),
     shift: shift || "0"
   });
   useEffect(() => {
@@ -29052,7 +29325,7 @@ var BottlenecksContent = ({
     }
     fetchInProgressRef.current.add(operationKey);
     try {
-      const operationalDate = date || getOperationalDate();
+      const operationalDate = date || getOperationalDate(timezone);
       const shiftStr = effectiveShift;
       console.log(`[BottlenecksContent] Fetching clip counts directly with params:`, {
         workspaceId,
@@ -29098,7 +29371,7 @@ var BottlenecksContent = ({
       setError(null);
     }
     try {
-      const operationalDate = date || getOperationalDate();
+      const operationalDate = date || getOperationalDate(timezone);
       const shiftStr = effectiveShift;
       console.log(`[BottlenecksContent] Loading first video for category: ${targetCategory}`);
       try {
@@ -29122,7 +29395,6 @@ var BottlenecksContent = ({
           setHasInitialLoad(true);
           loadingCategoryRef.current = null;
           setIsCategoryLoading(false);
-          setCategoryPosition(1);
           return;
         }
       } catch (directError) {
@@ -29148,7 +29420,6 @@ var BottlenecksContent = ({
               return prev;
             });
             setIsCategoryLoading(false);
-            setCategoryPosition(1);
             return;
           }
         } catch (indexError) {
@@ -29201,10 +29472,16 @@ var BottlenecksContent = ({
       setIsCategoryLoading(true);
       setError(null);
       setCurrentIndex(0);
-      setCategoryPosition(1);
       setIsNavigating(false);
       loadingCategoryRef.current = null;
+      setCategoryMetadata([]);
+      setCurrentMetadataIndex(0);
+      categoryMetadataRef.current = [];
+      currentMetadataIndexRef.current = 0;
       previousFilterRef.current = activeFilter;
+      if (activeFilter !== "all") {
+        loadCategoryMetadata(activeFilter, true);
+      }
       const filtered = allVideos.filter((video) => {
         if (activeFilter === "all") return true;
         return video.type === activeFilter;
@@ -29238,14 +29515,11 @@ var BottlenecksContent = ({
     }
   }, []);
   const getCategoryCount = useCallback((categoryId) => {
-    if (isPercentileCategory(categoryId)) {
-      if (isPercentileCategory(activeFilter) && activeFilter === categoryId) {
-        return allVideos.length;
-      }
-      return 0;
+    if (activeFilter === categoryId && categoryMetadata.length > 0) {
+      return categoryMetadata.length;
     }
     return mergedCounts[categoryId] || 0;
-  }, [isPercentileCategory, allVideos, mergedCounts, activeFilter]);
+  }, [activeFilter, categoryMetadata, mergedCounts]);
   const filteredVideos = useMemo(() => {
     if (!allVideos) return [];
     let filtered = [];
@@ -29268,29 +29542,61 @@ var BottlenecksContent = ({
       setError(null);
     }
   }, [isNavigating, currentIndex, filteredVideos.length]);
-  const loadAndPlayClipById = useCallback(async (clipId, categoryId) => {
-    if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
-    console.log(`[BottlenecksContent] Loading clip by ID: ${clipId}, category=${categoryId}`);
-    setIsNavigating(true);
-    setError(null);
-    if (activeFilterRef.current !== categoryId) {
-      updateActiveFilter(categoryId);
+  const clearLoadingState = useCallback(() => {
+    setIsTransitioning(false);
+    setIsNavigating(false);
+    if (loadingTimeoutRef.current) {
+      clearTimeout(loadingTimeoutRef.current);
+      loadingTimeoutRef.current = null;
+    }
+  }, []);
+  const loadCategoryMetadata = useCallback(async (categoryId, autoLoadFirstVideo = false) => {
+    if (!workspaceId) {
+      return;
+    }
+    const cacheKey = `${categoryId}-${date || getOperationalDate(timezone)}-${effectiveShift}`;
+    if (metadataCache[cacheKey]) {
+      console.log(`[BottlenecksContent] Using cached metadata for ${categoryId}`);
+      setCategoryMetadata(metadataCache[cacheKey]);
+      categoryMetadataRef.current = metadataCache[cacheKey];
+      if (autoLoadFirstVideo && metadataCache[cacheKey].length > 0 && s3ClipsService) {
+        const firstClipMeta = metadataCache[cacheKey][0];
+        try {
+          const video = await s3ClipsService.getClipById(firstClipMeta.clipId);
+          if (video && isMountedRef.current) {
+            setCurrentClipId(firstClipMeta.clipId);
+            setAllVideos([video]);
+            setCurrentIndex(0);
+            setCurrentMetadataIndex(0);
+            currentMetadataIndexRef.current = 0;
+            setIsCategoryLoading(false);
+            console.log(`[BottlenecksContent] Auto-loaded first video from cache: ${video.id} (1/${metadataCache[cacheKey].length})`);
+          }
+        } catch (error2) {
+          console.error(`[BottlenecksContent] Error loading first video from cache:`, error2);
+          setIsCategoryLoading(false);
+          clearLoadingState();
+        }
+      }
+      return;
     }
     try {
+      console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}`);
+      const { createClient: createClient5 } = await import('@supabase/supabase-js');
+      const supabase = createClient5(
+        process.env.NEXT_PUBLIC_SUPABASE_URL || "",
+        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
+      );
+      const { data: { session } } = await supabase.auth.getSession();
+      const authToken = session?.access_token;
+      if (!authToken) {
+        console.error("Authentication required for metadata loading");
+        return;
+      }
+      let response;
       if (isPercentileCategory(categoryId)) {
-        console.log(`[BottlenecksContent] Loading percentile category: ${categoryId}`);
         const percentileType = categoryId === "fast-cycles" ? "fast-cycles" : categoryId === "slow-cycles" ? "slow-cycles" : "idle-times";
-        const { createClient: createClient4 } = await import('@supabase/supabase-js');
-        const supabase = createClient4(
-          process.env.NEXT_PUBLIC_SUPABASE_URL || "",
-          process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
-        );
-        const { data: { session } } = await supabase.auth.getSession();
-        const authToken = session?.access_token;
-        if (!authToken) {
-          throw new Error("Authentication required");
-        }
-        const response = await fetch("/api/clips/supabase", {
+        response = await fetch("/api/clips/supabase", {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
@@ -29300,53 +29606,125 @@ var BottlenecksContent = ({
             action: "percentile-clips",
             percentileAction: percentileType,
             workspaceId,
-            startDate: `${date || getOperationalDate()}T00:00:00Z`,
-            endDate: `${date || getOperationalDate()}T23:59:59Z`,
+            startDate: `${date || getOperationalDate(timezone)}T00:00:00Z`,
+            endDate: `${date || getOperationalDate(timezone)}T23:59:59Z`,
             percentile: 10,
             shiftId: effectiveShift,
             limit: 100
           })
         });
-        if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.error || `API error: ${response.status}`);
+      } else {
+        response = await fetch("/api/clips/supabase", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${authToken}`
+          },
+          body: JSON.stringify({
+            action: "clip-metadata",
+            workspaceId,
+            date: date || getOperationalDate(timezone),
+            shift: effectiveShift,
+            category: categoryId,
+            page: 1,
+            limit: 1e3
+          })
+        });
+      }
+      if (!response.ok) {
+        throw new Error(`Metadata API error: ${response.status}`);
+      }
+      const categoryData = await response.json();
+      if (categoryData.clips && isMountedRef.current) {
+        let metadataClips;
+        if (isPercentileCategory(categoryId)) {
+          metadataClips = categoryData.clips.map((clip, index) => ({
+            id: clip.id,
+            clipId: clip.id,
+            clip_timestamp: clip.timestamp || clip.creation_timestamp,
+            description: clip.description,
+            severity: clip.severity,
+            category: categoryId,
+            duration: clip.cycle_time_seconds,
+            index
+          }));
+        } else {
+          metadataClips = categoryData.clips;
         }
-        const percentileData = await response.json();
-        if (percentileData.clips && percentileData.clips.length > 0 && isMountedRef.current) {
-          const clickedClipIndex = percentileData.clips.findIndex((clip) => clip.id === clipId);
-          if (clickedClipIndex !== -1) {
-            setCurrentClipId(clipId);
-            setAllVideos(percentileData.clips);
-            setCurrentIndex(clickedClipIndex);
-            setCategoryPosition(clickedClipIndex + 1);
-            console.log(`[BottlenecksContent] Loaded ${percentileData.clips.length} ${categoryId} clips, playing #${clickedClipIndex + 1}`);
+        setMetadataCache((prev) => ({
+          ...prev,
+          [cacheKey]: metadataClips
+        }));
+        setCategoryMetadata(metadataClips);
+        categoryMetadataRef.current = metadataClips;
+        console.log(`[BottlenecksContent] Loaded metadata for ${categoryId}: ${metadataClips.length} clips`);
+        if (autoLoadFirstVideo && metadataClips.length > 0 && s3ClipsService) {
+          const firstClipMeta = metadataClips[0];
+          try {
+            const video = await s3ClipsService.getClipById(firstClipMeta.clipId);
+            if (video && isMountedRef.current) {
+              setCurrentClipId(firstClipMeta.clipId);
+              setAllVideos([video]);
+              setCurrentIndex(0);
+              setCurrentMetadataIndex(0);
+              currentMetadataIndexRef.current = 0;
+              setIsCategoryLoading(false);
+              console.log(`[BottlenecksContent] Auto-loaded first video: ${video.id} (1/${metadataClips.length})`);
+            }
+          } catch (error2) {
+            console.error(`[BottlenecksContent] Error loading first video:`, error2);
+            setIsCategoryLoading(false);
           }
         }
-      } else {
-        const video = await s3ClipsService.getClipById(clipId);
-        if (video && isMountedRef.current) {
-          console.log(`[BottlenecksContent] Processing loaded video by ID: ${video.id}`);
-          setCurrentClipId(clipId);
-          setAllVideos([video]);
-          setCurrentIndex(0);
-          setCategoryPosition(1);
-          console.log(`[BottlenecksContent] Successfully loaded clip by ID: ${video.id}`);
+      }
+    } catch (error2) {
+      console.error(`[BottlenecksContent] Error loading category metadata:`, error2);
+    }
+  }, [workspaceId, date, effectiveShift, isPercentileCategory, metadataCache, s3ClipsService]);
+  const loadAndPlayClipById = useCallback(async (clipId, categoryId, position) => {
+    if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
+    console.log(`[BottlenecksContent] Loading clip by ID: ${clipId}, category=${categoryId}, position=${position}`);
+    setIsTransitioning(true);
+    setIsInitialLoading(true);
+    setError(null);
+    loadingTimeoutRef.current = setTimeout(() => {
+      console.warn("[BottlenecksContent] Loading timeout - clearing stuck loading state");
+      clearLoadingState();
+    }, 1e3);
+    if (activeFilterRef.current !== categoryId) {
+      updateActiveFilter(categoryId);
+    }
+    try {
+      await loadCategoryMetadata(categoryId, false);
+      const metadataArray = categoryMetadataRef.current;
+      if (metadataArray.length > 0) {
+        const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
+        if (clickedClipIndex !== -1) {
+          setCurrentMetadataIndex(clickedClipIndex);
+          currentMetadataIndexRef.current = clickedClipIndex;
+          const video = await s3ClipsService.getClipById(clipId);
+          if (video) {
+            setPendingVideo(video);
+            setCurrentClipId(clipId);
+            setAllVideos([video]);
+            setCurrentIndex(0);
+            console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
+          }
         }
       }
-      setIsNavigating(false);
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
       if (isMountedRef.current) {
         setError("Failed to load selected clip. Please try again.");
-        setIsNavigating(false);
+        clearLoadingState();
       }
     }
-  }, [workspaceId, s3ClipsService, date, effectiveShift, updateActiveFilter]);
+  }, [workspaceId, s3ClipsService, date, effectiveShift, updateActiveFilter, clearLoadingState]);
   useCallback(async (categoryId, clipIndex) => {
     console.warn("[BottlenecksContent] loadAndPlayClip is deprecated, use loadAndPlayClipById instead");
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     try {
-      const operationalDate = date || getOperationalDate();
+      const operationalDate = date || getOperationalDate(timezone);
       const shiftStr = effectiveShift;
       const video = await s3ClipsService.getClipByIndex(
         workspaceId,
@@ -29367,105 +29745,79 @@ var BottlenecksContent = ({
   const handleNext = useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
-    console.log(`[handleNext] Navigating in category: ${currentFilter}, current index: ${currentIndex}`);
-    setIsNavigating(true);
+    setIsTransitioning(true);
+    setIsInitialLoading(true);
     setError(null);
     try {
-      if (isPercentileCategory(currentFilter)) {
-        if (currentIndex < allVideos.length - 1) {
-          const nextIndex = currentIndex + 1;
-          const nextVideo = allVideos[nextIndex];
-          console.log(`[handleNext] Moving to next percentile clip: ${nextVideo.id} (index ${nextIndex})`);
-          setCurrentClipId(nextVideo.id);
-          setCurrentIndex(nextIndex);
-          setCategoryPosition(nextIndex + 1);
-          setIsNavigating(false);
-        } else {
-          console.log(`[handleNext] Already at last clip in percentile category`);
-          setIsNavigating(false);
-        }
-      } else {
-        if (!currentClipId || !s3ClipsService) {
-          setIsNavigating(false);
-          return;
-        }
-        const neighbors = await s3ClipsService.getNeighboringClips(
-          workspaceId,
-          date || getOperationalDate(),
-          effectiveShift,
-          currentFilter,
-          currentClipId
-        );
-        if (neighbors.next) {
-          console.log(`[handleNext] Found next clip: ${neighbors.next.id}`);
-          setCurrentClipId(neighbors.next.id || null);
-          setAllVideos([neighbors.next]);
+      const currentMetaIndex = currentMetadataIndexRef.current;
+      const metadataArray = categoryMetadataRef.current;
+      console.log(`[handleNext] Unified navigation: ${currentFilter}, metadata index: ${currentMetaIndex}/${metadataArray.length}`);
+      if (currentMetaIndex < metadataArray.length - 1) {
+        const nextMetadataIndex = currentMetaIndex + 1;
+        const nextClipMeta = metadataArray[nextMetadataIndex];
+        console.log(`[handleNext] Loading next clip: ${nextClipMeta.clipId} at metadata index ${nextMetadataIndex}`);
+        if (!s3ClipsService) {
+          throw new Error("S3 clips service not available");
+        }
+        const nextVideo = await s3ClipsService.getClipById(nextClipMeta.clipId);
+        if (nextVideo) {
+          setPendingVideo(nextVideo);
+          setCurrentClipId(nextClipMeta.clipId);
+          setAllVideos([nextVideo]);
           setCurrentIndex(0);
-          setCategoryPosition(categoryPosition + 1);
-          setIsNavigating(false);
-          videoRetryCountRef.current = 0;
+          setCurrentMetadataIndex(nextMetadataIndex);
+          currentMetadataIndexRef.current = nextMetadataIndex;
+          console.log(`[handleNext] Successfully loaded next clip: ${nextVideo.id} (${nextMetadataIndex + 1}/${metadataArray.length})`);
         } else {
-          console.log(`[handleNext] No next clip available`);
-          setIsNavigating(false);
+          console.error(`[handleNext] Failed to load next video for clip ID: ${nextClipMeta.clipId}`);
+          clearLoadingState();
         }
+      } else {
+        console.log(`[handleNext] Already at last clip in category`);
+        clearLoadingState();
       }
     } catch (error2) {
       console.error(`[handleNext] Error navigating:`, error2);
       setError("Failed to navigate to next clip");
-      setIsNavigating(false);
+      clearLoadingState();
     }
-  }, [currentIndex, allVideos, currentClipId, workspaceId, date, effectiveShift, s3ClipsService, categoryPosition, isPercentileCategory]);
+  }, [clearLoadingState, s3ClipsService]);
   const handlePrevious = useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
-    console.log(`[handlePrevious] Navigating in category: ${currentFilter}, current index: ${currentIndex}`);
-    setIsNavigating(true);
+    setIsTransitioning(true);
+    setIsInitialLoading(true);
     setError(null);
     try {
-      if (isPercentileCategory(currentFilter)) {
-        if (currentIndex > 0) {
-          const prevIndex = currentIndex - 1;
-          const prevVideo = allVideos[prevIndex];
-          console.log(`[handlePrevious] Moving to previous percentile clip: ${prevVideo.id} (index ${prevIndex})`);
-          setCurrentClipId(prevVideo.id);
-          setCurrentIndex(prevIndex);
-          setCategoryPosition(prevIndex + 1);
-          setIsNavigating(false);
-        } else {
-          console.log(`[handlePrevious] Already at first clip in percentile category`);
-          setIsNavigating(false);
-        }
-      } else {
-        if (!currentClipId || !s3ClipsService) {
-          setIsNavigating(false);
-          return;
-        }
-        const neighbors = await s3ClipsService.getNeighboringClips(
-          workspaceId,
-          date || getOperationalDate(),
-          effectiveShift,
-          currentFilter,
-          currentClipId
-        );
-        if (neighbors.previous) {
-          console.log(`[handlePrevious] Found previous clip: ${neighbors.previous.id}`);
-          setCurrentClipId(neighbors.previous.id || null);
-          setAllVideos([neighbors.previous]);
+      const currentMetaIndex = currentMetadataIndexRef.current;
+      const metadataArray = categoryMetadataRef.current;
+      console.log(`[handlePrevious] Unified navigation: ${currentFilter}, metadata index: ${currentMetaIndex}/${metadataArray.length}`);
+      if (currentMetaIndex > 0) {
+        const prevMetadataIndex = currentMetaIndex - 1;
+        const prevClipMeta = metadataArray[prevMetadataIndex];
+        if (!s3ClipsService) {
+          throw new Error("S3 clips service not available");
+        }
+        const prevVideo = await s3ClipsService.getClipById(prevClipMeta.clipId);
+        if (prevVideo) {
+          setPendingVideo(prevVideo);
+          setCurrentClipId(prevClipMeta.clipId);
+          setAllVideos([prevVideo]);
           setCurrentIndex(0);
-          setCategoryPosition(Math.max(1, categoryPosition - 1));
-          setIsNavigating(false);
-          videoRetryCountRef.current = 0;
-        } else {
-          console.log(`[handlePrevious] No previous clip available`);
-          setIsNavigating(false);
+          setCurrentMetadataIndex(prevMetadataIndex);
+          currentMetadataIndexRef.current = prevMetadataIndex;
+          console.log(`[handlePrevious] Loaded previous clip: ${prevVideo.id} (${prevMetadataIndex + 1}/${metadataArray.length})`);
         }
+      } else {
+        console.log(`[handlePrevious] Already at first clip in category`);
+        clearLoadingState();
       }
     } catch (error2) {
       console.error(`[handlePrevious] Error navigating:`, error2);
       setError("Failed to navigate to previous clip");
-      setIsNavigating(false);
+      clearLoadingState();
     }
-  }, [currentIndex, allVideos, currentClipId, workspaceId, date, effectiveShift, s3ClipsService, categoryPosition, isPercentileCategory]);
+  }, [clearLoadingState, s3ClipsService]);
   const currentVideo = useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;
@@ -29473,7 +29825,7 @@ var BottlenecksContent = ({
     return filteredVideos[currentIndex];
   }, [filteredVideos, currentIndex]);
   const handleVideoReady = useCallback((player) => {
-    console.log("Video.js player ready");
+    console.log("Video.js player ready - NOT clearing loading (wait for playing event)");
     videoRetryCountRef.current = 0;
     if (error?.includes("Retrying")) {
       setError(null);
@@ -29481,6 +29833,7 @@ var BottlenecksContent = ({
   }, [error]);
   const handleVideoPlay = useCallback(async (player) => {
     setIsPlaying(true);
+    setIsInitialLoading(false);
     if (currentVideo && !currentVideo.creation_timestamp && s3ClipsService) {
       try {
         const originalUri = currentVideo.originalUri || currentVideo.src;
@@ -29510,6 +29863,17 @@ var BottlenecksContent = ({
   const handleDurationChange = useCallback((player, duration2) => {
     setDuration(duration2);
   }, []);
+  const handleLoadedData = useCallback((player) => {
+    console.log("Video data loaded - NOT clearing loading (wait for playing event)");
+  }, []);
+  const handleVideoPlaying = useCallback((player) => {
+    console.log("Video playing - hiding transition overlay (most reliable)");
+    clearLoadingState();
+  }, [clearLoadingState]);
+  const handleVideoLoadingChange = useCallback((isLoading2) => {
+    console.log(`[BottlenecksContent] Video loading state changed: ${isLoading2}`);
+    setIsVideoBuffering(isLoading2);
+  }, []);
   const handleVideoEnded = useCallback((player) => {
     handleNext();
   }, [handleNext]);
@@ -29546,6 +29910,10 @@ var BottlenecksContent = ({
       isMountedRef.current = false;
       loadingCategoryRef.current = null;
       fetchInProgressRef.current.clear();
+      if (loadingTimeoutRef.current) {
+        clearTimeout(loadingTimeoutRef.current);
+        loadingTimeoutRef.current = null;
+      }
       setIsCategoryLoading(false);
       setIsNavigating(false);
     };
@@ -29555,6 +29923,14 @@ var BottlenecksContent = ({
       setError(null);
     }
   }, [currentIndex, filteredVideos]);
+  useEffect(() => {
+    if (!isTransitioning && pendingVideo) {
+      const timer = setTimeout(() => {
+        setPendingVideo(null);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [isTransitioning, pendingVideo]);
   useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "ArrowLeft") {
@@ -29655,173 +30031,169 @@ var BottlenecksContent = ({
             }
             const activeCategory = categoriesToShow.find((cat) => cat.type === activeFilter);
             if (activeCategory) {
-              return `${activeCategory.label} (${mergedCounts[activeCategory.type] || 0})`;
+              return `${activeCategory.label} (${getCategoryCount(activeCategory.type)})`;
             }
-            return `${activeFilter.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())} (${mergedCounts[activeFilter] || 0})`;
+            return `${activeFilter.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())} (${getCategoryCount(activeFilter)})`;
           })() }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: handlePrevious,
-                disabled: categoryPosition <= 1 || getCategoryCount(activeFilter) === 0,
-                className: `p-2 rounded-full transition-colors ${categoryPosition <= 1 || getCategoryCount(activeFilter) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
+                disabled: currentMetadataIndex <= 0 || categoryMetadata.length === 0,
+                className: `p-2 rounded-full transition-colors ${currentMetadataIndex <= 0 || categoryMetadata.length === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
                 "aria-label": "Previous video",
                 children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: getCategoryCount(activeFilter) > 0 ? `${categoryPosition} / ${getCategoryCount(activeFilter)}` : "0 / 0" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: categoryMetadata.length > 0 ? `${currentMetadataIndex + 1} / ${categoryMetadata.length}` : "0 / 0" }),
               error && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-600 font-medium", children: error })
             ] }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: handleNext,
-                disabled: categoryPosition >= getCategoryCount(activeFilter) || getCategoryCount(activeFilter) === 0,
-                className: `p-2 rounded-full transition-colors ${categoryPosition >= getCategoryCount(activeFilter) || getCategoryCount(activeFilter) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
+                disabled: currentMetadataIndex >= categoryMetadata.length - 1 || categoryMetadata.length === 0,
+                className: `p-2 rounded-full transition-colors ${currentMetadataIndex >= categoryMetadata.length - 1 || categoryMetadata.length === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
                 "aria-label": "Next video",
                 children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
               }
             )
           ] })
         ] }) }),
-        /* Priority 1: Show loading if initial load hasn't completed yet */
-        isLoading && !hasInitialLoad ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading clips..." }) }) }) }) : (
-          /* Priority 2: Show loading if category is loading BUT only if no video is available */
-          isCategoryLoading && (!filteredVideos.length || !currentVideo) ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading videos..." }) }) }) }) : (
-            /* Priority 3: Show loading if navigating and current video not available */
-            isNavigating || currentIndex >= filteredVideos.length && currentIndex < (mergedCounts[activeFilter] || 0) ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }) }) }) : (
-              /* Priority 4: Show video if we have filtered videos and current video */
-              filteredVideos.length > 0 && currentVideo ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full group", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
-                /* @__PURE__ */ jsx(
-                  CroppedVideoPlayer,
-                  {
-                    ref: videoRef,
-                    src: currentVideo.src,
-                    className: "w-full h-full",
-                    crop: workspaceCrop?.crop || null,
-                    autoplay: true,
-                    playsInline: true,
-                    loop: false,
-                    onReady: handleVideoReady,
-                    onPlay: handleVideoPlay,
-                    onPause: handleVideoPause,
-                    onTimeUpdate: handleTimeUpdate,
-                    onDurationChange: handleDurationChange,
-                    onEnded: handleVideoEnded,
-                    onError: handleVideoError,
-                    options: {
-                      // Ensure full height is always visible - no cropping
-                      fluid: false,
-                      responsive: false,
-                      fill: false
-                    }
-                  },
-                  currentVideo.id
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "absolute inset-0 z-10 cursor-pointer",
-                    onClick: togglePlayback
+        /* Show video if we have filtered videos and current video, or show loading */
+        filteredVideos.length > 0 && currentVideo ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full group", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
+          /* @__PURE__ */ jsx(
+            CroppedVideoPlayer,
+            {
+              ref: videoRef,
+              src: currentVideo.src,
+              className: "w-full h-full",
+              crop: workspaceCrop?.crop || null,
+              autoplay: true,
+              playsInline: true,
+              loop: false,
+              externalLoadingControl: true,
+              onReady: handleVideoReady,
+              onPlay: handleVideoPlay,
+              onPause: handleVideoPause,
+              onTimeUpdate: handleTimeUpdate,
+              onDurationChange: handleDurationChange,
+              onEnded: handleVideoEnded,
+              onError: handleVideoError,
+              onLoadedData: handleLoadedData,
+              onPlaying: handleVideoPlaying,
+              onLoadingChange: handleVideoLoadingChange,
+              options: {
+                // Ensure full height is always visible - no cropping
+                fluid: false,
+                responsive: false,
+                fill: false
+              }
+            }
+          ),
+          (isTransitioning || isVideoBuffering && isInitialLoading) && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+          !isTransitioning && isVideoBuffering && !isInitialLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 z-10 cursor-pointer",
+              onClick: togglePlayback
+            }
+          ),
+          error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/80 text-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 mx-auto mb-4 text-red-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z" }) }),
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Video Stream Error" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-300 mb-4", children: "The video stream appears to be corrupted or unavailable. This may be due to:" }),
+            /* @__PURE__ */ jsxs("ul", { className: "text-sm text-gray-300 text-left space-y-1 mb-4", children: [
+              /* @__PURE__ */ jsx("li", { children: "\u2022 Incomplete video encoding" }),
+              /* @__PURE__ */ jsx("li", { children: "\u2022 Network connectivity issues" }),
+              /* @__PURE__ */ jsx("li", { children: "\u2022 Server processing errors" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => {
+                  setError(null);
+                  if (videoRef.current) {
+                    videoRef.current.dispose();
                   }
-                ),
-                error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/80 text-white p-4", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-md", children: [
-                  /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 mx-auto mb-4 text-red-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z" }) }),
-                  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Video Stream Error" }),
-                  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-300 mb-4", children: "The video stream appears to be corrupted or unavailable. This may be due to:" }),
-                  /* @__PURE__ */ jsxs("ul", { className: "text-sm text-gray-300 text-left space-y-1 mb-4", children: [
-                    /* @__PURE__ */ jsx("li", { children: "\u2022 Incomplete video encoding" }),
-                    /* @__PURE__ */ jsx("li", { children: "\u2022 Network connectivity issues" }),
-                    /* @__PURE__ */ jsx("li", { children: "\u2022 Server processing errors" })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => {
-                        setError(null);
-                        if (videoRef.current) {
-                          videoRef.current.dispose();
-                        }
-                      },
-                      className: "px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium",
-                      children: "Retry"
-                    }
-                  )
-                ] }) }),
-                (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "idle_time" || currentVideo.type === "low_value" ? /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" || currentVideo.type === "idle_time" ? "bg-purple-400" : isPercentileCategory(activeFilterRef.current) ? activeFilterRef.current === "fast-cycles" ? "bg-green-600" : activeFilterRef.current === "slow-cycles" ? "bg-red-700" : "bg-orange-500" : currentVideo.type === "cycle_completion" ? "bg-blue-600" : "bg-gray-500"} mr-2 animate-pulse` }),
-                  (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds ? /* @__PURE__ */ jsxs("span", { className: "opacity-90 font-mono bg-black/30 px-2 py-0.5 rounded", children: [
-                    "Cycle time: ",
-                    currentVideo.cycle_time_seconds.toFixed(1),
-                    "s"
-                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
-                    /* @__PURE__ */ jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
-                  ] })
-                ] }) }) : (
-                  /* Right side display for other video types */
-                  /* @__PURE__ */ jsx("div", { className: "absolute top-3 right-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                    /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${getSeverityColor(currentVideo.severity)} mr-2 animate-pulse` }),
-                    /* @__PURE__ */ jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
-                    /* @__PURE__ */ jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
-                  ] }) })
-                ),
-                /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-white", children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: togglePlayback,
-                      className: "p-1.5 hover:bg-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50",
-                      "aria-label": isPlaying ? "Pause" : "Play",
-                      children: isPlaying ? /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm5 0a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.118l-.001 3.764a1 1 0 001.555.832l3.196-1.882a1 1 0 000-1.664l-3.196-1.882z", clipRule: "evenodd" }) })
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono px-2", children: [
-                    formatTime2(currentTime),
-                    " / ",
-                    formatTime2(duration)
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "range",
-                      min: "0",
-                      max: duration || 0,
-                      value: currentTime,
-                      onChange: (e) => {
-                        if (videoRef.current) {
-                          videoRef.current.currentTime(Number(e.target.value));
-                        }
-                      },
-                      className: "flex-grow mx-3 h-2.5 bg-white/30 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-white/50 touch-manipulation",
-                      style: {
-                        WebkitAppearance: "none",
-                        appearance: "none"
-                      },
-                      "aria-label": "Seek slider"
-                    }
-                  )
-                ] }) })
-              ] }) }) }) : (
-                /* Priority 5: Show "no clips found" only if we have counts and there are truly no clips for workspace */
-                hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
-                  /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
-                  /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
-                  /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There were no video clips found for this workspace today." })
-                ] }) }) : (
-                  /* Priority 6: Show "no matching clips" only if we have data loaded and specifically no clips for this filter */
-                  hasInitialLoad && (mergedCounts[activeFilter] || 0) === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
-                    /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
-                    /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Matching Clips" }),
-                    /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There are no clips matching the selected filter." })
-                  ] }) }) : (
-                    /* Priority 7: Default loading state for any other case */
-                    /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading..." }) }) }) })
-                  )
-                )
-              )
+                },
+                className: "px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium",
+                children: "Retry"
+              }
+            )
+          ] }) }),
+          (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "idle_time" || currentVideo.type === "low_value" ? /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" || currentVideo.type === "idle_time" ? "bg-purple-400" : isPercentileCategory(activeFilterRef.current) ? activeFilterRef.current === "fast-cycles" ? "bg-green-600" : activeFilterRef.current === "slow-cycles" ? "bg-red-700" : "bg-orange-500" : currentVideo.type === "cycle_completion" ? "bg-blue-600" : "bg-gray-500"} mr-2 animate-pulse` }),
+            (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds ? /* @__PURE__ */ jsxs("span", { className: "opacity-90 font-mono bg-black/30 px-2 py-0.5 rounded", children: [
+              "Cycle time: ",
+              currentVideo.cycle_time_seconds.toFixed(1),
+              "s"
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
+              /* @__PURE__ */ jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
+            ] })
+          ] }) }) : (
+            /* Right side display for other video types */
+            /* @__PURE__ */ jsx("div", { className: "absolute top-3 right-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${getSeverityColor(currentVideo.severity)} mr-2 animate-pulse` }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
+              /* @__PURE__ */ jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
+            ] }) })
+          ),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-white", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: togglePlayback,
+                className: "p-1.5 hover:bg-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50",
+                "aria-label": isPlaying ? "Pause" : "Play",
+                children: isPlaying ? /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm5 0a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.118l-.001 3.764a1 1 0 001.555.832l3.196-1.882a1 1 0 000-1.664l-3.196-1.882z", clipRule: "evenodd" }) })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono px-2", children: [
+              formatTime2(currentTime),
+              " / ",
+              formatTime2(duration)
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: duration || 0,
+                value: currentTime,
+                onChange: (e) => {
+                  if (videoRef.current) {
+                    videoRef.current.currentTime(Number(e.target.value));
+                  }
+                },
+                className: "flex-grow mx-3 h-2.5 bg-white/30 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-white/50 touch-manipulation",
+                style: {
+                  WebkitAppearance: "none",
+                  appearance: "none"
+                },
+                "aria-label": "Seek slider"
+              }
+            )
+          ] }) })
+        ] }) }) }) : (
+          /* Priority 5: Show "no clips found" only if we have counts and there are truly no clips for workspace */
+          hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
+            /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
+            /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There were no video clips found for this workspace today." })
+          ] }) }) : (
+            /* Priority 6: Show "no matching clips" only if we have data loaded and specifically no clips for this filter */
+            hasInitialLoad && (mergedCounts[activeFilter] || 0) === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
+              /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
+              /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Matching Clips" }),
+              /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There are no clips matching the selected filter." })
+            ] }) }) : (
+              /* Priority 7: Default loading state for any other case */
+              /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading..." }) }) }) })
             )
           )
         )
@@ -29839,7 +30211,7 @@ var BottlenecksContent = ({
           currentVideoId: currentVideo?.id,
           counts: mergedCounts,
           workspaceId,
-          date: date || getOperationalDate(),
+          date: date || getOperationalDate(timezone),
           shift: effectiveShift,
           onFilterChange: (filterId) => {
             updateActiveFilter(filterId);
@@ -29864,9 +30236,9 @@ var BottlenecksContent = ({
               }
             }
           },
-          onClipSelect: (categoryId, clipId) => {
-            console.log(`[BottlenecksContent] Clip selected: ${categoryId}, clipId ${clipId}`);
-            loadAndPlayClipById(clipId, categoryId);
+          onClipSelect: (categoryId, clipId, position) => {
+            console.log(`[BottlenecksContent] Clip selected: ${categoryId}, clipId ${clipId}, position=${position}`);
+            loadAndPlayClipById(clipId, categoryId, position);
             const category = categoriesToShow.find((cat) => cat.type === categoryId);
             if (category) {
               trackCoreEvent(`${category.label} Clip Selected`, {
@@ -29993,7 +30365,7 @@ var arePropsEqual = (prevProps, nextProps) => {
   return prevProps.data.efficiency === nextProps.data.efficiency && prevProps.data.trend_score === nextProps.data.trend_score && prevProps.data.workspace_id === nextProps.data.workspace_id && prevProps.data.workspace_name === nextProps.data.workspace_name && prevProps.isBottleneck === nextProps.isBottleneck && prevProps.isLowEfficiency === nextProps.isLowEfficiency && prevProps.isVeryLowEfficiency === nextProps.isVeryLowEfficiency && // Position doesn't need deep equality check as it's generally static
   prevProps.position.id === nextProps.position.id;
 };
-var WorkspaceGridItem = React20__default.memo(({
+var WorkspaceGridItem = React21__default.memo(({
   data,
   position,
   isBottleneck = false,
@@ -30086,7 +30458,7 @@ var WorkspaceGridItem = React20__default.memo(({
   );
 }, arePropsEqual);
 WorkspaceGridItem.displayName = "WorkspaceGridItem";
-var WorkspaceGrid = React20__default.memo(({
+var WorkspaceGrid = React21__default.memo(({
   workspaces,
   isPdfMode = false,
   customWorkspacePositions,
@@ -30280,7 +30652,7 @@ var KPICard = ({
 }) => {
   useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  const trendInfo = React20__default.useMemo(() => {
+  const trendInfo = React21__default.useMemo(() => {
     let trendValue = trend || "neutral";
     if (change !== void 0 && trend === void 0) {
       trendValue = change > 0 ? "up" : change < 0 ? "down" : "neutral";
@@ -30303,7 +30675,7 @@ var KPICard = ({
     const shouldShowTrend = !(change === 0 && trend === void 0);
     return { trendValue, Icon: Icon2, colorClass, shouldShowTrend };
   }, [trend, change]);
-  const formattedValue = React20__default.useMemo(() => {
+  const formattedValue = React21__default.useMemo(() => {
     if (title === "Quality Compliance" && typeof value === "number") {
       return value.toFixed(1);
     }
@@ -30317,7 +30689,7 @@ var KPICard = ({
     }
     return value;
   }, [value, title]);
-  const formattedChange = React20__default.useMemo(() => {
+  const formattedChange = React21__default.useMemo(() => {
     if (change === void 0 || change === 0) return null;
     const absChange = Math.abs(change);
     return formatNumber(absChange, { minimumFractionDigits: 0, maximumFractionDigits: 1 });
@@ -31066,11 +31438,11 @@ var HealthStatusGrid = ({
     filteredWorkspaces.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsx("p", { className: "text-gray-500 dark:text-gray-400", children: searchTerm || statusFilter !== "all" ? "No workspaces found matching your filters." : "No workspaces available." }) })
   ] });
 };
-var ISTTimer2 = ISTTimer_default;
+var Timer2 = Timer_default;
 var DashboardHeader = memo(({ lineTitle, className = "", headerControls }) => {
   const dashboardConfig = useDashboardConfig();
+  const timezone = useAppTimezone();
   const getShiftName = () => {
-    const timezone = dashboardConfig.dateTimeConfig?.defaultTimezone || "Asia/Kolkata";
     const currentShift = getCurrentShift(timezone, dashboardConfig.shiftConfig);
     return currentShift.shiftId === 0 ? "Day" : "Night";
   };
@@ -31089,10 +31461,7 @@ var DashboardHeader = memo(({ lineTitle, className = "", headerControls }) => {
         /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mt-0.5 sm:mt-2 inline-flex flex-wrap items-center gap-1.5 sm:gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-500 sm:text-gray-600 whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx(ISTTimer2, {}),
-          " IST"
-        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-500 sm:text-gray-600 whitespace-nowrap", children: /* @__PURE__ */ jsx(Timer2, {}) }),
         /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-0.5 sm:gap-1", children: [
           /* @__PURE__ */ jsx("div", { className: "text-gray-500 sm:text-gray-600 scale-90 sm:scale-100", children: getShiftIcon() }),
           /* @__PURE__ */ jsxs("span", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-500 sm:text-gray-600 whitespace-nowrap", children: [
@@ -31487,7 +31856,7 @@ var Breadcrumbs = ({ items }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React20__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React21__default.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-gray-400 dark:text-gray-500" }),
     /* @__PURE__ */ jsxs(
       "span",
@@ -33944,7 +34313,7 @@ var ThreadSidebar = ({
   ] });
 };
 var axelProfilePng = "/axel-profile.png";
-var ProfilePicture = React20__default.memo(({ alt = "Axel", className = "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12" }) => {
+var ProfilePicture = React21__default.memo(({ alt = "Axel", className = "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12" }) => {
   return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: `${className} rounded-xl overflow-hidden shadow-sm`, children: /* @__PURE__ */ jsx(
     "img",
     {
@@ -35928,7 +36297,6 @@ function DebugAuthView() {
   return /* @__PURE__ */ jsx(DebugAuth, {});
 }
 var DebugAuthView_default = DebugAuthView;
-var DEFAULT_TIMEZONE = "Asia/Kolkata";
 var DEFAULT_SHIFT_CONFIG2 = {
   dayShift: { id: 0, startTime: "06:00" },
   nightShift: { id: 1, startTime: "18:00" }
@@ -35939,10 +36307,12 @@ var FactoryView = ({
   lineIds,
   lineNames = {},
   factoryName = "Plant 1",
-  timezone = DEFAULT_TIMEZONE,
+  timezone: propTimezone,
   shiftConfig = DEFAULT_SHIFT_CONFIG2,
   productIds = {}
 }) => {
+  const contextTimezone = useAppTimezone();
+  const timezone = propTimezone || contextTimezone;
   const effectiveLineIds = useMemo(() => {
     if (lineIds && lineIds.length > 0) {
       return lineIds;
@@ -36003,7 +36373,7 @@ var FactoryView = ({
           return;
         }
         const { shiftId } = getCurrentShift(timezone, shiftConfig);
-        const date = getOperationalDate();
+        const date = getOperationalDate(timezone);
         const hourlyDataPromises = effectiveLineIds.map(
           (lineId) => supabase.from("line_hourly_metrics").select("hour, efficiency").eq("line_id", lineId).eq("shift_id", shiftId).eq("date", date).order("hour", { ascending: false }).limit(5)
         );
@@ -36485,6 +36855,7 @@ function HomeView({
   const [displayNamesInitialized, setDisplayNamesInitialized] = useState(false);
   const [hasInitialDataLoaded, setHasInitialDataLoaded] = useState(false);
   const dashboardConfig = useDashboardConfig();
+  const timezone = useAppTimezone();
   useEffect(() => {
     const initDisplayNames = async () => {
       try {
@@ -36549,7 +36920,7 @@ function HomeView({
   useEffect(() => {
     if (!dashboardConfig?.s3Config) return;
     if (!workspaceMetrics || workspaceMetrics.length === 0) return;
-    getOperationalDate(dashboardConfig.dateTimeConfig?.defaultTimezone);
+    getOperationalDate(timezone || dashboardConfig.dateTimeConfig?.defaultTimezone || "UTC");
     console.log(`[HomeView] Starting optimized prefetch for ${workspaceMetrics.length} workspaces`);
     workspaceMetrics.map((ws) => ws.workspace_uuid).filter(Boolean);
   }, [dashboardConfig, workspaceMetrics]);
@@ -36653,7 +37024,7 @@ function HomeView({
                 animate: { opacity: 1, scale: 1 },
                 transition: { duration: 0.3 },
                 className: "h-full",
-                children: React20__default.createElement(WorkspaceGrid, {
+                children: React21__default.createElement(WorkspaceGrid, {
                   workspaces: memoizedWorkspaceMetrics,
                   lineNames,
                   factoryView: factoryViewId,
@@ -36679,7 +37050,7 @@ function HomeView({
                 animate: { opacity: 1, scale: 1 },
                 transition: { duration: 0.3 },
                 className: "h-full",
-                children: React20__default.createElement(WorkspaceGrid, {
+                children: React21__default.createElement(WorkspaceGrid, {
                   workspaces: [],
                   // Show empty grid while loading
                   lineNames,
@@ -36706,7 +37077,7 @@ function HomeView({
     }
   );
 }
-var AuthenticatedHomeView = withAuth(React20__default.memo(HomeView));
+var AuthenticatedHomeView = withAuth(React21__default.memo(HomeView));
 var HomeView_default = HomeView;
 function withWorkspaceDisplayNames(Component3, options = {}) {
   const {
@@ -37089,6 +37460,7 @@ var KPIDetailView = ({
   backLinkUrl,
   onBackClick
 }) => {
+  const timezone = useAppTimezone();
   const [activeTab, setActiveTab] = useState("overview");
   const [currentMonth, setCurrentMonth] = useState(() => {
     if (urlMonth && typeof urlMonth === "string") {
@@ -37125,7 +37497,7 @@ var KPIDetailView = ({
   }, [urlShift]);
   const supabase = useSupabase();
   const dashboardConfig = useDashboardConfig();
-  const configuredTimezone = dashboardConfig.dateTimeConfig?.defaultTimezone || "Asia/Kolkata";
+  const configuredTimezone = timezone || dashboardConfig.dateTimeConfig?.defaultTimezone || "UTC";
   useMemo(() => getCurrentTimeInZone(configuredTimezone), [configuredTimezone]);
   const supervisorEnabled = dashboardConfig?.supervisorConfig?.enabled || false;
   useEffect(() => {
@@ -37151,18 +37523,22 @@ var KPIDetailView = ({
     }
   }, [getShiftName]);
   const getDaysDifference2 = useCallback((date) => {
-    const today = /* @__PURE__ */ new Date();
     const compareDate = new Date(date);
-    const todayInZone = new Date(today.toLocaleString("en-US", { timeZone: configuredTimezone }));
+    const shiftStartTime = dashboardConfig.shiftConfig?.dayShift?.startTime || "06:00";
+    const operationalTodayString = getOperationalDate(configuredTimezone, /* @__PURE__ */ new Date(), shiftStartTime);
+    const operationalTodayDate = new Date(operationalTodayString);
     const compareDateInZone = new Date(compareDate.toLocaleString("en-US", { timeZone: configuredTimezone }));
-    todayInZone.setHours(0, 0, 0, 0);
+    operationalTodayDate.setHours(0, 0, 0, 0);
     compareDateInZone.setHours(0, 0, 0, 0);
-    const diffTime = todayInZone.getTime() - compareDateInZone.getTime();
-    const diffDays = Math.ceil(diffTime / (1e3 * 60 * 60 * 24));
+    const diffTime = compareDateInZone.getTime() - operationalTodayDate.getTime();
+    const diffDays = Math.round(diffTime / (1e3 * 60 * 60 * 24));
     if (diffDays === 0) return "Today";
-    if (diffDays === 1) return "Yesterday";
-    return `${diffDays} days ago`;
-  }, [configuredTimezone]);
+    if (diffDays === -1) return "Yesterday";
+    if (diffDays === 1) return "Tomorrow";
+    if (diffDays < -1) return `${Math.abs(diffDays)} days ago`;
+    if (diffDays > 1) return `${diffDays} days ahead`;
+    return "Today";
+  }, [configuredTimezone, dashboardConfig.shiftConfig]);
   const {
     metrics: metrics2,
     lineDetails,
@@ -37277,7 +37653,7 @@ var KPIDetailView = ({
       factory_id: lineDetails.factory_id,
       factory_name: lineDetails.factory.factory_name,
       shift_id: metrics2.shift_id ?? 0,
-      date: metrics2.date || getOperationalDate(),
+      date: metrics2.date || getOperationalDate(timezone || "UTC"),
       metrics: {
         avg_efficiency: metrics2.avg_efficiency ?? 0,
         avg_cycle_time: metrics2.avg_cycle_time ?? 0,
@@ -37824,7 +38200,7 @@ var KPIDetailViewWithDisplayNames = withSelectedLineDisplayNames(KPIDetailView);
 var KPIDetailView_default = KPIDetailViewWithDisplayNames;
 var LineCard = ({ line, onClick, supervisorEnabled = false }) => {
   const { kpis, isLoading, error } = useLineKPIs({ lineId: line.id });
-  const isOnTrack = React20__default.useMemo(() => {
+  const isOnTrack = React21__default.useMemo(() => {
     if (!kpis) return null;
     return kpis.efficiency.value > 90;
   }, [kpis]);
@@ -37932,7 +38308,8 @@ var KPIsOverviewView = ({
   const dateTimeConfig = useDateTimeConfig();
   const shiftConfig = useShiftConfig();
   const supervisorEnabled = dashboardConfig?.supervisorConfig?.enabled || false;
-  const configuredTimezone = dateTimeConfig.defaultTimezone || "Asia/Kolkata";
+  const dbTimezone = useAppTimezone();
+  const configuredTimezone = dbTimezone || dateTimeConfig.defaultTimezone || "UTC";
   useEffect(() => {
     const fetchLines = async () => {
       try {
@@ -39627,7 +40004,7 @@ var ShiftsView = ({
     ] })
   ] });
 };
-var AuthenticatedShiftsView = withAuth(React20__default.memo(ShiftsView));
+var AuthenticatedShiftsView = withAuth(React21__default.memo(ShiftsView));
 var ShiftsView_default = ShiftsView;
 
 // src/lib/constants/actions.ts
@@ -40843,6 +41220,7 @@ var TargetsView = ({
   userId,
   onSaveChanges
 }) => {
+  const timezone = useAppTimezone();
   const initialLineWorkspaces = useMemo(() => {
     return lineIds.reduce((acc, lineId) => ({
       ...acc,
@@ -41061,7 +41439,7 @@ var TargetsView = ({
             updatedLineWorkspaces[result.lineId].factoryId = result.factoryId;
           }
         });
-        const currentDate = getOperationalDate();
+        const currentDate = getOperationalDate(timezone);
         for (const lineId of lineIds) {
           if (!updatedLineWorkspaces[lineId]?.factoryId) {
             console.warn(`Skipping workspace fetch for line ${lineId} - no factory ID`);
@@ -41142,7 +41520,7 @@ var TargetsView = ({
   }, [lineIds, companyId, loadOperatingHours]);
   const fetchAllShiftsData = useCallback(async (currentWorkspaces) => {
     if (!supabase) return;
-    const currentDate = getOperationalDate();
+    const currentDate = getOperationalDate(timezone);
     const newAllShiftsData = {
       0: JSON.parse(JSON.stringify(currentWorkspaces)),
       // Deep clone for day shift
@@ -41381,7 +41759,7 @@ var TargetsView = ({
         return;
       }
       const currentFactoryId = lineDataToSave.factoryId;
-      const currentDate = getOperationalDate();
+      const currentDate = getOperationalDate(timezone);
       console.log(`[handleSaveLine] currentDate: ${currentDate}, selectedShift: ${selectedShift}`);
       const workspaceThresholdUpdates = lineDataToSave.workspaces.map((ws) => ({
         line_id: lineId,
@@ -41543,37 +41921,43 @@ var TargetsView = ({
 };
 var TargetsViewWithDisplayNames = withAllWorkspaceDisplayNames(TargetsView);
 var TargetsView_default = TargetsViewWithDisplayNames;
-var AuthenticatedTargetsView = withAuth(React20__default.memo(TargetsViewWithDisplayNames));
+var AuthenticatedTargetsView = withAuth(React21__default.memo(TargetsViewWithDisplayNames));
 
 // src/views/workspace-detail-view.utils.ts
-var formatISTDate2 = (date = /* @__PURE__ */ new Date(), options) => {
+var formatDateInTimezone = (date = /* @__PURE__ */ new Date(), timezone, options) => {
   const defaultOptions = {
     day: "numeric",
     month: "long",
     year: "numeric",
-    timeZone: "Asia/Kolkata"
+    timeZone: timezone
   };
-  const formatter = new Intl.DateTimeFormat("en-IN", {
+  const formatter = new Intl.DateTimeFormat("en-US", {
     ...defaultOptions,
     ...options
   });
   return formatter.format(date);
 };
+var formatISTDate2 = (date = /* @__PURE__ */ new Date(), options) => {
+  return formatDateInTimezone(date, "Asia/Kolkata", options);
+};
 var formatWorkspaceName3 = (name, lineId) => {
   return getWorkspaceDisplayName(name, lineId);
 };
-var getDaysDifference = (date) => {
-  const today = /* @__PURE__ */ new Date();
+var getDaysDifference = (date, timezone = "UTC", shiftStartTime = "06:00") => {
   const compareDate = new Date(date);
-  const todayIST = new Date(today.toLocaleString("en-US", { timeZone: "Asia/Kolkata" }));
-  const compareDateIST = new Date(compareDate.toLocaleString("en-US", { timeZone: "Asia/Kolkata" }));
-  todayIST.setHours(0, 0, 0, 0);
-  compareDateIST.setHours(0, 0, 0, 0);
-  const diffTime = todayIST.getTime() - compareDateIST.getTime();
-  const diffDays = Math.ceil(diffTime / (1e3 * 60 * 60 * 24));
+  const operationalTodayString = getOperationalDate(timezone, /* @__PURE__ */ new Date(), shiftStartTime);
+  const operationalTodayDate = new Date(operationalTodayString);
+  const compareDateInTz = new Date(compareDate.toLocaleString("en-US", { timeZone: timezone }));
+  operationalTodayDate.setHours(0, 0, 0, 0);
+  compareDateInTz.setHours(0, 0, 0, 0);
+  const diffTime = compareDateInTz.getTime() - operationalTodayDate.getTime();
+  const diffDays = Math.round(diffTime / (1e3 * 60 * 60 * 24));
   if (diffDays === 0) return "Today";
-  if (diffDays === 1) return "Yesterday";
-  return `${diffDays} days ago`;
+  if (diffDays === -1) return "Yesterday";
+  if (diffDays === 1) return "Tomorrow";
+  if (diffDays < -1) return `${Math.abs(diffDays)} days ago`;
+  if (diffDays > 1) return `${diffDays} days ahead`;
+  return "Today";
 };
 var getInitialTab = (sourceType, defaultTab, fromMonthly, urlDate) => {
   if (sourceType === "lineMonthlyHistory") {
@@ -41621,7 +42005,8 @@ var WorkspaceDetailView = ({
   const [previousView, setPreviousView] = useState("dashboard");
   const [monthlyData, setMonthlyData] = useState([]);
   const [monthlyDataLoading, setMonthlyDataLoading] = useState(false);
-  const today = new Date((/* @__PURE__ */ new Date()).toLocaleString("en-US", { timeZone: "Asia/Kolkata" }));
+  const timezone = useAppTimezone();
+  const today = new Date((/* @__PURE__ */ new Date()).toLocaleString("en-US", { timeZone: timezone }));
   const [selectedMonth, setSelectedMonth] = useState(today.getMonth());
   const [selectedYear, setSelectedYear] = useState(today.getFullYear());
   const [selectedShift, setSelectedShift] = useState("day");
@@ -41678,7 +42063,7 @@ var WorkspaceDetailView = ({
     error: liveError
   } = useWorkspaceDetailedMetrics(
     workspaceId || "",
-    getOperationalDate(),
+    getOperationalDate(timezone),
     void 0
   );
   const workspace = isHistoricView ? historicMetrics : liveMetrics;
@@ -41777,7 +42162,7 @@ var WorkspaceDetailView = ({
   }, [isClipsEnabled, activeTab]);
   useEffect(() => {
     if (liveMetrics && !date && !shift) {
-      const currentDate = getOperationalDate();
+      const currentDate = getOperationalDate(timezone);
       if (liveMetrics.date !== currentDate) {
         setUsingFallbackData(true);
         if (activeTab !== "monthly_history") {
@@ -41795,10 +42180,10 @@ var WorkspaceDetailView = ({
         return date;
       } catch (e) {
         console.error("Error parsing historic date:", e);
-        return getOperationalDate();
+        return getOperationalDate(timezone);
       }
     }
-    return getOperationalDate();
+    return getOperationalDate(timezone);
   }, [isHistoricView, date]);
   const handleMonthlyDataLoaded = useCallback((data) => {
     console.log("[handleMonthlyDataLoaded] Received data:", {
@@ -42045,7 +42430,7 @@ var WorkspaceDetailView = ({
                   /* @__PURE__ */ jsx("div", { className: "text-gray-700 scale-90", children: getShiftIcon(workspace.shift_type) }),
                   /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-700", children: workspace.shift_type })
                 ] }),
-                !date && !shift && !usingFallbackData ? /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsx(LiveTimer, {}) }) }) : date ? /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-blue-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-blue-700", children: getDaysDifference(workspace.date) }) }) : usingFallbackData ? /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-amber-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-amber-700", children: getDaysDifference(workspace.date) }) }) : null
+                !date && !shift && !usingFallbackData ? /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-green-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-green-700", children: /* @__PURE__ */ jsx(LiveTimer, {}) }) }) : date ? /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-blue-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-blue-700", children: getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00") }) }) : usingFallbackData ? /* @__PURE__ */ jsx("div", { className: "inline-flex items-center px-2.5 py-1 bg-amber-100 rounded-full", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-amber-700", children: getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00") }) }) : null
               ] }),
               /* @__PURE__ */ jsx("div", { className: "hidden sm:block mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 md:gap-4", children: [
                 !date && !shift && !usingFallbackData && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -42055,13 +42440,13 @@ var WorkspaceDetailView = ({
                 /* @__PURE__ */ jsx("span", { className: "text-sm md:text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
                 /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
                 date && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference(workspace.date) }),
+                  /* @__PURE__ */ jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00") }),
                   /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" })
                 ] }),
                 !date && !shift && usingFallbackData && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsxs("span", { className: "px-2 py-1 text-xs font-medium bg-amber-100 text-amber-700 rounded-md", children: [
                     "Latest available data (",
-                    getDaysDifference(workspace.date),
+                    getDaysDifference(workspace.date, timezone, dashboardConfig?.shiftConfig?.dayShift?.startTime || "06:00"),
                     ")"
                   ] }),
                   /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" })
@@ -42624,7 +43009,8 @@ var WorkspaceHealthView = ({
 }) => {
   const router = useRouter();
   const [groupBy, setGroupBy] = useState("line");
-  const operationalDate = getOperationalDate();
+  const timezone = useAppTimezone();
+  const operationalDate = getOperationalDate(timezone || "UTC");
   const currentHour = (/* @__PURE__ */ new Date()).getHours();
   const isNightShift = currentHour >= 18 || currentHour < 6;
   const shiftType = isNightShift ? "Night" : "Day";
@@ -43101,7 +43487,7 @@ var S3Service = class {
   /**
    * List S3 clips for a specific workspace and date
    */
-  async listS3Clips(workspaceId, date = getOperationalDate()) {
+  async listS3Clips(workspaceId, date) {
     const prefix = `sop_violations/${workspaceId}/${date}/`;
     if (this.isSimulated()) {
       console.log("Running in simulated mode - generating mock data for:", prefix);
@@ -43260,7 +43646,7 @@ var S3Service = class {
   /**
    * Get all clips for a workspace on a specific date
    */
-  async getWorkspaceClips(workspaceId, date = getOperationalDate()) {
+  async getWorkspaceClips(workspaceId, date) {
     try {
       if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) {
         throw new Error("Invalid date format. Use YYYY-MM-DD.");
@@ -43688,4 +44074,4 @@ function shuffleArray(array) {
   return shuffled;
 }
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedWorkspaceHealthView, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ClipFilterProvider, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAudioService, useAuth, useAuthConfig, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useTicketHistory, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealth, useWorkspaceHealthById, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, workspaceHealthService, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedWorkspaceHealthView, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ClipFilterProvider, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealth, useWorkspaceHealthById, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };