@optifye/dashboard-core 6.10.49 → 6.10.51

package/dist/index.js

@@ -1058,6 +1058,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;
@@ -1076,6 +1114,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"}`;
@@ -1169,9 +1208,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);
     }
@@ -1582,6 +1626,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"}`;
@@ -1680,7 +1725,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) {
@@ -1688,7 +1733,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,
@@ -17351,6 +17401,79 @@ function useCompanyUsersUsage(companyId, options = {}) {
     refetchToday: fetchTodayUsage
   };
 }
+function useCompanyClipsCost() {
+  const { user, session } = useAuth();
+  const supabase = useSupabase();
+  const config = useDashboardConfig();
+  const entityConfig = useEntityConfig();
+  const [data, setData] = React26.useState(null);
+  const [isLoading, setIsLoading] = React26.useState(true);
+  const [error, setError] = React26.useState(null);
+  const hasFetchedOnceRef = React26.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 || "";
+  const fetchData = React26.useCallback(async () => {
+    if (!canViewClipsCost || !companyId || !supabase || !apiBaseUrl || !session?.access_token) {
+      setIsLoading(false);
+      setData(null);
+      hasFetchedOnceRef.current = false;
+      return;
+    }
+    if (!hasFetchedOnceRef.current) {
+      setIsLoading(true);
+    }
+    setError(null);
+    try {
+      const [statsResponse, linesResult] = await Promise.all([
+        fetch(`${apiBaseUrl}/api/classification/company-stats?company_id=${encodeURIComponent(companyId)}`, {
+          headers: {
+            "Authorization": `Bearer ${session.access_token}`
+          }
+        }),
+        supabase.from("lines").select("id").eq("company_id", companyId).eq("idle_time_vlm_enabled", true).limit(1)
+      ]);
+      if (!statsResponse.ok) {
+        const errorData = await statsResponse.json().catch(() => ({}));
+        throw new Error(errorData.detail || `Failed to fetch classification stats: ${statsResponse.status}`);
+      }
+      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) {
+      console.error("[useCompanyClipsCost] Error:", err);
+      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]);
+  React26.useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  const hasData = !!(data && data.totalClassifications > 0 && data.hasVlmEnabledLine);
+  return {
+    data,
+    isLoading,
+    error,
+    hasData,
+    refetch: fetchData
+  };
+}
 
 // src/lib/utils/api.ts
 var apiUtils = {
@@ -34408,6 +34531,8 @@ var HlsVideoPlayer = React26.forwardRef(({
       if (effectiveSrc.startsWith("#EXTM3U")) {
         const safariMode = isSafari();
         const browserName = getBrowserName();
+        const r2WorkerHost = r2WorkerDomain.replace(/^https?:\/\//, "");
+        const isR2Playlist = effectiveSrc.includes(r2WorkerHost);
         const remuxUrl = extractRemuxUrl(effectiveSrc);
         if (remuxUrl) {
           console.log(`[HlsVideoPlayer] Remuxing enabled - using remux playlist URL: ${remuxUrl}`);
@@ -34451,10 +34576,58 @@ var HlsVideoPlayer = React26.forwardRef(({
           } else {
             video.src = remuxUrl;
           }
+        } else if (safariMode && isR2Playlist && Hls__default.default.isSupported()) {
+          const blob = new Blob([effectiveSrc], { type: "application/vnd.apple.mpegurl" });
+          const blobUrl = URL.createObjectURL(blob);
+          blobUrlRef.current = blobUrl;
+          console.log(`[HlsVideoPlayer] Safari R2 stream - using HLS.js for auth header support (${browserName})`);
+          const hls = new Hls__default.default(mergedHlsConfig);
+          hlsRef.current = hls;
+          hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            console.log("[HlsVideoPlayer] Manifest parsed (Safari R2 HLS.js), ready to play");
+            setIsReady(true);
+            eventCallbacksRef.current.onReady?.(player);
+          });
+          hls.on(Hls.Events.ERROR, (event, data) => {
+            console.error("[HlsVideoPlayer] HLS.js error (Safari R2):", data);
+            if (maybeHandleR2Fallback(data)) {
+              return;
+            }
+            if (data.fatal) {
+              let errorInfo;
+              switch (data.type) {
+                case Hls.ErrorTypes.NETWORK_ERROR:
+                  errorInfo = ERROR_MAPPING.networkError;
+                  console.log("[HlsVideoPlayer] Attempting to recover from network error (Safari R2)");
+                  hls.startLoad();
+                  break;
+                case Hls.ErrorTypes.MEDIA_ERROR:
+                  errorInfo = ERROR_MAPPING.mediaError;
+                  console.log("[HlsVideoPlayer] Attempting to recover from media error (Safari R2)");
+                  hls.recoverMediaError();
+                  break;
+                case Hls.ErrorTypes.MUX_ERROR:
+                  errorInfo = ERROR_MAPPING.muxError;
+                  break;
+                default:
+                  errorInfo = ERROR_MAPPING.otherError;
+                  break;
+              }
+              errorInfo.details = data.details;
+              eventCallbacksRef.current.onError?.(player, errorInfo);
+            }
+          });
+          hls.on(Hls.Events.FRAG_LOADED, () => {
+            setIsLoading(false);
+            eventCallbacksRef.current.onLoadingChange?.(false);
+          });
+          hls.loadSource(blobUrl);
+          hls.attachMedia(video);
         } else if (safariMode) {
           const clipIdMatch = effectiveSrc.match(/# Clip ID: ([a-f0-9-]+)/i);
           if (clipIdMatch) {
-            const proxyUrl = `/api/clips/playlist/${clipIdMatch[1]}`;
+            const safariParam = isR2Playlist ? "?safari=true" : "";
+            const proxyUrl = `/api/clips/playlist/${clipIdMatch[1]}${safariParam}`;
             console.log(`[HlsVideoPlayer] Safari detected (${browserName}) - using playlist proxy URL:`, proxyUrl);
             video.src = proxyUrl;
           } else {
@@ -36656,6 +36829,7 @@ var FileManagerFilters = ({
   const endInputRef = React26.useRef(null);
   const [idleLabelFilter, setIdleLabelFilter] = React26.useState(null);
   const [showIdleLabelFilterModal, setShowIdleLabelFilterModal] = React26.useState(false);
+  const [isLoadingIdleReasonOptions, setIsLoadingIdleReasonOptions] = React26.useState(false);
   const timezone = useAppTimezone();
   const supabase = useSupabase();
   const [clipMetadata, setClipMetadata] = React26.useState({});
@@ -36698,18 +36872,27 @@ var FileManagerFilters = ({
       iconColor: colorConfig.text
     };
   };
-  const ROOT_CAUSE_OPTIONS = [
-    "Operator Absent",
-    "Operator Idle",
-    "Machine Downtime",
-    "No Material"
-  ];
+  const normalizeIdleReasonLabel = React26.useCallback((label) => {
+    return label.replace(/_/g, " ").trim();
+  }, []);
   const getIdleTimeRootCause = React26.useCallback((clipId) => {
     const classification = mergedClipClassifications[clipId];
     if (!classification) return "processing";
     if (classification.status === "processing") return "processing";
     return classification.label || "processing";
   }, [mergedClipClassifications]);
+  const idleReasonOptions = React26.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 = React26.useCallback((node) => {
     if (node.categoryId === "idle_time" || node.categoryId === "low_value") {
       return { text: "Idle", className: "bg-red-100 text-red-700" };
@@ -36737,6 +36920,79 @@ var FileManagerFilters = ({
       return null;
     }
   }, [supabase]);
+  const fetchClipMetadataPage = React26.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 = React26.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 = React26.useCallback(async (categoryId, page = 1) => {
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for clip metadata fetch");
@@ -36745,69 +37001,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 }));
@@ -36821,7 +37021,64 @@ var FileManagerFilters = ({
         return newSet;
       });
     }
-  }, [workspaceId, date, shift, mergedClipClassifications, snapshotDateTime, snapshotClipId, supabase, getAuthToken3, idleTimeVlmEnabled]);
+  }, [workspaceId, date, shift, fetchClipMetadataPage, idleTimeVlmEnabled, seedIdleClassifications]);
+  const ensureAllIdleTimeClipMetadataLoaded = React26.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 = React26.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 = React26.useCallback(async (type) => {
     if (!workspaceId || !date || shift === void 0) {
       console.warn("[FileManager] Missing required params for percentile clips fetch");
@@ -37492,7 +37749,7 @@ var FileManagerFilters = ({
           activeFilter === "idle_time" && idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Tag, { className: "h-5 w-5" })
@@ -37580,7 +37837,10 @@ var FileManagerFilters = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 max-h-60 overflow-y-auto", children: ROOT_CAUSE_OPTIONS.map((reason) => {
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 max-h-60 overflow-y-auto", children: isLoadingIdleReasonOptions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-4 text-sm text-slate-500 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
+              "Loading idle reasons..."
+            ] }) : idleReasonOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
                 "button",
@@ -48917,6 +49177,7 @@ var SideNavBar = React26.memo(({
   dashboardConfig?.supervisorConfig?.enabled || false;
   const showSupervisorManagement = false;
   const ticketsEnabled = dashboardConfig?.ticketsConfig?.enabled ?? true;
+  const { hasData: hasClipsCostData } = useCompanyClipsCost();
   console.log("\u{1F50D} [SideNavBar] dashboardConfig:", dashboardConfig);
   console.log("\u{1F50D} [SideNavBar] ticketsConfig:", dashboardConfig?.ticketsConfig);
   console.log("\u{1F50D} [SideNavBar] ticketsEnabled:", ticketsEnabled);
@@ -49073,6 +49334,17 @@ var SideNavBar = React26.memo(({
     });
     onMobileMenuClose?.();
   }, [navigate, onMobileMenuClose]);
+  const handleClipsCostClick = React26.useCallback(() => {
+    navigate("/clips-cost", {
+      trackingEvent: {
+        name: "Clips Cost Page Clicked",
+        properties: {
+          source: "side_nav"
+        }
+      }
+    });
+    onMobileMenuClose?.();
+  }, [navigate, onMobileMenuClose]);
   const [isSettingsOpen, setIsSettingsOpen] = React26.useState(false);
   const settingsTriggerRef = React26.useRef(null);
   const settingsItems = React26.useMemo(() => {
@@ -49130,6 +49402,18 @@ var SideNavBar = React26.memo(({
         isActive: pathname === "/tickets" || pathname.startsWith("/tickets/")
       });
     }
+    if (hasClipsCostData) {
+      items.push({
+        key: "clips-analysis",
+        label: "Billing",
+        icon: outline.CurrencyDollarIcon,
+        onClick: () => {
+          handleClipsCostClick();
+          setIsSettingsOpen(false);
+        },
+        isActive: pathname === "/clips-cost" || pathname.startsWith("/clips-cost/")
+      });
+    }
     if (canAccessPath("/help")) {
       items.push({
         key: "help",
@@ -49143,7 +49427,7 @@ var SideNavBar = React26.memo(({
       });
     }
     return items;
-  }, [handleTargetsClick, handleShiftsClick, handleTeamManagementClick, handleProfileClick, handleTicketsClick, handleHelpClick, pathname, ticketsEnabled, canAccessPath]);
+  }, [handleTargetsClick, handleShiftsClick, handleTeamManagementClick, handleProfileClick, handleTicketsClick, handleClipsCostClick, handleHelpClick, pathname, ticketsEnabled, hasClipsCostData, canAccessPath]);
   const handleLogout = React26.useCallback(async () => {
     setIsSettingsOpen(false);
     try {
@@ -61402,6 +61686,102 @@ var ProfileView = () => {
   ] });
 };
 var ProfileView_default = ProfileView;
+var REFRESH_INTERVAL_MS = 30 * 1e3;
+var ClipsCostView = () => {
+  const { data, isLoading, error, refetch } = useCompanyClipsCost();
+  const navigation = useNavigation();
+  const refetchRef = React26.useRef(refetch);
+  React26.useEffect(() => {
+    refetchRef.current = refetch;
+  }, [refetch]);
+  React26.useEffect(() => {
+    const intervalId = setInterval(() => {
+      void refetchRef.current();
+    }, REFRESH_INTERVAL_MS);
+    return () => clearInterval(intervalId);
+  }, []);
+  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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading usage data..." }) });
+  }
+  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 shadow-sm flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-6 lg:px-8 py-3 sm:py-4 w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: mobileMenuContext && /* @__PURE__ */ jsxRuntime.jsx(
+          HamburgerButton,
+          {
+            onClick: mobileMenuContext.onMobileMenuOpen,
+            className: "flex-shrink-0 -ml-1"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Billing" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: "Track your usage based features spend" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          BackButtonMinimal,
+          {
+            onClick: () => navigation.goToDashboard(),
+            text: "Back",
+            size: "default",
+            "aria-label": "Navigate back to dashboard"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Billing" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1 text-center", children: "Track your usage based features spend" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[120px]" })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto w-full", children: error ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-5 w-5 flex-shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium", children: "Error loading usage data" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1 text-red-600", children: error })
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-xl mt-8 animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Card2, { className: "overflow-hidden shadow-sm border-gray-200 bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 bg-blue-50 rounded-full mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Film, { className: "h-8 w-8 text-blue-600" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Clips Analyzed" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mb-3", children: formatMonthLabel(data?.monthStart) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-5xl font-bold text-gray-900 mb-2 tabular-nums tracking-tight", children: formatNumber(data?.monthlyClassifications || 0) })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Card2, { className: "mt-4 overflow-hidden shadow-sm border-gray-200 bg-white", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { className: "p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-3 uppercase tracking-wider", children: "Previous Months" }),
+        (data?.historicalMonthlyClassifications?.length || 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "No historical month usage yet." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: data?.historicalMonthlyClassifications.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between rounded-md border border-gray-100 bg-gray-50 px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700", children: formatMonthLabel(item.monthStart) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900 tabular-nums", children: formatNumber(item.classifications) })
+            ]
+          },
+          item.monthStart
+        )) })
+      ] }) })
+    ] }) })
+  ] });
+};
+var ClipsCostView_default = ClipsCostView;
 
 // src/lib/constants/actions.ts
 var ACTION_NAMES = {
@@ -64680,6 +65060,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 = React26.useMemo(
@@ -65283,107 +65664,123 @@ var WorkspaceDetailView = ({
               ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full lg:min-h-0 gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("grid grid-cols-1 lg:grid-cols-10 gap-3 min-h-0", desktopTopSectionClass), children: [
-                !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        OutputProgressChart,
-                        {
-                          currentOutput: workspace.total_actions || 0,
-                          targetOutput: workspace.target_output || 0
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }),
-                        !isUptimeMode && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "w-4 h-4 mr-1.5" }),
-                              "Hide Idle Time"
-                            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4 mr-1.5" }),
-                              "Show Idle Time"
-                            ] })
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx(
-                        HourlyUptimeChart,
-                        {
-                          idleTimeHourly: workspace.idle_time_hourly,
-                          shiftStart: workspace.shift_start,
-                          shiftEnd: workspace.shift_end,
-                          shiftDate: idleClipDate,
-                          timezone,
-                          elapsedMinutes: elapsedShiftMinutes
-                        }
-                      ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
-                        CycleTimeOverTimeChart,
-                        {
-                          data: workspace.hourly_action_counts || [],
-                          idealCycleTime: workspace.ideal_cycle_time || 0,
-                          shiftStart: workspace.shift_start || ""
-                        }
-                      ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Idle Time Breakdown" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        IdleTimeReasonChart,
-                        {
-                          data: idleTimeData.chartData,
-                          isLoading: idleTimeData.isLoading,
-                          error: idleTimeData.error
-                        }
-                      ) })
-                    ]
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            OutputProgressChart,
+                            {
+                              currentOutput: workspace.total_actions || 0,
+                              targetOutput: workspace.target_output || 0
+                            }
+                          ) })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }),
+                            !isUptimeMode && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "w-4 h-4 mr-1.5" }),
+                                  "Hide Idle Time"
+                                ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4 mr-1.5" }),
+                                  "Show Idle Time"
+                                ] })
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx(
+                            HourlyUptimeChart,
+                            {
+                              idleTimeHourly: workspace.idle_time_hourly,
+                              shiftStart: workspace.shift_start,
+                              shiftEnd: workspace.shift_end,
+                              shiftDate: idleClipDate,
+                              timezone,
+                              elapsedMinutes: elapsedShiftMinutes
+                            }
+                          ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
+                            CycleTimeOverTimeChart,
+                            {
+                              data: workspace.hourly_action_counts || [],
+                              idealCycleTime: workspace.ideal_cycle_time || 0,
+                              shiftStart: workspace.shift_start || ""
+                            }
+                          ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Idle Time Breakdown" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            IdleTimeReasonChart,
+                            {
+                              data: idleTimeData.chartData,
+                              isLoading: idleTimeData.isLoading,
+                              error: idleTimeData.error
+                            }
+                          ) })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
               isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsxRuntime.jsx(UptimeMetricCards, { workspace, uptimePieData, className: "flex-1" }) }) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 min-h-0", desktopBottomSectionClass), children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
@@ -71708,6 +72105,7 @@ exports.CardHeader = CardHeader2;
 exports.CardTitle = CardTitle2;
 exports.ChangeRoleDialog = ChangeRoleDialog;
 exports.ClipFilterProvider = ClipFilterProvider;
+exports.ClipsCostView = ClipsCostView_default;
 exports.CompactWorkspaceHealthCard = CompactWorkspaceHealthCard;
 exports.ConfirmRemoveUserDialog = ConfirmRemoveUserDialog;
 exports.CongratulationsOverlay = CongratulationsOverlay;
@@ -72073,6 +72471,7 @@ exports.useClipFilter = useClipFilter;
 exports.useClipTypes = useClipTypes;
 exports.useClipTypesWithCounts = useClipTypesWithCounts;
 exports.useClipsInit = useClipsInit;
+exports.useCompanyClipsCost = useCompanyClipsCost;
 exports.useCompanyUsersUsage = useCompanyUsersUsage;
 exports.useComponentOverride = useComponentOverride;
 exports.useCustomConfig = useCustomConfig;