jeremy/suivicpt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add budget progress gauge inside mobile category buttons

Browse Source 
Each depense/epargne category button on the mobile quick-entry form
now shows a fill bar plus percentage of its monthly budget already
tracked, so the user sees at a glance which categories are close to
their limit while picking one. Categories without a budget defined
in Plan show no gauge (avoids a misleading 0%). Capped at 100% —
overspend detail already lives on the dashboard's "Manque" column.

3 new Pest tests for the percentage calculation (normal, capped,
no-budget cases). 61/61 tests pass, Pint clean, verified on mobile
against production data.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jeremy bayse
2026-07-26 12:48:29 +02:00
co-authored by Claude Sonnet 5
parent 5861fc49fc
commit 613220f43a
3 changed files with 113 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/suivi/index.blade.php
+20 -4
View File
@@ -55,14 +55,30 @@
<p class="text-xs text-text-muted mb-1.5">{{ $meta['label'] }}</p>
<div class="grid grid-cols-2 gap-2">
@foreach ($typeCategories as $category)
@php
$isActive = (string) $categoryId === (string) $category->id;
$progress = $categoryProgress[$category->id] ?? null;
@endphp
<button
type="button"
wire:click="$set('categoryId', {{ $category->id }})"
aria-pressed="{{ (string) $categoryId === (string) $category->id ? 'true' : 'false' }}"
class="min-h-[52px] px-3 py-2 rounded-lg border text-sm font-medium text-left transition focus:outline-none focus-visible:ring-2 {{ $meta['ring'] }}
{{ (string) $categoryId === (string) $category->id ? $meta['active'] : 'bg-surface border-border-strong text-text' }}"
aria-pressed="{{ $isActive ? 'true' : 'false' }}"
class="relative min-h-[52px] px-3 py-2 rounded-lg border text-sm font-medium text-left transition overflow-hidden focus:outline-none focus-visible:ring-2 {{ $meta['ring'] }}
{{ $isActive ? $meta['active'] : 'bg-surface border-border-strong text-text' }}"
>
{{ $category->name }}
@if ($progress !== null)
<span
aria-hidden="true"
class="absolute inset-y-0 left-0 {{ $isActive ? 'bg-white/25' : 'bg-text/10' }}"
style="width: {{ $progress }}%"
></span>
@endif
<span class="relative 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 }}%</span>
@endif
</span>
</button>
@endforeach
</div>