40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
import { formatUsd } from "@/app/lib/units";
|
|
|
|
/** Herb sage under 85%, saffron amber up to 100%, chili red over budget. */
|
|
function budgetTone(spent: number, budget: number) {
|
|
const ratio = budget > 0 ? spent / budget : 0;
|
|
if (ratio > 1) return { bar: "bg-status-danger", text: "text-status-danger", label: "Over budget" };
|
|
if (ratio > 0.85) return { bar: "bg-status-warn", text: "text-status-warn", label: "Close to budget" };
|
|
return { bar: "bg-status-ok", text: "text-status-ok", label: "Under budget" };
|
|
}
|
|
|
|
interface BudgetMeterProps {
|
|
spent: number;
|
|
budget: number;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export function BudgetMeter({ spent, budget, compact = false }: BudgetMeterProps) {
|
|
const tone = budgetTone(spent, budget);
|
|
const percent = budget > 0 ? Math.min(100, (spent / budget) * 100) : 0;
|
|
|
|
return (
|
|
<div className={compact ? "w-full" : "w-full min-w-48"}>
|
|
<div className="flex items-baseline justify-between gap-2 text-xs">
|
|
<span className={`font-mono text-sm font-semibold tabular-nums ${tone.text}`}>{formatUsd(spent)}</span>
|
|
<span className="font-mono text-ink-muted tabular-nums">/ {formatUsd(budget)}</span>
|
|
</div>
|
|
<div
|
|
className="mt-1.5 h-2 w-full overflow-hidden rounded-full border border-line-strong/40 bg-raised"
|
|
role="meter"
|
|
aria-label="Budget used"
|
|
aria-valuemin={0}
|
|
aria-valuemax={budget}
|
|
aria-valuenow={Math.round(spent * 100) / 100}
|
|
aria-valuetext={`${formatUsd(spent)} of ${formatUsd(budget)}, ${tone.label.toLowerCase()}`}
|
|
>
|
|
<div className={`h-full rounded-full transition-[width] duration-300 ${tone.bar}`} style={{ width: `${percent}%` }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|