wallet in topup and disbursment transaction

src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx

@@ -4,10 +4,11 @@ import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useState ,useEffect } from 'react';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
+import { getAuth } from '@/auth';
 
 const TransactionDisbursement = () => {
   const [form, setForm] = useState({
@@ -15,8 +16,28 @@ const TransactionDisbursement = () => {
     amount: '',
     pin: ''
   });
+  const [wallets, setWallets] = useState([]);
   const { GetData, PostData } = useCallApi();
+  const parsedUser = getAuth()?.user;
   const API_URL = apiConfig.transaction;
+  const API_URL_WALLET = apiConfig.service_wallet
+
+  useEffect(() => {
+    const fetchWallets = async () => {
+      try {
+        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`, {});
+        if (response?.status === true) {
+          setWallets(response.data || []);
+        } else {
+          toast.warning(response?.message || 'Failed to fetch wallet data');
+        }
+      } catch (error) {
+        toast.warning('Failed to fetch wallet data');
+      }
+    };
+
+    fetchWallets();
+  }, []);
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
@@ -61,6 +82,20 @@ const TransactionDisbursement = () => {
               <span className="text-sm">Disbursement Saldo</span>
             </Link>
           </Breadcrumbs>
+          {/* Wallet Section */}
+          <div className="mb-6">
+            <h2 className="text-md font-semibold text-gray-700 mb-3">Your Wallets</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              {wallets.map((wallet: any) => (
+                <div key={wallet.id_wallet} className="border rounded-lg p-4 bg-white">
+                  <p className="text-sm text-gray-500">{wallet.wallet}</p>
+                  <p className="text-lg font-semibold text-green-600">
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(wallet.amount)}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
           <Container className="flex items-center justify-center">
             <div className="card max-w-[750px] w-full">
               <div className="card-body p-10">

src/pages/transaction/topup/TransactionTopup.tsx

@@ -4,18 +4,40 @@ import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useCallApi } from '@/hooks';
 import { apiConfig } from '@/config/api.config';
 import { toast } from 'sonner';
+import { getAuth } from '@/auth';
 
 const TransactionTopup = () => {
   const [form, setForm] = useState({
     topupAmount: '',
     pin: ''
   });
+
+  const [wallets, setWallets] = useState([]);
   const { GetData, PostData } = useCallApi();
+  const parsedUser = getAuth()?.user;
   const API_URL = apiConfig.transaction;
+  const API_URL_WALLET = apiConfig.service_wallet
+
+  useEffect(() => {
+    const fetchWallets = async () => {
+      try {
+        const response = await GetData(`${API_URL_WALLET}/dashboard/balance/account/${parsedUser.customer.id}`, {});
+        if (response?.status === true) {
+          setWallets(response.data || []);
+        } else {
+          toast.warning(response?.message || 'Failed to fetch wallet data');
+        }
+      } catch (error) {
+        toast.warning('Failed to fetch wallet data');
+      }
+    };
+
+    fetchWallets();
+  }, []);
 
   const handleSubmit = async (e: any) => {
     e.preventDefault();
@@ -60,6 +82,20 @@ const TransactionTopup = () => {
               <span className="text-sm">Topup</span>
             </Link>
           </Breadcrumbs>
+          {/* Wallet Section */}
+          <div className="mb-6">
+            <h2 className="text-md font-semibold text-gray-700 mb-3">Your Wallets</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              {wallets.map((wallet: any) => (
+                <div key={wallet.id_wallet} className="border rounded-lg p-4 bg-white">
+                  <p className="text-sm text-gray-500">{wallet.wallet}</p>
+                  <p className="text-lg font-semibold text-green-600">
+                    {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(wallet.amount)}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
           <Container className="flex items-center justify-center">
             <div className="card max-w-[750px] w-full">
               <div className="card-body p-10">