Apply Finlio cream/terracotta design system
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>
This commit is contained in:
jeremy bayse
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
97dc7cdb2a
commit
52ebb9bc83
@@ -6,7 +6,7 @@
|
||||
x-on:transaction-added.window="message = 'Opération ajoutée'; toast = true; setTimeout(() => toast = false, 2000)"
|
||||
x-on:transaction-updated.window="message = 'Opération modifiée'; toast = true; setTimeout(() => toast = false, 2000)"
|
||||
>
|
||||
<h1 id="mobile-form-top" class="text-xl font-semibold text-text">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</h1>
|
||||
<h1 id="mobile-form-top" class="text-2xl font-display text-text">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</h1>
|
||||
|
||||
@if ($pendingRecurrences->isNotEmpty())
|
||||
<div class="space-y-3">
|
||||
@@ -186,7 +186,7 @@
|
||||
<p class="text-sm font-medium text-text-muted mb-2">Dernières opérations</p>
|
||||
<ul class="space-y-2">
|
||||
@foreach ($recentTransactions as $transaction)
|
||||
<li class="bg-surface border border-border rounded-lg px-3 py-2 flex items-center justify-between gap-2" wire:key="recent-{{ $transaction->id }}">
|
||||
<li class="bg-surface border border-border rounded-2xl px-4 py-3 flex items-center justify-between gap-2" wire:key="recent-{{ $transaction->id }}">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm text-text truncate">
|
||||
{{ $transaction->category->name }}
|
||||
@@ -219,37 +219,37 @@
|
||||
|
||||
{{-- Desktop / tablet: full table view --}}
|
||||
<div class="hidden sm:block max-w-6xl mx-auto py-6 px-4 sm:px-6 space-y-6">
|
||||
<h1 class="text-xl font-semibold text-text">Suivi</h1>
|
||||
<h1 class="text-3xl font-display text-text">Suivi</h1>
|
||||
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<div class="bg-surface shadow rounded-2xl p-5">
|
||||
<p class="text-xs text-text-muted">Date du jour</p>
|
||||
<p class="mt-1 text-lg font-semibold text-text">{{ now()->translatedFormat('d M Y') }}</p>
|
||||
<p class="mt-1 text-lg font-bold text-text">{{ now()->translatedFormat('d M Y') }}</p>
|
||||
</div>
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<div class="bg-surface shadow rounded-2xl p-5">
|
||||
<p class="text-xs text-text-muted">Dernier enreg.</p>
|
||||
<p class="mt-1 text-lg font-semibold text-brand">{{ $lastEntry?->date?->translatedFormat('d M Y') ?? '—' }}</p>
|
||||
<p class="mt-1 text-lg font-bold text-brand">{{ $lastEntry?->date?->translatedFormat('d M Y') ?? '—' }}</p>
|
||||
</div>
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<div class="bg-surface shadow rounded-2xl p-5">
|
||||
<p class="text-xs text-text-muted">Nbr enreg.</p>
|
||||
<p class="mt-1 text-lg font-semibold text-brand">{{ $nbrTotal }}</p>
|
||||
<p class="mt-1 text-lg font-bold text-brand">{{ $nbrTotal }}</p>
|
||||
<p class="text-xs text-text-muted">{{ $nbrThisYear }} cette année</p>
|
||||
</div>
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<div class="bg-surface shadow rounded-2xl p-5">
|
||||
<p class="text-xs text-text-muted">Affectation</p>
|
||||
<p class="mt-1 text-lg font-semibold text-text">{{ number_format($unaffected, 2, ',', ' ') }} €</p>
|
||||
<p class="mt-1 text-lg font-bold text-text">{{ number_format($unaffected, 2, ',', ' ') }} €</p>
|
||||
<p class="text-xs text-text-muted">revenus restent à affecter</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($paidBySummary->isNotEmpty())
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<div class="bg-surface shadow rounded-2xl p-5">
|
||||
<p class="text-xs text-text-muted mb-2">Dépenses ce mois-ci, par personne</p>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<div class="flex flex-wrap gap-8">
|
||||
@foreach ($paidBySummary as $entry)
|
||||
<div>
|
||||
<p class="text-xs text-text-muted">{{ $entry['label'] }}</p>
|
||||
<p class="text-sm font-semibold text-negative">{{ number_format($entry['total'], 2, ',', ' ') }} €</p>
|
||||
<p class="text-base font-bold text-text">{{ number_format($entry['total'], 2, ',', ' ') }} €</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@@ -257,9 +257,9 @@
|
||||
@endif
|
||||
|
||||
@if ($pendingRecurrences->isNotEmpty())
|
||||
<div class="bg-surface shadow rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-2 bg-brand">
|
||||
<h2 class="text-white font-semibold text-sm">À confirmer ce mois-ci</h2>
|
||||
<div class="bg-surface shadow rounded-2xl overflow-hidden">
|
||||
<div class="px-5 py-3 bg-positive-fill">
|
||||
<h2 class="text-white font-bold text-sm">À confirmer ce mois-ci</h2>
|
||||
</div>
|
||||
<ul class="divide-y divide-border">
|
||||
@foreach ($pendingRecurrences as $recurring)
|
||||
@@ -300,8 +300,8 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<p class="text-sm font-medium text-text-muted mb-3">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</p>
|
||||
<div class="bg-surface shadow rounded-3xl p-5">
|
||||
<p class="text-base font-semibold text-text mb-4">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</p>
|
||||
<form wire:submit="addTransaction" class="grid grid-cols-1 sm:grid-cols-6 gap-3 items-end">
|
||||
<div>
|
||||
<x-input-label for="date" value="Date" />
|
||||
@@ -309,7 +309,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<x-input-label for="categoryId" value="Catégorie" />
|
||||
<select wire:model="categoryId" id="categoryId" class="block mt-1 w-full rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
|
||||
<select wire:model="categoryId" id="categoryId" class="block mt-1 w-full rounded-full bg-surface-alt border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
|
||||
<option value="">—</option>
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category->id }}">{{ $category->type->label() }} — {{ $category->name }}</option>
|
||||
@@ -332,7 +332,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<x-input-label for="paidByUserId" value="Payé par" />
|
||||
<select wire:model="paidByUserId" id="paidByUserId" class="block mt-1 w-full rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
|
||||
<select wire:model="paidByUserId" id="paidByUserId" class="block mt-1 w-full rounded-full bg-surface-alt border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
|
||||
<option value="">Commun</option>
|
||||
@foreach ($members as $member)
|
||||
<option value="{{ $member->id }}">{{ $member->name }}</option>
|
||||
@@ -359,9 +359,9 @@
|
||||
$amountPrefix = fn ($t) => $t->category->type->value === 'depense' ? '−' : '+';
|
||||
@endphp
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<label for="filterPaidBy" class="text-xs text-text-muted">Payé par</label>
|
||||
<select wire:model.live="filterPaidBy" id="filterPaidBy" class="rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
|
||||
<select wire:model.live="filterPaidBy" id="filterPaidBy" class="rounded-full bg-surface border-border-strong text-text text-sm px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
|
||||
<option value="">Tout le monde</option>
|
||||
<option value="common">Commun</option>
|
||||
@foreach ($members as $member)
|
||||
@@ -370,7 +370,7 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="bg-surface shadow rounded-lg overflow-hidden">
|
||||
<div class="bg-surface shadow rounded-3xl overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<caption class="sr-only">Historique des transactions du foyer</caption>
|
||||
@@ -391,7 +391,7 @@
|
||||
@forelse ($transactions as $transaction)
|
||||
<tr class="border-t border-border/60">
|
||||
<td class="px-4 py-2 whitespace-nowrap text-text">{{ $transaction->date->translatedFormat('d M Y') }}</td>
|
||||
<td class="px-4 py-2 text-text">{{ $transaction->category->type->label() }}</td>
|
||||
<td class="px-4 py-2"><span class="bg-negative-surface text-negative text-xs px-2.5 py-1 rounded-full">{{ $transaction->category->type->label() }}</span></td>
|
||||
<td class="px-4 py-2 text-text">{{ $transaction->category->name }}</td>
|
||||
<td class="px-4 py-2 text-right font-medium {{ $amountColor($transaction) }}">
|
||||
{{ $amountPrefix($transaction) }}{{ number_format($transaction->amount, 2, ',', ' ') }} €
|
||||
|
||||
Reference in New Issue
Block a user