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 ListToolbar = ({
-  const today = new Date();
+  filters,
-  return new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
+  setFilters
-};
+}: {
-
+  filters: any;
-const formatDate = (date: Date): string => date.toISOString().split('T')[0];
+  setFilters: (value: any) => void;
-
+}) => {
-const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { GetData } = useCallApi();
 
-  const [searchValue, setSearchValue] = useState<string>(
+  const [searchValue, setSearchValue] = useState('');
-    (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 [wallets, setWallets] = useState<WalletProps[]>([]);
+  const [walletId, setWalletId] = useState<string | null>(null);
   const [groups, setGroups] = useState<GroupProps[]>([]);
-
+  const [groupId, setGroupId] = useState<string | null>(null);
-  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 fetchWallets = async () => {
     try {
@@ -100,22 +75,29 @@ const ListToolbar = () => {
     fetchGroups();
   }, []);
 
-  const handleClearAllFilters = () => {
+  const handleApplyFilters = () => {
-    const today = new Date();
+    const appliedFilters: any[] = [];
-    const oneMonthAgo = getOneMonthsAgo();
+
-    const resetDateRange = {
+    if (searchValue) {
-      from: formatDate(oneMonthAgo),
+      appliedFilters.push({ id: 'msisdn', value: searchValue });
-      to: formatDate(today)
+    }
+
+    if (walletId) {
+      appliedFilters.push({ id: 'id_wallet', value: walletId });
+    }
+
+    if (groupId) {
+      appliedFilters.push({ id: 'id_group', value: groupId });
+    }
+
+    setFilters(appliedFilters);
   };
 
+  const handleClearAllFilters = () => {
     setSearchValue('');
-    setWalletId('');
+    setWalletId(null);
-    setGroupId('');
+    setGroupId(null);
-
+    setFilters([]);
-    table.getColumn('msisdn')?.setFilterValue('');
-    table.getColumn('id_wallet')?.setFilterValue('');
-    table.getColumn('id_group')?.setFilterValue('');
-    table.getColumn('CreatedAt')?.setFilterValue(resetDateRange);
 
     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">

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

@@ -48,7 +48,6 @@ const ShowDetailWalletDialog = () => {
   const [category, setCategory] = useState<string[]>([]);
   const [transaction, setTransaction] = useState<any[]>([]);
   const [filters, setFilters] = useState<any>({});
-  console.log(selectedCategory);
 
   const fetchTransferType = useCallback(async () => {
     try {
@@ -148,7 +147,6 @@ const ShowDetailWalletDialog = () => {
     }
 
     setFilters(appliedFilters);
-    console.log('applied filter :', appliedFilters.category);
   };
 
   const columns = [

src/pages/wallet/wallet-statement/hooks/ManageWalletStatementContext.tsx

@@ -66,6 +66,7 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [selectedWallet, setSelectedWallet] = useState<WalletProps | null>(null);
   const { GetData } = useCallApi();
+  const [filters, setFilters] = useState<any>({});
 
   const handleAddDialog = useCallback((show: boolean) => {
     setShowAddDialog(show);
@@ -380,11 +381,12 @@ const ManageWalletContextProvider = ({ children }: { children: React.ReactNode }
       <DataGridProvider
         columns={columns}
         pagination={{ size: 10 }}
-        toolbar={<ListToolbar />}
+        toolbar={<ListToolbar filters={filters} setFilters={setFilters} />}
         layout={{ card: true }}
         serverSide={true}
-        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+        onFetchData={
-          getWalletLists(pageIndex, pageSize, sorting, columnFilters)
+          ({ pageIndex, pageSize, sorting }) =>
+            getWalletLists(pageIndex, pageSize, sorting, filters) // gunakan filters dari state, bukan columnFilters
         }
       >
         {children}