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

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

@@ -23,6 +23,7 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -75,6 +76,13 @@ const AddDialog = () => {
         resetForm();
         reload();
         toast.success('Reward Create successfully!');
+        const createActivity = {
+          module: 'Manage Reward',
+          description: `Create New Reward => ${formField.name}`,
+          action: 'C'
+        };
+
+        doSaveLogActivity(createActivity);
       } else {
         toast.error('Failed to create reward.');
         setAlert({ show: true, message: 'Failed to create reward. Please try again.' });

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

@@ -13,6 +13,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { DialogDescription } from '@radix-ui/react-dialog';
 import { useManageRewardContext } from '../hooks/useManageRewardContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -33,17 +34,25 @@ const DeleteDialog = () => {
       return;
     }
     // console.log('Ini datanya:', selectedReward);
-    const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward?.id}/true`, {
+    const response = await DeleteData(`${API_URL}/reward/delete/${selectedReward}/true`, {
-      id: selectedReward.id
+      id: selectedReward
     });
+    // console.log('Response Delete:', response);
 
     if (response?.status) {
-      setAlert({ show: false, message: '' });
+      setAlert((prev) => ({ ...prev, show: false, message: '' }));
       handleDeleteDialog(false, null);
       toast.success('Success Delete Reward');
       reload();
+      const createActivity = {
+        module: 'Manage Reward',
+        description: `Delete Reward => ${selectedReward}`,
+        action: 'D'
+      };
+
+      doSaveLogActivity(createActivity);
     } else {
-      setAlert({ show: true, message: response?.message });
+      setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
       toast.error('Failed Delete Reward');
     }
   }, [selectedReward, DeleteData, handleDeleteDialog, reload]);

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

@@ -23,6 +23,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { useManageRewardContext } from '../hooks/useManageRewardContext';
+import { doSaveLogActivity } from '@/actions/GlobalActions';
 
 const API_URL = apiConfig.service_master_data;
 
@@ -57,7 +58,9 @@ const EditDialog = () => {
 
   const RewardType = {
     'Daily Check in': 'D',
-    Referal: 'R'
+    Referal: 'R',
+    'Level Pro': 'P',
+    'Level Prioritas': 'L'
   } as const;
 
   type RewardTypeValue = (typeof RewardType)[keyof typeof RewardType];
@@ -67,13 +70,20 @@ const EditDialog = () => {
       e.preventDefault();
 
       // console.log('Ini datanya:', selectedReward);
-      const response = await PutData(`${API_URL}/reward/update/${selectedReward?.id}`, formField);
+      const response = await PutData(`${API_URL}/reward/update/${selectedReward}`, formField);
 
       if (response?.status) {
         resetForm();
         handleEditDialog(false, null);
         toast.success('Success Update Reward');
         reload();
+        const editActivity = {
+          module: 'Manage Reward',
+          description: `Edit Reward => ${formField.name}`,
+          action: 'U'
+        };
+
+        doSaveLogActivity(editActivity);
       } else {
         toast.error('Error Update Reward');
         setAlert({ show: true, message: 'Failed to Update Reward. Please try again.' });
@@ -118,7 +128,7 @@ const EditDialog = () => {
 
   useEffect(() => {
     if (selectedReward) {
-      doFetchData(selectedReward.id.toString());
+      doFetchData(selectedReward);
     }
   }, [selectedReward]);
 

src/pages/master/reward/hooks/ManageRewardContext.tsx

@@ -6,7 +6,7 @@ import React, { createContext, useCallback, useMemo, useState } from 'react';
 import { Toaster } from 'sonner';
 import ListToolbar from '../blocks/ListToolbar';
 
-interface Reward {
+interface SelectedReward {
   id: number;
   name: string;
   type: string;
@@ -14,23 +14,14 @@ interface Reward {
   status: string;
 }
 
-const initialState = {
-  id: '',
-  name: '',
-  type: '',
-  amount: '',
-  status: ''
-};
-
 interface ContextProps {
   showAddDialog: boolean;
   handleAddDialog: (show: boolean) => void;
   showEditDialog: boolean;
-  handleEditDialog: (show: boolean, selected_reward: Reward | null) => void;
+  handleEditDialog: (show: boolean, selected_reward: string | null) => void;
   showDeleteDialog: boolean;
-  handleDeleteDialog: (show: boolean, selected_rewad: Reward | null) => void;
+  handleDeleteDialog: (show: boolean, selected_reward: string | null) => void;
-  selectedReward: Reward | null;
+  selectedReward: string | null;
-  reward: string | null;
 }
 
 const initialProps: ContextProps = {
@@ -40,31 +31,29 @@ const initialProps: ContextProps = {
   handleEditDialog: () => {},
   showDeleteDialog: false,
   handleDeleteDialog: () => {},
-  selectedReward: null,
+  selectedReward: null
-  reward: null
 };
 
 const ManageRewardContext = createContext<ContextProps>(initialProps);
 const API_URL_MASTER_DATA = apiConfig.service_master_data;
 
 const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }) => {
-  const [reward, setRewards] = useState<string | null>(null);
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
-  const [selectedReward, setSelectedReward] = useState<Reward | null>(null);
+  const [selectedReward, setSelectedReward] = useState<string | null>(null);
   const { GetData } = useCallApi();
 
   const handleAddDialog = useCallback((show: boolean) => {
     setShowAddDialog(show);
   }, []);
 
-  const handleEditDialog = useCallback((show: boolean, selected_reward: Reward | null) => {
+  const handleEditDialog = useCallback((show: boolean, selected_reward: string | null) => {
     setShowEditDialog(show);
     setSelectedReward(show ? selected_reward : null);
   }, []);
 
-  const handleDeleteDialog = useCallback((show: boolean, selected_reward: Reward | null) => {
+  const handleDeleteDialog = useCallback((show: boolean, selected_reward: string | null) => {
     setShowDeleteDialog(show);
     setSelectedReward(show ? selected_reward : null);
   }, []);
@@ -135,13 +124,13 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
             <>
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
-                onClick={() => handleEditDialog(true, row)}
+                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)}
+                onClick={() => handleDeleteDialog(true, row.id)}
               >
                 <KeenIcon icon="trash" />
               </button>
@@ -154,7 +143,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
         }
       }
     ],
-    []
+    [handleEditDialog, handleDeleteDialog]
   );
 
   const getRewardList = async (page: number, limit: number, sorting: any, filter: any) => {
@@ -162,7 +151,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
       sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
       filter = filter.length == 0 ? {} : { any: filter[0].value?.toLowerCase() };
       const response = await GetData(`${API_URL_MASTER_DATA}/reward/list`, {
-        limit,
+        limit: limit,
         page: page + 1,
         with_deleted: false,
         order_field: sorting[0].id,
@@ -171,7 +160,6 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
       });
       // console.log('API Response:', response?.data.list);
       // console.log('reward list :', response);
-      setRewards(response?.data.list);
       return { data: response?.data.list, totalCount: response?.data.total_count };
     } catch (error) {
       console.error('Error fethcing reward', error);
@@ -181,7 +169,6 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
   return (
     <ManageRewardContext.Provider
       value={{
-        reward,
         showAddDialog,
         handleAddDialog,
         showEditDialog,
@@ -210,4 +197,4 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
 };
 
 export { ManageRewardContext, ManageRewardContextProvider };
-export type { Reward };
+export type { SelectedReward };

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

@@ -15,6 +15,16 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { ChevronDown } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { useUserContext } from '../hooks';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -25,6 +35,14 @@ import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import clsx from 'clsx';
 
+export interface CustomerProps {
+  id: string;
+  msisdn: string;
+  email: string;
+  fullname: string;
+  username: string;
+}
+
 interface RoleListProps {
   id: string;
   name: string;
@@ -42,7 +60,9 @@ interface CreateUserParams {
   status: string;
 }
 
+const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL = apiConfig.service_dashboard;
+
 type PasswordType = 'password' | 'retype_password';
 
 const AddDialog = () => {
@@ -62,7 +82,8 @@ const AddDialog = () => {
     retype_password: '',
     name: '',
     id_role: '',
-    status: ''
+    status: '',
+    customerid: ''
   };
   const [formField, setFormField] = useState(initialState);
   const [showPassword, setShowPassword] = useState({
@@ -71,6 +92,8 @@ const AddDialog = () => {
   });
 
   const [messagePassword, setMessagePassword] = useState(true);
+  const [open, setOpen] = useState(false);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [passwordErrors, setPasswordErrors] = useState<string[]>([]);
 
@@ -155,6 +178,23 @@ const AddDialog = () => {
     // console.log('ini data user_role:', response?.data);
   }, []);
 
+  const getCustomerList = async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      setCustomers(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching customer', error);
+    }
+  };
+
   useEffect(() => {
     fetchRoles();
   }, [fetchRoles]);
@@ -162,7 +202,7 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    console.log('Form data before submit:', formField);
+    // console.log('Form data before submit:', formField);
 
     if (
       formField.email.trim() === '' ||
@@ -171,7 +211,8 @@ const AddDialog = () => {
       formField.retype_password.trim() === '' ||
       formField.name.trim() === '' ||
       formField.id_role.trim() === '' ||
-      formField.status.trim() === ''
+      formField.status.trim() === '' ||
+      formField.customerid.trim() === ''
     ) {
       setAlert({ show: true, message: 'Please fill name field.' });
       return;
@@ -196,6 +237,10 @@ const AddDialog = () => {
     }
   }, [showAddDialog]);
 
+  useEffect(() => {
+    getCustomerList([{ id: 'id', desc: false }]);
+  }, []);
+
   const togglePassword = useCallback((event: MouseEvent<HTMLButtonElement>, key: string) => {
     event.preventDefault();
     setShowPassword((prev) => ({ ...prev, [key]: !prev[key as PasswordType] }));
@@ -262,6 +307,58 @@ 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">Customer</label>
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button
+                          type="button"
+                          className="input col-span-5 text-left flex justify-between"
+                          style={{ color: 'inherit' }}
+                        >
+                          <span>
+                            {customers.find((customer) => customer.id === formField.customerid)
+                              ?.username || 'Select Customer'}
+                          </span>
+                          <ChevronDown className="w-4 h-4 opacity-70" />
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Customer..." />
+                          <CommandList
+                            className="max-h-[300px] overflow-y-auto"
+                            style={{ touchAction: 'pan-y' }}
+                            onWheel={(e) => {
+                              e.currentTarget.scrollTop += e.deltaY;
+                            }}
+                          >
+                            <CommandEmpty>No Customer found.</CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((customer) => (
+                                <CommandItem
+                                  key={customer.id}
+                                  value={customer.username}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      customerid: customer.id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.username}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                  </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">Email</label>

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

@@ -34,6 +34,7 @@ const DeleteDialog = () => {
     const response = await DeleteData(`${API_URL}/user/delete/${selectedUser}/${enforce}`, {
       id: selectedUser
     });
+    // console.log('Delete Response User:', response);
     if (response?.status) {
       setAlert((prev) => ({ ...prev, show: false, message: '' }));
       handleDeleteDialog(false, null);

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

@@ -6,7 +6,15 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
-
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import {
   Dialog,
   DialogBody,
@@ -15,7 +23,9 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
+import { CustomerProps } from './AddDialog';
 import { useUserContext } from '../hooks';
+import { ChevronDown } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { apiConfig } from '@/config/api.config';
@@ -30,6 +40,7 @@ interface RoleListProps {
   status: string;
 }
 
+const API_URL_CUSTOMER = apiConfig.service_customer;
 const API_URL = apiConfig.service_dashboard;
 
 const initialState = {
@@ -37,7 +48,8 @@ const initialState = {
   username: '',
   email: '',
   id_role: '',
-  status: ''
+  status: '',
+  customerid: ''
 };
 
 const EditDialog = () => {
@@ -45,7 +57,9 @@ const EditDialog = () => {
   const { showEditDialog, selectedUser, handleEditDialog } = useUserContext();
   const { reload } = useDataGrid();
   const { GetData, PutData } = useCallApi();
+  const [open, setOpen] = useState(false);
   const [roles, setRoles] = useState<RoleListProps[]>([]);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -109,9 +123,27 @@ const EditDialog = () => {
     }
   }, []);
 
+  const getCustomerList = async (sorting: any) => {
+    try {
+      sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
+      const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+        limit: 100,
+        page: 1,
+        with_deleted: false,
+        order_field: sorting[0].id,
+        order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
+      });
+
+      // console.log('CUSTOMER: ', response?.data);
+      setCustomers(response?.data.list);
+    } catch (error) {
+      console.error('Error fetching customer', error);
+    }
+  };
+
   const doFetchUserData = useCallback(async (id: string) => {
     const response = await GetData(`${API_URL}/user/detail/${id}`, { id });
-    // console.log('User detail response:', response);
+    // console.log('User detail response:', response?.data);
 
     if (response?.status) {
       setFormField((prev) => ({
@@ -120,8 +152,10 @@ const EditDialog = () => {
         username: response.data.username,
         email: response.data.email,
         id_role: response.data.idRole,
-        status: response.data.status
+        status: response.data.status,
+        customerid: response.data.customerid
       }));
+      // console.log('Customer ID dari user detail:', response.data.customerid);
     } else {
       setFormField((prev) => ({
         ...prev,
@@ -129,7 +163,8 @@ const EditDialog = () => {
         username: '',
         email: '',
         id_role: '0',
-        status: ''
+        status: '',
+        customerid: ''
       }));
     }
     // console.log('Fetched ID Role:', response?.data.id_role);
@@ -141,6 +176,10 @@ const EditDialog = () => {
     }
   }, [selectedUser]);
 
+  useEffect(() => {
+    getCustomerList([{ id: 'id', desc: false }]);
+  }, []);
+
   useEffect(() => {
     if (showEditDialog === false) {
       resetForm();
@@ -220,6 +259,58 @@ const EditDialog = () => {
                   </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">Customer</label>
+                    <Popover open={open} onOpenChange={setOpen}>
+                      <PopoverTrigger asChild>
+                        <button
+                          type="button"
+                          className="input col-span-5 text-left flex justify-between"
+                          style={{ color: 'inherit' }}
+                        >
+                          <span>
+                            {customers.find((customer) => customer.id === formField.customerid)
+                              ?.username || 'Select Customer'}
+                          </span>
+                          <ChevronDown className="w-4 h-4 opacity-70" />
+                        </button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[400px] p-0">
+                        <Command>
+                          <CommandInput placeholder="Search Customer..." />
+                          <CommandList
+                            className="max-h-[300px] overflow-y-auto"
+                            style={{ touchAction: 'pan-y' }}
+                            onWheel={(e) => {
+                              e.currentTarget.scrollTop += e.deltaY;
+                            }}
+                          >
+                            <CommandEmpty>No Customer found.</CommandEmpty>
+                            <CommandGroup>
+                              {customers.map((customer) => (
+                                <CommandItem
+                                  key={customer.id}
+                                  value={customer.username}
+                                  onSelect={() => {
+                                    setFormField({
+                                      ...formField,
+                                      customerid: customer.id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.username}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                  </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">Email</label>

src/pages/settings/user/manage-user/hooks/ManageUserContext.tsx

@@ -27,6 +27,7 @@ interface SelectedUser {
   role: string;
   new_password: string;
   check_new_password: string;
+  customer: string;
 }
 
 const initialProps: ContextProps = {
@@ -83,6 +84,16 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         enableSorting: true,
         enableHiding: false
       },
+      {
+        accessorFn: (row) => row.customer?.username,
+        id: 'customer',
+        header: ({ column }) => <DataGridColumnHeader title="Customer" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        meta: {
+          headerClassName: 'w-[300px]'
+        }
+      },
       {
         accessorFn: (row) => row.email,
         id: 'email',
@@ -100,7 +111,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         enableSorting: false,
         enableHiding: false,
         meta: {
-          headerClassName: 'w-[350px]'
+          headerClassName: 'w-[250px]'
         }
       },
       {
@@ -179,7 +190,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
   );
 
   const doGetListData = async (page: number, limit: number, sorting: any, filter: any) => {
-    sorting = sorting.length == 0 ? [{ id: 'username', desc: false }] : sorting;
+    sorting = sorting.length == 0 ? [{ id: 'Users.username', desc: false }] : sorting;
     filter = filter.length == 0 ? {} : { any: filter[0].value.toLowerCase() };
     const response = await GetData(`${API_URL}/user/list`, {
       limit: limit,
@@ -189,7 +200,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
       order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
       filter: JSON.stringify(filter)
     });
-    console.log('response api:', response);
+    // console.log('response api:', response);
 
     return { data: response?.data.list, totalCount: response?.data.total_count };
   };
@@ -215,7 +226,7 @@ const ManageUserContextProvider = ({ children }: { children: React.ReactNode })
         pagination={{ size: 10 }}
         toolbar={<ListToolBar />}
         layout={{ card: true }}
-        sorting={[{ id: 'username', desc: false }]}
+        sorting={[{ id: 'Users.username', desc: false }]}
         serverSide={true}
         onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
           doGetListData(pageIndex, pageSize, sorting, columnFilters)

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

@@ -50,9 +50,18 @@ interface TransactionTypeProps {
   id: string;
   name: string;
 }
-
+interface WalletProps {
+  id: string;
+  name: string;
+}
+interface CustomerProps {
+  id: string;
+  username: string;
+  msisdn: string;
+}
 const API_URL = apiConfig.service_transaction;
-
+const API_URL_MASTER_DATA = apiConfig.service_master_data;
+const API_URL_CUSTOMER = apiConfig.service_customer;
 const AddFeeDialog = () => {
   const parentRef = useRef<any | null>(null);
   const { reload } = useDataGrid();
@@ -64,6 +73,9 @@ const AddFeeDialog = () => {
     message: ''
   });
   const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
+  const [wallets, setWallets] = useState<WalletProps[]>([]);
+  const [customers, setCustomers] = useState<CustomerProps[]>([]);
+  const [defaultCustomer, setDefaultCustomer] = useState(''); 
 
   const initialState = {
     name: '',
@@ -75,11 +87,17 @@ const AddFeeDialog = () => {
     period_end: '',
     deduct_amount: 0,
     deduct_percentage: 0,
+    fee_amount: 0,
     priority: '',
     status: '',
     status_include: '',
     created_by: '',
-    created_at: ''
+    created_at: '',
+    deduct_from: '',
+    deduct_from_account: '',
+    credit_to: '',
+    credit_destination: '00000000-0000-0000-0000-000000000000',
+    credit_destination_account: ''
   };
 
   const [formField, setFormField] = useState(initialState);
@@ -104,12 +122,19 @@ const AddFeeDialog = () => {
       maximum_amount: formField.maximum_amount,
       deduct_amount: formField.deduct_amount,
       deduct_percentage: formField.deduct_percentage,
+      fee_amount: formField.fee_amount,
       transaction_type: formField.transaction_type,
       status: formField.status,
       status_include: formField.status_include,
-      priority: formField.priority
+      priority: formField.priority,
+      deduct_from: formField.deduct_from,
+      deduct_from_account: formField.deduct_from_account,
+      credit_to: formField.credit_to,
+      credit_destination: formField.credit_destination,
+      credit_destination_account: formField.credit_destination_account
     };
   };
+  
   useEffect(() => {
     const created_time = new Date();
     const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -138,38 +163,134 @@ const AddFeeDialog = () => {
         });
         setTransactionTypes(response?.data.list || []);
       } catch (error) {
-        console.error('Error fetching customer', error);
+        console.error('Error fetching transaction types', error);
       }
     };
 
     getTransactionTypeList([{ id: 'id', desc: false }]);
   }, [showAddFeeDialog]);
 
+  const fetchWallets = useCallback(async () => {
+    const params = {
+      limit: 100,
+      page: 1,
+      with_deleted: false,
+      order_field: 'Wallets.name',
+      order_direction: 'ASC',
+    };
+    try {
+      const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, params);
+      if (response?.status && response?.data) {
+        setWallets(response.data.list);
+      } else {
+        setWallets([]);
+      }
+    } catch (error) {
+      console.error('Error fetching wallets', error);
+      setWallets([]);
+    }
+  }, [GetData]);
+  
+  useEffect(() => {
+    if (!showAddFeeDialog) return;
+    fetchWallets();
+  }, [showAddFeeDialog, fetchWallets]);
+
+  useEffect(() => {
+    if (!showAddFeeDialog) return;
+    const getCustomerList = async (sorting: any) => {
+      try {
+        sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
+
+        const response = await GetData(`${API_URL_CUSTOMER}/customer/list`, {
+          limit: 100,
+          page: 1,
+          with_deleted: false,
+          order_field: sorting[0].id,
+          order_direction: sorting[0].desc ? 'DESC' : 'ASC'
+        });
+        const customerList = response?.data.list || [];
+        setCustomers(customerList);
+        
+        if (customerList.length > 0) {
+          setDefaultCustomer(customerList[0].id);
+        }
+      } catch (error) {
+        console.error('Error fetching customers', error);
+        setCustomers([]);
+      }
+    };
+
+    getCustomerList([{ id: 'id', desc: false }]);
+  }, [showAddFeeDialog, GetData]);
+
   const doCreateTransferType = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      for (const key in formField) {
+      setIsSubmitting(true);
-        if (
+      
-          formField[key as keyof typeof formField] === ''       ) {
+      const requiredFields = [
-          setAlert({ show: true, message: 'All fields must be filled out' });
+        'name', 
+        'description',
+        'period_start',
+        'period_end',
+        'transaction_type',
+        'status',
+        'status_include',
+        'priority',
+        'deduct_from',
+        'deduct_from_account',
+        'credit_to',
+        'credit_destination_account'
+      ];
+      
+      for (const field of requiredFields) {
+        if (formField[field as keyof typeof formField] === '') {
+          setAlert({ 
+            show: true, 
+            message: `All required fields must be filled out. Missing: ${field.replace(/_/g, ' ')}` 
+          });
+          setIsSubmitting(false);
           return;
         }
       }
+      
+      if (formField.credit_to === 'I' && !formField.credit_destination) {
+        setAlert({ 
+          show: true, 
+          message: 'Credit destination is required when Input Customer is selected' 
+        });
+        setIsSubmitting(false);
+        return;
+      }
 
       setAlert({ show: false, message: '' });
-      const response = await PostData(`${API_URL}/transactionfees/create`, {
+      
-        ...formField
+      const payload = { ...formField };
-      });
+      
-      if (response?.status) {
+      if (formField.credit_to !== 'I') {
-        // toast.success('Success Create Transfer Fee');
+        payload.credit_destination = '00000000-0000-0000-0000-000000000000';
-        reload();
+      }
-        resetForm();
+      
-        handleAddFeeDialog(false);
+      try {
-      } else {
+        const response = await PostData(`${API_URL}/transactionfees/create`, payload);
-        setAlert({ show: true, message: response?.message || 'Failed to create transfer fee' });
+        
+        if (response?.status) {
+          toast.success('Successfully created transfer fee');
+          reload();
+          resetForm();
+          handleAddFeeDialog(false);
+        } else {
+          setAlert({ show: true, message: response?.message || 'Failed to create transfer fee' });
+        }
+      } catch (error) {
+        console.error('Error creating transfer fee', error);
+        setAlert({ show: true, message: 'An error occurred while creating the transfer fee' });
+      } finally {
+        setIsSubmitting(false);
       }
     },
-    [formField]
+    [formField, PostData, reload, handleAddFeeDialog]
   );
 
   return (
@@ -194,7 +315,13 @@ const AddFeeDialog = () => {
           </div>
         </DialogHeader>
         <DialogBody className="max-h-[1080px] overflow-y-auto">
-          {alert.show && <Alert variant="danger">{alert.message}</Alert>}
+          {alert.show && (
+            <div className="sticky top-0 z-10 bg-white p-3">
+              <Alert variant="danger" className="mb-3">
+                <h3>{alert.message}</h3>
+              </Alert>
+            </div>
+          )}
           <form action="" onSubmit={doCreateTransferType}>
             <div className="card flex flex-col gap-5">
               <div className="card-body grid gap-5 p-0">
@@ -236,7 +363,7 @@ const AddFeeDialog = () => {
                         minimum_amount: values.floatValue || 0
                       }));
                     }}
-                    placeholder="Enter Max Transaction Per Day"
+                    placeholder="Enter Minimum Amount"
                   />
                 </div>
                 <div className="w-full">
@@ -253,7 +380,7 @@ const AddFeeDialog = () => {
                         maximum_amount: values.floatValue || 0
                       }));
                     }}
-                    placeholder="Enter Max Transaction Per Day"
+                    placeholder="Enter Maximum Amount"
                   />
                 </div>
                 <div className="w-full">
@@ -294,7 +421,7 @@ const AddFeeDialog = () => {
                         deduct_amount: values.floatValue || 0
                       }));
                     }}
-                    placeholder="Enter Max Transaction Per Day"
+                    placeholder="Enter Deduct Amount"
                   />
                 </div>
                 <div className="w-full">
@@ -311,11 +438,119 @@ const AddFeeDialog = () => {
                         deduct_percentage: values.floatValue || 0
                       }));
                     }}
-                    placeholder="Enter Max Transaction Per Day"
+                    placeholder="Enter Deduct Percentage"
                   />
                 </div>
                 <div className="w-full">
-                  <label className="form-label">Transacsion Type ID <span className="text-red-500">*</span></label>
+                  <label className="form-label">Fee Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.fee_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        fee_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Fee Amount"
+                  />
+                </div>
+                <div className="w-full">
+                  <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 })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Deduct From" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="D">Destination Member</SelectItem>
+                      <SelectItem value="S">Source Member</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Deduct From Destination <span className="text-red-500">*</span></label>
+                  <Select
+                    value={formField.deduct_from_account}
+                    onValueChange={(value) => setFormField({ ...formField, deduct_from_account: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Wallet" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {wallets.map((wallet) => (
+                        <SelectItem value={wallet.id} key={wallet.id}>
+                          {wallet.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Credit To <span className="text-red-500">*</span></label>
+                  <Select
+                    value={formField.credit_to}
+                    onValueChange={(value) => setFormField({ 
+                      ...formField, 
+                      credit_to: value,
+                      credit_destination: value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
+                    })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Credit To" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="D">Destination Member</SelectItem>
+                      <SelectItem value="S">Source Member</SelectItem>
+                      <SelectItem value="I">Input Customer</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                {formField.credit_to === 'I' && (
+                  <div className="w-full">
+                    <label className="form-label">Credit Destination <span className="text-red-500">*</span></label>
+                    <Select
+                      value={formField.credit_destination}
+                      onValueChange={(value) => setFormField({ ...formField, credit_destination: value })}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select Customer" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {customers.map((customer) => (
+                          <SelectItem value={customer.id} key={customer.id}>
+                            {customer.username} - {customer.msisdn}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+                <div className="w-full">
+                  <label className="form-label">Credit Destination Account <span className="text-red-500">*</span></label>
+                  <Select
+                    value={formField.credit_destination_account}
+                    onValueChange={(value) => setFormField({ ...formField, credit_destination_account: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Wallet" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {wallets.map((wallet) => (
+                        <SelectItem value={wallet.id} key={wallet.id}>
+                          {wallet.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="w-full">
+                  <label className="form-label">Transaction Type ID <span className="text-red-500">*</span></label>
                   <Select
                     value={formField.transaction_type}
                     onValueChange={(transaction_type) =>
@@ -323,10 +558,10 @@ const AddFeeDialog = () => {
                     }
                   >
                     <SelectTrigger>
-                      <SelectValue placeholder="Select Wallet" />
+                      <SelectValue placeholder="Select Transaction Type" />
                     </SelectTrigger>
                     <SelectContent>
-                      {transactionTypes.map((transactiontype, idx) => (
+                      {transactionTypes.map((transactiontype) => (
                         <SelectItem value={transactiontype.id} key={transactiontype.id}>
                           {transactiontype.name}
                         </SelectItem>
@@ -402,4 +637,4 @@ const AddFeeDialog = () => {
   );
 };
 
-export default AddFeeDialog;
+export default AddFeeDialog;

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

@@ -9,7 +9,7 @@ import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContex
 
 const API_URL = apiConfig.service_transaction;
 
-const DeleteDialog = () => {
+const DeleteFeeDialog = () => {
   const { showDeleteFeeDialog, handleDeleteFeeDialog, selectedTransferFee } = useManageTransferFeeContext();
   const { reload } = useDataGrid();
   const { DeleteData } = useCallApi();
@@ -63,5 +63,5 @@ const DeleteDialog = () => {
   );
 };
 
-export default DeleteDialog;
+export default DeleteFeeDialog;
-export { DeleteDialog };
+

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

@@ -25,22 +25,22 @@ import { toast } from 'sonner';
 import { useCallApi } from '@/hooks';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { getAuth } from '@/auth';
-import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
-import AddFeeDialog from '../../transferfee/blocks/AddDialog';
 
 const API_URL = apiConfig.service_transaction;
-const API_URL_MASTERDATA = apiConfig.service_master_data;
+const API_URL_MASTER_DATA = apiConfig.service_master_data;
 const API_URL_CUSTOMER = apiConfig.service_customer;
 
 interface WalletProps {
-  Wallet_id: string;
+  id: string;
-  Wallet_name: string;
+  name: string;
+  description?: string;
 }
 
 interface CustomerProps {
   id: string;
   username: string;
   msisdn: string;
+  fullname?: string;
 }
 
 interface TransactionTypeProps {
@@ -63,22 +63,32 @@ const EditFeeDialog = () => {
     show: false,
     message: ''
   });
-  const [formField, setFormField] = useState({
+
+  const initialState = {
     name: '',
     description: '',
+    transaction_type: '',
     minimum_amount: 0,
     maximum_amount: 0,
     period_start: '',
     period_end: '',
     deduct_amount: 0,
     deduct_percentage: 0,
+    fee_amount: 0,
     priority: '',
     status: '',
     status_include: '',
-    transaction_type: '',
     updated_by: '',
-    updated_at: ''
+    updated_at: '',
-  });
+    deduct_from: '',
+    deduct_from_account: '',
+    credit_to: '',
+    credit_destination: '00000000-0000-0000-0000-000000000000',
+    credit_destination_account: ''
+  };
+
+  const [formField, setFormField] = useState(initialState);
+
   useEffect(() => {
     const updated_time = new Date();
     const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -91,45 +101,110 @@ const EditFeeDialog = () => {
       });
     }
   }, [showEditFeeDialog]);
+
+  const resetForm = () => {
+    if (selectedTransferFee) {
+      // Re-fetch the current data to reset the form to original values
+      fetchTransactionFee(selectedTransferFee);
+    } else {
+      setFormField(initialState);
+    }
+  };
+
   /* actions */
   const doUpdateTransferFee = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      const response = await PutData(`${API_URL}/transactionfees/update/${selectedTransferFee}`, {
+      setIsSubmitting(true);
-        ...formField
+      
-      });
+      const requiredFields = [
-      if (response?.status) {
+        'name', 
-        handleEditFeeDialog(false, null);
+        'description',
-        // toast.success('Success Update Transaction Fee');
+        'period_start',
-        reload();
+        'period_end',
-      } else {
+        'transaction_type',
-        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+        'status',
+        'status_include',
+        'priority',
+        'deduct_from',
+        'deduct_from_account',
+        'credit_to',
+        'credit_destination_account'
+      ];
+      
+      for (const field of requiredFields) {
+        if (formField[field as keyof typeof formField] === '') {
+          setAlert({ 
+            show: true, 
+            message: `All required fields must be filled out. Missing: ${field.replace(/_/g, ' ')}` 
+          });
+          setIsSubmitting(false);
+          return;
+        }
+      }
+      
+      if (formField.credit_to === 'I' && !formField.credit_destination) {
+        setAlert({ 
+          show: true, 
+          message: 'Credit destination is required when Input Customer is selected' 
+        });
+        setIsSubmitting(false);
+        return;
+      }
+
+      setAlert({ show: false, message: '' });
+      
+      const payload = { ...formField };
+      
+      if (formField.credit_to !== 'I') {
+        payload.credit_destination = '00000000-0000-0000-0000-000000000000';
+      }
+      
+      try {
+        const response = await PutData(`${API_URL}/transactionfees/update/${selectedTransferFee}`, payload);
+        
+        if (response?.status) {
+          toast.success('Successfully updated transfer fee');
+          reload();
+          handleEditFeeDialog(false, null);
+        } else {
+          setAlert({ show: true, message: response?.message || 'Failed to update transfer fee' });
+        }
+      } catch (error) {
+        console.error('Error updating transfer fee', error);
+        setAlert({ show: true, message: 'An error occurred while updating the transfer fee' });
+      } finally {
+        setIsSubmitting(false);
       }
     },
-    [formField, selectedTransferFee]
+    [formField, selectedTransferFee, PutData, reload, handleEditFeeDialog]
   );
+
   const fetchWallets = useCallback(async () => {
     const params = {
       limit: 100,
       page: 1,
       with_deleted: false,
-      order_field: 'name',
+      order_field: 'Wallets.name',
       order_direction: 'ASC',
-      filter: JSON.stringify({
-        status: 'Y'
-      })
     };
-    const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
+    try {
-    if (response?.status && response?.data) {
+      const response = await GetData(`${API_URL_MASTER_DATA}/wallet/list`, params);
-      setWallets(response.data.list);
+      if (response?.status && response?.data) {
-    } else {
+        setWallets(response.data.list);
+      } else {
+        setWallets([]);
+      }
+    } catch (error) {
+      console.error('Error fetching wallets', error);
       setWallets([]);
     }
-  }, []);
+  }, [GetData]);
 
   useEffect(() => {
+    if (!showEditFeeDialog) return;
     fetchWallets();
-  }, [fetchWallets]);
+  }, [showEditFeeDialog, fetchWallets]);
 
   useEffect(() => {
     if (!showEditFeeDialog) return;
@@ -146,12 +221,13 @@ const EditFeeDialog = () => {
         });
         setCustomers(response?.data.list || []);
       } catch (error) {
-        console.error('Error fetching customer', error);
+        console.error('Error fetching customers', error);
       }
     };
 
     getCustomerList([{ id: 'msisdn', desc: false }]);
-  }, []);
+  }, [showEditFeeDialog, GetData]);
+
   useEffect(() => {
     if (!showEditFeeDialog) return;
 
@@ -165,74 +241,90 @@ const EditFeeDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-        // console.log('Transaction Type: ', response?.data.list);
+        setTransactionTypes(response?.data.list || []);
-        setTransactionTypes(response?.data.list);
       } catch (error) {
-        console.error('Error fetching Transaction Type', error);
+        console.error('Error fetching transaction types', error);
       }
     };
 
     getTransactionTypeList([{ id: 'id', desc: false }]);
-  }, [showEditFeeDialog]);
+  }, [showEditFeeDialog, GetData]);
+
+  const formatDate = (dateString: string) => {
+    if (!dateString || dateString.includes('0001-01-01')) return '';
+    return dateString.split('T')[0];
+  };
 
   const fetchTransactionFee = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, { id });
+    try {
-
+      const response = await GetData(`${API_URL}/transactionfees/getdata/${id}`, { id });
-    if (response?.status) {
+  
-      setFormField((prev) => ({
+      if (response?.status) {
-        ...prev,
+        let creditTo = '';
-        name: response.data.name,
+        if (response.data.credit_destination?.id === '00000000-0000-0000-0000-000000000000') {
-        description: response.data.description,
+          creditTo = 'D';
-        minimum_amount: response.data.minimum_amount,
+        } else {
-        maximum_amount: response.data.maximum_amount,
+          creditTo = 'I';
-        period_start: response.data.period_start,
+        }
-        period_end: response.data.period_end,
+  
-        deduct_amount: response.data.deduct_amount,
+        setFormField({
-        deduct_percentage: response.data.deduct_percentage,
+          ...initialState,
-        priority: response.data.priority,
+          name: response.data.name || '',
-        status: response.data.status,
+          description: response.data.description || '',
-        status_include: response.data.status_include,
+          transaction_type: response.data.transaction_type?.id || '',
-        transaction_type: response.data.transaction_type.id
+          minimum_amount: response.data.minimum_amount || 0,
-      }));
+          maximum_amount: response.data.maximum_amount || 0,
+          period_start: formatDate(response.data.period_start),
+          period_end: formatDate(response.data.period_end),
+          deduct_amount: response.data.deduct_amount || 0,
+          deduct_percentage: response.data.deduct_percentage || 0,
+          fee_amount: response.data.fee_amount || 0,
+          priority: response.data.priority || '',
+          status: response.data.status || '',
+          status_include: response.data.status_include || '',
+          deduct_from: 'S',
+          deduct_from_account: response.data.deduct_from_account?.id || '',
+          credit_to: creditTo,
+          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', ' ')
+        });
+      }
+      console.log(response)
+    } catch (error) {
+      console.error('Error fetching transaction fee details', error);
+      setAlert({ show: true, message: 'Failed to fetch transaction fee details' });
     }
-  }, []);
+  }, [GetData, parsedUser?.username]); // only use username if that's all you need
-
+  
+  // This flag ensures it only fetches once per open
+  const hasFetchedRef = useRef(false);
+  
   useEffect(() => {
-    if (selectedTransferFee) {
+    if (selectedTransferFee && showEditFeeDialog && !hasFetchedRef.current) {
       fetchTransactionFee(selectedTransferFee);
+      hasFetchedRef.current = true;
     }
-  }, [selectedTransferFee]);
+  
-  const resetForm = () => {
+    // Reset fetch flag if dialog is closed
-    setFormField({
+    if (!showEditFeeDialog) {
-      name: '',
+      hasFetchedRef.current = false;
-      description: '',
+    }
-      minimum_amount: 0,
+  }, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
-      maximum_amount: 0,
+  
-      period_start: '',
-      period_end: '',
-      deduct_amount: 0,
-      deduct_percentage: 0,
-      priority: '',
-      status: '',
-      status_include: '',
-      transaction_type: '',
-      updated_by: '',
-      updated_at: ''
-    });
-  };
 
   return (
     <Dialog open={showEditFeeDialog} onOpenChange={(open) => handleEditFeeDialog(open, null)}>
       <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
+        <DialogTitle></DialogTitle>
+        <DialogDescription></DialogDescription>
         <DialogHeader className="p-5 border-0">
-          <DialogTitle></DialogTitle>
-          <DialogDescription></DialogDescription>
           <div className="flex items-center justify-between flex-wrap grow">
             <div className="flex flex-col justify-center">
               <h1 className="text-xl font-semibold leading-none text-gray-900">
-                Update Transaction Fee
+                Edit Transfer Fee
               </h1>
-              <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
             </div>
             <div
               className="cursor-pointer hover:opacity-100 opacity-50"
@@ -242,277 +334,344 @@ const EditFeeDialog = () => {
             </div>
           </div>
         </DialogHeader>
-        <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
+        <DialogBody className="max-h-[1080px] overflow-y-auto">
-          <div className="flex flex-col px-0">
+          {alert.show && (
-            {alert.show && (
+            <div className="sticky top-0 z-10 bg-white p-3">
-              <Alert variant="danger">
+              <Alert variant="danger" className="mb-3">
                 <h3>{alert.message}</h3>
               </Alert>
-            )}
+            </div>
-            <form action="" onSubmit={doUpdateTransferFee}>
+          )}
-              <div className="card flex flex-col gap-5">
+          
-                <div className="card-body grid gap-5 p-0">
+          <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>
+                  <Input
+                    className="input"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.name}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, name: target.value }))
+                    }
+                  />
+                </div>
+                
+                <div className="w-full">
+                  <label className="form-label">Description <span className="text-red-500">*</span></label>
+                  <Input
+                    className="input"
+                    type="text"
+                    autoComplete="off"
+                    value={formField.description}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, description: target.value }))
+                    }
+                  />
+                </div>
+                
+                <div className="w-full">
+                  <label className="form-label">Minimum Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.minimum_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        minimum_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Minimum Amount"
+                  />
+                </div>
+                
+                <div className="w-full">
+                  <label className="form-label">Maximum Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.maximum_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        maximum_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Maximum Amount"
+                  />
+                </div>
+                
+                <div className="w-full">
+                  <label className="form-label">Period Start <span className="text-red-500">*</span></label>
+                  <Input
+                    className="input"
+                    type="date"
+                    autoComplete="off"
+                    value={formField.period_start}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, period_start: target.value }))
+                    }
+                  />
+                </div>
+                
+                <div className="w-full">
+                  <label className="form-label">Period End <span className="text-red-500">*</span></label>
+                  <Input
+                    className="input"
+                    type="date"
+                    autoComplete="off"
+                    value={formField.period_end}
+                    onChange={({ target }) =>
+                      setFormField((prev) => ({ ...prev, period_end: target.value }))
+                    }
+                  />
+                </div>
+                
+                <div className="w-full">
+                  <label className="form-label">Deduct Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.deduct_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        deduct_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Deduct Amount"
+                  />
+                </div>
+                
+                <div className="w-full">
+                  <label className="form-label">Deduct Percentage</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.deduct_percentage}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        deduct_percentage: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Deduct Percentage"
+                  />
+                </div>
+                
+                <div className="w-full">
+                  <label className="form-label">Fee Amount</label>
+                  <NumericFormat
+                    className="input"
+                    value={formField.fee_amount}
+                    thousandSeparator="."
+                    decimalSeparator=","
+                    allowNegative={false}
+                    onValueChange={(values) => {
+                      setFormField((prev) => ({
+                        ...prev,
+                        fee_amount: values.floatValue || 0
+                      }));
+                    }}
+                    placeholder="Enter Fee Amount"
+                  />
+                </div>
+                
+                <div className="w-full">
+                  <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 })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Deduct From" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="D">Destination Member</SelectItem>
+                      <SelectItem value="S">Source Member</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                
+                <div className="w-full">
+                  <label className="form-label">Deduct From Destination <span className="text-red-500">*</span></label>
+                  <Select
+                    value={formField.deduct_from_account}
+                    onValueChange={(value) => setFormField({ ...formField, deduct_from_account: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Wallet" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {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>
+                  <Select
+                    value={formField.credit_to}
+                    onValueChange={(value) => setFormField({ 
+                      ...formField, 
+                      credit_to: value,
+                      credit_destination: value === 'I' ? '' : '00000000-0000-0000-0000-000000000000'
+                    })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Credit To" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="D">Destination Member</SelectItem>
+                      <SelectItem value="S">Source Member</SelectItem>
+                      <SelectItem value="I">Input Customer</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                
+                {formField.credit_to === 'I' && (
                   <div className="w-full">
-                    <label className="form-label">
+                    <label className="form-label">Credit Destination <span className="text-red-500">*</span></label>
-                      Transfer Free Name <span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      autoComplete="off"
-                      value={formField.name}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, name: target.value }))
-                      }
-                    />
-                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Description <span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      className="input"
-                      type="text"
-                      autoComplete="off"
-                      value={formField.description}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, description: target.value }))
-                      }
-                    />
-                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Minimum Amount
-                    </label>
-                    <NumericFormat
-                      className="input"
-                      value={formField.minimum_amount}
-                      thousandSeparator="."
-                      decimalSeparator=","
-                      allowNegative={false}
-                      onValueChange={(values) => {
-                        setFormField((prev) => ({
-                          ...prev,
-                          minimum_amount: values.floatValue || 0
-                        }));
-                      }}
-                      placeholder="Enter Minimum Amount"
-                    />
-                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Maximum Amount
-                    </label>
-                    <NumericFormat
-                      className="input"
-                      value={formField.maximum_amount}
-                      thousandSeparator="."
-                      decimalSeparator=","
-                      allowNegative={false}
-                      onValueChange={(values) => {
-                        setFormField((prev) => ({
-                          ...prev,
-                          maximum_amount: values.floatValue || 0
-                        }));
-                      }}
-                      placeholder="Enter Minimum Amount"
-                    />
-                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Period Start <span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      className="input"
-                      type="date"
-                      autoComplete="off"
-                      value={formField.period_start ? formField.period_start.split('T')[0] : ''}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, period_start: target.value }))
-                      }
-                    />
-                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Period End <span className="text-red-500">*</span>
-                    </label>
-                    <Input
-                      className="input"
-                      type="date"
-                      autoComplete="off"
-                      value={formField.period_end ? formField.period_end.split('T')[0] : ''}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, period_end: target.value }))
-                      }
-                    />
-                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Deduct Amount</label>
-                    <NumericFormat
-                      className="input"
-                      value={formField.deduct_amount}
-                      thousandSeparator="."
-                      decimalSeparator=","
-                      allowNegative={false}
-                      onValueChange={(values) => {
-                        setFormField((prev) => ({
-                          ...prev,
-                          deduct_amount: values.floatValue || 0
-                        }));
-                      }}
-                      placeholder="Enter Minimum Amount"
-                    />
-                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Deduct Percentage </label>
-                    <NumericFormat
-                      className="input"
-                      value={formField.deduct_percentage}
-                      thousandSeparator="."
-                      decimalSeparator=","
-                      allowNegative={false}
-                      onValueChange={(values) => {
-                        setFormField((prev) => ({
-                          ...prev,
-                          deduct_percentage: values.floatValue || 0
-                        }));
-                      }}
-                      placeholder="Enter Minimum Amount"
-                    />
-                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Transacsion Type ID <span className="text-red-500">*</span>
-                    </label>
                     <Select
-                      value={formField.transaction_type}
+                      value={formField.credit_destination}
-                      onValueChange={(transaction_type) =>
+                      onValueChange={(value) => setFormField({ ...formField, credit_destination: value })}
-                        setFormField((prev) => ({ ...prev, transaction_type }))
-                      }
                     >
                       <SelectTrigger>
-                        <SelectValue placeholder="Select Wallet" />
+                        <SelectValue placeholder="Select Customer" />
                       </SelectTrigger>
                       <SelectContent>
-                        {transactionTypes.map((transactiontype, idx) => (
+                        {customers.map((customer) => (
-                          <SelectItem value={transactiontype.id} key={transactiontype.id}>
+                          <SelectItem value={customer.id} key={customer.id}>
-                            {transactiontype.name}
+                            {customer.fullname || `${customer.username} - ${customer.msisdn}`}
                           </SelectItem>
                         ))}
                       </SelectContent>
                     </Select>
                   </div>
-                  <div className="w-full">
+                )}
-                    <label className="form-label">
+                
-                      Status <span className="text-red-500">*</span>
+                <div className="w-full">
-                    </label>
+                  <label className="form-label">Credit Destination Account <span className="text-red-500">*</span></label>
-                    <Select
-                      value={formField.status}
-                      onValueChange={(value) => setFormField({ ...formField, status: value })}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select Status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Active</SelectItem>
-                        <SelectItem value="N">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Status Included <span className="text-red-500">*</span>
-                    </label>
-                    <Select
-                      value={formField.status_include}
-                      onValueChange={(value) =>
-                        setFormField({ ...formField, status_include: value })
-                      }
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select Status" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Yes</SelectItem>
-                        <SelectItem value="N">No</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                  <div className="w-full">
-                    <label className="form-label">
-                      Priority <span className="text-red-500">*</span>
-                    </label>
-                    <Select
-                      value={formField.priority}
-                      onValueChange={(value) => setFormField({ ...formField, priority: value })}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select Priority" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="Y">Yes</SelectItem>
-                        <SelectItem value="N">No</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-
-                  {/* <div className="w-full">
-                  <label className="form-label">Priotity <span className="text-red-500">*</span></label>
                   <Select
-                    value={formField.priority}
+                    value={formField.credit_destination_account}
-                    onValueChange={(value) => setFormField({ ...formField, priority: value })}
+                    onValueChange={(value) => setFormField({ ...formField, credit_destination_account: value })}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select Wallet" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {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>
+                  <Select
+                    value={formField.transaction_type}
+                    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 })}
                   >
                     <SelectTrigger>
                       <SelectValue placeholder="Select Status" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="Y">Y</SelectItem>
+                      <SelectItem value="Y">Active</SelectItem>
-                      <SelectItem value="N">N</SelectItem>
+                      <SelectItem value="N">Inactive</SelectItem>
                     </SelectContent>
                   </Select>
-                </div> */}
+                </div>
-
+                
-                  {/* <div className="w-full">
+                <div className="w-full">
-  <label className="form-label">Priority <span className="text-red-500">*</span></label>
+                  <label className="form-label">Status Include <span className="text-red-500">*</span></label>
-  <Select
+                  <Select
-    value={formField.priority ? 'Y' : 'N'}
+                    value={formField.status_include}
-    onValueChange={(value) =>
+                    onValueChange={(value) => setFormField({ ...formField, status_include: value })}
-      setFormField({ ...formField, priority: value === 'Y' })
+                  >
-    }
+                    <SelectTrigger>
-  >
+                      <SelectValue placeholder="Select Status" />
-    <SelectTrigger>
+                    </SelectTrigger>
-      <SelectValue placeholder="Select Priority" />
+                    <SelectContent>
-    </SelectTrigger>
+                      <SelectItem value="Y">Yes</SelectItem>
-    <SelectContent>
+                      <SelectItem value="N">No</SelectItem>
-      <SelectItem value="Y">Y</SelectItem>
+                    </SelectContent>
-      <SelectItem value="N">N</SelectItem>
+                  </Select>
-    </SelectContent>
+                </div>
-  </Select>
+                
-</div> */}
+                <div className="w-full">
-                  <div className="flex justify-end pt-2.5 gap-5">
+                  <label className="form-label">Priority <span className="text-red-500">*</span></label>
-                    <Button
+                  <Select
-                      variant={'outline'}
+                    value={formField.priority}
-                      type="reset"
+                    onValueChange={(value) => setFormField({ ...formField, priority: value })}
-                      onClick={() => {
+                  >
-                        resetForm();
+                    <SelectTrigger>
-                      }}
+                      <SelectValue placeholder="Select Priority" />
-                    >
+                    </SelectTrigger>
-                      Reset
+                    <SelectContent>
-                    </Button>
+                      <SelectItem value="Y">Yes</SelectItem>
-                    <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                      <SelectItem value="N">No</SelectItem>
-                      {isSubmitting ? 'Saving...' : 'Save Changes'}
+                    </SelectContent>
-                    </Button>
+                  </Select>
-                  </div>
+                </div>
+                
+                <div className="flex justify-end pt-2.5 gap-5">
+                  <Button
+                    variant={'outline'}
+                    type="button"
+                    onClick={resetForm}
+                  >
+                    Reset
+                  </Button>
+                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? 'Saving...' : 'Save Changes'}
+                  </Button>
                 </div>
               </div>
-            </form>
+            </div>
-          </div>
+          </form>
         </DialogBody>
       </DialogContent>
     </Dialog>
   );
 };
 
-export { EditFeeDialog };
+export { EditFeeDialog };

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

@@ -7,6 +7,7 @@ import { createContext, useCallback, useEffect, useMemo, useState } from 'react'
 import ListToolbar from '../blocks/ListToolBar';
 import DeleteDialog from '../blocks/DeleteDialog';
 import { EditFeeDialog } from '../blocks/EditDialog';
+import { useManageTransferTypeContext } from '../../transfertype/hooks/useManageTransferTypeContext';
 
 interface ContextProps {
   showEditFeeDialog: boolean;
@@ -28,6 +29,21 @@ const initialProps: ContextProps = {
   selectedTransferFee: null
 };
 
+interface TransferFeeProps {
+  name: string;
+  description: string;
+  minimum_amount: number;
+  maximum_amount:number;
+  period_start: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 API_URL = apiConfig.service_transaction;
 
@@ -35,6 +51,7 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
   const [showEditFeeDialog, setShowEditFeeDialog] = useState(false);
   const [showAddFeeDialog, setShowAddFeeDialog] = useState(false);
   const [showDeleteFeeDialog, setShowDeleteFeeDialog] = useState(false);
+  const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext();
 
   const [selectedTransferFee, setSelectedTransferFee] = useState<string | null>(null);
   const { GetData } = useCallApi();
@@ -58,18 +75,28 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
     sorting: any,
     filter: any
   ) => {
-    sorting = sorting.length == 0 ? [{ id: 'id', desc: false }] : sorting;
+    if (!selectedTransferType) {
-    filter = filter.length == 0 ? {} : { any: filter[0].value.toLowerCase() };
+      return { data: [], totalCount: 0 };
-    const response = await GetData(`${API_URL}/transactionfees/list`, {
+    }
-      limit: limit,
+  
-      page: page+1,
+    sorting = sorting.length === 0 ? [{ id: 'id', desc: false }] : sorting;
-      with_deleted: false,
+    filter = filter.length === 0 ? {} : { any: filter[0].value.toLowerCase() };
-      order_field: sorting[0].id,
+  
-      order_direction: sorting[0].desc ? 'ASC' : 'DESC',
+    try {
-      filter: JSON.stringify(filter)
+      const response = await GetData(`${API_URL}/transactionfees/getdatabytransactiontype/${selectedTransferType}`, {});
-    });
+      
-    return { data: response?.data.list, totalCount: response?.data.total_count };
+      console.log('API Response:', response?.data);
+  
+      return { 
+        data: response?.data ,
+        totalCount: 1
+      };
+    } catch (error) {
+      console.error("Error fetching transaction fees by transaction type:", error);
+      return { data: [], totalCount: 0 };
+    }
   };
+  
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
@@ -105,20 +132,12 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
         meta: { headerClassName: 'w-[150px]' }
       },
       {
-        accessorFn: (row) => row.period_start?.split('T')[0],
+        accessorFn: (row) => row.fee_amount,
-        id: 'period_start',
+        id: 'fee_amount',
-        header: ({ column }) => <DataGridColumnHeader title="Period Start" column={column} />,
+        header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
         enableSorting: true,
         enableHiding: false,
-        meta: { headerClassName: 'w-[200px]' }
+        meta: { headerClassName: 'w-[150px]' }
-      },
-      {
-        accessorFn: (row) => row.period_end?.split('T')[0],
-        id: 'period_end',
-        header: ({ column }) => <DataGridColumnHeader title="Period End" column={column} />,
-        enableSorting: true,
-        enableHiding: false,
-        meta: { headerClassName: 'w-[200px]' }
       },
       {
         accessorFn: (row) => row.deduct_amount,
@@ -136,6 +155,23 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
         enableHiding: false,
         meta: { headerClassName: 'w-[150px]' }
       },
+      
+      {
+        accessorFn: (row) => row.period_start?.split('T')[0],
+        id: 'period_start',
+        header: ({ column }) => <DataGridColumnHeader title="Period Start" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[200px]' }
+      },
+      {
+        accessorFn: (row) => row.period_end?.split('T')[0],
+        id: 'period_end',
+        header: ({ column }) => <DataGridColumnHeader title="Period End" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[200px]' }
+      },
       {
         accessorFn: (row) => row.transaction_type?.name,
         id: 'transactionTypeId',
@@ -144,6 +180,30 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
+      {
+        accessorFn: (row) => row.credit_destination?.fullname,
+        id: 'credit_destination',
+        header: ({ column }) => <DataGridColumnHeader title="Credit Destination" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.credit_destination_account?.description,
+        id: 'credit_destination_account',
+        header: ({ column }) => <DataGridColumnHeader title="Credit Destination Account" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.deduct_from_account?.description,
+        id: 'deduct_from_account',
+        header: ({ column }) => <DataGridColumnHeader title="Credit Destination Account" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
       {
         accessorFn: (row) => (row.priority === 'Y' ? 'Yes' : 'No'),
         id: 'priority',
@@ -230,8 +290,7 @@ const ManageTransferFeeContextProvider = ({ children }: { children: React.ReactN
           }
         >
           {children}
-          <DeleteDialog />
+
-          <EditFeeDialog />
         </DataGridProvider>
       </ManageTransferFeeContext.Provider>
     </div>

src/pages/transfer/transfertype/TransferType.tsx

@@ -37,7 +37,7 @@ const TransferType = () => {
           </div>
           <AddDialog />
           <DeleteDialog />
-          {/* <EditDialog /> */}
+          <EditDialog />
 
         </Container>
       </ManageTransferTypeContextProvider>

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

@@ -25,6 +25,8 @@ import { useCallApi } from '@/hooks';
 import { getAuth } from '@/auth';
 import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
 import AddFeeDialog from '../../transferfee/blocks/AddDialog';
+import { EditFeeDialog } from '../../transferfee/blocks/EditDialog';
+import DeleteFeeDialog from '../../transferfee/blocks/DeleteDialog';
 import { Checkbox } from '@/components/ui/checkbox';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 
@@ -43,7 +45,7 @@ interface CustomerProps {
   msisdn: string;
 }
 
-interface GroupProps {
+interface PermissionObject {
   id: string;
   name: string;
   description: string;
@@ -56,7 +58,7 @@ const EditDialog = () => {
     useManageTransferTypeContext();
   const { reload } = useDataGrid();
   const [wallets, setWallets] = useState<WalletProps[]>([]);
-  const [groups, setGroups] = useState<GroupProps[]>([]);
+  const [groups, setGroups] = useState<PermissionObject[]>([]);
   const { GetData, PutData } = useCallApi();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const parsedUser = getAuth()?.user;
@@ -215,9 +217,13 @@ const EditDialog = () => {
   
   const doUpdateTransferType = useCallback(async () => {
     try {
-      const response = await PutData(`${API_URL}/transactiontype/update/${selectedTransferType}`, {
+      // Create a clean copy of the form data with properly formatted permissions
-        ...formField
+      const formDataToSend = {
-      });
+        ...formField,
+        permission: formField.permission.filter(id => typeof id === 'string')
+      };
+      
+      const response = await PutData(`${API_URL}/transactiontype/update/${selectedTransferType}`, formDataToSend);
       
       if (response?.status) {
         setAlert({ show: false, message: '' });
@@ -299,7 +305,7 @@ const EditDialog = () => {
           limit: 100,
           page: 1,
           with_deleted: false,
-          order_field: 'wallets.name',
+          order_field: 'Wallets.name',
           order_direction: 'ASC',
         });
         
@@ -321,8 +327,21 @@ const EditDialog = () => {
     const fetchTransactionType = async () => {
       try {
         const response = await GetData(`${API_URL}/transactiontype/getdata/${selectedTransferType}`, {});
-        
+        console.log(response);
         if (response?.status) {
+          // Process permissions to ensure they're always string IDs
+          let permissionIds: string[] = [];
+          
+          if (Array.isArray(response.data.permission)) {
+            permissionIds = response.data.permission.map((perm: any) => {
+              // Check if permission is an object or string
+              if (typeof perm === 'object' && perm !== null) {
+                return perm.id;
+              }
+              return perm;
+            });
+          }
+          
           setFormField((prev) => ({
             ...prev,
             name: response.data.name,
@@ -335,7 +354,7 @@ const EditDialog = () => {
             status_approval: response.data.status_approval,
             type: response.data.type || '',
             status: response.data.status,
-            permission: response.data.permission || []
+            permission: permissionIds 
           }));
         }
       } catch (error) {
@@ -346,14 +365,13 @@ const EditDialog = () => {
         });
       }
     };
-
+  
     const timer = setTimeout(() => {
       fetchTransactionType();
     }, 150);
     
     return () => clearTimeout(timer);
   }, [showEditDialog, selectedTransferType, GetData]);
-
   useEffect(() => {
     if (showEditDialog === false) {
       resetForm();
@@ -705,6 +723,8 @@ const EditDialog = () => {
                   <DataGridInner />
                 </div>
                 <AddFeeDialog />
+                          <DeleteFeeDialog />
+                          {/* <EditFeeDialog /> */}
               </Container>
             </ManageTransferFeeContextProvider>
           </div>