@carlonicora/nextjs-jsonapi 2.3.0 → 2.5.0

package/src/features/administration/data/admin-section.types.ts

@@ -0,0 +1,30 @@
+import { LucideIcon } from "lucide-react";
+
+/**
+ * One row of the administration index: an icon, a translated label and
+ * description, and the route it opens.
+ *
+ * Labels and descriptions are i18n *keys*, never resolved strings, so
+ * AdminIndexGrid stays the single place that calls useTranslations().
+ * `labelValues` / `descriptionValues` carry ICU arguments — `{ count: 2 }` for
+ * the `entities.*` plural keys, or `{ type: "..." }` for an app reusing its own
+ * parameterised heading key.
+ */
+export type AdminSection = {
+  /** Stable React key, and the `admin-index-<key>` test id on the rendered link. */
+  key: string;
+  icon: LucideIcon;
+  labelKey: string;
+  labelValues?: Record<string, string | number>;
+  descriptionKey: string;
+  descriptionValues?: Record<string, string | number>;
+  href: string;
+};
+
+/** A titled block of sections. The built-in "platform" group always renders first. */
+export type AdminGroup = {
+  key: string;
+  labelKey: string;
+  labelValues?: Record<string, string | number>;
+  sections: AdminSection[];
+};

package/src/features/administration/i18n-keys.ts

@@ -0,0 +1,26 @@
+/**
+ * The fixed namespace of i18n keys the administration index reads via
+ * useTranslations. Consuming apps must define each entry in their
+ * messages/<locale>.json — this list is the contract between the package and
+ * the app, and the names are frozen: an app that wants different wording
+ * changes its own translation, never the key.
+ *
+ * Section LABELS are deliberately absent: they reuse keys every NJA app already
+ * defines — `entities.companies`, `entities.users`, `entities.rbac` (all with
+ * `{ count: 2 }`), `token_usage.admin.title`, and
+ * `billing.admin.products.title` — so section names stay in each app's own
+ * vocabulary.
+ *
+ * Mirrors the contract shipped by the token-usage feature
+ * (features/tokenusage/i18n-keys.ts).
+ */
+export const ADMINISTRATION_I18N_KEYS = [
+  "administration.title",
+  "administration.subtitle",
+  "administration.group.platform",
+  "administration.companies.description",
+  "administration.users.description",
+  "administration.token_usage.description",
+  "administration.rbac.description",
+  "administration.billing.description",
+] as const;

package/src/features/administration/index.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./data/admin-section.types";
+export { ADMINISTRATION_I18N_KEYS } from "./i18n-keys";

package/src/features/billing/contexts/BillingContext.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { createContext, ReactNode, useCallback, useContext, useState } from "react";
+import { SharedProvider } from "../../../contexts/SharedContext";
+import { BreadcrumbItemData } from "../../../interfaces";
+import { getRoleId } from "../../../roles";
+import { Button } from "../../../shadcnui";
+import { useCurrentUserContext } from "../../user/contexts";
+import { ProductEditor } from "../stripe-product/components/forms/ProductEditor";
+
+interface BillingContextType {
+  /**
+   * Bumped every time the provider's own actions change the product catalogue.
+   * ProductsAdminContainer reloads on it — the create action lives up here in
+   * the page title bar, so it cannot call the container's loader directly.
+   */
+  refreshToken: number;
+  refresh: () => void;
+}
+
+const BillingContext = createContext<BillingContextType | undefined>(undefined);
+
+type BillingProviderProps = {
+  children: ReactNode;
+};
+
+/**
+ * Page chrome for the administrative billing surface (Stripe products, prices
+ * and their credit allowances).
+ *
+ * Billing gets its own provider rather than borrowing AdministrationProvider so
+ * the page carries its own name — and, like CompanyProvider with CompanyEditor,
+ * it owns the page's ACTIONS: the create-product control is published through
+ * `title.functions`, which RoundPageContainerTitle renders in the header bar.
+ * That is where every other page in this codebase puts its primary action.
+ */
+export const BillingProvider = ({ children }: BillingProviderProps) => {
+  const t = useTranslations();
+  const { hasRole } = useCurrentUserContext();
+  const [showCreateProduct, setShowCreateProduct] = useState<boolean>(false);
+  const [refreshToken, setRefreshToken] = useState<number>(0);
+
+  const refresh = useCallback(() => setRefreshToken((value) => value + 1), []);
+
+  // No href: this crumb IS the current page. Linking it would also point at the
+  // StripeProduct module's `pageUrl` (/stripe-products), which no consuming app
+  // routes — the page lives under the administration tree.
+  const breadcrumbs: BreadcrumbItemData[] = [{ name: t(`billing.admin.products.title`) }];
+
+  const title = () => {
+    const response: any = { type: t(`billing.admin.products.title`) };
+
+    if (hasRole(getRoleId().Administrator)) {
+      response.functions = [
+        <Button key="productEditorTrigger" onClick={() => setShowCreateProduct(true)}>
+          {t(`billing.admin.products.create`)}
+        </Button>,
+        showCreateProduct ? (
+          <ProductEditor
+            key="productEditor"
+            open={showCreateProduct}
+            onOpenChange={setShowCreateProduct}
+            onSuccess={() => {
+              setShowCreateProduct(false);
+              refresh();
+            }}
+          />
+        ) : null,
+      ];
+    }
+
+    return response;
+  };
+
+  return (
+    <SharedProvider value={{ breadcrumbs, title: title() }}>
+      <BillingContext.Provider value={{ refreshToken, refresh }}>{children}</BillingContext.Provider>
+    </SharedProvider>
+  );
+};
+
+export const useBillingContext = (): BillingContextType => {
+  const context = useContext(BillingContext);
+  if (context === undefined) {
+    throw new Error("useBillingContext must be used within a BillingProvider");
+  }
+  return context;
+};
+
+/**
+ * Non-throwing variant. ProductsAdminContainer predates this provider and is
+ * still mounted bare by other consumers, so it must keep working without one.
+ */
+export const useOptionalBillingContext = (): BillingContextType | undefined => useContext(BillingContext);

package/src/features/billing/contexts/index.ts

@@ -0,0 +1 @@
+export * from "./BillingContext";

package/src/features/billing/index.ts

@@ -1,3 +1,4 @@
 export * from "./components";
+export * from "./contexts";
 export * from "./data";
 export * from "./modules";

package/src/features/billing/stripe-product/components/containers/ProductsAdminContainer.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { getRoleId } from "../../../../../roles";
 import { Button } from "../../../../../shadcnui";
 import { useCurrentUserContext } from "../../../../user/contexts";
+import { useOptionalBillingContext } from "../../../contexts/BillingContext";
 import { StripeProductInterface } from "../../data/stripe-product.interface";
 import { StripeProductService } from "../../data/stripe-product.service";
 import { ProductEditor } from "../forms/ProductEditor";
@@ -12,6 +13,10 @@ import { ProductsList } from "../lists/ProductsList";
 
 export function ProductsAdminContainer() {
   const { hasRole } = useCurrentUserContext();
+  // Optional on purpose: the create action lives in BillingProvider's title
+  // functions when this container is a page, but the container is still mounted
+  // bare elsewhere, where it keeps its own inline create button.
+  const billing = useOptionalBillingContext();
   const [products, setProducts] = useState<StripeProductInterface[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [showCreateProduct, setShowCreateProduct] = useState<boolean>(false);
@@ -37,9 +42,10 @@ export function ProductsAdminContainer() {
     }
   };
 
+  // Reloads on mount and whenever the provider's create action succeeds.
   useEffect(() => {
     loadProducts();
-  }, []);
+  }, [billing?.refreshToken]);
 
   if (loading) {
     return (
@@ -50,37 +56,43 @@ export function ProductsAdminContainer() {
   }
 
   return (
-    <div className="flex w-full flex-col gap-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-x-3">
-          <Package className="h-8 w-8" />
-          <h1 className="text-primary text-3xl font-semibold">Product & Price Management</h1>
+    <div className="flex w-full flex-col">
+      {/* No header here. The page name and the create action belong to
+          BillingProvider, which publishes them through `title.functions` for
+          RoundPageContainerTitle to render — the same way CompanyProvider
+          publishes CompanyEditor. A header drawn inside the content would
+          duplicate the title bar and strand the button above the list. */}
+      {/* Fallback for consumers mounting this container without BillingProvider:
+          they have no title bar to host the action, so it stays inline. */}
+      {!billing && (
+        <div className="flex w-full items-center justify-end px-4 pt-4">
+          <Button onClick={() => setShowCreateProduct(true)}>Create Product</Button>
         </div>
-        <Button onClick={() => setShowCreateProduct(true)}>Create Product</Button>
-      </div>
+      )}
 
-      {/* Empty State */}
-      {products.length === 0 && (
-        <div className="bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed p-12">
-          <Package className="text-muted-foreground h-16 w-16" />
-          <div className="text-center">
-            <h3 className="mb-2 text-sm font-medium">No products yet</h3>
-            <p className="text-muted-foreground mb-4">
-              Create your first product to start offering subscriptions to your customers.
-            </p>
-            <Button onClick={() => setShowCreateProduct(true)}>Create Your First Product</Button>
+      <div className="flex w-full flex-col gap-y-6 px-4 pb-4">
+        {/* Empty State */}
+        {products.length === 0 && (
+          <div className="bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed p-12">
+            <Package className="text-muted-foreground h-16 w-16" />
+            <div className="text-center">
+              <h3 className="mb-2 text-sm font-medium">No products yet</h3>
+              <p className="text-muted-foreground mb-4">
+                Create your first product to start offering subscriptions to your customers.
+              </p>
+              <Button onClick={() => setShowCreateProduct(true)}>Create Your First Product</Button>
+            </div>
           </div>
-        </div>
-      )}
+        )}
 
-      {/* Products List */}
-      {products.length > 0 && <ProductsList products={products} onProductsChange={loadProducts} />}
+        {/* Products List */}
+        {products.length > 0 && <ProductsList products={products} onProductsChange={loadProducts} />}
 
-      {/* Create Product Modal */}
-      {showCreateProduct && (
-        <ProductEditor open={showCreateProduct} onOpenChange={setShowCreateProduct} onSuccess={loadProducts} />
-      )}
+        {/* Create Product Modal */}
+        {showCreateProduct && (
+          <ProductEditor open={showCreateProduct} onOpenChange={setShowCreateProduct} onSuccess={loadProducts} />
+        )}
+      </div>
     </div>
   );
 }

package/src/features/billing/stripe-product/components/containers/ProductsAdminPageContainer.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { RoundPageContainer } from "../../../../../components";
+import { Modules } from "../../../../../core";
+import { BillingProvider } from "../../../contexts/BillingContext";
+import { ProductsAdminContainer } from "./ProductsAdminContainer";
+
+/**
+ * Page shell around the Stripe product/price administration surface.
+ *
+ * Client component by necessity: `module={Modules.StripeProduct}` is a registry
+ * entry with an icon component and methods, which a Server Component cannot pass
+ * across the boundary.
+ */
+export function ProductsAdminPageContainer() {
+  return (
+    <BillingProvider>
+      {/* forceHeader, unlike the sibling list pages: those get their header row
+          (title + actions) from ContentListTable, and this page has no table.
+          The strip is what renders BillingProvider's title and its create-product
+          action — the same arrangement TokenUsageAdminContainer uses. */}
+      <RoundPageContainer module={Modules.StripeProduct} fullWidth forceHeader>
+        <ProductsAdminContainer />
+      </RoundPageContainer>
+    </BillingProvider>
+  );
+}

package/src/features/billing/stripe-product/components/containers/index.ts

@@ -1 +1,2 @@
 export * from "./ProductsAdminContainer";
+export * from "./ProductsAdminPageContainer";

package/src/features/company/components/containers/CompaniesListContainer.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { RoundPageContainer } from "../../../../components";
+import { Modules } from "../../../../core";
+import { CompanyProvider } from "../../contexts/CompanyContext";
+import { CompaniesList } from "../lists/CompaniesList";
+
+/**
+ * Page container for the administrative company list.
+ *
+ * This has to be a client component: `module={Modules.Company}` is a registry
+ * entry carrying an icon component and methods, and a Server Component cannot
+ * pass it across the boundary ("Only plain objects can be passed to Client
+ * Components"). Routes mount this container instead — the same shape as every
+ * other list page.
+ */
+export function CompaniesListContainer() {
+  return (
+    <CompanyProvider>
+      <RoundPageContainer module={Modules.Company} fullWidth>
+        <CompaniesList fullWidth />
+      </RoundPageContainer>
+    </CompanyProvider>
+  );
+}

package/src/features/company/components/containers/index.ts

@@ -1,2 +1,3 @@
 export * from "./AdminCompanyContainer";
+export * from "./CompaniesListContainer";
 export * from "./CompanyContainer";

package/src/features/company/components/lists/CompaniesList.tsx

@@ -9,7 +9,17 @@ import { CompanyFields, CompanyInterface } from "../../data";
 import { CompanyService } from "../../data/company.service";
 import { CompanyEditor } from "../forms/CompanyEditor";
 
-export function CompaniesList() {
+type CompaniesListProps = {
+  /**
+   * Pass this whenever the list is the page's own content inside a
+   * `RoundPageContainer fullWidth`. Without it ContentListTable wraps itself in
+   * `rounded-md border`, drawing a second bordered card inside the page's
+   * rounded shell — two borders fighting each other at every corner.
+   */
+  fullWidth?: boolean;
+};
+
+export function CompaniesList({ fullWidth }: CompaniesListProps = {}) {
   const t = useTranslations();
 
   const data: DataListRetriever<CompanyInterface> = useDataListRetriever({
@@ -26,6 +36,7 @@ export function CompaniesList() {
       fields={[CompanyFields.name]}
       tableGeneratorType={Modules.Company}
       functions={functions}
+      fullWidth={fullWidth}
       title={t(`entities.companies`, { count: 2 })}
     />
   );

package/src/features/company/contexts/CompanyContext.tsx

@@ -43,10 +43,22 @@ export const CompanyProvider = ({ children, dehydratedCompany, configurationEdit
   const breadcrumb = () => {
     const response: BreadcrumbItemData[] = [];
 
+    // The list root always comes first, exactly as UserProvider does it —
+    // without it the company list rendered a breadcrumb of just "Home", while
+    // every sibling administration page showed its own name.
+    //
+    // Linked ONLY when it is not the current page: the Company module's
+    // `pageUrl` is /companies, which the administration tree does not route, so
+    // a link from the list itself would land on a 404.
+    response.push({
+      name: t(`entities.companies`, { count: 2 }),
+      ...(company ? { href: generateUrl({ page: Modules.Company }) } : {}),
+    });
+
     if (company)
       response.push({
         name: company.name,
-        href: generateUrl({ page: Modules.Company }),
+        href: generateUrl({ page: Modules.Company, id: company.id }),
       });
 
     return response;

package/src/features/tokenusage/components/TokenUsageAdminContainer.tsx

@@ -49,6 +49,21 @@ export function TokenUsageAdminContainer() {
     error,
   } = useTokenUsageAdmin();
 
+  // narr8-shaped deployments record essentially no platform spend (usage with no
+  // owning company), which would leave the platform tile and the
+  // platform-by-operation panel as permanent zeros. Treat "nothing to show" the
+  // same way a company filter is treated — the customer half then takes full
+  // width. a360ai is unaffected: it has real platform spend.
+  const platformIsEmpty = useMemo(
+    () =>
+      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 = useMemo(
     () => ({
       scope: t("token_usage.admin.stack.scope"),
@@ -81,7 +96,7 @@ export function TokenUsageAdminContainer() {
   return (
     <RoundPageContainer fullWidth forceHeader>
       <div className="flex w-full flex-col gap-4 p-4">
-        <TokenUsageAdminTiles summary={summary} metric={filters.metric} singleCustomerMode={singleCustomerMode} />
+        <TokenUsageAdminTiles summary={summary} metric={filters.metric} singleCustomerMode={hidePlatform} />
 
         <Card>
           <CardHeader>
@@ -142,8 +157,9 @@ export function TokenUsageAdminContainer() {
             Platform spend has no owning company, so a company filter makes that
             half meaningless: the provider skips the request and the card is
             hidden rather than rendered empty, leaving the customer half full
-            width. */}
-        <div className={cn("grid gap-4", !singleCustomerMode && "md:grid-cols-2")}>
+            width. The same holds when the window records no platform spend at
+            all — see `hidePlatform` above. */}
+        <div className={cn("grid gap-4", !hidePlatform && "md:grid-cols-2")}>
           <Card>
             <CardHeader>
               <CardTitle>{t("token_usage.admin.customer_by_operation")}</CardTitle>
@@ -158,7 +174,7 @@ export function TokenUsageAdminContainer() {
             </CardContent>
           </Card>
 
-          {!singleCustomerMode && (
+          {!hidePlatform && (
             <Card>
               <CardHeader>
                 <CardTitle>{t("token_usage.admin.platform_by_operation")}</CardTitle>

package/src/features/tokenusage/components/TokenUsageAdminTiles.tsx

@@ -6,15 +6,8 @@ import { Card, CardContent } from "../../../shadcnui";
 import { cn } from "../../../utils";
 import type { TokenUsageAdminSummaryInterface } from "../data/tokenusage-admin-summary.interface";
 import type { Metric } from "../data/tokenusage-admin.types";
-import {
-  cacheHitPercentage,
-  formatDecimal,
-  formatMetricValue,
-  formatPercent,
-  metricValue,
-  percentageDelta,
-  type TokenUsageMetrics,
-} from "../lib/metrics";
+import { useUsageFormatters } from "../lib/formatters";
+import { cacheHitPercentage, metricValue, percentageDelta, type TokenUsageMetrics } from "../lib/metrics";
 
 type Props = {
   /** The six summary rows: {customer, platform, total} × {current, previous}. */
@@ -38,6 +31,7 @@ const ZERO: TokenUsageMetrics = { cost: 0, credits: 0, tokensIn: 0, tokensOut: 0
  */
 export function TokenUsageAdminTiles({ summary, metric, singleCustomerMode }: Props) {
   const t = useTranslations();
+  const { decimal, metricValue: formatValue, currency, percent } = useUsageFormatters();
 
   const rowFor = (scope: string, window: string): TokenUsageMetrics =>
     summary.find((r) => r.scope === scope && r.window === window) ?? ZERO;
@@ -58,17 +52,19 @@ export function TokenUsageAdminTiles({ summary, metric, singleCustomerMode }: Pr
         <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")}
+          decimal={decimal}
         />
         {!singleCustomerMode && (
           <LeadTile
             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")}
+            decimal={decimal}
           />
         )}
       </div>
@@ -77,18 +73,21 @@ export function TokenUsageAdminTiles({ summary, metric, singleCustomerMode }: Pr
         <SupportingTile
           testId="tile-total"
           label={t("token_usage.admin.total_cost")}
-          value={formatMetricValue(metricValue(totalCurrent, metric), metric)}
+          value={formatValue(metricValue(totalCurrent, metric), metric)}
           delta={percentageDelta(metricValue(totalCurrent, metric), metricValue(totalPrevious, metric))}
+          decimal={decimal}
         />
         <SupportingTile
           testId="tile-avg-per-call"
           label={t("token_usage.admin.avg_per_call")}
-          value={`€ ${formatDecimal(averagePerCall, 4)}`}
+          value={currency(averagePerCall, 4)}
+          decimal={decimal}
         />
         <SupportingTile
           testId="tile-cache-hit"
           label={t("token_usage.admin.cache_hit")}
-          value={formatPercent(cacheHit)}
+          value={percent(cacheHit)}
+          decimal={decimal}
         />
       </div>
     </div>
@@ -101,12 +100,15 @@ function LeadTile({
   value,
   delta,
   previousLabel,
+  decimal,
 }: {
   testId: string;
   label: string;
   value: string;
   delta: number | undefined;
   previousLabel: string;
+  /** Passed down because `Delta` is a plain function, not a component: it cannot call the hook itself. */
+  decimal: (value: number, decimals: number) => string;
 }) {
   return (
     <Card data-testid={testId}>
@@ -114,7 +116,7 @@ function LeadTile({
         <span className="text-muted-foreground text-xs">{label}</span>
         <span className="text-primary text-xl font-semibold tabular-nums">{value}</span>
         <span className="flex items-center gap-1">
-          <Delta testId={`${testId}-delta`} delta={delta} />
+          <Delta testId={`${testId}-delta`} delta={delta} decimal={decimal} />
           <span className="text-muted-foreground text-xs">{previousLabel}</span>
         </span>
       </CardContent>
@@ -127,11 +129,14 @@ function SupportingTile({
   label,
   value,
   delta,
+  decimal,
 }: {
   testId: string;
   label: string;
   value: string;
   delta?: number | undefined;
+  /** Passed down because `Delta` is a plain function, not a component: it cannot call the hook itself. */
+  decimal: (value: number, decimals: number) => string;
 }) {
   return (
     <Card data-testid={testId} size="sm">
@@ -139,7 +144,7 @@ function SupportingTile({
         <span className="text-muted-foreground text-xs">{label}</span>
         <span className="flex items-center gap-2">
           <span className="text-sm font-medium tabular-nums">{value}</span>
-          {delta !== undefined && <Delta testId={`${testId}-delta`} delta={delta} />}
+          {delta !== undefined && <Delta testId={`${testId}-delta`} delta={delta} decimal={decimal} />}
         </span>
       </CardContent>
     </Card>
@@ -150,7 +155,15 @@ function SupportingTile({
  * The delta slot. An undefined delta means the previous window was zero: an
  * em dash says "not comparable" where a percentage would say "infinite growth".
  */
-function Delta({ testId, delta }: { testId: string; delta: number | undefined }) {
+function Delta({
+  testId,
+  delta,
+  decimal,
+}: {
+  testId: string;
+  delta: number | undefined;
+  decimal: (value: number, decimals: number) => string;
+}) {
   if (delta === undefined) {
     return (
       <span data-testid={testId} className="text-muted-foreground text-xs">
@@ -171,7 +184,7 @@ function Delta({ testId, delta }: { testId: string; delta: number | undefined })
       )}
     >
       <Icon aria-hidden className="size-3" />
-      {formatDecimal(Math.abs(delta), 0)} %
+      {decimal(Math.abs(delta), 0)} %
     </span>
   );
 }

package/src/features/tokenusage/components/TokenUsageBreakdownTable.tsx

@@ -7,7 +7,8 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from ".
 import { cn } from "../../../utils";
 import type { TokenUsageAdminBreakdownInterface } from "../data/tokenusage-admin-breakdown.interface";
 import type { Metric } from "../data/tokenusage-admin.types";
-import { cacheHitPercentage, formatDecimal, formatMetricValue, formatPercent, metricValue } from "../lib/metrics";
+import { useUsageFormatters } from "../lib/formatters";
+import { cacheHitPercentage, metricValue } from "../lib/metrics";
 
 type Props = {
   rows: TokenUsageAdminBreakdownInterface[];
@@ -28,6 +29,7 @@ type SortState = { key: SortKey; direction: "asc" | "desc" };
  */
 export function TokenUsageBreakdownTable({ rows, metric }: Props) {
   const t = useTranslations();
+  const { decimal, metricValue: formatValue, percent, compare } = useUsageFormatters();
   const [sort, setSort] = useState<SortState | undefined>(undefined);
 
   // The company dimension is the only one that reports active users. Rather than
@@ -61,11 +63,11 @@ export function TokenUsageBreakdownTable({ rows, metric }: Props) {
       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]);
 
   // First click on a column sorts descending: on a spend table the interesting
   // end of every numeric column is the top one.
@@ -136,20 +138,18 @@ export function TokenUsageBreakdownTable({ rows, metric }: Props) {
                 <TableCell className="text-muted-foreground text-xs">{row.sublabel ?? ""}</TableCell>
                 {showActiveUsers && (
                   <TableCell className="text-right text-xs tabular-nums">
-                    {row.activeUsers === undefined ? "" : formatDecimal(row.activeUsers, 0)}
+                    {row.activeUsers === undefined ? "" : decimal(row.activeUsers, 0)}
                   </TableCell>
                 )}
-                <TableCell className="text-right text-xs tabular-nums">{formatDecimal(row.calls, 0)}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{formatDecimal(row.tokensIn, 0)}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{formatDecimal(row.tokensOut, 0)}</TableCell>
+                <TableCell className="text-right text-xs tabular-nums">{decimal(row.calls, 0)}</TableCell>
+                <TableCell className="text-right text-xs tabular-nums">{decimal(row.tokensIn, 0)}</TableCell>
+                <TableCell className="text-right text-xs tabular-nums">{decimal(row.tokensOut, 0)}</TableCell>
                 <TableCell className="text-right text-xs tabular-nums">
-                  {formatPercent(cacheHitPercentage(row.cached, row.tokensIn))}
+                  {percent(cacheHitPercentage(row.cached, row.tokensIn))}
                 </TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{formatMetricValue(row.cost, "cost")}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">
-                  {formatMetricValue(row.credits, "credits")}
-                </TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{formatPercent(share)}</TableCell>
+                <TableCell className="text-right text-xs tabular-nums">{formatValue(row.cost, "cost")}</TableCell>
+                <TableCell className="text-right text-xs tabular-nums">{formatValue(row.credits, "credits")}</TableCell>
+                <TableCell className="text-right text-xs tabular-nums">{percent(share)}</TableCell>
               </TableRow>
             );
           })}