@streamoid/settings 0.14.0 → 0.15.0

package/dist/index.js

@@ -34,7 +34,9 @@ __export(index_exports, {
   CreditPoolMemberModal: () => CreditPoolMemberModal,
   DEFAULT_PERMISSIONS: () => DEFAULT_PERMISSIONS,
   DEFAULT_USER_LANGUAGE: () => DEFAULT_USER_LANGUAGE,
+  EMPTY_USAGE_LOGS_PAGE: () => EMPTY_USAGE_LOGS_PAGE,
   ExportDateModal: () => ExportDateModal,
+  INITIAL_USAGE_LOGS_STATE: () => INITIAL_USAGE_LOGS_STATE,
   InviteUpdateModal: () => InviteUpdateModal,
   MemberCreditLimitModal: () => MemberCreditLimitModal,
   MemberListFrame: () => MemberListFrame,
@@ -67,7 +69,12 @@ __export(index_exports, {
   TeamsContent: () => TeamsContent,
   TokensContent: () => TokensContent,
   URL_TO_TAB: () => URL_TO_TAB,
+  USAGE_LOGS_EXPORT_BATCH_SIZE: () => USAGE_LOGS_EXPORT_BATCH_SIZE,
+  USAGE_LOGS_EXPORT_EXTRA_REQUESTS: () => USAGE_LOGS_EXPORT_EXTRA_REQUESTS,
+  USAGE_LOGS_EXPORT_MAX_ROWS: () => USAGE_LOGS_EXPORT_MAX_ROWS,
+  USAGE_LOGS_PAGE_SIZE: () => USAGE_LOGS_PAGE_SIZE,
   USER_LANGUAGES: () => USER_LANGUAGES,
+  UsageLogsPager: () => UsageLogsPager,
   WORKSPACE_LIST_PAGE_SIZE: () => WORKSPACE_LIST_PAGE_SIZE,
   WorkspaceGeneralTab: () => WorkspaceGeneralTab,
   WorkspaceListTab: () => WorkspaceListTab,
@@ -79,6 +86,7 @@ __export(index_exports, {
   cleanCreditLimitInput: () => cleanCreditLimitInput,
   cleanPoolValueInput: () => cleanPoolValueInput,
   countLabel: () => countLabel,
+  createUsedByNamesLoader: () => createUsedByNamesLoader,
   creditCycleUnit: () => creditCycleUnit,
   creditsMeter: () => creditsMeter,
   deriveWorkspaceInvitePermission: () => deriveWorkspaceInvitePermission,
@@ -88,6 +96,7 @@ __export(index_exports, {
   entitlementFromBody: () => entitlementFromBody,
   entitlementFromFailure: () => entitlementFromFailure,
   expiryChoiceFor: () => expiryChoiceFor,
+  fetchUsageLogsInRange: () => fetchUsageLogsInRange,
   findBillingError: () => findBillingError,
   findPoolError: () => findPoolError,
   formatCreditLimit: () => formatCreditLimit,
@@ -122,8 +131,16 @@ __export(index_exports, {
   settingsReturnTarget: () => settingsReturnTarget,
   sharedPoolBannerText: () => sharedPoolBannerText,
   sharedPoolEndsText: () => sharedPoolEndsText,
+  sliceUsageLogsPage: () => sliceUsageLogsPage,
   sponsoredCreditsText: () => sponsoredCreditsText,
+  toCsv: () => toCsv,
   toLocalDateInput: () => toLocalDateInput,
+  usageLogsCsvRows: () => usageLogsCsvRows,
+  usageLogsDateRange: () => usageLogsDateRange,
+  usageLogsExportFileName: () => usageLogsExportFileName,
+  usageLogsPage: () => usageLogsPage,
+  usageLogsReducer: () => usageLogsReducer,
+  usageLogsSpentByOthers: () => usageLogsSpentByOthers,
   useBillingEntitlement: () => useBillingEntitlement,
   useSettingsAdapters: () => useSettingsAdapters,
   useWorkspaceInvitePermission: () => useWorkspaceInvitePermission,
@@ -7897,7 +7914,10 @@ function formatDateRange(date) {
 function ExportDateModal({
   title,
   onClose,
-  onExport
+  onExport,
+  busy = false,
+  busyText,
+  notice = null
 }) {
   useOverlayOpen(true, onClose);
   const now = /* @__PURE__ */ new Date();
@@ -7984,6 +8004,7 @@ function ExportDateModal({
     [rangeStart, rangeEnd, isFuture]
   );
   const handleExport = () => {
+    if (busy) return;
     if (rangeStart && rangeEnd) onExport(rangeStart, rangeEnd);
   };
   const getCellVisuals = (cell, idx) => {
@@ -8205,24 +8226,42 @@ function ExportDateModal({
                   borderTop: "1px solid var(--alias-border-subtle)"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                    "p",
-                    {
-                      className: "flex-1 min-w-0 truncate",
-                      style: {
-                        fontFamily: "var(--font-family-font-family-body)",
-                        fontSize: "var(--font-size-font-size-md)",
-                        fontWeight: 400,
-                        lineHeight: "var(--line-height-line-height-md)",
-                        color: "var(--alias-text---icons-primary)"
-                      },
-                      children: rangeStart && rangeEnd ? `${formatDateRange(rangeStart)} - ${formatDateRange(rangeEnd)}` : rangeStart ? `${formatDateRange(rangeStart)} - Select end date` : "Select date range"
-                    }
-                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      "p",
+                      {
+                        className: "min-w-0 truncate",
+                        style: {
+                          fontFamily: "var(--font-family-font-family-body)",
+                          fontSize: "var(--font-size-font-size-md)",
+                          fontWeight: 400,
+                          lineHeight: "var(--line-height-line-height-md)",
+                          color: "var(--alias-text---icons-primary)"
+                        },
+                        "aria-live": "polite",
+                        children: busy && busyText ? busyText : rangeStart && rangeEnd ? `${formatDateRange(rangeStart)} - ${formatDateRange(rangeEnd)}` : rangeStart ? `${formatDateRange(rangeStart)} - Select end date` : "Select date range"
+                      }
+                    ),
+                    notice && !busy && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      "p",
+                      {
+                        role: "alert",
+                        style: {
+                          fontFamily: "var(--font-family-font-family-body)",
+                          fontSize: "var(--font-size-font-size-sm)",
+                          fontWeight: 400,
+                          lineHeight: "var(--line-height-line-height-sm)",
+                          color: "var(--alias-text---icons-error)"
+                        },
+                        children: notice
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "div",
                     {
-                      className: `flex items-center justify-center shrink-0 ${rangeStart && rangeEnd ? "cursor-pointer" : "opacity-50 cursor-not-allowed"}`,
+                      className: `flex items-center justify-center shrink-0 ${rangeStart && rangeEnd && !busy ? "cursor-pointer" : "opacity-50 cursor-not-allowed"}`,
+                      "aria-disabled": busy || !(rangeStart && rangeEnd),
                       style: {
                         backgroundColor: "var(--alias-text---icons-primary)",
                         borderRadius: "var(--radius-xl)",
@@ -8240,7 +8279,7 @@ function ExportDateModal({
                             lineHeight: "var(--line-height-line-height-sm)",
                             color: "var(--alias-text---icons-inverse)"
                           },
-                          children: "Export"
+                          children: busy ? "Exporting\u2026" : "Export"
                         }
                       )
                     }
@@ -10659,6 +10698,196 @@ async function loadCurrentPlan(fetchCurrentPlan) {
   return { subscription, entitlement, paid: hasPaidFeatures({ entitlement, subscription }) };
 }
 
+// src/usage-logs.ts
+var USAGE_LOGS_PAGE_SIZE = 50;
+var USAGE_LOGS_EXPORT_BATCH_SIZE = 100;
+var USAGE_LOGS_EXPORT_MAX_ROWS = 2e4;
+var USAGE_LOGS_EXPORT_EXTRA_REQUESTS = 10;
+function rowsOf(res) {
+  return Array.isArray(res?.data) ? res.data : [];
+}
+function sliceUsageLogsPage(all, page, pageSize = USAGE_LOGS_PAGE_SIZE) {
+  const total = all.length;
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const safePage = Math.min(Math.max(1, Math.floor(page) || 1), totalPages);
+  return {
+    rows: all.slice((safePage - 1) * pageSize, safePage * pageSize),
+    page: safePage,
+    totalPages,
+    total,
+    unpaged: all
+  };
+}
+function usageLogsPage(res, page, pageSize = USAGE_LOGS_PAGE_SIZE) {
+  const data = rowsOf(res);
+  const pagination = res?.pagination;
+  if (!pagination || !Number.isFinite(pagination.total)) {
+    return sliceUsageLogsPage(data, page, pageSize);
+  }
+  const total = Math.max(0, pagination.total);
+  const limit = pagination.limit > 0 ? pagination.limit : pageSize;
+  const totalPages = Math.max(
+    1,
+    pagination.totalPages > 0 ? pagination.totalPages : Math.ceil(total / limit)
+  );
+  return {
+    rows: data.slice(0, pageSize),
+    page: pagination.page > 0 ? pagination.page : page,
+    totalPages,
+    total,
+    unpaged: null
+  };
+}
+var EMPTY_USAGE_LOGS_PAGE = {
+  rows: [],
+  page: 1,
+  totalPages: 1,
+  total: 0,
+  unpaged: null
+};
+var INITIAL_USAGE_LOGS_STATE = {
+  logs: EMPTY_USAGE_LOGS_PAGE,
+  requestedPage: 1,
+  loading: false,
+  error: null
+};
+function usageLogsReducer(state, action) {
+  switch (action.type) {
+    case "request":
+      return { ...state, requestedPage: action.page, loading: true, error: null };
+    case "loaded":
+      return {
+        logs: action.logs,
+        requestedPage: action.logs.page,
+        loading: false,
+        error: null
+      };
+    case "failed":
+      return { ...state, loading: false, error: action.error };
+    case "turn": {
+      if (!state.logs.unpaged || state.error) return state;
+      const logs = sliceUsageLogsPage(state.logs.unpaged, action.page);
+      return { ...state, logs, requestedPage: logs.page };
+    }
+    case "reset":
+      return INITIAL_USAGE_LOGS_STATE;
+  }
+}
+function usageLogsSpentByOthers(logs, workspaceId) {
+  return (logs.unpaged ?? logs.rows).some(
+    (log) => usedByWorkspaceKey(log, workspaceId) !== null
+  );
+}
+function createUsedByNamesLoader(save) {
+  let savedFor = null;
+  let inFlight = null;
+  return {
+    async load(workspaceId, fetchCreditPool) {
+      if (savedFor === workspaceId || inFlight?.workspaceId === workspaceId) {
+        return;
+      }
+      const lookup = { workspaceId };
+      inFlight = lookup;
+      try {
+        const pool = await fetchCreditPool();
+        if (inFlight !== lookup) return;
+        if (save(workspaceId, usedByNamesFrom(pool))) savedFor = workspaceId;
+      } catch {
+      } finally {
+        if (inFlight === lookup) inFlight = null;
+      }
+    },
+    reset() {
+      savedFor = null;
+      inFlight = null;
+    }
+  };
+}
+function usageLogsExportFileName(start, end) {
+  return `usage_logs_${toLocalDateInput(start)}_${toLocalDateInput(end)}.csv`;
+}
+function usageLogsDateRange(start, end) {
+  const from = new Date(start);
+  from.setHours(0, 0, 0, 0);
+  const to = new Date(end);
+  to.setHours(23, 59, 59, 999);
+  return { startDate: from.toISOString(), endDate: to.toISOString() };
+}
+async function fetchUsageLogsInRange(fetchUsageLogs, range, {
+  batchSize = USAGE_LOGS_EXPORT_BATCH_SIZE,
+  maxRows = USAGE_LOGS_EXPORT_MAX_ROWS,
+  maxRequests,
+  onProgress,
+  signal
+} = {}) {
+  const first = await fetchUsageLogs({ ...range, page: 1, limit: batchSize });
+  if (signal?.aborted) return { status: "cancelled" };
+  if (!first?.pagination || !Number.isFinite(first.pagination.total)) {
+    const from = Date.parse(range.startDate);
+    const to = Date.parse(range.endDate);
+    const rows2 = rowsOf(first).filter((row) => {
+      const at = Date.parse(row.createdAt);
+      return at >= from && at <= to;
+    });
+    if (rows2.length > maxRows) return { status: "too-large", total: rows2.length };
+    onProgress?.(rows2.length, rows2.length);
+    return { status: "ok", rows: rows2, total: rows2.length };
+  }
+  let total = Math.max(0, first.pagination.total);
+  if (total > maxRows) return { status: "too-large", total };
+  const limit = first.pagination.limit > 0 ? first.pagination.limit : batchSize;
+  const requestCap = maxRequests ?? Math.ceil(maxRows / limit) + USAGE_LOGS_EXPORT_EXTRA_REQUESTS;
+  const seen = /* @__PURE__ */ new Set();
+  const rows = [];
+  const add = (batch) => {
+    for (const row of batch) {
+      if (rows.length >= maxRows) return;
+      if (seen.has(row._id)) continue;
+      seen.add(row._id);
+      rows.push(row);
+    }
+  };
+  const hasNextAfter = (pagination, page) => typeof pagination?.hasNextPage === "boolean" ? pagination.hasNextPage : page * limit < total;
+  add(rowsOf(first));
+  onProgress?.(rows.length, total);
+  let hasNext = hasNextAfter(first.pagination, 1);
+  let requests = 1;
+  for (let page = 2; hasNext && rows.length < total; page++) {
+    if (requests >= requestCap) {
+      return { status: "incomplete", fetched: rows.length, total };
+    }
+    if (signal?.aborted) return { status: "cancelled" };
+    const res = await fetchUsageLogs({ ...range, page, limit });
+    requests++;
+    if (signal?.aborted) return { status: "cancelled" };
+    if (res?.pagination && Number.isFinite(res.pagination.total)) {
+      total = Math.max(0, res.pagination.total);
+      if (total > maxRows) return { status: "too-large", total };
+    }
+    const batch = rowsOf(res);
+    if (batch.length === 0) break;
+    add(batch);
+    onProgress?.(rows.length, total);
+    hasNext = hasNextAfter(res?.pagination, page);
+  }
+  return { status: "ok", rows, total };
+}
+function usageLogsCsvRows(logs, userMap, formatDate5) {
+  return [
+    ["Date", "Type", "Credits", "Service", "User ID"],
+    ...logs.map((log) => [
+      formatDate5(log.createdAt),
+      log.type,
+      log.amount.toLocaleString("en-US"),
+      log.service?.serviceGroupName ?? log.meta?.info ?? "",
+      log.triggeredByUserId != null ? userMap[log.triggeredByUserId] ?? log.triggeredByUserId : ""
+    ])
+  ];
+}
+function toCsv(rows) {
+  return rows.map((r) => r.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(",")).join("\n");
+}
+
 // src/billing-content.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var DEFAULT_TOPUP_SERVICE = "catalogix";
@@ -11544,6 +11773,8 @@ function UsageLogsTable({
   logs,
   userMap,
   loading,
+  error = null,
+  onRetry,
   currentWorkspaceId = null,
   usedByNames = {}
 }) {
@@ -11574,6 +11805,50 @@ function UsageLogsTable({
       }
     );
   }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      "div",
+      {
+        role: "alert",
+        className: "flex flex-col items-center justify-center w-full",
+        style: {
+          backgroundColor: "var(--alias-surface-base)",
+          borderRadius: "var(--radius-3xl)",
+          border: "1px solid var(--alias-border-subtle)",
+          padding: "var(--spacing-6xl)",
+          gap: "var(--spacing-md)"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            "span",
+            {
+              style: {
+                fontFamily: "var(--font-family-font-family-body)",
+                fontSize: "var(--font-size-font-size-sm)",
+                fontWeight: 400,
+                lineHeight: "var(--line-height-line-height-sm)",
+                color: "var(--alias-text---icons-muted)",
+                textAlign: "center"
+              },
+              children: [
+                "Couldn't load usage logs. ",
+                error
+              ]
+            }
+          ),
+          onRetry && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_ui17.ScButton,
+            {
+              text: "Try again",
+              variant: "tertiary",
+              size: "sm",
+              onClick: onRetry
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
@@ -11749,6 +12024,71 @@ function UsageLogsTable({
     }
   );
 }
+function UsageLogsPager({
+  page,
+  totalPages,
+  total,
+  loading = false,
+  onPageChange
+}) {
+  if (total <= 0) return null;
+  const canPrevious = !loading && page > 1;
+  const canNext = !loading && page < totalPages;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      className: "flex items-center justify-between shrink-0 w-full",
+      style: { gap: "var(--spacing-md)" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          "span",
+          {
+            style: {
+              color: "var(--alias-text---icons-muted)",
+              fontFamily: "var(--font-family-font-family-body)",
+              fontSize: "var(--font-size-font-size-sm)",
+              lineHeight: "var(--line-height-line-height-sm)"
+            },
+            children: [
+              "Page ",
+              page.toLocaleString("en-US"),
+              " of",
+              " ",
+              totalPages.toLocaleString("en-US"),
+              " \xB7",
+              " ",
+              total.toLocaleString("en-US"),
+              " ",
+              total === 1 ? "log" : "logs"
+            ]
+          }
+        ),
+        totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center", style: { gap: "var(--spacing-md)" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_ui17.ScButton,
+            {
+              text: "Previous",
+              variant: "tertiary",
+              size: "sm",
+              state: canPrevious ? "default" : "disabled",
+              onClick: canPrevious ? () => onPageChange(page - 1) : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_ui17.ScButton,
+            {
+              text: "Next",
+              variant: "tertiary",
+              size: "sm",
+              state: canNext ? "default" : "disabled",
+              onClick: canNext ? () => onPageChange(page + 1) : void 0
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 function BackToBilling({ onClick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
@@ -11828,6 +12168,9 @@ function BillingContent({
     else setShowSharedCreditsInternal(next);
   };
   const [showExportModal, setShowExportModal] = (0, import_react23.useState)(false);
+  const [exportProgress, setExportProgress] = (0, import_react23.useState)(null);
+  const [exportNotice, setExportNotice] = (0, import_react23.useState)(null);
+  const exportAbortRef = (0, import_react23.useRef)(null);
   const [showBuyCreditsModal, setShowBuyCreditsModal] = (0, import_react23.useState)(false);
   const [subscription, setSubscription] = (0, import_react23.useState)(null);
   const [entitlement, setEntitlement] = (0, import_react23.useState)(
@@ -11839,7 +12182,24 @@ function BillingContent({
   const [products, setProducts] = (0, import_react23.useState)([]);
   const [invoices, setInvoices] = (0, import_react23.useState)([]);
   const [totalCredits, setTotalCredits] = (0, import_react23.useState)(null);
-  const [usageLogs, setUsageLogs] = (0, import_react23.useState)([]);
+  const [usageLogsState, dispatchUsageLogs] = (0, import_react23.useReducer)(
+    usageLogsReducer,
+    INITIAL_USAGE_LOGS_STATE
+  );
+  const {
+    logs: usageLogs,
+    loading: loadingUsageLogs,
+    error: usageLogsError
+  } = usageLogsState;
+  const usageLogsRequestRef = (0, import_react23.useRef)(0);
+  const workspaceIdRef = (0, import_react23.useRef)(workspaceId);
+  workspaceIdRef.current = workspaceId;
+  const loadUsedByNamesRef = (0, import_react23.useRef)(null);
+  loadUsedByNamesRef.current ??= createUsedByNamesLoader((forWorkspace, names) => {
+    if (forWorkspace !== workspaceIdRef.current) return false;
+    setUsedByNames(names);
+    return true;
+  });
   const [userMap, setUserMap] = (0, import_react23.useState)({});
   const [customPlanCredits, setCustomPlanCredits] = (0, import_react23.useState)(
     null
@@ -11923,8 +12283,68 @@ function BillingContent({
     } catch {
     }
   }, [api]);
+  const ensureUsedByNames = (0, import_react23.useCallback)(
+    (logs) => {
+      const fetchCreditPool = api.fetchCreditPool;
+      if (!fetchCreditPool || !workspaceId || !usageLogsSpentByOthers(logs, workspaceId)) {
+        return;
+      }
+      void loadUsedByNamesRef.current?.load(
+        workspaceId,
+        () => fetchCreditPool.call(api)
+      );
+    },
+    [api, workspaceId]
+  );
+  const loadUsageLogsPage = (0, import_react23.useCallback)(
+    async (page) => {
+      const request = ++usageLogsRequestRef.current;
+      if (!api.fetchUsageLogs) {
+        dispatchUsageLogs({ type: "loaded", logs: EMPTY_USAGE_LOGS_PAGE });
+        return;
+      }
+      dispatchUsageLogs({ type: "request", page });
+      try {
+        const res = await api.fetchUsageLogs({
+          page,
+          limit: USAGE_LOGS_PAGE_SIZE
+        });
+        if (request !== usageLogsRequestRef.current) return;
+        const next = usageLogsPage(res, page);
+        dispatchUsageLogs({ type: "loaded", logs: next });
+        ensureUsedByNames(next);
+      } catch (err) {
+        if (request !== usageLogsRequestRef.current) return;
+        dispatchUsageLogs({
+          type: "failed",
+          error: errorMessage(err, { method: "GET" })
+        });
+      }
+    },
+    [api, ensureUsedByNames]
+  );
+  const goToUsageLogsPage = (0, import_react23.useCallback)(
+    (page) => {
+      if (usageLogs.unpaged && !usageLogsError) {
+        dispatchUsageLogs({ type: "turn", page });
+        ensureUsedByNames(usageLogs);
+        return;
+      }
+      void loadUsageLogsPage(page);
+    },
+    [usageLogs, usageLogsError, loadUsageLogsPage, ensureUsedByNames]
+  );
+  (0, import_react23.useEffect)(() => {
+    if (!loadingUsageLogs && !usageLogsError && usageLogs.unpaged === null && usageLogs.rows.length === 0 && usageLogs.total > 0 && usageLogs.page > usageLogs.totalPages) {
+      void loadUsageLogsPage(usageLogs.totalPages);
+    }
+  }, [usageLogs, loadingUsageLogs, usageLogsError, loadUsageLogsPage]);
   const fetchTableData = (0, import_react23.useCallback)(
     async (tab) => {
+      if (tab === "usage") {
+        await loadUsageLogsPage(1);
+        return;
+      }
       setLoadingTable(true);
       try {
         if (tab === "invoice") {
@@ -11936,25 +12356,14 @@ function BillingContent({
               (item) => item.expiresAt && item.expiresAt.split("T")[0] > today
             ).reduce((total, item) => total + item.amount, 0)
           );
-        } else if (api.fetchUsageLogs) {
-          const res = await api.fetchUsageLogs();
-          const logs = res.data?.length ? res.data : [];
-          setUsageLogs(logs);
-          if (api.fetchCreditPool && logs.some((log) => usedByWorkspaceKey(log, workspaceId))) {
-            const pool = await api.fetchCreditPool().catch(() => null);
-            setUsedByNames(usedByNamesFrom(pool));
-          }
-        } else {
-          setUsageLogs([]);
         }
       } catch {
-        if (tab === "invoice") setInvoices([]);
-        else setUsageLogs([]);
+        setInvoices([]);
       } finally {
         setLoadingTable(false);
       }
     },
-    [api, workspaceId]
+    [api, loadUsageLogsPage]
   );
   const handlePlanAction = (0, import_react23.useCallback)(
     async ({ productId, priceId, planName: planName2 }) => {
@@ -12061,6 +12470,10 @@ function BillingContent({
     setProducts([]);
     setTotalCredits(null);
     setCustomPlanCredits(null);
+    usageLogsRequestRef.current++;
+    dispatchUsageLogs({ type: "reset" });
+    loadUsedByNamesRef.current?.reset();
+    setUsedByNames({});
   }, [workspaceId]);
   (0, import_react23.useEffect)(() => {
     setInitialFetchTriggered(true);
@@ -12163,35 +12576,74 @@ function BillingContent({
         toast.success(`Opened ${successCount} invoice PDF(s).`);
       }
     } else {
-      const filtered = usageLogs.filter((log) => {
-        const d = new Date(log.createdAt);
-        return d >= startDate && d <= end;
+      await exportUsageLogs(startDate, endDate);
+    }
+  };
+  const closeExportModal = () => {
+    exportAbortRef.current?.abort();
+    exportAbortRef.current = null;
+    setExportProgress(null);
+    setExportNotice(null);
+    setShowExportModal(false);
+  };
+  (0, import_react23.useEffect)(() => () => exportAbortRef.current?.abort(), []);
+  const exportUsageLogs = async (startDate, endDate) => {
+    if (!api.fetchUsageLogs) {
+      toast.info?.("Usage logs are not available in this workspace.");
+      closeExportModal();
+      return;
+    }
+    exportAbortRef.current?.abort();
+    const controller = new AbortController();
+    exportAbortRef.current = controller;
+    setExportNotice(null);
+    setExportProgress({ fetched: 0, total: 0 });
+    const range = usageLogsDateRange(startDate, endDate);
+    try {
+      const result = await fetchUsageLogsInRange(api.fetchUsageLogs, range, {
+        signal: controller.signal,
+        onProgress: (fetched, total) => {
+          if (!controller.signal.aborted) setExportProgress({ fetched, total });
+        }
       });
-      if (filtered.length === 0) {
+      if (result.status === "cancelled" || controller.signal.aborted) return;
+      if (result.status === "too-large") {
+        setExportNotice(
+          `${result.total.toLocaleString("en-US")} logs in this range; an export holds up to ${USAGE_LOGS_EXPORT_MAX_ROWS.toLocaleString("en-US")}. Choose a shorter range.`
+        );
+        return;
+      }
+      if (result.status === "incomplete") {
+        setExportNotice(
+          "Usage logs kept changing while exporting, so some were missed. Try again."
+        );
+        return;
+      }
+      if (result.rows.length === 0) {
         toast.info?.("No usage logs found in the selected date range.");
-        setShowExportModal(false);
+        closeExportModal();
         return;
       }
-      const headers = ["Date", "Type", "Credits", "Service", "User ID"];
-      const rows = filtered.map((log) => [
-        formatDate3(log.createdAt),
-        log.type,
-        log.amount.toLocaleString("en-US"),
-        log.service?.serviceGroupName ?? log.meta?.info ?? "",
-        log.triggeredByUserId != null ? userMap[log.triggeredByUserId] ?? log.triggeredByUserId : ""
-      ]);
       downloadCsv(
-        [headers, ...rows],
-        `usage_logs_${fmtFilename(startDate)}_${fmtFilename(end)}.csv`
+        usageLogsCsvRows(result.rows, userMap, formatDate3),
+        usageLogsExportFileName(startDate, endDate)
       );
-      toast.success(`Exported ${filtered.length} log(s).`);
-      setShowExportModal(false);
+      toast.success(`Exported ${result.rows.length.toLocaleString("en-US")} log(s).`);
+      closeExportModal();
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      setExportNotice(
+        `Couldn't export usage logs. ${errorMessage(err, { method: "GET" })}`
+      );
+    } finally {
+      if (exportAbortRef.current === controller) {
+        exportAbortRef.current = null;
+        setExportProgress(null);
+      }
     }
   };
   function downloadCsv(rows, filename) {
-    const csv = rows.map(
-      (r) => r.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(",")
-    ).join("\n");
+    const csv = toCsv(rows);
     const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -12202,9 +12654,6 @@ function BillingContent({
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
   }
-  function fmtFilename(d) {
-    return d.toISOString().slice(0, 10);
-  }
   async function handleBuyCredits(credits2, price) {
     if (!workspaceId) {
       toast.error("Missing workspace details for credit top-up");
@@ -12657,22 +13106,39 @@ function BillingContent({
         loading: loadingTable,
         workspaceCountry: workspace.current?.country
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      UsageLogsTable,
-      {
-        logs: usageLogs,
-        userMap,
-        loading: loadingTable,
-        currentWorkspaceId: workspaceId,
-        usedByNames
-      }
-    ),
+    ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        UsageLogsTable,
+        {
+          logs: usageLogs.rows,
+          userMap,
+          loading: loadingUsageLogs,
+          error: usageLogsError,
+          onRetry: () => void loadUsageLogsPage(usageLogsState.requestedPage),
+          currentWorkspaceId: workspaceId,
+          usedByNames
+        }
+      ),
+      !usageLogsError && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        UsageLogsPager,
+        {
+          page: usageLogs.page,
+          totalPages: usageLogs.totalPages,
+          total: usageLogs.total,
+          loading: loadingUsageLogs,
+          onPageChange: goToUsageLogsPage
+        }
+      )
+    ] }),
     showExportModal && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       ExportDateModal,
       {
         title: activeTab === "invoice" ? "Export invoices" : "Export log",
-        onClose: () => setShowExportModal(false),
-        onExport: handleExport
+        onClose: closeExportModal,
+        onExport: handleExport,
+        busy: exportProgress !== null,
+        busyText: exportProgress && exportProgress.total > 0 ? `Fetched ${exportProgress.fetched.toLocaleString("en-US")} of ${exportProgress.total.toLocaleString("en-US")} logs\u2026` : "Fetching logs\u2026",
+        notice: exportNotice
       }
     ),
     showBuyCreditsModal && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(