diff --git a/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx b/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx
index 5f5ff7b..e62a1bb 100644
--- a/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx
@@ -6,12 +6,12 @@ import { apiConfig } from '@/config/api.config';
 import { useEffect, useState } from 'react';
 import moment from 'moment';
 import {
-    Dialog,
-    DialogBody,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
 } from '@/components/ui/dialog';
 import TransactionLogViewer from './DetailTransactionLog';
 
@@ -29,125 +29,182 @@ const statusMap: Record<StatusCode, StatusInfo> = {
   W: { label: 'Waiting Schedule', bg: 'bg-yellow-100', text: 'text-yellow-600' },
   O: { label: 'On Process', bg: 'bg-blue-100', text: 'text-blue-600' },
   F: { label: 'Fail', bg: 'bg-red-100', text: 'text-red-600' },
-  D: { label: 'Done', bg: 'bg-green-100', text: 'text-green-600' },
+  D: { label: 'Done', bg: 'bg-green-100', text: 'text-green-600' }
 };
 
 export const renderStatusBadge = (statusRaw: string | null | undefined) => {
-	const status = statusRaw as StatusCode;
-	const { label, bg, text } = statusMap[status] ?? {
-		label: 'Unknown',
-		bg: 'bg-gray-100',
-		text: 'text-gray-600',
-	};
+  const status = statusRaw as StatusCode;
+  const { label, bg, text } = statusMap[status] ?? {
+    label: 'Unknown',
+    bg: 'bg-gray-100',
+    text: 'text-gray-600'
+  };
 
-	return (
-		<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
-			{label}
-		</span>
-	);
+  return (
+    <span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>{label}</span>
+  );
 };
 
 const DetailTransaction = () => {
-    const { GetData } = useCallApi();
-    const {
-        showDetailDialog,
-        setShowDetailDialog,
-        selectedTransactionId,
-        setShowDetailLogDialog,
-        setDetailLogData
-    } = useTransactionContext();
+  const { GetData } = useCallApi();
+  const {
+    showDetailDialog,
+    setShowDetailDialog,
+    selectedTransactionId,
+    setShowDetailLogDialog,
+    setDetailLogData
+  } = useTransactionContext();
 
-    const [transactionDetails, setTransactionDetails] = useState<any>(null);
+  const [transactionDetails, setTransactionDetails] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-    useEffect(() => {
-        const fetchTransactionDetails = async () => {
-            if (selectedTransactionId) {
-                try {
-                    const response = await GetData(`${API_URL}/transaction/history/${selectedTransactionId}`, {
-                        id: selectedTransactionId
-                    });
-                    // console.log(response?.data);
-                    setTransactionDetails(response?.data);
-                } catch (error) {
-                    console.error('Error fetching transaction', error);
-                }
+  useEffect(() => {
+    const fetchTransactionDetails = async () => {
+      setIsLoading(true);
+      if (selectedTransactionId) {
+        try {
+          const response = await GetData(
+            `${API_URL}/transaction/history/${selectedTransactionId}`,
+            {
+              id: selectedTransactionId
             }
-        };
-
-        if (showDetailDialog && selectedTransactionId) {
-            fetchTransactionDetails();
+          );
+          // console.log(response?.data);
+          setTransactionDetails(response?.data);
+        } catch (error) {
+          console.error('Error fetching transaction', error);
+        } finally {
+          setIsLoading(false);
         }
-    }, [showDetailDialog, selectedTransactionId, GetData]);
+      }
+    };
 
-    const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
+    if (showDetailDialog && selectedTransactionId) {
+      fetchTransactionDetails();
+    }
+  }, [showDetailDialog, selectedTransactionId, GetData]);
 
-    return (
-        <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
-            <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
-                <DialogHeader>
-                    <DialogTitle>Transaction Details</DialogTitle>
-                </DialogHeader>
-                <DialogBody>
-                    {/* Tab Content */}
-                    <div className="py-4 overflow-y-auto max-h-[400px]">
-                        <div className="space-y-4">
-                            <div className="border rounded-lg overflow-x-auto">
-                                <table className="min-w-full table-auto">
-                                    <thead>
-                                        <tr className="bg-gray-100">
-                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Username</th>
-                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Fullname</th>
-                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Amount</th>
-                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
-                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Process Date</th>
-                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Invoice Number</th>
-                                            <th className="px-4 py-2 text-left text-sm text-gray-500">Actions</th>
-                                            
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
-                                            transactionDetails.log.map((log: { id: number, customer: any, amount: number, remark: string, reference: string, request_date: string, payment_response: string, status: string}, index: number) => (
-                                                <tr key={index} className="border-t">
-                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.customer.username ?? '-'}</td>
-                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.customer.fullname ?? '-'}</td>
-                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.amount ?? '-'}</td>
-                                                    <td className="px-4 py-2 text-sm text-gray-500">{renderStatusBadge(log.status) ?? '-'}</td>
-                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.request_date && moment(log.request_date).isValid() ? moment(log.request_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
-                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.reference ?? '-'}</td>
-                                                    <td className="px-4 py-2 text-sm text-gray-500">
-                                                    <div key={`actions-${log.id}`}>
-                                                        <button
-                                                            className="btn btn-sm btn-icon btn-clear btn-light"
-                                                            onClick={() => {
-                                                                setDetailLogData(log)
-                                                                setShowDetailLogDialog(true);
-                                                            }}
-                                                        >
-                                                            <KeenIcon icon="eye" />
-                                                        </button>
-                                                        </div>
-                                                    </td>
-                                                    
-                                                </tr>
-                                            ))
-                                        ) : (
-                                            <tr>
-                                                <td colSpan={8} className="px-4 py-2 text-center text-sm text-gray-500">
-                                                    No logs available
-                                                </td>
-                                            </tr>
-                                        )}
-                                    </tbody>
-                                </table>
-                            </div>
+  const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
+
+  const resetForm = () => {
+    setTransactionDetails(null);
+  };
+
+  useEffect(() => {
+    if (!showDetailDialog) {
+      resetForm();
+    }
+  }, [showDetailDialog]);
+
+  return (
+    <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
+      <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Transaction Details</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          {/* Tab Content */}
+          <div className="py-4 overflow-y-auto max-h-[400px]">
+            <div className="space-y-4">
+              <div className="border rounded-lg overflow-x-auto">
+                {isLoading ? (
+                  <div className="flex flex-col items-center justify-center p-8">
+                    <div className="animate-pulse flex space-x-4 w-full">
+                      <div className="flex-1 space-y-4 py-1">
+                        <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                        <div className="space-y-2">
+                          <div className="h-4 bg-gray-200 rounded"></div>
+                          <div className="h-4 bg-gray-200 rounded w-5/6"></div>
                         </div>
-
+                      </div>
                     </div>
-                </DialogBody>
-            </DialogContent>
-        </Dialog>
-    );
+                    <p className="mt-4 text-gray-500">Loading Provider Details...</p>
+                  </div>
+                ) : (
+                  <table className="min-w-full table-auto">
+                    <thead>
+                      <tr className="bg-gray-100">
+                        <th className="px-4 py-2 text-left text-sm text-gray-500">Username</th>
+                        <th className="px-4 py-2 text-left text-sm text-gray-500">Fullname</th>
+                        <th className="px-4 py-2 text-left text-sm text-gray-500">Amount</th>
+                        <th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
+                        <th className="px-4 py-2 text-left text-sm text-gray-500">Process Date</th>
+                        <th className="px-4 py-2 text-left text-sm text-gray-500">
+                          Invoice Number
+                        </th>
+                        <th className="px-4 py-2 text-left text-sm text-gray-500">Actions</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {transactionDetails?.log && transactionDetails.log.length > 0 ? (
+                        transactionDetails.log.map(
+                          (
+                            log: {
+                              id: number;
+                              customer: any;
+                              amount: number;
+                              remark: string;
+                              reference: string;
+                              request_date: string;
+                              payment_response: string;
+                              status: string;
+                            },
+                            index: number
+                          ) => (
+                            <tr key={index} className="border-t">
+                              <td className="px-4 py-2 text-sm text-gray-500">
+                                {log.customer?.username ?? 'Not Found'}
+                              </td>
+                              <td className="px-4 py-2 text-sm text-gray-500">
+                                {log.customer?.fullname ?? 'Not Found'}
+                              </td>
+                              <td className="px-4 py-2 text-sm text-gray-500">
+                                {log.amount ?? '-'}
+                              </td>
+                              <td className="px-4 py-2 text-sm text-gray-500">
+                                {renderStatusBadge(log.status) ?? '-'}
+                              </td>
+                              <td className="px-4 py-2 text-sm text-gray-500">
+                                {log.request_date && moment(log.request_date).isValid()
+                                  ? moment(log.request_date).format('DD/MM/YYYY HH:mm:ss')
+                                  : '-'}
+                              </td>
+                              <td className="px-4 py-2 text-sm text-gray-500">
+                                {log.reference ?? '-'}
+                              </td>
+                              <td className="px-4 py-2 text-sm text-gray-500">
+                                <div key={`actions-${log.id}`}>
+                                  <button
+                                    className="btn btn-sm btn-icon btn-clear btn-light"
+                                    onClick={() => {
+                                      setDetailLogData(log);
+                                      setShowDetailLogDialog(true);
+                                    }}
+                                  >
+                                    <KeenIcon icon="eye" />
+                                  </button>
+                                </div>
+                              </td>
+                            </tr>
+                          )
+                        )
+                      ) : (
+                        <tr>
+                          <td colSpan={8} className="px-4 py-2 text-center text-sm text-gray-500">
+                            No logs available
+                          </td>
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                )}
+              </div>
+            </div>
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
 };
 
 export default DetailTransaction;
diff --git a/src/pages/disbursement/history-transaction/blocks/ListToolbar.tsx b/src/pages/disbursement/history-transaction/blocks/ListToolbar.tsx
index f810d53..1c6d73b 100644
--- a/src/pages/disbursement/history-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/disbursement/history-transaction/blocks/ListToolbar.tsx
@@ -31,7 +31,7 @@ const ListToolbar = () => {
 
   const handleFilterData = useCallback(() => {
     try {
-      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+      table.getColumn('execution_date')?.setFilterValue(trxDate);
     } catch (error) {
       toast.error('Error applying filter');
       console.error('Error applying filter:', error);