suivicpt/resources/views/livewire/recurring/index.blade.php

<div class="max-w-3xl mx-auto py-6 px-4 sm:px-0 space-y-6">
    <div>
        <h1 class="text-xl font-semibold text-text">Récurrences</h1>
        <p class="mt-1 text-sm text-text-muted">
            Modèles de dépenses/épargne qui reviennent chaque mois. Une proposition apparaît dans Suivi à partir du jour prévu — rien n'est ajouté automatiquement sans ta confirmation.
        </p>
    </div>

    <div class="bg-surface shadow rounded-lg overflow-hidden">
        <ul class="divide-y divide-border">
            @forelse ($recurrences as $recurring)
                <li class="px-4 py-3">
                    @if ($editingId === $recurring->id)
                        <form wire:submit="saveEdit" class="grid grid-cols-1 sm:grid-cols-4 gap-2 items-end">
                            <div>
                                <label for="editing-name-{{ $recurring->id }}" class="sr-only">Nom</label>
                                <input wire:model="editingName" id="editing-name-{{ $recurring->id }}" type="text" class="w-full bg-surface border-border-strong text-text rounded-md text-sm py-1" autofocus />
                            </div>
                            <div>
                                <label for="editing-amount-{{ $recurring->id }}" class="sr-only">Montant</label>
                                <input wire:model="editingAmount" id="editing-amount-{{ $recurring->id }}" type="number" step="0.01" class="w-full bg-surface border-border-strong text-text rounded-md text-sm py-1" />
                            </div>
                            <div>
                                <label for="editing-day-{{ $recurring->id }}" class="sr-only">Jour du mois</label>
                                <input wire:model="editingDayOfMonth" id="editing-day-{{ $recurring->id }}" type="number" min="1" max="28" class="w-full bg-surface border-border-strong text-text rounded-md text-sm py-1" />
                            </div>
                            <div class="flex items-center gap-3">
                                <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>
                            </div>
                        </form>
                    @else
                        <div class="flex items-center justify-between gap-3">
                            <div class="min-w-0">
                                <p class="text-sm text-text {{ ! $recurring->active ? 'opacity-50' : '' }}">
                                    {{ $recurring->name }}
                                    <span class="text-text-muted">— {{ $recurring->category->name }}</span>
                                </p>
                                <p class="text-xs text-text-muted">
                                    {{ number_format($recurring->amount, 2, ',', ' ') }} € · le {{ $recurring->day_of_month }} de chaque mois
                                    @unless ($recurring->active) · <span class="text-danger">en pause</span> @endunless
                                </p>
                            </div>
                            <div class="flex items-center gap-3 shrink-0">
                                <button wire:click="toggleActive({{ $recurring->id }})" class="text-xs text-brand hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
                                    {{ $recurring->active ? 'Mettre en pause' : 'Réactiver' }}
                                </button>
                                <button wire:click="startEdit({{ $recurring->id }})" aria-label="Modifier {{ $recurring->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({{ $recurring->id }})" wire:confirm="Supprimer cette récurrence ?" aria-label="Supprimer {{ $recurring->name }}" class="text-xs text-danger hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">Supprimer</button>
                            </div>
                        </div>
                    @endif
                </li>
            @empty
                <li class="px-4 py-3 text-sm text-text-muted">Aucune récurrence.</li>
            @endforelse
        </ul>

        <form wire:submit="add" class="px-4 py-4 bg-surface-alt grid grid-cols-1 sm:grid-cols-5 gap-3 items-end">
            <div>
                <x-input-label for="name" value="Nom" />
                <x-text-input wire:model="name" id="name" type="text" class="block mt-1 w-full text-sm" placeholder="Loyer" />
                <x-input-error :messages="$errors->get('name')" class="mt-1" />
            </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>
                <x-input-label for="dayOfMonth" value="Jour du mois" />
                <x-text-input wire:model="dayOfMonth" id="dayOfMonth" type="number" min="1" max="28" class="block mt-1 w-full text-sm" />
                <x-input-error :messages="$errors->get('dayOfMonth')" class="mt-1" />
            </div>
            <div>
                <x-primary-button class="w-full justify-center">Ajouter</x-primary-button>
            </div>
        </form>
    </div>
</div>