@carlonicora/nextjs-jsonapi 2.4.0 → 2.5.0

package/dist/features/tokenusage/index.js

@@ -26,8 +26,8 @@
 
 
 
-var _chunkGYGMEDVSjs = require('../../chunk-GYGMEDVS.js');
-require('../../chunk-TOKHHZSP.js');
+var _chunk7HKJNUW7js = require('../../chunk-7HKJNUW7.js');
+require('../../chunk-OTEDZ6YW.js');
 
 
 
@@ -39,7 +39,13 @@ require('../../chunk-TOKHHZSP.js');
 
 
 
-var _chunkV66AZWPGjs = require('../../chunk-V66AZWPG.js');
+
+
+
+
+
+
+var _chunkRTOC53EZjs = require('../../chunk-RTOC53EZ.js');
 require('../../chunk-LXKSUWAV.js');
 require('../../chunk-IBS6NI7D.js');
 require('../../chunk-FPO4DLZN.js');
@@ -64,7 +70,7 @@ function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, o
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-wrap items-center gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkGYGMEDVSjs.DateRangeSelector,
+      _chunk7HKJNUW7js.DateRangeSelector,
       {
         onDateChange: (range) => {
           if (!_optionalChain([range, 'optionalAccess', _ => _.from]) || !_optionalChain([range, 'optionalAccess', _2 => _2.to])) return;
@@ -99,16 +105,16 @@ function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, o
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkGYGMEDVSjs.Select,
+      _chunk7HKJNUW7js.Select,
       {
         items: companyItems,
         value: _nullishCoalesce(companyId, () => ( ALL_COMPANIES)),
         onValueChange: (value) => onChange({ companyId: !value || value === ALL_COMPANIES ? void 0 : value }),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.SelectTrigger, { className: "w-56", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.SelectContent, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
-            companies.map((company) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.SelectItem, { value: company.id, children: company.label }, company.id))
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.SelectTrigger, { className: "w-56", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.SelectContent, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
+            companies.map((company) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.SelectItem, { value: company.id, children: company.label }, company.id))
           ] })
         ]
       }
@@ -131,13 +137,13 @@ function Segmented({
       children: options.map((option) => {
         const selected = option.value === value;
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkGYGMEDVSjs.Button,
+          _chunk7HKJNUW7js.Button,
           {
             type: "button",
             size: "sm",
             variant: selected ? "default" : "ghost",
             "aria-pressed": selected,
-            className: _chunkV66AZWPGjs.cn.call(void 0, !selected && "text-muted-foreground"),
+            className: _chunkRTOC53EZjs.cn.call(void 0, !selected && "text-muted-foreground"),
             onClick: () => onSelect(option.value),
             children: option.label
           },
@@ -157,36 +163,36 @@ function withFilters(endpoint, filters) {
   return endpoint;
 }
 _chunk7QVYU63Ejs.__name.call(void 0, withFilters, "withFilters");
-var TokenUsageAdminService = class extends _chunkV66AZWPGjs.AbstractService {
+var TokenUsageAdminService = class extends _chunkRTOC53EZjs.AbstractService {
   static {
     _chunk7QVYU63Ejs.__name.call(void 0, this, "TokenUsageAdminService");
   }
   /** Six rows: {customer, platform, total} × {current, previous}. */
   static async getSummary(filters) {
-    const endpoint = withFilters(new (0, _chunkV66AZWPGjs.EndpointCreator)({ endpoint: _chunkV66AZWPGjs.Modules.TokenUsageAdminSummary }), filters);
+    const endpoint = withFilters(new (0, _chunkRTOC53EZjs.EndpointCreator)({ endpoint: _chunkRTOC53EZjs.Modules.TokenUsageAdminSummary }), filters);
     return this.callApi({
-      type: _chunkV66AZWPGjs.Modules.TokenUsageAdminSummary,
+      type: _chunkRTOC53EZjs.Modules.TokenUsageAdminSummary,
       method: "GET" /* GET */,
       endpoint: endpoint.generate()
     });
   }
   static async getTimeline(params) {
-    const endpoint = withFilters(new (0, _chunkV66AZWPGjs.EndpointCreator)({ endpoint: _chunkV66AZWPGjs.Modules.TokenUsageAdminTimeline }), params);
+    const endpoint = withFilters(new (0, _chunkRTOC53EZjs.EndpointCreator)({ endpoint: _chunkRTOC53EZjs.Modules.TokenUsageAdminTimeline }), params);
     endpoint.addAdditionalParam("granularity", params.granularity);
     endpoint.addAdditionalParam("stackBy", params.stackBy);
     return this.callApi({
-      type: _chunkV66AZWPGjs.Modules.TokenUsageAdminTimeline,
+      type: _chunkRTOC53EZjs.Modules.TokenUsageAdminTimeline,
       method: "GET" /* GET */,
       endpoint: endpoint.generate()
     });
   }
   static async getBreakdown(params) {
-    const endpoint = withFilters(new (0, _chunkV66AZWPGjs.EndpointCreator)({ endpoint: _chunkV66AZWPGjs.Modules.TokenUsageAdminBreakdown }), params);
+    const endpoint = withFilters(new (0, _chunkRTOC53EZjs.EndpointCreator)({ endpoint: _chunkRTOC53EZjs.Modules.TokenUsageAdminBreakdown }), params);
     endpoint.addAdditionalParam("dimension", params.dimension);
     endpoint.addAdditionalParam("scope", params.scope);
     if (params.limit !== void 0) endpoint.addAdditionalParam("limit", String(params.limit));
     return this.callApi({
-      type: _chunkV66AZWPGjs.Modules.TokenUsageAdminBreakdown,
+      type: _chunkRTOC53EZjs.Modules.TokenUsageAdminBreakdown,
       method: "GET" /* GET */,
       endpoint: endpoint.generate()
     });
@@ -209,10 +215,11 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
   initialCompanyId,
   initialFrom,
   initialTo,
-  topN = DEFAULT_TOP_N
+  topN = DEFAULT_TOP_N,
+  pageUrl = TOKEN_USAGE_ADMIN_PAGE_URL
 }) => {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkGYGMEDVSjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunk7HKJNUW7js.usePageUrlGenerator.call(void 0, );
   const [filters, setFilterState] = _react.useState.call(void 0, () => {
     const range = defaultRange();
     return {
@@ -281,7 +288,7 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
   const breadcrumb = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, () => [
     {
       name: t("token_usage.admin.title"),
-      href: generateUrl({ page: TOKEN_USAGE_ADMIN_PAGE_URL })
+      href: generateUrl({ page: pageUrl })
     }
   ], "breadcrumb");
   const title = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, () => ({
@@ -330,7 +337,7 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
       error
     ]
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.SharedProvider, { value: { breadcrumbs: breadcrumb(), title: title() }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageAdminContext.Provider, { value: contextValue, children }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.SharedProvider, { value: { breadcrumbs: breadcrumb(), title: title() }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageAdminContext.Provider, { value: contextValue, children }) });
 }, "TokenUsageAdminProvider");
 var useTokenUsageAdmin = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, () => {
   const ctx = _react.useContext.call(void 0, TokenUsageAdminContext);
@@ -348,31 +355,56 @@ var useTokenUsageAdmin = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, ()
 var _lucidereact = require('lucide-react');
 
 
+// src/features/tokenusage/lib/formatters.ts
+
+
+function createUsageFormatters(locale, currency) {
+  const symbol = _nullishCoalesce(_optionalChain([new Intl.NumberFormat(locale, { style: "currency", currency, currencyDisplay: "narrowSymbol" }), 'access', _3 => _3.formatToParts, 'call', _4 => _4(0), 'access', _5 => _5.find, 'call', _6 => _6((part) => part.type === "currency"), 'optionalAccess', _7 => _7.value]), () => ( currency));
+  const decimal = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (value, decimals) => value.toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }), "decimal");
+  const dayFormat = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", timeZone: "UTC" });
+  const monthFormat = new Intl.DateTimeFormat(locale, { month: "short", year: "numeric", timeZone: "UTC" });
+  const compactFormat = new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 });
+  const collator = new Intl.Collator(locale);
+  return {
+    decimal,
+    metricValue(value, metric) {
+      if (metric === "cost") return `${symbol} ${decimal(value, 2)}`;
+      if (metric === "credits") return decimal(value, 1);
+      return decimal(value, 0);
+    },
+    currency(value, decimals) {
+      return `${symbol} ${decimal(value, decimals)}`;
+    },
+    percent(value, decimals = 1) {
+      return `${decimal(value, decimals)} %`;
+    },
+    compact(value) {
+      return compactFormat.format(value);
+    },
+    bucketDate(iso, granularity) {
+      const date = /* @__PURE__ */ new Date(`${iso}T00:00:00.000Z`);
+      return granularity === "month" ? monthFormat.format(date) : dayFormat.format(date);
+    },
+    compare(a, b) {
+      return collator.compare(a, b);
+    }
+  };
+}
+_chunk7QVYU63Ejs.__name.call(void 0, createUsageFormatters, "createUsageFormatters");
+function useUsageFormatters() {
+  const locale = _nextintl.useLocale.call(void 0, );
+  const currency = _chunkRTOC53EZjs.getTokenUsageCurrency.call(void 0, );
+  return _react.useMemo.call(void 0, () => createUsageFormatters(locale, currency), [locale, currency]);
+}
+_chunk7QVYU63Ejs.__name.call(void 0, useUsageFormatters, "useUsageFormatters");
+
 // src/features/tokenusage/lib/metrics.ts
-var LOCALE = "it-IT";
 function metricValue(row, metric) {
   if (metric === "cost") return row.cost;
   if (metric === "credits") return row.credits;
   return row.tokensIn + row.tokensOut;
 }
 _chunk7QVYU63Ejs.__name.call(void 0, metricValue, "metricValue");
-function formatDecimal(value, decimals) {
-  return value.toLocaleString(LOCALE, {
-    minimumFractionDigits: decimals,
-    maximumFractionDigits: decimals
-  });
-}
-_chunk7QVYU63Ejs.__name.call(void 0, formatDecimal, "formatDecimal");
-function formatMetricValue(value, metric) {
-  if (metric === "cost") return `\u20AC ${formatDecimal(value, 2)}`;
-  if (metric === "credits") return formatDecimal(value, 2);
-  return formatDecimal(value, 0);
-}
-_chunk7QVYU63Ejs.__name.call(void 0, formatMetricValue, "formatMetricValue");
-function formatPercent(value, decimals = 1) {
-  return `${formatDecimal(value, decimals)} %`;
-}
-_chunk7QVYU63Ejs.__name.call(void 0, formatPercent, "formatPercent");
 function cacheHitPercentage(cached, tokensIn) {
   if (!tokensIn) return 0;
   return cached / tokensIn * 100;
@@ -389,6 +421,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, percentageDelta, "percentageDelta");
 var ZERO = { cost: 0, credits: 0, tokensIn: 0, tokensOut: 0, cached: 0, calls: 0 };
 function TokenUsageAdminTiles({ summary, metric, singleCustomerMode }) {
   const t = _nextintl.useTranslations.call(void 0, );
+  const { decimal, metricValue: formatValue, currency, percent } = useUsageFormatters();
   const rowFor = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (scope, window) => _nullishCoalesce(summary.find((r) => r.scope === scope && r.window === window), () => ( ZERO)), "rowFor");
   const customerCurrent = rowFor("customer", "current");
   const customerPrevious = rowFor("customer", "previous");
@@ -399,15 +432,16 @@ function TokenUsageAdminTiles({ summary, metric, singleCustomerMode }) {
   const averagePerCall = totalCurrent.calls ? totalCurrent.cost / totalCurrent.calls : 0;
   const cacheHit = cacheHitPercentage(totalCurrent.cached, totalCurrent.tokensIn);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-3", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkV66AZWPGjs.cn.call(void 0, "grid gap-3", singleCustomerMode ? "sm:grid-cols-1" : "sm:grid-cols-2"), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkRTOC53EZjs.cn.call(void 0, "grid gap-3", singleCustomerMode ? "sm:grid-cols-1" : "sm:grid-cols-2"), children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         LeadTile,
         {
           testId: "tile-customer",
           label: t("token_usage.admin.customer_spend"),
-          value: formatMetricValue(metricValue(customerCurrent, metric), metric),
+          value: formatValue(metricValue(customerCurrent, metric), metric),
           delta: percentageDelta(metricValue(customerCurrent, metric), metricValue(customerPrevious, metric)),
-          previousLabel: t("token_usage.admin.vs_previous")
+          previousLabel: t("token_usage.admin.vs_previous"),
+          decimal
         }
       ),
       !singleCustomerMode && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -415,9 +449,10 @@ function TokenUsageAdminTiles({ summary, metric, singleCustomerMode }) {
         {
           testId: "tile-platform",
           label: t("token_usage.admin.platform_spend"),
-          value: formatMetricValue(metricValue(platformCurrent, metric), metric),
+          value: formatValue(metricValue(platformCurrent, metric), metric),
           delta: percentageDelta(metricValue(platformCurrent, metric), metricValue(platformPrevious, metric)),
-          previousLabel: t("token_usage.admin.vs_previous")
+          previousLabel: t("token_usage.admin.vs_previous"),
+          decimal
         }
       )
     ] }),
@@ -427,8 +462,9 @@ function TokenUsageAdminTiles({ summary, metric, singleCustomerMode }) {
         {
           testId: "tile-total",
           label: t("token_usage.admin.total_cost"),
-          value: formatMetricValue(metricValue(totalCurrent, metric), metric),
-          delta: percentageDelta(metricValue(totalCurrent, metric), metricValue(totalPrevious, metric))
+          value: formatValue(metricValue(totalCurrent, metric), metric),
+          delta: percentageDelta(metricValue(totalCurrent, metric), metricValue(totalPrevious, metric)),
+          decimal
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -436,7 +472,8 @@ function TokenUsageAdminTiles({ summary, metric, singleCustomerMode }) {
         {
           testId: "tile-avg-per-call",
           label: t("token_usage.admin.avg_per_call"),
-          value: `\u20AC ${formatDecimal(averagePerCall, 4)}`
+          value: currency(averagePerCall, 4),
+          decimal
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -444,7 +481,8 @@ function TokenUsageAdminTiles({ summary, metric, singleCustomerMode }) {
         {
           testId: "tile-cache-hit",
           label: t("token_usage.admin.cache_hit"),
-          value: formatPercent(cacheHit)
+          value: percent(cacheHit),
+          decimal
         }
       )
     ] })
@@ -456,13 +494,14 @@ function LeadTile({
   label,
   value,
   delta,
-  previousLabel
+  previousLabel,
+  decimal
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.Card, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.CardContent, { className: "grid gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.Card, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.CardContent, { className: "grid gap-1", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: label }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-primary text-xl font-semibold tabular-nums", children: value }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Delta, { testId: `${testId}-delta`, delta }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Delta, { testId: `${testId}-delta`, delta, decimal }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: previousLabel })
     ] })
   ] }) });
@@ -472,18 +511,23 @@ function SupportingTile({
   testId,
   label,
   value,
-  delta
+  delta,
+  decimal
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.CardContent, { className: "grid gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.CardContent, { className: "grid gap-1", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: label }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-medium tabular-nums", children: value }),
-      delta !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Delta, { testId: `${testId}-delta`, delta })
+      delta !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Delta, { testId: `${testId}-delta`, delta, decimal })
     ] })
   ] }) });
 }
 _chunk7QVYU63Ejs.__name.call(void 0, SupportingTile, "SupportingTile");
-function Delta({ testId, delta }) {
+function Delta({
+  testId,
+  delta,
+  decimal
+}) {
   if (delta === void 0) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-testid": testId, className: "text-muted-foreground text-xs", children: "\u2014" });
   }
@@ -493,13 +537,13 @@ function Delta({ testId, delta }) {
     "span",
     {
       "data-testid": testId,
-      className: _chunkV66AZWPGjs.cn.call(void 0, 
+      className: _chunkRTOC53EZjs.cn.call(void 0, 
         "inline-flex items-center gap-0.5 text-xs tabular-nums",
         increased ? "text-success" : "text-destructive"
       ),
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { "aria-hidden": true, className: "size-3" }),
-        formatDecimal(Math.abs(delta), 0),
+        decimal(Math.abs(delta), 0),
         " %"
       ]
     }
@@ -514,6 +558,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, Delta, "Delta");
 
 function TokenUsageBreakdownTable({ rows, metric }) {
   const t = _nextintl.useTranslations.call(void 0, );
+  const { decimal, metricValue: formatValue, percent, compare } = useUsageFormatters();
   const [sort, setSort] = _react.useState.call(void 0, void 0);
   const showActiveUsers = rows.some((row) => row.activeUsers !== void 0);
   const total = _react.useMemo.call(void 0, () => rows.reduce((sum, row) => sum + metricValue(row, metric), 0), [rows, metric]);
@@ -540,13 +585,13 @@ function TokenUsageBreakdownTable({ rows, metric }) {
       const left = sortValue(a, sort.key);
       const right = sortValue(b, sort.key);
       if (typeof left === "string" || typeof right === "string") {
-        return String(left).localeCompare(String(right), "it-IT") * factor;
+        return compare(String(left), String(right)) * factor;
       }
       return (left - right) * factor;
     });
-  }, [rows, sort, metric]);
+  }, [rows, sort, metric, compare]);
   const toggleSort = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (key) => setSort(
-    (current) => _optionalChain([current, 'optionalAccess', _3 => _3.key]) === key ? { key, direction: current.direction === "desc" ? "asc" : "desc" } : { key, direction: "desc" }
+    (current) => _optionalChain([current, 'optionalAccess', _8 => _8.key]) === key ? { key, direction: current.direction === "desc" ? "asc" : "desc" } : { key, direction: "desc" }
   ), "toggleSort");
   const columns = [
     { key: "label", label: t("token_usage.admin.columns.label"), numeric: false },
@@ -566,36 +611,36 @@ function TokenUsageBreakdownTable({ rows, metric }) {
     // The package's <Table> wraps itself in an `overflow-x-clip` container, which
     // would swallow the overflow before this scroller ever saw it — hence the
     // child override. Wide metric tables must scroll, never widen the page.
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.Table, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableHead, { className: _chunkV66AZWPGjs.cn.call(void 0, column.numeric && "text-right"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.Table, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableHead, { className: _chunkRTOC53EZjs.cn.call(void 0, column.numeric && "text-right"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "button",
         {
           type: "button",
           onClick: () => toggleSort(column.key),
-          className: _chunkV66AZWPGjs.cn.call(void 0, 
+          className: _chunkRTOC53EZjs.cn.call(void 0, 
             "hover:text-primary inline-flex items-center gap-1 text-xs font-medium",
             column.numeric && "flex-row-reverse"
           ),
           children: [
             column.label,
-            _optionalChain([sort, 'optionalAccess', _4 => _4.key]) === column.key && (sort.direction === "desc" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowDownIcon, { "aria-hidden": true, className: "size-3" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowUpIcon, { "aria-hidden": true, className: "size-3" }))
+            _optionalChain([sort, 'optionalAccess', _9 => _9.key]) === column.key && (sort.direction === "desc" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowDownIcon, { "aria-hidden": true, className: "size-3" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowUpIcon, { "aria-hidden": true, className: "size-3" }))
           ]
         }
       ) }, column.key)) }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableBody, { children: sortedRows.map((row) => {
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableBody, { children: sortedRows.map((row) => {
         const value = metricValue(row, metric);
         const share = total > 0 ? value / total * 100 : 0;
-        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableCell, { className: "text-muted-foreground text-xs", children: _nullishCoalesce(row.sublabel, () => ( "")) }),
-          showActiveUsers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableCell, { className: "text-right text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : formatDecimal(row.activeUsers, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.calls, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensIn, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensOut, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(cacheHitPercentage(row.cached, row.tokensIn)) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.cost, "cost") }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.credits, "credits") }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(share) })
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableCell, { className: "text-muted-foreground text-xs", children: _nullishCoalesce(row.sublabel, () => ( "")) }),
+          showActiveUsers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableCell, { className: "text-right text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : decimal(row.activeUsers, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableCell, { className: "text-right text-xs tabular-nums", children: decimal(row.calls, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableCell, { className: "text-right text-xs tabular-nums", children: decimal(row.tokensIn, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableCell, { className: "text-right text-xs tabular-nums", children: decimal(row.tokensOut, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableCell, { className: "text-right text-xs tabular-nums", children: percent(cacheHitPercentage(row.cached, row.tokensIn)) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableCell, { className: "text-right text-xs tabular-nums", children: formatValue(row.cost, "cost") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableCell, { className: "text-right text-xs tabular-nums", children: formatValue(row.credits, "credits") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.TableCell, { className: "text-right text-xs tabular-nums", children: percent(share) })
         ] }, row.id);
       }) })
     ] }) })
@@ -654,6 +699,7 @@ _chunk7QVYU63Ejs.__name.call(void 0, seriesColor, "seriesColor");
 
 function TokenUsageRankedBar({ rows, metric, emptyLabel, labelsAreOperationTypes = false }) {
   const t = _nextintl.useTranslations.call(void 0, );
+  const { metricValue: formatValue, percent } = useUsageFormatters();
   const renderLabel = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (row) => {
     if (row.id === "other") return t("token_usage.admin.other");
     if (!labelsAreOperationTypes) return row.label;
@@ -688,13 +734,13 @@ function TokenUsageRankedBar({ rows, metric, emptyLabel, labelsAreOperationTypes
           }
         ) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-testid": `ranked-value-${row.id}`, className: "text-right text-xs tabular-nums", children: formatMetricValue(value, metric) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-testid": `ranked-value-${row.id}`, className: "text-right text-xs tabular-nums", children: formatValue(value, metric) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "span",
         {
           "data-testid": `ranked-share-${row.id}`,
           className: "text-muted-foreground w-16 text-right text-xs tabular-nums",
-          children: formatPercent(share)
+          children: percent(share)
         }
       )
     ] }, row.id);
@@ -732,10 +778,9 @@ var inferGranularity = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (buc
   if (smallestGap >= 7) return "week";
   return "day";
 }, "inferGranularity");
-var bucketFormatter = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (granularity) => granularity === "month" ? new Intl.DateTimeFormat("it-IT", { month: "short", year: "numeric", timeZone: "UTC" }) : new Intl.DateTimeFormat("it-IT", { day: "numeric", month: "short", timeZone: "UTC" }), "bucketFormatter");
-var compactNumber = new Intl.NumberFormat("it-IT", { notation: "compact", maximumFractionDigits: 1 });
 function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
   const t = _nextintl.useTranslations.call(void 0, );
+  const { compact, bucketDate, metricValue: formatValue } = useUsageFormatters();
   const { resolvedTheme } = _nextthemes.useTheme.call(void 0, );
   const mode = resolvedTheme === "dark" ? "dark" : "light";
   const { chartData, seriesKeys } = _react.useMemo.call(void 0, () => {
@@ -766,7 +811,7 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
   const seriesLabel = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (series) => {
     if (series === OTHER_SERIES) {
       const key = "token_usage.series.other";
-      return t.has(key) ? t(key) : "Altro";
+      return t.has(key) ? t(key) : "Other";
     }
     if (stackBy === "company") return series;
     return operationLabel(
@@ -781,15 +826,14 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
   );
   if (chartData.length === 0) {
     const key = "token_usage.timeline.empty";
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: className ? `text-muted-foreground text-sm ${className}` : "text-muted-foreground text-sm", children: t.has(key) ? t(key) : "Nessun dato nel periodo selezionato" });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: className ? `text-muted-foreground text-sm ${className}` : "text-muted-foreground text-sm", children: t.has(key) ? t(key) : "No data in the selected period" });
   }
   const granularity = inferGranularity(chartData.map((entry) => entry.bucket));
-  const formatBucket = bucketFormatter(granularity);
   const seriesColorFor = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (series, index) => series === OTHER_SERIES ? OTHER_COLOR : seriesColor(index, mode), "seriesColorFor");
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", "data-testid": "timeline-data", children: JSON.stringify(chartData) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", "data-testid": "timeline-series", children: JSON.stringify(seriesKeys) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.ChartContainer, { config: chartConfig, className: "aspect-auto h-72 w-full", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _recharts.BarChart, { accessibilityLayer: true, data: chartData, margin: { top: 8, right: 8, bottom: 0, left: 0 }, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.ChartContainer, { config: chartConfig, className: "aspect-auto h-72 w-full", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _recharts.BarChart, { accessibilityLayer: true, data: chartData, margin: { top: 8, right: 8, bottom: 0, left: 0 }, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _recharts.CartesianGrid, { vertical: false }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _recharts.XAxis,
@@ -799,7 +843,7 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
           axisLine: false,
           tickMargin: 8,
           minTickGap: 16,
-          tickFormatter: (value) => formatBucket.format(/* @__PURE__ */ new Date(`${value}T00:00:00.000Z`))
+          tickFormatter: (value) => bucketDate(value, granularity)
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -809,21 +853,23 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
           axisLine: false,
           tickMargin: 8,
           width: 48,
-          tickFormatter: (value) => compactNumber.format(value)
+          tickFormatter: (value) => compact(value)
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkGYGMEDVSjs.ChartTooltip,
+        _chunk7HKJNUW7js.ChartTooltip,
         {
           content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkGYGMEDVSjs.ChartTooltipContent,
+            _chunk7HKJNUW7js.ChartTooltipContent,
             {
-              labelFormatter: (value) => formatBucket.format(/* @__PURE__ */ new Date(`${String(value)}T00:00:00.000Z`))
+              labelFormatter: (value) => bucketDate(String(value), granularity),
+              valueFormatter: (value) => formatValue(Number(value), metric),
+              hideZeroValues: true
             }
           )
         }
       ),
-      seriesKeys.length >= 2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.ChartLegend, { content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.ChartLegendContent, {}) }) : null,
+      seriesKeys.length >= 2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.ChartLegend, { content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.ChartLegendContent, {}) }) : null,
       seriesKeys.map((series, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _recharts.Bar,
         {
@@ -860,6 +906,11 @@ function TokenUsageAdminContainer() {
     isLoading,
     error
   } = useTokenUsageAdmin();
+  const platformIsEmpty = _react.useMemo.call(void 0, 
+    () => summary.filter((row) => row.scope === "platform").every((row) => row.cost === 0 && row.credits === 0 && row.tokensIn === 0 && row.tokensOut === 0),
+    [summary]
+  );
+  const hidePlatform = singleCustomerMode || platformIsEmpty;
   const stackByItems = _react.useMemo.call(void 0, 
     () => ({
       scope: t("token_usage.admin.stack.scope"),
@@ -869,19 +920,19 @@ function TokenUsageAdminContainer() {
     [t]
   );
   if (error) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
   }
-  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.RoundPageContainer, { fullWidth: true, forceHeader: true });
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.RoundPageContainer, { fullWidth: true, forceHeader: true });
   const emptyLabel = t("token_usage.admin.no_data");
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-4 p-4", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageAdminTiles, { summary, metric: filters.metric, singleCustomerMode }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.CardHeader, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardTitle, { children: t("token_usage.admin.usage_over_time") }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardAction, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageAdminTiles, { summary, metric: filters.metric, singleCustomerMode: hidePlatform }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.CardHeader, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardTitle, { children: t("token_usage.admin.usage_over_time") }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardAction, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.admin.stack_by") }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkGYGMEDVSjs.Select,
+            _chunk7HKJNUW7js.Select,
             {
               items: stackByItems,
               value: filters.stackBy,
@@ -889,29 +940,29 @@ function TokenUsageAdminContainer() {
                 if (value) setFilters({ stackBy: value });
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.SelectValue, {}) }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.SelectItem, { value, children: stackByItems[value] }, value)) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.SelectValue, {}) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.SelectItem, { value, children: stackByItems[value] }, value)) })
               ]
             }
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: filters.metric, stackBy: filters.stackBy }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: filters.metric, stackBy: filters.stackBy }) })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardTitle, { children: t("token_usage.admin.by_company") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardTitle, { children: t("token_usage.admin.by_company") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardTitle, { children: t("token_usage.admin.by_user") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardTitle, { children: t("token_usage.admin.by_user") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkV66AZWPGjs.cn.call(void 0, "grid gap-4", !singleCustomerMode && "md:grid-cols-2"), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkRTOC53EZjs.cn.call(void 0, "grid gap-4", !hidePlatform && "md:grid-cols-2"), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byCustomerOperation,
@@ -921,9 +972,9 @@ function TokenUsageAdminContainer() {
           }
         ) })
       ] }),
-      !singleCustomerMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      !hidePlatform && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byOperation,
@@ -934,14 +985,57 @@ function TokenUsageAdminContainer() {
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGYGMEDVSjs.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardTitle, { children: t("token_usage.admin.detail") }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGYGMEDVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardTitle, { children: t("token_usage.admin.detail") }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
     ] })
   ] }) });
 }
 _chunk7QVYU63Ejs.__name.call(void 0, TokenUsageAdminContainer, "TokenUsageAdminContainer");
 
+// src/features/tokenusage/data/TokenUsageReportService.ts
+function withFilters2(endpoint, filters) {
+  endpoint.addAdditionalParam("from", filters.from);
+  endpoint.addAdditionalParam("to", filters.to);
+  return endpoint;
+}
+_chunk7QVYU63Ejs.__name.call(void 0, withFilters2, "withFilters");
+var TokenUsageReportService = class extends _chunkRTOC53EZjs.AbstractService {
+  static {
+    _chunk7QVYU63Ejs.__name.call(void 0, this, "TokenUsageReportService");
+  }
+  /** Two rows: window "current" and "previous". */
+  static async getSummary(filters) {
+    const endpoint = withFilters2(new (0, _chunkRTOC53EZjs.EndpointCreator)({ endpoint: _chunkRTOC53EZjs.Modules.TokenUsageReportSummary }), filters);
+    return this.callApi({
+      type: _chunkRTOC53EZjs.Modules.TokenUsageReportSummary,
+      method: "GET" /* GET */,
+      endpoint: endpoint.generate()
+    });
+  }
+  static async getTimeline(params) {
+    const endpoint = withFilters2(new (0, _chunkRTOC53EZjs.EndpointCreator)({ endpoint: _chunkRTOC53EZjs.Modules.TokenUsageReportTimeline }), params);
+    endpoint.addAdditionalParam("granularity", params.granularity);
+    return this.callApi({
+      type: _chunkRTOC53EZjs.Modules.TokenUsageReportTimeline,
+      method: "GET" /* GET */,
+      endpoint: endpoint.generate()
+    });
+  }
+  static async getBreakdown(params) {
+    const endpoint = withFilters2(new (0, _chunkRTOC53EZjs.EndpointCreator)({ endpoint: _chunkRTOC53EZjs.Modules.TokenUsageReportBreakdown }), params);
+    endpoint.addAdditionalParam("dimension", params.dimension);
+    if (params.targetLabel) endpoint.addAdditionalParam("targetLabel", params.targetLabel);
+    endpoint.addAdditionalParam("metric", params.metric);
+    if (params.limit !== void 0) endpoint.addAdditionalParam("limit", String(params.limit));
+    return this.callApi({
+      type: _chunkRTOC53EZjs.Modules.TokenUsageReportBreakdown,
+      method: "GET" /* GET */,
+      endpoint: endpoint.generate()
+    });
+  }
+};
+
 // src/features/tokenusage/i18n-keys.ts
 var TOKEN_USAGE_ADMIN_I18N_KEYS = [
   // Page + KPI tiles
@@ -991,6 +1085,273 @@ var TOKEN_USAGE_ADMIN_I18N_KEYS = [
   "token_usage.series.other",
   "token_usage.timeline.empty"
 ];
+var TOKEN_USAGE_REPORT_I18N_KEYS = [
+  // Page + KPI tiles
+  "token_usage.report.title",
+  "token_usage.report.used_in_period",
+  "token_usage.report.vs_previous",
+  "token_usage.report.monthly_left",
+  "token_usage.report.extra_credits",
+  "token_usage.report.calls",
+  // Panel titles
+  "token_usage.report.usage_over_time",
+  "token_usage.report.by_operation",
+  // Shared states
+  "token_usage.report.no_data"
+];
+
+// src/features/tokenusage/contexts/TokenUsageReportContext.tsx
+
+
+
+// src/features/tokenusage/components/TokenUsageReportFilterBar.tsx
+
+function TokenUsageReportFilterBar({ onChange }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk7HKJNUW7js.DateRangeSelector,
+    {
+      onDateChange: (range) => {
+        if (!_optionalChain([range, 'optionalAccess', _10 => _10.from]) || !_optionalChain([range, 'optionalAccess', _11 => _11.to])) return;
+        onChange({ from: range.from.toISOString(), to: range.to.toISOString() });
+      }
+    }
+  ) });
+}
+_chunk7QVYU63Ejs.__name.call(void 0, TokenUsageReportFilterBar, "TokenUsageReportFilterBar");
+
+// src/features/tokenusage/contexts/TokenUsageReportContext.tsx
+
+var TOKEN_USAGE_REPORT_PAGE_URL = "/tokenusage";
+var DEFAULT_TOP_N2 = 10;
+var REPORT_METRIC = "credits";
+var TokenUsageReportContext = _react.createContext.call(void 0, void 0);
+function defaultRange2() {
+  const now = /* @__PURE__ */ new Date();
+  const start = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0, 0);
+  return { from: start.toISOString(), to: now.toISOString() };
+}
+_chunk7QVYU63Ejs.__name.call(void 0, defaultRange2, "defaultRange");
+var TokenUsageReportProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, ({
+  children,
+  targetLabel,
+  targetPanelTitleKey,
+  initialFrom,
+  initialTo,
+  topN = DEFAULT_TOP_N2,
+  pageUrl = TOKEN_USAGE_REPORT_PAGE_URL
+}) => {
+  const t = _nextintl.useTranslations.call(void 0, );
+  const generateUrl = _chunk7HKJNUW7js.usePageUrlGenerator.call(void 0, );
+  const [filters, setFilterState] = _react.useState.call(void 0, () => {
+    const range = defaultRange2();
+    return { from: _nullishCoalesce(initialFrom, () => ( range.from)), to: _nullishCoalesce(initialTo, () => ( range.to)) };
+  });
+  const [summary, setSummary] = _react.useState.call(void 0, []);
+  const [timeline, setTimeline] = _react.useState.call(void 0, []);
+  const [byOperation, setByOperation] = _react.useState.call(void 0, []);
+  const [byTarget, setByTarget] = _react.useState.call(void 0, []);
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, true);
+  const [error, setError] = _react.useState.call(void 0, null);
+  const { from, to } = filters;
+  _react.useEffect.call(void 0, () => {
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    const base = { from, to };
+    Promise.all([
+      TokenUsageReportService.getSummary(base),
+      // granularity is pinned to "day": week/month bucketing buys nothing on the
+      // ranges a single tenant browses.
+      TokenUsageReportService.getTimeline({ ...base, granularity: "day" }),
+      TokenUsageReportService.getBreakdown({ ...base, dimension: "operation", metric: REPORT_METRIC, limit: topN }),
+      // No targetLabel means the host app never opted in, so the request is
+      // skipped entirely rather than issued and discarded.
+      targetLabel ? TokenUsageReportService.getBreakdown({
+        ...base,
+        dimension: "target",
+        targetLabel,
+        metric: REPORT_METRIC,
+        limit: topN
+      }) : Promise.resolve([])
+    ]).then(([nextSummary, nextTimeline, nextByOperation, nextByTarget]) => {
+      if (cancelled) return;
+      setSummary(_nullishCoalesce(nextSummary, () => ( [])));
+      setTimeline(_nullishCoalesce(nextTimeline, () => ( [])));
+      setByOperation(_nullishCoalesce(nextByOperation, () => ( [])));
+      setByTarget(_nullishCoalesce(nextByTarget, () => ( [])));
+    }).catch((err) => {
+      if (cancelled) return;
+      console.error("Failed to load token usage:", err);
+      setError(err instanceof Error ? err.message : String(err));
+    }).finally(() => {
+      if (cancelled) return;
+      setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [from, to, targetLabel, topN]);
+  const setFilters = _react.useCallback.call(void 0, (next) => {
+    setFilterState((prev) => ({ ...prev, ...next }));
+  }, []);
+  const breadcrumb = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, () => [
+    { name: t("token_usage.report.title"), href: generateUrl({ page: pageUrl }) }
+  ], "breadcrumb");
+  const title = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, () => ({
+    type: t("token_usage.report.title"),
+    functions: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageReportFilterBar, { onChange: setFilters }, "tokenUsageReportFilterBar")
+  }), "title");
+  const contextValue = _react.useMemo.call(void 0, 
+    () => ({ summary, timeline, byOperation, byTarget, targetPanelTitleKey, filters, setFilters, isLoading, error }),
+    [summary, timeline, byOperation, byTarget, targetPanelTitleKey, filters, setFilters, isLoading, error]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.SharedProvider, { value: { breadcrumbs: breadcrumb(), title: title() }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageReportContext.Provider, { value: contextValue, children }) });
+}, "TokenUsageReportProvider");
+var useTokenUsageReport = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, () => {
+  const ctx = _react.useContext.call(void 0, TokenUsageReportContext);
+  if (!ctx) {
+    throw new Error("useTokenUsageReport() called outside <TokenUsageReportProvider>.");
+  }
+  return ctx;
+}, "useTokenUsageReport");
+
+// src/features/tokenusage/components/TokenUsageReportContainer.tsx
+
+
+// src/features/tokenusage/components/TokenUsageReportTiles.tsx
+
+
+
+var ZERO2 = { cost: 0, credits: 0, tokensIn: 0, tokensOut: 0, cached: 0, calls: 0 };
+function TokenUsageReportTiles({ summary, metric, balances }) {
+  const t = _nextintl.useTranslations.call(void 0, );
+  const { decimal, metricValue: formatValue } = useUsageFormatters();
+  const rowFor = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (window) => _nullishCoalesce(summary.find((row) => row.window === window), () => ( ZERO2)), "rowFor");
+  const current = rowFor("current");
+  const previous = rowFor("previous");
+  const monthlyPercentage = balances && balances.monthlyCredits > 0 ? balances.availableMonthlyCredits / balances.monthlyCredits * 100 : 0;
+  const monthlyColor = monthlyPercentage > 75 ? "text-success" : monthlyPercentage >= 5 ? "text-warning" : "text-destructive";
+  const whole = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (value) => decimal(Math.max(0, Math.floor(value)), 0), "whole");
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-3", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.Card, { "data-testid": "tile-used", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.CardContent, { className: "grid gap-1", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.report.used_in_period") }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-primary text-xl font-semibold tabular-nums", children: formatValue(metricValue(current, metric), metric) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          Delta2,
+          {
+            testId: "tile-used-delta",
+            delta: percentageDelta(metricValue(current, metric), metricValue(previous, metric)),
+            decimal
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.report.vs_previous") })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-3 sm:grid-cols-3", children: [
+      balances && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.Card, { "data-testid": "tile-monthly", size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.CardContent, { className: "grid gap-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.report.monthly_left") }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-baseline gap-1", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-testid": "tile-monthly-value", className: _chunkRTOC53EZjs.cn.call(void 0, "text-sm font-medium tabular-nums", monthlyColor), children: whole(balances.availableMonthlyCredits) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-muted-foreground text-xs tabular-nums", children: [
+            "/ ",
+            whole(balances.monthlyCredits)
+          ] })
+        ] })
+      ] }) }),
+      balances && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.Card, { "data-testid": "tile-extra", size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.CardContent, { className: "grid gap-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.report.extra_credits") }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-medium tabular-nums", children: whole(balances.availableExtraCredits) })
+      ] }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.Card, { "data-testid": "tile-calls", size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.CardContent, { className: "grid gap-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.report.calls") }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-medium tabular-nums", children: decimal(current.calls, 0) })
+      ] }) })
+    ] })
+  ] });
+}
+_chunk7QVYU63Ejs.__name.call(void 0, TokenUsageReportTiles, "TokenUsageReportTiles");
+function Delta2({
+  testId,
+  delta,
+  decimal
+}) {
+  if (delta === void 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-testid": testId, className: "text-muted-foreground text-xs", children: "\u2014" });
+  }
+  const increased = delta >= 0;
+  const Icon = increased ? _lucidereact.ArrowUpIcon : _lucidereact.ArrowDownIcon;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "span",
+    {
+      "data-testid": testId,
+      className: _chunkRTOC53EZjs.cn.call(void 0, 
+        "inline-flex items-center gap-0.5 text-xs tabular-nums",
+        increased ? "text-warning" : "text-success"
+      ),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { "aria-hidden": true, className: "size-3" }),
+        decimal(Math.abs(delta), 0),
+        " %"
+      ]
+    }
+  );
+}
+_chunk7QVYU63Ejs.__name.call(void 0, Delta2, "Delta");
+
+// src/features/tokenusage/components/TokenUsageReportContainer.tsx
+
+function TokenUsageReportContainer({ balances = null }) {
+  const t = _nextintl.useTranslations.call(void 0, );
+  const { summary, timeline, byOperation, byTarget, isLoading, error, targetPanelTitleKey } = useTokenUsageReport();
+  if (error) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
+  }
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.RoundPageContainer, { fullWidth: true, forceHeader: true });
+  const emptyLabel = t("token_usage.report.no_data");
+  const targetTitle = targetPanelTitleKey && byTarget.length > 0 ? t(targetPanelTitleKey) : void 0;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageReportTiles, { summary, metric: "credits", balances }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardTitle, { children: t("token_usage.report.usage_over_time") }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: "credits", stackBy: "type" }) })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkRTOC53EZjs.cn.call(void 0, "grid gap-4", targetTitle && "md:grid-cols-2"), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardTitle, { children: t("token_usage.report.by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          TokenUsageRankedBar,
+          {
+            rows: byOperation,
+            metric: "credits",
+            emptyLabel,
+            labelsAreOperationTypes: true
+          }
+        ) })
+      ] }),
+      targetTitle && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk7HKJNUW7js.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardTitle, { children: targetTitle }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7HKJNUW7js.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byTarget, metric: "credits", emptyLabel }) })
+      ] })
+    ] })
+  ] }) });
+}
+_chunk7QVYU63Ejs.__name.call(void 0, TokenUsageReportContainer, "TokenUsageReportContainer");
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -1008,5 +1369,5 @@ var TOKEN_USAGE_ADMIN_I18N_KEYS = [
 
 
 
-exports.TOKEN_USAGE_ADMIN_I18N_KEYS = TOKEN_USAGE_ADMIN_I18N_KEYS; exports.TokenUsageAdminBreakdown = _chunkV66AZWPGjs.TokenUsageAdminBreakdown; exports.TokenUsageAdminBreakdownModule = _chunkV66AZWPGjs.TokenUsageAdminBreakdownModule; exports.TokenUsageAdminContainer = TokenUsageAdminContainer; exports.TokenUsageAdminFilterBar = TokenUsageAdminFilterBar; exports.TokenUsageAdminProvider = TokenUsageAdminProvider; exports.TokenUsageAdminService = TokenUsageAdminService; exports.TokenUsageAdminSummary = _chunkV66AZWPGjs.TokenUsageAdminSummary; exports.TokenUsageAdminSummaryModule = _chunkV66AZWPGjs.TokenUsageAdminSummaryModule; exports.TokenUsageAdminTiles = TokenUsageAdminTiles; exports.TokenUsageAdminTimeline = _chunkV66AZWPGjs.TokenUsageAdminTimeline; exports.TokenUsageAdminTimelineModule = _chunkV66AZWPGjs.TokenUsageAdminTimelineModule; exports.TokenUsageBreakdownTable = TokenUsageBreakdownTable; exports.TokenUsageRankedBar = TokenUsageRankedBar; exports.TokenUsageTimelineChart = TokenUsageTimelineChart; exports.useTokenUsageAdmin = useTokenUsageAdmin;
+exports.TOKEN_USAGE_ADMIN_I18N_KEYS = TOKEN_USAGE_ADMIN_I18N_KEYS; exports.TOKEN_USAGE_REPORT_I18N_KEYS = TOKEN_USAGE_REPORT_I18N_KEYS; exports.TokenUsageAdminBreakdown = _chunkRTOC53EZjs.TokenUsageAdminBreakdown; exports.TokenUsageAdminBreakdownModule = _chunkRTOC53EZjs.TokenUsageAdminBreakdownModule; exports.TokenUsageAdminContainer = TokenUsageAdminContainer; exports.TokenUsageAdminFilterBar = TokenUsageAdminFilterBar; exports.TokenUsageAdminProvider = TokenUsageAdminProvider; exports.TokenUsageAdminService = TokenUsageAdminService; exports.TokenUsageAdminSummary = _chunkRTOC53EZjs.TokenUsageAdminSummary; exports.TokenUsageAdminSummaryModule = _chunkRTOC53EZjs.TokenUsageAdminSummaryModule; exports.TokenUsageAdminTiles = TokenUsageAdminTiles; exports.TokenUsageAdminTimeline = _chunkRTOC53EZjs.TokenUsageAdminTimeline; exports.TokenUsageAdminTimelineModule = _chunkRTOC53EZjs.TokenUsageAdminTimelineModule; exports.TokenUsageBreakdownTable = TokenUsageBreakdownTable; exports.TokenUsageRankedBar = TokenUsageRankedBar; exports.TokenUsageReportBreakdown = _chunkRTOC53EZjs.TokenUsageReportBreakdown; exports.TokenUsageReportContainer = TokenUsageReportContainer; exports.TokenUsageReportFilterBar = TokenUsageReportFilterBar; exports.TokenUsageReportProvider = TokenUsageReportProvider; exports.TokenUsageReportService = TokenUsageReportService; exports.TokenUsageReportSummary = _chunkRTOC53EZjs.TokenUsageReportSummary; exports.TokenUsageReportTiles = TokenUsageReportTiles; exports.TokenUsageReportTimeline = _chunkRTOC53EZjs.TokenUsageReportTimeline; exports.TokenUsageTimelineChart = TokenUsageTimelineChart; exports.configureTokenUsage = _chunkRTOC53EZjs.configureTokenUsage; exports.createUsageFormatters = createUsageFormatters; exports.getTokenUsageCurrency = _chunkRTOC53EZjs.getTokenUsageCurrency; exports.tokenUsageModules = _chunkRTOC53EZjs.tokenUsageModules; exports.useTokenUsageAdmin = useTokenUsageAdmin; exports.useTokenUsageReport = useTokenUsageReport; exports.useUsageFormatters = useUsageFormatters;
 //# sourceMappingURL=index.js.map