diff --git a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
index 9829ff1..9ec8eda 100644
--- a/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
+++ b/src/pages/transaction/history-transaction/blocks/ListToolbar.tsx
@@ -10,35 +10,33 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { getAuth } from '@/auth';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
-
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
-  const [searchValue, setSearchValue] = useState<string>();
-
-  // const [statusValue, setStatusValue] = useState<string>(
-  //   (table.getColumn('status')?.getFilterValue() as string) ?? ''
-  // );
-
+  const [searchValue, setSearchValue] = useState<string>(''); // default: empty string
+  const [typeSearchValue, setSearchTypeValue] = useState<string>(''); // default: empty string
   const [typeValue, setTypeValue] = useState<string>(
     (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
   );
 
-  const [typeSearchValue, setSearchTypeValue] = useState<string>();
+  const { GetData } = useCallApi();
+  const API_URL = apiConfig.transaction;
 
   const formatDate = (date: Date): string => {
     return date.toISOString().split('T')[0];
   };
 
-
-  // useEffect(() => {
-  //   const timer = setTimeout(() => {
-  //     table.getColumn('status')?.setFilterValue(statusValue);
-  //     table.setPageIndex(0);
-  //   }, 200);
-  //   return () => clearTimeout(timer);
-  // }, [statusValue, table]);
+  useEffect(() => {
+    const today = new Date();
+    settrxDate({
+      from: formatDate(today),
+      to: formatDate(today),
+    });
+  }, []);
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -51,10 +49,8 @@ const ListToolbar = () => {
     return () => clearTimeout(timer);
   }, [typeValue, table]);
 
-
   useEffect(() => {
     const timer = setTimeout(() => {
-      // Add search type filter to column filters
       table.setColumnFilters((prev) => [
         ...prev.filter((f) => f.id !== 'searchtype'),
         { id: 'searchtype', value: typeSearchValue },
@@ -64,26 +60,14 @@ const ListToolbar = () => {
     return () => clearTimeout(timer);
   }, [typeSearchValue, table]);
 
-
   useEffect(() => {
     const timer = setTimeout(() => {
       table.getColumn('code')?.setFilterValue(searchValue);
       table.setPageIndex(0);
     }, 200);
-
     return () => clearTimeout(timer);
   }, [searchValue, table]);
 
-
-  useEffect(() => {
-    const today = new Date();
-    // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
-    settrxDate({
-      from: formatDate(today),
-      to: formatDate(today),
-    });
-  }, []);
-
   const handleFilterData = useCallback(() => {
     try {
       table.getColumn('transaction_date')?.setFilterValue(trxDate);
@@ -99,6 +83,58 @@ const ListToolbar = () => {
     }
   }, [trxDate]);
 
+  const exporDataToExcel = async (
+    typeSearchValue: string,
+    searchValue: string,
+    trxDate: any,
+    typeValue: string
+  ) => {
+    try {
+      const formattedFilter: any = {
+        "Transactions.transaction_date": {
+          from: `${trxDate.from} 00:00:00`,
+          to: `${trxDate.to} 23:59:59`
+        }
+      };
+
+      if (typeSearchValue === 'msisdn') {
+        formattedFilter['origin_customer.msisdn'] = searchValue;
+      } else if (typeSearchValue === 'fullname') {
+        formattedFilter['origin_customer.fullname'] = searchValue;
+      } else if (typeSearchValue === 'trxid') {
+        formattedFilter['Transactions.code'] = searchValue;
+      }
+
+      if (typeValue) {
+        formattedFilter["Transactions.kind"] = typeValue;
+      }
+
+      const filterParam = encodeURIComponent(JSON.stringify(formattedFilter));
+
+      const response = await fetch(`${API_URL}/transaction/export?filter=${filterParam}`, {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${getAuth()?.access_token}`, // ganti dengan token kamu
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch file');
+      }
+
+      const blob = await response.blob();
+      const contentDisposition = response.headers.get('content-disposition');
+      const filenameMatch = contentDisposition?.match(/filename="?(.+)"?/);
+      const filename = filenameMatch ? filenameMatch[1] : 'transaction_history.xlsx';
+
+      return { blob, filename };
+    } catch (error) {
+      console.error('Error exporting data:', error);
+      return null;
+    }
+  };
+
+
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full justify-between items-center">
@@ -107,7 +143,6 @@ const ListToolbar = () => {
             From
             <input
               type="date"
-              placeholder="From"
               value={trxDate.from}
               onChange={(event) =>
                 settrxDate({ ...trxDate, from: event.target.value })
@@ -120,7 +155,6 @@ const ListToolbar = () => {
             To
             <input
               type="date"
-              placeholder="To"
               value={trxDate.to}
               onChange={(event) =>
                 settrxDate({ ...trxDate, to: event.target.value })
@@ -129,27 +163,9 @@ const ListToolbar = () => {
             />
           </label>
 
-          {/* <Select
-            value={statusValue}
-            onValueChange={(value) => {
-              setStatusValue(value);
-            }}
-          >
-            <SelectTrigger className="input input-sm w-[160px] h-[31px]">
-              <SelectValue placeholder="Select Status" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="C">COMPLETE</SelectItem>
-              <SelectItem value="F">FAILED</SelectItem>
-              <SelectItem value="O">ON PROCESS</SelectItem>
-            </SelectContent>
-          </Select> */}
-
           <Select
             value={typeValue}
-            onValueChange={(value) => {
-              setTypeValue(value);
-            }}
+            onValueChange={(value) => setTypeValue(value)}
           >
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Transaction Type" />
@@ -160,15 +176,13 @@ const ListToolbar = () => {
               <SelectItem value="W">WITHDRAW</SelectItem>
               <SelectItem value="U">TOP UP</SelectItem>
               <SelectItem value="R">RETURN</SelectItem>
-              <SelectItem value='N'>TOP UP PARTNER</SelectItem>
+              <SelectItem value="N">TOP UP PARTNER</SelectItem>
             </SelectContent>
           </Select>
 
           <Select
             value={typeSearchValue}
-            onValueChange={(value) => {
-              setSearchTypeValue(value);
-            }}
+            onValueChange={(value) => setSearchTypeValue(value)}
           >
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Search Type" />
@@ -184,37 +198,59 @@ const ListToolbar = () => {
             <KeenIcon icon="magnifier" />
             <input
               type="text"
-              placeholder={`Search ${typeSearchValue || ''}`}  // Use typeSearchValue if it's set, else fallback to an empty string
+              placeholder={`Search ${typeSearchValue || ''}`}
               value={searchValue}
               onChange={(event) => setSearchValue(event.target.value)}
             />
           </label>
         </div>
 
-        <div className="ml-auto">
+        <div className="ml-auto flex gap-2">
+          <Button
+            variant="outline"
+            className="h-7.5"
+            onClick={async () => {
+              const result = await exporDataToExcel(
+                typeSearchValue || '',
+                searchValue || '',
+                trxDate || {},
+                typeValue || ''
+              );
+
+              if (result) {
+                const url = window.URL.createObjectURL(result.blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = result.filename;
+                a.click();
+                window.URL.revokeObjectURL(url);
+              } else {
+                toast.error('Failed to export data');
+              }
+            }}
+          >
+            Export Data
+          </Button>
+
+
+
           <DefaultTooltip title={'Refresh'} placement={'top'}>
             <Button
               variant="outline"
               className="h-7.5"
               onClick={() => {
-                // Preserve trxDate values (from, to) and reset others
                 const today = new Date();
-                // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
 
-                // Only reset filters excluding from and to
                 setSearchValue('');
                 setSearchTypeValue('');
-                // setStatusValue('');
                 setTypeValue('');
                 settrxDate({
                   from: formatDate(today),
                   to: formatDate(today),
                 });
 
-                // Reset other filters except for date range
                 table.setColumnFilters([
                   { id: 'code', value: '' },
-                  // { id: 'status', value: '' },
                   { id: 'kind', value: '' },
                 ]);