Arnaud
23babd4ee9
No user-facing view of AI-call/recipe/storage usage existed — only an admin-only per-user panel. Adds the same numbers, with progress bars against the user's actual tier limits (read fresh from the DB, not the cached session), to Settings > AI. v0.40.0
36 lines
969 B
TypeScript
36 lines
969 B
TypeScript
import { Progress } from "@/components/ui/progress";
|
|
|
|
type UsageMetric = {
|
|
label: string;
|
|
used: number;
|
|
limit: number | null;
|
|
unit?: string;
|
|
unlimitedLabel: string;
|
|
};
|
|
|
|
function UsageBar({ label, used, limit, unit, unlimitedLabel }: UsageMetric) {
|
|
const pct = limit === null ? 0 : Math.min(100, (used / Math.max(limit, 1)) * 100);
|
|
return (
|
|
<div className="space-y-1.5">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">{label}</span>
|
|
<span className="font-medium tabular-nums">
|
|
{used}
|
|
{unit} / {limit === null ? unlimitedLabel : `${limit}${unit ?? ""}`}
|
|
</span>
|
|
</div>
|
|
{limit !== null && <Progress value={pct} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function UsageQuotaSection({ metrics }: { metrics: UsageMetric[] }) {
|
|
return (
|
|
<div className="space-y-4">
|
|
{metrics.map((m) => (
|
|
<UsageBar key={m.label} {...m} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|