change filter with butto filter on wallet statement

src/pages/wallet/wallet-statement/blocks/ListToolbar.tsx

@@ -24,46 +24,21 @@ interface GroupProps {
   name: string;
 }
 
-const getOneMonthsAgo = () => {
-  const today = new Date();
-  return new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
-};
-
-const formatDate = (date: Date): string => date.toISOString().split('T')[0];
-
-const ListToolbar = () => {
+const ListToolbar = ({
+  filters,
+  setFilters
+}: {
+  filters: any;
+  setFilters: (value: any) => void;
+}) => {
   const { table, reload } = useDataGrid();
   const { GetData } = useCallApi();
 
-  const [searchValue, setSearchValue] = useState<string>(
-    (table.getColumn('msisdn')?.getFilterValue() as string) ?? ''
-  );
-  const [walletId, setWalletId] = useState<string>(
-    (table.getColumn('id_wallet')?.getFilterValue() as string) ?? ''
-  );
-  const [groupId, setGroupId] = useState<string>(
-    (table.getColumn('id_group')?.getFilterValue() as string) ?? ''
-  );
+  const [searchValue, setSearchValue] = useState('');
   const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const [walletId, setWalletId] = useState<string | null>(null);
   const [groups, setGroups] = useState<GroupProps[]>([]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      table.getColumn('msisdn')?.setFilterValue(searchValue);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [searchValue, table]);
-
-  useEffect(() => {
-    table.getColumn('id_wallet')?.setFilterValue(walletId);
-    table.setPageIndex(0);
-  }, [walletId, table]);
-
-  useEffect(() => {
-    table.getColumn('id_group')?.setFilterValue(groupId);
-    table.setPageIndex(0);
-  }, [groupId, table]);
+  const [groupId, setGroupId] = useState<string | null>(null);
 
   const fetchWallets = async () => {
     try {
@@ -100,22 +75,29 @@ const ListToolbar = () => {
     fetchGroups();
   }, []);
 
+  const handleApplyFilters = () => {
+    const appliedFilters: any[] = [];
+
+    if (searchValue) {
+      appliedFilters.push({ id: 'msisdn', value: searchValue });
+    }
+
+    if (walletId) {
+      appliedFilters.push({ id: 'id_wallet', value: walletId });
+    }
+
+    if (groupId) {
+      appliedFilters.push({ id: 'id_group', value: groupId });
+    }
+
+    setFilters(appliedFilters);
+  };
+
   const handleClearAllFilters = () => {
-    const today = new Date();
-    const oneMonthAgo = getOneMonthsAgo();
-    const resetDateRange = {
-      from: formatDate(oneMonthAgo),
-      to: formatDate(today)
-    };
-
     setSearchValue('');
-    setWalletId('');
-    setGroupId('');
-
-    table.getColumn('msisdn')?.setFilterValue('');
-    table.getColumn('id_wallet')?.setFilterValue('');
-    table.getColumn('id_group')?.setFilterValue('');
-    table.getColumn('CreatedAt')?.setFilterValue(resetDateRange);
+    setWalletId(null);
+    setGroupId(null);
+    setFilters([]);
 
     setTimeout(() => {
       table.setPageIndex(0);
@@ -124,22 +106,19 @@ const ListToolbar = () => {
   };
 
   const handleRefresh = () => {
-    const today = new Date();
-    const threeMonthsAgo = getOneMonthsAgo();
-    const resetDateRange = {
-      from: formatDate(threeMonthsAgo),
-      to: formatDate(today)
-    };
-
     setSearchValue('');
     setWalletId('');
     setGroupId('');
 
-    table.setColumnFilters([{ id: 'CreatedAt', value: resetDateRange }]);
     table.setPageIndex(0);
     reload();
   };
 
+  useEffect(() => {
+    table.setPageIndex(0); // reset ke halaman pertama kalau mau
+    reload(); // ini yang akan trigger data fetch ulang
+  }, [filters]);
+
   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">
@@ -157,7 +136,7 @@ const ListToolbar = () => {
             </label>
 
             <div className="w-[160px]">
-              <Select value={walletId} onValueChange={(value) => setWalletId(value)}>
+              <Select value={walletId ?? ''} onValueChange={(value) => setWalletId(value)}>
                 <SelectTrigger className="h-[32px]">
                   <SelectValue placeholder="Select Wallet" />
                 </SelectTrigger>
@@ -172,7 +151,7 @@ const ListToolbar = () => {
             </div>
 
             <div className="w-[160px]">
-              <Select value={groupId} onValueChange={(value) => setGroupId(value)}>
+              <Select value={groupId ?? ''} onValueChange={(value) => setGroupId(value)}>
                 <SelectTrigger className="h-[32px]">
                   <SelectValue placeholder="Select Group" />
                 </SelectTrigger>
@@ -195,6 +174,10 @@ const ListToolbar = () => {
                 <KeenIcon icon="arrow-circle-left" />
               </Button>
             </DefaultTooltip>
+
+            <Button variant="outline" className="h-8" onClick={handleApplyFilters}>
+              Filter Data
+            </Button>
           </div>
 
           <div className="flex gap-3 items-center">