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:
co-authored by
Claude Sonnet 5
parent
613220f43a
commit
1b3906ade2
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user