add new card in dashboard

src/pages/dashboards/home/DashboardHomePage.tsx

@@ -23,6 +23,7 @@ import { apiConfig } from '@/config/api.config';
 import TransactionValue from './blocks/TransactionValue';
 import TransactionPieChart from './blocks/TransactionPieChart';
 import MemberActivity from './blocks/MemberActivity';
+import BankSaldo from './blocks/BankSaldo';
 
 // sum -> nominal, count-> total
 type CountType = 'sum' | 'count';
@@ -57,6 +58,8 @@ const DashboardHomePage = () => {
   const API_URL = apiConfig.api_dashboard;
   const { GetData } = useCallApi();
 
+  const API_URL_BANK = apiConfig.service_wallet;
+
   const [responseStatisticCard, setResponseStatisticCard] = useState<any>(null);
 
   const fetchData = async () => {
@@ -64,10 +67,21 @@ const DashboardHomePage = () => {
     setResponseStatisticCard(res);
   };
 
+  const [bankaccount, setbankaccount] = useState<any>(null);
+
+  const fetchDataBankAccount = async () => {
+    const res = await GetData(`${API_URL_BANK}/dashboard/balance/account/${getAuth()?.user?.customer?.id}`, {});
+    setbankaccount(res);
+  };
+
   useEffect(() => {
     fetchData();
   }, []);
 
+  useEffect(() => {
+    fetchDataBankAccount();
+  }, []);
+
   const [responseGraphic, setresponseGraphic] = useState<any>(null);
 
   useEffect(() => {
@@ -253,8 +267,29 @@ const DashboardHomePage = () => {
           </div>
         ) : null}
 
+        <div className="flex space-x-4 mt-5">
+          <BankSaldo
+            title="Emoney Account"
+            balance={bankaccount?.data[0].amount}
+            creditLimit={bankaccount?.data[0].credit_limit}
+            monthlyLimit={bankaccount?.data[0].monthly_limit}
+          />
+          <BankSaldo
+            title="Point Account"
+            balance={bankaccount?.data[1].amount}
+            creditLimit={bankaccount?.data[1].credit_limit}
+            monthlyLimit={bankaccount?.data[1].monthly_limit}
+          />
+          {/* <BankSaldo
+            title="Cash In/Out Account"
+            balance={"100"}
+            creditLimit={"100"}
+            monthlyLimit={"100"}
+          /> */}
+        </div>
+
         {/* Cards */}
-        <div className="flex gap-6 overflow-x-auto pb-2">
+        <div className="flex gap-6 overflow-x-auto pb-2 mt-5">
           <Card
             title="Registered Users"
             total={responseStatisticCard?.data.total_registered ?? 0}

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