@optifye/dashboard-core 6.6.5 → 6.6.6

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React19 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 * as React20 from 'react';
+import React20__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, memo, forwardRef, useImperativeHandle, useContext, useLayoutEffect, useId, Children, isValidElement, useInsertionEffect, Fragment as Fragment$1, createElement, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRouter } from 'next/router';
 import { toZonedTime, formatInTimeZone } from 'date-fns-tz';
@@ -13,7 +13,7 @@ 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, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, Minus, ArrowDown, ArrowUp, Settings2, CheckCircle2, Search, Loader2, AlertCircle, Edit2, CheckCircle, AlertTriangle, Info, Share2, Trophy, Target, Download, User, RefreshCw, XCircle, ChevronLeft, ChevronRight, Activity, Sun, Moon, MousePointer, ArrowRight, MessageSquare, Trash2, Menu, Send, Copy, UserCheck, LogOut, Package, TrendingUp, TrendingDown, Building2, FolderOpen, Folder, HelpCircle, Play, Settings, LifeBuoy, EyeOff, Eye, Zap, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, ShieldCheck, Star, Award, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, Minus, ArrowDown, ArrowUp, Settings2, CheckCircle2, Search, Loader2, AlertCircle, Edit2, CheckCircle, AlertTriangle, Info, Share2, Trophy, Target, Download, User, RefreshCw, Sliders, Sparkles, TrendingDown, TrendingUp, FolderOpen, Folder, HelpCircle, Play, Activity, Layers, Filter, XCircle, ChevronLeft, ChevronRight, Sun, Moon, MousePointer, ArrowRight, MessageSquare, Trash2, Menu, Send, Copy, UserCheck, LogOut, Package, Building2, 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, UsersIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, HeartIcon, UserCircleIcon, ExclamationCircleIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Bars3Icon, CheckCircleIcon, ChatBubbleLeftRightIcon, ArrowLeftIcon, XCircleIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/24/solid';
@@ -268,14 +268,14 @@ var _getDashboardConfigInstance = () => {
   }
   return dashboardConfigInstance;
 };
-var DashboardConfigContext = React19.createContext(void 0);
+var DashboardConfigContext = React20.createContext(void 0);
 var DashboardProvider = ({ config: userProvidedConfig, children }) => {
-  const fullConfig = React19.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
+  const fullConfig = React20.useMemo(() => mergeWithDefaultConfig(userProvidedConfig), [userProvidedConfig]);
   _setDashboardConfigInstance(fullConfig);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     _setDashboardConfigInstance(fullConfig);
   }, [fullConfig]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     if (!fullConfig.theme) return;
     const styleId = "dashboard-core-theme-vars";
     let styleEl = document.getElementById(styleId);
@@ -301,7 +301,7 @@ var DashboardProvider = ({ config: userProvidedConfig, children }) => {
   return /* @__PURE__ */ jsx(DashboardConfigContext.Provider, { value: fullConfig, children });
 };
 var useDashboardConfig = () => {
-  const ctx = React19.useContext(DashboardConfigContext);
+  const ctx = React20.useContext(DashboardConfigContext);
   if (!ctx) throw new Error("useDashboardConfig must be used within a DashboardProvider");
   return ctx;
 };
@@ -1281,7 +1281,18 @@ var dashboardService = {
     const formattedStartDate = formatDate(startDate);
     const formattedEndDate = formatDate(endDate);
     try {
-      const { data, error } = await supabase.from(metricsTable).select("date, shift_id, efficiency, total_output, avg_cycle_time, ideal_output, avg_pph, pph_threshold, workspace_rank, idle_time").eq("workspace_id", workspaceUuid).gte("date", formattedStartDate).lte("date", formattedEndDate).order("date", { ascending: true }).order("shift_id", { ascending: true });
+      const { data, error } = await supabase.from(metricsTable).select(`
+                date, 
+                shift_id, 
+                efficiency, 
+                total_output, 
+                avg_cycle_time, 
+                avg_pph, 
+                pph_threshold, 
+                workspace_rank, 
+                idle_time,
+                total_day_output
+              `).eq("workspace_id", workspaceUuid).gte("date", formattedStartDate).lte("date", formattedEndDate).order("date", { ascending: true }).order("shift_id", { ascending: true });
       if (error) throw error;
       if (!data) return [];
       const transformedData = data.map((item) => ({
@@ -1291,7 +1302,8 @@ var dashboardService = {
         avg_efficiency: item.efficiency || 0,
         total_output: item.total_output || 0,
         avg_cycle_time: item.avg_cycle_time || 0,
-        ideal_output: item.ideal_output || 0,
+        ideal_output: item.total_day_output || 0,
+        // Use daily target directly from performance_metrics table
         avg_pph: item.avg_pph || 0,
         pph_threshold: item.pph_threshold || 0,
         workspace_rank: item.workspace_rank || 0,
@@ -4743,21 +4755,60 @@ var S3ClipsSupabaseService = class {
       return video || null;
     });
   }
+  /**
+   * Map percentile category to actual implementation
+   */
+  mapPercentileCategoryToType(category) {
+    switch (category) {
+      case "fast-cycles":
+        return { type: "fast-cycles", isPercentile: true };
+      case "slow-cycles":
+        return { type: "slow-cycles", isPercentile: true };
+      case "longest-idles":
+        return { type: "idle-times", isPercentile: true };
+      default:
+        return { type: null, isPercentile: false };
+    }
+  }
   /**
    * Get neighboring clips for navigation
    * Returns previous and next clips based on timestamp
+   * Handles both regular and percentile categories
    */
   async getNeighboringClips(workspaceId, date, shiftId, category, currentClipId, sopCategories) {
-    console.log(`[S3ClipsSupabase] Getting neighboring clips for ID: ${currentClipId}`);
-    const response = await this.fetchWithAuth("neighbors", {
-      workspaceId,
-      date,
-      shift: shiftId.toString(),
-      category,
-      currentClipId,
-      sopCategories: sopCategories || this.config.s3Config?.sopCategories?.default
-    });
-    return response.neighbors || { previous: null, next: null };
+    console.log(`[S3ClipsSupabase] Getting neighboring clips for ID: ${currentClipId}, category: ${category}`);
+    const percentileMapping = this.mapPercentileCategoryToType(category);
+    if (percentileMapping.isPercentile && percentileMapping.type) {
+      console.log(`[S3ClipsSupabase] Handling percentile category: ${category} -> ${percentileMapping.type}`);
+      const percentileClips = await this.getPercentileClips(
+        workspaceId,
+        date,
+        shiftId,
+        percentileMapping.type,
+        10,
+        // Default percentile, should be configurable
+        1e3
+        // Large limit to get all clips for navigation
+      );
+      const currentIndex = percentileClips.clips.findIndex((clip) => clip.id === currentClipId);
+      if (currentIndex === -1) {
+        return { previous: null, next: null };
+      }
+      return {
+        previous: currentIndex > 0 ? percentileClips.clips[currentIndex - 1] : null,
+        next: currentIndex < percentileClips.clips.length - 1 ? percentileClips.clips[currentIndex + 1] : null
+      };
+    } else {
+      const response = await this.fetchWithAuth("neighbors", {
+        workspaceId,
+        date,
+        shift: shiftId.toString(),
+        category,
+        currentClipId,
+        sopCategories: sopCategories || this.config.s3Config?.sopCategories?.default
+      });
+      return response.neighbors || { previous: null, next: null };
+    }
   }
   /**
    * Get clip by index
@@ -4867,6 +4918,93 @@ var S3ClipsSupabaseService = class {
       await this.batchFetchClips(workspaceId, date, shiftId, requests);
     }
   }
+  /**
+   * Get percentile-based clips (fast cycles, slow cycles, idle times)
+   */
+  async getPercentileClips(workspaceId, date, shiftId, type, percentile = 10, limit = 100) {
+    const cacheKey = `percentile:${workspaceId}:${date}:${shiftId}:${type}:${percentile}`;
+    return this.deduplicate(cacheKey, async () => {
+      console.log(`[S3ClipsSupabase] Fetching ${type} clips at ${percentile}% percentile`);
+      const startDate = `${date}T00:00:00Z`;
+      const endDate = `${date}T23:59:59Z`;
+      const response = await this.fetchWithAuth("percentile-clips", {
+        action: type,
+        workspaceId,
+        startDate,
+        endDate,
+        percentile,
+        shiftId: shiftId || null,
+        limit
+      });
+      console.log(`[S3ClipsSupabase] Fetched ${response.clips?.length || 0} ${type} clips`);
+      const transformedClips = (response.clips || []).map((clip) => ({
+        id: clip.clip_id,
+        src: clip.playlist,
+        // Raw playlist content
+        timestamp: new Date(clip.date).toLocaleTimeString("en-US", {
+          hour12: false,
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit"
+        }),
+        severity: this.getSeverityFromClipType(clip.clip_type_name),
+        description: this.getDescriptionFromClipType(clip.clip_type_name),
+        type: clip.clip_type_name,
+        originalUri: `clips:${clip.clip_id}`,
+        cycle_time_seconds: clip.metadata?.request?.metadata?.cycle_time ? clip.metadata.request.metadata.cycle_time / 20 : void 0,
+        creation_timestamp: clip.created_at,
+        percentile: clip.cycle_time_percentile || clip.idle_time_percentile
+      }));
+      return {
+        clips: transformedClips,
+        total: response.total || transformedClips.length,
+        hasMore: response.hasMore || false
+      };
+    });
+  }
+  /**
+   * Get workspace statistics
+   */
+  async getWorkspaceStats(workspaceId, startDate, endDate) {
+    const cacheKey = `stats:${workspaceId}:${startDate || "all"}:${endDate || "all"}`;
+    return this.deduplicate(cacheKey, async () => {
+      console.log(`[S3ClipsSupabase] Fetching workspace statistics`);
+      const response = await this.fetchWithAuth("workspace-stats", {
+        workspaceId,
+        startDate,
+        endDate
+      });
+      console.log(`[S3ClipsSupabase] Fetched workspace statistics`, response.stats);
+      return response.stats;
+    });
+  }
+  /**
+   * Helper to get severity from clip type
+   * Updated for new materialized view structure (only cycle_completion in 'cycle' category)
+   */
+  getSeverityFromClipType(clipType) {
+    switch (clipType) {
+      case "sop_deviations":
+        return "high";
+      case "idle_time":
+        return "medium";
+      case "cycle_completion":
+      default:
+        return "low";
+    }
+  }
+  /**
+   * Helper to get description from clip type
+   * Updated for new materialized view structure
+   */
+  getDescriptionFromClipType(clipType) {
+    const descriptions = {
+      "idle_time": "Idle Time Detected",
+      "sop_deviations": "SOP Deviations",
+      "cycle_completion": "Cycle Completion"
+    };
+    return descriptions[clipType] || "Analysis Clip";
+  }
 };
 var S3ClipsService2 = S3ClipsSupabaseService ;
 var VideoPrefetchManager = class extends EventEmitter {
@@ -5702,6 +5840,95 @@ var useSubscriptionManagerSafe = () => {
   const { subscriptionManager } = useContext(SubscriptionManagerContext);
   return subscriptionManager;
 };
+var defaultState = {
+  percentile: 10,
+  showFastCycles: true,
+  showSlowCycles: true,
+  showLongestIdles: true,
+  showIdleTime: true,
+  showCycleCompletion: true,
+  showBestCycleTime: false,
+  showWorstCycleTime: false,
+  showLongCycleTime: false,
+  showSopDeviations: false,
+  dateRange: {
+    start: /* @__PURE__ */ new Date(),
+    end: /* @__PURE__ */ new Date()
+  },
+  shiftFilter: void 0,
+  percentileRange: void 0,
+  isAdvancedPanelOpen: false,
+  isLoadingPercentileClips: false
+};
+var ClipFilterContext = createContext(void 0);
+var ClipFilterProvider = ({ children }) => {
+  const [state, setState] = useState(defaultState);
+  const updatePercentile = useCallback((percentile) => {
+    if (percentile >= 1 && percentile <= 100) {
+      setState((prev) => ({ ...prev, percentile }));
+    }
+  }, []);
+  const toggleClipType = useCallback((clipType) => {
+    setState((prev) => ({
+      ...prev,
+      [clipType]: !prev[clipType]
+    }));
+  }, []);
+  const updateDateRange = useCallback((start, end) => {
+    setState((prev) => ({
+      ...prev,
+      dateRange: { start, end }
+    }));
+  }, []);
+  const updateShiftFilter = useCallback((shiftId) => {
+    setState((prev) => ({
+      ...prev,
+      shiftFilter: shiftId
+    }));
+  }, []);
+  const setPercentileRange = useCallback((min, max) => {
+    if (min >= 0 && max <= 100 && min < max) {
+      setState((prev) => ({
+        ...prev,
+        percentileRange: { min, max }
+      }));
+    }
+  }, []);
+  const toggleAdvancedPanel = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      isAdvancedPanelOpen: !prev.isAdvancedPanelOpen
+    }));
+  }, []);
+  const setLoadingPercentileClips = useCallback((loading) => {
+    setState((prev) => ({
+      ...prev,
+      isLoadingPercentileClips: loading
+    }));
+  }, []);
+  const resetFilters = useCallback(() => {
+    setState(defaultState);
+  }, []);
+  const value = {
+    state,
+    updatePercentile,
+    toggleClipType,
+    updateDateRange,
+    updateShiftFilter,
+    setPercentileRange,
+    toggleAdvancedPanel,
+    resetFilters,
+    setLoadingPercentileClips
+  };
+  return /* @__PURE__ */ jsx(ClipFilterContext.Provider, { value, children });
+};
+var useClipFilter = () => {
+  const context = useContext(ClipFilterContext);
+  if (!context) {
+    throw new Error("useClipFilter must be used within ClipFilterProvider");
+  }
+  return context;
+};
 var DEFAULT_COMPANY_ID = "default-company-id";
 var useWorkspaceMetrics = (workspaceId) => {
   const supabase = useSupabase();
@@ -12932,7 +13159,7 @@ var MotionConfigContext = createContext({
 });
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs
-var PopChildMeasure = class extends React19.Component {
+var PopChildMeasure = class extends React20.Component {
   getSnapshotBeforeUpdate(prevProps) {
     const element = this.props.childRef.current;
     if (element && prevProps.isPresent && !this.props.isPresent) {
@@ -12987,7 +13214,7 @@ function PopChild({ children, isPresent }) {
       document.head.removeChild(style);
     };
   }, [isPresent]);
-  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React19.cloneElement(children, { ref }) });
+  return jsx(PopChildMeasure, { isPresent, childRef: ref, sizeRef: size, children: React20.cloneElement(children, { ref }) });
 }
 
 // ../../node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
@@ -13024,7 +13251,7 @@ var PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, pre
   useMemo(() => {
     presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
   }, [isPresent]);
-  React19.useEffect(() => {
+  React20.useEffect(() => {
     !isPresent && !presenceChildren.size && onExitComplete && onExitComplete();
   }, [isPresent]);
   if (mode === "popLayout") {
@@ -20308,7 +20535,7 @@ var LoadingPage = ({
   subMessage = "Please wait while we prepare your data",
   className
 }) => {
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     console.log("LoadingPage rendered with message:", message);
     const timeout = setTimeout(() => {
       console.warn("LoadingPage has been visible for more than 8 seconds. This might indicate an issue.");
@@ -20349,15 +20576,15 @@ var withAuth = (WrappedComponent2, options) => {
     requireAuth: true,
     ...options
   };
-  const WithAuthComponent = React19.memo(function WithAuthComponent2(props) {
+  const WithAuthComponent = React20.memo(function WithAuthComponent2(props) {
     const { session, loading, error } = useAuth();
     const router = useRouter();
-    React19.useEffect(() => {
+    React20.useEffect(() => {
       if (process.env.NODE_ENV === "development" && process.env.DEBUG_AUTH === "true") {
         console.log("withAuth state:", { loading, hasSession: !!session, requireAuth: defaultOptions.requireAuth });
       }
     }, [session, loading]);
-    React19.useEffect(() => {
+    React20.useEffect(() => {
       if (!loading && defaultOptions.requireAuth && !session && !error) {
         console.log("Redirecting to login from withAuth");
         router.replace(defaultOptions.redirectTo);
@@ -20733,11 +20960,11 @@ var BarChartComponent = ({
   aspect = 2,
   ...restOfChartProps
 }) => {
-  const containerRef = React19__default.useRef(null);
-  const [containerReady, setContainerReady] = React19__default.useState(false);
+  const containerRef = React20__default.useRef(null);
+  const [containerReady, setContainerReady] = React20__default.useState(false);
   const themeConfig = useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -20835,7 +21062,7 @@ var BarChartComponent = ({
   }
   return /* @__PURE__ */ jsx("div", { className: clsx("w-full", className), children: chartContent });
 };
-var BarChart = React19__default.memo(BarChartComponent, (prevProps, nextProps) => {
+var BarChart = React20__default.memo(BarChartComponent, (prevProps, nextProps) => {
   if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || prevProps.layout !== nextProps.layout || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect) {
     return false;
   }
@@ -20883,11 +21110,11 @@ var LineChartComponent = ({
   aspect = 2,
   ...restOfChartProps
 }) => {
-  const containerRef = React19__default.useRef(null);
-  const [containerReady, setContainerReady] = React19__default.useState(false);
+  const containerRef = React20__default.useRef(null);
+  const [containerReady, setContainerReady] = React20__default.useState(false);
   const themeConfig = useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -20986,7 +21213,7 @@ var LineChartComponent = ({
   }
   return /* @__PURE__ */ jsx("div", { className: clsx("w-full", className), children: chartContent });
 };
-var LineChart = React19__default.memo(LineChartComponent, (prevProps, nextProps) => {
+var LineChart = React20__default.memo(LineChartComponent, (prevProps, nextProps) => {
   if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect || JSON.stringify(prevProps.yAxisDomain) !== JSON.stringify(nextProps.yAxisDomain)) {
     return false;
   }
@@ -21063,7 +21290,7 @@ var OutputProgressChartComponent = ({
     ] }) })
   ] }) });
 };
-var OutputProgressChart = React19__default.memo(OutputProgressChartComponent);
+var OutputProgressChart = React20__default.memo(OutputProgressChartComponent);
 OutputProgressChart.displayName = "OutputProgressChart";
 var LargeOutputProgressChart = ({
   currentOutput,
@@ -21179,7 +21406,7 @@ var CycleTimeChartComponent = ({
     }
   ) }) });
 };
-var CycleTimeChart = React19__default.memo(CycleTimeChartComponent, (prevProps, nextProps) => {
+var CycleTimeChart = React20__default.memo(CycleTimeChartComponent, (prevProps, nextProps) => {
   if (prevProps.className !== nextProps.className) {
     return false;
   }
@@ -21205,8 +21432,8 @@ var CycleTimeOverTimeChart = ({
   className = ""
 }) => {
   const MAX_DATA_POINTS = 40;
-  const containerRef = React19__default.useRef(null);
-  const [containerReady, setContainerReady] = React19__default.useState(false);
+  const containerRef = React20__default.useRef(null);
+  const [containerReady, setContainerReady] = React20__default.useState(false);
   const getHourFromTimeString = (timeStr) => {
     const [hours, minutes] = timeStr.split(":");
     return parseInt(hours);
@@ -21217,10 +21444,10 @@ var CycleTimeOverTimeChart = ({
   };
   const displayData = getDisplayData(data);
   const DURATION = displayData.length;
-  const [animatedData, setAnimatedData] = React19__default.useState(Array(DURATION).fill(0));
-  const prevDataRef = React19__default.useRef(Array(DURATION).fill(0));
-  const animationFrameRef = React19__default.useRef(null);
-  const animateToNewData = React19__default.useCallback((targetData) => {
+  const [animatedData, setAnimatedData] = React20__default.useState(Array(DURATION).fill(0));
+  const prevDataRef = React20__default.useRef(Array(DURATION).fill(0));
+  const animationFrameRef = React20__default.useRef(null);
+  const animateToNewData = React20__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -21250,7 +21477,7 @@ var CycleTimeOverTimeChart = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const processedData = getDisplayData(data);
       animateToNewData(processedData);
@@ -21261,7 +21488,7 @@ var CycleTimeOverTimeChart = ({
       }
     };
   }, [data, animateToNewData]);
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -21504,7 +21731,7 @@ var CycleTimeOverTimeChart = ({
     }
   );
 };
-var Card = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -21516,7 +21743,7 @@ var Card = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -21525,7 +21752,7 @@ var CardHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -21537,7 +21764,7 @@ var CardTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "p",
   {
     ref,
@@ -21546,9 +21773,9 @@ var CardDescription = React19.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -21624,7 +21851,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React19.forwardRef(
+var Button = React20.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -21647,8 +21874,8 @@ var HourlyOutputChartComponent = ({
   idleTimeHourly,
   className = ""
 }) => {
-  const containerRef = React19__default.useRef(null);
-  const [containerReady, setContainerReady] = React19__default.useState(false);
+  const containerRef = React20__default.useRef(null);
+  const [containerReady, setContainerReady] = React20__default.useState(false);
   const getTimeFromTimeString = (timeStr) => {
     const [hours, minutes] = timeStr.split(":");
     const hour = parseInt(hours);
@@ -21657,7 +21884,7 @@ var HourlyOutputChartComponent = ({
     return { hour, minute, decimalHour };
   };
   const shiftStartTime = getTimeFromTimeString(shiftStart);
-  const { shiftDuration, shiftEndTime, hasPartialLastHour } = React19__default.useMemo(() => {
+  const { shiftDuration, shiftEndTime, hasPartialLastHour } = React20__default.useMemo(() => {
     console.log("[HourlyOutputChart] Calculating shift duration with:", {
       shiftStart,
       shiftEnd,
@@ -21692,12 +21919,12 @@ var HourlyOutputChartComponent = ({
   }, [shiftEnd, shiftStartTime.decimalHour]);
   const SHIFT_DURATION = shiftDuration;
   shiftEndTime ? shiftEndTime.hour : (shiftStartTime.hour + SHIFT_DURATION) % 24;
-  const [animatedData, setAnimatedData] = React19__default.useState(
+  const [animatedData, setAnimatedData] = React20__default.useState(
     () => Array(SHIFT_DURATION).fill(0)
   );
-  const prevDataRef = React19__default.useRef(Array(SHIFT_DURATION).fill(0));
-  const animationFrameRef = React19__default.useRef(null);
-  React19__default.useEffect(() => {
+  const prevDataRef = React20__default.useRef(Array(SHIFT_DURATION).fill(0));
+  const animationFrameRef = React20__default.useRef(null);
+  React20__default.useEffect(() => {
     setAnimatedData((prev) => {
       if (prev.length !== SHIFT_DURATION) {
         return Array(SHIFT_DURATION).fill(0);
@@ -21706,14 +21933,14 @@ var HourlyOutputChartComponent = ({
     });
     prevDataRef.current = Array(SHIFT_DURATION).fill(0);
   }, [SHIFT_DURATION]);
-  const [idleBarState, setIdleBarState] = React19__default.useState({
+  const [idleBarState, setIdleBarState] = React20__default.useState({
     visible: showIdleTime,
     key: 0,
     shouldAnimate: false
   });
-  const prevShowIdleTimeRef = React19__default.useRef(showIdleTime);
-  const stateUpdateTimeoutRef = React19__default.useRef(null);
-  React19__default.useEffect(() => {
+  const prevShowIdleTimeRef = React20__default.useRef(showIdleTime);
+  const stateUpdateTimeoutRef = React20__default.useRef(null);
+  React20__default.useEffect(() => {
     if (stateUpdateTimeoutRef.current) {
       clearTimeout(stateUpdateTimeoutRef.current);
     }
@@ -21738,7 +21965,7 @@ var HourlyOutputChartComponent = ({
       }
     };
   }, [showIdleTime]);
-  const animateToNewData = React19__default.useCallback((targetData) => {
+  const animateToNewData = React20__default.useCallback((targetData) => {
     const startData = [...prevDataRef.current];
     const startTime = performance.now();
     const duration = 1200;
@@ -21768,7 +21995,7 @@ var HourlyOutputChartComponent = ({
     }
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(prevDataRef.current)) {
       const shiftData = data.slice(0, SHIFT_DURATION);
       animateToNewData(shiftData);
@@ -21779,7 +22006,7 @@ var HourlyOutputChartComponent = ({
       }
     };
   }, [data, animateToNewData]);
-  React19__default.useEffect(() => {
+  React20__default.useEffect(() => {
     const checkContainerDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -21801,7 +22028,7 @@ var HourlyOutputChartComponent = ({
       clearTimeout(fallbackTimeout);
     };
   }, []);
-  const formatHour = React19__default.useCallback((hourIndex) => {
+  const formatHour = React20__default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -21825,7 +22052,7 @@ var HourlyOutputChartComponent = ({
     };
     return `${formatTime3(startHour, startMinute)}-${formatTime3(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const formatTimeRange = React19__default.useCallback((hourIndex) => {
+  const formatTimeRange = React20__default.useCallback((hourIndex) => {
     const isLastHour = hourIndex === SHIFT_DURATION - 1;
     const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
     const startHour = Math.floor(startDecimalHour) % 24;
@@ -21846,7 +22073,7 @@ var HourlyOutputChartComponent = ({
     };
     return `${formatTime3(startHour, startMinute)} - ${formatTime3(endHour, endMinute)}`;
   }, [shiftStartTime.decimalHour, SHIFT_DURATION, shiftEndTime]);
-  const chartData = React19__default.useMemo(() => {
+  const chartData = React20__default.useMemo(() => {
     return Array.from({ length: SHIFT_DURATION }, (_, i) => {
       const actualHour = (shiftStartTime.hour + i) % 24;
       const startMinute = shiftStartTime.minute;
@@ -21915,7 +22142,7 @@ var HourlyOutputChartComponent = ({
       };
     });
   }, [animatedData, data, pphThreshold, idleTimeHourly, shiftStartTime.hour, shiftStartTime.minute, shiftEndTime, formatHour, formatTimeRange, SHIFT_DURATION]);
-  const IdleBar = React19__default.useMemo(() => {
+  const IdleBar = React20__default.useMemo(() => {
     if (!idleBarState.visible) return null;
     return /* @__PURE__ */ jsx(
       Bar,
@@ -22240,7 +22467,7 @@ var HourlyOutputChartComponent = ({
     }
   );
 };
-var HourlyOutputChart = React19__default.memo(HourlyOutputChartComponent, (prevProps, nextProps) => {
+var HourlyOutputChart = React20__default.memo(HourlyOutputChartComponent, (prevProps, nextProps) => {
   if (prevProps.pphThreshold !== nextProps.pphThreshold || prevProps.shiftStart !== nextProps.shiftStart || prevProps.showIdleTime !== nextProps.showIdleTime || prevProps.className !== nextProps.className) {
     return false;
   }
@@ -22276,7 +22503,7 @@ function getTrendArrowAndColor(trend) {
     return { arrow: "\u2192", color: "text-gray-400" };
   }
 }
-var VideoCard = React19__default.memo(({
+var VideoCard = React20__default.memo(({
   workspace,
   hlsUrl,
   shouldPlay,
@@ -22425,7 +22652,7 @@ var VideoCard = React19__default.memo(({
 });
 VideoCard.displayName = "VideoCard";
 var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
-var VideoGridView = React19__default.memo(({
+var VideoGridView = React20__default.memo(({
   workspaces,
   selectedLine,
   className = "",
@@ -23203,7 +23430,7 @@ var PieChart4 = ({
       }
     );
   };
-  const CustomTooltip = ({ active, payload }) => {
+  const CustomTooltip2 = ({ active, payload }) => {
     if (active && payload && payload.length) {
       const data2 = payload[0];
       return /* @__PURE__ */ jsxs("div", { className: "bg-white px-3 py-2 shadow-lg rounded-lg border border-gray-200", children: [
@@ -23234,7 +23461,7 @@ var PieChart4 = ({
         children: dataWithPercentage.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
       }
     ),
-    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}) }),
+    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}) }),
     /* @__PURE__ */ jsx(
       Legend,
       {
@@ -23362,7 +23589,7 @@ var EmptyStateMessage = ({
   iconClassName
 }) => {
   let IconContent = null;
-  if (React19__default.isValidElement(iconType)) {
+  if (React20__default.isValidElement(iconType)) {
     IconContent = iconType;
   } else if (typeof iconType === "string") {
     const MappedIcon = IconMap[iconType];
@@ -26365,6 +26592,28 @@ var getOrdinal = (n) => {
   const v = n % 100;
   return n + (suffix[(v - 20) % 10] || suffix[v] || suffix[0]);
 };
+var CustomTooltip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return /* @__PURE__ */ jsxs("div", { className: "bg-white/95 backdrop-blur-sm p-3 rounded-lg shadow-lg border border-gray-100", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-gray-800 mb-1", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Actual:" }),
+          " ",
+          Math.round(payload[0].value),
+          " units"
+        ] }),
+        payload[0].payload.idealOutput > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-600", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Target:" }),
+          " ",
+          Math.round(payload[0].payload.idealOutput),
+          " units"
+        ] })
+      ] })
+    ] });
+  }
+  return null;
+};
 var WorkspaceMonthlyHistory = ({
   data,
   month,
@@ -26416,8 +26665,31 @@ var WorkspaceMonthlyHistory = ({
       });
     }
     const avgIdealOutput = validDaysCount > 0 ? totalIdealOutput / validDaysCount : 0;
-    return { data: dailyData, maxOutput, avgIdealOutput };
+    const calculatedMax = Math.max(maxOutput, avgIdealOutput);
+    const yAxisMax = calculatedMax > 0 ? calculatedMax * 1.1 : 100;
+    return { data: dailyData, maxOutput, avgIdealOutput, yAxisMax };
   }, [data, month, year, selectedShift]);
+  const yAxisTicks = useMemo(() => {
+    const max = chartData.yAxisMax;
+    const target = chartData.avgIdealOutput;
+    if (!max || max <= 0) return void 0;
+    const desiredIntervals = 4;
+    const roughStep = max / desiredIntervals;
+    const power = Math.pow(10, Math.floor(Math.log10(roughStep)));
+    const normalized = roughStep / power;
+    let step = 1 * power;
+    if (normalized >= 1.5 && normalized < 3) step = 2 * power;
+    else if (normalized >= 3 && normalized < 7) step = 5 * power;
+    else if (normalized >= 7) step = 10 * power;
+    const ticks = [];
+    for (let v = 0; v <= max; v += step) {
+      ticks.push(Math.round(v));
+    }
+    if (target > 0) {
+      ticks.push(Math.round(target));
+    }
+    return Array.from(new Set(ticks)).filter((v) => v >= 0 && v <= max).sort((a, b) => a - b);
+  }, [chartData.yAxisMax, chartData.avgIdealOutput]);
   const pieChartData = useMemo(() => {
     const validShifts = data.map((d) => selectedShift === "day" ? d.dayShift : d.nightShift).filter(hasRealData);
     if (validShifts.length === 0) return [];
@@ -26627,24 +26899,18 @@ var WorkspaceMonthlyHistory = ({
             }, children: [
               metrics2?.avgEfficiency ?? 0,
               "%"
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-gray-500 text-center mt-1", children: [
-              new Date(year, month).toLocaleString("default", { month: "short" }),
-              " avg"
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4", children: [
             /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-600 text-center mb-1", children: "Avg Daily Output" }),
-            /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-center text-gray-900", children: metrics2?.avgDailyOutput?.toLocaleString?.() ?? 0 }),
-            /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-500 text-center mt-1", children: "units/day" })
+            /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-center text-gray-900", children: metrics2?.avgDailyOutput?.toLocaleString?.() ?? 0 })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4", children: [
             /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-600 text-center mb-1", children: "Avg Cycle Time" }),
             /* @__PURE__ */ jsxs("div", { className: "text-2xl font-bold text-center text-gray-900", children: [
               metrics2?.avgCycleTime ?? 0,
               "s"
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "text-[10px] text-gray-500 text-center mt-1", children: "per unit" })
+            ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4", children: [
@@ -26708,43 +26974,55 @@ var WorkspaceMonthlyHistory = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex-1", children: [
           /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-3", children: "Daily Output" }),
-          /* @__PURE__ */ jsx("div", { style: { height: "200px" }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx("div", { style: { height: "220px" }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
             BarChart$1,
             {
               data: chartData.data,
-              margin: { top: 5, right: 5, bottom: 35, left: 5 },
+              margin: { top: 20, right: 10, bottom: 40, left: 10 },
               children: [
                 /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#f3f4f6" }),
                 /* @__PURE__ */ jsx(
                   XAxis,
                   {
                     dataKey: "hour",
-                    tick: { fontSize: 9, fill: "#9ca3af" },
+                    tick: { fontSize: 10, fill: "#6b7280" },
                     interval: 0,
                     angle: -45,
-                    textAnchor: "end"
+                    textAnchor: "end",
+                    height: 60
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   YAxis,
                   {
-                    tick: { fontSize: 9, fill: "#9ca3af" },
-                    domain: [0, "dataMax"],
-                    width: 30
+                    domain: [0, chartData.yAxisMax],
+                    width: 35,
+                    ticks: yAxisTicks,
+                    tick: (props) => {
+                      const { x, y, payload } = props;
+                      const value = Math.round(payload.value);
+                      const targetValue = Math.round(chartData.avgIdealOutput);
+                      const isTarget = Math.abs(value - targetValue) < 1 && targetValue > 0;
+                      return /* @__PURE__ */ jsx(
+                        "text",
+                        {
+                          x: x - 5,
+                          y: y + 4,
+                          textAnchor: "end",
+                          fontSize: "10",
+                          fill: isTarget ? "#E34329" : "#6b7280",
+                          fontWeight: isTarget ? "600" : "normal",
+                          children: value < 1e-3 ? "" : value.toString()
+                        }
+                      );
+                    }
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   Tooltip,
                   {
                     cursor: false,
-                    contentStyle: {
-                      backgroundColor: "rgba(255, 255, 255, 0.95)",
-                      border: "1px solid #e5e7eb",
-                      borderRadius: "6px",
-                      fontSize: "11px",
-                      padding: "8px"
-                    },
-                    labelStyle: { fontSize: "11px", fontWeight: "600" }
+                    content: CustomTooltip
                   }
                 ),
                 chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsx(
@@ -26752,40 +27030,68 @@ var WorkspaceMonthlyHistory = ({
                   {
                     y: chartData.avgIdealOutput,
                     stroke: "#E34329",
-                    strokeDasharray: "3 3",
+                    strokeDasharray: "5 5",
                     strokeWidth: 2
                   }
                 ),
-                /* @__PURE__ */ jsx(Bar, { dataKey: "output", radius: [3, 3, 0, 0], children: chartData.data.map((entry, index) => /* @__PURE__ */ jsx(
-                  Cell,
-                  {
-                    fill: entry.output === 0 ? "#f3f4f6" : entry.color,
-                    style: {
-                      filter: "brightness(1)",
-                      transition: "filter 0.3s ease, transform 0.3s ease",
-                      cursor: "pointer"
-                    },
-                    onMouseEnter: (e) => {
-                      const target = e.target;
-                      target.style.filter = "brightness(1.1)";
-                      target.style.transform = "translateY(-4px)";
+                /* @__PURE__ */ jsxs(Bar, { dataKey: "output", radius: [4, 4, 0, 0], children: [
+                  chartData.data.map((entry, index) => /* @__PURE__ */ jsx(
+                    Cell,
+                    {
+                      fill: entry.output === 0 ? "#f3f4f6" : entry.color,
+                      style: {
+                        filter: "brightness(1)",
+                        transition: "all 0.3s ease",
+                        cursor: entry.output > 0 ? "pointer" : "default"
+                      },
+                      onMouseEnter: (e) => {
+                        if (entry.output > 0) {
+                          const target = e.target;
+                          target.style.filter = "brightness(1.1)";
+                          target.style.transform = "translateY(-2px)";
+                        }
+                      },
+                      onMouseLeave: (e) => {
+                        const target = e.target;
+                        target.style.filter = "brightness(1)";
+                        target.style.transform = "translateY(0)";
+                      }
                     },
-                    onMouseLeave: (e) => {
-                      const target = e.target;
-                      target.style.filter = "brightness(1)";
-                      target.style.transform = "translateY(0)";
+                    `cell-${index}`
+                  )),
+                  /* @__PURE__ */ jsx(
+                    LabelList,
+                    {
+                      dataKey: "originalOutput",
+                      position: "top",
+                      content: (props) => {
+                        const { x, y, width, value } = props;
+                        if (!value || value === 0) return null;
+                        return /* @__PURE__ */ jsx(
+                          "text",
+                          {
+                            x: x + width / 2,
+                            y: y - 5,
+                            textAnchor: "middle",
+                            fontSize: "11",
+                            fontWeight: "600",
+                            fill: "#374151",
+                            children: Math.round(value)
+                          }
+                        );
+                      }
                     }
-                  },
-                  `cell-${index}`
-                )) })
+                  )
+                ] })
               ]
             }
           ) }) }),
-          chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center gap-4 mt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-8 h-0.5 border-t border-dashed", style: { borderColor: "#E34329" } }),
-            /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-gray-500", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center gap-6 mt-3", children: chartData.avgIdealOutput > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-12 h-0.5 border-t-2 border-dashed", style: { borderColor: "#E34329" } }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-600", children: [
               "Target: ",
-              Math.round(chartData.avgIdealOutput)
+              Math.round(chartData.avgIdealOutput),
+              " units/day"
             ] })
           ] }) })
         ] })
@@ -27298,7 +27604,7 @@ function Skeleton({ className, ...props }) {
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -27314,7 +27620,7 @@ var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -27324,7 +27630,7 @@ var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -27334,7 +27640,7 @@ var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React19.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React20.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -27362,7 +27668,7 @@ var SelectContent = React19.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -27371,7 +27677,7 @@ var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -27387,7 +27693,7 @@ var SelectItem = React19.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -27680,7 +27986,7 @@ if (typeof document !== "undefined") {
     document.head.appendChild(style);
   }
 }
-var VideoPlayer = React19__default.forwardRef(({
+var VideoPlayer = React20__default.forwardRef(({
   src,
   poster,
   autoplay = false,
@@ -27965,7 +28271,7 @@ var VideoPlayer = React19__default.forwardRef(({
       setIsReady(false);
     }
   }, []);
-  React19__default.useImperativeHandle(ref, () => ({
+  React20__default.useImperativeHandle(ref, () => ({
     player: playerRef.current,
     play,
     pause,
@@ -28645,6 +28951,47 @@ function useWorkspaceCrop(workspaceId) {
   }, [workspaceId]);
   return { crop, isLoading, error };
 }
+var FilterDialogTrigger = ({
+  className = ""
+}) => {
+  const { state, toggleAdvancedPanel } = useClipFilter();
+  const activeFiltersCount = [
+    state.showFastCycles,
+    state.showSlowCycles,
+    state.showLongestIdles,
+    state.showCycleCompletion,
+    state.showIdleTime
+  ].filter(Boolean).length;
+  const isDefaultPercentile = state.percentile === 10;
+  const isDefaultShift = state.shiftFilter === void 0;
+  const hasCustomFilters = !isDefaultPercentile || !isDefaultShift || activeFiltersCount < 5;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: toggleAdvancedPanel,
+      className: `relative group p-2.5 bg-gradient-to-r from-blue-50 to-indigo-50 hover:from-blue-100 hover:to-indigo-100 border border-blue-200/60 hover:border-blue-300 rounded-xl transition-all duration-200 hover:shadow-lg hover:shadow-blue-100/50 ${className}`,
+      title: "Advanced Filters",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Sliders, { className: "h-5 w-5 text-blue-600 group-hover:text-blue-700 transition-colors" }),
+          hasCustomFilters && /* @__PURE__ */ jsx(Sparkles, { className: "absolute -top-1 -right-1 h-3 w-3 text-yellow-500 animate-pulse" })
+        ] }),
+        hasCustomFilters && /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -right-1 bg-gradient-to-r from-yellow-400 to-orange-400 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center shadow-lg animate-bounce", children: activeFiltersCount < 5 ? activeFiltersCount : "!" }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 mb-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-semibold", children: "Advanced Filters" }),
+            /* @__PURE__ */ jsx("div", { className: "text-gray-300", children: hasCustomFilters ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              !isDefaultPercentile && `${state.percentile}% percentile`,
+              !isDefaultShift && ` \u2022 Shift ${state.shiftFilter === 0 ? "Day" : "Night"}`,
+              activeFiltersCount < 5 && ` \u2022 ${activeFiltersCount}/5 types`
+            ] }) : "Default settings" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-full right-4 w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-gray-900" })
+        ] })
+      ]
+    }
+  );
+};
 var getSeverityIcon = (severity) => {
   switch (severity) {
     case "high":
@@ -28708,6 +29055,10 @@ var FileManagerFilters = ({
   const [loadingCategories, setLoadingCategories] = useState(/* @__PURE__ */ new Set());
   const [categoryPages, setCategoryPages] = useState({});
   const [categoryHasMore, setCategoryHasMore] = useState({});
+  const { state: filterState, updatePercentile } = useClipFilter();
+  const [percentileCounts, setPercentileCounts] = useState({});
+  const [percentileClips, setPercentileClips] = useState({});
+  const [loadingPercentile, setLoadingPercentile] = useState(false);
   const fetchClipMetadata = useCallback(async (categoryId, page = 1) => {
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for clip metadata fetch");
@@ -28767,6 +29118,91 @@ var FileManagerFilters = ({
       return null;
     }
   };
+  const fetchPercentileClips = useCallback(async (type) => {
+    if (!workspaceId || !date || shift === void 0) {
+      console.warn("[FileManager] Missing required params for percentile clips fetch");
+      return;
+    }
+    try {
+      const startDate = `${date}T00:00:00Z`;
+      const endDate = `${date}T23:59:59Z`;
+      const response = await fetch("/api/clips/supabase", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${await getAuthToken4()}`
+        },
+        body: JSON.stringify({
+          action: "percentile-clips",
+          workspaceId,
+          startDate,
+          endDate,
+          percentile: filterState.percentile,
+          shiftId: shift,
+          limit: 50,
+          // The actual percentile action (fast-cycles, slow-cycles, idle-times)
+          percentileAction: type
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status}`);
+      }
+      const data = await response.json();
+      setPercentileClips((prev) => ({
+        ...prev,
+        [type]: data.clips || []
+      }));
+      setPercentileCounts((prev) => ({
+        ...prev,
+        [type]: data.total || 0
+      }));
+      console.log(`[FileManager] Loaded ${data.clips?.length || 0} ${type} clips (percentile: ${filterState.percentile}%)`);
+    } catch (error) {
+      console.error(`[FileManager] Error fetching ${type} clips:`, error);
+    }
+  }, [workspaceId, date, shift, filterState.percentile]);
+  useEffect(() => {
+    if (workspaceId && date && shift !== void 0) {
+      setLoadingPercentile(true);
+      Promise.all([
+        fetchPercentileClips("fast-cycles"),
+        fetchPercentileClips("slow-cycles")
+        // fetchPercentileClips('idle-times') // Temporarily commented out
+      ]).finally(() => {
+        setLoadingPercentile(false);
+      });
+    }
+  }, [fetchPercentileClips]);
+  const shouldShowCategory = useCallback((categoryId) => {
+    switch (categoryId) {
+      case "fast-cycles":
+        return filterState.showFastCycles;
+      case "slow-cycles":
+        return filterState.showSlowCycles;
+      case "longest-idles":
+        return false;
+      // filterState.showLongestIdles; // Temporarily disabled
+      case "cycle_completion":
+        return filterState.showCycleCompletion;
+      case "idle_time":
+        return filterState.showIdleTime;
+      case "sop_deviations":
+        return filterState.showSopDeviations;
+      default:
+        return true;
+    }
+  }, [filterState]);
+  const getPercentileIcon = useCallback((type, isExpanded, colorClasses) => {
+    const iconMap = {
+      "fast-cycles": { icon: TrendingUp, color: "text-green-600" },
+      "slow-cycles": { icon: TrendingDown, color: "text-red-600" },
+      "longest-idles": { icon: Clock, color: "text-orange-600" }
+    };
+    const config = iconMap[type];
+    if (!config) return null;
+    const IconComponent = config.icon;
+    return isExpanded ? /* @__PURE__ */ jsx(FolderOpen, { className: `h-4 w-4 ${config.color}` }) : /* @__PURE__ */ jsx(IconComponent, { className: `h-4 w-4 ${config.color}` });
+  }, []);
   const filterTree = useMemo(() => {
     const tree = [];
     categories.forEach((category) => {
@@ -28778,7 +29214,7 @@ var FileManagerFilters = ({
           (clip) => clip.description.toLowerCase().includes(searchTerm.toLowerCase()) || clip.clip_timestamp.includes(searchTerm) || clip.severity.toLowerCase().includes(searchTerm.toLowerCase())
         );
       }
-      if (categoryCount > 0) {
+      if (categoryCount > 0 && shouldShowCategory(category.id)) {
         const colorClasses = getColorClasses(category.color);
         const clipNodes = filteredClips.map((clip) => {
           const timeString = new Date(clip.clip_timestamp).toLocaleTimeString("en-US", {
@@ -28802,6 +29238,8 @@ var FileManagerFilters = ({
         tree.push({
           id: category.id,
           label: category.label,
+          subtitle: category.subtitle || category.description,
+          description: category.description,
           type: "category",
           count: categoryCount,
           // Use API count
@@ -28812,8 +29250,84 @@ var FileManagerFilters = ({
         });
       }
     });
+    const percentileCategories = [
+      {
+        id: "fast-cycles",
+        label: "Fast Cycles",
+        subtitle: `Top ${filterState.percentile}% fastest performance`,
+        description: `Top ${filterState.percentile}% fastest performance`,
+        type: "percentile-category",
+        count: percentileCounts["fast-cycles"] || 0,
+        icon: getPercentileIcon("fast-cycles", expandedNodes.has("fast-cycles"), { text: "text-green-600" }),
+        color: "green",
+        percentileType: "fast-cycles",
+        isPercentile: true,
+        children: (percentileClips["fast-cycles"] || []).map((clip, index) => ({
+          id: clip.id,
+          // Remove prefix to match currentVideoId
+          label: `${clip.timestamp} - ${clip.description}${clip.cycle_time_seconds ? ` (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
+          type: "video",
+          icon: getSeverityIcon(clip.severity),
+          timestamp: clip.creation_timestamp,
+          severity: clip.severity,
+          clipId: clip.id,
+          categoryId: "fast-cycles"
+        }))
+      },
+      {
+        id: "slow-cycles",
+        label: "Slow Cycles",
+        subtitle: `Top ${filterState.percentile}% slowest performance`,
+        description: `Top ${filterState.percentile}% slowest performance`,
+        type: "percentile-category",
+        count: percentileCounts["slow-cycles"] || 0,
+        icon: getPercentileIcon("slow-cycles", expandedNodes.has("slow-cycles"), { text: "text-red-600" }),
+        color: "red",
+        percentileType: "slow-cycles",
+        isPercentile: true,
+        children: (percentileClips["slow-cycles"] || []).map((clip, index) => ({
+          id: clip.id,
+          // Remove prefix to match currentVideoId
+          label: `${clip.timestamp} - ${clip.description}${clip.cycle_time_seconds ? ` (${clip.cycle_time_seconds.toFixed(1)}s)` : ""}`,
+          type: "video",
+          icon: getSeverityIcon(clip.severity),
+          timestamp: clip.creation_timestamp,
+          severity: clip.severity,
+          clipId: clip.id,
+          categoryId: "slow-cycles"
+        }))
+      }
+      // Temporarily commented out longest idle times
+      /* {
+        id: 'longest-idles',
+        label: 'Longest Idle Times',
+        subtitle: `Top ${filterState.percentile}% longest idle periods`,
+        description: `Top ${filterState.percentile}% longest idle periods`,
+        type: 'percentile-category' as const,
+        count: percentileCounts['idle-times'] || 0,
+        icon: getPercentileIcon('longest-idles', expandedNodes.has('longest-idles'), { text: 'text-orange-600' }),
+        color: 'orange',
+        percentileType: 'idle-times' as const,
+        isPercentile: true,
+        children: (percentileClips['idle-times'] || []).map((clip, index) => ({
+          id: clip.id, // Remove prefix to match currentVideoId
+          label: `${clip.timestamp} - ${clip.description}${clip.cycle_time_seconds ? ` (${clip.cycle_time_seconds.toFixed(1)}s)` : ''}`,
+          type: 'video' as const,
+          icon: getSeverityIcon(clip.severity),
+          timestamp: clip.creation_timestamp,
+          severity: clip.severity,
+          clipId: clip.id,
+          categoryId: 'longest-idles'
+        }))
+      } */
+    ];
+    percentileCategories.forEach((category) => {
+      if (category.count > 0 && shouldShowCategory(category.id)) {
+        tree.unshift(category);
+      }
+    });
     return tree;
-  }, [categories, expandedNodes, searchTerm, counts, clipMetadata]);
+  }, [categories, expandedNodes, searchTerm, counts, clipMetadata, filterState.percentile, percentileCounts, percentileClips, shouldShowCategory, getPercentileIcon]);
   const toggleExpanded = (nodeId) => {
     const newExpanded = new Set(expandedNodes);
     if (newExpanded.has(nodeId)) {
@@ -28829,7 +29343,7 @@ var FileManagerFilters = ({
     setExpandedNodes(newExpanded);
   };
   const handleNodeClick = (node) => {
-    if (node.type === "category") {
+    if (node.type === "category" || node.type === "percentile-category") {
       toggleExpanded(node.id);
       onFilterChange(node.id);
     } else if (node.type === "video") {
@@ -28848,7 +29362,7 @@ var FileManagerFilters = ({
     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 hasChildren = (node.count || 0) > 0;
     const colorClasses = node.color ? getColorClasses(node.color) : null;
     return /* @__PURE__ */ jsxs("div", { className: "select-none animate-in", children: [
       /* @__PURE__ */ jsxs(
@@ -28865,25 +29379,26 @@ var FileManagerFilters = ({
                   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"}` })
+                children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: `text-slate-600 group-hover:text-blue-600 transition-colors duration-200 ${node.type === "category" || node.type === "percentile-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" || node.type === "percentile-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__ */ jsx("div", { className: `flex-shrink-0 mr-3 ${node.type === "category" || node.type === "percentile-category" ? "p-2 rounded-lg shadow-sm group-hover:scale-110 transition-transform duration-200" : "p-0.5"} ${colorClasses && (node.type === "category" || node.type === "percentile-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 }),
+                /* @__PURE__ */ jsx("div", { className: `font-semibold tracking-tight ${node.type === "category" || node.type === "percentile-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 === "category" && categories.find((c) => c.id === node.id)?.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: categories.find((c) => c.id === node.id)?.description }),
+                node.type === "percentile-category" && node.subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5 font-normal", children: node.subtitle }),
                 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 }) })
+              node.count !== void 0 && (node.type === "category" || node.type === "percentile-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 && node.type === "category" && /* @__PURE__ */ jsx("div", { className: "mt-2 ml-3 animate-in border-l-2 border-slate-100 pl-3", children: /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-y-auto space-y-1 scrollbar-thin scrollbar-track-slate-100 scrollbar-thumb-slate-300", children: [
+      hasChildren && isExpanded && (node.type === "category" || node.type === "percentile-category") && /* @__PURE__ */ jsx("div", { className: "mt-2 ml-3 animate-in border-l-2 border-slate-100 pl-3", children: /* @__PURE__ */ jsxs("div", { className: "max-h-64 overflow-y-auto space-y-1 scrollbar-thin scrollbar-track-slate-100 scrollbar-thumb-slate-300", children: [
         node.children.map((child) => renderNode(child, depth + 1)),
         loadingCategories.has(`${node.id}-${(categoryPages[node.id] || 0) + 1}`) && /* @__PURE__ */ jsx("div", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center text-sm text-slate-500", children: [
           /* @__PURE__ */ jsx("div", { className: "animate-spin mr-2 h-4 w-4 border-2 border-slate-300 border-t-blue-500 rounded-full" }),
@@ -28909,11 +29424,14 @@ var FileManagerFilters = ({
     ] }, 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: "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 justify-between", 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: "hidden", children: /* @__PURE__ */ jsx(FilterDialogTrigger, {}) })
     ] }) }),
-    /* @__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: "hidden 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",
@@ -28927,7 +29445,7 @@ var FileManagerFilters = ({
       ),
       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__ */ jsxs("div", { className: "px-4 py-3 h-[calc(100%-8rem)] 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" }) }),
@@ -28959,6 +29477,301 @@ var FileManagerFilters = ({
     ] })
   ] });
 };
+var PERCENTILE_PRESETS = [5, 10, 15, 20, 25, 30];
+var AdvancedFilterDialog = ({
+  onApply
+}) => {
+  const {
+    state,
+    updatePercentile,
+    toggleClipType,
+    resetFilters,
+    toggleAdvancedPanel
+  } = useClipFilter();
+  const [customPercentile, setCustomPercentile] = useState(state.percentile.toString());
+  useEffect(() => {
+    setCustomPercentile(state.percentile.toString());
+  }, [state.percentile]);
+  const handlePercentileChange = (value) => {
+    updatePercentile(value);
+    setCustomPercentile(value.toString());
+  };
+  const handleCustomPercentileSubmit = () => {
+    const value = parseInt(customPercentile);
+    if (!isNaN(value) && value >= 1 && value <= 100) {
+      updatePercentile(value);
+    }
+  };
+  const handleClipTypeToggle = (clipType) => {
+    toggleClipType(clipType);
+  };
+  const handleApply = () => {
+    onApply?.();
+    toggleAdvancedPanel();
+  };
+  const handleReset = () => {
+    resetFilters();
+    setCustomPercentile("10");
+  };
+  if (!state.isAdvancedPanelOpen) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/30 backdrop-blur-sm z-50 transition-opacity duration-300",
+        onClick: toggleAdvancedPanel
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/20 w-full max-w-2xl max-h-[80vh] overflow-hidden transform transition-all duration-300 scale-100",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 px-6 py-4 border-b border-gray-100/80", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "p-2 bg-blue-100 rounded-xl", children: /* @__PURE__ */ jsx(Sliders, { className: "h-6 w-6 text-blue-600" }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Clip Filters" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: "Customize your clip exploration experience" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: toggleAdvancedPanel,
+                className: "p-2 hover:bg-white/50 rounded-xl transition-colors",
+                children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5 text-gray-500" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-8 overflow-y-auto max-h-[60vh]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "p-2 bg-gradient-to-r from-emerald-100 to-blue-100 rounded-lg", children: /* @__PURE__ */ jsx(Activity, { className: "h-5 w-5 text-emerald-600" }) }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Performance Percentile" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: "Filter clips by performance ranking" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-r from-gray-50 to-blue-50 rounded-xl p-6 space-y-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700", children: "Percentile Range" }),
+                    /* @__PURE__ */ jsx("div", { className: "bg-white px-3 py-1.5 rounded-lg border border-blue-200", children: /* @__PURE__ */ jsxs("span", { className: "text-lg font-bold text-blue-600", children: [
+                      "Top ",
+                      state.percentile,
+                      "%"
+                    ] }) })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "range",
+                      min: "5",
+                      max: "50",
+                      step: "1",
+                      value: state.percentile,
+                      onChange: (e) => handlePercentileChange(parseInt(e.target.value)),
+                      className: "w-full h-3 bg-gradient-to-r from-green-200 via-yellow-200 to-red-200 rounded-lg appearance-none cursor-pointer",
+                      style: {
+                        background: `linear-gradient(to right, #86efac 0%, #fde047 50%, #fca5a5 100%)`
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-500", children: [
+                    /* @__PURE__ */ jsx("span", { children: "5% (Best)" }),
+                    /* @__PURE__ */ jsx("span", { children: "25% (Average)" }),
+                    /* @__PURE__ */ jsx("span", { children: "50% (Worst)" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700", children: "Quick Presets" }),
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: PERCENTILE_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: () => handlePercentileChange(preset),
+                      className: `px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${state.percentile === preset ? "bg-blue-600 text-white shadow-lg shadow-blue-200 scale-105" : "bg-white text-gray-700 border border-gray-200 hover:bg-blue-50 hover:border-blue-300"}`,
+                      children: [
+                        "Top ",
+                        preset,
+                        "%"
+                      ]
+                    },
+                    preset
+                  )) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700", children: "Custom:" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "number",
+                        min: "1",
+                        max: "100",
+                        value: customPercentile,
+                        onChange: (e) => setCustomPercentile(e.target.value),
+                        onKeyPress: (e) => e.key === "Enter" && handleCustomPercentileSubmit(),
+                        className: "w-20 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                        placeholder: "10"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600", children: "%" }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: handleCustomPercentileSubmit,
+                        className: "px-3 py-2 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors",
+                        children: "Apply"
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "p-2 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg", children: /* @__PURE__ */ jsx(Layers, { className: "h-5 w-5 text-purple-600" }) }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Clip Categories" }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: "Choose which types of clips to display" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-br from-green-50 to-red-50 rounded-xl p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsxs("h4", { className: "text-sm font-bold text-gray-700 uppercase tracking-wide flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4 text-emerald-600" }),
+                    /* @__PURE__ */ jsx("span", { children: "Performance Extremes" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-3 cursor-pointer group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: state.showFastCycles,
+                          onChange: () => handleClipTypeToggle("showFastCycles"),
+                          className: "w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-green-600" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-green-700", children: "Fast Cycles" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-3 cursor-pointer group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: state.showSlowCycles,
+                          onChange: () => handleClipTypeToggle("showSlowCycles"),
+                          className: "w-4 h-4 text-red-600 border-gray-300 rounded focus:ring-red-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsx(TrendingDown, { className: "h-4 w-4 text-red-600" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-red-700", children: "Slow Cycles" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-3 cursor-pointer group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: state.showLongestIdles,
+                          onChange: () => handleClipTypeToggle("showLongestIdles"),
+                          className: "w-4 h-4 text-orange-600 border-gray-300 rounded focus:ring-orange-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-orange-600" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-orange-700", children: "Longest Idle Times" })
+                      ] })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 space-y-3", children: [
+                  /* @__PURE__ */ jsxs("h4", { className: "text-sm font-bold text-gray-700 uppercase tracking-wide flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-blue-600" }),
+                    /* @__PURE__ */ jsx("span", { children: "Standard Categories" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                    /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-3 cursor-pointer group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: state.showCycleCompletion,
+                          onChange: () => handleClipTypeToggle("showCycleCompletion"),
+                          className: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 text-blue-600" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-blue-700", children: "Cycle Completion" })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-3 cursor-pointer group", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          checked: state.showIdleTime,
+                          onChange: () => handleClipTypeToggle("showIdleTime"),
+                          className: "w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+                        /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-purple-600" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-purple-700", children: "Idle Time" })
+                      ] })
+                    ] })
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gray-50/80 px-6 py-4 border-t border-gray-100/80", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleReset,
+                className: "flex items-center space-x-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx("span", { children: "Reset All Filters" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: toggleAdvancedPanel,
+                  className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleApply,
+                  className: "flex items-center space-x-2 px-6 py-2 text-sm font-medium text-white bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg hover:from-blue-700 hover:to-indigo-700 shadow-lg shadow-blue-200 transition-all duration-200",
+                  children: [
+                    /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsx("span", { children: "Apply Filters" })
+                  ]
+                }
+              )
+            ] })
+          ] }) })
+        ]
+      }
+    ) })
+  ] });
+};
 function useClipsRealtimeUpdates({
   workspaceId,
   date,
@@ -29366,18 +30179,46 @@ var BottlenecksContent = ({
       }
     }
   }, [activeFilter, allVideos, mergedCounts]);
+  const isPercentileCategory = useCallback((categoryId) => {
+    return ["fast-cycles", "slow-cycles", "longest-idles"].includes(categoryId);
+  }, []);
+  const getClipTypesForPercentileCategory = useCallback((categoryId) => {
+    switch (categoryId) {
+      case "fast-cycles":
+      case "slow-cycles":
+        return ["cycle_completion"];
+      // Only cycle_completion now (best/worst/long moved to 'other')
+      case "longest-idles":
+        return ["idle_time"];
+      default:
+        return [categoryId];
+    }
+  }, []);
+  const getCategoryCount = useCallback((categoryId) => {
+    if (isPercentileCategory(categoryId)) {
+      if (isPercentileCategory(activeFilter) && activeFilter === categoryId) {
+        return allVideos.length;
+      }
+      return 0;
+    }
+    return mergedCounts[categoryId] || 0;
+  }, [isPercentileCategory, allVideos, mergedCounts, activeFilter]);
   const filteredVideos = useMemo(() => {
     if (!allVideos) return [];
     let filtered = [];
     if (activeFilter === "all") {
       filtered = [...allVideos];
+    } else if (isPercentileCategory(activeFilter)) {
+      const allowedTypes = getClipTypesForPercentileCategory(activeFilter);
+      filtered = allVideos.filter((video) => allowedTypes.includes(video.type));
+      console.log(`[BottlenecksContent] Filtering percentile category ${activeFilter}: found ${filtered.length} videos of types [${allowedTypes.join(", ")}]`);
     } else {
       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]);
+  }, [activeFilter, allVideos, isPercentileCategory, getClipTypesForPercentileCategory]);
   useEffect(() => {
     if (isNavigating && currentIndex < filteredVideos.length) {
       setIsNavigating(false);
@@ -29393,21 +30234,63 @@ var BottlenecksContent = ({
       updateActiveFilter(categoryId);
     }
     try {
-      const video = await s3ClipsService.getClipById(clipId);
-      if (video && isMountedRef.current) {
-        console.log(`[BottlenecksContent] Processing loaded video by ID: ${video.id}`);
-        setCurrentClipId(clipId);
-        setAllVideos([video]);
-        setCurrentIndex(0);
-        const counts = await s3ClipsService.getClipCounts(
-          workspaceId,
-          date || getOperationalDate(),
-          effectiveShift
+      if (isPercentileCategory(categoryId)) {
+        console.log(`[BottlenecksContent] Loading percentile category: ${categoryId}`);
+        const percentileType = categoryId === "fast-cycles" ? "fast-cycles" : categoryId === "slow-cycles" ? "slow-cycles" : "idle-times";
+        const { createClient: createClient5 } = await import('@supabase/supabase-js');
+        const supabase = createClient5(
+          process.env.NEXT_PUBLIC_SUPABASE_URL || "",
+          process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
         );
-        setCategoryPosition(1);
-        setIsNavigating(false);
-        console.log(`[BottlenecksContent] Successfully loaded clip by ID: ${video.id}`);
+        const { data: { session } } = await supabase.auth.getSession();
+        const authToken = session?.access_token;
+        if (!authToken) {
+          throw new Error("Authentication required");
+        }
+        const response = await fetch("/api/clips/supabase", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${authToken}`
+          },
+          body: JSON.stringify({
+            action: "percentile-clips",
+            percentileAction: percentileType,
+            workspaceId,
+            startDate: `${date || getOperationalDate()}T00:00:00Z`,
+            endDate: `${date || getOperationalDate()}T23:59:59Z`,
+            percentile: 10,
+            shiftId: effectiveShift,
+            limit: 100
+          })
+        });
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || `API error: ${response.status}`);
+        }
+        const percentileData = await response.json();
+        if (percentileData.clips && percentileData.clips.length > 0 && isMountedRef.current) {
+          const clickedClipIndex = percentileData.clips.findIndex((clip) => clip.id === clipId);
+          if (clickedClipIndex !== -1) {
+            setCurrentClipId(clipId);
+            setAllVideos(percentileData.clips);
+            setCurrentIndex(clickedClipIndex);
+            setCategoryPosition(clickedClipIndex + 1);
+            console.log(`[BottlenecksContent] Loaded ${percentileData.clips.length} ${categoryId} clips, playing #${clickedClipIndex + 1}`);
+          }
+        }
+      } else {
+        const video = await s3ClipsService.getClipById(clipId);
+        if (video && isMountedRef.current) {
+          console.log(`[BottlenecksContent] Processing loaded video by ID: ${video.id}`);
+          setCurrentClipId(clipId);
+          setAllVideos([video]);
+          setCurrentIndex(0);
+          setCategoryPosition(1);
+          console.log(`[BottlenecksContent] Successfully loaded clip by ID: ${video.id}`);
+        }
       }
+      setIsNavigating(false);
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
       if (isMountedRef.current) {
@@ -29441,69 +30324,107 @@ var BottlenecksContent = ({
     }
   }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById]);
   const handleNext = useCallback(async () => {
-    if (!isMountedRef.current || !currentClipId || !s3ClipsService) return;
+    if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
-    console.log(`[handleNext] Navigating from clip ID: ${currentClipId}`);
+    console.log(`[handleNext] Navigating in category: ${currentFilter}, current index: ${currentIndex}`);
     setIsNavigating(true);
     setError(null);
     try {
-      const neighbors = await s3ClipsService.getNeighboringClips(
-        workspaceId,
-        date || getOperationalDate(),
-        effectiveShift,
-        currentFilter,
-        currentClipId
-      );
-      if (neighbors.next) {
-        console.log(`[handleNext] Found next clip: ${neighbors.next.id}`);
-        setCurrentClipId(neighbors.next.id || null);
-        setAllVideos([neighbors.next]);
-        setCurrentIndex(0);
-        setCategoryPosition(categoryPosition + 1);
-        setIsNavigating(false);
-        videoRetryCountRef.current = 0;
+      if (isPercentileCategory(currentFilter)) {
+        if (currentIndex < allVideos.length - 1) {
+          const nextIndex = currentIndex + 1;
+          const nextVideo = allVideos[nextIndex];
+          console.log(`[handleNext] Moving to next percentile clip: ${nextVideo.id} (index ${nextIndex})`);
+          setCurrentClipId(nextVideo.id);
+          setCurrentIndex(nextIndex);
+          setCategoryPosition(nextIndex + 1);
+          setIsNavigating(false);
+        } else {
+          console.log(`[handleNext] Already at last clip in percentile category`);
+          setIsNavigating(false);
+        }
       } else {
-        console.log(`[handleNext] No next clip available`);
-        setIsNavigating(false);
+        if (!currentClipId || !s3ClipsService) {
+          setIsNavigating(false);
+          return;
+        }
+        const neighbors = await s3ClipsService.getNeighboringClips(
+          workspaceId,
+          date || getOperationalDate(),
+          effectiveShift,
+          currentFilter,
+          currentClipId
+        );
+        if (neighbors.next) {
+          console.log(`[handleNext] Found next clip: ${neighbors.next.id}`);
+          setCurrentClipId(neighbors.next.id || null);
+          setAllVideos([neighbors.next]);
+          setCurrentIndex(0);
+          setCategoryPosition(categoryPosition + 1);
+          setIsNavigating(false);
+          videoRetryCountRef.current = 0;
+        } else {
+          console.log(`[handleNext] No next clip available`);
+          setIsNavigating(false);
+        }
       }
     } catch (error2) {
-      console.error(`[handleNext] Error getting next clip:`, error2);
+      console.error(`[handleNext] Error navigating:`, error2);
       setError("Failed to navigate to next clip");
       setIsNavigating(false);
     }
-  }, [currentClipId, workspaceId, date, effectiveShift, s3ClipsService, categoryPosition]);
+  }, [currentIndex, allVideos, currentClipId, workspaceId, date, effectiveShift, s3ClipsService, categoryPosition, isPercentileCategory]);
   const handlePrevious = useCallback(async () => {
-    if (!isMountedRef.current || !currentClipId || !s3ClipsService) return;
+    if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
-    console.log(`[handlePrevious] Navigating from clip ID: ${currentClipId}`);
+    console.log(`[handlePrevious] Navigating in category: ${currentFilter}, current index: ${currentIndex}`);
     setIsNavigating(true);
     setError(null);
     try {
-      const neighbors = await s3ClipsService.getNeighboringClips(
-        workspaceId,
-        date || getOperationalDate(),
-        effectiveShift,
-        currentFilter,
-        currentClipId
-      );
-      if (neighbors.previous) {
-        console.log(`[handlePrevious] Found previous clip: ${neighbors.previous.id}`);
-        setCurrentClipId(neighbors.previous.id || null);
-        setAllVideos([neighbors.previous]);
-        setCurrentIndex(0);
-        setCategoryPosition(Math.max(1, categoryPosition - 1));
-        setIsNavigating(false);
-        videoRetryCountRef.current = 0;
+      if (isPercentileCategory(currentFilter)) {
+        if (currentIndex > 0) {
+          const prevIndex = currentIndex - 1;
+          const prevVideo = allVideos[prevIndex];
+          console.log(`[handlePrevious] Moving to previous percentile clip: ${prevVideo.id} (index ${prevIndex})`);
+          setCurrentClipId(prevVideo.id);
+          setCurrentIndex(prevIndex);
+          setCategoryPosition(prevIndex + 1);
+          setIsNavigating(false);
+        } else {
+          console.log(`[handlePrevious] Already at first clip in percentile category`);
+          setIsNavigating(false);
+        }
       } else {
-        console.log(`[handlePrevious] No previous clip available`);
-        setIsNavigating(false);
+        if (!currentClipId || !s3ClipsService) {
+          setIsNavigating(false);
+          return;
+        }
+        const neighbors = await s3ClipsService.getNeighboringClips(
+          workspaceId,
+          date || getOperationalDate(),
+          effectiveShift,
+          currentFilter,
+          currentClipId
+        );
+        if (neighbors.previous) {
+          console.log(`[handlePrevious] Found previous clip: ${neighbors.previous.id}`);
+          setCurrentClipId(neighbors.previous.id || null);
+          setAllVideos([neighbors.previous]);
+          setCurrentIndex(0);
+          setCategoryPosition(Math.max(1, categoryPosition - 1));
+          setIsNavigating(false);
+          videoRetryCountRef.current = 0;
+        } else {
+          console.log(`[handlePrevious] No previous clip available`);
+          setIsNavigating(false);
+        }
       }
     } catch (error2) {
-      console.error(`[handlePrevious] Error getting previous clip:`, error2);
+      console.error(`[handlePrevious] Error navigating:`, error2);
       setError("Failed to navigate to previous clip");
       setIsNavigating(false);
     }
-  }, [currentClipId, workspaceId, date, effectiveShift, s3ClipsService, categoryPosition]);
+  }, [currentIndex, allVideos, currentClipId, workspaceId, date, effectiveShift, s3ClipsService, categoryPosition, isPercentileCategory]);
   const currentVideo = useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;
@@ -29617,24 +30538,36 @@ var BottlenecksContent = ({
   };
   const getClipTypeLabel = (video) => {
     if (!video) return "";
+    const currentFilter = activeFilterRef.current;
+    if (isPercentileCategory(currentFilter)) {
+      const percentileValue = video.percentile?.toFixed(1);
+      switch (currentFilter) {
+        case "fast-cycles":
+          return `\u26A1 Fast Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+        case "slow-cycles":
+          return `\u{1F40C} Slow Cycle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+        case "longest-idles":
+          return `\u23F0 Long Idle ${percentileValue ? `(${percentileValue}%)` : ""}`;
+        default:
+          return video.description || "Performance Clip";
+      }
+    }
     switch (video.type) {
       case "low_value":
         return "Idle Moment";
       case "missing_quality_check":
         return "SOP Deviation";
-      case "best_cycle_time":
-        return "Best Cycle Time";
-      case "worst_cycle_time":
-        return "Worst Cycle Time";
       case "cycle_completion":
         return "Cycle Completion";
+      case "idle_time":
+        return "Idle Time";
       case "running_cycle":
         return "Running Cycle";
       case "setup_state":
         return "Setup State";
       case "bottleneck":
       default:
-        return "";
+        return video.description || "";
     }
   };
   if (!dashboardConfig?.s3Config) {
@@ -29690,22 +30623,22 @@ var BottlenecksContent = ({
               "button",
               {
                 onClick: handlePrevious,
-                disabled: categoryPosition <= 1 || (mergedCounts[activeFilter] || 0) === 0,
-                className: `p-2 rounded-full transition-colors ${categoryPosition <= 1 || (mergedCounts[activeFilter] || 0) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
+                disabled: categoryPosition <= 1 || getCategoryCount(activeFilter) === 0,
+                className: `p-2 rounded-full transition-colors ${categoryPosition <= 1 || getCategoryCount(activeFilter) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
                 "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: (mergedCounts[activeFilter] || 0) > 0 ? `${categoryPosition} / ${mergedCounts[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: getCategoryCount(activeFilter) > 0 ? `${categoryPosition} / ${getCategoryCount(activeFilter)}` : "0 / 0" }),
               error && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-600 font-medium", children: error })
             ] }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: handleNext,
-                disabled: categoryPosition >= (mergedCounts[activeFilter] || 0) || (mergedCounts[activeFilter] || 0) === 0,
-                className: `p-2 rounded-full transition-colors ${categoryPosition >= (mergedCounts[activeFilter] || 0) || (mergedCounts[activeFilter] || 0) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
+                disabled: categoryPosition >= getCategoryCount(activeFilter) || getCategoryCount(activeFilter) === 0,
+                className: `p-2 rounded-full transition-colors ${categoryPosition >= getCategoryCount(activeFilter) || getCategoryCount(activeFilter) === 0 ? "text-gray-300 cursor-not-allowed" : "text-gray-600 hover:bg-gray-100"}`,
                 "aria-label": "Next video",
                 children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-5 w-5" })
               }
@@ -29776,9 +30709,9 @@ var BottlenecksContent = ({
                     }
                   )
                 ] }) }),
-                (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 || currentVideo.type === "low_value" ? /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" ? "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: [
+                (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "idle_time" || currentVideo.type === "low_value" ? /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" || currentVideo.type === "idle_time" ? "bg-purple-400" : isPercentileCategory(activeFilterRef.current) ? activeFilterRef.current === "fast-cycles" ? "bg-green-600" : activeFilterRef.current === "slow-cycles" ? "bg-red-700" : "bg-orange-500" : currentVideo.type === "cycle_completion" ? "bg-blue-600" : "bg-gray-500"} mr-2 animate-pulse` }),
+                  (currentVideo.type === "cycle_completion" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds ? /* @__PURE__ */ jsxs("span", { className: "opacity-90 font-mono bg-black/30 px-2 py-0.5 rounded", children: [
                     "Cycle time: ",
                     currentVideo.cycle_time_seconds.toFixed(1),
                     "s"
@@ -29908,7 +30841,15 @@ var BottlenecksContent = ({
           className: "h-full"
         }
       ) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      AdvancedFilterDialog,
+      {
+        onApply: () => {
+          console.log("[BottlenecksContent] Advanced filters applied, will refresh clips...");
+        }
+      }
+    )
   ] });
 };
 var getEfficiencyColor = (efficiency) => {
@@ -30011,7 +30952,7 @@ var arePropsEqual = (prevProps, nextProps) => {
   return prevProps.data.efficiency === nextProps.data.efficiency && prevProps.data.trend_score === nextProps.data.trend_score && prevProps.data.workspace_id === nextProps.data.workspace_id && prevProps.data.workspace_name === nextProps.data.workspace_name && prevProps.isBottleneck === nextProps.isBottleneck && prevProps.isLowEfficiency === nextProps.isLowEfficiency && prevProps.isVeryLowEfficiency === nextProps.isVeryLowEfficiency && // Position doesn't need deep equality check as it's generally static
   prevProps.position.id === nextProps.position.id;
 };
-var WorkspaceGridItem = React19__default.memo(({
+var WorkspaceGridItem = React20__default.memo(({
   data,
   position,
   isBottleneck = false,
@@ -30104,7 +31045,7 @@ var WorkspaceGridItem = React19__default.memo(({
   );
 }, arePropsEqual);
 WorkspaceGridItem.displayName = "WorkspaceGridItem";
-var WorkspaceGrid = React19__default.memo(({
+var WorkspaceGrid = React20__default.memo(({
   workspaces,
   isPdfMode = false,
   customWorkspacePositions,
@@ -30298,7 +31239,7 @@ var KPICard = ({
 }) => {
   useThemeConfig();
   const { formatNumber } = useFormatNumber();
-  const trendInfo = React19__default.useMemo(() => {
+  const trendInfo = React20__default.useMemo(() => {
     let trendValue = trend || "neutral";
     if (change !== void 0 && trend === void 0) {
       trendValue = change > 0 ? "up" : change < 0 ? "down" : "neutral";
@@ -30321,7 +31262,7 @@ var KPICard = ({
     const shouldShowTrend = !(change === 0 && trend === void 0);
     return { trendValue, Icon: Icon2, colorClass, shouldShowTrend };
   }, [trend, change]);
-  const formattedValue = React19__default.useMemo(() => {
+  const formattedValue = React20__default.useMemo(() => {
     if (title === "Quality Compliance" && typeof value === "number") {
       return value.toFixed(1);
     }
@@ -30335,7 +31276,7 @@ var KPICard = ({
     }
     return value;
   }, [value, title]);
-  const formattedChange = React19__default.useMemo(() => {
+  const formattedChange = React20__default.useMemo(() => {
     if (change === void 0 || change === 0) return null;
     const absChange = Math.abs(change);
     return formatNumber(absChange, { minimumFractionDigits: 0, maximumFractionDigits: 1 });
@@ -31242,6 +32183,237 @@ var WorkspaceDisplayNameExample = () => {
     ] })
   ] });
 };
+var AdvancedFilterPanel = ({
+  className = "",
+  onApply
+}) => {
+  const {
+    state,
+    updatePercentile,
+    toggleClipType,
+    updateShiftFilter,
+    resetFilters,
+    toggleAdvancedPanel
+  } = useClipFilter();
+  const [customPercentile, setCustomPercentile] = useState(state.percentile.toString());
+  const handlePercentileChange = (value) => {
+    updatePercentile(value);
+    setCustomPercentile(value.toString());
+    onApply?.();
+  };
+  const handleShiftChange = (shiftId) => {
+    updateShiftFilter(shiftId);
+    onApply?.();
+  };
+  const handleClipTypeToggle = (clipType) => {
+    toggleClipType(clipType);
+    onApply?.();
+  };
+  const handleReset = () => {
+    resetFilters();
+    setCustomPercentile("10");
+    onApply?.();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `bg-white rounded-xl shadow-lg border border-gray-100 ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "p-4 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50 cursor-pointer rounded-t-xl",
+        onClick: toggleAdvancedPanel,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+            /* @__PURE__ */ jsx(Sliders, { className: "h-5 w-5 text-blue-600" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Advanced Filters" })
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "p-1 hover:bg-white/50 rounded-lg transition-colors", children: state.isAdvancedPanelOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-5 w-5 text-gray-600" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-5 w-5 text-gray-600" }) })
+        ] })
+      }
+    ),
+    state.isAdvancedPanelOpen && /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+          /* @__PURE__ */ jsx(Activity, { className: "h-4 w-4 text-blue-600" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-700", children: "Percentile:" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: "5",
+              max: "30",
+              step: "5",
+              value: state.percentile,
+              onChange: (e) => handlePercentileChange(parseInt(e.target.value)),
+              className: "w-24 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-sm font-semibold text-blue-600 min-w-[50px]", children: [
+            state.percentile,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: [5, 10, 15, 20].map((preset) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => handlePercentileChange(preset),
+            className: `px-2 py-1 text-xs font-medium rounded transition-colors ${state.percentile === preset ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"}`,
+            children: [
+              preset,
+              "%"
+            ]
+          },
+          preset
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+          /* @__PURE__ */ jsx(Layers, { className: "h-4 w-4 text-purple-600" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-700", children: "Types:" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-1 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: state.showFastCycles,
+                  onChange: () => handleClipTypeToggle("showFastCycles"),
+                  className: "w-3 h-3 text-blue-600 border-gray-300 rounded"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700", children: "Fast" })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-1 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: state.showSlowCycles,
+                  onChange: () => handleClipTypeToggle("showSlowCycles"),
+                  className: "w-3 h-3 text-blue-600 border-gray-300 rounded"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700", children: "Slow" })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-1 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: state.showLongestIdles,
+                  onChange: () => handleClipTypeToggle("showLongestIdles"),
+                  className: "w-3 h-3 text-blue-600 border-gray-300 rounded"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700", children: "LongIdle" })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-1 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: state.showCycleCompletion,
+                  onChange: () => handleClipTypeToggle("showCycleCompletion"),
+                  className: "w-3 h-3 text-blue-600 border-gray-300 rounded"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700", children: "Completion" })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center space-x-1 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: state.showIdleTime,
+                  onChange: () => handleClipTypeToggle("showIdleTime"),
+                  className: "w-3 h-3 text-blue-600 border-gray-300 rounded"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-700", children: "Idle" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 text-indigo-600" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-700", children: "Shift:" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleShiftChange(void 0),
+                className: `px-2 py-1 text-xs font-medium rounded transition-colors ${state.shiftFilter === void 0 ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+                children: "All"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleShiftChange(0),
+                className: `px-2 py-1 text-xs font-medium rounded transition-colors ${state.shiftFilter === 0 ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+                children: "Day"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleShiftChange(1),
+                className: `px-2 py-1 text-xs font-medium rounded transition-colors ${state.shiftFilter === 1 ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`,
+                children: "Night"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between pt-2 border-t border-gray-100", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleReset,
+            className: "flex items-center space-x-1 px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { children: "Reset" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              onApply?.();
+              toggleAdvancedPanel();
+            },
+            className: "flex items-center space-x-1 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(Filter, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { children: "Apply & Close" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    !state.isAdvancedPanelOpen && /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4 text-sm", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-gray-600", children: [
+        "Percentile: ",
+        /* @__PURE__ */ jsxs("span", { className: "font-semibold text-blue-600", children: [
+          state.percentile,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-gray-600", children: [
+        "Shift: ",
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-indigo-600", children: state.shiftFilter === void 0 ? "All" : state.shiftFilter === 0 ? "Day" : "Night" })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-gray-600", children: [
+        "Categories: ",
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-purple-600", children: [
+          state.showFastCycles && "Fast",
+          state.showSlowCycles && "Slow",
+          state.showLongestIdles && "Idle",
+          state.showCycleCompletion && "Completion"
+        ].filter(Boolean).join(", ") || "None" })
+      ] })
+    ] }) }) })
+  ] });
+};
 var HamburgerButton = ({
   onClick,
   className = "",
@@ -31274,7 +32446,7 @@ var Breadcrumbs = ({ items }) => {
       }
     }
   };
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React19__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: "mb-1 flex items-center space-x-1 text-xs font-medium text-gray-500 dark:text-gray-400", children: items.map((item, index) => /* @__PURE__ */ jsxs(React20__default.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-gray-400 dark:text-gray-500" }),
     /* @__PURE__ */ jsxs(
       "span",
@@ -33731,7 +34903,7 @@ var ThreadSidebar = ({
   ] });
 };
 var axelProfilePng = "/axel-profile.png";
-var ProfilePicture = React19__default.memo(({ alt = "Axel", className = "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12" }) => {
+var ProfilePicture = React20__default.memo(({ alt = "Axel", className = "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12" }) => {
   return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: `${className} rounded-xl overflow-hidden shadow-sm`, children: /* @__PURE__ */ jsx(
     "img",
     {
@@ -34622,7 +35794,7 @@ var AIAgentView = () => {
         barRadius: [4, 4, 0, 0]
         // Top corners rounded
       };
-      const CustomTooltip = ({ active, payload, label }) => {
+      const CustomTooltip2 = ({ active, payload, label }) => {
         if (active && payload && payload.length) {
           return /* @__PURE__ */ jsxs("div", { className: "bg-white px-4 py-3 shadow-lg rounded-lg border border-gray-200", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900 mb-1", children: label }),
@@ -34722,7 +35894,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsx(
               Bar,
               {
@@ -34766,7 +35938,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsx(
               Line,
               {
@@ -34886,7 +36058,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -34946,7 +36118,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -35110,7 +36282,7 @@ var AIAgentView = () => {
               Tooltip,
               {
                 cursor: { strokeDasharray: "3 3" },
-                content: /* @__PURE__ */ jsx(CustomTooltip, {})
+                content: /* @__PURE__ */ jsx(CustomTooltip2, {})
               }
             ),
             /* @__PURE__ */ jsx(
@@ -35180,7 +36352,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -35254,7 +36426,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip2, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -36440,7 +37612,7 @@ function HomeView({
                 animate: { opacity: 1, scale: 1 },
                 transition: { duration: 0.3 },
                 className: "h-full",
-                children: React19__default.createElement(WorkspaceGrid, {
+                children: React20__default.createElement(WorkspaceGrid, {
                   workspaces: memoizedWorkspaceMetrics,
                   lineNames,
                   factoryView: factoryViewId,
@@ -36466,7 +37638,7 @@ function HomeView({
                 animate: { opacity: 1, scale: 1 },
                 transition: { duration: 0.3 },
                 className: "h-full",
-                children: React19__default.createElement(WorkspaceGrid, {
+                children: React20__default.createElement(WorkspaceGrid, {
                   workspaces: [],
                   // Show empty grid while loading
                   lineNames,
@@ -36493,7 +37665,7 @@ function HomeView({
     }
   );
 }
-var AuthenticatedHomeView = withAuth(React19__default.memo(HomeView));
+var AuthenticatedHomeView = withAuth(React20__default.memo(HomeView));
 var HomeView_default = HomeView;
 function withWorkspaceDisplayNames(Component3, options = {}) {
   const {
@@ -37611,7 +38783,7 @@ var KPIDetailViewWithDisplayNames = withSelectedLineDisplayNames(KPIDetailView);
 var KPIDetailView_default = KPIDetailViewWithDisplayNames;
 var LineCard = ({ line, onClick, supervisorEnabled = false }) => {
   const { kpis, isLoading, error } = useLineKPIs({ lineId: line.id });
-  const isOnTrack = React19__default.useMemo(() => {
+  const isOnTrack = React20__default.useMemo(() => {
     if (!kpis) return null;
     return kpis.efficiency.value > 90;
   }, [kpis]);
@@ -39414,7 +40586,7 @@ var ShiftsView = ({
     ] })
   ] });
 };
-var AuthenticatedShiftsView = withAuth(React19__default.memo(ShiftsView));
+var AuthenticatedShiftsView = withAuth(React20__default.memo(ShiftsView));
 var ShiftsView_default = ShiftsView;
 
 // src/lib/constants/actions.ts
@@ -41330,7 +42502,7 @@ var TargetsView = ({
 };
 var TargetsViewWithDisplayNames = withAllWorkspaceDisplayNames(TargetsView);
 var TargetsView_default = TargetsViewWithDisplayNames;
-var AuthenticatedTargetsView = withAuth(React19__default.memo(TargetsViewWithDisplayNames));
+var AuthenticatedTargetsView = withAuth(React20__default.memo(TargetsViewWithDisplayNames));
 
 // src/views/workspace-detail-view.utils.ts
 var formatISTDate2 = (date = /* @__PURE__ */ new Date(), options) => {
@@ -42219,7 +43391,7 @@ var WorkspaceDetailView = ({
                 }
               )
             ] }),
-            activeTab === "bottlenecks" && /* @__PURE__ */ jsx(
+            activeTab === "bottlenecks" && /* @__PURE__ */ jsx(ClipFilterProvider, { children: /* @__PURE__ */ jsx(
               BottlenecksContent,
               {
                 workspaceId,
@@ -42228,7 +43400,7 @@ var WorkspaceDetailView = ({
                 shift,
                 className: "h-[calc(100vh-10rem)]"
               }
-            )
+            ) })
           ] })
         ] }),
         /* @__PURE__ */ jsx(
@@ -43304,4 +44476,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, 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, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAudioService, useAuth, useAuthConfig, useCanSaveTargets, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useTicketHistory, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealth, useWorkspaceHealthById, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, workspaceHealthService, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedWorkspaceHealthView, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ClipFilterProvider, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, MainLayout, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TimeDisplay_default as TimeDisplay, TimePickerDropdown, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useAllWorkspaceMetrics, useAnalyticsConfig, useAudioService, useAuth, useAuthConfig, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTheme, useThemeConfig, useThreads, useTicketHistory, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealth, useWorkspaceHealthById, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, workspaceHealthService, workspaceService };