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

components/accounts/account-card.tsx

@@ -29,6 +29,7 @@ interface AccountCardProps {
   account: Account;
   folder?: Folder;
   transactionCount: number;
+  calculatedBalance?: number;
   onEdit: (account: Account) => void;
   onDelete: (accountId: string) => void;
   formatCurrency: (amount: number) => string;
@@ -42,6 +43,7 @@ export function AccountCard({
   account,
   folder,
   transactionCount,
+  calculatedBalance,
   onEdit,
   onDelete,
   formatCurrency,
@@ -53,6 +55,8 @@ export function AccountCard({
   const isMobile = useIsMobile();
   const Icon = accountTypeIcons[account.type];
   const realBalance = getAccountBalance(account);
+  const hasBalanceDifference = calculatedBalance !== undefined && 
+    Math.abs(account.balance - calculatedBalance) > 0.01;
 
   const {
     attributes,
@@ -172,21 +176,35 @@ export function AccountCard({
         className={cn(isMobile ? "px-2 pb-2 pt-1" : "pt-1", compact && "pt-0")}
       >
         <div className="flex items-center justify-between gap-1.5">
-          <div
-            className={cn(
-              "font-bold truncate",
-              compact
-                ? isMobile
-                  ? "text-sm"
-                  : "text-lg"
-                : isMobile
-                  ? "text-base"
-                  : "text-xl",
-              !compact && !isMobile && "mb-1.5",
-              realBalance >= 0 ? "text-emerald-600" : "text-red-600",
+          <div className="flex-1 min-w-0">
+            <div
+              className={cn(
+                "font-bold truncate",
+                compact
+                  ? isMobile
+                    ? "text-sm"
+                    : "text-lg"
+                  : isMobile
+                    ? "text-base"
+                    : "text-xl",
+                !compact && !isMobile && "mb-1.5",
+                realBalance >= 0 ? "text-emerald-600" : "text-red-600",
+              )}
+            >
+              {formatCurrency(realBalance)}
+            </div>
+            {!compact && calculatedBalance !== undefined && (
+              <div className="flex items-center gap-2 mt-0.5">
+                <span className="text-xs text-muted-foreground">
+                  Calculé: {formatCurrency(calculatedBalance)}
+                </span>
+                {hasBalanceDifference && (
+                  <span className="text-xs text-destructive font-semibold">
+                    (diff: {formatCurrency(account.balance - calculatedBalance)})
+                  </span>
+                )}
+              </div>
             )}
-          >
-            {formatCurrency(realBalance)}
           </div>
           {compact && (
             <Link