fixing kyc delete member, transaction topup request, disbursement saldo

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={async() => {
-								<Button onClick={() => handleApproveReject(detailKyc.id, 'Y')} variant="default" color="primary">Approve</Button>
+									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>)}

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>
   );

src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx

@@ -0,0 +1,105 @@
+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);
+    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>
+                  <Input
+                    id="customerId"
+                    value={form.customerId}
+                    onChange={(e) => setForm({ ...form, customerId: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="amount">Amount</label>
+                  <Input
+                    id="amount"
+                    type="number"
+                    value={form.amount}
+                    onChange={(e) => setForm({ ...form, amount: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label htmlFor="pin">PIN</label>
+                  <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;

src/pages/transaction/disbursement-saldo/blocks/DetailDialog.tsx

@@ -0,0 +1,105 @@
+import {
+	Dialog,
+	DialogBody,
+	DialogContent,
+	DialogHeader,
+	DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useManageKycDeletionContext } from '../hooks';
+import { apiConfig } from '@/config/api.config';
+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}>
+			<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden max-h-[90vh] overflow-y-auto">
+				<DialogHeader>
+					<DialogTitle>Customer Deletion Details </DialogTitle>
+				</DialogHeader>
+				<DialogBody>
+					{/* Tab Content */}
+					{detailKyc && detailKyc != null ? (
+						<div className="flex flex-col">
+							{generateInput(detailKyc, null, 'Group', 'group_name', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Username', 'username', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Full Name', 'fullname', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Gender', 'customers_gender', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Date of Birth', 'birthdate', 'date', false, true)}
+							{generateInput(detailKyc, null, 'Mother Name', 'registered_mother_fullname', 'text', false, true)}
+							{generateInput(detailKyc, null, 'MSISDN', 'registered_msisdn', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Reason Deletion', 'reason_deletion', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Reason Note', 'reason_note', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Status Approval', 'status_approve', 'text', false, true)}
+
+							<div className="flex justify-end gap-2 mt-3">
+								<Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</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>)}
+				</DialogBody>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default DetailDialog;
+
+function generateInput(formData: any, handleChange: any, label: string, name: string, type: string, required: boolean, disabled: boolean) {
+	function generateDate(isoString: string) {
+		return isoString.slice(0, 10); // "2000-01-18"
+	}
+
+	type Code = 'W' | 'Y' | 'N' | 'T' | 'P' | 'D' | 'L';
+	interface Reason {
+		label: string;
+	}
+
+	const statusMap: Record<Code, Reason> = {
+		W: { label: 'Waiting Approval' },
+		Y: { label: 'Approve' },
+		N: { label: 'Reject' },
+		T: { label: 'Tidak lagi menggunakan layanan' },
+		P: { label: 'Privasi dan keamanan' },
+		D: { label: 'Akun ganda' },
+		L: { label: 'Lainnya' }
+	};
+	if (name == 'reason_deletion' || name == 'status_approve') {
+		const status = formData[name] as Code
+		const fixStatus = statusMap[status] ?? { label: formData[name] }
+		formData[name] = fixStatus.label
+	}
+	return (
+		<>
+			<div className="w-full mt-5">
+				<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+					<label className="form-label flex items-center gap-1 max-w-56">
+						{label}<span className="text-red-500">{required ? "*" : ""}</span>
+					</label>
+					<Input
+						className="input"
+						readOnly={disabled}
+						required={required}
+						type={type}
+						name={name}
+						value={formData[name] ? (type === 'date' ? generateDate(formData[name]) : formData[name]) : ""}
+						onChange={handleChange}
+					/>
+				</div>
+			</div>
+		</>
+	)
+}

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;

src/pages/transaction/disbursement-saldo/hooks/TransactionDisbursementContext.tsx

@@ -0,0 +1,81 @@
+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';
+import DetailDialog from '../blocks/DetailDialog';
+
+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 };

src/pages/transaction/disbursement-saldo/hooks/index.tsx

@@ -0,0 +1,2 @@
+export * from './TransactionDisbursementContext';
+export * from './useTransactionTopupContext';

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 };

src/pages/transaction/topup/TransactionTopup.tsx

@@ -0,0 +1,95 @@
+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);
+    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>
+                    <Input
+                      id="topupAmount"
+                      type="number"
+                      value={form.topupAmount}
+                      onChange={(e) => setForm({ ...form, topupAmount: e.target.value })}
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="pin">PIN</label>
+                    <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;

src/pages/transaction/topup/blocks/DetailDialog.tsx

@@ -0,0 +1,105 @@
+import {
+	Dialog,
+	DialogBody,
+	DialogContent,
+	DialogHeader,
+	DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useManageKycDeletionContext } from '../hooks';
+import { apiConfig } from '@/config/api.config';
+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}>
+			<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden max-h-[90vh] overflow-y-auto">
+				<DialogHeader>
+					<DialogTitle>Customer Deletion Details </DialogTitle>
+				</DialogHeader>
+				<DialogBody>
+					{/* Tab Content */}
+					{detailKyc && detailKyc != null ? (
+						<div className="flex flex-col">
+							{generateInput(detailKyc, null, 'Group', 'group_name', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Username', 'username', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Full Name', 'fullname', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Gender', 'customers_gender', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Date of Birth', 'birthdate', 'date', false, true)}
+							{generateInput(detailKyc, null, 'Mother Name', 'registered_mother_fullname', 'text', false, true)}
+							{generateInput(detailKyc, null, 'MSISDN', 'registered_msisdn', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Reason Deletion', 'reason_deletion', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Reason Note', 'reason_note', 'text', false, true)}
+							{generateInput(detailKyc, null, 'Status Approval', 'status_approve', 'text', false, true)}
+
+							<div className="flex justify-end gap-2 mt-3">
+								<Button type="button" variant="outline" onClick={() => setShowDetailDialog(false)}>Cancel</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>)}
+				</DialogBody>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default DetailDialog;
+
+function generateInput(formData: any, handleChange: any, label: string, name: string, type: string, required: boolean, disabled: boolean) {
+	function generateDate(isoString: string) {
+		return isoString.slice(0, 10); // "2000-01-18"
+	}
+
+	type Code = 'W' | 'Y' | 'N' | 'T' | 'P' | 'D' | 'L';
+	interface Reason {
+		label: string;
+	}
+
+	const statusMap: Record<Code, Reason> = {
+		W: { label: 'Waiting Approval' },
+		Y: { label: 'Approve' },
+		N: { label: 'Reject' },
+		T: { label: 'Tidak lagi menggunakan layanan' },
+		P: { label: 'Privasi dan keamanan' },
+		D: { label: 'Akun ganda' },
+		L: { label: 'Lainnya' }
+	};
+	if (name == 'reason_deletion' || name == 'status_approve') {
+		const status = formData[name] as Code
+		const fixStatus = statusMap[status] ?? { label: formData[name] }
+		formData[name] = fixStatus.label
+	}
+	return (
+		<>
+			<div className="w-full mt-5">
+				<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+					<label className="form-label flex items-center gap-1 max-w-56">
+						{label}<span className="text-red-500">{required ? "*" : ""}</span>
+					</label>
+					<Input
+						className="input"
+						readOnly={disabled}
+						required={required}
+						type={type}
+						name={name}
+						value={formData[name] ? (type === 'date' ? generateDate(formData[name]) : formData[name]) : ""}
+						onChange={handleChange}
+					/>
+				</div>
+			</div>
+		</>
+	)
+}

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;

src/pages/transaction/topup/hooks/TransactionTopupContext.tsx

@@ -0,0 +1,81 @@
+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';
+import DetailDialog from '../blocks/DetailDialog';
+
+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 };

src/pages/transaction/topup/hooks/index.tsx

@@ -0,0 +1,2 @@
+export * from './TransactionTopupContext';
+export * from './useTransactionTopupContext';

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 };

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 />} />