feat: add total balance calculation and display in account management; update account card to show calculated balance

app/accounts/page.tsx

@@ -99,6 +99,7 @@ export default function AccountsPage() {
     folderId: "folder-root",
     externalUrl: "",
     initialBalance: 0,
+    totalBalance: 0,
   });
 
   // Folder management state
@@ -131,7 +132,7 @@ export default function AccountsPage() {
 
   // Convert accountsWithStats to regular accounts for compatibility
   const accounts = accountsWithStats.map(
-    ({ transactionCount: _transactionCount, ...account }) => account,
+    ({ transactionCount: _transactionCount, calculatedBalance: _calculatedBalance, ...account }) => account,
   );
 
   const formatCurrency = (amount: number) => {
@@ -143,12 +144,14 @@ export default function AccountsPage() {
 
   const handleEdit = (account: Account) => {
     setEditingAccount(account);
+    const totalBalance = getAccountBalance(account);
     setFormData({
       name: account.name,
       type: account.type,
       folderId: account.folderId || "folder-root",
       externalUrl: account.externalUrl || "",
       initialBalance: account.initialBalance || 0,
+      totalBalance: totalBalance,
     });
     setIsDialogOpen(true);
   };
@@ -157,13 +160,21 @@ export default function AccountsPage() {
     if (!editingAccount) return;
 
     try {
+      // Calculer le balance à partir du solde total et du solde initial
+      // balance = totalBalance - initialBalance
+      const balance = formData.totalBalance - formData.initialBalance;
+      
+      // Convertir "folder-root" en null
+      const folderId = formData.folderId === "folder-root" ? null : formData.folderId;
+      
       const updatedAccount = {
         ...editingAccount,
         name: formData.name,
         type: formData.type,
-        folderId: formData.folderId,
+        folderId: folderId,
         externalUrl: formData.externalUrl || null,
         initialBalance: formData.initialBalance,
+        balance: balance,
       };
       await updateAccount(updatedAccount);
       invalidateAllAccountQueries(queryClient);
@@ -334,7 +345,7 @@ export default function AccountsPage() {
         // Update cache directly
         queryClient.setQueryData(
           ["accounts-with-stats"],
-          (old: Array<Account & { transactionCount: number }> | undefined) => {
+          (old: Array<Account & { transactionCount: number; calculatedBalance: number }> | undefined) => {
             if (!old) return old;
             return old.map((a) => (a.id === accountId ? updatedAccount : a));
           },
@@ -508,21 +519,25 @@ export default function AccountsPage() {
                           (f: FolderType) => f.id === account.folderId,
                         );
 
-                        return (
-                          <AccountCard
-                            key={account.id}
-                            account={account}
-                            folder={folder}
-                            transactionCount={getTransactionCount(account.id)}
-                            onEdit={handleEdit}
-                            onDelete={handleDelete}
-                            formatCurrency={formatCurrency}
-                            isSelected={selectedAccounts.has(account.id)}
-                            onSelect={toggleSelectAccount}
-                            draggableId={`account-${account.id}`}
-                            compact={isCompactView}
-                          />
-                        );
+                          const accountWithStats = accountsWithStats.find(
+                            (a) => a.id === account.id,
+                          );
+                          return (
+                            <AccountCard
+                              key={account.id}
+                              account={account}
+                              folder={folder}
+                              transactionCount={getTransactionCount(account.id)}
+                              calculatedBalance={accountWithStats?.calculatedBalance}
+                              onEdit={handleEdit}
+                              onDelete={handleDelete}
+                              formatCurrency={formatCurrency}
+                              isSelected={selectedAccounts.has(account.id)}
+                              onSelect={toggleSelectAccount}
+                              draggableId={`account-${account.id}`}
+                              compact={isCompactView}
+                            />
+                          );
                       })}
                     </div>
                   </FolderDropZone>
@@ -625,12 +640,16 @@ export default function AccountsPage() {
                             (f: FolderType) => f.id === account.folderId,
                           );
 
+                          const accountWithStats = accountsWithStats.find(
+                            (a) => a.id === account.id,
+                          );
                           return (
                             <AccountCard
                               key={account.id}
                               account={account}
                               folder={accountFolder}
                               transactionCount={getTransactionCount(account.id)}
+                              calculatedBalance={accountWithStats?.calculatedBalance}
                               onEdit={handleEdit}
                               onDelete={handleDelete}
                               formatCurrency={formatCurrency}