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

components/dashboard/accounts-summary.tsx

@@ -5,6 +5,7 @@ import { Progress } from "@/components/ui/progress";
 import type { BankingData } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { Building2 } from "lucide-react";
+import { getAccountBalance } from "@/lib/account-utils";
 
 interface AccountsSummaryProps {
   data: BankingData;
@@ -19,8 +20,8 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
   };
 
   const totalPositive = data.accounts
-    .filter((a) => a.balance > 0)
-    .reduce((sum, a) => sum + a.balance, 0);
+    .filter((a) => getAccountBalance(a) > 0)
+    .reduce((sum, a) => sum + getAccountBalance(a), 0);
 
   if (data.accounts.length === 0) {
     return (
@@ -49,9 +50,10 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
       <CardContent>
         <div className="space-y-4">
           {data.accounts.map((account) => {
+            const realBalance = getAccountBalance(account);
             const percentage =
               totalPositive > 0
-                ? Math.max(0, (account.balance / totalPositive) * 100)
+                ? Math.max(0, (realBalance / totalPositive) * 100)
                 : 0;
 
             return (
@@ -71,15 +73,15 @@ export function AccountsSummary({ data }: AccountsSummaryProps) {
                   <span
                     className={cn(
                       "font-semibold tabular-nums",
-                      account.balance >= 0
+                      realBalance >= 0
                         ? "text-emerald-600"
                         : "text-red-600",
                     )}
                   >
-                    {formatCurrency(account.balance)}
+                    {formatCurrency(realBalance)}
                   </span>
                 </div>
-                {account.balance > 0 && (
+                {realBalance > 0 && (
                   <Progress value={percentage} className="h-1.5" />
                 )}
               </div>

components/dashboard/overview-cards.tsx

@@ -3,13 +3,17 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { TrendingUp, TrendingDown, Wallet, CreditCard } from "lucide-react";
 import type { BankingData } from "@/lib/types";
+import { getAccountBalance } from "@/lib/account-utils";
 
 interface OverviewCardsProps {
   data: BankingData;
 }
 
 export function OverviewCards({ data }: OverviewCardsProps) {
-  const totalBalance = data.accounts.reduce((sum, acc) => sum + acc.balance, 0);
+  const totalBalance = data.accounts.reduce(
+    (sum, acc) => sum + getAccountBalance(acc),
+    0,
+  );
 
   const thisMonth = new Date();
   thisMonth.setDate(1);