@optifye/dashboard-core 6.10.50 → 6.10.51

package/dist/index.mjs

@@ -1029,6 +1029,44 @@ var fetchBackendJson = async (supabase, endpoint, options = {}) => {
   }
 };
 
+// src/lib/services/lineMetricsSelection.ts
+var toTimestamp = (value) => {
+  if (typeof value !== "string") return 0;
+  const parsed = Date.parse(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+};
+var compareByLatestThenSku = (a, b) => {
+  const timeDiff = toTimestamp(b.last_updated) - toTimestamp(a.last_updated);
+  if (timeDiff !== 0) return timeDiff;
+  const aSku = typeof a.sku_id === "string" ? a.sku_id : "";
+  const bSku = typeof b.sku_id === "string" ? b.sku_id : "";
+  return aSku.localeCompare(bSku);
+};
+var pickPreferredLineMetricsRow = async (supabase, lineId, rows, skuTable = "skus") => {
+  if (!rows || rows.length === 0) {
+    return null;
+  }
+  if (rows.length === 1) {
+    return rows[0];
+  }
+  let dummySkuId = null;
+  try {
+    const { data } = await supabase.from(skuTable).select("id").eq("line_id", lineId).eq("sku_definition", "dummy_definition").eq("is_active", true).limit(1);
+    if (Array.isArray(data) && data.length > 0) {
+      dummySkuId = typeof data[0]?.id === "string" ? data[0].id : null;
+    }
+  } catch (error) {
+    console.warn("[lineMetricsSelection] Failed dummy SKU lookup:", error);
+  }
+  if (dummySkuId) {
+    const dummyRow = rows.find((row) => row.sku_id === dummySkuId);
+    if (dummyRow) {
+      return dummyRow;
+    }
+  }
+  return rows.slice().sort(compareByLatestThenSku)[0] ?? null;
+};
+
 // src/lib/services/dashboardService.ts
 var getTable = (dbConfig, tableName) => {
   const defaults2 = DEFAULT_DATABASE_CONFIG.tables;
@@ -1047,6 +1085,7 @@ var dashboardService = {
     const workspaceConfig = config.workspaceConfig ?? DEFAULT_WORKSPACE_CONFIG;
     const linesTable = getTable(dbConfig, "lines");
     const lineMetricsTable = getTable(dbConfig, "lineMetrics");
+    const skuTable = dbConfig?.tables?.skus ?? "skus";
     const companyId = entityConfig.companyId;
     const metricsTablePrefixStr = getMetricsTablePrefix();
     `${metricsTablePrefixStr}_${companyId ? companyId.replace(/-/g, "_") : "unknown_company"}`;
@@ -1140,9 +1179,14 @@ var dashboardService = {
     if (!lineData) throw new Error(`Line with ID ${lineId} not found`);
     let metricsFromDb = null;
     try {
-      const { data: fetchedMetrics, error } = await supabase.from(lineMetricsTable).select("*").eq("line_id", lineId).eq("shift_id", shiftId).eq("date", date).maybeSingle();
+      const { data: fetchedMetricsRows, error } = await supabase.from(lineMetricsTable).select("*").eq("line_id", lineId).eq("shift_id", shiftId).eq("date", date);
       if (error) throw error;
-      metricsFromDb = fetchedMetrics;
+      metricsFromDb = await pickPreferredLineMetricsRow(
+        supabase,
+        lineId,
+        fetchedMetricsRows,
+        skuTable
+      );
     } catch (err) {
       console.error(`Error fetching line metrics for ${lineId}:`, err);
     }
@@ -1553,6 +1597,7 @@ var dashboardService = {
     const workspaceConfig = config.workspaceConfig ?? DEFAULT_WORKSPACE_CONFIG;
     const linesTable = getTable(dbConfig, "lines");
     const lineMetricsTable = getTable(dbConfig, "lineMetrics");
+    const skuTable = dbConfig?.tables?.skus ?? "skus";
     const companyId = entityConfig.companyId;
     const metricsTablePrefixStr = getMetricsTablePrefix();
     `${metricsTablePrefixStr}_${companyId ? companyId.replace(/-/g, "_") : "unknown_company"}`;
@@ -1651,7 +1696,7 @@ var dashboardService = {
       }
       const [lineResult, metricsResult] = await Promise.all([
         supabase.from(linesTable).select("id, line_name, factory_id, monitoring_mode, factories!lines_factory_id_fkey(factory_name), company_id, companies!lines_company_id_fkey(company_name:name)").eq("id", lineIdToQuery).single(),
-        supabase.from(lineMetricsTable).select("*").eq("line_id", lineIdToQuery).eq("shift_id", queryShiftId).eq("date", queryDate).maybeSingle()
+        supabase.from(lineMetricsTable).select("*").eq("line_id", lineIdToQuery).eq("shift_id", queryShiftId).eq("date", queryDate)
       ]);
       if (lineResult.error) throw lineResult.error;
       if (!lineResult.data) {
@@ -1659,7 +1704,12 @@ var dashboardService = {
       }
       if (metricsResult.error) throw metricsResult.error;
       const lineData = lineResult.data;
-      const metrics2 = metricsResult.data;
+      const metrics2 = await pickPreferredLineMetricsRow(
+        supabase,
+        lineIdToQuery,
+        metricsResult.data,
+        skuTable
+      );
       return {
         line_id: lineData.id,
         line_name: lineData.line_name,
@@ -17330,6 +17380,7 @@ function useCompanyClipsCost() {
   const [data, setData] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const hasFetchedOnceRef = useRef(false);
   const canViewClipsCost = user?.role_level === "owner" || user?.role_level === "optifye";
   const companyId = user?.properties?.company_id || user?.company_id || entityConfig.companyId;
   const apiBaseUrl = config?.apiBaseUrl || process.env.NEXT_PUBLIC_API_BASE_URL || "";
@@ -17337,9 +17388,12 @@ function useCompanyClipsCost() {
     if (!canViewClipsCost || !companyId || !supabase || !apiBaseUrl || !session?.access_token) {
       setIsLoading(false);
       setData(null);
+      hasFetchedOnceRef.current = false;
       return;
     }
-    setIsLoading(true);
+    if (!hasFetchedOnceRef.current) {
+      setIsLoading(true);
+    }
     setError(null);
     try {
       const [statsResponse, linesResult] = await Promise.all([
@@ -17356,9 +17410,18 @@ function useCompanyClipsCost() {
       }
       const statsResult = await statsResponse.json();
       const totalClassifications = statsResult.total_classifications || 0;
+      const monthlyClassifications = statsResult.monthly_classifications ?? totalClassifications;
+      const monthStart = statsResult.month_start || null;
+      const historicalMonthlyClassifications = Array.isArray(statsResult.historical_monthly_classifications) ? statsResult.historical_monthly_classifications.map((item) => ({
+        monthStart: item?.month_start || "",
+        classifications: Number(item?.classifications || 0)
+      })).filter((item) => item.monthStart && item.classifications > 0) : [];
       const hasVlmEnabledLine = (linesResult.data?.length || 0) > 0;
       setData({
         totalClassifications,
+        monthlyClassifications,
+        monthStart,
+        historicalMonthlyClassifications,
         hasVlmEnabledLine
       });
     } catch (err) {
@@ -17366,6 +17429,7 @@ function useCompanyClipsCost() {
       setError(err instanceof Error ? err.message : "Failed to load clips data");
       setData(null);
     } finally {
+      hasFetchedOnceRef.current = true;
       setIsLoading(false);
     }
   }, [canViewClipsCost, companyId, supabase, apiBaseUrl, session?.access_token]);
@@ -36736,6 +36800,7 @@ var FileManagerFilters = ({
   const endInputRef = useRef(null);
   const [idleLabelFilter, setIdleLabelFilter] = useState(null);
   const [showIdleLabelFilterModal, setShowIdleLabelFilterModal] = useState(false);
+  const [isLoadingIdleReasonOptions, setIsLoadingIdleReasonOptions] = useState(false);
   const timezone = useAppTimezone();
   const supabase = useSupabase();
   const [clipMetadata, setClipMetadata] = useState({});
@@ -36778,18 +36843,27 @@ var FileManagerFilters = ({
       iconColor: colorConfig.text
     };
   };
-  const ROOT_CAUSE_OPTIONS = [
-    "Operator Absent",
-    "Operator Idle",
-    "Machine Downtime",
-    "No Material"
-  ];
+  const normalizeIdleReasonLabel = useCallback((label) => {
+    return label.replace(/_/g, " ").trim();
+  }, []);
   const getIdleTimeRootCause = useCallback((clipId) => {
     const classification = mergedClipClassifications[clipId];
     if (!classification) return "processing";
     if (classification.status === "processing") return "processing";
     return classification.label || "processing";
   }, [mergedClipClassifications]);
+  const idleReasonOptions = useMemo(() => {
+    const idleClips = clipMetadata["idle_time"] || [];
+    const uniqueReasons = /* @__PURE__ */ new Set();
+    idleClips.forEach((clip) => {
+      const clipId = clip.clipId || clip.id;
+      if (!clipId) return;
+      const reason = getIdleTimeRootCause(clipId);
+      if (!reason || reason === "processing") return;
+      uniqueReasons.add(normalizeIdleReasonLabel(reason));
+    });
+    return Array.from(uniqueReasons).sort((a, b) => a.localeCompare(b));
+  }, [clipMetadata, getIdleTimeRootCause, normalizeIdleReasonLabel]);
   const getClipBadge = useCallback((node) => {
     if (node.categoryId === "idle_time" || node.categoryId === "low_value") {
       return { text: "Idle", className: "bg-red-100 text-red-700" };
@@ -36817,6 +36891,79 @@ var FileManagerFilters = ({
       return null;
     }
   }, [supabase]);
+  const fetchClipMetadataPage = useCallback(async (categoryId, page = 1) => {
+    if (!workspaceId || !date || shift === void 0) {
+      throw new Error("Missing required params for clip metadata fetch");
+    }
+    const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        action: "clip-metadata",
+        workspaceId,
+        date,
+        shift: shift.toString(),
+        category: categoryId,
+        page,
+        limit: 50,
+        snapshotDateTime,
+        snapshotClipId
+      }),
+      redirectReason: "session_expired"
+    });
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    return response.json();
+  }, [workspaceId, date, shift, snapshotDateTime, snapshotClipId, supabase]);
+  const seedIdleClassifications = useCallback(async (clips) => {
+    if (!idleTimeVlmEnabled || clips.length === 0) {
+      return;
+    }
+    const authToken = await getAuthToken3();
+    if (!authToken) {
+      return;
+    }
+    const seededClassifications = {};
+    clips.forEach((clip) => {
+      if (!clip.clipId) {
+        return;
+      }
+      if (clip.classification_status) {
+        seededClassifications[clip.clipId] = {
+          status: clip.classification_status,
+          label: clip.classification_label || void 0,
+          confidence: clip.classification_confidence ?? void 0
+        };
+      }
+    });
+    if (Object.keys(seededClassifications).length > 0) {
+      setLocalClipClassifications((prev) => ({
+        ...prev,
+        ...seededClassifications
+      }));
+    }
+    const clipIdsToFetch = clips.map((clip) => clip.clipId || clip.id).filter(Boolean).filter((id3) => {
+      if (!id3) return false;
+      if (mergedClipClassifications[id3]?.status === "classified") return false;
+      if (seededClassifications[id3]?.status === "classified") return false;
+      return true;
+    });
+    if (clipIdsToFetch.length === 0) {
+      return;
+    }
+    try {
+      const classifications = await fetchClassifications(clipIdsToFetch, authToken);
+      setLocalClipClassifications((prev) => ({
+        ...prev,
+        ...classifications
+      }));
+    } catch (error) {
+      console.error("[FileManager] Error fetching idle classifications:", error);
+    }
+  }, [idleTimeVlmEnabled, getAuthToken3, mergedClipClassifications]);
   const fetchClipMetadata = useCallback(async (categoryId, page = 1) => {
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for clip metadata fetch");
@@ -36825,69 +36972,13 @@ var FileManagerFilters = ({
     const loadingKey = `${categoryId}-${page}`;
     setLoadingCategories((prev) => /* @__PURE__ */ new Set([...prev, loadingKey]));
     try {
-      const response = await fetchWithSupabaseAuth(supabase, "/api/clips/supabase", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          action: "clip-metadata",
-          workspaceId,
-          date,
-          shift: shift.toString(),
-          category: categoryId,
-          page,
-          limit: 50,
-          snapshotDateTime,
-          snapshotClipId
-        }),
-        redirectReason: "session_expired"
-      });
-      if (!response.ok) {
-        throw new Error(`API error: ${response.status}`);
-      }
-      const data = await response.json();
+      const data = await fetchClipMetadataPage(categoryId, page);
       setClipMetadata((prev) => ({
         ...prev,
         [categoryId]: page === 1 ? data.clips : [...prev[categoryId] || [], ...data.clips]
       }));
-      const authToken = categoryId === "idle_time" && idleTimeVlmEnabled ? await getAuthToken3() : null;
-      if (categoryId === "idle_time" && idleTimeVlmEnabled && authToken) {
-        const seededClassifications = {};
-        (data.clips || []).forEach((clip) => {
-          if (!clip.clipId) {
-            return;
-          }
-          if (clip.classification_status) {
-            seededClassifications[clip.clipId] = {
-              status: clip.classification_status,
-              label: clip.classification_label || void 0,
-              confidence: clip.classification_confidence ?? void 0
-            };
-          }
-        });
-        if (Object.keys(seededClassifications).length > 0) {
-          setLocalClipClassifications((prev) => ({
-            ...prev,
-            ...seededClassifications
-          }));
-        }
-        const clipIds = (data.clips || []).map((clip) => clip.clipId || clip.id).filter(Boolean);
-        const newClipIds = clipIds.filter((id3) => {
-          if (mergedClipClassifications[id3]?.status === "classified") return false;
-          if (seededClassifications[id3]?.status === "classified") return false;
-          return true;
-        });
-        if (newClipIds.length > 0) {
-          fetchClassifications(newClipIds, authToken).then((classifications) => {
-            setLocalClipClassifications((prev) => ({
-              ...prev,
-              ...classifications
-            }));
-          }).catch((error) => {
-            console.error("[FileManager] Error fetching idle classifications:", error);
-          });
-        }
+      if (categoryId === "idle_time" && idleTimeVlmEnabled) {
+        await seedIdleClassifications(data.clips || []);
       }
       setCategoryPages((prev) => ({ ...prev, [categoryId]: page }));
       setCategoryHasMore((prev) => ({ ...prev, [categoryId]: data.hasMore }));
@@ -36901,7 +36992,64 @@ var FileManagerFilters = ({
         return newSet;
       });
     }
-  }, [workspaceId, date, shift, mergedClipClassifications, snapshotDateTime, snapshotClipId, supabase, getAuthToken3, idleTimeVlmEnabled]);
+  }, [workspaceId, date, shift, fetchClipMetadataPage, idleTimeVlmEnabled, seedIdleClassifications]);
+  const ensureAllIdleTimeClipMetadataLoaded = useCallback(async () => {
+    if (!workspaceId || !date || shift === void 0) {
+      return;
+    }
+    let accumulatedClips = [...clipMetadata["idle_time"] || []];
+    let currentPage = categoryPages["idle_time"] || 0;
+    let hasMore = categoryHasMore["idle_time"];
+    if (currentPage === 0) {
+      const firstPageData = await fetchClipMetadataPage("idle_time", 1);
+      accumulatedClips = firstPageData.clips || [];
+      currentPage = 1;
+      hasMore = firstPageData.hasMore;
+    } else if (hasMore === void 0) {
+      hasMore = false;
+    }
+    while (hasMore) {
+      const nextPage = currentPage + 1;
+      const nextPageData = await fetchClipMetadataPage("idle_time", nextPage);
+      accumulatedClips = [...accumulatedClips, ...nextPageData.clips || []];
+      currentPage = nextPage;
+      hasMore = nextPageData.hasMore;
+    }
+    const dedupedClips = accumulatedClips.filter((clip, index, arr) => {
+      const clipKey = clip.clipId || clip.id;
+      return arr.findIndex((item) => (item.clipId || item.id) === clipKey) === index;
+    });
+    setClipMetadata((prev) => ({
+      ...prev,
+      idle_time: dedupedClips
+    }));
+    setCategoryPages((prev) => ({ ...prev, idle_time: currentPage }));
+    setCategoryHasMore((prev) => ({ ...prev, idle_time: false }));
+    if (idleTimeVlmEnabled) {
+      await seedIdleClassifications(dedupedClips);
+    }
+  }, [
+    workspaceId,
+    date,
+    shift,
+    clipMetadata,
+    categoryPages,
+    categoryHasMore,
+    fetchClipMetadataPage,
+    idleTimeVlmEnabled,
+    seedIdleClassifications
+  ]);
+  const handleOpenIdleLabelFilterModal = useCallback(async () => {
+    setShowIdleLabelFilterModal(true);
+    setIsLoadingIdleReasonOptions(true);
+    try {
+      await ensureAllIdleTimeClipMetadataLoaded();
+    } catch (error) {
+      console.error("[FileManager] Error loading idle reason options:", error);
+    } finally {
+      setIsLoadingIdleReasonOptions(false);
+    }
+  }, [ensureAllIdleTimeClipMetadataLoaded]);
   const fetchPercentileClips = useCallback(async (type) => {
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for percentile clips fetch");
@@ -37572,7 +37720,7 @@ var FileManagerFilters = ({
           activeFilter === "idle_time" && idleTimeVlmEnabled && /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => setShowIdleLabelFilterModal(true),
+              onClick: handleOpenIdleLabelFilterModal,
               className: `p-2 rounded-xl transition-all duration-200 ${idleLabelFilter ? "bg-purple-100 text-purple-600 hover:bg-purple-200 shadow-sm" : "bg-slate-100 text-slate-600 hover:bg-slate-200"}`,
               title: "Filter by idle reason",
               children: /* @__PURE__ */ jsx(Tag, { className: "h-5 w-5" })
@@ -37660,7 +37808,10 @@ var FileManagerFilters = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "p-2 max-h-60 overflow-y-auto", children: ROOT_CAUSE_OPTIONS.map((reason) => {
+            /* @__PURE__ */ jsx("div", { className: "p-2 max-h-60 overflow-y-auto", children: isLoadingIdleReasonOptions ? /* @__PURE__ */ jsxs("div", { className: "px-3 py-4 text-sm text-slate-500 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+              "Loading idle reasons..."
+            ] }) : idleReasonOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-sm text-slate-500", children: "No classified idle reasons found yet." }) : idleReasonOptions.map((reason) => {
               const config = getRootCauseConfig(reason);
               return /* @__PURE__ */ jsxs(
                 "button",
@@ -49225,7 +49376,7 @@ var SideNavBar = memo$1(({
     if (hasClipsCostData) {
       items.push({
         key: "clips-analysis",
-        label: "Clips Analysis",
+        label: "Billing",
         icon: CurrencyDollarIcon,
         onClick: () => {
           handleClipsCostClick();
@@ -61508,25 +61659,39 @@ var ProfileView = () => {
 var ProfileView_default = ProfileView;
 var REFRESH_INTERVAL_MS = 30 * 1e3;
 var ClipsCostView = () => {
-  const { data, isLoading, hasData, error, refetch } = useCompanyClipsCost();
+  const { data, isLoading, error, refetch } = useCompanyClipsCost();
   const navigation = useNavigation();
+  const refetchRef = useRef(refetch);
+  useEffect(() => {
+    refetchRef.current = refetch;
+  }, [refetch]);
   useEffect(() => {
     const intervalId = setInterval(() => {
-      refetch();
+      void refetchRef.current();
     }, REFRESH_INTERVAL_MS);
     return () => clearInterval(intervalId);
-  }, [refetch]);
+  }, []);
   const mobileMenuContext = useMobileMenu();
   useHideMobileHeader(!!mobileMenuContext);
   const formatNumber = (num) => {
     return new Intl.NumberFormat("en-US").format(num);
   };
+  const formatMonthLabel = (monthStart) => {
+    if (!monthStart) {
+      return "Current Month";
+    }
+    const parsed = /* @__PURE__ */ new Date(`${monthStart}T00:00:00`);
+    if (Number.isNaN(parsed.getTime())) {
+      return "Current Month";
+    }
+    return new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" }).format(parsed);
+  };
   if (isLoading) {
-    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg" }) });
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen bg-gray-50", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading usage data..." }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
-    /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "sm:hidden flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b border-gray-200 shadow-sm flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-6 lg:px-8 py-3 sm:py-4 w-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx("div", { className: "flex items-center", children: mobileMenuContext && /* @__PURE__ */ jsx(
           HamburgerButton,
           {
@@ -61534,46 +61699,57 @@ var ClipsCostView = () => {
             className: "flex-shrink-0 -ml-1"
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Clips Analysis" }) }),
-        /* @__PURE__ */ jsx("div", { className: "w-8" }),
-        " "
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Billing" }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: "Track your usage based features spend" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "w-9" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 min-w-[120px]", children: /* @__PURE__ */ jsx(
           BackButtonMinimal,
           {
             onClick: () => navigation.goToDashboard(),
             text: "Back",
             size: "default",
-            className: "bg-transparent border-transparent hover:bg-gray-100 pl-0"
+            "aria-label": "Navigate back to dashboard"
           }
         ) }),
-        /* @__PURE__ */ jsx("h1", { className: "absolute left-1/2 -translate-x-1/2 text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Clips Analysis" }),
-        /* @__PURE__ */ jsx("div", { className: "w-10" }),
-        " "
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Billing" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1 text-center", children: "Track your usage based features spend" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-[120px]" })
       ] }) })
     ] }) }),
-    /* @__PURE__ */ jsxs("main", { className: "flex-1 p-4 sm:p-6 lg:p-8 max-w-2xl mx-auto w-full", children: [
-      error && /* @__PURE__ */ jsx("div", { className: "mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700", children: error }),
-      !hasData && !isLoading ? /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center", children: [
-        /* @__PURE__ */ jsx(Film, { className: "h-12 w-12 text-gray-300 mx-auto mb-4" }),
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-2", children: "No Data Available" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Clip analysis data will appear here once clips have been analyzed." })
-      ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: [
-        /* @__PURE__ */ jsx("div", { className: "p-6 border-b border-gray-100", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "p-2 bg-blue-50 rounded-lg", children: /* @__PURE__ */ jsx(Film, { className: "h-5 w-5 text-blue-600" }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Clips Analysis" }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "AI-powered clip classification usage" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "text-center py-4", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-500 mb-2", children: "Total Clips Analyzed" }),
-          /* @__PURE__ */ jsx("p", { className: "text-4xl font-bold text-gray-900", children: formatNumber(data?.totalClassifications || 0) }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: "clips processed through AI classification" })
-        ] }) })
+    /* @__PURE__ */ jsx("main", { className: "flex-1 p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto w-full", children: error ? /* @__PURE__ */ jsxs("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3 text-red-700 animate-in fade-in slide-in-from-top-2 max-w-2xl mx-auto", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 flex-shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium", children: "Error loading usage data" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm mt-1 text-red-600", children: error })
       ] })
-    ] })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "max-w-xl mt-8 animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
+      /* @__PURE__ */ jsx(Card2, { className: "overflow-hidden shadow-sm border-gray-200 bg-white", children: /* @__PURE__ */ jsx(CardContent2, { className: "p-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "p-3 bg-blue-50 rounded-full mb-4", children: /* @__PURE__ */ jsx(Film, { className: "h-8 w-8 text-blue-600" }) }),
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Clips Analyzed" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mb-3", children: formatMonthLabel(data?.monthStart) }),
+        /* @__PURE__ */ jsx("div", { className: "text-5xl font-bold text-gray-900 mb-2 tabular-nums tracking-tight", children: formatNumber(data?.monthlyClassifications || 0) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(Card2, { className: "mt-4 overflow-hidden shadow-sm border-gray-200 bg-white", children: /* @__PURE__ */ jsxs(CardContent2, { className: "p-6", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3 uppercase tracking-wider", children: "Previous Months" }),
+        (data?.historicalMonthlyClassifications?.length || 0) === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "No historical month usage yet." }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: data?.historicalMonthlyClassifications.map((item) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between rounded-md border border-gray-100 bg-gray-50 px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: formatMonthLabel(item.monthStart) }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-900 tabular-nums", children: formatNumber(item.classifications) })
+            ]
+          },
+          item.monthStart
+        )) })
+      ] }) })
+    ] }) })
   ] });
 };
 var ClipsCostView_default = ClipsCostView;
@@ -64855,6 +65031,7 @@ var WorkspaceDetailView = ({
   }, [monthlyData, range]);
   const formattedWorkspaceName = displayName || formatWorkspaceName3(workspace?.workspace_name || "", effectiveLineId);
   const shouldShowCycleTimeChart = !isUptimeMode && (showCycleTimeChart ?? formattedWorkspaceName.startsWith("FINAL ASSY"));
+  const showIdleBreakdownChart = !shouldShowCycleTimeChart && idleTimeVlmEnabled;
   const idleClipDate = date || workspace?.date || calculatedOperationalDate || getOperationalDate(timezone);
   const idleClipShiftId = parsedShiftId ?? workspace?.shift_id;
   const shiftDurationMinutes = useMemo(
@@ -65458,107 +65635,123 @@ var WorkspaceDetailView = ({
               ] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full lg:min-h-0 gap-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: clsx("grid grid-cols-1 lg:grid-cols-10 gap-3 min-h-0", desktopTopSectionClass), children: [
-                !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxs(
-                  motion.div,
-                  {
-                    className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
-                    variants: chartCardVariants,
-                    initial: "initial",
-                    animate: "animate",
-                    children: [
-                      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
-                      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsx(
-                        OutputProgressChart,
-                        {
-                          currentOutput: workspace.total_actions || 0,
-                          targetOutput: workspace.target_output || 0
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  motion.div,
-                  {
-                    className: `bg-white rounded-lg shadow-sm p-4 flex flex-col min-h-0 ${shouldShowCycleTimeChart || isUptimeMode ? "lg:col-span-10" : idleTimeVlmEnabled ? "lg:col-span-6" : "lg:col-span-8"}`,
-                    variants: chartCardVariants,
-                    initial: "initial",
-                    animate: "animate",
-                    children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
-                        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }),
-                        !isUptimeMode && /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            onClick: () => setShowChartIdleTime(!showChartIdleTime),
-                            className: `inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${showChartIdleTime ? "bg-blue-50 text-blue-700 border border-blue-200" : "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"}`,
-                            children: showChartIdleTime ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                              /* @__PURE__ */ jsx(EyeOff, { className: "w-4 h-4 mr-1.5" }),
-                              "Hide Idle Time"
-                            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                              /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4 mr-1.5" }),
-                              "Show Idle Time"
-                            ] })
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: isUptimeMode ? /* @__PURE__ */ jsx(
-                        HourlyUptimeChart,
-                        {
-                          idleTimeHourly: workspace.idle_time_hourly,
-                          shiftStart: workspace.shift_start,
-                          shiftEnd: workspace.shift_end,
-                          shiftDate: idleClipDate,
-                          timezone,
-                          elapsedMinutes: elapsedShiftMinutes
-                        }
-                      ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
-                        CycleTimeOverTimeChart,
-                        {
-                          data: workspace.hourly_action_counts || [],
-                          idealCycleTime: workspace.ideal_cycle_time || 0,
-                          shiftStart: workspace.shift_start || ""
-                        }
-                      ) : /* @__PURE__ */ jsx(
-                        HourlyOutputChart2,
-                        {
-                          data: workspace.hourly_action_counts || [],
-                          pphThreshold: workspace.pph_threshold || 0,
-                          shiftStart: workspace.shift_start || "06:00",
-                          shiftEnd: workspace.shift_end,
-                          showIdleTime: showChartIdleTime,
-                          idleTimeHourly: workspace.idle_time_hourly,
-                          idleTimeClips,
-                          idleTimeClipClassifications,
-                          shiftDate: idleClipDate,
-                          timezone
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                !shouldShowCycleTimeChart && idleTimeVlmEnabled && /* @__PURE__ */ jsxs(
-                  motion.div,
-                  {
-                    className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
-                    variants: chartCardVariants,
-                    initial: "initial",
-                    animate: "animate",
-                    children: [
-                      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Idle Time Breakdown" }),
-                      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsx(
-                        IdleTimeReasonChart,
-                        {
-                          data: idleTimeData.chartData,
-                          isLoading: idleTimeData.isLoading,
-                          error: idleTimeData.error
-                        }
-                      ) })
-                    ]
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx(
+                    "grid grid-cols-1 gap-3 min-h-0",
+                    isUptimeMode && showIdleBreakdownChart ? "lg:grid-cols-3" : "lg:grid-cols-10",
+                    desktopTopSectionClass
+                  ),
+                  children: [
+                    !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxs(
+                      motion.div,
+                      {
+                        className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
+                        variants: chartCardVariants,
+                        initial: "initial",
+                        animate: "animate",
+                        children: [
+                          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
+                          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsx(
+                            OutputProgressChart,
+                            {
+                              currentOutput: workspace.total_actions || 0,
+                              targetOutput: workspace.target_output || 0
+                            }
+                          ) })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      motion.div,
+                      {
+                        className: clsx(
+                          "bg-white rounded-lg shadow-sm p-4 flex flex-col min-h-0",
+                          isUptimeMode && showIdleBreakdownChart ? "lg:col-span-2" : shouldShowCycleTimeChart || isUptimeMode ? "lg:col-span-10" : idleTimeVlmEnabled ? "lg:col-span-6" : "lg:col-span-8"
+                        ),
+                        variants: chartCardVariants,
+                        initial: "initial",
+                        animate: "animate",
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
+                            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }),
+                            !isUptimeMode && /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: () => setShowChartIdleTime(!showChartIdleTime),
+                                className: `inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${showChartIdleTime ? "bg-blue-50 text-blue-700 border border-blue-200" : "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"}`,
+                                children: showChartIdleTime ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                  /* @__PURE__ */ jsx(EyeOff, { className: "w-4 h-4 mr-1.5" }),
+                                  "Hide Idle Time"
+                                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                                  /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4 mr-1.5" }),
+                                  "Show Idle Time"
+                                ] })
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: isUptimeMode ? /* @__PURE__ */ jsx(
+                            HourlyUptimeChart,
+                            {
+                              idleTimeHourly: workspace.idle_time_hourly,
+                              shiftStart: workspace.shift_start,
+                              shiftEnd: workspace.shift_end,
+                              shiftDate: idleClipDate,
+                              timezone,
+                              elapsedMinutes: elapsedShiftMinutes
+                            }
+                          ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
+                            CycleTimeOverTimeChart,
+                            {
+                              data: workspace.hourly_action_counts || [],
+                              idealCycleTime: workspace.ideal_cycle_time || 0,
+                              shiftStart: workspace.shift_start || ""
+                            }
+                          ) : /* @__PURE__ */ jsx(
+                            HourlyOutputChart2,
+                            {
+                              data: workspace.hourly_action_counts || [],
+                              pphThreshold: workspace.pph_threshold || 0,
+                              shiftStart: workspace.shift_start || "06:00",
+                              shiftEnd: workspace.shift_end,
+                              showIdleTime: showChartIdleTime,
+                              idleTimeHourly: workspace.idle_time_hourly,
+                              idleTimeClips,
+                              idleTimeClipClassifications,
+                              shiftDate: idleClipDate,
+                              timezone
+                            }
+                          ) })
+                        ]
+                      }
+                    ),
+                    !shouldShowCycleTimeChart && idleTimeVlmEnabled && /* @__PURE__ */ jsxs(
+                      motion.div,
+                      {
+                        className: clsx(
+                          "bg-white rounded-lg shadow-sm p-4 flex flex-col min-h-0",
+                          isUptimeMode ? "lg:col-span-1" : "lg:col-span-2"
+                        ),
+                        variants: chartCardVariants,
+                        initial: "initial",
+                        animate: "animate",
+                        children: [
+                          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Idle Time Breakdown" }),
+                          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsx(
+                            IdleTimeReasonChart,
+                            {
+                              data: idleTimeData.chartData,
+                              isLoading: idleTimeData.isLoading,
+                              error: idleTimeData.error
+                            }
+                          ) })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
               isUptimeMode ? /* @__PURE__ */ jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsx(UptimeMetricCards, { workspace, uptimePieData, className: "flex-1" }) }) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxs("div", { className: clsx("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 min-h-0", desktopBottomSectionClass), children: [
                 /* @__PURE__ */ jsxs(Card2, { children: [
                   /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),