fixing transaction type + transaction fee

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useManageTransferFeeContext } from '../hooks/useManageTransferFeeContext';
 import { NumericFormat } from 'react-number-format';
 import {
@@ -40,11 +40,7 @@ import {
   TableHeader,
   TableRow
 } from '@/components/ui/table';
-import { ManageTransferFeeContext } from '../hooks/ManageTransferFeeContext';
-import { ColumnDef } from '@tanstack/react-table';
-import { ManageTransferFeeContextProvider } from '../../transferfee/hooks/ManageTransferFeeContext';
 import { apiConfig } from '@/config/api.config';
-import { get } from 'http';
 
 interface TransactionTypeProps {
   id: string;
@@ -62,12 +58,19 @@ interface CustomerProps {
 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();
   const { PostData, PutData, GetData } = useCallApi();
-  const { showAddFeeDialog, handleAddFeeDialog, handleEditFeeDialog, selectedTransferFee } =
-    useManageTransferFeeContext();
+  const { 
+    showAddFeeDialog, 
+    handleAddFeeDialog, 
+    handleEditFeeDialog, 
+    selectedTransferFee,
+    transactionTypeId
+  } = useManageTransferFeeContext();
+  
   const [alert, setAlert] = useState({
     show: false,
     message: ''
@@ -75,8 +78,16 @@ const AddFeeDialog = () => {
   const [transactionTypes, setTransactionTypes] = useState<TransactionTypeProps[]>([]);
   const [wallets, setWallets] = useState<WalletProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
-  const [defaultCustomer, setDefaultCustomer] = useState(''); 
-
+  const [defaultCustomer, setDefaultCustomer] = useState('');
+  const [transactionTypeName, setTransactionTypeName] = useState('');
+  
+  const [isLoadingTransactionType, setIsLoadingTransactionType] = useState(false);
+  const [isLoadingWallets, setIsLoadingWallets] = useState(false);
+  const [isLoadingCustomers, setIsLoadingCustomers] = useState(false);
+  const customersWithNames = customers.map((customer) => ({
+    id: customer.id,
+    name: customer.username,
+  }));
   const initialState = {
     name: '',
     description: '',
@@ -104,54 +115,57 @@ const AddFeeDialog = () => {
 
   const resetForm = () => {
     setFormField(initialState);
+    setTransactionTypeName('');
   };
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
   const parsedUser = getAuth()?.user;
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    // setIsSubmitting(true);
-    const payload = {
-      name: formField.name,
-      description: formField.description,
-      period_start: formField.period_start,
-      period_end: formField.period_end,
-      minimum_amount: formField.minimum_amount,
-      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,
-      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(() => {
+    if (showAddFeeDialog && transactionTypeId) {
+      setIsLoadingTransactionType(true);
+      
+      setFormField(prev => ({
+        ...prev,
+        transaction_type: transactionTypeId
+      }));
+      
+      const getTransactionTypeDetails = async () => {
+        try {
+          const response = await GetData(`${API_URL}/transactiontype/getdata/${transactionTypeId}`, {});
+          if (response?.status && response?.data) {
+            setTransactionTypeName(response.data.name);
+          }
+        } catch (error) {
+          console.error('Error fetching transaction type details', error);
+        } finally {
+          setIsLoadingTransactionType(false);
+        }
+      };
+      
+      getTransactionTypeDetails();
+    }
+  }, [showAddFeeDialog, transactionTypeId, GetData]);
   
   useEffect(() => {
     const created_time = new Date();
     const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
 
     if (showAddFeeDialog) {
-      setFormField({
-        ...formField,
+      setFormField(prev => ({
+        ...prev,
         created_by: parsedUser?.username,
         created_at: formattedTime
-      });
+      }));
     }
-  }, [showAddFeeDialog]);
+  }, [showAddFeeDialog, parsedUser?.username]);
 
   useEffect(() => {
     if (!showAddFeeDialog) return;
 
     const getTransactionTypeList = async (sorting: any) => {
+      setIsLoadingTransactionType(true);
       try {
         sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
         const response = await GetData(`${API_URL}/transactiontype/list`, {
@@ -164,13 +178,16 @@ const AddFeeDialog = () => {
         setTransactionTypes(response?.data.list || []);
       } catch (error) {
         console.error('Error fetching transaction types', error);
+      } finally {
+        setIsLoadingTransactionType(false);
       }
     };
 
     getTransactionTypeList([{ id: 'id', desc: false }]);
-  }, [showAddFeeDialog]);
+  }, [showAddFeeDialog, GetData]);
 
   const fetchWallets = useCallback(async () => {
+    setIsLoadingWallets(true);
     const params = {
       limit: 100,
       page: 1,
@@ -188,6 +205,8 @@ const AddFeeDialog = () => {
     } catch (error) {
       console.error('Error fetching wallets', error);
       setWallets([]);
+    } finally {
+      setIsLoadingWallets(false);
     }
   }, [GetData]);
   
@@ -199,6 +218,7 @@ const AddFeeDialog = () => {
   useEffect(() => {
     if (!showAddFeeDialog) return;
     const getCustomerList = async (sorting: any) => {
+      setIsLoadingCustomers(true);
       try {
         sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
 
@@ -218,6 +238,8 @@ const AddFeeDialog = () => {
       } catch (error) {
         console.error('Error fetching customers', error);
         setCustomers([]);
+      } finally {
+        setIsLoadingCustomers(false);
       }
     };
 
@@ -254,7 +276,7 @@ const AddFeeDialog = () => {
           return;
         }
       }
-      
+    
       if (formField.credit_to === 'I' && !formField.credit_destination) {
         setAlert({ 
           show: true, 
@@ -280,6 +302,13 @@ const AddFeeDialog = () => {
           reload();
           resetForm();
           handleAddFeeDialog(false);
+          
+          const createActivity = {
+            module: 'Manage Transfer Fee',
+            description: `Create Transfer Fee => ${formField.name}`,
+            action: 'C'
+          };
+          doSaveLogActivity(createActivity);
         } else {
           setAlert({ show: true, message: response?.message || 'Failed to create transfer fee' });
         }
@@ -293,6 +322,40 @@ const AddFeeDialog = () => {
     [formField, PostData, reload, handleAddFeeDialog]
   );
 
+  const renderSelectWithLoading = (
+    value: string, 
+    onChangeHandler: (value: string) => void,
+    options: {id: string, name: string}[] | null,
+    placeholder: string,
+    isLoading: boolean
+  ) => {
+    return (
+      <Select
+        value={value}
+        onValueChange={onChangeHandler}
+        disabled={isLoading}
+      >
+        <SelectTrigger>
+          {isLoading ? (
+            <div className="flex items-center">
+              <div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
+              <span className="ml-2">Loading...</span>
+            </div>
+          ) : (
+            <SelectValue placeholder={placeholder} />
+          )}
+        </SelectTrigger>
+        <SelectContent>
+          {options && options.map((option) => (
+            <SelectItem value={option.id} key={option.id}>
+              {option.name}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  };
+
   return (
     <Dialog open={showAddFeeDialog} onOpenChange={(open) => handleAddFeeDialog(open)}>
       <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@@ -325,6 +388,35 @@ const AddFeeDialog = () => {
           <form action="" onSubmit={doCreateTransferType}>
             <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>
+                  {transactionTypeId ? (
+                    <div className="relative">
+                      <Input
+                        className="input bg-gray-100"
+                        type="text"
+                        value={isLoadingTransactionType ? '' : transactionTypeName}
+                        readOnly
+                      />
+                      {isLoadingTransactionType && (
+                        <div className="absolute inset-0 flex items-center justify-start bg-gray-100 px-3">
+                          <div className="flex items-center">
+                            <div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
+                            <span className="ml-2 text-gray-500">Loading transaction type...</span>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    renderSelectWithLoading(
+                      formField.transaction_type,
+                      (transaction_type) => setFormField((prev) => ({ ...prev, transaction_type })),
+                      transactionTypes,
+                      "Select Transaction Type",
+                      isLoadingTransactionType
+                    )
+                  )}
+                </div>
                 <div className="w-full">
                   <label className="form-label">Transfer Free Name <span className="text-red-500">*</span></label>
                   <Input
@@ -475,21 +567,13 @@ const AddFeeDialog = () => {
                 </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>
+                  {renderSelectWithLoading(
+                    formField.deduct_from_account,
+                    (value) => setFormField({ ...formField, deduct_from_account: value }),
+                    wallets,
+                    "Select Wallet",
+                    isLoadingWallets
+                  )}
                 </div>
                 <div className="w-full">
                   <label className="form-label">Credit To <span className="text-red-500">*</span></label>
@@ -514,60 +598,24 @@ const AddFeeDialog = () => {
                 {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>
+                    {renderSelectWithLoading(
+  formField.credit_destination,
+  (value) => setFormField({ ...formField, credit_destination: value }),
+  customersWithNames,
+  "Select Customer",
+  isLoadingCustomers
+)}
                   </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) =>
-                      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>
+                  {renderSelectWithLoading(
+                    formField.credit_destination_account,
+                    (value) => setFormField({ ...formField, credit_destination_account: value }),
+                    wallets,
+                    "Select Wallet",
+                    isLoadingWallets
+                  )}
                 </div>
                 <div className="w-full">
                   <label className="form-label">Status <span className="text-red-500">*</span></label>
@@ -624,7 +672,11 @@ const AddFeeDialog = () => {
                   >
                     Reset
                   </Button>
-                  <Button variant={'default'} type="submit" disabled={isSubmitting}>
+                  <Button 
+                    variant={'default'} 
+                    type="submit" 
+                    disabled={isSubmitting || isLoadingTransactionType || isLoadingWallets || isLoadingCustomers}
+                  >
                     {isSubmitting ? 'Saving...' : 'Save Changes'}
                   </Button>
                 </div>