Resolve map problem.

lib/components/account/balances_tab.dart

@@ -6,7 +6,13 @@
 library;
 
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import '../../blocs/user/user_bloc.dart';
+import '../../blocs/user/user_state.dart' as user_state;
+import '../../models/expense.dart';
+import '../../models/group.dart';
 import '../../models/user_balance.dart';
+import 'add_expense_dialog.dart';
 
 /// A stateless widget that displays a list of user balances in a group.
 ///
@@ -18,21 +24,19 @@ class BalancesTab extends StatelessWidget {
   /// The list of user balances to display.
   final List<UserBalance> balances;
 
+  /// The group associated with these balances.
+  final Group group;
+
   /// Creates a `BalancesTab` widget.
   ///
   /// The [balances] parameter must not be null.
-  const BalancesTab({
-    super.key,
-    required this.balances,
-  });
+  const BalancesTab({super.key, required this.balances, required this.group});
 
   @override
   Widget build(BuildContext context) {
     // Check if the balances list is empty and display a placeholder message if true.
     if (balances.isEmpty) {
-      return const Center(
-        child: Text('Aucune balance à afficher'),
-      );
+      return const Center(child: Text('Aucune balance à afficher'));
     }
 
     // Render the list of balances as a scrollable list.
@@ -79,81 +83,149 @@ class BalancesTab extends StatelessWidget {
       margin: const EdgeInsets.only(bottom: 12),
       child: Padding(
         padding: const EdgeInsets.all(16),
-        child: Row(
+        child: Column(
           children: [
-            // Display the user's initial in a circular avatar.
-            CircleAvatar(
-              radius: 24,
-              backgroundColor: isDark ? Colors.grey[800] : Colors.grey[200],
-              child: Text(
-                balance.userName.isNotEmpty
-                    ? balance.userName[0].toUpperCase()
-                    : '?',
-                style: const TextStyle(
-                  fontSize: 20,
-                  fontWeight: FontWeight.bold,
-                ),
-              ),
-            ),
-            const SizedBox(width: 16),
-            // Display the user's name and financial details.
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  // User's name.
-                  Text(
-                    balance.userName,
+            Row(
+              children: [
+                // Display the user's initial in a circular avatar.
+                CircleAvatar(
+                  radius: 24,
+                  backgroundColor: isDark ? Colors.grey[800] : Colors.grey[200],
+                  child: Text(
+                    balance.userName.isNotEmpty
+                        ? balance.userName[0].toUpperCase()
+                        : '?',
                     style: const TextStyle(
-                      fontSize: 16,
+                      fontSize: 20,
                       fontWeight: FontWeight.bold,
                     ),
                   ),
-                  const SizedBox(height: 4),
-                  // User's total paid and owed amounts.
-                  Text(
-                    'Payé: ${balance.totalPaid.toStringAsFixed(2)} € • Doit: ${balance.totalOwed.toStringAsFixed(2)} €',
-                    style: TextStyle(
-                      fontSize: 12,
-                      color: isDark ? Colors.grey[400] : Colors.grey[600],
-                    ),
-                  ),
-                ],
-              ),
-            ),
-            // Display the user's balance status and amount.
-            Column(
-              crossAxisAlignment: CrossAxisAlignment.end,
-              children: [
-                Row(
-                  children: [
-                    // Icon indicating the balance status.
-                    Icon(balanceIcon, size: 16, color: balanceColor),
-                    const SizedBox(width: 4),
-                    // User's absolute balance amount.
-                    Text(
-                      '${balance.absoluteBalance.toStringAsFixed(2)} €',
-                      style: TextStyle(
-                        fontSize: 18,
-                        fontWeight: FontWeight.bold,
-                        color: balanceColor,
+                ),
+                const SizedBox(width: 16),
+                // Display the user's name and financial details.
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      // User's name.
+                      Text(
+                        balance.userName,
+                        style: const TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.bold,
+                        ),
                       ),
+                      const SizedBox(height: 4),
+                      // User's total paid and owed amounts.
+                      Text(
+                        'Payé: ${balance.totalPaid.toStringAsFixed(2)} € • Doit: ${balance.totalOwed.toStringAsFixed(2)} €',
+                        style: TextStyle(
+                          fontSize: 12,
+                          color: isDark ? Colors.grey[400] : Colors.grey[600],
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                // Display the user's balance status and amount.
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: [
+                    Row(
+                      children: [
+                        // Icon indicating the balance status.
+                        Icon(balanceIcon, size: 16, color: balanceColor),
+                        const SizedBox(width: 4),
+                        // User's absolute balance amount.
+                        Text(
+                          '${balance.absoluteBalance.toStringAsFixed(2)} €',
+                          style: TextStyle(
+                            fontSize: 18,
+                            fontWeight: FontWeight.bold,
+                            color: balanceColor,
+                          ),
+                        ),
+                      ],
+                    ),
+                    // Text indicating the balance status (e.g., "À recevoir").
+                    Text(
+                      balanceText,
+                      style: TextStyle(fontSize: 12, color: balanceColor),
                     ),
                   ],
                 ),
-                // Text indicating the balance status (e.g., "À recevoir").
-                Text(
-                  balanceText,
-                  style: TextStyle(
-                    fontSize: 12,
-                    color: balanceColor,
-                  ),
-                ),
               ],
             ),
+            // "Rembourser" button (Only show if this user is owed money and current user is looking at list?
+            // Wait, this list shows balances of everyone.
+            // Requirement: "Il faut un bouton dans la page qui permet de régler l'argent qu'on doit à une certaine personne"
+            // So if I look at "Alice", and Alice "shouldReceive" (is green), it implies the group owes Alice.
+            // But does it mean *I* owe Alice?
+            // The BalancesTab shows the *Group's* balances.
+            // However, usually settlement is 1-on-1. The requirement says: "régler l'argent qu'on doit à une certaine personne".
+            // If the user displayed here 'shouldReceive' money, it means they are owed money.
+            // If I click 'Rembourser', it implies *I* am paying them.
+            // This button should probably be available if the user on the card is POSITIVE (shouldReceive)
+            // AND I am not that user.
+            if (balance.shouldReceive) ...[
+              const SizedBox(height: 12),
+              SizedBox(
+                width: double.infinity,
+                child: OutlinedButton.icon(
+                  onPressed: () => _showReimbursementDialog(context, balance),
+                  icon: const Icon(Icons.monetization_on_outlined),
+                  label: Text('Rembourser ${balance.userName}'),
+                  style: OutlinedButton.styleFrom(
+                    foregroundColor: Colors.green,
+                    side: const BorderSide(color: Colors.green),
+                  ),
+                ),
+              ),
+            ],
           ],
         ),
       ),
     );
   }
+
+  void _showReimbursementDialog(
+    BuildContext context,
+    UserBalance payeeBalance,
+  ) {
+    final userState = context.read<UserBloc>().state;
+
+    if (userState is! user_state.UserLoaded) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('Erreur: utilisateur non connecté')),
+      );
+      return;
+    }
+
+    final currentUser = userState.user;
+
+    // Prevent reimbursing yourself
+    if (payeeBalance.userId == currentUser.id) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(
+          content: Text('Vous ne pouvez pas vous rembourser vous-même'),
+        ),
+      );
+      return;
+    }
+
+    showDialog(
+      context: context,
+      builder: (context) => AddExpenseDialog(
+        group: group,
+        currentUser: currentUser,
+        initialCategory: ExpenseCategory.reimbursement,
+        initialDescription: 'Remboursement',
+        initialAmount: payeeBalance.absoluteBalance,
+        initialSplits: {
+          payeeBalance.userId: payeeBalance
+              .absoluteBalance, // The payee receives the full amount (as split)
+        },
+      ),
+    );
+  }
 }