@carlonicora/nextjs-jsonapi 1.141.3 → 1.143.0

package/dist/features/tokenusage/index.mjs

@@ -0,0 +1,1012 @@
+"use client";
+import {
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  DateRangeSelector,
+  RoundPageContainer,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  SharedProvider,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  usePageUrlGenerator
+} from "../../chunk-UGSOBBZH.mjs";
+import "../../chunk-HN5ED7OF.mjs";
+import {
+  AbstractService,
+  EndpointCreator,
+  Modules,
+  TokenUsageAdminBreakdown,
+  TokenUsageAdminBreakdownModule,
+  TokenUsageAdminSummary,
+  TokenUsageAdminSummaryModule,
+  TokenUsageAdminTimeline,
+  TokenUsageAdminTimelineModule,
+  cn
+} from "../../chunk-BIL2WQEV.mjs";
+import "../../chunk-AUXK7QSA.mjs";
+import "../../chunk-C7C7VY4F.mjs";
+import "../../chunk-Z2CB63VG.mjs";
+import "../../chunk-VOXD3ZLY.mjs";
+import {
+  __name
+} from "../../chunk-PAWJFY3S.mjs";
+
+// src/features/tokenusage/contexts/TokenUsageAdminContext.tsx
+import { useTranslations as useTranslations2 } from "next-intl";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+
+// src/features/tokenusage/components/TokenUsageAdminFilterBar.tsx
+import { useTranslations } from "next-intl";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ALL_COMPANIES = "all";
+function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, onChange }) {
+  const t = useTranslations();
+  const companyItems = {
+    [ALL_COMPANIES]: t("token_usage.admin.all_companies"),
+    ...Object.fromEntries(companies.map((company) => [company.id, company.label]))
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      DateRangeSelector,
+      {
+        onDateChange: (range) => {
+          if (!range?.from || !range?.to) return;
+          onChange({ from: range.from.toISOString(), to: range.to.toISOString() });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Segmented,
+      {
+        ariaLabel: t("token_usage.admin.granularity.label"),
+        value: granularity,
+        options: [
+          { value: "day", label: t("token_usage.admin.granularity.day") },
+          { value: "week", label: t("token_usage.admin.granularity.week") },
+          { value: "month", label: t("token_usage.admin.granularity.month") }
+        ],
+        onSelect: (value) => onChange({ granularity: value })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Segmented,
+      {
+        ariaLabel: t("token_usage.admin.metric.label"),
+        value: metric,
+        options: [
+          { value: "cost", label: t("token_usage.admin.metric.cost") },
+          { value: "credits", label: t("token_usage.admin.metric.credits") },
+          { value: "tokens", label: t("token_usage.admin.metric.tokens") }
+        ],
+        onSelect: (value) => onChange({ metric: value })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        items: companyItems,
+        value: companyId ?? ALL_COMPANIES,
+        onValueChange: (value) => onChange({ companyId: !value || value === ALL_COMPANIES ? void 0 : value }),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-56", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
+            companies.map((company) => /* @__PURE__ */ jsx(SelectItem, { value: company.id, children: company.label }, company.id))
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+__name(TokenUsageAdminFilterBar, "TokenUsageAdminFilterBar");
+function Segmented({
+  ariaLabel,
+  value,
+  options,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: "border-border inline-flex items-center gap-0.5 rounded-md border p-0.5",
+      children: options.map((option) => {
+        const selected = option.value === value;
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: selected ? "default" : "ghost",
+            "aria-pressed": selected,
+            className: cn(!selected && "text-muted-foreground"),
+            onClick: () => onSelect(option.value),
+            children: option.label
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+__name(Segmented, "Segmented");
+
+// src/features/tokenusage/data/TokenUsageAdminService.ts
+function withFilters(endpoint, filters) {
+  endpoint.addAdditionalParam("from", filters.from);
+  endpoint.addAdditionalParam("to", filters.to);
+  if (filters.companyId) endpoint.addAdditionalParam("companyId", filters.companyId);
+  return endpoint;
+}
+__name(withFilters, "withFilters");
+var TokenUsageAdminService = class extends AbstractService {
+  static {
+    __name(this, "TokenUsageAdminService");
+  }
+  /** Six rows: {customer, platform, total} × {current, previous}. */
+  static async getSummary(filters) {
+    const endpoint = withFilters(new EndpointCreator({ endpoint: Modules.TokenUsageAdminSummary }), filters);
+    return this.callApi({
+      type: Modules.TokenUsageAdminSummary,
+      method: "GET" /* GET */,
+      endpoint: endpoint.generate()
+    });
+  }
+  static async getTimeline(params) {
+    const endpoint = withFilters(new EndpointCreator({ endpoint: Modules.TokenUsageAdminTimeline }), params);
+    endpoint.addAdditionalParam("granularity", params.granularity);
+    endpoint.addAdditionalParam("stackBy", params.stackBy);
+    return this.callApi({
+      type: Modules.TokenUsageAdminTimeline,
+      method: "GET" /* GET */,
+      endpoint: endpoint.generate()
+    });
+  }
+  static async getBreakdown(params) {
+    const endpoint = withFilters(new EndpointCreator({ endpoint: 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: Modules.TokenUsageAdminBreakdown,
+      method: "GET" /* GET */,
+      endpoint: endpoint.generate()
+    });
+  }
+};
+
+// src/features/tokenusage/contexts/TokenUsageAdminContext.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TOKEN_USAGE_ADMIN_PAGE_URL = "/administration/token-usage";
+var DEFAULT_TOP_N = 10;
+var TokenUsageAdminContext = createContext(void 0);
+function defaultRange() {
+  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() };
+}
+__name(defaultRange, "defaultRange");
+var TokenUsageAdminProvider = /* @__PURE__ */ __name(({
+  children,
+  initialCompanyId,
+  initialFrom,
+  initialTo,
+  topN = DEFAULT_TOP_N
+}) => {
+  const t = useTranslations2();
+  const generateUrl = usePageUrlGenerator();
+  const [filters, setFilterState] = useState(() => {
+    const range = defaultRange();
+    return {
+      from: initialFrom ?? range.from,
+      to: initialTo ?? range.to,
+      granularity: "day",
+      stackBy: "scope",
+      companyId: initialCompanyId,
+      metric: "cost"
+    };
+  });
+  const [summary, setSummary] = useState([]);
+  const [timeline, setTimeline] = useState([]);
+  const [byCompany, setByCompany] = useState([]);
+  const [byUser, setByUser] = useState([]);
+  const [byOperation, setByOperation] = useState([]);
+  const [byCustomerOperation, setByCustomerOperation] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const { from, to, granularity, stackBy, companyId, metric } = filters;
+  const singleCustomerMode = Boolean(companyId);
+  useEffect(() => {
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    const base = { from, to, companyId };
+    Promise.all([
+      TokenUsageAdminService.getSummary(base),
+      TokenUsageAdminService.getTimeline({ ...base, granularity, stackBy }),
+      TokenUsageAdminService.getBreakdown({ ...base, dimension: "company", scope: "customer", limit: topN }),
+      TokenUsageAdminService.getBreakdown({ ...base, dimension: "user", scope: "customer", limit: topN }),
+      // Platform spend is, by definition, the usage with no owning company, so
+      // filtering it by one is meaningless — the call is skipped entirely rather
+      // than issued and discarded.
+      companyId ? Promise.resolve([]) : TokenUsageAdminService.getBreakdown({ ...base, dimension: "operation", scope: "platform", limit: topN }),
+      // Customer spend by operation — unlike the platform panel this one IS
+      // meaningful under a company filter, so it is always requested.
+      TokenUsageAdminService.getBreakdown({ ...base, dimension: "operation", scope: "customer", limit: topN })
+    ]).then(([nextSummary, nextTimeline, nextByCompany, nextByUser, nextByOperation, nextByCustomerOperation]) => {
+      if (cancelled) return;
+      setSummary(nextSummary ?? []);
+      setTimeline(nextTimeline ?? []);
+      setByCompany(nextByCompany ?? []);
+      setByUser(nextByUser ?? []);
+      setByOperation(nextByOperation ?? []);
+      setByCustomerOperation(nextByCustomerOperation ?? []);
+    }).catch((err) => {
+      if (cancelled) return;
+      console.error("Failed to load administrative token usage:", err);
+      setError(err instanceof Error ? err.message : String(err));
+    }).finally(() => {
+      if (cancelled) return;
+      setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [from, to, granularity, stackBy, companyId, topN]);
+  const setFilters = useCallback((next) => {
+    setFilterState((prev) => ({ ...prev, ...next }));
+  }, []);
+  const companies = useMemo(
+    () => byCompany.filter((row) => row.id !== "other").map((row) => ({ id: row.id, label: row.label })),
+    [byCompany]
+  );
+  const breadcrumb = /* @__PURE__ */ __name(() => [
+    {
+      name: t("token_usage.admin.title"),
+      href: generateUrl({ page: TOKEN_USAGE_ADMIN_PAGE_URL })
+    }
+  ], "breadcrumb");
+  const title = /* @__PURE__ */ __name(() => ({
+    type: t("token_usage.admin.title"),
+    functions: /* @__PURE__ */ jsx2(
+      TokenUsageAdminFilterBar,
+      {
+        from,
+        to,
+        granularity,
+        companyId,
+        metric,
+        companies,
+        onChange: setFilters
+      },
+      "tokenUsageAdminFilterBar"
+    )
+  }), "title");
+  const contextValue = useMemo(
+    () => ({
+      summary,
+      timeline,
+      byCompany,
+      byUser,
+      byOperation,
+      byCustomerOperation,
+      companies,
+      filters,
+      setFilters,
+      singleCustomerMode,
+      isLoading,
+      error
+    }),
+    [
+      summary,
+      timeline,
+      byCompany,
+      byUser,
+      byOperation,
+      byCustomerOperation,
+      companies,
+      filters,
+      setFilters,
+      singleCustomerMode,
+      isLoading,
+      error
+    ]
+  );
+  return /* @__PURE__ */ jsx2(SharedProvider, { value: { breadcrumbs: breadcrumb(), title: title() }, children: /* @__PURE__ */ jsx2(TokenUsageAdminContext.Provider, { value: contextValue, children }) });
+}, "TokenUsageAdminProvider");
+var useTokenUsageAdmin = /* @__PURE__ */ __name(() => {
+  const ctx = useContext(TokenUsageAdminContext);
+  if (!ctx) {
+    throw new Error("useTokenUsageAdmin() called outside <TokenUsageAdminProvider>.");
+  }
+  return ctx;
+}, "useTokenUsageAdmin");
+
+// src/features/tokenusage/components/TokenUsageAdminContainer.tsx
+import { useTranslations as useTranslations7 } from "next-intl";
+import { useMemo as useMemo4 } from "react";
+
+// src/features/tokenusage/components/TokenUsageAdminTiles.tsx
+import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
+import { useTranslations as useTranslations3 } from "next-intl";
+
+// 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;
+}
+__name(metricValue, "metricValue");
+function formatDecimal(value, decimals) {
+  return value.toLocaleString(LOCALE, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  });
+}
+__name(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);
+}
+__name(formatMetricValue, "formatMetricValue");
+function formatPercent(value, decimals = 1) {
+  return `${formatDecimal(value, decimals)} %`;
+}
+__name(formatPercent, "formatPercent");
+function cacheHitPercentage(cached, tokensIn) {
+  if (!tokensIn) return 0;
+  return cached / tokensIn * 100;
+}
+__name(cacheHitPercentage, "cacheHitPercentage");
+function percentageDelta(current, previous) {
+  if (!previous) return void 0;
+  return Math.round((current - previous) / previous * 100);
+}
+__name(percentageDelta, "percentageDelta");
+
+// src/features/tokenusage/components/TokenUsageAdminTiles.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ZERO = { cost: 0, credits: 0, tokensIn: 0, tokensOut: 0, cached: 0, calls: 0 };
+function TokenUsageAdminTiles({ summary, metric, singleCustomerMode }) {
+  const t = useTranslations3();
+  const rowFor = /* @__PURE__ */ __name((scope, window) => summary.find((r) => r.scope === scope && r.window === window) ?? ZERO, "rowFor");
+  const customerCurrent = rowFor("customer", "current");
+  const customerPrevious = rowFor("customer", "previous");
+  const platformCurrent = rowFor("platform", "current");
+  const platformPrevious = rowFor("platform", "previous");
+  const totalCurrent = rowFor("total", "current");
+  const totalPrevious = rowFor("total", "previous");
+  const averagePerCall = totalCurrent.calls ? totalCurrent.cost / totalCurrent.calls : 0;
+  const cacheHit = cacheHitPercentage(totalCurrent.cached, totalCurrent.tokensIn);
+  return /* @__PURE__ */ jsxs2("div", { className: "grid gap-3", children: [
+    /* @__PURE__ */ jsxs2("div", { className: cn("grid gap-3", singleCustomerMode ? "sm:grid-cols-1" : "sm:grid-cols-2"), children: [
+      /* @__PURE__ */ jsx3(
+        LeadTile,
+        {
+          testId: "tile-customer",
+          label: t("token_usage.admin.customer_spend"),
+          value: formatMetricValue(metricValue(customerCurrent, metric), metric),
+          delta: percentageDelta(metricValue(customerCurrent, metric), metricValue(customerPrevious, metric)),
+          previousLabel: t("token_usage.admin.vs_previous")
+        }
+      ),
+      !singleCustomerMode && /* @__PURE__ */ jsx3(
+        LeadTile,
+        {
+          testId: "tile-platform",
+          label: t("token_usage.admin.platform_spend"),
+          value: formatMetricValue(metricValue(platformCurrent, metric), metric),
+          delta: percentageDelta(metricValue(platformCurrent, metric), metricValue(platformPrevious, metric)),
+          previousLabel: t("token_usage.admin.vs_previous")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "grid gap-3 sm:grid-cols-3", children: [
+      /* @__PURE__ */ jsx3(
+        SupportingTile,
+        {
+          testId: "tile-total",
+          label: t("token_usage.admin.total_cost"),
+          value: formatMetricValue(metricValue(totalCurrent, metric), metric),
+          delta: percentageDelta(metricValue(totalCurrent, metric), metricValue(totalPrevious, metric))
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        SupportingTile,
+        {
+          testId: "tile-avg-per-call",
+          label: t("token_usage.admin.avg_per_call"),
+          value: `\u20AC ${formatDecimal(averagePerCall, 4)}`
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        SupportingTile,
+        {
+          testId: "tile-cache-hit",
+          label: t("token_usage.admin.cache_hit"),
+          value: formatPercent(cacheHit)
+        }
+      )
+    ] })
+  ] });
+}
+__name(TokenUsageAdminTiles, "TokenUsageAdminTiles");
+function LeadTile({
+  testId,
+  label,
+  value,
+  delta,
+  previousLabel
+}) {
+  return /* @__PURE__ */ jsx3(Card, { "data-testid": testId, children: /* @__PURE__ */ jsxs2(CardContent, { className: "grid gap-1", children: [
+    /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground text-xs", children: label }),
+    /* @__PURE__ */ jsx3("span", { className: "text-primary text-xl font-semibold tabular-nums", children: value }),
+    /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx3(Delta, { testId: `${testId}-delta`, delta }),
+      /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground text-xs", children: previousLabel })
+    ] })
+  ] }) });
+}
+__name(LeadTile, "LeadTile");
+function SupportingTile({
+  testId,
+  label,
+  value,
+  delta
+}) {
+  return /* @__PURE__ */ jsx3(Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ jsxs2(CardContent, { className: "grid gap-1", children: [
+    /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground text-xs", children: label }),
+    /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium tabular-nums", children: value }),
+      delta !== void 0 && /* @__PURE__ */ jsx3(Delta, { testId: `${testId}-delta`, delta })
+    ] })
+  ] }) });
+}
+__name(SupportingTile, "SupportingTile");
+function Delta({ testId, delta }) {
+  if (delta === void 0) {
+    return /* @__PURE__ */ jsx3("span", { "data-testid": testId, className: "text-muted-foreground text-xs", children: "\u2014" });
+  }
+  const increased = delta >= 0;
+  const Icon = increased ? ArrowUpIcon : ArrowDownIcon;
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      "data-testid": testId,
+      className: cn(
+        "inline-flex items-center gap-0.5 text-xs tabular-nums",
+        increased ? "text-success" : "text-destructive"
+      ),
+      children: [
+        /* @__PURE__ */ jsx3(Icon, { "aria-hidden": true, className: "size-3" }),
+        formatDecimal(Math.abs(delta), 0),
+        " %"
+      ]
+    }
+  );
+}
+__name(Delta, "Delta");
+
+// src/features/tokenusage/components/TokenUsageBreakdownTable.tsx
+import { ArrowDownIcon as ArrowDownIcon2, ArrowUpIcon as ArrowUpIcon2 } from "lucide-react";
+import { useTranslations as useTranslations4 } from "next-intl";
+import { useMemo as useMemo2, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function TokenUsageBreakdownTable({ rows, metric }) {
+  const t = useTranslations4();
+  const [sort, setSort] = useState2(void 0);
+  const showActiveUsers = rows.some((row) => row.activeUsers !== void 0);
+  const total = useMemo2(() => rows.reduce((sum, row) => sum + metricValue(row, metric), 0), [rows, metric]);
+  const sortValue = /* @__PURE__ */ __name((row, key) => {
+    switch (key) {
+      case "label":
+        return row.label ?? "";
+      case "sublabel":
+        return row.sublabel ?? "";
+      case "activeUsers":
+        return row.activeUsers ?? 0;
+      case "cacheHit":
+        return cacheHitPercentage(row.cached, row.tokensIn);
+      case "share":
+        return metricValue(row, metric);
+      default:
+        return row[key];
+    }
+  }, "sortValue");
+  const sortedRows = useMemo2(() => {
+    if (!sort) return rows;
+    const factor = sort.direction === "desc" ? -1 : 1;
+    return [...rows].sort((a, b) => {
+      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 (left - right) * factor;
+    });
+  }, [rows, sort, metric]);
+  const toggleSort = /* @__PURE__ */ __name((key) => setSort(
+    (current) => current?.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 },
+    { key: "sublabel", label: t("token_usage.admin.columns.sublabel"), numeric: false },
+    ...showActiveUsers ? [{ key: "activeUsers", label: t("token_usage.admin.columns.active_users"), numeric: true }] : [],
+    { key: "calls", label: t("token_usage.admin.columns.calls"), numeric: true },
+    { key: "tokensIn", label: t("token_usage.admin.columns.tokens_in"), numeric: true },
+    { key: "tokensOut", label: t("token_usage.admin.columns.tokens_out"), numeric: true },
+    // Reuses the tile's key rather than minting a column-specific one — same
+    // metric, same words.
+    { key: "cacheHit", label: t("token_usage.admin.cache_hit"), numeric: true },
+    { key: "cost", label: t("token_usage.admin.columns.cost"), numeric: true },
+    { key: "credits", label: t("token_usage.admin.columns.credits"), numeric: true },
+    { key: "share", label: t("token_usage.admin.columns.share"), numeric: true }
+  ];
+  return (
+    // 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__ */ jsx4("div", { className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: /* @__PURE__ */ jsxs3(Table, { children: [
+      /* @__PURE__ */ jsx4(TableHeader, { children: /* @__PURE__ */ jsx4(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx4(TableHead, { className: cn(column.numeric && "text-right"), children: /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          onClick: () => toggleSort(column.key),
+          className: cn(
+            "hover:text-primary inline-flex items-center gap-1 text-xs font-medium",
+            column.numeric && "flex-row-reverse"
+          ),
+          children: [
+            column.label,
+            sort?.key === column.key && (sort.direction === "desc" ? /* @__PURE__ */ jsx4(ArrowDownIcon2, { "aria-hidden": true, className: "size-3" }) : /* @__PURE__ */ jsx4(ArrowUpIcon2, { "aria-hidden": true, className: "size-3" }))
+          ]
+        }
+      ) }, column.key)) }) }),
+      /* @__PURE__ */ jsx4(TableBody, { children: sortedRows.map((row) => {
+        const value = metricValue(row, metric);
+        const share = total > 0 ? value / total * 100 : 0;
+        return /* @__PURE__ */ jsxs3(TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-muted-foreground text-xs", children: row.sublabel ?? "" }),
+          showActiveUsers && /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : formatDecimal(row.activeUsers, 0) }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.calls, 0) }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensIn, 0) }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensOut, 0) }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(cacheHitPercentage(row.cached, row.tokensIn)) }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.cost, "cost") }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.credits, "credits") }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(share) })
+        ] }, row.id);
+      }) })
+    ] }) })
+  );
+}
+__name(TokenUsageBreakdownTable, "TokenUsageBreakdownTable");
+
+// src/features/tokenusage/components/TokenUsageRankedBar.tsx
+import { useTranslations as useTranslations5 } from "next-intl";
+
+// src/features/tokenusage/lib/operation-label.ts
+var OPERATION_LABEL_NAMESPACE = "token_usage.types";
+var toCamelCase = /* @__PURE__ */ __name((value) => {
+  const parts = value.split(/[^a-zA-Z0-9]+/).filter(Boolean);
+  if (parts.length === 0) return value;
+  return parts.map(
+    (part, index) => index === 0 ? part.charAt(0).toLowerCase() + part.slice(1) : part.charAt(0).toUpperCase() + part.slice(1)
+  ).join("");
+}, "toCamelCase");
+var operationLabel = /* @__PURE__ */ __name((type, translate, has) => {
+  const key = `${OPERATION_LABEL_NAMESPACE}.${toCamelCase(type)}`;
+  return has(key) ? translate(key) : type;
+}, "operationLabel");
+
+// src/features/tokenusage/lib/palette.ts
+var CATEGORICAL_LIGHT = [
+  "#2a78d6",
+  "#eb6834",
+  "#1baf7a",
+  "#eda100",
+  "#e87ba4",
+  "#008300",
+  "#4a3aa7"
+];
+var CATEGORICAL_DARK = [
+  "#3987e5",
+  "#d95926",
+  "#199e70",
+  "#c98500",
+  "#d55181",
+  "#008300",
+  "#9085e9"
+];
+var CATEGORICAL_CEILING = CATEGORICAL_LIGHT.length;
+var OTHER_COLOR = "#898781";
+var SEQUENTIAL_RAMP_LIGHT = ["#104281", "#1c5cab", "#2a78d6", "#5598e7", "#86b6ef"];
+var SEQUENTIAL_RAMP = SEQUENTIAL_RAMP_LIGHT;
+var categoricalSet = /* @__PURE__ */ __name((mode) => mode === "dark" ? CATEGORICAL_DARK : CATEGORICAL_LIGHT, "categoricalSet");
+function seriesColor(index, mode = "light") {
+  if (index < 0 || index >= CATEGORICAL_CEILING) return OTHER_COLOR;
+  return categoricalSet(mode)[index];
+}
+__name(seriesColor, "seriesColor");
+
+// src/features/tokenusage/components/TokenUsageRankedBar.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function TokenUsageRankedBar({ rows, metric, emptyLabel, labelsAreOperationTypes = false }) {
+  const t = useTranslations5();
+  const renderLabel = /* @__PURE__ */ __name((row) => {
+    if (row.id === "other") return t("token_usage.admin.other");
+    if (!labelsAreOperationTypes) return row.label;
+    return operationLabel(
+      row.label,
+      (key) => t(key),
+      (key) => t.has(key)
+    );
+  }, "renderLabel");
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx5("p", { className: "text-muted-foreground py-6 text-center text-sm", children: emptyLabel });
+  }
+  const values = rows.map((row) => metricValue(row, metric));
+  const total = values.reduce((sum, value) => sum + value, 0);
+  const max = Math.max(...values, 0);
+  return /* @__PURE__ */ jsx5("div", { className: "grid gap-0.5", children: rows.map((row, index) => {
+    const value = values[index];
+    const isOther = row.id === "other";
+    const step = isOther ? SEQUENTIAL_RAMP.length - 1 : Math.min(index, SEQUENTIAL_RAMP.length - 1);
+    const width = max > 0 ? value / max * 100 : 0;
+    const share = total > 0 ? value / total * 100 : 0;
+    return /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-3 gap-y-0.5 py-0.5", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "grid min-w-0 gap-0.5", children: [
+        /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground truncate text-xs", children: renderLabel(row) }),
+        /* @__PURE__ */ jsx5("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-r-[4px]", children: /* @__PURE__ */ jsx5(
+          "div",
+          {
+            "data-testid": `ranked-fill-${row.id}`,
+            "data-ramp-step": String(step),
+            className: "h-full rounded-r-[4px]",
+            style: { width: `${width}%`, backgroundColor: SEQUENTIAL_RAMP[step] }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx5("span", { "data-testid": `ranked-value-${row.id}`, className: "text-right text-xs tabular-nums", children: formatMetricValue(value, metric) }),
+      /* @__PURE__ */ jsx5(
+        "span",
+        {
+          "data-testid": `ranked-share-${row.id}`,
+          className: "text-muted-foreground w-16 text-right text-xs tabular-nums",
+          children: formatPercent(share)
+        }
+      )
+    ] }, row.id);
+  }) });
+}
+__name(TokenUsageRankedBar, "TokenUsageRankedBar");
+
+// src/features/tokenusage/components/TokenUsageTimelineChart.tsx
+import { useTranslations as useTranslations6 } from "next-intl";
+import { useTheme } from "next-themes";
+import { useMemo as useMemo3 } from "react";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var OTHER_SERIES = "other";
+var bucketKey = /* @__PURE__ */ __name((date) => {
+  const y = date.getUTCFullYear();
+  const m = `${date.getUTCMonth() + 1}`.padStart(2, "0");
+  const d = `${date.getUTCDate()}`.padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}, "bucketKey");
+var metricValue2 = /* @__PURE__ */ __name((row, metric) => {
+  if (metric === "cost") return row.cost;
+  if (metric === "credits") return row.credits;
+  return row.tokensIn + row.tokensOut;
+}, "metricValue");
+var inferGranularity = /* @__PURE__ */ __name((buckets) => {
+  if (buckets.length < 2) return "day";
+  const dayMs = 24 * 60 * 60 * 1e3;
+  let smallestGap = Number.POSITIVE_INFINITY;
+  for (let i = 1; i < buckets.length; i += 1) {
+    const gap = (Date.parse(buckets[i]) - Date.parse(buckets[i - 1])) / dayMs;
+    if (gap > 0 && gap < smallestGap) smallestGap = gap;
+  }
+  if (smallestGap >= 28) return "month";
+  if (smallestGap >= 7) return "week";
+  return "day";
+}, "inferGranularity");
+var bucketFormatter = /* @__PURE__ */ __name((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 = useTranslations6();
+  const { resolvedTheme } = useTheme();
+  const mode = resolvedTheme === "dark" ? "dark" : "light";
+  const { chartData, seriesKeys } = useMemo3(() => {
+    if (rows.length === 0) return { chartData: [], seriesKeys: [] };
+    const totals = /* @__PURE__ */ new Map();
+    for (const row of rows) totals.set(row.series, (totals.get(row.series) ?? 0) + metricValue2(row, metric));
+    const ranked = [...totals.entries()].sort((a, b) => b[1] - a[1]).map(([series]) => series);
+    const named = ranked.slice(0, CATEGORICAL_CEILING);
+    const folded = new Set(ranked.slice(CATEGORICAL_CEILING));
+    const keys = folded.size > 0 ? [...named, OTHER_SERIES] : named;
+    const byBucket = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      const key = bucketKey(row.bucket);
+      let entry = byBucket.get(key);
+      if (!entry) {
+        entry = { bucket: key };
+        for (const series2 of keys) entry[series2] = 0;
+        byBucket.set(key, entry);
+      }
+      const series = folded.has(row.series) ? OTHER_SERIES : row.series;
+      entry[series] = entry[series] + metricValue2(row, metric);
+    }
+    return {
+      chartData: [...byBucket.values()].sort((a, b) => a.bucket.localeCompare(b.bucket)),
+      seriesKeys: keys
+    };
+  }, [rows, metric]);
+  const seriesLabel = /* @__PURE__ */ __name((series) => {
+    if (series === OTHER_SERIES) {
+      const key = "token_usage.series.other";
+      return t.has(key) ? t(key) : "Altro";
+    }
+    if (stackBy === "company") return series;
+    return operationLabel(
+      series,
+      (key) => t(key),
+      (key) => t.has(key)
+    );
+  }, "seriesLabel");
+  const chartConfig = useMemo3(
+    () => Object.fromEntries(seriesKeys.map((series) => [series, { label: seriesLabel(series) }])),
+    [seriesKeys, stackBy]
+  );
+  if (chartData.length === 0) {
+    const key = "token_usage.timeline.empty";
+    return /* @__PURE__ */ jsx6("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" });
+  }
+  const granularity = inferGranularity(chartData.map((entry) => entry.bucket));
+  const formatBucket = bucketFormatter(granularity);
+  const seriesColorFor = /* @__PURE__ */ __name((series, index) => series === OTHER_SERIES ? OTHER_COLOR : seriesColor(index, mode), "seriesColorFor");
+  return /* @__PURE__ */ jsxs5("div", { className, children: [
+    /* @__PURE__ */ jsx6("span", { className: "sr-only", "data-testid": "timeline-data", children: JSON.stringify(chartData) }),
+    /* @__PURE__ */ jsx6("span", { className: "sr-only", "data-testid": "timeline-series", children: JSON.stringify(seriesKeys) }),
+    /* @__PURE__ */ jsx6(ChartContainer, { config: chartConfig, className: "aspect-auto h-72 w-full", children: /* @__PURE__ */ jsxs5(BarChart, { accessibilityLayer: true, data: chartData, margin: { top: 8, right: 8, bottom: 0, left: 0 }, children: [
+      /* @__PURE__ */ jsx6(CartesianGrid, { vertical: false }),
+      /* @__PURE__ */ jsx6(
+        XAxis,
+        {
+          dataKey: "bucket",
+          tickLine: false,
+          axisLine: false,
+          tickMargin: 8,
+          minTickGap: 16,
+          tickFormatter: (value) => formatBucket.format(/* @__PURE__ */ new Date(`${value}T00:00:00.000Z`))
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        YAxis,
+        {
+          tickLine: false,
+          axisLine: false,
+          tickMargin: 8,
+          width: 48,
+          tickFormatter: (value) => compactNumber.format(value)
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        ChartTooltip,
+        {
+          content: /* @__PURE__ */ jsx6(
+            ChartTooltipContent,
+            {
+              labelFormatter: (value) => formatBucket.format(/* @__PURE__ */ new Date(`${String(value)}T00:00:00.000Z`))
+            }
+          )
+        }
+      ),
+      seriesKeys.length >= 2 ? /* @__PURE__ */ jsx6(ChartLegend, { content: /* @__PURE__ */ jsx6(ChartLegendContent, {}) }) : null,
+      seriesKeys.map((series, index) => /* @__PURE__ */ jsx6(
+        Bar,
+        {
+          dataKey: series,
+          stackId: "usage",
+          maxBarSize: 28,
+          fill: seriesColorFor(series, index),
+          stroke: "var(--background)",
+          strokeWidth: 2,
+          radius: index === seriesKeys.length - 1 ? [4, 4, 0, 0] : 0
+        },
+        series
+      ))
+    ] }) })
+  ] });
+}
+__name(TokenUsageTimelineChart, "TokenUsageTimelineChart");
+
+// src/features/tokenusage/components/TokenUsageAdminContainer.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var STACK_BY_VALUES = ["scope", "type", "company"];
+function TokenUsageAdminContainer() {
+  const t = useTranslations7();
+  const {
+    summary,
+    timeline,
+    byCompany,
+    byUser,
+    byOperation,
+    byCustomerOperation,
+    filters,
+    setFilters,
+    singleCustomerMode,
+    isLoading,
+    error
+  } = useTokenUsageAdmin();
+  const stackByItems = useMemo4(
+    () => ({
+      scope: t("token_usage.admin.stack.scope"),
+      type: t("token_usage.admin.stack.type"),
+      company: t("token_usage.admin.stack.company")
+    }),
+    [t]
+  );
+  if (error) {
+    return /* @__PURE__ */ jsx7(RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ jsx7("div", { className: "p-4", children: /* @__PURE__ */ jsx7(Card, { children: /* @__PURE__ */ jsx7(CardContent, { children: /* @__PURE__ */ jsx7("p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
+  }
+  if (isLoading) return /* @__PURE__ */ jsx7(RoundPageContainer, { fullWidth: true, forceHeader: true });
+  const emptyLabel = t("token_usage.admin.no_data");
+  return /* @__PURE__ */ jsx7(RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ jsxs6("div", { className: "flex w-full flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsx7(TokenUsageAdminTiles, { summary, metric: filters.metric, singleCustomerMode }),
+    /* @__PURE__ */ jsxs6(Card, { children: [
+      /* @__PURE__ */ jsxs6(CardHeader, { children: [
+        /* @__PURE__ */ jsx7(CardTitle, { children: t("token_usage.admin.usage_over_time") }),
+        /* @__PURE__ */ jsx7(CardAction, { children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground text-xs", children: t("token_usage.admin.stack_by") }),
+          /* @__PURE__ */ jsxs6(
+            Select,
+            {
+              items: stackByItems,
+              value: filters.stackBy,
+              onValueChange: (value) => {
+                if (value) setFilters({ stackBy: value });
+              },
+              children: [
+                /* @__PURE__ */ jsx7(SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ jsx7(SelectValue, {}) }),
+                /* @__PURE__ */ jsx7(SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ jsx7(SelectItem, { value, children: stackByItems[value] }, value)) })
+              ]
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx7(CardContent, { children: /* @__PURE__ */ jsx7(TokenUsageTimelineChart, { rows: timeline, metric: filters.metric, stackBy: filters.stackBy }) })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs6(Card, { children: [
+        /* @__PURE__ */ jsx7(CardHeader, { children: /* @__PURE__ */ jsx7(CardTitle, { children: t("token_usage.admin.by_company") }) }),
+        /* @__PURE__ */ jsx7(CardContent, { children: /* @__PURE__ */ jsx7(TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
+      ] }),
+      /* @__PURE__ */ jsxs6(Card, { children: [
+        /* @__PURE__ */ jsx7(CardHeader, { children: /* @__PURE__ */ jsx7(CardTitle, { children: t("token_usage.admin.by_user") }) }),
+        /* @__PURE__ */ jsx7(CardContent, { children: /* @__PURE__ */ jsx7(TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: cn("grid gap-4", !singleCustomerMode && "md:grid-cols-2"), children: [
+      /* @__PURE__ */ jsxs6(Card, { children: [
+        /* @__PURE__ */ jsx7(CardHeader, { children: /* @__PURE__ */ jsx7(CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
+        /* @__PURE__ */ jsx7(CardContent, { children: /* @__PURE__ */ jsx7(
+          TokenUsageRankedBar,
+          {
+            rows: byCustomerOperation,
+            metric: filters.metric,
+            emptyLabel,
+            labelsAreOperationTypes: true
+          }
+        ) })
+      ] }),
+      !singleCustomerMode && /* @__PURE__ */ jsxs6(Card, { children: [
+        /* @__PURE__ */ jsx7(CardHeader, { children: /* @__PURE__ */ jsx7(CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
+        /* @__PURE__ */ jsx7(CardContent, { children: /* @__PURE__ */ jsx7(
+          TokenUsageRankedBar,
+          {
+            rows: byOperation,
+            metric: filters.metric,
+            emptyLabel,
+            labelsAreOperationTypes: true
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6(Card, { children: [
+      /* @__PURE__ */ jsx7(CardHeader, { children: /* @__PURE__ */ jsx7(CardTitle, { children: t("token_usage.admin.detail") }) }),
+      /* @__PURE__ */ jsx7(CardContent, { children: /* @__PURE__ */ jsx7(TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
+    ] })
+  ] }) });
+}
+__name(TokenUsageAdminContainer, "TokenUsageAdminContainer");
+
+// src/features/tokenusage/i18n-keys.ts
+var TOKEN_USAGE_ADMIN_I18N_KEYS = [
+  // Page + KPI tiles
+  "token_usage.admin.title",
+  "token_usage.admin.customer_spend",
+  "token_usage.admin.platform_spend",
+  "token_usage.admin.total_cost",
+  "token_usage.admin.avg_per_call",
+  "token_usage.admin.cache_hit",
+  "token_usage.admin.vs_previous",
+  // Panel titles
+  "token_usage.admin.usage_over_time",
+  "token_usage.admin.by_company",
+  "token_usage.admin.by_user",
+  "token_usage.admin.customer_by_operation",
+  "token_usage.admin.platform_by_operation",
+  "token_usage.admin.detail",
+  // Shared states
+  "token_usage.admin.other",
+  "token_usage.admin.no_data",
+  // Filter bar
+  "token_usage.admin.all_companies",
+  "token_usage.admin.granularity.label",
+  "token_usage.admin.granularity.day",
+  "token_usage.admin.granularity.week",
+  "token_usage.admin.granularity.month",
+  "token_usage.admin.metric.label",
+  "token_usage.admin.metric.cost",
+  "token_usage.admin.metric.credits",
+  "token_usage.admin.metric.tokens",
+  // Timeline stacking control
+  "token_usage.admin.stack_by",
+  "token_usage.admin.stack.scope",
+  "token_usage.admin.stack.type",
+  "token_usage.admin.stack.company",
+  // Breakdown table columns
+  "token_usage.admin.columns.label",
+  "token_usage.admin.columns.sublabel",
+  "token_usage.admin.columns.calls",
+  "token_usage.admin.columns.tokens_in",
+  "token_usage.admin.columns.tokens_out",
+  "token_usage.admin.columns.cost",
+  "token_usage.admin.columns.credits",
+  "token_usage.admin.columns.share",
+  "token_usage.admin.columns.active_users",
+  // Timeline chart
+  "token_usage.series.other",
+  "token_usage.timeline.empty"
+];
+export {
+  TOKEN_USAGE_ADMIN_I18N_KEYS,
+  TokenUsageAdminBreakdown,
+  TokenUsageAdminBreakdownModule,
+  TokenUsageAdminContainer,
+  TokenUsageAdminFilterBar,
+  TokenUsageAdminProvider,
+  TokenUsageAdminService,
+  TokenUsageAdminSummary,
+  TokenUsageAdminSummaryModule,
+  TokenUsageAdminTiles,
+  TokenUsageAdminTimeline,
+  TokenUsageAdminTimelineModule,
+  TokenUsageBreakdownTable,
+  TokenUsageRankedBar,
+  TokenUsageTimelineChart,
+  useTokenUsageAdmin
+};
+//# sourceMappingURL=index.mjs.map