fix: show "Unlimited budget" when budget is $0

When budgetCents is 0 (no budget set), the UI now shows "Unlimited
budget" instead of misleading "0% of $0.00 budget" throughout:

- Dashboard: metric card shows "Unlimited budget" instead of percentage
- Companies: shows "Unlimited budget" label instead of "/ $0.00"
- Costs: hides utilization percent and progress bar, shows "Unlimited budget"
- Inbox: suppresses budget utilization alert when no budget is set

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-20 12:56:04 -06:00
parent a621b55e90
commit b49fc7451a
4 changed files with 31 additions and 24 deletions

View File

@@ -134,28 +134,34 @@ export function Costs() {
<CardContent className="p-4 space-y-3">
<div className="flex items-center justify-between">
<p className="text-sm text-muted-foreground">{PRESET_LABELS[preset]}</p>
<p className="text-sm text-muted-foreground">
{data.summary.utilizationPercent}% utilized
</p>
{data.summary.budgetCents > 0 && (
<p className="text-sm text-muted-foreground">
{data.summary.utilizationPercent}% utilized
</p>
)}
</div>
<p className="text-2xl font-bold">
{formatCents(data.summary.spendCents)}{" "}
<span className="text-base font-normal text-muted-foreground">
/ {formatCents(data.summary.budgetCents)}
{data.summary.budgetCents > 0
? `/ ${formatCents(data.summary.budgetCents)}`
: "Unlimited budget"}
</span>
</p>
<div className="w-full h-2 bg-muted rounded-full overflow-hidden">
<div
className={`h-full rounded-full transition-all ${
data.summary.utilizationPercent > 90
? "bg-red-400"
: data.summary.utilizationPercent > 70
? "bg-yellow-400"
: "bg-green-400"
}`}
style={{ width: `${Math.min(100, data.summary.utilizationPercent)}%` }}
/>
</div>
{data.summary.budgetCents > 0 && (
<div className="w-full h-2 bg-muted rounded-full overflow-hidden">
<div
className={`h-full rounded-full transition-all ${
data.summary.utilizationPercent > 90
? "bg-red-400"
: data.summary.utilizationPercent > 70
? "bg-yellow-400"
: "bg-green-400"
}`}
style={{ width: `${Math.min(100, data.summary.utilizationPercent)}%` }}
/>
</div>
)}
</CardContent>
</Card>