update button filter

src/pages/dashboards/home/DashboardHomePage.tsx

@@ -269,7 +269,7 @@ const DashboardHomePage = () => {
 
         <div className="flex space-x-4 mt-5">
           {bankaccount?.data && bankaccount?.data.length > 0 
-          // && getAuth()?.statusbalance=='Y' 
+          && getAuth()?.statusbalance=='Y' 
           ? (
             bankaccount?.data.map((bankaccountdatas: { id_balance:string,amount: string, credit_limit: string, monthly_limit: string; wallet: string; }, index: number) => (
               <BankSaldo

src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx

@@ -14,76 +14,61 @@ import {
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
 
-  // Set the initial state for trxDate
+  // State untuk filter
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
-  const [statusApproval, setStatusApproval] = useState<string>(
+  const [statusApproval, setStatusApproval] = useState<string>('');
-    (table.getColumn('status_approve')?.getFilterValue() as string) ?? ''
+  const [searchValue, setSearchValue] = useState<string>('');
-  );
+  const [typeSearchValue, setSearchTypeValue] = useState<string>('');
 
-  useEffect(() => {
+  // Set tanggal default saat pertama mount
-    const timer = setTimeout(() => {
-      table.getColumn('status_approve')?.setFilterValue(statusApproval);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [statusApproval, table]);
-
-  // Function to format date to YYYY-MM-DD
-  const formatDate = (date: Date): string => {
-    return date.toISOString().split('T')[0];
-  };
-
-  const [searchValue, setSearchValue] = useState<string>();
-  const [typeSearchValue, setSearchTypeValue] = useState<string>();
-
-
-
-  // useEffect to set the default date values
   useEffect(() => {
     const today = new Date();
-    // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+    const formatDate = (date: Date) => date.toISOString().split('T')[0];
     settrxDate({
       from: formatDate(today),
       to: formatDate(today),
     });
   }, []);
 
+  // Fungsi untuk apply semua filter sekaligus saat tombol Filter ditekan
   const handleFilterData = useCallback(() => {
     try {
+      if (!trxDate.from || !trxDate.to) {
+        toast.error('Please select From and To dates');
+        return;
+      }
+
+      // Set filter tanggal
       table.getColumn('transaction_date')?.setFilterValue(trxDate);
+
+      // Set filter status approval
+      table.getColumn('status_approve')?.setFilterValue(statusApproval || '');
+
+      // Set filter search type sebagai column filter id 'searchtype'
+      table.setColumnFilters((prevFilters) => {
+        // Hapus dulu filter dengan id 'searchtype' dan 'code' agar gak duplikat
+        const filtered = prevFilters.filter(
+          (f) => f.id !== 'searchtype' && f.id !== 'code'
+        );
+
+        // Tambahkan filter baru jika ada
+        if (typeSearchValue) {
+          filtered.push({ id: 'searchtype', value: typeSearchValue });
+        }
+        if (searchValue) {
+          filtered.push({ id: 'code', value: searchValue });
+        }
+
+        return filtered;
+      });
+
+      // Reset ke halaman pertama
+      table.setPageIndex(0);
     } catch (error) {
       toast.error('Error applying filter');
-      console.error('Error applying filter:', error);
+      console.error(error);
     }
-  }, [trxDate, table]);
+  }, [trxDate, statusApproval, searchValue, typeSearchValue, 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 },
-      ]);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [typeSearchValue, table]);
-
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.getColumn('code')?.setFilterValue(searchValue);
-      table.setPageIndex(0);
-    }, 200);
-
-    return () => clearTimeout(timer);
-  }, [searchValue, table]);
-
-  useEffect(() => {
-    if (trxDate.from && trxDate.to) {
-      handleFilterData();
-    }
-  }, [trxDate]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -93,11 +78,8 @@ const ListToolbar = () => {
             From
             <input
               type="date"
-              placeholder="From"
               value={trxDate.from}
-              onChange={(event) =>
+              onChange={(e) => settrxDate({ ...trxDate, from: e.target.value })}
-                settrxDate({ ...trxDate, from: event.target.value })
-              }
               name="from"
             />
           </label>
@@ -106,20 +88,15 @@ const ListToolbar = () => {
             To
             <input
               type="date"
-              placeholder="To"
               value={trxDate.to}
-              onChange={(event) =>
+              onChange={(e) => settrxDate({ ...trxDate, to: e.target.value })}
-                settrxDate({ ...trxDate, to: event.target.value })
-              }
               name="to"
             />
           </label>
 
           <Select
             value={statusApproval}
-            onValueChange={(value) => {
+            onValueChange={setStatusApproval}
-              setStatusApproval(value);
-            }}
           >
             <SelectTrigger className="input input-sm w-[160px] h-[31px]">
               <SelectValue placeholder="Select Status" />
@@ -133,9 +110,7 @@ const ListToolbar = () => {
 
           <Select
             value={typeSearchValue}
-            onValueChange={(value) => {
+            onValueChange={setSearchTypeValue}
-              setSearchTypeValue(value);
-            }}
           >
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Search Type" />
@@ -151,12 +126,16 @@ 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)}
+              onChange={(e) => setSearchValue(e.target.value)}
             />
           </label>
 
+          {/* Tombol Filter */}
+          <Button onClick={handleFilterData}>
+            Filter
+          </Button>
         </div>
 
         <div className="ml-auto">
@@ -166,23 +145,22 @@ const ListToolbar = () => {
               className="h-7.5"
               onClick={() => {
                 const today = new Date();
-                // const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+                const formatDate = (date: Date) => date.toISOString().split('T')[0];
 
-                // Resetting all filters
+                // Reset semua filter dan tanggal ke hari ini
                 setSearchValue('');
                 setStatusApproval('');
-                settrxDate({
+                settrxDate({ from: formatDate(today), to: formatDate(today) });
-                  from: formatDate(today),
-                  to: formatDate(today),
-                });
-
                 setSearchTypeValue('');
 
+                // Reset filter di tabel
                 table.getColumn('code')?.setFilterValue('');
                 table.getColumn('status_approve')?.setFilterValue('');
+                table.getColumn('transaction_date')?.setFilterValue('');
+                table.setColumnFilters([]);
                 table.setPageIndex(0);
 
-                reload(); // Reload table data
+                reload();
               }}
             >
               <KeenIcon icon="arrows-circle" />

src/pages/transaction/history-transaction/blocks/ListToolbar.tsx

@@ -1,7 +1,7 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useTransactionContext } from '../hooks/useTransactionContext';
 import { Button } from '@/components/ui/button';
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useRef } from 'react';
 import { toast } from 'sonner';
 import {
   Select,
@@ -17,8 +17,8 @@ import { getAuth } from '@/auth';
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const [trxDate, settrxDate] = useState({ from: '', to: '' });
-  const [searchValue, setSearchValue] = useState<string>(''); // default: empty string
+  const [searchValue, setSearchValue] = useState<string>('');
-  const [typeSearchValue, setSearchTypeValue] = useState<string>(''); // default: empty string
+  const [typeSearchValue, setSearchTypeValue] = useState<string>('');
   const [typeValue, setTypeValue] = useState<string>(
     (table.getState().columnFilters.find(f => f.id === 'kind')?.value as string) ?? ''
   );
@@ -26,62 +26,44 @@ const ListToolbar = () => {
   const { GetData } = useCallApi();
   const API_URL = apiConfig.transaction;
 
-  const formatDate = (date: Date): string => {
+  const formatDate = (date: Date): string => date.toISOString().split('T')[0];
-    return date.toISOString().split('T')[0];
-  };
 
+  // Set tanggal default hari ini saat mount
   useEffect(() => {
     const today = new Date();
-    settrxDate({
+    const formatted = formatDate(today);
-      from: formatDate(today),
+    settrxDate({ from: formatted, to: formatted });
-      to: formatDate(today),
-    });
   }, []);
 
-  useEffect(() => {
+  // **Hilangkan semua useEffect yang auto apply filter saat input berubah**
-    const timer = setTimeout(() => {
+  // Karena kamu mau filter apply hanya lewat tombol Filter
-      table.setColumnFilters((prev) => [
-        ...prev.filter((f) => f.id !== 'kind'),
-        { id: 'kind', value: typeValue },
-      ]);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [typeValue, table]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.setColumnFilters((prev) => [
-        ...prev.filter((f) => f.id !== 'searchtype'),
-        { id: 'searchtype', value: typeSearchValue },
-      ]);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [typeSearchValue, table]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.getColumn('code')?.setFilterValue(searchValue);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [searchValue, table]);
 
+  // Fungsi untuk apply SEMUA filter sekaligus saat tombol Filter diklik
   const handleFilterData = useCallback(() => {
-    try {
+    if (!trxDate.from || !trxDate.to) {
-      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+      toast.error('Please select both From and To dates');
-    } catch (error) {
+      return;
-      toast.error('Error applying filter');
-      console.error('Error applying filter:', error);
     }
-  }, [trxDate, table]);
 
-  useEffect(() => {
+    // Terapkan filter tanggal
-    if (trxDate.from && trxDate.to) {
+    table.getColumn('transaction_date')?.setFilterValue(trxDate);
-      handleFilterData();
+
-    }
+    // Terapkan filter jenis transaksi (kind)
-  }, [trxDate]);
+    table.setColumnFilters((prev) => {
+      // Hapus filter 'kind' dan 'searchtype' agar bisa set ulang
+      const others = prev.filter(f => f.id !== 'kind' && f.id !== 'searchtype' && f.id !== 'code');
+      // Bangun array baru dengan filter yang diinginkan
+      const filters: any[] = [...others];
+
+      if (typeValue) filters.push({ id: 'kind', value: typeValue });
+      if (typeSearchValue) filters.push({ id: 'searchtype', value: typeSearchValue });
+      if (searchValue) filters.push({ id: 'code', value: searchValue });
+
+      return filters;
+    });
+
+    table.setPageIndex(0);
+  }, [trxDate, typeValue, typeSearchValue, searchValue, table]);
 
   const exporDataToExcel = async (
     typeSearchValue: string,
@@ -93,8 +75,8 @@ const ListToolbar = () => {
       const formattedFilter: any = {
         "Transactions.transaction_date": {
           from: `${trxDate.from} 00:00:00`,
-          to: `${trxDate.to} 23:59:59`
+          to: `${trxDate.to} 23:59:59`,
-        }
+        },
       };
 
       if (typeSearchValue === 'msisdn') {
@@ -106,17 +88,20 @@ const ListToolbar = () => {
       }
 
       if (typeValue) {
-        formattedFilter["Transactions.kind"] = typeValue;
+        formattedFilter['Transactions.kind'] = typeValue;
       }
 
       const filterParam = encodeURIComponent(JSON.stringify(formattedFilter));
 
-      const response = await fetch(`${API_URL}/transaction/export?filter=${filterParam}`, {
+      const response = await fetch(
-        method: 'GET',
+        `${API_URL}/transaction/export?filter=${filterParam}`,
-        headers: {
+        {
-          Authorization: `Bearer ${getAuth()?.access_token}`, // ganti dengan token kamu
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${getAuth()?.access_token}`,
+          },
         }
-      });
+      );
 
       if (!response.ok) {
         throw new Error('Failed to fetch file');
@@ -161,16 +146,11 @@ const ListToolbar = () => {
               name="to"
             />
           </label>
-
+          <Select value={typeValue} onValueChange={(value) => setTypeValue(value)}>
-          <Select
-            value={typeValue}
-            onValueChange={(value) => setTypeValue(value)}
-          >
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Transaction Type" />
             </SelectTrigger>
             <SelectContent>
-
               <SelectItem value="T">TRANSFER</SelectItem>
               <SelectItem value="P">PURCHASE</SelectItem>
               <SelectItem value="W">WITHDRAW</SelectItem>
@@ -193,10 +173,7 @@ const ListToolbar = () => {
             </SelectContent>
           </Select>
 
-          <Select
+          <Select value={typeSearchValue} onValueChange={(value) => setSearchTypeValue(value)}>
-            value={typeSearchValue}
-            onValueChange={(value) => setSearchTypeValue(value)}
-          >
             <SelectTrigger className="input input-sm w-[250px] h-[31px]">
               <SelectValue placeholder="Select Search Type" />
             </SelectTrigger>
@@ -216,6 +193,11 @@ const ListToolbar = () => {
               onChange={(event) => setSearchValue(event.target.value)}
             />
           </label>
+
+          <Button className="h-7.5" onClick={handleFilterData}>
+            Filter
+          </Button>
+
         </div>
 
         <div className="ml-auto flex gap-2">
@@ -245,28 +227,17 @@ const ListToolbar = () => {
             Export Data
           </Button>
 
-
-
           <DefaultTooltip title={'Refresh'} placement={'top'}>
             <Button
               variant="outline"
               className="h-7.5"
               onClick={() => {
                 const today = new Date();
-
                 setSearchValue('');
                 setSearchTypeValue('');
                 setTypeValue('');
-                settrxDate({
+                settrxDate({ from: formatDate(today), to: formatDate(today) });
-                  from: formatDate(today),
+                table.setColumnFilters([]);
-                  to: formatDate(today),
-                });
-
-                table.setColumnFilters([
-                  { id: 'code', value: '' },
-                  { id: 'kind', value: '' },
-                ]);
-
                 table.setPageIndex(0);
                 reload();
               }}