384 lines
14 KiB
TypeScript
384 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations, useLocale } from "next-intl";
|
|
import { useEffect, useState, useCallback } from "react";
|
|
import { BudgetEditableCard } from "@/components/dashboard/budget-editable-card";
|
|
|
|
interface DailyUsage {
|
|
date: string;
|
|
inputTokens: number;
|
|
outputTokens: number;
|
|
spend: number;
|
|
}
|
|
|
|
interface UsageData {
|
|
month: string;
|
|
currentPeriod: {
|
|
inputTokens: number;
|
|
outputTokens: number;
|
|
totalSpend: number;
|
|
requestCount: number;
|
|
};
|
|
budget: {
|
|
maxBudget: number | null;
|
|
spend: number;
|
|
remaining: number | null;
|
|
/**
|
|
* Feature 7: budget reset cadence as stored on LiteLLM.
|
|
* Strings: "30d" / "1mo" / "1y" / null (no reset). UI maps these
|
|
* to user-friendly labels.
|
|
*/
|
|
budgetDuration: string | null;
|
|
};
|
|
rateLimits: { rpm: number | null; tpm: number | null };
|
|
dailyUsage: DailyUsage[];
|
|
}
|
|
|
|
function fmt(n: number): string {
|
|
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
|
|
if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;
|
|
return n.toString();
|
|
}
|
|
|
|
/**
|
|
* Format a numeric amount as CHF.
|
|
*
|
|
* Note on currency labelling: LiteLLM stores raw cost numbers it
|
|
* receives from upstream (OpenAI/Anthropic), which originate as USD.
|
|
* The PieCed pricing config (Slice 5) converts those numbers to
|
|
* CHF before LiteLLM persists them, so the values flowing through
|
|
* here are already CHF amounts. We label them as such in the UI;
|
|
* "USD" or "$" anywhere in the customer-facing experience would
|
|
* be misleading.
|
|
*
|
|
* Precision is adaptive:
|
|
* - Amounts ≥ 1 CHF: 2 decimals (typical money formatting).
|
|
* - Smaller amounts: 4 decimals — per-request inference costs are
|
|
* routinely sub-rappen, and rounding to 2dp
|
|
* would render CHF 0.0042 as "CHF 0.00",
|
|
* which obscures real costs from customers
|
|
* looking at the daily breakdown.
|
|
*
|
|
* This is a customer-facing display helper; for storage and
|
|
* comparisons keep using the raw number.
|
|
*/
|
|
function chf(n: number): string {
|
|
const decimals = Math.abs(n) >= 1 ? 2 : 4;
|
|
return `CHF ${n.toFixed(decimals)}`;
|
|
}
|
|
|
|
function getCurrentMonth(): string {
|
|
const now = new Date();
|
|
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
|
|
}
|
|
|
|
function shiftMonth(month: string, delta: number): string {
|
|
const [y, m] = month.split("-").map(Number);
|
|
const d = new Date(y, m - 1 + delta, 1);
|
|
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
|
|
}
|
|
|
|
function formatMonth(month: string, locale: string): string {
|
|
const [y, m] = month.split("-").map(Number);
|
|
return new Date(y, m - 1).toLocaleDateString(locale, { year: "numeric", month: "long" });
|
|
}
|
|
|
|
function UsageChart({ data }: { data: DailyUsage[] }) {
|
|
const t = useTranslations("usage");
|
|
const locale = useLocale();
|
|
// Which day's detail is shown in the readout. Defaults to the most
|
|
// recent day; hover (mouse), tap (touch) or focus (keyboard) all
|
|
// update it. The previous version put per-day numbers only in SVG
|
|
// <title> hover tooltips, which are unreachable on touch devices and
|
|
// invisible to keyboard users — this readout fixes both.
|
|
const [selected, setSelected] = useState<number | null>(null);
|
|
|
|
if (!data.length) return null;
|
|
|
|
const maxTokens = Math.max(
|
|
...data.map((d) => d.inputTokens + d.outputTokens),
|
|
1
|
|
);
|
|
const barW = Math.max(4, Math.floor(600 / data.length) - 2);
|
|
const h = 120;
|
|
|
|
const activeIndex = selected ?? data.length - 1;
|
|
const active = data[activeIndex];
|
|
|
|
const dayLabel = (iso: string) => {
|
|
const [y, m, dd] = iso.split("-").map(Number);
|
|
return new Date(y, m - 1, dd).toLocaleDateString(locale, {
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
};
|
|
|
|
const barAria = (d: DailyUsage) =>
|
|
`${dayLabel(d.date)}: ${fmt(d.inputTokens)} ${t("inputTokens")}, ${fmt(
|
|
d.outputTokens
|
|
)} ${t("outputTokens")}, ${chf(d.spend)}`;
|
|
|
|
return (
|
|
<div>
|
|
{/* Readout — the touch/keyboard-accessible equivalent of the old
|
|
hover-only tooltip. Always reflects the active day. */}
|
|
<div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 mb-2 text-xs">
|
|
<span className="font-medium text-text-primary">
|
|
{dayLabel(active.date)}
|
|
</span>
|
|
<span className="text-text-secondary tabular-nums">
|
|
{fmt(active.inputTokens)} {t("inputTokens")}
|
|
</span>
|
|
<span className="text-text-secondary tabular-nums">
|
|
{fmt(active.outputTokens)} {t("outputTokens")}
|
|
</span>
|
|
<span className="text-accent tabular-nums">{chf(active.spend)}</span>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<svg
|
|
viewBox={`0 0 ${Math.max(data.length * (barW + 2), 600)} ${h + 24}`}
|
|
className="w-full h-36"
|
|
preserveAspectRatio="xMinYMid meet"
|
|
role="group"
|
|
aria-label={t("dailyBreakdown")}
|
|
>
|
|
{data.map((d, i) => {
|
|
const total = d.inputTokens + d.outputTokens;
|
|
const totalH = (total / maxTokens) * h;
|
|
const inputH = (d.inputTokens / maxTokens) * h;
|
|
const x = i * (barW + 2);
|
|
const isActive = i === activeIndex;
|
|
return (
|
|
<g
|
|
key={d.date}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label={barAria(d)}
|
|
aria-pressed={isActive}
|
|
className="cursor-pointer focus:outline-none"
|
|
onClick={() => setSelected(i)}
|
|
onMouseEnter={() => setSelected(i)}
|
|
onFocus={() => setSelected(i)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
setSelected(i);
|
|
}
|
|
}}
|
|
>
|
|
<title>{barAria(d)}</title>
|
|
{/* Full-height transparent hit area so thin bars stay
|
|
easy to tap on touch screens. */}
|
|
<rect x={x} y={0} width={barW} height={h} fill="transparent" />
|
|
<rect
|
|
x={x}
|
|
y={h - totalH}
|
|
width={barW}
|
|
height={Math.max(0, totalH - inputH)}
|
|
rx={1}
|
|
fill="var(--color-accent)"
|
|
opacity={isActive ? 0.5 : 0.3}
|
|
/>
|
|
<rect
|
|
x={x}
|
|
y={h - inputH}
|
|
width={barW}
|
|
height={inputH}
|
|
rx={1}
|
|
fill="var(--color-accent)"
|
|
opacity={isActive ? 1 : 0.7}
|
|
/>
|
|
{isActive && (
|
|
<rect
|
|
x={x - 1}
|
|
y={Math.max(0, h - totalH) - 1}
|
|
width={barW + 2}
|
|
height={Math.max(2, totalH) + 1}
|
|
rx={1.5}
|
|
fill="none"
|
|
stroke="var(--color-accent)"
|
|
strokeWidth={1}
|
|
/>
|
|
)}
|
|
{i % 7 === 0 && (
|
|
<text
|
|
x={x + barW / 2}
|
|
y={h + 14}
|
|
textAnchor="middle"
|
|
fill="var(--color-text-muted)"
|
|
fontSize="8"
|
|
>
|
|
{d.date.slice(8)}
|
|
</text>
|
|
)}
|
|
</g>
|
|
);
|
|
})}
|
|
</svg>
|
|
</div>
|
|
<div className="flex items-center gap-4 text-xs text-text-muted mt-1">
|
|
<span className="flex items-center gap-1">
|
|
<span className="inline-block h-2 w-2 rounded-sm bg-accent opacity-70" />{" "}
|
|
{t("legendInput")}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<span className="inline-block h-2 w-2 rounded-sm bg-accent opacity-30" />{" "}
|
|
{t("legendOutput")}
|
|
</span>
|
|
<span className="ml-auto text-text-muted/70">{t("chartHint")}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Usage display widget.
|
|
*
|
|
* Pass `tenant=<name>` for the canonical path — works for both
|
|
* customers and admins, the API resolves team+alias from the tenant
|
|
* CR's status. The visibility check on the API ensures users can't
|
|
* query tenants they shouldn't see.
|
|
*
|
|
* `teamId`/`keyAlias` remain available as a platform-admin escape
|
|
* hatch for cross-org debugging, but the tenant-detail and dashboard
|
|
* paths should always use `tenant`.
|
|
*
|
|
* Bug 19 fix: previous version omitted both props for customer
|
|
* sessions, expecting the API to "figure it out". The API's fallback
|
|
* was "first visible tenant", which meant siblings in the same org
|
|
* showed identical numbers regardless of which detail page was open.
|
|
* Now the page passes the tenant name explicitly; no fallback exists.
|
|
*/
|
|
export function UsageDisplay({
|
|
tenant,
|
|
teamId,
|
|
keyAlias,
|
|
canEditBudget = false,
|
|
}: {
|
|
tenant?: string | null;
|
|
teamId?: string | null;
|
|
keyAlias?: string | null;
|
|
/**
|
|
* Feature 7: when true, the Budget StatCard becomes clickable and
|
|
* opens the budget editor. Off by default — owners and platform
|
|
* admins get it on; `user` role customers see the budget read-only.
|
|
* Server component decides this via canMutate(user).
|
|
*/
|
|
canEditBudget?: boolean;
|
|
}) {
|
|
const t = useTranslations("usage");
|
|
const locale = useLocale();
|
|
const [month, setMonth] = useState(getCurrentMonth);
|
|
const [data, setData] = useState<UsageData | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const isCurrentMonth = month === getCurrentMonth();
|
|
|
|
const fetchUsage = useCallback(() => {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
const params = new URLSearchParams({ month });
|
|
if (tenant) {
|
|
params.set("tenant", tenant);
|
|
} else if (teamId) {
|
|
// Admin escape hatch — only honoured by the API when the
|
|
// viewer is platform-role.
|
|
params.set("teamId", teamId);
|
|
if (keyAlias) params.set("keyAlias", keyAlias);
|
|
}
|
|
|
|
fetch(`/api/usage?${params}`)
|
|
.then((res) => { if (!res.ok) throw new Error(`${res.status}`); return res.json(); })
|
|
.then(setData)
|
|
.catch((e) => setError(e.message))
|
|
.finally(() => setLoading(false));
|
|
}, [tenant, teamId, keyAlias, month]);
|
|
|
|
useEffect(() => { fetchUsage(); }, [fetchUsage]);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Month selector */}
|
|
<div className="flex items-center justify-between">
|
|
<button
|
|
onClick={() => setMonth((m) => shiftMonth(m, -1))}
|
|
className="rounded-md px-2 py-1 text-xs text-text-secondary hover:text-text-primary hover:bg-surface-2 transition-colors cursor-pointer"
|
|
>
|
|
←
|
|
</button>
|
|
<span className="font-display text-sm font-medium text-text-primary">
|
|
{formatMonth(month, locale)}
|
|
</span>
|
|
<button
|
|
onClick={() => setMonth((m) => shiftMonth(m, 1))}
|
|
disabled={isCurrentMonth}
|
|
className="rounded-md px-2 py-1 text-xs text-text-secondary hover:text-text-primary hover:bg-surface-2 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
|
|
>
|
|
→
|
|
</button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="bg-surface-1 border border-border rounded-xl p-6 animate-pulse">
|
|
<div className="h-4 w-32 bg-surface-3 rounded mb-4" />
|
|
<div className="h-36 bg-surface-2 rounded" />
|
|
</div>
|
|
) : error || !data ? (
|
|
<div className="bg-surface-1 border border-border rounded-xl p-6">
|
|
<p className="text-sm text-text-secondary">{error || t("noData")}</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<StatCard label={t("inputTokens")} value={fmt(data.currentPeriod.inputTokens)} />
|
|
<StatCard label={t("outputTokens")} value={fmt(data.currentPeriod.outputTokens)} />
|
|
<StatCard label={t("totalSpend")} value={chf(data.currentPeriod.totalSpend)} accent />
|
|
{canEditBudget && tenant ? (
|
|
<BudgetEditableCard
|
|
tenantName={tenant}
|
|
maxBudget={data.budget.maxBudget}
|
|
remaining={data.budget.remaining}
|
|
budgetDuration={data.budget.budgetDuration}
|
|
onSaved={fetchUsage}
|
|
/>
|
|
) : (
|
|
<StatCard
|
|
label={t("budget")}
|
|
value={
|
|
data.budget.remaining !== null
|
|
? chf(data.budget.remaining)
|
|
: t("noLimit")
|
|
}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-surface-1 border border-border rounded-xl p-5">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-xs font-semibold uppercase tracking-wider text-text-muted">
|
|
{t("dailyBreakdown")}
|
|
</h3>
|
|
<span className="text-xs text-text-muted tabular-nums">
|
|
{data.currentPeriod.requestCount} {t("requests")}
|
|
</span>
|
|
</div>
|
|
<UsageChart data={data.dailyUsage} />
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatCard({ label, value, accent }: { label: string; value: string; accent?: boolean }) {
|
|
return (
|
|
<div className="bg-surface-1 border border-border rounded-xl p-4">
|
|
<div className="text-xs text-text-muted mb-1">{label}</div>
|
|
<div className={`font-display text-lg font-semibold tabular-nums ${accent ? "text-accent" : "text-text-primary"}`}>{value}</div>
|
|
</div>
|
|
);
|
|
}
|