From 920ee4e5ab9901fa80b01b0e6e8f00a0d707f090 Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 9 Jun 2025 23:06:38 +0700
Subject: [PATCH] [skip ci] update search customer on add and edit transferfee

---
 .../transfer/transferfee/blocks/AddDialog.tsx | 82 ++++++++++---------
 .../transferfee/blocks/EditDialog.tsx         | 57 +++++++------
 2 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
index 3c45db1..5d80282 100644
--- a/src/pages/transfer/transferfee/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
@@ -9,7 +9,8 @@ import {
   KeenIcon,
   useDataGrid
 } from '@/components';
-import { useCallApi } from '@/hooks';3
+import { useCallApi } from '@/hooks';
+3;
 import {
   Dialog,
   DialogBody,
@@ -84,8 +85,8 @@ const AddFeeDialog = () => {
   const [wallets, setWallets] = useState<WalletProps[]>([]);
   const [deductFilteredCustomers, setDeductFilteredCustomers] = useState<CustomerProps[]>([]);
   const [creditFilteredCustomers, setCreditFilteredCustomers] = useState<CustomerProps[]>([]);
-const [isSearchingDeductCustomers, setIsSearchingDeductCustomers] = useState(false);
-const [isSearchingCreditCustomers, setIsSearchingCreditCustomers] = useState(false);
+  const [isSearchingDeductCustomers, setIsSearchingDeductCustomers] = useState(false);
+  const [isSearchingCreditCustomers, setIsSearchingCreditCustomers] = useState(false);
   const [transactionTypeName, setTransactionTypeName] = useState('');
 
   const [isLoadingTransactionType, setIsLoadingTransactionType] = useState(false);
@@ -120,14 +121,14 @@ const [isSearchingCreditCustomers, setIsSearchingCreditCustomers] = useState(fal
 
   const [formField, setFormField] = useState(initialState);
 
-const resetForm = () => {
-  setFormField(initialState);
-  setTransactionTypeName('');
-  setDeductFilteredCustomers([]);
-  setCreditFilteredCustomers([]);
-  setDeductSearchTerm(''); 
-  setCreditSearchTerm(''); 
-};
+  const resetForm = () => {
+    setFormField(initialState);
+    setTransactionTypeName('');
+    setDeductFilteredCustomers([]);
+    setCreditFilteredCustomers([]);
+    setDeductSearchTerm('');
+    setCreditSearchTerm('');
+  };
 
   const handleCloseDialog = () => {
     setFormField(initialState);
@@ -144,24 +145,23 @@ const resetForm = () => {
   const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
   const parsedUser = getAuth()?.user;
 
-
   const useDebounce = (value: string, delay: number) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
+    const [debouncedValue, setDebouncedValue] = useState(value);
 
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
+    useEffect(() => {
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
 
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
+      return () => {
+        clearTimeout(handler);
+      };
+    }, [value, delay]);
 
-  return debouncedValue;
-};
+    return debouncedValue;
+  };
   const debouncedDeductSearchTerm = useDebounce(deductSearchTerm, 500);
-const debouncedCreditSearchTerm = useDebounce(creditSearchTerm, 500);
+  const debouncedCreditSearchTerm = useDebounce(creditSearchTerm, 500);
   useEffect(() => {
     if (showAddFeeDialog && transactionTypeId) {
       setIsLoadingTransactionType(true);
@@ -265,7 +265,7 @@ const debouncedCreditSearchTerm = useDebounce(creditSearchTerm, 500);
     if (!showAddFeeDialog) return;
     fetchWallets();
   }, [showAddFeeDialog, fetchWallets]);
-  
+
   const searchDeductCustomers = useCallback(
     async (searchTerm: string) => {
       setIsSearchingDeductCustomers(true);
@@ -302,11 +302,10 @@ const debouncedCreditSearchTerm = useDebounce(creditSearchTerm, 500);
     [GetData]
   );
   useEffect(() => {
-  if (openDeductOrigin && formField.deduct_from === 'I') {
-    searchDeductCustomers(debouncedDeductSearchTerm);
-  }
-}, [debouncedDeductSearchTerm, openDeductOrigin, formField.deduct_from, searchDeductCustomers]);
-
+    if (openDeductOrigin && formField.deduct_from === 'I') {
+      searchDeductCustomers(debouncedDeductSearchTerm);
+    }
+  }, [debouncedDeductSearchTerm, openDeductOrigin, formField.deduct_from, searchDeductCustomers]);
 
   const searchCreditCustomers = useCallback(
     async (searchTerm: string) => {
@@ -344,10 +343,15 @@ const debouncedCreditSearchTerm = useDebounce(creditSearchTerm, 500);
     [GetData]
   );
   useEffect(() => {
-  if (openCreditDestination && formField.credit_to === 'I') {
-    searchCreditCustomers(debouncedCreditSearchTerm);
-  }
-}, [debouncedCreditSearchTerm, openCreditDestination, formField.credit_to, searchCreditCustomers]);
+    if (openCreditDestination && formField.credit_to === 'I') {
+      searchCreditCustomers(debouncedCreditSearchTerm);
+    }
+  }, [
+    debouncedCreditSearchTerm,
+    openCreditDestination,
+    formField.credit_to,
+    searchCreditCustomers
+  ]);
 
   const doCreateTransferType = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
@@ -740,8 +744,8 @@ const debouncedCreditSearchTerm = useDebounce(creditSearchTerm, 500);
                                   key={customer.id}
                                   className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
                                   onClick={() => {
-                                    setFormField({ ...formField, deduct_origin: customer.id }); 
-                                    setOpenDeductOrigin(false); 
+                                    setFormField({ ...formField, deduct_origin: customer.id });
+                                    setOpenDeductOrigin(false);
                                   }}
                                 >
                                   {customer.fullname}
@@ -801,7 +805,7 @@ const debouncedCreditSearchTerm = useDebounce(creditSearchTerm, 500);
                     </SelectContent>
                   </Select>
                 </div>
-               {formField.credit_to === 'I' && (
+                {formField.credit_to === 'I' && (
                   <div className="w-full">
                     <label className="form-label">
                       Credit Destination <span className="text-red-500">*</span>
@@ -849,8 +853,8 @@ const debouncedCreditSearchTerm = useDebounce(creditSearchTerm, 500);
                                   key={customer.id}
                                   className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
                                   onClick={() => {
-                                    setFormField({ ...formField, credit_destination: customer.id }); 
-                                    setOpenCreditDestination(false); 
+                                    setFormField({ ...formField, credit_destination: customer.id });
+                                    setOpenCreditDestination(false);
                                   }}
                                 >
                                   {customer.fullname}
diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index 16ab108..c0e8928 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -118,24 +118,24 @@ const EditFeeDialog = () => {
   };
 
   const [formField, setFormField] = useState(initialState);
-  const useDebounce = (value:string, delay:number) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
+  const useDebounce = (value: string, delay: number) => {
+    const [debouncedValue, setDebouncedValue] = useState(value);
 
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
+    useEffect(() => {
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
 
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
+      return () => {
+        clearTimeout(handler);
+      };
+    }, [value, delay]);
 
-  return debouncedValue;
-};
+    return debouncedValue;
+  };
 
-const debouncedDeductSearch = useDebounce(deductSearchTerm, 300);
-const debouncedCreditSearch = useDebounce(creditSearchTerm, 300);
+  const debouncedDeductSearch = useDebounce(deductSearchTerm, 300);
+  const debouncedCreditSearch = useDebounce(creditSearchTerm, 300);
   useEffect(() => {
     const updated_time = new Date();
     const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -358,17 +358,17 @@ const debouncedCreditSearch = useDebounce(creditSearchTerm, 300);
     [GetData]
   );
 
-useEffect(() => {
-  if (openDeductOrigin) {
-    searchDeductCustomers(debouncedDeductSearch);
-  }
-}, [debouncedDeductSearch, openDeductOrigin, searchDeductCustomers]);
+  useEffect(() => {
+    if (openDeductOrigin) {
+      searchDeductCustomers(debouncedDeductSearch);
+    }
+  }, [debouncedDeductSearch, openDeductOrigin, searchDeductCustomers]);
 
-useEffect(() => {
-  if (openCreditDestination) {
-    searchCreditCustomers(debouncedCreditSearch);
-  }
-}, [debouncedCreditSearch, openCreditDestination, searchCreditCustomers]);
+  useEffect(() => {
+    if (openCreditDestination) {
+      searchCreditCustomers(debouncedCreditSearch);
+    }
+  }, [debouncedCreditSearch, openCreditDestination, searchCreditCustomers]);
 
   useEffect(() => {
     if (!showEditFeeDialog) return;
@@ -377,7 +377,7 @@ useEffect(() => {
       setIsLoadingTransactionType(true);
       try {
         sorting = sorting.length === 0 ? [{ id: 'name', desc: false }] : sorting;
-        const response = await GetData(`${API_URL}/transactiontype/list`, {
+        const response = await GetData(`${API_URL}/transactiontype/list `, {
           limit: 100,
           page: 1,
           with_deleted: false,
@@ -793,7 +793,6 @@ useEffect(() => {
                                 onChange={(e) => {
                                   const value = e.target.value;
                                   setDeductSearchTerm(value);
-
                                 }}
                                 autoComplete="off"
                                 onClick={(e) => e.stopPropagation()}
@@ -811,7 +810,7 @@ useEffect(() => {
                                     onClick={() => {
                                       setFormField({ ...formField, deduct_origin: customer.id });
                                       setSelectedDeductCustomer(customer);
-                                      setDeductSearchTerm(''); 
+                                      setDeductSearchTerm('');
                                       setOpenDeductOrigin(false);
                                     }}
                                   >
@@ -923,8 +922,8 @@ useEffect(() => {
                                       setFormField({
                                         ...formField,
                                         credit_destination: customer.id
-                                      }); 
-                                      setOpenCreditDestination(false); 
+                                      });
+                                      setOpenCreditDestination(false);
                                     }}
                                   >
                                     {customer.fullname}