@optifye/dashboard-core 6.10.13 → 6.10.14

package/dist/index.mjs

@@ -2,8 +2,8 @@ import * as React24 from 'react';
 import React24__default, { createContext, useRef, useCallback, useState, useMemo, useEffect, forwardRef, useImperativeHandle, useLayoutEffect, memo, useContext, 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, fromZonedTime } from 'date-fns-tz';
-import { subDays, format, parseISO, isValid, addMinutes, differenceInMinutes, formatDistanceToNow, isToday, isFuture, addDays, startOfDay, isBefore } from 'date-fns';
+import { fromZonedTime, toZonedTime, formatInTimeZone } from 'date-fns-tz';
+import { addMinutes, subDays, format, parseISO, isValid, differenceInMinutes, formatDistanceToNow, isToday, isFuture, addDays, startOfDay, isBefore, startOfMonth, endOfMonth, eachDayOfInterval, getDay, isSameDay, isWithinInterval, subMonths, addMonths } from 'date-fns';
 import mixpanel from 'mixpanel-browser';
 import { EventEmitter } from 'events';
 import { createClient, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js';
@@ -11,13 +11,13 @@ import Hls3, { Events, ErrorTypes } from 'hls.js';
 import useSWR from 'swr';
 import { noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds, memo as memo$1 } from 'motion-utils';
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
-import { Camera, ChevronDown, ChevronUp, Check, Map as Map$1, Video, ShieldCheck, Star, Award, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, AlertCircle, Loader2, Minus, ArrowDown, ArrowUp, ChevronLeft, ChevronRight, Pause, Play, Wrench, XCircle, Package, UserX, Zap, HelpCircle, AlertTriangle, Tag, Sparkles, TrendingUp, Settings2, CheckCircle2, RefreshCw, TrendingDown, FolderOpen, Folder, Sliders, Activity, Layers, Filter, Search, Edit2, CheckCircle, User, Users, Shield, Building2, Mail, Lock, ArrowRight, Info, Share2, Trophy, Target, Download, Sun, Moon, MousePointer, UserPlus, UserCog, Trash2, Eye, MoreVertical, BarChart3, MessageSquare, Menu, Send, Copy, UserCheck, LogOut, Settings, LifeBuoy, EyeOff, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, Map as Map$1, Video, ShieldCheck, Star, Award, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, AlertCircle, Loader2, Minus, ArrowDown, ArrowUp, ChevronLeft, ChevronRight, TrendingUp, Sparkles, Pause, Play, Wrench, XCircle, Package, UserX, Zap, HelpCircle, AlertTriangle, Tag, Palette, CheckCircle2, RefreshCw, TrendingDown, FolderOpen, Folder, Sliders, Activity, Layers, Filter, Search, Edit2, ArrowRight, CheckCircle, User, Users, Shield, Building2, Mail, Lock, Info, Share2, Trophy, Target, Download, Sun, Moon, MousePointer, UserPlus, UserCog, Trash2, Eye, MoreVertical, BarChart3, MessageSquare, Menu, Send, Copy, UserCheck, LogOut, Settings, LifeBuoy, EyeOff, UserCircle } from 'lucide-react';
 import { toast } from 'sonner';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, ReferenceLine, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, PieChart, Pie, Cell, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
-import { XMarkIcon, ArrowRightIcon, HomeIcon, TrophyIcon, ChartBarIcon, LightBulbIcon, AdjustmentsHorizontalIcon, ClockIcon, UsersIcon, TicketIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, HeartIcon, UserCircleIcon, ExclamationCircleIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Bars3Icon, CheckCircleIcon, ChatBubbleLeftRightIcon, ArrowLeftIcon, XCircleIcon, CalendarIcon, InformationCircleIcon, PlayCircleIcon } from '@heroicons/react/24/outline';
+import { XMarkIcon, ArrowRightIcon, HomeIcon, TrophyIcon, ChartBarIcon, LightBulbIcon, AdjustmentsHorizontalIcon, ClockIcon, UsersIcon, TicketIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, HeartIcon, UserCircleIcon, ExclamationCircleIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ChevronDownIcon, Bars3Icon, CheckCircleIcon, ChatBubbleLeftRightIcon, ArrowLeftIcon, XCircleIcon, FunnelIcon, CalendarIcon, ChevronRightIcon, ChevronLeftIcon, InformationCircleIcon, PlayCircleIcon } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/24/solid';
 import html2canvas from 'html2canvas';
 import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';
@@ -1552,7 +1552,7 @@ var dashboardService = {
     };
     const formattedStartDate = formatDate2(startDate);
     const formattedEndDate = formatDate2(endDate);
-    let query = supabase.from(lineMetricsTable).select("date, shift_id, avg_efficiency, underperforming_workspaces, total_workspaces").gte("date", formattedStartDate).lte("date", formattedEndDate);
+    let query = supabase.from(lineMetricsTable).select("date, shift_id, avg_efficiency, underperforming_workspaces, total_workspaces, current_output, ideal_output, line_threshold").gte("date", formattedStartDate).lte("date", formattedEndDate);
     if (lineIdInput === factoryViewId) {
       if (!isValidFactoryViewConfiguration(entityConfig)) {
         throw new Error("Factory View requires at least one configured line for monthly data.");
@@ -1571,7 +1571,10 @@ var dashboardService = {
         shift_id: item.shift_id,
         avg_efficiency: item.avg_efficiency || 0,
         underperforming_workspaces: item.underperforming_workspaces || 0,
-        total_workspaces: item.total_workspaces || 0
+        total_workspaces: item.total_workspaces || 0,
+        current_output: item.current_output || 0,
+        ideal_output: item.ideal_output || 0,
+        line_threshold: item.line_threshold || 0
       }));
       return transformedData;
     } catch (err) {
@@ -9386,7 +9389,56 @@ var getUniformShiftGroup = (shiftConfigMap, timezone, now2 = /* @__PURE__ */ new
   return groups.length === 1 ? groups[0] : null;
 };
 
+// src/lib/types/efficiencyLegend.ts
+var DEFAULT_EFFICIENCY_LEGEND = {
+  green_min: 80,
+  green_max: 100,
+  yellow_min: 70,
+  yellow_max: 79,
+  red_min: 0,
+  red_max: 69,
+  critical_threshold: 50
+};
+function getEfficiencyColor(efficiency, legend = DEFAULT_EFFICIENCY_LEGEND) {
+  if (efficiency >= legend.green_min) {
+    return "green";
+  } else if (efficiency >= legend.yellow_min) {
+    return "yellow";
+  } else {
+    return "red";
+  }
+}
+function getEfficiencyColorClasses(efficiency, legend = DEFAULT_EFFICIENCY_LEGEND) {
+  const color2 = getEfficiencyColor(efficiency, legend);
+  switch (color2) {
+    case "green":
+      return "bg-[#00AB45]/90 hover:bg-[#00AB45]/95";
+    case "yellow":
+      return "bg-[#FFB020]/90 hover:bg-[#FFB020]/95";
+    case "red":
+      return "bg-[#E34329]/90 hover:bg-[#E34329]/95";
+    default:
+      return "bg-gray-300/90";
+  }
+}
+
 // src/lib/hooks/useDashboardMetrics.ts
+var parseEfficiencyLegend = (legend) => {
+  if (!legend) return null;
+  const coerce = (value, fallback) => {
+    const num = Number(value);
+    return Number.isFinite(num) ? num : fallback;
+  };
+  return {
+    green_min: coerce(legend.green_min, DEFAULT_EFFICIENCY_LEGEND.green_min),
+    green_max: coerce(legend.green_max, DEFAULT_EFFICIENCY_LEGEND.green_max),
+    yellow_min: coerce(legend.yellow_min, DEFAULT_EFFICIENCY_LEGEND.yellow_min),
+    yellow_max: coerce(legend.yellow_max, DEFAULT_EFFICIENCY_LEGEND.yellow_max),
+    red_min: coerce(legend.red_min, DEFAULT_EFFICIENCY_LEGEND.red_min),
+    red_max: coerce(legend.red_max, DEFAULT_EFFICIENCY_LEGEND.red_max),
+    critical_threshold: coerce(legend.critical_threshold, DEFAULT_EFFICIENCY_LEGEND.critical_threshold)
+  };
+};
 var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds }) => {
   const { supabaseUrl, supabaseKey } = useDashboardConfig();
   const entityConfig = useEntityConfig();
@@ -9444,7 +9496,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
   );
   useEffect(() => {
     lineIdRef.current = lineId;
-    setMetrics({ workspaceMetrics: [], lineMetrics: [] });
+    setMetrics({ workspaceMetrics: [], lineMetrics: [], metadata: void 0 });
     setIsLoading(true);
   }, [lineId]);
   const fetchAllMetrics = useCallback(async () => {
@@ -9482,6 +9534,8 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
       }
       let allWorkspaceMetrics = [];
       let allLineMetrics = [];
+      let hasFlowBuffers = false;
+      let efficiencyLegend;
       if (isFactory && shiftGroups.length > 0) {
         console.log(`[useDashboardMetrics] \u{1F3ED} Factory view: Fetching for ${shiftGroups.length} shift group(s)`);
         const metricsPromises = shiftGroups.map(async (group) => {
@@ -9512,6 +9566,9 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
           }
         });
         const results = await Promise.all(metricsPromises);
+        hasFlowBuffers = results.some((result) => result?.metadata?.has_flow_buffers);
+        const legendCandidate = results.find((result) => result?.efficiency_legend)?.efficiency_legend;
+        efficiencyLegend = parseEfficiencyLegend(legendCandidate) ?? DEFAULT_EFFICIENCY_LEGEND;
         results.forEach((result) => {
           if (result.workspace_metrics) {
             allWorkspaceMetrics.push(...result.workspace_metrics);
@@ -9564,6 +9621,8 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
         });
         allWorkspaceMetrics = backendData.workspace_metrics || [];
         allLineMetrics = backendData.line_metrics || [];
+        hasFlowBuffers = Boolean(backendData?.metadata?.has_flow_buffers);
+        efficiencyLegend = parseEfficiencyLegend(backendData?.efficiency_legend) ?? DEFAULT_EFFICIENCY_LEGEND;
       }
       const transformedWorkspaceData = allWorkspaceMetrics.map((item) => ({
         company_id: item.company_id || entityConfig.companyId,
@@ -9589,7 +9648,9 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
       });
       const newMetricsState = {
         workspaceMetrics: transformedWorkspaceData,
-        lineMetrics: allLineMetrics || []
+        lineMetrics: allLineMetrics || [],
+        metadata: { hasFlowBuffers },
+        efficiencyLegend: efficiencyLegend ?? DEFAULT_EFFICIENCY_LEGEND
       };
       console.log("[useDashboardMetrics] Setting metrics state:", {
         workspaceMetrics: newMetricsState.workspaceMetrics.length,
@@ -9741,6 +9802,8 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
   return {
     workspaceMetrics: metrics2?.workspaceMetrics || [],
     lineMetrics: metrics2?.lineMetrics || [],
+    efficiencyLegend: metrics2?.efficiencyLegend || DEFAULT_EFFICIENCY_LEGEND,
+    metadata: metrics2?.metadata,
     isLoading,
     error,
     refetch: fetchAllMetrics
@@ -13757,6 +13820,256 @@ function useIdleTimeReasons({
     refetch: fetchData
   };
 }
+
+// src/lib/services/clipClassificationService.ts
+function parseCleanLabel(rawLabel) {
+  if (!rawLabel) return null;
+  const patterns = [
+    /"Clip Label"\s*:\s*"([^"]+)"/,
+    // Old format
+    /"clip_label"\s*:\s*"([^"]+)"/,
+    // New format
+    /'Clip Label'\s*:\s*'([^']+)'/,
+    // Single quotes
+    /'clip_label'\s*:\s*'([^']+)'/
+    // Single quotes
+  ];
+  for (const pattern of patterns) {
+    const match = rawLabel.match(pattern);
+    if (match) {
+      const label = match[1].trim();
+      return label.replace(/ /g, "_");
+    }
+  }
+  return null;
+}
+async function fetchClassifications(clipIds, token) {
+  if (!clipIds || clipIds.length === 0) {
+    return {};
+  }
+  try {
+    const CHUNK_SIZE = 50;
+    const chunks = [];
+    for (let i = 0; i < clipIds.length; i += CHUNK_SIZE) {
+      chunks.push(clipIds.slice(i, i + CHUNK_SIZE));
+    }
+    console.log(`[fetchClassifications] Fetching ${clipIds.length} classifications in ${chunks.length} chunks`);
+    const apiBase = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000";
+    const chunkResults = await Promise.all(
+      chunks.map(async (chunkIds) => {
+        try {
+          const response = await fetch(
+            `${apiBase}/api/classification/batch?clip_ids=${chunkIds.join(",")}`,
+            {
+              headers: {
+                "Authorization": `Bearer ${token}`,
+                "Content-Type": "application/json"
+              }
+            }
+          );
+          if (!response.ok) {
+            console.error(`Classification API error for chunk: ${response.status}`);
+            return Object.fromEntries(
+              chunkIds.map((id3) => [id3, { status: "processing" }])
+            );
+          }
+          const data = await response.json();
+          return data.classifications || {};
+        } catch (error) {
+          console.error("Error fetching chunk:", error);
+          return Object.fromEntries(
+            chunkIds.map((id3) => [id3, { status: "processing" }])
+          );
+        }
+      })
+    );
+    const allClassifications = Object.assign({}, ...chunkResults);
+    console.log(`[fetchClassifications] Total fetched: ${Object.keys(allClassifications).length} classifications`);
+    return allClassifications;
+  } catch (error) {
+    console.error("Error fetching classifications:", error);
+    return Object.fromEntries(
+      clipIds.map((id3) => [id3, { status: "processing" }])
+    );
+  }
+}
+function useClassificationRealtimeUpdates({
+  clipIds,
+  enabled = true,
+  onClassificationUpdate
+}) {
+  const supabase = useSupabase();
+  useEffect(() => {
+    if (!enabled || !clipIds || clipIds.length === 0 || !supabase) {
+      return;
+    }
+    const channelName = `classification:${clipIds.slice(0, 5).join("-")}`;
+    console.log(`[useClassificationRealtimeUpdates] Subscribing to channel: ${channelName}`);
+    const channel = supabase.channel(channelName).on(
+      "postgres_changes",
+      {
+        event: "INSERT",
+        schema: "public",
+        table: "clip_classification",
+        filter: `clip_id=in.(${clipIds.join(",")})`
+      },
+      (payload) => {
+        console.log("[useClassificationRealtimeUpdates] New classification:", payload);
+        try {
+          const { clip_id, clip_label, confidence_score } = payload.new;
+          const parsedLabel = parseCleanLabel(clip_label);
+          if (parsedLabel) {
+            onClassificationUpdate(clip_id, {
+              status: "classified",
+              label: parsedLabel,
+              confidence: confidence_score || 0
+            });
+          } else {
+            console.warn("[useClassificationRealtimeUpdates] Failed to parse label:", clip_label);
+          }
+        } catch (error) {
+          console.error("[useClassificationRealtimeUpdates] Error processing update:", error);
+        }
+      }
+    ).subscribe((status) => {
+      console.log(`[useClassificationRealtimeUpdates] Subscription status:`, status);
+    });
+    return () => {
+      console.log(`[useClassificationRealtimeUpdates] Unsubscribing from ${channelName}`);
+      supabase.removeChannel(channel);
+    };
+  }, [clipIds, enabled, supabase, onClassificationUpdate]);
+}
+
+// src/lib/hooks/useIdleTimeClipClassifications.ts
+var DEFAULT_LIMIT = 200;
+var MAX_PAGES = 5;
+function useIdleTimeClipClassifications({
+  workspaceId,
+  date,
+  shiftId,
+  enabled = true,
+  limit = DEFAULT_LIMIT
+}) {
+  const { session } = useAuth();
+  const [idleClips, setIdleClips] = useState([]);
+  const [clipClassifications, setClipClassifications] = useState({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const lastRequestKeyRef = useRef("");
+  const requestKey = useMemo(
+    () => `${workspaceId || ""}-${date || ""}-${shiftId ?? ""}`,
+    [workspaceId, date, shiftId]
+  );
+  const fetchIdleClips = useCallback(async () => {
+    if (!enabled) {
+      setIsLoading(false);
+      return;
+    }
+    if (!workspaceId || !date || shiftId === void 0) {
+      setIdleClips([]);
+      setIsLoading(false);
+      return;
+    }
+    if (!session?.access_token) {
+      setError("Not authenticated");
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    lastRequestKeyRef.current = requestKey;
+    try {
+      const collected = [];
+      let page = 1;
+      let hasMore = true;
+      while (hasMore && page <= MAX_PAGES && collected.length < limit) {
+        const response = await fetch("/api/clips/supabase", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${session.access_token}`
+          },
+          body: JSON.stringify({
+            action: "clip-metadata",
+            workspaceId,
+            date,
+            shift: shiftId.toString(),
+            category: "idle_time",
+            page,
+            limit
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`Idle clip metadata request failed: ${response.status}`);
+        }
+        const data = await response.json();
+        const clips = Array.isArray(data?.clips) ? data.clips : [];
+        const mapped = clips.map((clip) => ({
+          id: clip.id,
+          idle_start_time: clip.idle_start_time,
+          idle_end_time: clip.idle_end_time
+        }));
+        collected.push(...mapped);
+        hasMore = Boolean(data?.hasMore);
+        page += 1;
+      }
+      if (lastRequestKeyRef.current === requestKey) {
+        setIdleClips(collected);
+      }
+    } catch (err) {
+      console.error("[useIdleTimeClipClassifications] Error fetching idle clips:", err);
+      if (lastRequestKeyRef.current === requestKey) {
+        setError(err instanceof Error ? err.message : "Failed to fetch idle clips");
+        setIdleClips([]);
+      }
+    } finally {
+      if (lastRequestKeyRef.current === requestKey) {
+        setIsLoading(false);
+      }
+    }
+  }, [enabled, workspaceId, date, shiftId, session?.access_token, requestKey, limit]);
+  useEffect(() => {
+    fetchIdleClips();
+  }, [fetchIdleClips]);
+  useEffect(() => {
+    setClipClassifications({});
+  }, [requestKey]);
+  const idleClipIds = useMemo(
+    () => idleClips.map((clip) => clip.id).filter(Boolean),
+    [idleClips]
+  );
+  useEffect(() => {
+    if (!enabled || idleClipIds.length === 0 || !session?.access_token) {
+      return;
+    }
+    fetchClassifications(idleClipIds, session.access_token).then((classifications) => {
+      setClipClassifications((prev) => ({
+        ...prev,
+        ...classifications
+      }));
+    }).catch((err) => {
+      console.error("[useIdleTimeClipClassifications] Error fetching classifications:", err);
+    });
+  }, [enabled, idleClipIds, session?.access_token]);
+  useClassificationRealtimeUpdates({
+    clipIds: idleClipIds,
+    enabled: enabled && idleClipIds.length > 0,
+    onClassificationUpdate: useCallback((clipId, classification) => {
+      setClipClassifications((prev) => ({
+        ...prev,
+        [clipId]: classification
+      }));
+    }, [])
+  });
+  return {
+    idleClips,
+    clipClassifications,
+    isLoading,
+    error,
+    refetch: fetchIdleClips
+  };
+}
 function useUserUsage(userId, options = {}) {
   const { startDate, endDate, enabled = true } = options;
   const { session } = useAuth();
@@ -26464,6 +26777,10 @@ var HourlyOutputChartComponent = ({
   shiftEnd,
   showIdleTime = false,
   idleTimeHourly,
+  idleTimeClips,
+  idleTimeClipClassifications,
+  shiftDate,
+  timezone,
   className = ""
 }) => {
   const containerRef = React24__default.useRef(null);
@@ -26476,6 +26793,37 @@ var HourlyOutputChartComponent = ({
     return { hour, minute, decimalHour };
   };
   const shiftStartTime = getTimeFromTimeString(shiftStart);
+  const shiftStartDateTime = React24__default.useMemo(() => {
+    if (!shiftDate || !timezone) return null;
+    const hour = shiftStartTime.hour.toString().padStart(2, "0");
+    const minute = shiftStartTime.minute.toString().padStart(2, "0");
+    return fromZonedTime(`${shiftDate}T${hour}:${minute}:00`, timezone);
+  }, [shiftDate, timezone, shiftStartTime.hour, shiftStartTime.minute]);
+  const idleClipRanges = React24__default.useMemo(() => {
+    if (!idleTimeClips || idleTimeClips.length === 0) return [];
+    return idleTimeClips.map((clip) => ({
+      id: clip.id,
+      start: clip.idle_start_time ? new Date(clip.idle_start_time) : null,
+      end: clip.idle_end_time ? new Date(clip.idle_end_time) : null
+    })).filter((clip) => clip.start && clip.end);
+  }, [idleTimeClips]);
+  const getIdleReasonForRange = React24__default.useCallback((rangeStart, rangeEnd) => {
+    if (!rangeStart || !rangeEnd || idleClipRanges.length === 0) {
+      return "Reason unavailable";
+    }
+    const matchingClip = idleClipRanges.find((clip) => rangeStart >= clip.start && rangeEnd <= clip.end) || idleClipRanges.find((clip) => rangeStart < clip.end && rangeEnd > clip.start);
+    if (!matchingClip) {
+      return "Reason unavailable";
+    }
+    const classification = idleTimeClipClassifications?.[matchingClip.id];
+    if (!classification || classification.status === "processing") {
+      return "Analyzing...";
+    }
+    if (!classification.label) {
+      return "Reason unavailable";
+    }
+    return classification.label.replace(/_/g, " ");
+  }, [idleClipRanges, idleTimeClipClassifications]);
   const { shiftDuration, shiftEndTime, hasPartialLastHour } = React24__default.useMemo(() => {
     console.log("[HourlyOutputChart] Calculating shift duration with:", {
       shiftStart,
@@ -26723,6 +27071,7 @@ var HourlyOutputChartComponent = ({
       }
       idleMinutes = idleArray.filter((val) => val === "1" || val === 1).length;
       return {
+        hourIndex: i,
         hour: formatHour(i),
         timeRange: formatTimeRange2(i),
         output: animatedData[i] || 0,
@@ -26916,9 +27265,10 @@ var HourlyOutputChartComponent = ({
                       }
                     }
                     const formatIdleTimestamp = (minuteIdx) => {
-                      const hourIndex = chartData.findIndex((item) => item.timeRange === data2.timeRange);
-                      const hourOffset = hourIndex >= 0 ? hourIndex : 0;
-                      const totalMinutes = (shiftStartTime.hour + hourOffset) * 60 + shiftStartTime.minute + minuteIdx;
+                      const fallbackIndex = chartData.findIndex((item) => item.timeRange === data2.timeRange);
+                      const hourOffset = Number.isFinite(data2.hourIndex) ? data2.hourIndex : fallbackIndex;
+                      const safeHourOffset = hourOffset >= 0 ? hourOffset : 0;
+                      const totalMinutes = (shiftStartTime.hour + safeHourOffset) * 60 + shiftStartTime.minute + minuteIdx;
                       const hour = Math.floor(totalMinutes / 60) % 24;
                       const minute = totalMinutes % 60;
                       const period = hour >= 12 ? "PM" : "AM";
@@ -26949,27 +27299,23 @@ var HourlyOutputChartComponent = ({
                               const duration = range.end - range.start + 1;
                               const startTime = formatIdleTimestamp(range.start);
                               const endTime = formatIdleTimestamp(range.end + 1);
+                              const fallbackIndex = chartData.findIndex((item) => item.timeRange === data2.timeRange);
+                              const hourOffset = Number.isFinite(data2.hourIndex) ? data2.hourIndex : fallbackIndex;
+                              const safeHourOffset = hourOffset >= 0 ? hourOffset : 0;
+                              const rangeStartDate = shiftStartDateTime ? addMinutes(shiftStartDateTime, safeHourOffset * 60 + range.start) : null;
+                              const rangeEndDate = shiftStartDateTime ? addMinutes(shiftStartDateTime, safeHourOffset * 60 + range.end + 1) : null;
+                              const reasonLabel = getIdleReasonForRange(rangeStartDate, rangeEndDate);
                               return /* @__PURE__ */ jsxs("div", { className: "text-gray-600 flex items-center gap-2 text-xs", children: [
                                 /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" }),
-                                /* @__PURE__ */ jsx("span", { children: duration === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                                  startTime,
-                                  " ",
-                                  /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
-                                    "(",
-                                    duration,
-                                    " min)"
-                                  ] })
-                                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                                  startTime,
-                                  " - ",
-                                  endTime,
-                                  " ",
-                                  /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
-                                    "(",
-                                    duration,
-                                    " min)"
-                                  ] })
-                                ] }) })
+                                /* @__PURE__ */ jsxs("span", { children: [
+                                  duration === 1 ? /* @__PURE__ */ jsx(Fragment, { children: startTime }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                                    startTime,
+                                    " - ",
+                                    endTime
+                                  ] }),
+                                  /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: " | " }),
+                                  /* @__PURE__ */ jsx("span", { className: "text-gray-600", children: reasonLabel })
+                                ] })
                               ] }, index);
                             }) })
                           ] })
@@ -27067,7 +27413,7 @@ var HourlyOutputChartComponent = ({
   );
 };
 var HourlyOutputChart = React24__default.memo(HourlyOutputChartComponent, (prevProps, nextProps) => {
-  if (prevProps.pphThreshold !== nextProps.pphThreshold || prevProps.shiftStart !== nextProps.shiftStart || prevProps.showIdleTime !== nextProps.showIdleTime || prevProps.className !== nextProps.className) {
+  if (prevProps.pphThreshold !== nextProps.pphThreshold || prevProps.shiftStart !== nextProps.shiftStart || prevProps.shiftEnd !== nextProps.shiftEnd || prevProps.shiftDate !== nextProps.shiftDate || prevProps.timezone !== nextProps.timezone || prevProps.showIdleTime !== nextProps.showIdleTime || prevProps.className !== nextProps.className) {
     return false;
   }
   if (prevProps.data.length !== nextProps.data.length) {
@@ -27090,6 +27436,33 @@ var HourlyOutputChart = React24__default.memo(HourlyOutputChartComponent, (prevP
     if (prevArray.length !== nextArray.length) return false;
     if (!prevArray.every((val, idx) => val === nextArray[idx])) return false;
   }
+  const prevIdleClips = prevProps.idleTimeClips || [];
+  const nextIdleClips = nextProps.idleTimeClips || [];
+  if (prevIdleClips.length !== nextIdleClips.length) {
+    return false;
+  }
+  for (let i = 0; i < prevIdleClips.length; i += 1) {
+    const prevClip = prevIdleClips[i];
+    const nextClip = nextIdleClips[i];
+    if (prevClip.id !== nextClip.id || prevClip.idle_start_time !== nextClip.idle_start_time || prevClip.idle_end_time !== nextClip.idle_end_time) {
+      return false;
+    }
+  }
+  const prevClassifications = prevProps.idleTimeClipClassifications || {};
+  const nextClassifications = nextProps.idleTimeClipClassifications || {};
+  const prevClassKeys = Object.keys(prevClassifications);
+  const nextClassKeys = Object.keys(nextClassifications);
+  if (prevClassKeys.length !== nextClassKeys.length) {
+    return false;
+  }
+  for (const key of prevClassKeys) {
+    const prevClass = prevClassifications[key];
+    const nextClass = nextClassifications[key];
+    if (!nextClass) return false;
+    if (prevClass.status !== nextClass.status || prevClass.label !== nextClass.label || prevClass.confidence !== nextClass.confidence) {
+      return false;
+    }
+  }
   return true;
 });
 HourlyOutputChart.displayName = "HourlyOutputChart";
@@ -27109,6 +27482,7 @@ var VideoCard = React24__default.memo(({
   onClick,
   onFatalError,
   isVeryLowEfficiency = false,
+  legend,
   cropping,
   canvasFps = 30,
   useRAF = true,
@@ -27120,6 +27494,7 @@ var VideoCard = React24__default.memo(({
 }) => {
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   if (cropping) {
     useHlsStreamWithCropping(videoRef, canvasRef, {
       src: hlsUrl,
@@ -27137,39 +27512,23 @@ var VideoCard = React24__default.memo(({
     });
   }
   const workspaceDisplayName = displayName || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
-  const getEfficiencyOverlayColor = (efficiency) => {
-    if (efficiency >= 80) {
-      return "bg-[#00D654]/25";
-    } else if (efficiency >= 70) {
-      return "bg-[#FFD700]/30";
-    } else {
-      return "bg-[#FF2D0A]/30";
-    }
-  };
-  const getEfficiencyBarColor = (efficiency) => {
-    if (efficiency >= 80) {
-      return "bg-[#00AB45]";
-    } else if (efficiency >= 70) {
-      return "bg-[#FFB020]";
-    } else {
-      return "bg-[#E34329]";
-    }
-  };
-  const efficiencyOverlayClass = getEfficiencyOverlayColor(workspace.efficiency);
-  const efficiencyBarClass = getEfficiencyBarColor(workspace.efficiency);
+  const efficiencyColor = getEfficiencyColor(workspace.efficiency, effectiveLegend);
+  const efficiencyOverlayClass = efficiencyColor === "green" ? "bg-[#00D654]/25" : efficiencyColor === "yellow" ? "bg-[#FFD700]/30" : "bg-[#FF2D0A]/30";
+  const efficiencyBarClass = efficiencyColor === "green" ? "bg-[#00AB45]" : efficiencyColor === "yellow" ? "bg-[#FFB020]" : "bg-[#E34329]";
+  const efficiencyStatus = efficiencyColor === "green" ? "High" : efficiencyColor === "yellow" ? "Medium" : "Low";
   const trendInfo = workspace.trend !== void 0 ? getTrendArrowAndColor(workspace.trend) : null;
   const handleClick = useCallback(() => {
     trackCoreEvent("Workspace Card Clicked", {
       workspace_id: workspace.workspace_uuid,
       workspace_name: workspace.workspace_name,
       efficiency: workspace.efficiency,
-      status: workspace.efficiency >= 80 ? "High" : workspace.efficiency >= 70 ? "Medium" : "Low",
+      status: efficiencyStatus,
       trend: workspace.trend
     });
     if (onClick) {
       onClick();
     }
-  }, [onClick, workspace]);
+  }, [onClick, workspace, efficiencyStatus]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -27272,6 +27631,7 @@ var VideoGridView = React24__default.memo(({
   workspaces,
   selectedLine,
   className = "",
+  legend,
   videoSources = {},
   displayNames = {},
   onWorkspaceHover,
@@ -27287,6 +27647,7 @@ var VideoGridView = React24__default.memo(({
   const videoConfig = useVideoConfig();
   const dashboardConfig = useDashboardConfig();
   const { cropping, canvasConfig, hlsUrls } = videoConfig;
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const mergedVideoSources = {
     defaultHlsUrl: videoSources.defaultHlsUrl || hlsUrls?.defaultHlsUrl || DEFAULT_HLS_URL,
     workspaceHlsUrls: { ...videoSources.workspaceHlsUrls, ...hlsUrls?.workspaceHlsUrls },
@@ -27481,6 +27842,7 @@ var VideoGridView = React24__default.memo(({
                 onClick: () => handleWorkspaceClick(workspace),
                 onFatalError: () => handleStreamError(workspaceId),
                 isVeryLowEfficiency,
+                legend: effectiveLegend,
                 cropping: workspaceCropping,
                 canvasFps: canvasConfig?.fps,
                 displayName: (
@@ -27508,10 +27870,12 @@ var MapGridView = React24__default.memo(({
   className = "",
   displayNames = {},
   onWorkspaceHover,
-  onWorkspaceHoverEnd
+  onWorkspaceHoverEnd,
+  legend
 }) => {
   const router = useRouter();
   const dashboardConfig = useDashboardConfig();
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const mapViewConfig = dashboardConfig?.mapViewConfig;
   const workspacePositions = mapViewConfig?.workspacePositions || [];
   const aspectRatio2 = mapViewConfig?.aspectRatio || 16 / 9;
@@ -27523,10 +27887,11 @@ var MapGridView = React24__default.memo(({
     return map;
   }, [workspaces]);
   const getPerformanceColor = useCallback((efficiency) => {
-    if (efficiency >= 80) return "border-green-500 bg-green-50";
-    if (efficiency >= 50) return "border-yellow-500 bg-yellow-50";
+    const color2 = getEfficiencyColor(efficiency, effectiveLegend);
+    if (color2 === "green") return "border-green-500 bg-green-50";
+    if (color2 === "yellow") return "border-yellow-500 bg-yellow-50";
     return "border-red-500 bg-red-50";
-  }, []);
+  }, [effectiveLegend]);
   const handleWorkspaceClick = useCallback((workspace) => {
     const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
     trackCoreEvent("Workspace Detail Clicked", {
@@ -27566,7 +27931,7 @@ var MapGridView = React24__default.memo(({
           const workspace = workspaceMetricsMap.get(wsKey);
           if (!workspace) return null;
           const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
-          getPerformanceColor(workspace.efficiency);
+          const performanceColor = getPerformanceColor(workspace.efficiency);
           const showExclamation = workspace.show_exclamation ?? (workspace.efficiency < 50 && workspace.efficiency >= 10);
           const workspaceDisplayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
           getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
@@ -27591,7 +27956,7 @@ var MapGridView = React24__default.memo(({
                   className: `
                   relative rounded-lg border-2 shadow-lg hover:shadow-xl 
                   transition-all duration-200 hover:scale-105 bg-white
-                  ${workspace.efficiency >= 80 ? "border-green-500" : workspace.efficiency >= 50 ? "border-yellow-500" : "border-red-500"}
+                  ${performanceColor}
                   ${position.size === "conveyor" ? "w-32 h-24" : position.size === "large" ? "w-40 h-32" : "w-36 h-28"}
                 `,
                   children: [
@@ -28172,7 +28537,7 @@ var PieChart4 = ({
       }
     );
   };
-  const CustomTooltip3 = ({ active, payload }) => {
+  const CustomTooltip4 = ({ 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: [
@@ -28203,7 +28568,7 @@ var PieChart4 = ({
         children: dataWithPercentage.map((entry, index) => /* @__PURE__ */ jsx(Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
       }
     ),
-    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip3, {}) }),
+    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip4, {}) }),
     /* @__PURE__ */ jsx(
       Legend,
       {
@@ -28415,31 +28780,6 @@ var WhatsAppShareButton = ({
     }
   );
 };
-var AxelOrb = ({
-  className = "",
-  size = "md",
-  animate = false
-}) => {
-  const sizeClasses = {
-    sm: "w-8 h-8",
-    md: "w-10 h-10",
-    lg: "w-12 h-12",
-    xl: "w-16 h-16",
-    "2xl": "w-20 h-20"
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `${sizeClasses[size]} rounded-full ${animate ? "animate-float" : ""} ${className}`,
-      style: {
-        background: "linear-gradient(to top, #078DDB 0%, #65ADD6 33%, #A3D0E6 66%, #C7E2EC 100%)",
-        boxShadow: "0 4px 12px rgba(7, 141, 219, 0.4), 0 0 20px rgba(7, 141, 219, 0.2)"
-      },
-      "aria-label": "Axel AI",
-      role: "img"
-    }
-  );
-};
 var BreakNotificationPopup = ({
   activeBreaks,
   onDismiss,
@@ -28527,7 +28867,7 @@ var BreakNotificationPopup = ({
         className: "relative z-10",
         children: /* @__PURE__ */ jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-xl overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(AxelOrb, { size: "md" }) }),
+            /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(Coffee, { className: "w-5 h-5 text-amber-600" }) }) }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
                 /* @__PURE__ */ jsxs("h4", { className: "font-semibold text-sm text-gray-900", children: [
@@ -28800,7 +29140,11 @@ var AxelNotificationPopup = ({
           className: "p-3",
           children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(AxelOrb, { size: "md" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
+                suggestion.type === "improvement" && /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(TrendingUp, { className: "w-5 h-5 text-blue-600" }) }),
+                (suggestion.type === "alert" || suggestion.type === "bottleneck_triage") && /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(AlertCircle, { className: "w-5 h-5 text-red-600" }) }),
+                suggestion.type === "insight" && /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(Sparkles, { className: "w-5 h-5 text-purple-600" }) })
+              ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
                   /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm text-gray-900", children: suggestion.title }),
@@ -29535,10 +29879,9 @@ var HlsVideoPlayer = forwardRef(({
       fetchSetup: function(context, initParams) {
         const url = context.url;
         if (isR2WorkerUrl(url, r2WorkerDomain) && authToken) {
-          initParams.headers = {
-            ...initParams.headers,
-            "Authorization": `Bearer ${authToken}`
-          };
+          const headers = initParams.headers instanceof Headers ? initParams.headers : new Headers(initParams.headers || {});
+          headers.set("Authorization", `Bearer ${authToken}`);
+          initParams.headers = headers;
         }
         return new Request(url, initParams);
       }
@@ -32861,126 +33204,6 @@ function useClipsRealtimeUpdates({
     hasNewClips: newClipsNotification !== null && newClipsNotification.count > 0
   };
 }
-
-// src/lib/services/clipClassificationService.ts
-function parseCleanLabel(rawLabel) {
-  if (!rawLabel) return null;
-  const patterns = [
-    /"Clip Label"\s*:\s*"([^"]+)"/,
-    // Old format
-    /"clip_label"\s*:\s*"([^"]+)"/,
-    // New format
-    /'Clip Label'\s*:\s*'([^']+)'/,
-    // Single quotes
-    /'clip_label'\s*:\s*'([^']+)'/
-    // Single quotes
-  ];
-  for (const pattern of patterns) {
-    const match = rawLabel.match(pattern);
-    if (match) {
-      const label = match[1].trim();
-      return label.replace(/ /g, "_");
-    }
-  }
-  return null;
-}
-async function fetchClassifications(clipIds, token) {
-  if (!clipIds || clipIds.length === 0) {
-    return {};
-  }
-  try {
-    const CHUNK_SIZE = 50;
-    const chunks = [];
-    for (let i = 0; i < clipIds.length; i += CHUNK_SIZE) {
-      chunks.push(clipIds.slice(i, i + CHUNK_SIZE));
-    }
-    console.log(`[fetchClassifications] Fetching ${clipIds.length} classifications in ${chunks.length} chunks`);
-    const apiBase = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000";
-    const chunkResults = await Promise.all(
-      chunks.map(async (chunkIds) => {
-        try {
-          const response = await fetch(
-            `${apiBase}/api/classification/batch?clip_ids=${chunkIds.join(",")}`,
-            {
-              headers: {
-                "Authorization": `Bearer ${token}`,
-                "Content-Type": "application/json"
-              }
-            }
-          );
-          if (!response.ok) {
-            console.error(`Classification API error for chunk: ${response.status}`);
-            return Object.fromEntries(
-              chunkIds.map((id3) => [id3, { status: "processing" }])
-            );
-          }
-          const data = await response.json();
-          return data.classifications || {};
-        } catch (error) {
-          console.error("Error fetching chunk:", error);
-          return Object.fromEntries(
-            chunkIds.map((id3) => [id3, { status: "processing" }])
-          );
-        }
-      })
-    );
-    const allClassifications = Object.assign({}, ...chunkResults);
-    console.log(`[fetchClassifications] Total fetched: ${Object.keys(allClassifications).length} classifications`);
-    return allClassifications;
-  } catch (error) {
-    console.error("Error fetching classifications:", error);
-    return Object.fromEntries(
-      clipIds.map((id3) => [id3, { status: "processing" }])
-    );
-  }
-}
-function useClassificationRealtimeUpdates({
-  clipIds,
-  enabled = true,
-  onClassificationUpdate
-}) {
-  const supabase = useSupabase();
-  useEffect(() => {
-    if (!enabled || !clipIds || clipIds.length === 0 || !supabase) {
-      return;
-    }
-    const channelName = `classification:${clipIds.slice(0, 5).join("-")}`;
-    console.log(`[useClassificationRealtimeUpdates] Subscribing to channel: ${channelName}`);
-    const channel = supabase.channel(channelName).on(
-      "postgres_changes",
-      {
-        event: "INSERT",
-        schema: "public",
-        table: "clip_classification",
-        filter: `clip_id=in.(${clipIds.join(",")})`
-      },
-      (payload) => {
-        console.log("[useClassificationRealtimeUpdates] New classification:", payload);
-        try {
-          const { clip_id, clip_label, confidence_score } = payload.new;
-          const parsedLabel = parseCleanLabel(clip_label);
-          if (parsedLabel) {
-            onClassificationUpdate(clip_id, {
-              status: "classified",
-              label: parsedLabel,
-              confidence: confidence_score || 0
-            });
-          } else {
-            console.warn("[useClassificationRealtimeUpdates] Failed to parse label:", clip_label);
-          }
-        } catch (error) {
-          console.error("[useClassificationRealtimeUpdates] Error processing update:", error);
-        }
-      }
-    ).subscribe((status) => {
-      console.log(`[useClassificationRealtimeUpdates] Subscription status:`, status);
-    });
-    return () => {
-      console.log(`[useClassificationRealtimeUpdates] Unsubscribing from ${channelName}`);
-      supabase.removeChannel(channel);
-    };
-  }, [clipIds, enabled, supabase, onClassificationUpdate]);
-}
 var BottlenecksContent = ({
   workspaceId,
   workspaceName,
@@ -36428,6 +36651,31 @@ var DetailedHealthStatus = ({
     }
   );
 };
+var AxelOrb = ({
+  className = "",
+  size = "md",
+  animate = false
+}) => {
+  const sizeClasses = {
+    sm: "w-8 h-8",
+    md: "w-10 h-10",
+    lg: "w-12 h-12",
+    xl: "w-16 h-16",
+    "2xl": "w-20 h-20"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${sizeClasses[size]} rounded-full ${animate ? "animate-float" : ""} ${className}`,
+      style: {
+        background: "linear-gradient(to top, #078DDB 0%, #65ADD6 33%, #A3D0E6 66%, #C7E2EC 100%)",
+        boxShadow: "0 4px 12px rgba(7, 141, 219, 0.4), 0 0 20px rgba(7, 141, 219, 0.2)"
+      },
+      "aria-label": "Axel AI",
+      role: "img"
+    }
+  );
+};
 var LinePdfExportButton = ({
   targetElement,
   fileName = "line-export",
@@ -36545,10 +36793,10 @@ var LineHistoryCalendar = ({
   }, [configuredTimezone]);
   const monthBounds = useMemo(() => getMonthKeyBounds(year, month), [year, month]);
   const calendarData = useMemo(() => {
-    const startOfMonth = toZonedTime(new Date(year, month, 1), configuredTimezone);
-    const endOfMonth = toZonedTime(new Date(year, month + 1, 0), configuredTimezone);
-    const totalDays = endOfMonth.getDate();
-    let startOffset = startOfMonth.getDay() - 1;
+    const startOfMonth2 = toZonedTime(new Date(year, month, 1), configuredTimezone);
+    const endOfMonth2 = toZonedTime(new Date(year, month + 1, 0), configuredTimezone);
+    const totalDays = endOfMonth2.getDate();
+    let startOffset = startOfMonth2.getDay() - 1;
     if (startOffset === -1) startOffset = 6;
     const calendar = Array(startOffset).fill(null);
     for (let day = 1; day <= totalDays; day++) {
@@ -36579,12 +36827,13 @@ var LineHistoryCalendar = ({
     if (shift.hasData !== void 0) return shift.hasData;
     return shift.total_workspaces > 0 || shift.avg_efficiency > 0 || shift.underperforming_workspaces > 0;
   };
-  const getPerformanceColor = (efficiency, date, hasData) => {
+  const getPerformanceColor = (efficiency, date, hasData, isFilteredOut = false) => {
     const istNow = todayInZone;
     const nowString = `${istNow.getFullYear()}-${String(istNow.getMonth() + 1).padStart(2, "0")}-${String(istNow.getDate()).padStart(2, "0")}`;
     const dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
     if (dateString > nowString) return "bg-gray-200 dark:bg-gray-700";
     if (!hasData) return "bg-gray-300 dark:bg-gray-600";
+    if (isFilteredOut) return "bg-gray-200 dark:bg-gray-700";
     return efficiency >= 75 ? "bg-green-500 dark:bg-green-600" : "bg-red-500 dark:bg-red-600";
   };
   const isCurrentDate = (date) => {
@@ -36629,12 +36878,13 @@ var LineHistoryCalendar = ({
     const showRange = rangeStart && rangeEnd ? !(rangeStart === monthBounds.startKey && rangeEnd === monthBounds.endKey) : false;
     const inRange = showRange ? dateKey >= rangeStart && dateKey <= rangeEnd : false;
     const isRangeEdge = inRange && (dateKey === rangeStart || dateKey === rangeEnd);
+    const isFilteredOut = showRange && !inRange;
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: `group h-full ${isFuture || !hasData ? "cursor-not-allowed" : "cursor-pointer hover:opacity-90"}`,
+        className: `group h-full ${isFuture || !hasData || isFilteredOut ? "cursor-not-allowed" : "cursor-pointer hover:opacity-90"}`,
         onClick: () => {
-          if (!isFuture && hasData) {
+          if (!isFuture && hasData && !isFilteredOut) {
             const dateObj2 = day.date instanceof Date ? day.date : new Date(day.date);
             const year2 = dateObj2.getFullYear();
             const month2 = String(dateObj2.getMonth() + 1).padStart(2, "0");
@@ -36666,7 +36916,7 @@ var LineHistoryCalendar = ({
           }
         },
         children: /* @__PURE__ */ jsxs("div", { className: `
-          ${getPerformanceColor(shiftData.avg_efficiency || 0, dateObj, hasData)} 
+          ${getPerformanceColor(shiftData.avg_efficiency || 0, dateObj, hasData, isFilteredOut)} 
           rounded-lg h-full p-2 relative
           ${isToday2 ? "ring-2 ring-blue-500 dark:ring-blue-400 ring-offset-2 dark:ring-offset-gray-800 shadow-md" : ""}
         `, children: [
@@ -36677,10 +36927,11 @@ var LineHistoryCalendar = ({
             }
           ),
           /* @__PURE__ */ jsx("div", { className: `
-            text-base font-medium ${hasData ? "text-white" : "text-gray-500"} flex items-center relative z-10
+            text-base font-medium flex items-center relative z-10
+            ${hasData && !isFuture && !isFilteredOut ? "text-white" : "text-gray-400"}
             ${isToday2 ? "bg-blue-500 dark:bg-blue-600 rounded-full w-7 h-7 justify-center" : ""}
           `, children: dateObj.getDate() }),
-          !isFuture && hasData && renderStats(shiftData, dateObj)
+          !isFuture && hasData && !isFilteredOut && renderStats(shiftData, dateObj)
         ] })
       }
     );
@@ -36855,54 +37106,19 @@ var IdleTimeReasonChart = ({
   ] });
 };
 var IdleTimeReasonChart_default = IdleTimeReasonChart;
+var WEEKDAYS2 = ["S", "M", "T", "W", "T", "F", "S"];
 var MonthlyRangeFilter = ({
   month,
   year,
-  timezone,
   value,
   onChange,
+  onMonthNavigate,
   className
 }) => {
   const monthBounds = useMemo(() => getMonthKeyBounds(year, month), [year, month]);
-  const weekRanges = useMemo(() => getMonthWeekRanges(year, month, timezone), [year, month, timezone]);
   const normalizedRange = useMemo(() => {
     return normalizeDateKeyRange(value.startKey, value.endKey, monthBounds.startKey, monthBounds.endKey);
   }, [value.startKey, value.endKey, monthBounds.startKey, monthBounds.endKey]);
-  const monthLabel = useMemo(() => {
-    return new Date(year, month).toLocaleString("default", { month: "long", year: "numeric" });
-  }, [year, month]);
-  const presetOptions = useMemo(() => {
-    const fullMonthRangeLabel = `${formatDateKeyForDisplay(monthBounds.startKey, "MMM d")} - ${formatDateKeyForDisplay(monthBounds.endKey, "MMM d")}`;
-    const presets = [
-      {
-        id: "full-month",
-        label: "Full month",
-        rangeLabel: fullMonthRangeLabel,
-        startKey: monthBounds.startKey,
-        endKey: monthBounds.endKey
-      }
-    ];
-    weekRanges.forEach((range, index) => {
-      const rangeLabel = `${formatDateKeyForDisplay(range.startKey, "MMM d")} - ${formatDateKeyForDisplay(range.endKey, "MMM d")}`;
-      presets.push({
-        id: `week-${index + 1}`,
-        label: `Week ${index + 1}`,
-        rangeLabel,
-        startKey: range.startKey,
-        endKey: range.endKey
-      });
-    });
-    return presets;
-  }, [monthBounds.startKey, monthBounds.endKey, weekRanges]);
-  const activePreset = useMemo(() => {
-    return presetOptions.find(
-      (preset) => preset.startKey === normalizedRange.startKey && preset.endKey === normalizedRange.endKey
-    );
-  }, [presetOptions, normalizedRange.startKey, normalizedRange.endKey]);
-  const displayLabel = useMemo(() => {
-    if (activePreset) return activePreset.label;
-    return "Custom range";
-  }, [activePreset]);
   const fullMonthLabel = useMemo(() => {
     const startLabel = formatDateKeyForDisplay(monthBounds.startKey, "MMM d");
     const endLabel = formatDateKeyForDisplay(monthBounds.endKey, "MMM d, yyyy");
@@ -36911,14 +37127,26 @@ var MonthlyRangeFilter = ({
   const displayRange = useMemo(() => {
     return formatRangeLabel(normalizedRange, fullMonthLabel);
   }, [normalizedRange, fullMonthLabel]);
-  const [customStart, setCustomStart] = useState(normalizedRange.startKey);
-  const [customEnd, setCustomEnd] = useState(normalizedRange.endKey);
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
+  const [calendarMonth, setCalendarMonth] = useState(month);
+  const [calendarYear, setCalendarYear] = useState(year);
+  const [rangeStart, setRangeStart] = useState(parseDateKeyToDate(normalizedRange.startKey));
+  const [rangeEnd, setRangeEnd] = useState(parseDateKeyToDate(normalizedRange.endKey));
+  const [selecting, setSelecting] = useState(false);
   useEffect(() => {
-    setCustomStart(normalizedRange.startKey);
-    setCustomEnd(normalizedRange.endKey);
-  }, [normalizedRange.startKey, normalizedRange.endKey]);
+    setCalendarMonth(month);
+    setCalendarYear(year);
+  }, [month, year]);
+  useEffect(() => {
+    if (isOpen) {
+      setRangeStart(parseDateKeyToDate(normalizedRange.startKey));
+      setRangeEnd(parseDateKeyToDate(normalizedRange.endKey));
+      setSelecting(false);
+      setCalendarMonth(month);
+      setCalendarYear(year);
+    }
+  }, [isOpen, normalizedRange.startKey, normalizedRange.endKey, month, year]);
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -36928,107 +37156,211 @@ var MonthlyRangeFilter = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const handlePresetSelect = (startKey, endKey) => {
-    const normalized = normalizeDateKeyRange(startKey, endKey, monthBounds.startKey, monthBounds.endKey);
-    onChange(normalized);
-    setIsOpen(false);
+  const handleDayClick = (day) => {
+    if (!selecting || !rangeStart) {
+      setRangeStart(day);
+      setRangeEnd(null);
+      setSelecting(true);
+    } else {
+      if (day < rangeStart) {
+        setRangeEnd(rangeStart);
+        setRangeStart(day);
+      } else {
+        setRangeEnd(day);
+      }
+      setSelecting(false);
+    }
   };
-  const handleCustomApply = () => {
-    if (!customStart || !customEnd) return;
-    const normalized = normalizeDateKeyRange(customStart, customEnd, monthBounds.startKey, monthBounds.endKey);
-    onChange(normalized);
-    setIsOpen(false);
+  const handleApply = () => {
+    if (rangeStart) {
+      const endDate = rangeEnd || rangeStart;
+      const startKey = format(rangeStart, "yyyy-MM-dd");
+      const endKey = format(endDate, "yyyy-MM-dd");
+      const normalized = normalizeDateKeyRange(startKey, endKey, monthBounds.startKey, monthBounds.endKey);
+      onChange(normalized);
+      setIsOpen(false);
+    }
+  };
+  const handlePreviousMonth = () => {
+    const prevMonthDate = subMonths(new Date(calendarYear, calendarMonth), 1);
+    const newMonth = prevMonthDate.getMonth();
+    const newYear = prevMonthDate.getFullYear();
+    if (newYear < 2023) return;
+    setCalendarMonth(newMonth);
+    setCalendarYear(newYear);
+    onMonthNavigate?.(newMonth, newYear);
   };
+  const handleNextMonth = () => {
+    const nextMonthDate = addMonths(new Date(calendarYear, calendarMonth), 1);
+    const newMonth = nextMonthDate.getMonth();
+    const newYear = nextMonthDate.getFullYear();
+    const currentDate = /* @__PURE__ */ new Date();
+    if (newYear > currentDate.getFullYear() || newYear === currentDate.getFullYear() && newMonth > currentDate.getMonth()) {
+      return;
+    }
+    setCalendarMonth(newMonth);
+    setCalendarYear(newYear);
+    onMonthNavigate?.(newMonth, newYear);
+  };
+  const canGoPrevious = !(calendarYear === 2023 && calendarMonth === 0);
+  const canGoNext = !(calendarYear === (/* @__PURE__ */ new Date()).getFullYear() && calendarMonth === (/* @__PURE__ */ new Date()).getMonth());
+  const monthDate = useMemo(() => new Date(calendarYear, calendarMonth), [calendarYear, calendarMonth]);
+  const calendarDays = useMemo(() => {
+    const start = startOfMonth(monthDate);
+    const end = endOfMonth(monthDate);
+    const days = eachDayOfInterval({ start, end });
+    const startDayOfWeek = getDay(start);
+    const emptySlots = Array(startDayOfWeek).fill(null);
+    return [...emptySlots, ...days];
+  }, [monthDate]);
+  const isInRange = useCallback((day) => {
+    if (!rangeStart) return false;
+    if (!rangeEnd) return isSameDay(day, rangeStart);
+    return isWithinInterval(day, {
+      start: startOfDay(rangeStart),
+      end: startOfDay(rangeEnd)
+    });
+  }, [rangeStart, rangeEnd]);
+  const isRangeStart = useCallback((day) => {
+    return rangeStart && isSameDay(day, rangeStart);
+  }, [rangeStart]);
+  const isRangeEnd = useCallback((day) => {
+    return rangeEnd && isSameDay(day, rangeEnd);
+  }, [rangeEnd]);
+  const monthName = format(monthDate, "MMMM yyyy");
+  const startDisplay = rangeStart ? format(rangeStart, "MMM d, yyyy") : "Start Date";
+  const endDisplay = rangeEnd ? format(rangeEnd, "MMM d, yyyy") : "End Date";
   return /* @__PURE__ */ jsxs("div", { className: `relative ${className ?? ""}`, ref: dropdownRef, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onClick: () => setIsOpen((prev) => !prev),
-        className: "flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-3 py-2 text-left shadow-sm transition-colors hover:border-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500",
+        className: clsx(
+          "flex items-center gap-2 rounded-lg border bg-white px-3 py-2 text-left shadow-sm transition-all duration-200 focus:outline-none",
+          isOpen ? "border-blue-500 ring-2 ring-blue-500/20" : "border-gray-200 hover:border-gray-300 hover:shadow"
+        ),
         children: [
-          /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 text-slate-500" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] uppercase tracking-[0.2em] text-slate-500", children: displayLabel }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-slate-900", children: displayRange })
-          ] }),
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4 text-gray-400" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-gray-900", children: displayRange }),
           /* @__PURE__ */ jsx(
             ChevronDownIcon,
             {
-              className: `ml-2 h-4 w-4 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}`
+              className: clsx(
+                "ml-2 h-4 w-4 text-gray-400 transition-transform duration-200",
+                isOpen && "rotate-180"
+              )
             }
           )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx("div", { className: "absolute right-0 z-50 mt-2 w-80 rounded-lg border border-slate-200 bg-white shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-slate-500", children: "Weeks" }),
-      /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-1", children: presetOptions.map((preset) => {
-        const isActive = preset.startKey === normalizedRange.startKey && preset.endKey === normalizedRange.endKey;
-        return /* @__PURE__ */ jsxs(
+    isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 z-50 mt-2 w-[320px] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-xl p-4 animate-in fade-in zoom-in-95 duration-200", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4 pb-4 border-b border-gray-100", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-[10px] uppercase tracking-wider font-medium text-gray-500 mb-1", children: "Start" }),
+          /* @__PURE__ */ jsx("div", { className: clsx(
+            "px-2 py-1.5 rounded-md text-sm font-medium border transition-colors",
+            rangeStart ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-gray-50 border-gray-100 text-gray-400"
+          ), children: startDisplay })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "pt-4 text-gray-300", children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-[10px] uppercase tracking-wider font-medium text-gray-500 mb-1", children: "End" }),
+          /* @__PURE__ */ jsx("div", { className: clsx(
+            "px-2 py-1.5 rounded-md text-sm font-medium border transition-colors",
+            rangeEnd ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-gray-50 border-gray-100 text-gray-400"
+          ), children: endDisplay })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+        /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            onClick: () => handlePresetSelect(preset.startKey, preset.endKey),
-            className: `flex w-full items-center justify-between rounded-md px-2 py-2 text-left text-sm transition-colors ${isActive ? "bg-blue-50 text-blue-700" : "text-slate-700 hover:bg-slate-50"}`,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: preset.label }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500", children: preset.rangeLabel })
-            ]
+            onClick: handlePreviousMonth,
+            disabled: !canGoPrevious,
+            className: clsx(
+              "p-1 rounded-md transition-colors",
+              canGoPrevious ? "hover:bg-gray-100 text-gray-600" : "text-gray-300 cursor-not-allowed"
+            ),
+            "aria-label": "Previous month",
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-900", children: monthName }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleNextMonth,
+            disabled: !canGoNext,
+            className: clsx(
+              "p-1 rounded-md transition-colors",
+              canGoNext ? "hover:bg-gray-100 text-gray-600" : "text-gray-300 cursor-not-allowed"
+            ),
+            "aria-label": "Next month",
+            children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-5 w-5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEKDAYS2.map((day, i) => /* @__PURE__ */ jsx("div", { className: "h-8 flex items-center justify-center text-xs font-medium text-gray-400", children: day }, i)) }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-0", children: calendarDays.map((day, i) => {
+        if (!day) {
+          return /* @__PURE__ */ jsx("div", { className: "h-10" }, `empty-${i}`);
+        }
+        const inRange = isInRange(day);
+        const isStart = isRangeStart(day);
+        const isEnd = isRangeEnd(day);
+        const isSingleDaySelection = isStart && (!rangeEnd || rangeEnd && isSameDay(rangeStart, rangeEnd));
+        const hasSelection = rangeStart !== null;
+        const dayNum = day.getDate();
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleDayClick(day),
+            className: clsx(
+              "h-10 w-full flex items-center justify-center text-sm font-medium transition-all duration-150 relative",
+              // Not in range - fade when there's a selection
+              !inRange && hasSelection && "text-gray-300 hover:text-gray-500 hover:bg-gray-50 rounded-md",
+              !inRange && !hasSelection && "text-gray-700 hover:bg-gray-100 rounded-md",
+              // Middle of range - subtle highlight
+              inRange && !isStart && !isEnd && "bg-blue-50 text-blue-600",
+              // Start of range
+              isStart && !isSingleDaySelection && "bg-blue-600 text-white rounded-l-md shadow-sm z-10",
+              // End of range
+              isEnd && !isSingleDaySelection && "bg-blue-600 text-white rounded-r-md shadow-sm z-10",
+              // Single day selection
+              isSingleDaySelection && "bg-blue-600 text-white rounded-md shadow-sm z-10"
+            ),
+            children: dayNum
           },
-          preset.id
+          day.toISOString()
         );
       }) }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-slate-200 pt-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-slate-500", children: "Custom range" }),
-          !activePreset && /* @__PURE__ */ jsx("span", { className: "rounded-full border border-blue-100 bg-blue-50 px-2 py-0.5 text-[10px] uppercase tracking-wide text-blue-700", children: "Selected" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-[11px] font-medium text-slate-600", children: "Start" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "date",
-                value: customStart,
-                onChange: (event) => setCustomStart(event.target.value),
-                min: monthBounds.startKey,
-                max: monthBounds.endKey,
-                className: "mt-1 w-full rounded-md border border-slate-200 bg-white px-2 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("label", { className: "block text-[11px] font-medium text-slate-600", children: "End" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "date",
-                value: customEnd,
-                onChange: (event) => setCustomEnd(event.target.value),
-                min: monthBounds.startKey,
-                max: monthBounds.endKey,
-                className: "mt-1 w-full rounded-md border border-slate-200 bg-white px-2 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
-              }
-            )
-          ] })
-        ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setIsOpen(false),
+            className: "rounded-lg px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 transition-colors",
+            children: "Cancel"
+          }
+        ),
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            onClick: handleCustomApply,
-            className: "mt-3 w-full rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700",
-            children: "Apply range"
+            onClick: handleApply,
+            disabled: !rangeStart,
+            className: "rounded-lg bg-blue-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all",
+            children: "Apply"
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-3 text-xs text-slate-400", children: [
-        "Month: ",
-        monthLabel
       ] })
-    ] }) })
+    ] })
   ] });
 };
 var MonthlyRangeFilter_default = MonthlyRangeFilter;
@@ -37036,7 +37368,36 @@ var DEFAULT_PERFORMANCE_DATA = {
   avg_efficiency: 0,
   underperforming_workspaces: 0,
   total_workspaces: 0,
-  hasData: false
+  hasData: false,
+  output: 0,
+  idealOutput: 0
+};
+var getOrdinal = (n) => {
+  const suffix = ["th", "st", "nd", "rd"];
+  const v = n % 100;
+  return n + (suffix[(v - 20) % 10] || suffix[v] || suffix[0]);
+};
+var CustomTooltip2 = ({ 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 getShiftData2 = (day, shiftId) => {
   const shift = day.shifts[shiftId];
@@ -37075,7 +37436,7 @@ var LineMonthlyHistory = ({
   }, [rangeStart, rangeEnd, monthBounds.startKey, monthBounds.endKey]);
   const isFullRange = useMemo(() => isFullMonthRange(normalizedRange, year, month), [normalizedRange, year, month]);
   const monthLabel = useMemo(() => new Date(year, month).toLocaleString("default", { month: "long" }), [year, month]);
-  const rangeLabel = useMemo(() => {
+  useMemo(() => {
     return isFullRange ? monthLabel : formatRangeLabel(normalizedRange, monthLabel);
   }, [isFullRange, normalizedRange, monthLabel]);
   const analysisMonthlyData = useMemo(() => {
@@ -37097,15 +37458,6 @@ var LineMonthlyHistory = ({
     shiftId: selectedShiftId,
     enabled: !!lineId
   });
-  if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsx(
-      OptifyeLogoLoader_default,
-      {
-        size: "lg",
-        message: "Loading monthly performance data..."
-      }
-    ) });
-  }
   const averages = (analysisMonthlyData || []).reduce(
     (acc, day) => {
       const shiftData = getShiftData2(day, selectedShiftId);
@@ -37124,6 +37476,88 @@ var LineMonthlyHistory = ({
   const avgEfficiency = averages.count > 0 ? averages.efficiency / averages.count : 0;
   const avgUnderperforming = averages.count > 0 ? averages.underperforming / averages.count : 0;
   const avgTotalWorkspaces = averages.count > 0 ? averages.totalWorkspaces / averages.count : 0;
+  const hasRealData = (shift) => {
+    if (shift.hasData !== void 0) return shift.hasData;
+    return shift.avg_efficiency > 0 || shift.underperforming_workspaces > 0 || shift.total_workspaces > 0 || (shift.output || 0) > 0 || (shift.idealOutput || 0) > 0;
+  };
+  const chartData = useMemo(() => {
+    const rangeStartDate = parseDateKeyToDate(normalizedRange.startKey);
+    const rangeEndDate = parseDateKeyToDate(normalizedRange.endKey);
+    const dayNumbers = [];
+    for (let d = new Date(rangeStartDate); d <= rangeEndDate; d.setDate(d.getDate() + 1)) {
+      dayNumbers.push(d.getDate());
+    }
+    const dailyData = [];
+    let maxOutput = 0;
+    let lastSetTarget = 0;
+    for (let i = dayNumbers.length - 1; i >= 0; i--) {
+      const day = dayNumbers[i];
+      const dayData = analysisMonthlyData.find((d) => {
+        const date = new Date(d.date);
+        return date.getDate() === day;
+      });
+      const shiftData = dayData ? getShiftData2(dayData, selectedShiftId) : null;
+      const idealOutput = shiftData ? shiftData.idealOutput || 0 : 0;
+      if (idealOutput > 0) {
+        lastSetTarget = idealOutput;
+        break;
+      }
+    }
+    for (const day of dayNumbers) {
+      const dayData = analysisMonthlyData.find((d) => {
+        const date = new Date(d.date);
+        return date.getDate() === day;
+      });
+      const shiftData = dayData ? getShiftData2(dayData, selectedShiftId) : null;
+      const output = shiftData && hasRealData(shiftData) ? shiftData.output || 0 : 0;
+      const idealOutput = shiftData ? shiftData.idealOutput || 0 : 0;
+      if (output > maxOutput) maxOutput = output;
+      const color2 = output >= lastSetTarget ? "#00AB45" : "#E34329";
+      dailyData.push({
+        hour: getOrdinal(day),
+        // Using ordinal format (1st, 2nd, 3rd, etc.)
+        timeRange: `Day ${day}`,
+        output,
+        originalOutput: output,
+        // For label display
+        idealOutput,
+        color: color2
+      });
+    }
+    const calculatedMax = Math.max(maxOutput, lastSetTarget);
+    const yAxisMax = calculatedMax > 0 ? calculatedMax * 1.1 : 100;
+    return { data: dailyData, maxOutput, lastSetTarget, yAxisMax };
+  }, [analysisMonthlyData, normalizedRange.startKey, normalizedRange.endKey, selectedShiftId]);
+  const yAxisTicks = useMemo(() => {
+    const max = chartData.yAxisMax;
+    const target = chartData.lastSetTarget;
+    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.lastSetTarget]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsx(
+      OptifyeLogoLoader_default,
+      {
+        size: "lg",
+        message: "Loading monthly performance data..."
+      }
+    ) });
+  }
   const renderPerformanceSquares = (performances) => {
     if (!performances || !Array.isArray(performances)) {
       return null;
@@ -37215,64 +37649,18 @@ var LineMonthlyHistory = ({
           year,
           timezone,
           value: normalizedRange,
-          onChange: (nextRange) => onRangeChange?.(nextRange)
+          onChange: (nextRange) => onRangeChange?.(nextRange),
+          onMonthNavigate: (newMonth, newYear) => onCalendarMonthChange?.(new Date(newYear, newMonth))
         }
       ) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center mb-6 space-x-4", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                let newMonth = month - 1;
-                let newYear = year;
-                if (newMonth < 0) {
-                  newMonth = 11;
-                  newYear -= 1;
-                }
-                if (onCalendarMonthChange) {
-                  onCalendarMonthChange(new Date(newYear, newMonth));
-                }
-              },
-              className: "p-2 rounded-full hover:bg-gray-100",
-              "aria-label": "Previous month",
-              children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-5 h-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxs("h2", { className: "text-lg font-semibold text-gray-700", children: [
-            new Date(year, month).toLocaleString("default", { month: "long" }),
-            " ",
-            year
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                let newMonth = month + 1;
-                let newYear = year;
-                if (newMonth > 11) {
-                  newMonth = 0;
-                  newYear += 1;
-                }
-                const currentDate = /* @__PURE__ */ new Date();
-                const currentYear = currentDate.getFullYear();
-                const currentMonth = currentDate.getMonth();
-                if (newYear > currentYear || newYear === currentYear && newMonth > currentMonth) {
-                  return;
-                }
-                if (onCalendarMonthChange) {
-                  onCalendarMonthChange(new Date(newYear, newMonth));
-                }
-              },
-              className: `p-2 rounded-full ${(/* @__PURE__ */ new Date()).getFullYear() === year && (/* @__PURE__ */ new Date()).getMonth() === month ? "text-gray-300 cursor-not-allowed" : "hover:bg-gray-100 text-gray-600"}`,
-              disabled: (/* @__PURE__ */ new Date()).getFullYear() === year && (/* @__PURE__ */ new Date()).getMonth() === month,
-              "aria-label": "Next month",
-              children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-5 h-5" })
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center mb-6", children: /* @__PURE__ */ jsxs("h2", { className: "text-lg font-semibold text-gray-700", children: [
+          new Date(year, month).toLocaleString("default", { month: "long" }),
+          " ",
+          year
+        ] }) }),
         /* @__PURE__ */ jsx(
           LineHistoryCalendar_default,
           {
@@ -37287,26 +37675,20 @@ var LineMonthlyHistory = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-700 mb-1 text-center", children: "Efficiency" }),
-            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mb-4 text-center", children: [
-              "Cumulative for ",
-              rangeLabel
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "text-4xl font-bold text-center text-gray-900", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-1 text-center", children: "Efficiency" }),
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 mb-1 text-center uppercase tracking-wide", children: "Cumulative" }),
+            /* @__PURE__ */ jsxs("div", { className: "text-2xl font-bold text-center text-gray-900", children: [
               avgEfficiency.toFixed(1),
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-700 mb-1 text-center", children: "Avg. Underperforming" }),
-            /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 mb-4 text-center", children: [
-              "Cumulative for ",
-              rangeLabel
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "text-4xl font-bold text-center text-gray-900", children: [
+          /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-1 text-center", children: "Avg. Underperforming" }),
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-400 mb-1 text-center uppercase tracking-wide", children: "Cumulative" }),
+            /* @__PURE__ */ jsxs("div", { className: "text-2xl font-bold text-center text-gray-900", children: [
               avgUnderperforming.toFixed(1),
               "/",
               avgTotalWorkspaces.toFixed(1)
@@ -37314,9 +37696,9 @@ var LineMonthlyHistory = ({
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 flex flex-col", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-gray-700 mb-3", children: "Idle time Breakdown" }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[200px]", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 flex flex-col h-[220px]", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-1", children: "Idle time Breakdown" }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 relative -ml-4", children: /* @__PURE__ */ jsx(
               IdleTimeReasonChart,
               {
                 data: idleReasonsChartData,
@@ -37326,34 +37708,117 @@ var LineMonthlyHistory = ({
               chartKey
             ) })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-700 mb-4", children: "Top 3 Poorest Performers" }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 h-[220px] flex flex-col", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Top 3 Poorest Performers" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto pr-1 space-y-1 custom-scrollbar", children: [
               (underperformingWorkspaces[selectedShiftId] || []).slice(0, 3).map((workspace) => /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: () => handleWorkspaceClick(workspace),
-                  className: "block hover:bg-gray-50 transition-colors rounded-lg w-full text-left",
-                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 px-2 border-b border-gray-100 last:border-b-0", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "font-medium text-gray-900 text-sm", children: [
+                  className: "block hover:bg-gray-50 transition-colors rounded-lg w-full text-left group",
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-2 px-2 border-b border-gray-50 group-last:border-b-0", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "font-medium text-gray-900 text-xs", children: [
                       getWorkspaceDisplayName(workspace.workspace_name, lineId),
-                      workspace.avg_efficiency !== void 0 && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-xs text-gray-500", children: [
+                      workspace.avg_efficiency !== void 0 && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-[10px] text-gray-500", children: [
                         "(",
                         (workspace.avg_efficiency || 0).toFixed(1),
                         "%)"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 hidden xl:block", children: "Last 5 days:" }),
-                      renderPerformanceSquares(workspace.last_5_days)
-                    ] })
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: renderPerformanceSquares(workspace.last_5_days) })
                   ] })
                 },
                 workspace.workspace_uuid
               )),
-              (!underperformingWorkspaces || !underperformingWorkspaces[selectedShiftId]?.length) && /* @__PURE__ */ jsx("div", { className: "text-center text-gray-500 py-4 text-sm", children: "No underperforming workspaces found" })
+              (!underperformingWorkspaces || !underperformingWorkspaces[selectedShiftId]?.length) && /* @__PURE__ */ jsx("div", { className: "text-center text-gray-400 py-8 text-xs italic", children: "No underperforming workspaces" })
             ] })
           ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Daily Output" }) }),
+          /* @__PURE__ */ jsx("div", { style: { height: "220px" }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+            BarChart$1,
+            {
+              data: chartData.data,
+              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: 10, fill: "#6b7280" },
+                    interval: 0,
+                    angle: -45,
+                    textAnchor: "end",
+                    height: 60
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  YAxis,
+                  {
+                    domain: [0, chartData.yAxisMax],
+                    width: 40,
+                    ticks: yAxisTicks,
+                    tick: (props) => {
+                      const { x, y, payload } = props;
+                      const value = Math.round(payload.value);
+                      const targetValue = Math.round(chartData.lastSetTarget);
+                      const isTarget = value === targetValue && 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.toLocaleString()
+                        }
+                      );
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    cursor: false,
+                    content: CustomTooltip2
+                  }
+                ),
+                chartData.lastSetTarget > 0 && /* @__PURE__ */ jsx(
+                  ReferenceLine,
+                  {
+                    y: chartData.lastSetTarget,
+                    stroke: "#E34329",
+                    strokeDasharray: "5 5",
+                    strokeWidth: 2
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Bar,
+                  {
+                    dataKey: "output",
+                    radius: [4, 4, 0, 0],
+                    isAnimationActive: true,
+                    animationBegin: 0,
+                    animationDuration: 1e3,
+                    animationEasing: "ease-out",
+                    children: chartData.data.map((entry, index) => /* @__PURE__ */ jsx(
+                      Cell,
+                      {
+                        fill: entry.output === 0 ? "#f3f4f6" : entry.color,
+                        className: entry.output > 0 ? "hover:opacity-80 transition-opacity cursor-pointer" : ""
+                      },
+                      `cell-${index}`
+                    ))
+                  }
+                )
+              ]
+            },
+            chartKey
+          ) }) })
         ] })
       ] })
     ] })
@@ -38494,7 +38959,7 @@ var styles = `
     transform: scale(1) !important;
   }
 `;
-var WEEKDAYS2 = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var WEEKDAYS3 = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 var getTimeInZoneAsDate = (timezone) => {
   const time2 = getCurrentTimeInZone(timezone);
   return typeof time2 === "string" ? new Date(time2) : time2;
@@ -38526,10 +38991,10 @@ var WorkspaceHistoryCalendar = ({
     return () => clearTimeout(timer);
   }, [month, year]);
   const calendarData = useMemo(() => {
-    const startOfMonth = toZonedTime(new Date(year, month, 1), configuredTimezone);
-    const endOfMonth = toZonedTime(new Date(year, month + 1, 0), configuredTimezone);
-    const totalDays = endOfMonth.getDate();
-    let startOffset = startOfMonth.getDay() - 1;
+    const startOfMonth2 = toZonedTime(new Date(year, month, 1), configuredTimezone);
+    const endOfMonth2 = toZonedTime(new Date(year, month + 1, 0), configuredTimezone);
+    const totalDays = endOfMonth2.getDate();
+    let startOffset = startOfMonth2.getDay() - 1;
     if (startOffset === -1) startOffset = 6;
     const calendar = Array(startOffset).fill(null);
     for (let day = 1; day <= totalDays; day++) {
@@ -38738,7 +39203,7 @@ var WorkspaceHistoryCalendar = ({
           /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-gray-500 mt-1", children: "Calendar view of daily performance" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "grid gap-3 sm:gap-4 lg:gap-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 sm:gap-2", children: WEEKDAYS2.map((day) => /* @__PURE__ */ jsx("div", { className: "text-xs sm:text-sm font-medium text-gray-600 text-center", children: day.slice(0, 3) }, day)) }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 sm:gap-2", children: WEEKDAYS3.map((day) => /* @__PURE__ */ jsx("div", { className: "text-xs sm:text-sm font-medium text-gray-600 text-center", children: day.slice(0, 3) }, day)) }),
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 sm:gap-2", children: calendarData.calendar.map((day, index) => {
             const startOffset = calendarData.startOffset;
             const dayNumber = index >= startOffset ? index - startOffset + 1 : null;
@@ -38791,13 +39256,13 @@ var WorkspaceHistoryCalendar = ({
     ] })
   ] });
 };
-var WEEKDAYS3 = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-var getOrdinal = (n) => {
+var WEEKDAYS4 = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var getOrdinal2 = (n) => {
   const suffix = ["th", "st", "nd", "rd"];
   const v = n % 100;
   return n + (suffix[(v - 20) % 10] || suffix[v] || suffix[0]);
 };
-var CustomTooltip2 = ({ active, payload, label }) => {
+var CustomTooltip3 = ({ 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 }),
@@ -38900,7 +39365,7 @@ var WorkspaceMonthlyHistory = ({
       if (output > maxOutput) maxOutput = output;
       const color2 = output >= lastSetTarget ? "#00AB45" : "#E34329";
       dailyData.push({
-        hour: getOrdinal(day),
+        hour: getOrdinal2(day),
         // Using ordinal format (1st, 2nd, 3rd, etc.)
         timeRange: `Day ${day}`,
         output,
@@ -38934,9 +39399,26 @@ var WorkspaceMonthlyHistory = ({
       ticks.push(Math.round(v));
     }
     if (target > 0) {
-      ticks.push(Math.round(target));
+      const roundedTarget = Math.round(target);
+      if (!ticks.includes(roundedTarget)) {
+        let nearestIndex = -1;
+        let nearestDistance = Number.POSITIVE_INFINITY;
+        ticks.forEach((tick, index) => {
+          if (tick === 0) return;
+          const distance2 = Math.abs(tick - roundedTarget);
+          if (distance2 < nearestDistance) {
+            nearestDistance = distance2;
+            nearestIndex = index;
+          }
+        });
+        if (nearestIndex >= 0) {
+          ticks[nearestIndex] = roundedTarget;
+        } else {
+          ticks.push(roundedTarget);
+        }
+      }
     }
-    return Array.from(new Set(ticks)).filter((v) => v >= 0 && v <= max).sort((a, b) => a - b);
+    return ticks.filter((v) => v >= 0 && v <= max * 1.05).sort((a, b) => a - b);
   }, [chartData.yAxisMax, chartData.lastSetTarget]);
   const pieChartData = useMemo(() => {
     const validShifts = analysisMonthlyData.map((d) => getShiftData(d, selectedShiftId)).filter(hasRealData);
@@ -38972,10 +39454,10 @@ var WorkspaceMonthlyHistory = ({
     };
   }, [analysisMonthlyData, selectedShiftId]);
   const calendarData = useMemo(() => {
-    const startOfMonth = new Date(year, month, 1);
-    const endOfMonth = new Date(year, month + 1, 0);
-    const totalDays = endOfMonth.getDate();
-    let startOffset = startOfMonth.getDay() - 1;
+    const startOfMonth2 = new Date(year, month, 1);
+    const endOfMonth2 = new Date(year, month + 1, 0);
+    const totalDays = endOfMonth2.getDate();
+    let startOffset = startOfMonth2.getDay() - 1;
     if (startOffset === -1) startOffset = 6;
     const calendar = Array(startOffset).fill(null);
     for (let day = 1; day <= totalDays; day++) {
@@ -39042,68 +39524,19 @@ var WorkspaceMonthlyHistory = ({
           year,
           timezone,
           value: normalizedRange,
-          onChange: (nextRange) => onRangeChange?.(nextRange)
+          onChange: (nextRange) => onRangeChange?.(nextRange),
+          onMonthNavigate
         }
       ) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center mb-6 space-x-4", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                let newMonth = month - 1;
-                let newYear = year;
-                if (newMonth < 0) {
-                  newMonth = 11;
-                  newYear -= 1;
-                }
-                if (newYear < 2023) {
-                  return;
-                }
-                if (onMonthNavigate) {
-                  onMonthNavigate(newMonth, newYear);
-                }
-              },
-              className: "p-2 rounded-full hover:bg-gray-100",
-              "aria-label": "Previous month",
-              children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-5 h-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxs("h2", { className: "text-lg font-semibold text-gray-700", children: [
-            new Date(year, month).toLocaleString("default", { month: "long" }),
-            " ",
-            year
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => {
-                let newMonth = month + 1;
-                let newYear = year;
-                if (newMonth > 11) {
-                  newMonth = 0;
-                  newYear += 1;
-                }
-                const currentDate = /* @__PURE__ */ new Date();
-                const currentYear = currentDate.getFullYear();
-                const currentMonth = currentDate.getMonth();
-                if (newYear > currentYear || newYear === currentYear && newMonth > currentMonth) {
-                  return;
-                }
-                if (onMonthNavigate) {
-                  onMonthNavigate(newMonth, newYear);
-                }
-              },
-              className: `p-2 rounded-full ${(/* @__PURE__ */ new Date()).getFullYear() === year && (/* @__PURE__ */ new Date()).getMonth() === month ? "text-gray-300 cursor-not-allowed" : "hover:bg-gray-100 text-gray-600"}`,
-              disabled: (/* @__PURE__ */ new Date()).getFullYear() === year && (/* @__PURE__ */ new Date()).getMonth() === month,
-              "aria-label": "Next month",
-              children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-5 h-5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: WEEKDAYS3.map((day, idx) => /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-500 dark:text-gray-400 text-center", children: day }, day)) }),
+        /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center mb-6", children: /* @__PURE__ */ jsxs("h2", { className: "text-lg font-semibold text-gray-700", children: [
+          new Date(year, month).toLocaleString("default", { month: "long" }),
+          " ",
+          year
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: WEEKDAYS4.map((day, idx) => /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-500 dark:text-gray-400 text-center", children: day }, day)) }),
         /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2 mt-6", children: calendarData.calendar.map((day, index) => {
           const dayNumber = index >= calendarData.startOffset ? index - calendarData.startOffset + 1 : null;
           if (!dayNumber || dayNumber > new Date(year, month + 1, 0).getDate()) {
@@ -39120,6 +39553,7 @@ var WorkspaceMonthlyHistory = ({
           const getPerformanceColor = () => {
             if (isFuture) return "bg-gray-200 dark:bg-gray-700";
             if (!hasData || !shiftData) return "bg-gray-300 dark:bg-gray-600";
+            if (showRange && !inRange) return "bg-gray-200 dark:bg-gray-700";
             return shiftData.efficiency >= 75 ? "bg-green-500 dark:bg-green-600" : "bg-red-500 dark:bg-red-600";
           };
           return /* @__PURE__ */ jsx("div", { className: "aspect-square relative", children: /* @__PURE__ */ jsx(
@@ -39139,7 +39573,8 @@ var WorkspaceMonthlyHistory = ({
                   }
                 ),
                 /* @__PURE__ */ jsx("div", { className: `
-                        text-base font-medium ${hasData && !isFuture ? "text-white" : "text-gray-500"} flex items-center relative z-10
+                        text-base font-medium flex items-center relative z-10
+                        ${hasData && !isFuture && (!showRange || inRange) ? "text-white" : "text-gray-400"}
                         ${isToday2 ? "bg-blue-500 dark:bg-blue-600 rounded-full w-7 h-7 justify-center" : ""}
                       `, children: dayNumber }),
                 !isFuture && hasData && shiftData && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/80 rounded-lg p-2 text-white opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxs("div", { className: "text-xs space-y-1", children: [
@@ -39295,13 +39730,13 @@ var WorkspaceMonthlyHistory = ({
                   YAxis,
                   {
                     domain: [0, chartData.yAxisMax],
-                    width: 35,
+                    width: 40,
                     ticks: yAxisTicks,
                     tick: (props) => {
                       const { x, y, payload } = props;
                       const value = Math.round(payload.value);
                       const targetValue = Math.round(chartData.lastSetTarget);
-                      const isTarget = Math.abs(value - targetValue) < 1 && targetValue > 0;
+                      const isTarget = value === targetValue && targetValue > 0;
                       return /* @__PURE__ */ jsx(
                         "text",
                         {
@@ -39311,7 +39746,7 @@ var WorkspaceMonthlyHistory = ({
                           fontSize: "10",
                           fill: isTarget ? "#E34329" : "#6b7280",
                           fontWeight: isTarget ? "600" : "normal",
-                          children: value < 1e-3 ? "" : value.toString()
+                          children: value < 1e-3 ? "" : value.toLocaleString()
                         }
                       );
                     }
@@ -39321,7 +39756,7 @@ var WorkspaceMonthlyHistory = ({
                   Tooltip,
                   {
                     cursor: false,
-                    content: CustomTooltip2
+                    content: CustomTooltip3
                   }
                 ),
                 chartData.lastSetTarget > 0 && /* @__PURE__ */ jsx(
@@ -39950,13 +40385,15 @@ var LiveTimer = () => {
   });
   return /* @__PURE__ */ jsx("span", { children: formatter.format(time2) });
 };
-var getEfficiencyColor = (efficiency) => {
-  if (efficiency >= 80) {
-    return "bg-[#00AB45]/90 hover:bg-[#00AB45]/95";
-  } else if (efficiency >= 70) {
-    return "bg-[#FFB020]/90 hover:bg-[#FFB020]/95";
-  } else {
-    return "bg-[#E34329]/90 hover:bg-[#E34329]/95";
+var getGradientEfficiencyClasses = (color2) => {
+  switch (color2) {
+    case "green":
+      return "bg-gradient-to-r from-[#00AB45]/90 to-[#00AB45]/95";
+    case "yellow":
+      return "bg-gradient-to-r from-[#FFB020]/90 to-[#FFB020]/95";
+    case "red":
+    default:
+      return "bg-gradient-to-r from-[#E34329]/90 to-[#E34329]/95";
   }
 };
 var TREND_STYLES = {
@@ -40024,30 +40461,40 @@ var getWorkspaceStyles = (position, isPlaceholder = false) => {
           ${additionalStyles}
           ${isPlaceholder ? "cursor-default" : ""}`;
 };
-var Legend6 = () => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-3 bg-white/95 rounded-lg shadow-sm px-2 sm:px-4 py-1 sm:py-1.5 border border-gray-200/60 backdrop-blur-sm text-[10px] sm:text-sm", children: [
-  /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-700 hidden sm:block", children: "Efficiency:" }),
-  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#00AB45]/90 ring-1 ring-[#00AB45]/20" }),
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: "80-100%" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#FFB020]/90 ring-1 ring-[#FFB020]/20" }),
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: "70-79%" })
+var formatPercentRange = (min, max) => {
+  const format7 = (value) => Number.isInteger(value) ? `${value}` : value.toFixed(1);
+  return `${format7(min)}-${format7(max)}%`;
+};
+var Legend6 = ({ useBottleneckLabel = false, legend }) => {
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
+  const exclamationLabel = useBottleneckLabel ? "Bottleneck" : "<50% efficiency";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-3 bg-white/95 rounded-lg shadow-sm px-2 sm:px-4 py-1 sm:py-1.5 border border-gray-200/60 backdrop-blur-sm text-[10px] sm:text-sm", children: [
+    /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-700 hidden sm:block", children: "Efficiency:" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#00AB45]/90 ring-1 ring-[#00AB45]/20" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.green_min, effectiveLegend.green_max) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#FFB020]/90 ring-1 ring-[#FFB020]/20" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.yellow_min, effectiveLegend.yellow_max) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#E34329]/90 ring-1 ring-[#E34329]/20" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.red_min, effectiveLegend.red_max) })
+      ] })
     ] }),
+    /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-6 bg-gray-200 mx-1" }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 rounded-[12px] bg-[#E34329]/90 ring-1 ring-[#E34329]/20" }),
-      /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: "<70%" })
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-3 h-3 sm:w-5 sm:h-5 bg-[#E34329]/90 rounded-full ring-1 ring-[#E34329]/20 text-white font-bold text-[8px] sm:text-xs", children: "!" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: exclamationLabel })
     ] })
-  ] }),
-  /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-6 bg-gray-200 mx-1" }),
-  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-3 h-3 sm:w-5 sm:h-5 bg-[#E34329]/90 rounded-full ring-1 ring-[#E34329]/20 text-white font-bold text-[8px] sm:text-xs", children: "!" }),
-    /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600", children: "Bottleneck" })
-  ] })
-] });
+  ] });
+};
 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
+  const prevLegend = prevProps.legend || DEFAULT_EFFICIENCY_LEGEND;
+  const nextLegend = nextProps.legend || DEFAULT_EFFICIENCY_LEGEND;
+  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 && prevLegend.green_min === nextLegend.green_min && prevLegend.green_max === nextLegend.green_max && prevLegend.yellow_min === nextLegend.yellow_min && prevLegend.yellow_max === nextLegend.yellow_max && prevLegend.red_min === nextLegend.red_min && prevLegend.red_max === nextLegend.red_max && prevLegend.critical_threshold === nextLegend.critical_threshold && // Position doesn't need deep equality check as it's generally static
   prevProps.position.id === nextProps.position.id;
 };
 var WorkspaceGridItem = React24__default.memo(({
@@ -40056,20 +40503,21 @@ var WorkspaceGridItem = React24__default.memo(({
   isBottleneck = false,
   isLowEfficiency = false,
   isVeryLowEfficiency = false,
-  onHoverChange
+  onHoverChange,
+  legend
 }) => {
   const { navigate } = useNavigation();
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const isInactive = useMemo(() => !data.workspace_id || data.efficiency < 10, [data.workspace_id, data.efficiency]);
   const colorClass = useMemo(() => {
     const isConveyorEnd = position.size === "conveyor" && position.orientation;
+    const efficiencyColor = getEfficiencyColor(data.efficiency, effectiveLegend);
     if (isConveyorEnd) {
       if (isInactive) return "bg-gray-300/90";
-      if (data.efficiency >= 80) return "bg-gradient-to-r from-[#00AB45]/90 to-[#00AB45]/95";
-      if (data.efficiency >= 70) return "bg-gradient-to-r from-[#FFB020]/90 to-[#FFB020]/95";
-      return "bg-gradient-to-r from-[#E34329]/90 to-[#E34329]/95";
+      return getGradientEfficiencyClasses(efficiencyColor);
     }
-    return isInactive ? "bg-gray-300/90" : getEfficiencyColor(data.efficiency);
-  }, [data.efficiency, isInactive, position.size, position.orientation]);
+    return isInactive ? "bg-gray-300/90" : getEfficiencyColorClasses(data.efficiency, effectiveLegend);
+  }, [data.efficiency, effectiveLegend, isInactive, position.size, position.orientation]);
   const { arrow, color: arrowColor } = useMemo(() => getTrendArrowAndColor2(data.trend_score), [data.trend_score]);
   const workspaceNumber = useMemo(() => getWorkspaceNumber(data.workspace_name), [data.workspace_name]);
   const styles2 = useMemo(() => getWorkspaceStyles(position, isInactive), [position, isInactive]);
@@ -40151,6 +40599,8 @@ var WorkspaceGrid = React24__default.memo(({
   factoryView = "factory",
   line2Uuid = "line-2",
   className = "",
+  hasFlowBuffers = false,
+  legend = DEFAULT_EFFICIENCY_LEGEND,
   videoSources = {},
   displayNames = {},
   onWorkspaceHover,
@@ -40187,7 +40637,7 @@ var WorkspaceGrid = React24__default.memo(({
   return /* @__PURE__ */ jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx(Legend6, {}) }),
+        /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx(Legend6, { legend, useBottleneckLabel: hasFlowBuffers }) }),
         mapViewEnabled && /* @__PURE__ */ jsx(
           "button",
           {
@@ -40204,7 +40654,7 @@ var WorkspaceGrid = React24__default.memo(({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "sm:hidden mt-1 mr-32", children: /* @__PURE__ */ jsx(Legend6, {}) })
+      /* @__PURE__ */ jsx("div", { className: "sm:hidden mt-1 mr-32", children: /* @__PURE__ */ jsx(Legend6, { legend, useBottleneckLabel: hasFlowBuffers }) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "absolute top-14 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: viewMode === "video" ? /* @__PURE__ */ jsx(
       motion.div,
@@ -40220,6 +40670,7 @@ var WorkspaceGrid = React24__default.memo(({
             workspaces,
             videoSources,
             displayNames,
+            legend,
             onWorkspaceHover,
             onWorkspaceHoverEnd
           }
@@ -40239,6 +40690,7 @@ var WorkspaceGrid = React24__default.memo(({
           {
             workspaces,
             displayNames,
+            legend,
             onWorkspaceHover,
             onWorkspaceHoverEnd
           }
@@ -47719,7 +48171,7 @@ var AIAgentView = () => {
         barRadius: [4, 4, 0, 0]
         // Top corners rounded
       };
-      const CustomTooltip3 = ({ active, payload, label }) => {
+      const CustomTooltip4 = ({ 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 }),
@@ -47819,7 +48271,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip3, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip4, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsx(
               Bar,
               {
@@ -47863,7 +48315,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip3, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip4, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsx(
               Line,
               {
@@ -47983,7 +48435,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip3, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip4, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -48043,7 +48495,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip3, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip4, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -48207,7 +48659,7 @@ var AIAgentView = () => {
               Tooltip,
               {
                 cursor: { strokeDasharray: "3 3" },
-                content: /* @__PURE__ */ jsx(CustomTooltip3, {})
+                content: /* @__PURE__ */ jsx(CustomTooltip4, {})
               }
             ),
             /* @__PURE__ */ jsx(
@@ -48277,7 +48729,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip3, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip4, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -48351,7 +48803,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip3, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip4, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsx(
               Legend,
               {
@@ -49610,6 +50062,8 @@ function HomeView({
   const {
     workspaceMetrics,
     lineMetrics,
+    efficiencyLegend,
+    metadata: metricsMetadata,
     isLoading: metricsLoading,
     error: metricsError,
     refetch: refetchMetrics
@@ -49618,6 +50072,7 @@ function HomeView({
     userAccessibleLineIds: allLineIds
     // Pass user's accessible lines for supervisor filtering
   });
+  const hasFlowBuffers = Boolean(metricsMetadata?.hasFlowBuffers);
   const kpis = useMemo(() => {
     const lineMetricsRows = lineMetrics || [];
     if (selectedLineId === factoryViewId) {
@@ -50076,8 +50531,10 @@ function HomeView({
                   workspaces: memoizedWorkspaceMetrics,
                   lineNames,
                   factoryView: factoryViewId,
+                  legend: efficiencyLegend,
                   videoSources,
                   displayNames: workspaceDisplayNames,
+                  hasFlowBuffers,
                   className: "h-full",
                   onWorkspaceHover: handleWorkspaceHover,
                   onWorkspaceHoverEnd: handleWorkspaceHoverEnd
@@ -50104,8 +50561,10 @@ function HomeView({
                   // Show empty grid while loading
                   lineNames,
                   factoryView: factoryViewId,
+                  legend: efficiencyLegend,
                   videoSources,
                   displayNames: workspaceDisplayNames,
+                  hasFlowBuffers,
                   className: "h-full",
                   onWorkspaceHover: handleWorkspaceHover,
                   onWorkspaceHoverEnd: handleWorkspaceHoverEnd
@@ -50726,6 +51185,8 @@ var KPIDetailView = ({
             avg_efficiency: metric.avg_efficiency || 0,
             underperforming_workspaces: metric.underperforming_workspaces || 0,
             total_workspaces: metric.total_workspaces || 0,
+            output: metric.current_output || 0,
+            idealOutput: metric.ideal_output || metric.line_threshold || 0,
             compliance_percentage: 95 + Math.random() * 5,
             // Mock data: random value between 95-100%
             hasData: true
@@ -53181,6 +53642,201 @@ var ACTION_NAMES = {
   QUALITY_CONTROL: "Quality Control"
 };
 
+// src/lib/services/efficiencyLegendService.ts
+var EfficiencyLegendService = class {
+  // 5 minutes
+  constructor(supabase) {
+    this.cache = /* @__PURE__ */ new Map();
+    this.cacheExpiry = /* @__PURE__ */ new Map();
+    this.CACHE_DURATION = 5 * 60 * 1e3;
+    this.supabase = supabase;
+  }
+  /**
+   * Get efficiency legend for a company
+   */
+  async getEfficiencyLegend(companyId) {
+    try {
+      const cached = this.cache.get(companyId);
+      const expiry = this.cacheExpiry.get(companyId);
+      if (cached && expiry && Date.now() < expiry) {
+        return cached;
+      }
+      const params = new URLSearchParams({ company_id: companyId });
+      const response = await fetchBackendJson(
+        this.supabase,
+        `/api/efficiency-legend?${params.toString()}`
+      );
+      const normalized = this.normalizeLegend(response?.legend);
+      this.cache.set(companyId, normalized);
+      this.cacheExpiry.set(companyId, Date.now() + this.CACHE_DURATION);
+      return normalized;
+    } catch (error) {
+      console.error("Error fetching efficiency legend:", error);
+      return DEFAULT_EFFICIENCY_LEGEND;
+    }
+  }
+  /**
+   * Update or create efficiency legend for a company
+   */
+  async updateEfficiencyLegend(companyId, legend) {
+    try {
+      const normalizedLegend = this.normalizeLegend(legend);
+      const validation = this.validateLegend(normalizedLegend);
+      if (!validation.valid) {
+        return { success: false, error: validation.error };
+      }
+      const params = new URLSearchParams({ company_id: companyId });
+      await fetchBackendJson(
+        this.supabase,
+        `/api/efficiency-legend?${params.toString()}`,
+        {
+          method: "PUT",
+          body: JSON.stringify(normalizedLegend)
+        }
+      );
+      this.cache.delete(companyId);
+      this.cacheExpiry.delete(companyId);
+      return { success: true };
+    } catch (error) {
+      console.error("Error updating efficiency legend:", error);
+      return { success: false, error: error.message || "Failed to update efficiency legend" };
+    }
+  }
+  /**
+   * Clear cache for a specific company
+   */
+  clearCache(companyId) {
+    this.cache.delete(companyId);
+    this.cacheExpiry.delete(companyId);
+  }
+  /**
+   * Clear all cache
+   */
+  clearAllCache() {
+    this.cache.clear();
+    this.cacheExpiry.clear();
+  }
+  /**
+   * Validate legend configuration
+   */
+  validateLegend(legend) {
+    if (legend.green_min < 0 || legend.green_min > 100) {
+      return { valid: false, error: "Green minimum must be between 0 and 100" };
+    }
+    if (legend.green_max < 0 || legend.green_max > 100) {
+      return { valid: false, error: "Green maximum must be between 0 and 100" };
+    }
+    if (legend.yellow_min < 0 || legend.yellow_min > 100) {
+      return { valid: false, error: "Yellow minimum must be between 0 and 100" };
+    }
+    if (legend.yellow_max < 0 || legend.yellow_max > 100) {
+      return { valid: false, error: "Yellow maximum must be between 0 and 100" };
+    }
+    if (legend.red_min < 0 || legend.red_min > 100) {
+      return { valid: false, error: "Red minimum must be between 0 and 100" };
+    }
+    if (legend.red_max < 0 || legend.red_max > 100) {
+      return { valid: false, error: "Red maximum must be between 0 and 100" };
+    }
+    if (legend.critical_threshold < 0 || legend.critical_threshold > 100) {
+      return { valid: false, error: "Critical threshold must be between 0 and 100" };
+    }
+    if (legend.yellow_min >= legend.green_min) {
+      return { valid: false, error: "Yellow minimum must be less than green minimum" };
+    }
+    if (legend.red_max >= legend.yellow_min) {
+      return { valid: false, error: "Red maximum must be less than yellow minimum" };
+    }
+    if (legend.critical_threshold > legend.red_max) {
+      return { valid: false, error: "Critical threshold must be less than or equal to red maximum" };
+    }
+    return { valid: true };
+  }
+  normalizeLegend(legend) {
+    const fallback = DEFAULT_EFFICIENCY_LEGEND;
+    if (!legend) return fallback;
+    const coerce = (value, fallbackValue) => {
+      const num = Number(value);
+      return Number.isFinite(num) ? num : fallbackValue;
+    };
+    return {
+      green_min: coerce(legend.green_min, fallback.green_min),
+      green_max: coerce(legend.green_max, fallback.green_max),
+      yellow_min: coerce(legend.yellow_min, fallback.yellow_min),
+      yellow_max: coerce(legend.yellow_max, fallback.yellow_max),
+      red_min: coerce(legend.red_min, fallback.red_min),
+      red_max: coerce(legend.red_max, fallback.red_max),
+      critical_threshold: coerce(legend.critical_threshold, fallback.critical_threshold)
+    };
+  }
+};
+var efficiencyLegendServiceInstance = null;
+function getEfficiencyLegendService(supabase) {
+  if (!efficiencyLegendServiceInstance) {
+    efficiencyLegendServiceInstance = new EfficiencyLegendService(supabase);
+  }
+  return efficiencyLegendServiceInstance;
+}
+
+// src/lib/hooks/useEfficiencyLegend.ts
+function useEfficiencyLegend(companyId) {
+  const supabase = useSupabase();
+  const config = useDashboardConfig();
+  const [legend, setLegend] = useState(DEFAULT_EFFICIENCY_LEGEND);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const effectiveCompanyId = companyId || config.entityConfig?.companyId;
+  const fetchLegend = useCallback(async () => {
+    if (!supabase || !effectiveCompanyId) {
+      setIsLoading(false);
+      return;
+    }
+    try {
+      setIsLoading(true);
+      setError(null);
+      const service = getEfficiencyLegendService(supabase);
+      const fetchedLegend = await service.getEfficiencyLegend(effectiveCompanyId);
+      setLegend(fetchedLegend);
+    } catch (err) {
+      console.error("Error fetching efficiency legend:", err);
+      setError(err.message || "Failed to fetch efficiency legend");
+      setLegend(DEFAULT_EFFICIENCY_LEGEND);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [supabase, effectiveCompanyId]);
+  useEffect(() => {
+    fetchLegend();
+  }, [fetchLegend]);
+  const updateLegend = useCallback(async (newLegend) => {
+    if (!supabase || !effectiveCompanyId) {
+      return { success: false, error: "Supabase client or company ID not available" };
+    }
+    try {
+      const service = getEfficiencyLegendService(supabase);
+      const result = await service.updateEfficiencyLegend(effectiveCompanyId, newLegend);
+      if (result.success) {
+        setLegend(newLegend);
+        setError(null);
+      } else {
+        setError(result.error || "Failed to update efficiency legend");
+      }
+      return result;
+    } catch (err) {
+      const errorMsg = err.message || "Failed to update efficiency legend";
+      setError(errorMsg);
+      return { success: false, error: errorMsg };
+    }
+  }, [supabase, effectiveCompanyId]);
+  return {
+    legend,
+    isLoading,
+    error,
+    updateLegend,
+    refetch: fetchLegend
+  };
+}
+
 // src/views/TargetsView.utils.ts
 var calculatePPH = (cycleTime, breaks = [], shiftHours = 0) => {
   if (cycleTime === "" || cycleTime === 0) return "";
@@ -53207,369 +53863,245 @@ var getStoredLineState2 = (lineId) => {
     return false;
   }
 };
-var BulkConfigureModal = ({
+var ConfigureLegendModal = ({
   isOpen,
   onClose,
-  lineWorkspaces,
-  lineNames,
   onSave,
-  selectedShift
+  legend,
+  canSave = true
 }) => {
-  const [selectedLine, setSelectedLine] = useState("");
-  const [selectedWorkspaces, setSelectedWorkspaces] = useState([]);
-  const [actionType, setActionType] = useState("assembly");
-  const [targetPPH, setTargetPPH] = useState("");
-  const [targetCycleTime, setTargetCycleTime] = useState("");
-  const [targetDayOutput, setTargetDayOutput] = useState("");
-  const [productId, setProductId] = useState("");
-  const [selectedCount, setSelectedCount] = useState(0);
-  const shiftHours = useMemo(() => {
-    if (selectedLine && lineWorkspaces[selectedLine]) {
-      return lineWorkspaces[selectedLine].shiftHours;
-    }
-    return 8;
-  }, [selectedLine, lineWorkspaces]);
-  const selectedLineBreaks = useMemo(() => {
-    if (selectedLine && lineWorkspaces[selectedLine]) {
-      return lineWorkspaces[selectedLine].breaks;
-    }
-    return [];
-  }, [selectedLine, lineWorkspaces]);
-  useEffect(() => {
-    if (!isOpen) {
-      setTimeout(() => {
-        setSelectedLine("");
-        setSelectedWorkspaces([]);
-        setActionType("assembly");
-        setTargetPPH("");
-        setTargetCycleTime("");
-        setTargetDayOutput("");
-        setProductId("");
-      }, 200);
-    }
-  }, [isOpen]);
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
+  const [redThreshold, setRedThreshold] = useState(effectiveLegend.yellow_min);
+  const [greenThreshold, setGreenThreshold] = useState(effectiveLegend.green_min);
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveSuccess, setSaveSuccess] = useState(false);
   useEffect(() => {
-    if (selectedLine && lineWorkspaces[selectedLine]) {
-      setProductId(lineWorkspaces[selectedLine].productId);
+    if (isOpen) {
+      setRedThreshold(effectiveLegend.yellow_min);
+      setGreenThreshold(effectiveLegend.green_min);
+      setSaveSuccess(false);
     }
-  }, [selectedLine, lineWorkspaces]);
-  useEffect(() => {
-    setSelectedCount(selectedWorkspaces.length);
-  }, [selectedWorkspaces]);
+  }, [isOpen, effectiveLegend]);
   const handleSave = async () => {
-    if (selectedWorkspaces.length === 0) {
-      toast.error("Please select at least one workspace");
+    if (!canSave) {
+      toast.error("You do not have permission to update the legend.");
       return;
     }
-    if (targetPPH === "" && targetCycleTime === "" && targetDayOutput === "") {
-      toast.error("Please enter at least one target value");
+    if (redThreshold === "" || greenThreshold === "") {
+      toast.error("Please enter valid threshold values");
       return;
     }
-    if (!selectedLine) {
-      toast.error("Please select a line");
+    if (Number(redThreshold) >= Number(greenThreshold)) {
+      toast.error("Red threshold must be lower than Green threshold");
       return;
     }
-    const updates = {
-      ...actionType && { actionType },
-      ...targetPPH !== "" && { targetPPH },
-      ...targetCycleTime !== "" && { targetCycleTime },
-      ...targetDayOutput !== "" && { targetDayOutput }
-    };
-    if (targetCycleTime !== "" && targetPPH === "") {
-      const lineBreaks = lineWorkspaces[selectedLine].breaks || [];
-      const lineShiftHours = lineWorkspaces[selectedLine].shiftHours;
-      const calculatedPPH = calculatePPH(targetCycleTime, lineBreaks, lineShiftHours);
-      if (calculatedPPH !== "") {
-        updates.targetPPH = calculatedPPH;
-      }
-    }
-    if (updates.targetPPH !== void 0 && targetDayOutput === "") {
-      const lineBreaks = lineWorkspaces[selectedLine].breaks || [];
-      const lineShiftHours = lineWorkspaces[selectedLine].shiftHours;
-      const calculatedOutput = calculateDayOutput(updates.targetPPH, lineShiftHours, lineBreaks);
-      if (calculatedOutput !== "") {
-        updates.targetDayOutput = calculatedOutput;
-      }
-    }
-    onSave({
-      lineId: selectedLine,
-      workspaceIds: selectedWorkspaces,
-      productId,
-      updates
-    });
-    onClose();
-  };
-  const toggleAllWorkspaces = (lineId) => {
-    if (!lineWorkspaces[lineId]) return;
-    const allWorkspaceIds = lineWorkspaces[lineId].workspaces.map((w) => w.id);
-    if (selectedWorkspaces.length === allWorkspaceIds.length) {
-      setSelectedWorkspaces([]);
-    } else {
-      setSelectedWorkspaces(allWorkspaceIds);
+    if (Number(redThreshold) < 1 || Number(redThreshold) > 100 || Number(greenThreshold) > 100) {
+      toast.error("Thresholds must be between 1 and 100");
+      return;
     }
-  };
-  useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === "Escape") {
-        onClose();
+    const redMax = Number(redThreshold) - 1;
+    const yellowMax = Number(greenThreshold) - 1;
+    if (redMax < DEFAULT_EFFICIENCY_LEGEND.critical_threshold) {
+      toast.error("Red threshold must be above 50% while critical alerts are fixed at <50%.");
+      return;
+    }
+    setIsSaving(true);
+    setSaveSuccess(false);
+    try {
+      const result = await onSave({
+        green_min: Number(greenThreshold),
+        green_max: 100,
+        yellow_min: Number(redThreshold),
+        yellow_max: yellowMax,
+        red_min: 0,
+        red_max: redMax,
+        critical_threshold: DEFAULT_EFFICIENCY_LEGEND.critical_threshold
+      });
+      if (result.success) {
+        setSaveSuccess(true);
+        setTimeout(() => setSaveSuccess(false), 3e3);
+      } else {
+        toast.error(result.error || "Failed to update legend");
       }
-    };
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
+    } catch (error) {
+      console.error("Error saving legend:", error);
+      toast.error("Failed to update legend");
+    } finally {
+      setIsSaving(false);
     }
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [isOpen, onClose]);
+  };
   if (!isOpen) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "fixed inset-0 bg-gray-900/50 backdrop-blur-sm z-50 flex items-center justify-center",
+      className: "fixed inset-0 bg-gray-900/40 backdrop-blur-sm z-50 flex items-center justify-center transition-opacity duration-300",
       onClick: (e) => {
         if (e.target === e.currentTarget) {
           onClose();
         }
       },
-      children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-xl w-full max-w-3xl max-h-[90vh] flex flex-col animate-modal-in", children: [
-        /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-xl w-full max-w-xl flex flex-col animate-modal-in transform transition-all", children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-6 py-5 border-b border-gray-100 flex items-center justify-between bg-white rounded-t-lg", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Bulk Configure Targets" }),
-            /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Update multiple workspace targets at once" })
+            /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-900", children: "Performance Thresholds" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Define acceptance criteria for production metrics." })
           ] }),
           /* @__PURE__ */ jsx(
             "button",
             {
               onClick: onClose,
-              className: "text-gray-400 hover:text-gray-500 transition-colors p-1 hover:bg-gray-100 rounded-lg",
-              children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" })
+              className: "text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-50 rounded-md",
+              children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-6 overflow-y-scroll flex-1 custom-scrollbar relative", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Select Line" }),
-                /* @__PURE__ */ jsxs(
-                  "select",
-                  {
-                    value: selectedLine,
-                    onChange: (e) => {
-                      setSelectedLine(e.target.value);
-                      setSelectedWorkspaces([]);
-                    },
-                    className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                    shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                    transition-all duration-200 hover:border-blue-400\n                    appearance-none bg-no-repeat bg-right pr-10\n                    hover:bg-blue-50/50",
-                    children: [
-                      /* @__PURE__ */ jsx("option", { value: "", children: "Select a line" }),
-                      Object.entries(lineWorkspaces).map(([lineId, line]) => /* @__PURE__ */ jsx("option", { value: lineId, className: "py-2", children: lineNames[lineId] || lineId }, lineId))
-                    ]
-                  }
-                )
-              ] }),
-              selectedLine && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Product Code" }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "text",
-                    value: productId,
-                    onChange: (e) => setProductId(e.target.value),
-                    placeholder: "e.g., PROD-001",
-                    className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                      shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                      transition-all duration-200 hover:border-blue-400"
-                  }
-                )
-              ] })
-            ] }),
-            selectedLine && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Select Workspaces" }),
-                    selectedCount > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800", children: [
-                      selectedCount,
-                      " selected"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => toggleAllWorkspaces(selectedLine),
-                      className: "text-sm text-blue-600 hover:text-blue-700 font-medium px-2 py-1 rounded hover:bg-blue-50 transition-colors",
-                      children: selectedWorkspaces.length === lineWorkspaces[selectedLine].workspaces.length ? "Deselect All" : "Select All"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2 max-h-48 overflow-y-auto p-2 border border-gray-200 rounded-lg bg-gray-50", children: lineWorkspaces[selectedLine].workspaces.map((workspace) => /* @__PURE__ */ jsxs(
-                  "label",
-                  {
-                    className: `flex items-center space-x-2 p-2 rounded cursor-pointer transition-all duration-200 ${selectedWorkspaces.includes(workspace.id) ? "bg-blue-50 border border-blue-200" : "bg-white border border-gray-200 hover:border-gray-300"}`,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          type: "checkbox",
-                          checked: selectedWorkspaces.includes(workspace.id),
-                          onChange: (e) => {
-                            if (e.target.checked) {
-                              setSelectedWorkspaces((prev) => [...prev, workspace.id]);
-                            } else {
-                              setSelectedWorkspaces((prev) => prev.filter((id3) => id3 !== workspace.id));
-                            }
-                          },
-                          className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { className: `text-sm ${selectedWorkspaces.includes(workspace.id) ? "text-blue-900 font-medium" : "text-gray-900"}`, children: formatWorkspaceName(workspace.name, selectedLine) })
-                    ]
-                  },
-                  workspace.id
-                )) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Action Type" }),
-                /* @__PURE__ */ jsxs(
-                  "select",
-                  {
-                    value: actionType,
-                    onChange: (e) => setActionType(e.target.value),
-                    className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                      shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                      transition-all duration-200 hover:border-blue-400\n                      appearance-none bg-no-repeat bg-right pr-10\n                      hover:bg-blue-50/50",
-                    children: [
-                      /* @__PURE__ */ jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
-                      /* @__PURE__ */ jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
-                    ]
-                  }
-                )
-              ] })
+        /* @__PURE__ */ jsxs("div", { className: "p-8 space-y-8", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2 pt-6", children: [
+            " ",
+            /* @__PURE__ */ jsxs("div", { className: "h-6 w-full rounded-md bg-gray-100 relative overflow-visible ring-1 ring-black/5 flex mt-2", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-full bg-red-500 transition-all duration-500 ease-in-out relative group first:rounded-l-md",
+                  style: { width: `${Math.min(Number(redThreshold) || 0, 100)}%` },
+                  children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-full bg-yellow-400 transition-all duration-500 ease-in-out relative group",
+                  style: { width: `${Math.max(0, Math.min((Number(greenThreshold) || 0) - (Number(redThreshold) || 0), 100 - (Number(redThreshold) || 0)))}%` },
+                  children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-full bg-green-500 transition-all duration-500 ease-in-out relative group last:rounded-r-md",
+                  style: { width: `${Math.max(0, 100 - (Number(greenThreshold) || 0))}%` },
+                  children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute -top-8 transition-all duration-500 ease-in-out z-20",
+                  style: { left: `${Math.min(Number(redThreshold) || 0, 100)}%`, transform: "translateX(-50%)" },
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-xs font-bold text-gray-900 bg-white px-1.5 py-0.5 rounded shadow-sm border border-gray-200 mb-1 whitespace-nowrap", children: [
+                      redThreshold,
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "w-px h-3 bg-gray-400/50" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute -top-8 transition-all duration-500 ease-in-out z-20",
+                  style: { left: `${Math.min(Number(greenThreshold) || 0, 100)}%`, transform: "translateX(-50%)" },
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-xs font-bold text-gray-900 bg-white px-1.5 py-0.5 rounded shadow-sm border border-gray-200 mb-1 whitespace-nowrap", children: [
+                      greenThreshold,
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "w-px h-3 bg-gray-400/50" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "absolute top-0 bottom-0 w-px bg-white/50 z-10 pointer-events-none", style: { left: `${Math.min(Number(redThreshold) || 0, 100)}%` } }),
+              /* @__PURE__ */ jsx("div", { className: "absolute top-0 bottom-0 w-px bg-white/50 z-10 pointer-events-none", style: { left: `${Math.min(Number(greenThreshold) || 0, 100)}%` } })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [
-                  "Target Cycle Time",
-                  /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs text-gray-400", children: "seconds per piece" })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs font-medium text-gray-400 pt-1", children: [
+              /* @__PURE__ */ jsx("span", { children: "0%" }),
+              /* @__PURE__ */ jsx("span", { children: "100%+" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8 relative", children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-gray-300", children: /* @__PURE__ */ jsx(ArrowRight, { className: "w-5 h-5" }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Critical Limit" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-red-500 mr-2.5" }),
+                /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
                   /* @__PURE__ */ jsx(
                     "input",
                     {
                       type: "number",
-                      value: targetCycleTime,
+                      value: redThreshold,
                       onChange: (e) => {
-                        const newValue = e.target.value ? Number(e.target.value) : "";
-                        setTargetCycleTime(newValue);
-                        if (newValue !== "" && newValue > 0) {
-                          const pph = calculatePPH(newValue, selectedLineBreaks, shiftHours);
-                          setTargetPPH(pph);
-                          const dayOutput = calculateDayOutput(pph, shiftHours, selectedLineBreaks);
-                          setTargetDayOutput(dayOutput);
-                        } else if (newValue === "") {
-                          setTargetPPH("");
-                          setTargetDayOutput("");
-                        }
+                        setRedThreshold(e.target.value === "" ? "" : Number(e.target.value));
+                        setSaveSuccess(false);
                       },
-                      className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                        shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                        transition-all duration-200 hover:border-blue-400",
-                      min: "0",
-                      step: "0.01",
-                      placeholder: "Enter cycle time"
+                      min: 1,
+                      max: 100,
+                      className: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2 px-3 bg-white no-spinner",
+                      placeholder: "70"
                     }
                   ),
-                  targetCycleTime !== "" && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => {
-                        setTargetCycleTime("");
-                        setTargetPPH("");
-                        setTargetDayOutput("");
-                      },
-                      className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-500",
-                      children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
-                    }
-                  )
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx("span", { className: "text-gray-500 sm:text-sm", children: "%" }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [
-                  "Target PPH",
-                  /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs text-gray-400", children: "pieces per hour" })
+              /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs text-gray-500", children: [
+                "Efficiency below ",
+                /* @__PURE__ */ jsxs("span", { className: "font-medium text-gray-900", children: [
+                  redThreshold,
+                  "%"
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                " will show in ",
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-red-600", children: "red" }),
+                "."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Target Limit" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-green-500 mr-2.5" }),
+                /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
                   /* @__PURE__ */ jsx(
                     "input",
                     {
                       type: "number",
-                      value: targetPPH,
+                      value: greenThreshold,
                       onChange: (e) => {
-                        const newValue = e.target.value ? Number(e.target.value) : "";
-                        setTargetPPH(newValue);
-                        if (newValue !== "") {
-                          const dayOutput = calculateDayOutput(newValue, shiftHours, selectedLineBreaks);
-                          setTargetDayOutput(dayOutput);
-                        }
+                        setGreenThreshold(e.target.value === "" ? "" : Number(e.target.value));
+                        setSaveSuccess(false);
                       },
-                      className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                        shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                        transition-all duration-200 hover:border-blue-400",
-                      min: "0",
-                      step: "0.1",
-                      placeholder: "Enter PPH"
+                      min: 1,
+                      max: 100,
+                      className: "block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm py-2 px-3 bg-white no-spinner",
+                      placeholder: "80"
                     }
                   ),
-                  targetPPH !== "" && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => {
-                        setTargetPPH("");
-                        setTargetDayOutput("");
-                      },
-                      className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-500",
-                      children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
-                    }
-                  )
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx("span", { className: "text-gray-500 sm:text-sm", children: "%" }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [
-                  "Total Day Output",
-                  /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs text-gray-400", children: "pieces per day" })
+              /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs text-gray-500", children: [
+                "Efficiency above ",
+                /* @__PURE__ */ jsxs("span", { className: "font-medium text-gray-900", children: [
+                  greenThreshold,
+                  "%"
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "number",
-                      value: targetDayOutput,
-                      onChange: (e) => setTargetDayOutput(e.target.value ? Number(e.target.value) : ""),
-                      className: "w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n                        shadow-sm focus:border-blue-500 focus:ring-blue-500 \n                        transition-all duration-200 hover:border-blue-400",
-                      min: "0",
-                      step: "1",
-                      placeholder: "Enter day output"
-                    }
-                  ),
-                  targetDayOutput !== "" && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => setTargetDayOutput(""),
-                      className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-500",
-                      children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
-                    }
-                  )
-                ] })
+                " will show in ",
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-green-600", children: "green" }),
+                "."
               ] })
-            ] }) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-white to-transparent pointer-events-none" })
+            ] })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-between items-center", children: [
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: selectedCount > 0 && /* @__PURE__ */ jsxs("span", { children: [
-            "Updating ",
-            /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: selectedCount }),
-            " workspace",
-            selectedCount !== 1 ? "s" : ""
+        /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 bg-gray-50 border-t border-gray-100 flex items-center justify-between gap-3 rounded-b-lg", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-h-[20px]", children: saveSuccess && /* @__PURE__ */ jsxs("span", { className: "text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { className: "w-4 h-4" }),
+            "Saved successfully"
           ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex space-x-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3", children: [
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: onClose,
-                className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 \n                rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 \n                focus:ring-blue-500 transition-all duration-200",
+                className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm transition-all",
                 children: "Cancel"
               }
             ),
@@ -53577,10 +54109,9 @@ var BulkConfigureModal = ({
               "button",
               {
                 onClick: handleSave,
-                disabled: !selectedLine || selectedWorkspaces.length === 0,
-                className: `px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 
-                ${!selectedLine || selectedWorkspaces.length === 0 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"}`,
-                children: "Apply Changes"
+                disabled: !canSave || isSaving,
+                className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm transition-all disabled:bg-gray-300 disabled:cursor-not-allowed",
+                children: isSaving ? "Saving..." : "Save Changes"
               }
             )
           ] })
@@ -53589,7 +54120,7 @@ var BulkConfigureModal = ({
     }
   );
 };
-var BulkConfigureModal_default = BulkConfigureModal;
+var ConfigureLegendModal_default = ConfigureLegendModal;
 var SKUModal = ({
   isOpen,
   onClose,
@@ -53990,7 +54521,8 @@ var TargetsViewUI = ({
     { id: 0, name: "Day Shift" },
     { id: 1, name: "Night Shift" }
   ],
-  isBulkConfigureOpen,
+  isConfigureLegendOpen,
+  legend,
   navItems = [],
   currentPathname = "/targets",
   canSaveTargets = true,
@@ -54001,8 +54533,8 @@ var TargetsViewUI = ({
   onActionTypeChange,
   onShiftChange,
   onSaveLine,
-  onToggleBulkConfigure,
-  onBulkConfigure,
+  onToggleConfigureLegend,
+  onSaveLegend,
   onUpdateWorkspaceDisplayName,
   // SKU props
   skuEnabled = false,
@@ -54028,11 +54560,13 @@ var TargetsViewUI = ({
       /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:right-0 w-full sm:w-auto", children: /* @__PURE__ */ jsxs(
         "button",
         {
-          className: "w-full sm:w-auto px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200",
-          onClick: onToggleBulkConfigure,
+          className: `w-full sm:w-auto px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium rounded-lg transition-all duration-200 ${canSaveTargets ? "text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" : "text-gray-400 bg-gray-100 border border-gray-200 cursor-not-allowed"}`,
+          onClick: onToggleConfigureLegend,
+          disabled: !canSaveTargets,
+          title: !canSaveTargets ? "You do not have permission to update the legend" : "",
           children: [
-            /* @__PURE__ */ jsx(Settings2, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 inline-block" }),
-            "Bulk Configure"
+            /* @__PURE__ */ jsx(Palette, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 inline-block" }),
+            "Configure Legend"
           ]
         }
       ) }),
@@ -54334,14 +54868,13 @@ var TargetsViewUI = ({
       )) })
     ] }) }),
     /* @__PURE__ */ jsx(
-      BulkConfigureModal_default,
+      ConfigureLegendModal_default,
       {
-        isOpen: isBulkConfigureOpen,
-        onClose: onToggleBulkConfigure,
-        lineWorkspaces,
-        lineNames,
-        onSave: onBulkConfigure,
-        selectedShift
+        isOpen: isConfigureLegendOpen,
+        onClose: onToggleConfigureLegend,
+        onSave: onSaveLegend,
+        legend,
+        canSave: canSaveTargets
       }
     )
   ] });
@@ -54387,7 +54920,7 @@ var TargetsView = ({
     () => lineIds.reduce((acc, id3) => ({ ...acc, [id3]: false }), {})
   );
   const [isLoading, setIsLoading] = useState(true);
-  const [isBulkConfigureOpen, setIsBulkConfigureOpen] = useState(false);
+  const [isConfigureLegendOpen, setIsConfigureLegendOpen] = useState(false);
   const [selectedWorkspaces, setSelectedWorkspaces] = useState([]);
   const [selectedShift, setSelectedShift] = useState(0);
   const [shiftOptions, setShiftOptions] = useState([]);
@@ -54404,6 +54937,7 @@ var TargetsView = ({
   const supabase = useSupabase();
   const effectiveUserId = userId || "6bf6f271-1e55-4a95-9b89-1c3820b58739";
   const dashboardConfig = useDashboardConfig();
+  const { legend, updateLegend } = useEfficiencyLegend(companyId);
   const { skus, isLoading: skusLoading } = useSKUs(companyId);
   const skuEnabled = dashboardConfig?.skuConfig?.enabled || false;
   useEffect(() => {
@@ -54839,41 +55373,23 @@ var TargetsView = ({
       console.log(`[handleSaveLine] Set savingLines to false for ${lineId} in finally block`);
     }
   }, [canSaveTargets, supabase, lineWorkspaces, selectedShift, lineNames, onSaveChanges, skuEnabled, dashboardConfig]);
-  const handleBulkConfigure = async (updates) => {
-    if (!actionIds) return;
-    if (updates.productId !== void 0) {
-      setLineWorkspaces((prev) => ({
-        ...prev,
-        [updates.lineId]: {
-          ...prev[updates.lineId],
-          productId: updates.productId || ""
-        }
-      }));
+  const handleSaveLegend = useCallback(async (nextLegend) => {
+    if (!canSaveTargets) {
+      toast.error("You do not have permission to update the legend.");
+      return { success: false, error: "Permission denied" };
+    }
+    const result = await updateLegend(nextLegend);
+    if (result.success) {
+      toast.success("Efficiency legend updated successfully");
+    } else if (result.error) {
+      toast.error(result.error);
+    } else {
+      toast.error("Failed to update efficiency legend");
     }
-    setLineWorkspaces((prev) => ({
-      ...prev,
-      [updates.lineId]: {
-        ...prev[updates.lineId],
-        workspaces: prev[updates.lineId].workspaces.map((ws) => {
-          if (!updates.workspaceIds.includes(ws.id)) return ws;
-          return {
-            ...ws,
-            ...updates.updates.actionType && {
-              actionType: updates.updates.actionType,
-              actionId: actionIds[updates.updates.actionType]
-            },
-            ...updates.updates.targetPPH !== void 0 && { targetPPH: updates.updates.targetPPH },
-            ...updates.updates.targetCycleTime !== void 0 && { targetCycleTime: updates.updates.targetCycleTime },
-            ...updates.updates.targetDayOutput !== void 0 && { targetDayOutput: updates.updates.targetDayOutput }
-          };
-        })
-      }
-    }));
-    toast.success(`Updated ${updates.workspaceIds.length} workspaces in ${lineNames[updates.lineId] || updates.lineId}`);
-    setIsBulkConfigureOpen(false);
-  };
-  const handleToggleBulkConfigure = () => {
-    setIsBulkConfigureOpen((prev) => !prev);
+    return result;
+  }, [canSaveTargets, updateLegend]);
+  const handleToggleConfigureLegend = () => {
+    setIsConfigureLegendOpen((prev) => !prev);
   };
   const handleNavigateBack = () => {
     if (router && router.push) {
@@ -54911,7 +55427,7 @@ var TargetsView = ({
       saveSuccess,
       selectedShift,
       shiftOptions,
-      isBulkConfigureOpen,
+      isConfigureLegendOpen,
       navItems: [],
       currentPathname: "/targets",
       canSaveTargets,
@@ -54922,8 +55438,9 @@ var TargetsView = ({
       onActionTypeChange: handleActionTypeChange,
       onShiftChange: handleShiftChange,
       onSaveLine: handleSaveLine,
-      onToggleBulkConfigure: handleToggleBulkConfigure,
-      onBulkConfigure: handleBulkConfigure,
+      onToggleConfigureLegend: handleToggleConfigureLegend,
+      onSaveLegend: handleSaveLegend,
+      legend,
       onUpdateWorkspaceDisplayName: handleUpdateWorkspaceDisplayName,
       skuEnabled,
       skus,
@@ -55304,6 +55821,20 @@ var WorkspaceDetailView = ({
   }, [monthlyData, range]);
   const formattedWorkspaceName = displayName || formatWorkspaceName3(workspace?.workspace_name || "", effectiveLineId);
   const shouldShowCycleTimeChart = showCycleTimeChart ?? formattedWorkspaceName.startsWith("FINAL ASSY");
+  const idleClipDate = date || workspace?.date || calculatedOperationalDate || getOperationalDate(timezone);
+  const idleClipShiftId = parsedShiftId ?? workspace?.shift_id;
+  const idleClipFetchEnabled = Boolean(
+    workspaceId && idleClipDate && idleClipShiftId !== void 0 && activeTab === "overview" && showIdleTime && !shouldShowCycleTimeChart
+  );
+  const {
+    idleClips: idleTimeClips,
+    clipClassifications: idleTimeClipClassifications
+  } = useIdleTimeClipClassifications({
+    workspaceId,
+    date: idleClipDate,
+    shiftId: idleClipShiftId,
+    enabled: idleClipFetchEnabled
+  });
   const handleBackNavigation = () => {
     if (returnUrl) {
       if (onNavigate) {
@@ -55690,7 +56221,11 @@ var WorkspaceDetailView = ({
                             shiftStart: workspace.shift_start || "06:00",
                             shiftEnd: workspace.shift_end,
                             showIdleTime,
-                            idleTimeHourly: workspace.idle_time_hourly
+                            idleTimeHourly: workspace.idle_time_hourly,
+                            idleTimeClips,
+                            idleTimeClipClassifications,
+                            shiftDate: idleClipDate,
+                            timezone
                           }
                         )
                       }
@@ -55816,7 +56351,11 @@ var WorkspaceDetailView = ({
                               shiftStart: workspace.shift_start || "06:00",
                               shiftEnd: workspace.shift_end,
                               showIdleTime,
-                              idleTimeHourly: workspace.idle_time_hourly
+                              idleTimeHourly: workspace.idle_time_hourly,
+                              idleTimeClips,
+                              idleTimeClipClassifications,
+                              shiftDate: idleClipDate,
+                              timezone
                             }
                           )
                         }
@@ -58950,7 +59489,12 @@ var ImprovementCenterView = () => {
   const { user } = useAuth();
   const dashboardConfig = useDashboardConfig();
   const entityConfig = useEntityConfig();
-  const [currentDate, setCurrentDate] = useState(/* @__PURE__ */ new Date());
+  const timezone = useAppTimezone();
+  const today = new Date((/* @__PURE__ */ new Date()).toLocaleString("en-US", { timeZone: timezone }));
+  const [selectedMonth, setSelectedMonth] = useState(today.getMonth());
+  const [selectedYear, setSelectedYear] = useState(today.getFullYear());
+  const monthBounds = useMemo(() => getMonthKeyBounds(selectedYear, selectedMonth), [selectedYear, selectedMonth]);
+  const [dateRange, setDateRange] = useState(monthBounds);
   const [selectedLineId, setSelectedLineId] = useState("all");
   const [selectedStatus, setSelectedStatus] = useState("all");
   const [selectedShift, setSelectedShift] = useState("all");
@@ -58961,14 +59505,36 @@ var ImprovementCenterView = () => {
   const [loadError, setLoadError] = useState(null);
   const [teamMembers, setTeamMembers] = useState([]);
   const [companyLines, setCompanyLines] = useState([]);
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
+  const filterRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (filterRef.current && !filterRef.current.contains(event.target)) {
+        setIsFilterOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
   const computeWeeksOpen = (firstSeenAt) => {
     if (!firstSeenAt) return void 0;
-    const firstSeen = new Date(firstSeenAt);
+    const firstSeen = new Date(new Date(firstSeenAt).toLocaleString("en-US", { timeZone: timezone }));
     if (Number.isNaN(firstSeen.getTime())) return void 0;
-    const now2 = /* @__PURE__ */ new Date();
+    const now2 = new Date((/* @__PURE__ */ new Date()).toLocaleString("en-US", { timeZone: timezone }));
     const diffDays = Math.max(0, Math.floor((now2.getTime() - firstSeen.getTime()) / (1e3 * 60 * 60 * 24)));
     return Math.max(1, Math.ceil(diffDays / 7));
   };
+  const formatOpenedDate = (firstSeenAt) => {
+    if (!firstSeenAt) return void 0;
+    const raw = new Date(firstSeenAt);
+    if (Number.isNaN(raw.getTime())) return void 0;
+    const zoned = new Date(raw.toLocaleString("en-US", { timeZone: timezone }));
+    const day = zoned.getDate();
+    const month = zoned.toLocaleString("en-US", { month: "short" });
+    const dayMod = day % 100;
+    const suffix = dayMod >= 11 && dayMod <= 13 ? "th" : day % 10 === 1 ? "st" : day % 10 === 2 ? "nd" : day % 10 === 3 ? "rd" : "th";
+    return `${day}${suffix} ${month}`;
+  };
   const configuredLines = useMemo(() => {
     return entityConfig.lines || entityConfig.lineNames || {};
   }, [entityConfig.lines, entityConfig.lineNames]);
@@ -59077,14 +59643,38 @@ var ImprovementCenterView = () => {
       cancelled = true;
     };
   }, [supabase, companyId]);
-  const nextMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
-  };
-  const prevMonth = () => {
-    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
+  useEffect(() => {
+    setDateRange(monthBounds);
+  }, [monthBounds]);
+  const handleRangeChange = (newRange) => {
+    setDateRange(newRange);
+    trackCoreEvent("Improvement Center Date Range Changed", {
+      start_date: newRange.startKey,
+      end_date: newRange.endKey
+    });
   };
-  const formatMonth = (date) => {
-    return date.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+  const handleMonthNavigate = (newMonth, newYear) => {
+    let validMonth = newMonth;
+    let validYear = newYear;
+    if (validMonth < 0) {
+      validMonth = 11;
+      validYear -= 1;
+    } else if (validMonth > 11) {
+      validMonth = 0;
+      validYear += 1;
+    }
+    if (validYear < 2023) return;
+    if (validYear > today.getFullYear() || validYear === today.getFullYear() && validMonth > today.getMonth()) {
+      return;
+    }
+    const nextBounds = getMonthKeyBounds(validYear, validMonth);
+    setSelectedMonth(validMonth);
+    setSelectedYear(validYear);
+    setDateRange(nextBounds);
+    trackCoreEvent("Improvement Center Month Changed", {
+      direction: validMonth > selectedMonth || validYear > selectedYear ? "next" : "previous",
+      new_month: `${validYear}-${String(validMonth + 1).padStart(2, "0")}`
+    });
   };
   useEffect(() => {
     let cancelled = false;
@@ -59102,7 +59692,9 @@ var ImprovementCenterView = () => {
           status: "all",
           limit: "500"
         });
-        params.set("month", `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, "0")}`);
+        params.set("month", `${selectedYear}-${String(selectedMonth + 1).padStart(2, "0")}`);
+        params.set("start_date", dateRange.startKey);
+        params.set("end_date", dateRange.endKey);
         if (scopeLineIds.length > 0) {
           params.set("line_ids", scopeLineIds.join(","));
         }
@@ -59133,7 +59725,7 @@ var ImprovementCenterView = () => {
     return () => {
       cancelled = true;
     };
-  }, [supabase, companyId, scopeLineIdsKey, currentDate]);
+  }, [supabase, companyId, scopeLineIdsKey, selectedMonth, selectedYear, dateRange.startKey, dateRange.endKey]);
   const teamMembersById = useMemo(() => {
     return new Map(teamMembers.map((member) => [member.id, member]));
   }, [teamMembers]);
@@ -59175,6 +59767,15 @@ var ImprovementCenterView = () => {
     };
   }, [recommendations, selectedLineId, selectedShift, selectedWeeksRange, selectedMemberId]);
   const clearFilters = () => {
+    trackCoreEvent("Improvement Center Filters Cleared", {
+      previous_filters: {
+        line_id: selectedLineId,
+        status: selectedStatus,
+        shift: selectedShift,
+        weeks_range: selectedWeeksRange,
+        member_id: selectedMemberId
+      }
+    });
     setSelectedLineId("all");
     setSelectedStatus("all");
     setSelectedShift("all");
@@ -59208,8 +59809,60 @@ var ImprovementCenterView = () => {
       setSelectedLineId("all");
     }
   }, [scopeLineIds, selectedLineId]);
+  useEffect(() => {
+    trackCoreEvent("Improvement Center Viewed", {
+      company_id: companyId,
+      user_role: user?.role_level,
+      initial_month: `${selectedYear}-${String(selectedMonth + 1).padStart(2, "0")}`,
+      total_scope_lines: scopeLineIds.length
+    });
+  }, []);
+  const handleStatusFilterChange = (status) => {
+    trackCoreEvent("Improvement Center Filter Applied", {
+      filter_type: "status",
+      filter_value: status,
+      previous_value: selectedStatus
+    });
+    setSelectedStatus(status);
+  };
+  const handleShiftFilterChange = (shift) => {
+    trackCoreEvent("Improvement Center Filter Applied", {
+      filter_type: "shift",
+      filter_value: shift,
+      previous_value: selectedShift
+    });
+    setSelectedShift(shift);
+  };
+  const handleWeeksFilterChange = (weeksRange) => {
+    trackCoreEvent("Improvement Center Filter Applied", {
+      filter_type: "weeks_open",
+      filter_value: weeksRange,
+      previous_value: selectedWeeksRange
+    });
+    setSelectedWeeksRange(weeksRange);
+  };
+  const handleMemberFilterChange = (memberId) => {
+    const memberName = memberId === "all" ? "all" : teamMembers.find((m) => m.id === memberId)?.name || memberId;
+    trackCoreEvent("Improvement Center Filter Applied", {
+      filter_type: "member",
+      filter_value: memberName,
+      member_id: memberId,
+      previous_value: selectedMemberId
+    });
+    setSelectedMemberId(memberId);
+  };
+  const handleLineFilterChange = (lineId) => {
+    const lineName = lineId === "all" ? "all" : lineNameById.get(lineId) || lineId;
+    trackCoreEvent("Improvement Center Filter Applied", {
+      filter_type: "line",
+      filter_value: lineName,
+      line_id: lineId,
+      previous_value: selectedLineId
+    });
+    setSelectedLineId(lineId);
+  };
   return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
-    /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b border-gray-200 flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 lg:px-8 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-30 bg-white border-b border-gray-200 flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 lg:px-8 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 min-w-[120px]", children: /* @__PURE__ */ jsx(
         BackButtonMinimal,
         {
@@ -59221,187 +59874,173 @@ var ImprovementCenterView = () => {
         /* @__PURE__ */ jsx("h1", { className: "text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Improvement Center" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1 text-center px-4 hidden sm:block", children: "Track and resolve persistent issues across your production lines" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "min-w-[120px]" })
+      /* @__PURE__ */ jsx("div", { className: "min-w-[180px] flex justify-end", children: /* @__PURE__ */ jsx(
+        MonthlyRangeFilter_default,
+        {
+          month: selectedMonth,
+          year: selectedYear,
+          timezone,
+          value: dateRange,
+          onChange: handleRangeChange,
+          onMonthNavigate: handleMonthNavigate
+        }
+      ) })
     ] }) }) }),
     /* @__PURE__ */ jsxs("main", { className: "flex-1 p-4 sm:p-6 max-w-7xl mx-auto w-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 bg-white rounded-full px-4 py-2 border border-gray-200 shadow-sm", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: prevMonth,
-            className: "p-1 rounded-full hover:bg-gray-100 text-gray-500 transition-colors",
-            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "w-5 h-5" })
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-900 min-w-[160px] text-center", children: formatMonth(currentDate) }),
-        /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs("div", { className: "-mx-4 sm:-mx-6 px-4 sm:px-6 py-3 border-b border-gray-200 mb-6 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4 transition-all", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex p-1 bg-gray-50 border border-gray-200 rounded-lg", children: [
+          { id: "all", label: "All", count: stats.all },
+          { id: "resolved", label: "Resolved", count: stats.resolved, icon: CheckCircleIcon },
+          { id: "unresolved", label: "Unresolved", count: stats.unresolved, icon: XCircleIcon }
+        ].map((tab) => /* @__PURE__ */ jsxs(
           "button",
           {
-            onClick: nextMonth,
-            className: "p-1 rounded-full hover:bg-gray-100 text-gray-500 transition-colors",
-            children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-5 h-5" })
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row items-center justify-between gap-4 mb-6", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setSelectedStatus("all"),
-              className: `px-4 py-2 rounded-lg text-sm font-medium transition-all cursor-pointer ${selectedStatus === "all" ? "bg-white text-gray-900 shadow-sm ring-1 ring-black/5" : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"}`,
-              children: [
-                "All ",
-                /* @__PURE__ */ jsx("span", { className: "ml-1.5 bg-gray-100 px-2 py-0.5 rounded-full text-xs text-gray-600", children: stats.all })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-300 mx-1" }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setSelectedStatus("resolved"),
-              className: `flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm transition-all cursor-pointer ${selectedStatus === "resolved" ? "bg-green-50 text-green-700 ring-1 ring-green-200" : "text-gray-600 hover:bg-gray-100"}`,
-              children: [
-                /* @__PURE__ */ jsx(CheckCircleIcon, { className: "w-4 h-4 text-green-500" }),
-                "Resolved ",
-                stats.resolved
-              ]
-            }
-          ),
+            onClick: () => handleStatusFilterChange(tab.id),
+            className: `flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-all duration-200 ${selectedStatus === tab.id ? "bg-white text-blue-600 shadow-sm ring-1 ring-gray-200" : "text-gray-600 hover:text-gray-900 hover:bg-gray-100"}`,
+            children: [
+              tab.icon && /* @__PURE__ */ jsx(tab.icon, { className: `w-4 h-4 ${selectedStatus === tab.id ? "text-blue-600" : "text-gray-400"}` }),
+              tab.label,
+              /* @__PURE__ */ jsx("span", { className: `text-xs px-1.5 py-0.5 rounded-full ${selectedStatus === tab.id ? "bg-blue-50 text-blue-600" : "bg-gray-200/50 text-gray-500"}`, children: tab.count })
+            ]
+          },
+          tab.id
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", ref: filterRef, children: [
           /* @__PURE__ */ jsxs(
             "button",
             {
-              onClick: () => setSelectedStatus("unresolved"),
-              className: `flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm transition-all cursor-pointer ${selectedStatus === "unresolved" ? "bg-red-50 text-red-700 ring-1 ring-red-200" : "text-gray-600 hover:bg-gray-100"}`,
-              children: [
-                /* @__PURE__ */ jsx(XCircleIcon, { className: "w-4 h-4 text-red-500" }),
-                "Unresolved ",
-                stats.unresolved
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 w-full md:w-auto", children: [
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: selectedShift,
-              onChange: (e) => setSelectedShift(e.target.value),
-              className: "flex-1 md:flex-none appearance-none pl-3 pr-8 py-1.5 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer text-gray-700 shadow-sm",
-              style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.5rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.5em 1.5em` },
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "all", children: "All Shifts" }),
-                shiftOptions.filter((s) => s !== "all").map((shift) => /* @__PURE__ */ jsx("option", { value: shift, children: shift }, shift))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              value: selectedWeeksRange,
-              onChange: (e) => setSelectedWeeksRange(e.target.value),
-              className: "flex-1 md:flex-none appearance-none pl-3 pr-8 py-1.5 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer text-gray-700 shadow-sm",
-              style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.5rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.5em 1.5em` },
-              children: weekOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.id, children: opt.label }, opt.id))
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: selectedMemberId,
-              onChange: (e) => setSelectedMemberId(e.target.value),
-              className: "flex-1 md:flex-none appearance-none pl-3 pr-8 py-1.5 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer text-gray-700 shadow-sm",
-              style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.5rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.5em 1.5em` },
+              onClick: () => setIsFilterOpen(!isFilterOpen),
+              className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isFilterOpen || (selectedShift !== "all" || selectedWeeksRange !== "all" || selectedMemberId !== "all" || selectedLineId !== "all") ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-white border-gray-200 text-gray-700 hover:bg-gray-50"}`,
               children: [
-                /* @__PURE__ */ jsx("option", { value: "all", children: "All Members" }),
-                teamMembers.map((member) => /* @__PURE__ */ jsx("option", { value: member.id, children: member.name }, member.id))
+                /* @__PURE__ */ jsx(FunnelIcon, { className: "w-4 h-4" }),
+                /* @__PURE__ */ jsx("span", { children: "Filters" }),
+                (selectedShift !== "all" || selectedWeeksRange !== "all" || selectedMemberId !== "all" || selectedLineId !== "all") && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-5 h-5 bg-blue-100 text-blue-700 text-xs rounded-full font-bold ml-1", children: [selectedShift, selectedWeeksRange, selectedMemberId, selectedLineId].filter((v) => v !== "all").length }),
+                /* @__PURE__ */ jsx(ChevronDownIcon, { className: `w-3 h-3 ml-1 transition-transform ${isFilterOpen ? "rotate-180" : ""}` })
               ]
             }
           ),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              value: selectedLineId,
-              onChange: (e) => setSelectedLineId(e.target.value),
-              className: "flex-1 md:flex-none appearance-none pl-3 pr-8 py-1.5 text-sm border border-gray-300 rounded-lg bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer text-gray-700 shadow-sm",
-              style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.5rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.5em 1.5em` },
-              children: lineOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.id, children: opt.label }, opt.id))
-            }
-          )
+          isFilterOpen && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full mt-2 w-72 bg-white rounded-xl shadow-xl border border-gray-100 p-4 z-50 animate-in fade-in zoom-in-95 duration-100", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Filter View" }),
+              (selectedShift !== "all" || selectedWeeksRange !== "all" || selectedMemberId !== "all" || selectedLineId !== "all") && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: clearFilters,
+                  className: "text-xs text-red-600 hover:text-red-700 font-medium",
+                  children: "Clear all"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-3", children: [
+              { value: selectedShift, onChange: handleShiftFilterChange, options: shiftOptions, label: "Shift" },
+              { value: selectedWeeksRange, onChange: handleWeeksFilterChange, options: weekOptions.map((o) => o.id), labels: weekOptions, label: "Duration" },
+              { value: selectedMemberId, onChange: handleMemberFilterChange, options: ["all", ...teamMembers.map((m) => m.id)], labels: teamMembers, label: "Member" },
+              { value: selectedLineId, onChange: handleLineFilterChange, options: lineOptions.map((o) => o.id), labels: lineOptions, label: "Line" }
+            ].map((filter2, idx) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: filter2.label }),
+              /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+                "select",
+                {
+                  value: filter2.value,
+                  onChange: (e) => filter2.onChange(e.target.value),
+                  className: "w-full appearance-none pl-3 pr-8 py-2 text-sm bg-gray-50 border border-gray-200 hover:border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all cursor-pointer",
+                  style: { backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`, backgroundPosition: `right 0.75rem center`, backgroundRepeat: `no-repeat`, backgroundSize: `1.2em 1.2em` },
+                  children: filter2.options.map((opt) => {
+                    const val = typeof opt === "string" ? opt : opt.id;
+                    let label = val;
+                    if (filter2.labels) {
+                      const found = filter2.labels.find((l) => (l.id || l.user_id || l) === val);
+                      label = found ? found.label || found.name || found : val;
+                    }
+                    if (val === "all") label = `All ${filter2.label}s`;
+                    return /* @__PURE__ */ jsx("option", { value: val, children: label }, val);
+                  })
+                }
+              ) })
+            ] }, idx)) })
+          ] })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "grid gap-6", children: [
-        filteredRecommendations.length > 0 ? filteredRecommendations.map((rec, index) => /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            initial: { opacity: 0, y: 20 },
-            animate: { opacity: 1, y: 0 },
-            transition: { delay: index * 0.1 },
-            className: `bg-white rounded-xl shadow-sm border overflow-hidden ${rec.ticket_status === "solved" ? "border-green-200" : "border-gray-200"}`,
-            children: /* @__PURE__ */ jsx("div", { className: "p-6 relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4", children: [
-                /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 w-full", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-                    rec.ticket_status === "solved" ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-100", children: [
-                      /* @__PURE__ */ jsx(CheckCircleIcon, { className: "w-3.5 h-3.5" }),
-                      "Resolved"
-                    ] }) : /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium border ${(rec.weeks_open || 0) > 2 ? "bg-red-50 text-red-700 border-red-100" : "bg-amber-50 text-amber-700 border-amber-100"}`, children: [
-                      /* @__PURE__ */ jsx(ClockIcon, { className: "w-3.5 h-3.5" }),
-                      "Open for ",
-                      rec.weeks_open || 1,
-                      " week",
-                      (rec.weeks_open || 1) !== 1 ? "s" : ""
-                    ] }),
-                    rec.assigned_user_ids && rec.assigned_user_ids.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("div", { className: "h-3 w-px bg-gray-200" }),
-                      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: rec.assigned_user_ids.map((uid) => {
-                        const user2 = teamMembersById.get(uid);
-                        if (!user2) {
+        filteredRecommendations.length > 0 ? filteredRecommendations.map((rec, index) => {
+          const weeksOpen = rec.weeks_open || 1;
+          const openLabel = weeksOpen <= 1 ? "Opened this week" : `Opened for ${weeksOpen} weeks`;
+          const openedOnLabel = formatOpenedDate(rec.first_seen_at);
+          return /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 20 },
+              animate: { opacity: 1, y: 0 },
+              transition: { delay: index * 0.1 },
+              className: `bg-white rounded-xl shadow-sm border overflow-hidden ${rec.ticket_status === "solved" ? "border-green-200" : "border-gray-200"}`,
+              children: /* @__PURE__ */ jsx("div", { className: "p-6 relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 w-full", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-semibold text-gray-600 bg-gray-100 border border-gray-200", children: [
+                        "#",
+                        rec.issue_number ?? index + 1
+                      ] }),
+                      rec.ticket_status === "solved" ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-100", children: [
+                        /* @__PURE__ */ jsx(CheckCircleIcon, { className: "w-3.5 h-3.5" }),
+                        "Resolved"
+                      ] }) : /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium border ${weeksOpen > 2 ? "bg-red-50 text-red-700 border-red-100" : "bg-amber-50 text-amber-700 border-amber-100"}`, children: [
+                        /* @__PURE__ */ jsx(ClockIcon, { className: "w-3.5 h-3.5" }),
+                        openLabel
+                      ] }),
+                      openedOnLabel && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-gray-600 bg-gray-100 border border-gray-200", children: [
+                        "Opened on ",
+                        openedOnLabel
+                      ] }),
+                      rec.assigned_user_ids && rec.assigned_user_ids.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("div", { className: "h-3 w-px bg-gray-200" }),
+                        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: rec.assigned_user_ids.map((uid) => {
+                          const user2 = teamMembersById.get(uid);
+                          if (!user2) {
+                            return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                              /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full bg-gray-100 text-gray-500 flex items-center justify-center text-[9px] font-bold border border-gray-200", children: "??" }),
+                              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: "Unknown" })
+                            ] }, uid);
+                          }
                           return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                            /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full bg-gray-100 text-gray-500 flex items-center justify-center text-[9px] font-bold border border-gray-200", children: "??" }),
-                            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: "Unknown" })
-                          ] }, uid);
-                        }
-                        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-                          /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center text-[9px] font-bold border border-gray-200", children: user2.initials }),
-                          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-600", children: user2.name })
-                        ] }, user2.id);
-                      }) })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 pr-12", children: rec.title }),
-                    /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-gray-500 mt-1 flex items-center gap-2", children: [
-                      rec.location,
-                      " \u2022 ",
-                      rec.line,
-                      (rec.shift_label || rec.shift_id !== void 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("span", { children: "\u2022" }),
-                        /* @__PURE__ */ jsx("span", { className: "uppercase tracking-wide text-xs pt-0.5 text-gray-500 font-medium", children: rec.shift_label || `Shift ${rec.shift_id}` })
+                            /* @__PURE__ */ jsx("div", { className: "w-5 h-5 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center text-[9px] font-bold border border-gray-200", children: user2.initials }),
+                            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-600", children: user2.name })
+                          ] }, user2.id);
+                        }) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 pr-12", children: rec.title }),
+                      /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-gray-500 mt-1 flex items-center gap-2", children: [
+                        rec.location,
+                        " \u2022 ",
+                        rec.line,
+                        (rec.shift_label || rec.shift_id !== void 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+                          /* @__PURE__ */ jsx("span", { className: "uppercase tracking-wide text-xs pt-0.5 text-gray-500 font-medium", children: rec.shift_label || `Shift ${rec.shift_id}` })
+                        ] })
                       ] })
                     ] })
-                  ] })
-                ] }) }),
-                /* @__PURE__ */ jsx("div", { className: "prose prose-sm text-gray-600", children: /* @__PURE__ */ jsx("p", { children: rec.description }) }),
-                /* @__PURE__ */ jsx("div", { className: "bg-amber-50 border border-amber-100 rounded-lg p-3", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-amber-800 font-medium flex items-start gap-2", children: [
-                  /* @__PURE__ */ jsx(ChartBarIcon, { className: "w-5 h-5 flex-shrink-0" }),
-                  "Impact: ",
-                  rec.impact
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "w-full md:w-1/2 lg:w-5/12 bg-gray-50 rounded-lg p-4 border border-gray-100", children: Array.isArray(rec.evidence) && rec.evidence.length > 0 ? /* @__PURE__ */ jsx(
-                EvidenceCarousel,
-                {
-                  evidence: rec.evidence,
-                  recId: rec.id,
-                  clipsService
-                }
-              ) : /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: isLoading ? "Loading evidence\u2026" : loadError ? loadError : "No evidence available" }) })
-            ] }) })
-          },
-          rec.id
-        )) : (
+                  ] }) }),
+                  /* @__PURE__ */ jsx("div", { className: "prose prose-sm text-gray-600", children: /* @__PURE__ */ jsx("p", { children: rec.description }) }),
+                  rec.resolution_instructions && /* @__PURE__ */ jsx("div", { className: "bg-blue-50 border border-blue-100 rounded-lg p-3", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-blue-800 font-medium flex items-start gap-2", children: [
+                    /* @__PURE__ */ jsx(CheckCircleIcon, { className: "w-5 h-5 flex-shrink-0" }),
+                    rec.resolution_instructions
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "w-full md:w-1/2 lg:w-5/12 bg-gray-50 rounded-lg p-4 border border-gray-100", children: Array.isArray(rec.evidence) && rec.evidence.length > 0 ? /* @__PURE__ */ jsx(
+                  EvidenceCarousel,
+                  {
+                    evidence: rec.evidence,
+                    recId: rec.id,
+                    clipsService
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: isLoading ? "Loading evidence\u2026" : loadError ? loadError : "No evidence available" }) })
+              ] }) })
+            },
+            rec.id
+          );
+        }) : (
           // Success State (Zero Tickets)
           /* @__PURE__ */ jsxs("div", { className: "text-center py-16 bg-white rounded-xl border border-gray-200 shadow-sm", children: [
             /* @__PURE__ */ jsx("div", { className: "mx-auto flex items-center justify-center w-16 h-16 rounded-full bg-green-50 mb-4", children: /* @__PURE__ */ jsx(CheckCircleIcon, { className: "w-8 h-8 text-green-500" }) }),
@@ -59878,4 +60517,4 @@ var streamProxyConfig = {
   }
 };
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AcceptInvite, AcceptInviteView_default as AcceptInviteView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthService, AuthenticatedBottleneckClipsView, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedTicketsView, AuthenticatedWorkspaceHealthView, AxelNotificationPopup, AxelOrb, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottleneckClipsModal, BottleneckClipsView_default as BottleneckClipsView, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ChangeRoleDialog, ClipFilterProvider, CompactWorkspaceHealthCard, ConfirmRemoveUserDialog, CongratulationsOverlay, CroppedHlsVideoPlayer, 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_HOME_VIEW_CONFIG, DEFAULT_MAP_VIEW_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_SHIFT_DATA, 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, DiagnosisVideoModal, EmptyStateMessage, EncouragementOverlay, FactoryAssignmentDropdown, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthDateShiftSelector, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HlsVideoPlayer, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, ImprovementCenterView_default as ImprovementCenterView, InlineEditableText, InteractiveOnboardingTour, InvitationService, InvitationsTable, InviteUserDialog, 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, LineAssignmentDropdown, 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, Logo, MainLayout, MapGridView, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PlayPauseIndicator, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, RoleBadge, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SessionTracker, SessionTrackingContext, SessionTrackingProvider, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SignupWithInvitation, SilentErrorBoundary, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, TeamManagementView_default as TeamManagementView, TeamUsagePdfGenerator, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TicketsView_default as TicketsView, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserManagementService, UserManagementTable, UserService, UserUsageDetailModal, UserUsageStats, 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, aggregateKPIsFromLineMetricsRows, apiUtils, areAllLinesOnSameShift, authCoreService, authOTPService, authRateLimitService, buildDateKey, buildKPIsFromLineMetricsRow, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createDefaultKPIs, createInvitationService, createLinesService, createSessionTracker, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserManagementService, createUserService, dashboardService, deleteThread, fetchIdleTimeReasons, filterDataByDateKeyRange, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateKeyForDisplay, formatDateTimeInZone, formatDuration, formatISTDate, formatIdleTime, formatRangeLabel, formatReasonLabel, formatRelativeTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAllWorkspaceDisplayNamesSnapshot, getAnonClient, getAvailableShiftIds, getBrowserName, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentShiftForLine, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDateKeyFromDate, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getMonthKeyBounds, getMonthWeekRanges, getNextUpdateInterval, getOperationalDate, getReasonColor, getS3SignedUrl, getS3VideoSrc, getShiftData, getShiftNameById, getShortShiftName, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUniformShiftGroup, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, groupLinesByShift, hasAnyShiftData, identifyCoreUser, initializeCoreMixpanel, isFullMonthRange, isLegacyConfiguration, isPrefetchError, isSafari, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, normalizeDateKeyRange, optifyeAgentClient, parseDateKeyToDate, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, subscribeWorkspaceDisplayNames, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, transformToChartData, updateThreadTitle, upsertWorkspaceDisplayNameInCache, useAccessControl, useActiveBreaks, useActiveLineId, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useAxelNotifications, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useCompanyUsersUsage, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useDynamicShiftConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHasLineAccess, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useIdleTimeReasons, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineShiftConfig, useLineSupervisor, useLineWorkspaceMetrics, useLines, useMessages, useMetrics, useMultiLineShiftConfigs, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useSessionKeepAlive, useSessionTracking, useSessionTrackingContext, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useSupervisorsByLineIds, useTargets, useTeamManagementPermissions, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useUserLineAccess, useUserUsage, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealthById, useWorkspaceHealthStatus, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, useWorkspaceUptimeTimeline, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AcceptInvite, AcceptInviteView_default as AcceptInviteView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthService, AuthenticatedBottleneckClipsView, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedTicketsView, AuthenticatedWorkspaceHealthView, AxelNotificationPopup, AxelOrb, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottleneckClipsModal, BottleneckClipsView_default as BottleneckClipsView, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ChangeRoleDialog, ClipFilterProvider, CompactWorkspaceHealthCard, ConfirmRemoveUserDialog, CongratulationsOverlay, CroppedHlsVideoPlayer, 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_HOME_VIEW_CONFIG, DEFAULT_MAP_VIEW_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_SHIFT_DATA, 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, DiagnosisVideoModal, EmptyStateMessage, EncouragementOverlay, FactoryAssignmentDropdown, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthDateShiftSelector, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HlsVideoPlayer, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, ImprovementCenterView_default as ImprovementCenterView, InlineEditableText, InteractiveOnboardingTour, InvitationService, InvitationsTable, InviteUserDialog, 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, LineAssignmentDropdown, 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, Logo, MainLayout, MapGridView, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PlayPauseIndicator, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, RoleBadge, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SessionTracker, SessionTrackingContext, SessionTrackingProvider, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SignupWithInvitation, SilentErrorBoundary, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, TeamManagementView_default as TeamManagementView, TeamUsagePdfGenerator, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TicketsView_default as TicketsView, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserManagementService, UserManagementTable, UserService, UserUsageDetailModal, UserUsageStats, 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, aggregateKPIsFromLineMetricsRows, apiUtils, areAllLinesOnSameShift, authCoreService, authOTPService, authRateLimitService, buildDateKey, buildKPIsFromLineMetricsRow, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createDefaultKPIs, createInvitationService, createLinesService, createSessionTracker, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserManagementService, createUserService, dashboardService, deleteThread, fetchIdleTimeReasons, filterDataByDateKeyRange, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateKeyForDisplay, formatDateTimeInZone, formatDuration, formatISTDate, formatIdleTime, formatRangeLabel, formatReasonLabel, formatRelativeTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAllWorkspaceDisplayNamesSnapshot, getAnonClient, getAvailableShiftIds, getBrowserName, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentShiftForLine, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDateKeyFromDate, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getMonthKeyBounds, getMonthWeekRanges, getNextUpdateInterval, getOperationalDate, getReasonColor, getS3SignedUrl, getS3VideoSrc, getShiftData, getShiftNameById, getShortShiftName, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUniformShiftGroup, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, groupLinesByShift, hasAnyShiftData, identifyCoreUser, initializeCoreMixpanel, isFullMonthRange, isLegacyConfiguration, isPrefetchError, isSafari, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, normalizeDateKeyRange, optifyeAgentClient, parseDateKeyToDate, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, subscribeWorkspaceDisplayNames, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, transformToChartData, updateThreadTitle, upsertWorkspaceDisplayNameInCache, useAccessControl, useActiveBreaks, useActiveLineId, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useAxelNotifications, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useCompanyUsersUsage, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useDynamicShiftConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHasLineAccess, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useIdleTimeClipClassifications, useIdleTimeReasons, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineShiftConfig, useLineSupervisor, useLineWorkspaceMetrics, useLines, useMessages, useMetrics, useMultiLineShiftConfigs, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useSessionKeepAlive, useSessionTracking, useSessionTrackingContext, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useSupervisorsByLineIds, useTargets, useTeamManagementPermissions, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useUserLineAccess, useUserUsage, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealthById, useWorkspaceHealthStatus, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, useWorkspaceUptimeTimeline, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };