Allow editing an existing transaction

Desktop reuses the add-form with a Modifier link per row; mobile gets
a "Dernières opérations" list under the quick-entry form since no
table exists there.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/Livewire/Suivi/Index.php

@@ -30,6 +30,8 @@ class Index extends Component
 
     public string $filterPaidBy = '';
 
+    public ?int $editingTransactionId = null;
+
     public function mount(): void
     {
         $this->date = now()->toDateString();
@@ -51,6 +53,18 @@ class Index extends Component
         $category = $household->categories()->findOrFail($this->categoryId);
         $paidByUserId = $this->resolvePaidByUserId($household, $this->paidByUserId);
 
+        if ($this->editingTransactionId) {
+            $transaction = $household->transactions()->findOrFail($this->editingTransactionId);
+
+            $transaction->update([
+                'category_id' => $category->id,
+                'paid_by_user_id' => $paidByUserId,
+                'date' => $this->date,
+                'date_effective' => $this->dateEffective,
+                'amount' => $this->amount,
+                'details' => $this->details,
+            ]);
+        } else {
             $household->transactions()->create([
                 'category_id' => $category->id,
                 'user_id' => auth()->id(),
@@ -60,12 +74,36 @@ class Index extends Component
                 'amount' => $this->amount,
                 'details' => $this->details,
             ]);
+        }
 
-        $this->reset(['categoryId', 'amount', 'details', 'paidByUserId']);
+        $wasEditing = $this->editingTransactionId !== null;
+
+        $this->reset(['categoryId', 'amount', 'details', 'paidByUserId', 'editingTransactionId']);
         $this->date = now()->toDateString();
         $this->dateEffective = now()->toDateString();
 
-        $this->dispatch('transaction-added');
+        $this->dispatch($wasEditing ? 'transaction-updated' : 'transaction-added');
+    }
+
+    public function startEditTransaction(int $transactionId): void
+    {
+        $household = auth()->user()->currentHousehold;
+        $transaction = $household->transactions()->findOrFail($transactionId);
+
+        $this->editingTransactionId = $transaction->id;
+        $this->categoryId = $transaction->category_id;
+        $this->amount = (string) $transaction->amount;
+        $this->details = (string) $transaction->details;
+        $this->date = $transaction->date->toDateString();
+        $this->dateEffective = $transaction->date_effective->toDateString();
+        $this->paidByUserId = $transaction->paid_by_user_id ? (string) $transaction->paid_by_user_id : '';
+    }
+
+    public function cancelEditTransaction(): void
+    {
+        $this->reset(['categoryId', 'amount', 'details', 'paidByUserId', 'editingTransactionId']);
+        $this->date = now()->toDateString();
+        $this->dateEffective = now()->toDateString();
     }
 
     /**
@@ -256,6 +294,8 @@ class Index extends Component
             ->sortByDesc('total')
             ->values();
 
+        $recentTransactions = $allTransactions->sortByDesc('id')->take(5)->values();
+
         return view('livewire.suivi.index', [
             'transactions' => $transactions,
             'running' => $running,
@@ -263,6 +303,7 @@ class Index extends Component
             'categoryProgress' => $categoryProgress,
             'members' => $members,
             'paidBySummary' => $paidBySummary,
+            'recentTransactions' => $recentTransactions,
             'nbrThisYear' => $allTransactions->filter(fn (Transaction $t) => $t->date->year === $year)->count(),
             'nbrTotal' => $allTransactions->count(),
             'lastEntry' => $allTransactions->sortByDesc('date')->first(),

resources/views/livewire/suivi/index.blade.php

@@ -2,10 +2,11 @@
     {{-- 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-data="{ toast: false, message: '' }"
-        x-on:transaction-added.window="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)"
     >
-        <h1 class="text-xl font-semibold text-text">Nouvelle opération</h1>
+        <h1 id="mobile-form-top" class="text-xl font-semibold text-text">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</h1>
 
         @if ($pendingRecurrences->isNotEmpty())
             <div class="space-y-3">
@@ -151,12 +152,23 @@
                 </fieldset>
             @endif
 
+            <div class="flex items-center gap-3">
                 <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"
+                    class="flex-1 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
+                    {{ $editingTransactionId ? 'Enregistrer' : 'Ajouter' }}
                 </button>
+                @if ($editingTransactionId)
+                    <button
+                        type="button"
+                        wire:click="cancelEditTransaction"
+                        class="py-4 px-4 rounded-lg border border-border-strong text-text text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+                    >
+                        Annuler
+                    </button>
+                @endif
+            </div>
         </form>
 
         <div
@@ -166,9 +178,43 @@
             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
+            <span x-text="'✓ ' + message"></span>
         </div>
 
+        @if ($recentTransactions->isNotEmpty())
+            <div>
+                <p class="text-sm font-medium text-text-muted mb-2">Dernières opérations</p>
+                <ul class="space-y-2">
+                    @foreach ($recentTransactions as $transaction)
+                        <li class="bg-surface border border-border rounded-lg px-3 py-2 flex items-center justify-between gap-2" wire:key="recent-{{ $transaction->id }}">
+                            <div class="min-w-0">
+                                <p class="text-sm text-text truncate">
+                                    {{ $transaction->category->name }}
+                                    @if ($transaction->details)
+                                        <span class="text-text-muted">— {{ $transaction->details }}</span>
+                                    @endif
+                                </p>
+                                <p class="text-xs text-text-muted">{{ $transaction->date->translatedFormat('d M Y') }} · {{ number_format($transaction->amount, 2, ',', ' ') }} €</p>
+                            </div>
+                            <div class="flex items-center gap-3 shrink-0">
+                                <button
+                                    wire:click="startEditTransaction({{ $transaction->id }})"
+                                    x-on:click="$nextTick(() => document.getElementById('mobile-form-top')?.scrollIntoView({ behavior: 'smooth' }))"
+                                    aria-label="Modifier {{ $transaction->category->name }} du {{ $transaction->date->translatedFormat('d M Y') }}"
+                                    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="deleteTransaction({{ $transaction->id }})" wire:confirm="Supprimer cet enregistrement ?" aria-label="Supprimer {{ $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>
+                            </div>
+                        </li>
+                    @endforeach
+                </ul>
+            </div>
+        @endif
+
     </div>
 
     {{-- Desktop / tablet: full table view --}}
@@ -255,6 +301,7 @@
         @endif
 
         <div class="bg-surface shadow rounded-lg p-4">
+            <p class="text-sm font-medium text-text-muted mb-3">{{ $editingTransactionId ? 'Modifier l\'opération' : 'Nouvelle opération' }}</p>
             <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" />
@@ -292,8 +339,13 @@
                         @endforeach
                     </select>
                 </div>
-                <div class="sm:col-span-6">
+                <div class="sm:col-span-6 flex items-center gap-3">
-                    <x-primary-button>Ajouter</x-primary-button>
+                    <x-primary-button>{{ $editingTransactionId ? 'Enregistrer' : 'Ajouter' }}</x-primary-button>
+                    @if ($editingTransactionId)
+                        <button type="button" wire:click="cancelEditTransaction" class="text-sm text-text-muted hover:underline rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring">
+                            Annuler
+                        </button>
+                    @endif
                 </div>
             </form>
         </div>
@@ -350,8 +402,11 @@
                                     {{ 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">
+                                <td class="px-4 py-2 text-right whitespace-nowrap">
-                                    <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">
+                                    <button wire:click="startEditTransaction({{ $transaction->id }})" aria-label="Modifier l'opération {{ $transaction->category->name }} du {{ $transaction->date->translatedFormat('d M Y') }}" 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="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 ml-3">
                                         Suppr.
                                     </button>
                                 </td>

tests/Feature/SuiviTest.php

@@ -2,6 +2,7 @@
 
 use App\Livewire\Suivi\Index;
 use App\Models\User;
+use Illuminate\Database\Eloquent\ModelNotFoundException;
 use Livewire\Livewire;
 
 it('records a transaction for the current household', function (): void {
@@ -98,6 +99,89 @@ it('resets the form to defaults after adding a transaction', function (): void {
     expect($component->get('details'))->toBe('');
 });
 
+it('prefills the form when starting to edit a transaction', function (): void {
+    $user = User::factory()->create();
+    $household = $user->currentHousehold;
+    $category = $household->categories()->create(['name' => 'Loyer', 'type' => 'depense', 'position' => 1]);
+    $transaction = $household->transactions()->create([
+        'category_id' => $category->id, 'user_id' => $user->id,
+        'date' => '2026-03-05', 'date_effective' => '2026-03-06', 'amount' => 1200, 'details' => 'Loyer mars',
+    ]);
+
+    $component = Livewire::actingAs($user)->test(Index::class)->call('startEditTransaction', $transaction->id);
+
+    expect($component->get('editingTransactionId'))->toBe($transaction->id);
+    expect($component->get('categoryId'))->toBe($category->id);
+    expect($component->get('amount'))->toBe('1200.00');
+    expect($component->get('details'))->toBe('Loyer mars');
+    expect($component->get('date'))->toBe('2026-03-05');
+    expect($component->get('dateEffective'))->toBe('2026-03-06');
+});
+
+it('updates an existing transaction instead of creating a new one', function (): void {
+    $user = User::factory()->create();
+    $household = $user->currentHousehold;
+    $category = $household->categories()->create(['name' => 'Loyer', 'type' => 'depense', 'position' => 1]);
+    $newCategory = $household->categories()->create(['name' => 'Courses', 'type' => 'depense', 'position' => 2]);
+    $transaction = $household->transactions()->create([
+        'category_id' => $category->id, 'user_id' => $user->id,
+        'date' => '2026-03-05', 'date_effective' => '2026-03-05', 'amount' => 1200, 'details' => 'Loyer',
+    ]);
+
+    Livewire::actingAs($user)
+        ->test(Index::class)
+        ->call('startEditTransaction', $transaction->id)
+        ->set('categoryId', $newCategory->id)
+        ->set('amount', '150')
+        ->set('details', 'Courses rectifiées')
+        ->call('addTransaction')
+        ->assertDispatched('transaction-updated');
+
+    expect($household->transactions()->count())->toBe(1);
+
+    $transaction->refresh();
+    expect($transaction->category_id)->toBe($newCategory->id);
+    expect((float) $transaction->amount)->toBe(150.0);
+    expect($transaction->details)->toBe('Courses rectifiées');
+});
+
+it('cancels editing and resets the form without touching the transaction', function (): void {
+    $user = User::factory()->create();
+    $household = $user->currentHousehold;
+    $category = $household->categories()->create(['name' => 'Loyer', 'type' => 'depense', 'position' => 1]);
+    $transaction = $household->transactions()->create([
+        'category_id' => $category->id, 'user_id' => $user->id,
+        'date' => '2026-03-05', 'date_effective' => '2026-03-05', 'amount' => 1200, 'details' => 'Loyer',
+    ]);
+
+    $component = Livewire::actingAs($user)
+        ->test(Index::class)
+        ->call('startEditTransaction', $transaction->id)
+        ->call('cancelEditTransaction');
+
+    expect($component->get('editingTransactionId'))->toBeNull();
+    expect($component->get('categoryId'))->toBeNull();
+    expect($component->get('amount'))->toBe('');
+
+    $transaction->refresh();
+    expect((float) $transaction->amount)->toBe(1200.0);
+});
+
+it('does not allow editing a transaction belonging to another household', function (): void {
+    $owner = User::factory()->create();
+    $intruder = User::factory()->create();
+    $category = $owner->currentHousehold->categories()->create(['name' => 'Loyer', 'type' => 'depense', 'position' => 1]);
+    $transaction = $owner->currentHousehold->transactions()->create([
+        'category_id' => $category->id, 'user_id' => $owner->id,
+        'date' => '2026-03-05', 'date_effective' => '2026-03-05', 'amount' => 1200,
+    ]);
+
+    expect(fn () => Livewire::actingAs($intruder)
+        ->test(Index::class)
+        ->call('startEditTransaction', $transaction->id)
+    )->toThrow(ModelNotFoundException::class);
+});
+
 it('lists active recurring transactions due this month as pending', function (): void {
     $this->travelTo(now()->setDate(2026, 3, 10));