feat: add initial balance support to accounts, enhancing account management and balance calculations across components

app/accounts/page.tsx

@@ -13,6 +13,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Building2, Folder } from "lucide-react";
 import type { Account } from "@/lib/types";
 import { cn } from "@/lib/utils";
+import { getAccountBalance } from "@/lib/account-utils";
 
 export default function AccountsPage() {
   const { data, isLoading, refresh } = useBankingData();
@@ -26,6 +27,7 @@ export default function AccountsPage() {
     type: "CHECKING" as Account["type"],
     folderId: "folder-root",
     externalUrl: "",
+    initialBalance: 0,
   });
 
   if (isLoading || !data) {
@@ -46,6 +48,7 @@ export default function AccountsPage() {
       type: account.type,
       folderId: account.folderId || "folder-root",
       externalUrl: account.externalUrl || "",
+      initialBalance: account.initialBalance || 0,
     });
     setIsDialogOpen(true);
   };
@@ -60,6 +63,7 @@ export default function AccountsPage() {
         type: formData.type,
         folderId: formData.folderId,
         externalUrl: formData.externalUrl || null,
+        initialBalance: formData.initialBalance,
       };
       await updateAccount(updatedAccount);
       refresh();
@@ -126,7 +130,10 @@ export default function AccountsPage() {
     return data.transactions.filter((t) => t.accountId === accountId).length;
   };
 
-  const totalBalance = data.accounts.reduce((sum, a) => sum + a.balance, 0);
+  const totalBalance = data.accounts.reduce(
+    (sum, a) => sum + getAccountBalance(a),
+    0,
+  );
 
   // Grouper les comptes par folder
   const accountsByFolder = data.accounts.reduce(
@@ -194,6 +201,24 @@ export default function AccountsPage() {
                     <span className="text-sm text-muted-foreground">
                       ({accountsByFolder["no-folder"].length})
                     </span>
+                    <span
+                      className={cn(
+                        "text-sm font-semibold tabular-nums ml-auto",
+                        accountsByFolder["no-folder"].reduce(
+                          (sum, a) => sum + getAccountBalance(a),
+                          0,
+                        ) >= 0
+                          ? "text-emerald-600"
+                          : "text-red-600",
+                      )}
+                    >
+                      {formatCurrency(
+                        accountsByFolder["no-folder"].reduce(
+                          (sum, a) => sum + getAccountBalance(a),
+                          0,
+                        ),
+                      )}
+                    </span>
                   </div>
                   <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                     {accountsByFolder["no-folder"].map((account) => {
@@ -225,7 +250,7 @@ export default function AccountsPage() {
               if (folderAccounts.length === 0) return null;
 
               const folderBalance = folderAccounts.reduce(
-                (sum, a) => sum + a.balance,
+                (sum, a) => sum + getAccountBalance(a),
                 0,
               );