@carlonicora/nextjs-jsonapi 3.24.2 → 3.26.0

package/dist/features/tokenusage/index.mjs

@@ -1,4 +1,15 @@
 "use client";
+import {
+  CATEGORICAL_CEILING,
+  OTHER_COLOR,
+  SEQUENTIAL_RAMP,
+  cacheHitPercentage,
+  createUsageFormatters,
+  metricValue,
+  percentageDelta,
+  seriesColor,
+  useUsageFormatters
+} from "../../chunk-U65JPKO3.mjs";
 import {
   Button,
   Card,
@@ -26,8 +37,8 @@ import {
   TableHeader,
   TableRow,
   usePageUrlGenerator
-} from "../../chunk-4O7R2Z2O.mjs";
-import "../../chunk-ZJI5ZZW5.mjs";
+} from "../../chunk-QWZAGQWJ.mjs";
+import "../../chunk-Q6J2ICKO.mjs";
 import {
   AbstractService,
   EndpointCreator,
@@ -45,10 +56,10 @@ import {
   configureTokenUsage,
   getTokenUsageCurrency,
   tokenUsageModules
-} from "../../chunk-IBVKPLHT.mjs";
+} from "../../chunk-E3I4MT53.mjs";
+import "../../chunk-37DMFVLN.mjs";
 import "../../chunk-AUXK7QSA.mjs";
 import "../../chunk-PI56A4DG.mjs";
-import "../../chunk-T76WLDE5.mjs";
 import "../../chunk-VOXD3ZLY.mjs";
 import {
   __name
@@ -69,7 +80,7 @@ function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, o
     ...Object.fromEntries(companies.map((company) => [company.id, company.label]))
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "max-md:w-full max-md:[&_#date]:w-full", children: /* @__PURE__ */ jsx(
       DateRangeSelector,
       {
         onDateChange: (range) => {
@@ -77,7 +88,7 @@ function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, o
           onChange({ from: range.from.toISOString(), to: range.to.toISOString() });
         }
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(
       Segmented,
       {
@@ -349,74 +360,11 @@ var useTokenUsageAdmin = /* @__PURE__ */ __name(() => {
 
 // src/features/tokenusage/components/TokenUsageAdminContainer.tsx
 import { useTranslations as useTranslations7 } from "next-intl";
-import { useMemo as useMemo5 } from "react";
+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/formatters.ts
-import { useLocale } from "next-intl";
-import { useMemo as useMemo2 } from "react";
-function createUsageFormatters(locale, currency) {
-  const symbol = new Intl.NumberFormat(locale, { style: "currency", currency, currencyDisplay: "narrowSymbol" }).formatToParts(0).find((part) => part.type === "currency")?.value ?? currency;
-  const decimal = /* @__PURE__ */ __name((value, decimals) => value.toLocaleString(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals }), "decimal");
-  const dayFormat = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", timeZone: "UTC" });
-  const monthFormat = new Intl.DateTimeFormat(locale, { month: "short", year: "numeric", timeZone: "UTC" });
-  const compactFormat = new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 });
-  const collator = new Intl.Collator(locale);
-  return {
-    decimal,
-    metricValue(value, metric) {
-      if (metric === "cost") return `${symbol} ${decimal(value, 2)}`;
-      if (metric === "credits") return decimal(value, 1);
-      return decimal(value, 0);
-    },
-    currency(value, decimals) {
-      return `${symbol} ${decimal(value, decimals)}`;
-    },
-    percent(value, decimals = 1) {
-      return `${decimal(value, decimals)} %`;
-    },
-    compact(value) {
-      return compactFormat.format(value);
-    },
-    bucketDate(iso, granularity) {
-      const date = /* @__PURE__ */ new Date(`${iso}T00:00:00.000Z`);
-      return granularity === "month" ? monthFormat.format(date) : dayFormat.format(date);
-    },
-    compare(a, b) {
-      return collator.compare(a, b);
-    }
-  };
-}
-__name(createUsageFormatters, "createUsageFormatters");
-function useUsageFormatters() {
-  const locale = useLocale();
-  const currency = getTokenUsageCurrency();
-  return useMemo2(() => createUsageFormatters(locale, currency), [locale, currency]);
-}
-__name(useUsageFormatters, "useUsageFormatters");
-
-// src/features/tokenusage/lib/metrics.ts
-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 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 }) {
@@ -554,14 +502,14 @@ __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 useMemo3, useState as useState2 } from "react";
+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 { decimal, metricValue: formatValue, percent, compare } = useUsageFormatters();
   const [sort, setSort] = useState2(void 0);
   const showActiveUsers = rows.some((row) => row.activeUsers !== void 0);
-  const total = useMemo3(() => rows.reduce((sum, row) => sum + metricValue(row, metric), 0), [rows, metric]);
+  const total = useMemo2(() => rows.reduce((sum, row) => sum + metricValue(row, metric), 0), [rows, metric]);
   const sortValue = /* @__PURE__ */ __name((row, key) => {
     switch (key) {
       case "label":
@@ -578,7 +526,7 @@ function TokenUsageBreakdownTable({ rows, metric }) {
         return row[key];
     }
   }, "sortValue");
-  const sortedRows = useMemo3(() => {
+  const sortedRows = useMemo2(() => {
     if (!sort) return rows;
     const factor = sort.direction === "desc" ? -1 : 1;
     return [...rows].sort((a, b) => {
@@ -665,36 +613,6 @@ var operationLabel = /* @__PURE__ */ __name((type, translate, has) => {
   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 }) {
@@ -751,7 +669,7 @@ __name(TokenUsageRankedBar, "TokenUsageRankedBar");
 // src/features/tokenusage/components/TokenUsageTimelineChart.tsx
 import { useTranslations as useTranslations6 } from "next-intl";
 import { useTheme } from "next-themes";
-import { useMemo as useMemo4 } from "react";
+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";
@@ -783,7 +701,7 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
   const { compact, bucketDate, metricValue: formatValue } = useUsageFormatters();
   const { resolvedTheme } = useTheme();
   const mode = resolvedTheme === "dark" ? "dark" : "light";
-  const { chartData, seriesKeys } = useMemo4(() => {
+  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));
@@ -820,7 +738,7 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
       (key) => t.has(key)
     );
   }, "seriesLabel");
-  const chartConfig = useMemo4(
+  const chartConfig = useMemo3(
     () => Object.fromEntries(seriesKeys.map((series) => [series, { label: seriesLabel(series) }])),
     [seriesKeys, stackBy]
   );
@@ -912,12 +830,12 @@ function TokenUsageAdminContainer() {
     isLoading,
     error
   } = useTokenUsageAdmin();
-  const platformIsEmpty = useMemo5(
+  const platformIsEmpty = useMemo4(
     () => 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 = useMemo5(
+  const stackByItems = useMemo4(
     () => ({
       scope: t("token_usage.admin.stack.scope"),
       type: t("token_usage.admin.stack.type"),
@@ -1108,7 +1026,7 @@ var TOKEN_USAGE_REPORT_I18N_KEYS = [
 
 // src/features/tokenusage/contexts/TokenUsageReportContext.tsx
 import { useTranslations as useTranslations8 } from "next-intl";
-import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo6, useState as useState3 } from "react";
+import { createContext as createContext2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo5, useState as useState3 } from "react";
 
 // src/features/tokenusage/components/TokenUsageReportFilterBar.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
@@ -1207,7 +1125,7 @@ var TokenUsageReportProvider = /* @__PURE__ */ __name(({
     type: t("token_usage.report.title"),
     functions: /* @__PURE__ */ jsx9(TokenUsageReportFilterBar, { onChange: setFilters }, "tokenUsageReportFilterBar")
   }), "title");
-  const contextValue = useMemo6(
+  const contextValue = useMemo5(
     () => ({ summary, timeline, byOperation, byTarget, targetPanelTitleKey, filters, setFilters, isLoading, error }),
     [summary, timeline, byOperation, byTarget, targetPanelTitleKey, filters, setFilters, isLoading, error]
   );