Initial commit: SuiviCPT personal finance tracker
Laravel 11 + Livewire 3/Volt + Alpine.js + Tailwind app for household budget planning, transaction tracking, and financial dashboards. - Multi-tenant households with member invites - Plan: monthly/yearly budget per category with overrides - Suivi: transaction log with running balance (desktop + mobile quick-entry) - Dashboard: budget vs tracked breakdown + Chart.js donuts - Flux: Sankey diagram of income allocation - WCAG 2.1 AA color tokens, dark mode, accessible tables/forms - 50 Pest tests Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jeremy bayse
@@ -0,0 +1,57 @@
|
||||
<div class="max-w-3xl mx-auto py-6 px-4 sm:px-0 space-y-6">
|
||||
<h1 class="text-xl font-semibold text-text">Catégories</h1>
|
||||
|
||||
@php
|
||||
$colors = [
|
||||
'revenu' => 'bg-positive-fill',
|
||||
'depense' => 'bg-negative-fill',
|
||||
'epargne' => 'bg-info-fill',
|
||||
];
|
||||
@endphp
|
||||
|
||||
@foreach ($types as $type)
|
||||
<div class="bg-surface shadow rounded-lg overflow-hidden">
|
||||
<div class="{{ $colors[$type->value] }} px-4 py-2">
|
||||
<h2 class="text-white font-semibold">{{ $type->label() }}</h2>
|
||||
</div>
|
||||
|
||||
<ul class="divide-y divide-border">
|
||||
@forelse ($categories->get($type->value) ?? [] as $category)
|
||||
<li class="px-4 py-2 flex items-center justify-between">
|
||||
@if ($editingId === $category->id)
|
||||
<form wire:submit="saveEdit" class="flex-1 flex items-center gap-2">
|
||||
<label for="editing-name-{{ $category->id }}" class="sr-only">Renommer {{ $category->name }}</label>
|
||||
<input wire:model="editingName" id="editing-name-{{ $category->id }}" type="text" class="flex-1 bg-surface border-border-strong text-text rounded-md text-sm py-1" autofocus />
|
||||
<button type="submit" class="text-xs text-positive hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">Sauver</button>
|
||||
<button type="button" wire:click="cancelEdit" class="text-xs text-text-muted hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">Annuler</button>
|
||||
</form>
|
||||
@else
|
||||
<span class="text-sm text-text">{{ $category->name }}</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<button wire:click="startEdit({{ $category->id }})" aria-label="Modifier {{ $category->name }}" class="text-xs text-brand hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">Modifier</button>
|
||||
<button wire:click="delete({{ $category->id }})" wire:confirm="Supprimer cette catégorie ?" aria-label="Supprimer {{ $category->name }}" class="text-xs text-danger hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">Supprimer</button>
|
||||
</div>
|
||||
@endif
|
||||
</li>
|
||||
@empty
|
||||
<li class="px-4 py-3 text-sm text-text-muted">Aucune catégorie.</li>
|
||||
@endforelse
|
||||
</ul>
|
||||
|
||||
<form wire:submit="add('{{ $type->value }}')" class="px-4 py-3 bg-surface-alt flex items-center gap-2">
|
||||
<label for="new-category-{{ $type->value }}" class="sr-only">Nouvelle catégorie de {{ Str::lower($type->label()) }}</label>
|
||||
<input
|
||||
id="new-category-{{ $type->value }}"
|
||||
type="text"
|
||||
placeholder="Nouvelle catégorie"
|
||||
class="flex-1 bg-surface border-border-strong text-text rounded-md text-sm py-1"
|
||||
wire:model="newName.{{ $type->value }}"
|
||||
/>
|
||||
<button type="submit" class="text-sm text-white {{ $colors[$type->value] }} px-3 py-1 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface">
|
||||
Ajouter
|
||||
</button>
|
||||
</form>
|
||||
@error("newName.{$type->value}") <p class="px-4 pb-2 text-xs text-danger">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@@ -0,0 +1,180 @@
|
||||
<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">
|
||||
<h1 class="text-xl font-semibold text-text">Tableau de bord</h1>
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
<label for="dashboard-year" class="text-xs text-text-muted">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">
|
||||
@foreach (range($year - 3, $year + 3) as $y)
|
||||
<option value="{{ $y }}">{{ $y }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="dashboard-period" class="text-xs text-text-muted">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">
|
||||
<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)
|
||||
<option value="{{ $i + 1 }}">{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</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'],
|
||||
];
|
||||
|
||||
// Ordered to alternate light/dark shades so adjacent donut slices stay distinguishable
|
||||
// even without relying on the border stroke (WCAG 1.4.11 graphical-object contrast).
|
||||
$chartPalettes = [
|
||||
'revenu' => ['#15803d', '#4ade80', '#166534', '#86efac', '#16a34a', '#22c55e'],
|
||||
'depense' => ['#991b1b', '#fb923c', '#c2410c', '#fdba74', '#dc2626', '#f97316'],
|
||||
'epargne' => ['#1e40af', '#93c5fd', '#1d4ed8', '#bfdbfe', '#2563eb', '#60a5fa'],
|
||||
];
|
||||
@endphp
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="bg-surface shadow rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-2 bg-text">
|
||||
<h2 class="text-surface font-semibold text-sm">Analyse</h2>
|
||||
</div>
|
||||
<div class="divide-y divide-border">
|
||||
@foreach ($types as $type)
|
||||
@php $section = $sections[$type->value]; @endphp
|
||||
<div>
|
||||
<div class="{{ $colors[$type->value]['bg'] }} px-4 py-1.5">
|
||||
<h3 class="text-white text-sm font-medium">{{ $type->label() }}</h3>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<caption class="sr-only">Suivi budgétaire {{ Str::lower($type->label()) }}</caption>
|
||||
<thead>
|
||||
<tr class="text-xs text-text-muted">
|
||||
<th scope="col" class="text-left px-4 py-1.5">Catégorie</th>
|
||||
<th scope="col" class="text-right px-2 py-1.5">Tracked</th>
|
||||
<th scope="col" class="text-right px-2 py-1.5">Budget</th>
|
||||
<th scope="col" class="text-center px-2 py-1.5">% Compl.</th>
|
||||
<th scope="col" class="text-right px-2 py-1.5">Reste</th>
|
||||
<th scope="col" class="text-right px-2 py-1.5">Manque</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($section['rows'] as $row)
|
||||
<tr class="border-t border-border/60 text-text">
|
||||
<th scope="row" class="px-4 py-1.5 whitespace-nowrap font-normal text-left">{{ $row['category']->name }}</th>
|
||||
<td class="px-2 py-1.5 text-right">{{ number_format($row['tracked'], 2, ',', ' ') }} €</td>
|
||||
<td class="px-2 py-1.5 text-right">{{ number_format($row['budget'], 2, ',', ' ') }} €</td>
|
||||
<td class="px-2 py-1.5">
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-10 h-1.5 bg-surface-alt rounded-full overflow-hidden" role="img" aria-label="{{ $row['pct'] }}% du budget utilisé">
|
||||
<div class="h-full {{ $colors[$type->value]['bg'] }}" style="width: {{ $row['pct'] }}%"></div>
|
||||
</div>
|
||||
<span class="text-xs">{{ $row['pct'] }}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-2 py-1.5 text-right">{{ number_format($row['reste'], 2, ',', ' ') }} €</td>
|
||||
<td class="px-2 py-1.5 text-right {{ $row['manque'] > 0 ? 'text-danger font-semibold' : '' }}">
|
||||
@if ($row['manque'] > 0)
|
||||
<span aria-hidden="true">⚠ </span><span class="sr-only">Dépassement : </span>
|
||||
@endif
|
||||
{{ number_format($row['manque'], 2, ',', ' ') }} €
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
<tr class="border-t border-border font-semibold {{ $colors[$type->value]['row'] }} text-text">
|
||||
<th scope="row" class="px-4 py-1.5 font-semibold text-left">Total</th>
|
||||
<td class="px-2 py-1.5 text-right">{{ number_format($section['totals']['tracked'], 2, ',', ' ') }} €</td>
|
||||
<td class="px-2 py-1.5 text-right">{{ number_format($section['totals']['budget'], 2, ',', ' ') }} €</td>
|
||||
<td class="px-2 py-1.5"></td>
|
||||
<td class="px-2 py-1.5 text-right">{{ number_format($section['totals']['reste'], 2, ',', ' ') }} €</td>
|
||||
<td class="px-2 py-1.5 text-right">{{ number_format($section['totals']['manque'], 2, ',', ' ') }} €</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach ($types as $type)
|
||||
@php $top = $chartData[$type->value]; @endphp
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<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>
|
||||
|
||||
@if ($top['labels']->isEmpty())
|
||||
<p class="text-xs text-text-muted py-8 text-center">Aucun montant suivi.</p>
|
||||
@else
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="donutChart(@js($top['labels']), @js($top['data']), @js($chartPalettes[$type->value]))"
|
||||
x-init="init()"
|
||||
wire:key="chart-{{ $type->value }}-{{ $year }}-{{ $period }}"
|
||||
class="flex items-center gap-4"
|
||||
>
|
||||
<div class="w-32 h-32 shrink-0">
|
||||
<canvas x-ref="canvas" role="img" aria-label="Répartition {{ Str::lower($type->label()) }} par catégorie"></canvas>
|
||||
</div>
|
||||
<ul class="text-xs space-y-1 flex-1">
|
||||
@foreach ($top['labels'] as $i => $label)
|
||||
<li class="flex items-center justify-between gap-2 text-text">
|
||||
<span class="flex items-center gap-1.5">
|
||||
<span class="inline-block w-2.5 h-2.5 rounded-full ring-1 ring-border-strong" style="background-color: {{ $chartPalettes[$type->value][$i % 6] }}"></span>
|
||||
{{ $label }}
|
||||
</span>
|
||||
<span>{{ number_format($top['data'][$i], 2, ',', ' ') }} €</span>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="mt-2 pt-2 border-t border-border flex justify-between text-xs font-semibold text-text">
|
||||
<span>Total</span>
|
||||
<span>{{ number_format($sections[$type->value]['totals']['tracked'], 2, ',', ' ') }} €</span>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@once
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('donutChart', (labels, data, palette) => ({
|
||||
chart: null,
|
||||
init() {
|
||||
// Visible stroke between slices so adjacent segments stay
|
||||
// distinguishable even when their fill colors are close (WCAG 1.4.11).
|
||||
const surface = getComputedStyle(document.documentElement).getPropertyValue('--color-surface').trim();
|
||||
this.chart = new Chart(this.$refs.canvas, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
data: data,
|
||||
backgroundColor: labels.map((_, i) => palette[i % palette.length]),
|
||||
borderColor: `rgb(${surface})`,
|
||||
borderWidth: 2,
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
plugins: { legend: { display: false } },
|
||||
cutout: '70%',
|
||||
},
|
||||
});
|
||||
},
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endonce
|
||||
</div>
|
||||
@@ -0,0 +1,35 @@
|
||||
<div class="max-w-md mx-auto mt-10 bg-surface shadow rounded-lg p-6 text-center">
|
||||
@if ($invalid)
|
||||
<h1 class="text-lg font-semibold text-text">Invitation invalide ou expirée</h1>
|
||||
<p class="mt-2 text-sm text-text-muted">Demandez une nouvelle invitation à l'administrateur du foyer.</p>
|
||||
<a href="{{ route('login') }}" wire:navigate class="mt-4 inline-block text-brand underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">Retour à la connexion</a>
|
||||
@else
|
||||
<h1 class="text-lg font-semibold text-text">
|
||||
Rejoindre {{ $invite->household->name }}
|
||||
</h1>
|
||||
<p class="mt-2 text-sm text-text-muted">
|
||||
{{ $invite->inviter->name }} vous invite à rejoindre ce foyer sur SuiviCPT.
|
||||
</p>
|
||||
|
||||
@auth
|
||||
@if (auth()->user()->email === $invite->email)
|
||||
<button wire:click="accept" class="mt-4 inline-flex items-center px-4 py-2 bg-brand text-white text-sm rounded-md hover: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">
|
||||
Accepter l'invitation
|
||||
</button>
|
||||
@else
|
||||
<p class="mt-4 text-sm text-danger">
|
||||
Cette invitation est destinée à {{ $invite->email }}. Déconnectez-vous pour l'accepter avec le bon compte.
|
||||
</p>
|
||||
@endif
|
||||
@else
|
||||
<div class="mt-4 flex flex-col gap-2">
|
||||
<a href="{{ route('register', ['invite' => $invite->token]) }}" wire:navigate class="inline-flex items-center justify-center px-4 py-2 bg-brand text-white text-sm rounded-md hover: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">
|
||||
Créer un compte et rejoindre
|
||||
</a>
|
||||
<a href="{{ route('login') }}" wire:navigate class="text-sm text-brand underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
|
||||
J'ai déjà un compte
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="max-w-md mx-auto mt-10 bg-surface shadow rounded-lg p-6">
|
||||
<h1 class="text-lg font-semibold text-text">Créer votre foyer</h1>
|
||||
<p class="mt-1 text-sm text-text-muted">Vous n'appartenez à aucun foyer. Créez-en un pour commencer.</p>
|
||||
|
||||
<form wire:submit="create" class="mt-4">
|
||||
<x-input-label for="name" value="Nom du foyer" />
|
||||
<x-text-input wire:model="name" id="name" class="block mt-1 w-full" autofocus />
|
||||
<x-input-error :messages="$errors->get('name')" class="mt-2" />
|
||||
|
||||
<x-primary-button class="mt-4">Créer</x-primary-button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,56 @@
|
||||
<div class="max-w-3xl mx-auto py-6 space-y-6">
|
||||
<div class="bg-surface shadow rounded-lg p-6">
|
||||
<h2 class="text-lg font-semibold text-text">{{ $household->name }}</h2>
|
||||
|
||||
<h3 class="mt-6 text-sm font-medium text-text-muted">Membres</h3>
|
||||
<ul class="mt-2 divide-y divide-border">
|
||||
@foreach ($household->members as $member)
|
||||
<li class="py-2 flex items-center justify-between">
|
||||
<div>
|
||||
<span class="text-sm text-text">{{ $member->name }}</span>
|
||||
<span class="text-xs text-text-muted ml-2">{{ $member->pivot->role }}</span>
|
||||
</div>
|
||||
@if ($member->id !== $household->owner_id && $member->id !== auth()->id())
|
||||
<button wire:click="removeMember({{ $member->id }})" wire:confirm="Retirer ce membre du foyer ?" aria-label="Retirer {{ $member->name }} du foyer" class="text-xs text-danger hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
|
||||
Retirer
|
||||
</button>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
@if ($household->invites->isNotEmpty())
|
||||
<h3 class="mt-6 text-sm font-medium text-text-muted">Invitations en attente</h3>
|
||||
<ul class="mt-2 divide-y divide-border">
|
||||
@foreach ($household->invites as $pendingInvite)
|
||||
<li class="py-2 flex items-center justify-between">
|
||||
<span class="text-sm text-text-muted">{{ $pendingInvite->email }}</span>
|
||||
<button wire:click="revokeInvite({{ $pendingInvite->id }})" aria-label="Annuler l'invitation de {{ $pendingInvite->email }}" class="text-xs text-danger hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
|
||||
Annuler
|
||||
</button>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
|
||||
<form wire:submit="invite" class="mt-6 flex items-end gap-3">
|
||||
<div class="flex-1">
|
||||
<x-input-label for="inviteEmail" value="Inviter par email" />
|
||||
<x-text-input wire:model="inviteEmail" id="inviteEmail" type="email" class="block mt-1 w-full" />
|
||||
<x-input-error :messages="$errors->get('inviteEmail')" class="mt-2" />
|
||||
</div>
|
||||
<div>
|
||||
<x-input-label for="inviteRole" value="Rôle" />
|
||||
<select wire:model="inviteRole" id="inviteRole" 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">
|
||||
<option value="member">Membre</option>
|
||||
<option value="owner">Propriétaire</option>
|
||||
</select>
|
||||
</div>
|
||||
<x-primary-button>Envoyer</x-primary-button>
|
||||
</form>
|
||||
|
||||
<div x-data="{ shown: false }" x-on:invite-sent.window="shown = true; setTimeout(() => shown = false, 3000)" x-show="shown" x-cloak role="status" class="mt-3 text-sm text-positive">
|
||||
Invitation envoyée.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,171 @@
|
||||
<?php
|
||||
|
||||
use App\Livewire\Actions\Logout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component
|
||||
{
|
||||
/**
|
||||
* Log the current user out of the application.
|
||||
*/
|
||||
public function logout(Logout $logout): void
|
||||
{
|
||||
$logout();
|
||||
|
||||
$this->redirect('/', navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<nav x-data="{ open: false }" class="bg-surface border-b border-border">
|
||||
<!-- Primary Navigation Menu -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex">
|
||||
<!-- Logo -->
|
||||
<div class="shrink-0 flex items-center">
|
||||
<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">
|
||||
<x-application-logo class="block h-9 w-auto fill-current text-text" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">
|
||||
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Tableau de bord') }}
|
||||
</x-nav-link>
|
||||
@if (Route::has('plan'))
|
||||
<x-nav-link :href="route('plan')" :active="request()->routeIs('plan')" wire:navigate>
|
||||
{{ __('Plan') }}
|
||||
</x-nav-link>
|
||||
@endif
|
||||
@if (Route::has('suivi'))
|
||||
<x-nav-link :href="route('suivi')" :active="request()->routeIs('suivi')" wire:navigate>
|
||||
{{ __('Suivi') }}
|
||||
</x-nav-link>
|
||||
@endif
|
||||
@if (Route::has('sankey'))
|
||||
<x-nav-link :href="route('sankey')" :active="request()->routeIs('sankey')" wire:navigate>
|
||||
{{ __('Flux') }}
|
||||
</x-nav-link>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Dropdown -->
|
||||
<div class="hidden sm:flex sm:items-center sm:ms-6 gap-2">
|
||||
<x-theme-toggle />
|
||||
|
||||
<x-dropdown align="right" width="48">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
</x-slot>
|
||||
|
||||
<x-slot name="content">
|
||||
<x-dropdown-link :href="route('profile')" wire:navigate>
|
||||
{{ __('Profile') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
<x-dropdown-link :href="route('household.settings')" wire:navigate>
|
||||
{{ __('Foyer') }}
|
||||
</x-dropdown-link>
|
||||
|
||||
@if (Route::has('categories'))
|
||||
<x-dropdown-link :href="route('categories')" wire:navigate>
|
||||
{{ __('Catégories') }}
|
||||
</x-dropdown-link>
|
||||
@endif
|
||||
|
||||
<!-- Authentication -->
|
||||
<button wire:click="logout" class="w-full text-start">
|
||||
<x-dropdown-link>
|
||||
{{ __('Log Out') }}
|
||||
</x-dropdown-link>
|
||||
</button>
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Hamburger -->
|
||||
<div class="-me-2 flex items-center sm:hidden">
|
||||
<button
|
||||
@click="open = ! open"
|
||||
:aria-expanded="open.toString()"
|
||||
aria-label="Menu"
|
||||
class="inline-flex items-center justify-center p-2 rounded-md text-text-muted hover:text-text hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring transition duration-150 ease-in-out"
|
||||
>
|
||||
<svg class="h-6 w-6" aria-hidden="true" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Responsive Navigation Menu -->
|
||||
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
|
||||
<div class="pt-2 pb-3 space-y-1">
|
||||
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Tableau de bord') }}
|
||||
</x-responsive-nav-link>
|
||||
@if (Route::has('plan'))
|
||||
<x-responsive-nav-link :href="route('plan')" :active="request()->routeIs('plan')" wire:navigate>
|
||||
{{ __('Plan') }}
|
||||
</x-responsive-nav-link>
|
||||
@endif
|
||||
@if (Route::has('suivi'))
|
||||
<x-responsive-nav-link :href="route('suivi')" :active="request()->routeIs('suivi')" wire:navigate>
|
||||
{{ __('Suivi') }}
|
||||
</x-responsive-nav-link>
|
||||
@endif
|
||||
@if (Route::has('sankey'))
|
||||
<x-responsive-nav-link :href="route('sankey')" :active="request()->routeIs('sankey')" wire:navigate>
|
||||
{{ __('Flux') }}
|
||||
</x-responsive-nav-link>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Responsive Settings Options -->
|
||||
<div class="pt-4 pb-1 border-t border-border">
|
||||
<div class="px-4">
|
||||
<div class="font-medium text-base text-text" x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
|
||||
<div class="font-medium text-sm text-text-muted">{{ auth()->user()->email }}</div>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-2">
|
||||
<x-theme-toggle />
|
||||
</div>
|
||||
|
||||
<div class="mt-3 space-y-1">
|
||||
<x-responsive-nav-link :href="route('profile')" wire:navigate>
|
||||
{{ __('Profile') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('household.settings')" wire:navigate>
|
||||
{{ __('Foyer') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
@if (Route::has('categories'))
|
||||
<x-responsive-nav-link :href="route('categories')" wire:navigate>
|
||||
{{ __('Catégories') }}
|
||||
</x-responsive-nav-link>
|
||||
@endif
|
||||
|
||||
<!-- Authentication -->
|
||||
<button wire:click="logout" class="w-full text-start">
|
||||
<x-responsive-nav-link>
|
||||
{{ __('Log Out') }}
|
||||
</x-responsive-nav-link>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -0,0 +1,62 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('layouts.guest')] class extends Component
|
||||
{
|
||||
public string $password = '';
|
||||
|
||||
/**
|
||||
* Confirm the current user's password.
|
||||
*/
|
||||
public function confirmPassword(): void
|
||||
{
|
||||
$this->validate([
|
||||
'password' => ['required', 'string'],
|
||||
]);
|
||||
|
||||
if (! Auth::guard('web')->validate([
|
||||
'email' => Auth::user()->email,
|
||||
'password' => $this->password,
|
||||
])) {
|
||||
throw ValidationException::withMessages([
|
||||
'password' => __('auth.password'),
|
||||
]);
|
||||
}
|
||||
|
||||
session(['auth.password_confirmed_at' => time()]);
|
||||
|
||||
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-sm text-text-muted">
|
||||
{{ __('This is a secure area of the application. Please confirm your password before continuing.') }}
|
||||
</div>
|
||||
|
||||
<form wire:submit="confirmPassword">
|
||||
<!-- Password -->
|
||||
<div>
|
||||
<x-input-label for="password" :value="__('Password')" />
|
||||
|
||||
<x-text-input wire:model="password"
|
||||
id="password"
|
||||
class="block mt-1 w-full"
|
||||
type="password"
|
||||
name="password"
|
||||
required autocomplete="current-password" />
|
||||
|
||||
<x-input-error :messages="$errors->get('password')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4">
|
||||
<x-primary-button>
|
||||
{{ __('Confirm') }}
|
||||
</x-primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,61 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Password;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('layouts.guest')] class extends Component
|
||||
{
|
||||
public string $email = '';
|
||||
|
||||
/**
|
||||
* Send a password reset link to the provided email address.
|
||||
*/
|
||||
public function sendPasswordResetLink(): void
|
||||
{
|
||||
$this->validate([
|
||||
'email' => ['required', 'string', 'email'],
|
||||
]);
|
||||
|
||||
// We will send the password reset link to this user. Once we have attempted
|
||||
// to send the link, we will examine the response then see the message we
|
||||
// need to show to the user. Finally, we'll send out a proper response.
|
||||
$status = Password::sendResetLink(
|
||||
$this->only('email')
|
||||
);
|
||||
|
||||
if ($status != Password::RESET_LINK_SENT) {
|
||||
$this->addError('email', __($status));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$this->reset('email');
|
||||
|
||||
session()->flash('status', __($status));
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-sm text-text-muted">
|
||||
{{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
|
||||
</div>
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="mb-4" :status="session('status')" />
|
||||
|
||||
<form wire:submit="sendPasswordResetLink">
|
||||
<!-- Email Address -->
|
||||
<div>
|
||||
<x-input-label for="email" :value="__('Email')" />
|
||||
<x-text-input wire:model="email" id="email" class="block mt-1 w-full" type="email" name="email" required autofocus />
|
||||
<x-input-error :messages="$errors->get('email')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<x-primary-button>
|
||||
{{ __('Email Password Reset Link') }}
|
||||
</x-primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,71 @@
|
||||
<?php
|
||||
|
||||
use App\Livewire\Forms\LoginForm;
|
||||
use Illuminate\Support\Facades\Session;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('layouts.guest')] class extends Component
|
||||
{
|
||||
public LoginForm $form;
|
||||
|
||||
/**
|
||||
* Handle an incoming authentication request.
|
||||
*/
|
||||
public function login(): void
|
||||
{
|
||||
$this->validate();
|
||||
|
||||
$this->form->authenticate();
|
||||
|
||||
Session::regenerate();
|
||||
|
||||
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="mb-4" :status="session('status')" />
|
||||
|
||||
<form wire:submit="login">
|
||||
<!-- Email Address -->
|
||||
<div>
|
||||
<x-input-label for="email" :value="__('Email')" />
|
||||
<x-text-input wire:model="form.email" id="email" class="block mt-1 w-full" type="email" name="email" required autofocus autocomplete="username" />
|
||||
<x-input-error :messages="$errors->get('form.email')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="mt-4">
|
||||
<x-input-label for="password" :value="__('Password')" />
|
||||
|
||||
<x-text-input wire:model="form.password" id="password" class="block mt-1 w-full"
|
||||
type="password"
|
||||
name="password"
|
||||
required autocomplete="current-password" />
|
||||
|
||||
<x-input-error :messages="$errors->get('form.password')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Remember Me -->
|
||||
<div class="block mt-4">
|
||||
<label for="remember" class="inline-flex items-center">
|
||||
<input wire:model="form.remember" id="remember" type="checkbox" class="rounded bg-surface border-border-strong text-brand shadow-sm focus:ring-focus-ring focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface" name="remember">
|
||||
<span class="ms-2 text-sm text-text-muted">{{ __('Remember me') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
@if (Route::has('password.request'))
|
||||
<a class="underline text-sm text-text-muted hover:text-text rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-focus-ring focus-visible:ring-offset-surface" href="{{ route('password.request') }}" wire:navigate>
|
||||
{{ __('Forgot your password?') }}
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<x-primary-button class="ms-3">
|
||||
{{ __('Log in') }}
|
||||
</x-primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,131 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Household;
|
||||
use App\Models\HouseholdInvite;
|
||||
use App\Models\User;
|
||||
use Illuminate\Auth\Events\Registered;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
use Illuminate\Validation\Rules;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('layouts.guest')] class extends Component
|
||||
{
|
||||
public string $name = '';
|
||||
public string $email = '';
|
||||
public string $password = '';
|
||||
public string $password_confirmation = '';
|
||||
public ?string $invite = null;
|
||||
|
||||
public function mount(): void
|
||||
{
|
||||
$this->invite = request()->query('invite');
|
||||
|
||||
if ($this->invite) {
|
||||
$invite = HouseholdInvite::where('token', $this->invite)->first();
|
||||
|
||||
if ($invite && ! $invite->isExpired() && ! $invite->isAccepted()) {
|
||||
$this->email = $invite->email;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle an incoming registration request.
|
||||
*/
|
||||
public function register(): void
|
||||
{
|
||||
$validated = $this->validate([
|
||||
'name' => ['required', 'string', 'max:255'],
|
||||
'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:'.User::class],
|
||||
'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
|
||||
]);
|
||||
|
||||
$validated['password'] = Hash::make($validated['password']);
|
||||
|
||||
$invite = $this->invite
|
||||
? HouseholdInvite::where('token', $this->invite)
|
||||
->where('email', $validated['email'])
|
||||
->whereNull('accepted_at')
|
||||
->first()
|
||||
: null;
|
||||
|
||||
$user = DB::transaction(function () use ($validated, $invite) {
|
||||
$user = User::create($validated);
|
||||
|
||||
if ($invite && ! $invite->isExpired()) {
|
||||
$user->households()->attach($invite->household_id, ['role' => $invite->role]);
|
||||
$invite->update(['accepted_at' => now()]);
|
||||
$user->forceFill(['current_household_id' => $invite->household_id])->save();
|
||||
} else {
|
||||
$household = Household::create([
|
||||
'name' => $user->name."'s Household",
|
||||
'owner_id' => $user->id,
|
||||
]);
|
||||
$user->households()->attach($household->id, ['role' => 'owner']);
|
||||
$user->forceFill(['current_household_id' => $household->id])->save();
|
||||
}
|
||||
|
||||
return $user;
|
||||
});
|
||||
|
||||
event(new Registered($user));
|
||||
|
||||
Auth::login($user);
|
||||
|
||||
$this->redirect(route('dashboard', absolute: false), navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<form wire:submit="register">
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<x-input-label for="name" :value="__('Name')" />
|
||||
<x-text-input wire:model="name" id="name" class="block mt-1 w-full" type="text" name="name" required autofocus autocomplete="name" />
|
||||
<x-input-error :messages="$errors->get('name')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Email Address -->
|
||||
<div class="mt-4">
|
||||
<x-input-label for="email" :value="__('Email')" />
|
||||
<x-text-input wire:model="email" id="email" class="block mt-1 w-full" type="email" name="email" required autocomplete="username" />
|
||||
<x-input-error :messages="$errors->get('email')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="mt-4">
|
||||
<x-input-label for="password" :value="__('Password')" />
|
||||
|
||||
<x-text-input wire:model="password" id="password" class="block mt-1 w-full"
|
||||
type="password"
|
||||
name="password"
|
||||
required autocomplete="new-password" />
|
||||
|
||||
<x-input-error :messages="$errors->get('password')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div class="mt-4">
|
||||
<x-input-label for="password_confirmation" :value="__('Confirm Password')" />
|
||||
|
||||
<x-text-input wire:model="password_confirmation" id="password_confirmation" class="block mt-1 w-full"
|
||||
type="password"
|
||||
name="password_confirmation" required autocomplete="new-password" />
|
||||
|
||||
<x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<a class="underline text-sm text-text-muted hover:text-text rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-focus-ring focus-visible:ring-offset-surface" href="{{ route('login') }}" wire:navigate>
|
||||
{{ __('Already registered?') }}
|
||||
</a>
|
||||
|
||||
<x-primary-button class="ms-4">
|
||||
{{ __('Register') }}
|
||||
</x-primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,105 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Auth\Events\PasswordReset;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
use Illuminate\Support\Facades\Password;
|
||||
use Illuminate\Support\Facades\Session;
|
||||
use Illuminate\Support\Str;
|
||||
use Illuminate\Validation\Rules;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Attributes\Locked;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('layouts.guest')] class extends Component
|
||||
{
|
||||
#[Locked]
|
||||
public string $token = '';
|
||||
public string $email = '';
|
||||
public string $password = '';
|
||||
public string $password_confirmation = '';
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
public function mount(string $token): void
|
||||
{
|
||||
$this->token = $token;
|
||||
|
||||
$this->email = request()->string('email');
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the password for the given user.
|
||||
*/
|
||||
public function resetPassword(): void
|
||||
{
|
||||
$this->validate([
|
||||
'token' => ['required'],
|
||||
'email' => ['required', 'string', 'email'],
|
||||
'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
|
||||
]);
|
||||
|
||||
// Here we will attempt to reset the user's password. If it is successful we
|
||||
// will update the password on an actual user model and persist it to the
|
||||
// database. Otherwise we will parse the error and return the response.
|
||||
$status = Password::reset(
|
||||
$this->only('email', 'password', 'password_confirmation', 'token'),
|
||||
function ($user) {
|
||||
$user->forceFill([
|
||||
'password' => Hash::make($this->password),
|
||||
'remember_token' => Str::random(60),
|
||||
])->save();
|
||||
|
||||
event(new PasswordReset($user));
|
||||
}
|
||||
);
|
||||
|
||||
// If the password was successfully reset, we will redirect the user back to
|
||||
// the application's home authenticated view. If there is an error we can
|
||||
// redirect them back to where they came from with their error message.
|
||||
if ($status != Password::PASSWORD_RESET) {
|
||||
$this->addError('email', __($status));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
Session::flash('status', __($status));
|
||||
|
||||
$this->redirectRoute('login', navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<form wire:submit="resetPassword">
|
||||
<!-- Email Address -->
|
||||
<div>
|
||||
<x-input-label for="email" :value="__('Email')" />
|
||||
<x-text-input wire:model="email" id="email" class="block mt-1 w-full" type="email" name="email" required autofocus autocomplete="username" />
|
||||
<x-input-error :messages="$errors->get('email')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="mt-4">
|
||||
<x-input-label for="password" :value="__('Password')" />
|
||||
<x-text-input wire:model="password" id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
|
||||
<x-input-error :messages="$errors->get('password')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div class="mt-4">
|
||||
<x-input-label for="password_confirmation" :value="__('Confirm Password')" />
|
||||
|
||||
<x-text-input wire:model="password_confirmation" id="password_confirmation" class="block mt-1 w-full"
|
||||
type="password"
|
||||
name="password_confirmation" required autocomplete="new-password" />
|
||||
|
||||
<x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<x-primary-button>
|
||||
{{ __('Reset Password') }}
|
||||
</x-primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,58 @@
|
||||
<?php
|
||||
|
||||
use App\Livewire\Actions\Logout;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Session;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('layouts.guest')] class extends Component
|
||||
{
|
||||
/**
|
||||
* Send an email verification notification to the user.
|
||||
*/
|
||||
public function sendVerification(): void
|
||||
{
|
||||
if (Auth::user()->hasVerifiedEmail()) {
|
||||
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
Auth::user()->sendEmailVerificationNotification();
|
||||
|
||||
Session::flash('status', 'verification-link-sent');
|
||||
}
|
||||
|
||||
/**
|
||||
* Log the current user out of the application.
|
||||
*/
|
||||
public function logout(Logout $logout): void
|
||||
{
|
||||
$logout();
|
||||
|
||||
$this->redirect('/', navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-sm text-text-muted">
|
||||
{{ __('Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another.') }}
|
||||
</div>
|
||||
|
||||
@if (session('status') == 'verification-link-sent')
|
||||
<div class="mb-4 font-medium text-sm text-positive" role="status">
|
||||
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
<x-primary-button wire:click="sendVerification">
|
||||
{{ __('Resend Verification Email') }}
|
||||
</x-primary-button>
|
||||
|
||||
<button wire:click="logout" type="submit" class="underline text-sm text-text-muted hover:text-text rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-focus-ring focus-visible:ring-offset-surface">
|
||||
{{ __('Log Out') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,100 @@
|
||||
<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-xl font-semibold text-text">Plan</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<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">‹</button>
|
||||
<span class="text-sm font-medium text-text-muted w-16 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">›</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-lg overflow-hidden">
|
||||
<div class="{{ $colors[$type->value]['bg'] }} px-4 py-2">
|
||||
<h2 class="text-white font-semibold">{{ $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>
|
||||
@@ -0,0 +1,79 @@
|
||||
<?php
|
||||
|
||||
use App\Livewire\Actions\Logout;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component
|
||||
{
|
||||
public string $password = '';
|
||||
|
||||
/**
|
||||
* Delete the currently authenticated user.
|
||||
*/
|
||||
public function deleteUser(Logout $logout): void
|
||||
{
|
||||
$this->validate([
|
||||
'password' => ['required', 'string', 'current_password'],
|
||||
]);
|
||||
|
||||
tap(Auth::user(), $logout(...))->delete();
|
||||
|
||||
$this->redirect('/', navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<section class="space-y-6">
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-text">
|
||||
{{ __('Delete Account') }}
|
||||
</h2>
|
||||
|
||||
<p class="mt-1 text-sm text-text-muted">
|
||||
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.') }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<x-danger-button
|
||||
x-data=""
|
||||
x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')"
|
||||
>{{ __('Delete Account') }}</x-danger-button>
|
||||
|
||||
<x-modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable>
|
||||
<form wire:submit="deleteUser" class="p-6">
|
||||
|
||||
<h2 class="text-lg font-medium text-text">
|
||||
{{ __('Are you sure you want to delete your account?') }}
|
||||
</h2>
|
||||
|
||||
<p class="mt-1 text-sm text-text-muted">
|
||||
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
|
||||
</p>
|
||||
|
||||
<div class="mt-6">
|
||||
<x-input-label for="password" value="{{ __('Password') }}" class="sr-only" />
|
||||
|
||||
<x-text-input
|
||||
wire:model="password"
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
class="mt-1 block w-3/4"
|
||||
placeholder="{{ __('Password') }}"
|
||||
/>
|
||||
|
||||
<x-input-error :messages="$errors->get('password')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<x-secondary-button x-on:click="$dispatch('close')">
|
||||
{{ __('Cancel') }}
|
||||
</x-secondary-button>
|
||||
|
||||
<x-danger-button class="ms-3">
|
||||
{{ __('Delete Account') }}
|
||||
</x-danger-button>
|
||||
</div>
|
||||
</form>
|
||||
</x-modal>
|
||||
</section>
|
||||
@@ -0,0 +1,79 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
use Illuminate\Validation\Rules\Password;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component
|
||||
{
|
||||
public string $current_password = '';
|
||||
public string $password = '';
|
||||
public string $password_confirmation = '';
|
||||
|
||||
/**
|
||||
* Update the password for the currently authenticated user.
|
||||
*/
|
||||
public function updatePassword(): void
|
||||
{
|
||||
try {
|
||||
$validated = $this->validate([
|
||||
'current_password' => ['required', 'string', 'current_password'],
|
||||
'password' => ['required', 'string', Password::defaults(), 'confirmed'],
|
||||
]);
|
||||
} catch (ValidationException $e) {
|
||||
$this->reset('current_password', 'password', 'password_confirmation');
|
||||
|
||||
throw $e;
|
||||
}
|
||||
|
||||
Auth::user()->update([
|
||||
'password' => Hash::make($validated['password']),
|
||||
]);
|
||||
|
||||
$this->reset('current_password', 'password', 'password_confirmation');
|
||||
|
||||
$this->dispatch('password-updated');
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-text">
|
||||
{{ __('Update Password') }}
|
||||
</h2>
|
||||
|
||||
<p class="mt-1 text-sm text-text-muted">
|
||||
{{ __('Ensure your account is using a long, random password to stay secure.') }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form wire:submit="updatePassword" class="mt-6 space-y-6">
|
||||
<div>
|
||||
<x-input-label for="update_password_current_password" :value="__('Current Password')" />
|
||||
<x-text-input wire:model="current_password" id="update_password_current_password" name="current_password" type="password" class="mt-1 block w-full" autocomplete="current-password" />
|
||||
<x-input-error :messages="$errors->get('current_password')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="update_password_password" :value="__('New Password')" />
|
||||
<x-text-input wire:model="password" id="update_password_password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-password" />
|
||||
<x-input-error :messages="$errors->get('password')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="update_password_password_confirmation" :value="__('Confirm Password')" />
|
||||
<x-text-input wire:model="password_confirmation" id="update_password_password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="new-password" />
|
||||
<x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<x-primary-button>{{ __('Save') }}</x-primary-button>
|
||||
|
||||
<x-action-message class="me-3" on="password-updated">
|
||||
{{ __('Saved.') }}
|
||||
</x-action-message>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
@@ -0,0 +1,115 @@
|
||||
<?php
|
||||
|
||||
use App\Models\User;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Session;
|
||||
use Illuminate\Validation\Rule;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component
|
||||
{
|
||||
public string $name = '';
|
||||
public string $email = '';
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
public function mount(): void
|
||||
{
|
||||
$this->name = Auth::user()->name;
|
||||
$this->email = Auth::user()->email;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the profile information for the currently authenticated user.
|
||||
*/
|
||||
public function updateProfileInformation(): void
|
||||
{
|
||||
$user = Auth::user();
|
||||
|
||||
$validated = $this->validate([
|
||||
'name' => ['required', 'string', 'max:255'],
|
||||
'email' => ['required', 'string', 'lowercase', 'email', 'max:255', Rule::unique(User::class)->ignore($user->id)],
|
||||
]);
|
||||
|
||||
$user->fill($validated);
|
||||
|
||||
if ($user->isDirty('email')) {
|
||||
$user->email_verified_at = null;
|
||||
}
|
||||
|
||||
$user->save();
|
||||
|
||||
$this->dispatch('profile-updated', name: $user->name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Send an email verification notification to the current user.
|
||||
*/
|
||||
public function sendVerification(): void
|
||||
{
|
||||
$user = Auth::user();
|
||||
|
||||
if ($user->hasVerifiedEmail()) {
|
||||
$this->redirectIntended(default: route('dashboard', absolute: false));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$user->sendEmailVerificationNotification();
|
||||
|
||||
Session::flash('status', 'verification-link-sent');
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<section>
|
||||
<header>
|
||||
<h2 class="text-lg font-medium text-text">
|
||||
{{ __('Profile Information') }}
|
||||
</h2>
|
||||
|
||||
<p class="mt-1 text-sm text-text-muted">
|
||||
{{ __("Update your account's profile information and email address.") }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<form wire:submit="updateProfileInformation" class="mt-6 space-y-6">
|
||||
<div>
|
||||
<x-input-label for="name" :value="__('Name')" />
|
||||
<x-text-input wire:model="name" id="name" name="name" type="text" class="mt-1 block w-full" required autofocus autocomplete="name" />
|
||||
<x-input-error class="mt-2" :messages="$errors->get('name')" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input-label for="email" :value="__('Email')" />
|
||||
<x-text-input wire:model="email" id="email" name="email" type="email" class="mt-1 block w-full" required autocomplete="username" />
|
||||
<x-input-error class="mt-2" :messages="$errors->get('email')" />
|
||||
|
||||
@if (auth()->user() instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! auth()->user()->hasVerifiedEmail())
|
||||
<div>
|
||||
<p class="text-sm mt-2 text-text">
|
||||
{{ __('Your email address is unverified.') }}
|
||||
|
||||
<button wire:click.prevent="sendVerification" class="underline text-sm text-text-muted hover:text-text rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface">
|
||||
{{ __('Click here to re-send the verification email.') }}
|
||||
</button>
|
||||
</p>
|
||||
|
||||
@if (session('status') === 'verification-link-sent')
|
||||
<p class="mt-2 font-medium text-sm text-positive" role="status">
|
||||
{{ __('A new verification link has been sent to your email address.') }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<x-primary-button>{{ __('Save') }}</x-primary-button>
|
||||
|
||||
<x-action-message class="me-3" on="profile-updated">
|
||||
{{ __('Saved.') }}
|
||||
</x-action-message>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
@@ -0,0 +1,132 @@
|
||||
<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">
|
||||
<h1 class="text-xl font-semibold text-text">Répartition des flux</h1>
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
<label for="sankey-year" class="text-xs text-text-muted">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">
|
||||
@foreach (range($year - 3, $year + 3) as $y)
|
||||
<option value="{{ $y }}">{{ $y }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="sankey-period" class="text-xs text-text-muted">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">
|
||||
<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)
|
||||
<option value="{{ $i + 1 }}">{{ $label }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
@if (! $hasData)
|
||||
<p class="text-sm text-text-muted py-12 text-center">Aucun revenu suivi sur cette période.</p>
|
||||
@else
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="sankeyChart(@js($flows))"
|
||||
x-init="init()"
|
||||
wire:key="sankey-{{ $year }}-{{ $period }}"
|
||||
class="h-[420px] sm:h-[520px]"
|
||||
>
|
||||
<canvas x-ref="canvas" role="img" aria-label="Diagramme de flux : répartition des revenus vers les dépenses et l'épargne"></canvas>
|
||||
</div>
|
||||
|
||||
<table class="sr-only">
|
||||
<caption>Répartition chiffrée des revenus vers les dépenses et l'épargne</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Catégorie</th>
|
||||
<th scope="col">Type</th>
|
||||
<th scope="col">Montant</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($flows as $flow)
|
||||
<tr>
|
||||
<td>{{ $flow['to'] }}</td>
|
||||
<td>{{ $flow['type'] === 'depense' ? 'Dépense' : ($flow['type'] === 'epargne' ? 'Épargne' : 'Non affecté') }}</td>
|
||||
<td>{{ number_format($flow['flow'], 2, ',', ' ') }} €</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="mt-4 pt-4 border-t border-border grid grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<p class="text-xs text-text-muted">Revenus</p>
|
||||
<p class="font-semibold text-positive">{{ number_format($totalRevenue, 2, ',', ' ') }} €</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-text-muted">Dépenses + épargne</p>
|
||||
<p class="font-semibold text-text">{{ number_format($totalOutflow, 2, ',', ' ') }} €</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-text-muted">Non affecté</p>
|
||||
<p class="font-semibold {{ $unallocated > 0 ? 'text-info' : 'text-text' }}">{{ number_format($unallocated, 2, ',', ' ') }} €</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@once
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('sankeyChart', (flows) => ({
|
||||
chart: null,
|
||||
init() {
|
||||
const style = getComputedStyle(document.documentElement);
|
||||
const surface = `rgb(${style.getPropertyValue('--color-surface').trim()})`;
|
||||
const text = `rgb(${style.getPropertyValue('--color-text').trim()})`;
|
||||
const colors = {
|
||||
depense: `rgb(${style.getPropertyValue('--color-negative-fill').trim()})`,
|
||||
epargne: `rgb(${style.getPropertyValue('--color-info-fill').trim()})`,
|
||||
unallocated: `rgb(${style.getPropertyValue('--color-border-strong').trim()})`,
|
||||
};
|
||||
const nodeColor = `rgb(${style.getPropertyValue('--color-brand').trim()})`;
|
||||
|
||||
this.chart = new Chart(this.$refs.canvas, {
|
||||
type: 'sankey',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: flows.map(f => ({ from: f.from, to: f.to, flow: f.flow })),
|
||||
colorFrom: () => nodeColor,
|
||||
colorTo: (ctx) => {
|
||||
const flow = flows[ctx.dataIndex];
|
||||
return flow ? colors[flow.type] : nodeColor;
|
||||
},
|
||||
colorMode: 'gradient',
|
||||
borderColor: surface,
|
||||
borderWidth: 1,
|
||||
color: text,
|
||||
font: { size: 12 },
|
||||
labels: Object.fromEntries(flows.map(f => [f.to, f.to])),
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (ctx) => {
|
||||
const d = ctx.raw;
|
||||
return `${d.from} → ${d.to}: ${d.flow.toLocaleString('fr-FR', { minimumFractionDigits: 2 })} €`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endonce
|
||||
@@ -0,0 +1,199 @@
|
||||
<div>
|
||||
{{-- Mobile: quick single-purpose entry form --}}
|
||||
<div
|
||||
class="sm:hidden max-w-md mx-auto px-4 py-6 space-y-5"
|
||||
x-data="{ toast: false }"
|
||||
x-on:transaction-added.window="toast = true; setTimeout(() => toast = false, 2000)"
|
||||
>
|
||||
<h1 class="text-xl font-semibold text-text">Nouvelle opération</h1>
|
||||
|
||||
<form wire:submit="addTransaction" class="space-y-5">
|
||||
<fieldset>
|
||||
<legend class="text-sm font-medium text-text-muted mb-2">Catégorie</legend>
|
||||
<div class="space-y-4">
|
||||
@foreach (['revenu' => ['label' => 'Revenus', 'ring' => 'ring-positive', 'active' => 'bg-positive-fill text-white border-positive-fill'], 'depense' => ['label' => 'Dépenses', 'ring' => 'ring-negative', 'active' => 'bg-negative-fill text-white border-negative-fill'], 'epargne' => ['label' => 'Épargne', 'ring' => 'ring-info', 'active' => 'bg-info-fill text-white border-info-fill']] as $typeValue => $meta)
|
||||
@php $typeCategories = $categories->where('type', $typeValue); @endphp
|
||||
@if ($typeCategories->isNotEmpty())
|
||||
<div>
|
||||
<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)
|
||||
<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' }}"
|
||||
>
|
||||
{{ $category->name }}
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
<x-input-error :messages="$errors->get('categoryId')" class="mt-2" />
|
||||
</fieldset>
|
||||
|
||||
<div>
|
||||
<label for="mobile-amount" class="text-sm font-medium text-text-muted">Montant</label>
|
||||
<div class="mt-1 relative">
|
||||
<input
|
||||
wire:model="amount"
|
||||
id="mobile-amount"
|
||||
type="number"
|
||||
inputmode="decimal"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
class="w-full text-3xl font-semibold text-center py-4 rounded-lg bg-surface border-border-strong text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||||
/>
|
||||
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-2xl text-text-muted">€</span>
|
||||
</div>
|
||||
<x-input-error :messages="$errors->get('amount')" class="mt-2" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="mobile-details" class="text-sm font-medium text-text-muted">Détails (optionnel)</label>
|
||||
<input
|
||||
wire:model="details"
|
||||
id="mobile-details"
|
||||
type="text"
|
||||
class="mt-1 w-full py-3 px-3 rounded-lg bg-surface border-border-strong text-text focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full py-4 rounded-lg bg-brand text-white text-lg font-semibold focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
|
||||
>
|
||||
Ajouter
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div
|
||||
x-show="toast"
|
||||
x-cloak
|
||||
x-transition
|
||||
role="status"
|
||||
class="fixed bottom-6 left-1/2 -translate-x-1/2 bg-positive-fill text-white text-sm font-medium px-4 py-2 rounded-full shadow-lg"
|
||||
>
|
||||
✓ Opération ajoutée
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- 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>
|
||||
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<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>
|
||||
</div>
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<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>
|
||||
</div>
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<p class="text-xs text-text-muted">Nbr enreg.</p>
|
||||
<p class="mt-1 text-lg font-semibold 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">
|
||||
<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="text-xs text-text-muted">revenus restent à affecter</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-surface shadow rounded-lg p-4">
|
||||
<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" />
|
||||
<x-text-input wire:model="date" id="date" type="date" class="block mt-1 w-full text-sm" />
|
||||
</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">
|
||||
<option value="">—</option>
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category->id }}">{{ $category->type->label() }} — {{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<x-input-error :messages="$errors->get('categoryId')" class="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<x-input-label for="amount" value="Montant" />
|
||||
<x-text-input wire:model="amount" id="amount" type="number" step="0.01" class="block mt-1 w-full text-sm" />
|
||||
<x-input-error :messages="$errors->get('amount')" class="mt-1" />
|
||||
</div>
|
||||
<div class="sm:col-span-2">
|
||||
<x-input-label for="details" value="Détails" />
|
||||
<x-text-input wire:model="details" id="details" type="text" class="block mt-1 w-full text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<x-input-label for="dateEffective" value="Date effective" />
|
||||
<x-text-input wire:model="dateEffective" id="dateEffective" type="date" class="block mt-1 w-full text-sm" />
|
||||
</div>
|
||||
<div class="sm:col-span-6">
|
||||
<x-primary-button>Ajouter</x-primary-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$amountColor = fn ($t) => match ($t->category->type->value) {
|
||||
'depense' => 'text-negative',
|
||||
'epargne' => 'text-info',
|
||||
default => 'text-positive',
|
||||
};
|
||||
$amountPrefix = fn ($t) => $t->category->type->value === 'depense' ? '−' : '+';
|
||||
@endphp
|
||||
|
||||
<div class="bg-surface shadow rounded-lg overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<caption class="sr-only">Historique des transactions du foyer</caption>
|
||||
<thead>
|
||||
<tr class="bg-surface-alt text-xs text-text-muted uppercase">
|
||||
<th scope="col" class="text-left px-4 py-2">Date</th>
|
||||
<th scope="col" class="text-left px-4 py-2">Type</th>
|
||||
<th scope="col" class="text-left px-4 py-2">Catégorie</th>
|
||||
<th scope="col" class="text-right px-4 py-2">Montant</th>
|
||||
<th scope="col" class="text-left px-4 py-2">Détails</th>
|
||||
<th scope="col" class="text-right px-4 py-2">Balance</th>
|
||||
<th scope="col" class="text-left px-4 py-2">Date effective</th>
|
||||
<th scope="col" class="px-4 py-2"><span class="sr-only">Actions</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@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 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, ',', ' ') }} €
|
||||
</td>
|
||||
<td class="px-4 py-2 text-text-muted">{{ $transaction->details }}</td>
|
||||
<td class="px-4 py-2 text-right font-semibold {{ ($running[$transaction->id] ?? 0) < 0 ? 'text-negative' : 'text-text' }}">
|
||||
{{ number_format($running[$transaction->id] ?? 0, 2, ',', ' ') }} €
|
||||
</td>
|
||||
<td class="px-4 py-2 whitespace-nowrap text-text-muted">{{ $transaction->date_effective->translatedFormat('d M Y') }}</td>
|
||||
<td class="px-4 py-2 text-right">
|
||||
<button wire:click="deleteTransaction({{ $transaction->id }})" wire:confirm="Supprimer cet enregistrement ?" aria-label="Supprimer l'opération {{ $transaction->category->name }} du {{ $transaction->date->translatedFormat('d M Y') }}" class="text-xs text-danger hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
|
||||
Suppr.
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="8" class="px-4 py-3 text-sm text-text-muted">Aucun enregistrement.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
<nav class="-mx-3 flex flex-1 justify-end">
|
||||
@auth
|
||||
<a
|
||||
href="{{ url('/dashboard') }}"
|
||||
class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
|
||||
>
|
||||
Dashboard
|
||||
</a>
|
||||
@else
|
||||
<a
|
||||
href="{{ route('login') }}"
|
||||
class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
|
||||
@if (Route::has('register'))
|
||||
<a
|
||||
href="{{ route('register') }}"
|
||||
class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
|
||||
>
|
||||
Register
|
||||
</a>
|
||||
@endif
|
||||
@endauth
|
||||
</nav>
|
||||
Reference in New Issue
Block a user