Merge branch 'master' of https://git.telkomcel.tl/TPAY/dashboard

.woodpecker.yml

@@ -1,3 +1,11 @@
+when:
+  commit:
+    message:
+      exclude:
+        - '\[skip ci\]'
+        - '\[ci skip\]'
+        - '\[no ci\]'
+
 steps:
   - name: telegram start notify
     image: appleboy/drone-telegram

src/pages/transaction/withdrawl-emoney/WithdrawalEmoney.tsx

@@ -0,0 +1,36 @@
+import { Helmet } from 'react-helmet';
+import { Container } from '@/components';
+import { Breadcrumbs, Link } from '@mui/material';
+import WithdrawInput from './blocks/WithdrawInput';
+import { TransactionWithdrawalEmoneyProvider } from './hooks/TransactionWithdrawalEmoneyContext';
+
+const WithdrawalEmoney = () => {
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | Withdrawal Emoney</title>
+      </Helmet>
+      <TransactionWithdrawalEmoneyProvider>
+        <Container className="mb-7">
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">
+            TRANSACTION WITHDRAWAL EMONEY
+          </h1>
+          <Breadcrumbs sx={{ mb: 2 }}>
+            <Link underline="none" color="inherit" href="/">
+              <span className="text-sm hover:underline">Dashboard</span>
+            </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Transaction</span>
+            </Link>
+            <Link underline="none" color="inherit">
+              <span className="text-sm">Withdraw Saldo</span>
+            </Link>
+          </Breadcrumbs>
+          <WithdrawInput />
+        </Container>
+      </TransactionWithdrawalEmoneyProvider>
+    </>
+  );
+};
+
+export default WithdrawalEmoney;

src/pages/transaction/withdrawl-emoney/blocks/WithdrawInput.tsx

@@ -0,0 +1,301 @@
+import { getAuth } from '@/auth';
+import { Alert, Container } from '@/components';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { apiConfig } from '@/config/api.config';
+import { useCallApi } from '@/hooks';
+import { RefreshCw } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+
+const WithdrawInput = () => {
+  const initialForm: {
+    id_customer: string;
+    amount: string;
+    pin: string;
+    purpose: string;
+  } = {
+    id_customer: '',
+    amount: '',
+    pin: '',
+    purpose: ''
+  };
+
+  const [form, setForm] = useState(initialForm);
+  const [isLoading, setIsLoading] = useState(false);
+  const [customerMsisdn, setCustomerMsisdn] = useState<{ value: string; label: string }[]>([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { GetData, PostData } = useCallApi();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const parsedUser = getAuth()?.user;
+  const API_URL = apiConfig.transaction;
+  const API_URL_WALLET = apiConfig.service_wallet;
+  const API_URL_CUSTOMER = apiConfig.service_customer;
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [alert, setAlert] = useState({
+    show: false,
+    message: ''
+  });
+
+  const ResetForm = () => {
+    setForm(initialForm);
+    setAlert({ show: false, message: '' });
+    setSearchTerm('');
+  };
+
+  const fetchCustomerMsisdn = async (sorting: any, filterValue: string) => {
+    const filter: any =
+      filterValue.trim().length === 0
+        ? {}
+        : {
+            or: [
+              { msisdn: { like: `%${filterValue}%` } },
+              { fullname: { like: `%${filterValue}%` } }
+            ]
+          };
+
+    const query: any = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: sorting[0].id,
+      order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+    };
+
+    if (filter && Object.keys(filter).length > 0) {
+      query.filter = JSON.stringify(filter);
+      // query.page = page + 1;
+    }
+
+    try {
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, query);
+      console.log(response?.data);
+      setCustomerMsisdn(
+        response?.data.list.map((item: any) => ({
+          value: item.id,
+          label: `${item.msisdn} - ${item.fullname}`
+        }))
+      );
+    } catch (error) {
+      toast.error('Failed to fetch customer msisdn');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const doPostData = async (form: typeof initialForm) => {
+    setIsSubmitting(true);
+    // console.log(getAuth()?.user.customer.id);
+
+    try {
+      let response = await PostData(`${API_URL}/transaction/transfer`, {
+        msisdn_destination: '1112007',
+        amount: form.amount,
+        pin: form.pin,
+        purpose: form.purpose,
+        id_transaction_type: '380f270b-1f44-406f-a196-d6f784d68eb4',
+        id_origin_customer: form.id_customer,
+        type: 'S'
+      });
+      if (response?.status == true) {
+        toast.success('Success Request Topup');
+      } else {
+        toast.error(`${response?.message?.message}`);
+      }
+    } catch (error: any) {
+      const errorMessage =
+        error?.response?.data?.message || error?.message || 'Something went wrong';
+      toast.error(errorMessage);
+      setAlert({ show: true, message: errorMessage });
+    } finally {
+      setIsSubmitting(false);
+      setShowConfirmation(false);
+      ResetForm();
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (form.amount == '' || form.id_customer == '' || form.pin == '') {
+      setAlert({
+        show: true,
+        message: 'Please fill in all required fields.'
+      });
+      return;
+    }
+    setAlert({ show: false, message: '' });
+    setShowConfirmation(true);
+  };
+
+  const handleCancelSubmit = () => {
+    setShowConfirmation(false);
+  };
+
+  const handleMsisdnSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsLoading(true);
+    setSearchTerm(e.target.value);
+    setDropdownOpen(true);
+    const timer = setTimeout(() => {
+      fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], e.target.value);
+    }, 500);
+    return () => clearTimeout(timer);
+  };
+
+  const handleMsisdnSelect = (msisdn: string) => {
+    setForm({ ...form, id_customer: msisdn });
+    setDropdownOpen(false);
+    setSearchTerm(msisdn);
+  };
+
+  useEffect(() => {
+    fetchCustomerMsisdn([{ id: 'msisdn', desc: false }], '');
+
+    const handleClickOutside = (event: any) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const filteredMsisdn = customerMsisdn
+    .filter((item) => item.label.toLowerCase().includes(searchTerm.toLowerCase()))
+    .slice(0, 10);
+
+  return (
+    <>
+      <Container className="flex items-center justify-center">
+        <div className="card max-w-[750px] w-full">
+          <div className="card-body p-10">
+            {alert.show && (
+              <Alert variant="danger">
+                <h3>{alert.message}</h3>
+              </Alert>
+            )}
+            {/* form */}
+            <form onSubmit={handleSubmit} className="space-y-6 mt-5">
+              <div className="relative" ref={dropdownRef}>
+                <label htmlFor="msisdn">MSISDN (Phone Number)</label>
+                <span className="text-red-500">*</span>
+                <div className="relative">
+                  <Input
+                    id="msisdn"
+                    type="text"
+                    value={searchTerm}
+                    onChange={handleMsisdnSearch}
+                    placeholder="Search MSISDN"
+                    onClick={() => setDropdownOpen(true)}
+                  />
+                  {dropdownOpen && (
+                    <div className="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto">
+                      {filteredMsisdn.length > 0 ? (
+                        filteredMsisdn.map((item, index) => (
+                          <div
+                            key={index}
+                            className="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+                            onClick={() => handleMsisdnSelect(item.value)}
+                          >
+                            {item.label}
+                          </div>
+                        ))
+                      ) : (
+                        <div className="px-4 py-2 text-gray-500">
+                          {isLoading ? 'Loading...' : 'No results found'}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="amount">Amount</label>
+                <span className="text-red-500">*</span>
+                <Input
+                  id="topupAmount"
+                  type="number"
+                  min={0}
+                  value={form.amount}
+                  onChange={(e) => {
+                    const value = Number(e.target.value);
+                    if (value >= 0) {
+                      setForm({ ...form, amount: String(value) });
+                    }
+                  }}
+                />
+              </div>
+              <div>
+                <label htmlFor="pin">PIN</label>
+                <span className="text-red-500">*</span>
+                <Input
+                  id="pin"
+                  type="password"
+                  value={form.pin}
+                  onChange={(e) => setForm({ ...form, pin: e.target.value })}
+                />
+              </div>
+              <div>
+                <label htmlFor="pin">Purpose</label>
+                <span className="text-red-500">*</span>
+                <Input
+                  id="purpose"
+                  type="text"
+                  value={form.purpose}
+                  onChange={(e) => setForm({ ...form, purpose: e.target.value })}
+                />
+              </div>
+              <div>
+                <Button type="button" onClick={handleSubmit}>
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </Container>
+
+      {showConfirmation && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
+            <h3 className="text-lg font-semibold mb-4">Confirm Transaction</h3>
+            <p className="mb-6">
+              Are you sure you want to withdraw saldo of{' '}
+              <span className="font-semibold">
+                {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
+                  Number(form.amount)
+                )}{' '}
+              </span>
+              ?
+            </p>
+            <div className="flex justify-end space-x-3">
+              <Button
+                variant="outline"
+                onClick={handleCancelSubmit}
+                className="border-gray-300 text-gray-700"
+              >
+                Cancel
+              </Button>
+              <Button onClick={() => doPostData(form)} disabled={isSubmitting}>
+                {isSubmitting ? (
+                  <RefreshCw className="animate-spin h-8 w-8 text-white mx-3" />
+                ) : (
+                  'Confirm'
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default WithdrawInput;

src/pages/transaction/withdrawl-emoney/hooks/TransactionWithdrawalEmoneyContext.tsx

@@ -0,0 +1,58 @@
+import { apiConfig } from '@/config/api.config';
+import { createContext } from 'react';
+
+interface TransactionWithdrawalProps {
+  id: string;
+  customers_id: string;
+  group_id: string;
+  username: string;
+  fullname: string;
+  email: string;
+  status: string;
+  created_at: Date;
+}
+
+interface ContextProps {}
+
+const initialProps: ContextProps = {};
+
+const TransactionWithdrawalEmoneyContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_customer;
+
+type StatusCode = 'W' | 'Y' | 'N' | 'T';
+
+interface StatusInfo {
+  label: string;
+  bg: string;
+  text: string;
+}
+
+const statusMap: Record<StatusCode, StatusInfo> = {
+  W: { label: 'Waiting Approval', bg: 'bg-yellow-100', text: 'text-yellow-600' },
+  T: { label: 'No Need', bg: 'bg-blue-100', text: 'text-blue-600' },
+  N: { label: 'Reject', bg: 'bg-red-100', text: 'text-red-600' },
+  Y: { label: 'Approve', 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'
+  };
+
+  return (
+    <span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>{label}</span>
+  );
+};
+
+const TransactionWithdrawalEmoneyProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <TransactionWithdrawalEmoneyContext.Provider value={{}}>
+      <div>{children}</div>
+    </TransactionWithdrawalEmoneyContext.Provider>
+  );
+};
+
+export { TransactionWithdrawalEmoneyProvider, TransactionWithdrawalEmoneyContext };

src/pages/transaction/withdrawl-emoney/hooks/useTransactionWithdrawalEmoney.tsx

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { TransactionWithdrawalEmoneyContext } from './TransactionWithdrawalEmoneyContext';
+
+const useTransactionWithdrawalEmoneyContext = () => {
+  const context = useContext(TransactionWithdrawalEmoneyContext);
+
+  if (!context) throw new Error('useTransactionWithdrawalEmoney must be used within AuthProvider');
+
+  return context;
+};
+
+export { useTransactionWithdrawalEmoneyContext };

src/pages/transfer/transfertype/blocks/ListToolBar.tsx

@@ -52,41 +52,15 @@ const ListToolbar = () => {
   const { handleAddDialog } = useManageTransferTypeContext();
   const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
   const { GetData } = useCallApi();
-  const [statusKind, setStatusKind] = useState('');
+
-  const [searchValue, setSearchValue] = useState('');
+  const [tempSearchValue, setTempSearchValue] = useState('');
-  const [statusTypes, setStatusTypes] = useState('');
+  const [tempStatusTypes, setTempStatusTypes] = useState('');
-  const [approval, setApproval] = useState('');
+  const [tempApproval, setTempApproval] = useState('');
+  const [tempStatusKind, setTempStatusKind] = useState('');
 
   const unique = (arr: string[]) => Array.from(new Set(arr));
   const types = unique(transferTypes.map((t) => t.type));
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter') {
-table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
-      table.setPageIndex(0);
-    }
-  };
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
-      table.setPageIndex(0);
-    }, 200);
-    return () => clearTimeout(timer);
-  }, [searchValue, table]);
-
-  useEffect(() => {
-    table.getColumn('type')?.setFilterValue(statusTypes);
-  }, [statusTypes, table]);
-
-  useEffect(() => {
-    table.getColumn('status_approval')?.setFilterValue(approval);
-  }, [approval, table]);
-
-  useEffect(() => {
-    table.getColumn('status_kind')?.setFilterValue(statusKind);
-  }, [statusKind, table]);
-
   const fetchTransferTypes = async () => {
     try {
       const response = await GetData(`${API_URL}/transactiontype/list`, {
@@ -106,11 +80,21 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
     fetchTransferTypes();
   }, []);
 
+  const handleApplyFilter = () => {
+    table.getColumn('name')?.setFilterValue(tempSearchValue ? `%${tempSearchValue}%` : '');
+
+    table.getColumn('type')?.setFilterValue(tempStatusTypes);
+    table.getColumn('status_approval')?.setFilterValue(tempApproval);
+    table.getColumn('status_kind')?.setFilterValue(tempStatusKind);
+
+    table.setPageIndex(0);
+  };
+
   const handleClearFilter = () => {
-    setSearchValue('');
+    setTempSearchValue('');
-    setStatusTypes('');
+    setTempStatusTypes('');
-    setApproval('');
+    setTempApproval('');
-    setStatusKind('');
+    setTempStatusKind('');
 
     table.getColumn('status_kind')?.setFilterValue('');
     table.getColumn('name')?.setFilterValue('');
@@ -123,6 +107,27 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
     }, 0);
   };
 
+  const handleRefreshAndClearFilter = () => {
+    setTempSearchValue('');
+    setTempStatusTypes('');
+    setTempApproval('');
+    setTempStatusKind('');
+
+    table.getColumn('name')?.setFilterValue('');
+    table.getColumn('type')?.setFilterValue('');
+    table.getColumn('status_approval')?.setFilterValue('');
+    table.getColumn('status_kind')?.setFilterValue('');
+
+    table.setPageIndex(0);
+    reload();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      handleApplyFilter();
+    }
+  };
+
   return (
     <div className="card-header flex-wrap border-b-0 px-5">
       <div className="flex flex-wrap gap-1 w-full">
@@ -135,18 +140,18 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
               <input
                 type="text"
                 placeholder="Search Name"
-                value={searchValue}
+                value={tempSearchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
+                onChange={(e) => setTempSearchValue(e.target.value)}
-                className="input input-sm  w-full pl-9 text-ellipsis overflow-hidden"
+                className="input input-sm w-full pl-9 text-ellipsis overflow-hidden"
                 onKeyDown={handleKeyDown}
               />
             </div>
 
             <div className="min-w-[220px] shrink-0">
               <Select
-                key={`type-filter-${statusTypes}`}
+                key={`type-filter-${tempStatusTypes}`}
-                value={statusTypes}
+                value={tempStatusTypes}
-                onValueChange={setStatusTypes}
+                onValueChange={setTempStatusTypes}
               >
                 <SelectTrigger className="h-8">
                   <SelectValue
@@ -166,9 +171,9 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
 
             <div className="min-w-[220px] shrink-0">
               <Select
-                key={`approval-filter-${approval}`}
+                key={`approval-filter-${tempApproval}`}
-                value={approval}
+                value={tempApproval}
-                onValueChange={setApproval}
+                onValueChange={setTempApproval}
               >
                 <SelectTrigger className="h-8">
                   <SelectValue
@@ -186,11 +191,12 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
                 </SelectContent>
               </Select>
             </div>
+
             <div className="min-w-[220px] shrink-0">
               <Select
-                key={`status-kind-filter-${statusKind}`}
+                key={`status-kind-filter-${tempStatusKind}`}
-                value={statusKind}
+                value={tempStatusKind}
-                onValueChange={setStatusKind}
+                onValueChange={setTempStatusKind}
               >
                 <SelectTrigger className="h-8">
                   <SelectValue
@@ -223,12 +229,17 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
               </Select>
             </div>
 
-            <DefaultTooltip title={'Reset Filter'} placement={'top'}>
+            {/* Filter Button */}
-              <Button
+            <DefaultTooltip title={'Apply Filter'} placement={'top'}>
-                variant="outline"
+              <Button variant="default" className="h-8 px-4 shrink-0" onClick={handleApplyFilter}>
-                className="h-7.5 disabled:bg-gray-400 shrink-0"
+                <KeenIcon icon="filter" className="mr-1" />
-                onClick={handleClearFilter}
+                Filter
-              >
+              </Button>
+            </DefaultTooltip>
+
+            {/* Clear Filter Button */}
+            <DefaultTooltip title={'Refresh Data (Keep Filter)'} placement={'top'}>
+              <Button variant="outline" className="h-8 px-3 shrink-0" onClick={() => reload()}>
                 <KeenIcon icon="arrow-circle-left" />
               </Button>
             </DefaultTooltip>
@@ -242,8 +253,8 @@ table.getColumn('name')?.setFilterValue(`%${searchValue}%`);
             >
               Add
             </Button>
-            <DefaultTooltip title="Refresh" placement="top">
+            <DefaultTooltip title="Reset Filter & Refresh" placement="top">
-              <Button variant="outline" className="h-8 px-3" onClick={() => reload()}>
+              <Button variant="outline" className="h-8 px-3" onClick={handleRefreshAndClearFilter}>
                 <KeenIcon icon="arrows-circle" />
               </Button>
             </DefaultTooltip>

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 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('');
+    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,15 @@ 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 +132,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 +147,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 +170,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}

src/routing/AppRoutingSetup.tsx

@@ -49,6 +49,7 @@ import AgentBalance from '@/pages/members/agent-balance/AgentBalance';
 
 // DISBURSEMENT
 import HistoryTransactionDisbursement from '@/pages/disbursement/history-transaction/HistoryTransaction';
+import WithdrawalEmoney from '@/pages/transaction/withdrawl-emoney/WithdrawalEmoney';
 
 // DISBURSEMENT
 
@@ -110,6 +111,7 @@ const AppRoutingSetup = (): ReactElement => {
           <Route path="/transaction/topup" element={<TransactionTopup />} />
           <Route path="/transaction/disbursement-saldo" element={<TransactionDisbursement />} />
           <Route path="/transaction/withdrawl-saldo" element={<TransactionWithdraw />} />
+          <Route path="/transaction/withdrawal-emoney" element={<WithdrawalEmoney />} />
           <Route path="/menu/menu-management" element={<ManageMenu />} />
           <Route path="/menu/welcome" element={<Welcome />} />
           <Route path="/message/inbox" element={<Inbox />} />