94018e0239
adds a new /usage page that lets board operators see how much each ai provider is consuming across any date window, with per-model breakdowns, rolling 5h/24h/7d burn windows, weekly budget bars, and a deficit notch when projected spend is on track to exceed the monthly budget. - new GET /companies/:id/costs/by-provider endpoint aggregates cost events by provider + model with pro-rated billing type splits from heartbeat runs - new GET /companies/:id/costs/window-spend endpoint returns rolling window spend (5h, 24h, 7d) per provider with no schema changes - QuotaBar: reusable boxed-border progress bar with green/yellow/red threshold fill colors and optional deficit notch - ProviderQuotaCard: per-provider card showing budget allocation bars, rolling windows, subscription usage, and model breakdown with token/cost share overlays - Usage page: date preset toggles (mtd, 7d, 30d, ytd, all, custom), provider tabs, 30s polling plus ws invalidation on cost_event - custom date range blocks queries until both dates are selected and treats boundaries as local-time (not utc midnight) so full days are included regardless of timezone - query key to timestamp is floored to the nearest minute to prevent cache churn on every 30s refetch tick
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface QuotaBarProps {
|
|
label: string;
|
|
// value between 0 and 100
|
|
percentUsed: number;
|
|
leftLabel: string;
|
|
rightLabel?: string;
|
|
// shows a 2px destructive notch at the fill tip when true
|
|
showDeficitNotch?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
function fillColor(pct: number): string {
|
|
if (pct > 90) return "bg-red-400";
|
|
if (pct > 70) return "bg-yellow-400";
|
|
return "bg-green-400";
|
|
}
|
|
|
|
export function QuotaBar({
|
|
label,
|
|
percentUsed,
|
|
leftLabel,
|
|
rightLabel,
|
|
showDeficitNotch = false,
|
|
className,
|
|
}: QuotaBarProps) {
|
|
const clampedPct = Math.min(100, Math.max(0, percentUsed));
|
|
// keep the notch visible even near the edges
|
|
const notchLeft = Math.min(clampedPct, 97);
|
|
|
|
return (
|
|
<div className={cn("space-y-1.5", className)}>
|
|
{/* row header */}
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="text-xs text-muted-foreground">{label}</span>
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
<span className="text-xs font-medium tabular-nums">{leftLabel}</span>
|
|
{rightLabel && (
|
|
<span className="text-xs text-muted-foreground tabular-nums">{rightLabel}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* track — boxed border, square corners to match the theme */}
|
|
<div className="relative h-2 w-full border border-border overflow-hidden">
|
|
{/* fill */}
|
|
<div
|
|
className={cn(
|
|
"absolute inset-y-0 left-0 transition-[width,background-color] duration-150",
|
|
fillColor(clampedPct),
|
|
)}
|
|
style={{ width: `${clampedPct}%` }}
|
|
/>
|
|
{/* deficit notch — 2px wide, sits at the fill tip */}
|
|
{showDeficitNotch && clampedPct > 0 && (
|
|
<div
|
|
className="absolute inset-y-0 w-[2px] bg-destructive z-10"
|
|
style={{ left: `${notchLeft}%` }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|