ZhenandDelynn Assistant
0da61d8f7b
* Improve dashboard responsive layouts * Improve proxy pools mobile layout * Improve CLI tool card input responsiveness --------- Co-authored-by: Delynn Assistant <zhen@dkzhen.org>
36 lines
1.6 KiB
JavaScript
36 lines
1.6 KiB
JavaScript
"use client";
|
|
|
|
import PropTypes from "prop-types";
|
|
import Card from "@/shared/components/Card";
|
|
|
|
const fmt = (n) => new Intl.NumberFormat().format(n || 0);
|
|
const fmtCost = (n) => `$${(n || 0).toFixed(2)}`;
|
|
|
|
export default function OverviewCards({ stats }) {
|
|
return (
|
|
<div className="grid min-w-0 grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-4 sm:gap-4">
|
|
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
|
|
<span className="text-text-muted text-sm uppercase font-semibold">Total Requests</span>
|
|
<span className="truncate text-2xl font-bold">{fmt(stats.totalRequests)}</span>
|
|
</Card>
|
|
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
|
|
<span className="text-text-muted text-sm uppercase font-semibold">Total Input Tokens</span>
|
|
<span className="truncate text-2xl font-bold text-primary">{fmt(stats.totalPromptTokens)}</span>
|
|
</Card>
|
|
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
|
|
<span className="text-text-muted text-sm uppercase font-semibold">Output Tokens</span>
|
|
<span className="truncate text-2xl font-bold text-success">{fmt(stats.totalCompletionTokens)}</span>
|
|
</Card>
|
|
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
|
|
<span className="text-text-muted text-sm uppercase font-semibold">Est. Cost</span>
|
|
<span className="truncate text-2xl font-bold text-warning">~{fmtCost(stats.totalCost)}</span>
|
|
<span className="text-[10px] text-text-muted">Estimated, not actual billing</span>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
OverviewCards.propTypes = {
|
|
stats: PropTypes.object.isRequired,
|
|
};
|