@carlonicora/nextjs-jsonapi 1.143.1 → 2.0.1

package/dist/features/tokenusage/index.js

@@ -26,7 +26,7 @@
 
 
 
-var _chunkF6PZZ4KIjs = require('../../chunk-F6PZZ4KI.js');
+var _chunkR666YQGQjs = require('../../chunk-R666YQGQ.js');
 require('../../chunk-UXJAS6C5.js');
 
 
@@ -64,7 +64,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, 
-      _chunkF6PZZ4KIjs.DateRangeSelector,
+      _chunkR666YQGQjs.DateRangeSelector,
       {
         onDateChange: (range) => {
           if (!_optionalChain([range, 'optionalAccess', _ => _.from]) || !_optionalChain([range, 'optionalAccess', _2 => _2.to])) return;
@@ -99,16 +99,16 @@ function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, o
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkF6PZZ4KIjs.Select,
+      _chunkR666YQGQjs.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, _chunkF6PZZ4KIjs.SelectTrigger, { className: "w-56", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkF6PZZ4KIjs.SelectContent, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
-            companies.map((company) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.SelectItem, { value: company.id, children: company.label }, company.id))
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectTrigger, { className: "w-56", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.SelectContent, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
+            companies.map((company) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectItem, { value: company.id, children: company.label }, company.id))
           ] })
         ]
       }
@@ -131,7 +131,7 @@ function Segmented({
       children: options.map((option) => {
         const selected = option.value === value;
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkF6PZZ4KIjs.Button,
+          _chunkR666YQGQjs.Button,
           {
             type: "button",
             size: "sm",
@@ -212,7 +212,7 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
   topN = DEFAULT_TOP_N
 }) => {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkF6PZZ4KIjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkR666YQGQjs.usePageUrlGenerator.call(void 0, );
   const [filters, setFilterState] = _react.useState.call(void 0, () => {
     const range = defaultRange();
     return {
@@ -330,7 +330,7 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
       error
     ]
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.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, _chunkR666YQGQjs.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);
@@ -458,7 +458,7 @@ function LeadTile({
   delta,
   previousLabel
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.Card, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkF6PZZ4KIjs.CardContent, { className: "grid gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.Card, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.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: [
@@ -474,7 +474,7 @@ function SupportingTile({
   value,
   delta
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkF6PZZ4KIjs.CardContent, { className: "grid gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.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 }),
@@ -566,8 +566,8 @@ 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, _chunkF6PZZ4KIjs.Table, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableHead, { className: _chunkDS4IBFWAjs.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, _chunkR666YQGQjs.Table, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableHead, { className: _chunkDS4IBFWAjs.cn.call(void 0, column.numeric && "text-right"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "button",
         {
           type: "button",
@@ -582,20 +582,20 @@ function TokenUsageBreakdownTable({ rows, metric }) {
           ]
         }
       ) }, column.key)) }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableBody, { children: sortedRows.map((row) => {
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.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, _chunkF6PZZ4KIjs.TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableCell, { className: "text-muted-foreground text-xs", children: _nullishCoalesce(row.sublabel, () => ( "")) }),
-          showActiveUsers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableCell, { className: "text-right text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : formatDecimal(row.activeUsers, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.calls, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensIn, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensOut, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(cacheHitPercentage(row.cached, row.tokensIn)) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.cost, "cost") }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.credits, "credits") }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(share) })
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-muted-foreground text-xs", children: _nullishCoalesce(row.sublabel, () => ( "")) }),
+          showActiveUsers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : formatDecimal(row.activeUsers, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.calls, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensIn, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensOut, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(cacheHitPercentage(row.cached, row.tokensIn)) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.cost, "cost") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.credits, "credits") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(share) })
         ] }, row.id);
       }) })
     ] }) })
@@ -789,7 +789,7 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
   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, _chunkF6PZZ4KIjs.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, _chunkR666YQGQjs.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,
@@ -813,17 +813,17 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkF6PZZ4KIjs.ChartTooltip,
+        _chunkR666YQGQjs.ChartTooltip,
         {
           content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkF6PZZ4KIjs.ChartTooltipContent,
+            _chunkR666YQGQjs.ChartTooltipContent,
             {
               labelFormatter: (value) => formatBucket.format(/* @__PURE__ */ new Date(`${String(value)}T00:00:00.000Z`))
             }
           )
         }
       ),
-      seriesKeys.length >= 2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.ChartLegend, { content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.ChartLegendContent, {}) }) : null,
+      seriesKeys.length >= 2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.ChartLegend, { content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.ChartLegendContent, {}) }) : null,
       seriesKeys.map((series, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _recharts.Bar,
         {
@@ -869,19 +869,19 @@ function TokenUsageAdminContainer() {
     [t]
   );
   if (error) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.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, _chunkF6PZZ4KIjs.RoundPageContainer, { fullWidth: true, forceHeader: true });
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.RoundPageContainer, { fullWidth: true, forceHeader: true });
   const emptyLabel = t("token_usage.admin.no_data");
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-4 p-4", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.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, _chunkF6PZZ4KIjs.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkF6PZZ4KIjs.CardHeader, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardTitle, { children: t("token_usage.admin.usage_over_time") }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardAction, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.CardHeader, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.usage_over_time") }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.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, 
-            _chunkF6PZZ4KIjs.Select,
+            _chunkR666YQGQjs.Select,
             {
               items: stackByItems,
               value: filters.stackBy,
@@ -889,29 +889,29 @@ function TokenUsageAdminContainer() {
                 if (value) setFilters({ stackBy: value });
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.SelectValue, {}) }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.SelectItem, { value, children: stackByItems[value] }, value)) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectValue, {}) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectItem, { value, children: stackByItems[value] }, value)) })
               ]
             }
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: filters.metric, stackBy: filters.stackBy }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.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, _chunkF6PZZ4KIjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardTitle, { children: t("token_usage.admin.by_company") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.by_company") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkF6PZZ4KIjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardTitle, { children: t("token_usage.admin.by_user") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.by_user") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkDS4IBFWAjs.cn.call(void 0, "grid gap-4", !singleCustomerMode && "md:grid-cols-2"), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkF6PZZ4KIjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byCustomerOperation,
@@ -921,9 +921,9 @@ function TokenUsageAdminContainer() {
           }
         ) })
       ] }),
-      !singleCustomerMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkF6PZZ4KIjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      !singleCustomerMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byOperation,
@@ -934,9 +934,9 @@ function TokenUsageAdminContainer() {
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkF6PZZ4KIjs.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardTitle, { children: t("token_usage.admin.detail") }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkF6PZZ4KIjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.detail") }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
     ] })
   ] }) });
 }

package/dist/features/tokenusage/index.mjs

@@ -26,7 +26,7 @@ import {
   TableHeader,
   TableRow,
   usePageUrlGenerator
-} from "../../chunk-UGSOBBZH.mjs";
+} from "../../chunk-RVGBVVRD.mjs";
 import "../../chunk-HN5ED7OF.mjs";
 import {
   AbstractService,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "1.143.1",
+  "version": "2.0.1",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",
@@ -175,6 +175,8 @@
     "@eslint/js": "^9.39.5",
     "@semantic-release/changelog": "^7.0.0",
     "@semantic-release/git": "^11.0.1",
+    "@stripe/react-stripe-js": "^6.8.0",
+    "@stripe/stripe-js": "^9.13.0",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
@@ -197,11 +199,12 @@
     "eslint-plugin-prettier": "^5.5.6",
     "globals": "^17.8.0",
     "jsdom": "^30.0.1",
-    "next": "^16.2.12",
+    "next": "16.3.0",
     "next-intl": "^4.13.4",
     "prettier": "^3.9.6",
     "react": "19.2.8",
     "react-dom": "19.2.8",
+    "react-hook-form": "7.83.0",
     "semantic-release": "^25.0.8",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",

package/src/features/company/hooks/useSubscriptionStatus.test.ts

@@ -0,0 +1,130 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { renderHook } from "@testing-library/react";
+
+// Mutable mocks the individual tests below configure per case, mirroring the
+// vi.hoisted + vi.mock pattern used by NotificationContext.spec.tsx for the
+// same CurrentUserContext dependency.
+const userMock = vi.hoisted(() => ({ currentUser: null as any, company: null as any }));
+const configMock = vi.hoisted(() => ({ stripeKey: "pk_test_123" as string | undefined }));
+
+vi.mock("../../user/contexts/CurrentUserContext", () => ({
+  useCurrentUserContext: () => userMock,
+}));
+
+vi.mock("../../../roles", () => ({
+  isRolesConfigured: () => true,
+  getRoleId: () => ({ Administrator: "admin-role-id" }),
+}));
+
+vi.mock("../../../client/config", () => ({
+  getStripePublishableKey: () => configMock.stripeKey,
+}));
+
+import { useSubscriptionStatus } from "./useSubscriptionStatus";
+
+describe("useSubscriptionStatus", () => {
+  beforeEach(() => {
+    userMock.currentUser = null;
+    userMock.company = null;
+    configMock.stripeKey = "pk_test_123";
+  });
+
+  it("reports loading while currentUser is still null", () => {
+    userMock.currentUser = null;
+
+    const { result } = renderHook(() => useSubscriptionStatus());
+
+    expect(result.current.status).toBe("loading");
+    expect(result.current.isBlocked).toBe(false);
+  });
+
+  it("treats a missing Stripe key as an active subscription", () => {
+    userMock.currentUser = { roles: [] };
+    configMock.stripeKey = undefined;
+
+    const { result } = renderHook(() => useSubscriptionStatus());
+
+    expect(result.current.status).toBe("active");
+    expect(result.current.isBlocked).toBe(false);
+  });
+
+  it("never blocks an administrator", () => {
+    userMock.currentUser = { roles: [{ id: "admin-role-id" }] };
+
+    const { result } = renderHook(() => useSubscriptionStatus());
+
+    expect(result.current.status).toBe("active");
+    expect(result.current.isBlocked).toBe(false);
+  });
+
+  it("does not block when company is undefined after loading (an authentication fault, not a billing one)", () => {
+    userMock.currentUser = { roles: [] };
+    userMock.company = undefined;
+
+    const { result } = renderHook(() => useSubscriptionStatus());
+
+    expect(result.current.status).toBe("expired");
+    expect(result.current.isBlocked).toBe(false);
+  });
+
+  it("is never blocked when the company has an active subscription", () => {
+    userMock.currentUser = { roles: [] };
+    userMock.company = { isActiveSubscription: true, createdAt: new Date() };
+
+    const { result } = renderHook(() => useSubscriptionStatus());
+
+    expect(result.current.status).toBe("active");
+    expect(result.current.isBlocked).toBe(false);
+  });
+
+  it("does NOT block an unsubscribed company that is still inside its trial window", () => {
+    userMock.currentUser = { roles: [] };
+    const createdAt = new Date();
+    createdAt.setDate(createdAt.getDate() - 1); // 1 day old — squarely inside the 14-day trial
+    userMock.company = { isActiveSubscription: false, createdAt };
+
+    const { result } = renderHook(() => useSubscriptionStatus());
+
+    // Regression guard. Blocking on the flag alone locked a zero-day-old company
+    // out of its own trial, because TrialService can leave the Stripe
+    // subscription at status "incomplete" and never write the flag at all.
+    expect(result.current.status).toBe("trial");
+    expect(result.current.isBlocked).toBe(false);
+  });
+
+  it("blocks once the trial window has elapsed with no active subscription", () => {
+    userMock.currentUser = { roles: [] };
+    const createdAt = new Date();
+    createdAt.setDate(createdAt.getDate() - 15); // past the 14-day trial
+    userMock.company = { isActiveSubscription: false, createdAt };
+
+    const { result } = renderHook(() => useSubscriptionStatus());
+
+    expect(result.current.status).toBe("expired");
+    expect(result.current.isBlocked).toBe(true);
+  });
+
+  it("keeps daysRemaining counting down from createdAt, unaffected by the isBlocked change (1 day old)", () => {
+    userMock.currentUser = { roles: [] };
+    const createdAt = new Date();
+    createdAt.setDate(createdAt.getDate() - 1);
+    userMock.company = { isActiveSubscription: false, createdAt };
+
+    const { result } = renderHook(() => useSubscriptionStatus());
+
+    expect(result.current.daysRemaining).toBe(13);
+    expect(result.current.isGracePeriod).toBe(false);
+  });
+
+  it("keeps isGracePeriod true once daysRemaining is inside GRACE_DAYS (12 days old)", () => {
+    userMock.currentUser = { roles: [] };
+    const createdAt = new Date();
+    createdAt.setDate(createdAt.getDate() - 12);
+    userMock.company = { isActiveSubscription: false, createdAt };
+
+    const { result } = renderHook(() => useSubscriptionStatus());
+
+    expect(result.current.daysRemaining).toBe(2);
+    expect(result.current.isGracePeriod).toBe(true);
+  });
+});

package/src/features/company/hooks/useSubscriptionStatus.ts

@@ -59,14 +59,16 @@ export function useSubscriptionStatus(): TrialSubscriptionStatus {
       };
     }
 
-    // No company after loading = blocked
+    // No company after loading is an AUTHENTICATION fault, not a billing one.
+    // Reporting it as a block would hide the real problem, so fail open — the
+    // same reasoning CreditsGuard documents on the API side.
     if (!company) {
       return {
         status: "expired",
         trialEndsAt: null,
         daysRemaining: 0,
         isGracePeriod: false,
-        isBlocked: true,
+        isBlocked: false,
       };
     }
 
@@ -81,7 +83,16 @@ export function useSubscriptionStatus(): TrialSubscriptionStatus {
       };
     }
 
-    // Calculate trial status from createdAt
+    // No active subscription — but that alone is NOT a block. The trial window
+    // has to have elapsed too, and this mirrors the server rule in
+    // apps/api .../campaign/entities/campaign-lock.cypher.ts. Keep the two in
+    // step: if TRIAL_DAYS changes here it must change there.
+    //
+    // Blocking on the flag alone is wrong in practice. isActiveSubscription is
+    // only written true once a Stripe subscription actually reaches
+    // trialing/active, and that is not guaranteed — a real signup produced a
+    // StripeSubscription stuck at status "incomplete", leaving the flag NULL and
+    // a zero-day-old company blocked out of its own trial.
     const createdAt = new Date(company.createdAt);
     const trialEndsAt = new Date(createdAt);
     trialEndsAt.setDate(trialEndsAt.getDate() + TRIAL_DAYS);
@@ -89,13 +100,14 @@ export function useSubscriptionStatus(): TrialSubscriptionStatus {
     const now = new Date();
     const msRemaining = trialEndsAt.getTime() - now.getTime();
     const daysRemaining = Math.ceil(msRemaining / (1000 * 60 * 60 * 24));
+    const trialElapsed = daysRemaining <= 0;
 
     return {
-      status: daysRemaining > 0 ? "trial" : "expired",
+      status: trialElapsed ? "expired" : "trial",
       trialEndsAt,
       daysRemaining: Math.max(0, daysRemaining),
       isGracePeriod: daysRemaining > 0 && daysRemaining <= GRACE_DAYS,
-      isBlocked: daysRemaining <= 0,
+      isBlocked: trialElapsed,
     };
   }, [company, currentUser]);
 }