added search on credit_destination field in transaction fee add +edit

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

@@ -70,6 +70,8 @@ const AddFeeDialog = () => {
     selectedTransferFee,
     transactionTypeId
   } = useManageTransferFeeContext();
+  const [customerSearchTerm, setCustomerSearchTerm] = useState('');
+  const [open, setOpen] = useState(false);
 
   const [alert, setAlert] = useState({
     show: false,
@@ -111,6 +113,7 @@ const AddFeeDialog = () => {
     credit_destination_account: ''
   };
 
+
   const [formField, setFormField] = useState(initialState);
 
   const resetForm = () => {
@@ -151,6 +154,13 @@ const AddFeeDialog = () => {
     }
   }, [showAddFeeDialog, transactionTypeId, GetData]);
 
+  useEffect(() => {
+    if (!showAddFeeDialog) {
+      setCustomerSearchTerm('');
+      setOpen(false);
+    }
+  }, [showAddFeeDialog]);
+
   useEffect(() => {
     const created_time = new Date();
     const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@@ -619,14 +629,73 @@ const AddFeeDialog = () => {
                     <label className="form-label">
                       Credit Destination <span className="text-red-500">*</span>
                     </label>
-                    {renderSelectWithLoading(
+                    <div className="relative">
-                      formField.credit_destination,
+                      <div
-                      (value) => setFormField({ ...formField, credit_destination: value }),
+                        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                      customersWithNames,
+                        onClick={() => setOpen(!open)}
-                      'Select Customer',
+                      >
-                      isLoadingCustomers
+                        <span className="truncate">
+                          {customers.find(
+                            (customer) => customer.id === formField.credit_destination
+                          )?.username || 'Search customer...'}
+                        </span>
+                        <path d="m6 9 6 6 6-6"></path>
+                      </div>
+
+                      {open && (
+                        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+                          <div className="sticky top-0 bg-white p-2 border-b">
+                            <Input
+                              className="h-8 text-sm"
+                              type="text"
+                              placeholder="Search customer..."
+                              value={customerSearchTerm}
+                              onChange={(e) => setCustomerSearchTerm(e.target.value)}
+                              autoComplete="off"
+                              onClick={(e) => e.stopPropagation()}
+                              autoFocus
+                            />
+                          </div>
+                          <div>
+                            {customers
+                              .filter(
+                                (customer) =>
+                                  customer.username
+                                    .toLowerCase()
+                                    .includes(customerSearchTerm.toLowerCase()) ||
+                                  customer.msisdn.includes(customerSearchTerm)
+                              )
+                              .map((customer) => (
+                                <div
+                                  key={customer.id}
+                                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                                  onClick={() => {
+                                    setFormField({
+                                      ...formField,
+                                      credit_destination: customer.id
+                                    });
+                                    setOpen(false);
+                                  }}
+                                >
+                                  {customer.username}
+                                </div>
+                              ))}
+                            {customers.filter(
+                              (customer) =>
+                                customer.username
+                                  .toLowerCase()
+                                  .includes(customerSearchTerm.toLowerCase()) ||
+                                customer.msisdn.includes(customerSearchTerm)
+                            ).length === 0 && (
+                              <div className="px-3 py-2 text-sm text-gray-500">
+                                No customer found
+                              </div>
                             )}
                           </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
                 )}
                 <div className="w-full">
                   <label className="form-label">

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

@@ -72,7 +72,6 @@ const EditFeeDialog = () => {
     message: ''
   });
 
-  // Loading states
   const [isLoadingTransferFee, setIsLoadingTransferFee] = useState(false);
   const [isLoadingTransactionType, setIsLoadingTransactionType] = useState(false);
   const [isLoadingWallets, setIsLoadingWallets] = useState(false);
@@ -687,9 +686,7 @@ const EditFeeDialog = () => {
         <span className="truncate">
           {customers.find(customer => customer.id === formField.credit_destination)?.username || 'Search customer...'}
         </span>
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 opacity-50">
           <path d="m6 9 6 6 6-6"></path>
-        </svg>
       </div>
       
       {open && (
@@ -702,9 +699,7 @@ const EditFeeDialog = () => {
               value={customerSearchTerm}
               onChange={(e) => setCustomerSearchTerm(e.target.value)}
               autoComplete="off"
-              // Prevent clicks from closing the dropdown
               onClick={(e) => e.stopPropagation()}
-              // Auto focus the input when opened
               autoFocus
             />
           </div>