@optifye/dashboard-core 6.5.12 → 6.6.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import * as React19 from 'react';
-import React19__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, memo, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, forwardRef, Fragment as Fragment$1, createElement, Component } from 'react';
+import React19__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, memo, forwardRef, useImperativeHandle, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, Fragment as Fragment$1, createElement, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
 import { toZonedTime, formatInTimeZone } from 'date-fns-tz';
@@ -13,15 +13,16 @@ import { noop, warning, invariant, progress, secondsToMilliseconds, milliseconds
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, PieChart, Pie, Cell, ReferenceLine, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
-import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, X, Coffee, Plus, ArrowLeft, Clock, Calendar, Save, Minus, ArrowDown, ArrowUp, Settings2, CheckCircle2, Search, Loader2, AlertCircle, Edit2, CheckCircle, AlertTriangle, Info, Share2, Trophy, Target, Download, User, XCircle, ChevronLeft, ChevronRight, Activity, Sun, Moon, MessageSquare, Trash2, RefreshCw, Menu, Send, Copy, UserCheck, LogOut, Package, TrendingUp, TrendingDown, Settings, LifeBuoy, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, X, Coffee, Plus, ArrowLeft, Clock, Calendar, Save, Minus, ArrowDown, ArrowUp, Settings2, CheckCircle2, Search, Loader2, AlertCircle, Edit2, CheckCircle, AlertTriangle, Info, Share2, Trophy, Target, Download, User, XCircle, ChevronLeft, ChevronRight, Activity, Sun, Moon, MousePointer, ArrowRight, MessageSquare, Trash2, RefreshCw, Menu, Send, Copy, UserCheck, LogOut, Package, TrendingUp, TrendingDown, Building2, FolderOpen, Folder, Settings, LifeBuoy, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
-import { XMarkIcon, ArrowRightIcon, HomeIcon, TrophyIcon, ChartBarIcon, AdjustmentsHorizontalIcon, ClockIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, HeartIcon, UserCircleIcon, ExclamationCircleIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ChevronDownIcon, Bars3Icon, CheckCircleIcon, ChatBubbleLeftRightIcon, XCircleIcon, InformationCircleIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { XMarkIcon, ArrowRightIcon, HomeIcon, TrophyIcon, ChartBarIcon, AdjustmentsHorizontalIcon, ClockIcon, UsersIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, HeartIcon, UserCircleIcon, ExclamationCircleIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ChevronDownIcon, Bars3Icon, CheckCircleIcon, ChatBubbleLeftRightIcon, XCircleIcon, InformationCircleIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/24/solid';
 import html2canvas from 'html2canvas';
 import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
+import { createPortal } from 'react-dom';
 import { toast } from 'sonner';
 import { S3Client, ListObjectsV2Command, GetObjectCommand } from '@aws-sdk/client-s3';
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
@@ -4807,8 +4808,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 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 EventEmitter {
   constructor() {
     super();
@@ -4837,7 +5177,7 @@ var VideoPrefetchManager = class extends 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);
   }
@@ -5221,25 +5561,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 = createContext({
   session: null,
   user: null,
   loading: true,
   error: null,
   signOut: async () => {
+  },
+  markFirstLoginCompleted: async () => false,
+  showOnboarding: false,
+  setShowOnboarding: () => {
+  },
+  completeOnboarding: async () => {
   }
 });
 var useAuth = () => useContext(AuthContext);
 var AuthProvider = ({ children }) => {
   const supabase = useSupabase();
   const { authConfig } = useDashboardConfig();
+  const entityConfig = useEntityConfig();
   const [session, setSession] = useState(null);
   const [user, setUser] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [showOnboarding, setShowOnboarding] = useState(false);
   const router = useRouter();
   authConfig?.userProfileTable;
   authConfig?.roleColumn || "role";
+  const dashboardCompanyId = entityConfig?.companyId;
   const fetchUserDetails = useCallback(async (supabaseUser) => {
     console.log("[fetchUserDetails] Called for user:", supabaseUser.id, {
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -5258,29 +5960,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]);
   useEffect(() => {
     if (!supabase) return;
     let mounted = true;
@@ -5321,6 +6060,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
@@ -5401,6 +6147,73 @@ var AuthProvider = ({ children }) => {
       subscription?.unsubscribe();
     };
   }, [supabase, fetchUserDetails]);
+  const markFirstLoginCompleted = 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 = 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);
@@ -5411,7 +6224,17 @@ var AuthProvider = ({ children }) => {
       router.replace(logoutRedirectPath);
     }
   };
-  return /* @__PURE__ */ jsx(AuthContext.Provider, { value: { session, user, loading, error, signOut }, children });
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value: {
+    session,
+    user,
+    loading,
+    error,
+    signOut,
+    markFirstLoginCompleted,
+    showOnboarding,
+    setShowOnboarding,
+    completeOnboarding
+  }, children });
 };
 var defaultContextValue = {
   components: {},
@@ -8894,7 +9717,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] = useState([]);
@@ -12468,6 +13291,100 @@ var useHourlyTargetMisses = ({
     clearMiss
   };
 };
+function useClipTypes() {
+  const [clipTypes, setClipTypes] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const dashboardConfig = useDashboardConfig();
+  const s3Service = dashboardConfig?.s3Config ? videoPrefetchManager.getS3Service(dashboardConfig) : null;
+  const fetchClipTypes = 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]);
+  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] = useState({});
+  const [countsLoading, setCountsLoading] = useState(false);
+  const dashboardConfig = useDashboardConfig();
+  const s3Service = dashboardConfig?.s3Config ? videoPrefetchManager.getS3Service(dashboardConfig) : null;
+  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) {
@@ -12812,6 +13729,57 @@ var useFormatNumber = () => {
   );
   return { formatNumber };
 };
+function useAccessControl() {
+  const { user } = useAuth();
+  const userRole = 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 = useMemo(() => {
+    return allPages;
+  }, []);
+  const hasAccess = useMemo(() => {
+    return (path) => {
+      return true;
+    };
+  }, []);
+  const isPageVisible = useMemo(() => {
+    return (path) => {
+      return true;
+    };
+  }, []);
+  const canAccessPage = useMemo(() => {
+    return (path) => {
+      return true;
+    };
+  }, []);
+  return {
+    userRole,
+    hasAccess,
+    accessiblePages,
+    isPageVisible,
+    canAccessPage
+  };
+}
 function useSupabaseClient() {
   const { supabaseUrl, supabaseKey } = useDashboardConfig();
   const supabase = useMemo(() => createClient(supabaseUrl, supabaseKey), [supabaseUrl, supabaseKey]);
@@ -20263,6 +21231,19 @@ var LoadingPage = ({
   ] }) });
 };
 var LoadingPage_default = LoadingPage;
+var AccessDeniedPage = () => /* @__PURE__ */ jsx("div", { className: "min-h-screen flex items-center justify-center bg-gray-50", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md w-full bg-white shadow-lg rounded-lg p-6 text-center", children: [
+  /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx("svg", { className: "mx-auto h-12 w-12 text-red-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ 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__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Access Denied" }),
+  /* @__PURE__ */ jsx("p", { className: "text-gray-600 mb-4", children: "You do not have access to this dashboard. Please contact your administrator for assistance." }),
+  /* @__PURE__ */ 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",
@@ -20270,7 +21251,7 @@ var withAuth = (WrappedComponent2, options) => {
     ...options
   };
   const WithAuthComponent = React19.memo(function WithAuthComponent2(props) {
-    const { session, loading } = useAuth();
+    const { session, loading, error } = useAuth();
     const router = useRouter();
     React19.useEffect(() => {
       if (process.env.NODE_ENV === "development" && process.env.DEBUG_AUTH === "true") {
@@ -20278,14 +21259,17 @@ var withAuth = (WrappedComponent2, options) => {
       }
     }, [session, loading]);
     React19.useEffect(() => {
-      if (!loading && defaultOptions.requireAuth && !session) {
+      if (!loading && defaultOptions.requireAuth && !session && !error) {
         console.log("Redirecting to login from withAuth");
         router.replace(defaultOptions.redirectTo);
       }
-    }, [session, loading, router]);
+    }, [session, loading, router, error]);
     if (loading) {
       return /* @__PURE__ */ jsx(LoadingPage, { message: "Authenticating..." });
     }
+    if (error && error.message.includes("You do not have access to this dashboard")) {
+      return /* @__PURE__ */ jsx(AccessDeniedPage, {});
+    }
     if (defaultOptions.requireAuth && !session) {
       return null;
     }
@@ -20294,6 +21278,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 = useRouter();
+    const { user, loading: authLoading } = useAuth();
+    const { canAccessPage, userRole } = useAccessControl();
+    requiredPath || router.pathname;
+    if (authLoading) {
+      return /* @__PURE__ */ jsx("div", { className: "flex h-screen w-full items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4" }),
+        /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: "Loading..." })
+      ] }) });
+    }
+    if (!user) {
+      return /* @__PURE__ */ jsx("div", { className: "flex h-screen w-full items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("p", { className: "text-gray-600 mb-4", children: "Please log in to continue" }) }) });
+    }
+    return /* @__PURE__ */ jsx(WrappedComponent2, { ...props });
+  };
+  WithAccessControlComponent.displayName = `withAccessControl(${WrappedComponent2.displayName || WrappedComponent2.name || "Component"})`;
+  return WithAccessControlComponent;
+}
 var LoginPage = ({
   onRateLimitCheck,
   logoSrc = "/optifye-logo.png",
@@ -21872,7 +22881,7 @@ var HourlyOutputChartComponent = ({
     ticks.push(maxYValue);
     return [...new Set(ticks)].sort((a, b) => a - b);
   };
-  const renderLegend = () => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
+  const renderLegend = () => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
     /* @__PURE__ */ jsx("div", { className: "w-8 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t-2 border-[#E34329] border-dashed" }) }),
     /* @__PURE__ */ jsxs("span", { children: [
       "Target: ",
@@ -27174,7 +28183,7 @@ var VideoPlayer = React19__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
@@ -27184,12 +28193,59 @@ var VideoPlayer = React19__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,
@@ -27254,9 +28310,17 @@ var VideoPlayer = React19__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"
       });
     }
   }, [
@@ -27276,16 +28340,34 @@ var VideoPlayer = React19__default.forwardRef(({
   ]);
   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]);
   useEffect(() => {
     initializePlayer();
     return () => {
       if (playerRef.current) {
+        const blobUrl = playerRef.current._blobUrl;
+        if (blobUrl) {
+          URL.revokeObjectURL(blobUrl);
+        }
         playerRef.current.dispose();
         playerRef.current = null;
         setIsReady(false);
@@ -27357,6 +28439,233 @@ var VideoPlayer = React19__default.forwardRef(({
   ] });
 });
 VideoPlayer.displayName = "VideoPlayer";
+var CroppedVideoPlayer = forwardRef(({
+  crop,
+  debug = false,
+  ...videoProps
+}, ref) => {
+  const videoContainerRef = useRef(null);
+  const hiddenVideoRef = useRef(null);
+  const canvasRef = useRef(null);
+  const animationFrameRef = useRef(null);
+  const videoElementRef = useRef(null);
+  const [isVideoReady, setIsVideoReady] = useState(false);
+  const [canvasDimensions, setCanvasDimensions] = useState({ width: 0, height: 0 });
+  const [isProcessing, setIsProcessing] = useState(false);
+  const stopCanvasRendering = useCallback(() => {
+    if (animationFrameRef.current) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+  }, []);
+  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 = 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 = 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 = 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 = 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 = useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video paused, stopping canvas rendering");
+    stopCanvasRendering();
+    setIsProcessing(false);
+    videoProps.onPause?.(player);
+  }, [stopCanvasRendering, videoProps]);
+  const handleVideoEnded = useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video ended");
+    stopCanvasRendering();
+    setIsProcessing(false);
+    videoProps.onEnded?.(player);
+  }, [stopCanvasRendering, videoProps]);
+  const handleSeeking = useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video seeking");
+    if (crop && !player.paused()) {
+      renderFrameToCanvas();
+    }
+    videoProps.onSeeking?.(player);
+  }, [crop, renderFrameToCanvas, videoProps]);
+  const handleSeeked = useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video seeked");
+    if (crop && !player.paused()) {
+      renderFrameToCanvas();
+    }
+    videoProps.onSeeked?.(player);
+  }, [crop, renderFrameToCanvas, videoProps]);
+  const handleLoadedMetadata = useCallback((player) => {
+    console.log("[CroppedVideoPlayer] Video metadata loaded");
+    calculateCanvasDimensions();
+    videoProps.onLoadedMetadata?.(player);
+  }, [calculateCanvasDimensions, videoProps]);
+  useEffect(() => {
+    calculateCanvasDimensions();
+    const handleResize = () => {
+      calculateCanvasDimensions();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [calculateCanvasDimensions]);
+  useEffect(() => {
+    return () => {
+      stopCanvasRendering();
+    };
+  }, [stopCanvasRendering]);
+  if (!crop) {
+    return /* @__PURE__ */ jsx(VideoPlayer, { ref, ...videoProps });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: videoContainerRef,
+      className: `relative w-full h-full flex items-center justify-center bg-black ${videoProps.className || ""}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(
+          VideoPlayer,
+          {
+            ref: hiddenVideoRef,
+            ...videoProps,
+            onReady: handleVideoReady,
+            onPlay: handleVideoPlay,
+            onPause: handleVideoPause,
+            onEnded: handleVideoEnded,
+            onSeeking: handleSeeking,
+            onSeeked: handleSeeked,
+            onLoadedMetadata: handleLoadedMetadata
+          }
+        ) }),
+        /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+        debug && isVideoReady && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 bg-black/80 text-white text-xs p-2 rounded font-mono", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            "Crop: ",
+            crop.x,
+            ",",
+            crop.y,
+            " ",
+            crop.width,
+            "x",
+            crop.height,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            "Canvas: ",
+            canvasDimensions.width,
+            "x",
+            canvasDimensions.height,
+            "px"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            "Processing: ",
+            isProcessing ? "Yes" : "No"
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+CroppedVideoPlayer.displayName = "CroppedVideoPlayer";
 var BackButton = ({
   onClick,
   text = "Back",
@@ -27666,6 +28975,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 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] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  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__ */ jsx(AlertTriangle, { className: "h-3 w-3 text-red-500" });
+    case "medium":
+      return /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3 text-yellow-500" });
+    case "low":
+      return /* @__PURE__ */ jsx(CheckCircle, { className: "h-3 w-3 text-green-500" });
+    default:
+      return /* @__PURE__ */ jsx(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] = useState(/* @__PURE__ */ new Set());
+  const [searchTerm, setSearchTerm] = useState("");
+  const filterTree = 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__ */ jsx(FolderOpen, { className: `h-4 w-4 ${colorClasses.text}` }) : /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "select-none animate-in", children: [
+      /* @__PURE__ */ 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__ */ 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__ */ jsx(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__ */ jsx(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__ */ 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__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ 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__ */ jsx("div", { className: "text-xs text-slate-500 capitalize mt-0.5 font-medium", children: /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center ml-2", children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "mr-3", children: /* @__PURE__ */ jsx(Folder, { className: "h-5 w-5 text-slate-700" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-slate-900 tracking-tight", children: "Clips Explorer" }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-slate-100/80", children: /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx(Search, { className: "h-5 w-5 text-slate-400 group-focus-within:text-blue-500 transition-colors duration-200" }) }),
+      /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-4 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "h-2 w-2 bg-blue-500 rounded-full animate-pulse" }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 h-[calc(100%-14rem)] overflow-y-auto scrollbar-thin", children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filterTree.map((node) => renderNode(node)) }),
+      filterTree.length === 0 && searchTerm && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsx(Search, { className: "h-12 w-12 mx-auto" }) }),
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-slate-700 mb-2", children: "No clips found" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-slate-500 mb-4", children: [
+          'No clips match "',
+          searchTerm,
+          '"'
+        ] }),
+        /* @__PURE__ */ 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,
@@ -27674,17 +29221,9 @@ var BottlenecksContent = ({
   className
 }) => {
   const dashboardConfig = useDashboardConfig();
-  const sopCategories = React19__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 = useRef(null);
-  const timestampFilterRef = useRef(null);
-  const initialFilter = sopCategories && sopCategories.length > 0 ? sopCategories[0].id : "low_value";
+  const [initialFilter, setInitialFilter] = useState("");
   const currentIndexRef = useRef(0);
   const activeFilterRef = useRef(initialFilter);
   const isMountedRef = useRef(true);
@@ -27714,22 +29253,6 @@ var BottlenecksContent = ({
   useEffect(() => {
     currentIndexRef.current = currentIndex;
   }, [currentIndex]);
-  const [showTimestampFilter, setShowTimestampFilter] = useState(false);
-  const [timestampStart, setTimestampStart] = useState("");
-  const [timestampEnd, setTimestampEnd] = useState("");
-  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 = useMemo(() => {
     if (!dashboardConfig?.s3Config) {
       console.warn("S3 configuration not found in dashboard config");
@@ -27737,6 +29260,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
+  });
+  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 = useMemo(() => {
     if (shift !== void 0 && shift !== null) {
       const shiftStr = shift.toString();
@@ -27755,6 +29311,9 @@ var BottlenecksContent = ({
       return currentShift.shiftId.toString();
     }
   }, [shift, date, dashboardConfig]);
+  const mergedCounts = useMemo(() => {
+    return { ...clipCounts, ...dynamicCounts };
+  }, [clipCounts, dynamicCounts]);
   const {
     data: prefetchData,
     isFullyIndexed,
@@ -27789,17 +29348,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);
@@ -27820,13 +29384,7 @@ var BottlenecksContent = ({
   const ensureVideosLoaded = 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());
@@ -27835,7 +29393,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);
       }
@@ -27910,7 +29468,7 @@ var BottlenecksContent = ({
     } finally {
       indicesToLoad.forEach((idx) => loadingVideosRef.current.delete(idx));
     }
-  }, [s3ClipsService, workspaceId, clipCounts, sopCategories, date, effectiveShift]);
+  }, [s3ClipsService, workspaceId, clipCounts, date, effectiveShift]);
   const loadFirstVideoForCategory = useCallback(async (category) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     const targetCategory = category || activeFilterRef.current;
@@ -27927,7 +29485,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) {
@@ -27963,7 +29521,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;
@@ -28017,47 +29575,27 @@ var BottlenecksContent = ({
     }
   }, [workspaceId, date, effectiveShift, s3ClipsService, fetchClipCounts, updateClipCounts, prefetchData]);
   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]);
   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);
@@ -28065,7 +29603,7 @@ var BottlenecksContent = ({
         setIsCategoryLoading(false);
       }
     }
-  }, [activeFilter, s3ClipsService, clipCounts, loadFirstVideoForCategory, allVideos, sopCategories]);
+  }, [activeFilter, s3ClipsService, mergedCounts, loadFirstVideoForCategory, allVideos]);
   useEffect(() => {
     if (previousFilterRef.current !== activeFilter) {
       console.log(`Filter changed from ${previousFilterRef.current} to ${activeFilter} - resetting to first video`);
@@ -28077,15 +29615,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);
@@ -28094,46 +29624,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 = 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]);
   useEffect(() => {
     if (isNavigating && currentIndex < filteredVideos.length) {
       setIsNavigating(false);
@@ -28158,15 +29667,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);
@@ -28320,17 +29823,6 @@ var BottlenecksContent = ({
       player.pause();
     }
   };
-  const mappedCounts = 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) {
@@ -28353,33 +29845,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__ */ jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
       /* @__PURE__ */ jsx(XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
@@ -28387,202 +29852,80 @@ var BottlenecksContent = ({
       /* @__PURE__ */ 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__ */ jsx("div", { className: "flex-grow p-4 flex items-center justify-center h-[calc(100vh-12rem)]", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
   }
-  if (error) {
+  if (error || clipTypesError) {
     return /* @__PURE__ */ jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
       /* @__PURE__ */ jsx(XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
       /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-red-700 mb-1", children: "Error Loading Clips" }),
-      /* @__PURE__ */ jsx("p", { className: "text-gray-600 max-w-md", children: error })
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4 h-[calc(100vh-12rem)]", children: [
-    /* @__PURE__ */ 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__ */ 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__ */ jsx(CardHeader2, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle2, { className: `text-lg ${activeFilter === category.id ? "text-blue-600" : ""}`, children: category.label }) }),
-            /* @__PURE__ */ jsx(CardContent2, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
-              /* @__PURE__ */ jsx("p", { className: `text-3xl font-bold ${colorClasses.text}`, children: count }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [
-                /* @__PURE__ */ jsx("div", { className: `h-2 w-2 rounded-full ${colorClasses.dot} mr-1.5` }),
-                /* @__PURE__ */ jsx("span", { children: category.subtitle || category.description || category.label })
-              ] })
-            ] }) })
-          ]
-        },
-        category.id
-      );
-    }) }),
-    /* @__PURE__ */ 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__ */ jsx("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4 h-[calc(100vh-12rem)]", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-4 h-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 lg:flex-[3]", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden h-full", children: [
       /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-gray-100", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
         /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative", ref: timestampFilterRef, children: [
-            /* @__PURE__ */ 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__ */ jsx(Clock, { className: "h-5 w-5" })
-              }
-            ),
-            showTimestampFilter && /* @__PURE__ */ 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__ */ jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Filter by Time" }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Start Time" }),
-                  /* @__PURE__ */ jsx(
-                    TimePickerDropdown,
-                    {
-                      value: timestampStart,
-                      onChange: (value) => setTimestampStart(value),
-                      placeholder: "Select start time",
-                      className: "w-full text-sm"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "End Time" }),
-                  /* @__PURE__ */ jsx(
-                    TimePickerDropdown,
-                    {
-                      value: timestampEnd,
-                      onChange: (value) => setTimestampEnd(value),
-                      placeholder: "Select end time",
-                      className: "w-full text-sm"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex justify-between pt-2", children: [
-                  /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(ChevronLeft, { className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: clipCounts[activeFilter] > 0 ? `${currentIndex + 1} / ${clipCounts[activeFilter]}` : "0 / 0" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm px-2 py-1 bg-blue-50 text-blue-700 rounded-full font-medium tabular-nums", children: (mergedCounts[activeFilter] || 0) > 0 ? `${currentIndex + 1} / ${mergedCounts[activeFilter]}` : "0 / 0" }),
             error && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-600 font-medium", children: error })
           ] }),
           /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "h-5 w-5" })
             }
           )
         ] })
       ] }) }),
-      (timestampStart || timestampEnd) && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-blue-50 border-b border-blue-100 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 text-sm text-blue-700", children: [
-          /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            "Filtered by time: ",
-            timestampStart ? formatTimeOnly(timestampStart) : "Any",
-            " - ",
-            timestampEnd ? formatTimeOnly(timestampEnd) : "Any"
-          ] })
-        ] }),
-        /* @__PURE__ */ 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__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading clips..." }) }) }) }) : (
         /* Priority 2: Show loading if category is loading BUT only if no video is available */
         isCategoryLoading && (!filteredVideos.length || !currentVideo) ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading videos..." }) }) }) }) : (
           /* Priority 3: Show loading if navigating and current video not available */
-          isNavigating || currentIndex >= filteredVideos.length && currentIndex < clipCounts[activeFilter] ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }) }) }) : (
+          isNavigating || currentIndex >= filteredVideos.length && currentIndex < (mergedCounts[activeFilter] || 0) ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }) }) }) : (
             /* Priority 4: Show video if we have filtered videos and current video */
             filteredVideos.length > 0 && currentVideo ? /* @__PURE__ */ jsx("div", { className: "p-4 h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx("div", { className: "relative h-full group", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
               /* @__PURE__ */ jsx(
-                VideoPlayer,
+                CroppedVideoPlayer,
                 {
                   ref: videoRef,
                   src: currentVideo.src,
                   className: "w-full h-full",
+                  crop: workspaceCrop?.crop || null,
                   autoplay: true,
                   playsInline: true,
                   loop: false,
@@ -28636,7 +29979,7 @@ var BottlenecksContent = ({
                 /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
@@ -28673,9 +30016,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",
@@ -28689,13 +30031,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__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
+              hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
                 /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
                 /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
                 /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There were no video clips found for this workspace today." })
               ] }) }) : (
                 /* Priority 6: Show "no matching clips" only if we have data loaded and specifically no clips for this filter */
-                hasInitialLoad && clipCounts[activeFilter] === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
+                hasInitialLoad && (mergedCounts[activeFilter] || 0) === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
                   /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
                   /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Matching Clips" }),
                   /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There are no clips matching the selected filter." })
@@ -28708,8 +30050,46 @@ var BottlenecksContent = ({
           )
         )
       )
-    ] })
-  ] });
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 lg:flex-[1] lg:min-w-[280px] lg:max-w-[320px]", children: /* @__PURE__ */ 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) {
@@ -30338,6 +31718,17 @@ var SideNavBar = memo(({
     });
     onMobileMenuClose?.();
   }, [navigate, onMobileMenuClose]);
+  const handleSupervisorManagementClick = useCallback(() => {
+    navigate("/supervisor-management", {
+      trackingEvent: {
+        name: "Supervisor Management Page Clicked",
+        properties: {
+          source: "side_nav"
+        }
+      }
+    });
+    onMobileMenuClose?.();
+  }, [navigate, onMobileMenuClose]);
   const handleAIAgentClick = useCallback(() => {
     navigate("/ai-agent", {
       trackingEvent: {
@@ -30402,6 +31793,7 @@ var SideNavBar = memo(({
   const kpisButtonClasses = useMemo(() => getButtonClasses("/kpis"), [getButtonClasses, pathname]);
   const targetsButtonClasses = useMemo(() => getButtonClasses("/targets"), [getButtonClasses, pathname]);
   const shiftsButtonClasses = useMemo(() => getButtonClasses("/shifts"), [getButtonClasses, pathname]);
+  const supervisorManagementButtonClasses = useMemo(() => getButtonClasses("/supervisor-management"), [getButtonClasses, pathname]);
   const aiAgentButtonClasses = useMemo(() => getButtonClasses("/ai-agent"), [getButtonClasses, pathname]);
   const profileButtonClasses = useMemo(() => getButtonClasses("/profile"), [getButtonClasses, pathname]);
   const helpButtonClasses = useMemo(() => getButtonClasses("/help"), [getButtonClasses, pathname]);
@@ -30507,7 +31899,22 @@ var SideNavBar = memo(({
             ]
           }
         ),
-        skuEnabled && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ 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__ */ jsx(UsersIcon, { className: "w-5 h-5 mb-1" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Supervisors" })
+            ]
+          }
+        ),
+        skuEnabled && true && /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: handleSKUsClick,
@@ -30533,7 +31940,10 @@ var SideNavBar = memo(({
             "aria-selected": pathname === "/ai-agent" || pathname.startsWith("/ai-agent/"),
             children: [
               /* @__PURE__ */ jsx(SparklesIcon, { className: "w-5 h-5 mb-1" }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Axel" })
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Axel" }),
+                /* @__PURE__ */ 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" })
+              ] })
             ]
           }
         ),
@@ -30667,7 +32077,19 @@ var SideNavBar = memo(({
             ]
           }
         ),
-        skuEnabled && /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleSupervisorManagementClick),
+            className: getMobileButtonClass("/supervisor-management"),
+            "aria-label": "Supervisor Management",
+            children: [
+              /* @__PURE__ */ jsx(UsersIcon, { className: getIconClass("/supervisor-management") }),
+              /* @__PURE__ */ jsx("span", { className: "text-base font-medium", children: "Supervisors" })
+            ]
+          }
+        ),
+        skuEnabled && true && /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: handleMobileNavClick(handleSKUsClick),
@@ -30687,7 +32109,10 @@ var SideNavBar = memo(({
             "aria-label": "AI Manufacturing Expert",
             children: [
               /* @__PURE__ */ jsx(SparklesIcon, { className: getIconClass("/ai-agent") }),
-              /* @__PURE__ */ jsx("span", { className: "text-base font-medium", children: "Axel AI" })
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-base font-medium", children: "Axel AI" }),
+                /* @__PURE__ */ 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" })
+              ] })
             ]
           }
         ),
@@ -31206,6 +32631,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] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+  const dropdownRef = useRef(null);
+  const buttonRef = useRef(null);
+  const inputRef = 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
+      });
+    }
+  };
+  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__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(User, { className: "w-4 h-4 text-gray-400 mr-2 flex-shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: cn(
+              "truncate",
+              selectedSupervisor ? "text-gray-900" : "text-gray-500"
+            ), children: selectedSupervisor ? selectedSupervisor.name : placeholder })
+          ] }),
+          /* @__PURE__ */ jsx(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" && createPortal(
+      /* @__PURE__ */ 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__ */ jsx("div", { className: "p-2 border-b border-gray-200", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "max-h-60 overflow-y-auto", children: [
+              selectedSupervisor && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ 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__ */ jsx("div", { className: "w-4 h-4 mr-2" }),
+                      " ",
+                      "Clear Assignment"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200" })
+              ] }),
+              filteredSupervisors.length > 0 ? filteredSupervisors.map((supervisor) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx(User, { className: "w-4 h-4 text-gray-400 mr-2 flex-shrink-0" }),
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsx("div", { className: "font-medium truncate", children: supervisor.name }),
+                        supervisor.email && /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 truncate", children: supervisor.email })
+                      ] })
+                    ] }),
+                    selectedSupervisor?.id === supervisor.id && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-blue-600 flex-shrink-0" })
+                  ]
+                },
+                supervisor.id
+              )) : /* @__PURE__ */ 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] = 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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-[9998] flex items-center justify-center", children: /* @__PURE__ */ 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__ */ jsx(
+      "button",
+      {
+        onClick: handleSkip,
+        className: "absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors",
+        disabled: isCompleting,
+        children: /* @__PURE__ */ jsx(X, { size: 20 })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "p-8", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-5xl mb-4 text-center", children: currentStepData.icon }),
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-4 text-center", children: currentStepData.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 text-center mb-8", children: currentStepData.content }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-2 mb-6", children: steps.map((_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `h-2 w-2 rounded-full transition-colors ${index === currentStep ? "bg-blue-600" : "bg-gray-300"}`
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleSkip,
+            className: "text-gray-500 hover:text-gray-700 text-sm transition-colors",
+            disabled: isCompleting,
+            children: "Skip tour"
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs("span", { className: "flex items-center", children: [
+              /* @__PURE__ */ 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__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                /* @__PURE__ */ 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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-[9998] flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg shadow-2xl max-w-sm w-full mx-4 relative z-[9999]", children: /* @__PURE__ */ jsxs("div", { className: "p-6 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-5xl mb-4", children: "\u{1F389}" }),
+    /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-gray-900 mb-3", children: "Welcome to Optifye!" }),
+    /* @__PURE__ */ jsx("p", { className: "text-gray-600 mb-6", children: "Your dashboard is ready. Let's get started!" }),
+    /* @__PURE__ */ 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] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const router = useRouter();
+  const step = onboardingSteps[currentStep];
+  const [targetElement, setTargetElement] = useState(null);
+  const [tooltipPosition, setTooltipPosition] = useState({});
+  const observerRef = useRef(null);
+  const handleNext = 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 = useCallback(() => {
+    if (currentStep > 0 && !isTransitioning) {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setCurrentStep(currentStep - 1);
+        setIsTransitioning(false);
+      }, 200);
+    }
+  }, [currentStep, isTransitioning]);
+  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.pathname]);
+  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]);
+  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]);
+  useEffect(() => {
+    if (!step?.waitForPath || step.nextTrigger !== "action") return;
+    const checkPath = (url) => {
+      const currentPath = url || router.asPath || router.pathname;
+      if (step.waitForPath === "/workspace" && (currentPath.includes("/workspace") || currentPath.includes("workspace-") || router.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.events.on("routeChangeComplete", handleRouteChange);
+    router.events.on("routeChangeStart", handleRouteChange);
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+      router.events.off("routeChangeStart", handleRouteChange);
+    };
+  }, [step, router, handleNext]);
+  if (!isOpen || !step) return null;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    !step.allowInteraction && /* @__PURE__ */ 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__ */ jsx(
+      Spotlight,
+      {
+        element: targetElement,
+        allowInteraction: step.allowInteraction,
+        showPulse: step.action === "click"
+      }
+    ),
+    /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: [...Array(onboardingSteps.length)].map((_, i) => /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-sm font-medium text-gray-600 dark:text-gray-400", children: [
+                currentStep + 1,
+                " of ",
+                onboardingSteps.length
+              ] })
+            ] }),
+            /* @__PURE__ */ 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__ */ jsx(X, { className: "w-5 h-5" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "px-6 py-5", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-3", children: step.title }),
+            /* @__PURE__ */ 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__ */ 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__ */ jsxs("p", { className: "text-sm text-blue-700 dark:text-blue-300 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(MousePointer, { className: "w-4 h-4 animate-pulse" }),
+                  "Click the highlighted element to continue"
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              currentStep > 0 && /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+                    "Complete Tour",
+                    /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" })
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Next",
+                    /* @__PURE__ */ jsx(ArrowRight, { className: "w-4 h-4" })
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      },
+      step.id
+    )
+  ] });
+  if (typeof window !== "undefined") {
+    return createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && content }),
+      document.body
+    );
+  }
+  return null;
+};
+var Spotlight = ({ element, allowInteraction, showPulse }) => {
+  const [rect, setRect] = useState(null);
+  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__ */ jsxs(Fragment, { children: [
+    !allowInteraction && /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "fixed inset-0",
+        style: { zIndex: 10001, pointerEvents: "auto" },
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: "spotlight-mask", children: [
+            /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }),
+            /* @__PURE__ */ 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__ */ jsx(
+            "rect",
+            {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              fill: "black",
+              fillOpacity: "0.2",
+              mask: "url(#spotlight-mask)"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 rounded-lg ring-3 ring-blue-500 shadow-lg shadow-blue-500/30" }),
+          showPulse && allowInteraction && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-lg ring-4 ring-blue-400 ring-opacity-75 animate-pulse" }),
+            /* @__PURE__ */ 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] = useState(false);
+  const [isCompleting, setIsCompleting] = useState(false);
+  const [hasChecked, setHasChecked] = useState(false);
+  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__ */ jsxs(Fragment, { children: [
+    children,
+    showTour && /* @__PURE__ */ jsx(
+      InteractiveOnboardingTour,
+      {
+        isOpen: showTour,
+        onComplete: handleTourComplete,
+        onSkip: handleTourSkip
+      }
+    ),
+    showOnboarding && OnboardingComponent && /* @__PURE__ */ jsx(
+      OnboardingComponent,
+      {
+        onComplete: handleOnboardingComplete,
+        isCompleting
+      }
+    )
+  ] });
+};
+var FirstTimeLoginDebug = () => {
+  const {
+    isFirstTimeLogin,
+    hasCompletedFirstLogin,
+    needsOnboarding,
+    completeFirstLogin,
+    user
+  } = useFirstTimeLogin();
+  if (!user) return null;
+  return /* @__PURE__ */ jsxs("div", { style: {
+    position: "fixed",
+    top: 10,
+    right: 10,
+    background: "#f0f0f0",
+    padding: "10px",
+    border: "1px solid #ccc",
+    fontSize: "12px",
+    zIndex: 9999
+  }, children: [
+    /* @__PURE__ */ jsx("h4", { children: "First-Time Login Debug" }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      "User ID: ",
+      user.id
+    ] }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      "Email: ",
+      user.email
+    ] }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      "Is First Time: ",
+      isFirstTimeLogin ? "\u2705" : "\u274C"
+    ] }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      "Completed: ",
+      hasCompletedFirstLogin ? "\u2705" : "\u274C"
+    ] }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      "Needs Onboarding: ",
+      needsOnboarding ? "\u2705" : "\u274C"
+    ] }),
+    needsOnboarding && /* @__PURE__ */ 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] = useState(0);
+  const [isWaitingForNavigation, setIsWaitingForNavigation] = useState(false);
+  const router = useRouter();
+  const step = onboardingSteps2[currentStep];
+  useEffect(() => {
+    if (!step?.waitForNavigation || !isWaitingForNavigation) return;
+    const handleRouteChange = (url) => {
+      if (step.waitForNavigation && url.includes(step.waitForNavigation)) {
+        setIsWaitingForNavigation(false);
+        handleNext();
+      }
+    };
+    router.events.on("routeChangeComplete", handleRouteChange);
+    return () => {
+      router.events.off("routeChangeComplete", handleRouteChange);
+    };
+  }, [step, isWaitingForNavigation, router]);
+  const handleNext = 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 = useCallback(() => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+      setIsWaitingForNavigation(false);
+    }
+  }, [currentStep]);
+  const getPositionStyles = 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__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ jsx(HighlightOverlay, { target: step.target }),
+    /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: [...Array(onboardingSteps2.length)].map((_, i) => /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+                currentStep + 1,
+                " / ",
+                onboardingSteps2.length
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onSkip,
+                className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-6 py-5", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-2", children: step.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-300 leading-relaxed", children: step.description }),
+            isWaitingForNavigation && /* @__PURE__ */ jsx("div", { className: "mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-blue-700 dark:text-blue-300 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 bg-blue-600 rounded-full animate-pulse" }),
+              "Waiting for you to click..."
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 bg-gray-50 dark:bg-gray-900/50 flex items-center justify-between", children: [
+            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              currentStep > 0 && /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+                    "Complete",
+                    /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" })
+                  ] }) : isWaitingForNavigation ? "Waiting..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    "Next",
+                    /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+                  ] })
+                }
+              )
+            ] })
+          ] })
+        ] })
+      },
+      step.id
+    )
+  ] }) });
+};
+var HighlightOverlay = ({ target }) => {
+  const [rect, setRect] = useState(null);
+  useEffect(() => {
+    const element = document.querySelector(target);
+    if (element) {
+      setRect(element.getBoundingClientRect());
+    }
+  }, [target]);
+  if (!rect) return null;
+  return /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 rounded-lg ring-4 ring-blue-500/50 ring-offset-4 ring-offset-transparent animate-pulse" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-lg bg-blue-500/10" })
+      ]
+    }
+  );
+};
+var OnboardingDemo = () => {
+  const [showTour, setShowTour] = useState(false);
+  const handleComplete = () => {
+    setShowTour(false);
+    console.log("Onboarding tour completed");
+  };
+  const handleSkip = () => {
+    setShowTour(false);
+    console.log("Onboarding tour skipped");
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ jsx(Info, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Start Tour" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InteractiveOnboardingTour,
+      {
+        isOpen: showTour,
+        onComplete: handleComplete,
+        onSkip: handleSkip
+      }
+    )
+  ] });
+};
 var ThreadSidebar = ({
   activeThreadId,
   onSelectThread,
@@ -34412,6 +37036,15 @@ var QualityOverview = 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,
@@ -34901,9 +37534,15 @@ var KPIDetailView = ({
             "aria-label": "Navigate back to previous page"
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
-          /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
+            /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "text-sm text-gray-600 font-medium", children: [
+            "Supervisor: ",
+            getSupervisorName(lineInfo?.line_id)
+          ] })
         ] }) })
       ] }),
       (activeTab !== "monthly_history" || urlDate || urlShift) && metrics2 && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
@@ -35111,8 +37750,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__ */ 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__ */ jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 truncate", children: line.line_name }),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 truncate", children: line.line_name }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mt-1", children: "Supervisor: Vivaan" })
+          ] }),
           kpis && isOnTrack !== null && /* @__PURE__ */ 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__ */ jsx("div", { className: `w-2 h-2 rounded-full ${isOnTrack ? "bg-emerald-500" : "bg-red-500"} animate-pulse` }),
             /* @__PURE__ */ jsx("span", { children: isOnTrack ? "On Track" : "Behind" })
@@ -35814,9 +38456,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;
@@ -35965,55 +38604,6 @@ var ProfileView = () => {
                 /* @__PURE__ */ jsx("p", { className: "text-gray-900", children: profileData.email }),
                 profileData.email_verified && /* @__PURE__ */ jsx(UserCheck, { className: "h-4 w-4 text-green-500" })
               ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Company" }),
-              isEditing ? /* @__PURE__ */ 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__ */ jsx("p", { className: "text-gray-900", children: profileData.company || "Not set" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Role" }),
-              /* @__PURE__ */ jsx("p", { className: "text-gray-900", children: profileData.role || "Not set" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Phone" }),
-              isEditing ? /* @__PURE__ */ 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__ */ jsx("p", { className: "text-gray-900", children: profileData.phone || "Not set" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Timezone" }),
-              isEditing ? /* @__PURE__ */ 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__ */ jsx("option", { value: "", children: "Select timezone" }),
-                    /* @__PURE__ */ jsx("option", { value: "UTC", children: "UTC" }),
-                    /* @__PURE__ */ jsx("option", { value: "America/New_York", children: "Eastern Time" }),
-                    /* @__PURE__ */ jsx("option", { value: "America/Chicago", children: "Central Time" }),
-                    /* @__PURE__ */ jsx("option", { value: "America/Denver", children: "Mountain Time" }),
-                    /* @__PURE__ */ jsx("option", { value: "America/Los_Angeles", children: "Pacific Time" }),
-                    /* @__PURE__ */ jsx("option", { value: "Asia/Kolkata", children: "India Standard Time" }),
-                    /* @__PURE__ */ jsx("option", { value: "Europe/London", children: "GMT" })
-                  ]
-                }
-              ) : /* @__PURE__ */ jsx("p", { className: "text-gray-900", children: profileData.timezone || "Not set" })
             ] })
           ] }),
           isEditing && /* @__PURE__ */ jsx("div", { className: "mt-6 flex gap-3", children: /* @__PURE__ */ jsx(Button2, { variant: "outline", onClick: handleSaveProfile, disabled: loading, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -38596,10 +41186,6 @@ var TargetsView = ({
   }, [actionIds]);
   const handleSaveLine = useCallback(async (lineId) => {
     console.log(`[handleSaveLine] Attempting to save line: ${lineId}`);
-    if (!canSaveTargets) {
-      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}`);
@@ -38876,6 +41462,13 @@ var WorkspaceDetailView = ({
   const [selectedMonth, setSelectedMonth] = useState(today.getMonth());
   const [selectedYear, setSelectedYear] = useState(today.getFullYear());
   const [selectedShift, setSelectedShift] = useState("day");
+  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] = useState(initialTab);
@@ -39125,11 +41718,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);
         }
@@ -39141,6 +41741,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);
           }
@@ -39239,7 +41840,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"
                   }
@@ -39265,7 +41866,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"
                 }
@@ -39653,6 +42254,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);
                       }
@@ -40136,6 +42738,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] = useState({
+    assignments: [],
+    allSupervisors: [],
+    loading: true,
+    error: void 0
+  });
+  const [savingAssignments, setSavingAssignments] = useState(/* @__PURE__ */ new Set());
+  const loadData = 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]);
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+  const handleSupervisorChange = 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}`;
+      toast.success(message);
+    } catch (error) {
+      console.error("Error updating supervisor assignment:", error);
+      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 = useCallback(() => {
+    loadData();
+  }, [loadData]);
+  const handleBack = useCallback(() => {
+    if (onBack) {
+      onBack();
+    } else if (onNavigate) {
+      onNavigate("/");
+    }
+  }, [onBack, onNavigate]);
+  if (data.loading) {
+    return /* @__PURE__ */ jsx("div", { className: clsx("min-h-screen bg-slate-50", className), children: /* @__PURE__ */ jsx(LoadingPage, { message: "Loading supervisor management..." }) });
+  }
+  if (data.error) {
+    return /* @__PURE__ */ jsx("div", { className: clsx("min-h-screen bg-slate-50", className), children: /* @__PURE__ */ jsx("div", { className: "min-h-screen flex items-center justify-center", children: /* @__PURE__ */ jsx(
+      EmptyStateMessage,
+      {
+        iconType: 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__ */ jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
+        BackButtonMinimal,
+        {
+          onClick: handleBack,
+          text: "Back",
+          size: "default",
+          "aria-label": "Navigate back to previous page"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center mt-2 sm:mt-0", children: [
+        /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "hidden sm:block absolute right-0 w-24", children: /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleRefresh,
+          className: "p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+          "aria-label": "Refresh data",
+          children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-5 w-5" })
+        }
+      ) }) })
+    ] }) }) }),
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: /* @__PURE__ */ jsx(
+      EmptyStateMessage,
+      {
+        iconType: Building2,
+        title: "No Lines Found",
+        message: "There are no production lines to manage supervisor assignments for."
+      }
+    ) }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+      /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Line" }),
+        /* @__PURE__ */ jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Assigned Supervisor" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: data.assignments.map((assignment) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50", children: [
+        /* @__PURE__ */ jsx("td", { className: "px-4 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(Building2, { className: "h-4 w-4 text-gray-400 mr-2" }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-900", children: assignment.lineName })
+        ] }) }),
+        /* @__PURE__ */ jsx("td", { className: "px-4 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "max-w-xs", children: /* @__PURE__ */ 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;
@@ -40591,4 +43355,4 @@ var streamProxyConfig = {
   }
 };
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedWorkspaceHealthView, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, CompactWorkspaceHealthCard, CongratulationsOverlay, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, NoWorkspaceData, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createStreamProxyHandler, createSupabaseClient, createThrottledReload, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAudioService, useAuth, useAuthConfig, useCanSaveTargets, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useTicketHistory, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealth, useWorkspaceHealthById, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, videoPrefetchManager, videoPreloader, whatsappService, withAuth, withRegistry, workspaceHealthService, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedWorkspaceHealthView, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, MinimalOnboardingPopup, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAudioService, useAuth, useAuthConfig, useCanSaveTargets, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useTicketHistory, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealth, useWorkspaceHealthById, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, workspaceHealthService, workspaceService };