add new card in dashboard

src/pages/dashboards/home/blocks/BankSaldo.tsx

@@ -0,0 +1,62 @@
+// BankSaldo.tsx
+import { Wallet } from "lucide-react";
+
+interface AccountCardProps {
+    title: string;
+    balance: string;
+    creditLimit: string;
+    monthlyLimit: string;
+}
+
+export const BankSaldo = ({
+    title,
+    balance,
+    creditLimit,
+    monthlyLimit,
+}: AccountCardProps) => {
+    return (
+        <div className="w-full max-w-xs bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
+            <div className="h-1 bg-red-500" />
+            <div className="p-4 space-y-4">
+                <div className="flex justify-between items-center">
+                    <h2 className="text-lg font-semibold">{title}</h2>
+                    <Wallet className="h-5 w-5 text-gray-500" />
+                </div>
+                <div className="text-2xl font-bold text-gray-800">
+                    {new Intl.NumberFormat("en-US", {
+                        style: "currency",
+                        currency: "USD",
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                    }).format(parseFloat(balance))}
+                </div>
+                <div className="text-sm text-gray-600">
+                    <div className="flex justify-between">
+                        <span>Credit Limit:</span>
+                        <span>{creditLimit}</span>
+                    </div>
+                    <div className="flex justify-between">
+                        <span>Monthly Limit:</span>
+                        <span>{monthlyLimit}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+interface AccountCardsProps {
+    accounts: AccountCardProps[];
+}
+
+export const AccountCards = ({ accounts }: AccountCardsProps) => {
+    return (
+        <div className="flex flex-wrap gap-4 justify-center">
+            {accounts.map((account, index) => (
+                <BankSaldo key={index} {...account} />
+            ))}
+        </div>
+    );
+};
+
+export default BankSaldo