diff --git a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
index 4b5d549..35756d2 100644
--- a/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
+++ b/src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
@@ -10,8 +10,10 @@ import {
     DialogHeader,
     DialogTitle
 } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.transaction;
+const API_URL_CURRENT_BALANCE = apiConfig.service_wallet;
 
 const DetailApprovalTransaction = () => {
     const { GetData } = useCallApi();
@@ -51,6 +53,60 @@ const DetailApprovalTransaction = () => {
         }
     }, [showDetailDialog]);
 
+    const [currentBalance, setCurrentBalance] = useState<number | null>(null);
+    const [currentBalanceTransfer, setCurrentBalanceTransfer] = useState<number | null>(null);
+    useEffect(() => {
+        setCurrentBalance(null);
+    }, [transactionDetails]);
+
+    useEffect(() => {
+        setCurrentBalanceTransfer(null);
+    }, [transactionDetails]);
+
+    const getCurrentBallanceWallet = async (customerId: string) => {
+        try {
+            const responsecurrentbalance = await GetData(
+                `${API_URL_CURRENT_BALANCE}/dashboard/balance/account/${customerId}`,
+                {}
+            );
+
+            const match = responsecurrentbalance?.data?.find(
+                (item: any) => item.id_wallet === transactionDetails?.origin_wallet?.id
+            );
+
+            if (match) {
+                // console.log('Matched Wallet:', match); // Optional debug
+                return match.amount;
+            }
+        } catch (error) {
+            console.error('Error fetching current balance', error);
+        }
+
+        return null;
+    };
+
+    const getCurrentBallanceWalletTransfer = async (customerIdtransfer: string) => {
+        try {
+            const response = await GetData(
+                `${API_URL_CURRENT_BALANCE}/dashboard/balance/account/${customerIdtransfer}`,
+                {}
+            );
+
+            const match = response?.data?.find(
+                (item: any) => item.id_wallet === transactionDetails?.transfer?.destination_wallet?.id
+            );
+
+            if (match) {
+                // console.log('Matched Wallet:', match);
+                return match.amount;
+            }
+        } catch (error) {
+            console.error('Error fetching current balance', error);
+        }
+
+        return null;
+    };
+
 
     return (
         <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@@ -471,7 +527,27 @@ const DetailApprovalTransaction = () => {
                                         <p className="text-sm text-gray-500">Description</p>
                                         <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
                                     </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Current Balance</p>
+                                        <p className="font-medium">
+                                            {currentBalance !== null && currentBalance !== undefined
+                                                ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(currentBalance)
+                                                : '-'}
+                                        </p>
+                                    </div>
                                 </div>
+                                <Button
+                                    className="btn btn-primary"
+                                    type="button"
+                                    onClick={async () => {
+                                        const balance = await getCurrentBallanceWallet(transactionDetails?.origin_customer.id);
+                                        if (balance !== null) {
+                                            setCurrentBalance(balance);
+                                        }
+                                    }}
+                                >
+                                    Generate Current Balance
+                                </Button>
                             </div>
                         )}
 
@@ -482,16 +558,42 @@ const DetailApprovalTransaction = () => {
                                 {!transactionDetails?.transfer ? (
                                     <div className="text-center text-sm text-gray-500">No Data available</div>
                                 ) : (
-                                    <div className="grid grid-cols-2 gap-4">
-                                        <div>
-                                            <p className="text-sm text-gray-500">Name</p>
-                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
+                                    <>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div>
+                                                <p className="text-sm text-gray-500">Name</p>
+                                                <p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
+                                            </div>
+                                            <div>
+                                                <p className="text-sm text-gray-500">Description</p>
+                                                <p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
+                                            </div>
+                                            <div>
+                                                <p className="text-sm text-gray-500">Current Balance</p>
+                                                <p className="font-medium">
+                                                    {currentBalanceTransfer !== null
+                                                        ? new Intl.NumberFormat('en-US', {
+                                                            style: 'currency',
+                                                            currency: 'USD',
+                                                        }).format(currentBalanceTransfer)
+                                                        : '-'}
+                                                </p>
+                                            </div>
                                         </div>
-                                        <div>
-                                            <p className="text-sm text-gray-500">Description</p>
-                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
-                                        </div>
-                                    </div>
+                                        <Button
+                                            className="btn btn-primary"
+                                            type="button"
+                                            onClick={async () => {
+                                                const customerId = transactionDetails?.transfer?.destination_customer?.id;
+                                                const balance = await getCurrentBallanceWalletTransfer(customerId);
+                                                if (balance !== null) {
+                                                    setCurrentBalanceTransfer(balance); // ✅ INI YANG BENAR
+                                                }
+                                            }}
+                                        >
+                                            Generate Current Balance
+                                        </Button>
+                                    </>
                                 )}
                             </div>
                         )}
@@ -540,8 +642,8 @@ const DetailApprovalTransaction = () => {
                                                             })
                                                             : ''}</td>
                                                         <td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
-                                                            <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td>
+                                                        <td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</td>
                                                     </tr>
                                                 ))
                                             ) : (
diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index de6a873..decf631 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -13,11 +13,15 @@ import {
     DialogTitle
 } from '@/components/ui/dialog';
 import { useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
 
 const API_URL = apiConfig.transaction;
+const API_URL_CURRENT_BALANCE = apiConfig.service_wallet;
+
 
 const DetailTransaction = () => {
     const { GetData } = useCallApi();
+
     // const { reload } = useDataGrid();
     const {
         showDetailDialog,
@@ -45,7 +49,7 @@ const DetailTransaction = () => {
                         id: selectedTransactionId
                     });
                     setTransactionDetails(response?.data);
-                    // console.log(response?.data);
+                    // console.log(response?.data.origin_customer.id);
                     // console.log(selectedTransactionId);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
@@ -67,6 +71,61 @@ const DetailTransaction = () => {
         }
     }, [showDetailDialog]);
 
+    const [currentBalance, setCurrentBalance] = useState<number | null>(null);
+    const [currentBalanceTransfer, setCurrentBalanceTransfer] = useState<number | null>(null);
+
+    useEffect(() => {
+        setCurrentBalance(null);
+    }, [transactionDetails]);
+
+    useEffect(() => {
+        setCurrentBalanceTransfer(null);
+    }, [transactionDetails]);
+
+    const getCurrentBallanceWallet = async (customerId: string) => {
+        try {
+            const responsecurrentbalance = await GetData(
+                `${API_URL_CURRENT_BALANCE}/dashboard/balance/account/${customerId}`,
+                {}
+            );
+
+            const match = responsecurrentbalance?.data?.find(
+                (item: any) => item.id_wallet === transactionDetails?.origin_wallet?.id
+            );
+
+            if (match) {
+                // console.log('Matched Wallet:', match); // Optional debug
+                return match.amount;
+            }
+        } catch (error) {
+            console.error('Error fetching current balance', error);
+        }
+
+        return null;
+    };
+
+
+    const getCurrentBallanceWalletTransfer = async (customerIdtransfer: string) => {
+        try {
+            const response = await GetData(
+                `${API_URL_CURRENT_BALANCE}/dashboard/balance/account/${customerIdtransfer}`,
+                {}
+            );
+
+            const match = response?.data?.find(
+                (item: any) => item.id_wallet === transactionDetails?.transfer?.destination_wallet?.id
+            );
+
+            if (match) {
+                // console.log('Matched Wallet:', match);
+                return match.amount;
+            }
+        } catch (error) {
+            console.error('Error fetching current balance', error);
+        }
+
+        return null;
+    };
 
     return (
         <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@@ -231,16 +290,6 @@ const DetailTransaction = () => {
                                     </div>
                                 </div>
 
-                                <h3 className="font-semibold flex items-center">
-                                    Origin Wallet
-                                    <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
-                                        Wallet
-                                    </span>
-                                </h3>
-                                <div className="grid grid-cols-2 gap-4">
-
-                                </div>
-
                                 <h3 className="font-semibold flex items-center">
                                     Purchase
                                     <span className="ml-2 bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
@@ -482,7 +531,27 @@ const DetailTransaction = () => {
                                         <p className="text-sm text-gray-500">Description</p>
                                         <p className="font-medium">{transactionDetails?.origin_wallet.description}</p>
                                     </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Current Balance</p>
+                                        <p className="font-medium">
+                                            {currentBalance !== null && currentBalance !== undefined
+                                                ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(currentBalance)
+                                                : '-'}
+                                        </p>
+                                    </div>
                                 </div>
+                                <Button
+                                    className="btn btn-primary"
+                                    type="button"
+                                    onClick={async () => {
+                                        const balance = await getCurrentBallanceWallet(transactionDetails?.origin_customer.id);
+                                        if (balance !== null) {
+                                            setCurrentBalance(balance);
+                                        }
+                                    }}
+                                >
+                                    Generate Current Balance
+                                </Button>
                             </div>
                         )}
 
@@ -493,16 +562,43 @@ const DetailTransaction = () => {
                                 {!transactionDetails?.transfer ? (
                                     <div className="text-sm text-gray-500">No Data available</div>
                                 ) : (
-                                    <div className="grid grid-cols-2 gap-4">
-                                        <div>
-                                            <p className="text-sm text-gray-500">Name</p>
-                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
+                                    <>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div>
+                                                <p className="text-sm text-gray-500">Name</p>
+                                                <p className="font-medium">{transactionDetails.transfer.destination_wallet.name}</p>
+                                            </div>
+                                            <div>
+                                                <p className="text-sm text-gray-500">Description</p>
+                                                <p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
+                                            </div>
+                                            <div>
+                                                <p className="text-sm text-gray-500">Current Balance</p>
+                                                <p className="font-medium">
+                                                    {currentBalanceTransfer !== null
+                                                        ? new Intl.NumberFormat('en-US', {
+                                                            style: 'currency',
+                                                            currency: 'USD',
+                                                        }).format(currentBalanceTransfer)
+                                                        : '-'}
+                                                </p>
+                                            </div>
                                         </div>
-                                        <div>
-                                            <p className="text-sm text-gray-500">Description</p>
-                                            <p className="font-medium">{transactionDetails.transfer.destination_wallet.description}</p>
-                                        </div>
-                                    </div>
+                                        <Button
+                                            className="btn btn-primary"
+                                            type="button"
+                                            onClick={async () => {
+                                                const customerId = transactionDetails?.transfer?.destination_customer?.id;
+                                                const balance = await getCurrentBallanceWalletTransfer(customerId);
+                                                if (balance !== null) {
+                                                    setCurrentBalanceTransfer(balance); // ✅ INI YANG BENAR
+                                                }
+                                            }}
+                                        >
+                                            Generate Current Balance
+                                        </Button>
+                                    </>
+
                                 )}
                             </div>
                         )}