fix err

src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx

@@ -114,7 +114,7 @@ const DetailTransaction = () => {
                                                     <td className="px-4 py-2 text-sm text-gray-500">{log.customer.fullname ?? '-'}</td>
                                                     <td className="px-4 py-2 text-sm text-gray-500">{log.amount ?? '-'}</td>
                                                     <td className="px-4 py-2 text-sm text-gray-500">{renderStatusBadge(log.status) ?? '-'}</td>
-                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.request_date && moment(log.request_date).isValid() ? moment(log.request_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
+                                                    <td className="px-4 py-2 text-sm text-gray-500">{log.request_date && moment(log.request_date).isValid() ? moment(log.request_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
                                                     <td className="px-4 py-2 text-sm text-gray-500">{log.reference ?? '-'}</td>
                                                     <td className="px-4 py-2 text-sm text-gray-500">
                                                     <div key={`actions-${log.id}`}>

src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx

@@ -106,11 +106,11 @@ const TransactionLogViewer = () => {
 													</tr>
 													<tr className='border-t'>
 														<td className="px-4 py-2 text-sm text-gray-500">Prosess Date</td>
-														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.request_date && moment(detailLogData.request_date).isValid() ? moment(detailLogData.request_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.request_date && moment(detailLogData.request_date).isValid() ? moment(detailLogData.request_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
 													</tr>
 													<tr className='border-t'>
 														<td className="px-4 py-2 text-sm text-gray-500">Response Date</td>
-														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
+														<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
 													</tr>
 													<tr className='border-t'>
 														<td className="px-4 py-2 text-sm text-gray-500">Reference Number</td>

src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx

@@ -93,15 +93,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
-      // {
-      //   accessorKey: 'transaction_date',
-      //   header: ({ column }) => <DataGridColumnHeader title="Transaction Date" column={column} />,
-      //   enableSorting: false,
-      //   enableHiding: false,
-      //   meta: {
-      //     headerClassName: 'w-[250px]'
-      //   }
-      // },
       {
         accessorKey: 'file_name',
         header: ({ column }) => <DataGridColumnHeader title="File Name" column={column} />,
@@ -192,7 +183,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         header: ({ column }) => <DataGridColumnHeader title="Execution Date" column={column} />,
         enableSorting: true,
         enableHiding: false,
-        cell: ({ row }) => moment(row.original.execution_date).format('YYYY-MM-DD HH:mm:ss')
+        cell: ({ row }) => moment(row.original.execution_date).format('DD/MM/YYYY HH:mm:ss')
       },
       {
         accessorFn: (row) => row.done_date,
@@ -200,7 +191,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         header: ({ column }) => <DataGridColumnHeader title="Done Date" column={column} />,
         enableSorting: true,
         enableHiding: false,
-        cell: ({ row }) => row.original.done_date ? moment(row.original.done_date).format('YYYY-MM-DD HH:mm:ss') : ''
+        cell: ({ row }) => row.original.done_date ? moment(row.original.done_date).format('DD/MM/YYYY HH:mm:ss') : ''
       },
       {
         id: 'actions',

src/pages/members/kyc-delete-member/ManageKycDeletion.tsx

@@ -0,0 +1,37 @@
+import { Container, DataGridInner } from '@/components';
+import { ManageKycDeletionContextProvider } from './hooks/ManageKycDeletionContext';
+import { Breadcrumbs, Link } from '@mui/material';
+import { Helmet } from 'react-helmet';
+
+const ManageKycDeletion = () => {
+  return (
+    <>
+      <Helmet>
+        <title>TPAY | List Deletion</title>
+      </Helmet>
+      <ManageKycDeletionContextProvider>
+        <Container className="mb-7">
+          <h1 className="text-xl font-medium leading-none text-gray-900 mb-5">MANAGE KYC DELETION</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">Member</span>
+            </Link>
+
+            <Link underline="none" color="inherit">
+              <span className="text-sm">History Disbursement</span>
+            </Link>
+          </Breadcrumbs>
+          <div className="grid gap-5 lg:gap-7.5">
+            <DataGridInner />
+          </div>
+        </Container>
+      </ManageKycDeletionContextProvider>
+    </>
+  );
+};
+
+export default ManageKycDeletion;

src/pages/members/kyc-delete-member/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/members/kyc-delete-member/hooks/ManageKycDeletionContext.tsx

@@ -0,0 +1,252 @@
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { Toaster } from '@/components/ui/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 ManageKycDeletionProps {
+  id: string;
+  customers_id: string;
+  group_id: string;
+  username: string;
+  fullname: string;
+  email: string;
+  status: string;
+  created_at: Date;
+}
+
+interface ContextProps {
+  getKycDeletionList: (
+    limit: number,
+    page: number,
+    with_deleted: boolean,
+    order_field: any,
+    order_direction: any,
+    filter: any
+  ) => Promise<{ data: ManageKycDeletionProps[]; totalCount: number } | undefined>;
+  showDetailDialog: boolean;
+  handleDetailDialog: (show: boolean, selected_user: ManageKycDeletionProps | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  selectedUser: ManageKycDeletionProps | null;
+}
+
+const initialProps: ContextProps = {
+  getKycDeletionList: async () => ({ data: [], totalCount: 0 }),
+  showDetailDialog: false,
+  handleDetailDialog: () => {},
+  showAddDialog: false,
+  handleAddDialog: () => {},
+  selectedUser: null
+};
+
+const ManageKycDeletionContext = 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 ManageKycDeletionContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [selectedUser, setSelectedUser] = useState<ManageKycDeletionProps | null>(null);
+  const [manageKyc, setManageKyc] = useState<ManageKycDeletionProps[]>([]);
+  const { GetData } = useCallApi();
+
+  const getKycDeletionList = async (page: number, limit: number, sorting: any, filter: any) => {
+    try {
+      let startdate;
+      let enddate;
+      let formattedFilter;
+  
+      if (filter == undefined || filter.length == 0) {
+        const today = new Date();
+        const nextWeek = new Date();
+        nextWeek.setDate(today.getDate() + 7);
+  
+        startdate = today.toISOString().split('T')[0];
+        enddate = nextWeek.toISOString().split('T')[0];
+      } else if (filter != undefined || filter.length != 0) {
+        startdate = filter[0].value.from;
+        enddate = filter[0].value.to;
+      }
+  
+      formattedFilter = {
+        
+      };
+  
+      const response = await GetData(`${API_URL}/customer_deletion/list`, {
+        limit,
+        page: page + 1,
+        with_deleted: false,
+        order_field: "id",
+        order_direction: 'DESC',
+        filter: JSON.stringify(formattedFilter)
+      });
+  
+      setManageKyc(response?.data.list);
+      return { data: response?.data.list, totalCount: response?.data.total_count };
+    } catch (error) {
+      console.error('Error fetching transaction', error);
+    }
+  };
+
+  const handleDetailDialog = useCallback((show: boolean, selected_user: ManageKycDeletionProps | null) => {
+    setSelectedUser(show ? selected_user : null);
+    setShowDetailDialog(show);
+  }, []);
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorFn: (row) => row.id,
+        id: 'id',
+        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[100px]'
+        },
+      },
+      {
+        accessorFn: (row) => row.created_at,
+        id: 'created_at',
+        header: ({ column }) => <DataGridColumnHeader title="Created Date" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[250px]'
+        },
+        cell: ({ row }) => moment(row.original.created_at).format('DD/MM/YYYY HH:mm:ss')
+      },
+      {
+        accessorFn: (row) => row.username,
+        id: 'username',
+        header: ({ column }) => <DataGridColumnHeader title="Username" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.fullname,
+        id: 'fullname',
+        header: ({ column }) => <DataGridColumnHeader title="Fullname" column={column} />,
+        enableSorting: true,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.registered_email,
+        id: 'email',
+        header: ({ column }) => <DataGridColumnHeader title="Email" column={column} />,
+        enableSorting: true,
+        meta: {
+          headerClassName: 'w-[350px]'
+        }
+      },
+      {
+        accessorFn: (row) => row.status_approve,
+        id: 'status_approve',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: true,
+        meta: {
+          headerClassName: 'w-[350px]'
+        },
+        cell: ({row}) => renderStatusBadge(row.original.status_approve)
+      },
+      {
+        id: 'actions',
+        enableSorting: false,
+        header: ({ column }) => <DataGridColumnHeader title="Action" column={column} />,
+        cell: (data: any) => {
+          const row = data.row.original;
+
+          return (
+            <>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDetailDialog(true, row.id)}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+            </>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    [handleDetailDialog]
+  );
+
+  return (
+    <ManageKycDeletionContext.Provider
+      value={{
+        getKycDeletionList,
+        showDetailDialog,
+        handleDetailDialog,
+        showAddDialog,
+        handleAddDialog,
+        selectedUser
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+
+      <DataGridProvider
+        columns={columns}
+        pagination={{ size: 10 }}
+        toolbar={<ListToolbar />}
+        layout={{ card: true }}
+        sorting={[{ id: 'name', desc: false }]}
+        serverSide={true}
+        onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+          getKycDeletionList(pageIndex, pageSize, sorting, columnFilters)
+        }
+      >
+        {children}
+      </DataGridProvider>
+    </ManageKycDeletionContext.Provider>
+  );
+};
+
+export { ManageKycDeletionContextProvider, ManageKycDeletionContext };
+export type { ManageKycDeletionProps };

src/pages/members/kyc-delete-member/hooks/index.tsx

@@ -0,0 +1,2 @@
+export * from './ManageKycDeletionContext';
+export * from './useManageKycDeletionContext';

src/pages/members/kyc-delete-member/hooks/useManageKycDeletionContext.tsx

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

src/pages/transfer/transferfee/blocks/AddDialog.tsx

@@ -86,7 +86,7 @@ const AddFeeDialog = () => {
   const [isLoadingCustomers, setIsLoadingCustomers] = useState(false);
   const customersWithNames = customers.map((customer) => ({
     id: customer.id,
-    name: customer.username,
+    name: customer.username
   }));
   const initialState = {
     name: '',
@@ -126,14 +126,17 @@ const AddFeeDialog = () => {
     if (showAddFeeDialog && transactionTypeId) {
       setIsLoadingTransactionType(true);
 
-      setFormField(prev => ({
+      setFormField((prev) => ({
         ...prev,
         transaction_type: transactionTypeId
       }));
 
       const getTransactionTypeDetails = async () => {
         try {
-          const response = await GetData(`${API_URL}/transactiontype/getdata/${transactionTypeId}`, {});
+          const response = await GetData(
+            `${API_URL}/transactiontype/getdata/${transactionTypeId}`,
+            {}
+          );
           if (response?.status && response?.data) {
             setTransactionTypeName(response.data.name);
           }
@@ -153,7 +156,7 @@ const AddFeeDialog = () => {
     const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
     if (showAddFeeDialog) {
-      setFormField(prev => ({
+      setFormField((prev) => ({
         ...prev,
         created_by: parsedUser?.username,
         created_at: formattedTime
@@ -193,7 +196,7 @@ const AddFeeDialog = () => {
       page: 1,
       with_deleted: false,
       order_field: 'Wallets.name',
-      order_direction: 'ASC',
+      order_direction: 'ASC'
     };
     try {
       const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, params);
@@ -325,16 +328,12 @@ const AddFeeDialog = () => {
   const renderSelectWithLoading = (
     value: string,
     onChangeHandler: (value: string) => void,
-    options: {id: string, name: string}[] | null,
+    options: { id: string; name: string }[] | null,
     placeholder: string,
     isLoading: boolean
   ) => {
     return (
-      <Select
+      <Select value={value} onValueChange={onChangeHandler} disabled={isLoading}>
-        value={value}
-        onValueChange={onChangeHandler}
-        disabled={isLoading}
-      >
         <SelectTrigger>
           {isLoading ? (
             <div className="flex items-center">
@@ -346,7 +345,8 @@ const AddFeeDialog = () => {
           )}
         </SelectTrigger>
         <SelectContent>
-          {options && options.map((option) => (
+          {options &&
+            options.map((option) => (
               <SelectItem value={option.id} key={option.id}>
                 {option.name}
               </SelectItem>
@@ -389,7 +389,9 @@ const AddFeeDialog = () => {
             <div className="card flex flex-col gap-5">
               <div className="card-body grid gap-5 p-0">
                 <div className="w-full">
-                  <label className="form-label">Transaction Type ID <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Transaction Type ID <span className="text-red-500">*</span>
+                  </label>
                   {transactionTypeId ? (
                     <div className="relative">
                       <Input
@@ -412,13 +414,15 @@ const AddFeeDialog = () => {
                       formField.transaction_type,
                       (transaction_type) => setFormField((prev) => ({ ...prev, transaction_type })),
                       transactionTypes,
-                      "Select Transaction Type",
+                      'Select Transaction Type',
                       isLoadingTransactionType
                     )
                   )}
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Transfer Free Name <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Transfer Free Name <span className="text-red-500">*</span>
+                  </label>
                   <Input
                     className="input"
                     type="text"
@@ -430,7 +434,9 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Description <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Description <span className="text-red-500">*</span>
+                  </label>
                   <Input
                     className="input"
                     type="text"
@@ -476,7 +482,9 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Period Start <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Period Start <span className="text-red-500">*</span>
+                  </label>
                   <Input
                     className="input"
                     type="date"
@@ -488,7 +496,9 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Period End <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Period End <span className="text-red-500">*</span>
+                  </label>
                   <Input
                     className="input"
                     type="date"
@@ -551,7 +561,9 @@ const AddFeeDialog = () => {
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Deduct From <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Deduct From <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.deduct_from}
                     onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
@@ -566,24 +578,31 @@ const AddFeeDialog = () => {
                   </Select>
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Deduct From Destination <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Deduct From Destination <span className="text-red-500">*</span>
+                  </label>
                   {renderSelectWithLoading(
                     formField.deduct_from_account,
                     (value) => setFormField({ ...formField, deduct_from_account: value }),
                     wallets,
-                    "Select Wallet",
+                    'Select Wallet',
                     isLoadingWallets
                   )}
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Credit To <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Credit To <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.credit_to}
-                    onValueChange={(value) => setFormField({ 
+                    onValueChange={(value) =>
+                      setFormField({
                         ...formField,
                         credit_to: value,
-                      credit_destination: value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
+                        credit_destination:
-                    })}
+                          value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
+                      })
+                    }
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select Credit To" />
@@ -597,28 +616,34 @@ const AddFeeDialog = () => {
                 </div>
                 {formField.credit_to === 'I' && (
                   <div className="w-full">
-                    <label className="form-label">Credit Destination <span className="text-red-500">*</span></label>
+                    <label className="form-label">
+                      Credit Destination <span className="text-red-500">*</span>
+                    </label>
                     {renderSelectWithLoading(
                       formField.credit_destination,
                       (value) => setFormField({ ...formField, credit_destination: value }),
                       customersWithNames,
-  "Select Customer",
+                      'Select Customer',
                       isLoadingCustomers
                     )}
                   </div>
                 )}
                 <div className="w-full">
-                  <label className="form-label">Credit Destination Account <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Credit Destination Account <span className="text-red-500">*</span>
+                  </label>
                   {renderSelectWithLoading(
                     formField.credit_destination_account,
                     (value) => setFormField({ ...formField, credit_destination_account: value }),
                     wallets,
-                    "Select Wallet",
+                    'Select Wallet',
                     isLoadingWallets
                   )}
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Status <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Status <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.status}
                     onValueChange={(value) => setFormField({ ...formField, status: value })}
@@ -633,7 +658,9 @@ const AddFeeDialog = () => {
                   </Select>
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Status Include <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Status Include <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.status_include}
                     onValueChange={(value) => setFormField({ ...formField, status_include: value })}
@@ -648,7 +675,9 @@ const AddFeeDialog = () => {
                   </Select>
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Priority <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Priority <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.priority}
                     onValueChange={(value) => setFormField({ ...formField, priority: value })}
@@ -675,7 +704,12 @@ const AddFeeDialog = () => {
                   <Button
                     variant={'default'}
                     type="submit"
-                    disabled={isSubmitting || isLoadingTransactionType || isLoadingWallets || isLoadingCustomers}
+                    disabled={
+                      isSubmitting ||
+                      isLoadingTransactionType ||
+                      isLoadingWallets ||
+                      isLoadingCustomers
+                    }
                   >
                     {isSubmitting ? 'Saving...' : 'Save Changes'}
                   </Button>

src/pages/transfer/transferfee/blocks/DeleteDialog.tsx

@@ -1,4 +1,11 @@
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle , DialogDescription} from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Alert, useDataGrid } from '@/components';
 import { useCallback, useState } from 'react';
@@ -10,7 +17,8 @@ import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContex
 const API_URL = apiConfig.service_transaction;
 
 const DeleteFeeDialog = () => {
-  const { showDeleteFeeDialog, handleDeleteFeeDialog, selectedTransferFee } = useManageTransferFeeContext();
+  const { showDeleteFeeDialog, handleDeleteFeeDialog, selectedTransferFee } =
+    useManageTransferFeeContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
   const [alert, setAlert] = useState({
@@ -19,9 +27,12 @@ const DeleteFeeDialog = () => {
   });
 
   const doDeleteTransferFee = useCallback(async () => {
-    const response = await DeleteData(`${API_URL}/transactionfees/delete/${selectedTransferFee}/false`, {
+    const response = await DeleteData(
+      `${API_URL}/transactionfees/delete/${selectedTransferFee}/false`,
+      {
         id: selectedTransferFee
-    });
+      }
+    );
 
     if (response?.status) {
       setAlert({ show: false, message: '' });
@@ -39,7 +50,9 @@ const DeleteFeeDialog = () => {
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-0 border-0 block">
           <DialogTitle className="text-lg">Delete Transfer Type</DialogTitle>
-          <DialogDescription className="text-sm">Are you sure you want to delete this data?</DialogDescription>
+          <DialogDescription className="text-sm">
+            Are you sure you want to delete this data?
+          </DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
             <span className="text-sm">You will delete this data!</span>
@@ -64,4 +77,3 @@ const DeleteFeeDialog = () => {
 };
 
 export default DeleteFeeDialog;
-

src/pages/transfer/transferfee/blocks/EditDialog.tsx

@@ -8,7 +8,14 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
 import {
   Dialog,
   DialogBody,
@@ -96,7 +103,7 @@ const EditFeeDialog = () => {
     const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
 
     if (showEditFeeDialog) {
-      setFormField(prevState => ({
+      setFormField((prevState) => ({
         ...prevState,
         updated_by: parsedUser?.username,
         updated_at: formattedTime
@@ -161,7 +168,10 @@ const EditFeeDialog = () => {
       }
 
       try {
-        const response = await PutData(`${API_URL}/transactionfees/update/${selectedTransferFee}`, payload);
+        const response = await PutData(
+          `${API_URL}/transactionfees/update/${selectedTransferFee}`,
+          payload
+        );
 
         if (response?.status) {
           toast.success('Successfully updated transfer fee');
@@ -191,7 +201,7 @@ const EditFeeDialog = () => {
       page: 1,
       with_deleted: false,
       order_field: 'Wallets.name',
-      order_direction: 'ASC',
+      order_direction: 'ASC'
     };
     try {
       const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, params);
@@ -260,13 +270,12 @@ const EditFeeDialog = () => {
     return dateString.split('T')[0];
   };
 
-  const fetchTransactionFee = useCallback(async (id: string) => {
+  const fetchTransactionFee = useCallback(
+    async (id: string) => {
       try {
         const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, {});
 
         if (response?.status) {
-
-  
           setFormField({
             ...initialState,
             name: response.data.name || '',
@@ -285,7 +294,8 @@ const EditFeeDialog = () => {
             deduct_from: response.data.deduct_from || '',
             deduct_from_account: response.data.deduct_from_account?.id || '',
             credit_to: response.data.credit_to || '',
-          credit_destination: response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
+            credit_destination:
+              response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
             credit_destination_account: response.data.credit_destination_account?.id || '',
             updated_by: parsedUser?.username,
             updated_at: new Date().toISOString().slice(0, 19).replace('T', ' ')
@@ -295,7 +305,9 @@ const EditFeeDialog = () => {
         console.error('Error fetching transaction fee details', error);
         setAlert({ show: true, message: 'Failed to fetch transaction fee details' });
       }
-  }, [GetData, parsedUser?.username]);
+    },
+    [GetData, parsedUser?.username]
+  );
 
   const hasFetchedRef = useRef(false);
 
@@ -317,11 +329,14 @@ const EditFeeDialog = () => {
   };
 
   return (
-    <Dialog open={showEditFeeDialog} onOpenChange={(open) => {
+    <Dialog
+      open={showEditFeeDialog}
+      onOpenChange={(open) => {
         if (!open) {
           handleCloseDialog();
         }
-    }}>
+      }}
+    >
       <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogTitle></DialogTitle>
         <DialogDescription></DialogDescription>
@@ -353,7 +368,9 @@ const EditFeeDialog = () => {
             <div className="card flex flex-col gap-5">
               <div className="card-body grid gap-5 p-0">
                 <div className="w-full">
-                  <label className="form-label">Transfer Fee Name <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Transfer Fee Name <span className="text-red-500">*</span>
+                  </label>
                   <Input
                     className="input"
                     type="text"
@@ -366,7 +383,9 @@ const EditFeeDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <label className="form-label">Description <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Description <span className="text-red-500">*</span>
+                  </label>
                   <Input
                     className="input"
                     type="text"
@@ -415,7 +434,9 @@ const EditFeeDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <label className="form-label">Period Start <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Period Start <span className="text-red-500">*</span>
+                  </label>
                   <Input
                     className="input"
                     type="date"
@@ -428,7 +449,9 @@ const EditFeeDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <label className="form-label">Period End <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Period End <span className="text-red-500">*</span>
+                  </label>
                   <Input
                     className="input"
                     type="date"
@@ -495,7 +518,9 @@ const EditFeeDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <label className="form-label">Deduct From <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Deduct From <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.deduct_from}
                     onValueChange={(value) => setFormField({ ...formField, deduct_from: value })}
@@ -511,10 +536,14 @@ const EditFeeDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <label className="form-label">Deduct From Destination <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Deduct From Destination <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.deduct_from_account}
-                    onValueChange={(value) => setFormField({ ...formField, deduct_from_account: value })}
+                    onValueChange={(value) =>
+                      setFormField({ ...formField, deduct_from_account: value })
+                    }
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select Wallet" />
@@ -530,14 +559,19 @@ const EditFeeDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <label className="form-label">Credit To <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Credit To <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.credit_to}
-                    onValueChange={(value) => setFormField({ 
+                    onValueChange={(value) =>
+                      setFormField({
                         ...formField,
                         credit_to: value,
-                      credit_destination: value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
+                        credit_destination:
-                    })}
+                          value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
+                      })
+                    }
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select Credit To" />
@@ -552,10 +586,14 @@ const EditFeeDialog = () => {
 
                 {formField.credit_to === 'I' && (
                   <div className="w-full">
-                    <label className="form-label">Credit Destination <span className="text-red-500">*</span></label>
+                    <label className="form-label">
+                      Credit Destination <span className="text-red-500">*</span>
+                    </label>
                     <Select
                       value={formField.credit_destination}
-                      onValueChange={(value) => setFormField({ ...formField, credit_destination: value })}
+                      onValueChange={(value) =>
+                        setFormField({ ...formField, credit_destination: value })
+                      }
                     >
                       <SelectTrigger>
                         <SelectValue placeholder="Select Customer" />
@@ -572,10 +610,14 @@ const EditFeeDialog = () => {
                 )}
 
                 <div className="w-full">
-                  <label className="form-label">Credit Destination Account <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Credit Destination Account <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.credit_destination_account}
-                    onValueChange={(value) => setFormField({ ...formField, credit_destination_account: value })}
+                    onValueChange={(value) =>
+                      setFormField({ ...formField, credit_destination_account: value })
+                    }
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select Wallet" />
@@ -591,7 +633,9 @@ const EditFeeDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <label className="form-label">Transaction Type ID <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Transaction Type ID <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.transaction_type}
                     onValueChange={(transaction_type) =>
@@ -612,7 +656,9 @@ const EditFeeDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <label className="form-label">Status <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Status <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.status}
                     onValueChange={(value) => setFormField({ ...formField, status: value })}
@@ -628,7 +674,9 @@ const EditFeeDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <label className="form-label">Status Include <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Status Include <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.status_include}
                     onValueChange={(value) => setFormField({ ...formField, status_include: value })}
@@ -644,7 +692,9 @@ const EditFeeDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <label className="form-label">Priority <span className="text-red-500">*</span></label>
+                  <label className="form-label">
+                    Priority <span className="text-red-500">*</span>
+                  </label>
                   <Select
                     value={formField.priority}
                     onValueChange={(value) => setFormField({ ...formField, priority: value })}

src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx

@@ -18,7 +18,6 @@
   showDeleteFeeDialog: boolean;
   selectedTransferFee: string | null;
   transactionTypeId: string | null;
-
 }
 
 const initialProps: ContextProps = {
@@ -29,8 +28,7 @@
   showDeleteFeeDialog: false,
   handleDeleteFeeDialog: () => {},
   selectedTransferFee: null,
-    transactionTypeId: null,
+  transactionTypeId: null
-
 };
 
 interface TransferFeeProps {
@@ -51,7 +49,13 @@
 const ManageTransferFeeContext = createContext<ContextProps>(initialProps);
 const API_URL = apiConfig.service_transaction;
 
-  const ManageTransferFeeContextProvider = ({ children, transactionTypeId = null }: { children: React.ReactNode; transactionTypeId?: string | null }) => {
+const ManageTransferFeeContextProvider = ({
+  children,
+  transactionTypeId = null
+}: {
+  children: React.ReactNode;
+  transactionTypeId?: string | null;
+}) => {
   const [showEditFeeDialog, setShowEditFeeDialog] = useState(false);
   const [showAddFeeDialog, setShowAddFeeDialog] = useState(false);
   const [showDeleteFeeDialog, setShowDeleteFeeDialog] = useState(false);
@@ -67,10 +71,13 @@
     setShowAddFeeDialog(show);
   }, []);
 
-    const handleDeleteFeeDialog = useCallback((show: boolean, selected_TransferFee: string | null) => {
+  const handleDeleteFeeDialog = useCallback(
+    (show: boolean, selected_TransferFee: string | null) => {
       setSelectedTransferFee(show ? selected_TransferFee : null);
       setShowDeleteFeeDialog(show);
-    }, []);
+    },
+    []
+  );
   const doGetTransferFeeListData = async (
     page: number,
     limit: number,
@@ -85,7 +92,10 @@
     filter = filter.length === 0 ? {} : { any: filter[0].value.toLowerCase() };
 
     try {
-        const response = await GetData(`${API_URL}/transactionfees/getdatabytransactiontype/${selectedTransferType}`, {});
+      const response = await GetData(
+        `${API_URL}/transactionfees/getdatabytransactiontype/${selectedTransferType}`,
+        {}
+      );
 
       // console.log('API Response:', response?.data);
 
@@ -94,7 +104,7 @@
         totalCount: 1
       };
     } catch (error) {
-        console.error("Error fetching transaction fees by transaction type:", error);
+      console.error('Error fetching transaction fees by transaction type:', error);
       return { data: [], totalCount: 0 };
     }
   };
@@ -193,9 +203,7 @@
           return mapping[row.credit_to] || 'Unknown';
         },
         id: 'credit_to',
-          header: ({ column }) => (
+        header: ({ column }) => <DataGridColumnHeader title="Credit To" column={column} />,
-            <DataGridColumnHeader title="Credit To" column={column} />
-          ),
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -216,7 +224,9 @@
       {
         accessorFn: (row) => row.credit_destination_account?.description,
         id: 'credit_destination_account',
-          header: ({ column }) => <DataGridColumnHeader title="Credit Destination Account" column={column} />,
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Credit Destination Account" column={column} />
+        ),
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -225,15 +235,13 @@
         accessorFn: (row: { deduct_from: string }) => {
           const mapping: Record<string, string> = {
             D: 'Destination Member',
-              S: 'Source Member',
+            S: 'Source Member'
           };
 
           return mapping[row.deduct_from];
         },
         id: 'deduct_from',
-          header: ({ column }) => (
+        header: ({ column }) => <DataGridColumnHeader title="Deduct From" column={column} />,
-            <DataGridColumnHeader title="Deduct From" column={column} />
-          ),
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -241,7 +249,9 @@
       {
         accessorFn: (row) => row.deduct_from_account?.description,
         id: 'deduct_from_account',
-          header: ({ column }) => <DataGridColumnHeader title="Deduct From Account" column={column} />,
+        header: ({ column }) => (
+          <DataGridColumnHeader title="Deduct From Account" column={column} />
+        ),
         enableSorting: true,
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
@@ -381,7 +391,6 @@
           }
         >
           {children}
-
         </DataGridProvider>
       </ManageTransferFeeContext.Provider>
     </div>

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

@@ -76,7 +76,6 @@ const AddDialog = () => {
     wallet_origin: '',
     wallet_destination: '',
 
-
     minimum_amount: 0,
     maximum_amount: 0,
     max_transaction_per_day: 0,
@@ -222,7 +221,7 @@ const AddDialog = () => {
       page: 1,
       with_deleted: false,
       order_field: 'wallets.name',
-      order_direction: 'ASC',
+      order_direction: 'ASC'
     };
     const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
     // console.log(response)
@@ -439,7 +438,6 @@ const AddDialog = () => {
                   </div>
                 </div>
 
-
                 <div className="w-full">
                   <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">

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

@@ -1,4 +1,10 @@
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Alert, useDataGrid } from '@/components';
 import { useCallback, useState } from 'react';
@@ -12,7 +18,8 @@ import { doSaveLogActivity } from '@/actions/GlobalActions';
 const API_URL = apiConfig.service_transaction;
 
 const DeleteDialog = () => {
-  const { showDeleteDialog, handleDeleteDialog, selectedTransferType } = useManageTransferTypeContext();
+  const { showDeleteDialog, handleDeleteDialog, selectedTransferType } =
+    useManageTransferTypeContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
   const [alert, setAlert] = useState({
@@ -26,9 +33,12 @@ const DeleteDialog = () => {
       return;
     }
 
-    const response = await DeleteData(`${API_URL}/transactiontype/delete/${selectedTransferType}/false`, {
+    const response = await DeleteData(
+      `${API_URL}/transactiontype/delete/${selectedTransferType}/false`,
+      {
         id: selectedTransferType
-    });
+      }
+    );
 
     if (response?.status) {
       setAlert({ show: false, message: '' });
@@ -51,7 +61,9 @@ const DeleteDialog = () => {
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-0 border-0 block">
           <DialogTitle className="text-lg">Delete Transfer Type</DialogTitle>
-          <DialogDescription className="text-sm">Are you sure you want to delete this data?</DialogDescription>
+          <DialogDescription className="text-sm">
+            Are you sure you want to delete this data?
+          </DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
             <span className="text-sm">You will delete this data!</span>

src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx

@@ -159,7 +159,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             AD: 'Return Agent Deposit',
             AM: 'Return Agent Merchant',
             AE: 'Return Agent Emoney',
-            R: 'Reward Point',
+            R: 'Reward Point'
           };
 
           return mapping[row.type] || 'Unknown';
@@ -224,7 +224,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
     sorting: any,
     filter: any
   ) => {
-
     const orderField = 'created_at';
 
     const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';

src/routing/AppRoutingSetup.tsx

@@ -15,6 +15,7 @@ import ManagePositionPage from '@/pages/settings/user/manage-position/ManagePosi
 import ManageAccount from '@/pages/account/manage-account/ManageAccount';
 import ManageGroups from '@/pages/groups/ManageGroups';
 import ManageMembers from '@/pages/members/manage-members/ManageMembers';
+import ManageKycDeletion from '@/pages/members/kyc-delete-member/ManageKycDeletion';
 import Kyc from '@/pages/members/kyc/Kyc';
 import AccessType from '@/pages/access/access-type/AccessType';
 import MemberCredential from '@/pages/access/member-credentials/MemberCredentials';
@@ -79,6 +80,7 @@ const AppRoutingSetup = (): ReactElement => {
 
           <Route path="/members/kyc" element={<Kyc />} />
           <Route path="/members/member-management" element={<ManageMembers />} />
+          <Route path="/members/kyc-delete-member" element={<ManageKycDeletion />} />
           <Route path="/members/create-member-credential" element={<MemberCredential />} />
 
           <Route path="/access/access-type-management" element={<AccessType />} />