added employee search box inside advance payment

src/components/AdvancePayment/AdvancePaymentList.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { useEmployeesName } from '../../hooks/useEmployees'
+
+const AdvancePaymentList = ({employeeId}) => {
+    
+  return (
+    <div className='row'>
+      
+    </div>
+  )
+}
+
+export default AdvancePaymentList

src/components/common/EmployeeSearchInput.jsx

@@ -1,9 +1,11 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useEmployeesName } from "../../hooks/useEmployees";
 import { useDebounce } from "../../utils/appUtils";
 import { useController } from "react-hook-form";
 import Avatar from "./Avatar";
 
+
+
 const EmployeeSearchInput = ({
   control,
   name,
@@ -18,6 +20,8 @@ const EmployeeSearchInput = ({
 
   const [search, setSearch] = useState("");
   const [showDropdown, setShowDropdown] = useState(false);
+  const dropdownRef = useRef(null);
+
   const debouncedSearch = useDebounce(search, 500);
 
   const { data: employees, isLoading } = useEmployeesName(
@@ -30,62 +34,80 @@ const EmployeeSearchInput = ({
     if (value && employees?.data) {
       const found = employees.data.find((emp) => emp.id === value);
       if (found && forAll) {
-        setSearch(found.firstName + " " + found.lastName);
+        setSearch(`${found.firstName} ${found.lastName}`);
       }
     }
-  }, [value, employees?.data]);
+  }, [value, employees?.data, forAll]);
 
   const handleSelect = (employee) => {
     onChange(employee.id);
-    setSearch(employee.firstName + " " + employee.lastName);
+    setSearch(`${employee.firstName} ${employee.lastName}`);
     setShowDropdown(false);
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setShowDropdown(false);
+      }
+    };
+
+    const handleEsc = (event) => {
+      if (event.key === "Escape") setShowDropdown(false);
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEsc);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEsc);
+    };
+  }, []);
+
   return (
-    <div className="position-relative">
+    <div className="position-relative" ref={dropdownRef}>
       <input
-        type="text"
+        type="search"
         ref={ref}
-        className={`form-control form-control-sm`}
+        className="form-control form-control-sm"
         placeholder={placeholder}
         value={search}
         onChange={(e) => {
           setSearch(e.target.value);
           setShowDropdown(true);
-          onChange("");
-        }}
-        onFocus={() => {
-          if (search) setShowDropdown(true);
+          onChange(""); // Clear previous value
         }}
+        onFocus={() => setShowDropdown(true)}
       />
 
       {showDropdown && (employees?.data?.length > 0 || isLoading) && (
         <ul
-          className="list-group position-absolute bg-white w-100 shadow z-3 rounded-none px-0"
-          style={{ maxHeight: 200, overflowY: "auto" }}
+          className="list-group position-absolute bg-white w-100 shadow z-3 rounded-1 px-0"
+          style={{
+            maxHeight: 200,
+            overflowY: "auto",
+            zIndex: 1050, // ensure above Bootstrap elements
+          }}
         >
           {isLoading ? (
-            <li className="list-group-item">
-              <a>Searching...</a>
-            </li>
+            <li className="list-group-item py-1 px-2 text-muted">Searching...</li>
           ) : (
             employees?.data?.map((emp) => (
               <li
                 key={emp.id}
-                className="list-group-item list-group-item-action py-1 px-1"
+                className="list-group-item list-group-item-action py-1 px-2"
                 style={{ cursor: "pointer" }}
                 onClick={() => handleSelect(emp)}
               >
-                <div className="d-flex align-items-center px-0">
+                <div className="d-flex align-items-center">
                   <Avatar
                     size="xs"
                     classAvatar="m-0 me-2"
                     firstName={emp.firstName}
                     lastName={emp.lastName}
                   />
-                  <span className="text-muted">
-                    {`${emp?.firstName} ${emp?.lastName}`.trim()}
-                  </span>
+                  <span className="text-muted">{`${emp.firstName} ${emp.lastName}`}</span>
                 </div>
               </li>
             ))
@@ -93,9 +115,11 @@ const EmployeeSearchInput = ({
         </ul>
       )}
 
-      {error && <small className="danger-text">{error.message}</small>}
+      {error && <small className="text-danger">{error.message}</small>}
     </div>
   );
 };
 
+
+
 export default EmployeeSearchInput;

src/pages/AdvancePayment/AdvancePaymentPage.jsx

@@ -1,11 +1,44 @@
-import React from 'react'
+import React from "react";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import { useEmployee } from "../../hooks/useEmployees";
+import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
+import { useForm } from "react-hook-form";
+import Label from "../../components/common/Label";
 
 const AdvancePaymentPage = () => {
-  return (
-    <div>
-      
-    </div>
-  )
-}
+  const { control, watch } = useForm({
+    defaultValues: {
+      employeeId: "",
+    },
+  });
 
-export default AdvancePaymentPage
+  const selectedEmployeeId = watch("employeeId");
+  return (
+    <div className="container-fluid">
+      <Breadcrumb
+        data={[
+          { label: "Home", link: "/" },
+          { label: "Finance", link: "/advance-payment" },
+          { label: "Advance Payment" },
+        ]}
+      />
+      <div className="card px-2 py-2 page-min-h">
+        <div className="row">
+          <div className="col-12 ">
+           <div className="d-block w-max w-25 text-start" >
+            <Label>Search Employee</Label>
+             <EmployeeSearchInput
+              control={control}
+              name="paidById"
+              projectId={null}
+              forAll={true}
+            />
+           </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdvancePaymentPage;