@optifye/dashboard-core 6.10.13 → 6.10.14

package/dist/index.js

@@ -1581,7 +1581,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.");
@@ -1600,7 +1600,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) {
@@ -9415,7 +9418,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();
@@ -9473,7 +9525,7 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId, userAccessibleLineIds
   );
   React24.useEffect(() => {
     lineIdRef.current = lineId;
-    setMetrics({ workspaceMetrics: [], lineMetrics: [] });
+    setMetrics({ workspaceMetrics: [], lineMetrics: [], metadata: void 0 });
     setIsLoading(true);
   }, [lineId]);
   const fetchAllMetrics = React24.useCallback(async () => {
@@ -9511,6 +9563,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) => {
@@ -9541,6 +9595,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);
@@ -9593,6 +9650,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,
@@ -9618,7 +9677,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,
@@ -9770,6 +9831,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
@@ -13786,6 +13849,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();
+  React24.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] = React24.useState([]);
+  const [clipClassifications, setClipClassifications] = React24.useState({});
+  const [isLoading, setIsLoading] = React24.useState(false);
+  const [error, setError] = React24.useState(null);
+  const lastRequestKeyRef = React24.useRef("");
+  const requestKey = React24.useMemo(
+    () => `${workspaceId || ""}-${date || ""}-${shiftId ?? ""}`,
+    [workspaceId, date, shiftId]
+  );
+  const fetchIdleClips = React24.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]);
+  React24.useEffect(() => {
+    fetchIdleClips();
+  }, [fetchIdleClips]);
+  React24.useEffect(() => {
+    setClipClassifications({});
+  }, [requestKey]);
+  const idleClipIds = React24.useMemo(
+    () => idleClips.map((clip) => clip.id).filter(Boolean),
+    [idleClips]
+  );
+  React24.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: React24.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();
@@ -26493,6 +26806,10 @@ var HourlyOutputChartComponent = ({
   shiftEnd,
   showIdleTime = false,
   idleTimeHourly,
+  idleTimeClips,
+  idleTimeClipClassifications,
+  shiftDate,
+  timezone,
   className = ""
 }) => {
   const containerRef = React24__namespace.default.useRef(null);
@@ -26505,6 +26822,37 @@ var HourlyOutputChartComponent = ({
     return { hour, minute, decimalHour };
   };
   const shiftStartTime = getTimeFromTimeString(shiftStart);
+  const shiftStartDateTime = React24__namespace.default.useMemo(() => {
+    if (!shiftDate || !timezone) return null;
+    const hour = shiftStartTime.hour.toString().padStart(2, "0");
+    const minute = shiftStartTime.minute.toString().padStart(2, "0");
+    return dateFnsTz.fromZonedTime(`${shiftDate}T${hour}:${minute}:00`, timezone);
+  }, [shiftDate, timezone, shiftStartTime.hour, shiftStartTime.minute]);
+  const idleClipRanges = React24__namespace.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__namespace.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__namespace.default.useMemo(() => {
     console.log("[HourlyOutputChart] Calculating shift duration with:", {
       shiftStart,
@@ -26752,6 +27100,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,
@@ -26945,9 +27294,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";
@@ -26978,27 +27328,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 ? dateFns.addMinutes(shiftStartDateTime, safeHourOffset * 60 + range.start) : null;
+                              const rangeEndDate = shiftStartDateTime ? dateFns.addMinutes(shiftStartDateTime, safeHourOffset * 60 + range.end + 1) : null;
+                              const reasonLabel = getIdleReasonForRange(rangeStartDate, rangeEndDate);
                               return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-600 flex items-center gap-2 text-xs", children: [
                                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-1.5 h-1.5 bg-orange-400 rounded-full flex-shrink-0" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { children: duration === 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                  startTime,
-                                  " ",
-                                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400", children: [
-                                    "(",
-                                    duration,
-                                    " min)"
-                                  ] })
-                                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                                  startTime,
-                                  " - ",
-                                  endTime,
-                                  " ",
-                                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400", children: [
-                                    "(",
-                                    duration,
-                                    " min)"
-                                  ] })
-                                ] }) })
+                                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                                  duration === 1 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: startTime }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                    startTime,
+                                    " - ",
+                                    endTime
+                                  ] }),
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: " | " }),
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: reasonLabel })
+                                ] })
                               ] }, index);
                             }) })
                           ] })
@@ -27096,7 +27442,7 @@ var HourlyOutputChartComponent = ({
   );
 };
 var HourlyOutputChart = React24__namespace.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) {
@@ -27119,6 +27465,33 @@ var HourlyOutputChart = React24__namespace.default.memo(HourlyOutputChartCompone
     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";
@@ -27138,6 +27511,7 @@ var VideoCard = React24__namespace.default.memo(({
   onClick,
   onFatalError,
   isVeryLowEfficiency = false,
+  legend,
   cropping,
   canvasFps = 30,
   useRAF = true,
@@ -27149,6 +27523,7 @@ var VideoCard = React24__namespace.default.memo(({
 }) => {
   const videoRef = React24.useRef(null);
   const canvasRef = React24.useRef(null);
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   if (cropping) {
     useHlsStreamWithCropping(videoRef, canvasRef, {
       src: hlsUrl,
@@ -27166,39 +27541,23 @@ var VideoCard = React24__namespace.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 = React24.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__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -27301,6 +27660,7 @@ var VideoGridView = React24__namespace.default.memo(({
   workspaces,
   selectedLine,
   className = "",
+  legend,
   videoSources = {},
   displayNames = {},
   onWorkspaceHover,
@@ -27316,6 +27676,7 @@ var VideoGridView = React24__namespace.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 },
@@ -27510,6 +27871,7 @@ var VideoGridView = React24__namespace.default.memo(({
                 onClick: () => handleWorkspaceClick(workspace),
                 onFatalError: () => handleStreamError(workspaceId),
                 isVeryLowEfficiency,
+                legend: effectiveLegend,
                 cropping: workspaceCropping,
                 canvasFps: canvasConfig?.fps,
                 displayName: (
@@ -27537,10 +27899,12 @@ var MapGridView = React24__namespace.default.memo(({
   className = "",
   displayNames = {},
   onWorkspaceHover,
-  onWorkspaceHoverEnd
+  onWorkspaceHoverEnd,
+  legend
 }) => {
   const router$1 = 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;
@@ -27552,10 +27916,11 @@ var MapGridView = React24__namespace.default.memo(({
     return map;
   }, [workspaces]);
   const getPerformanceColor = React24.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 = React24.useCallback((workspace) => {
     const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
     trackCoreEvent("Workspace Detail Clicked", {
@@ -27595,7 +27960,7 @@ var MapGridView = React24__namespace.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);
@@ -27620,7 +27985,7 @@ var MapGridView = React24__namespace.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: [
@@ -28201,7 +28566,7 @@ var PieChart4 = ({
       }
     );
   };
-  const CustomTooltip3 = ({ active, payload }) => {
+  const CustomTooltip4 = ({ active, payload }) => {
     if (active && payload && payload.length) {
       const data2 = payload[0];
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white px-3 py-2 shadow-lg rounded-lg border border-gray-200", children: [
@@ -28232,7 +28597,7 @@ var PieChart4 = ({
         children: dataWithPercentage.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip3, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       recharts.Legend,
       {
@@ -28444,31 +28809,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__ */ jsxRuntime.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,
@@ -28556,7 +28896,7 @@ var BreakNotificationPopup = ({
         className: "relative z-10",
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white text-gray-900 rounded-lg border border-gray-200 shadow-xl overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(AxelOrb, { size: "md" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Coffee, { className: "w-5 h-5 text-amber-600" }) }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "font-semibold text-sm text-gray-900", children: [
@@ -28829,7 +29169,11 @@ var AxelNotificationPopup = ({
           className: "p-3",
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start space-x-3 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(AxelOrb, { size: "md" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0", children: [
+                suggestion.type === "improvement" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "w-5 h-5 text-blue-600" }) }),
+                (suggestion.type === "alert" || suggestion.type === "bottleneck_triage") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-red-600" }) }),
+                suggestion.type === "insight" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "w-5 h-5 text-purple-600" }) })
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1.5", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-sm text-gray-900", children: suggestion.title }),
@@ -29564,10 +29908,9 @@ var HlsVideoPlayer = React24.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);
       }
@@ -32890,126 +33233,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();
-  React24.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,
@@ -36457,6 +36680,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__ */ jsxRuntime.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",
@@ -36574,10 +36822,10 @@ var LineHistoryCalendar = ({
   }, [configuredTimezone]);
   const monthBounds = React24.useMemo(() => getMonthKeyBounds(year, month), [year, month]);
   const calendarData = React24.useMemo(() => {
-    const startOfMonth = dateFnsTz.toZonedTime(new Date(year, month, 1), configuredTimezone);
-    const endOfMonth = dateFnsTz.toZonedTime(new Date(year, month + 1, 0), configuredTimezone);
-    const totalDays = endOfMonth.getDate();
-    let startOffset = startOfMonth.getDay() - 1;
+    const startOfMonth2 = dateFnsTz.toZonedTime(new Date(year, month, 1), configuredTimezone);
+    const endOfMonth2 = dateFnsTz.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++) {
@@ -36608,12 +36856,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) => {
@@ -36658,12 +36907,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__ */ jsxRuntime.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");
@@ -36695,7 +36945,7 @@ var LineHistoryCalendar = ({
           }
         },
         children: /* @__PURE__ */ jsxRuntime.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: [
@@ -36706,10 +36956,11 @@ var LineHistoryCalendar = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.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)
         ] })
       }
     );
@@ -36884,54 +37135,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 = React24.useMemo(() => getMonthKeyBounds(year, month), [year, month]);
-  const weekRanges = React24.useMemo(() => getMonthWeekRanges(year, month, timezone), [year, month, timezone]);
   const normalizedRange = React24.useMemo(() => {
     return normalizeDateKeyRange(value.startKey, value.endKey, monthBounds.startKey, monthBounds.endKey);
   }, [value.startKey, value.endKey, monthBounds.startKey, monthBounds.endKey]);
-  const monthLabel = React24.useMemo(() => {
-    return new Date(year, month).toLocaleString("default", { month: "long", year: "numeric" });
-  }, [year, month]);
-  const presetOptions = React24.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 = React24.useMemo(() => {
-    return presetOptions.find(
-      (preset) => preset.startKey === normalizedRange.startKey && preset.endKey === normalizedRange.endKey
-    );
-  }, [presetOptions, normalizedRange.startKey, normalizedRange.endKey]);
-  const displayLabel = React24.useMemo(() => {
-    if (activePreset) return activePreset.label;
-    return "Custom range";
-  }, [activePreset]);
   const fullMonthLabel = React24.useMemo(() => {
     const startLabel = formatDateKeyForDisplay(monthBounds.startKey, "MMM d");
     const endLabel = formatDateKeyForDisplay(monthBounds.endKey, "MMM d, yyyy");
@@ -36940,14 +37156,26 @@ var MonthlyRangeFilter = ({
   const displayRange = React24.useMemo(() => {
     return formatRangeLabel(normalizedRange, fullMonthLabel);
   }, [normalizedRange, fullMonthLabel]);
-  const [customStart, setCustomStart] = React24.useState(normalizedRange.startKey);
-  const [customEnd, setCustomEnd] = React24.useState(normalizedRange.endKey);
   const [isOpen, setIsOpen] = React24.useState(false);
   const dropdownRef = React24.useRef(null);
+  const [calendarMonth, setCalendarMonth] = React24.useState(month);
+  const [calendarYear, setCalendarYear] = React24.useState(year);
+  const [rangeStart, setRangeStart] = React24.useState(parseDateKeyToDate(normalizedRange.startKey));
+  const [rangeEnd, setRangeEnd] = React24.useState(parseDateKeyToDate(normalizedRange.endKey));
+  const [selecting, setSelecting] = React24.useState(false);
   React24.useEffect(() => {
-    setCustomStart(normalizedRange.startKey);
-    setCustomEnd(normalizedRange.endKey);
-  }, [normalizedRange.startKey, normalizedRange.endKey]);
+    setCalendarMonth(month);
+    setCalendarYear(year);
+  }, [month, year]);
+  React24.useEffect(() => {
+    if (isOpen) {
+      setRangeStart(parseDateKeyToDate(normalizedRange.startKey));
+      setRangeEnd(parseDateKeyToDate(normalizedRange.endKey));
+      setSelecting(false);
+      setCalendarMonth(month);
+      setCalendarYear(year);
+    }
+  }, [isOpen, normalizedRange.startKey, normalizedRange.endKey, month, year]);
   React24.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -36957,107 +37185,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 = dateFns.format(rangeStart, "yyyy-MM-dd");
+      const endKey = dateFns.format(endDate, "yyyy-MM-dd");
+      const normalized = normalizeDateKeyRange(startKey, endKey, monthBounds.startKey, monthBounds.endKey);
+      onChange(normalized);
+      setIsOpen(false);
+    }
+  };
+  const handlePreviousMonth = () => {
+    const prevMonthDate = dateFns.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 = dateFns.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 = React24.useMemo(() => new Date(calendarYear, calendarMonth), [calendarYear, calendarMonth]);
+  const calendarDays = React24.useMemo(() => {
+    const start = dateFns.startOfMonth(monthDate);
+    const end = dateFns.endOfMonth(monthDate);
+    const days = dateFns.eachDayOfInterval({ start, end });
+    const startDayOfWeek = dateFns.getDay(start);
+    const emptySlots = Array(startDayOfWeek).fill(null);
+    return [...emptySlots, ...days];
+  }, [monthDate]);
+  const isInRange = React24.useCallback((day) => {
+    if (!rangeStart) return false;
+    if (!rangeEnd) return dateFns.isSameDay(day, rangeStart);
+    return dateFns.isWithinInterval(day, {
+      start: dateFns.startOfDay(rangeStart),
+      end: dateFns.startOfDay(rangeEnd)
+    });
+  }, [rangeStart, rangeEnd]);
+  const isRangeStart = React24.useCallback((day) => {
+    return rangeStart && dateFns.isSameDay(day, rangeStart);
+  }, [rangeStart]);
+  const isRangeEnd = React24.useCallback((day) => {
+    return rangeEnd && dateFns.isSameDay(day, rangeEnd);
+  }, [rangeEnd]);
+  const monthName = dateFns.format(monthDate, "MMMM yyyy");
+  const startDisplay = rangeStart ? dateFns.format(rangeStart, "MMM d, yyyy") : "Start Date";
+  const endDisplay = rangeEnd ? dateFns.format(rangeEnd, "MMM d, yyyy") : "End Date";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className ?? ""}`, ref: dropdownRef, children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.CalendarIcon, { className: "h-4 w-4 text-slate-500" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] uppercase tracking-[0.2em] text-slate-500", children: displayLabel }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-slate-900", children: displayRange })
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(outline.CalendarIcon, { className: "h-4 w-4 text-gray-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-900", children: displayRange }),
           /* @__PURE__ */ jsxRuntime.jsx(
             outline.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__ */ jsxRuntime.jsx("div", { className: "absolute right-0 z-50 mt-2 w-80 rounded-lg border border-slate-200 bg-white shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-slate-500", children: "Weeks" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 space-y-1", children: presetOptions.map((preset) => {
-        const isActive = preset.startKey === normalizedRange.startKey && preset.endKey === normalizedRange.endKey;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
+    isOpen && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-4 pb-4 border-b border-gray-100", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-[10px] uppercase tracking-wider font-medium text-gray-500 mb-1", children: "Start" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "pt-4 text-gray-300", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-[10px] uppercase tracking-wider font-medium text-gray-500 mb-1", children: "End" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-medium", children: preset.label }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900", children: monthName }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "h-5 w-5" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: WEEKDAYS2.map((day, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 flex items-center justify-center text-xs font-medium text-gray-400", children: day }, i)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-0", children: calendarDays.map((day, i) => {
+        if (!day) {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10" }, `empty-${i}`);
+        }
+        const inRange = isInRange(day);
+        const isStart = isRangeStart(day);
+        const isEnd = isRangeEnd(day);
+        const isSingleDaySelection = isStart && (!rangeEnd || rangeEnd && dateFns.isSameDay(rangeStart, rangeEnd));
+        const hasSelection = rangeStart !== null;
+        const dayNum = day.getDate();
+        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mt-3 border-t border-slate-200 pt-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-slate-500", children: "Custom range" }),
-          !activePreset && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-[11px] font-medium text-slate-600", children: "Start" }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-[11px] font-medium text-slate-600", children: "End" }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-xs text-slate-400", children: [
-        "Month: ",
-        monthLabel
       ] })
-    ] }) })
+    ] })
   ] });
 };
 var MonthlyRangeFilter_default = MonthlyRangeFilter;
@@ -37065,7 +37397,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__ */ jsxRuntime.jsxs("div", { className: "bg-white/95 backdrop-blur-sm p-3 rounded-lg shadow-lg border border-gray-100", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-800 mb-1", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Actual:" }),
+          " ",
+          Math.round(payload[0].value),
+          " units"
+        ] }),
+        payload[0].payload.idealOutput > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-600", children: [
+          /* @__PURE__ */ jsxRuntime.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];
@@ -37104,7 +37465,7 @@ var LineMonthlyHistory = ({
   }, [rangeStart, rangeEnd, monthBounds.startKey, monthBounds.endKey]);
   const isFullRange = React24.useMemo(() => isFullMonthRange(normalizedRange, year, month), [normalizedRange, year, month]);
   const monthLabel = React24.useMemo(() => new Date(year, month).toLocaleString("default", { month: "long" }), [year, month]);
-  const rangeLabel = React24.useMemo(() => {
+  React24.useMemo(() => {
     return isFullRange ? monthLabel : formatRangeLabel(normalizedRange, monthLabel);
   }, [isFullRange, normalizedRange, monthLabel]);
   const analysisMonthlyData = React24.useMemo(() => {
@@ -37126,15 +37487,6 @@ var LineMonthlyHistory = ({
     shiftId: selectedShiftId,
     enabled: !!lineId
   });
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(
-      OptifyeLogoLoader_default,
-      {
-        size: "lg",
-        message: "Loading monthly performance data..."
-      }
-    ) });
-  }
   const averages = (analysisMonthlyData || []).reduce(
     (acc, day) => {
       const shiftData = getShiftData2(day, selectedShiftId);
@@ -37153,6 +37505,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 = React24.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 = React24.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      OptifyeLogoLoader_default,
+      {
+        size: "lg",
+        message: "Loading monthly performance data..."
+      }
+    ) });
+  }
   const renderPerformanceSquares = (performances) => {
     if (!performances || !Array.isArray(performances)) {
       return null;
@@ -37244,64 +37678,18 @@ var LineMonthlyHistory = ({
           year,
           timezone,
           value: normalizedRange,
-          onChange: (nextRange) => onRangeChange?.(nextRange)
+          onChange: (nextRange) => onRangeChange?.(nextRange),
+          onMonthNavigate: (newMonth, newYear) => onCalendarMonthChange?.(new Date(newYear, newMonth))
         }
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center items-center mb-6 space-x-4", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "w-5 h-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg font-semibold text-gray-700", children: [
-            new Date(year, month).toLocaleString("default", { month: "long" }),
-            " ",
-            year
-          ] }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "w-5 h-5" })
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center mb-6", children: /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg font-semibold text-gray-700", children: [
+          new Date(year, month).toLocaleString("default", { month: "long" }),
+          " ",
+          year
+        ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           LineHistoryCalendar_default,
           {
@@ -37316,26 +37704,20 @@ var LineMonthlyHistory = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-700 mb-1 text-center", children: "Efficiency" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 mb-4 text-center", children: [
-              "Cumulative for ",
-              rangeLabel
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-4xl font-bold text-center text-gray-900", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-1 text-center", children: "Efficiency" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-400 mb-1 text-center uppercase tracking-wide", children: "Cumulative" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl font-bold text-center text-gray-900", children: [
               avgEfficiency.toFixed(1),
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-700 mb-1 text-center", children: "Avg. Underperforming" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500 mb-4 text-center", children: [
-              "Cumulative for ",
-              rangeLabel
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-4xl font-bold text-center text-gray-900", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 flex flex-col items-center justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-1 text-center", children: "Avg. Underperforming" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-gray-400 mb-1 text-center uppercase tracking-wide", children: "Cumulative" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-2xl font-bold text-center text-gray-900", children: [
               avgUnderperforming.toFixed(1),
               "/",
               avgTotalWorkspaces.toFixed(1)
@@ -37343,9 +37725,9 @@ var LineMonthlyHistory = ({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 flex flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-700 mb-3", children: "Idle time Breakdown" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 flex flex-col h-[220px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-700 mb-1", children: "Idle time Breakdown" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 relative -ml-4", children: /* @__PURE__ */ jsxRuntime.jsx(
               IdleTimeReasonChart,
               {
                 data: idleReasonsChartData,
@@ -37355,34 +37737,117 @@ var LineMonthlyHistory = ({
               chartKey
             ) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-700 mb-4", children: "Top 3 Poorest Performers" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4 h-[220px] flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Top 3 Poorest Performers" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto pr-1 space-y-1 custom-scrollbar", children: [
               (underperformingWorkspaces[selectedShiftId] || []).slice(0, 3).map((workspace) => /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   onClick: () => handleWorkspaceClick(workspace),
-                  className: "block hover:bg-gray-50 transition-colors rounded-lg w-full text-left",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 px-2 border-b border-gray-100 last:border-b-0", children: [
-                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2 px-2 border-b border-gray-50 group-last:border-b-0", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-medium text-gray-900 text-xs", children: [
                       getWorkspaceDisplayName(workspace.workspace_name, lineId),
-                      workspace.avg_efficiency !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1 text-xs text-gray-500", children: [
+                      workspace.avg_efficiency !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1 text-[10px] text-gray-500", children: [
                         "(",
                         (workspace.avg_efficiency || 0).toFixed(1),
                         "%)"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500 hidden xl:block", children: "Last 5 days:" }),
-                      renderPerformanceSquares(workspace.last_5_days)
-                    ] })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5", children: renderPerformanceSquares(workspace.last_5_days) })
                   ] })
                 },
                 workspace.workspace_uuid
               )),
-              (!underperformingWorkspaces || !underperformingWorkspaces[selectedShiftId]?.length) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-gray-500 py-4 text-sm", children: "No underperforming workspaces found" })
+              (!underperformingWorkspaces || !underperformingWorkspaces[selectedShiftId]?.length) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-gray-400 py-8 text-xs italic", children: "No underperforming workspaces" })
             ] })
           ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Daily Output" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "220px" }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            recharts.BarChart,
+            {
+              data: chartData.data,
+              margin: { top: 20, right: 10, bottom: 40, left: 10 },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#f3f4f6" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.XAxis,
+                  {
+                    dataKey: "hour",
+                    tick: { fontSize: 10, fill: "#6b7280" },
+                    interval: 0,
+                    angle: -45,
+                    textAnchor: "end",
+                    height: 60
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  recharts.Tooltip,
+                  {
+                    cursor: false,
+                    content: CustomTooltip2
+                  }
+                ),
+                chartData.lastSetTarget > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.ReferenceLine,
+                  {
+                    y: chartData.lastSetTarget,
+                    stroke: "#E34329",
+                    strokeDasharray: "5 5",
+                    strokeWidth: 2
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  recharts.Bar,
+                  {
+                    dataKey: "output",
+                    radius: [4, 4, 0, 0],
+                    isAnimationActive: true,
+                    animationBegin: 0,
+                    animationDuration: 1e3,
+                    animationEasing: "ease-out",
+                    children: chartData.data.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.Cell,
+                      {
+                        fill: entry.output === 0 ? "#f3f4f6" : entry.color,
+                        className: entry.output > 0 ? "hover:opacity-80 transition-opacity cursor-pointer" : ""
+                      },
+                      `cell-${index}`
+                    ))
+                  }
+                )
+              ]
+            },
+            chartKey
+          ) }) })
         ] })
       ] })
     ] })
@@ -38523,7 +38988,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;
@@ -38555,10 +39020,10 @@ var WorkspaceHistoryCalendar = ({
     return () => clearTimeout(timer);
   }, [month, year]);
   const calendarData = React24.useMemo(() => {
-    const startOfMonth = dateFnsTz.toZonedTime(new Date(year, month, 1), configuredTimezone);
-    const endOfMonth = dateFnsTz.toZonedTime(new Date(year, month + 1, 0), configuredTimezone);
-    const totalDays = endOfMonth.getDate();
-    let startOffset = startOfMonth.getDay() - 1;
+    const startOfMonth2 = dateFnsTz.toZonedTime(new Date(year, month, 1), configuredTimezone);
+    const endOfMonth2 = dateFnsTz.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++) {
@@ -38767,7 +39232,7 @@ var WorkspaceHistoryCalendar = ({
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-gray-500 mt-1", children: "Calendar view of daily performance" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 sm:gap-4 lg:gap-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 sm:gap-2", children: WEEKDAYS2.map((day) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs sm:text-sm font-medium text-gray-600 text-center", children: day.slice(0, 3) }, day)) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-1 sm:gap-2", children: WEEKDAYS3.map((day) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs sm:text-sm font-medium text-gray-600 text-center", children: day.slice(0, 3) }, day)) }),
           /* @__PURE__ */ jsxRuntime.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;
@@ -38820,13 +39285,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__ */ jsxRuntime.jsxs("div", { className: "bg-white/95 backdrop-blur-sm p-3 rounded-lg shadow-lg border border-gray-100", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-800 mb-1", children: label }),
@@ -38929,7 +39394,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,
@@ -38963,9 +39428,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 = React24.useMemo(() => {
     const validShifts = analysisMonthlyData.map((d) => getShiftData(d, selectedShiftId)).filter(hasRealData);
@@ -39001,10 +39483,10 @@ var WorkspaceMonthlyHistory = ({
     };
   }, [analysisMonthlyData, selectedShiftId]);
   const calendarData = React24.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++) {
@@ -39071,68 +39553,19 @@ var WorkspaceMonthlyHistory = ({
           year,
           timezone,
           value: normalizedRange,
-          onChange: (nextRange) => onRangeChange?.(nextRange)
+          onChange: (nextRange) => onRangeChange?.(nextRange),
+          onMonthNavigate
         }
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center items-center mb-6 space-x-4", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "w-5 h-5" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg font-semibold text-gray-700", children: [
-            new Date(year, month).toLocaleString("default", { month: "long" }),
-            " ",
-            year
-          ] }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "w-5 h-5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: WEEKDAYS3.map((day, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-500 dark:text-gray-400 text-center", children: day }, day)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center mb-6", children: /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg font-semibold text-gray-700", children: [
+          new Date(year, month).toLocaleString("default", { month: "long" }),
+          " ",
+          year
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-2", children: WEEKDAYS4.map((day, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-500 dark:text-gray-400 text-center", children: day }, day)) }),
         /* @__PURE__ */ jsxRuntime.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()) {
@@ -39149,6 +39582,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__ */ jsxRuntime.jsx("div", { className: "aspect-square relative", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -39168,7 +39602,8 @@ var WorkspaceMonthlyHistory = ({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-xs space-y-1", children: [
@@ -39324,13 +39759,13 @@ var WorkspaceMonthlyHistory = ({
                   recharts.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__ */ jsxRuntime.jsx(
                         "text",
                         {
@@ -39340,7 +39775,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()
                         }
                       );
                     }
@@ -39350,7 +39785,7 @@ var WorkspaceMonthlyHistory = ({
                   recharts.Tooltip,
                   {
                     cursor: false,
-                    content: CustomTooltip2
+                    content: CustomTooltip3
                   }
                 ),
                 chartData.lastSetTarget > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -39979,13 +40414,15 @@ var LiveTimer = () => {
   });
   return /* @__PURE__ */ jsxRuntime.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 = {
@@ -40053,30 +40490,40 @@ var getWorkspaceStyles = (position, isPlaceholder = false) => {
           ${additionalStyles}
           ${isPlaceholder ? "cursor-default" : ""}`;
 };
-var Legend6 = () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-700 hidden sm:block", children: "Efficiency:" }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: "80-100%" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-700 hidden sm:block", children: "Efficiency:" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.green_min, effectiveLegend.green_max) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.yellow_min, effectiveLegend.yellow_max) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: formatPercentRange(effectiveLegend.red_min, effectiveLegend.red_max) })
+      ] })
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-6 bg-gray-200 mx-1" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: "<70%" })
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600", children: exclamationLabel })
     ] })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-6 bg-gray-200 mx-1" }),
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.default.memo(({
@@ -40085,20 +40532,21 @@ var WorkspaceGridItem = React24__namespace.default.memo(({
   isBottleneck = false,
   isLowEfficiency = false,
   isVeryLowEfficiency = false,
-  onHoverChange
+  onHoverChange,
+  legend
 }) => {
   const { navigate } = useNavigation();
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
   const isInactive = React24.useMemo(() => !data.workspace_id || data.efficiency < 10, [data.workspace_id, data.efficiency]);
   const colorClass = React24.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 } = React24.useMemo(() => getTrendArrowAndColor2(data.trend_score), [data.trend_score]);
   const workspaceNumber = React24.useMemo(() => getWorkspaceNumber(data.workspace_name), [data.workspace_name]);
   const styles2 = React24.useMemo(() => getWorkspaceStyles(position, isInactive), [position, isInactive]);
@@ -40180,6 +40628,8 @@ var WorkspaceGrid = React24__namespace.default.memo(({
   factoryView = "factory",
   line2Uuid = "line-2",
   className = "",
+  hasFlowBuffers = false,
+  legend = DEFAULT_EFFICIENCY_LEGEND,
   videoSources = {},
   displayNames = {},
   onWorkspaceHover,
@@ -40216,7 +40666,7 @@ var WorkspaceGrid = React24__namespace.default.memo(({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full h-full overflow-hidden ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-2 sm:left-4 right-2 sm:right-8 z-20", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-between py-1 sm:py-1.5 gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, { legend, useBottleneckLabel: hasFlowBuffers }) }),
         mapViewEnabled && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -40233,7 +40683,7 @@ var WorkspaceGrid = React24__namespace.default.memo(({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1 mr-32", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden mt-1 mr-32", children: /* @__PURE__ */ jsxRuntime.jsx(Legend6, { legend, useBottleneckLabel: hasFlowBuffers }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-14 sm:top-16 left-0 right-0 bottom-0", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatePresence, { mode: "wait", children: viewMode === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
       motion.div,
@@ -40249,6 +40699,7 @@ var WorkspaceGrid = React24__namespace.default.memo(({
             workspaces,
             videoSources,
             displayNames,
+            legend,
             onWorkspaceHover,
             onWorkspaceHoverEnd
           }
@@ -40268,6 +40719,7 @@ var WorkspaceGrid = React24__namespace.default.memo(({
           {
             workspaces,
             displayNames,
+            legend,
             onWorkspaceHover,
             onWorkspaceHoverEnd
           }
@@ -47748,7 +48200,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__ */ jsxRuntime.jsxs("div", { className: "bg-white px-4 py-3 shadow-lg rounded-lg border border-gray-200", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 mb-1", children: label }),
@@ -47848,7 +48300,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip3, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
               recharts.Bar,
               {
@@ -47892,7 +48344,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip3, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
               recharts.Line,
               {
@@ -48012,7 +48464,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip3, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
               recharts.Legend,
               {
@@ -48072,7 +48524,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip3, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
               recharts.Legend,
               {
@@ -48236,7 +48688,7 @@ var AIAgentView = () => {
               recharts.Tooltip,
               {
                 cursor: { strokeDasharray: "3 3" },
-                content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip3, {})
+                content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {})
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -48306,7 +48758,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip3, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
               recharts.Legend,
               {
@@ -48380,7 +48832,7 @@ var AIAgentView = () => {
                 tickFormatter: (value) => formatNumber(value)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip3, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip4, {}), cursor: { strokeDasharray: "3 3" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
               recharts.Legend,
               {
@@ -49639,6 +50091,8 @@ function HomeView({
   const {
     workspaceMetrics,
     lineMetrics,
+    efficiencyLegend,
+    metadata: metricsMetadata,
     isLoading: metricsLoading,
     error: metricsError,
     refetch: refetchMetrics
@@ -49647,6 +50101,7 @@ function HomeView({
     userAccessibleLineIds: allLineIds
     // Pass user's accessible lines for supervisor filtering
   });
+  const hasFlowBuffers = Boolean(metricsMetadata?.hasFlowBuffers);
   const kpis = React24.useMemo(() => {
     const lineMetricsRows = lineMetrics || [];
     if (selectedLineId === factoryViewId) {
@@ -50105,8 +50560,10 @@ function HomeView({
                   workspaces: memoizedWorkspaceMetrics,
                   lineNames,
                   factoryView: factoryViewId,
+                  legend: efficiencyLegend,
                   videoSources,
                   displayNames: workspaceDisplayNames,
+                  hasFlowBuffers,
                   className: "h-full",
                   onWorkspaceHover: handleWorkspaceHover,
                   onWorkspaceHoverEnd: handleWorkspaceHoverEnd
@@ -50133,8 +50590,10 @@ function HomeView({
                   // Show empty grid while loading
                   lineNames,
                   factoryView: factoryViewId,
+                  legend: efficiencyLegend,
                   videoSources,
                   displayNames: workspaceDisplayNames,
+                  hasFlowBuffers,
                   className: "h-full",
                   onWorkspaceHover: handleWorkspaceHover,
                   onWorkspaceHoverEnd: handleWorkspaceHoverEnd
@@ -50755,6 +51214,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
@@ -53210,6 +53671,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] = React24.useState(DEFAULT_EFFICIENCY_LEGEND);
+  const [isLoading, setIsLoading] = React24.useState(true);
+  const [error, setError] = React24.useState(null);
+  const effectiveCompanyId = companyId || config.entityConfig?.companyId;
+  const fetchLegend = React24.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]);
+  React24.useEffect(() => {
+    fetchLegend();
+  }, [fetchLegend]);
+  const updateLegend = React24.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 "";
@@ -53236,369 +53892,245 @@ var getStoredLineState2 = (lineId) => {
     return false;
   }
 };
-var BulkConfigureModal = ({
+var ConfigureLegendModal = ({
   isOpen,
   onClose,
-  lineWorkspaces,
-  lineNames,
   onSave,
-  selectedShift
+  legend,
+  canSave = true
 }) => {
-  const [selectedLine, setSelectedLine] = React24.useState("");
-  const [selectedWorkspaces, setSelectedWorkspaces] = React24.useState([]);
-  const [actionType, setActionType] = React24.useState("assembly");
-  const [targetPPH, setTargetPPH] = React24.useState("");
-  const [targetCycleTime, setTargetCycleTime] = React24.useState("");
-  const [targetDayOutput, setTargetDayOutput] = React24.useState("");
-  const [productId, setProductId] = React24.useState("");
-  const [selectedCount, setSelectedCount] = React24.useState(0);
-  const shiftHours = React24.useMemo(() => {
-    if (selectedLine && lineWorkspaces[selectedLine]) {
-      return lineWorkspaces[selectedLine].shiftHours;
-    }
-    return 8;
-  }, [selectedLine, lineWorkspaces]);
-  const selectedLineBreaks = React24.useMemo(() => {
-    if (selectedLine && lineWorkspaces[selectedLine]) {
-      return lineWorkspaces[selectedLine].breaks;
-    }
-    return [];
-  }, [selectedLine, lineWorkspaces]);
-  React24.useEffect(() => {
-    if (!isOpen) {
-      setTimeout(() => {
-        setSelectedLine("");
-        setSelectedWorkspaces([]);
-        setActionType("assembly");
-        setTargetPPH("");
-        setTargetCycleTime("");
-        setTargetDayOutput("");
-        setProductId("");
-      }, 200);
-    }
-  }, [isOpen]);
+  const effectiveLegend = legend || DEFAULT_EFFICIENCY_LEGEND;
+  const [redThreshold, setRedThreshold] = React24.useState(effectiveLegend.yellow_min);
+  const [greenThreshold, setGreenThreshold] = React24.useState(effectiveLegend.green_min);
+  const [isSaving, setIsSaving] = React24.useState(false);
+  const [saveSuccess, setSaveSuccess] = React24.useState(false);
   React24.useEffect(() => {
-    if (selectedLine && lineWorkspaces[selectedLine]) {
-      setProductId(lineWorkspaces[selectedLine].productId);
+    if (isOpen) {
+      setRedThreshold(effectiveLegend.yellow_min);
+      setGreenThreshold(effectiveLegend.green_min);
+      setSaveSuccess(false);
     }
-  }, [selectedLine, lineWorkspaces]);
-  React24.useEffect(() => {
-    setSelectedCount(selectedWorkspaces.length);
-  }, [selectedWorkspaces]);
+  }, [isOpen, effectiveLegend]);
   const handleSave = async () => {
-    if (selectedWorkspaces.length === 0) {
-      sonner.toast.error("Please select at least one workspace");
+    if (!canSave) {
+      sonner.toast.error("You do not have permission to update the legend.");
       return;
     }
-    if (targetPPH === "" && targetCycleTime === "" && targetDayOutput === "") {
-      sonner.toast.error("Please enter at least one target value");
+    if (redThreshold === "" || greenThreshold === "") {
+      sonner.toast.error("Please enter valid threshold values");
       return;
     }
-    if (!selectedLine) {
-      sonner.toast.error("Please select a line");
+    if (Number(redThreshold) >= Number(greenThreshold)) {
+      sonner.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) {
+      sonner.toast.error("Thresholds must be between 1 and 100");
+      return;
     }
-  };
-  React24.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) {
+      sonner.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 {
+        sonner.toast.error(result.error || "Failed to update legend");
       }
-    };
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
+    } catch (error) {
+      console.error("Error saving legend:", error);
+      sonner.toast.error("Failed to update legend");
+    } finally {
+      setIsSaving(false);
     }
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-    };
-  }, [isOpen, onClose]);
+  };
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 border-b border-gray-200 flex items-center justify-between", children: [
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "px-6 py-5 border-b border-gray-100 flex items-center justify-between bg-white rounded-t-lg", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Bulk Configure Targets" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Update multiple workspace targets at once" })
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-gray-900", children: "Performance Thresholds" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Define acceptance criteria for production metrics." })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: onClose,
-              className: "text-gray-400 hover:text-gray-500 transition-colors p-1 hover:bg-gray-100 rounded-lg",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-6 overflow-y-scroll flex-1 custom-scrollbar relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Select Line" }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "", children: "Select a line" }),
-                      Object.entries(lineWorkspaces).map(([lineId, line]) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: lineId, className: "py-2", children: lineNames[lineId] || lineId }, lineId))
-                    ]
-                  }
-                )
-              ] }),
-              selectedLine && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Product Code" }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Select Workspaces" }),
-                    selectedCount > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700", children: "Action Type" }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
-                    ]
-                  }
-                )
-              ] })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-8 space-y-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 pt-6", children: [
+            " ",
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-gray-400/50" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-px h-3 bg-gray-400/50" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [
-                  "Target Cycle Time",
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-xs text-gray-400", children: "seconds per piece" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs font-medium text-gray-400 pt-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "0%" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "100%+" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-8 relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-gray-300", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "w-5 h-5" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Critical Limit" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-red-500 mr-2.5" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
                   /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
-                    }
-                  )
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 sm:text-sm", children: "%" }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [
-                  "Target PPH",
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-xs text-gray-400", children: "pieces per hour" })
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-2 text-xs text-gray-500", children: [
+                "Efficiency below ",
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-gray-900", children: [
+                  redThreshold,
+                  "%"
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+                " will show in ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-red-600", children: "red" }),
+                "."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Target Limit" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-green-500 mr-2.5" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
                   /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
-                    }
-                  )
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 sm:text-sm", children: "%" }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [
-                  "Total Day Output",
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-xs text-gray-400", children: "pieces per day" })
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-2 text-xs text-gray-500", children: [
+                "Efficiency above ",
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-gray-900", children: [
+                  greenThreshold,
+                  "%"
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      onClick: () => setTargetDayOutput(""),
-                      className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-500",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
-                    }
-                  )
-                ] })
+                " will show in ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-green-600", children: "green" }),
+                "."
               ] })
-            ] }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-white to-transparent pointer-events-none" })
+            ] })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-between items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: selectedCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            "Updating ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: selectedCount }),
-            " workspace",
-            selectedCount !== 1 ? "s" : ""
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "min-h-[20px]", children: saveSuccess && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-4 h-4" }),
+            "Saved successfully"
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
             /* @__PURE__ */ jsxRuntime.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"
               }
             ),
@@ -53606,10 +54138,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"
               }
             )
           ] })
@@ -53618,7 +54149,7 @@ var BulkConfigureModal = ({
     }
   );
 };
-var BulkConfigureModal_default = BulkConfigureModal;
+var ConfigureLegendModal_default = ConfigureLegendModal;
 var SKUModal = ({
   isOpen,
   onClose,
@@ -54019,7 +54550,8 @@ var TargetsViewUI = ({
     { id: 0, name: "Day Shift" },
     { id: 1, name: "Night Shift" }
   ],
-  isBulkConfigureOpen,
+  isConfigureLegendOpen,
+  legend,
   navItems = [],
   currentPathname = "/targets",
   canSaveTargets = true,
@@ -54030,8 +54562,8 @@ var TargetsViewUI = ({
   onActionTypeChange,
   onShiftChange,
   onSaveLine,
-  onToggleBulkConfigure,
-  onBulkConfigure,
+  onToggleConfigureLegend,
+  onSaveLegend,
   onUpdateWorkspaceDisplayName,
   // SKU props
   skuEnabled = false,
@@ -54057,11 +54589,13 @@ var TargetsViewUI = ({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:right-0 w-full sm:w-auto", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 inline-block" }),
-            "Bulk Configure"
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 inline-block" }),
+            "Configure Legend"
           ]
         }
       ) }),
@@ -54363,14 +54897,13 @@ var TargetsViewUI = ({
       )) })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      BulkConfigureModal_default,
+      ConfigureLegendModal_default,
       {
-        isOpen: isBulkConfigureOpen,
-        onClose: onToggleBulkConfigure,
-        lineWorkspaces,
-        lineNames,
-        onSave: onBulkConfigure,
-        selectedShift
+        isOpen: isConfigureLegendOpen,
+        onClose: onToggleConfigureLegend,
+        onSave: onSaveLegend,
+        legend,
+        canSave: canSaveTargets
       }
     )
   ] });
@@ -54416,7 +54949,7 @@ var TargetsView = ({
     () => lineIds.reduce((acc, id3) => ({ ...acc, [id3]: false }), {})
   );
   const [isLoading, setIsLoading] = React24.useState(true);
-  const [isBulkConfigureOpen, setIsBulkConfigureOpen] = React24.useState(false);
+  const [isConfigureLegendOpen, setIsConfigureLegendOpen] = React24.useState(false);
   const [selectedWorkspaces, setSelectedWorkspaces] = React24.useState([]);
   const [selectedShift, setSelectedShift] = React24.useState(0);
   const [shiftOptions, setShiftOptions] = React24.useState([]);
@@ -54433,6 +54966,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;
   React24.useEffect(() => {
@@ -54868,41 +55402,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 = React24.useCallback(async (nextLegend) => {
+    if (!canSaveTargets) {
+      sonner.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) {
+      sonner.toast.success("Efficiency legend updated successfully");
+    } else if (result.error) {
+      sonner.toast.error(result.error);
+    } else {
+      sonner.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 }
-          };
-        })
-      }
-    }));
-    sonner.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) {
@@ -54940,7 +55456,7 @@ var TargetsView = ({
       saveSuccess,
       selectedShift,
       shiftOptions,
-      isBulkConfigureOpen,
+      isConfigureLegendOpen,
       navItems: [],
       currentPathname: "/targets",
       canSaveTargets,
@@ -54951,8 +55467,9 @@ var TargetsView = ({
       onActionTypeChange: handleActionTypeChange,
       onShiftChange: handleShiftChange,
       onSaveLine: handleSaveLine,
-      onToggleBulkConfigure: handleToggleBulkConfigure,
-      onBulkConfigure: handleBulkConfigure,
+      onToggleConfigureLegend: handleToggleConfigureLegend,
+      onSaveLegend: handleSaveLegend,
+      legend,
       onUpdateWorkspaceDisplayName: handleUpdateWorkspaceDisplayName,
       skuEnabled,
       skus,
@@ -55333,6 +55850,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) {
@@ -55719,7 +56250,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
                           }
                         )
                       }
@@ -55845,7 +56380,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
                             }
                           )
                         }
@@ -58979,7 +59518,12 @@ var ImprovementCenterView = () => {
   const { user } = useAuth();
   const dashboardConfig = useDashboardConfig();
   const entityConfig = useEntityConfig();
-  const [currentDate, setCurrentDate] = React24.useState(/* @__PURE__ */ new Date());
+  const timezone = useAppTimezone();
+  const today = new Date((/* @__PURE__ */ new Date()).toLocaleString("en-US", { timeZone: timezone }));
+  const [selectedMonth, setSelectedMonth] = React24.useState(today.getMonth());
+  const [selectedYear, setSelectedYear] = React24.useState(today.getFullYear());
+  const monthBounds = React24.useMemo(() => getMonthKeyBounds(selectedYear, selectedMonth), [selectedYear, selectedMonth]);
+  const [dateRange, setDateRange] = React24.useState(monthBounds);
   const [selectedLineId, setSelectedLineId] = React24.useState("all");
   const [selectedStatus, setSelectedStatus] = React24.useState("all");
   const [selectedShift, setSelectedShift] = React24.useState("all");
@@ -58990,14 +59534,36 @@ var ImprovementCenterView = () => {
   const [loadError, setLoadError] = React24.useState(null);
   const [teamMembers, setTeamMembers] = React24.useState([]);
   const [companyLines, setCompanyLines] = React24.useState([]);
+  const [isFilterOpen, setIsFilterOpen] = React24.useState(false);
+  const filterRef = React24.useRef(null);
+  React24.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 = React24.useMemo(() => {
     return entityConfig.lines || entityConfig.lineNames || {};
   }, [entityConfig.lines, entityConfig.lineNames]);
@@ -59106,14 +59672,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));
+  React24.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")}`
+    });
   };
   React24.useEffect(() => {
     let cancelled = false;
@@ -59131,7 +59721,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(","));
         }
@@ -59162,7 +59754,7 @@ var ImprovementCenterView = () => {
     return () => {
       cancelled = true;
     };
-  }, [supabase, companyId, scopeLineIdsKey, currentDate]);
+  }, [supabase, companyId, scopeLineIdsKey, selectedMonth, selectedYear, dateRange.startKey, dateRange.endKey]);
   const teamMembersById = React24.useMemo(() => {
     return new Map(teamMembers.map((member) => [member.id, member]));
   }, [teamMembers]);
@@ -59204,6 +59796,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");
@@ -59237,8 +59838,60 @@ var ImprovementCenterView = () => {
       setSelectedLineId("all");
     }
   }, [scopeLineIds, selectedLineId]);
+  React24.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__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b border-gray-200 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-6 lg:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-30 bg-white border-b border-gray-200 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-6 lg:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx(
         BackButtonMinimal,
         {
@@ -59250,187 +59903,173 @@ var ImprovementCenterView = () => {
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Improvement Center" }),
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "min-w-[120px]" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[180px] flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+        MonthlyRangeFilter_default,
+        {
+          month: selectedMonth,
+          year: selectedYear,
+          timezone,
+          value: dateRange,
+          onChange: handleRangeChange,
+          onMonthNavigate: handleMonthNavigate
+        }
+      ) })
     ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "flex-1 p-4 sm:p-6 max-w-7xl mx-auto w-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mb-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 bg-white rounded-full px-4 py-2 border border-gray-200 shadow-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: prevMonth,
-            className: "p-1 rounded-full hover:bg-gray-100 text-gray-500 transition-colors",
-            children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronLeftIcon, { className: "w-5 h-5" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold text-gray-900 min-w-[160px] text-center", children: formatMonth(currentDate) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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: outline.CheckCircleIcon },
+          { id: "unresolved", label: "Unresolved", count: stats.unresolved, icon: outline.XCircleIcon }
+        ].map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
-            onClick: nextMonth,
-            className: "p-1 rounded-full hover:bg-gray-100 text-gray-500 transition-colors",
-            children: /* @__PURE__ */ jsxRuntime.jsx(outline.ChevronRightIcon, { className: "w-5 h-5" })
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row items-center justify-between gap-4 mb-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-gray-300 mx-1" }),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.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__ */ jsxRuntime.jsx(tab.icon, { className: `w-4 h-4 ${selectedStatus === tab.id ? "text-blue-600" : "text-gray-400"}` }),
+              tab.label,
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative", ref: filterRef, children: [
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.XCircleIcon, { className: "w-4 h-4 text-red-500" }),
-                "Unresolved ",
-                stats.unresolved
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 w-full md:w-auto", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "all", children: "All Shifts" }),
-                shiftOptions.filter((s) => s !== "all").map((shift) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: shift, children: shift }, shift))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: opt.id, children: opt.label }, opt.id))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "all", children: "All Members" }),
-                teamMembers.map((member) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: member.id, children: member.name }, member.id))
+                /* @__PURE__ */ jsxRuntime.jsx(outline.FunnelIcon, { className: "w-4 h-4" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Filters" }),
+                (selectedShift !== "all" || selectedWeeksRange !== "all" || selectedMemberId !== "all" || selectedLineId !== "all") && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.ChevronDownIcon, { className: `w-3 h-3 ml-1 transition-transform ${isFilterOpen ? "rotate-180" : ""}` })
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: opt.id, children: opt.label }, opt.id))
-            }
-          )
+          isFilterOpen && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Filter View" }),
+              (selectedShift !== "all" || selectedWeeksRange !== "all" || selectedMemberId !== "all" || selectedLineId !== "all") && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: clearFilters,
+                  className: "text-xs text-red-600 hover:text-red-700 font-medium",
+                  children: "Clear all"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: filter2.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: val, children: label }, val);
+                  })
+                }
+              ) })
+            ] }, idx)) })
+          ] })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6", children: [
-        filteredRecommendations.length > 0 ? filteredRecommendations.map((rec, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "p-6 relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 w-full", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-                    rec.ticket_status === "solved" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { className: "w-3.5 h-3.5" }),
-                      "Resolved"
-                    ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-px bg-gray-200" }),
-                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "p-6 relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col md:flex-row gap-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 w-full", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { className: "w-3.5 h-3.5" }),
+                        "Resolved"
+                      ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "w-3.5 h-3.5" }),
+                        openLabel
+                      ] }),
+                      openedOnLabel && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-px bg-gray-200" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: rec.assigned_user_ids.map((uid) => {
+                          const user2 = teamMembersById.get(uid);
+                          if (!user2) {
+                            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-500", children: "Unknown" })
+                            ] }, uid);
+                          }
                           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-500", children: "Unknown" })
-                          ] }, uid);
-                        }
-                        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-                          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-600", children: user2.name })
-                        ] }, user2.id);
-                      }) })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 pr-12", children: rec.title }),
-                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
-                        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-600", children: user2.name })
+                          ] }, user2.id);
+                        }) })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 pr-12", children: rec.title }),
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u2022" }),
+                          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "prose prose-sm text-gray-600", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: rec.description }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-amber-50 border border-amber-100 rounded-lg p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-amber-800 font-medium flex items-start gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, { className: "w-5 h-5 flex-shrink-0" }),
-                  "Impact: ",
-                  rec.impact
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                EvidenceCarousel,
-                {
-                  evidence: rec.evidence,
-                  recId: rec.id,
-                  clipsService
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: isLoading ? "Loading evidence\u2026" : loadError ? loadError : "No evidence available" }) })
-            ] }) })
-          },
-          rec.id
-        )) : (
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-sm text-gray-600", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: rec.description }) }),
+                  rec.resolution_instructions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-blue-50 border border-blue-100 rounded-lg p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-blue-800 font-medium flex items-start gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { className: "w-5 h-5 flex-shrink-0" }),
+                    rec.resolution_instructions
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  EvidenceCarousel,
+                  {
+                    evidence: rec.evidence,
+                    recId: rec.id,
+                    clipsService
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-center py-16 bg-white rounded-xl border border-gray-200 shadow-sm", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex items-center justify-center w-16 h-16 rounded-full bg-green-50 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(outline.CheckCircleIcon, { className: "w-8 h-8 text-green-500" }) }),
@@ -60306,6 +60945,7 @@ exports.useHookOverride = useHookOverride;
 exports.useHourEndTimer = useHourEndTimer;
 exports.useHourlyTargetAchievements = useHourlyTargetAchievements;
 exports.useHourlyTargetMisses = useHourlyTargetMisses;
+exports.useIdleTimeClipClassifications = useIdleTimeClipClassifications;
 exports.useIdleTimeReasons = useIdleTimeReasons;
 exports.useLeaderboardMetrics = useLeaderboardMetrics;
 exports.useLineDetailedMetrics = useLineDetailedMetrics;