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]">