From 83593db7ac76bce18c52e01f99842238b143bddf Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Tue, 15 Apr 2025 01:04:53 +0700
Subject: [PATCH] adding search in credit_destination on update transaction fee

---
 .../transferfee/blocks/EditDialog.tsx         | 95 ++++++++++++-------
 1 file changed, 61 insertions(+), 34 deletions(-)

diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index c42823f..b8077b5 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -343,13 +343,19 @@ const EditFeeDialog = () => {
       hasFetchedRef.current = false;
     }
   }, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
-
   const handleCloseDialog = () => {
     setFormField(initialState);
     setAlert({ show: false, message: '' });
+    setCustomerSearchTerm('');
+    setOpen(false);
     handleEditFeeDialog(false, null);
   };
-
+  useEffect(() => {
+    if (!showEditFeeDialog) {
+      setCustomerSearchTerm('');
+      setOpen(false);
+    }
+  }, [showEditFeeDialog]);
   const renderSelectWithLoading = (
     value: string,
     onChangeHandler: (value: string) => void,
@@ -668,36 +674,51 @@ const EditFeeDialog = () => {
                     </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>
     </label>
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          className="input w-full text-left"
-        >
-          {customers.find(
-            (customer) => customer.id === formField.credit_destination
-          )?.username || 'Select Customer'}
-        </button>
-      </PopoverTrigger>
-      <PopoverContent className="w-full p-0">
-        <Command className="w-full">
-          <CommandInput
-            placeholder="Search Customer..."
-            className="w-full border-none px-3 py-2"
-          />
-          <CommandList className="max-h-[250px] overflow-y-auto">
-            <CommandEmpty>No Customer found.</CommandEmpty>
-            <CommandGroup>
-              {customers.map((customer) => (
-                <CommandItem
-                  key={customer.id}
-                  value={customer.username}
-                  onSelect={() => {
+    <div className="relative">
+      <div 
+        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"
+        onClick={() => setOpen(!open)}
+      >
+        <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 && (
+        <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"
+              // Prevent clicks from closing the dropdown
+              onClick={(e) => e.stopPropagation()}
+              // Auto focus the input when opened
+              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
@@ -706,17 +727,23 @@ const EditFeeDialog = () => {
                   }}
                 >
                   {customer.username}
-                </CommandItem>
+                </div>
               ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+            {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">