Skip to content
Sign up

flagon-io/g1t

public
0
724 linesCodeBlameRaw
1/**
2 * The Usage page's pieces, shared by the workspace's page and a project's:
3 * the filters, the included-usage and credit bar with what paid, the
4 * consumption chart (stacked columns by product, money on one axis, a
5 * tooltip per column, a legend, a table view), and the breakdown by
6 * product family with sparklines, allowance rings and each meter's
7 * projects. Every amount is usage at price, as on every other page.
8 */
9import { ChevronDown, Download, Ellipsis, FileCode } from "lucide-react";
10import { type ReactNode, useId, useRef } from "react";
11import { Form, Link } from "react-router";
12
13import type { MeterLine, ProductUsage, UsageReport } from "@g1t/contracts";
14
15import {
16 type Column,
17 type Grain,
18 type GroupBy,
19 PERIODS,
20 type Period,
21 axisMoney,
22 byProject,
23 money,
24 productStyle,
25 quantity,
26 rangeLabel,
27 receipt,
28 shownLines,
29 ticks,
30 usageCsv,
31} from "../lib/usage";
32import { cn } from "../lib/cn";
33import { Button } from "./ui/button";
34import { Card } from "./ui/card";
35import { Checkbox } from "./ui/checkbox";
36import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./ui/dropdown-menu";
37import { Hint } from "./ui/hint";
38import { Input } from "./ui/input";
39import { SelectField } from "./ui/select";
40import { Skeleton } from "./ui/skeleton";
41
42const SELECT =
43 "h-8 rounded-md border border-line bg-bg px-2 text-sm text-fg outline-none transition-colors hover:border-line-strong focus:border-accent-dim";
44
45// --- Filters ------------------------------------------------------------------------
46
47export type UsageFilters = {
48 period: Period;
49 from: string;
50 until: string;
51 products: string[];
52 projects: string[];
53 group: GroupBy;
54 grain: Grain;
55 cumulative: boolean;
56};
57
58/** A multi-select as a disclosure of checkboxes, part of the filter form. */
59function MultiSelect({ name, label, options, chosen }: { name: string; label: string; options: { value: string; label: string }[]; chosen: string[] }) {
60 const summary = chosen.length === 0 ? `All ${label.toLowerCase()}` : chosen.length === 1 ? (options.find((o) => o.value === chosen[0])?.label ?? chosen[0]) : `${chosen.length} ${label.toLowerCase()}`;
61 return (
62 <details className="group relative">
63 <summary className={cn(SELECT, "flex cursor-pointer list-none items-center gap-1.5 [&::-webkit-details-marker]:hidden")}>
64 <span className="text-muted">{label}:</span>
65 <span className="max-w-[10rem] truncate">{summary}</span>
66 <ChevronDown size={13} className="text-muted transition-transform group-open:rotate-180" />
67 </summary>
68 <Card tone="plain" radius="lg" className="absolute left-0 z-20 mt-1 w-64 bg-raised p-2 shadow-xl">
69 {options.length === 0 ? (
70 <p className="px-2 py-1.5 text-sm text-faint">None in this range.</p>
71 ) : (
72 <ul className="max-h-64 overflow-y-auto">
73 {options.map((option) => (
74 <li key={option.value}>
75 <label className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-surface">
76 <Checkbox name={name} value={option.value} defaultChecked={chosen.includes(option.value)} />
77 <span className="truncate">{option.label}</span>
78 </label>
79 </li>
80 ))}
81 </ul>
82 )}
83 <Button type="submit" size="sm" className="mt-2 w-full px-2 text-sm">
84 Apply
85 </Button>
86 </Card>
87 </details>
88 );
89}
90
91/**
92 * The filters, in one row above everything: period (with its days),
93 * products, projects, group by, and a menu with the CSV and the API.
94 * A plain GET form, so a filtered page is a link.
95 */
96export function UsageFilterBar({
97 filters,
98 products,
99 projects,
100 report,
101 apiHref,
102 fixedProject,
103}: {
104 filters: UsageFilters;
105 products: { key: string; label: string }[];
106 projects: string[];
107 report: UsageReport | null;
108 apiHref: string;
109 /** A project's own page: no project filter. */
110 fixedProject?: string;
111}) {
112 const form = useRef<HTMLFormElement>(null);
113 const submit = () => form.current?.requestSubmit();
114 const download = () => {
115 if (!report) return;
116 const blob = new Blob([usageCsv(report)], { type: "text/csv" });
117 const link = document.createElement("a");
118 link.href = URL.createObjectURL(blob);
119 link.download = `usage-${report.from}-${report.until}.csv`;
120 link.click();
121 URL.revokeObjectURL(link.href);
122 };
123 return (
124 <Form ref={form} method="get" preventScrollReset className="flex flex-wrap items-center gap-2">
125 <SelectField
126 key={`period-${filters.period}`}
127 name="period"
128 defaultValue={filters.period}
129 afterChange={submit}
130 size="sm"
131 className="w-auto"
132 aria-label="Period"
133 options={(Object.keys(PERIODS) as Period[]).map((key) => ({ value: key, label: PERIODS[key] }))}
134 />
135 {filters.period === "custom" ? (
136 <span className="flex items-center gap-1 text-sm">
137 <Input type="date" name="from" defaultValue={filters.from} aria-label="From" className="h-8 w-auto px-2" />
138 <span className="text-faint">to</span>
139 <Input type="date" name="until" defaultValue={filters.until} aria-label="Until" className="h-8 w-auto px-2" />
140 </span>
141 ) : (
142 <span className="px-1 text-sm text-muted tabular-nums">{rangeLabel(filters.from, filters.until)}</span>
143 )}
144 <MultiSelect name="product" label="Products" options={products.map((p) => ({ value: p.key, label: p.label }))} chosen={filters.products} />
145 {!fixedProject && <MultiSelect name="project" label="Projects" options={projects.map((p) => ({ value: p, label: p }))} chosen={filters.projects} />}
146 <SelectField
147 key={`group-${filters.group}`}
148 name="group"
149 defaultValue={filters.group}
150 afterChange={submit}
151 size="sm"
152 className="w-auto"
153 aria-label="Group by"
154 options={[
155 { value: "product", label: "Group by product" },
156 ...(fixedProject ? [] : [{ value: "project", label: "Group by project" }]),
157 { value: "day", label: "Group by day" },
158 ]}
159 />
160 <input type="hidden" name="grain" value={filters.grain} />
161 {filters.cumulative && <input type="hidden" name="cumulative" value="1" />}
162 <noscript>
163 <Button type="submit" variant="outline" size="sm" className="bg-bg px-2 text-sm font-normal text-fg">
164 Apply
165 </Button>
166 </noscript>
167 <span className="ml-auto" />
168 <DropdownMenu>
169 <DropdownMenuTrigger className={cn(SELECT, "inline-flex items-center")} aria-label="More">
170 <Ellipsis size={15} />
171 </DropdownMenuTrigger>
172 <DropdownMenuContent align="end">
173 <DropdownMenuItem onSelect={download} disabled={!report}>
174 <Download size={14} /> Export CSV
175 </DropdownMenuItem>
176 <DropdownMenuItem asChild>
177 <a href={apiHref}>
178 <FileCode size={14} /> Usage API
179 </a>
180 </DropdownMenuItem>
181 </DropdownMenuContent>
182 </DropdownMenu>
183 </Form>
184 );
185}
186
187// --- What is included and what paid ------------------------------------------------------
188
189/** A bar of how much of something is used. */
190function Bar({ used, of, tone = "accent" }: { used: number; of: number; tone?: "accent" | "warn" }) {
191 const part = of > 0 ? Math.min(1, used / of) : 0;
192 return (
193 <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-line" role="presentation">
194 <div className={cn("h-full rounded-full", tone === "warn" ? "bg-warn" : "bg-success")} style={{ width: `${part > 0 ? Math.max(2, part * 100) : 0}%` }} />
195 </div>
196 );
197}
198
199/**
200 * The plan's included usage, the credit balances, and the receipt: usage
201 * at price, what a discount, included usage and credit took off, and what
202 * is charged.
203 */
204export function IncludedAndCredit({ report, billingHref, owner }: { report: UsageReport; billingHref: string; owner: boolean }) {
205 const lines = receipt(report.totals, report.discountPercent);
206 const free = report.plan === "free";
207 const fullDiscount = (report.discountPercent ?? 0) >= 100;
208 return (
209 <Card asChild tone="plain" className="grid gap-px overflow-hidden bg-line sm:grid-cols-3">
210 <section>
211 <div className="bg-surface p-4">
212 <p className="text-sm text-muted">{report.included ? "Included usage this month" : free ? "Trial credit" : "Plan"}</p>
213 {report.included ? (
214 <>
215 <p className="mt-1 text-lg font-semibold tabular-nums">
216 {money(report.included.used)} <span className="text-sm font-normal text-faint">/ {money(report.included.of)}</span>
217 </p>
218 <Bar used={report.included.used} of={report.included.of} />
219 </>
220 ) : free ? (
221 <>
222 <p className="mt-1 text-lg font-semibold tabular-nums">{report.trialMicros != null ? `${money(report.trialMicros)} left` : "None"}</p>
223 <p className="mt-1 text-xs text-faint">
224 The forge is free. Compute needs the plan or the trial.{" "}
225 <Link to={billingHref} className="text-fg-soft underline-offset-2 hover:underline">
226 See plans
227 </Link>
228 </p>
229 </>
230 ) : (
231 <p className="mt-1 text-sm">{fullDiscount ? `${report.discountPercent}% discount from g1t` : report.plan === "enterprise" ? "Paid by an enterprise" : "On the g1t plan"}</p>
232 )}
233 </div>
234 <div className="bg-surface p-4">
235 <p className="text-sm text-muted">Credit</p>
236 {fullDiscount ? (
237 <p className="mt-1 text-sm">AI usage is free under the {report.discountPercent}% discount: nothing to buy.</p>
238 ) : (
239 <dl className="mt-1 space-y-1 text-sm">
240 <div className="flex justify-between gap-3">
241 <dt className="text-muted">AI credit</dt>
242 <dd className="font-medium tabular-nums">{money(report.aiCreditMicros)}</dd>
243 </div>
244 {report.creditMicros > 0 && (
245 <div className="flex justify-between gap-3">
246 <dt className="text-muted">Credit from g1t</dt>
247 <dd className="tabular-nums">{money(report.creditMicros)}</dd>
248 </div>
249 )}
250 {owner && report.plan === "paid" && (
251 <dd>
252 <Link to={`${billingHref}#ai-credit`} className="text-xs text-fg-soft underline-offset-2 hover:underline">
253 Buy AI credit or turn on auto-reload
254 </Link>
255 </dd>
256 )}
257 </dl>
258 )}
259 </div>
260 <div className="bg-surface p-4">
261 <p className="text-sm text-muted">This range</p>
262 <dl className="mt-1 space-y-1 text-sm">
263 {lines.map((line, i) => (
264 <div key={line.label} className={cn("flex justify-between gap-3", i === lines.length - 1 && "border-t border-line pt-1 font-medium")}>
265 <dt className={i === lines.length - 1 ? "" : "text-muted"}>{line.label}</dt>
266 <dd className="tabular-nums">
267 {line.minus ? "−" : ""}
268 {money(line.micros)}
269 </dd>
270 </div>
271 ))}
272 </dl>
273 {report.totals.pendingMicros > 0 && (
274 <p className="mt-1 text-xs text-faint">{money(report.totals.pendingMicros)} of it is metered this month and charged when it closes.</p>
275 )}
276 </div>
277 </section>
278 </Card>
279 );
280}
281
282// --- The chart -----------------------------------------------------------------------------
283
284const CHART_HEIGHT = 200;
285
286/**
287 * Consumption: one column per day (or week, or month), stacked by product,
288 * money on the one axis. Hovering or focusing a column shows its products;
289 * the legend names them; the table view has every number.
290 */
291export function UsageChart({
292 columns,
293 products,
294 grain,
295 cumulative,
296 grainHref,
297 cumulativeHref,
298}: {
299 columns: Column[];
300 products: ProductUsage[];
301 grain: Grain;
302 cumulative: boolean;
303 grainHref: (grain: Grain) => string;
304 cumulativeHref: string;
305}) {
306 const used = products.filter((p) => p.micros !== 0 && columns.some((c) => (c.parts[p.key] ?? 0) !== 0));
307 const max = Math.max(0, ...columns.map((c) => c.total));
308 const scale = ticks(max);
309 const top = scale[scale.length - 1] || 1;
310 const id = useId();
311 const labelEvery = Math.max(1, Math.ceil(columns.length / 6));
312 return (
313 <Card asChild className="p-4 sm:p-5">
314 <section aria-labelledby={`${id}-title`}>
315 <div className="flex flex-wrap items-center justify-between gap-3">
316 <h2 id={`${id}-title`} className="font-medium">
317 Consumption
318 </h2>
319 <div className="flex flex-wrap items-center gap-2 text-sm">
320 <nav className="flex rounded-md border border-line p-0.5" aria-label="Columns">
321 {(["day", "week", "month"] as Grain[]).map((g) => (
322 <Link
323 key={g}
324 to={grainHref(g)}
325 preventScrollReset
326 aria-current={g === grain ? "true" : undefined}
327 className={cn("rounded px-2 py-0.5 capitalize", g === grain ? "bg-raised text-fg" : "text-muted hover:text-fg")}
328 >
329 {g === "day" ? "Daily" : g === "week" ? "Weekly" : "Monthly"}
330 </Link>
331 ))}
332 </nav>
333 <Link to={cumulativeHref} preventScrollReset className="flex items-center gap-1.5 text-muted hover:text-fg" role="checkbox" aria-checked={cumulative}>
334 <span className={cn("grid size-3.5 place-items-center rounded-sm border", cumulative ? "border-accent bg-accent text-bg" : "border-line-strong")}>
335 {cumulative && <span className="text-[0.6rem] leading-none">✓</span>}
336 </span>
337 Cumulative
338 </Link>
339 </div>
340 </div>
341 {used.length > 0 && (
342 <ul className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted" aria-label="Legend">
343 {used.map((p) => (
344 <li key={p.key} className="flex items-center gap-1.5">
345 <span className="size-2.5 rounded-sm" style={{ background: productStyle(p.key).color }} />
346 {p.label}
347 </li>
348 ))}
349 </ul>
350 )}
351 <div className="mt-4 flex gap-2">
352 {/* The one money axis: clean ticks, every label different. */}
353 <div className="relative w-12 shrink-0 text-right text-[0.6875rem] text-faint tabular-nums" style={{ height: CHART_HEIGHT }} aria-hidden="true">
354 {scale.map((t) => (
355 <span key={t} className="absolute right-0 -translate-y-1/2" style={{ top: `${100 - (t / top) * 100}%` }}>
356 {axisMoney(t)}
357 </span>
358 ))}
359 </div>
360 <div className="relative min-w-0 flex-1" style={{ height: CHART_HEIGHT }}>
361 {scale.map((t) => (
362 <div key={t} className="absolute inset-x-0 border-t border-line" style={{ top: `${100 - (t / top) * 100}%` }} aria-hidden="true" />
363 ))}
364 <div className="absolute inset-0 flex items-end" role="list" aria-label="Usage per column">
365 {columns.map((column, i) => (
366 <div
367 key={column.key}
368 role="listitem"
369 tabIndex={0}
370 aria-label={`${column.label}: ${money(column.total)}`}
371 className="group relative flex h-full min-w-0 flex-1 flex-col items-center justify-end outline-none"
372 >
373 <div className="flex w-full max-w-6 flex-col-reverse gap-[2px] px-[1px]" style={{ height: `${(column.total / top) * 100}%` }}>
374 {used
375 .filter((p) => (column.parts[p.key] ?? 0) > 0)
376 .map((p, at, all) => (
377 <div
378 key={p.key}
379 className={cn("w-full min-h-[2px]", at === all.length - 1 && "rounded-t")}
380 style={{ flexGrow: column.parts[p.key] ?? 0, flexBasis: 0, background: productStyle(p.key).color }}
381 />
382 ))}
383 </div>
384 <div className="absolute inset-y-0 left-1/2 -z-0 w-full -translate-x-1/2 rounded group-hover:bg-fg/[0.04] group-focus-visible:bg-fg/[0.06]" aria-hidden="true" />
385 <div
386 className={cn(
387 "pointer-events-none absolute bottom-full z-10 mb-2 hidden w-52 rounded-lg border border-line-strong bg-raised p-2.5 text-xs shadow-xl group-hover:block group-focus-visible:block",
388 i < columns.length / 2 ? "left-0" : "right-0",
389 )}
390 role="tooltip"
391 >
392 <p className="flex justify-between font-medium">
393 <span>{column.label}</span>
394 <span className="tabular-nums">{money(column.total)}</span>
395 </p>
396 <ul className="mt-1.5 space-y-1">
397 {used.map((p) => (
398 <li key={p.key} className="flex items-center justify-between gap-2 text-muted">
399 <span className="flex items-center gap-1.5">
400 <span className="size-2 rounded-sm" style={{ background: productStyle(p.key).color }} />
401 {p.label}
402 </span>
403 <span className="tabular-nums text-fg-soft">{money(column.parts[p.key] ?? 0)}</span>
404 </li>
405 ))}
406 </ul>
407 </div>
408 </div>
409 ))}
410 </div>
411 </div>
412 </div>
413 <div className="ml-14 mt-1.5 flex text-[0.6875rem] text-faint" aria-hidden="true">
414 {columns.map((column, i) => (
415 <span key={column.key} className="min-w-0 flex-1 truncate text-center">
416 {i % labelEvery === 0 ? column.label : ""}
417 </span>
418 ))}
419 </div>
420 {max === 0 && <p className="mt-3 text-center text-sm text-faint">Nothing used in this range.</p>}
421 <details className="mt-3 text-sm">
422 <summary className="cursor-pointer text-xs text-muted hover:text-fg">Show as a table</summary>
423 <div className="mt-2 max-h-72 overflow-auto">
424 <table className="w-full text-left text-xs tabular-nums">
425 <thead className="sticky top-0 bg-surface text-muted">
426 <tr>
427 <th className="py-1 pr-3 font-medium">{grain === "day" ? "Day" : grain === "week" ? "Week of" : "Month"}</th>
428 {used.map((p) => (
429 <th key={p.key} className="py-1 pr-3 text-right font-medium">
430 {p.label}
431 </th>
432 ))}
433 <th className="py-1 text-right font-medium">{cumulative ? "Running total" : "Total"}</th>
434 </tr>
435 </thead>
436 <tbody className="divide-y divide-line">
437 {columns.map((column) => (
438 <tr key={column.key}>
439 <td className="py-1 pr-3">{column.label}</td>
440 {used.map((p) => (
441 <td key={p.key} className="py-1 pr-3 text-right">
442 {money(column.parts[p.key] ?? 0)}
443 </td>
444 ))}
445 <td className="py-1 text-right">{money(column.total)}</td>
446 </tr>
447 ))}
448 </tbody>
449 </table>
450 </div>
451 </details>
452 </section>
453 </Card>
454 );
455}
456
457// --- The breakdown ---------------------------------------------------------------------------
458
459/** A meter's days as a small line, in the product's color. */
460export function Sparkline({ values, color }: { values: number[]; color: string }) {
461 const max = Math.max(...values, 0);
462 if (values.length < 2 || max <= 0) return <span className="block h-5 w-20" aria-hidden="true" />;
463 const points = values.map((v, i) => `${(i / (values.length - 1)) * 78 + 1},${19 - (v / max) * 17}`).join(" ");
464 return (
465 <svg viewBox="0 0 80 20" className="h-5 w-20" aria-hidden="true">
466 <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" />
467 </svg>
468 );
469}
470
471/** How much of an allowance is used, as a ring. */
472export function AllowanceRing({ used, of }: { used: number; of: number }) {
473 const part = of > 0 ? Math.min(1, used / of) : 0;
474 const r = 7;
475 const c = 2 * Math.PI * r;
476 return (
477 <svg viewBox="0 0 18 18" className="size-4 shrink-0 -rotate-90" aria-hidden="true">
478 <circle cx="9" cy="9" r={r} fill="none" stroke="var(--g1t-line-strong)" strokeWidth="2.5" />
479 <circle cx="9" cy="9" r={r} fill="none" stroke={part >= 1 ? "var(--g1t-warn)" : "var(--g1t-success)"} strokeWidth="2.5" strokeDasharray={`${part * c} ${c}`} strokeLinecap="round" />
480 </svg>
481 );
482}
483
484function MeterUsed({ meter }: { meter: MeterLine }) {
485 if (meter.allowance) {
486 const unit = meter.allowance.unit;
487 return (
488 <span className="flex items-center gap-1.5 sm:justify-end">
489 <AllowanceRing used={meter.allowance.used} of={meter.allowance.of} />
490 <span>
491 {quantity(meter.allowance.used, unit)} <span className="text-faint">/ {quantity(meter.allowance.of, unit).replace(/ (operations|entries)$/, "")} free</span>
492 </span>
493 </span>
494 );
495 }
496 return <span>{meter.quantity ? quantity(meter.quantity, meter.unit) : <span className="text-faint">—</span>}</span>;
497}
498
499const ROW = "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-1 px-4 py-2.5 sm:grid-cols-[minmax(0,1fr)_5.5rem_14rem_6rem]";
500
501/** One meter: its days, how much was used and its charge; open, its projects. */
502function MeterRow({ meter, color, projectHref }: { meter: MeterLine; color: string; projectHref?: (project: string) => string }) {
503 const parts = meter.byProject.filter((p) => p.micros !== 0 || p.quantity !== 0);
504 const body = (
505 <>
506 <span className="flex min-w-0 items-center gap-2">
507 <span className="size-2 shrink-0 rounded-sm" style={{ background: color }} />
508 <span className="min-w-0">
509 <span className="block truncate">{meter.label}</span>
510 {meter.note && (
511 <Hint label={meter.note}>
512 <span className="block truncate text-[0.6875rem] text-faint">{meter.note}</span>
513 </Hint>
514 )}
515 </span>
516 {parts.length > 0 && <ChevronDown size={13} className="shrink-0 text-faint transition-transform group-open:rotate-180" />}
517 </span>
518 <span className="hidden sm:block">
519 <Sparkline values={meter.daily} color={color} />
520 </span>
521 <span className="order-3 col-span-2 text-sm text-muted tabular-nums sm:order-none sm:col-span-1 sm:text-right">
522 <MeterUsed meter={meter} />
523 </span>
524 <span className="text-right tabular-nums">
525 {money(meter.micros)}
526 {(meter.pendingMicros ?? 0) > 0 && <span className="block text-[0.6875rem] text-faint">{money(meter.pendingMicros ?? 0)} pending</span>}
527 </span>
528 </>
529 );
530 if (parts.length === 0) return <li className={cn(ROW, "text-sm")}>{body}</li>;
531 return (
532 <li>
533 <details className="group">
534 <summary className={cn(ROW, "cursor-pointer list-none text-sm hover:bg-raised/50 [&::-webkit-details-marker]:hidden")}>{body}</summary>
535 <ul className="border-t border-line bg-bg/40 py-1">
536 {parts.map((part) => (
537 <li key={part.project || "none"} className="flex justify-between gap-3 py-1.5 pl-10 pr-4 text-sm text-muted">
538 <span className="truncate">
539 {part.project ? (
540 projectHref ? (
541 <Link to={projectHref(part.project)} className="hover:text-fg hover:underline">
542 {part.project}
543 </Link>
544 ) : (
545 part.project
546 )
547 ) : (
548 "Not tied to a project"
549 )}
550 </span>
551 <span className="flex gap-4 tabular-nums">
552 {part.quantity > 0 && meter.unit !== "entries" && <span className="hidden sm:inline">{quantity(part.quantity, meter.unit)}</span>}
553 <span className="text-fg-soft">{money(part.micros)}</span>
554 </span>
555 </li>
556 ))}
557 </ul>
558 </details>
559 </li>
560 );
561}
562
563/** The breakdown, by product family (or by project, or by day). */
564export function Breakdown({
565 report,
566 group,
567 columns,
568 projectHref,
569}: {
570 report: UsageReport;
571 group: GroupBy;
572 columns: Column[];
573 projectHref?: (project: string) => string;
574}) {
575 const header = (first: string) => (
576 <div className={cn(ROW, "border-b border-line py-2 text-xs text-muted")}>
577 <span>{first}</span>
578 <span className="hidden sm:block">Trend</span>
579 <span className="hidden text-right sm:block">Usage</span>
580 <span className="text-right">Charge at price</span>
581 </div>
582 );
583 if (group === "project") {
584 const rows = byProject(report);
585 return (
586 <Card asChild className="overflow-hidden">
587 <section>
588 <div className="grid grid-cols-[minmax(0,1fr)_auto] border-b border-line px-4 py-2 text-xs text-muted">
589 <span>Project</span>
590 <span>Charge at price</span>
591 </div>
592 {rows.length === 0 ? (
593 <p className="px-4 py-6 text-center text-sm text-faint">Nothing used in this range.</p>
594 ) : (
595 <ul className="divide-y divide-line">
596 {rows.map((row) => (
597 <li key={row.project || "none"} className="px-4 py-2.5 text-sm">
598 <div className="flex justify-between gap-3">
599 <span className="truncate font-medium">
600 {row.project ? projectHref ? <Link to={projectHref(row.project)} className="hover:underline">{row.project}</Link> : row.project : "Not tied to a project"}
601 </span>
602 <span className="tabular-nums">{money(row.micros)}</span>
603 </div>
604 <p className="mt-0.5 text-xs text-faint">{row.meters.map((m) => `${m.label} ${money(m.micros)}`).join(" · ")}</p>
605 </li>
606 ))}
607 </ul>
608 )}
609 </section>
610 </Card>
611 );
612 }
613 if (group === "day") {
614 const days = columns.filter((c) => c.total !== 0).reverse();
615 return (
616 <Card asChild className="overflow-hidden">
617 <section>
618 <div className="grid grid-cols-[minmax(0,1fr)_auto] border-b border-line px-4 py-2 text-xs text-muted">
619 <span>Day</span>
620 <span>Charge at price</span>
621 </div>
622 {days.length === 0 ? (
623 <p className="px-4 py-6 text-center text-sm text-faint">Nothing used in this range.</p>
624 ) : (
625 <ul className="divide-y divide-line">
626 {days.map((column) => (
627 <li key={column.key} className="px-4 py-2.5 text-sm">
628 <div className="flex justify-between gap-3">
629 <span className="font-medium">{column.label}</span>
630 <span className="tabular-nums">{money(column.total)}</span>
631 </div>
632 <p className="mt-0.5 text-xs text-faint">
633 {Object.entries(column.parts)
634 .filter(([, micros]) => micros !== 0)
635 .map(([product, micros]) => `${productStyle(product).label} ${money(micros)}`)
636 .join(" · ")}
637 </p>
638 </li>
639 ))}
640 </ul>
641 )}
642 </section>
643 </Card>
644 );
645 }
646 const products = report.products.filter((p) => shownLines(p.meters).length > 0);
647 return (
648 <Card asChild className="overflow-hidden">
649 <section>
650 {header("Product")}
651 {products.length === 0 ? (
652 <p className="px-4 py-6 text-center text-sm text-faint">Nothing used in this range.</p>
653 ) : (
654 products.map((product) => {
655 const color = productStyle(product.key).color;
656 return (
657 <div key={product.key} className="border-b border-line last:border-b-0">
658 <div className="flex items-baseline justify-between gap-3 bg-raised/40 px-4 py-2">
659 <h3 className="text-sm font-medium">{product.label}</h3>
660 <span className="text-sm font-medium tabular-nums">{money(product.micros)}</span>
661 </div>
662 {product.features && product.features.length > 0 && (
663 <p className="px-4 pt-2 text-xs text-faint">
664 {product.features.map((f) => `${f.label}${f.count ? ` (${f.count})` : ""} ${money(f.micros)}`).join(" · ")}
665 </p>
666 )}
667 {product.key === "agent" && report.models && report.models.length > 0 && (
668 <p className="px-4 pt-1 text-xs text-faint">
669 Tokens by model:{" "}
670 {report.models.map((m) => `${m.model} ${quantity(m.input + m.output + m.cacheRead + m.cacheWrite, "tokens")}`).join(" · ")}
671 </p>
672 )}
673 <ul className="divide-y divide-line/60">
674 {shownLines(product.meters).map((meter) => (
675 <MeterRow key={meter.key} meter={meter} color={color} projectHref={projectHref} />
676 ))}
677 </ul>
678 </div>
679 );
680 })
681 )}
682 </section>
683 </Card>
684 );
685}
686
687// --- Loading --------------------------------------------------------------------------------
688
689/** Each region's shape while the report is on its way: the same heights, so nothing moves. */
690export function UsageSkeleton({ children }: { children?: ReactNode }) {
691 return (
692 <div className="space-y-6" aria-busy="true">
693 <span role="status" className="sr-only">
694 Loading usage…
695 </span>
696 {children}
697 <Card tone="plain" className="grid gap-px overflow-hidden bg-line sm:grid-cols-3" aria-hidden="true">
698 {[0, 1, 2].map((i) => (
699 <div key={i} className="h-[7.5rem] bg-surface p-4">
700 <Skeleton className="h-3 w-28" />
701 <Skeleton className="mt-3 h-5 w-20" />
702 <Skeleton className="mt-3 h-1.5 w-full" />
703 </div>
704 ))}
705 </Card>
706 <Card className="p-5" aria-hidden="true">
707 <Skeleton className="h-4 w-28" />
708 <div className="mt-6 flex h-[200px] items-end gap-1">
709 {Array.from({ length: 24 }, (_, i) => (
710 <Skeleton key={i} className="flex-1 rounded-t" style={{ height: `${20 + ((i * 37) % 60)}%` }} />
711 ))}
712 </div>
713 </Card>
714 <Card aria-hidden="true">
715 {[0, 1, 2, 3, 4].map((i) => (
716 <div key={i} className="flex items-center justify-between border-b border-line px-4 py-3 last:border-b-0">
717 <Skeleton className="h-3 w-40" />
718 <Skeleton className="h-3 w-16" />
719 </div>
720 ))}
721 </Card>
722 </div>
723 );
724}