Adding Search box in Expense Paid by dropdown.

src/components/Expenses/ManageExpense.jsx

@@ -330,6 +330,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               control={control}
               name="paidById"
               projectId={null}
+              forAll={expenseToEdit ? true :false}
             />
           </div>
         </div>

src/components/common/EmployeeSearchInput.jsx

@@ -1,11 +1,16 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } 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, projectId, placeholder }) => {
+const EmployeeSearchInput = ({
+  control,
+  name,
+  projectId,
+  placeholder,
+  forAll,
+}) => {
   const {
     field: { onChange, value, ref },
     fieldState: { error },
@@ -15,32 +20,20 @@ const EmployeeSearchInput = ({ control, name, projectId, placeholder }) => {
   const [showDropdown, setShowDropdown] = useState(false);
   const debouncedSearch = useDebounce(search, 500);
 
-  const wrapperRef = useRef(null);
-
-  const {
-    data: employees,
-    isLoading,
-  } = useEmployeesName(projectId, debouncedSearch);
+  const { data: employees, isLoading } = useEmployeesName(
+    projectId,
+    debouncedSearch,
+    forAll
+  );
 
   useEffect(() => {
-    if (value && !search) {
-      const found = employees?.data?.find((emp) => emp.id === value);
-      if (found) setSearch(found.firstName + " " + found.lastName);
-    }
-  }, [value, employees]);
-
-  useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
-        setShowDropdown(false);
+    if (value && employees?.data) {
+      const found = employees.data.find((emp) => emp.id === value);
+      if (found && forAll) {
+        setSearch(found.firstName + " " + found.lastName);
       }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
+    }
+  }, [value, employees?.data]);
 
   const handleSelect = (employee) => {
     onChange(employee.id);
@@ -49,11 +42,11 @@ const EmployeeSearchInput = ({ control, name, projectId, placeholder }) => {
   };
 
   return (
-    <div className="position-relative" ref={wrapperRef}>
+    <div className="position-relative">
       <input
         type="text"
         ref={ref}
-        className="form-control form-control-sm"
+        className={`form-control form-control-sm`}
         placeholder={placeholder}
         value={search}
         onChange={(e) => {
@@ -68,7 +61,7 @@ const EmployeeSearchInput = ({ control, name, projectId, placeholder }) => {
 
       {showDropdown && (employees?.data?.length > 0 || isLoading) && (
         <ul
-          className="list-group position-absolute bg-white w-100 shadow z-3 px-0"
+          className="list-group position-absolute bg-white w-100 shadow z-3 rounded-none px-0"
           style={{ maxHeight: 200, overflowY: "auto" }}
         >
           {isLoading ? (
@@ -106,4 +99,3 @@ const EmployeeSearchInput = ({ control, name, projectId, placeholder }) => {
 };
 
 export default EmployeeSearchInput;
-

src/hooks/useEmployees.js

@@ -184,11 +184,11 @@ export const useEmployeeProfile = (employeeId) => {
   };
 };
 
-export const useEmployeesName = (projectId, search) => {
+export const useEmployeesName = (projectId, search,forAll) => {
   return useQuery({
-    queryKey: ["employees", projectId, search],
+    queryKey: ["employees", projectId, search,forAll],
     queryFn: async () =>
-      await EmployeeRepository.getEmployeeName(projectId, search),
+      await EmployeeRepository.getEmployeeName(projectId, search,forAll),
 
     staleTime: 5 * 60 * 1000, // Optional: cache for 5 minutes
   });

src/repositories/EmployeeRepository.jsx

@@ -10,16 +10,17 @@ const EmployeeRepository = {
   updateEmployee: (id, data) => api.put(`/users/${id}`, data),
   // deleteEmployee: ( id ) => api.delete( `/users/${ id }` ),
   getEmployeeProfile: (id) => api.get(`/api/employee/profile/get/${id}`),
-  deleteEmployee: (id,active) => api.delete(`/api/employee/${id}?active=${active}`),
- getEmployeeName: (projectId, search) => {
-  const params = new URLSearchParams();
+  deleteEmployee: (id, active) => api.delete(`/api/employee/${id}?active=${active}`),
+  getEmployeeName: (projectId, search, allEmployee) => {
+    const params = new URLSearchParams();
 
-  if (projectId) params.append("projectId", projectId);
-  if (search) params.append("searchString", search);
+    if (projectId) params.append("projectId", projectId);
+    if (search) params.append("searchString", search);
+    if (allEmployee) params.append("sendAll", allEmployee)
 
-  const query = params.toString();
-  return api.get(`/api/Employee/basic${query ? `?${query}` : ""}`);
-}
+    const query = params.toString();
+    return api.get(`/api/Employee/basic${query ? `?${query}` : ""}`);
+  }
 
 };