Show remaining budget in mobile category buttons

Each category button now displays "X € restants" below the name,
alongside the existing progress gauge and percentage — so the user
sees both how much of the budget is used and how much is left
without leaving the entry form. Remaining is floored at 0 to match
the gauge's 100% cap.

categoryProgress now returns a ['pct', 'remaining'] pair per category
instead of a bare percentage; tests updated accordingly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jeremy bayse
2026-07-26 12:55:44 +02:00
co-authored by Claude Sonnet 5
parent 613220f43a
commit 1b3906ade2
3 changed files with 23 additions and 9 deletions
+11 -4
View File
@@ -70,13 +70,20 @@
<span
aria-hidden="true"
class="absolute inset-y-0 left-0 {{ $isActive ? 'bg-white/25' : 'bg-text/10' }}"
style="width: {{ $progress }}%"
style="width: {{ $progress['pct'] }}%"
></span>
@endif
<span class="relative flex items-center justify-between gap-2">
<span>{{ $category->name }}</span>
<span class="relative flex flex-col gap-0.5">
<span class="flex items-center justify-between gap-2">
<span>{{ $category->name }}</span>
@if ($progress !== null)
<span class="text-xs font-normal {{ $isActive ? 'text-white/80' : 'text-text-muted' }}">{{ $progress['pct'] }}%</span>
@endif
</span>
@if ($progress !== null)
<span class="text-xs font-normal {{ $isActive ? 'text-white/80' : 'text-text-muted' }}">{{ $progress }}%</span>
<span class="text-xs font-normal {{ $isActive ? 'text-white/70' : 'text-text-muted' }}">
{{ number_format($progress['remaining'], 0, ',', ' ') }} restants
</span>
@endif
</span>
</button>