Merge branch 'master' of https://git.shiblysolution.id/TPAY/dashboard

src/pages/account/manage-account/ManageAccount.tsx

@@ -93,6 +93,7 @@ const ManageAccount = () => {
         <DataTable
           columns={columns}
           data={dataAccount}
+          createData={null}
           onUpdate={() => console.log('Callback update')}
           onDelete={() => console.log('Callback delete')}
         />

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

@@ -45,7 +45,7 @@ export const renderStatusBadge = (statusRaw: string | null | undefined) => {
 			{label}
 		</span>
 	);
-  };
+};
 
 const DetailTransaction = () => {
     const { GetData } = useCallApi();
@@ -61,7 +61,6 @@ const DetailTransaction = () => {
 
     useEffect(() => {
         const fetchTransactionDetails = async () => {
-            console.log(selectedTransactionId)
             if (selectedTransactionId) {
                 try {
                     const response = await GetData(`${API_URL}/transaction/history/${selectedTransactionId}`, {
@@ -114,7 +113,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

@@ -54,10 +54,6 @@ const TransactionLogViewer = () => {
 		detailLogData
 	} = useTransactionContext();
 
-	console.log('detailLogData: ', detailLogData)
-
-	
-
   return (
     <Dialog open={showDetailLogDialog} onOpenChange={setShowDetailLogDialog}>
         <DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden">
@@ -106,11 +102,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/groups/ManageGroups.tsx

@@ -89,6 +89,10 @@ const ManageGroups = () => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!formData.groupName) return toast.warning(`Group name can not be empty!`)
+    if (!formData.status) return toast.warning(`Status can not be empty!`)
+    if (!formData.description) return toast.warning(`Description can not be empty!`)
+    setIsDialogOpen(false);
     setDialogOpen(true);
   };
 
@@ -198,7 +202,7 @@ const ManageGroups = () => {
       <Dialog open={isDialogOpen} onClose={closeDialog}>
         <DialogContent className="w-full">
           <div className="flex justify-between">
-            <DialogTitle>Create New Group</DialogTitle>
+            <DialogTitle>{dialogType==='create'?"Create New Group":"Update Group"}</DialogTitle>
             <Box display="flex" justifyContent="flex-end">
               <Button
                 variant="outlined"

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/DetailDialog.tsx

@@ -0,0 +1,98 @@
+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 axios from 'axios';
+
+const API_URL = apiConfig.service_customer;
+const DetailDialog = () => {
+	const { showDetailDialog, setShowDetailDialog, detailKyc, handleApproveReject } = useManageKycDeletionContext();
+
+	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={() => handleApproveReject(detailKyc.id, 'N')} variant="destructive" color="warning">Reject</Button>
+								<Button onClick={() => handleApproveReject(detailKyc.id, 'Y')} 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/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,294 @@
+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 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;
+  setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  handleDetailDialog: (show: boolean, selected_user: string | null) => void;
+  showAddDialog: boolean;
+  handleAddDialog: (show: boolean) => void;
+  selectedIdCustomer: string | null;
+  detailKyc: any | null;
+  setDetailKyc: React.Dispatch<React.SetStateAction<any>>;
+  handleApproveReject: (customerDeletionId: string, status_approve: string) => {};
+}
+
+const initialProps: ContextProps = {
+  getKycDeletionList: async () => ({ data: [], totalCount: 0 }),
+  showDetailDialog: false,
+  handleDetailDialog: () => {},
+  showAddDialog: false,
+  handleAddDialog: () => {},
+  selectedIdCustomer: null,
+  setShowDetailDialog: () => { },
+  detailKyc: async () => {},
+  setDetailKyc: () => { },
+  handleApproveReject: () => ({customerDeletionId: '0', status_approve: 'Y'}),
+};
+
+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 { reload } = useDataGrid();
+
+const ManageKycDeletionContextProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [selectedIdCustomer, setSelectedIdCustomer] = useState<string | null>(null);
+  const [detailKyc, setDetailKyc] = useState<any>();
+  const [manageKyc, setManageKyc] = useState<ManageKycDeletionProps[]>([]);
+  const { GetData, PostData } = 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(async (show: boolean, selected_id_customer: string | null) => {
+    if (show == true) {
+      setSelectedIdCustomer(show ? selected_id_customer : null);
+      let detailCustomer = await GetData(`${API_URL}/customer_deletion/detail/${selected_id_customer}`, {})
+      setDetailKyc(detailCustomer?.data)
+    }
+    setShowDetailDialog(show);
+  }, []);
+
+  const handleAddDialog = useCallback((show: boolean) => {
+    setShowAddDialog(show);
+  }, []);
+
+  const handleApproveReject = useCallback(async (customerDeletionId: string, status_approve: string) => {
+    console.log(customerDeletionId, status_approve)
+    try {
+      let approveReject = await PostData(`${API_URL}/customer_deletion/update_status/${customerDeletionId}`, {
+        status_approve
+      })
+
+      if (approveReject?.status == true) {
+        toast.success('Success update status approval')
+        handleDetailDialog(false, null)
+      } else {
+        toast.warning(`${approveReject?.message}`)
+        handleDetailDialog(false, null)
+      }
+    } catch (error) {
+      toast.warning('Failed to approve/reject')
+      handleDetailDialog(false, null)
+    }
+  }, [])
+
+  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,
+        selectedIdCustomer,
+        setShowDetailDialog,
+        setDetailKyc,
+        detailKyc,
+        handleApproveReject,
+      }}
+    >
+      <Toaster expand visibleToasts={9} duration={3000} />
+      <DetailDialog />
+
+      <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/members/kyc/Kyc.tsx

@@ -135,7 +135,6 @@ const Kyc = () => {
     delete updateData.suco_name;
     delete updateData.aldeia_id;
     delete updateData.aldeia_name;
-    delete updateData.group_id;
     delete updateData.group_name;
     delete updateData.group_description;
     delete updateData.group_status;
@@ -160,15 +159,16 @@ const Kyc = () => {
         if (updateData.isneedapproval == 1&&destinationGroup === "Premium") await axios.post(`${BASE_URL}/customer/approve`, { customerid: customerId, description: updateData.approval_description_premium});
         if (updateData.isneedapproval == 1&&destinationGroup === "Agent") await axios.post(`${BASE_URL}/customer/approve`, { customerid: customerId, description: updateData.approval_description_agent});
       }
-      await fetchCustomers();
       setDialogOpen(false);
       setIsDialogOpen(false);
       toast.success(`Success Update & ${dialogType} Kyc Member`);
     } catch (error: any) {
+      if (error?.response?.data?.error) error.message = error?.response?.data?.error
       setDialogOpen(false);
       setIsDialogOpen(false);
       toast.error(error.message);
     } finally {
+      await fetchCustomers();
       setLoading(false)
     }
   };

src/pages/members/manage-members/Columns.tsx

@@ -180,5 +180,6 @@ export const initialMember = {
   aldeia: '',
   profession: '',
   approval_description_premium: '',
-  approval_description_agent: ''
+  approval_description_agent: '',
+  group_id: ''
 };

src/pages/members/manage-members/ManageMembers.tsx

@@ -120,7 +120,6 @@ const ManageMembers = () => {
     delete updateData.suco_name;
     delete updateData.aldeia_id;
     delete updateData.aldeia_name;
-    delete updateData.group_id;
     delete updateData.group_name;
     delete updateData.group_description;
     delete updateData.group_status;

src/pages/members/manage-members/blocks/AdmAccess.tsx

@@ -21,33 +21,33 @@ import ConfirmDialog from '@/components/confirm';
 const BASE_URL_CUSTOMER = apiConfig.service_customer;
 
 // ACCESS ADM
-export default function AdmAccess({page,formData,handleClose,fetchCustomers,viewOnly,setViewOnly}: any) {
+export default function AdmAccess({page,groups,formData,handleClose,fetchCustomers,viewOnly,setViewOnly}: any) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
   const [changeGroup, setChangeGroup] = useState('');
   const [changeGroupD, setChangeGroupD] = useState(false);
-  const [groups, setGroups] = useState([]);
+  // const [groups, setGroups] = useState([]);
 
   useEffect(() => {
-    fetchGroups();
+    // fetchGroups();
   }, []);
 
-  const fetchGroups = async () => {
+  // const fetchGroups = async () => {
-    try {
+  //   try {
-      let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
+  //     let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
-        params: {
+  //       params: {
-          limit: 50,
+  //         limit: 50,
-          page: 1,
+  //         page: 1,
-          with_deleted: false,
+  //         with_deleted: false,
-          order_field: 'name',
+  //         order_field: 'name',
-          order_direction: 'ASC'
+  //         order_direction: 'ASC'
-        }
+  //       }
-      });
+  //     });
-      setGroups(getGroups.data.data.list);
+  //     setGroups(getGroups.data.data.list);
-    } catch (error: any) {
+  //   } catch (error: any) {
-      toast.error(error.message);
+  //     toast.error(error.message);
-    }
+  //   }
-  };
+  // };
 
   const handleYes = async () => {
     try {
@@ -119,6 +119,7 @@ export default function AdmAccess({page,formData,handleClose,fetchCustomers,view
   function btnConfirmDialog(status: boolean) {
     setDialogOpen(status);
   }
+  
   if (!formData.id) return '';
   if (page !== 'kyc') {
     return (

src/pages/members/manage-members/blocks/DetailMember.tsx

@@ -24,6 +24,7 @@ import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 const URL_NATIONALITY = apiConfig.nationality;
+const BASE_URL_CUSTOMER = apiConfig.service_customer;
 import { initialMember } from "../Columns";
 import AdmAccess from './AdmAccess';
 import CustomerWallet from './CustomerWallet';
@@ -38,10 +39,8 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
     const [aldeias, setAldeias] = useState([]);
     const [postoAdm, setPostoAdm] = useState([]);
     const [sucos, setSucos] = useState<any>([]);
+    const [groups, setGroups] = useState([]);
     const [genders] = useState([ { name: 'Male',id: 'M' }, { name: 'Female',id: 'F' }])
-    const [status] = useState([
-        { name: 'Active',id: 'Y' }, { name: 'Inactive',id: 'N' }, { name: 'Suspend PIN',id: 'P' }, { name: 'Suspend OTP',id: 'O' }
-    ])
     const [banks] = useState([
         { name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' }
     ])
@@ -53,7 +52,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
 
     useEffect(() => {
         setFormData(initialData || {});
-        // fetchMasterData()
+        fetchMasterData()
     }, [initialData]);
 
     const handleChange = async (e: any) => {
@@ -121,48 +120,59 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
     
     async function fetchMasterData() {
         try {
-            let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
+            let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
                 params: {
                   limit: 50,
                   page: 1,
                   with_deleted: false,
                   order_field: 'name',
-                order_direction: 'ASC',
+                  order_direction: 'ASC'
                 }
             });
-            setMunicipios(getMunicipios.data.data.list)
+            setGroups(getGroups.data.data.list);
-            let getPostoAdms = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/list`, {
+            // let getMunicipios = await axios.get(`${BASE_URL_MASTER_DATA}/municipios/list`, {
-            params: {
+            // params: {
-                limit: 50,
+            //     limit: 50,
-                page: 1,
+            //     page: 1,
-                with_deleted: false,
+            //     with_deleted: false,
-                order_field: 'name',
+            //     order_field: 'name',
-                order_direction: 'ASC',
+            //     order_direction: 'ASC',
-            }
+            // }
-            });
+            // });
-            setPostoAdm(getPostoAdms.data.data.list)
+            // setMunicipios(getMunicipios.data.data.list)
-            let getSucos = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/list`, {
+            // let getPostoAdms = await axios.get(`${BASE_URL_MASTER_DATA}/postoadms/list`, {
-            params: {
+            // params: {
-                limit: 50,
+            //     limit: 50,
-                page: 1,
+            //     page: 1,
-                with_deleted: false,
+            //     with_deleted: false,
-                order_field: 'name',
+            //     order_field: 'name',
-                order_direction: 'ASC',
+            //     order_direction: 'ASC',
-            }
+            // }
-            });
+            // });
-            setSucos(getSucos.data.data.list)
+            // setPostoAdm(getPostoAdms.data.data.list)
-            let getAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/aldeias/list`, {
+            // let getSucos = await axios.get(`${BASE_URL_MASTER_DATA}/sucos/list`, {
-            params: {
+            // params: {
-                limit: 50,
+            //     limit: 50,
-                page: 1,
+            //     page: 1,
-                with_deleted: false,
+            //     with_deleted: false,
-                order_field: 'name',
+            //     order_field: 'name',
-                order_direction: 'ASC',
+            //     order_direction: 'ASC',
-            }
+            // }
-            });
+            // });
-            setAldeias(getAldeias.data.data.list)
+            // setSucos(getSucos.data.data.list)
-        } catch (error) {
+            // let getAldeias = await axios.get(`${BASE_URL_MASTER_DATA}/aldeias/list`, {
+            // params: {
+            //     limit: 50,
+            //     page: 1,
+            //     with_deleted: false,
+            //     order_field: 'name',
+            //     order_direction: 'ASC',
+            // }
+            // });
+            // setAldeias(getAldeias.data.data.list)
+        } catch (error:any) {
             console.log(error);
+            toast.error(error.message)
         }
     }
 
@@ -200,7 +210,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
         <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
             <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5">
                 <DialogHeader>
-                    <DialogTitle>Member - View/Edit</DialogTitle>
+                    <DialogTitle>Member - {dialogType ==='create' ? "Create" : "View/Edit"}</DialogTitle>
                     <DialogDescription></DialogDescription>
                 </DialogHeader>
                 <DialogBody ref={parentRef}>
@@ -213,20 +223,21 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
 
                         <div className="card-body grid gap-5">
 
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''}
+                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, groups, 'group_id', 'Group', true, dialogType === "update"||false): ''}
+                            {/* {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} */}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, dialogType==='create'?false:true): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''}
                             {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser'): ''}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', null, true): ''}
+                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', true, false): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''}
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, viewOnly): ''}
+                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "update"||false): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
                             {/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, profession, 'profession', 'Profession', null, false): ''}
+                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, profession, 'profession', 'Profession', false, false): ''}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, municipios, 'municipio', 'Municipio', null, false): ''}
+                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, municipios, 'municipio', 'Municipio', false, false): ''}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, postoAdm, 'posto_adms', 'Posto', 'posto_adms_id', false): ''}
+                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, postoAdm, 'posto_adms', 'Posto', false, false): ''}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco', 'Suco', 'sucos_id', false): ''}
+                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco', 'Suco', false, false): ''}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, aldeias, 'aldeia', 'Aldeia', null, false): ''}
+                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, aldeias, 'aldeia', 'Aldeia', false, false): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Nationality', 'nationality', 'text', true, viewOnly): ''}
                             <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>
@@ -257,7 +268,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                             {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie'): ''}
                             {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license'): ''}
 
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', null, false): ''}
+                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', false, false): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Bank Account', 'bank_account', 'text', false, viewOnly): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'iBank Number', 'ibank_number', 'text', false, viewOnly): ''}
 
@@ -265,7 +276,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                             {(formData.id&&(!page||formData.destinationGroup === "Agent")) ? generateInput(formData, handleChange, 'Approval Agent Description', 'approval_description_agent', 'text', false, viewOnly): ''}
 
                             {(formData.id && page!=='kyc') ? (
-                                <AdmAccess page={page}formData={formData}fetchCustomers={fetchCustomers}handleClose={handleClose}viewOnly={viewOnly}setViewOnly={setViewOnly}/>
+                                <AdmAccess page={page}groups={groups}formData={formData}fetchCustomers={fetchCustomers}handleClose={handleClose}viewOnly={viewOnly}setViewOnly={setViewOnly}/>
                             ): ""}
                             {(formData.id && page!=='kyc') ? (
                                 <CustomerWallet customerid={formData.id}/>
@@ -323,14 +334,14 @@ function generateInput(formData:any, handleChange:any, label:string, name:string
 }
 
 // ON DEV (DI SELECT MASI HILANG)
-function generateList(formData:any, handleChange: any, list:any, name:string, label: string, difId: any, required: boolean) {
+function generateList(formData:any, handleChange: any, list:any, name:string, label: string, required: boolean, disabled: boolean) {
     return (
         <>
             <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">{label}
                 <span className="text-red-600">{required?"*":""}</span></label>
-                <Select required={required} value={formData[name]} onValueChange={(e) => (handleChange({ target : { name, value: e }}))}>
+                <Select disabled={disabled} required={required} value={formData[name]} onValueChange={(e) => (handleChange({ target : { name, value: e }}))}>
                     <SelectTrigger>
                         <SelectValue placeholder={`Select ${label}`} />
                     </SelectTrigger>

src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx

@@ -30,7 +30,7 @@ const DetailApprovalTransaction = () => {
                     const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
                         id: selectedTransactionId
                     });
-                    // console.log(response?.data);
+                    console.log(response?.data);
                     setTransactionDetails(response?.data);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
@@ -190,7 +190,7 @@ const DetailApprovalTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.type.name}</p>
+                                        <p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
                                     </div>
                                 </div>
 
@@ -346,9 +346,11 @@ const DetailApprovalTransaction = () => {
                                         <p className="text-sm text-gray-500">Description</p>
                                         <p className="font-medium">{transactionDetails?.description}</p>
                                     </div>
+                                    <div>
                                     <div>
                                         <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.type.name}</p>
+                                        <p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
+                                    </div>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Reference</p>

src/pages/transaction/approval-transaction/blocks/ListToolbar.tsx

@@ -70,6 +70,23 @@ const ListToolbar = () => {
                 name="to"
               />
             </label>
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5"
+                onClick={() => {
+                  const today = new Date();
+                  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+                  settrxDate({
+                    from: formatDate(firstDayOfMonth),
+                    to: formatDate(today),
+                  });
+                  reload();
+                }}
+              >
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
           </div>
         </div>
       </div>

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

@@ -189,7 +189,7 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.type.name}</p>
+                                        <p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
                                     </div>
                                 </div>
 
@@ -347,7 +347,7 @@ const DetailTransaction = () => {
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Name</p>
-                                        <p className="font-medium">{transactionDetails?.type.name}</p>
+                                        <p className="font-medium">{transactionDetails?.type?.name || '-'}</p>
                                     </div>
                                     <div>
                                         <p className="text-sm text-gray-500">Reference</p>

src/pages/transaction/history-transaction/blocks/ListToolbar.tsx

@@ -70,6 +70,24 @@ const ListToolbar = () => {
                 name="to"
               />
             </label>
+            <DefaultTooltip title={'Refresh'} placement={'top'}>
+              <Button
+                variant="outline"
+                className="h-7.5"
+                onClick={() => {
+                  const today = new Date();
+                  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+                  settrxDate({
+                    from: formatDate(firstDayOfMonth),
+                    to: formatDate(today),
+                  });
+                  reload();
+                }}
+              >
+                <KeenIcon icon="arrows-circle" />
+              </Button>
+            </DefaultTooltip>
+
           </div>
         </div>
       </div>

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

@@ -70,6 +70,8 @@ const AddFeeDialog = () => {
     selectedTransferFee,
     transactionTypeId
   } = useManageTransferFeeContext();
+  const [customerSearchTerm, setCustomerSearchTerm] = useState('');
+  const [open, setOpen] = useState(false);
 
   const [alert, setAlert] = useState({
     show: false,
@@ -86,7 +88,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: '',
@@ -111,6 +113,7 @@ const AddFeeDialog = () => {
     credit_destination_account: ''
   };
 
+
   const [formField, setFormField] = useState(initialState);
 
   const resetForm = () => {
@@ -126,14 +129,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);
           }
@@ -148,12 +154,19 @@ const AddFeeDialog = () => {
     }
   }, [showAddFeeDialog, transactionTypeId, GetData]);
 
+  useEffect(() => {
+    if (!showAddFeeDialog) {
+      setCustomerSearchTerm('');
+      setOpen(false);
+    }
+  }, [showAddFeeDialog]);
+
   useEffect(() => {
     const created_time = new Date();
     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 +206,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 +338,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 +355,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 +399,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 +424,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 +444,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 +492,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 +506,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 +571,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 +588,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 +626,93 @@ 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">
-                    {renderSelectWithLoading(
+                      Credit Destination <span className="text-red-500">*</span>
-  formField.credit_destination,
+                    </label>
-  (value) => setFormField({ ...formField, credit_destination: value }),
+                    <div className="relative">
-  customersWithNames,
+                      <div
-  "Select Customer",
+                        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-  isLoadingCustomers
+                        onClick={() => setOpen(!open)}
-)}
+                      >
+                        <span className="truncate">
+                          {customers.find(
+                            (customer) => customer.id === formField.credit_destination
+                          )?.username || 'Search customer...'}
+                        </span>
+                        <path d="m6 9 6 6 6-6"></path>
+                      </div>
+
+                      {open && (
+                        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+                          <div className="sticky top-0 bg-white p-2 border-b">
+                            <Input
+                              className="h-8 text-sm"
+                              type="text"
+                              placeholder="Search customer..."
+                              value={customerSearchTerm}
+                              onChange={(e) => setCustomerSearchTerm(e.target.value)}
+                              autoComplete="off"
+                              onClick={(e) => e.stopPropagation()}
+                              autoFocus
+                            />
+                          </div>
+                          <div>
+                            {customers
+                              .filter(
+                                (customer) =>
+                                  customer.username
+                                    .toLowerCase()
+                                    .includes(customerSearchTerm.toLowerCase()) ||
+                                  customer.msisdn.includes(customerSearchTerm)
+                              )
+                              .map((customer) => (
+                                <div
+                                  key={customer.id}
+                                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                                  onClick={() => {
+                                    setFormField({
+                                      ...formField,
+                                      credit_destination: customer.id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.username}
+                                </div>
+                              ))}
+                            {customers.filter(
+                              (customer) =>
+                                customer.username
+                                  .toLowerCase()
+                                  .includes(customerSearchTerm.toLowerCase()) ||
+                                customer.msisdn.includes(customerSearchTerm)
+                            ).length === 0 && (
+                              <div className="px-3 py-2 text-sm text-gray-500">
+                                No customer found
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
                   </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 +727,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 +744,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 +773,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

@@ -7,8 +7,6 @@ import {
   SelectTrigger,
   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 {
   Dialog,
   DialogBody,
@@ -26,6 +24,8 @@ import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { getAuth } from '@/auth';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
 
 const API_URL = apiConfig.service_transaction;
 const API_URL_MASTER_DATA = apiConfig.service_master_data;
@@ -34,14 +34,12 @@ const API_URL_CUSTOMER = apiConfig.service_customer;
 interface WalletProps {
   id: string;
   name: string;
-  description?: string;
 }
 
 interface CustomerProps {
   id: string;
   username: string;
   msisdn: string;
-  fullname?: string;
 }
 
 interface TransactionTypeProps {
@@ -54,18 +52,31 @@ const EditFeeDialog = () => {
   const { showEditFeeDialog, handleEditFeeDialog, selectedTransferFee } =
     useManageTransferFeeContext();
   const { reload } = useDataGrid();
-  const [wallets, setWallets] = useState<WalletProps[]>([]);
   const { GetData, PutData } = useCallApi();
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
   const parsedUser = getAuth()?.user;
+
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
+  const [transactionTypeName, setTransactionTypeName] = useState('');
+  const customersWithNames = customers.map((customer) => ({
+    id: customer.id,
+    name: customer.username
+  }));
+  const [customerSearchTerm, setCustomerSearchTerm] = useState('');
+  const [showCustomerSearch, setShowCustomerSearch] = useState(false);
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
 
+  const [isLoadingTransferFee, setIsLoadingTransferFee] = useState(false);
+  const [isLoadingTransactionType, setIsLoadingTransactionType] = useState(false);
+  const [isLoadingWallets, setIsLoadingWallets] = useState(false);
+  const [isLoadingCustomers, setIsLoadingCustomers] = useState(false);
+
   const initialState = {
     name: '',
     description: '',
@@ -96,13 +107,13 @@ 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
       }));
     }
-  }, [showEditFeeDialog]);
+  }, [showEditFeeDialog, parsedUser?.username]);
 
   const resetForm = () => {
     if (selectedTransferFee) {
@@ -161,17 +172,21 @@ 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');
           reload();
           handleEditFeeDialog(false, null);
           const createActivity = {
-            module: 'Manage Transfer Type',
+            module: 'Manage Transfer Fee',
-            description: `Edit Transfer Type => ${selectedTransferFee}`,
+            description: `Edit Transfer Fee => ${formField.name}`,
             action: 'U'
           };
+          doSaveLogActivity(createActivity);
         } else {
           setAlert({ show: true, message: response?.message || 'Failed to update transfer fee' });
         }
@@ -186,12 +201,13 @@ const EditFeeDialog = () => {
   );
 
   const fetchWallets = useCallback(async () => {
+    setIsLoadingWallets(true);
     const params = {
       limit: 100,
       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);
@@ -203,6 +219,8 @@ const EditFeeDialog = () => {
     } catch (error) {
       console.error('Error fetching wallets', error);
       setWallets([]);
+    } finally {
+      setIsLoadingWallets(false);
     }
   }, [GetData]);
 
@@ -215,6 +233,7 @@ const EditFeeDialog = () => {
     if (!showEditFeeDialog) return;
 
     const getCustomerList = async (sorting: any) => {
+      setIsLoadingCustomers(true);
       try {
         sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
         const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
@@ -227,16 +246,19 @@ const EditFeeDialog = () => {
         setCustomers(response?.data.list || []);
       } catch (error) {
         console.error('Error fetching customers', error);
+      } finally {
+        setIsLoadingCustomers(false);
       }
     };
 
-    getCustomerList([{ id: 'msisdn', desc: false }]);
+    getCustomerList([{ id: 'id', desc: false }]);
   }, [showEditFeeDialog, GetData]);
 
   useEffect(() => {
     if (!showEditFeeDialog) return;
 
     const getTransactionTypeList = async (sorting: any) => {
+      setIsLoadingTransactionType(true);
       try {
         sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
         const response = await GetData(`${API_URL}/transactiontype/list`, {
@@ -249,6 +271,8 @@ const EditFeeDialog = () => {
         setTransactionTypes(response?.data.list || []);
       } catch (error) {
         console.error('Error fetching transaction types', error);
+      } finally {
+        setIsLoadingTransactionType(false);
       }
     };
 
@@ -260,13 +284,13 @@ const EditFeeDialog = () => {
     return dateString.split('T')[0];
   };
 
-  const fetchTransactionFee = useCallback(async (id: string) => {
+  const fetchTransactionFee = useCallback(
+    async (id: string) => {
+      setIsLoadingTransferFee(true);
       try {
-      const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, { });
+        const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, {});
 
         if (response?.status) {
-
-  
           setFormField({
             ...initialState,
             name: response.data.name || '',
@@ -282,20 +306,29 @@ const EditFeeDialog = () => {
             priority: response.data.priority || '',
             status: response.data.status || '',
             status_include: response.data.status_include || '',
-          deduct_from: response.data.deduct_from||'',
+            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', ' ')
           });
+          
+          if (response.data.transaction_type?.name) {
+            setTransactionTypeName(response.data.transaction_type.name);
+          }
         }
       } catch (error) {
         console.error('Error fetching transaction fee details', error);
         setAlert({ show: true, message: 'Failed to fetch transaction fee details' });
+      } finally {
+        setIsLoadingTransferFee(false);
       }
-  }, [GetData, parsedUser?.username]);
+    },
+    [GetData, parsedUser?.username]
+  );
 
   const hasFetchedRef = useRef(false);
 
@@ -309,19 +342,59 @@ const EditFeeDialog = () => {
       hasFetchedRef.current = false;
     }
   }, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
-  
   const handleCloseDialog = () => {
     setFormField(initialState);
     setAlert({ show: false, message: '' });
+    setCustomerSearchTerm('');
+    setOpen(false);
     handleEditFeeDialog(false, null);
   };
+  useEffect(() => {
+    if (!showEditFeeDialog) {
+      setCustomerSearchTerm('');
+      setOpen(false);
+    }
+  }, [showEditFeeDialog]);
+  const renderSelectWithLoading = (
+    value: string,
+    onChangeHandler: (value: string) => void,
+    options: { id: string; name: string }[] | null,
+    placeholder: string,
+    isLoading: boolean
+  ) => {
+    return (
+      <Select value={value} onValueChange={onChangeHandler} disabled={isLoading}>
+        <SelectTrigger>
+          {isLoading ? (
+            <div className="flex items-center">
+              <div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
+              <span className="ml-2">Loading...</span>
+            </div>
+          ) : (
+            <SelectValue placeholder={placeholder} />
+          )}
+        </SelectTrigger>
+        <SelectContent>
+          {options &&
+            options.map((option) => (
+              <SelectItem value={option.id} key={option.id}>
+                {option.name}
+              </SelectItem>
+            ))}
+        </SelectContent>
+      </Select>
+    );
+  };
 
   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>
@@ -349,11 +422,54 @@ const EditFeeDialog = () => {
             </div>
           )}
           
+          {isLoadingTransferFee ? (
+            <div className="flex flex-col items-center justify-center p-8">
+              <div className="animate-pulse flex space-x-4 w-full">
+                <div className="flex-1 space-y-4 py-1">
+                  <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                  <div className="space-y-2">
+                    <div className="h-4 bg-gray-200 rounded"></div>
+                    <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+                  </div>
+                </div>
+              </div>
+              <p className="mt-4 text-gray-500">Loading transfer fee details...</p>
+            </div>
+          ) : (
             <form action="" onSubmit={doUpdateTransferFee}>
               <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">
+                      Transaction Type ID <span className="text-red-500">*</span>
+                    </label>
+                    <div className="relative">
+                      <Input
+                        className="input bg-gray-100"
+                        type="text"
+                        value={isLoadingTransactionType ? '' : transactionTypeName}
+                        readOnly
+                      />
+                      {isLoadingTransactionType && (
+                        <div className="absolute inset-0 flex items-center justify-start bg-gray-100 px-3">
+                          <div className="flex items-center">
+                            <div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
+                            <span className="ml-2 text-gray-500">Loading transaction type...</span>
+                          </div>
+                        </div>
+                      )}
+                      <input 
+                        type="hidden" 
+                        name="transaction_type" 
+                        value={formField.transaction_type} 
+                      />
+                    </div>
+                  </div>
+                  
+                  <div className="w-full">
+                    <label className="form-label">
+                      Transfer Fee Name <span className="text-red-500">*</span>
+                    </label>
                     <Input
                       className="input"
                       type="text"
@@ -366,7 +482,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 +533,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 +548,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 +617,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,33 +635,32 @@ 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">
-                  <Select
+                      Deduct From Destination <span className="text-red-500">*</span>
-                    value={formField.deduct_from_account}
+                    </label>
-                    onValueChange={(value) => setFormField({ ...formField, deduct_from_account: value })}
+                    {renderSelectWithLoading(
-                  >
+                      formField.deduct_from_account,
-                    <SelectTrigger>
+                      (value) => setFormField({ ...formField, deduct_from_account: value }),
-                      <SelectValue placeholder="Select Wallet" />
+                      wallets,
-                    </SelectTrigger>
+                      'Select Wallet',
-                    <SelectContent>
+                      isLoadingWallets
-                      {wallets.map((wallet) => (
+                    )}
-                        <SelectItem value={wallet.id} key={wallet.id}>
-                          {wallet.name || wallet.description}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
                   </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,67 +675,88 @@ 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">
-                    <Select
+      Credit Destination <span className="text-red-500">*</span>
-                      value={formField.credit_destination}
+    </label>
-                      onValueChange={(value) => setFormField({ ...formField, credit_destination: value })}
+    <div className="relative">
+      <div 
+        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+        onClick={() => setOpen(!open)}
       >
-                      <SelectTrigger>
+        <span className="truncate">
-                        <SelectValue placeholder="Select Customer" />
+          {customers.find(customer => customer.id === formField.credit_destination)?.username || 'Search customer...'}
-                      </SelectTrigger>
+        </span>
-                      <SelectContent>
+          <path d="m6 9 6 6 6-6"></path>
-                        {customers.map((customer) => (
+      </div>
-                          <SelectItem value={customer.id} key={customer.id}>
+      
-                            {customer.fullname || `${customer.username} - ${customer.msisdn}`}
+      {open && (
-                          </SelectItem>
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+          <div className="sticky top-0 bg-white p-2 border-b">
+            <Input
+              className="h-8 text-sm"
+              type="text"
+              placeholder="Search customer..."
+              value={customerSearchTerm}
+              onChange={(e) => setCustomerSearchTerm(e.target.value)}
+              autoComplete="off"
+              onClick={(e) => e.stopPropagation()}
+              autoFocus
+            />
+          </div>
+          <div>
+            {customers
+              .filter(customer => 
+                customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
+                customer.msisdn.includes(customerSearchTerm)
+              )
+              .map(customer => (
+                <div 
+                  key={customer.id} 
+                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                  onClick={() => {
+                    setFormField({
+                      ...formField,
+                      credit_destination: customer.id
+                    });
+                    setOpen(false);
+                  }}
+                >
+                  {customer.username}
+                </div>
               ))}
-                      </SelectContent>
+            {customers.filter(customer => 
-                    </Select>
+              customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
+              customer.msisdn.includes(customerSearchTerm)
+            ).length === 0 && (
+              <div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
+            )}
+          </div>
         </div>
       )}
+    </div>
+  </div>
+)}
+
+
+
                   
                   <div className="w-full">
-                  <label className="form-label">Credit Destination Account <span className="text-red-500">*</span></label>
+                    <label className="form-label">
-                  <Select
+                      Credit Destination Account <span className="text-red-500">*</span>
-                    value={formField.credit_destination_account}
+                    </label>
-                    onValueChange={(value) => setFormField({ ...formField, credit_destination_account: value })}
+                    {renderSelectWithLoading(
-                  >
+                      formField.credit_destination_account,
-                    <SelectTrigger>
+                      (value) => setFormField({ ...formField, credit_destination_account: value }),
-                      <SelectValue placeholder="Select Wallet" />
+                      wallets,
-                    </SelectTrigger>
+                      'Select Wallet',
-                    <SelectContent>
+                      isLoadingWallets
-                      {wallets.map((wallet) => (
+                    )}
-                        <SelectItem value={wallet.id} key={wallet.id}>
-                          {wallet.name || wallet.description}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
                   </div>
                   
                   <div className="w-full">
-                  <label className="form-label">Transaction Type ID <span className="text-red-500">*</span></label>
+                    <label className="form-label">
-                  <Select
+                      Status <span className="text-red-500">*</span>
-                    value={formField.transaction_type}
+                    </label>
-                    onValueChange={(transaction_type) =>
-                      setFormField((prev) => ({ ...prev, transaction_type }))
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select Transaction Type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {transactionTypes.map((transactiontype) => (
-                        <SelectItem value={transactiontype.id} key={transactiontype.id}>
-                          {transactiontype.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                
-                <div className="w-full">
-                  <label className="form-label">Status <span className="text-red-500">*</span></label>
                     <Select
                       value={formField.status}
                       onValueChange={(value) => setFormField({ ...formField, status: value })}
@@ -628,7 +772,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 +790,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 })}
@@ -660,17 +808,35 @@ const EditFeeDialog = () => {
                   </div>
                   
                   <div className="flex justify-end pt-2.5 gap-5">
-                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                    <Button
+                      variant={'outline'}
+                      type="button"
+                      onClick={resetForm}
+                    >
+                      Reset
+                    </Button>
+                    <Button
+                      variant={'default'}
+                      type="submit"
+                      disabled={
+                        isSubmitting ||
+                        isLoadingTransferFee ||
+                        isLoadingTransactionType ||
+                        isLoadingWallets ||
+                        isLoadingCustomers
+                      }
+                    >
                       {isSubmitting ? 'Saving...' : 'Save Changes'}
                     </Button>
                   </div>
                 </div>
               </div>
             </form>
+          )}
         </DialogBody>
       </DialogContent>
     </Dialog>
   );
 };
 
-export { EditFeeDialog };
+export  {EditFeeDialog};

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

@@ -1,15 +1,15 @@
-  import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
-  import { Toaster } from '@/components/ui/sonner';
+import { Toaster } from '@/components/ui/sonner';
-  import { apiConfig } from '@/config/api.config';
+import { apiConfig } from '@/config/api.config';
-  import { useCallApi } from '@/hooks';
+import { useCallApi } from '@/hooks';
-  import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef } from '@tanstack/react-table';
-  import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
-  import ListToolbar from '../blocks/ListToolBar';
+import ListToolbar from '../blocks/ListToolBar';
-  import DeleteDialog from '../blocks/DeleteDialog';
+import DeleteDialog from '../blocks/DeleteDialog';
-  import { EditFeeDialog } from '../blocks/EditDialog';
+import { EditFeeDialog } from '../blocks/EditDialog';
-  import { useManageTransferTypeContext } from '../../transfertype/hooks/useManageTransferTypeContext';
+import { useManageTransferTypeContext } from '../../transfertype/hooks/useManageTransferTypeContext';
 
-  interface ContextProps {
+interface ContextProps {
   showEditFeeDialog: boolean;
   handleEditFeeDialog: (show: boolean, selected_TransferFee: string | null) => void;
   showAddFeeDialog: boolean;
@@ -18,10 +18,9 @@
   showDeleteFeeDialog: boolean;
   selectedTransferFee: string | null;
   transactionTypeId: string | null;
+}
 
-  }
+const initialProps: ContextProps = {
-
-  const initialProps: ContextProps = {
   showEditFeeDialog: false,
   handleEditFeeDialog: () => {},
   showAddFeeDialog: false,
@@ -29,29 +28,34 @@
   showDeleteFeeDialog: false,
   handleDeleteFeeDialog: () => {},
   selectedTransferFee: null,
-    transactionTypeId: null,
+  transactionTypeId: null
+};
 
-  };
+interface TransferFeeProps {
-
-  interface TransferFeeProps {
   name: string;
   description: string;
   minimum_amount: number;
-    maximum_amount:number;
+  maximum_amount: number;
-    period_start:string;
+  period_start: string;
-    period_end:string;
+  period_end: string;
   deduct_amount: number;
   deduct_percentage: number;
   transaction_type: string;
   status: string;
   status_include: string;
   fee: number;
-  }
+}
 
-  const ManageTransferFeeContext = createContext<ContextProps>(initialProps);
+const ManageTransferFeeContext = createContext<ContextProps>(initialProps);
-  const API_URL = apiConfig.service_transaction;
+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,16 +92,19 @@
     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);
 
       return {
-          data: response?.data ,
+        data: response?.data,
         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,11 +391,10 @@
           }
         >
           {children}
-
         </DataGridProvider>
       </ManageTransferFeeContext.Provider>
     </div>
   );
-  };
+};
 
-  export { ManageTransferFeeContext, ManageTransferFeeContextProvider };
+export { ManageTransferFeeContext, ManageTransferFeeContextProvider };

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

@@ -147,19 +147,19 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         meta: { headerClassName: 'w-[250px]' }
       },
       {
-        accessorFn: (row: {type: string }) => {
+        accessorFn: (row: { type: string }) => {
           const mapping: Record<string, string> = {
             D: 'Disbursement',
             O: 'Other',
             CA: 'Change Group Emoney Customer to Agent',
-            AC:'Change Group Emoney Agent to Customer',
+            AC: 'Change Group Emoney Agent to Customer',
             PC: 'Change Group Point Agent to Customer',
             PA: 'Change Group Point Customer to Agent',
-            CE:'Return Customer Emoney',
+            CE: 'Return Customer Emoney',
-            AD:'Return Agent Deposit',
+            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 />} />