diff --git a/src/pages/master/aldeias/blocks/ListToolbar.tsx b/src/pages/master/aldeias/blocks/ListToolbar.tsx
index 2454a1c..efbb499 100644
--- a/src/pages/master/aldeias/blocks/ListToolbar.tsx
+++ b/src/pages/master/aldeias/blocks/ListToolbar.tsx
@@ -11,7 +11,7 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
diff --git a/src/pages/master/municipios/blocks/ListToolbar.tsx b/src/pages/master/municipios/blocks/ListToolbar.tsx
index 4ebdf62..0647062 100644
--- a/src/pages/master/municipios/blocks/ListToolbar.tsx
+++ b/src/pages/master/municipios/blocks/ListToolbar.tsx
@@ -24,7 +24,7 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
diff --git a/src/pages/master/postoadms/blocks/ListToolbar.tsx b/src/pages/master/postoadms/blocks/ListToolbar.tsx
index 9ffcb42..2aa2714 100644
--- a/src/pages/master/postoadms/blocks/ListToolbar.tsx
+++ b/src/pages/master/postoadms/blocks/ListToolbar.tsx
@@ -25,7 +25,7 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
diff --git a/src/pages/master/products/blocks/ListToolbar.tsx b/src/pages/master/products/blocks/ListToolbar.tsx
index 6eb2507..92bd362 100644
--- a/src/pages/master/products/blocks/ListToolbar.tsx
+++ b/src/pages/master/products/blocks/ListToolbar.tsx
@@ -11,7 +11,7 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
diff --git a/src/pages/master/profession/blocks/ListToolbar.tsx b/src/pages/master/profession/blocks/ListToolbar.tsx
index 73afd22..9c04194 100644
--- a/src/pages/master/profession/blocks/ListToolbar.tsx
+++ b/src/pages/master/profession/blocks/ListToolbar.tsx
@@ -11,7 +11,7 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
diff --git a/src/pages/master/reward/blocks/ListToolbar.tsx b/src/pages/master/reward/blocks/ListToolbar.tsx
index 6f36328..5c85468 100644
--- a/src/pages/master/reward/blocks/ListToolbar.tsx
+++ b/src/pages/master/reward/blocks/ListToolbar.tsx
@@ -11,7 +11,7 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
diff --git a/src/pages/master/sucos/blocks/ListToolbar.tsx b/src/pages/master/sucos/blocks/ListToolbar.tsx
index dcdf109..884ffaf 100644
--- a/src/pages/master/sucos/blocks/ListToolbar.tsx
+++ b/src/pages/master/sucos/blocks/ListToolbar.tsx
@@ -11,7 +11,7 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
diff --git a/src/pages/master/wallet/blocks/ListToolbar.tsx b/src/pages/master/wallet/blocks/ListToolbar.tsx
index 1b35ce4..b8a36b3 100644
--- a/src/pages/master/wallet/blocks/ListToolbar.tsx
+++ b/src/pages/master/wallet/blocks/ListToolbar.tsx
@@ -11,7 +11,7 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
diff --git a/src/pages/members/kyc-delete-member/ManageKycDeletion.tsx b/src/pages/members/kyc-delete-member/ManageKycDeletion.tsx
index 0d5962e..8a175b7 100644
--- a/src/pages/members/kyc-delete-member/ManageKycDeletion.tsx
+++ b/src/pages/members/kyc-delete-member/ManageKycDeletion.tsx
@@ -1,5 +1,5 @@
 import { Container, DataGridInner } from '@/components';
-import { ManageKycDeletionContextProvider } from './hooks/ManageKycDeletionContext';
+import { ManageKycDeletionContextProvider } from './hooks';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 
diff --git a/src/pages/members/kyc-delete-member/blocks/DetailDialog.tsx b/src/pages/members/kyc-delete-member/blocks/DetailDialog.tsx
index 016674c..8b1ca90 100644
--- a/src/pages/members/kyc-delete-member/blocks/DetailDialog.tsx
+++ b/src/pages/members/kyc-delete-member/blocks/DetailDialog.tsx
@@ -9,11 +9,12 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { useManageKycDeletionContext } from '../hooks';
 import { apiConfig } from '@/config/api.config';
-import axios from 'axios';
+import { useDataGrid } from '@/components';
 
 const API_URL = apiConfig.service_customer;
 const DetailDialog = () => {
 	const { showDetailDialog, setShowDetailDialog, detailKyc, handleApproveReject } = useManageKycDeletionContext();
+	const { reload } = useDataGrid();
 
 	return (
 		<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@@ -38,8 +39,14 @@ const DetailDialog = () => {
 
 							<div className="flex justify-end gap-2 mt-3">
 								<Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</Button>
-								<Button onClick={() => handleApproveReject(detailKyc.id, 'N')} variant="destructive" color="warning">Reject</Button>
-								<Button onClick={() => handleApproveReject(detailKyc.id, 'Y')} variant="default" color="primary">Approve</Button>
+								<Button onClick={async() => {
+									await handleApproveReject(detailKyc.id, 'N')
+									reload()
+								}} variant="destructive" color="warning">Reject</Button>
+								<Button onClick={async() => {
+									await handleApproveReject(detailKyc.id, 'Y')
+									reload()
+								}} variant="default" color="primary">Approve</Button>
 							</div>
 						</div>
 					) : (<div></div>)}
diff --git a/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx b/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx
index c0742fd..48e4608 100644
--- a/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx
+++ b/src/pages/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx
@@ -37,7 +37,7 @@ interface ContextProps {
   selectedIdCustomer: string | null;
   detailKyc: any | null;
   setDetailKyc: React.Dispatch<React.SetStateAction<any>>;
-  handleApproveReject: (customerDeletionId: string, status_approve: string) => {};
+  handleApproveReject: (customerDeletionId: string, status_approve: string) => Promise<any>;
 }
 
 const initialProps: ContextProps = {
@@ -50,7 +50,7 @@ const initialProps: ContextProps = {
   setShowDetailDialog: () => { },
   detailKyc: async () => {},
   setDetailKyc: () => { },
-  handleApproveReject: () => ({customerDeletionId: '0', status_approve: 'Y'}),
+  handleApproveReject: async () => ({customerDeletionId: '0', status_approve: 'Y'}),
 };
 
 const ManageKycDeletionContext = createContext<ContextProps>(initialProps);
@@ -271,7 +271,6 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />
-      <DetailDialog />
 
       <DataGridProvider
         columns={columns}
@@ -285,6 +284,7 @@ const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactN
         }
       >
         {children}
+        <DetailDialog />
       </DataGridProvider>
     </ManageKycDeletionContext.Provider>
   );
diff --git a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
index 8d1915c..0820e05 100644
--- a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
+++ b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx
@@ -23,7 +23,7 @@ const ListToolbar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
diff --git a/src/pages/settings/user/manage-user/blocks/EditDialog.tsx b/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
index e2c1248..f8b5ef8 100644
--- a/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
+++ b/src/pages/settings/user/manage-user/blocks/EditDialog.tsx
@@ -153,7 +153,7 @@ const EditDialog = () => {
         email: response.data.email,
         id_role: response.data.idRole,
         status: response.data.status,
-        customerid: response.data.customerid?.id || ''
+        customerid: response.data.customer?.id || ''
       }));
       // console.log('Customer ID from API:', response?.data.customerid);
     } else {
diff --git a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
index 2e76deb..ff30fa0 100644
--- a/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
+++ b/src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
@@ -11,11 +11,11 @@ const ListToolBar = () => {
       <div className="flex flex-wrap gap-2 lg:gap-5 w-full">
         <div className="flex justify-between w-full items-center">
           <div className="flex w-[50%] gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <label className="input input-sm w-1/3 overflow-hidden">
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search Users"
+                placeholder="Search Username"
                 value={(table.getColumn('username')?.getFilterValue() as string) ?? ''}
                 onChange={(event) =>
                   table.getColumn('username')?.setFilterValue(event.target.value)
diff --git a/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx b/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
index 8b33e36..77f68a9 100644
--- a/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
+++ b/src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx
@@ -86,7 +86,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
       },
       {
         accessorFn: (row) => row.customer?.username,
-        id: 'customer',
+        id: 'Users.customer',
         header: ({ column }) => <DataGridColumnHeader title="Customer" column={column} />,
         enableSorting: true,
         enableHiding: false,
@@ -98,7 +98,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         accessorFn: (row) => row.email,
         id: 'email',
         header: ({ column }) => <DataGridColumnHeader title="Email" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[350px]'
@@ -106,9 +106,9 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
       },
       {
         accessorFn: (row) => row.name,
-        id: 'name',
+        id: 'Users.name',
         header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
-        enableSorting: true,
+        enableSorting: false,
         enableHiding: false,
         meta: {
           headerClassName: 'w-[250px]'
@@ -116,7 +116,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
       },
       {
         accessorFn: (row) => row.role.name,
-        id: 'role_name',
+        id: 'Users.role',
         header: ({ column }) => <DataGridColumnHeader title="Role Name" column={column} />,
         enableSorting: true,
         enableHiding: false,
@@ -239,7 +239,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         pagination={{ size: 10 }}
         toolbar={<ListToolBar />}
         layout={{ card: true }}
-        sorting={[{ id: 'Users.username', desc: false }]}
+        sorting={[{ id: 'Users.created_at', desc: false }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           doGetListData(pageIndex, pageSize, sorting, columnFilters)
diff --git a/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx b/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx
new file mode 100644
index 0000000..e2f6cba
--- /dev/null
+++ b/src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx
@@ -0,0 +1,109 @@
+import { Container, DataGridInner } from '@/components';
+import { TransactionDisbursementProvider } from './hooks/TransactionDisbursementContext';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+
+const TransactionDisbursement = () => {
+  const [form, setForm] = useState({
+    customerId: '',
+    amount: '',
+    pin: ''
+  });
+  const { GetData, PostData } = useCallApi();
+  const API_URL = apiConfig.transaction;
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log('Submitted Data:', form);
+    if (form.amount == '' || form.customerId == '' || form.pin == '') {
+      toast.warning('Please fill in all required fields.')
+      return
+    }
+    try {
+      // let requestTopup = await PostData(`${API_URL}/transaction/request-topup`, {
+      //   amount: form.topupAmount,
+      //   pin: form.pin
+      // })
+      // console.log(requestTopup)
+      // if (requestTopup?.status == true) {
+      //   toast.success('Success Request Topup')
+      // } else {
+      //   toast.warning(`${requestTopup?.message}`)
+      // }
+      toast.warning('Failed')
+    } catch (error) {
+      toast.warning('Failed')
+    }
+    // TODO: Kirim ke backend atau proses lainnya
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | Transaction Disbursement Saldo</title>
+      </Helmet>
+      <TransactionDisbursementProvider>
+        <Container className="mb-7">
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION DISBURSEMENT SALDO</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">Disbursement Saldo</span>
+            </Link>
+          </Breadcrumbs>
+          <Container className="flex items-center justify-center">
+            <div className="card max-w-[750px] w-full">
+              <div className="card-body p-10">
+                {/* form */}
+                <form onSubmit={handleSubmit} className="space-y-6">
+                <div>
+                  <label htmlFor="customerId">Customer ID</label><span className="text-red-500">*</span>
+                  <Input
+                    id="customerId"
+                    value={form.customerId}
+                    onChange={(e) => setForm({ ...form, customerId: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="amount">Amount</label><span className="text-red-500">*</span>
+                  <Input
+                    id="amount"
+                    type="number"
+                    value={form.amount}
+                    onChange={(e) => setForm({ ...form, amount: e.target.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>
+                  <Button type="submit">Submit</Button>
+                </div>
+              </form>
+              </div>
+            </div>
+          </Container>
+        </Container>
+      </TransactionDisbursementProvider>
+    </>
+  );
+};
+
+export default TransactionDisbursement;
diff --git a/src/pages/transaction/disbursement-saldo/blocks/ListToolbar.tsx b/src/pages/transaction/disbursement-saldo/blocks/ListToolbar.tsx
new file mode 100644
index 0000000..013a15c
--- /dev/null
+++ b/src/pages/transaction/disbursement-saldo/blocks/ListToolbar.tsx
@@ -0,0 +1,61 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useCallback, useState, useEffect } from 'react';
+import { toast } from 'sonner';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+
+  // Set the initial state for trxDate
+  const [trxDate, settrxDate] = useState({ from: '', to: '' });
+
+  // Function to format date to YYYY-MM-DD
+  const formatDate = (date: Date): string => {
+    return date.toISOString().split('T')[0];
+  };
+
+  // useEffect to set the default date values
+  useEffect(() => {
+    const today = new Date();
+    const nextWeek = new Date(today);
+    nextWeek.setDate(today.getDate() + 7);
+
+    settrxDate({
+      from: formatDate(today),   // Set 'from' to today
+      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+    });
+  }, []);
+
+  const handleFilterData = useCallback(() => {
+    try {
+      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+    } catch (error) {
+      toast.error('Error applying filter');
+      console.error('Error applying filter:', error);
+    }
+  }, [trxDate, table]);
+
+  useEffect(() => {
+    if (trxDate.from && trxDate.to) {
+      handleFilterData();
+    }
+  }, [trxDate]);
+
+  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">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex gap-3 items-center ml-auto">
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;
diff --git a/src/pages/transaction/disbursement-saldo/hooks/TransactionDisbursementContext.tsx b/src/pages/transaction/disbursement-saldo/hooks/TransactionDisbursementContext.tsx
new file mode 100644
index 0000000..7fc3604
--- /dev/null
+++ b/src/pages/transaction/disbursement-saldo/hooks/TransactionDisbursementContext.tsx
@@ -0,0 +1,80 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { toast } from 'sonner';
+import { apiConfig } from '@/config/api.config';
+import { ColumnDef } from '@tanstack/react-table';
+import { createContext, useCallback, useMemo, useState } from 'react';
+import ListToolbar from '../blocks/ListToolbar';
+import { useCallApi } from '@/hooks';
+import moment from 'moment';
+
+interface TransactionDisbursementProps {
+  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 TransactionDisbursementContext = 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 { reload } = useDataGrid();
+
+const TransactionDisbursementProvider = ({ children }: { children: React.ReactNode }) => {
+
+  return (
+    <TransactionDisbursementContext.Provider
+      value={{}}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+      <div>
+        {children}
+      </div>
+    </TransactionDisbursementContext.Provider>
+  );
+};
+
+export { TransactionDisbursementProvider, TransactionDisbursementContext };
+export type { TransactionDisbursementProps };
diff --git a/src/pages/transaction/disbursement-saldo/hooks/index.tsx b/src/pages/transaction/disbursement-saldo/hooks/index.tsx
new file mode 100644
index 0000000..b3acae0
--- /dev/null
+++ b/src/pages/transaction/disbursement-saldo/hooks/index.tsx
@@ -0,0 +1,2 @@
+export * from './TransactionDisbursementContext';
+export * from './useTransactionDisbursementContext';
diff --git a/src/pages/transaction/disbursement-saldo/hooks/useTransactionDisbursementContext.tsx b/src/pages/transaction/disbursement-saldo/hooks/useTransactionDisbursementContext.tsx
new file mode 100644
index 0000000..5137bc2
--- /dev/null
+++ b/src/pages/transaction/disbursement-saldo/hooks/useTransactionDisbursementContext.tsx
@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { TransactionDisbursementContext } from './TransactionDisbursementContext';
+
+const useTransactionDisbursementContext = () => {
+  const context = useContext(TransactionDisbursementContext);
+
+  if (!context) throw new Error('useTransactionDisbursementContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useTransactionDisbursementContext };
diff --git a/src/pages/transaction/topup/TransactionTopup.tsx b/src/pages/transaction/topup/TransactionTopup.tsx
new file mode 100644
index 0000000..ed81fe3
--- /dev/null
+++ b/src/pages/transaction/topup/TransactionTopup.tsx
@@ -0,0 +1,100 @@
+import { Container, DataGridInner } from '@/components';
+import { TransactionTopupProvider } from './hooks/TransactionTopupContext';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { toast } from 'sonner';
+
+const TransactionTopup = () => {
+  const [form, setForm] = useState({
+    topupAmount: '',
+    pin: ''
+  });
+  const { GetData, PostData } = useCallApi();
+  const API_URL = apiConfig.transaction;
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log('Submitted Data:', form);
+
+    if (form.pin == '' || form.topupAmount) {
+      toast.warning('Please fill in all required fields.')
+      return
+    }
+    try {
+      let requestTopup = await PostData(`${API_URL}/transaction/request-topup`, {
+        amount: form.topupAmount,
+        pin: form.pin
+      })
+      console.log(requestTopup)
+      if (requestTopup?.status == true) {
+        toast.success('Success Request Topup')
+      } else {
+        toast.warning(`${requestTopup?.message}`)
+      }
+    } catch (error) {
+      toast.warning('Failed')
+    }
+    // TODO: Kirim ke backend atau proses lainnya
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | Transaction Topup Request</title>
+      </Helmet>
+      <TransactionTopupProvider>
+        <Container className="mb-7">
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE TRANSACTION TOPUP REQUEST</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">Topup</span>
+            </Link>
+          </Breadcrumbs>
+          <Container className="flex items-center justify-center">
+            <div className="card max-w-[750px] w-full">
+              <div className="card-body p-10">
+                {/* form */}
+                <form onSubmit={handleSubmit} className="space-y-6">
+                  <div>
+                    <label htmlFor="topupAmount">Topup Amount</label><span className="text-red-500">*</span>
+                    <Input
+                      id="topupAmount"
+                      type="number"
+                      value={form.topupAmount}
+                      onChange={(e) => setForm({ ...form, topupAmount: e.target.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>
+                    <Button type="submit">Submit</Button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </Container>
+        </Container>
+      </TransactionTopupProvider>
+    </>
+  );
+};
+
+export default TransactionTopup;
diff --git a/src/pages/transaction/topup/blocks/ListToolbar.tsx b/src/pages/transaction/topup/blocks/ListToolbar.tsx
new file mode 100644
index 0000000..013a15c
--- /dev/null
+++ b/src/pages/transaction/topup/blocks/ListToolbar.tsx
@@ -0,0 +1,61 @@
+import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useCallback, useState, useEffect } from 'react';
+import { toast } from 'sonner';
+
+const ListToolbar = () => {
+  const { table, reload } = useDataGrid();
+
+  // Set the initial state for trxDate
+  const [trxDate, settrxDate] = useState({ from: '', to: '' });
+
+  // Function to format date to YYYY-MM-DD
+  const formatDate = (date: Date): string => {
+    return date.toISOString().split('T')[0];
+  };
+
+  // useEffect to set the default date values
+  useEffect(() => {
+    const today = new Date();
+    const nextWeek = new Date(today);
+    nextWeek.setDate(today.getDate() + 7);
+
+    settrxDate({
+      from: formatDate(today),   // Set 'from' to today
+      to: formatDate(nextWeek),  // Set 'to' to 7 days later
+    });
+  }, []);
+
+  const handleFilterData = useCallback(() => {
+    try {
+      table.getColumn('transaction_date')?.setFilterValue(trxDate);
+    } catch (error) {
+      toast.error('Error applying filter');
+      console.error('Error applying filter:', error);
+    }
+  }, [trxDate, table]);
+
+  useEffect(() => {
+    if (trxDate.from && trxDate.to) {
+      handleFilterData();
+    }
+  }, [trxDate]);
+
+  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">
+        <div className="flex justify-between w-full items-center">
+          <div className="flex gap-3 items-center ml-auto">
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ListToolbar;
diff --git a/src/pages/transaction/topup/hooks/TransactionTopupContext.tsx b/src/pages/transaction/topup/hooks/TransactionTopupContext.tsx
new file mode 100644
index 0000000..14cccdb
--- /dev/null
+++ b/src/pages/transaction/topup/hooks/TransactionTopupContext.tsx
@@ -0,0 +1,80 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/sonner';
+import { toast } from 'sonner';
+import { apiConfig } from '@/config/api.config';
+import { ColumnDef } from '@tanstack/react-table';
+import { createContext, useCallback, useMemo, useState } from 'react';
+import ListToolbar from '../blocks/ListToolbar';
+import { useCallApi } from '@/hooks';
+import moment from 'moment';
+
+interface TransactionTopupProps {
+  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 TransactionTopupContext = 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 { reload } = useDataGrid();
+
+const TransactionTopupProvider = ({ children }: { children: React.ReactNode }) => {
+
+  return (
+    <TransactionTopupContext.Provider
+      value={{}}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+      <div>
+        {children}
+      </div>
+    </TransactionTopupContext.Provider>
+  );
+};
+
+export { TransactionTopupProvider, TransactionTopupContext };
+export type { TransactionTopupProps };
diff --git a/src/pages/transaction/topup/hooks/index.tsx b/src/pages/transaction/topup/hooks/index.tsx
new file mode 100644
index 0000000..2b919d5
--- /dev/null
+++ b/src/pages/transaction/topup/hooks/index.tsx
@@ -0,0 +1,2 @@
+export * from './TransactionTopupContext';
+export * from './useTransactionTopupContext';
diff --git a/src/pages/transaction/topup/hooks/useTransactionTopupContext.tsx b/src/pages/transaction/topup/hooks/useTransactionTopupContext.tsx
new file mode 100644
index 0000000..cd253c2
--- /dev/null
+++ b/src/pages/transaction/topup/hooks/useTransactionTopupContext.tsx
@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { TransactionTopupContext } from './TransactionTopupContext';
+
+const useTransactionTopupContext = () => {
+  const context = useContext(TransactionTopupContext);
+
+  if (!context) throw new Error('useTransactionTopupContext must be used within AuthProvider');
+
+  return context;
+};
+
+export { useTransactionTopupContext };
diff --git a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
index 7325816..7d9e413 100644
--- a/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
+++ b/src/pages/transfer/transfertype/blocks/ListToolBar.tsx
@@ -1,10 +1,21 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
 import { Button } from '@/components/ui/button';
+import { useEffect, useState } from 'react';
 
 const ListToolbar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog, handleEditDialog } = useManageTransferTypeContext();
+  
+  const [searchValue, setSearchValue] = useState<string>((table.getColumn('name')?.getFilterValue() as string) ?? '');
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('name')?.setFilterValue(searchValue);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -16,8 +27,8 @@ const ListToolbar = () => {
               <input
                 type="text"
                 placeholder="Search Transaction Type"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                value={searchValue}
+                onChange={(event) => setSearchValue(event.target.value)}
               />
             </label>
           </div>
@@ -41,4 +52,4 @@ const ListToolbar = () => {
   );
 };
 
-export default ListToolbar;
+export default ListToolbar;
\ No newline at end of file
diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
index 7e886a3..dfdd72d 100644
--- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -6,6 +6,22 @@ import { ColumnDef } from '@tanstack/react-table';
 import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
 import ListToolbar from '../blocks/ListToolBar';
 
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
 interface AccountProps {
   id: string;
   name: string;
@@ -33,6 +49,8 @@ interface ContextProps {
   selectedTransferType: string | null;
   transferType: string | null;
   accounts: AccountProps[];
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
 }
 
 const initialProps: ContextProps = {
@@ -44,7 +62,9 @@ const initialProps: ContextProps = {
   handleDeleteDialog: () => {},
   selectedTransferType: null,
   accounts: [],
-  transferType: null
+  transferType: null,
+  searchTerm: '',
+  setSearchTerm: () => {}
 };
 
 const ManageTransferTypeContext = createContext<ContextProps>(initialProps);
@@ -59,6 +79,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
   const { GetData } = useCallApi();
   const [selectedTransferType, setSelectedTransferType] = useState<string | null>(null);
   const [transferType, setTransferType] = useState<string | null>(null);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  
+  const debouncedSearchTerm = useDebounce(searchTerm, 200);
 
   const handleEditDialog = useCallback((show: boolean, selected_transfertype: string | null) => {
     setSelectedTransferType(show ? selected_transfertype : null);
@@ -231,7 +254,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
 
     const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';
 
-    filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
+    const searchFilter = debouncedSearchTerm ? { any: debouncedSearchTerm.toLowerCase() } : {};
+    
+    filter = filter.length == 0 ? searchFilter : { any: filter[0].value?.toLowerCase() };
 
     const response = await GetData(`${API_URL}/transactiontype/list`, {
       limit: limit,
@@ -241,7 +266,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
       order_direction: orderDirection,
       filter: JSON.stringify(filter)
     });
-    // console.log(response?.data.list);
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
 
@@ -257,7 +281,9 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
           handleDeleteDialog,
           selectedTransferType,
           accounts,
-          transferType
+          transferType,
+          searchTerm,
+          setSearchTerm
         }}
       >
         <Toaster expand visibleToasts={9} duration={3000} />
@@ -283,4 +309,4 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
 };
 
 export { ManageTransferTypeContext, ManageTransferTypeContextProvider };
-export type { TransferType };
+export type { TransferType };
\ No newline at end of file
diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx
index 865effb..786cd1e 100644
--- a/src/routing/AppRoutingSetup.tsx
+++ b/src/routing/AppRoutingSetup.tsx
@@ -10,6 +10,8 @@ import DashboardHomePage from '@/pages/dashboards/home/DashboardHomePage';
 import ManageUserPage from '@/pages/settings/user/manage-user/ManageUserPage';
 import Transaction from '@/pages/transaction/history-transaction/Transaction';
 import ApprovalTransaction from '@/pages/transaction/approval-transaction/ApprovalTransaction';
+import TransactionTopup from '@/pages/transaction/topup/TransactionTopup';
+import TransactionDisbursement from '@/pages/transaction/disbursement-saldo/TransactionDisbursement';
 import LogActivityPage from '@/pages/settings/user/log-activity/LogActivityPage';
 import ManagePositionPage from '@/pages/settings/user/manage-position/ManagePositionPage';
 import ManageAccount from '@/pages/account/manage-account/ManageAccount';
@@ -96,6 +98,8 @@ const AppRoutingSetup = (): ReactElement => {
 
           <Route path="/transaction" element={<Transaction />} />
           <Route path="/approval-transaction" element={<ApprovalTransaction />} />
+          <Route path="/transaction/topup" element={<TransactionTopup/>} />
+          <Route path="/transaction/disbursement-saldo" element={<TransactionDisbursement/>} />
           <Route path="/menu/menu-management" element={<ManageMenu />} />
           <Route path="/menu/welcome" element={<Welcome />} />
           <Route path="/message/inbox" element={<Inbox />} />