fixing Add+ delete+ managetransferfee

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/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';
 
@@ -721,6 +723,8 @@ const EditDialog = () => {
                   <DataGridInner />
                 </div>
                 <AddFeeDialog />
+                          <DeleteFeeDialog />
+                          {/* <EditFeeDialog /> */}
               </Container>
             </ManageTransferFeeContextProvider>
           </div>