From 5437979dd35839cc7035d25cad541a86a53bc049 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Sat, 5 Apr 2025 17:41:00 +0700
Subject: [PATCH] add new field (Transactiontype status) on transactiontype +
 remove console on addDialog conversion

---
 .../master/conversion/blocks/AddDialog.tsx    |   2 +-
 .../transfertype/blocks/AddDialog.tsx         | 362 ++++++++++-----
 .../transfertype/blocks/EditDialog.tsx        | 437 ++++++++++++------
 .../hooks/ManageTransferTypeContext.tsx       |  11 +
 4 files changed, 538 insertions(+), 274 deletions(-)

diff --git a/src/pages/master/conversion/blocks/AddDialog.tsx b/src/pages/master/conversion/blocks/AddDialog.tsx
index b9f0e60..5cca7f8 100644
--- a/src/pages/master/conversion/blocks/AddDialog.tsx
+++ b/src/pages/master/conversion/blocks/AddDialog.tsx
@@ -121,7 +121,7 @@ const AddDialog = () => {
     }
 
     doCreateConversion(e);
-    console.log(formField);
+    // console.log(formField);
     setAlert({ show: false, message: '' });
   };
 
diff --git a/src/pages/transfer/transfertype/blocks/AddDialog.tsx b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
index a781c1d..5a3bfbf 100644
--- a/src/pages/transfer/transfertype/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
@@ -1,5 +1,5 @@
 import { apiConfig } from '@/config/api.config';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext';
 import {
   Alert,
@@ -30,6 +30,15 @@ import {
 import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import { getAuth } from '@/auth';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
 
 interface WalletProps {
   Wallet_id: string;
@@ -48,6 +57,7 @@ const API_URL3_CUSTOMER = apiConfig.service_customer;
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
+  const [open, setOpen] = useState(false);
   const { GetData } = useCallApi();
   const { showAddDialog, handleAddDialog, selectedTransferType } = useManageTransferTypeContext();
   const [wallets, setWallets] = useState<WalletProps[]>([]);
@@ -70,37 +80,102 @@ const AddDialog = () => {
     maximum_amount: 0,
     max_transaction_per_day: 0,
     status: '',
+    type: '',
     status_approval: '',
     created_by: '',
     created_at: ''
   };
 
   const [formField, setFormField] = useState(initialState);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const resetForm = () => {
     setFormField(initialState);
   };
-  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const parsedUser = getAuth()?.user;
 
+  // Updated validation function to make only certain fields required
+  const validateForm = () => {
+    const requiredFields = [
+      'name',
+      'description',
+      'wallet_origin',
+      'wallet_destination',
+      'wallet_fee_destination',
+      'customer_fee_destination',
+      'status',
+      'status_approval'
+    ];
+
+    const missingFields = requiredFields.filter(
+      (field) =>
+        formField[field as keyof typeof formField] === '' ||
+        formField[field as keyof typeof formField] === null ||
+        formField[field as keyof typeof formField] === undefined
+    );
+
+    if (missingFields.length > 0) {
+      setAlert({
+        show: true,
+        message: `Please fill out all required fields: ${missingFields.join(', ')}`
+      });
+      return false;
+    }
+
+    setAlert({ show: false, message: '' });
+    return true;
+  };
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    // setIsSubmitting(true);
-    const payload = {
-      name: formField.name,
-      description: formField.description,
-      wallet_origin: formField.wallet_origin,
-      wallet_destination: formField.wallet_destination,
-      minimum_amount: formField.minimum_amount,
-      maximum_amount: formField.maximum_amount,
-      max_transaction_per_day: formField.max_transaction_per_day,
-      wallet_fee_destination: formField.wallet_fee_destination,
-      customer_fee_destination: formField.customer_fee_destination,
-      status_approval: formField.status_approval,
-      status: formField.status
-    };
+    setIsSubmitting(true);
+
+    if (!validateForm()) {
+      setIsSubmitting(false);
+      return;
+    }
+
+    doCreateTransferType(formField)
+      .then((success) => {
+        if (success) {
+          handleAddDialog(false);
+          toast.success('Success Create Transfer Type');
+          reload();
+          resetForm();
+        }
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+      });
   };
+
+  const doCreateTransferType = useCallback(
+    async (data: typeof formField) => {
+      try {
+        const response = await PostData(`${API_URL}/transactiontype/create`, data);
+
+        if (response?.status) {
+          setAlert({ show: false, message: '' });
+          return true;
+        } else {
+          setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
+          return false;
+        }
+      } catch (error) {
+        setAlert({
+          show: true,
+          message:
+            error instanceof Error
+              ? error.message
+              : 'An error occurred while creating transfer type'
+        });
+        return false;
+      }
+    },
+    [PostData]
+  );
+
   useEffect(() => {
     const created_time = new Date();
     const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -128,7 +203,6 @@ const AddDialog = () => {
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
         setCustomers(response?.data.list);
-        // console.log('CUSTOMER: ', response?.data.list);
       } catch (error) {
         console.error('Error fetching customer', error);
       }
@@ -161,34 +235,6 @@ const AddDialog = () => {
     fetchWallets();
   }, [showAddDialog]);
 
-  const doCreateTransferType = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      for (const key in formField) {
-        if (formField[key as keyof typeof formField] === '') {
-          setAlert({ show: true, message: 'All fields must be filled out' });
-          return;
-        }
-      }
-
-      setAlert({ show: false, message: '' });
-
-      const response = await PostData(`${API_URL}/transactiontype/create`, formField);
-
-      if (response?.status) {
-        setAlert({ show: false, message: '' });
-        handleAddDialog(false);
-        toast.success('Success Create Transfer Type');
-        reload();
-        resetForm();
-      } else {
-        setAlert({ show: true, message: response?.message || 'Failed to create transfer type' });
-      }
-      handleAddDialog(false);
-    },
-    [formField]
-  );
-
   return (
     <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
       <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
@@ -198,7 +244,7 @@ const AddDialog = () => {
           <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">
-                Addd Transaction Type
+                Add Transaction Type
               </h1>
               <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
             </div>
@@ -220,7 +266,7 @@ const AddDialog = () => {
                 <h3>{alert.message}</h3>
               </Alert>
             )}
-            <form action="" onSubmit={doCreateTransferType}>
+            <form action="" onSubmit={handleSubmit}>
               <div className="card-body grid gap-5 p-0">
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@@ -228,15 +274,17 @@ const AddDialog = () => {
                       Transfer Type 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 className="grow">
+                      <Input
+                        className="input"
+                        type="text"
+                        autoComplete="off"
+                        value={formField.name}
+                        onChange={({ target }) =>
+                          setFormField((prev) => ({ ...prev, name: target.value }))
+                        }
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -246,15 +294,17 @@ const AddDialog = () => {
                       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 className="grow">
+                      <Input
+                        className="input"
+                        type="text"
+                        autoComplete="off"
+                        value={formField.description}
+                        onChange={({ target }) =>
+                          setFormField((prev) => ({ ...prev, description: target.value }))
+                        }
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -263,20 +313,22 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       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 className="grow">
+                      <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>
                 </div>
 
@@ -285,20 +337,22 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       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 className="grow">
+                      <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>
                 </div>
                 <div className="w-full">
@@ -306,24 +360,26 @@ const AddDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Max Transaction per day
                     </label>
-                    <NumericFormat
-                      className="input"
-                      value={formField.max_transaction_per_day}
-                      thousandSeparator="."
-                      decimalSeparator=","
-                      allowNegative={false}
-                      onValueChange={(values) => {
-                        setFormField((prev) => ({
-                          ...prev,
-                          max_transaction_per_day: values.floatValue || 0
-                        }));
-                      }}
-                      placeholder="Enter Max Transaction Per Day"
-                    />
+                    <div className="grow">
+                      <NumericFormat
+                        className="input"
+                        value={formField.max_transaction_per_day}
+                        thousandSeparator="."
+                        decimalSeparator=","
+                        allowNegative={false}
+                        onValueChange={(values) => {
+                          setFormField((prev) => ({
+                            ...prev,
+                            max_transaction_per_day: values.floatValue || 0
+                          }));
+                        }}
+                        placeholder="Enter Max Transaction Per Day"
+                      />
+                    </div>
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       From Account
                       <span className="text-red-500">*</span>
@@ -351,7 +407,7 @@ const AddDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       To Account
                       <span className="text-red-500">*</span>
@@ -378,7 +434,7 @@ const AddDialog = () => {
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       Wallet Destination Fee
                       <span className="text-red-500">*</span>
@@ -405,35 +461,91 @@ const AddDialog = () => {
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">
-                      Customer Fee Destination
-                      <span className="text-red-500">*</span>
+                      Customer Fee Destination<span className="text-red-500">*</span>
                     </label>
+                    <div className="grow">
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <button
+                            type="button"
+                            className="input col-span-5 text-left"
+                            style={{ color: 'inherit' }}
+                          >
+                            {customers.find(
+                              (customer) => customer.id === formField.customer_fee_destination
+                            )?.username || 'Select Customer'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[400px] p-0">
+                          <Command>
+                            <CommandInput placeholder="Search Customer..." />
+                            <CommandList
+                              className="max-h-[300px] overflow-y-auto"
+                              style={{ touchAction: 'pan-y' }}
+                              onWheel={(e) => {
+                                e.currentTarget.scrollTop += e.deltaY;
+                              }}
+                            >
+                              <CommandEmpty>No Customer found.</CommandEmpty>
+                              <CommandGroup>
+                                {customers.map((customer) => (
+                                  <CommandItem
+                                    key={customer.id}
+                                    value={customer.username}
+                                    onSelect={() => {
+                                      setFormField({
+                                        ...formField,
+                                        customer_fee_destination: customer.id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {customer.username}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  </div>
+                </div>
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      TransactionType Status
+                      <span className="text-red-500"> *</span>
+                    </label>
+
                     <div className="grow">
                       <Select
-                        value={formField.customer_fee_destination}
-                        onValueChange={(customer_fee_destination) =>
-                          setFormField((prev) => ({ ...prev, customer_fee_destination }))
+                        value={formField.type}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, type: value }))
                         }
                       >
                         <SelectTrigger>
-                          <SelectValue placeholder="Select Customer" />
+                          <SelectValue placeholder="Select" />
                         </SelectTrigger>
                         <SelectContent>
-                          {customers.map((customer, idx) => (
-                            <SelectItem value={customer.id} key={customer.id}>
-                              {customer.username} - {customer.msisdn}
-                            </SelectItem>
-                          ))}
+                          <SelectItem value="D">Disbursement </SelectItem>
+                          <SelectItem value="O">Other </SelectItem>
+                          <SelectItem value="CA">Change Customer to Agent </SelectItem>
+                          <SelectItem value="AC">Change Agent to Customer </SelectItem>
+                          <SelectItem value="CE">Return Customer Emoney </SelectItem>
+                          <SelectItem value="AD">Return Agent Deposit </SelectItem>
+                          <SelectItem value="AM">Return Agent Merchant </SelectItem>
+                          <SelectItem value="AE">Return Agent Emoney </SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
                   </div>
                 </div>
-
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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 Approval
                       <span className="text-red-500">*</span>
@@ -459,7 +571,7 @@ const AddDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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
                       <span className="text-red-500"> *</span>
diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
index 23236f5..8f52633 100644
--- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
@@ -22,10 +22,18 @@ import { apiConfig } from '@/config/api.config';
 import { Alert, Container, DataGridInner, KeenIcon, useDataGrid } from '@/components';
 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';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
 
 const API_URL = apiConfig.service_transaction;
 const API_URL_MASTERDATA = apiConfig.service_master_data;
@@ -50,6 +58,7 @@ interface TranssactionTypeProps {
   max_transaction_per_day: number;
   status_approval: string;
   status: string;
+  type: string;
   wallet_origin: WalletProps;
   wallet_destination: WalletProps;
   wallet_fee_destination: WalletProps;
@@ -58,7 +67,7 @@ interface TranssactionTypeProps {
 
 const EditDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showEditDialog, handleEditDialog, selectedTransferType, accounts } =
+  const { showEditDialog, handleEditDialog, selectedTransferType } =
     useManageTransferTypeContext();
   const { reload } = useDataGrid();
   const [wallets, setWallets] = useState<WalletProps[]>([]);
@@ -66,29 +75,13 @@ const EditDialog = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const parsedUser = getAuth()?.user;
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
-  const [transactiontypes, setTransactionTypes] = useState<TranssactionTypeProps[]>([]);
+  const [open, setOpen] = useState(false);
   const [alert, setAlert] = useState({
     show: false,
     message: ''
   });
-  const resetForm = () => {
-    setFormField({
-      name: '',
-      description: '',
-      wallet_origin: '',
-      wallet_destination: '',
-      wallet_fee_destination: '',
-      customer_fee_destination: '',
-      minimum_amount: 0,
-      maximum_amount: 0,
-      max_transaction_per_day: 0,
-      status_approval: '',
-      status: '',
-      updated_by: '',
-      updated_at: ''
-    });
-  };
-  const [formField, setFormField] = useState({
+  
+  const initialState = {
     name: '',
     description: '',
     wallet_origin: '',
@@ -99,40 +92,113 @@ const EditDialog = () => {
     maximum_amount: 0,
     max_transaction_per_day: 0,
     status_approval: '',
+    type: '',
     status: '',
     updated_by: '',
     updated_at: ''
-  });
+  };
+  
+  const [formField, setFormField] = useState(initialState);
+  
+  const resetForm = () => {
+    setFormField(initialState);
+  };
+
+  // Validation function to make certain fields required
+  const validateForm = () => {
+    const requiredFields = [
+      'name',
+      'description',
+      'wallet_origin',
+      'wallet_destination',
+      'wallet_fee_destination',
+      'customer_fee_destination',
+      'status',
+      'status_approval',
+      'type'
+    ];
+
+    const missingFields = requiredFields.filter(
+      (field) =>
+        formField[field as keyof typeof formField] === '' ||
+        formField[field as keyof typeof formField] === null ||
+        formField[field as keyof typeof formField] === undefined
+    );
+
+    if (missingFields.length > 0) {
+      setAlert({
+        show: true,
+        message: `Please fill out all required fields: ${missingFields.join(', ')}`
+      });
+      return false;
+    }
+
+    setAlert({ show: false, message: '' });
+    return true;
+  };
+
   useEffect(() => {
     const updated_time = new Date();
     const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
 
     if (showEditDialog) {
-      setFormField({
-        ...formField,
+      setFormField((prev) => ({
+        ...prev,
         updated_by: parsedUser?.username,
         updated_at: formattedTime
-      });
+      }));
     }
   }, [showEditDialog]);
-  /* actions */
-  const doUpdateTransferType = useCallback(
-    async (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
+  
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    if (!validateForm()) {
+      setIsSubmitting(false);
+      return;
+    }
+
+    doUpdateTransferType()
+      .then((success) => {
+        if (success) {
+          handleEditDialog(false, null);
+          toast.success('Success Update Transfer Type');
+          reload();
+        }
+      })
+      .finally(() => {
+        setIsSubmitting(false);
+      });
+  };
+  
+  const doUpdateTransferType = useCallback(async () => {
+    try {
       const response = await PutData(`${API_URL}/transactiontype/update/${selectedTransferType}`, {
         ...formField
       });
+      
       if (response?.status) {
-        handleEditDialog(false, null);
-        toast.success('Success Update Transfer Type');
-        reload();
+        setAlert({ show: false, message: '' });
+        return true;
       } else {
-        setAlert((prev) => ({ ...prev, show: true, message: response?.message }));
+        setAlert({ show: true, message: response?.message || 'Failed to update transfer type' });
+        return false;
       }
-    },
-    [formField, selectedTransferType]
-  );
+    } catch (error) {
+      setAlert({
+        show: true,
+        message:
+          error instanceof Error
+            ? error.message
+            : 'An error occurred while updating transfer type'
+      });
+      return false;
+    }
+  }, [formField, selectedTransferType, PutData]);
+
   useEffect(() => {
+    if (!showEditDialog) return;
     const getCustomerList = async (sorting: any) => {
       try {
         sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
@@ -143,7 +209,6 @@ const EditDialog = () => {
           order_field: sorting[0].id,
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
-        // console.log('CUSTOMER: ', response?.data.list);
         setCustomers(response?.data.list);
       } catch (error) {
         console.error('Error fetching customer', error);
@@ -151,7 +216,8 @@ const EditDialog = () => {
     };
 
     getCustomerList([{ id: 'id', desc: false }]);
-  }, []);
+  }, [showEditDialog, GetData]);
+  
   const fetchWallets = useCallback(async () => {
     const params = {
       limit: 100,
@@ -169,39 +235,48 @@ const EditDialog = () => {
     } else {
       setWallets([]);
     }
-  }, []);
+  }, [GetData]);
 
   useEffect(() => {
+    if (!showEditDialog) return;
     fetchWallets();
-  }, [fetchWallets]);
+  }, [showEditDialog, fetchWallets]);
 
   const fetchTransactionType = useCallback(async (id: string) => {
-    const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
-    // console.log('Transaction Type: ', response?.data);
-    if (response?.status) {
-      setFormField((prev) => ({
-        ...prev,
-        name: response.data.name,
-        description: response.data.description,
-        wallet_origin: response.data.wallet_origin.id,
-        wallet_destination: response.data.wallet_destination.id,
-        wallet_fee_destination: response.data.wallet_fee_destination.id,
-        customer_fee_destination: response.data.customer_fee_destination.id,
-        minimum_amount: response.data.minimum_amount,
-        maximum_amount: response.data.maximum_amount,
-        max_transaction_per_day: response.data.max_transaction_per_day,
-        status_approval: response.data.status_approval,
-        status: response.data.status
-      }));
+    try {
+      const response = await GetData(`${API_URL}/transactiontype/getdata/${id}`, { id });
+      if (response?.status) {
+        setFormField((prev) => ({
+          ...prev,
+          name: response.data.name,
+          description: response.data.description,
+          wallet_origin: response.data.wallet_origin.id,
+          wallet_destination: response.data.wallet_destination.id,
+          wallet_fee_destination: response.data.wallet_fee_destination.id,
+          customer_fee_destination: response.data.customer_fee_destination.id,
+          minimum_amount: response.data.minimum_amount,
+          maximum_amount: response.data.maximum_amount,
+          max_transaction_per_day: response.data.max_transaction_per_day,
+          status_approval: response.data.status_approval,
+          type: response.data.type || '',
+          status: response.data.status
+        }));
+      }
+      // console.log(response);
+    } catch (error) {
+      console.error('Error fetching transaction type', error);
+      setAlert({
+        show: true,
+        message: 'Failed to load transaction type data'
+      });
     }
-    // console.log('form fieldd Transaction Type: ', formField);
-  }, []);
+  }, [GetData]);
 
   useEffect(() => {
     if (selectedTransferType) {
       fetchTransactionType(selectedTransferType);
     }
-  }, [selectedTransferType]);
+  }, [selectedTransferType, fetchTransactionType]);
 
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@@ -230,11 +305,11 @@ const EditDialog = () => {
         <DialogBody className="scrollable-y px-0 pb-0" ref={parentRef}>
           <div className="flex flex-col px-0">
             {alert.show && (
-              <Alert variant="danger">
+              <Alert variant="danger" className="mb-3">
                 <h3>{alert.message}</h3>
               </Alert>
             )}
-            <form action="" onSubmit={doUpdateTransferType}>
+            <form action="" onSubmit={handleSubmit}>
               <div className="card-body grid gap-5 p-0">
                 <div className="w-full">
                   <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@@ -242,15 +317,17 @@ const EditDialog = () => {
                       Transfer Type 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 className="grow">
+                      <Input
+                        className="input"
+                        type="text"
+                        autoComplete="off"
+                        value={formField.name}
+                        onChange={({ target }) =>
+                          setFormField((prev) => ({ ...prev, name: target.value }))
+                        }
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -260,15 +337,17 @@ const EditDialog = () => {
                       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 className="grow">
+                      <Input
+                        className="input"
+                        type="text"
+                        autoComplete="off"
+                        value={formField.description}
+                        onChange={({ target }) =>
+                          setFormField((prev) => ({ ...prev, description: target.value }))
+                        }
+                      />
+                    </div>
                   </div>
                 </div>
 
@@ -277,20 +356,22 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       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 className="grow">
+                      <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>
                 </div>
 
@@ -299,20 +380,22 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       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 className="grow">
+                      <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>
                 </div>
                 <div className="w-full">
@@ -320,24 +403,26 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Max Transaction per day
                     </label>
-                    <NumericFormat
-                      className="input"
-                      value={formField.max_transaction_per_day}
-                      thousandSeparator="."
-                      decimalSeparator=","
-                      allowNegative={false}
-                      onValueChange={(values) => {
-                        setFormField((prev) => ({
-                          ...prev,
-                          max_transaction_per_day: values.floatValue || 0
-                        }));
-                      }}
-                      placeholder="Enter Max Transaction Per Day"
-                    />
+                    <div className="grow">
+                      <NumericFormat
+                        className="input"
+                        value={formField.max_transaction_per_day}
+                        thousandSeparator="."
+                        decimalSeparator=","
+                        allowNegative={false}
+                        onValueChange={(values) => {
+                          setFormField((prev) => ({
+                            ...prev,
+                            max_transaction_per_day: values.floatValue || 0
+                          }));
+                        }}
+                        placeholder="Enter Max Transaction Per Day"
+                      />
+                    </div>
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       From Account
                       <span className="text-red-500">*</span>
@@ -353,8 +438,8 @@ const EditDialog = () => {
                           <SelectValue placeholder="Select Wallet" />
                         </SelectTrigger>
                         <SelectContent>
-                          {wallets.map((wallet, idx) => (
-                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_name}>
+                          {wallets.map((wallet) => (
+                            <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
                               {wallet.Wallet_name}
                             </SelectItem>
                           ))}
@@ -365,7 +450,7 @@ const EditDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       To Account
                       <span className="text-red-500">*</span>
@@ -381,7 +466,7 @@ const EditDialog = () => {
                           <SelectValue placeholder="Select Wallet" />
                         </SelectTrigger>
                         <SelectContent>
-                          {wallets.map((wallet, idx) => (
+                          {wallets.map((wallet) => (
                             <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
                               {wallet.Wallet_name}
                             </SelectItem>
@@ -392,7 +477,7 @@ const EditDialog = () => {
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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">
                       Wallet Destination Fee
                       <span className="text-red-500">*</span>
@@ -408,7 +493,7 @@ const EditDialog = () => {
                           <SelectValue placeholder="Select Wallet" />
                         </SelectTrigger>
                         <SelectContent>
-                          {wallets.map((wallet, idx) => (
+                          {wallets.map((wallet) => (
                             <SelectItem value={wallet.Wallet_id} key={wallet.Wallet_id}>
                               {wallet.Wallet_name}
                             </SelectItem>
@@ -419,27 +504,84 @@ const EditDialog = () => {
                   </div>
                 </div>
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">
-                      Customer Fee Destination
-                      <span className="text-red-500">*</span>
+                      Customer Fee Destination<span className="text-red-500">*</span>
+                    </label>
+                    <div className="grow">
+                      <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                          <button
+                            type="button"
+                            className="input col-span-5 text-left"
+                            style={{ color: 'inherit' }}
+                          >
+                            {customers.find(
+                              (customer) => customer.id === formField.customer_fee_destination
+                            )?.username || 'Select Customer'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[400px] p-0">
+                          <Command>
+                            <CommandInput placeholder="Search Customer..." />
+                            <CommandList
+                              className="max-h-[300px] overflow-y-auto"
+                              style={{ touchAction: 'pan-y' }}
+                              onWheel={(e) => {
+                                e.currentTarget.scrollTop += e.deltaY;
+                              }}
+                            >
+                              <CommandEmpty>No Customer found.</CommandEmpty>
+                              <CommandGroup>
+                                {customers.map((customer) => (
+                                  <CommandItem
+                                    key={customer.id}
+                                    value={customer.username}
+                                    onSelect={() => {
+                                      setFormField({
+                                        ...formField,
+                                        customer_fee_destination: customer.id
+                                      });
+                                      setOpen(false);
+                                    }}
+                                  >
+                                    {customer.username} - {customer.msisdn}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                    <label className="form-label flex items-center gap-1 max-w-56">
+                      Type
+                      <span className="text-red-500"> *</span>
                     </label>
                     <div className="grow">
                       <Select
-                        value={formField.customer_fee_destination}
-                        onValueChange={(customer_fee_destination) =>
-                          setFormField((prev) => ({ ...prev, customer_fee_destination }))
+                        value={formField.type}
+                        onValueChange={(value) =>
+                          setFormField((prev) => ({ ...prev, type: value }))
                         }
                       >
                         <SelectTrigger>
-                          <SelectValue placeholder="Select Customer" />
+                          <SelectValue placeholder="Select" />
                         </SelectTrigger>
                         <SelectContent>
-                          {customers.map((customer, idx) => (
-                            <SelectItem value={customer.id} key={customer.id}>
-                              {customer.username} - {customer.msisdn}
-                            </SelectItem>
-                          ))}
+                          <SelectItem value="D">Disbursement </SelectItem>
+                          <SelectItem value="O">Other </SelectItem>
+                          <SelectItem value="CA">Change Customer to Agent </SelectItem>
+                          <SelectItem value="AC">Change Agent to Customer </SelectItem>
+                          <SelectItem value="CE">Return Customer Emoney </SelectItem>
+                          <SelectItem value="AD">Return Agent Deposit </SelectItem>
+                          <SelectItem value="AM">Return Agent Merchant </SelectItem>
+                          <SelectItem value="AE">Return Agent Emoney </SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
@@ -447,12 +589,11 @@ const EditDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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 Approval
                       <span className="text-red-500">*</span>
                     </label>
-
                     <div className="grow">
                       <Select
                         value={formField.status_approval}
@@ -473,12 +614,11 @@ const EditDialog = () => {
                 </div>
 
                 <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
+                  <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
                       <span className="text-red-500"> *</span>
                     </label>
-
                     <div className="grow">
                       <Select
                         value={formField.status}
@@ -514,10 +654,11 @@ const EditDialog = () => {
                 </div>
               </div>
             </form>
-            {/* Bagian Transaction Fee */}
+            
+            {/* Transaction Fee Section */}
             <ManageTransferFeeContextProvider>
               <Container>
-                <div className="grid gap-5 lg:gap-7.5">
+                <div className="grid gap-5 lg:gap-7.5 mt-5">
                   <DataGridInner />
                 </div>
                 <AddFeeDialog />
@@ -530,4 +671,4 @@ const EditDialog = () => {
   );
 };
 
-export { EditDialog };
+export { EditDialog };
\ No newline at end of file
diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
index ef182c6..4d2b233 100644
--- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -20,6 +20,7 @@ interface TransferType {
   walletOriginId: string;
   walletDestinationId: string;
   status: string;
+  type: string;
 }
 
 interface ContextProps {
@@ -155,6 +156,16 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
+      {
+        accessorFn: (row) => row.type,
+        id: 'type',
+        header: ({ column }) => (
+          <DataGridColumnHeader title="TransactionType Status" column={column} />
+        ),
+        enableSorting: true,
+        enableHiding: false,
+        meta: { headerClassName: 'w-[250px]' }
+      },
       {
         accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
         id: 'status',