fixing transactiontype and transactionfee

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

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

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

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

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

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

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

@@ -1,391 +1,400 @@
-  import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
+import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components';
-  import { Toaster } from '@/components/ui/sonner';
+import { Toaster } from '@/components/ui/sonner';
-  import { apiConfig } from '@/config/api.config';
+import { apiConfig } from '@/config/api.config';
-  import { useCallApi } from '@/hooks';
+import { useCallApi } from '@/hooks';
-  import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef } from '@tanstack/react-table';
-  import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
-  import ListToolbar from '../blocks/ListToolBar';
+import ListToolbar from '../blocks/ListToolBar';
-  import DeleteDialog from '../blocks/DeleteDialog';
+import DeleteDialog from '../blocks/DeleteDialog';
-  import { EditFeeDialog } from '../blocks/EditDialog';
+import { EditFeeDialog } from '../blocks/EditDialog';
-  import { useManageTransferTypeContext } from '../../transfertype/hooks/useManageTransferTypeContext';
+import { useManageTransferTypeContext } from '../../transfertype/hooks/useManageTransferTypeContext';
 
-  interface ContextProps {
+interface ContextProps {
-    showEditFeeDialog: boolean;
+  showEditFeeDialog: boolean;
-    handleEditFeeDialog: (show: boolean, selected_TransferFee: string | null) => void;
+  handleEditFeeDialog: (show: boolean, selected_TransferFee: string | null) => void;
-    showAddFeeDialog: boolean;
+  showAddFeeDialog: boolean;
-    handleAddFeeDialog: (show: boolean) => void;
+  handleAddFeeDialog: (show: boolean) => void;
-    handleDeleteFeeDialog: (show: boolean, selected_TransferFee: string | null) => void;
+  handleDeleteFeeDialog: (show: boolean, selected_TransferFee: string | null) => void;
-    showDeleteFeeDialog: boolean;
+  showDeleteFeeDialog: boolean;
-    selectedTransferFee: string | null;
+  selectedTransferFee: string | null;
-    transactionTypeId: string | null;
+  transactionTypeId: string | null;
+}
 
-  }
+const initialProps: ContextProps = {
+  showEditFeeDialog: false,
+  handleEditFeeDialog: () => {},
+  showAddFeeDialog: false,
+  handleAddFeeDialog: () => {},
+  showDeleteFeeDialog: false,
+  handleDeleteFeeDialog: () => {},
+  selectedTransferFee: null,
+  transactionTypeId: null
+};
 
-  const initialProps: ContextProps = {
+interface TransferFeeProps {
-    showEditFeeDialog: false,
+  name: string;
-    handleEditFeeDialog: () => {},
+  description: string;
-    showAddFeeDialog: false,
+  minimum_amount: number;
-    handleAddFeeDialog: () => {},
+  maximum_amount: number;
-    showDeleteFeeDialog: false,
+  period_start: string;
-    handleDeleteFeeDialog: () => {},
+  period_end: string;
-    selectedTransferFee: null,
+  deduct_amount: number;
-    transactionTypeId: null,
+  deduct_percentage: number;
+  transaction_type: string;
+  status: string;
+  status_include: string;
+  fee: number;
+}
 
-  };
+const ManageTransferFeeContext = createContext<ContextProps>(initialProps);
+const API_URL = apiConfig.service_transaction;
 
-  interface TransferFeeProps {
+const ManageTransferFeeContextProvider = ({
-    name: string;
+  children,
-    description: string;
+  transactionTypeId = null
-    minimum_amount: number;
+}: {
-    maximum_amount:number;
+  children: React.ReactNode;
-    period_start:string;
+  transactionTypeId?: string | null;
-    period_end:string;
+}) => {
-    deduct_amount: number;
+  const [showEditFeeDialog, setShowEditFeeDialog] = useState(false);
-    deduct_percentage: number;
+  const [showAddFeeDialog, setShowAddFeeDialog] = useState(false);
-    transaction_type: string;
+  const [showDeleteFeeDialog, setShowDeleteFeeDialog] = useState(false);
-    status: string;
+  const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext();
-    status_include: string;
+  const [selectedTransferFee, setSelectedTransferFee] = useState<string | null>(null);
-    fee: number;
+  const { GetData } = useCallApi();
-  }
+  const handleEditFeeDialog = useCallback((show: boolean, selected_TransferFee: string | null) => {
+    setSelectedTransferFee(show ? selected_TransferFee : null);
+    setShowEditFeeDialog(show);
+  }, []);
 
-  const ManageTransferFeeContext = createContext<ContextProps>(initialProps);
+  const handleAddFeeDialog = useCallback((show: boolean) => {
-  const API_URL = apiConfig.service_transaction;
+    setShowAddFeeDialog(show);
+  }, []);
 
-  const ManageTransferFeeContextProvider = ({ children, transactionTypeId = null }: { children: React.ReactNode; transactionTypeId?: string | null }) => {
+  const handleDeleteFeeDialog = useCallback(
-    const [showEditFeeDialog, setShowEditFeeDialog] = useState(false);
+    (show: boolean, selected_TransferFee: string | null) => {
-    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();
-    const handleEditFeeDialog = useCallback((show: boolean, selected_TransferFee: string | null) => {
-      setSelectedTransferFee(show ? selected_TransferFee : null);
-      setShowEditFeeDialog(show);
-    }, []);
-
-    const handleAddFeeDialog = useCallback((show: boolean) => {
-      setShowAddFeeDialog(show);
-    }, []);
-
-    const handleDeleteFeeDialog = useCallback((show: boolean, selected_TransferFee: string | null) => {
       setSelectedTransferFee(show ? selected_TransferFee : null);
       setShowDeleteFeeDialog(show);
-    }, []);
+    },
-    const doGetTransferFeeListData = async (
+    []
-      page: number,
+  );
-      limit: number,
+  const doGetTransferFeeListData = async (
-      sorting: any,
+    page: number,
-      filter: any
+    limit: number,
-    ) => {
+    sorting: any,
-      if (!selectedTransferType) {
+    filter: any
-        return { data: [], totalCount: 0 };
+  ) => {
-      }
+    if (!selectedTransferType) {
+      return { data: [], totalCount: 0 };
+    }
 
-      sorting = sorting.length === 0 ? [{ id: 'id', desc: false }] : sorting;
+    sorting = sorting.length === 0 ? [{ id: 'id', desc: false }] : sorting;
-      filter = filter.length === 0 ? {} : { any: filter[0].value.toLowerCase() };
+    filter = filter.length === 0 ? {} : { any: filter[0].value.toLowerCase() };
 
-      try {
+    try {
-        const response = await GetData(`${API_URL}/transactionfees/getdatabytransactiontype/${selectedTransferType}`, {});
+      const response = await GetData(
+        `${API_URL}/transactionfees/getdatabytransactiontype/${selectedTransferType}`,
+        {}
+      );
 
-        // console.log('API Response:', response?.data);
+      // console.log('API Response:', response?.data);
 
-        return { 
+      return {
-          data: response?.data ,
+        data: response?.data,
-          totalCount: 1
+        totalCount: 1
-        };
+      };
-      } catch (error) {
+    } catch (error) {
-        console.error("Error fetching transaction fees by transaction type:", error);
+      console.error('Error fetching transaction fees by transaction type:', error);
-        return { data: [], totalCount: 0 };
+      return { data: [], totalCount: 0 };
-      }
+    }
-    };
-    
-    const columns = useMemo<ColumnDef<any>[]>(
-      () => [
-        {
-          accessorFn: (row) => row.name,
-          id: 'name',
-          header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          meta: { headerClassName: 'w-[200px]' }
-        },
-        {
-          accessorFn: (row) => row.description,
-          id: 'description',
-          header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          meta: { headerClassName: 'w-[250px]' }
-        },
-        {
-          accessorFn: (row) => row.minimum_amount,
-          id: 'minimum_amount',
-          header: ({ column }) => <DataGridColumnHeader title="Min Amount" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          meta: { headerClassName: 'w-[150px]' }
-        },
-        {
-          accessorFn: (row) => row.maximum_amount,
-          id: 'maximum_amount',
-          header: ({ column }) => <DataGridColumnHeader title="Max Amount" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          meta: { headerClassName: 'w-[150px]' }
-        },
-        {
-          accessorFn: (row) => row.fee_amount,
-          id: 'fee_amount',
-          header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          meta: { headerClassName: 'w-[150px]' }
-        },
-        {
-          accessorFn: (row) => row.deduct_amount,
-          id: 'deduct_amount',
-          header: ({ column }) => <DataGridColumnHeader title="Deduct Amount" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          meta: { headerClassName: 'w-[150px]' }
-        },
-        {
-          accessorFn: (row) => row.deduct_percentage,
-          id: 'deduct_percentage',
-          header: ({ column }) => <DataGridColumnHeader title="Deduct %" column={column} />,
-          enableSorting: true,
-          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',
-          header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          meta: { headerClassName: 'w-[250px]' }
-        },
-        {
-          accessorFn: (row: { credit_to: string }) => {
-            const mapping: Record<string, string> = {
-              D: 'Destination Member',
-              S: 'Source Member',
-              I: 'Input Customer'
-            };
-        
-            return mapping[row.credit_to] || 'Unknown';
-          },
-          id: 'credit_to',
-          header: ({ column }) => (
-            <DataGridColumnHeader title="Credit To" column={column} />
-          ),
-          enableSorting: true,
-          enableHiding: false,
-          meta: { headerClassName: 'w-[250px]' }
-        },      
-        {
-          accessorFn: (row) => {
-            if (row.credit_to === 'S' || row.credit_to === 'D' || !row.credit_destination) {
-              return 'N/A';
-            }
-            return 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: { deduct_from: string }) => {
-            const mapping: Record<string, string> = {
-              D: 'Destination Member',
-              S: 'Source Member',
-            };
-        
-            return mapping[row.deduct_from];
-          },
-          id: 'deduct_from',
-          header: ({ column }) => (
-            <DataGridColumnHeader title="Deduct From" 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="Deduct From Account" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          meta: { headerClassName: 'w-[250px]' }
-        },
-        {
-          accessorFn: (row) => row.priority,
-          id: 'priority',
-          header: ({ column }) => <DataGridColumnHeader title="Priority" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          cell: ({ row }) => {
-            const isActive = row.original.priority === 'Y';
-  
-            return (
-              <span
-                className={`px-2 py-1 text-xs font-semibold rounded-full ${
-                  isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
-                }`}
-              >
-                {isActive ? 'Yes' : 'No'}
-              </span>
-            );
-          },
-          meta: {
-            headerClassName: 'w-[100px]',
-            cellClassName: 'text-center'
-          }
-        },
-        {
-          accessorFn: (row) => row.status,
-          id: 'status',
-          header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          cell: ({ row }) => {
-            const isActive = row.original.status === 'Y';
-
-            return (
-              <span
-                className={`px-2 py-1 text-xs font-semibold rounded-full ${
-                  isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
-                }`}
-              >
-                {isActive ? 'Active' : 'Inactive'}
-              </span>
-            );
-          },
-          meta: {
-            headerClassName: 'w-[100px]',
-            cellClassName: 'text-center'
-          }
-        },
-        {
-          accessorFn: (row) => row.status_include,
-          id: 'status_include',
-          header: ({ column }) => <DataGridColumnHeader title="Status Include" column={column} />,
-          enableSorting: true,
-          enableHiding: false,
-          cell: ({ row }) => {
-            const isActive = row.original.status_include === 'Y';
-
-            return (
-              <span
-                className={`px-2 py-1 text-xs font-semibold rounded-full ${
-                  isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
-                }`}
-              >
-                {isActive ? 'Yes' : 'No'}
-              </span>
-            );
-          },
-          meta: {
-            headerClassName: 'w-[100px]',
-            cellClassName: 'text-center'
-          }
-        },
-        {
-          id: 'actions',
-          header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
-          enableSorting: false,
-          enableHiding: false,
-          cell: (data) => {
-            const row = data.row.original;
-            return (
-              <>
-                <button
-                  className="btn btn-sm btn-icon btn-clear btn-light"
-                  onClick={() => handleEditFeeDialog(true, row.id)}
-                >
-                  <KeenIcon icon="notepad-edit" />
-                </button>
-                <button
-                  className="btn btn-sm btn-icon btn-clear btn-light"
-                  onClick={() => handleDeleteFeeDialog(true, row.id)}
-                >
-                  <KeenIcon icon="trash" />
-                </button>
-              </>
-            );
-          },
-          meta: {
-            headerClassName: 'w-[100px]',
-            cellClassName: 'text-center'
-          }
-        }
-      ],
-      [handleEditFeeDialog, handleDeleteFeeDialog]
-    );
-
-    return (
-      <div className="container mx-auto py-5">
-        <div className="flex justify-between items-center mt-6">
-    <h1 className="text-xl font-semibold text-gray-900">Manage Transaction Fee</h1>
-  </div>
-        <ManageTransferFeeContext.Provider
-          value={{
-            showEditFeeDialog,
-            handleEditFeeDialog,
-            showAddFeeDialog,
-            handleAddFeeDialog,
-            selectedTransferFee,
-            showDeleteFeeDialog,
-            handleDeleteFeeDialog,
-            transactionTypeId
-          }}
-        >
-          <Toaster expand visibleToasts={9} duration={3000} />
-          <DataGridProvider
-            columns={columns}
-            pagination={{ size: 10 }}
-            layout={{ card: true }}
-            toolbar={<ListToolbar />}
-            sorting={[{ id: 'id', desc: true }]}
-            serverSide={true}
-            onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
-              doGetTransferFeeListData(pageIndex, pageSize, sorting, columnFilters)
-            }
-          >
-            {children}
-
-          </DataGridProvider>
-        </ManageTransferFeeContext.Provider>
-      </div>
-    );
   };
 
-  export { ManageTransferFeeContext, ManageTransferFeeContextProvider };
+  const columns = useMemo<ColumnDef<any>[]>(
+    () => [
+      {
+        accessorFn: (row) => row.name,
+        id: 'name',
+        header: ({ column }) => <DataGridColumnHeader title="Name" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[200px]' }
+      },
+      {
+        accessorFn: (row) => row.description,
+        id: 'description',
+        header: ({ column }) => <DataGridColumnHeader title="Description" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.minimum_amount,
+        id: 'minimum_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Min Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.maximum_amount,
+        id: 'maximum_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Max Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.fee_amount,
+        id: 'fee_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Fee Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.deduct_amount,
+        id: 'deduct_amount',
+        header: ({ column }) => <DataGridColumnHeader title="Deduct Amount" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[150px]' }
+      },
+      {
+        accessorFn: (row) => row.deduct_percentage,
+        id: 'deduct_percentage',
+        header: ({ column }) => <DataGridColumnHeader title="Deduct %" column={column} />,
+        enableSorting: true,
+        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',
+        header: ({ column }) => <DataGridColumnHeader title="Transaction Type" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row: { credit_to: string }) => {
+          const mapping: Record<string, string> = {
+            D: 'Destination Member',
+            S: 'Source Member',
+            I: 'Input Customer'
+          };
+
+          return mapping[row.credit_to] || 'Unknown';
+        },
+        id: 'credit_to',
+        header: ({ column }) => <DataGridColumnHeader title="Credit To" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => {
+          if (row.credit_to === 'S' || row.credit_to === 'D' || !row.credit_destination) {
+            return 'N/A';
+          }
+          return 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: { deduct_from: string }) => {
+          const mapping: Record<string, string> = {
+            D: 'Destination Member',
+            S: 'Source Member'
+          };
+
+          return mapping[row.deduct_from];
+        },
+        id: 'deduct_from',
+        header: ({ column }) => <DataGridColumnHeader title="Deduct From" 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="Deduct From Account" column={column} />
+        ),
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
+      {
+        accessorFn: (row) => row.priority,
+        id: 'priority',
+        header: ({ column }) => <DataGridColumnHeader title="Priority" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        cell: ({ row }) => {
+          const isActive = row.original.priority === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Yes' : 'No'}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      },
+      {
+        accessorFn: (row) => row.status,
+        id: 'status',
+        header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        cell: ({ row }) => {
+          const isActive = row.original.status === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Active' : 'Inactive'}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      },
+      {
+        accessorFn: (row) => row.status_include,
+        id: 'status_include',
+        header: ({ column }) => <DataGridColumnHeader title="Status Include" column={column} />,
+        enableSorting: true,
+        enableHiding: false,
+        cell: ({ row }) => {
+          const isActive = row.original.status_include === 'Y';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                isActive ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
+              }`}
+            >
+              {isActive ? 'Yes' : 'No'}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      },
+      {
+        id: 'actions',
+        header: ({ column }) => <DataGridColumnHeader title="Actions" column={column} />,
+        enableSorting: false,
+        enableHiding: false,
+        cell: (data) => {
+          const row = data.row.original;
+          return (
+            <>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleEditFeeDialog(true, row.id)}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => handleDeleteFeeDialog(true, row.id)}
+              >
+                <KeenIcon icon="trash" />
+              </button>
+            </>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
+      }
+    ],
+    [handleEditFeeDialog, handleDeleteFeeDialog]
+  );
+
+  return (
+    <div className="container mx-auto py-5">
+      <div className="flex justify-between items-center mt-6">
+        <h1 className="text-xl font-semibold text-gray-900">Manage Transaction Fee</h1>
+      </div>
+      <ManageTransferFeeContext.Provider
+        value={{
+          showEditFeeDialog,
+          handleEditFeeDialog,
+          showAddFeeDialog,
+          handleAddFeeDialog,
+          selectedTransferFee,
+          showDeleteFeeDialog,
+          handleDeleteFeeDialog,
+          transactionTypeId
+        }}
+      >
+        <Toaster expand visibleToasts={9} duration={3000} />
+        <DataGridProvider
+          columns={columns}
+          pagination={{ size: 10 }}
+          layout={{ card: true }}
+          toolbar={<ListToolbar />}
+          sorting={[{ id: 'id', desc: true }]}
+          serverSide={true}
+          onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+            doGetTransferFeeListData(pageIndex, pageSize, sorting, columnFilters)
+          }
+        >
+          {children}
+        </DataGridProvider>
+      </ManageTransferFeeContext.Provider>
+    </div>
+  );
+};
+
+export { ManageTransferFeeContext, ManageTransferFeeContextProvider };

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

@@ -76,7 +76,6 @@ const AddDialog = () => {
     wallet_origin: '',
     wallet_destination: '',
 
-
     minimum_amount: 0,
     maximum_amount: 0,
     max_transaction_per_day: 0,
@@ -141,13 +140,13 @@ const AddDialog = () => {
           toast.success('Success Create Transfer Type');
           reload();
           resetForm();
-                  const createActivity = {
+          const createActivity = {
-          module: 'Manage Transfer Type',
+            module: 'Manage Transfer Type',
-          description: `Create Transfer Type => ${formField.name}`,
+            description: `Create Transfer Type => ${formField.name}`,
-          action: 'C'
+            action: 'C'
-        };
+          };
 
-        doSaveLogActivity(createActivity);
+          doSaveLogActivity(createActivity);
         }
       })
       .finally(() => {
@@ -222,7 +221,7 @@ const AddDialog = () => {
       page: 1,
       with_deleted: false,
       order_field: 'wallets.name',
-      order_direction: 'ASC',
+      order_direction: 'ASC'
     };
     const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params);
     // console.log(response)
@@ -265,11 +264,11 @@ const AddDialog = () => {
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
           <div className="flex flex-col px-0">
             {alert.show && (
-        <div className="sticky top-0 z-10 bg-white p-3">
+              <div className="sticky top-0 z-10 bg-white p-3">
-        <Alert variant="danger" className="mb-3">
+                <Alert variant="danger" className="mb-3">
-          <h3>{alert.message}</h3>
+                  <h3>{alert.message}</h3>
-        </Alert>
+                </Alert>
-      </div>
+              </div>
             )}
             <form action="" onSubmit={handleSubmit}>
               <div className="card-body grid gap-5 p-0">
@@ -439,11 +438,10 @@ 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">
-                    Status Transaction Type
+                      Status Transaction Type
                       <span className="text-red-500"> *</span>
                     </label>
 
@@ -458,7 +456,7 @@ const AddDialog = () => {
                           <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>

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

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

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

@@ -589,7 +589,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>

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

@@ -147,19 +147,19 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         meta: { headerClassName: 'w-[250px]' }
       },
       {
-        accessorFn: (row: {type: string }) => {
+        accessorFn: (row: { type: string }) => {
           const mapping: Record<string, string> = {
             D: 'Disbursement',
             O: 'Other',
             CA: 'Change Group Emoney Customer to Agent',
-            AC:'Change Group Emoney Agent to Customer',
+            AC: 'Change Group Emoney Agent to Customer',
             PC: 'Change Group Point Agent to Customer',
             PA: 'Change Group Point Customer to Agent',
-            CE:'Return Customer Emoney',
+            CE: 'Return Customer Emoney',
-            AD:'Return Agent Deposit',
+            AD: 'Return Agent Deposit',
             AM: 'Return Agent Merchant',
             AE: 'Return Agent Emoney',
-            R: 'Reward Point',
+            R: 'Reward Point'
           };
 
           return mapping[row.type] || 'Unknown';
@@ -224,7 +224,6 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
     sorting: any,
     filter: any
   ) => {
-
     const orderField = 'created_at';
 
     const orderDirection = sorting.length > 0 ? (sorting[0].desc ? 'DESC' : 'ASC') : 'DESC';