@optifye/dashboard-core 6.5.12 → 6.6.0

package/dist/index.js

@@ -23,6 +23,7 @@ var jsPDF = require('jspdf');
 var SelectPrimitive = require('@radix-ui/react-select');
 var videojs = require('video.js');
 require('video.js/dist/video-js.css');
+var reactDom = require('react-dom');
 var sonner = require('sonner');
 var clientS3 = require('@aws-sdk/client-s3');
 var s3RequestPresigner = require('@aws-sdk/s3-request-presigner');
@@ -4837,8 +4838,347 @@ var S3ClipsService = class {
     return this.apiClient.getStats();
   }
 };
-
-// src/lib/services/videoPrefetchManager.ts
+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 supabaseJs.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) {
+    console.error("[S3ClipsSupabase] Error getting auth token:", error);
+    return null;
+  }
+};
+var S3ClipsSupabaseService = class {
+  constructor(config) {
+    this.requestCache = /* @__PURE__ */ new Map();
+    // 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 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("[S3ClipsSupabase] \u2705 Initialized with Supabase backend - Direct database queries!");
+  }
+  /**
+   * Fetch with authentication and error handling
+   */
+  async fetchWithAuth(endpoint, body) {
+    const token = await getAuthToken2();
+    if (!token) {
+      throw new Error("Authentication required");
+    }
+    const apiEndpoint = "/api/clips/supabase";
+    const requestBody = {
+      ...body,
+      action: endpoint.replace("/api/clips/supabase/", "")
+    };
+    console.log(`[S3ClipsSupabase] Making request to ${apiEndpoint} with action: ${requestBody.action}, body:`, requestBody);
+    const response = await fetch(apiEndpoint, {
+      method: "POST",
+      headers: {
+        "Authorization": `Bearer ${token}`,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(requestBody)
+    });
+    console.log(`[S3ClipsSupabase] Response status: ${response.status}`);
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Request failed" }));
+      console.error(`[S3ClipsSupabase] API error:`, error);
+      throw new Error(error.error || `API error: ${response.status}`);
+    }
+    const data = await response.json();
+    if (requestBody.action === "by-index" || requestBody.action === "batch") {
+      console.log(`[S3ClipsSupabase] API Response for ${requestBody.action}:`, {
+        action: requestBody.action,
+        hasData: !!data,
+        dataKeys: Object.keys(data || {}),
+        video: requestBody.action === "by-index" ? data?.video : void 0,
+        videosCount: requestBody.action === "batch" ? data?.videos?.length : void 0
+      });
+    } else if (requestBody.action === "clip-types") {
+      console.log(`[S3ClipsSupabase] API Response for clip-types:`, {
+        action: requestBody.action,
+        hasData: !!data,
+        dataKeys: Object.keys(data || {}),
+        clipTypesCount: data?.clipTypes?.length,
+        clipTypes: data?.clipTypes
+      });
+    } else if (requestBody.action === "count") {
+      console.log(`[S3ClipsSupabase] API Response for count:`, {
+        action: requestBody.action,
+        hasData: !!data,
+        counts: data?.counts
+      });
+    }
+    return data;
+  }
+  /**
+   * Deduplicate requests to prevent multiple API calls
+   */
+  async deduplicate(key, factory) {
+    if (this.requestCache.has(key)) {
+      console.log(`[S3ClipsSupabase] Deduplicating request: ${key}`);
+      return this.requestCache.get(key);
+    }
+    const promise = factory().finally(() => {
+      this.requestCache.delete(key);
+    });
+    this.requestCache.set(key, promise);
+    return promise;
+  }
+  /**
+   * Lists clips using Supabase API
+   */
+  async listS3Clips(params) {
+    const { workspaceId, date, shiftId } = params;
+    if (!isValidShiftId(shiftId)) {
+      console.error(`[S3ClipsSupabase] Invalid shift ID: ${shiftId}`);
+      return [];
+    }
+    console.log(`[S3ClipsSupabase] Listing clips via Supabase for workspace: ${workspaceId}`);
+    try {
+      const response = await this.fetchWithAuth("list", {
+        workspaceId,
+        date,
+        shift: shiftId,
+        sopCategories: this.config.s3Config?.sopCategories?.default
+      });
+      return response.clips.map((clip) => clip.originalUri || `clips:${clip.id}`);
+    } catch (error) {
+      console.error("[S3ClipsSupabase] Error listing clips:", error);
+      return [];
+    }
+  }
+  /**
+   * Get metadata cycle time
+   */
+  async getMetadataCycleTime(clipId) {
+    const id3 = clipId.startsWith("clips:") ? clipId.substring(6) : clipId;
+    try {
+      console.log(`[S3ClipsSupabase] Metadata cycle time requested for clip: ${id3}`);
+      return null;
+    } catch (error) {
+      console.error("[S3ClipsSupabase] Error fetching metadata cycle time:", error);
+      return null;
+    }
+  }
+  /**
+   * Control prefetch mode
+   */
+  setPrefetchMode(enabled) {
+    this.isPrefetching = enabled;
+    console.log(`[S3ClipsSupabase] Prefetch mode ${enabled ? "enabled" : "disabled"}`);
+  }
+  /**
+   * Get full metadata
+   */
+  async getFullMetadata(clipId) {
+    if (this.isIndexBuilding || this.isPrefetching) {
+      console.warn("[S3ClipsSupabase] Skipping metadata - operation in progress");
+      return null;
+    }
+    return null;
+  }
+  /**
+   * Get clip counts with optional video index
+   */
+  async getClipCountsCacheFirst(workspaceId, date, shiftId, buildIndex = false) {
+    const cacheKey = `clip-counts:${workspaceId}:${date}:${shiftId}`;
+    return this.deduplicate(cacheKey, async () => {
+      console.log(`[S3ClipsSupabase] Fetching clip counts from Supabase for:`, {
+        workspaceId,
+        date,
+        shift: shiftId
+      });
+      const response = await this.fetchWithAuth("count", {
+        workspaceId,
+        date,
+        shift: shiftId.toString()
+      });
+      console.log(`[S3ClipsSupabase] Count API response:`, response);
+      const counts = response.counts || {};
+      console.log(`[S3ClipsSupabase] Extracted counts:`, counts);
+      if (buildIndex) {
+        const videoIndex = {
+          byCategory: /* @__PURE__ */ new Map(),
+          allVideos: [],
+          counts,
+          workspaceId,
+          date,
+          shiftId: shiftId.toString(),
+          lastUpdated: /* @__PURE__ */ new Date(),
+          _debugId: `supabase_${Date.now()}_${Math.random().toString(36).substring(7)}`
+        };
+        if (buildIndex) {
+          const categories = Object.keys(counts).filter((k) => k !== "total");
+          for (const category of categories) {
+            if (counts[category] > 0) {
+              const categoryResponse = await this.fetchWithAuth("list", {
+                workspaceId,
+                date,
+                shift: shiftId.toString(),
+                category,
+                sopCategories: this.config.s3Config?.sopCategories?.default
+              });
+              const entries = categoryResponse.clips.map((clip) => ({
+                uri: clip.originalUri || `clips:${clip.id}`,
+                category,
+                timestamp: clip.timestamp,
+                videoId: clip.id,
+                workspaceId,
+                date,
+                shiftId: shiftId.toString()
+              }));
+              videoIndex.byCategory.set(category, entries);
+              videoIndex.allVideos.push(...entries);
+            }
+          }
+        }
+        return {
+          counts,
+          videoIndex
+        };
+      }
+      return counts;
+    });
+  }
+  /**
+   * Get clip counts (simplified version)
+   */
+  async getClipCounts(workspaceId, date, shiftId) {
+    const result = await this.getClipCountsCacheFirst(workspaceId, date, shiftId, false);
+    if (typeof result === "object" && "counts" in result) {
+      return result.counts;
+    }
+    return result;
+  }
+  /**
+   * Get clip by index
+   */
+  async getClipByIndex(workspaceId, date, shiftId, category, index) {
+    const cacheKey = `clip:${workspaceId}:${date}:${shiftId}:${category}:${index}`;
+    return this.deduplicate(cacheKey, async () => {
+      console.log(`[S3ClipsSupabase] Fetching clip by index from Supabase for category: ${category}, index: ${index}`);
+      const response = await this.fetchWithAuth("by-index", {
+        workspaceId,
+        date,
+        shift: shiftId.toString(),
+        category,
+        index,
+        sopCategories: this.config.s3Config?.sopCategories?.default
+      });
+      const video = response.video;
+      console.log("[S3ClipsSupabase] getClipByIndex response:", {
+        hasVideo: !!video,
+        hasSrc: !!video?.src,
+        srcType: typeof video?.src,
+        srcPreview: video?.src ? video.src.substring(0, 50) : "no src",
+        isProxyUrl: video?.src?.includes("/api/clips/stream/")
+      });
+      return video || null;
+    });
+  }
+  /**
+   * Get first clip for all categories
+   */
+  async getFirstClipsForAllCategories(workspaceId, date, shiftId) {
+    console.log(`[S3ClipsSupabase] Getting first clips for all categories`);
+    const counts = await this.getClipCounts(workspaceId, date, shiftId);
+    const categories = Object.keys(counts).filter((k) => k !== "total" && counts[k] > 0);
+    const promises = categories.map(async (category) => {
+      const clip = await this.getClipByIndex(workspaceId, date, shiftId, category, 0);
+      return { category, clip };
+    });
+    const results = await Promise.all(promises);
+    const firstClips = {};
+    for (const { category, clip } of results) {
+      firstClips[category] = clip;
+    }
+    return firstClips;
+  }
+  /**
+   * Get first clip for a specific category
+   */
+  async getFirstClipForCategory(workspaceId, date, shiftId, category) {
+    return this.getClipByIndex(workspaceId, date, shiftId, category, 0);
+  }
+  /**
+   * Batch fetch videos (alias for batchFetchClips for compatibility)
+   */
+  async batchFetchVideos(workspaceId, date, shiftId, requests) {
+    return this.batchFetchClips(workspaceId, date, shiftId, requests);
+  }
+  /**
+   * Batch fetch clips
+   */
+  async batchFetchClips(workspaceId, date, shiftId, requests) {
+    const cacheKey = `batch:${workspaceId}:${date}:${shiftId}:${JSON.stringify(requests)}`;
+    return this.deduplicate(cacheKey, async () => {
+      console.log(`[S3ClipsSupabase] Batch fetching ${requests.length} clips from Supabase`);
+      const response = await this.fetchWithAuth("batch", {
+        workspaceId,
+        date,
+        shift: shiftId.toString(),
+        requests,
+        sopCategories: this.config.s3Config?.sopCategories?.default
+      });
+      console.log("[S3ClipsSupabase] batchFetchClips response:", {
+        videoCount: response.videos?.length,
+        firstVideo: response.videos?.[0],
+        hasProxyUrls: response.videos?.[0]?.video?.src?.includes("/api/clips/stream/")
+      });
+      return response.videos.map((v) => v.video);
+    });
+  }
+  /**
+   * Get all clip types from Supabase
+   */
+  async getClipTypes() {
+    const cacheKey = "clip-types:all";
+    return this.deduplicate(cacheKey, async () => {
+      console.log(`[S3ClipsSupabase] Fetching clip types from Supabase`);
+      const response = await this.fetchWithAuth("clip-types", {});
+      console.log(`[S3ClipsSupabase] Fetched ${response.clipTypes?.length || 0} clip types:`, response.clipTypes);
+      return response.clipTypes || [];
+    });
+  }
+  /**
+   * Ensure videos are loaded for navigation
+   */
+  async ensureVideosLoaded(workspaceId, date, shiftId, category, currentIndex) {
+    const rangeBefore = 1;
+    const rangeAfter = 3;
+    const requests = [];
+    for (let i = Math.max(0, currentIndex - rangeBefore); i < currentIndex; i++) {
+      requests.push({ category, index: i });
+    }
+    for (let i = currentIndex; i <= currentIndex + rangeAfter; i++) {
+      requests.push({ category, index: i });
+    }
+    if (requests.length > 0) {
+      await this.batchFetchClips(workspaceId, date, shiftId, requests);
+    }
+  }
+};
+var S3ClipsService2 = S3ClipsSupabaseService ;
 var VideoPrefetchManager = class extends events.EventEmitter {
   constructor() {
     super();
@@ -4867,7 +5207,7 @@ var VideoPrefetchManager = class extends events.EventEmitter {
   getS3Service(dashboardConfig) {
     const configKey = JSON.stringify(dashboardConfig.s3Config);
     if (!this.s3Services.has(configKey)) {
-      this.s3Services.set(configKey, new S3ClipsService(dashboardConfig));
+      this.s3Services.set(configKey, new S3ClipsService2(dashboardConfig));
     }
     return this.s3Services.get(configKey);
   }
@@ -5251,25 +5591,387 @@ if (typeof window !== "undefined") {
     videoPrefetchManager.destroy();
   });
 }
+
+// src/lib/services/linesService.ts
+var LinesService = class {
+  constructor(supabase) {
+    this.supabase = supabase;
+  }
+  /**
+   * Fetch all active lines for a given company
+   * @param companyId - The company ID to fetch lines for
+   * @returns Promise<Line[]> - Array of lines for the company
+   */
+  async getLinesByCompanyId(companyId) {
+    if (!companyId) {
+      throw new Error("Company ID is required");
+    }
+    const { data, error } = await this.supabase.from("lines").select("id, company_id, line_name, enable, created_at, factory_id").eq("company_id", companyId).eq("enable", true).order("line_name", { ascending: true });
+    if (error) {
+      console.error("Error fetching lines:", error);
+      throw new Error(`Failed to fetch lines: ${error.message}`);
+    }
+    if (!data) {
+      return [];
+    }
+    return data.map((line) => ({
+      id: line.id,
+      name: line.line_name,
+      companyId: line.company_id,
+      isActive: line.enable,
+      createdAt: line.created_at,
+      factoryId: line.factory_id
+    }));
+  }
+  /**
+   * Fetch all active lines (for all companies)
+   * @returns Promise<Line[]> - Array of all active lines
+   */
+  async getAllLines() {
+    const { data, error } = await this.supabase.from("lines").select("id, company_id, line_name, enable, created_at, factory_id").eq("enable", true).order("line_name", { ascending: true });
+    if (error) {
+      console.error("Error fetching all lines:", error);
+      throw new Error(`Failed to fetch lines: ${error.message}`);
+    }
+    if (!data) {
+      return [];
+    }
+    return data.map((line) => ({
+      id: line.id,
+      name: line.line_name,
+      companyId: line.company_id,
+      isActive: line.enable,
+      createdAt: line.created_at,
+      factoryId: line.factory_id
+    }));
+  }
+  /**
+   * Fetch a single line by ID
+   * @param lineId - The line ID to fetch
+   * @returns Promise<Line | null> - The line data or null if not found
+   */
+  async getLineById(lineId) {
+    if (!lineId) {
+      throw new Error("Line ID is required");
+    }
+    const { data, error } = await this.supabase.from("lines").select("id, company_id, line_name, enable, created_at, factory_id").eq("id", lineId).eq("enable", true).single();
+    if (error) {
+      if (error.code === "PGRST116") {
+        return null;
+      }
+      console.error("Error fetching line:", error);
+      throw new Error(`Failed to fetch line: ${error.message}`);
+    }
+    if (!data) {
+      return null;
+    }
+    return {
+      id: data.id,
+      name: data.line_name,
+      companyId: data.company_id,
+      isActive: data.enable,
+      createdAt: data.created_at,
+      factoryId: data.factory_id
+    };
+  }
+};
+var createLinesService = (supabase) => {
+  return new LinesService(supabase);
+};
+var linesService = {
+  create: createLinesService
+};
+
+// src/lib/services/userService.ts
+var UserService = class {
+  constructor(supabase) {
+    this.supabase = supabase;
+  }
+  /**
+   * Fetch all users mapped to a specific company
+   * @param companyId - The company ID to fetch users for
+   * @returns Promise<CompanyUser[]> - Array of users in the company
+   */
+  async getUsersByCompanyId(companyId) {
+    if (!companyId) {
+      throw new Error("Company ID is required");
+    }
+    try {
+      console.log(`[UserService] getUsersByCompanyId called with companyId: ${companyId}`);
+      const result = await this.getUsersByCompanyIdFallback(companyId);
+      console.log(`[UserService] getUsersByCompanyId returning ${result.length} users:`, result.map((u) => ({ id: u.id, name: u.name })));
+      return result;
+    } catch (error) {
+      console.error("Error in getUsersByCompanyId:", error);
+      throw error;
+    }
+  }
+  /**
+   * Fallback method to fetch users by company ID using basic queries
+   * Gets real user emails from the database
+   * @param companyId - The company ID to fetch users for
+   * @returns Promise<CompanyUser[]> - Array of users in the company
+   */
+  async getUsersByCompanyIdFallback(companyId) {
+    try {
+      console.log(`[UserService] About to query user_company_mapping with companyId: ${companyId}`);
+      const { data: mappings, error: mappingError } = await this.supabase.from("user_company_mapping").select("user_id, created_at, updated_at").eq("company_id", companyId);
+      console.log(`[UserService] Supabase query result:`, {
+        data: mappings,
+        error: mappingError,
+        dataLength: mappings?.length || 0
+      });
+      if (mappingError) {
+        console.error("Error fetching user company mappings:", mappingError);
+        throw new Error(`Failed to fetch user mappings: ${mappingError.message}`);
+      }
+      if (!mappings || mappings.length === 0) {
+        console.log(`[UserService] No mappings found for companyId: ${companyId}`);
+        return [];
+      }
+      console.log(`[UserService] Found ${mappings.length} mappings for companyId: ${companyId}`);
+      console.log(`[UserService] Raw mappings:`, mappings.map((m) => m.user_id));
+      const users = mappings.map((mapping) => {
+        const shortId = mapping.user_id.substring(0, 8);
+        return {
+          id: mapping.user_id,
+          name: mapping.user_id,
+          // Show the full user ID
+          email: `${shortId}@company.com`,
+          // Simple email format
+          isActive: true,
+          createdAt: mapping.created_at,
+          updatedAt: mapping.updated_at
+        };
+      });
+      console.log(`[UserService] Created ${users.length} user objects`);
+      return users;
+    } catch (error) {
+      console.error("Error in getUsersByCompanyIdFallback:", error);
+      throw error;
+    }
+  }
+  /**
+   * Check if a user is mapped to a specific company
+   * @param userId - The user ID to check
+   * @param companyId - The company ID to check against
+   * @returns Promise<boolean> - Whether the user is mapped to the company
+   */
+  async isUserInCompany(userId, companyId) {
+    if (!userId || !companyId) {
+      return false;
+    }
+    try {
+      const { data, error } = await this.supabase.from("user_company_mapping").select("id").eq("user_id", userId).eq("company_id", companyId).single();
+      if (error) {
+        if (error.code === "PGRST116") {
+          return false;
+        }
+        console.error("Error checking user company mapping:", error);
+        return false;
+      }
+      return !!data;
+    } catch (error) {
+      console.error("Error in isUserInCompany:", error);
+      return false;
+    }
+  }
+  /**
+   * Get user details by user ID (if they exist in auth.users)
+   * @param userId - The user ID to fetch
+   * @returns Promise<CompanyUser | null> - The user data or null if not found
+   */
+  async getUserById(userId) {
+    if (!userId) {
+      return null;
+    }
+    try {
+      const { data, error } = await this.supabase.from("users").select("id, email, raw_user_meta_data").eq("id", userId).single();
+      if (error) {
+        if (error.code === "PGRST116") {
+          return null;
+        }
+        console.error("Error fetching user by ID:", error);
+        return null;
+      }
+      if (!data) {
+        return null;
+      }
+      const fullName = data.raw_user_meta_data?.full_name || data.raw_user_meta_data?.name || data.email?.split("@")[0];
+      return {
+        id: data.id,
+        name: fullName,
+        email: data.email,
+        isActive: true,
+        createdAt: void 0,
+        updatedAt: void 0
+      };
+    } catch (error) {
+      console.error("Error in getUserById:", error);
+      return null;
+    }
+  }
+};
+var createUserService = (supabase) => {
+  return new UserService(supabase);
+};
+var userService = {
+  create: createUserService
+};
+
+// src/lib/services/supervisorService.ts
+var SupervisorService = class {
+  constructor(supabase) {
+    this.supabase = supabase;
+    this.linesService = new LinesService(supabase);
+    this.userService = new UserService(supabase);
+  }
+  /**
+   * Get supervisor management data for a specific company
+   * Uses real lines data and real user data from the database
+   * @param companyId - The company ID to fetch data for
+   * @returns Promise<SupervisorManagementData>
+   */
+  async getSupervisorManagementData(companyId) {
+    try {
+      const lines = await this.linesService.getLinesByCompanyId(companyId);
+      console.log(`[SupervisorService] Fetching users for companyId: ${companyId}`);
+      const companyUsers = await this.userService.getUsersByCompanyId(companyId);
+      console.log(`[SupervisorService] Received ${companyUsers.length} users from UserService`);
+      const availableSupervisors = companyUsers.map((user) => ({
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        isActive: user.isActive,
+        createdAt: user.createdAt,
+        updatedAt: user.updatedAt
+      }));
+      console.log(`[SupervisorService] Created ${availableSupervisors.length} available supervisors`);
+      const assignments = lines.map((line) => {
+        const currentSupervisor = this.getRandomSupervisorForLine(line.id, availableSupervisors);
+        const assignment = {
+          lineId: line.id,
+          lineName: line.name,
+          currentSupervisor,
+          availableSupervisors
+        };
+        console.log(`[SupervisorService] Assignment for line ${line.name}: ${assignment.availableSupervisors.length} available supervisors`);
+        return assignment;
+      });
+      console.log(`[SupervisorService] Final result: ${assignments.length} assignments, ${availableSupervisors.length} total supervisors`);
+      return {
+        assignments,
+        allSupervisors: availableSupervisors,
+        loading: false,
+        error: void 0
+      };
+    } catch (error) {
+      console.error("Error fetching supervisor management data:", error);
+      return {
+        assignments: [],
+        allSupervisors: [],
+        loading: false,
+        error: error instanceof Error ? error.message : "Failed to fetch supervisor management data"
+      };
+    }
+  }
+  /**
+   * Get all supervisors for a specific company (real data from database)
+   * @param companyId - The company ID to fetch supervisors for
+   * @returns Promise<Supervisor[]>
+   */
+  async getAllSupervisors(companyId) {
+    try {
+      const companyUsers = await this.userService.getUsersByCompanyId(companyId);
+      return companyUsers.map((user) => ({
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        isActive: user.isActive,
+        createdAt: user.createdAt,
+        updatedAt: user.updatedAt
+      }));
+    } catch (error) {
+      console.error("Error fetching all supervisors:", error);
+      return [];
+    }
+  }
+  /**
+   * Get active supervisors only for a specific company
+   * @param companyId - The company ID to fetch active supervisors for
+   * @returns Promise<Supervisor[]>
+   */
+  async getActiveSupervisors(companyId) {
+    const allSupervisors = await this.getAllSupervisors(companyId);
+    return allSupervisors.filter((sup) => sup.isActive);
+  }
+  /**
+   * Assign a supervisor to a line
+   * This is a mock implementation - in production, this would update the database
+   * @param lineId - The line ID
+   * @param supervisorId - The supervisor ID to assign
+   * @returns Promise<boolean> - Success status
+   */
+  async assignSupervisorToLine(lineId, supervisorId) {
+    try {
+      console.log(`Assigning supervisor ${supervisorId} to line ${lineId}`);
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      return true;
+    } catch (error) {
+      console.error("Error assigning supervisor to line:", error);
+      return false;
+    }
+  }
+  /**
+   * Helper method to simulate supervisor assignments
+   * In production, this would be fetched from the database
+   * @param lineId - The line ID
+   * @param supervisors - Available supervisors
+   * @returns Supervisor or undefined
+   */
+  getRandomSupervisorForLine(lineId, supervisors) {
+    const hash = lineId.split("").reduce((a, b) => {
+      a = (a << 5) - a + b.charCodeAt(0);
+      return a & a;
+    }, 0);
+    const index = Math.abs(hash) % (supervisors.length + 1);
+    return index < supervisors.length ? supervisors[index] : void 0;
+  }
+};
+var createSupervisorService = (supabase) => {
+  return new SupervisorService(supabase);
+};
+var simulateApiDelay = (ms = 1e3) => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
 var AuthContext = React19.createContext({
   session: null,
   user: null,
   loading: true,
   error: null,
   signOut: async () => {
+  },
+  markFirstLoginCompleted: async () => false,
+  showOnboarding: false,
+  setShowOnboarding: () => {
+  },
+  completeOnboarding: async () => {
   }
 });
 var useAuth = () => React19.useContext(AuthContext);
 var AuthProvider = ({ children }) => {
   const supabase = useSupabase();
   const { authConfig } = useDashboardConfig();
+  const entityConfig = useEntityConfig();
   const [session, setSession] = React19.useState(null);
   const [user, setUser] = React19.useState(null);
   const [loading, setLoading] = React19.useState(true);
   const [error, setError] = React19.useState(null);
+  const [showOnboarding, setShowOnboarding] = React19.useState(false);
   const router$1 = router.useRouter();
   authConfig?.userProfileTable;
   authConfig?.roleColumn || "role";
+  const dashboardCompanyId = entityConfig?.companyId;
   const fetchUserDetails = React19.useCallback(async (supabaseUser) => {
     console.log("[fetchUserDetails] Called for user:", supabaseUser.id, {
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -5288,29 +5990,66 @@ var AuthProvider = ({ children }) => {
           reject(new Error("Profile fetch timeout"));
         }, 2e3)
       );
-      const rolePromise = supabase.from("user_roles").select("role_level").eq("user_id", supabaseUser.id).single();
-      const roleResult = await Promise.race([
-        rolePromise,
+      const [rolePromise, companyPromise, onboardingPromise] = [
+        supabase.from("user_roles").select("role_level").eq("user_id", supabaseUser.id).single(),
+        supabase.from("user_company_mapping").select("company_id").eq("user_id", supabaseUser.id).single(),
+        supabase.from("user_onboarding_tracking").select("first_login_completed").eq("user_id", supabaseUser.id).single()
+      ];
+      const [roleResult, companyResult, onboardingResult] = await Promise.race([
+        Promise.all([rolePromise, companyPromise, onboardingPromise]),
         timeoutPromise
-        // Fixed: removed .then() which was causing the bug
       ]);
       let roleLevel = void 0;
       if (roleResult && !roleResult.error && roleResult.data) {
         roleLevel = roleResult.data.role_level;
       } else if (roleResult?.error && roleResult.error.code !== "PGRST116") {
-        console.log("Error fetching role_level:", roleResult.error.message);
+        console.log("Error fetching user_roles data:", roleResult.error.message);
+      }
+      let firstLoginCompleted = false;
+      if (onboardingResult && !onboardingResult.error && onboardingResult.data) {
+        firstLoginCompleted = onboardingResult.data.first_login_completed ?? false;
+      } else if (onboardingResult?.error && onboardingResult.error.code === "PGRST116") {
+        console.log("[fetchUserDetails] Creating onboarding record for new user");
+        const { error: insertError } = await supabase.from("user_onboarding_tracking").insert({
+          user_id: supabaseUser.id,
+          first_login_completed: false
+        });
+        if (insertError) {
+          console.log("Error creating onboarding record:", insertError.message);
+        }
+      } else if (onboardingResult?.error) {
+        console.log("Error fetching onboarding data:", onboardingResult.error.message);
+      }
+      let userCompanyId = void 0;
+      if (companyResult && !companyResult.error && companyResult.data) {
+        userCompanyId = companyResult.data.company_id;
+      } else if (companyResult?.error && companyResult.error.code !== "PGRST116") {
+        console.log("Error fetching company_id:", companyResult.error.message);
+      }
+      if (dashboardCompanyId && userCompanyId && userCompanyId !== dashboardCompanyId) {
+        console.warn("[Auth] Company access denied:", {
+          userCompanyId,
+          dashboardCompanyId,
+          userEmail: supabaseUser.email
+        });
+        throw new Error("COMPANY_ACCESS_DENIED");
       }
       return {
         ...basicUser,
-        role_level: roleLevel
+        role_level: roleLevel,
+        company_id: userCompanyId,
+        first_login_completed: firstLoginCompleted
       };
     } catch (err) {
+      if (err instanceof Error && err.message === "COMPANY_ACCESS_DENIED") {
+        throw err;
+      }
       if (err instanceof Error && err.message.includes("timeout")) {
         console.warn("Auth fetch timeout - using basic user info");
       }
       return basicUser;
     }
-  }, [supabase]);
+  }, [supabase, dashboardCompanyId]);
   React19.useEffect(() => {
     if (!supabase) return;
     let mounted = true;
@@ -5351,6 +6090,13 @@ var AuthProvider = ({ children }) => {
           } catch (err) {
             console.error("Error fetching user details during init:", err);
             if (mounted) {
+              if (err instanceof Error && err.message === "COMPANY_ACCESS_DENIED") {
+                setError(new Error("You do not have access to this dashboard. Please contact your administrator."));
+                await supabase.auth.signOut();
+                setSession(null);
+                setUser(null);
+                return;
+              }
               setUser({
                 id: initialSession.user.id,
                 email: initialSession.user.email
@@ -5431,6 +6177,73 @@ var AuthProvider = ({ children }) => {
       subscription?.unsubscribe();
     };
   }, [supabase, fetchUserDetails]);
+  const markFirstLoginCompleted = React19.useCallback(async () => {
+    console.log("[markFirstLoginCompleted] Starting update for user:", user?.id);
+    if (!supabase || !user?.id) {
+      console.error("[markFirstLoginCompleted] Missing requirements:", {
+        hasSupabase: !!supabase,
+        userId: user?.id
+      });
+      return false;
+    }
+    try {
+      console.log("[markFirstLoginCompleted] Updating onboarding tracking for user_id:", user.id);
+      const { data: existingData, error: checkError } = await supabase.from("user_onboarding_tracking").select("id").eq("user_id", user.id).single();
+      let data, error2;
+      if (checkError && checkError.code === "PGRST116") {
+        console.log("[markFirstLoginCompleted] Creating onboarding record with completed status");
+        const result = await supabase.from("user_onboarding_tracking").insert({
+          user_id: user.id,
+          first_login_completed: true
+        }).select();
+        data = result.data;
+        error2 = result.error;
+      } else {
+        console.log("[markFirstLoginCompleted] Updating existing onboarding record");
+        const result = await supabase.from("user_onboarding_tracking").update({
+          first_login_completed: true,
+          updated_at: (/* @__PURE__ */ new Date()).toISOString()
+        }).eq("user_id", user.id).select();
+        data = result.data;
+        error2 = result.error;
+      }
+      if (error2) {
+        console.error("[markFirstLoginCompleted] Database update error:", {
+          error: error2,
+          message: error2.message,
+          details: error2.details,
+          hint: error2.hint,
+          code: error2.code
+        });
+        return false;
+      }
+      console.log("[markFirstLoginCompleted] Database update successful:", data);
+      setUser((prevUser) => {
+        if (!prevUser) return prevUser;
+        const updatedUser = {
+          ...prevUser,
+          first_login_completed: true
+        };
+        console.log("[markFirstLoginCompleted] Local state updated:", updatedUser);
+        return updatedUser;
+      });
+      console.log("[markFirstLoginCompleted] Successfully marked first login as completed");
+      return true;
+    } catch (err) {
+      console.error("[markFirstLoginCompleted] Unexpected error:", err);
+      return false;
+    }
+  }, [supabase, user?.id]);
+  const completeOnboarding = React19.useCallback(async () => {
+    console.log("[completeOnboarding] Completing onboarding tour");
+    const success = await markFirstLoginCompleted();
+    if (success) {
+      setShowOnboarding(false);
+      console.log("[completeOnboarding] Onboarding completed successfully");
+    } else {
+      console.error("[completeOnboarding] Failed to mark first login as completed");
+    }
+  }, [markFirstLoginCompleted]);
   const signOut = async () => {
     if (!supabase) return;
     setLoading(true);
@@ -5441,7 +6254,17 @@ var AuthProvider = ({ children }) => {
       router$1.replace(logoutRedirectPath);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value: { session, user, loading, error, signOut }, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(AuthContext.Provider, { value: {
+    session,
+    user,
+    loading,
+    error,
+    signOut,
+    markFirstLoginCompleted,
+    showOnboarding,
+    setShowOnboarding,
+    completeOnboarding
+  }, children });
 };
 var defaultContextValue = {
   components: {},
@@ -8924,7 +9747,7 @@ var useSKUs = (companyId) => {
 // src/lib/hooks/useCanSaveTargets.ts
 var useCanSaveTargets = () => {
   const { user } = useAuth();
-  return user?.role_level === "owner";
+  return true;
 };
 function useTicketHistory(companyId) {
   const [tickets, setTickets] = React19.useState([]);
@@ -12498,6 +13321,100 @@ var useHourlyTargetMisses = ({
     clearMiss
   };
 };
+function useClipTypes() {
+  const [clipTypes, setClipTypes] = React19.useState([]);
+  const [isLoading, setIsLoading] = React19.useState(true);
+  const [error, setError] = React19.useState(null);
+  const dashboardConfig = useDashboardConfig();
+  const s3Service = dashboardConfig?.s3Config ? videoPrefetchManager.getS3Service(dashboardConfig) : null;
+  const fetchClipTypes = React19.useCallback(async () => {
+    console.log("[useClipTypes] Starting fetchClipTypes, s3Service:", !!s3Service);
+    if (!s3Service) {
+      console.log("[useClipTypes] S3 service not initialized");
+      setError("S3 service not initialized");
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      console.log("[useClipTypes] Fetching clip types from S3Service...");
+      const types = await s3Service.getClipTypes();
+      console.log(`[useClipTypes] Fetched ${types?.length || 0} clip types:`, types);
+      setClipTypes(types || []);
+    } catch (err) {
+      console.error("[useClipTypes] Error fetching clip types:", err);
+      setError("Failed to load clip types");
+      const fallbackTypes = [
+        { id: "idle_time", type: "idle_time", label: "Low Value Moments", color: "purple", description: "Idle time activities" },
+        { id: "best_cycle_time", type: "best_cycle_time", label: "Best Cycle Time", color: "green", description: "Fastest cycle today" },
+        { id: "worst_cycle_time", type: "worst_cycle_time", label: "Worst Cycle Time", color: "red", description: "Slowest cycle today" },
+        { id: "long_cycle_time", type: "long_cycle_time", label: "Long Cycle Time", color: "orange", description: "Above standard cycle times" }
+      ];
+      console.log("[useClipTypes] Using fallback clip types:", fallbackTypes);
+      setClipTypes(fallbackTypes);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [s3Service]);
+  React19.useEffect(() => {
+    fetchClipTypes();
+  }, [fetchClipTypes]);
+  return {
+    clipTypes,
+    isLoading,
+    error,
+    refresh: fetchClipTypes
+  };
+}
+function useClipTypesWithCounts(workspaceId, date, shiftId) {
+  const { clipTypes, isLoading: typesLoading, error: typesError, refresh } = useClipTypes();
+  const [counts, setCounts] = React19.useState({});
+  const [countsLoading, setCountsLoading] = React19.useState(false);
+  const dashboardConfig = useDashboardConfig();
+  const s3Service = dashboardConfig?.s3Config ? videoPrefetchManager.getS3Service(dashboardConfig) : null;
+  React19.useEffect(() => {
+    console.log("[useClipTypesWithCounts] Dependencies:", {
+      s3Service: !!s3Service,
+      workspaceId,
+      date,
+      shiftId,
+      shiftIdType: typeof shiftId
+    });
+    if (!s3Service || !workspaceId || !date || shiftId === void 0) {
+      console.log("[useClipTypesWithCounts] Skipping counts fetch - missing dependencies");
+      return;
+    }
+    const fetchCounts = async () => {
+      setCountsLoading(true);
+      try {
+        console.log("[useClipTypesWithCounts] Fetching counts...");
+        const clipCounts = await s3Service.getClipCounts(
+          workspaceId,
+          date,
+          shiftId.toString()
+        );
+        console.log("[useClipTypesWithCounts] Received counts:", clipCounts);
+        setCounts(clipCounts);
+      } catch (err) {
+        console.error("[useClipTypesWithCounts] Error fetching counts:", err);
+      } finally {
+        setCountsLoading(false);
+      }
+    };
+    fetchCounts();
+  }, [s3Service, workspaceId, date, shiftId]);
+  return {
+    clipTypes: clipTypes.map((type) => ({
+      ...type,
+      count: counts[type.type] || 0
+    })),
+    isLoading: typesLoading || countsLoading,
+    error: typesError,
+    refresh,
+    counts
+  };
+}
 var MAX_RETRIES = 10;
 var RETRY_DELAY = 500;
 function useNavigation(customNavigate) {
@@ -12842,6 +13759,57 @@ var useFormatNumber = () => {
   );
   return { formatNumber };
 };
+function useAccessControl() {
+  const { user } = useAuth();
+  const userRole = React19.useMemo(() => {
+    if (!user?.role_level) return null;
+    const roleLevel = user.role_level;
+    if (roleLevel === "owner" || roleLevel === "plant_head" || roleLevel === "supervisor") {
+      return roleLevel;
+    }
+    return "supervisor";
+  }, [user?.role_level]);
+  const allPages = [
+    "/",
+    "/leaderboard",
+    "/kpis",
+    "/targets",
+    "/shifts",
+    "/supervisor-management",
+    "/skus",
+    "/ai-agent",
+    "/help",
+    "/health",
+    "/profile",
+    "/workspace",
+    "/factory-view"
+  ];
+  const accessiblePages = React19.useMemo(() => {
+    return allPages;
+  }, []);
+  const hasAccess = React19.useMemo(() => {
+    return (path) => {
+      return true;
+    };
+  }, []);
+  const isPageVisible = React19.useMemo(() => {
+    return (path) => {
+      return true;
+    };
+  }, []);
+  const canAccessPage = React19.useMemo(() => {
+    return (path) => {
+      return true;
+    };
+  }, []);
+  return {
+    userRole,
+    hasAccess,
+    accessiblePages,
+    isPageVisible,
+    canAccessPage
+  };
+}
 function useSupabaseClient() {
   const { supabaseUrl, supabaseKey } = useDashboardConfig();
   const supabase = React19.useMemo(() => supabaseJs.createClient(supabaseUrl, supabaseKey), [supabaseUrl, supabaseKey]);
@@ -20293,6 +21261,19 @@ var LoadingPage = ({
   ] }) });
 };
 var LoadingPage_default = LoadingPage;
+var AccessDeniedPage = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md w-full bg-white shadow-lg rounded-lg p-6 text-center", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "mx-auto h-12 w-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.962-.833-2.732 0L4.082 15.5c-.77.833.192 2.5 1.732 2.5z" }) }) }),
+  /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Access Denied" }),
+  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 mb-4", children: "You do not have access to this dashboard. Please contact your administrator for assistance." }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: () => window.location.href = "/login",
+      className: "bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors",
+      children: "Return to Login"
+    }
+  )
+] }) });
 var withAuth = (WrappedComponent2, options) => {
   const defaultOptions = {
     redirectTo: "/login",
@@ -20300,7 +21281,7 @@ var withAuth = (WrappedComponent2, options) => {
     ...options
   };
   const WithAuthComponent = React19__namespace.memo(function WithAuthComponent2(props) {
-    const { session, loading } = useAuth();
+    const { session, loading, error } = useAuth();
     const router$1 = router.useRouter();
     React19__namespace.useEffect(() => {
       if (process.env.NODE_ENV === "development" && process.env.DEBUG_AUTH === "true") {
@@ -20308,14 +21289,17 @@ var withAuth = (WrappedComponent2, options) => {
       }
     }, [session, loading]);
     React19__namespace.useEffect(() => {
-      if (!loading && defaultOptions.requireAuth && !session) {
+      if (!loading && defaultOptions.requireAuth && !session && !error) {
         console.log("Redirecting to login from withAuth");
         router$1.replace(defaultOptions.redirectTo);
       }
-    }, [session, loading, router$1]);
+    }, [session, loading, router$1, error]);
     if (loading) {
       return /* @__PURE__ */ jsxRuntime.jsx(LoadingPage, { message: "Authenticating..." });
     }
+    if (error && error.message.includes("You do not have access to this dashboard")) {
+      return /* @__PURE__ */ jsxRuntime.jsx(AccessDeniedPage, {});
+    }
     if (defaultOptions.requireAuth && !session) {
       return null;
     }
@@ -20324,6 +21308,31 @@ var withAuth = (WrappedComponent2, options) => {
   WithAuthComponent.displayName = `withAuth(${WrappedComponent2.displayName || WrappedComponent2.name || "Component"})`;
   return WithAuthComponent;
 };
+function withAccessControl(WrappedComponent2, options = {}) {
+  const {
+    requiredPath,
+    redirectTo = "/",
+    UnauthorizedComponent
+  } = options;
+  const WithAccessControlComponent = (props) => {
+    const router$1 = router.useRouter();
+    const { user, loading: authLoading } = useAuth();
+    const { canAccessPage, userRole } = useAccessControl();
+    requiredPath || router$1.pathname;
+    if (authLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-screen w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: "Loading..." })
+      ] }) });
+    }
+    if (!user) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-screen w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 mb-4", children: "Please log in to continue" }) }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(WrappedComponent2, { ...props });
+  };
+  WithAccessControlComponent.displayName = `withAccessControl(${WrappedComponent2.displayName || WrappedComponent2.name || "Component"})`;
+  return WithAccessControlComponent;
+}
 var LoginPage = ({
   onRateLimitCheck,
   logoSrc = "/optifye-logo.png",
@@ -21902,7 +22911,7 @@ var HourlyOutputChartComponent = ({
     ticks.push(maxYValue);
     return [...new Set(ticks)].sort((a, b) => a - b);
   };
-  const renderLegend = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-sm text-gray-600 absolute -bottom-1 left-0 right-0 bg-white py-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
+  const renderLegend = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-sm text-gray-600 absolute bottom-3 left-0 right-0 bg-white py-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border-t-2 border-[#E34329] border-dashed" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
       "Target: ",
@@ -27204,7 +28213,7 @@ var VideoPlayer = React19__namespace.default.forwardRef(({
     muted,
     loop,
     poster,
-    // Enhanced HLS configuration
+    // Optimized HLS configuration for VOD content - PERFORMANCE OPTIMIZED
     html5: {
       vhs: {
         // VHS (Video HTTP Streaming) options for HLS
@@ -27214,12 +28223,59 @@ var VideoPlayer = React19__namespace.default.forwardRef(({
         // Use native HLS on Safari
         enableLowInitialPlaylist: true,
         smoothQualityChange: true,
-        // Error recovery
+        // Optimized bandwidth and buffering for VOD
+        bandwidth: 5e7,
+        // Start with high bandwidth assumption (50 Mbps)
+        initialBandwidth: 5e7,
+        // Assume good connection initially
+        limitRenditionByPlayerDimensions: true,
+        // Buffer configuration for optimal VOD playback
+        maxBufferLength: 30,
+        // Don't over-buffer (30 seconds)
+        maxMaxBufferLength: 60,
+        // Absolute max buffer (60 seconds)
+        maxBufferSize: 60 * 1e3 * 1e3,
+        // 60MB max buffer size
+        maxBufferHole: 0.5,
+        // Allow 0.5s holes in buffer
+        bufferBasedABR: true,
+        // Segment loading optimization
         maxPlaylistRetries: 3,
+        playlistRetryDelay: 500,
+        // 500ms between retries
         playlistExclusionDuration: 60,
-        // Buffer configuration
-        maxMaxBufferLength: 30,
-        bufferBasedABR: true
+        segmentLoadingRetryAttempts: 3,
+        segmentLoadingRetryDelay: 1e3,
+        // 1s between segment retries
+        segmentLoadingTimeOut: 2e4,
+        // 20s timeout for segments
+        manifestLoadingTimeOut: 1e4,
+        // 10s timeout for manifest
+        // Performance optimizations
+        experimentalBufferBasedCodecSwitching: true,
+        experimentalCacheEncryptionKeys: true,
+        handlePartialData: true,
+        allowSeeksWithinUnsafeLiveWindow: false,
+        // VOD content
+        experimentalLLHLS: false,
+        // Disable Low Latency HLS for VOD
+        // Connection settings
+        enableWorker: true,
+        // Use web worker for better performance
+        progressive: true,
+        // Progressive download
+        // Adaptive bitrate settings (if multi-quality available)
+        abrEwmaFastLive: 3,
+        abrEwmaSlowLive: 9,
+        abrBandWidthFactor: 0.95,
+        abrBandWidthUpFactor: 0.7,
+        abrMaxWithRealBitrate: false,
+        // Request options for better network handling
+        requestOptions: {
+          timeout: 3e4,
+          // 30s overall timeout
+          maxRetry: 3
+        }
       },
       nativeVideoTracks: false,
       nativeAudioTracks: false,
@@ -27284,9 +28340,17 @@ var VideoPlayer = React19__namespace.default.forwardRef(({
       onError?.(player, error);
     });
     if (src) {
+      const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
+      let videoSrc = src;
+      if (src.startsWith("#EXTM3U")) {
+        const blob = new Blob([src], { type: "application/x-mpegURL" });
+        videoSrc = URL.createObjectURL(blob);
+        console.log("[VideoPlayer] Created blob URL for HLS playlist content");
+        player._blobUrl = videoSrc;
+      }
       player.src({
-        src,
-        type: src.endsWith(".m3u8") ? "application/x-mpegURL" : "video/mp4"
+        src: videoSrc,
+        type: isHLS ? "application/x-mpegURL" : "video/mp4"
       });
     }
   }, [
@@ -27306,16 +28370,34 @@ var VideoPlayer = React19__namespace.default.forwardRef(({
   ]);
   React19.useEffect(() => {
     if (playerRef.current && src) {
+      const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
+      let videoSrc = src;
+      let blobUrl = null;
+      if (src.startsWith("#EXTM3U")) {
+        const blob = new Blob([src], { type: "application/x-mpegURL" });
+        blobUrl = URL.createObjectURL(blob);
+        videoSrc = blobUrl;
+        console.log("[VideoPlayer] Created blob URL for HLS playlist content (source update)");
+      }
       playerRef.current.src({
-        src,
-        type: src.endsWith(".m3u8") ? "application/x-mpegURL" : "video/mp4"
+        src: videoSrc,
+        type: isHLS ? "application/x-mpegURL" : "video/mp4"
       });
+      return () => {
+        if (blobUrl) {
+          URL.revokeObjectURL(blobUrl);
+        }
+      };
     }
   }, [src]);
   React19.useEffect(() => {
     initializePlayer();
     return () => {
       if (playerRef.current) {
+        const blobUrl = playerRef.current._blobUrl;
+        if (blobUrl) {
+          URL.revokeObjectURL(blobUrl);
+        }
         playerRef.current.dispose();
         playerRef.current = null;
         setIsReady(false);
@@ -27387,6 +28469,233 @@ var VideoPlayer = React19__namespace.default.forwardRef(({
   ] });
 });
 VideoPlayer.displayName = "VideoPlayer";
+var CroppedVideoPlayer = React19.forwardRef(({
+  crop,
+  debug = false,
+  ...videoProps
+}, ref) => {
+  const videoContainerRef = React19.useRef(null);
+  const hiddenVideoRef = React19.useRef(null);
+  const canvasRef = React19.useRef(null);
+  const animationFrameRef = React19.useRef(null);
+  const videoElementRef = React19.useRef(null);
+  const [isVideoReady, setIsVideoReady] = React19.useState(false);
+  const [canvasDimensions, setCanvasDimensions] = React19.useState({ width: 0, height: 0 });
+  const [isProcessing, setIsProcessing] = React19.useState(false);
+  const stopCanvasRendering = React19.useCallback(() => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+  }, []);
+  React19.useImperativeHandle(ref, () => ({
+    player: hiddenVideoRef.current?.player || null,
+    play: () => hiddenVideoRef.current?.play() || void 0,
+    pause: () => hiddenVideoRef.current?.pause(),
+    currentTime: (time2) => {
+      if (time2 !== void 0 && hiddenVideoRef.current) {
+        return hiddenVideoRef.current.currentTime(time2);
+      }
+      return hiddenVideoRef.current?.currentTime() || 0;
+    },
+    duration: () => hiddenVideoRef.current?.duration() || 0,
+    paused: () => hiddenVideoRef.current?.paused() || true,
+    mute: (isMuted) => hiddenVideoRef.current?.mute(isMuted) || false,
+    volume: (level) => hiddenVideoRef.current?.volume(level) || 0,
+    dispose: () => {
+      hiddenVideoRef.current?.dispose();
+      stopCanvasRendering();
+    },
+    isReady: hiddenVideoRef.current?.isReady || false
+  }), [stopCanvasRendering]);
+  const calculateCanvasDimensions = React19.useCallback(() => {
+    if (!crop || !videoContainerRef.current) return;
+    const container = videoContainerRef.current;
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+    const cropAspectRatio = crop.width / crop.height;
+    let canvasWidth;
+    let canvasHeight;
+    if (containerWidth / containerHeight > cropAspectRatio) {
+      canvasHeight = containerHeight;
+      canvasWidth = canvasHeight * cropAspectRatio;
+    } else {
+      canvasWidth = containerWidth;
+      canvasHeight = canvasWidth / cropAspectRatio;
+    }
+    setCanvasDimensions({
+      width: Math.floor(canvasWidth),
+      height: Math.floor(canvasHeight)
+    });
+  }, [crop]);
+  const renderFrameToCanvas = React19.useCallback(() => {
+    if (!canvasRef.current || !videoElementRef.current || !crop) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    const video = videoElementRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx || video.paused || video.ended) {
+      return;
+    }
+    const videoWidth = video.videoWidth;
+    const videoHeight = video.videoHeight;
+    if (videoWidth === 0 || videoHeight === 0) {
+      animationFrameRef.current = requestAnimationFrame(renderFrameToCanvas);
+      return;
+    }
+    const cropX = crop.x / 100 * videoWidth;
+    const cropY = crop.y / 100 * videoHeight;
+    const cropWidth = crop.width / 100 * videoWidth;
+    const cropHeight = crop.height / 100 * videoHeight;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(
+      video,
+      cropX,
+      cropY,
+      cropWidth,
+      cropHeight,
+      // Source rectangle (crop area)
+      0,
+      0,
+      canvas.width,
+      canvas.height
+      // Destination (full canvas)
+    );
+    animationFrameRef.current = requestAnimationFrame(renderFrameToCanvas);
+  }, [crop]);
+  const handleVideoReady = React19.useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video player ready");
+    const videoEl = player.el().querySelector("video");
+    if (videoEl) {
+      videoElementRef.current = videoEl;
+      setIsVideoReady(true);
+    }
+    videoProps.onReady?.(player);
+  }, [videoProps]);
+  const handleVideoPlay = React19.useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video playing, starting canvas rendering");
+    if (crop && canvasRef.current) {
+      setIsProcessing(true);
+      renderFrameToCanvas();
+    }
+    videoProps.onPlay?.(player);
+  }, [crop, renderFrameToCanvas, videoProps]);
+  const handleVideoPause = React19.useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video paused, stopping canvas rendering");
+    stopCanvasRendering();
+    setIsProcessing(false);
+    videoProps.onPause?.(player);
+  }, [stopCanvasRendering, videoProps]);
+  const handleVideoEnded = React19.useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video ended");
+    stopCanvasRendering();
+    setIsProcessing(false);
+    videoProps.onEnded?.(player);
+  }, [stopCanvasRendering, videoProps]);
+  const handleSeeking = React19.useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video seeking");
+    if (crop && !player.paused()) {
+      renderFrameToCanvas();
+    }
+    videoProps.onSeeking?.(player);
+  }, [crop, renderFrameToCanvas, videoProps]);
+  const handleSeeked = React19.useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video seeked");
+    if (crop && !player.paused()) {
+      renderFrameToCanvas();
+    }
+    videoProps.onSeeked?.(player);
+  }, [crop, renderFrameToCanvas, videoProps]);
+  const handleLoadedMetadata = React19.useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video metadata loaded");
+    calculateCanvasDimensions();
+    videoProps.onLoadedMetadata?.(player);
+  }, [calculateCanvasDimensions, videoProps]);
+  React19.useEffect(() => {
+    calculateCanvasDimensions();
+    const handleResize = () => {
+      calculateCanvasDimensions();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [calculateCanvasDimensions]);
+  React19.useEffect(() => {
+    return () => {
+      stopCanvasRendering();
+    };
+  }, [stopCanvasRendering]);
+  if (!crop) {
+    return /* @__PURE__ */ jsxRuntime.jsx(VideoPlayer, { ref, ...videoProps });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: videoContainerRef,
+      className: `relative w-full h-full flex items-center justify-center bg-black ${videoProps.className || ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          VideoPlayer,
+          {
+            ref: hiddenVideoRef,
+            ...videoProps,
+            onReady: handleVideoReady,
+            onPlay: handleVideoPlay,
+            onPause: handleVideoPause,
+            onEnded: handleVideoEnded,
+            onSeeking: handleSeeking,
+            onSeeked: handleSeeked,
+            onLoadedMetadata: handleLoadedMetadata
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            width: canvasDimensions.width,
+            height: canvasDimensions.height,
+            className: "max-w-full max-h-full",
+            style: {
+              display: isVideoReady ? "block" : "none",
+              width: `${canvasDimensions.width}px`,
+              height: `${canvasDimensions.height}px`,
+              pointerEvents: "none"
+              // Allow clicks to pass through to controls
+            }
+          }
+        ),
+        !isVideoReady && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+        debug && isVideoReady && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-2 left-2 bg-black/80 text-white text-xs p-2 rounded font-mono", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            "Crop: ",
+            crop.x,
+            ",",
+            crop.y,
+            " ",
+            crop.width,
+            "x",
+            crop.height,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            "Canvas: ",
+            canvasDimensions.width,
+            "x",
+            canvasDimensions.height,
+            "px"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            "Processing: ",
+            isProcessing ? "Yes" : "No"
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+CroppedVideoPlayer.displayName = "CroppedVideoPlayer";
 var BackButton = ({
   onClick,
   text = "Back",
@@ -27696,6 +29005,244 @@ var InlineEditableText = ({
     }
   );
 };
+var getSupabaseClient3 = () => {
+  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 supabaseJs.createClient(url, key);
+};
+var getAuthToken3 = async () => {
+  try {
+    const supabase = getSupabaseClient3();
+    const { data: { session } } = await supabase.auth.getSession();
+    return session?.access_token || null;
+  } catch (error) {
+    console.error("[useWorkspaceCrop] Error getting auth token:", error);
+    return null;
+  }
+};
+function useWorkspaceCrop(workspaceId) {
+  const [crop, setCrop] = React19.useState(null);
+  const [isLoading, setIsLoading] = React19.useState(true);
+  const [error, setError] = React19.useState(null);
+  React19.useEffect(() => {
+    if (!workspaceId) {
+      setIsLoading(false);
+      return;
+    }
+    const fetchCrop = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const token = await getAuthToken3();
+        if (!token) {
+          throw new Error("Authentication required");
+        }
+        const response = await fetch("/api/clips/supabase", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+          },
+          body: JSON.stringify({
+            action: "crop",
+            workspaceId
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to fetch crop: ${response.statusText}`);
+        }
+        const data = await response.json();
+        console.log(`[useWorkspaceCrop] Fetched crop for workspace ${workspaceId}:`, data.crop);
+        setCrop(data.crop);
+      } catch (err) {
+        console.error("[useWorkspaceCrop] Error fetching crop:", err);
+        setError(err instanceof Error ? err.message : "Failed to fetch crop configuration");
+        setCrop(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchCrop();
+  }, [workspaceId]);
+  return { crop, isLoading, error };
+}
+var getSeverityIcon = (severity) => {
+  switch (severity) {
+    case "high":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3 w-3 text-red-500" });
+    case "medium":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "h-3 w-3 text-yellow-500" });
+    case "low":
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle, { className: "h-3 w-3 text-green-500" });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-3 w-3 text-gray-400" });
+  }
+};
+var getColorClasses = (color2) => {
+  const colorMap = {
+    "red": { bg: "bg-red-50", text: "text-red-700", border: "border-red-200" },
+    "yellow": { bg: "bg-yellow-50", text: "text-yellow-700", border: "border-yellow-200" },
+    "orange": { bg: "bg-orange-50", text: "text-orange-700", border: "border-orange-200" },
+    "green": { bg: "bg-green-50", text: "text-green-700", border: "border-green-200" },
+    "blue": { bg: "bg-blue-50", text: "text-blue-700", border: "border-blue-200" },
+    "purple": { bg: "bg-purple-50", text: "text-purple-700", border: "border-purple-200" },
+    "gray": { bg: "bg-gray-50", text: "text-gray-700", border: "border-gray-200" }
+  };
+  return colorMap[color2] || colorMap["gray"];
+};
+var FileManagerFilters = ({
+  categories,
+  videos,
+  activeFilter,
+  currentVideoId,
+  counts,
+  onFilterChange,
+  onVideoSelect,
+  className = ""
+}) => {
+  const [expandedNodes, setExpandedNodes] = React19.useState(/* @__PURE__ */ new Set());
+  const [searchTerm, setSearchTerm] = React19.useState("");
+  const filterTree = React19.useMemo(() => {
+    const tree = [];
+    categories.forEach((category) => {
+      const categoryCount = counts?.[category.id] || 0;
+      let categoryVideos = videos.filter((video) => video.type === category.id);
+      if (searchTerm.trim()) {
+        categoryVideos = categoryVideos.filter(
+          (video) => video.description.toLowerCase().includes(searchTerm.toLowerCase()) || video.timestamp.includes(searchTerm) || video.severity.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+      }
+      if (categoryCount > 0 || categoryVideos.length > 0) {
+        const colorClasses = getColorClasses(category.color);
+        const videoNodes = categoryVideos.map((video, index) => ({
+          id: video.id,
+          label: `${video.timestamp.substring(11, 19)} - ${video.description}`,
+          type: "video",
+          icon: getSeverityIcon(video.severity),
+          timestamp: video.timestamp,
+          severity: video.severity
+        }));
+        tree.push({
+          id: category.id,
+          label: category.label,
+          type: "category",
+          count: categoryCount || categoryVideos.length,
+          // Use API count if available
+          videos: categoryVideos,
+          children: videoNodes,
+          icon: expandedNodes.has(category.id) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: `h-4 w-4 ${colorClasses.text}` }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: `h-4 w-4 ${colorClasses.text}` }),
+          color: category.color
+        });
+      }
+    });
+    return tree;
+  }, [categories, videos, expandedNodes, searchTerm, counts]);
+  const toggleExpanded = (nodeId) => {
+    const newExpanded = new Set(expandedNodes);
+    if (newExpanded.has(nodeId)) {
+      newExpanded.delete(nodeId);
+    } else {
+      newExpanded.add(nodeId);
+    }
+    setExpandedNodes(newExpanded);
+  };
+  const handleNodeClick = (node) => {
+    if (node.type === "category") {
+      toggleExpanded(node.id);
+      onFilterChange(node.id);
+    } else if (node.type === "video") {
+      const videoIndex = videos.findIndex((v) => v.id === node.id);
+      if (videoIndex !== -1) {
+        onVideoSelect(videoIndex);
+      }
+    }
+  };
+  const renderNode = (node, depth = 0) => {
+    const isExpanded = expandedNodes.has(node.id);
+    const isActive = activeFilter === node.id;
+    const isCurrentVideo = currentVideoId === node.id;
+    const hasChildren = node.children && node.children.length > 0;
+    const colorClasses = node.color ? getColorClasses(node.color) : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "select-none animate-in", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `flex items-center cursor-pointer transition-all duration-300 ease-out group relative overflow-hidden ${node.type === "category" && depth === 0 ? `py-3 px-4 rounded-2xl hover:bg-gradient-to-r hover:from-slate-50 hover:to-blue-50/30 hover:shadow-lg hover:shadow-blue-100/20 hover:scale-[1.02] hover:-translate-y-0.5 ${isActive ? "bg-gradient-to-r from-blue-50 via-blue-50/80 to-indigo-50/60 border border-blue-200/50 shadow-lg shadow-blue-100/30 scale-[1.02]" : "border border-transparent"}` : `py-2 px-3 rounded-xl hover:bg-gradient-to-r hover:from-slate-50 hover:to-slate-50/50 hover:shadow-sm ${isActive ? "bg-gradient-to-r from-blue-50/80 to-blue-50/40 border border-blue-200/30 shadow-sm" : "border border-transparent"} ${isCurrentVideo ? "bg-gradient-to-r from-emerald-50 to-green-50/60 border border-emerald-200/50 shadow-md shadow-emerald-100/20" : ""}`} ${node.type === "video" ? "ml-6" : ""}`,
+          onClick: () => handleNodeClick(node),
+          children: [
+            hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: `flex-shrink-0 mr-2 p-1.5 rounded-lg hover:bg-white/80 hover:shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400/50 focus:bg-white ${node.type === "category" ? "group-hover:scale-110" : "group-hover:scale-105"}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggleExpanded(node.id);
+                },
+                children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `text-slate-600 group-hover:text-blue-600 transition-colors duration-200 ${node.type === "category" ? "h-4 w-4" : "h-3.5 w-3.5"}` }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: `text-slate-600 group-hover:text-blue-600 transition-colors duration-200 ${node.type === "category" ? "h-4 w-4" : "h-3.5 w-3.5"}` })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 mr-3 ${node.type === "category" ? "p-2 rounded-lg shadow-sm group-hover:scale-110 transition-transform duration-200" : "p-0.5"} ${colorClasses && node.type === "category" ? `${colorClasses.bg} border border-white/60` : ""}`, children: node.icon }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-semibold tracking-tight ${node.type === "category" ? "text-slate-800 text-sm" : "text-slate-700 text-xs"} ${isCurrentVideo ? "text-emerald-700 font-bold" : ""} group-hover:text-slate-900 transition-colors duration-200`, children: node.label }),
+                node.type === "video" && node.severity && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium ${node.severity === "high" ? "bg-red-100 text-red-700" : node.severity === "medium" ? "bg-yellow-100 text-yellow-700" : "bg-green-100 text-green-700"}`, children: [
+                  node.severity,
+                  " priority"
+                ] }) })
+              ] }),
+              node.count !== void 0 && node.type === "category" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `px-2.5 py-1 text-sm font-bold rounded-lg shadow-sm border backdrop-blur-sm flex-shrink-0 group-hover:scale-105 transition-all duration-200 ${colorClasses ? `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border} bg-opacity-80` : "bg-slate-100/80 text-slate-700 border-slate-200/60"}`, children: node.count }) })
+            ] })
+          ]
+        }
+      ),
+      hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 ml-3 space-y-1 animate-in border-l-2 border-slate-100 pl-3", children: node.children.map((child) => renderNode(child, depth + 1)) })
+    ] }, node.id);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bg-white rounded-2xl shadow-lg border border-gray-100 h-full hover:shadow-xl transition-all duration-300 ease-out backdrop-blur-sm ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-b border-gray-50 bg-gradient-to-br from-slate-50/80 via-white to-blue-50/30", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-3", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: "h-5 w-5 text-slate-700" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-slate-900 tracking-tight", children: "Clips Explorer" }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-slate-100/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-5 w-5 text-slate-400 group-focus-within:text-blue-500 transition-colors duration-200" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Show me idle clips from 10am",
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value),
+          className: "w-full pl-12 pr-4 py-2.5 bg-slate-50/50 border border-slate-200/60 rounded-xl text-sm font-medium placeholder:text-slate-400 placeholder:font-normal focus:outline-none focus:bg-white focus:border-blue-300 focus:ring-4 focus:ring-blue-100/50 transition-all duration-200 hover:border-slate-300 hover:bg-white/80"
+        }
+      ),
+      searchTerm && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-4 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 bg-blue-500 rounded-full animate-pulse" }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 h-[calc(100%-14rem)] overflow-y-auto scrollbar-thin", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filterTree.map((node) => renderNode(node)) }),
+      filterTree.length === 0 && searchTerm && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-12 w-12 mx-auto" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clips found" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-slate-500 mb-4", children: [
+          'No clips match "',
+          searchTerm,
+          '"'
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setSearchTerm(""),
+            className: "inline-flex items-center px-4 py-2 bg-blue-50 text-blue-600 text-sm font-medium rounded-lg hover:bg-blue-100 transition-colors duration-200",
+            children: "Clear search"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var USE_SUPABASE_CLIPS2 = true;
 var BottlenecksContent = ({
   workspaceId,
   workspaceName,
@@ -27704,17 +29251,9 @@ var BottlenecksContent = ({
   className
 }) => {
   const dashboardConfig = useDashboardConfig();
-  const sopCategories = React19__namespace.default.useMemo(() => {
-    const sopConfig = dashboardConfig?.s3Config?.sopCategories;
-    if (!sopConfig) return null;
-    if (sopConfig.workspaceOverrides && sopConfig.workspaceOverrides[workspaceId]) {
-      return sopConfig.workspaceOverrides[workspaceId];
-    }
-    return sopConfig.default;
-  }, [dashboardConfig, workspaceId]);
+  const { crop: workspaceCrop} = useWorkspaceCrop(workspaceId);
   const videoRef = React19.useRef(null);
-  const timestampFilterRef = React19.useRef(null);
-  const initialFilter = sopCategories && sopCategories.length > 0 ? sopCategories[0].id : "low_value";
+  const [initialFilter, setInitialFilter] = React19.useState("");
   const currentIndexRef = React19.useRef(0);
   const activeFilterRef = React19.useRef(initialFilter);
   const isMountedRef = React19.useRef(true);
@@ -27744,22 +29283,6 @@ var BottlenecksContent = ({
   React19.useEffect(() => {
     currentIndexRef.current = currentIndex;
   }, [currentIndex]);
-  const [showTimestampFilter, setShowTimestampFilter] = React19.useState(false);
-  const [timestampStart, setTimestampStart] = React19.useState("");
-  const [timestampEnd, setTimestampEnd] = React19.useState("");
-  React19.useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (timestampFilterRef.current && !timestampFilterRef.current.contains(event.target)) {
-        setShowTimestampFilter(false);
-      }
-    };
-    if (showTimestampFilter) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [showTimestampFilter]);
   const s3ClipsService = React19.useMemo(() => {
     if (!dashboardConfig?.s3Config) {
       console.warn("S3 configuration not found in dashboard config");
@@ -27767,6 +29290,39 @@ var BottlenecksContent = ({
     }
     return videoPrefetchManager.getS3Service(dashboardConfig);
   }, [dashboardConfig]);
+  const {
+    clipTypes,
+    isLoading: clipTypesLoading,
+    error: clipTypesError,
+    counts: dynamicCounts
+  } = useClipTypesWithCounts(
+    workspaceId,
+    date || getOperationalDate(),
+    shift || "0"
+    // Use shift || '0' as in the original working code
+  );
+  console.log("[BottlenecksContent] Clip types data:", {
+    clipTypes,
+    clipTypesLength: clipTypes?.length,
+    clipTypesLoading,
+    clipTypesError,
+    dynamicCounts,
+    workspaceId,
+    date: date || getOperationalDate(),
+    shift: shift || "0",
+    USE_SUPABASE_CLIPS: USE_SUPABASE_CLIPS2
+  });
+  React19.useEffect(() => {
+    if (clipTypes.length > 0 && !initialFilter) {
+      const firstWithCounts = clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0);
+      const firstType = firstWithCounts || clipTypes[0];
+      if (firstType) {
+        setInitialFilter(firstType.type);
+        setActiveFilter(firstType.type);
+        activeFilterRef.current = firstType.type;
+      }
+    }
+  }, [clipTypes, dynamicCounts, initialFilter]);
   const effectiveShift = React19.useMemo(() => {
     if (shift !== void 0 && shift !== null) {
       const shiftStr = shift.toString();
@@ -27785,6 +29341,9 @@ var BottlenecksContent = ({
       return currentShift.shiftId.toString();
     }
   }, [shift, date, dashboardConfig]);
+  const mergedCounts = React19.useMemo(() => {
+    return { ...clipCounts, ...dynamicCounts };
+  }, [clipCounts, dynamicCounts]);
   const {
     data: prefetchData,
     isFullyIndexed,
@@ -27819,17 +29378,22 @@ var BottlenecksContent = ({
         setHasInitialLoad(true);
         return;
       }
-      console.log(`[BottlenecksContent] Fetching clip counts from S3`);
+      console.log(`[BottlenecksContent] Fetching clip counts directly with params:`, {
+        workspaceId,
+        operationalDate,
+        shiftStr
+      });
       const fullResult = await s3ClipsService.getClipCounts(
         workspaceId,
         operationalDate,
         shiftStr
         // Don't build index - use pagination for cost efficiency
       );
+      console.log(`[BottlenecksContent] Direct fetch result:`, fullResult);
       if (fullResult) {
         const counts = fullResult;
         updateClipCounts(counts);
-        console.log(`[BottlenecksContent] Fetched and cached clip counts`);
+        console.log(`[BottlenecksContent] Updated clip counts:`, counts);
       }
       setIsLoading(false);
       setHasInitialLoad(true);
@@ -27850,13 +29414,7 @@ var BottlenecksContent = ({
   const ensureVideosLoaded = React19.useCallback(async (centerIndex) => {
     if (!s3ClipsService || !workspaceId || !isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
-    let effectiveFilter = currentFilter;
-    if (sopCategories && sopCategories.length > 0) {
-      const category = sopCategories.find((cat) => cat.id === currentFilter);
-      if (category && category.s3FolderName) {
-        effectiveFilter = category.s3FolderName;
-      }
-    }
+    const effectiveFilter = currentFilter;
     const cacheKey = `${effectiveFilter}:${date}:${shift}`;
     if (!loadedVideosMapRef.current.has(cacheKey)) {
       loadedVideosMapRef.current.set(cacheKey, /* @__PURE__ */ new Set());
@@ -27865,7 +29423,7 @@ var BottlenecksContent = ({
     const indicesToLoad = [];
     const rangeBefore = 1;
     const rangeAfter = 3;
-    for (let i = Math.max(0, centerIndex - rangeBefore); i <= Math.min(clipCounts[effectiveFilter] - 1, centerIndex + rangeAfter); i++) {
+    for (let i = Math.max(0, centerIndex - rangeBefore); i <= Math.min(mergedCounts[effectiveFilter] - 1, centerIndex + rangeAfter); i++) {
       if (!loadedIndices.has(i) && !loadingVideosRef.current.has(i)) {
         indicesToLoad.push(i);
       }
@@ -27940,7 +29498,7 @@ var BottlenecksContent = ({
     } finally {
       indicesToLoad.forEach((idx) => loadingVideosRef.current.delete(idx));
     }
-  }, [s3ClipsService, workspaceId, clipCounts, sopCategories, date, effectiveShift]);
+  }, [s3ClipsService, workspaceId, clipCounts, date, effectiveShift]);
   const loadFirstVideoForCategory = React19.useCallback(async (category) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     const targetCategory = category || activeFilterRef.current;
@@ -27957,7 +29515,7 @@ var BottlenecksContent = ({
     try {
       const operationalDate = date || getOperationalDate();
       const shiftStr = effectiveShift;
-      if (!clipCounts[targetCategory]) {
+      if (!mergedCounts[targetCategory]) {
         const cacheKey = `clip-counts:${workspaceId}:${operationalDate}:${shiftStr}`;
         const cachedResult = await smartVideoCache.getClipCounts(cacheKey);
         if (cachedResult && cachedResult.counts[targetCategory] > 0) {
@@ -27993,7 +29551,7 @@ var BottlenecksContent = ({
       } catch (directError) {
         console.warn(`[BottlenecksContent] Direct S3 loading failed, trying video index:`, directError);
       }
-      if (clipCounts[targetCategory] > 0) {
+      if (mergedCounts[targetCategory] > 0) {
         try {
           const operationalDate2 = date || getOperationalDate();
           const shiftStr2 = effectiveShift;
@@ -28047,47 +29605,27 @@ var BottlenecksContent = ({
     }
   }, [workspaceId, date, effectiveShift, s3ClipsService, fetchClipCounts, updateClipCounts, prefetchData]);
   React19.useEffect(() => {
-    if (prefetchData && prefetchData.counts) {
-      console.log(`[BottlenecksContent] Received prefetch update - status: ${prefetchStatus}`);
-      updateClipCounts(prefetchData.counts);
-      if (!hasInitialLoad) {
-        setIsLoading(false);
-        setHasInitialLoad(true);
+    console.log(`[BottlenecksContent] prefetchData update:`, {
+      hasPrefetchData: !!prefetchData,
+      prefetchStatus,
+      prefetchData
+    });
+    if (prefetchData) {
+      const counts = prefetchData.counts || prefetchData;
+      console.log(`[BottlenecksContent] Extracted counts from prefetch:`, counts);
+      if (counts && Object.keys(counts).length > 0) {
+        updateClipCounts(counts);
+        if (!hasInitialLoad) {
+          setIsLoading(false);
+          setHasInitialLoad(true);
+        }
       }
     }
   }, [prefetchData, prefetchStatus, updateClipCounts, hasInitialLoad]);
   React19.useEffect(() => {
-    if (s3ClipsService && clipCounts[activeFilter] > 0) {
+    if (s3ClipsService && (mergedCounts[activeFilter] || 0) > 0) {
       const hasVideosForCurrentFilter = allVideos.some((video) => {
-        if (sopCategories && sopCategories.length > 0) {
-          const selectedCategory = sopCategories.find((cat) => cat.id === activeFilter);
-          if (selectedCategory) {
-            return video.type === selectedCategory.id;
-          }
-        }
-        if (activeFilter === "all") return true;
-        if (activeFilter === "low_value") {
-          return video.type === "low_value";
-        }
-        if (activeFilter === "idle_time") {
-          return video.type === "idle_time";
-        }
-        if (activeFilter === "sop_deviations") {
-          return video.type === "missing_quality_check";
-        }
-        if (activeFilter === "best_cycle_time") {
-          return video.type === "best_cycle_time";
-        }
-        if (activeFilter === "worst_cycle_time") {
-          return video.type === "worst_cycle_time";
-        }
-        if (activeFilter === "cycle_completion") {
-          return video.type === "cycle_completion";
-        }
-        if (activeFilter === "long_cycle_time") {
-          return video.type === "long_cycle_time";
-        }
-        return video.type === "bottleneck" && video.severity === activeFilter;
+        return video.type === activeFilter;
       });
       if (!hasVideosForCurrentFilter) {
         loadFirstVideoForCategory(activeFilter);
@@ -28095,7 +29633,7 @@ var BottlenecksContent = ({
         setIsCategoryLoading(false);
       }
     }
-  }, [activeFilter, s3ClipsService, clipCounts, loadFirstVideoForCategory, allVideos, sopCategories]);
+  }, [activeFilter, s3ClipsService, mergedCounts, loadFirstVideoForCategory, allVideos]);
   React19.useEffect(() => {
     if (previousFilterRef.current !== activeFilter) {
       console.log(`Filter changed from ${previousFilterRef.current} to ${activeFilter} - resetting to first video`);
@@ -28107,15 +29645,7 @@ var BottlenecksContent = ({
       previousFilterRef.current = activeFilter;
       const filtered = allVideos.filter((video) => {
         if (activeFilter === "all") return true;
-        if (activeFilter === "low_value") return video.type === "low_value";
-        if (activeFilter === "sop_deviations") return video.type === "missing_quality_check";
-        if (activeFilter === "best_cycle_time") return video.type === "best_cycle_time";
-        if (activeFilter === "worst_cycle_time") return video.type === "worst_cycle_time";
-        if (activeFilter === "cycle_completion") return video.type === "cycle_completion";
-        if (activeFilter === "long_cycle_time") {
-          return video.type === "long_cycle_time";
-        }
-        return video.type === "bottleneck" && video.severity === activeFilter;
+        return video.type === activeFilter;
       });
       if (filtered.length > 0) {
         preloadVideoUrl(filtered[0].src);
@@ -28124,46 +29654,25 @@ var BottlenecksContent = ({
             setIsCategoryLoading(false);
           }
         }, 150);
-      } else if (clipCounts[activeFilter] === 0) {
+      } else if ((mergedCounts[activeFilter] || 0) === 0) {
         if (isMountedRef.current) {
           setIsCategoryLoading(false);
         }
       }
     }
-  }, [activeFilter, allVideos, clipCounts]);
+  }, [activeFilter, allVideos, mergedCounts]);
   const filteredVideos = React19.useMemo(() => {
     if (!allVideos) return [];
     let filtered = [];
     if (activeFilter === "all") {
       filtered = [...allVideos];
     } else {
-      if (sopCategories && sopCategories.length > 0) {
-        const selectedCategory = sopCategories.find((cat) => cat.id === activeFilter);
-        if (selectedCategory) {
-          filtered = allVideos.filter((video) => video.type === selectedCategory.id);
-        }
-      } else {
-        if (activeFilter === "low_value") {
-          filtered = allVideos.filter((video) => video.type === "low_value");
-        } else if (activeFilter === "sop_deviations") {
-          filtered = allVideos.filter((video) => video.type === "missing_quality_check");
-        } else if (activeFilter === "best_cycle_time") {
-          filtered = allVideos.filter((video) => video.type === "best_cycle_time");
-        } else if (activeFilter === "worst_cycle_time") {
-          filtered = allVideos.filter((video) => video.type === "worst_cycle_time");
-        } else if (activeFilter === "cycle_completion") {
-          filtered = allVideos.filter((video) => video.type === "cycle_completion");
-        } else if (activeFilter === "long_cycle_time") {
-          filtered = allVideos.filter((video) => video.type === "long_cycle_time");
-        } else {
-          filtered = allVideos.filter((video) => video.type === "bottleneck" && video.severity === activeFilter);
-        }
-      }
+      filtered = allVideos.filter((video) => video.type === activeFilter);
     }
     return filtered.sort((a, b) => {
       return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
     });
-  }, [activeFilter, allVideos, sopCategories]);
+  }, [activeFilter, allVideos]);
   React19.useEffect(() => {
     if (isNavigating && currentIndex < filteredVideos.length) {
       setIsNavigating(false);
@@ -28188,15 +29697,9 @@ var BottlenecksContent = ({
     const currentIdx = currentIndexRef.current;
     const currentFilter = activeFilterRef.current;
     const nextIndex = currentIdx + 1;
-    let effectiveFilter = currentFilter;
-    if (sopCategories && sopCategories.length > 0) {
-      const category = sopCategories.find((cat) => cat.id === currentFilter);
-      if (category && category.s3FolderName) {
-        effectiveFilter = category.s3FolderName;
-      }
-    }
-    console.log(`[handleNext] Navigation check: nextIndex=${nextIndex}, currentFilter='${currentFilter}', effectiveFilter='${effectiveFilter}', clipCounts[effectiveFilter]=${clipCounts[effectiveFilter]}, clipCounts keys:`, Object.keys(clipCounts));
-    if (nextIndex < clipCounts[effectiveFilter]) {
+    const effectiveFilter = currentFilter;
+    console.log(`[handleNext] Navigation check: nextIndex=${nextIndex}, currentFilter='${currentFilter}', effectiveFilter='${effectiveFilter}', mergedCounts[effectiveFilter]=${mergedCounts[effectiveFilter]}, mergedCounts keys:`, Object.keys(mergedCounts));
+    if (nextIndex < mergedCounts[effectiveFilter]) {
       if (isMountedRef.current) {
         setCurrentIndex(nextIndex);
         setError(null);
@@ -28350,17 +29853,6 @@ var BottlenecksContent = ({
       player.pause();
     }
   };
-  const mappedCounts = React19.useMemo(() => {
-    const counts = { ...clipCounts };
-    counts.lowValue = counts.low_value || counts.lowValue || 0;
-    counts.bestCycleTimes = counts.best_cycle_time || counts.bestCycleTimes || 0;
-    counts.worstCycleTimes = counts.worst_cycle_time || counts.worstCycleTimes || 0;
-    counts.longCycleTimes = counts.long_cycle_time || counts.longCycleTimes || 0;
-    counts.cycleCompletions = counts.cycle_completion || counts.cycleCompletion || 0;
-    counts.sopDeviations = counts.missing_quality_check || counts.sopDeviations || 0;
-    counts.bottlenecks = counts.bottleneck || counts.bottlenecks || 0;
-    return counts;
-  }, [clipCounts]);
   const getClipTypeLabel = (video) => {
     if (!video) return "";
     switch (video.type) {
@@ -28383,33 +29875,6 @@ var BottlenecksContent = ({
         return "";
     }
   };
-  const getColorClasses = (color2) => {
-    const colorMap = {
-      purple: { text: "text-purple-500", bg: "bg-purple-500", dot: "bg-purple-500" },
-      green: { text: "text-green-600", bg: "bg-green-600", dot: "bg-green-600" },
-      red: { text: "text-red-700", bg: "bg-red-700", dot: "bg-red-700" },
-      "red-dark": { text: "text-red-500", bg: "bg-red-500", dot: "bg-red-500" },
-      blue: { text: "text-blue-600", bg: "bg-blue-600", dot: "bg-blue-600" },
-      orange: { text: "text-orange-600", bg: "bg-orange-600", dot: "bg-orange-600" },
-      yellow: { text: "text-yellow-600", bg: "bg-yellow-600", dot: "bg-yellow-600" },
-      teal: { text: "text-teal-600", bg: "bg-teal-600", dot: "bg-teal-600" },
-      amber: { text: "text-amber-600", bg: "bg-amber-600", dot: "bg-amber-600" },
-      gray: { text: "text-gray-600", bg: "bg-gray-600", dot: "bg-gray-600" }
-    };
-    return colorMap[color2] || colorMap.gray;
-  };
-  const formatTimeOnly = (time2) => {
-    if (!time2) return "";
-    try {
-      const [hours, minutes] = time2.split(":");
-      const hour = parseInt(hours);
-      const ampm = hour >= 12 ? "PM" : "AM";
-      const displayHour = hour % 12 || 12;
-      return `${displayHour}:${minutes} ${ampm}`;
-    } catch {
-      return time2;
-    }
-  };
   if (!dashboardConfig?.s3Config) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
@@ -28417,202 +29882,80 @@ var BottlenecksContent = ({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 max-w-md", children: "S3 configuration is required to load video clips. Please check your dashboard configuration." })
     ] });
   }
-  if (isLoading && allVideos.length === 0 && Object.keys(clipCounts).length === 0) {
+  if ((isLoading || clipTypesLoading) && allVideos.length === 0 && Object.keys(mergedCounts).length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow p-4 flex items-center justify-center h-[calc(100vh-12rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
   }
-  if (error) {
+  if (error || clipTypesError) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-red-700 mb-1", children: "Error Loading Clips" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 max-w-md", children: error })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 max-w-md", children: error || clipTypesError })
     ] });
   }
-  const categoriesToShow = sopCategories && sopCategories.length > 0 ? sopCategories : [
-    // Default hardcoded categories if no configuration
-    { id: "low_value", label: "Idle Moments", color: "purple", subtitle: "Idle time detected" },
-    { id: "best_cycle_time", label: "Best Cycle Time", color: "green", subtitle: "Fastest cycle today" },
-    { id: "worst_cycle_time", label: "Worst Cycle Time", color: "red", subtitle: "Slowest cycle today" },
-    { id: "long_cycle_time", label: "Long Cycle Time", color: "red-dark", subtitle: "Above standard cycle times" },
-    { id: "cycle_completion", label: "Cycle Completions", color: "blue", subtitle: "Completed production cycles" }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4 h-[calc(100vh-12rem)]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid grid-cols-1 sm:grid-cols-2 ${categoriesToShow.length <= 5 ? "lg:grid-cols-5" : "lg:grid-cols-6"} gap-3 mb-4`, children: categoriesToShow.map((category) => {
-      const colorClasses = getColorClasses(category.color);
-      const count = mappedCounts[category.id] || 0;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        Card2,
-        {
-          onClick: () => {
-            updateActiveFilter(category.id);
-            trackCoreEvent(`${category.label} Filter Clicked`, {
-              workspaceId,
-              workspaceName,
-              date,
-              filterType: category.id,
-              clipCount: count
-            });
-          },
-          className: `bg-white shadow-sm cursor-pointer transition-all duration-200 hover:bg-gray-50 ${activeFilter === category.id ? "bg-blue-50 shadow-md ring-1 ring-blue-200" : ""}`,
-          "aria-label": `Filter by ${category.label} (${count} clips)`,
-          role: "button",
-          tabIndex: 0,
-          onKeyDown: (e) => e.key === "Enter" && updateActiveFilter(category.id),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: `text-lg ${activeFilter === category.id ? "text-blue-600" : ""}`, children: category.label }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-3xl font-bold ${colorClasses.text}`, children: count }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-2 w-2 rounded-full ${colorClasses.dot} mr-1.5` }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: category.subtitle || category.description || category.label })
-              ] })
-            ] }) })
-          ]
-        },
-        category.id
-      );
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden", style: { height: "calc(100% - 8.5rem)" }, children: [
+  const categoriesToShow = clipTypes.length > 0 ? clipTypes : [];
+  console.log("[BottlenecksContent] Categories to show:", {
+    categoriesToShow,
+    categoriesToShowLength: categoriesToShow?.length,
+    firstCategory: categoriesToShow?.[0],
+    clipTypesLength: clipTypes?.length,
+    clipTypesError,
+    mergedCounts
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4 h-[calc(100vh-12rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-4 h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 lg:flex-[3]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-800", children: (() => {
           if (activeFilter === "all") {
-            return `All Clips (${mappedCounts.total || 0})`;
+            return `All Clips (${mergedCounts.total || 0})`;
           }
-          const activeCategory = categoriesToShow.find((cat) => cat.id === activeFilter);
+          const activeCategory = categoriesToShow.find((cat) => cat.type === activeFilter);
           if (activeCategory) {
-            return `${activeCategory.label} (${mappedCounts[activeCategory.id] || 0})`;
+            return `${activeCategory.label} (${mergedCounts[activeCategory.type] || 0})`;
           }
-          return activeFilter === "low_value" ? `Idle Moments (${mappedCounts.lowValue || 0})` : activeFilter === "best_cycle_time" ? `Best Cycle Time (${mappedCounts.bestCycleTimes || 0})` : activeFilter === "worst_cycle_time" ? `Worst Cycle Time (${mappedCounts.worstCycleTimes || 0})` : activeFilter === "long_cycle_time" ? `Long Cycle Time (${mappedCounts.longCycleTimes || 0})` : activeFilter === "cycle_completion" ? `Cycle Completions (${mappedCounts.cycleCompletions || 0})` : `All Clips (${mappedCounts.total || 0})`;
+          return `${activeFilter.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())} (${mergedCounts[activeFilter] || 0})`;
         })() }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: timestampFilterRef, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => setShowTimestampFilter(!showTimestampFilter),
-                className: `p-2 rounded-lg transition-all ${timestampStart || timestampEnd ? "bg-blue-50 text-blue-600 hover:bg-blue-100" : "text-gray-600 hover:bg-gray-100"}`,
-                "aria-label": "Filter by time",
-                title: "Filter by time",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-5 w-5" })
-              }
-            ),
-            showTimestampFilter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border border-gray-200 p-4 z-20", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Filter by Time" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Start Time" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TimePickerDropdown,
-                    {
-                      value: timestampStart,
-                      onChange: (value) => setTimestampStart(value),
-                      placeholder: "Select start time",
-                      className: "w-full text-sm"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "End Time" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TimePickerDropdown,
-                    {
-                      value: timestampEnd,
-                      onChange: (value) => setTimestampEnd(value),
-                      placeholder: "Select end time",
-                      className: "w-full text-sm"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between pt-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      onClick: () => {
-                        setTimestampStart("");
-                        setTimestampEnd("");
-                        setShowTimestampFilter(false);
-                      },
-                      className: "px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 transition-colors",
-                      children: "Clear"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      onClick: () => {
-                        setShowTimestampFilter(false);
-                        loadFirstVideoForCategory();
-                      },
-                      className: "px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors",
-                      children: "Apply Filter"
-                    }
-                  )
-                ] })
-              ] })
-            ] })
-          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: handlePrevious,
-              disabled: currentIndex === 0 || clipCounts[activeFilter] === 0,
-              className: `p-2 rounded-full transition-colors ${currentIndex === 0 || clipCounts[activeFilter] === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
+              disabled: currentIndex === 0 || (mergedCounts[activeFilter] || 0) === 0,
+              className: `p-2 rounded-full transition-colors ${currentIndex === 0 || (mergedCounts[activeFilter] || 0) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
               "aria-label": "Previous video",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: clipCounts[activeFilter] > 0 ? `${currentIndex + 1} / ${clipCounts[activeFilter]}` : "0 / 0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: (mergedCounts[activeFilter] || 0) > 0 ? `${currentIndex + 1} / ${mergedCounts[activeFilter]}` : "0 / 0" }),
             error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-red-600 font-medium", children: error })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: handleNext,
-              disabled: currentIndex >= clipCounts[activeFilter] - 1 || clipCounts[activeFilter] === 0,
-              className: `p-2 rounded-full transition-colors ${currentIndex >= clipCounts[activeFilter] - 1 || clipCounts[activeFilter] === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
+              disabled: currentIndex >= (mergedCounts[activeFilter] || 0) - 1 || (mergedCounts[activeFilter] || 0) === 0,
+              className: `p-2 rounded-full transition-colors ${currentIndex >= (mergedCounts[activeFilter] || 0) - 1 || (mergedCounts[activeFilter] || 0) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
               "aria-label": "Next video",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-5 w-5" })
             }
           )
         ] })
       ] }) }),
-      (timestampStart || timestampEnd) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 bg-blue-50 border-b border-blue-100 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 text-sm text-blue-700", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            "Filtered by time: ",
-            timestampStart ? formatTimeOnly(timestampStart) : "Any",
-            " - ",
-            timestampEnd ? formatTimeOnly(timestampEnd) : "Any"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => {
-              setTimestampStart("");
-              setTimestampEnd("");
-              loadFirstVideoForCategory();
-            },
-            className: "text-sm text-blue-600 hover:text-blue-800 transition-colors",
-            children: "Clear filter"
-          }
-        )
-      ] }),
       /* Priority 1: Show loading if initial load hasn't completed yet */
       isLoading && !hasInitialLoad ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading videos..." }) }) }) }) : (
           /* Priority 3: Show loading if navigating and current video not available */
-          isNavigating || currentIndex >= filteredVideos.length && currentIndex < clipCounts[activeFilter] ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }) }) }) : (
+          isNavigating || currentIndex >= filteredVideos.length && currentIndex < (mergedCounts[activeFilter] || 0) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full group", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                VideoPlayer,
+                CroppedVideoPlayer,
                 {
                   ref: videoRef,
                   src: currentVideo.src,
                   className: "w-full h-full",
+                  crop: workspaceCrop?.crop || null,
                   autoplay: true,
                   playsInline: true,
                   loop: false,
@@ -28666,7 +30009,7 @@ var BottlenecksContent = ({
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" ? "bg-purple-400" : currentVideo.type === "best_cycle_time" ? "bg-green-600" : currentVideo.type === "worst_cycle_time" ? "bg-red-700" : currentVideo.type === "cycle_completion" ? "bg-blue-600" : "bg-red-500"} mr-2 animate-pulse` }),
                 (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "opacity-90 font-mono bg-black/30 px-2 py-0.5 rounded", children: [
                   "Cycle time: ",
-                  (currentVideo.cycle_time_seconds / 20).toFixed(1),
+                  currentVideo.cycle_time_seconds.toFixed(1),
                   "s"
                 ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
@@ -28703,9 +30046,8 @@ var BottlenecksContent = ({
                     max: duration || 0,
                     value: currentTime,
                     onChange: (e) => {
-                      const player = videoRef.current?.player;
-                      if (player) {
-                        player.currentTime(Number(e.target.value));
+                      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",
@@ -28719,13 +30061,13 @@ var BottlenecksContent = ({
               ] }) })
             ] }) }) }) : (
               /* Priority 5: Show "no clips found" only if we have counts and there are truly no clips for workspace */
-              hasInitialLoad && Object.keys(clipCounts).length > 0 && Object.values(clipCounts).every((count) => count === 0) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
+              hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
                 /* @__PURE__ */ jsxRuntime.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 && clipCounts[activeFilter] === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
+                hasInitialLoad && (mergedCounts[activeFilter] || 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
                   /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Matching Clips" }),
                   /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500", children: "There are no clips matching the selected filter." })
@@ -28738,8 +30080,46 @@ var BottlenecksContent = ({
           )
         )
       )
-    ] })
-  ] });
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 lg:flex-[1] lg:min-w-[280px] lg:max-w-[320px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      FileManagerFilters,
+      {
+        categories: categoriesToShow.map((cat) => ({
+          ...cat,
+          id: cat.type
+          // Map type to id for compatibility with FileManagerFilters
+        })),
+        videos: allVideos || [],
+        activeFilter,
+        currentVideoId: currentVideo?.id,
+        counts: mergedCounts,
+        onFilterChange: (filterId) => {
+          updateActiveFilter(filterId);
+          const category = categoriesToShow.find((cat) => cat.type === filterId);
+          if (category) {
+            trackCoreEvent(`${category.label} Filter Clicked`, {
+              workspaceId,
+              workspaceName,
+              date,
+              filterType: filterId,
+              clipCount: mergedCounts[filterId] || 0
+            });
+          }
+        },
+        onVideoSelect: (videoIndex) => {
+          setCurrentIndex(videoIndex);
+          const selectedVideo = allVideos?.[videoIndex];
+          if (selectedVideo) {
+            const videoCategory = categoriesToShow.find((cat) => cat.type === selectedVideo.type);
+            if (videoCategory && activeFilter !== videoCategory.type) {
+              updateActiveFilter(videoCategory.type);
+            }
+          }
+        },
+        className: "h-full"
+      }
+    ) })
+  ] }) });
 };
 var getEfficiencyColor = (efficiency) => {
   if (efficiency >= 80) {
@@ -30368,6 +31748,17 @@ var SideNavBar = React19.memo(({
     });
     onMobileMenuClose?.();
   }, [navigate, onMobileMenuClose]);
+  const handleSupervisorManagementClick = React19.useCallback(() => {
+    navigate("/supervisor-management", {
+      trackingEvent: {
+        name: "Supervisor Management Page Clicked",
+        properties: {
+          source: "side_nav"
+        }
+      }
+    });
+    onMobileMenuClose?.();
+  }, [navigate, onMobileMenuClose]);
   const handleAIAgentClick = React19.useCallback(() => {
     navigate("/ai-agent", {
       trackingEvent: {
@@ -30432,6 +31823,7 @@ var SideNavBar = React19.memo(({
   const kpisButtonClasses = React19.useMemo(() => getButtonClasses("/kpis"), [getButtonClasses, pathname]);
   const targetsButtonClasses = React19.useMemo(() => getButtonClasses("/targets"), [getButtonClasses, pathname]);
   const shiftsButtonClasses = React19.useMemo(() => getButtonClasses("/shifts"), [getButtonClasses, pathname]);
+  const supervisorManagementButtonClasses = React19.useMemo(() => getButtonClasses("/supervisor-management"), [getButtonClasses, pathname]);
   const aiAgentButtonClasses = React19.useMemo(() => getButtonClasses("/ai-agent"), [getButtonClasses, pathname]);
   const profileButtonClasses = React19.useMemo(() => getButtonClasses("/profile"), [getButtonClasses, pathname]);
   const helpButtonClasses = React19.useMemo(() => getButtonClasses("/help"), [getButtonClasses, pathname]);
@@ -30537,7 +31929,22 @@ var SideNavBar = React19.memo(({
             ]
           }
         ),
-        skuEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleSupervisorManagementClick,
+            className: supervisorManagementButtonClasses,
+            "aria-label": "Supervisor Management",
+            tabIndex: 0,
+            role: "tab",
+            "aria-selected": pathname === "/supervisor-management" || pathname.startsWith("/supervisor-management/"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.UsersIcon, { className: "w-5 h-5 mb-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Supervisors" })
+            ]
+          }
+        ),
+        skuEnabled && true && /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: handleSKUsClick,
@@ -30563,7 +31970,10 @@ var SideNavBar = React19.memo(({
             "aria-selected": pathname === "/ai-agent" || pathname.startsWith("/ai-agent/"),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { className: "w-5 h-5 mb-1" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Axel" })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Axel" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px] px-1.5 py-0.5 bg-orange-100 text-orange-600 rounded-full font-medium leading-none mt-0.5", children: "BETA" })
+              ] })
             ]
           }
         ),
@@ -30697,7 +32107,19 @@ var SideNavBar = React19.memo(({
             ]
           }
         ),
-        skuEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleSupervisorManagementClick),
+            className: getMobileButtonClass("/supervisor-management"),
+            "aria-label": "Supervisor Management",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.UsersIcon, { className: getIconClass("/supervisor-management") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Supervisors" })
+            ]
+          }
+        ),
+        skuEnabled && true && /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             onClick: handleMobileNavClick(handleSKUsClick),
@@ -30717,7 +32139,10 @@ var SideNavBar = React19.memo(({
             "aria-label": "AI Manufacturing Expert",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { className: getIconClass("/ai-agent") }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Axel AI" })
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Axel AI" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs px-2 py-0.5 bg-orange-100 text-orange-600 rounded-full font-medium leading-none mt-1 self-start", children: "BETA" })
+              ] })
             ]
           }
         ),
@@ -31236,6 +32661,1205 @@ var SingleVideoStream = ({
   );
 };
 var SingleVideoStream_default = SingleVideoStream;
+var SupervisorDropdown = ({
+  selectedSupervisor,
+  availableSupervisors,
+  onSelect,
+  className = "",
+  disabled = false,
+  placeholder = "Select Supervisor"
+}) => {
+  console.log(`[SupervisorDropdown] Rendered with ${availableSupervisors.length} available supervisors:`, availableSupervisors.map((s) => ({ id: s.id, name: s.name })));
+  const [isOpen, setIsOpen] = React19.useState(false);
+  const [searchTerm, setSearchTerm] = React19.useState("");
+  const [dropdownPosition, setDropdownPosition] = React19.useState({ top: 0, left: 0, width: 0 });
+  const dropdownRef = React19.useRef(null);
+  const buttonRef = React19.useRef(null);
+  const inputRef = React19.useRef(null);
+  const filteredSupervisors = availableSupervisors.filter(
+    (supervisor) => supervisor.name.toLowerCase().includes(searchTerm.toLowerCase()) || supervisor.email && supervisor.email.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  const calculatePosition = () => {
+    if (buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDropdownPosition({
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    }
+  };
+  React19.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSearchTerm("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleSelect = (supervisor) => {
+    onSelect(supervisor);
+    setIsOpen(false);
+    setSearchTerm("");
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      setIsOpen(false);
+      setSearchTerm("");
+    }
+  };
+  const handleToggle = () => {
+    if (!disabled) {
+      if (!isOpen) {
+        calculatePosition();
+      }
+      setIsOpen(!isOpen);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        onClick: handleToggle,
+        className: cn(
+          "w-full flex items-center justify-between px-3 py-2 text-left bg-white border rounded-md shadow-sm transition-colors",
+          disabled ? "bg-gray-100 cursor-not-allowed border-gray-200 text-gray-400" : "hover:bg-gray-50 cursor-pointer border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+          isOpen && !disabled && "ring-2 ring-blue-500 border-blue-500"
+        ),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-4 h-4 text-gray-400 mr-2 flex-shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+              "truncate",
+              selectedSupervisor ? "text-gray-900" : "text-gray-500"
+            ), children: selectedSupervisor ? selectedSupervisor.name : placeholder })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn(
+            "w-4 h-4 text-gray-400 transition-transform flex-shrink-0 ml-2",
+            isOpen ? "rotate-180" : ""
+          ) })
+        ]
+      }
+    ),
+    isOpen && !disabled && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: dropdownRef,
+          className: "fixed z-50 bg-white border border-gray-300 rounded-md shadow-lg",
+          style: {
+            top: dropdownPosition.top,
+            left: dropdownPosition.left,
+            width: dropdownPosition.width,
+            minWidth: "200px"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                placeholder: "Search supervisors...",
+                value: searchTerm,
+                onChange: (e) => setSearchTerm(e.target.value),
+                onKeyDown: handleKeyDown,
+                className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500",
+                autoFocus: true
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-60 overflow-y-auto", children: [
+              selectedSupervisor && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleSelect(null),
+                    className: "w-full px-3 py-2 text-left text-sm hover:bg-gray-100 focus:outline-none focus:bg-gray-100 flex items-center text-red-600",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 mr-2" }),
+                      " ",
+                      "Clear Assignment"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-gray-200" })
+              ] }),
+              filteredSupervisors.length > 0 ? filteredSupervisors.map((supervisor) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleSelect(supervisor),
+                  className: cn(
+                    "w-full px-3 py-2 text-left text-sm hover:bg-gray-100 focus:outline-none focus:bg-gray-100 flex items-center justify-between",
+                    selectedSupervisor?.id === supervisor.id && "bg-blue-50 text-blue-700"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-4 h-4 text-gray-400 mr-2 flex-shrink-0" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium truncate", children: supervisor.name }),
+                        supervisor.email && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 truncate", children: supervisor.email })
+                      ] })
+                    ] }),
+                    selectedSupervisor?.id === supervisor.id && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-blue-600 flex-shrink-0" })
+                  ]
+                },
+                supervisor.id
+              )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: searchTerm ? "No supervisors found" : "No supervisors available" })
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+var SupervisorDropdown_default = SupervisorDropdown;
+
+// src/lib/hooks/useFirstTimeLogin.ts
+var useFirstTimeLogin = () => {
+  const { user, markFirstLoginCompleted } = useAuth();
+  const hasCompletedFirstLogin = user?.first_login_completed ?? false;
+  const needsOnboarding = user ? !hasCompletedFirstLogin : false;
+  const completeFirstLogin = async () => {
+    return await markFirstLoginCompleted();
+  };
+  return {
+    isFirstTimeLogin: !hasCompletedFirstLogin,
+    // Simple boolean check
+    hasCompletedFirstLogin,
+    needsOnboarding,
+    completeFirstLogin,
+    user
+  };
+};
+var SimpleOnboardingPopup = ({
+  onComplete,
+  isCompleting = false
+}) => {
+  const [currentStep, setCurrentStep] = React19.useState(0);
+  const steps = [
+    {
+      title: "Welcome to Optifye Dashboard! \u{1F389}",
+      content: "We're excited to have you here. This dashboard helps you monitor and optimize your factory operations in real-time.",
+      icon: "\u{1F44B}"
+    },
+    {
+      title: "Real-Time Monitoring",
+      content: "Track your production lines, monitor efficiency, and get instant alerts about any issues.",
+      icon: "\u{1F4CA}"
+    },
+    {
+      title: "Data-Driven Insights",
+      content: "Make informed decisions with comprehensive analytics and historical data at your fingertips.",
+      icon: "\u{1F4A1}"
+    }
+  ];
+  const handleNext = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      onComplete();
+    }
+  };
+  const handleSkip = () => {
+    onComplete();
+  };
+  const currentStepData = steps[currentStep];
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-[9998] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-2xl max-w-md w-full mx-4 relative z-[9999] transform transition-all duration-300 scale-95 animate-pulse", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: handleSkip,
+        className: "absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors",
+        disabled: isCompleting,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-5xl mb-4 text-center", children: currentStepData.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-4 text-center", children: currentStepData.title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 text-center mb-8", children: currentStepData.content }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center space-x-2 mb-6", children: steps.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `h-2 w-2 rounded-full transition-colors ${index === currentStep ? "bg-blue-600" : "bg-gray-300"}`
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleSkip,
+            className: "text-gray-500 hover:text-gray-700 text-sm transition-colors",
+            disabled: isCompleting,
+            children: "Skip tour"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleNext,
+            disabled: isCompleting,
+            className: "bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+            children: isCompleting ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+              ] }),
+              "Loading..."
+            ] }) : currentStep === steps.length - 1 ? "Get Started" : "Next"
+          }
+        )
+      ] })
+    ] })
+  ] }) }) });
+};
+var MinimalOnboardingPopup = ({
+  onComplete,
+  isCompleting = false
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-[9998] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg shadow-2xl max-w-sm w-full mx-4 relative z-[9999]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-5xl mb-4", children: "\u{1F389}" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-gray-900 mb-3", children: "Welcome to Optifye!" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 mb-6", children: "Your dashboard is ready. Let's get started!" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onComplete,
+        disabled: isCompleting,
+        className: "w-full bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+        children: isCompleting ? "Loading..." : "Get Started"
+      }
+    )
+  ] }) }) }) });
+};
+var onboardingSteps = [
+  {
+    id: "welcome",
+    title: "Welcome to Optifye.ai \u{1F44B}",
+    description: "Let's take a quick interactive tour to help you master our intelligent manufacturing monitoring platform. You'll be able to interact with the dashboard as we guide you.",
+    position: "center",
+    nextTrigger: "button"
+  },
+  {
+    id: "live-streams",
+    title: "Live Manufacturing Streams",
+    description: "These are real-time video feeds from your production lines. Each stream shows the current efficiency with color-coded overlays.",
+    target: '.workspace-grid, [class*="workspace-grid"], [class*="grid"], [class*="workspace-container"]',
+    position: "auto",
+    spotlight: true,
+    allowInteraction: false,
+    nextTrigger: "button"
+  },
+  {
+    id: "efficiency-legend",
+    title: "Understanding Efficiency Colors",
+    description: "Green (80-100%): Optimal performance\nYellow (70-79%): Needs attention\nRed (<70%): Critical issues\nFlashing red (<50%): Immediate action required",
+    target: '[class*="efficiency"], [class*="legend"], [class*="indicator"]',
+    position: "auto",
+    spotlight: true,
+    allowInteraction: false,
+    nextTrigger: "button"
+  },
+  {
+    id: "click-workspace",
+    title: "Dive Into a Workspace",
+    description: "Click on any video stream to explore detailed performance metrics for that production line.",
+    target: '.workspace-card, [class*="workspace-item"], [class*="workspace-card"], [class*="video-card"]',
+    actionTarget: '.workspace-card, [class*="workspace-item"], [class*="workspace-card"], [class*="video-card"]',
+    position: "auto",
+    action: "click",
+    spotlight: true,
+    allowInteraction: true,
+    nextTrigger: "action",
+    waitForPath: "/workspace"
+  },
+  {
+    id: "workspace-metrics",
+    title: "Real-Time Performance Dashboard",
+    description: "Excellent! Here you can monitor OEE (Overall Equipment Effectiveness), production rates, quality metrics, and identify bottlenecks in real-time.",
+    target: '[class*="metrics"], [class*="dashboard-content"], [class*="workspace-detail"], main',
+    position: "auto",
+    spotlight: true,
+    allowInteraction: false,
+    nextTrigger: "button"
+  },
+  {
+    id: "navigate-back",
+    title: "Navigate Back Home",
+    description: "Click on the Home tab in the sidebar to return to the main dashboard.",
+    target: '[data-nav-item="home"], [href="/"], nav a:has-text("Home"), nav button:has-text("Home"), tab:has-text("Home")',
+    actionTarget: '[data-nav-item="home"], [href="/"], nav a:has-text("Home"), nav button:has-text("Home"), tab:has-text("Home")',
+    position: "right",
+    action: "click",
+    spotlight: true,
+    allowInteraction: true,
+    nextTrigger: "action",
+    waitForPath: "/"
+  },
+  {
+    id: "complete",
+    title: "\u{1F389} Tour Complete!",
+    description: "You're all set to optimize your manufacturing operations with Optifye.ai. Explore the platform to discover more powerful features like Clips, Targets, and AI insights.",
+    position: "center",
+    nextTrigger: "button"
+  }
+];
+var InteractiveOnboardingTour = ({
+  isOpen,
+  onComplete,
+  onSkip
+}) => {
+  const [currentStep, setCurrentStep] = React19.useState(0);
+  const [isTransitioning, setIsTransitioning] = React19.useState(false);
+  const router$1 = router.useRouter();
+  const step = onboardingSteps[currentStep];
+  const [targetElement, setTargetElement] = React19.useState(null);
+  const [tooltipPosition, setTooltipPosition] = React19.useState({});
+  const observerRef = React19.useRef(null);
+  const handleNext = React19.useCallback(() => {
+    if (isTransitioning) return;
+    setIsTransitioning(true);
+    setTimeout(() => {
+      if (currentStep < onboardingSteps.length - 1) {
+        setCurrentStep(currentStep + 1);
+      } else {
+        onComplete();
+      }
+      setIsTransitioning(false);
+    }, 200);
+  }, [currentStep, isTransitioning, onComplete]);
+  const handlePrevious = React19.useCallback(() => {
+    if (currentStep > 0 && !isTransitioning) {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setCurrentStep(currentStep - 1);
+        setIsTransitioning(false);
+      }, 200);
+    }
+  }, [currentStep, isTransitioning]);
+  React19.useEffect(() => {
+    if (!step?.target || !isOpen) {
+      setTargetElement(null);
+      return;
+    }
+    const findElement = () => {
+      const selectors = step.target.split(",").map((s) => s.trim());
+      for (const selector of selectors) {
+        try {
+          const element2 = document.querySelector(selector);
+          if (element2) {
+            setTargetElement(element2);
+            return element2;
+          }
+        } catch (e) {
+        }
+      }
+      return null;
+    };
+    const element = findElement();
+    if (!element && step.target) {
+      observerRef.current = new MutationObserver(() => {
+        const found = findElement();
+        if (found) {
+          observerRef.current?.disconnect();
+        }
+      });
+      observerRef.current.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [step, isOpen, router$1.pathname]);
+  React19.useEffect(() => {
+    if (!targetElement || step?.position === "center") {
+      setTooltipPosition({
+        position: "fixed",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        zIndex: 10002
+      });
+      return;
+    }
+    const updatePosition = () => {
+      const rect = targetElement.getBoundingClientRect();
+      const tooltipWidth = 420;
+      const tooltipHeight = 200;
+      const offset = 16;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      let position = {
+        position: "fixed",
+        zIndex: 10002,
+        maxWidth: "420px"
+      };
+      const spaceTop = rect.top;
+      const spaceBottom = viewportHeight - rect.bottom;
+      const spaceLeft = rect.left;
+      const spaceRight = viewportWidth - rect.right;
+      if (step.position === "auto") {
+        if (spaceBottom > tooltipHeight + offset && rect.left + tooltipWidth / 2 < viewportWidth) {
+          position.top = rect.bottom + offset;
+          position.left = Math.max(offset, Math.min(rect.left + rect.width / 2 - tooltipWidth / 2, viewportWidth - tooltipWidth - offset));
+        } else if (spaceTop > tooltipHeight + offset) {
+          position.bottom = viewportHeight - rect.top + offset;
+          position.left = Math.max(offset, Math.min(rect.left + rect.width / 2 - tooltipWidth / 2, viewportWidth - tooltipWidth - offset));
+        } else if (spaceRight > tooltipWidth + offset) {
+          position.left = rect.right + offset;
+          position.top = Math.max(offset, Math.min(rect.top + rect.height / 2 - tooltipHeight / 2, viewportHeight - tooltipHeight - offset));
+        } else if (spaceLeft > tooltipWidth + offset) {
+          position.right = viewportWidth - rect.left + offset;
+          position.top = Math.max(offset, Math.min(rect.top + rect.height / 2 - tooltipHeight / 2, viewportHeight - tooltipHeight - offset));
+        } else {
+          position.top = "50%";
+          position.left = "50%";
+          position.transform = "translate(-50%, -50%)";
+        }
+      } else {
+        switch (step.position) {
+          case "top":
+            position.bottom = viewportHeight - rect.top + offset;
+            position.left = rect.left + rect.width / 2 - tooltipWidth / 2;
+            break;
+          case "bottom":
+            position.top = rect.bottom + offset;
+            position.left = rect.left + rect.width / 2 - tooltipWidth / 2;
+            break;
+          case "left":
+            position.right = viewportWidth - rect.left + offset;
+            position.top = rect.top + rect.height / 2 - tooltipHeight / 2;
+            break;
+          case "right":
+            position.left = rect.right + offset;
+            position.top = rect.top + rect.height / 2 - tooltipHeight / 2;
+            break;
+        }
+      }
+      setTooltipPosition(position);
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [targetElement, step]);
+  React19.useEffect(() => {
+    if (!step || step.nextTrigger !== "action" || !isOpen) return;
+    let actionTimeout;
+    const handleAction = (e) => {
+      if (!step.actionTarget) return;
+      const target = e.target;
+      const selectors = step.actionTarget.split(",").map((s) => s.trim());
+      for (const selector of selectors) {
+        try {
+          if (target.matches(selector) || target.closest(selector)) {
+            if (step.waitForPath) {
+              actionTimeout = setTimeout(() => {
+                console.log("No navigation detected, progressing to next step");
+                handleNext();
+              }, 2e3);
+            } else {
+              setTimeout(() => handleNext(), 300);
+            }
+            return;
+          }
+        } catch {
+        }
+      }
+    };
+    if (step.action === "click") {
+      document.addEventListener("click", handleAction, true);
+      return () => {
+        document.removeEventListener("click", handleAction, true);
+        if (actionTimeout) clearTimeout(actionTimeout);
+      };
+    }
+  }, [step, isOpen, handleNext]);
+  React19.useEffect(() => {
+    if (!step?.waitForPath || step.nextTrigger !== "action") return;
+    const checkPath = (url) => {
+      const currentPath = url || router$1.asPath || router$1.pathname;
+      if (step.waitForPath === "/workspace" && (currentPath.includes("/workspace") || currentPath.includes("workspace-") || router$1.query?.workspace)) {
+        setTimeout(() => handleNext(), 800);
+        return true;
+      }
+      if (step.waitForPath && (currentPath === step.waitForPath || currentPath.includes(step.waitForPath))) {
+        setTimeout(() => handleNext(), 800);
+        return true;
+      }
+      return false;
+    };
+    if (checkPath()) return;
+    const handleRouteChange = (url) => {
+      checkPath(url);
+    };
+    router$1.events.on("routeChangeComplete", handleRouteChange);
+    router$1.events.on("routeChangeStart", handleRouteChange);
+    return () => {
+      router$1.events.off("routeChangeComplete", handleRouteChange);
+      router$1.events.off("routeChangeStart", handleRouteChange);
+    };
+  }, [step, router$1, handleNext]);
+  if (!isOpen || !step) return null;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !step.allowInteraction && /* @__PURE__ */ jsxRuntime.jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 bg-black/20",
+        style: { zIndex: 1e4 },
+        onClick: (e) => e.stopPropagation()
+      }
+    ),
+    step.spotlight && targetElement && /* @__PURE__ */ jsxRuntime.jsx(
+      Spotlight,
+      {
+        element: targetElement,
+        allowInteraction: step.allowInteraction,
+        showPulse: step.action === "click"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, scale: 0.95, y: 10 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.95, y: 10 },
+        transition: { duration: 0.2, ease: "easeOut" },
+        style: tooltipPosition,
+        className: "pointer-events-auto",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-800 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-850 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children: [...Array(onboardingSteps.length)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                motion.div,
+                {
+                  initial: false,
+                  animate: {
+                    width: i === currentStep ? 24 : 6,
+                    backgroundColor: i === currentStep ? "#3B82F6" : i < currentStep ? "#93C5FD" : "#E5E7EB"
+                  },
+                  className: "h-1.5 rounded-full transition-all duration-300"
+                },
+                i
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-600 dark:text-gray-400", children: [
+                currentStep + 1,
+                " of ",
+                onboardingSteps.length
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onSkip,
+                className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg",
+                "aria-label": "Close tour",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-3", children: step.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-300 leading-relaxed whitespace-pre-line", children: step.description }),
+            step.action === "click" && step.nextTrigger === "action" && /* @__PURE__ */ jsxRuntime.jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, y: 5 },
+                animate: { opacity: 1, y: 0 },
+                transition: { delay: 0.3 },
+                className: "mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800",
+                children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-blue-700 dark:text-blue-300 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MousePointer, { className: "w-4 h-4 animate-pulse" }),
+                  "Click the highlighted element to continue"
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onSkip,
+                className: "text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors",
+                children: "Skip tour"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              currentStep > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handlePrevious,
+                  disabled: isTransitioning,
+                  className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl transition-all disabled:opacity-50",
+                  children: "Previous"
+                }
+              ),
+              step.nextTrigger === "button" && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handleNext,
+                  disabled: isTransitioning,
+                  className: `px-5 py-2 text-sm font-semibold rounded-xl transition-all flex items-center gap-2 ${currentStep === onboardingSteps.length - 1 ? "bg-gradient-to-r from-green-500 to-emerald-600 text-white hover:from-green-600 hover:to-emerald-700 shadow-lg shadow-green-500/25" : "bg-gradient-to-r from-blue-500 to-indigo-600 text-white hover:from-blue-600 hover:to-indigo-700 shadow-lg shadow-blue-500/25"} disabled:opacity-50`,
+                  children: currentStep === onboardingSteps.length - 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    "Complete Tour",
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4" })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    "Next",
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "w-4 h-4" })
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      },
+      step.id
+    )
+  ] });
+  if (typeof window !== "undefined") {
+    return reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { children: isOpen && content }),
+      document.body
+    );
+  }
+  return null;
+};
+var Spotlight = ({ element, allowInteraction, showPulse }) => {
+  const [rect, setRect] = React19.useState(null);
+  React19.useEffect(() => {
+    const updateRect = () => {
+      setRect(element.getBoundingClientRect());
+    };
+    updateRect();
+    window.addEventListener("resize", updateRect);
+    window.addEventListener("scroll", updateRect, true);
+    const observer = new ResizeObserver(updateRect);
+    observer.observe(element);
+    return () => {
+      window.removeEventListener("resize", updateRect);
+      window.removeEventListener("scroll", updateRect, true);
+      observer.disconnect();
+    };
+  }, [element]);
+  if (!rect) return null;
+  const padding = 8;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !allowInteraction && /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: "fixed inset-0",
+        style: { zIndex: 10001, pointerEvents: "auto" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: "spotlight-mask", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                x: rect.left - padding,
+                y: rect.top - padding,
+                width: rect.width + padding * 2,
+                height: rect.height + padding * 2,
+                rx: "8",
+                fill: "black"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              fill: "black",
+              fillOpacity: "0.2",
+              mask: "url(#spotlight-mask)"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      motion.div,
+      {
+        className: "fixed pointer-events-none",
+        style: {
+          left: rect.left - padding,
+          top: rect.top - padding,
+          width: rect.width + padding * 2,
+          height: rect.height + padding * 2,
+          zIndex: 10001
+        },
+        initial: { opacity: 0, scale: 0.95 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.95 },
+        transition: { duration: 0.3, ease: "easeOut" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg ring-3 ring-blue-500 shadow-lg shadow-blue-500/30" }),
+          showPulse && allowInteraction && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg ring-4 ring-blue-400 ring-opacity-75 animate-pulse" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg bg-blue-500/5 animate-pulse" })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+var FirstTimeLoginHandler = ({
+  children,
+  onboardingComponent: OnboardingComponent = SimpleOnboardingPopup,
+  // Default to simple popup
+  enableAutoDetection = true
+}) => {
+  const {
+    needsOnboarding,
+    completeFirstLogin,
+    user
+  } = useFirstTimeLogin();
+  const {
+    showOnboarding: showTour,
+    setShowOnboarding: setShowTour,
+    completeOnboarding
+  } = useAuth();
+  const [showOnboarding, setShowOnboarding] = React19.useState(false);
+  const [isCompleting, setIsCompleting] = React19.useState(false);
+  const [hasChecked, setHasChecked] = React19.useState(false);
+  React19.useEffect(() => {
+    if (!hasChecked && user && enableAutoDetection) {
+      setHasChecked(true);
+      if (needsOnboarding) {
+        console.log("[FirstTimeLoginHandler] First-time login detected, showing onboarding tour");
+        setShowTour(true);
+      }
+    }
+  }, [user, needsOnboarding, enableAutoDetection, hasChecked, setShowTour]);
+  const handleOnboardingComplete = async () => {
+    setIsCompleting(true);
+    try {
+      const success = await completeFirstLogin();
+      if (success) {
+        console.log("[FirstTimeLoginHandler] First login marked as completed");
+        setShowOnboarding(false);
+      } else {
+        console.error("[FirstTimeLoginHandler] Failed to mark first login as completed");
+        setShowOnboarding(false);
+      }
+    } catch (error) {
+      console.error("[FirstTimeLoginHandler] Error completing first login:", error);
+      setShowOnboarding(false);
+    } finally {
+      setIsCompleting(false);
+    }
+  };
+  const handleTourComplete = async () => {
+    await completeOnboarding();
+  };
+  const handleTourSkip = () => {
+    setShowTour(false);
+    completeFirstLogin();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    showTour && /* @__PURE__ */ jsxRuntime.jsx(
+      InteractiveOnboardingTour,
+      {
+        isOpen: showTour,
+        onComplete: handleTourComplete,
+        onSkip: handleTourSkip
+      }
+    ),
+    showOnboarding && OnboardingComponent && /* @__PURE__ */ jsxRuntime.jsx(
+      OnboardingComponent,
+      {
+        onComplete: handleOnboardingComplete,
+        isCompleting
+      }
+    )
+  ] });
+};
+var FirstTimeLoginDebug = () => {
+  const {
+    isFirstTimeLogin,
+    hasCompletedFirstLogin,
+    needsOnboarding,
+    completeFirstLogin,
+    user
+  } = useFirstTimeLogin();
+  if (!user) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    position: "fixed",
+    top: 10,
+    right: 10,
+    background: "#f0f0f0",
+    padding: "10px",
+    border: "1px solid #ccc",
+    fontSize: "12px",
+    zIndex: 9999
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "First-Time Login Debug" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      "User ID: ",
+      user.id
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      "Email: ",
+      user.email
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      "Is First Time: ",
+      isFirstTimeLogin ? "\u2705" : "\u274C"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      "Completed: ",
+      hasCompletedFirstLogin ? "\u2705" : "\u274C"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      "Needs Onboarding: ",
+      needsOnboarding ? "\u2705" : "\u274C"
+    ] }),
+    needsOnboarding && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: completeFirstLogin,
+        style: { marginTop: "5px", padding: "5px" },
+        children: "Mark as Completed"
+      }
+    )
+  ] });
+};
+var onboardingSteps2 = [
+  {
+    id: "welcome",
+    title: "Welcome to Optifye.ai",
+    description: "Let's take a quick tour to help you get started with our intelligent manufacturing monitoring platform.",
+    position: "center"
+  },
+  {
+    id: "live-streams",
+    title: "Live Video Streams",
+    description: "These are live video streams of your manufacturing lines. Monitor your production in real-time from anywhere.",
+    target: ".workspace-grid",
+    position: "top",
+    highlightTarget: true
+  },
+  {
+    id: "efficiency-indicator",
+    title: "Efficiency Indicators",
+    description: "Notice the colored overlays on each video? They change based on real-time efficiency metrics - green for optimal, yellow for warning, and red for critical.",
+    target: ".efficiency-indicator",
+    position: "bottom",
+    highlightTarget: true
+  },
+  {
+    id: "click-workspace",
+    title: "Explore a Workspace",
+    description: "Click on any video stream to dive deeper into that workspace's performance metrics.",
+    target: ".workspace-item",
+    position: "center",
+    highlightTarget: true,
+    waitForNavigation: "/workspace/"
+  },
+  {
+    id: "workspace-metrics",
+    title: "Real-Time Efficiency Metrics",
+    description: "Great! These are the real-time efficiency metrics for the workspace you just selected. Track OEE, performance, and quality in real-time.",
+    target: ".metrics-dashboard",
+    position: "top",
+    highlightTarget: true
+  },
+  {
+    id: "clips-navigation",
+    title: "Explore Clips",
+    description: 'Now, click on "Clips" in the sidebar to see how you can diagnose issues and understand root causes.',
+    target: '[data-nav-item="clips"]',
+    position: "right",
+    highlightTarget: true,
+    waitForNavigation: "/clips"
+  },
+  {
+    id: "clips-explanation",
+    title: "Clips for Root Cause Analysis",
+    description: "Clips help you understand and diagnose the root cause of efficiency issues. Review recorded incidents, analyze patterns, and improve your processes.",
+    target: ".clips-container",
+    position: "top",
+    highlightTarget: true
+  },
+  {
+    id: "complete",
+    title: "You're All Set!",
+    description: "You've completed the tour! Start exploring Optifye.ai to optimize your manufacturing operations.",
+    position: "center"
+  }
+];
+var OnboardingTour = ({
+  isOpen,
+  onComplete,
+  onSkip
+}) => {
+  const [currentStep, setCurrentStep] = React19.useState(0);
+  const [isWaitingForNavigation, setIsWaitingForNavigation] = React19.useState(false);
+  const router$1 = router.useRouter();
+  const step = onboardingSteps2[currentStep];
+  React19.useEffect(() => {
+    if (!step?.waitForNavigation || !isWaitingForNavigation) return;
+    const handleRouteChange = (url) => {
+      if (step.waitForNavigation && url.includes(step.waitForNavigation)) {
+        setIsWaitingForNavigation(false);
+        handleNext();
+      }
+    };
+    router$1.events.on("routeChangeComplete", handleRouteChange);
+    return () => {
+      router$1.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [step, isWaitingForNavigation, router$1]);
+  const handleNext = React19.useCallback(() => {
+    const nextStep = onboardingSteps2[currentStep + 1];
+    if (step?.waitForNavigation && !isWaitingForNavigation) {
+      setIsWaitingForNavigation(true);
+      return;
+    }
+    if (currentStep < onboardingSteps2.length - 1) {
+      setCurrentStep(currentStep + 1);
+      if (nextStep?.target) {
+        setTimeout(() => {
+          const element = document.querySelector(nextStep.target);
+          if (element) {
+            element.scrollIntoView({ behavior: "smooth", block: "center" });
+          }
+        }, 100);
+      }
+    } else {
+      onComplete();
+    }
+  }, [currentStep, step, isWaitingForNavigation, onComplete]);
+  const handlePrevious = React19.useCallback(() => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+      setIsWaitingForNavigation(false);
+    }
+  }, [currentStep]);
+  const getPositionStyles = React19.useCallback((position) => {
+    const baseStyles = {
+      position: "fixed",
+      zIndex: 1e4
+    };
+    if (step?.target && position !== "center") {
+      const element = document.querySelector(step.target);
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        const tooltipWidth = 400;
+        const tooltipHeight = 200;
+        const offset = 20;
+        switch (position) {
+          case "top":
+            return {
+              ...baseStyles,
+              left: `${rect.left + rect.width / 2 - tooltipWidth / 2}px`,
+              bottom: `${window.innerHeight - rect.top + offset}px`
+            };
+          case "bottom":
+            return {
+              ...baseStyles,
+              left: `${rect.left + rect.width / 2 - tooltipWidth / 2}px`,
+              top: `${rect.bottom + offset}px`
+            };
+          case "left":
+            return {
+              ...baseStyles,
+              right: `${window.innerWidth - rect.left + offset}px`,
+              top: `${rect.top + rect.height / 2 - tooltipHeight / 2}px`
+            };
+          case "right":
+            return {
+              ...baseStyles,
+              left: `${rect.right + offset}px`,
+              top: `${rect.top + rect.height / 2 - tooltipHeight / 2}px`
+            };
+        }
+      }
+    }
+    return {
+      ...baseStyles,
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    };
+  }, [step]);
+  if (!isOpen || !step) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        className: "fixed inset-0 bg-black/60 backdrop-blur-sm z-[9998]",
+        onClick: (e) => e.stopPropagation()
+      }
+    ),
+    step.highlightTarget && step.target && /* @__PURE__ */ jsxRuntime.jsx(HighlightOverlay, { target: step.target }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, scale: 0.9 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.9 },
+        transition: { duration: 0.3, ease: "easeOut" },
+        style: getPositionStyles(step.position),
+        className: "w-[400px] max-w-[90vw]",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: [...Array(onboardingSteps2.length)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `h-1.5 transition-all duration-300 ${i === currentStep ? "w-6 bg-blue-600" : i < currentStep ? "w-1.5 bg-blue-400" : "w-1.5 bg-gray-300 dark:bg-gray-600"} rounded-full`
+                },
+                i
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+                currentStep + 1,
+                " / ",
+                onboardingSteps2.length
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onSkip,
+                className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: step.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 dark:text-gray-300 leading-relaxed", children: step.description }),
+            isWaitingForNavigation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-blue-700 dark:text-blue-300 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-2 h-2 bg-blue-600 rounded-full animate-pulse" }),
+              "Waiting for you to click..."
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 bg-gray-50 dark:bg-gray-900/50 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onSkip,
+                className: "text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors",
+                children: "Skip tour"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              currentStep > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handlePrevious,
+                  className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+                  children: "Previous"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handleNext,
+                  disabled: isWaitingForNavigation,
+                  className: `px-4 py-2 text-sm font-medium rounded-lg transition-all flex items-center gap-2 ${isWaitingForNavigation ? "bg-gray-100 text-gray-400 cursor-not-allowed" : currentStep === onboardingSteps2.length - 1 ? "bg-green-600 text-white hover:bg-green-700" : "bg-blue-600 text-white hover:bg-blue-700"}`,
+                  children: currentStep === onboardingSteps2.length - 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    "Complete",
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4" })
+                  ] }) : isWaitingForNavigation ? "Waiting..." : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    "Next",
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      },
+      step.id
+    )
+  ] }) });
+};
+var HighlightOverlay = ({ target }) => {
+  const [rect, setRect] = React19.useState(null);
+  React19.useEffect(() => {
+    const element = document.querySelector(target);
+    if (element) {
+      setRect(element.getBoundingClientRect());
+    }
+  }, [target]);
+  if (!rect) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      className: "fixed z-[9999] pointer-events-none",
+      style: {
+        left: rect.left - 8,
+        top: rect.top - 8,
+        width: rect.width + 16,
+        height: rect.height + 16
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg ring-4 ring-blue-500/50 ring-offset-4 ring-offset-transparent animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg bg-blue-500/10" })
+      ]
+    }
+  );
+};
+var OnboardingDemo = () => {
+  const [showTour, setShowTour] = React19.useState(false);
+  const handleComplete = () => {
+    setShowTour(false);
+    console.log("Onboarding tour completed");
+  };
+  const handleSkip = () => {
+    setShowTour(false);
+    console.log("Onboarding tour skipped");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setShowTour(true),
+        className: "fixed bottom-4 right-4 z-50 flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg shadow-lg hover:bg-blue-700 transition-colors",
+        title: "Start Onboarding Tour",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Start Tour" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InteractiveOnboardingTour,
+      {
+        isOpen: showTour,
+        onComplete: handleComplete,
+        onSkip: handleSkip
+      }
+    )
+  ] });
+};
 var ThreadSidebar = ({
   activeThreadId,
   onSelectThread,
@@ -34442,6 +37066,15 @@ var QualityOverview = React19.memo(({ lineInfo }) => {
   ] });
 });
 QualityOverview.displayName = "QualityOverview";
+var getSupervisorName = (lineId) => {
+  const supervisorMapping = {
+    // Add more mappings as needed
+    "default": "Vivaan Baid",
+    "factory": "Vivaan Baid"
+    // You can add specific line IDs here when you have real data
+  };
+  return supervisorMapping[lineId || "default"] || "Vivaan Baid";
+};
 var KPIDetailView = ({
   lineId,
   date: urlDate,
@@ -34931,9 +37564,15 @@ var KPIDetailView = ({
             "aria-label": "Navigate back to previous page"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center truncate", children: lineInfo?.line_name || "Line" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm: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__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center truncate", children: lineInfo?.line_name || "Line" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm: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__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-600 font-medium", children: [
+            "Supervisor: ",
+            getSupervisorName(lineInfo?.line_id)
+          ] })
         ] }) })
       ] }),
       (activeTab !== "monthly_history" || urlDate || urlShift) && metrics2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
@@ -35141,8 +37780,11 @@ var LineCard = ({ line, onClick }) => {
       onClick,
       className: "relative bg-white border border-gray-200/80 shadow-sm hover:shadow-lg \n                 rounded-xl p-4 sm:p-5 md:p-6 transition-all duration-200 cursor-pointer \n                 hover:scale-[1.01] active:scale-[0.99] group",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-4 sm:mb-5 md:mb-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 truncate", children: line.line_name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start gap-2 sm:gap-3 mb-4 sm:mb-5 md:mb-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 truncate", children: line.line_name }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 mt-1", children: "Supervisor: Vivaan" })
+          ] }),
           kpis && isOnTrack !== null && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs font-medium self-start sm:self-auto ${isOnTrack ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-red-100 text-red-700 border border-red-200"}`, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-2 h-2 rounded-full ${isOnTrack ? "bg-emerald-500" : "bg-red-500"} animate-pulse` }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: isOnTrack ? "On Track" : "Behind" })
@@ -35844,9 +38486,6 @@ var ProfileView = () => {
           id: user.id,
           email: user.email,
           full_name: profileData.full_name,
-          company: profileData.company,
-          phone: profileData.phone,
-          timezone: profileData.timezone,
           updated_at: (/* @__PURE__ */ new Date()).toISOString()
         });
         if (error2) throw error2;
@@ -35995,55 +38634,6 @@ var ProfileView = () => {
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-900", children: profileData.email }),
                 profileData.email_verified && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserCheck, { className: "h-4 w-4 text-green-500" })
               ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Company" }),
-              isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "text",
-                  value: profileData.company || "",
-                  onChange: (e) => setProfileData((prev) => ({ ...prev, company: e.target.value })),
-                  className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-900", children: profileData.company || "Not set" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Role" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-900", children: profileData.role || "Not set" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Phone" }),
-              isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "tel",
-                  value: profileData.phone || "",
-                  onChange: (e) => setProfileData((prev) => ({ ...prev, phone: e.target.value })),
-                  className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-900", children: profileData.phone || "Not set" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Timezone" }),
-              isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "select",
-                {
-                  value: profileData.timezone || "",
-                  onChange: (e) => setProfileData((prev) => ({ ...prev, timezone: e.target.value })),
-                  className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select timezone" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "UTC", children: "UTC" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "America/New_York", children: "Eastern Time" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "America/Chicago", children: "Central Time" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "America/Denver", children: "Mountain Time" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "America/Los_Angeles", children: "Pacific Time" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Asia/Kolkata", children: "India Standard Time" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Europe/London", children: "GMT" })
-                  ]
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-900", children: profileData.timezone || "Not set" })
             ] })
           ] }),
           isEditing && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "outline", onClick: handleSaveProfile, disabled: loading, children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -38626,10 +41216,6 @@ var TargetsView = ({
   }, [actionIds]);
   const handleSaveLine = React19.useCallback(async (lineId) => {
     console.log(`[handleSaveLine] Attempting to save line: ${lineId}`);
-    if (!canSaveTargets) {
-      sonner.toast.error("You do not have permission to save targets. Contact your administrator.");
-      return;
-    }
     const hardcodedUserId = "6bf6f271-1e55-4a95-9b89-1c3820b58739";
     const currentEffectiveUserId = hardcodedUserId;
     console.log(`[handleSaveLine] effectiveUserId: ${currentEffectiveUserId}`);
@@ -38906,6 +41492,13 @@ var WorkspaceDetailView = ({
   const [selectedMonth, setSelectedMonth] = React19.useState(today.getMonth());
   const [selectedYear, setSelectedYear] = React19.useState(today.getFullYear());
   const [selectedShift, setSelectedShift] = React19.useState("day");
+  React19.useEffect(() => {
+    if (parsedShiftId === 1) {
+      setSelectedShift("night");
+    } else if (parsedShiftId === 0) {
+      setSelectedShift("day");
+    }
+  }, [parsedShiftId]);
   const isHistoricView = Boolean(date && parsedShiftId !== void 0);
   const initialTab = getInitialTab(sourceType, defaultTab, fromMonthly, date);
   const [activeTab, setActiveTab] = React19.useState(initialTab);
@@ -39155,11 +41748,18 @@ var WorkspaceDetailView = ({
       }
       return;
     }
+    if (activeTab === "monthly_history") {
+      if (onNavigate) {
+        onNavigate("/");
+      }
+      return;
+    }
     if (date || shift) {
       setActiveTab("monthly_history");
       if (onNavigate) {
         const params = new URLSearchParams();
         params.set("fromMonthly", "true");
+        params.set("shift", selectedShift === "night" ? "1" : "0");
         if (effectiveLineId) {
           params.set("lineId", effectiveLineId);
         }
@@ -39171,6 +41771,7 @@ var WorkspaceDetailView = ({
         if (onNavigate) {
           const params = new URLSearchParams();
           params.set("fromMonthly", "true");
+          params.set("shift", selectedShift === "night" ? "1" : "0");
           if (effectiveLineId) {
             params.set("lineId", effectiveLineId);
           }
@@ -39269,7 +41870,7 @@ var WorkspaceDetailView = ({
                   BackButtonMinimal,
                   {
                     onClick: handleBackNavigation,
-                    text: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : date || shift ? "Back to Monthly History" : "Back",
+                    text: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : (date || shift) && activeTab !== "monthly_history" ? "Back to Monthly History" : "Back",
                     size: "sm",
                     "aria-label": "Navigate back to previous page"
                   }
@@ -39295,7 +41896,7 @@ var WorkspaceDetailView = ({
                 BackButtonMinimal,
                 {
                   onClick: handleBackNavigation,
-                  text: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : date || shift ? "Back to Monthly History" : "Back",
+                  text: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : (date || shift) && activeTab !== "monthly_history" ? "Back to Monthly History" : "Back",
                   size: "default",
                   "aria-label": "Navigate back to previous page"
                 }
@@ -39683,6 +42284,7 @@ var WorkspaceDetailView = ({
                       const params = new URLSearchParams();
                       params.set("date", selectedDate);
                       params.set("shift", selectedShift === "day" ? "0" : "1");
+                      params.set("fromMonthly", "true");
                       if (effectiveLineId) {
                         params.set("lineId", effectiveLineId);
                       }
@@ -40166,6 +42768,168 @@ var WorkspaceHealthView_default = withAuth(WorkspaceHealthView, {
   requireAuth: true
 });
 var AuthenticatedWorkspaceHealthView = WorkspaceHealthView;
+var SupervisorManagementView = ({
+  onNavigate,
+  onBack,
+  className = ""
+}) => {
+  const supabase = useSupabaseClient();
+  const entityConfig = useEntityConfig();
+  const companyId = entityConfig?.companyId;
+  const [data, setData] = React19.useState({
+    assignments: [],
+    allSupervisors: [],
+    loading: true,
+    error: void 0
+  });
+  const [savingAssignments, setSavingAssignments] = React19.useState(/* @__PURE__ */ new Set());
+  const loadData = React19.useCallback(async () => {
+    try {
+      setData((prev) => ({ ...prev, loading: true, error: void 0 }));
+      if (!companyId) {
+        throw new Error("Company ID is not configured");
+      }
+      if (!supabase) {
+        throw new Error("Supabase client is not available");
+      }
+      console.log(`[SupervisorManagementView] Loading data for companyId: ${companyId}`);
+      const supervisorService = createSupervisorService(supabase);
+      const realData = await supervisorService.getSupervisorManagementData(companyId);
+      console.log(`[SupervisorManagementView] Received data:`, {
+        assignments: realData.assignments.length,
+        allSupervisors: realData.allSupervisors.length,
+        firstAssignmentAvailableSupervisors: realData.assignments[0]?.availableSupervisors?.length || 0,
+        firstAssignmentAvailableSupervisorIds: realData.assignments[0]?.availableSupervisors?.map((s) => s.id) || []
+      });
+      setData(realData);
+    } catch (error) {
+      console.error("Error loading supervisor management data:", error);
+      setData((prev) => ({
+        ...prev,
+        loading: false,
+        error: error instanceof Error ? error.message : "Failed to load supervisor management data. Please try again."
+      }));
+    }
+  }, [supabase, companyId]);
+  React19.useEffect(() => {
+    loadData();
+  }, [loadData]);
+  const handleSupervisorChange = React19.useCallback(async (lineId, supervisor) => {
+    try {
+      setSavingAssignments((prev) => /* @__PURE__ */ new Set([...prev, lineId]));
+      if (!supabase) {
+        throw new Error("Supabase client is not available");
+      }
+      const supervisorService = createSupervisorService(supabase);
+      const success = await supervisorService.assignSupervisorToLine(lineId, supervisor?.id);
+      if (!success) {
+        throw new Error("Failed to update supervisor assignment");
+      }
+      setData((prev) => ({
+        ...prev,
+        assignments: prev.assignments.map(
+          (assignment) => assignment.lineId === lineId ? { ...assignment, currentSupervisor: supervisor || void 0 } : assignment
+        )
+      }));
+      const lineName = data.assignments.find((a) => a.lineId === lineId)?.lineName || "Line";
+      const message = supervisor ? `${supervisor.name} assigned to ${lineName}` : `Supervisor removed from ${lineName}`;
+      sonner.toast.success(message);
+    } catch (error) {
+      console.error("Error updating supervisor assignment:", error);
+      sonner.toast.error("Failed to update supervisor assignment. Please try again.");
+    } finally {
+      setSavingAssignments((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(lineId);
+        return newSet;
+      });
+    }
+  }, [data.assignments, supabase]);
+  const handleRefresh = React19.useCallback(() => {
+    loadData();
+  }, [loadData]);
+  const handleBack = React19.useCallback(() => {
+    if (onBack) {
+      onBack();
+    } else if (onNavigate) {
+      onNavigate("/");
+    }
+  }, [onBack, onNavigate]);
+  if (data.loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("min-h-screen bg-slate-50", className), children: /* @__PURE__ */ jsxRuntime.jsx(LoadingPage, { message: "Loading supervisor management..." }) });
+  }
+  if (data.error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("min-h-screen bg-slate-50", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyStateMessage,
+      {
+        iconType: lucideReact.AlertCircle,
+        title: "Failed to Load Data",
+        message: data.error,
+        actionButton: {
+          text: "Try Again",
+          onClick: handleRefresh,
+          className: "bg-blue-600 hover:bg-blue-700"
+        }
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+        BackButtonMinimal,
+        {
+          onClick: handleBack,
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center mt-2 sm:mt-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Supervisor Management" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-500 mt-0.5 sm:mt-1 text-center px-2 sm:px-0", children: "Manage supervisor assignments for production lines" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block absolute right-0 w-24", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleRefresh,
+          className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+          "aria-label": "Refresh data",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-5 w-5" })
+        }
+      ) }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 px-3 sm:px-4 md:px-5 lg:px-6 py-4 sm:py-6", children: data.assignments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyStateMessage,
+      {
+        iconType: lucideReact.Building2,
+        title: "No Lines Found",
+        message: "There are no production lines to manage supervisor assignments for."
+      }
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Line" }),
+        /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Assigned Supervisor" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: data.assignments.map((assignment) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-gray-50", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "h-4 w-4 text-gray-400 mr-2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900", children: assignment.lineName })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-4 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-xs", children: /* @__PURE__ */ jsxRuntime.jsx(
+          SupervisorDropdown,
+          {
+            selectedSupervisor: assignment.currentSupervisor,
+            availableSupervisors: assignment.availableSupervisors,
+            onSelect: (supervisor) => handleSupervisorChange(assignment.lineId, supervisor),
+            disabled: savingAssignments.has(assignment.lineId),
+            placeholder: "Select supervisor..."
+          }
+        ) }) })
+      ] }, assignment.lineId)) })
+    ] }) }) }) }) })
+  ] });
+};
+var SupervisorManagementView_default = SupervisorManagementView;
 var S3Service = class {
   constructor(config) {
     this.s3Client = null;
@@ -40648,6 +43412,7 @@ exports.CardHeader = CardHeader2;
 exports.CardTitle = CardTitle2;
 exports.CompactWorkspaceHealthCard = CompactWorkspaceHealthCard;
 exports.CongratulationsOverlay = CongratulationsOverlay;
+exports.CroppedVideoPlayer = CroppedVideoPlayer;
 exports.CycleTimeChart = CycleTimeChart;
 exports.CycleTimeOverTimeChart = CycleTimeOverTimeChart;
 exports.DEFAULT_ANALYTICS_CONFIG = DEFAULT_ANALYTICS_CONFIG;
@@ -40674,6 +43439,8 @@ exports.DetailedHealthStatus = DetailedHealthStatus;
 exports.EmptyStateMessage = EmptyStateMessage;
 exports.EncouragementOverlay = EncouragementOverlay;
 exports.FactoryView = FactoryView_default;
+exports.FirstTimeLoginDebug = FirstTimeLoginDebug;
+exports.FirstTimeLoginHandler = FirstTimeLoginHandler;
 exports.GaugeChart = GaugeChart;
 exports.GridComponentsPlaceholder = GridComponentsPlaceholder;
 exports.HamburgerButton = HamburgerButton;
@@ -40685,6 +43452,7 @@ exports.HomeView = HomeView_default;
 exports.HourlyOutputChart = HourlyOutputChart2;
 exports.ISTTimer = ISTTimer_default;
 exports.InlineEditableText = InlineEditableText;
+exports.InteractiveOnboardingTour = InteractiveOnboardingTour;
 exports.KPICard = KPICard;
 exports.KPIDetailView = KPIDetailView_default;
 exports.KPIGrid = KPIGrid;
@@ -40703,6 +43471,7 @@ exports.LineMonthlyPdfGenerator = LineMonthlyPdfGenerator;
 exports.LinePdfExportButton = LinePdfExportButton;
 exports.LinePdfGenerator = LinePdfGenerator;
 exports.LineWhatsAppShareButton = LineWhatsAppShareButton;
+exports.LinesService = LinesService;
 exports.LiveTimer = LiveTimer;
 exports.LoadingInline = LoadingInline;
 exports.LoadingOverlay = LoadingOverlay_default;
@@ -40713,7 +43482,10 @@ exports.LoginPage = LoginPage;
 exports.LoginView = LoginView_default;
 exports.MainLayout = MainLayout;
 exports.MetricCard = MetricCard_default;
+exports.MinimalOnboardingPopup = MinimalOnboardingPopup;
 exports.NoWorkspaceData = NoWorkspaceData;
+exports.OnboardingDemo = OnboardingDemo;
+exports.OnboardingTour = OnboardingTour;
 exports.OptifyeAgentClient = OptifyeAgentClient;
 exports.OptifyeLogoLoader = OptifyeLogoLoader_default;
 exports.OutputProgressChart = OutputProgressChart;
@@ -40744,11 +43516,15 @@ exports.SelectValue = SelectValue;
 exports.ShiftDisplay = ShiftDisplay_default;
 exports.ShiftsView = ShiftsView_default;
 exports.SideNavBar = SideNavBar;
+exports.SimpleOnboardingPopup = SimpleOnboardingPopup;
 exports.SingleVideoStream = SingleVideoStream_default;
 exports.Skeleton = Skeleton;
 exports.SubscriptionManager = SubscriptionManager;
 exports.SubscriptionManagerProvider = SubscriptionManagerProvider;
 exports.SupabaseProvider = SupabaseProvider;
+exports.SupervisorDropdown = SupervisorDropdown_default;
+exports.SupervisorManagementView = SupervisorManagementView_default;
+exports.SupervisorService = SupervisorService;
 exports.TargetWorkspaceGrid = TargetWorkspaceGrid;
 exports.TargetsView = TargetsView_default;
 exports.ThreadSidebar = ThreadSidebar;
@@ -40756,6 +43532,7 @@ exports.TicketHistory = TicketHistory_default;
 exports.TicketHistoryService = TicketHistoryService;
 exports.TimeDisplay = TimeDisplay_default;
 exports.TimePickerDropdown = TimePickerDropdown;
+exports.UserService = UserService;
 exports.VideoCard = VideoCard;
 exports.VideoGridView = VideoGridView;
 exports.VideoPlayer = VideoPlayer;
@@ -40789,9 +43566,12 @@ exports.clearS3VideoCache = clearS3VideoCache;
 exports.clearS3VideoFromCache = clearS3VideoFromCache;
 exports.clearWorkspaceDisplayNamesCache = clearWorkspaceDisplayNamesCache;
 exports.cn = cn;
+exports.createLinesService = createLinesService;
 exports.createStreamProxyHandler = createStreamProxyHandler;
 exports.createSupabaseClient = createSupabaseClient;
+exports.createSupervisorService = createSupervisorService;
 exports.createThrottledReload = createThrottledReload;
+exports.createUserService = createUserService;
 exports.dashboardService = dashboardService;
 exports.deleteThread = deleteThread;
 exports.forceRefreshWorkspaceDisplayNames = forceRefreshWorkspaceDisplayNames;
@@ -40851,6 +43631,7 @@ exports.isValidWorkspaceDetailedMetricsPayload = isValidWorkspaceDetailedMetrics
 exports.isValidWorkspaceMetricsPayload = isValidWorkspaceMetricsPayload;
 exports.isWorkspaceDisplayNamesLoaded = isWorkspaceDisplayNamesLoaded;
 exports.isWorkspaceDisplayNamesLoading = isWorkspaceDisplayNamesLoading;
+exports.linesService = linesService;
 exports.mergeWithDefaultConfig = mergeWithDefaultConfig;
 exports.migrateLegacyConfiguration = migrateLegacyConfiguration;
 exports.optifyeAgentClient = optifyeAgentClient;
@@ -40869,6 +43650,7 @@ exports.resetFailedUrl = resetFailedUrl;
 exports.resetSubscriptionManager = resetSubscriptionManager;
 exports.s3VideoPreloader = s3VideoPreloader;
 exports.shuffleArray = shuffleArray;
+exports.simulateApiDelay = simulateApiDelay;
 exports.skuService = skuService;
 exports.startCoreSessionRecording = startCoreSessionRecording;
 exports.stopCoreSessionRecording = stopCoreSessionRecording;
@@ -40879,6 +43661,7 @@ exports.toUrlFriendlyName = toUrlFriendlyName;
 exports.trackCoreEvent = trackCoreEvent;
 exports.trackCorePageView = trackCorePageView;
 exports.updateThreadTitle = updateThreadTitle;
+exports.useAccessControl = useAccessControl;
 exports.useActiveBreaks = useActiveBreaks;
 exports.useAllWorkspaceMetrics = useAllWorkspaceMetrics;
 exports.useAnalyticsConfig = useAnalyticsConfig;
@@ -40886,6 +43669,8 @@ exports.useAudioService = useAudioService;
 exports.useAuth = useAuth;
 exports.useAuthConfig = useAuthConfig;
 exports.useCanSaveTargets = useCanSaveTargets;
+exports.useClipTypes = useClipTypes;
+exports.useClipTypesWithCounts = useClipTypesWithCounts;
 exports.useComponentOverride = useComponentOverride;
 exports.useCustomConfig = useCustomConfig;
 exports.useDashboardConfig = useDashboardConfig;
@@ -40941,9 +43726,11 @@ exports.useWorkspaceHealthById = useWorkspaceHealthById;
 exports.useWorkspaceMetrics = useWorkspaceMetrics;
 exports.useWorkspaceNavigation = useWorkspaceNavigation;
 exports.useWorkspaceOperators = useWorkspaceOperators;
+exports.userService = userService;
 exports.videoPrefetchManager = videoPrefetchManager;
 exports.videoPreloader = videoPreloader;
 exports.whatsappService = whatsappService;
+exports.withAccessControl = withAccessControl;
 exports.withAuth = withAuth;
 exports.withRegistry = withRegistry;
 exports.workspaceHealthService = workspaceHealthService;