fix detail member

src/pages/master/aldeias/blocks/AddDialog.tsx

@@ -27,8 +27,8 @@ import {
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 interface SucosProps {
-  sucos_id: number;
+  id: number;
-  sucos_name: string;
+  name: string;
 }
 
 const API_URL = apiConfig.service_master_data;
@@ -181,7 +181,7 @@ const AddDialog = () => {
                           className="input col-span-5 text-left"
                           style={{ color: 'inherit' }}
                         >
-                          {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name ||
+                          {sucos.find((suco) => suco.id === formField.sucosId)?.name ||
                             'Select Sucos'}
                         </button>
                       </PopoverTrigger>
@@ -196,17 +196,17 @@ const AddDialog = () => {
                             <CommandGroup>
                               {sucos.map((suco) => (
                                 <CommandItem
-                                  key={suco.sucos_id}
+                                  key={suco.id}
-                                  value={suco.sucos_name}
+                                  value={suco.name}
                                   onSelect={() => {
                                     setFormField({
                                       ...formField,
-                                      sucosId: suco.sucos_id
+                                      sucosId: suco.id
                                     });
                                     setOpen(false);
                                   }}
                                 >
-                                  {suco.sucos_name}
+                                  {suco.name}
                                 </CommandItem>
                               ))}
                             </CommandGroup>

src/pages/master/aldeias/blocks/DeleteDialog.tsx

@@ -4,7 +4,14 @@ import { Alert, useDataGrid } from '@/components';
 import { useCallApi } from '@/hooks';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 
@@ -52,6 +59,8 @@ const DeleteDialog = () => {
     <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
       <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogHeader className="p-0 border-0 block">
+          <DialogTitle></DialogTitle>
+          <DialogDescription></DialogDescription>
           <Alert variant="warning">
             <h3 className="text-lg">Are you sure?</h3>
             <span className="text-sm">You will delete this data!</span>

src/pages/master/aldeias/blocks/EditDialog.tsx

@@ -98,7 +98,7 @@ const EditDialog = () => {
       });
 
       setSucos(response?.data.list);
-      console.log(sucos);
+      // console.log(sucos);
     } catch (error) {
       console.error('Error fetching Sucos', error);
       setAlert({ show: true, message: 'Failed to get Sucos. Please try again.' });
@@ -107,7 +107,10 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
+
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/aldeias/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -221,8 +224,8 @@ const EditDialog = () => {
                             className="input col-span-5 text-left"
                             style={{ color: 'inherit' }}
                           >
-                            {sucos.find((suco) => suco.id === formField.sucosId)
+                            {sucos.find((suco) => suco.id === formField.sucosId)?.name ||
-                              ?.name || 'Select Sucos'}
+                              'Select Sucos'}
                           </button>
                         </PopoverTrigger>
                         <PopoverContent className="w-[400px] p-0">

src/pages/master/conversion/blocks/EditDialog.tsx

@@ -120,7 +120,10 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
+
     console.log('Transaction Type: ', response?.data);
     if (response?.status) {
       setFormField((prev) => ({
@@ -302,9 +305,6 @@ const EditDialog = () => {
                     </div>
                   </div>
                   <div className="flex justify-end gap-5">
-                    <Button type="button" variant="outline" onClick={resetForm}>
-                      Reset
-                    </Button>
                     <Button variant="default">Save Changes</Button>
                   </div>
                 </div>

src/pages/master/currency/blocks/EditDialog.tsx

@@ -101,7 +101,10 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id });
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/dashboard/currency/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
+
     // console.log('Transaction Type: ', response?.data);
     if (response?.status) {
       setFormField((prev) => ({
@@ -232,9 +235,6 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end gap-5">
-                    <Button type="button" variant="outline" onClick={resetForm}>
-                      Reset
-                    </Button>
                     <Button variant="default">Save Changes</Button>
                   </div>
                 </div>

src/pages/master/municipios/blocks/EditDialog.tsx

@@ -77,7 +77,9 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id });
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/municipios/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
 
     if (response?.status) {
       setFormField((prev) => ({

src/pages/master/postoadms/blocks/EditDialog.tsx

@@ -114,7 +114,9 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -259,9 +261,6 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end gap-5">
-                    <Button type="button" variant="outline" onClick={resetForm}>
-                      Reset
-                    </Button>
                     <Button className="btn btn-primary">Save Changes</Button>
                   </div>
                 </div>

src/pages/master/products/blocks/EditDialog.tsx

@@ -125,7 +125,11 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
+
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 500));
+    const fetchData = GetData(`${API_URL}/product/getdata/${id}`, { id });
+
+    const [response] = await Promise.all([fetchData, minDelay]);
     // console.log(response);
 
     if (response?.status) {
@@ -445,9 +449,6 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end gap-5">
-                    <Button type="button" variant="outline" onClick={resetForm}>
-                      Reset
-                    </Button>
                     <Button variant="default">Save Changes</Button>
                   </div>
                 </div>

src/pages/master/profession/blocks/EditDialog.tsx

@@ -74,7 +74,9 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id });
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/profession/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
 
     if (response?.status) {
       setFormField((prev) => ({

src/pages/master/provider/blocks/EditDialog.tsx

@@ -148,7 +148,9 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
     // console.log(response);
     if (response?.status) {
       setFormField((prev) => ({
@@ -157,7 +159,7 @@ const EditDialog = () => {
         description: response?.data.description,
         type: response?.data.type,
         status: response?.data.status,
-        transaction_type: response?.data.transaction_type.id,
+        transaction_type: response?.data.transaction_type?.id || '',
         agent: response?.data.agent?.id || null
       }));
     }
@@ -172,7 +174,8 @@ const EditDialog = () => {
       formField.description.trim() === '' ||
       formField.type.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.transaction_type.trim() === ''
+      formField.transaction_type.trim() === '' ||
+      formField.agent === null
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
@@ -324,7 +327,7 @@ const EditDialog = () => {
                           setFormField({ ...formField, transaction_type: value })
                         }
                       >
-                        <SelectTrigger>
+                        <SelectTrigger className="min-h-[40px] items-center">
                           <SelectValue placeholder="Select Transaction Type" />
                         </SelectTrigger>
                         <SelectContent>

src/pages/master/reward/blocks/EditDialog.tsx

@@ -95,8 +95,9 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    // console.log('Ini datanya:', id);
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
-    const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
+    const fetchData = GetData(`${API_URL}/reward/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
     // console.log('API Response:', response);
 
     if (response?.status) {
@@ -260,9 +261,6 @@ const EditDialog = () => {
                     </div>
                   </div>
                   <div className="flex justify-end gap-5">
-                    <Button type="button" variant="outline" onClick={resetForm}>
-                      Reset
-                    </Button>
                     <Button variant="default">Save Changes</Button>
                   </div>
                 </div>

src/pages/master/sucos/blocks/EditDialog.tsx

@@ -113,7 +113,9 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL}/sucos/getdata/${id}`, { id });
+    const [response] = await Promise.all([fetchData, minDelay]);
     // console.log('Data Sucos:', response?.data);
 
     if (response?.status) {
@@ -258,9 +260,6 @@ const EditDialog = () => {
                   </div>
 
                   <div className="flex justify-end gap-5">
-                    <Button type="button" variant="outline" onClick={resetForm}>
-                      Reset
-                    </Button>
                     <Button className="btn btn-primary">Save Changes</Button>
                   </div>
                 </div>

src/pages/master/sucos/hooks/ManageSucosContext.tsx

@@ -163,7 +163,6 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      console.log('Sucos List Response:', response?.data);
       setSucos(response?.data.list || []);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {

src/pages/master/wallet/blocks/EditDialog.tsx

@@ -117,11 +117,12 @@ const EditDialog = () => {
 
   const doFetchData = useCallback(async (id: string) => {
     setIsLoading(true);
-    const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
+    const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
+    const fetchData = GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
       id
     });
+    const [response] = await Promise.all([fetchData, minDelay]);
 
-    console.log(response);
     if (response?.status) {
       setFormField((prev) => ({
         ...prev,

src/pages/master/walletRule/blocks/EditDialog.tsx

@@ -402,9 +402,6 @@ const EditDialog = () => {
                 </div>
 
                 <div className="flex justify-end gap-5">
-                  <Button type="button" variant="outline" onClick={resetForm}>
-                    Reset
-                  </Button>
                   <Button variant="default">Update</Button>
                 </div>
               </div>

src/pages/members/kyc/Kyc.tsx

@@ -1,8 +1,13 @@
-import { Container, DataGridInner, DataGridProvider, TDataGridProps } from '@/components';
+import {
+  Container,
+  DataGridInner,
+  DataGridProvider,
+  TDataGridProps,
+  useDataGrid
+} from '@/components';
 import { DataTable } from '@/components/ui/DataTable';
 import { Table } from '@tanstack/react-table';
 import React, { createContext, useContext, useState, useEffect } from 'react';
-import { ManageKycContextProvider } from './hooks';
 import { getColumns, initialMember } from './Columns';
 import { useAuthContext } from '@/auth';
 import { LoaderTransparant } from '@/components';
@@ -17,6 +22,7 @@ import DetailMember from '../manage-members/blocks/DetailMember';
 import { Breadcrumbs, Link } from '@mui/material';
 import { Helmet } from 'react-helmet';
 import { ListToolBar } from './blocks/ListToolBar';
+import { RefreshCw } from 'lucide-react';
 
 const Kyc = () => {
   const [loading, setLoading] = useState(false);
@@ -26,6 +32,7 @@ const Kyc = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
+  const [isReloading, setIsReloading] = useState(false);
   const closeDialog = () => setIsDialogOpen(false);
   const { getUser } = useAuthContext();
 
@@ -65,6 +72,9 @@ const Kyc = () => {
     } catch (error: any) {
       toast.error(error.message);
       console.log(error);
+    } finally {
+      setLoading(false);
+      setIsReloading(false);
     }
   }
 
@@ -85,6 +95,15 @@ const Kyc = () => {
     setDialogOpen(true);
   }
 
+  const resetForm = () => {
+    setMember(initialMember);
+  };
+
+  const handleReload = () => {
+    setIsReloading(true);
+    fetchCustomers();
+  };
+
   const handleYes = async () => {
     setLoading(true);
     const userLogin: any = await getUser();
@@ -165,6 +184,7 @@ const Kyc = () => {
       setIsDialogOpen(false);
       await fetchCustomers();
       setLoading(false);
+      setIsReloading(false);
     }
   };
 
@@ -227,12 +247,20 @@ const Kyc = () => {
           </Link>
         </Breadcrumbs>
         {/* <div className="w-full overflow-x-auto"> */}
-        <div className="grid gap-5 lg:gap-7.5 mt-5">
+        <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
+          {isReloading && (
+            <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
+              <div className="flex flex-col items-center">
+                <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
+                <span className="text-slate-500 font-medium">Refreshing data...</span>
+              </div>
+            </div>
+          )}
           <DataGridProvider
             data={members}
             columns={getColumns(handleUpdate)}
             pagination={{ size: 25 }}
-            toolbar={<ListToolBar />}
+            toolbar={<ListToolBar onReload={handleReload} isReloading={isReloading} />}
             layout={{ card: true }}
             sorting={[{ id: 'created_at', desc: true }]}
             serverSide={false}

src/pages/members/kyc/blocks/ListToolBar.tsx

@@ -1,40 +1,44 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
-import { useKycContext } from '../hooks';
+import { useState } from 'react';
 
-const ListToolBar = () => {
+interface ListToolbarProps {
+  onReload: () => void;
+  isReloading: boolean;
+}
+
+const ListToolBar = ({ onReload, isReloading }: ListToolbarProps) => {
   const { table, reload } = useDataGrid();
+  const [usernameFilter, setUsernameFilter] = useState('');
+
+  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUsernameFilter(e.target.value);
+    table.getColumn('username')?.setFilterValue(e.target.value);
+  };
 
   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 w-[50%] gap-3 items-center">
+          <div className="flex gap-3 items-center">
-            <label className="input input-sm w-1/3">
+            <input
-              <KeenIcon icon="magnifier" />
+              type="text"
-              <input
+              placeholder="Search Username"
-                type="text"
+              value={usernameFilter}
-                placeholder="Search users"
+              onChange={handleUsernameChange}
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+              className="input input-sm w-40"
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+            />
-              />
-            </label>
-            <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip>
           </div>
           <div className="flex gap-3 items-center">
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+              <Button variant="outline" className="h-7.5" onClick={onReload} disabled={isReloading}>
-                <KeenIcon icon="arrows-circle" />
+                {isReloading ? (
+                  <div className="animate-spin">
+                    <KeenIcon icon="arrows-circle" />
+                  </div>
+                ) : (
+                  <KeenIcon icon="arrows-circle" />
+                )}
               </Button>
             </DefaultTooltip>
           </div>

src/pages/members/kyc/hooks/ManageKycContext.tsx

@@ -1,145 +0,0 @@
-import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
-import { Toaster } from '@/components/ui/sonner';
-import { apiConfig } from '@/config/api.config';
-import { ColumnDef } from '@tanstack/react-table';
-import { createContext, useCallback, useMemo, useState } from 'react';
-import { ListToolBar } from '../blocks/ListToolBar';
-
-interface SelectedUser {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  description: string;
-  created_date: Date;
-}
-
-interface ContextProps {
-  showDetailDialog: boolean;
-  handleDetailDialog: (show: boolean, selected_user: SelectedUser | null) => void;
-  showAddDialog: boolean;
-  handleAddDialog: (show: boolean) => void;
-  selectedUser: SelectedUser | null;
-}
-
-const initialProps: ContextProps = {
-  showDetailDialog: false,
-  handleDetailDialog: () => {},
-  showAddDialog: false,
-  handleAddDialog: () => {},
-  selectedUser: null
-};
-
-const ManageKycContext = createContext<ContextProps>(initialProps);
-const API_URL = apiConfig.service_dashboard;
-
-const ManageKycContextProvider = ({ children }: { children: React.ReactNode }) => {
-  const [showDetailDialog, setShowDetailDialog] = useState(false);
-  const [showAddDialog, setShowAddDialog] = useState(false);
-  const [selectedUser, setSelectedUser] = useState<SelectedUser | null>(null);
-
-  const handleDetailDialog = useCallback((show: boolean, selected_user: SelectedUser | null) => {
-    setSelectedUser(show ? selected_user : null);
-    setShowDetailDialog(show);
-  }, []);
-
-  const handleAddDialog = useCallback((show: boolean) => {
-    setShowAddDialog(show);
-  }, []);
-
-  const columns = useMemo<ColumnDef<any>[]>(
-    () => [
-      {
-        accessorFn: (row) => row.id,
-        id: 'id',
-        header: ({ column }) => <DataGridColumnHeader title="ID" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[100px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.created_date,
-        id: 'created_date',
-        header: ({ column }) => <DataGridColumnHeader title="Created Date" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[250px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.name,
-        id: 'name',
-        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: {
-          headerClassName: 'w-[350px]'
-        }
-      },
-      {
-        accessorFn: (row) => row.description,
-        id: 'description',
-        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
-        enableSorting: true,
-        meta: {
-          headerClassName: 'w-[350px]'
-        }
-      },
-      {
-        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 (
-    <ManageKycContext.Provider
-      value={{
-        showDetailDialog,
-        handleDetailDialog,
-        showAddDialog,
-        handleAddDialog,
-        selectedUser
-      }}
-    >
-      <Toaster expand visibleToasts={9} duration={3000} />
-
-      <DataGridProvider
-        columns={columns}
-        pagination={{ size: 10 }}
-        toolbar={<ListToolBar />}
-        layout={{ card: true }}
-        sorting={[{ id: 'name', desc: false }]}
-        serverSide={true}
-      >
-        {children}
-      </DataGridProvider>
-    </ManageKycContext.Provider>
-  );
-};
-
-export { ManageKycContextProvider, ManageKycContext };
-export type { SelectedUser };

src/pages/members/kyc/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from './ManageKycContext';
-export * from './useKycContext';

src/pages/members/kyc/hooks/useKycContext.tsx

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

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

@@ -3,7 +3,6 @@ import { apiConfig } from '@/config/api.config';
 import { getColumns, Members, initialMember } from './Columns';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
-// import CustomerDialog from './CustomerDetailModal';
 import DetailMember from './blocks/DetailMember';
 import ConfirmDialog from '@/components/confirm';
 import { useAuthContext } from '@/auth';
@@ -15,7 +14,7 @@ const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 const BASE_URL = apiConfig.service_customer;
 import { Helmet } from 'react-helmet';
 import ListToolbar from './blocks/ListToolBar';
-
+import { RefreshCw } from 'lucide-react';
 const ManageMembers = () => {
   const [loading, setLoading] = useState(false);
   const [members, setMembers] = useState([]);
@@ -25,6 +24,7 @@ const ManageMembers = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
+  const [isReloading, setIsReloading] = useState(false);
   const closeDialog = () => {
     setIsDialogOpen(false);
     setMember(initialMember);
@@ -37,7 +37,7 @@ const ManageMembers = () => {
     setLoading(false);
   }, []);
 
-  async function fetchCustomers() {
+  async function fetchCustomers(): Promise<void> {
     try {
       let customers = await axios.get(`${BASE_URL}/customer/list`, {
         params: {
@@ -72,6 +72,9 @@ const ManageMembers = () => {
     } catch (error: any) {
       toast.error(error.message);
       console.log(error);
+    } finally {
+      setLoading(false);
+      setIsReloading(false);
     }
   }
 
@@ -93,7 +96,10 @@ const ManageMembers = () => {
     setMember(data);
     setDialogOpen(true);
   }
-
+  const handleReload = () => {
+    setIsReloading(true);
+    fetchCustomers();
+  };
   const handleYes = async () => {
     setLoading(true);
     const userLogin: any = await getUser();
@@ -226,14 +232,29 @@ const ManageMembers = () => {
           </Link>
         </Breadcrumbs>
         {/* <div className="w-full overflow-x-auto px-4"> */}
-        <div className="grid gap-5 lg:gap-7.5 mt-5">
+
+        <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
+          {isReloading && (
+            <div className="absolute inset-0 bg-white/70 z-10 flex items-center justify-center">
+              <div className="flex flex-col items-center">
+                <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
+                <span className="text-slate-500 font-medium">Refreshing data...</span>
+              </div>
+            </div>
+          )}
           <DataGridProvider
             data={members}
             pagination={{ size: 25 }}
             columns={getColumns(handleUpdate)}
             layout={{ card: true }}
             serverSide={false}
-            toolbar={<ListToolbar createMember={createMember} />}
+            toolbar={
+              <ListToolbar
+                createMember={createMember}
+                onReload={handleReload}
+                isReloading={isReloading}
+              />
+            }
             onRowSelectionChange={(selected, table: any) => {
               const selectedRow = table.getSelectedRowModel().rows[0];
               if (selectedRow) handleUpdate(selectedRow.original);

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

@@ -1,12 +1,20 @@
-import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
+import { UserPlus } from 'lucide-react';
+import { KeenIcon, useDataGrid } from '@/components';
+import { DefaultTooltip } from '@/components';
 import { useState } from 'react';
 
-const ListToolbar = ({ createMember }: { createMember: () => void }) => {
+interface ListToolbarProps {
-  const { table, reload } = useDataGrid();
+  createMember: () => void;
-  const [   usernameFilter, setUsernameFilter] = useState('');
+  onReload: () => void;
-  const [emailFilter, setEmailFilter] = useState('');
+  isReloading: boolean;
+}
 
+const ListToolbar = ({ createMember, onReload, isReloading }: ListToolbarProps) => {
+
+  const [emailFilter, setEmailFilter] = useState('');
+  const [usernameFilter, setUsernameFilter] = useState('');
+  const {table}=useDataGrid();
   const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUsernameFilter(e.target.value);
     table.getColumn('username')?.setFilterValue(e.target.value);
@@ -31,16 +39,23 @@ const ListToolbar = ({ createMember }: { createMember: () => void }) => {
             />
           </div>
           <div className="flex gap-3 items-center">
-            <Button
+            <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createMember}>
-              variant="outline"
-              className="h-7.5 text-[0.8rem]"
-              onClick={createMember}
-            >
               Add Data
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
+            <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
+              <Button 
-                <KeenIcon icon="arrows-circle" />
+                variant="outline" 
+                className="h-7.5" 
+                onClick={onReload}
+                disabled={isReloading}
+              >
+                {isReloading ? (
+                  <div className="animate-spin">
+                    <KeenIcon icon="arrows-circle" />
+                  </div>
+                ) : (
+                  <KeenIcon icon="arrows-circle" />
+                )}
               </Button>
             </DefaultTooltip>
           </div>
@@ -50,4 +65,4 @@ const ListToolbar = ({ createMember }: { createMember: () => void }) => {
   );
 };
 
-export default ListToolbar;
+export default ListToolbar;

src/pages/notification/blocks/AddDialog.tsx

@@ -32,14 +32,14 @@ const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL_NOTIFICATION = apiConfig.service_notification;
 
 const AddDialog = () => {
-  const parentRef = useRef<any | null>(null);
   const { handleAddDialog, showAddDialog } = useManageNotificationContext();
   const { reload } = useDataGrid();
   const { GetData, PostData } = useCallApi();
   const [alert, setAlert] = useState({ show: false, message: '' });
 
   const initialState = {
-    customers: [],
+    customers: [] as string[],
+    all_customer: '',
     type: '',
     via: '',
     subject: '',
@@ -56,12 +56,25 @@ const AddDialog = () => {
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     setFormField({ ...formField, [e.target.name]: e.target.value });
+
+    if (e.target.name === 'all_customer' && e.target.value === 'true') {
+      setFormField((prev) => ({ ...prev, customers: [] }));
+    }
   };
 
   const doCreateNotification = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+
+    // const payload = {
+    //   ...formField,
+    //   subject:
+    //     formField.subject.trim() === '' && formField.via === 'sms'
+    //       ? 'SMS Notification'
+    //       : formField.subject
+    // };
+
     const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField);
-    console.log('API Response :', response);
+    // console.log('send response :', response);
 
     if (response?.status) {
       handleAddDialog(false);
@@ -80,44 +93,53 @@ const AddDialog = () => {
     }
   };
 
-  // const getCustomerList = async (sorting: any) => {
+  const getCustomerList = async (sorting: any) => {
-  //   try {
+    try {
-  //     sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
-  //     const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
-  //       limit: 100,
+        limit: 100,
-  //       page: 1,
+        page: 1,
-  //       with_deleted: false,
+        with_deleted: false,
-  //       order_field: sorting[0].id,
+        order_field: sorting[0].id,
-  //       order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
-  //     });
+      });
 
-  //     setCustomers(response?.data.list);
+      setCustomers(response?.data.list);
-  //   } catch (error) {
+    } catch (error) {
-  //     console.error('Error fetching customer', error);
+      console.error('Error fetching customer', error);
-  //   }
+    }
-  // };
+  };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (
-      formField.type.trim() === '' ||
+      formField.all_customer.trim() === '' ||
       formField.via.trim() === '' ||
-      formField.subject.trim() === '' ||
       formField.content.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill all required fields.' });
       return;
     }
 
+    if (formField.via === 'email' && formField.subject.trim() === '') {
+      setAlert({ show: true, message: 'Subject is required for E-Mail' });
+      return;
+    }
+
+    if (formField.via === 'fcm' && formField.subject.trim() === '') {
+      setAlert({ show: true, message: 'Subject is required form FCM' });
+      return;
+    }
+
     doCreateNotification(e);
     // console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   getCustomerList([{ id: 'id', desc: false }]);
+    getCustomerList([{ id: 'id', desc: false }]);
-  // }, []);
+  }, []);
 
   useEffect(() => {
     if (showAddDialog === false) {
@@ -140,7 +162,7 @@ const AddDialog = () => {
               </Alert>
             )}
 
-            {/* <div className="w-full">
+            <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">
                   Send To<span className="text-red-500">*</span>
@@ -149,20 +171,20 @@ const AddDialog = () => {
                   <label className="flex items-center space-x-2">
                     <input
                       type="radio"
-                      name="sendTo"
+                      name="all_customer"
-                      value="all"
+                      value="true"
-                      checked={formField.sendTo === 'all'}
+                      checked={formField.all_customer === 'true'}
                       onChange={handleChange}
                       className="accent-blue-600"
                     />
-                    <span>All Users</span>
+                    <span>All Customers</span>
                   </label>
                   <label className="flex items-center space-x-2">
                     <input
                       type="radio"
-                      name="sendTo"
+                      name="all_customer"
-                      value="selected"
+                      value="false"
-                      checked={formField.sendTo === 'selected'}
+                      checked={formField.all_customer === 'false'}
                       onChange={handleChange}
                       className="accent-blue-600"
                     />
@@ -170,9 +192,9 @@ const AddDialog = () => {
                   </label>
                 </div>
               </div>
-            </div> */}
+            </div>
 
-            {/* <div className="w-full">
+            <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">Customer</label>
                 <Popover open={open} onOpenChange={setOpen}>
@@ -181,10 +203,12 @@ const AddDialog = () => {
                       type="button"
                       className="input col-span-5 text-left flex justify-between"
                       style={{ color: 'inherit' }}
+                      disabled={formField.all_customer !== 'false'}
                     >
                       <span>
-                        {customers.find((customer) => customer.id === formField.customers)
+                        {formField.customers.length === 0
-                          ?.username || 'Select Customer'}
+                          ? 'Select Customers'
+                          : `${formField.customers.length} Customers Selected`}
                       </span>
                       <ChevronDown className="w-4 h-4 opacity-70" />
                     </button>
@@ -206,11 +230,16 @@ const AddDialog = () => {
                               key={customer.id}
                               value={customer.username}
                               onSelect={() => {
-                                setFormField({
+                                const customerId = customer.id;
-                                  ...formField,
+                                setFormField((prev) => {
-                                  customers: customer.id
+                                  const isSelected = prev.customers.includes(customerId);
+                                  return {
+                                    ...prev,
+                                    customers: isSelected
+                                      ? prev.customers.filter((id) => id !== customerId)
+                                      : [...prev.customers, customerId]
+                                  };
                                 });
-                                setOpen(false);
                               }}
                             >
                               {customer.username}
@@ -222,13 +251,11 @@ const AddDialog = () => {
                   </PopoverContent>
                 </Popover>
               </div>
-            </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">
+                <label className="form-label flex items-center gap-1 max-w-56">Type</label>
-                  Type<span className="text-red-500">*</span>
-                </label>
                 <div className="flex gap-6 items-center">
                   {['info', 'promo'].map((type) => (
                     <label key={type} className="flex items-center space-x-2">
@@ -299,7 +326,7 @@ const AddDialog = () => {
                   placeholder="Enter Subject"
                   value={formField.subject}
                   onChange={handleChange}
-                  disabled={formField.via !== 'email'}
+                  disabled={formField.via !== 'email' && formField.via !== 'fcm'}
                 />
               </div>
             </div>

src/pages/notification/blocks/ListToolbar.tsx

@@ -1,14 +1,16 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
 import { Button } from '@/components/ui/button';
-import React, { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManageNotificationContext();
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>(
+    (table.getColumn('content')?.getFilterValue() as string) ?? ''
+  );
 
-  const handleKeydown = (event: React.KeyboardEvent) => {
+  const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
       handleSearch();
     }
@@ -16,8 +18,18 @@ const ListToolBar = () => {
 
   const handleSearch = () => {
     table.getColumn('content')?.setFilterValue(searchValue);
+    table.setPageIndex(0);
   };
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('content')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
   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">
@@ -27,13 +39,12 @@ const ListToolBar = () => {
               <KeenIcon icon="magnifier" />
               <input
                 type="text"
-                placeholder="Search users"
+                placeholder="Search notifications"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeydown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -41,7 +52,7 @@ const ListToolBar = () => {
               >
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

src/pages/notification/hooks/ManageNotificationContext.tsx

@@ -101,34 +101,6 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
         enableHiding: false,
         cell: ({ row }) => moment(row.original.created_at).format('YYYY-MM-DD HH:mm:ss')
       }
-      // {
-      //   id: 'actions',
-      //   header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
-      //   meta: {
-      //     headerClassName: 'w-[100px]',
-      //     cellClassName: 'text-center'
-      //   },
-      //   cell: (data: any) => {
-      //     const row = data.row.original;
-
-      //     return (
-      //       <>
-      //         <button
-      //           className="btn btn-sm btn-icon btn-clear btn-light"
-      //           onClick={() => handleEditDialog(true, row.id)}
-      //         >
-      //           <KeenIcon icon="notepad-edit" />
-      //         </button>
-      //         <button
-      //           className="btn btn-sm btn-icon btn-clear btn-light"
-      //           onClick={() => handleDeleteDialog(true, row.id)}
-      //         >
-      //           <KeenIcon icon="trash" />
-      //         </button>
-      //       </>
-      //     );
-      //   }
-      // }
     ],
     [handleEditDialog, handleDeleteDialog]
   );
@@ -146,7 +118,7 @@ const ManageNotifContextProvider = ({ children }: { children: React.ReactNode })
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
         filter: JSON.stringify(filter)
       });
-      console.log('API Response notif: ', response);
+      // console.log('API Response notif: ', response);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
       console.error('Error fetching notification', error);

src/pages/settings/user/manage-position/blocks/ListToolBar.tsx

@@ -1,16 +1,14 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useManagePositionContext } from '../hooks';
 import { Button } from '@/components/ui/button';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useManagePositionContext();
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>(
-
+    (table.getColumn('name')?.getFilterValue() as string) ?? ''
-  const handleSearch = () => {
+  );
-    table.getColumn('name')?.setFilterValue(searchValue);
-  };
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
@@ -18,6 +16,19 @@ const ListToolBar = () => {
     }
   };
 
+  const handleSearch = () => {
+    table.getColumn('username')?.setFilterValue(searchValue);
+    table.setPageIndex(0);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('username')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
   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">
@@ -30,10 +41,9 @@ const ListToolBar = () => {
                 placeholder="Search roles"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -41,7 +51,7 @@ const ListToolBar = () => {
               >
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
 
           <div className="flex gap-3 items-center">

src/pages/settings/user/manage-user/blocks/ListToolBar.tsx

@@ -1,16 +1,14 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { useUserContext } from '../hooks';
 import { Button } from '@/components/ui/button';
-import React, { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 const ListToolBar = () => {
   const { table, reload } = useDataGrid();
   const { handleAddDialog } = useUserContext();
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState<string>(
-
+    (table.getColumn('username')?.getFilterValue() as string) ?? ''
-  const handleSearch = () => {
+  );
-    table.getColumn('username')?.setFilterValue(searchValue);
-  };
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
@@ -18,6 +16,19 @@ const ListToolBar = () => {
     }
   };
 
+  const handleSearch = () => {
+    table.getColumn('username')?.setFilterValue(searchValue);
+    table.setPageIndex(0);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      table.getColumn('username')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [searchValue, table]);
+
   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">
@@ -30,10 +41,9 @@ const ListToolBar = () => {
                 placeholder="Search Username"
                 value={searchValue}
                 onChange={(event) => setSearchValue(event.target.value)}
-                onKeyDown={handleKeyDown}
               />
             </label>
-            <DefaultTooltip title={'Search'} placement={'top'}>
+            {/* <DefaultTooltip title={'Search'} placement={'top'}>
               <Button
                 variant="outline"
                 className="h-7.5 disabled:bg-gray-400"
@@ -41,7 +51,7 @@ const ListToolBar = () => {
               >
                 <KeenIcon icon="magnifier" />
               </Button>
-            </DefaultTooltip>
+            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button

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

@@ -470,7 +470,8 @@ const AddDialog = () => {
                           <SelectItem value="TE">Top Up Escrow </SelectItem>
                           <SelectItem value="TM">Top Up Master Agent </SelectItem>
                           <SelectItem value="TA">Top Up Agent </SelectItem>
-
+                          <SelectItem value="PL">Purchase Loja</SelectItem>
+                          
                         </SelectContent>
                       </Select>
                     </div>

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

@@ -174,7 +174,7 @@ const EditDialog = () => {
         updated_at: formattedTime
       }));
     }
-  }, [showEditDialog, parsedUser]);
+  }, [showEditDialog]);
 
   const selectedPermissionNames = groups
     .filter((g) => formField.permission.includes(g.id))
@@ -238,7 +238,7 @@ const EditDialog = () => {
       });
       return false;
     }
-  }, [formField, selectedTransferType, PutData]);
+  }, [formField, selectedTransferType]);
 
   useEffect(() => {
     if (!showEditDialog) return;
@@ -263,7 +263,7 @@ const EditDialog = () => {
     };
 
     getCustomerList();
-  }, [showEditDialog, GetData]);
+  }, [showEditDialog]);
 
   useEffect(() => {
     if (!showEditDialog) return;
@@ -287,7 +287,7 @@ const EditDialog = () => {
     };
 
     getGroupList();
-  }, [showEditDialog, GetData]);
+  }, [showEditDialog]);
 
   useEffect(() => {
     if (!showEditDialog) return;
@@ -365,6 +365,7 @@ const EditDialog = () => {
 
     return () => clearTimeout(timer);
   }, [showEditDialog, selectedTransferType, GetData]);
+
   useEffect(() => {
     if (showEditDialog === false) {
       resetForm();
@@ -589,7 +590,7 @@ const EditDialog = () => {
                           <SelectValue placeholder="Select" />
                         </SelectTrigger>
                         <SelectContent>
-                        <SelectItem value="D">Disbursement </SelectItem>
+                          <SelectItem value="D">Disbursement </SelectItem>
                           <SelectItem value="O">Other </SelectItem>
                           <SelectItem value="CA">Change Group Emoney Customer to Agent </SelectItem>
                           <SelectItem value="AC">Change Group Emoney Agent to Customer </SelectItem>
@@ -603,6 +604,7 @@ const EditDialog = () => {
                           <SelectItem value="TE">Top Up Escrow </SelectItem>
                           <SelectItem value="TM">Top Up Master Agent </SelectItem>
                           <SelectItem value="TA">Top Up Agent </SelectItem>
+                          <SelectItem value="PL">Purchase Loja</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>

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

@@ -12,6 +12,7 @@ const ListToolbar = () => {
   useEffect(() => {
     const timer = setTimeout(() => {
       table.getColumn('name')?.setFilterValue(searchValue);
+      table.setPageIndex(0);
     }, 200);
 
     return () => clearTimeout(timer);

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

@@ -185,7 +185,8 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
             R: 'Reward Point',
             TE:'Top Up Escrow',
             TM:'Top Up Master Agent',
-            TA:'Top Up Agent'
+            TA:'Top Up Agent',
+            PL:'Purchase Loja'
           };
 
           return mapping[row.type] || 'Unknown';