add card balance on dashboard module

- escrow and master agent only

src/pages/dashboards/home/DashboardHomePage.tsx

@@ -16,14 +16,26 @@ import { useFetchYear } from './hooks/useFetchYear';
 import { get5LastYear } from '@/utils/Date';
 import { staticChartData } from './staticChart';
 import { Helmet } from 'react-helmet';
+import BalanceCard from './blocks/BalanceCard';
+import { getAuth } from '@/auth';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
 
 // sum -> nominal, count-> total
 type CountType = 'sum' | 'count';
 type ChartType = 'line' | 'bar';
 type ChartLegend = 'true' | 'false';
 
+type RoleType = {
+  id: string;
+  name: string;
+};
+
+const API_URL_DASHBOARD = apiConfig.service_dashboard;
+
 const DashboardHomePage = () => {
   const selectYear = get5LastYear();
+  const { GetData } = useCallApi();
   const [initialYear, setInitialYear] = useState<string>('');
   const [selectedYear, setSelectedYear] = useState<string>('');
   const [count, setCount] = useState<CountType>('sum');
@@ -33,6 +45,31 @@ const DashboardHomePage = () => {
     from: new Date(),
     to: new Date()
   });
+  const [roles, setRoles] = useState<RoleType[]>([]);
+  const parsedUser = getAuth()?.user;
+  const idCustomer = parsedUser?.customer?.id;
+  const roleCustomer = parsedUser.idRole;
+  const currentRole = roles.find((role) => role.id === roleCustomer)?.name?.toLowerCase();
+  console.log(currentRole);
+
+  useEffect(() => {
+    async function fetchRoles(sorting: any) {
+      try {
+        const response = await GetData(`${API_URL_DASHBOARD}/user_role/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        });
+        setRoles(response?.data.list);
+      } catch (error) {
+        console.error('Error fetching roles', error);
+      }
+    }
+
+    fetchRoles([{ id: 'name', desc: false }]);
+  }, []);
 
   // Menyusun tanggal awal dan akhir berdasarkan selectedYear
   useEffect(() => {
@@ -144,6 +181,13 @@ const DashboardHomePage = () => {
         <title>TPAY | Dashboard</title>
       </Helmet>
       <Container>
+        {/* Account Balance Cards */}
+        {currentRole === 'escrow' || currentRole === 'master agent' ? (
+          <div className="grid gap-5 lg:gap-7.5 mb-14 mt-7">
+            <BalanceCard id={idCustomer} />
+          </div>
+        ) : null}
+
         <div className="flex gap-3 items-center mb-6">
           <YearPicker selectedYear={selectedYear} setSelectedYear={handleYearChange} />
           <div className="w-auto min-w-[120px]">

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

@@ -0,0 +1,94 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { CreditCard, Wallet } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type WalletResponse = {
+  amount: number;
+  id_wallet: string;
+  wallet: string;
+  credit_limit: number;
+  monthly_limit: number;
+};
+
+interface BalanceCardProps {
+  id: string;
+}
+
+const API_URL_WALLET = apiConfig.service_wallet;
+
+const BalanceCard = ({ id }: BalanceCardProps) => {
+  const { GetData } = useCallApi();
+  const [wallets, setWallets] = useState<WalletResponse[]>([]);
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(value);
+  };
+
+  const getColorClass = (amount: number) => {
+    if (amount > 5000) return 'bg-emerald-500';
+    if (amount > 0) return 'bg-blue-500';
+    return 'bg-red-500';
+  };
+
+  useEffect(() => {
+    async function fetchAccountBalances() {
+      try {
+        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${id}`, {
+          id: id
+        });
+        if (response?.status === true) {
+          setWallets(response.data);
+        }
+      } catch (error) {
+        console.error('Error fetching account balances', error);
+      }
+    }
+
+    fetchAccountBalances();
+  }, [id]);
+
+  return (
+    <div className="grid lg:grid-cols-4 md:grid-cols-2 gap-5 items-stretch">
+      {wallets.map((wallet) => {
+        const colorClass = getColorClass(wallet.amount);
+        const isNegative = wallet.amount < 0;
+
+        return (
+          <div
+            key={wallet.id_wallet}
+            className="rounded-lg overflow-hidden shadow-lg border border-gray-200 hover:shadow-xl transition-shadow duration-300"
+          >
+            <div className={`${colorClass} h-2`} />
+            <div className="p-5">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="font-bold text-lg text-gray-800">{wallet.wallet}</h3>
+                {wallet.wallet.includes('Credit') ? (
+                  <CreditCard className="text-gray-600" size={20} />
+                ) : (
+                  <Wallet className="text-gray-600" size={20} />
+                )}
+              </div>
+              <p className={`text-xl font-bold ${isNegative ? 'text-red-600' : 'text-gray-800'}`}>
+                {formatCurrency(wallet.amount)}
+              </p>
+
+              <div className="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between">
+                <div className="text-xs text-gray-500">Credit Limit:</div>
+                <div className="text-sm">{wallet.credit_limit}</div>
+                <div className="text-xs text-gray-500">Monthly Limit:</div>
+                <div className="text-sm">{wallet.monthly_limit}</div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default BalanceCard;