@optifye/dashboard-core 6.10.6 → 6.10.8

package/dist/index.js

@@ -3757,18 +3757,17 @@ var initializeCoreMixpanel = (token, debugOrOptions, trackPageViewArg) => {
     track_pageview: trackPageView ?? true,
     persistence: "localStorage"
   };
-  if (sessionOpts.recordSessionsPercent !== void 0) {
-    initOptions.record_sessions_percent = sessionOpts.recordSessionsPercent;
-  } else {
-    initOptions.record_sessions_percent = 1;
-  }
-  if (sessionOpts.recordIdleTimeoutMs !== void 0) {
-    initOptions.record_idle_timeout_ms = sessionOpts.recordIdleTimeoutMs;
+  const recordSessionsPercent = sessionOpts.recordSessionsPercent ?? 0;
+  initOptions.record_sessions_percent = recordSessionsPercent;
+  const defaultIdleTimeoutMs = 10 * 60 * 1e3;
+  const recordIdleTimeoutMs = sessionOpts.recordIdleTimeoutMs ?? (recordSessionsPercent > 0 ? defaultIdleTimeoutMs : void 0);
+  if (recordIdleTimeoutMs !== void 0) {
+    initOptions.record_idle_timeout_ms = recordIdleTimeoutMs;
   }
   if (sessionOpts.recordHeatmapData !== void 0) {
     initOptions.record_heatmap_data = sessionOpts.recordHeatmapData;
   } else {
-    initOptions.record_heatmap_data = true;
+    initOptions.record_heatmap_data = false;
   }
   if (sessionOpts.recordCanvas !== void 0) {
     initOptions.record_canvas = sessionOpts.recordCanvas;
@@ -3786,7 +3785,9 @@ var initializeCoreMixpanel = (token, debugOrOptions, trackPageViewArg) => {
   });
   mixpanel__default.default.init(token, initOptions);
   isMixpanelInitialized = true;
-  console.log("Mixpanel initialized in dashboard-core with Session Replay support.");
+  if (initOptions.debug) {
+    console.log("Mixpanel initialized in dashboard-core.");
+  }
 };
 var trackCorePageView = (pageName, properties) => {
   if (!isMixpanelInitialized) return;
@@ -10330,6 +10331,41 @@ var useRealtimeLineMetrics = ({
     refreshMetrics: fetchData
   }), [metrics2, lineDetails, loading, error, fetchData]);
 };
+var useLines = () => {
+  const supabase = useSupabase();
+  const entityConfig = useEntityConfig();
+  const [lines, setLines] = React24.useState([]);
+  const [loading, setLoading] = React24.useState(true);
+  const [error, setError] = React24.useState(null);
+  const fetchLines = React24.useCallback(async () => {
+    if (!supabase) {
+      setLoading(false);
+      return;
+    }
+    try {
+      setLoading(true);
+      let query = supabase.from("lines").select("*").eq("enable", true);
+      if (entityConfig.companyId) {
+        query = query.eq("company_id", entityConfig.companyId);
+      }
+      const { data, error: error2 } = await query;
+      if (error2) throw error2;
+      const sortedLines = (data || []).sort(
+        (a, b) => (a.line_name || "").localeCompare(b.line_name || "")
+      );
+      setLines(sortedLines);
+    } catch (err) {
+      console.error("Error fetching lines:", err);
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, [supabase, entityConfig.companyId]);
+  React24.useEffect(() => {
+    fetchLines();
+  }, [fetchLines]);
+  return { lines, loading, error, refetch: fetchLines };
+};
 var useTargets = (options) => {
   const { companyId } = useEntityConfig();
   const supabase = useSupabase();
@@ -12463,41 +12499,6 @@ function useClipTypesWithCounts(workspaceId, date, shiftId, totalOutput, options
     counts
   };
 }
-var useLines = () => {
-  const supabase = useSupabase();
-  const entityConfig = useEntityConfig();
-  const [lines, setLines] = React24.useState([]);
-  const [loading, setLoading] = React24.useState(true);
-  const [error, setError] = React24.useState(null);
-  const fetchLines = React24.useCallback(async () => {
-    if (!supabase) {
-      setLoading(false);
-      return;
-    }
-    try {
-      setLoading(true);
-      let query = supabase.from("lines").select("*").eq("enable", true);
-      if (entityConfig.companyId) {
-        query = query.eq("company_id", entityConfig.companyId);
-      }
-      const { data, error: error2 } = await query;
-      if (error2) throw error2;
-      const sortedLines = (data || []).sort(
-        (a, b) => (a.line_name || "").localeCompare(b.line_name || "")
-      );
-      setLines(sortedLines);
-    } catch (err) {
-      console.error("Error fetching lines:", err);
-      setError(err);
-    } finally {
-      setLoading(false);
-    }
-  }, [supabase, entityConfig.companyId]);
-  React24.useEffect(() => {
-    fetchLines();
-  }, [fetchLines]);
-  return { lines, loading, error, refetch: fetchLines };
-};
 var MAX_RETRIES = 10;
 var RETRY_DELAY = 500;
 function useNavigation(customNavigate) {
@@ -25352,6 +25353,7 @@ var DEFAULT_BAR_RADIUS = [4, 4, 0, 0];
 var BarChartComponent = ({
   data,
   bars,
+  referenceLines,
   xAxisDataKey = "name",
   xAxisLabel,
   yAxisLabel,
@@ -25435,6 +25437,22 @@ var BarChartComponent = ({
         stroke: axisStrokeColor
       }
     ),
+    referenceLines?.map((line, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.ReferenceLine,
+      {
+        y: line.y,
+        stroke: line.stroke || axisStrokeColor,
+        strokeDasharray: line.strokeDasharray || "4 4",
+        strokeWidth: line.strokeWidth,
+        label: line.label ? {
+          value: line.label,
+          position: "insideTopRight",
+          fill: line.stroke || axisTickFillColor,
+          fontSize: 12
+        } : void 0
+      },
+      `ref-line-${idx}`
+    )),
     showTooltip && /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { formatter: tooltipFormatter || defaultTooltipFormatter, cursor: { fill: "transparent" } }),
     showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { payload: legendPayload }),
     bars.map((barConfig, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -25470,7 +25488,7 @@ var BarChartComponent = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("w-full", className), children: chartContent });
 };
 var BarChart = React24__namespace.default.memo(BarChartComponent, (prevProps, nextProps) => {
-  if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || prevProps.layout !== nextProps.layout || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect) {
+  if (prevProps.xAxisDataKey !== nextProps.xAxisDataKey || prevProps.xAxisLabel !== nextProps.xAxisLabel || prevProps.yAxisLabel !== nextProps.yAxisLabel || prevProps.yAxisUnit !== nextProps.yAxisUnit || JSON.stringify(prevProps.referenceLines || []) !== JSON.stringify(nextProps.referenceLines || []) || prevProps.layout !== nextProps.layout || prevProps.className !== nextProps.className || prevProps.showGrid !== nextProps.showGrid || prevProps.showLegend !== nextProps.showLegend || prevProps.showTooltip !== nextProps.showTooltip || prevProps.responsive !== nextProps.responsive || prevProps.aspect !== nextProps.aspect) {
     return false;
   }
   if (prevProps.data.length !== nextProps.data.length) {
@@ -29051,6 +29069,38 @@ var ERROR_MAPPING = {
     canRetry: false
   }
 };
+var CLIP_ID_COMMENT_REGEX = /#\s*Clip ID:\s*([a-f0-9-]+)/i;
+var PLAYLIST_PROXY_REGEX = /\/api\/clips\/playlist\/([a-f0-9-]+)/i;
+var R2_FALLBACK_DETAILS = /* @__PURE__ */ new Set([
+  "fragLoadError",
+  "fragLoadHTTPError",
+  "manifestLoadError",
+  "levelLoadError",
+  "keyLoadError"
+]);
+var extractClipIdFromSource = (source) => {
+  if (!source) return null;
+  const commentMatch = source.match(CLIP_ID_COMMENT_REGEX);
+  if (commentMatch) return commentMatch[1];
+  const urlMatch = source.match(PLAYLIST_PROXY_REGEX);
+  if (urlMatch) return urlMatch[1];
+  return null;
+};
+var ensureClipIdComment = (playlist, clipId) => {
+  if (!playlist || playlist.includes(`# Clip ID: ${clipId}`) || CLIP_ID_COMMENT_REGEX.test(playlist)) {
+    return playlist;
+  }
+  const lines = playlist.split("\n");
+  if (lines.length === 0) return playlist;
+  return [lines[0], `# Clip ID: ${clipId}`, ...lines.slice(1)].join("\n");
+};
+var getHlsErrorUrl = (data) => {
+  return data?.frag?.url || data?.response?.url || data?.context?.url || data?.networkDetails?.response?.url || data?.url;
+};
+var getHlsErrorStatus = (data) => {
+  const status = data?.response?.code ?? data?.response?.status ?? data?.networkDetails?.status ?? data?.networkDetails?.response?.status;
+  return typeof status === "number" ? status : void 0;
+};
 var hlsVideoPlayerStyles = `
   .hls-video-player-container {
     width: 100%;
@@ -29152,8 +29202,12 @@ var HlsVideoPlayer = React24.forwardRef(({
   const videoRef = React24.useRef(null);
   const hlsRef = React24.useRef(null);
   const blobUrlRef = React24.useRef(null);
+  const clipIdRef = React24.useRef(null);
+  const r2FallbackAttemptedRef = React24.useRef(false);
   const [isReady, setIsReady] = React24.useState(false);
   const [isLoading, setIsLoading] = React24.useState(true);
+  const [overrideSource, setOverrideSource] = React24.useState(null);
+  const effectiveSrc = overrideSource && overrideSource.baseSrc === src ? overrideSource.value : src;
   const [showControls, setShowControls] = React24.useState(true);
   const [controlsPinned, setControlsPinned] = React24.useState(false);
   const [isPlaying, setIsPlaying] = React24.useState(false);
@@ -29213,10 +29267,16 @@ var HlsVideoPlayer = React24.forwardRef(({
     onSeeked,
     onLoadingChange
   ]);
+  React24.useEffect(() => {
+    clipIdRef.current = extractClipIdFromSource(src);
+    r2FallbackAttemptedRef.current = false;
+    setOverrideSource(null);
+  }, [src]);
   const stableHlsConfigRef = React24.useRef(hlsConfig);
   const stableOptionsRef = React24.useRef(options);
   const configSignatureRef = React24.useRef("");
   const [configVersion, setConfigVersion] = React24.useState(0);
+  const r2WorkerDomain = process.env.NEXT_PUBLIC_R2_WORKER_DOMAIN || "https://r2-stream-proxy.optifye-r2.workers.dev";
   React24.useEffect(() => {
     const serialized = JSON.stringify({
       hlsConfig: hlsConfig || null,
@@ -29235,6 +29295,50 @@ var HlsVideoPlayer = React24.forwardRef(({
       setConfigVersion((prev) => prev + 1);
     }
   }, [hlsConfig, options]);
+  const attemptS3Fallback = React24.useCallback(async (mode, reason, errorUrl) => {
+    if (r2FallbackAttemptedRef.current) return false;
+    const clipId = clipIdRef.current || extractClipIdFromSource(effectiveSrc);
+    if (!clipId) {
+      console.warn(`[HlsVideoPlayer] R2 fallback skipped - no clip ID (${reason})`);
+      return false;
+    }
+    r2FallbackAttemptedRef.current = true;
+    if (mode === "url") {
+      const fallbackUrl = `/api/clips/playlist/${clipId}?source=s3`;
+      console.warn(`[HlsVideoPlayer] Switching to S3 playlist URL (${reason})`, { errorUrl, clipId });
+      setOverrideSource({ baseSrc: src, value: fallbackUrl });
+      return true;
+    }
+    try {
+      console.warn(`[HlsVideoPlayer] Fetching S3 playlist (${reason})`, { errorUrl, clipId });
+      const response = await fetch(`/api/clips/playlist/${clipId}?source=s3`);
+      if (!response.ok) {
+        console.warn("[HlsVideoPlayer] S3 playlist fetch failed", { status: response.status, clipId });
+        return false;
+      }
+      let playlistText = await response.text();
+      playlistText = ensureClipIdComment(playlistText, clipId);
+      setOverrideSource({ baseSrc: src, value: playlistText });
+      return true;
+    } catch (error) {
+      console.error("[HlsVideoPlayer] S3 fallback failed", error);
+      return false;
+    }
+  }, [effectiveSrc, src]);
+  const maybeHandleR2Fallback = React24.useCallback((data) => {
+    const errorUrl = getHlsErrorUrl(data);
+    if (!errorUrl || !isR2WorkerUrl(errorUrl, r2WorkerDomain)) {
+      return false;
+    }
+    const status = getHlsErrorStatus(data);
+    const details = data?.details;
+    const shouldFallback = R2_FALLBACK_DETAILS.has(details) || typeof status === "number" && status >= 400 && status < 500;
+    if (!shouldFallback) {
+      return false;
+    }
+    attemptS3Fallback("playlist", `HLS.js ${details || data?.type || "error"}`, errorUrl);
+    return true;
+  }, [attemptS3Fallback, r2WorkerDomain]);
   const cleanupBlobUrl = React24.useCallback(() => {
     if (blobUrlRef.current) {
       URL.revokeObjectURL(blobUrlRef.current);
@@ -29276,70 +29380,55 @@ var HlsVideoPlayer = React24.forwardRef(({
     };
   }, [dispose]);
   const initializePlayer = React24.useCallback(async () => {
-    if (!videoRef.current || !src) return;
+    if (!videoRef.current || !effectiveSrc) return;
     const video = videoRef.current;
     const player = playerLikeObject();
     let authToken = null;
     try {
       authToken = await getAuthTokenForHls(supabase);
-      if (authToken) {
-        console.log("[HLS Auth] Retrieved token for R2 streaming");
-      } else {
+      if (!authToken) {
         console.warn("[HLS Auth] No active session - R2 streaming may fail");
       }
     } catch (error) {
-      console.error("[HLS Auth] Error retrieving token:", error);
+      console.error("[HLS Auth] Error getting auth token:", error);
     }
-    const r2WorkerDomain = "https://r2-stream-proxy.optifye-r2.workers.dev";
     const mergedHlsConfig = {
       ...BASE_HLS_CONFIG,
       ...stableHlsConfigRef.current || {},
       ...stableOptionsRef.current || {},
-      // Modern HLS.js uses Fetch API - override fetch to add Authorization header
+      // Modern HLS.js uses Fetch API - override fetch to add Authorization header for R2 Worker requests
       fetchSetup: function(context, initParams) {
         const url = context.url;
-        console.log("[HLS fetchSetup] Request URL:", url);
-        console.log("[HLS fetchSetup] R2 Worker domain:", r2WorkerDomain);
-        console.log("[HLS fetchSetup] Token available:", !!authToken);
-        const isR2 = isR2WorkerUrl(url, r2WorkerDomain);
-        console.log("[HLS fetchSetup] Is R2 Worker URL:", isR2);
-        if (isR2) {
-          if (authToken) {
-            initParams.headers = {
-              ...initParams.headers,
-              "Authorization": `Bearer ${authToken}`
-            };
-            console.log("[HLS Auth] \u2705 Injected JWT for R2 request:", url);
-          } else {
-            console.warn("[HLS Auth] \u26A0\uFE0F No token available for R2 request:", url);
-          }
-        } else {
-          console.log("[HLS Auth] CloudFront URL - no auth needed:", url);
+        if (isR2WorkerUrl(url, r2WorkerDomain) && authToken) {
+          initParams.headers = {
+            ...initParams.headers,
+            "Authorization": `Bearer ${authToken}`
+          };
         }
         return new Request(url, initParams);
       }
     };
     cleanupBlobUrl();
-    const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
+    const isHLS = effectiveSrc.endsWith(".m3u8") || effectiveSrc.startsWith("#EXTM3U");
     if (isHLS) {
-      if (src.startsWith("#EXTM3U")) {
+      if (effectiveSrc.startsWith("#EXTM3U")) {
         const safariMode = isSafari();
         const browserName = getBrowserName();
         if (safariMode) {
-          const clipIdMatch = src.match(/# Clip ID: ([a-f0-9-]+)/i);
+          const clipIdMatch = effectiveSrc.match(/# Clip ID: ([a-f0-9-]+)/i);
           if (clipIdMatch) {
             const proxyUrl = `/api/clips/playlist/${clipIdMatch[1]}`;
             console.log(`[HlsVideoPlayer] Safari detected (${browserName}) - using playlist proxy URL:`, proxyUrl);
             video.src = proxyUrl;
           } else {
             console.warn("[HlsVideoPlayer] Safari detected but no clip ID found in playlist, trying blob URL fallback");
-            const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
+            const blob = new Blob([effectiveSrc], { type: "application/vnd.apple.mpegurl" });
             const blobUrl = URL.createObjectURL(blob);
             blobUrlRef.current = blobUrl;
             video.src = blobUrl;
           }
         } else if (Hls3__default.default.isSupported()) {
-          const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
+          const blob = new Blob([effectiveSrc], { type: "application/vnd.apple.mpegurl" });
           const blobUrl = URL.createObjectURL(blob);
           blobUrlRef.current = blobUrl;
           console.log(`[HlsVideoPlayer] Non-Safari browser (${browserName}) - using HLS.js with blob URL`);
@@ -29352,24 +29441,16 @@ var HlsVideoPlayer = React24.forwardRef(({
           });
           hls.on(Hls3.Events.ERROR, (event, data) => {
             console.error("[HlsVideoPlayer] HLS.js error:", data);
+            if (maybeHandleR2Fallback(data)) {
+              return;
+            }
             if (data.fatal) {
               let errorInfo;
               switch (data.type) {
                 case Hls3.ErrorTypes.NETWORK_ERROR:
-                  if (data.response?.code === 401) {
-                    errorInfo = {
-                      code: 401,
-                      type: "recoverable",
-                      message: "Authentication expired. Please refresh the page.",
-                      canRetry: true,
-                      details: "JWT_EXPIRED"
-                    };
-                    console.error("[HLS Auth] 401 Unauthorized - token may be expired");
-                  } else {
-                    errorInfo = ERROR_MAPPING.networkError;
-                    console.log("[HlsVideoPlayer] Attempting to recover from network error");
-                    hls.startLoad();
-                  }
+                  errorInfo = ERROR_MAPPING.networkError;
+                  console.log("[HlsVideoPlayer] Attempting to recover from network error");
+                  hls.startLoad();
                   break;
                 case Hls3.ErrorTypes.MEDIA_ERROR:
                   errorInfo = ERROR_MAPPING.mediaError;
@@ -29410,23 +29491,15 @@ var HlsVideoPlayer = React24.forwardRef(({
           });
           hls.on(Hls3.Events.ERROR, (event, data) => {
             console.error("[HlsVideoPlayer] HLS.js error:", data);
+            if (maybeHandleR2Fallback(data)) {
+              return;
+            }
             if (data.fatal) {
               let errorInfo;
               switch (data.type) {
                 case Hls3.ErrorTypes.NETWORK_ERROR:
-                  if (data.response?.code === 401) {
-                    errorInfo = {
-                      code: 401,
-                      type: "recoverable",
-                      message: "Authentication expired. Please refresh the page.",
-                      canRetry: true,
-                      details: "JWT_EXPIRED"
-                    };
-                    console.error("[HLS Auth] 401 Unauthorized - token may be expired");
-                  } else {
-                    errorInfo = ERROR_MAPPING.networkError;
-                    hls.startLoad();
-                  }
+                  errorInfo = ERROR_MAPPING.networkError;
+                  hls.startLoad();
                   break;
                 case Hls3.ErrorTypes.MEDIA_ERROR:
                   errorInfo = ERROR_MAPPING.mediaError;
@@ -29440,14 +29513,14 @@ var HlsVideoPlayer = React24.forwardRef(({
               eventCallbacksRef.current.onError?.(player, errorInfo);
             }
           });
-          hls.loadSource(src);
+          hls.loadSource(effectiveSrc);
           hls.attachMedia(video);
         } else {
-          video.src = src;
+          video.src = effectiveSrc;
         }
       }
     } else {
-      video.src = src;
+      video.src = effectiveSrc;
     }
     const handleCanPlay = () => {
       if (!hlsRef.current) {
@@ -29523,6 +29596,11 @@ var HlsVideoPlayer = React24.forwardRef(({
       eventCallbacksRef.current.onSeeked?.(player);
     };
     const handleError = () => {
+      const currentSrc = video.currentSrc || video.src;
+      if (isSafari() && currentSrc.includes("/api/clips/playlist/") && !currentSrc.includes("source=s3") && !r2FallbackAttemptedRef.current) {
+        attemptS3Fallback("url", "native playback error", currentSrc);
+        return;
+      }
       const error = video.error;
       if (error) {
         const errorInfo = {
@@ -29571,10 +29649,14 @@ var HlsVideoPlayer = React24.forwardRef(({
       video.removeEventListener("ratechange", handlePlaybackRateChange2);
     };
   }, [
-    src,
+    effectiveSrc,
     cleanupBlobUrl,
     playerLikeObject,
-    configVersion
+    configVersion,
+    supabase,
+    attemptS3Fallback,
+    maybeHandleR2Fallback,
+    r2WorkerDomain
   ]);
   React24.useEffect(() => {
     let cleanup;
@@ -29590,7 +29672,7 @@ var HlsVideoPlayer = React24.forwardRef(({
       cleanupBlobUrl();
       setIsReady(false);
     };
-  }, [src, initializePlayer, cleanupBlobUrl]);
+  }, [effectiveSrc, initializePlayer, cleanupBlobUrl]);
   React24.useEffect(() => {
     if (videoRef.current) {
       if (autoplay) {
@@ -36420,7 +36502,16 @@ var STATIC_COLORS = {
   "Operator Idle": "#8b5cf6"
   // violet-500 - Low Priority/Behavioral
 };
+var PRODUCTIVE_COLOR = "#00AB45";
+var IDLE_COLOR = "#e5e7eb";
 var getColorForEntry = (name, index) => {
+  const normalized = name.trim().toLowerCase();
+  if (normalized === "productive" || normalized === "productive time") {
+    return PRODUCTIVE_COLOR;
+  }
+  if (normalized === "idle" || normalized === "idle time") {
+    return IDLE_COLOR;
+  }
   if (STATIC_COLORS[name]) {
     return STATIC_COLORS[name];
   }
@@ -36564,6 +36655,7 @@ var IdleTimeReasonChart = ({
     )
   ] });
 };
+var IdleTimeReasonChart_default = IdleTimeReasonChart;
 var DEFAULT_PERFORMANCE_DATA = {
   avg_efficiency: 0,
   underperforming_workspaces: 0,
@@ -37373,7 +37465,7 @@ var LinePdfGenerator = ({
       };
       const hourlyTimeRanges = lineInfo.metrics.shift_start ? getHourlyTimeRanges(lineInfo.metrics.shift_start, lineInfo.metrics.shift_end) : [];
       const shiftDuration = hourlyTimeRanges.length || 11;
-      const targetOutputPerHour = Math.round(lineInfo.metrics.line_threshold / shiftDuration);
+      const targetOutputPerHour = Math.round(lineInfo.metrics.threshold_pph ?? 0);
       let hourlyActualOutput = [];
       if (lineInfo.metrics.output_hourly && Object.keys(lineInfo.metrics.output_hourly).length > 0) {
         const [startHourStr, startMinuteStr] = (lineInfo.metrics.shift_start || "6:00").split(":");
@@ -41481,6 +41573,17 @@ var SideNavBar = React24.memo(({
     });
     onMobileMenuClose?.();
   }, [navigate, onMobileMenuClose]);
+  const handleImprovementClick = React24.useCallback(() => {
+    navigate("/improvement-center", {
+      trackingEvent: {
+        name: "Improvement Center Clicked",
+        properties: {
+          source: "side_nav"
+        }
+      }
+    });
+    onMobileMenuClose?.();
+  }, [navigate, onMobileMenuClose]);
   const handleTargetsClick = React24.useCallback(() => {
     navigate("/targets", {
       trackingEvent: {
@@ -41598,6 +41701,7 @@ var SideNavBar = React24.memo(({
   const homeButtonClasses = React24.useMemo(() => getButtonClasses("/"), [getButtonClasses, pathname]);
   const leaderboardButtonClasses = React24.useMemo(() => getButtonClasses("/leaderboard"), [getButtonClasses, pathname]);
   const kpisButtonClasses = React24.useMemo(() => getButtonClasses("/kpis"), [getButtonClasses, pathname]);
+  const improvementButtonClasses = React24.useMemo(() => getButtonClasses("/improvement-center"), [getButtonClasses, pathname]);
   const targetsButtonClasses = React24.useMemo(() => getButtonClasses("/targets"), [getButtonClasses, pathname]);
   const shiftsButtonClasses = React24.useMemo(() => getButtonClasses("/shifts"), [getButtonClasses, pathname]);
   const teamManagementButtonClasses = React24.useMemo(() => getButtonClasses("/team-management"), [getButtonClasses, pathname]);
@@ -41665,6 +41769,22 @@ var SideNavBar = React24.memo(({
             ]
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleImprovementClick,
+            className: improvementButtonClasses,
+            "aria-label": "Improvement Center",
+            tabIndex: 0,
+            role: "tab",
+            "aria-selected": pathname === "/improvement-center" || pathname.startsWith("/improvement-center/"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.LightBulbIcon, { className: "w-5 h-5 mb-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight text-center", children: "Improvement" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[8px] font-semibold text-orange-500 uppercase tracking-wide bg-orange-50 px-1.5 py-0.5 rounded", children: "Beta" })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -41865,6 +41985,19 @@ var SideNavBar = React24.memo(({
             ]
           }
         ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleMobileNavClick(handleImprovementClick),
+            className: getMobileButtonClass("/improvement-center"),
+            "aria-label": "Improvement Center",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(outline.LightBulbIcon, { className: getIconClass("/improvement-center") }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium", children: "Improvement" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-[10px] font-semibold text-orange-500 uppercase tracking-wide bg-orange-50 px-1.5 py-0.5 rounded", children: "Beta" })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -57679,135 +57812,258 @@ Please ensure:
 }
 var AuthenticatedTicketsView = withAuth(React24__namespace.default.memo(TicketsView));
 var TicketsView_default = TicketsView;
-var MOCK_RECOMMENDATIONS = [
-  {
-    id: "rec-1",
-    type: "cycle_time",
-    title: "Cycle Time Deviation Detected",
-    location: "Unit 1: Station 7",
-    line: "Line 1",
-    description: "Cycle time observed was 90s but the standard set was 180s. This indicates a potential process deviation or standard mismatch.",
-    evidence: {
-      type: "video",
-      label: "Operator Cycle Recording",
-      videoUrls: [
-        "/faa70d7a-d687-40c7-b01f-e04a3bb5a425_cam1_cycle_completion_20250708_091413_a54ee206.mp4",
-        "/faa70d7a-d687-40c7-b01f-e04a3bb5a425_cam1_cycle_completion_20250708_091413_a54ee206.mp4",
-        // Mock duplicate for demo
-        "/faa70d7a-d687-40c7-b01f-e04a3bb5a425_cam1_cycle_completion_20250708_091413_a54ee206.mp4"
-        // Mock duplicate for demo
-      ]
-    },
-    impact: "Potential 50% efficiency gain or standard adjustment needed.",
-    date: "Today",
-    timestamp: (/* @__PURE__ */ new Date()).toISOString()
-  },
-  {
-    id: "rec-2",
-    type: "efficiency",
-    title: "Consistent Low Efficiency Period",
-    location: "Line 2",
-    line: "Line 2",
-    description: "Efficiency from 7pm - 8pm is consistently lower than standard. This pattern has been observed for the last 3 days.",
-    evidence: {
-      type: "chart",
-      label: "7pm - 8pm Efficiency Trend",
-      chartData: [
-        { label: "7:00", value: 45, standard: 85 },
-        { label: "7:15", value: 42, standard: 85 },
-        { label: "7:30", value: 40, standard: 85 },
-        { label: "7:45", value: 48, standard: 85 },
-        { label: "8:00", value: 50, standard: 85 }
-      ]
-    },
-    impact: "Loss of approx. 40 units per hour during shift changeover.",
-    date: "Today",
-    timestamp: (/* @__PURE__ */ new Date()).toISOString()
-  },
-  {
-    id: "rec-3",
-    type: "downtime",
-    title: "Recurring Micro-stoppages",
-    location: "Unit 3: Conveyor",
-    line: "Line 1",
-    description: "Frequent micro-stoppages detected every 15 minutes. This suggests a potential jam or sensor issue.",
-    evidence: {
-      type: "chart",
-      label: "Downtime Events",
-      chartData: [
-        { label: "9:00", value: 2, standard: 0 },
-        { label: "9:15", value: 3, standard: 0 },
-        { label: "9:30", value: 1, standard: 0 },
-        { label: "9:45", value: 4, standard: 0 },
-        { label: "10:00", value: 2, standard: 0 }
-      ]
-    },
-    impact: "Cumulative downtime of 45 mins per shift.",
-    date: "Yesterday",
-    timestamp: new Date(Date.now() - 864e5).toISOString()
-  },
-  {
-    id: "rec-4",
-    type: "efficiency",
-    title: "High Idle Time Detected",
-    location: "Packaging Station",
-    line: "Line 2",
-    description: "Operator idle time exceeds 20% of shift duration. Consider rebalancing workload.",
-    evidence: {
-      type: "video",
-      label: "Idle Time Observation",
-      videoUrls: [
-        "/faa70d7a-d687-40c7-b01f-e04a3bb5a425_cam1_cycle_completion_20250708_091413_a54ee206.mp4"
-      ]
-    },
-    impact: "Potential to reassign 1 FTE to other tasks.",
-    date: "Yesterday",
-    timestamp: new Date(Date.now() - 864e5).toISOString()
-  },
-  {
-    id: "rec-5",
-    type: "cycle_time",
-    title: "Slow Setup Time",
-    location: "Machine 5",
-    line: "Line 1",
-    description: "Setup time for product changeover took 45 mins, standard is 20 mins.",
-    evidence: {
-      type: "chart",
-      label: "Changeover Duration",
-      chartData: [
-        { label: "Prev 1", value: 25, standard: 20 },
-        { label: "Prev 2", value: 22, standard: 20 },
-        { label: "Current", value: 45, standard: 20 },
-        { label: "Avg", value: 30, standard: 20 },
-        { label: "Target", value: 20, standard: 20 }
-      ]
-    },
-    impact: "25 mins of lost production time.",
-    date: "2 Days Ago",
-    timestamp: new Date(Date.now() - 1728e5).toISOString()
+
+// src/lib/api/s3-clips-parser.ts
+function parseS3Uri(s3Uri, sopCategories) {
+  const path = new URL(s3Uri).pathname;
+  const parts = path.split("/").filter((p) => p);
+  if (s3Uri.includes("missed_qchecks")) {
+    console.warn(`Skipping missed_qchecks URI in parseS3Uri: ${s3Uri}`);
+    return null;
   }
+  if (parts.length < 8) {
+    console.warn(`Invalid S3 path structure: ${s3Uri} - Too few parts: ${parts.length}, expected at least 8`);
+    return null;
+  }
+  try {
+    const datePart = parts[2];
+    const shiftPart = parts[3];
+    const violationType = parts[4];
+    let folderName = "";
+    let timestamp = "";
+    for (let i = 5; i < parts.length; i++) {
+      const part = parts[i];
+      if (part && part.includes("_") && /\d{8}_\d{6}/.test(part)) {
+        folderName = part;
+        const timeMatch = folderName.match(/_(\d{8})_(\d{6})_/);
+        if (timeMatch) {
+          timestamp = `${timeMatch[2].substring(0, 2)}:${timeMatch[2].substring(2, 4)}:${timeMatch[2].substring(4, 6)}`;
+          break;
+        }
+      }
+    }
+    if (!timestamp) {
+      console.warn(`Couldn't extract timestamp from any part: ${parts.join("/")}`);
+      timestamp = "00:00:00";
+    }
+    let severity = "low";
+    let type = "bottleneck";
+    let description = "Analysis Clip";
+    const normalizedViolationType = violationType.toLowerCase().trim();
+    if (sopCategories && sopCategories.length > 0) {
+      const matchedCategory = sopCategories.find((category) => {
+        const categoryId = category.id.toLowerCase();
+        const s3FolderName = (category.s3FolderName || category.id).toLowerCase();
+        return categoryId === normalizedViolationType || s3FolderName === normalizedViolationType || // Also check for partial matches for flexibility
+        normalizedViolationType.includes(categoryId) || normalizedViolationType.includes(s3FolderName);
+      });
+      if (matchedCategory) {
+        type = matchedCategory.id;
+        description = matchedCategory.description || matchedCategory.label;
+        if (matchedCategory.color.includes("red")) {
+          severity = "high";
+        } else if (matchedCategory.color.includes("yellow") || matchedCategory.color.includes("orange")) {
+          severity = "medium";
+        } else {
+          severity = "low";
+        }
+        console.log(`Matched SOP category: ${matchedCategory.id} for violation type: ${violationType}`);
+        return { timestamp, severity, description, type, originalUri: s3Uri };
+      }
+    }
+    switch (normalizedViolationType) {
+      case "idle_time":
+      case "idle":
+      case "low_value":
+      case "low value":
+      case "low_value_moment":
+      case "low_value_moments":
+      case "low value moment":
+      case "low value moments":
+        type = "low_value";
+        severity = "low";
+        description = "Idle Time Detected";
+        break;
+      case "sop_deviation":
+        type = "missing_quality_check";
+        severity = "high";
+        description = "SOP Deviations";
+        break;
+      case "long_cycle_time":
+        severity = "high";
+        type = "long_cycle_time";
+        description = "Long Cycle Time Detected";
+        break;
+      case "best_cycle_time":
+        type = "best_cycle_time";
+        severity = "low";
+        description = "Best Cycle Time Performance";
+        break;
+      case "worst_cycle_time":
+        type = "worst_cycle_time";
+        severity = "high";
+        description = "Worst Cycle Time Performance";
+        break;
+      case "cycle_completion":
+      case "completed_cycles":
+      case "completed_cycle":
+        type = "cycle_completion";
+        severity = "low";
+        description = "Cycle Completion";
+        break;
+      case "running_cycle":
+      case "active_cycle":
+      case "production_cycle":
+        type = "running_cycle";
+        severity = "low";
+        description = "Active Production Cycle";
+        break;
+      case "setup_state":
+      case "machine_setup":
+      case "line_setup":
+        type = "setup_state";
+        severity = "medium";
+        description = "Machine Setup Activity";
+        break;
+      case "medium_bottleneck":
+        severity = "medium";
+        description = "Medium Bottleneck Identified";
+        break;
+      case "minor_bottleneck":
+      case "mild_bottleneck":
+        severity = "low";
+        description = "Minor Bottleneck Identified";
+        break;
+      default:
+        if (normalizedViolationType.includes("sop") && normalizedViolationType.includes("deviation")) {
+          type = "missing_quality_check";
+          severity = "high";
+          description = "SOP Deviations";
+        } else if (normalizedViolationType.includes("worst") && normalizedViolationType.includes("cycle")) {
+          type = "worst_cycle_time";
+          severity = "high";
+          description = "Worst Cycle Time Performance";
+        } else if (normalizedViolationType.includes("best") && normalizedViolationType.includes("cycle")) {
+          type = "best_cycle_time";
+          severity = "low";
+          description = "Best Cycle Time Performance";
+        } else if (normalizedViolationType.includes("long") && normalizedViolationType.includes("cycle")) {
+          type = "long_cycle_time";
+          severity = "high";
+          description = "Long Cycle Time Detected";
+        } else if (normalizedViolationType.includes("cycle") && (normalizedViolationType.includes("completion") || normalizedViolationType.includes("complete"))) {
+          type = "cycle_completion";
+          severity = "low";
+          description = "Cycle Completion";
+        } else if (normalizedViolationType.includes("running") && normalizedViolationType.includes("cycle")) {
+          type = "running_cycle";
+          severity = "low";
+          description = "Active Production Cycle";
+        } else if (normalizedViolationType.includes("setup") || normalizedViolationType.includes("machine") && normalizedViolationType.includes("setup")) {
+          type = "setup_state";
+          severity = "medium";
+          description = "Machine Setup Activity";
+        } else {
+          description = `Clip type: ${violationType.replace(/_/g, " ")}`;
+          console.log(`Detected unknown violation type: ${violationType} in URI: ${s3Uri}`);
+        }
+        break;
+    }
+    return { timestamp, severity, description, type, originalUri: s3Uri };
+  } catch (error) {
+    console.error(`Error parsing S3 URI: ${s3Uri}`, error);
+    return null;
+  }
+}
+function shuffleArray(array) {
+  const shuffled = [...array];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  return shuffled;
+}
+var CATEGORY_OPTIONS = [
+  { id: "all", label: "All" },
+  { id: "cycle_time", label: "Cycle Time" },
+  { id: "efficiency", label: "Efficiency" },
+  { id: "downtime", label: "Downtime" }
 ];
-var VideoCarousel = ({ urls }) => {
+var ClipVideoCarousel = ({ clips, clipsService }) => {
   const [currentIndex, setCurrentIndex] = React24.useState(0);
+  const [videos, setVideos] = React24.useState([]);
+  const [loading, setLoading] = React24.useState(false);
+  const [error, setError] = React24.useState(null);
+  React24.useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      if (!clipsService) {
+        setError("Clips are not configured for this dashboard");
+        return;
+      }
+      if (!clips || clips.length === 0) return;
+      setLoading(true);
+      setError(null);
+      setVideos([]);
+      try {
+        const resolved = await Promise.all(
+          clips.map(async (c) => {
+            const video = await clipsService.getClipById(c.clip_id);
+            if (!video) return null;
+            const cycleTime = typeof c.cycle_time_seconds === "number" ? c.cycle_time_seconds : typeof c.cycle_sec === "number" ? c.cycle_sec : void 0;
+            return {
+              ...video,
+              cycle_time_seconds: cycleTime ?? video.cycle_time_seconds
+            };
+          })
+        );
+        if (cancelled) return;
+        setVideos(resolved.filter(Boolean) || []);
+      } catch (err) {
+        if (cancelled) return;
+        setError(err?.message || "Failed to load clips");
+        setVideos([]);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    };
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [clipsService, clips]);
+  React24.useEffect(() => {
+    if (videos.length > 0 && currentIndex >= videos.length) {
+      setCurrentIndex(0);
+    }
+  }, [videos.length, currentIndex]);
   const nextVideo = () => {
-    setCurrentIndex((prev) => (prev + 1) % urls.length);
+    setCurrentIndex((prev) => (prev + 1) % Math.max(videos.length, 1));
   };
   const prevVideo = () => {
-    setCurrentIndex((prev) => (prev - 1 + urls.length) % urls.length);
+    setCurrentIndex((prev) => (prev - 1 + Math.max(videos.length, 1)) % Math.max(videos.length, 1));
   };
-  if (!urls || urls.length === 0) return null;
+  if (!clips || clips.length === 0) return null;
+  const currentVideo = videos[currentIndex];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group bg-gray-900 rounded-lg overflow-hidden aspect-video", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "video",
+    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-white/80", children: "Loading clips\u2026" }),
+    !loading && error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-white/80", children: error }),
+    !loading && !error && currentVideo?.src && /* @__PURE__ */ jsxRuntime.jsx(
+      VideoPlayer,
       {
-        src: urls[currentIndex],
-        className: "w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity",
-        controls: true
+        src: currentVideo.src,
+        className: "w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity",
+        controls: true,
+        playsInline: true
       },
-      urls[currentIndex]
+      currentVideo.src
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none group-hover:opacity-0 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsx(outline.PlayCircleIcon, { className: "w-16 h-16 text-white opacity-80" }) }),
-    urls.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !loading && !error && typeof currentVideo?.cycle_time_seconds === "number" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-3 left-3 bg-black/60 text-white text-xs px-2 py-1 rounded-full font-medium pointer-events-none", children: [
+      currentVideo.cycle_time_seconds.toFixed(1),
+      "s"
+    ] }),
+    !loading && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none group-hover:opacity-0 transition-opacity", children: /* @__PURE__ */ jsxRuntime.jsx(outline.PlayCircleIcon, { className: "w-16 h-16 text-white opacity-80" }) }),
+    videos.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -57835,70 +58091,273 @@ var VideoCarousel = ({ urls }) => {
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-3 right-3 bg-black/60 text-white text-xs px-2 py-1 rounded-full font-medium pointer-events-none", children: [
         currentIndex + 1,
         " / ",
-        urls.length
+        videos.length
       ] })
     ] })
   ] });
 };
-var EvidenceChart = ({ data }) => {
-  const chartData = data.map((point) => ({
-    name: point.label,
-    value: point.value,
-    standard: point.standard
-  }));
+var BarChartEvidence = ({ x, y, unit, data, series, referenceLines }) => {
+  const scale2 = unit === "fraction" ? 100 : 1;
+  const yAxisUnit = unit === "fraction" ? "%" : "";
+  const targetLineIndex = referenceLines?.findIndex(
+    (line) => (line.label || "").toLowerCase().includes("target")
+  ) ?? -1;
+  const resolvedTargetLineIndex = targetLineIndex >= 0 ? targetLineIndex : referenceLines?.length === 1 ? 0 : -1;
+  const unitLabel = unit === "fraction" ? "%" : unit === "pieces" ? "PPH" : unit === "ratio" ? "" : unit || "";
+  const formatTargetValue = (value) => {
+    if (unit === "fraction") return value.toFixed(0);
+    if (Number.isInteger(value)) return value.toString();
+    return value.toFixed(1);
+  };
+  const formatTargetLabel = (label, value) => {
+    const base = label || "Target";
+    const suffix = unitLabel ? unitLabel === "%" ? "%" : ` ${unitLabel}` : "";
+    return `${base}: ${formatTargetValue(value)}${suffix}`;
+  };
+  const isMultiSeries = Array.isArray(series) && series.length > 0 && Array.isArray(data);
+  const chartData = isMultiSeries ? (data || []).map((row) => {
+    const scaled = { ...row };
+    series?.forEach((s) => {
+      const raw = row[s.dataKey];
+      if (typeof raw === "number") {
+        scaled[s.dataKey] = raw * scale2;
+      }
+    });
+    return scaled;
+  }) : (x || []).map((xv, idx) => {
+    const yv = y?.[idx];
+    if (yv === null || yv === void 0) return null;
+    const label = typeof xv === "number" ? `${xv.toString().padStart(2, "0")}:00` : String(xv);
+    return { name: label, value: yv * scale2 };
+  }).filter(Boolean);
+  const referenceLineConfigs = (referenceLines || []).map((line, idx) => {
+    const scaledValue = line.y * scale2;
+    const isTarget = idx === resolvedTargetLineIndex;
+    return {
+      ...line,
+      y: scaledValue,
+      label: isTarget ? formatTargetLabel(line.label, scaledValue) : line.label,
+      stroke: isTarget ? "#E34329" : line.stroke,
+      strokeDasharray: isTarget ? "5 5" : line.strokeDasharray,
+      strokeWidth: isTarget ? 2 : line.strokeWidth
+    };
+  });
+  const targetLine = resolvedTargetLineIndex >= 0 ? (referenceLines || [])[resolvedTargetLineIndex] : void 0;
+  const targetValue = targetLine ? targetLine.y * scale2 : null;
+  const targetLabel = targetLine && targetValue !== null ? formatTargetLabel(targetLine.label, targetValue) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-48 w-full bg-white border border-gray-100 rounded-lg p-2 relative", children: [
+    targetLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 right-2 z-10 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-md border border-gray-200 bg-white/90 px-2 py-1 text-[11px] text-gray-700 shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block w-6 border-t-2 border-dashed", style: { borderColor: "#E34329" } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: targetLabel })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BarChart,
+      {
+        data: chartData,
+        bars: isMultiSeries ? (series || []).map((s) => ({
+          dataKey: s.dataKey,
+          name: s.name,
+          fill: s.fill,
+          stackId: s.stackId,
+          labelList: false
+        })) : [
+          {
+            dataKey: "value",
+            name: "Value",
+            fill: "#f87171",
+            // red-400
+            labelList: false
+          }
+        ],
+        xAxisDataKey: "name",
+        showLegend: isMultiSeries && (series || []).length > 1,
+        showGrid: true,
+        aspect: 2.5,
+        yAxisUnit,
+        referenceLines: referenceLineConfigs,
+        className: "h-full"
+      }
+    )
+  ] });
+};
+var PieChartEvidence = ({ data }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 w-full bg-white border border-gray-100 rounded-lg p-2", children: /* @__PURE__ */ jsxRuntime.jsx(IdleTimeReasonChart_default, { data }) });
+};
+var LineChartEvidence = ({ x, y, unit }) => {
+  const scale2 = unit === "fraction" ? 100 : 1;
+  const yAxisUnit = unit === "fraction" ? "%" : "";
+  const chartData = x.map((xv, idx) => {
+    const yv = y[idx];
+    if (yv === null || yv === void 0) return null;
+    return { name: String(xv), value: yv * scale2 };
+  }).filter(Boolean);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-48 w-full bg-white border border-gray-100 rounded-lg p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-    BarChart,
+    LineChart,
     {
       data: chartData,
-      bars: [
+      lines: [
         {
           dataKey: "value",
-          name: "Actual",
-          fill: "#f87171",
-          // red-400
-          labelList: true
+          name: "Value",
+          stroke: "#f87171",
+          strokeWidth: 2,
+          dot: true
         }
       ],
       xAxisDataKey: "name",
       showLegend: false,
       showGrid: true,
       aspect: 2.5,
+      yAxisUnit,
       className: "h-full"
     }
   ) });
 };
+var TableEvidence = ({ columns, rows }) => {
+  const formatValue = (value) => {
+    if (typeof value === "number") {
+      if (Number.isInteger(value)) return value.toString();
+      return value.toFixed(3);
+    }
+    if (value === null || value === void 0) return "-";
+    return String(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-white border border-gray-100 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full text-xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
+      {
+        className: "px-3 py-2 text-left font-semibold text-gray-600 uppercase tracking-wide",
+        children: col.replace(/_/g, " ")
+      },
+      col
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, idx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-gray-100 last:border-b-0", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-gray-700 whitespace-nowrap", children: formatValue(row[col]) }, col)) }, idx)) })
+  ] }) }) });
+};
 var ImprovementCenterView = () => {
   const { navigate } = useNavigation();
-  const [selectedDate, setSelectedDate] = React24.useState("");
-  const [selectedLine, setSelectedLine] = React24.useState("");
-  const dateInputRef = React24.useRef(null);
-  const uniqueLines = React24.useMemo(() => {
-    const lines = new Set(MOCK_RECOMMENDATIONS.map((r2) => r2.line));
-    return Array.from(lines);
-  }, []);
-  const filteredRecommendations = React24.useMemo(() => {
-    return MOCK_RECOMMENDATIONS.filter((rec) => {
-      if (selectedDate) {
-        const recDate = new Date(rec.timestamp).toISOString().split("T")[0];
-        if (recDate !== selectedDate) return false;
-      }
-      if (selectedLine && rec.line !== selectedLine) {
-        return false;
+  const supabase = useSupabase();
+  const { user } = useAuth();
+  const dashboardConfig = useDashboardConfig();
+  const entityConfig = useEntityConfig();
+  const [currentDate, setCurrentDate] = React24.useState(/* @__PURE__ */ new Date());
+  const [selectedCategory, setSelectedCategory] = React24.useState("all");
+  const [selectedLineId, setSelectedLineId] = React24.useState("all");
+  const [selectedStatus, setSelectedStatus] = React24.useState("all");
+  const [recommendations, setRecommendations] = React24.useState([]);
+  const [isLoading, setIsLoading] = React24.useState(false);
+  const [loadError, setLoadError] = React24.useState(null);
+  const computeWeeksOpen = (firstSeenAt) => {
+    if (!firstSeenAt) return void 0;
+    const firstSeen = new Date(firstSeenAt);
+    if (Number.isNaN(firstSeen.getTime())) return void 0;
+    const now2 = /* @__PURE__ */ new Date();
+    const diffDays = Math.max(0, Math.floor((now2.getTime() - firstSeen.getTime()) / (1e3 * 60 * 60 * 24)));
+    return Math.max(1, Math.ceil(diffDays / 7));
+  };
+  const configuredLines = React24.useMemo(() => {
+    return entityConfig.lines || entityConfig.lineNames || {};
+  }, [entityConfig.lines, entityConfig.lineNames]);
+  const configuredLineIds = React24.useMemo(() => Object.keys(configuredLines), [configuredLines]);
+  const { accessibleLineIds } = useUserLineAccess(configuredLineIds);
+  const scopeLineIds = React24.useMemo(() => {
+    return accessibleLineIds.length > 0 ? accessibleLineIds : configuredLineIds;
+  }, [accessibleLineIds, configuredLineIds]);
+  const scopeLineIdsKey = React24.useMemo(() => scopeLineIds.join(","), [scopeLineIds]);
+  const companyId = user?.company_id || entityConfig.companyId;
+  const clipsService = React24.useMemo(() => {
+    try {
+      return new S3ClipsSupabaseService(dashboardConfig);
+    } catch (err) {
+      return null;
+    }
+  }, [dashboardConfig]);
+  const nextMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
+  };
+  const prevMonth = () => {
+    setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
+  };
+  const formatMonth = (date) => {
+    return date.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+  };
+  React24.useEffect(() => {
+    let cancelled = false;
+    const fetchRecommendations = async () => {
+      if (!supabase || !companyId) return;
+      setIsLoading(true);
+      setLoadError(null);
+      try {
+        if (scopeLineIds.length === 0) {
+          setRecommendations([]);
+          return;
+        }
+        const params = new URLSearchParams({
+          company_id: companyId,
+          status: "all",
+          limit: "500"
+        });
+        params.set("month", `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, "0")}`);
+        if (scopeLineIds.length > 0) {
+          params.set("line_ids", scopeLineIds.join(","));
+        }
+        const res = await fetchBackendJson(supabase, `/api/improvement-center/recommendations?${params.toString()}`);
+        if (cancelled) return;
+        let recs = res.recommendations || [];
+        recs = recs.map((r2) => ({
+          ...r2,
+          ticket_status: r2.issue_status === "resolved" ? "solved" : "active",
+          weeks_open: typeof r2.weeks_open === "number" ? r2.weeks_open : computeWeeksOpen(r2.first_seen_at) ?? 1
+        }));
+        const allowed = new Set(scopeLineIds);
+        setRecommendations(recs.filter((r2) => !r2.line_id || allowed.has(r2.line_id)));
+      } catch (err) {
+        if (cancelled) return;
+        setLoadError(err?.message || "Failed to load recommendations");
+        setRecommendations([]);
+      } finally {
+        if (!cancelled) setIsLoading(false);
       }
+    };
+    fetchRecommendations();
+    return () => {
+      cancelled = true;
+    };
+  }, [supabase, companyId, scopeLineIdsKey, currentDate]);
+  const filteredRecommendations = React24.useMemo(() => {
+    return recommendations.filter((rec) => {
+      if (selectedCategory !== "all" && rec.type !== selectedCategory) return false;
+      if (selectedLineId !== "all" && rec.line_id !== selectedLineId) return false;
+      if (selectedStatus === "resolved" && rec.ticket_status !== "solved") return false;
+      if (selectedStatus === "unresolved" && rec.ticket_status === "solved") return false;
       return true;
-    });
-  }, [selectedDate, selectedLine]);
-  const handleDateClick = () => {
-    dateInputRef.current?.showPicker?.();
-  };
+    }).sort((a, b) => (b.weeks_open || 0) - (a.weeks_open || 0));
+  }, [recommendations, selectedCategory, selectedLineId, selectedStatus]);
+  const stats = React24.useMemo(() => {
+    const total = recommendations.length;
+    const resolved = recommendations.filter((r2) => r2.ticket_status === "solved").length;
+    return {
+      all: total,
+      resolved,
+      unresolved: total - resolved
+    };
+  }, [recommendations]);
   const clearFilters = () => {
-    setSelectedDate("");
-    setSelectedLine("");
-  };
-  const hasActiveFilters = selectedDate || selectedLine;
+    setSelectedCategory("all");
+    setSelectedLineId("all");
+    setSelectedStatus("all");
+  };
+  const lineOptions = React24.useMemo(() => {
+    const options = [{ id: "all", label: "All Lines" }];
+    scopeLineIds.forEach((lineId) => {
+      const lineName = configuredLines[lineId] || lineId;
+      options.push({ id: lineId, label: lineName });
+    });
+    return options;
+  }, [scopeLineIds, configuredLines]);
   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("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx(
         BackButtonMinimal,
         {
           onClick: () => navigate("/"),
@@ -57906,121 +58365,190 @@ var ImprovementCenterView = () => {
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-2xl lg:text-3xl font-semibold text-gray-900 text-center flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(outline.LightBulbIcon, { className: "w-7 h-7 text-amber-500" }),
-          "Improvement Center"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1 text-center px-4", children: "Daily AI-driven recommendations to optimize your line performance" })
+        /* @__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: "w-20" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[120px]" })
     ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 px-4 sm:px-6 lg:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto flex items-center justify-end gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+    /* @__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(
-          "input",
-          {
-            ref: dateInputRef,
-            type: "date",
-            value: selectedDate,
-            onChange: (e) => setSelectedDate(e.target.value),
-            className: "sr-only"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
-            onClick: handleDateClick,
-            className: `flex items-center gap-2 px-3 py-1.5 text-sm border rounded-lg transition-colors whitespace-nowrap ${selectedDate ? "bg-blue-50 border-blue-200 text-blue-700" : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50"}`,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(outline.CalendarIcon, { className: "w-4 h-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedDate || "All Dates" })
-            ]
+            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.jsxs(
-        "select",
-        {
-          value: selectedLine,
-          onChange: (e) => setSelectedLine(e.target.value),
-          className: `px-3 py-1.5 text-sm border rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer ${selectedLine ? "bg-blue-50 border-blue-200 text-blue-700" : "border-gray-300 text-gray-700"}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All Lines" }),
-            uniqueLines.map((line) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: line, children: line }, line))
-          ]
-        }
-      ),
-      hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: clearFilters,
-          className: "p-1.5 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100 transition-colors",
-          title: "Clear filters",
-          children: /* @__PURE__ */ jsxRuntime.jsx(outline.XMarkIcon, { className: "w-5 h-5" })
-        }
-      )
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-4 sm:p-6 max-w-7xl mx-auto w-full", children: /* @__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 border-gray-200 overflow-hidden",
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6", 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", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${rec.type === "cycle_time" ? "bg-blue-100 text-blue-800" : rec.type === "efficiency" ? "bg-orange-100 text-orange-800" : "bg-gray-100 text-gray-800"}`, children: rec.type.replace("_", " ").toUpperCase() }),
-                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 mt-2", children: rec.title }),
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium text-gray-500", children: [
-                  rec.location,
-                  " \u2022 ",
-                  rec.line,
-                  " \u2022 ",
-                  rec.date
-                ] })
-              ] }) }),
-              /* @__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.jsxs("div", { className: "w-full md:w-1/2 lg:w-5/12 bg-gray-50 rounded-lg p-4 border border-gray-100", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2", children: [
-                  rec.evidence.type === "video" ? /* @__PURE__ */ jsxRuntime.jsx(outline.PlayCircleIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, { className: "w-4 h-4" }),
-                  "Evidence: ",
-                  rec.evidence.label
-                ] }),
-                rec.evidence.type === "video" && rec.evidence.videoUrls && rec.evidence.videoUrls.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-medium text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded", children: [
-                  rec.evidence.videoUrls.length,
-                  " clips"
-                ] })
-              ] }),
-              rec.evidence.type === "video" && rec.evidence.videoUrls && /* @__PURE__ */ jsxRuntime.jsx(VideoCarousel, { urls: rec.evidence.videoUrls }),
-              rec.evidence.type === "chart" && rec.evidence.chartData && /* @__PURE__ */ jsxRuntime.jsx(EvidenceChart, { data: rec.evidence.chartData })
-            ] })
-          ] }) })
-        },
-        rec.id
-      )) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16 bg-white rounded-xl border border-dashed border-gray-300", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(outline.FunnelIcon, { className: "w-6 h-6 text-gray-400" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-gray-900", children: "No recommendations found" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Try adjusting your filters to see more results." }),
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold text-gray-900 min-w-[160px] text-center", children: formatMonth(currentDate) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: clearFilters,
-            className: "mt-4 text-sm text-blue-600 hover:text-blue-800 font-medium",
-            children: "Clear all filters"
+            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
+              ]
+            }
+          ),
+          /* @__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 items-center gap-3 w-full md:w-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              value: selectedCategory,
+              onChange: (e) => setSelectedCategory(e.target.value),
+              className: "w-full md:w-auto 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: CATEGORY_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.id, children: opt.label }, opt.id))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              value: selectedLineId,
+              onChange: (e) => setSelectedLineId(e.target.value),
+              className: "w-full md:w-auto 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))
+            }
+          )
+        ] })
       ] }),
-      filteredRecommendations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-10", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-400 text-sm", children: "More recommendations will appear here as we analyze more data." }) })
-    ] }) })
+      /* @__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", 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 items-center gap-3", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${rec.type === "cycle_time" ? "bg-blue-100 text-blue-800" : rec.type === "efficiency" ? "bg-orange-100 text-orange-800" : "bg-gray-100 text-gray-800"}`, children: rec.type.replace("_", " ").toUpperCase() }),
+                    (rec.shift_label || rec.shift_id !== void 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700", children: rec.shift_label || `Shift ${rec.shift_id}` }),
+                    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-green-100 text-green-800", 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-200" : "bg-amber-50 text-amber-700 border-amber-200"}`, 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" : ""
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: rec.title }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium text-gray-500 mt-1", children: [
+                      rec.location,
+                      " \u2022 ",
+                      rec.line
+                    ] })
+                  ] })
+                ] }) }),
+                /* @__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("div", { className: "space-y-4", children: rec.evidence.map((ev, idx) => {
+                const isVideo = ev.type === "video_gallery";
+                const isChart = ev.type === "bar_chart" || ev.type === "timeseries" || ev.type === "pie_chart";
+                const title = ev.title || "Evidence";
+                const clips = Array.isArray(ev.clips) ? ev.clips : [];
+                const clipCount = clips.length;
+                return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2", children: [
+                      isVideo ? /* @__PURE__ */ jsxRuntime.jsx(outline.PlayCircleIcon, { className: "w-4 h-4" }) : isChart ? /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, { className: "w-4 h-4" }),
+                      title
+                    ] }),
+                    isVideo && clipCount > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-medium text-gray-500 bg-gray-100 px-1.5 py-0.5 rounded", children: [
+                      clipCount,
+                      " clips"
+                    ] })
+                  ] }),
+                  ev.type === "video_gallery" && /* @__PURE__ */ jsxRuntime.jsx(ClipVideoCarousel, { clips, clipsService }),
+                  ev.type === "bar_chart" && (Array.isArray(ev.x) && Array.isArray(ev.y) || Array.isArray(ev.data) && Array.isArray(ev.series)) && /* @__PURE__ */ jsxRuntime.jsx(
+                    BarChartEvidence,
+                    {
+                      x: ev.x,
+                      y: ev.y,
+                      data: ev.data,
+                      series: ev.series,
+                      unit: ev.unit,
+                      referenceLines: Array.isArray(ev.reference_lines) ? ev.reference_lines : void 0
+                    }
+                  ),
+                  ev.type === "pie_chart" && Array.isArray(ev.data) && /* @__PURE__ */ jsxRuntime.jsx(PieChartEvidence, { data: ev.data }),
+                  ev.type === "timeseries" && Array.isArray(ev.x) && Array.isArray(ev.y) && /* @__PURE__ */ jsxRuntime.jsx(LineChartEvidence, { x: ev.x, y: ev.y, unit: ev.unit }),
+                  ev.type === "table" && Array.isArray(ev.columns) && Array.isArray(ev.rows) && /* @__PURE__ */ jsxRuntime.jsx(TableEvidence, { columns: ev.columns, rows: ev.rows })
+                ] }, `${rec.id}-ev-${idx}`);
+              }) }) : /* @__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" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "No tickets found" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-500 max-w-md mx-auto", children: selectedCategory !== "all" || selectedLineId !== "all" || selectedStatus !== "all" ? "Try adjusting your filters to see more results." : "All monitored long-term patterns were evaluated and remained within limits. This is a success state!" }),
+            (selectedCategory !== "all" || selectedLineId !== "all" || selectedStatus !== "all") && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: clearFilters,
+                className: "mt-6 text-sm text-blue-600 hover:text-blue-800 font-medium bg-blue-50 px-4 py-2 rounded-lg hover:bg-blue-100 transition-colors",
+                children: "Clear filters"
+              }
+            )
+          ] })
+        ),
+        filteredRecommendations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-10", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-400 text-sm", children: "More recommendations will appear here as we analyze more data." }) })
+      ] })
+    ] })
   ] });
 };
 var ImprovementCenterView_default = ImprovementCenterView;
@@ -58479,177 +59007,6 @@ var streamProxyConfig = {
   }
 };
 
-// src/lib/api/s3-clips-parser.ts
-function parseS3Uri(s3Uri, sopCategories) {
-  const path = new URL(s3Uri).pathname;
-  const parts = path.split("/").filter((p) => p);
-  if (s3Uri.includes("missed_qchecks")) {
-    console.warn(`Skipping missed_qchecks URI in parseS3Uri: ${s3Uri}`);
-    return null;
-  }
-  if (parts.length < 8) {
-    console.warn(`Invalid S3 path structure: ${s3Uri} - Too few parts: ${parts.length}, expected at least 8`);
-    return null;
-  }
-  try {
-    const datePart = parts[2];
-    const shiftPart = parts[3];
-    const violationType = parts[4];
-    let folderName = "";
-    let timestamp = "";
-    for (let i = 5; i < parts.length; i++) {
-      const part = parts[i];
-      if (part && part.includes("_") && /\d{8}_\d{6}/.test(part)) {
-        folderName = part;
-        const timeMatch = folderName.match(/_(\d{8})_(\d{6})_/);
-        if (timeMatch) {
-          timestamp = `${timeMatch[2].substring(0, 2)}:${timeMatch[2].substring(2, 4)}:${timeMatch[2].substring(4, 6)}`;
-          break;
-        }
-      }
-    }
-    if (!timestamp) {
-      console.warn(`Couldn't extract timestamp from any part: ${parts.join("/")}`);
-      timestamp = "00:00:00";
-    }
-    let severity = "low";
-    let type = "bottleneck";
-    let description = "Analysis Clip";
-    const normalizedViolationType = violationType.toLowerCase().trim();
-    if (sopCategories && sopCategories.length > 0) {
-      const matchedCategory = sopCategories.find((category) => {
-        const categoryId = category.id.toLowerCase();
-        const s3FolderName = (category.s3FolderName || category.id).toLowerCase();
-        return categoryId === normalizedViolationType || s3FolderName === normalizedViolationType || // Also check for partial matches for flexibility
-        normalizedViolationType.includes(categoryId) || normalizedViolationType.includes(s3FolderName);
-      });
-      if (matchedCategory) {
-        type = matchedCategory.id;
-        description = matchedCategory.description || matchedCategory.label;
-        if (matchedCategory.color.includes("red")) {
-          severity = "high";
-        } else if (matchedCategory.color.includes("yellow") || matchedCategory.color.includes("orange")) {
-          severity = "medium";
-        } else {
-          severity = "low";
-        }
-        console.log(`Matched SOP category: ${matchedCategory.id} for violation type: ${violationType}`);
-        return { timestamp, severity, description, type, originalUri: s3Uri };
-      }
-    }
-    switch (normalizedViolationType) {
-      case "idle_time":
-      case "idle":
-      case "low_value":
-      case "low value":
-      case "low_value_moment":
-      case "low_value_moments":
-      case "low value moment":
-      case "low value moments":
-        type = "low_value";
-        severity = "low";
-        description = "Idle Time Detected";
-        break;
-      case "sop_deviation":
-        type = "missing_quality_check";
-        severity = "high";
-        description = "SOP Deviations";
-        break;
-      case "long_cycle_time":
-        severity = "high";
-        type = "long_cycle_time";
-        description = "Long Cycle Time Detected";
-        break;
-      case "best_cycle_time":
-        type = "best_cycle_time";
-        severity = "low";
-        description = "Best Cycle Time Performance";
-        break;
-      case "worst_cycle_time":
-        type = "worst_cycle_time";
-        severity = "high";
-        description = "Worst Cycle Time Performance";
-        break;
-      case "cycle_completion":
-      case "completed_cycles":
-      case "completed_cycle":
-        type = "cycle_completion";
-        severity = "low";
-        description = "Cycle Completion";
-        break;
-      case "running_cycle":
-      case "active_cycle":
-      case "production_cycle":
-        type = "running_cycle";
-        severity = "low";
-        description = "Active Production Cycle";
-        break;
-      case "setup_state":
-      case "machine_setup":
-      case "line_setup":
-        type = "setup_state";
-        severity = "medium";
-        description = "Machine Setup Activity";
-        break;
-      case "medium_bottleneck":
-        severity = "medium";
-        description = "Medium Bottleneck Identified";
-        break;
-      case "minor_bottleneck":
-      case "mild_bottleneck":
-        severity = "low";
-        description = "Minor Bottleneck Identified";
-        break;
-      default:
-        if (normalizedViolationType.includes("sop") && normalizedViolationType.includes("deviation")) {
-          type = "missing_quality_check";
-          severity = "high";
-          description = "SOP Deviations";
-        } else if (normalizedViolationType.includes("worst") && normalizedViolationType.includes("cycle")) {
-          type = "worst_cycle_time";
-          severity = "high";
-          description = "Worst Cycle Time Performance";
-        } else if (normalizedViolationType.includes("best") && normalizedViolationType.includes("cycle")) {
-          type = "best_cycle_time";
-          severity = "low";
-          description = "Best Cycle Time Performance";
-        } else if (normalizedViolationType.includes("long") && normalizedViolationType.includes("cycle")) {
-          type = "long_cycle_time";
-          severity = "high";
-          description = "Long Cycle Time Detected";
-        } else if (normalizedViolationType.includes("cycle") && (normalizedViolationType.includes("completion") || normalizedViolationType.includes("complete"))) {
-          type = "cycle_completion";
-          severity = "low";
-          description = "Cycle Completion";
-        } else if (normalizedViolationType.includes("running") && normalizedViolationType.includes("cycle")) {
-          type = "running_cycle";
-          severity = "low";
-          description = "Active Production Cycle";
-        } else if (normalizedViolationType.includes("setup") || normalizedViolationType.includes("machine") && normalizedViolationType.includes("setup")) {
-          type = "setup_state";
-          severity = "medium";
-          description = "Machine Setup Activity";
-        } else {
-          description = `Clip type: ${violationType.replace(/_/g, " ")}`;
-          console.log(`Detected unknown violation type: ${violationType} in URI: ${s3Uri}`);
-        }
-        break;
-    }
-    return { timestamp, severity, description, type, originalUri: s3Uri };
-  } catch (error) {
-    console.error(`Error parsing S3 URI: ${s3Uri}`, error);
-    return null;
-  }
-}
-function shuffleArray(array) {
-  const shuffled = [...array];
-  for (let i = shuffled.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
-  }
-  return shuffled;
-}
-
 exports.ACTION_NAMES = ACTION_NAMES;
 exports.AIAgentView = AIAgentView_default;
 exports.AcceptInvite = AcceptInvite;