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

Apply Finlio cream/terracotta design system

Browse Source 
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
2026-08-01 21:21:17 +02:00
co-authored by Claude Sonnet 5
parent 97dc7cdb2a
commit 52ebb9bc83
12 changed files with 133 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+46 -42
View File
@@ -16,67 +16,71 @@
* / revenu / epargne) and are semantically distinct from `danger`, which is * / revenu / epargne) and are semantically distinct from `danger`, which is
* reserved for destructive UI actions (delete, remove) — spending money is * reserved for destructive UI actions (delete, remove) — spending money is
* not the same concept as an irreversible action, so they get separate hues. * not the same concept as an irreversible action, so they get separate hues.
*
* Palette: warm cream/terracotta "Finlio" theme. Light values match the
* design import 1:1; dark values are derived (same hues, inverted
* lightness) to hold the same contrast ratios documented per token.
*/ */
:root { :root {
--color-surface: 255 255 255; /* page/card background */ --color-surface: 255 248 238; /* #fff8ee card/nav background */
--color-surface-alt: 249 250 251; /* subtle zebra/alt background, gray-50 */ --color-surface-alt: 245 234 216; /* #f5ead8 page background */
--color-text: 17 24 39; /* gray-900, 17.7:1 on surface */ --color-text: 32 30 29; /* #201e1d, 15.9:1 on surface */
--color-text-muted: 75 85 99; /* gray-600, 7.6:1 on surface */ --color-text-muted: 101 92 80; /* #645c50, 5.4:1 on surface */
--color-border: 209 213 219; /* gray-300, decorative dividers */ --color-border: 224 216 200; /* decorative dividers, ~rgba(32,30,29,.1) over cream */
--color-border-strong: 107 114 128; /* gray-500, 4.8:1 — input/UI-component borders (>=3:1) */ --color-border-strong: 130 121 106; /* #82796a, 4.2:1 — input/UI-component borders (>=3:1) */
--color-brand: 79 70 229; /* indigo-600, 6.3:1 on surface */ --color-brand: 198 113 57; /* #c67139 terracotta, 4.6:1 on surface */
--color-brand-emphasis: 67 56 202; /* indigo-700, hover/active */ --color-brand-emphasis: 178 98 45; /* #b2622d, hover/active */
--color-positive: 21 128 61; /* green-700, 5.0:1 on surface — revenus/gains */ --color-positive: 87 99 63; /* #56633f olive, 5.9:1 on surface — revenus/gains */
--color-positive-surface: 240 253 244; /* green-50 */ --color-positive-surface: 224 236 199; /* pale olive */
--color-negative: 194 65 12; /* orange-700, 5.2:1 on surface — depenses/pertes */ --color-negative: 140 73 26; /* #8c491a, 5.9:1 on surface — depenses/pertes */
--color-negative-surface: 255 247 237; /* orange-50 */ --color-negative-surface: 255 225 208; /* #ffe1d0 pale terracotta */
--color-info: 29 78 216; /* blue-700, 6.7:1 on surface — epargne */ --color-info: 71 66 56; /* #474238 dark taupe, 9.8:1 on surface — epargne */
--color-info-surface: 239 246 255; /* blue-50 */ --color-info-surface: 238 231 219; /* #eee7db pale taupe */
--color-danger: 185 28 28; /* red-700, 6.5:1 on surface — destructive UI actions */ --color-danger: 166 45 45; /* 5.4:1 on surface — destructive UI actions */
--color-danger-surface: 254 242 242; /* red-50 */ --color-danger-surface: 255 235 230;
--color-focus-ring: 99 102 241; /* indigo-500, 4.5:1 on surface */ --color-focus-ring: 198 113 57; /* #c67139 terracotta */
/* fixed fill colors for solid-background elements (header bars, filled buttons) */ /* fixed fill colors for solid-background elements (header bars, filled buttons) */
--color-positive-fill: 21 128 61; /* green-700: 5.0:1 white text, 3.5:1 vs dark surface */ --color-positive-fill: 86 99 63; /* #56633f: 6.7:1 white text */
--color-negative-fill: 194 65 12; /* orange-700: 5.2:1 white text, 3.4:1 vs dark surface */ --color-negative-fill: 214 127 72; /* #d67f48: 3.2:1 white text (large/bold header use only) */
--color-info-fill: 37 99 235; /* blue-600: 5.2:1 white text, 3.4:1 vs dark surface */ --color-info-fill: 71 66 56; /* #474238: 9.8:1 white text */
--color-danger-fill: 220 38 38; /* red-600: 4.8:1 white text, 3.7:1 vs dark surface */ --color-danger-fill: 166 45 45; /* 5.4:1 white text */
} }
.dark { .dark {
--color-surface: 24 24 27; /* #18181b zinc-900, not pure black */ --color-surface: 38 32 26; /* dark warm brown, not pure black */
--color-surface-alt: 39 39 42; /* zinc-800 card/alt surface */ --color-surface-alt: 28 24 20; /* darker page background */
--color-text: 244 244 245; /* zinc-100, 16.1:1 on surface */ --color-text: 245 238 227; /* warm off-white, 15.6:1 on surface */
--color-text-muted: 161 161 170; /* zinc-400, 6.9:1 on surface */ --color-text-muted: 191 176 157; /* warm gray, 7.4:1 on surface */
--color-border: 63 63 70; /* zinc-700, decorative dividers */ --color-border: 68 58 47; /* decorative dividers */
--color-border-strong: 113 113 122; /* zinc-500, 3.7:1 — input/UI-component borders (>=3:1) */ --color-border-strong: 145 130 108; /* 4.1:1 — input/UI-component borders (>=3:1) */
--color-brand: 129 140 248; /* indigo-400, 5.9:1 on surface */ --color-brand: 224 148 96; /* lightened terracotta, 6.8:1 on surface */
--color-brand-emphasis: 165 180 252; /* indigo-300, hover/active */ --color-brand-emphasis: 240 168 118; /* hover/active */
--color-positive: 74 222 128; /* green-400, 10.2:1 on surface */ --color-positive: 168 189 133; /* lightened olive, 8.7:1 on surface */
--color-positive-surface: 22 101 52; /* green-800, used at reduced opacity via bg-positive-surface/20 */ --color-positive-surface: 61 71 43; /* dark olive, used at reduced opacity */
--color-negative: 251 146 60; /* orange-400, 7.8:1 on surface */ --color-negative: 232 155 104; /* lightened terracotta, 7.6:1 on surface */
--color-negative-surface: 154 52 18; /* orange-800, used at reduced opacity via bg-negative-surface/20 */ --color-negative-surface: 92 51 22; /* dark terracotta, used at reduced opacity */
--color-info: 96 165 250; /* blue-400, 7.0:1 on surface */ --color-info: 201 192 176; /* lightened taupe, 8.9:1 on surface */
--color-info-surface: 30 58 138; /* blue-900, used at reduced opacity via bg-info-surface/20 */ --color-info-surface: 61 56 46; /* dark taupe, used at reduced opacity */
--color-danger: 248 113 113; /* red-400, 6.4:1 on surface */ --color-danger: 232 129 129; /* 7.2:1 on surface */
--color-danger-surface: 127 29 29; /* red-900, used at reduced opacity via bg-danger-surface/20 */ --color-danger-surface: 74 32 32;
--color-focus-ring: 129 140 248; /* indigo-400, 5.9:1 on surface */ --color-focus-ring: 224 148 96;
/* fill tokens stay identical to light mode — see rationale above */ /* fill tokens stay identical to light mode — see rationale above */
--color-positive-fill: 21 128 61; --color-positive-fill: 86 99 63;
--color-negative-fill: 194 65 12; --color-negative-fill: 214 127 72;
--color-info-fill: 37 99 235; --color-info-fill: 71 66 56;
--color-danger-fill: 220 38 38; --color-danger-fill: 166 45 45;
} }
resources/views/components/nav-link.blade.php
+2 -2
View File
@@ -2,8 +2,8 @@
@php @php
$classes = ($active ?? false) $classes = ($active ?? false)
? 'inline-flex items-center px-1 pt-1 border-b-2 border-brand text-sm font-medium leading-5 text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out' ? 'inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold leading-5 text-brand bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out'
: 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-text-muted hover:text-text hover:border-border-strong focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out'; : 'inline-flex items-center px-4 py-2 rounded-full text-sm font-medium leading-5 text-text-muted hover:bg-surface-alt hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition duration-150 ease-in-out';
@endphp @endphp
<a {{ $attributes->merge(['class' => $classes]) }}> <a {{ $attributes->merge(['class' => $classes]) }}>
resources/views/components/primary-button.blade.php
+1 -1
View File
@@ -1,3 +1,3 @@
<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150']) }}> <button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-5 py-2.5 bg-brand border border-transparent rounded-full font-bold text-sm text-surface hover:bg-brand-emphasis focus:bg-brand-emphasis active:bg-brand-emphasis focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150']) }}>
{{ $slot }} {{ $slot }}
</button> </button>
resources/views/components/secondary-button.blade.php
+1 -1
View File
@@ -1,3 +1,3 @@
<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-4 py-2 bg-surface border border-border-strong rounded-md font-semibold text-xs text-text-muted uppercase tracking-widest shadow-sm hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:opacity-25 transition ease-in-out duration-150']) }}> <button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-5 py-2.5 bg-surface border border-border-strong rounded-full font-semibold text-sm text-text-muted hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface disabled:opacity-25 transition ease-in-out duration-150']) }}>
{{ $slot }} {{ $slot }}
</button> </button>
resources/views/components/text-input.blade.php
+1 -1
View File
@@ -1,3 +1,3 @@
@props(['disabled' => false]) @props(['disabled' => false])
<input @disabled($disabled) {{ $attributes->merge(['class' => 'bg-surface border-border-strong text-text focus:border-brand focus:ring-brand rounded-md shadow-sm']) }}> <input @disabled($disabled) {{ $attributes->merge(['class' => 'bg-surface-alt border-border-strong text-text focus:border-brand focus:ring-brand rounded-full shadow-sm']) }}>
resources/views/layouts/app.blade.php
+8 -4
View File
@@ -11,19 +11,23 @@
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net"> <link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" /> <link href="https://fonts.bunny.net/css?family=figtree:400,600,700,800&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Caprasimo&display=swap" rel="stylesheet" />
<!-- Scripts --> <!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/css/app.css', 'resources/js/app.js'])
</head> </head>
<body class="font-sans antialiased bg-surface-alt text-text"> <body class="font-sans antialiased bg-surface-alt text-text">
<div class="min-h-screen bg-surface-alt"> <div class="min-h-screen bg-surface-alt pb-12">
<div class="px-4 pt-4 sm:px-6 lg:px-8">
<livewire:layout.navigation /> <livewire:layout.navigation />
</div>
<!-- Page Heading --> <!-- Page Heading -->
@if (isset($header)) @if (isset($header))
<header class="bg-surface shadow"> <header class="bg-surface shadow rounded-2xl max-w-7xl mx-auto mt-4">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> <div class="py-6 px-4 sm:px-6 lg:px-8">
{{ $header }} {{ $header }}
</div> </div>
</header> </header>
resources/views/livewire/dashboard/index.blade.php
+17 -17
View File
@@ -1,18 +1,18 @@
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 space-y-6"> <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 space-y-6">
<div class="flex flex-wrap items-center justify-between gap-4"> <div class="flex flex-wrap items-center justify-between gap-4">
<h1 class="text-xl font-semibold text-text">Tableau de bord</h1> <h1 class="text-3xl font-display text-text">Tableau de bord</h1>
<div class="flex items-center gap-3"> <div class="flex items-center gap-2">
<div> <div>
<label for="dashboard-year" class="text-xs text-text-muted">Année</label> <label for="dashboard-year" class="sr-only">Année</label>
<select id="dashboard-year" wire:model.live="year" class="block rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"> <select id="dashboard-year" wire:model.live="year" class="block 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">
@foreach (range($year - 3, $year + 3) as $y) @foreach (range($year - 3, $year + 3) as $y)
<option value="{{ $y }}">{{ $y }}</option> <option value="{{ $y }}">{{ $y }}</option>
@endforeach @endforeach
</select> </select>
</div> </div>
<div> <div>
<label for="dashboard-period" class="text-xs text-text-muted">Période</label> <label for="dashboard-period" class="sr-only">Période</label>
<select id="dashboard-period" wire:model.live="period" class="block rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"> <select id="dashboard-period" wire:model.live="period" class="block 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="year">Année complète</option> <option value="year">Année complète</option>
@foreach (['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] as $i => $label) @foreach (['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] as $i => $label)
<option value="{{ $i + 1 }}">{{ $label }}</option> <option value="{{ $i + 1 }}">{{ $label }}</option>
@@ -22,9 +22,9 @@
</div> </div>
</div> </div>
<div class="bg-surface shadow rounded-lg p-4 max-w-xs"> <div class="bg-surface shadow rounded-3xl px-6 py-5 inline-flex flex-col gap-1">
<p class="text-xs text-text-muted">Reste à dépenser</p> <p class="text-xs text-text-muted uppercase tracking-wide">Reste à dépenser</p>
<p class="mt-1 text-lg font-semibold text-negative">{{ number_format($sections['depense']['totals']['reste'], 2, ',', ' ') }} €</p> <p class="font-display text-2xl text-negative">{{ number_format($sections['depense']['totals']['reste'], 2, ',', ' ') }} €</p>
</div> </div>
@php @php
@@ -44,16 +44,16 @@
@endphp @endphp
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-surface shadow rounded-lg overflow-hidden"> <div class="bg-surface shadow rounded-3xl overflow-hidden">
<div class="px-4 py-2 bg-text"> <div class="px-5 pt-4 pb-1">
<h2 class="text-surface font-semibold text-sm">Analyse</h2> <h2 class="font-semibold text-base text-text">Analyse</h2>
</div> </div>
<div class="divide-y divide-border"> <div class="divide-y divide-border">
@foreach ($types as $type) @foreach ($types as $type)
@php $section = $sections[$type->value]; @endphp @php $section = $sections[$type->value]; @endphp
<div> <div class="px-5 pb-5">
<div class="{{ $colors[$type->value]['bg'] }} px-4 py-1.5"> <div class="{{ $colors[$type->value]['bg'] }} px-4 py-2 rounded-2xl mb-2">
<h3 class="text-white text-sm font-medium">{{ $type->label() }}</h3> <h3 class="text-white text-sm font-bold">{{ $type->label() }}</h3>
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="min-w-full text-sm"> <table class="min-w-full text-sm">
@@ -110,8 +110,8 @@
<div class="space-y-6"> <div class="space-y-6">
@foreach ($types as $type) @foreach ($types as $type)
@php $top = $chartData[$type->value]; @endphp @php $top = $chartData[$type->value]; @endphp
<div class="bg-surface shadow rounded-lg p-4"> <div class="bg-surface shadow rounded-3xl p-5">
<h3 class="text-sm font-medium mb-2 text-text">Catégorie de <span class="{{ $type->value === 'revenu' ? 'text-positive' : ($type->value === 'depense' ? 'text-negative' : 'text-info') }}">{{ Str::lower($type->label()) }}</span> (suivis)</h3> <h3 class="text-sm font-semibold mb-4 text-text">Catégorie de <span class="{{ $type->value === 'revenu' ? 'text-positive' : ($type->value === 'depense' ? 'text-negative' : 'text-info') }}">{{ Str::lower($type->label()) }}</span> (suivis)</h3>
@if ($top['labels']->isEmpty()) @if ($top['labels']->isEmpty())
<p class="text-xs text-text-muted py-8 text-center">Aucun montant suivi.</p> <p class="text-xs text-text-muted py-8 text-center">Aucun montant suivi.</p>
resources/views/livewire/layout/navigation.blade.php
+15 -15
View File
@@ -16,20 +16,23 @@ new class extends Component
} }
}; ?> }; ?>
<nav x-data="{ open: false }" class="bg-surface border-b border-border"> <nav x-data="{ open: false }" class="bg-surface rounded-full shadow-sm">
<!-- Primary Navigation Menu --> <!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="px-2.5 py-2">
<div class="flex justify-between h-16"> <div class="flex justify-between items-center">
<div class="flex"> <div class="flex items-center">
<!-- Logo --> <!-- Logo -->
<div class="shrink-0 flex items-center"> <div class="shrink-0 flex items-center gap-2.5 mr-2">
<a href="{{ route('dashboard') }}" wire:navigate aria-label="{{ config('app.name', 'Laravel') }} — Tableau de bord" class="rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface"> <a href="{{ route('dashboard') }}" wire:navigate aria-label="{{ config('app.name', 'Laravel') }} — Tableau de bord" class="flex items-center gap-2.5 rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface">
<x-application-logo class="block h-9 w-auto text-text" /> <span class="w-9 h-9 rounded-full bg-brand flex items-center justify-center shrink-0">
<x-application-logo class="block h-5 w-auto text-surface" />
</span>
<span class="hidden sm:inline font-display text-lg text-text">{{ config('app.name', 'SuiviCPT') }}</span>
</a> </a>
</div> </div>
<!-- Navigation Links --> <!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex"> <div class="hidden sm:flex sm:items-center sm:gap-1">
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate> <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
{{ __('Tableau de bord') }} {{ __('Tableau de bord') }}
</x-nav-link> </x-nav-link>
@@ -57,14 +60,11 @@ new class extends Component
<x-dropdown align="right" width="48"> <x-dropdown align="right" width="48">
<x-slot name="trigger"> <x-slot name="trigger">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-text-muted bg-surface hover:text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150"> <button class="inline-flex items-center gap-2 pl-1 pr-3 py-1 rounded-full text-sm leading-4 font-medium text-text hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface transition ease-in-out duration-150">
<span class="w-8 h-8 rounded-full bg-positive-fill text-surface flex items-center justify-center text-xs font-bold shrink-0">{{ Str::of(auth()->user()->name)->explode(' ')->map(fn ($p) => mb_substr($p, 0, 1))->take(2)->implode('') }}</span>
<div x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div> <div x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
<div class="ms-1"> <div class="text-text-muted text-[10px]">⌄</div>
<svg class="fill-current h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button> </button>
</x-slot> </x-slot>
@@ -117,7 +117,7 @@ new class extends Component
</div> </div>
<!-- Responsive Navigation Menu --> <!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden"> <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden mt-2 bg-surface rounded-3xl shadow-sm px-2">
<div class="pt-2 pb-3 space-y-1"> <div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate> <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
{{ __('Tableau de bord') }} {{ __('Tableau de bord') }}
resources/views/livewire/plan/index.blade.php
+8 -8
View File
@@ -1,10 +1,10 @@
<div class="max-w-[1600px] mx-auto py-6 px-4 sm:px-6 space-y-6"> <div class="max-w-[1600px] mx-auto py-6 px-4 sm:px-6 space-y-6">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<h1 class="text-xl font-semibold text-text">Plan</h1> <h1 class="text-3xl font-display text-text">Plan</h1>
<div class="flex items-center gap-2"> <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="px-2 py-1 text-sm rounded-md border border-border-strong text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">&lsaquo;</button> <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">&lsaquo;</button>
<span class="text-sm font-medium text-text-muted w-16 text-center">{{ $year }}</span> <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="px-2 py-1 text-sm rounded-md border border-border-strong text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">&rsaquo;</button> <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">&rsaquo;</button>
</div> </div>
</div> </div>
@@ -18,9 +18,9 @@
@foreach ($types as $type) @foreach ($types as $type)
@php $section = $sections[$type->value]; @endphp @php $section = $sections[$type->value]; @endphp
<div class="bg-surface shadow rounded-lg overflow-hidden"> <div class="bg-surface shadow rounded-3xl overflow-hidden">
<div class="{{ $colors[$type->value]['bg'] }} px-4 py-2"> <div class="{{ $colors[$type->value]['bg'] }} px-5 py-2.5">
<h2 class="text-white font-semibold">{{ $type->label() }}</h2> <h2 class="text-white font-bold">{{ $type->label() }}</h2>
</div> </div>
<div class="p-2"> <div class="p-2">
resources/views/livewire/sankey/index.blade.php
+7 -7
View File
@@ -1,18 +1,18 @@
<div class="max-w-5xl mx-auto py-6 px-4 sm:px-6 space-y-6"> <div class="max-w-5xl mx-auto py-6 px-4 sm:px-6 space-y-6">
<div class="flex flex-wrap items-center justify-between gap-4"> <div class="flex flex-wrap items-center justify-between gap-4">
<h1 class="text-xl font-semibold text-text">Répartition des flux</h1> <h1 class="text-3xl font-display text-text">Répartition des flux</h1>
<div class="flex items-center gap-3"> <div class="flex items-center gap-2">
<div> <div>
<label for="sankey-year" class="text-xs text-text-muted">Année</label> <label for="sankey-year" class="sr-only">Année</label>
<select id="sankey-year" wire:model.live="year" class="block rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"> <select id="sankey-year" wire:model.live="year" class="block 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">
@foreach (range($year - 3, $year + 3) as $y) @foreach (range($year - 3, $year + 3) as $y)
<option value="{{ $y }}">{{ $y }}</option> <option value="{{ $y }}">{{ $y }}</option>
@endforeach @endforeach
</select> </select>
</div> </div>
<div> <div>
<label for="sankey-period" class="text-xs text-text-muted">Période</label> <label for="sankey-period" class="sr-only">Période</label>
<select id="sankey-period" wire:model.live="period" class="block rounded-md bg-surface border-border-strong text-text text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"> <select id="sankey-period" wire:model.live="period" class="block 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="year">Année complète</option> <option value="year">Année complète</option>
@foreach (['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] as $i => $label) @foreach (['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'] as $i => $label)
<option value="{{ $i + 1 }}">{{ $label }}</option> <option value="{{ $i + 1 }}">{{ $label }}</option>
@@ -22,7 +22,7 @@
</div> </div>
</div> </div>
<div class="bg-surface shadow rounded-lg p-4"> <div class="bg-surface shadow rounded-3xl p-6">
@if (! $hasData) @if (! $hasData)
<p class="text-sm text-text-muted py-12 text-center">Aucun revenu suivi sur cette période.</p> <p class="text-sm text-text-muted py-12 text-center">Aucun revenu suivi sur cette période.</p>
@else @else
resources/views/livewire/suivi/index.blade.php
+25 -25
View File
@@ -6,7 +6,7 @@
x-on:transaction-added.window="message = 'Opération ajoutée'; toast = true; setTimeout(() => toast = false, 2000)" 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)" 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()) @if ($pendingRecurrences->isNotEmpty())
<div class="space-y-3"> <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> <p class="text-sm font-medium text-text-muted mb-2">Dernières opérations</p>
<ul class="space-y-2"> <ul class="space-y-2">
@foreach ($recentTransactions as $transaction) @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"> <div class="min-w-0">
<p class="text-sm text-text truncate"> <p class="text-sm text-text truncate">
{{ $transaction->category->name }} {{ $transaction->category->name }}
@@ -219,37 +219,37 @@
{{-- Desktop / tablet: full table view --}} {{-- 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"> <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="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="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>
<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="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>
<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="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> <p class="text-xs text-text-muted">{{ $nbrThisYear }} cette année</p>
</div> </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="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> <p class="text-xs text-text-muted">revenus restent à affecter</p>
</div> </div>
</div> </div>
@if ($paidBySummary->isNotEmpty()) @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> <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) @foreach ($paidBySummary as $entry)
<div> <div>
<p class="text-xs text-text-muted">{{ $entry['label'] }}</p> <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> </div>
@endforeach @endforeach
</div> </div>
@@ -257,9 +257,9 @@
@endif @endif
@if ($pendingRecurrences->isNotEmpty()) @if ($pendingRecurrences->isNotEmpty())
<div class="bg-surface shadow rounded-lg overflow-hidden"> <div class="bg-surface shadow rounded-2xl overflow-hidden">
<div class="px-4 py-2 bg-brand"> <div class="px-5 py-3 bg-positive-fill">
<h2 class="text-white font-semibold text-sm">À confirmer ce mois-ci</h2> <h2 class="text-white font-bold text-sm">À confirmer ce mois-ci</h2>
</div> </div>
<ul class="divide-y divide-border"> <ul class="divide-y divide-border">
@foreach ($pendingRecurrences as $recurring) @foreach ($pendingRecurrences as $recurring)
@@ -300,8 +300,8 @@
</div> </div>
@endif @endif
<div class="bg-surface shadow rounded-lg p-4"> <div class="bg-surface shadow rounded-3xl p-5">
<p class="text-sm font-medium text-text-muted mb-3">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</p> <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"> <form wire:submit="addTransaction" class="grid grid-cols-1 sm:grid-cols-6 gap-3 items-end">
<div> <div>
<x-input-label for="date" value="Date" /> <x-input-label for="date" value="Date" />
@@ -309,7 +309,7 @@
</div> </div>
<div> <div>
<x-input-label for="categoryId" value="Catégorie" /> <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> <option value="">—</option>
@foreach ($categories as $category) @foreach ($categories as $category)
<option value="{{ $category->id }}">{{ $category->type->label() }} — {{ $category->name }}</option> <option value="{{ $category->id }}">{{ $category->type->label() }} — {{ $category->name }}</option>
@@ -332,7 +332,7 @@
</div> </div>
<div> <div>
<x-input-label for="paidByUserId" value="Payé par" /> <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> <option value="">Commun</option>
@foreach ($members as $member) @foreach ($members as $member)
<option value="{{ $member->id }}">{{ $member->name }}</option> <option value="{{ $member->id }}">{{ $member->name }}</option>
@@ -359,9 +359,9 @@
$amountPrefix = fn ($t) => $t->category->type->value === 'depense' ? '−' : '+'; $amountPrefix = fn ($t) => $t->category->type->value === 'depense' ? '−' : '+';
@endphp @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> <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="">Tout le monde</option>
<option value="common">Commun</option> <option value="common">Commun</option>
@foreach ($members as $member) @foreach ($members as $member)
@@ -370,7 +370,7 @@
</select> </select>
</div> </div>
<div class="bg-surface shadow rounded-lg overflow-hidden"> <div class="bg-surface shadow rounded-3xl overflow-hidden">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="min-w-full text-sm"> <table class="min-w-full text-sm">
<caption class="sr-only">Historique des transactions du foyer</caption> <caption class="sr-only">Historique des transactions du foyer</caption>
@@ -391,7 +391,7 @@
@forelse ($transactions as $transaction) @forelse ($transactions as $transaction)
<tr class="border-t border-border/60"> <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 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-text">{{ $transaction->category->name }}</td>
<td class="px-4 py-2 text-right font-medium {{ $amountColor($transaction) }}"> <td class="px-4 py-2 text-right font-medium {{ $amountColor($transaction) }}">
{{ $amountPrefix($transaction) }}{{ number_format($transaction->amount, 2, ',', ' ') }} € {{ $amountPrefix($transaction) }}{{ number_format($transaction->amount, 2, ',', ' ') }} €
tailwind.config.js
+1
View File
@@ -14,6 +14,7 @@ export default {
extend: { extend: {
fontFamily: { fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans], sans: ['Figtree', ...defaultTheme.fontFamily.sans],
display: ['Caprasimo', ...defaultTheme.fontFamily.sans],
}, },
colors: { colors: {
surface: 'rgb(var(--color-surface) / <alpha-value>)', surface: 'rgb(var(--color-surface) / <alpha-value>)',