jeremy bayseandClaude Sonnet 5
52ebb9bc83
Re-theme dashboard, suivi, plan, and flux pages plus nav from the claude.ai/design import: warm cream/terracotta/olive palette, pill nav/buttons/inputs, Caprasimo display font for headings. Dark mode variant derived to hold the existing WCAG AA contrast ratios since the import only specified light. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
101 lines
6.9 KiB
PHP
101 lines
6.9 KiB
PHP
<div class="max-w-[1600px] mx-auto py-6 px-4 sm:px-6 space-y-6">
|
||
<div class="flex items-center justify-between">
|
||
<h1 class="text-3xl font-display text-text">Plan</h1>
|
||
<div class="flex items-center gap-3 bg-surface shadow rounded-full px-2 py-1.5">
|
||
<button wire:click="setYear({{ $year - 1 }})" aria-label="Année précédente" class="w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">‹</button>
|
||
<span class="text-sm font-bold text-text w-12 text-center">{{ $year }}</span>
|
||
<button wire:click="setYear({{ $year + 1 }})" aria-label="Année suivante" class="w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">›</button>
|
||
</div>
|
||
</div>
|
||
|
||
@php
|
||
$colors = [
|
||
'revenu' => ['bg' => 'bg-positive-fill', 'row' => 'bg-positive-surface/40'],
|
||
'depense' => ['bg' => 'bg-negative-fill', 'row' => 'bg-negative-surface/40'],
|
||
'epargne' => ['bg' => 'bg-info-fill', 'row' => 'bg-info-surface/40'],
|
||
];
|
||
@endphp
|
||
|
||
@foreach ($types as $type)
|
||
@php $section = $sections[$type->value]; @endphp
|
||
<div class="bg-surface shadow rounded-3xl overflow-hidden">
|
||
<div class="{{ $colors[$type->value]['bg'] }} px-5 py-2.5">
|
||
<h2 class="text-white font-bold">{{ $type->label() }}</h2>
|
||
</div>
|
||
|
||
<div class="p-2">
|
||
<table class="w-full table-fixed text-[11px] sm:text-xs border-collapse">
|
||
<caption class="sr-only">Budget {{ Str::lower($type->label()) }} par mois pour {{ $year }}</caption>
|
||
<colgroup>
|
||
<col style="width: 12%">
|
||
<col style="width: 6.77%">
|
||
@for ($m = 1; $m <= 12; $m++)
|
||
<col style="width: 6.77%">
|
||
@endfor
|
||
</colgroup>
|
||
<thead>
|
||
<tr class="text-text-muted border-b border-border">
|
||
<th scope="col" class="text-left px-1 py-2 truncate">Catégorie</th>
|
||
<th scope="col" class="px-0.5 py-2">Défaut</th>
|
||
@foreach ($months as $m)
|
||
<th scope="col" class="px-0.5 py-2">{{ $m }}</th>
|
||
@endforeach
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@forelse ($section['categories'] as $entry)
|
||
<tr class="border-b border-border/60">
|
||
<th scope="row" class="px-1 py-1 truncate text-text font-normal text-left" title="{{ $entry['category']->name }}">{{ $entry['category']->name }}</th>
|
||
<td class="px-0.5 py-1">
|
||
<label class="sr-only" for="amount-{{ $entry['category']->id }}-default">Montant par défaut pour {{ $entry['category']->name }}</label>
|
||
<input
|
||
id="amount-{{ $entry['category']->id }}-default"
|
||
type="number" step="0.01"
|
||
value="{{ $entry['row']['default'] }}"
|
||
wire:change="updateAmount({{ $entry['category']->id }}, null, $event.target.value)"
|
||
class="w-full min-w-0 bg-surface text-right text-[11px] sm:text-xs px-1 py-0.5 rounded border-border-strong text-text font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||
/>
|
||
</td>
|
||
@for ($m = 1; $m <= 12; $m++)
|
||
<td class="px-0.5 py-1">
|
||
<label class="sr-only" for="amount-{{ $entry['category']->id }}-{{ $m }}">Montant pour {{ $entry['category']->name }}, {{ $months[$m - 1] }}</label>
|
||
<input
|
||
id="amount-{{ $entry['category']->id }}-{{ $m }}"
|
||
type="number" step="0.01"
|
||
value="{{ $entry['row'][$m] }}"
|
||
wire:change="updateAmount({{ $entry['category']->id }}, {{ $m }}, $event.target.value)"
|
||
class="w-full min-w-0 bg-surface text-right text-[11px] sm:text-xs px-1 py-0.5 rounded border-border-strong text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||
/>
|
||
</td>
|
||
@endfor
|
||
</tr>
|
||
@empty
|
||
<tr><td colspan="14" class="px-4 py-3 text-sm text-text-muted">Aucune catégorie. Ajoutez-en dans <a href="{{ route('categories') }}" wire:navigate class="underline text-brand rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">Catégories</a>.</td></tr>
|
||
@endforelse
|
||
</tbody>
|
||
@if ($section['categories']->isNotEmpty())
|
||
<tfoot>
|
||
<tr class="font-semibold {{ $colors[$type->value]['row'] }} text-text">
|
||
<th scope="row" class="px-1 py-2 truncate font-semibold text-left">Total</th>
|
||
<td class="px-0.5 py-2 text-right">{{ number_format($section['totals']['default'], 0, ',', ' ') }} €</td>
|
||
@for ($m = 1; $m <= 12; $m++)
|
||
<td class="px-0.5 py-2 text-right">{{ number_format($section['totals'][$m], 0, ',', ' ') }} €</td>
|
||
@endfor
|
||
</tr>
|
||
@if ($type->value === 'revenu')
|
||
<tr class="text-[11px] sm:text-xs text-text-muted">
|
||
<th scope="row" class="px-1 py-1 truncate font-normal text-left">Reste à affecter</th>
|
||
<td class="px-0.5 py-1 text-right"></td>
|
||
@for ($m = 1; $m <= 12; $m++)
|
||
<td class="px-0.5 py-1 text-right {{ $section['remaining'][$m] < 0 ? 'text-danger font-semibold' : '' }}">{{ $section['remaining'][$m] < 0 ? '−' : '+' }}{{ number_format(abs($section['remaining'][$m]), 0, ',', ' ') }} €</td>
|
||
@endfor
|
||
</tr>
|
||
@endif
|
||
</tfoot>
|
||
@endif
|
||
</table>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|