@optifye/dashboard-core 6.6.6 → 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,
@@ -3568,329 +3569,10 @@ var useAudioService = () => {
 };
 
 // src/lib/utils/dateShiftUtils.ts
-function isValidDateFormat(date) {
-  return /^\d{4}-\d{2}-\d{2}$/.test(date);
-}
 function isValidShiftId(shiftId) {
   const id3 = typeof shiftId === "string" ? parseInt(shiftId, 10) : shiftId;
   return id3 === 0 || id3 === 1;
 }
-
-// src/lib/api/s3-clips-parser.ts
-function parseS3Uri(s3Uri, sopCategories) {
-  const path = new URL(s3Uri).pathname;
-  const parts = path.split("/").filter((p) => p);
-  if (s3Uri.includes("missed_qchecks")) {
-    console.warn(`Skipping missed_qchecks URI in parseS3Uri: ${s3Uri}`);
-    return null;
-  }
-  if (parts.length < 8) {
-    console.warn(`Invalid S3 path structure: ${s3Uri} - Too few parts: ${parts.length}, expected at least 8`);
-    return null;
-  }
-  try {
-    const datePart = parts[2];
-    const shiftPart = parts[3];
-    const violationType = parts[4];
-    let folderName = "";
-    let timestamp = "";
-    for (let i = 5; i < parts.length; i++) {
-      const part = parts[i];
-      if (part && part.includes("_") && /\d{8}_\d{6}/.test(part)) {
-        folderName = part;
-        const timeMatch = folderName.match(/_(\d{8})_(\d{6})_/);
-        if (timeMatch) {
-          timestamp = `${timeMatch[2].substring(0, 2)}:${timeMatch[2].substring(2, 4)}:${timeMatch[2].substring(4, 6)}`;
-          break;
-        }
-      }
-    }
-    if (!timestamp) {
-      console.warn(`Couldn't extract timestamp from any part: ${parts.join("/")}`);
-      timestamp = "00:00:00";
-    }
-    let severity = "low";
-    let type = "bottleneck";
-    let description = "Analysis Clip";
-    const normalizedViolationType = violationType.toLowerCase().trim();
-    if (sopCategories && sopCategories.length > 0) {
-      const matchedCategory = sopCategories.find((category) => {
-        const categoryId = category.id.toLowerCase();
-        const s3FolderName = (category.s3FolderName || category.id).toLowerCase();
-        return categoryId === normalizedViolationType || s3FolderName === normalizedViolationType || // Also check for partial matches for flexibility
-        normalizedViolationType.includes(categoryId) || normalizedViolationType.includes(s3FolderName);
-      });
-      if (matchedCategory) {
-        type = matchedCategory.id;
-        description = matchedCategory.description || matchedCategory.label;
-        if (matchedCategory.color.includes("red")) {
-          severity = "high";
-        } else if (matchedCategory.color.includes("yellow") || matchedCategory.color.includes("orange")) {
-          severity = "medium";
-        } else {
-          severity = "low";
-        }
-        console.log(`Matched SOP category: ${matchedCategory.id} for violation type: ${violationType}`);
-        return { timestamp, severity, description, type, originalUri: s3Uri };
-      }
-    }
-    switch (normalizedViolationType) {
-      case "idle_time":
-      case "idle":
-      case "low_value":
-      case "low value":
-      case "low_value_moment":
-      case "low_value_moments":
-      case "low value moment":
-      case "low value moments":
-        type = "low_value";
-        severity = "low";
-        description = "Idle Time Detected";
-        break;
-      case "sop_deviation":
-        type = "missing_quality_check";
-        severity = "high";
-        description = "SOP Deviations";
-        break;
-      case "long_cycle_time":
-        severity = "high";
-        type = "long_cycle_time";
-        description = "Long Cycle Time Detected";
-        break;
-      case "best_cycle_time":
-        type = "best_cycle_time";
-        severity = "low";
-        description = "Best Cycle Time Performance";
-        break;
-      case "worst_cycle_time":
-        type = "worst_cycle_time";
-        severity = "high";
-        description = "Worst Cycle Time Performance";
-        break;
-      case "cycle_completion":
-      case "completed_cycles":
-      case "completed_cycle":
-        type = "cycle_completion";
-        severity = "low";
-        description = "Cycle Completion";
-        break;
-      case "running_cycle":
-      case "active_cycle":
-      case "production_cycle":
-        type = "running_cycle";
-        severity = "low";
-        description = "Active Production Cycle";
-        break;
-      case "setup_state":
-      case "machine_setup":
-      case "line_setup":
-        type = "setup_state";
-        severity = "medium";
-        description = "Machine Setup Activity";
-        break;
-      case "medium_bottleneck":
-        severity = "medium";
-        description = "Medium Bottleneck Identified";
-        break;
-      case "minor_bottleneck":
-      case "mild_bottleneck":
-        severity = "low";
-        description = "Minor Bottleneck Identified";
-        break;
-      default:
-        if (normalizedViolationType.includes("sop") && normalizedViolationType.includes("deviation")) {
-          type = "missing_quality_check";
-          severity = "high";
-          description = "SOP Deviations";
-        } else if (normalizedViolationType.includes("worst") && normalizedViolationType.includes("cycle")) {
-          type = "worst_cycle_time";
-          severity = "high";
-          description = "Worst Cycle Time Performance";
-        } else if (normalizedViolationType.includes("best") && normalizedViolationType.includes("cycle")) {
-          type = "best_cycle_time";
-          severity = "low";
-          description = "Best Cycle Time Performance";
-        } else if (normalizedViolationType.includes("long") && normalizedViolationType.includes("cycle")) {
-          type = "long_cycle_time";
-          severity = "high";
-          description = "Long Cycle Time Detected";
-        } else if (normalizedViolationType.includes("cycle") && (normalizedViolationType.includes("completion") || normalizedViolationType.includes("complete"))) {
-          type = "cycle_completion";
-          severity = "low";
-          description = "Cycle Completion";
-        } else if (normalizedViolationType.includes("running") && normalizedViolationType.includes("cycle")) {
-          type = "running_cycle";
-          severity = "low";
-          description = "Active Production Cycle";
-        } else if (normalizedViolationType.includes("setup") || normalizedViolationType.includes("machine") && normalizedViolationType.includes("setup")) {
-          type = "setup_state";
-          severity = "medium";
-          description = "Machine Setup Activity";
-        } else {
-          description = `Clip type: ${violationType.replace(/_/g, " ")}`;
-          console.log(`Detected unknown violation type: ${violationType} in URI: ${s3Uri}`);
-        }
-        break;
-    }
-    return { timestamp, severity, description, type, originalUri: s3Uri };
-  } catch (error) {
-    console.error(`Error parsing S3 URI: ${s3Uri}`, error);
-    return null;
-  }
-}
-function shuffleArray(array) {
-  const shuffled = [...array];
-  for (let i = shuffled.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
-  }
-  return shuffled;
-}
-var SmartVideoCache = class extends EventEmitter {
-  constructor() {
-    super();
-    this.metrics = {
-      hits: 0,
-      misses: 0,
-      evictions: 0,
-      totalSize: 0,
-      entryCount: 0,
-      hitRate: 0
-    };
-    this.setMaxListeners(50);
-  }
-  /**
-   * DISABLED - Always returns null
-   */
-  async getSummary(key) {
-    this.metrics.misses++;
-    this.updateHitRate();
-    return null;
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  async setSummary(key, summary) {
-  }
-  /**
-   * DISABLED - Always returns null
-   */
-  async getVideos(key) {
-    this.metrics.misses++;
-    this.updateHitRate();
-    return null;
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  async setVideos(key, videos) {
-  }
-  /**
-   * DISABLED - Always returns null
-   */
-  async getClipCounts(key) {
-    console.log("[SmartVideoCache] DISABLED - Returning null for clip counts");
-    this.metrics.misses++;
-    this.updateHitRate();
-    return null;
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  async setClipCounts(key, clipCountsWithIndex, ttlMinutes) {
-    console.log("[SmartVideoCache] DISABLED - Not caching clip counts");
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  setPrefetchStatus(key, status) {
-  }
-  /**
-   * DISABLED - Always returns NONE
-   */
-  getPrefetchStatus(key) {
-    return "none" /* NONE */;
-  }
-  /**
-   * DISABLED - Always returns false
-   */
-  isPrefetchReady(key) {
-    return false;
-  }
-  /**
-   * DISABLED - Returns empty cleanup function
-   */
-  subscribeToPrefetchStatus(key, callback) {
-    return () => {
-    };
-  }
-  /**
-   * DISABLED - Always returns null
-   */
-  getSignedUrl(s3Uri) {
-    this.metrics.misses++;
-    this.updateHitRate();
-    return null;
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  setSignedUrl(s3Uri, url, ttlSeconds = 3600) {
-  }
-  /**
-   * DISABLED - Always returns empty array
-   */
-  async getVideosByWorkspace(workspaceId) {
-    return [];
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  async warmup(entries) {
-  }
-  /**
-   * Get cache statistics (mostly zeros since cache is disabled)
-   */
-  getStats() {
-    return {
-      ...this.metrics,
-      summaryStats: { hits: 0, misses: this.metrics.misses, evictions: 0, totalSize: 0 },
-      videoStats: { hits: 0, misses: this.metrics.misses, evictions: 0, totalSize: 0 },
-      clipCountsStats: { hits: 0, misses: this.metrics.misses, evictions: 0, totalSize: 0 },
-      urlCacheSize: 0
-    };
-  }
-  /**
-   * DISABLED - Does nothing
-   */
-  clear(type) {
-    this.removeAllListeners();
-  }
-  /**
-   * Update hit rate metric
-   */
-  updateHitRate() {
-    const total = this.metrics.hits + this.metrics.misses;
-    this.metrics.hitRate = total > 0 ? this.metrics.hits / total : 0;
-  }
-  /**
-   * Export cache state for debugging (returns empty state)
-   */
-  exportState() {
-    return {
-      summaries: [],
-      videos: [],
-      urls: [],
-      metrics: this.getStats()
-    };
-  }
-};
-var smartVideoCache = new SmartVideoCache();
-if (typeof window !== "undefined") {
-  window.addEventListener("beforeunload", () => {
-    console.log("[SmartVideoCache] Cache disabled - no cleanup needed");
-  });
-}
 var getSupabaseClient = () => {
   const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
   const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
@@ -3903,616 +3585,6 @@ var getAuthToken = async () => {
   try {
     const supabase = getSupabaseClient();
     const { data: { session } } = await supabase.auth.getSession();
-    return session?.access_token || null;
-  } catch (error) {
-    console.error("[S3ClipsAPIClient] Error getting auth token:", error);
-    return null;
-  }
-};
-var S3ClipsAPIClient = class {
-  constructor(sopCategories) {
-    this.baseUrl = "/api/clips";
-    this.requestCache = /* @__PURE__ */ new Map();
-    this.sopCategories = sopCategories;
-    console.log("[S3ClipsAPIClient] \u2705 Initialized - Using secure API routes (no direct S3 access)");
-  }
-  /**
-   * Fetch with authentication and error handling
-   */
-  async fetchWithAuth(endpoint, body) {
-    const token = await getAuthToken();
-    if (!token) {
-      throw new Error("Authentication required");
-    }
-    const response = await fetch(endpoint, {
-      method: "POST",
-      headers: {
-        "Authorization": `Bearer ${token}`,
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(body)
-    });
-    if (!response.ok) {
-      const error = await response.json().catch(() => ({ error: "Request failed" }));
-      throw new Error(error.error || `API error: ${response.status}`);
-    }
-    return response.json();
-  }
-  /**
-   * Deduplicate requests to prevent multiple API calls
-   */
-  async deduplicate(key, factory) {
-    if (this.requestCache.has(key)) {
-      console.log(`[S3ClipsAPIClient] Deduplicating request: ${key}`);
-      return this.requestCache.get(key);
-    }
-    const promise = factory().finally(() => {
-      this.requestCache.delete(key);
-    });
-    this.requestCache.set(key, promise);
-    return promise;
-  }
-  /**
-   * List S3 clips
-   */
-  async listS3Clips(params) {
-    const cacheKey = `list:${JSON.stringify(params)}`;
-    return this.deduplicate(cacheKey, async () => {
-      const response = await this.fetchWithAuth(this.baseUrl, {
-        action: "list",
-        workspaceId: params.workspaceId,
-        date: params.date,
-        shift: params.shiftId,
-        maxKeys: params.maxKeys
-      });
-      return response.clips.map((clip) => clip.originalUri);
-    });
-  }
-  /**
-   * Get clip counts
-   */
-  async getClipCounts(workspaceId, date, shiftId) {
-    const cacheKey = `counts:${workspaceId}:${date}:${shiftId}`;
-    return this.deduplicate(cacheKey, async () => {
-      const response = await this.fetchWithAuth(this.baseUrl, {
-        action: "count",
-        workspaceId,
-        date,
-        shift: shiftId.toString()
-      });
-      return response.counts;
-    });
-  }
-  /**
-   * Get clip counts with index (for compatibility)
-   */
-  async getClipCountsWithIndex(workspaceId, date, shiftId) {
-    const counts = await this.getClipCounts(workspaceId, date, shiftId.toString());
-    const videoIndex = {
-      byCategory: /* @__PURE__ */ new Map(),
-      allVideos: [],
-      counts,
-      workspaceId,
-      date,
-      shiftId: shiftId.toString(),
-      lastUpdated: /* @__PURE__ */ new Date()
-    };
-    return { counts, videoIndex };
-  }
-  /**
-   * Get metadata for a video
-   */
-  async getMetadata(playlistUri) {
-    const cacheKey = `metadata:${playlistUri}`;
-    return this.deduplicate(cacheKey, async () => {
-      const response = await this.fetchWithAuth(this.baseUrl, {
-        action: "metadata",
-        playlistUri
-      });
-      return response.metadata;
-    });
-  }
-  /**
-   * Get metadata cycle time
-   */
-  async getMetadataCycleTime(playlistUri) {
-    const metadata = await this.getMetadata(playlistUri);
-    return metadata?.cycle_time_seconds || null;
-  }
-  /**
-   * Get first clip for category
-   */
-  async getFirstClipForCategory(workspaceId, date, shiftId, category) {
-    const cacheKey = `first:${workspaceId}:${date}:${shiftId}:${category}`;
-    return this.deduplicate(cacheKey, async () => {
-      const response = await this.fetchWithAuth(this.baseUrl, {
-        action: "first",
-        workspaceId,
-        date,
-        shift: shiftId.toString(),
-        category,
-        sopCategories: this.sopCategories
-      });
-      return response.video;
-    });
-  }
-  /**
-   * Get clip by index
-   */
-  async getClipByIndex(workspaceId, date, shiftId, category, index, includeCycleTime = true, includeMetadata = false) {
-    const cacheKey = `by-index:${workspaceId}:${date}:${shiftId}:${category}:${index}`;
-    return this.deduplicate(cacheKey, async () => {
-      const response = await this.fetchWithAuth(this.baseUrl, {
-        action: "by-index",
-        workspaceId,
-        date,
-        shift: shiftId.toString(),
-        category,
-        index,
-        sopCategories: this.sopCategories
-      });
-      const video = response.video;
-      if (video && includeMetadata && video.originalUri) {
-        try {
-          const metadata = await this.getMetadata(video.originalUri);
-          if (metadata) {
-            video.cycle_time_seconds = metadata.cycle_time_seconds;
-            video.creation_timestamp = metadata.creation_timestamp;
-          }
-        } catch (error) {
-          console.warn("[S3ClipsAPIClient] Failed to fetch metadata:", error);
-        }
-      }
-      return video;
-    });
-  }
-  /**
-   * Get videos page with pagination
-   */
-  async getVideosPage(workspaceId, date, shiftId, category, pageSize = 5, startAfter) {
-    const cacheKey = `page:${workspaceId}:${date}:${shiftId}:${category}:${pageSize}:${startAfter || "first"}`;
-    return this.deduplicate(cacheKey, async () => {
-      const response = await this.fetchWithAuth(this.baseUrl, {
-        action: "page",
-        workspaceId,
-        date,
-        shift: shiftId.toString(),
-        category,
-        pageSize,
-        startAfter,
-        sopCategories: this.sopCategories
-      });
-      return {
-        videos: response.videos,
-        nextToken: response.nextToken,
-        hasMore: response.hasMore
-      };
-    });
-  }
-  /**
-   * Batch fetch multiple videos in parallel
-   */
-  async batchFetchVideos(workspaceId, date, shiftId, requests) {
-    const batchKey = `batch:${workspaceId}:${date}:${shiftId}:${requests.length}`;
-    return this.deduplicate(batchKey, async () => {
-      const response = await this.fetchWithAuth("/api/clips/batch", {
-        workspaceId,
-        date,
-        shift: shiftId.toString(),
-        requests,
-        sopCategories: this.sopCategories
-      });
-      console.log(`[S3ClipsAPIClient] Batch fetched ${response.videos.length} videos in ${response.performance.duration}ms`);
-      return response.videos;
-    });
-  }
-  /**
-   * Convert S3 URI to CloudFront URL
-   * In the API client, URLs are already signed from the server
-   */
-  s3UriToCloudfront(s3Uri) {
-    return s3Uri;
-  }
-  /**
-   * Clean up resources
-   */
-  dispose() {
-    this.requestCache.clear();
-  }
-  /**
-   * Get service statistics
-   */
-  getStats() {
-    return {
-      requestCache: {
-        pendingCount: this.requestCache.size,
-        maxSize: 1e3
-      }
-    };
-  }
-};
-
-// src/lib/api/s3-clips-secure.ts
-var S3ClipsService = class {
-  constructor(config) {
-    // Flags for compatibility
-    this.isIndexBuilding = false;
-    this.isPrefetching = false;
-    this.currentMetadataFetches = 0;
-    this.MAX_CONCURRENT_METADATA = 3;
-    this.config = config;
-    if (!config.s3Config) {
-      throw new Error("S3 configuration is required");
-    }
-    const sopCategories = config.s3Config.sopCategories?.default;
-    this.apiClient = new S3ClipsAPIClient(sopCategories);
-    const processing = config.s3Config.processing || {};
-    this.defaultLimitPerCategory = processing.defaultLimitPerCategory || 30;
-    this.maxLimitPerCategory = processing.maxLimitPerCategory || 1e3;
-    this.concurrencyLimit = processing.concurrencyLimit || 10;
-    this.maxInitialFetch = processing.maxInitialFetch || 60;
-    console.log("[S3ClipsService] \u2705 Initialized with secure API client - AWS credentials are now server-side only!");
-  }
-  /**
-   * Lists S3 clips using API
-   */
-  async listS3Clips(params) {
-    const { workspaceId, date, shiftId } = params;
-    if (!isValidShiftId(shiftId)) {
-      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}`);
-      return [];
-    }
-    console.log(`[S3ClipsService] Listing clips via API for workspace: ${workspaceId}`);
-    try {
-      return await this.apiClient.listS3Clips(params);
-    } catch (error) {
-      console.error("[S3ClipsService] Error listing clips:", error);
-      return [];
-    }
-  }
-  /**
-   * Get metadata cycle time
-   */
-  async getMetadataCycleTime(playlistUri) {
-    try {
-      return await this.apiClient.getMetadataCycleTime(playlistUri);
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching metadata cycle time:", error);
-      return null;
-    }
-  }
-  /**
-   * Control prefetch mode
-   */
-  setPrefetchMode(enabled) {
-    this.isPrefetching = enabled;
-    console.log(`[S3ClipsService] Prefetch mode ${enabled ? "enabled" : "disabled"}`);
-  }
-  /**
-   * Get full metadata
-   */
-  async getFullMetadata(playlistUri) {
-    if (this.isIndexBuilding || this.isPrefetching) {
-      console.warn("[S3ClipsService] Skipping metadata - operation in progress");
-      return null;
-    }
-    if (this.currentMetadataFetches >= this.MAX_CONCURRENT_METADATA) {
-      console.warn("[S3ClipsService] Skipping metadata - max concurrent fetches reached");
-      return null;
-    }
-    this.currentMetadataFetches++;
-    try {
-      return await this.apiClient.getMetadata(playlistUri);
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching metadata:", error);
-      return null;
-    } finally {
-      this.currentMetadataFetches--;
-    }
-  }
-  /**
-   * Convert S3 URI to CloudFront URL
-   * URLs from API are already signed
-   */
-  s3UriToCloudfront(s3Uri) {
-    if (s3Uri.startsWith("http")) {
-      return s3Uri;
-    }
-    console.warn("[S3ClipsService] Unexpected S3 URI in secure mode:", s3Uri);
-    return s3Uri;
-  }
-  /**
-   * Get SOP categories for workspace
-   */
-  getSOPCategories(workspaceId) {
-    const sopConfig = this.config.s3Config?.sopCategories;
-    if (!sopConfig) return void 0;
-    if (sopConfig.workspaceOverrides && sopConfig.workspaceOverrides[workspaceId]) {
-      return sopConfig.workspaceOverrides[workspaceId];
-    }
-    return sopConfig.default;
-  }
-  async getClipCounts(workspaceId, date, shiftId, buildIndex) {
-    if (!isValidShiftId(shiftId)) {
-      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}`);
-      return buildIndex ? { counts: {}, videoIndex: this.createEmptyVideoIndex(workspaceId, date, shiftId.toString()) } : {};
-    }
-    try {
-      if (buildIndex) {
-        const result = await this.apiClient.getClipCountsWithIndex(workspaceId, date, shiftId);
-        const cacheKey = `clip-counts:${workspaceId}:${date}:${shiftId}`;
-        await smartVideoCache.setClipCounts(cacheKey, result);
-        return result;
-      } else {
-        const counts = await this.apiClient.getClipCounts(workspaceId, date, shiftId);
-        return counts;
-      }
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching clip counts:", error);
-      return buildIndex ? { counts: {}, videoIndex: this.createEmptyVideoIndex(workspaceId, date, shiftId.toString()) } : {};
-    }
-  }
-  async getClipCountsCacheFirst(workspaceId, date, shiftId, buildIndex) {
-    const cacheKey = `clip-counts:${workspaceId}:${date}:${shiftId}`;
-    const cachedResult = await smartVideoCache.getClipCounts(cacheKey);
-    if (cachedResult) {
-      console.log("[S3ClipsService] Using cached clip counts");
-      return buildIndex ? cachedResult : cachedResult.counts;
-    }
-    console.log("[S3ClipsService] Cache miss - fetching from API");
-    return buildIndex ? this.getClipCounts(workspaceId, date, shiftId, true) : this.getClipCounts(workspaceId, date, shiftId);
-  }
-  /**
-   * Get first clip for category
-   */
-  async getFirstClipForCategory(workspaceId, date, shiftId, category) {
-    if (!isValidShiftId(shiftId)) {
-      console.error(`[S3ClipsService] Invalid shift ID: ${shiftId}`);
-      return null;
-    }
-    try {
-      return await this.apiClient.getFirstClipForCategory(workspaceId, date, shiftId, category);
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching first clip:", error);
-      return null;
-    }
-  }
-  /**
-   * Get video from index (for compatibility)
-   */
-  async getVideoFromIndex(videoIndex, category, index, includeCycleTime = true, includeMetadata = true) {
-    const { workspaceId, date, shiftId } = videoIndex;
-    return this.getClipByIndex(
-      workspaceId,
-      date,
-      shiftId,
-      category,
-      index,
-      includeCycleTime,
-      includeMetadata
-    );
-  }
-  /**
-   * Get clip by index
-   */
-  async getClipByIndex(workspaceId, date, shiftId, category, index, includeCycleTime = true, includeMetadata = false) {
-    try {
-      return await this.apiClient.getClipByIndex(
-        workspaceId,
-        date,
-        shiftId,
-        category,
-        index,
-        includeCycleTime,
-        includeMetadata
-      );
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching clip by index:", error);
-      return null;
-    }
-  }
-  /**
-   * Process full video (for compatibility)
-   */
-  async processFullVideo(uri, index, workspaceId, date, shiftId, includeCycleTime, includeMetadata = false) {
-    const sopCategories = this.getSOPCategories(workspaceId);
-    const parsedInfo = parseS3Uri(uri, sopCategories);
-    if (!parsedInfo) {
-      console.warn(`Skipping URI due to parsing failure: ${uri}`);
-      return null;
-    }
-    const video = {
-      id: `${workspaceId}-${date}-${shiftId}-${index}`,
-      src: uri,
-      // Already signed from API
-      ...parsedInfo,
-      originalUri: uri
-    };
-    if (includeMetadata) {
-      const metadata = await this.getFullMetadata(uri);
-      if (metadata) {
-        video.cycle_time_seconds = metadata.original_task_metadata?.cycle_time;
-        video.creation_timestamp = metadata.upload_timestamp || metadata.original_task_metadata?.timestamp || metadata.creation_timestamp;
-      }
-    }
-    return video;
-  }
-  /**
-   * Fetch clips (main method for compatibility)
-   */
-  async fetchClips(params) {
-    const {
-      workspaceId,
-      date: inputDate,
-      shift,
-      category,
-      limit,
-      offset = 0,
-      mode
-    } = params;
-    if (!workspaceId) {
-      throw new Error("Valid Workspace ID is required");
-    }
-    const date = inputDate || getOperationalDate(
-      this.config.dateTimeConfig?.defaultTimezone || "Asia/Kolkata",
-      /* @__PURE__ */ new Date(),
-      this.config.shiftConfig?.dayShift?.startTime || "06:00"
-    );
-    if (!isValidDateFormat(date)) {
-      throw new Error("Invalid date format. Use YYYY-MM-DD.");
-    }
-    let shiftId;
-    if (shift !== void 0) {
-      if (!isValidShiftId(shift)) {
-        throw new Error("Invalid shift value. Must be 0 (day) or 1 (night).");
-      }
-      shiftId = parseInt(shift, 10);
-    } else {
-      const { shiftId: currentShiftId } = getCurrentShift(
-        this.config.dateTimeConfig?.defaultTimezone || "Asia/Kolkata",
-        this.config.shiftConfig
-      );
-      shiftId = currentShiftId;
-    }
-    console.log(`[S3ClipsService] Fetching clips for workspace ${workspaceId}`);
-    if (mode === "summary") {
-      const counts = await this.getClipCounts(workspaceId, date, shiftId.toString());
-      return { counts, samples: {} };
-    }
-    const effectiveLimit = limit || this.defaultLimitPerCategory;
-    const result = await this.getVideosPage(
-      workspaceId,
-      date,
-      shiftId,
-      category || "all",
-      effectiveLimit
-    );
-    return result.videos;
-  }
-  /**
-   * Batch fetch multiple videos in parallel
-   */
-  async batchFetchVideos(workspaceId, date, shiftId, requests) {
-    try {
-      const results = await this.apiClient.batchFetchVideos(
-        workspaceId,
-        date,
-        shiftId,
-        requests
-      );
-      return results.map((r2) => r2.video).filter((v) => v !== null);
-    } catch (error) {
-      console.error("[S3ClipsService] Error batch fetching videos:", error);
-      return [];
-    }
-  }
-  /**
-   * Get videos page using pagination API
-   */
-  async getVideosPage(workspaceId, date, shiftId, category, pageSize = 5, startAfter) {
-    try {
-      return await this.apiClient.getVideosPage(
-        workspaceId,
-        date,
-        shiftId,
-        category,
-        pageSize,
-        startAfter
-      );
-    } catch (error) {
-      console.error("[S3ClipsService] Error fetching videos page:", error);
-      return { videos: [], hasMore: false };
-    }
-  }
-  /**
-   * Create empty video index for compatibility
-   */
-  createEmptyVideoIndex(workspaceId, date, shiftId) {
-    return {
-      byCategory: /* @__PURE__ */ new Map(),
-      allVideos: [],
-      counts: {},
-      workspaceId,
-      date,
-      shiftId,
-      lastUpdated: /* @__PURE__ */ new Date(),
-      _debugId: `empty_${Date.now()}`
-    };
-  }
-  /**
-   * Get clip by ID
-   */
-  async getClipById(clipId, sopCategories) {
-    console.log(`[S3ClipsService] Getting clip by ID: ${clipId} (Note: This is a fallback implementation)`);
-    try {
-      const parts = clipId.split("-");
-      if (parts.length >= 5) {
-        const workspaceId = parts[0];
-        const date = parts[1];
-        const shift = parts[2];
-        const category = parts[3];
-        const index = parseInt(parts[4], 10);
-        if (!isNaN(index)) {
-          return await this.getClipByIndex(workspaceId, date, shift, category, index, true, false);
-        }
-      }
-      console.warn(`[S3ClipsService] Could not parse clipId: ${clipId}`);
-      return null;
-    } catch (error) {
-      console.error("[S3ClipsService] Error getting clip by ID:", error);
-      return null;
-    }
-  }
-  /**
-   * Get neighboring clips
-   */
-  async getNeighboringClips(workspaceId, date, shiftId, category, currentClipId, sopCategories) {
-    console.log(`[S3ClipsService] Getting neighboring clips for ID: ${currentClipId} (Note: This is a fallback implementation)`);
-    try {
-      const parts = currentClipId.split("-");
-      if (parts.length >= 5) {
-        const index = parseInt(parts[4], 10);
-        if (!isNaN(index)) {
-          const [previous, next] = await Promise.all([
-            index > 0 ? this.getClipByIndex(workspaceId, date, shiftId, category, index - 1, true, false) : null,
-            this.getClipByIndex(workspaceId, date, shiftId, category, index + 1, true, false)
-          ]);
-          return { previous, next };
-        }
-      }
-      console.warn(`[S3ClipsService] Could not parse currentClipId: ${currentClipId}`);
-      return { previous: null, next: null };
-    } catch (error) {
-      console.error("[S3ClipsService] Error getting neighboring clips:", error);
-      return { previous: null, next: null };
-    }
-  }
-  /**
-   * Cleanup
-   */
-  dispose() {
-    console.log("[S3ClipsService] Disposing service");
-    this.apiClient.dispose();
-  }
-  /**
-   * Get statistics
-   */
-  getStats() {
-    return this.apiClient.getStats();
-  }
-};
-var getSupabaseClient2 = () => {
-  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
-  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
-  if (!url || !key) {
-    throw new Error("Supabase configuration missing");
-  }
-  return createClient(url, key);
-};
-var getAuthToken2 = async () => {
-  try {
-    const supabase = getSupabaseClient2();
-    const { data: { session } } = await supabase.auth.getSession();
     console.log("[S3ClipsSupabase] Auth session exists:", !!session, "has token:", !!session?.access_token);
     return session?.access_token || null;
   } catch (error) {
@@ -4543,7 +3615,7 @@ var S3ClipsSupabaseService = class {
    * Fetch with authentication and error handling
    */
   async fetchWithAuth(endpoint, body) {
-    const token = await getAuthToken2();
+    const token = await getAuthToken();
     if (!token) {
       throw new Error("Authentication required");
     }
@@ -5006,7 +4078,8 @@ var S3ClipsSupabaseService = class {
     return descriptions[clipType] || "Analysis Clip";
   }
 };
-var S3ClipsService2 = S3ClipsSupabaseService ;
+
+// src/lib/services/videoPrefetchManager.ts
 var VideoPrefetchManager = class extends EventEmitter {
   constructor() {
     super();
@@ -5020,7 +4093,7 @@ var VideoPrefetchManager = class extends EventEmitter {
   getS3Service(dashboardConfig) {
     const configKey = JSON.stringify(dashboardConfig.s3Config);
     if (!this.s3Services.has(configKey)) {
-      this.s3Services.set(configKey, new S3ClipsService2(dashboardConfig));
+      this.s3Services.set(configKey, new S3ClipsSupabaseService(dashboardConfig));
     }
     return this.s3Services.get(configKey);
   }
@@ -5456,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,
@@ -5929,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);
@@ -5953,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();
@@ -6004,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);
@@ -6022,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",
@@ -6657,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(
@@ -6761,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);
@@ -6774,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 "";
@@ -7562,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;
@@ -7802,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();
         }
@@ -7825,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();
         }
@@ -9140,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);
@@ -9153,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 "";
@@ -13159,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) {
@@ -13214,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
@@ -13251,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") {
@@ -20535,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.");
@@ -20576,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);
@@ -20960,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();
@@ -21062,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;
   }
@@ -21110,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();
@@ -21213,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;
   }
@@ -21290,7 +20593,7 @@ var OutputProgressChartComponent = ({
     ] }) })
   ] }) });
 };
-var OutputProgressChart = React20__default.memo(OutputProgressChartComponent);
+var OutputProgressChart = React21__default.memo(OutputProgressChartComponent);
 OutputProgressChart.displayName = "OutputProgressChart";
 var LargeOutputProgressChart = ({
   currentOutput,
@@ -21406,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;
   }
@@ -21432,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);
@@ -21444,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;
@@ -21477,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);
@@ -21488,7 +20791,7 @@ var CycleTimeOverTimeChart = ({
       }
     };
   }, [data, animateToNewData]);
-  React20__default.useEffect(() => {
+  React21__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -21731,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,
@@ -21743,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,
@@ -21752,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,
@@ -21764,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,
@@ -21773,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,
@@ -21851,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(
@@ -21874,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);
@@ -21884,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,
@@ -21919,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);
@@ -21933,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);
     }
@@ -21965,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;
@@ -21995,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);
@@ -22006,7 +21309,7 @@ var HourlyOutputChartComponent = ({
       }
     };
   }, [data, animateToNewData]);
-  React20__default.useEffect(() => {
+  React21__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -22028,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;
@@ -22052,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;
@@ -22073,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;
@@ -22142,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,
@@ -22467,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;
   }
@@ -22503,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,
@@ -22652,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 = "",
@@ -22805,32 +22108,10 @@ var VideoGridView = React20__default.memo(({
       observerRef.current?.disconnect();
     };
   }, [filteredWorkspaces]);
-  const prefetchCacheRef = useRef({});
+  useRef({});
   const handleWorkspaceClick = useCallback((workspace) => {
     const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
-    if (dashboardConfig?.s3Config && workspaceId) {
-      const operationalDate = getOperationalDate(dashboardConfig.dateTimeConfig?.defaultTimezone);
-      const fullKey = `${workspaceId}-${operationalDate}-all-all-meta-1000--`;
-      if (!prefetchCacheRef.current[fullKey]?.status) {
-        const clipsService = new S3ClipsService(dashboardConfig);
-        const fullPromise = clipsService.fetchClips({
-          workspaceId,
-          date: operationalDate,
-          mode: "full",
-          includeCycleTime: true,
-          includeMetadata: true,
-          limit: 1e3
-        });
-        prefetchCacheRef.current[fullKey] = { status: "pending", promise: fullPromise };
-        fullPromise.then((data) => {
-          prefetchCacheRef.current[fullKey] = { status: "resolved", data };
-          console.log(`Prefetched full clips data for workspace ${workspaceId}`);
-        }).catch((error) => {
-          prefetchCacheRef.current[fullKey] = { status: "rejected", error };
-          console.warn(`Failed to prefetch full clips for workspace ${workspaceId}:`, error);
-        });
-      }
-    }
+    console.log(`[VideoGridView] Prefetching disabled for workspace ${workspaceId}`);
     trackCoreEvent("Workspace Detail Clicked", {
       workspace_name: workspace.workspace_name,
       workspace_id: workspaceId,
@@ -23589,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];
@@ -24408,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(() => {
@@ -24472,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());
@@ -27569,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",
@@ -27604,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,
@@ -27620,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,
@@ -27630,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,
@@ -27640,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,
@@ -27668,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,
@@ -27677,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,
@@ -27693,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,
@@ -27986,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,
@@ -27996,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) => {
@@ -28126,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);
@@ -28137,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);
@@ -28271,7 +27575,7 @@ var VideoPlayer = React20__default.forwardRef(({
       setIsReady(false);
     }
   }, []);
-  React20__default.useImperativeHandle(ref, () => ({
+  React21__default.useImperativeHandle(ref, () => ({
     player: playerRef.current,
     play,
     pause,
@@ -28292,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";
@@ -28474,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(
@@ -28887,7 +28194,7 @@ var NewClipsNotification = ({
     }
   );
 };
-var getSupabaseClient3 = () => {
+var getSupabaseClient2 = () => {
   const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
   const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
   if (!url || !key) {
@@ -28895,9 +28202,9 @@ var getSupabaseClient3 = () => {
   }
   return createClient(url, key);
 };
-var getAuthToken3 = async () => {
+var getAuthToken2 = async () => {
   try {
-    const supabase = getSupabaseClient3();
+    const supabase = getSupabaseClient2();
     const { data: { session } } = await supabase.auth.getSession();
     return session?.access_token || null;
   } catch (error) {
@@ -28918,7 +28225,7 @@ function useWorkspaceCrop(workspaceId) {
       setIsLoading(true);
       setError(null);
       try {
-        const token = await getAuthToken3();
+        const token = await getAuthToken2();
         if (!token) {
           throw new Error("Authentication required");
         }
@@ -29051,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({});
@@ -29071,7 +28379,7 @@ var FileManagerFilters = ({
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Authorization": `Bearer ${await getAuthToken4()}`
+          "Authorization": `Bearer ${await getAuthToken3()}`
         },
         body: JSON.stringify({
           action: "clip-metadata",
@@ -29104,7 +28412,7 @@ var FileManagerFilters = ({
       });
     }
   }, [workspaceId, date, shift]);
-  const getAuthToken4 = async () => {
+  const getAuthToken3 = async () => {
     try {
       const { createClient: createClient5 } = await import('@supabase/supabase-js');
       const supabase = createClient5(
@@ -29130,7 +28438,7 @@ var FileManagerFilters = ({
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          "Authorization": `Bearer ${await getAuthToken4()}`
+          "Authorization": `Bearer ${await getAuthToken3()}`
         },
         body: JSON.stringify({
           action: "percentile-clips",
@@ -29216,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({
@@ -29348,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) {
@@ -29873,8 +29185,6 @@ function useClipsRealtimeUpdates({
     hasNewClips: newClipsNotification !== null && newClipsNotification.count > 0
   };
 }
-var USE_SUPABASE_CLIPS2 = true;
-var S3ClipsService3 = S3ClipsSupabaseService ;
 var BottlenecksContent = ({
   workspaceId,
   workspaceName,
@@ -29883,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();
@@ -29894,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("");
@@ -29913,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([]);
@@ -29922,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,
@@ -29930,10 +29251,10 @@ var BottlenecksContent = ({
     clearNotification
   } = useClipsRealtimeUpdates({
     workspaceId,
-    date: date || getOperationalDate(),
+    date: date || getOperationalDate(timezone),
     shiftId: effectiveShift,
-    enabled: USE_SUPABASE_CLIPS2,
-    // Only enable for Supabase implementation
+    enabled: true,
+    // Supabase implementation
     onNewClips: (notification) => {
       console.log(`[BottlenecksContent] New clips detected:`, notification);
       if (notification.clips.length > 0) {
@@ -29958,7 +29279,7 @@ var BottlenecksContent = ({
       console.warn("S3 configuration not found in dashboard config");
       return null;
     }
-    return new S3ClipsService3(dashboardConfig);
+    return new S3ClipsSupabaseService(dashboardConfig);
   }, [dashboardConfig]);
   const {
     clipTypes,
@@ -29967,7 +29288,7 @@ var BottlenecksContent = ({
     counts: dynamicCounts
   } = useClipTypesWithCounts(
     workspaceId,
-    date || getOperationalDate(),
+    date || getOperationalDate(timezone),
     effectiveShift
     // Use same shift as video loading for consistency
   );
@@ -29978,9 +29299,8 @@ var BottlenecksContent = ({
     clipTypesError,
     dynamicCounts,
     workspaceId,
-    date: date || getOperationalDate(),
-    shift: shift || "0",
-    USE_SUPABASE_CLIPS: USE_SUPABASE_CLIPS2
+    date: date || getOperationalDate(timezone),
+    shift: shift || "0"
   });
   useEffect(() => {
     if (clipTypes.length > 0 && !initialFilter) {
@@ -30005,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,
@@ -30051,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 {
@@ -30075,7 +29395,6 @@ var BottlenecksContent = ({
           setHasInitialLoad(true);
           loadingCategoryRef.current = null;
           setIsCategoryLoading(false);
-          setCategoryPosition(1);
           return;
         }
       } catch (directError) {
@@ -30088,12 +29407,8 @@ var BottlenecksContent = ({
             operationalDate,
             shiftStr,
             targetCategory,
-            0,
+            0
             // First video (index 0)
-            true,
-            // includeCycleTime
-            true
-            // includeMetadata
           );
           if (firstVideo && isMountedRef.current) {
             console.log(`[BottlenecksContent] Successfully loaded first video via index`);
@@ -30105,7 +29420,6 @@ var BottlenecksContent = ({
               return prev;
             });
             setIsCategoryLoading(false);
-            setCategoryPosition(1);
             return;
           }
         } catch (indexError) {
@@ -30158,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;
@@ -30195,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 = [];
@@ -30225,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: 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) {
-          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",
@@ -30257,62 +29606,132 @@ 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,
         operationalDate,
         shiftStr,
         categoryId,
-        clipIndex,
-        true,
-        true
+        clipIndex
       );
       if (video?.id) {
         await loadAndPlayClipById(video.id, categoryId);
@@ -30326,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;
@@ -30432,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);
@@ -30440,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;
@@ -30469,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]);
@@ -30505,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);
     };
@@ -30514,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") {
@@ -30614,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..." }) }) }) })
             )
           )
         )
@@ -30798,7 +30211,7 @@ var BottlenecksContent = ({
           currentVideoId: currentVideo?.id,
           counts: mergedCounts,
           workspaceId,
-          date: date || getOperationalDate(),
+          date: date || getOperationalDate(timezone),
           shift: effectiveShift,
           onFilterChange: (filterId) => {
             updateActiveFilter(filterId);
@@ -30823,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`, {
@@ -30952,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,
@@ -31045,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,
@@ -31239,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";
@@ -31262,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);
     }
@@ -31276,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 });
@@ -32025,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";
   };
@@ -32048,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: [
@@ -32446,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",
@@ -34903,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",
     {
@@ -36887,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" }
@@ -36898,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;
@@ -36962,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)
         );
@@ -37444,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 {
@@ -37508,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]);
@@ -37612,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,
@@ -37638,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,
@@ -37665,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 {
@@ -38048,6 +37460,7 @@ var KPIDetailView = ({
   backLinkUrl,
   onBackClick
 }) => {
+  const timezone = useAppTimezone();
   const [activeTab, setActiveTab] = useState("overview");
   const [currentMonth, setCurrentMonth] = useState(() => {
     if (urlMonth && typeof urlMonth === "string") {
@@ -38084,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(() => {
@@ -38110,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,
@@ -38236,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,
@@ -38783,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]);
@@ -38891,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 {
@@ -40586,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
@@ -41802,6 +41220,7 @@ var TargetsView = ({
   userId,
   onSaveChanges
 }) => {
+  const timezone = useAppTimezone();
   const initialLineWorkspaces = useMemo(() => {
     return lineIds.reduce((acc, lineId) => ({
       ...acc,
@@ -42020,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`);
@@ -42101,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
@@ -42340,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,
@@ -42502,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") {
@@ -42580,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");
@@ -42637,7 +42063,7 @@ var WorkspaceDetailView = ({
     error: liveError
   } = useWorkspaceDetailedMetrics(
     workspaceId || "",
-    getOperationalDate(),
+    getOperationalDate(timezone),
     void 0
   );
   const workspace = isHistoricView ? historicMetrics : liveMetrics;
@@ -42736,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") {
@@ -42754,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:", {
@@ -43004,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: [
@@ -43014,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" })
@@ -43583,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";
@@ -44060,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);
@@ -44219,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.");
@@ -44476,4 +43903,175 @@ var streamProxyConfig = {
   }
 };
 
-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, 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 };
+// src/lib/api/s3-clips-parser.ts
+function parseS3Uri(s3Uri, sopCategories) {
+  const path = new URL(s3Uri).pathname;
+  const parts = path.split("/").filter((p) => p);
+  if (s3Uri.includes("missed_qchecks")) {
+    console.warn(`Skipping missed_qchecks URI in parseS3Uri: ${s3Uri}`);
+    return null;
+  }
+  if (parts.length < 8) {
+    console.warn(`Invalid S3 path structure: ${s3Uri} - Too few parts: ${parts.length}, expected at least 8`);
+    return null;
+  }
+  try {
+    const datePart = parts[2];
+    const shiftPart = parts[3];
+    const violationType = parts[4];
+    let folderName = "";
+    let timestamp = "";
+    for (let i = 5; i < parts.length; i++) {
+      const part = parts[i];
+      if (part && part.includes("_") && /\d{8}_\d{6}/.test(part)) {
+        folderName = part;
+        const timeMatch = folderName.match(/_(\d{8})_(\d{6})_/);
+        if (timeMatch) {
+          timestamp = `${timeMatch[2].substring(0, 2)}:${timeMatch[2].substring(2, 4)}:${timeMatch[2].substring(4, 6)}`;
+          break;
+        }
+      }
+    }
+    if (!timestamp) {
+      console.warn(`Couldn't extract timestamp from any part: ${parts.join("/")}`);
+      timestamp = "00:00:00";
+    }
+    let severity = "low";
+    let type = "bottleneck";
+    let description = "Analysis Clip";
+    const normalizedViolationType = violationType.toLowerCase().trim();
+    if (sopCategories && sopCategories.length > 0) {
+      const matchedCategory = sopCategories.find((category) => {
+        const categoryId = category.id.toLowerCase();
+        const s3FolderName = (category.s3FolderName || category.id).toLowerCase();
+        return categoryId === normalizedViolationType || s3FolderName === normalizedViolationType || // Also check for partial matches for flexibility
+        normalizedViolationType.includes(categoryId) || normalizedViolationType.includes(s3FolderName);
+      });
+      if (matchedCategory) {
+        type = matchedCategory.id;
+        description = matchedCategory.description || matchedCategory.label;
+        if (matchedCategory.color.includes("red")) {
+          severity = "high";
+        } else if (matchedCategory.color.includes("yellow") || matchedCategory.color.includes("orange")) {
+          severity = "medium";
+        } else {
+          severity = "low";
+        }
+        console.log(`Matched SOP category: ${matchedCategory.id} for violation type: ${violationType}`);
+        return { timestamp, severity, description, type, originalUri: s3Uri };
+      }
+    }
+    switch (normalizedViolationType) {
+      case "idle_time":
+      case "idle":
+      case "low_value":
+      case "low value":
+      case "low_value_moment":
+      case "low_value_moments":
+      case "low value moment":
+      case "low value moments":
+        type = "low_value";
+        severity = "low";
+        description = "Idle Time Detected";
+        break;
+      case "sop_deviation":
+        type = "missing_quality_check";
+        severity = "high";
+        description = "SOP Deviations";
+        break;
+      case "long_cycle_time":
+        severity = "high";
+        type = "long_cycle_time";
+        description = "Long Cycle Time Detected";
+        break;
+      case "best_cycle_time":
+        type = "best_cycle_time";
+        severity = "low";
+        description = "Best Cycle Time Performance";
+        break;
+      case "worst_cycle_time":
+        type = "worst_cycle_time";
+        severity = "high";
+        description = "Worst Cycle Time Performance";
+        break;
+      case "cycle_completion":
+      case "completed_cycles":
+      case "completed_cycle":
+        type = "cycle_completion";
+        severity = "low";
+        description = "Cycle Completion";
+        break;
+      case "running_cycle":
+      case "active_cycle":
+      case "production_cycle":
+        type = "running_cycle";
+        severity = "low";
+        description = "Active Production Cycle";
+        break;
+      case "setup_state":
+      case "machine_setup":
+      case "line_setup":
+        type = "setup_state";
+        severity = "medium";
+        description = "Machine Setup Activity";
+        break;
+      case "medium_bottleneck":
+        severity = "medium";
+        description = "Medium Bottleneck Identified";
+        break;
+      case "minor_bottleneck":
+      case "mild_bottleneck":
+        severity = "low";
+        description = "Minor Bottleneck Identified";
+        break;
+      default:
+        if (normalizedViolationType.includes("sop") && normalizedViolationType.includes("deviation")) {
+          type = "missing_quality_check";
+          severity = "high";
+          description = "SOP Deviations";
+        } else if (normalizedViolationType.includes("worst") && normalizedViolationType.includes("cycle")) {
+          type = "worst_cycle_time";
+          severity = "high";
+          description = "Worst Cycle Time Performance";
+        } else if (normalizedViolationType.includes("best") && normalizedViolationType.includes("cycle")) {
+          type = "best_cycle_time";
+          severity = "low";
+          description = "Best Cycle Time Performance";
+        } else if (normalizedViolationType.includes("long") && normalizedViolationType.includes("cycle")) {
+          type = "long_cycle_time";
+          severity = "high";
+          description = "Long Cycle Time Detected";
+        } else if (normalizedViolationType.includes("cycle") && (normalizedViolationType.includes("completion") || normalizedViolationType.includes("complete"))) {
+          type = "cycle_completion";
+          severity = "low";
+          description = "Cycle Completion";
+        } else if (normalizedViolationType.includes("running") && normalizedViolationType.includes("cycle")) {
+          type = "running_cycle";
+          severity = "low";
+          description = "Active Production Cycle";
+        } else if (normalizedViolationType.includes("setup") || normalizedViolationType.includes("machine") && normalizedViolationType.includes("setup")) {
+          type = "setup_state";
+          severity = "medium";
+          description = "Machine Setup Activity";
+        } else {
+          description = `Clip type: ${violationType.replace(/_/g, " ")}`;
+          console.log(`Detected unknown violation type: ${violationType} in URI: ${s3Uri}`);
+        }
+        break;
+    }
+    return { timestamp, severity, description, type, originalUri: s3Uri };
+  } catch (error) {
+    console.error(`Error parsing S3 URI: ${s3Uri}`, error);
+    return null;
+  }
+}
+function shuffleArray(array) {
+  const shuffled = [...array];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  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, 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 };