addd serach poject field both projects

src/components/common/Forms/InputFieldSuggesstion.jsx

@@ -1,56 +0,0 @@
-import React from 'react'
-
-const InputFieldSuggesstion = () => {
-  return (
-     <div className="position-relative">
-      <input
-        className="form-control form-control-sm"
-        value={value}
-        onChange={handleInputChange}
-        onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
-        onFocus={() => {
-          if (value) setShowSuggestions(true);
-        }}
-        disabled={disabled}
-      />
-      {showSuggestions && filteredList.length > 0 && (
-        <ul
-          className="list-group shadow-sm position-absolute w-100 bg-white border  zindex-tooltip"
-          style={{
-            maxHeight: "180px",
-            overflowY: "auto",
-            marginTop: "2px",
-            zIndex: 1000,
-            borderRadius:"0px"
-          }}
-        >
-          {filteredList.map((org) => (
-            <li
-              key={org}
-              className="list-group-item list-group-item-action border-none "
-              style={{
-                cursor: "pointer",
-                padding: "5px 12px",
-                fontSize: "14px",
-                transition: "background-color 0.2s",
-              }}
-              onMouseDown={() => handleSelectSuggestion(org)}
-              onMouseEnter={(e) =>
-                (e.currentTarget.style.backgroundColor = "#f8f9fa")
-              }
-              onMouseLeave={(e) =>
-                (e.currentTarget.style.backgroundColor = "transparent")
-              }
-            >
-              {org}
-            </li>
-          ))}
-        </ul>
-      )}
-
-      {error && <small className="danger-text">{error}</small>}
-    </div>
-  )
-}
-
-export default InputFieldSuggesstion

src/components/common/Forms/InputSuggesstionField.jsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useRef, useState } from "react";
+import Label from "../Label";
+
+const InputSuggessionField = ({
+   organizationList = [],
+  value,
+  onChange,
+  error,
+  disabled=false
+}) => {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedOption = options.find((opt) => opt[valueKey] === value);
+
+  const displayText = selectedOption ? selectedOption[labelKey] : placeholder;
+
+  const handleSelect = (option) => {
+    onChange(option[valueKey]);
+    setOpen(false);
+  };
+
+  const toggleDropdown = () => setOpen((prev) => !prev);
+
+  return (
+    <div className="mb-3 position-relative" ref={dropdownRef}>
+      {label && (
+        <Label className="form-label" required={required}>
+          {label}
+        </Label>
+      )}
+
+      <button
+        type="button"
+        className={`select2-icons form-select d-flex align-items-center justify-content-between ${
+          open ? "show" : ""
+        }`}
+        onClick={toggleDropdown}
+        disabled={isLoading}
+      >
+        <span
+          className={`text-truncate ${!selectedOption ? "text-muted" : ""}`}
+        >
+          {isLoading ? "Loading..." : displayText}
+        </span>
+      </button>
+
+      {open && !isLoading && (
+        <ul
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
+          style={{
+            position: "absolute",
+            top: "100%",
+            left: 0,
+            zIndex: 1050,
+            marginTop: "4px",
+            borderRadius: "0.375rem",
+            overflow: "hidden",
+          }}
+        >
+          {options.map((option, i) => (
+            <li key={i}>
+              <button
+                type="button"
+                className={`dropdown-item ${
+                  option[valueKey] === value ? "active" : ""
+                }`}
+                onClick={() => handleSelect(option)}
+              >
+                {option[labelKey]}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default InputSuggessionField;

src/components/common/Forms/SelectFieldServerSide.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import Label from "../Label";
 import { useDebounce } from "../../../utils/appUtils";
 import { useEmployeesName } from "../../../hooks/useEmployees";
+import { useProjectBothName } from "../../../hooks/useProjects";
 
 const SelectEmployeeServerSide = ({
   label = "Select",
@@ -154,7 +155,9 @@ const SelectEmployeeServerSide = ({
           )}
 
           {!isLoading && options.length === 0 && (
-            <li className="dropdown-item text-muted text-center">No results found</li>
+            <li className="dropdown-item text-muted text-center">
+              No results found
+            </li>
           )}
 
           {!isLoading &&
@@ -183,24 +186,29 @@ const SelectEmployeeServerSide = ({
 };
 export default SelectEmployeeServerSide;
 
-
-export const SelectProjectField = ()=>{
-   const [searchText, setSearchText] = useState("");
+export const SelectProjectField = ({
+  label = "Select",
+  placeholder = "Select Project",
+  required = false,
+  value = null,
+  onChange,
+  valueKey = "id",
+  isFullObject = false,
+  isMultiple = false,
+  isAllProject = false,
+}) => {
+  const [searchText, setSearchText] = useState("");
   const debounce = useDebounce(searchText, 300);
 
-  const { data, isLoading } = useEmployeesName(
-    projectId,
-    debounce,
-    isAllEmployee
-  );
+  const { data, isLoading } = useProjectBothName(debounce);
 
-  const options = data?.data ?? [];
+  const options = data ?? [];
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
 
-  const getDisplayName = (emp) => {
-    if (!emp) return "";
-    return `${emp.firstName || ""} ${emp.lastName || ""}`.trim();
+  const getDisplayName = (project) => {
+    if (!project) return "";
+    return `${project.name || ""}`.trim();
   };
 
   /** -----------------------------
@@ -304,7 +312,7 @@ export const SelectProjectField = ()=>{
             top: "100%",
             left: 0,
             zIndex: 1050,
-            marginTop: "4px",
+            marginTop: "2px",
             borderRadius: "0.375rem",
             overflow: "hidden",
           }}
@@ -324,7 +332,9 @@ export const SelectProjectField = ()=>{
           )}
 
           {!isLoading && options.length === 0 && (
-            <li className="dropdown-item text-muted text-center">No results found</li>
+            <li className="dropdown-item text-muted text-center">
+              No results found
+            </li>
           )}
 
           {!isLoading &&
@@ -350,4 +360,4 @@ export const SelectProjectField = ()=>{
       )}
     </div>
   );
-};
+};

src/hooks/useProjects.js

@@ -20,12 +20,15 @@ export const useCurrentService = () => {
 
 // ------------------------------Query-------------------
 
-export const useProjects = (pageSize,pageNumber) => {
+export const useProjects = (pageSize, pageNumber) => {
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
   return useQuery({
-    queryKey: ["ProjectsList",pageSize,pageNumber],
+    queryKey: ["ProjectsList", pageSize, pageNumber],
     queryFn: async () => {
-      const response = await ProjectRepository.getProjectList(pageSize,pageNumber);
+      const response = await ProjectRepository.getProjectList(
+        pageSize,
+        pageNumber
+      );
       return response?.data;
     },
     enabled: !!loggedUser,
@@ -153,7 +156,7 @@ export const useProjectsAllocationByEmployee = (employeeId) => {
   return { projectList, loading: isLoading, error, refetch };
 };
 
-export const useProjectName = (provideAll=false) => {
+export const useProjectName = (provideAll = false) => {
   const {
     data = [],
     isLoading,
@@ -161,7 +164,7 @@ export const useProjectName = (provideAll=false) => {
     refetch,
     isError,
   } = useQuery({
-    queryKey: ["basicProjectNameList",provideAll],
+    queryKey: ["basicProjectNameList", provideAll],
     queryFn: async () => {
       const res = await ProjectRepository.projectNameList(provideAll);
       return res.data || res;
@@ -179,6 +182,19 @@ export const useProjectName = (provideAll=false) => {
   };
 };
 
+export const useProjectBothName = (searchString) => {
+ return useQuery({
+    queryKey: ["basic_bothProject", searchString],
+    queryFn: async () => {
+      const res = await ProjectRepository.projectNameListAll(searchString);
+      return res.data || res;
+    },
+    onError: (error) => {
+      showToast(error.message || "Error while Fetching project Name", "error");
+    },
+  });
+};
+
 export const useProjectInfra = (projectId, serviceId) => {
   const {
     data: projectInfra,
@@ -337,7 +353,7 @@ export const useEmployeeForTaskAssign = (
 
 // -- -------------Mutation-------------------------------
 
-export const useCreateProject = ( onSuccessCallback ) => {
+export const useCreateProject = (onSuccessCallback) => {
   const queryClient = useQueryClient();
 
   return useMutation({
@@ -368,7 +384,7 @@ export const useCreateProject = ( onSuccessCallback ) => {
   });
 };
 
-export const useUpdateProject = ( onSuccessCallback ) => {
+export const useUpdateProject = (onSuccessCallback) => {
   const queryClient = useQueryClient();
   const { mutate, isPending, isSuccess, isError } = useMutation({
     mutationFn: async ({ projectId, payload }) => {

src/repositories/ProjectRepository.jsx

@@ -1,17 +1,24 @@
 import { api } from "../utils/axiosClient";
 
 const ProjectRepository = {
-  getProjectList: (pageSize,pageNumber) => api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
+  getProjectList: (pageSize, pageNumber) =>
+    api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),
 
-  getProjectAllocation: (projectId, serviceId, organizationId, employeeStatus) => {
+  getProjectAllocation: (
+    projectId,
+    serviceId,
+    organizationId,
+    employeeStatus
+  ) => {
     let url = `/api/project/allocation/${projectId}`;
 
     const params = [];
     if (organizationId) params.push(`organizationId=${organizationId}`);
     if (serviceId) params.push(`serviceId=${serviceId}`);
-    if (employeeStatus !== undefined) params.push(`includeInactive=${employeeStatus}`);
+    if (employeeStatus !== undefined)
+      params.push(`includeInactive=${employeeStatus}`);
 
     if (params.length > 0) {
       url += `?${params.join("&")}`;
@@ -20,7 +27,6 @@ const ProjectRepository = {
     return api.get(url);
   },
 
-
   getEmployeesByProject: (projectId) =>
     api.get(`/api/Project/employees/get/${projectId}`),
 
@@ -40,10 +46,13 @@ const ProjectRepository = {
     api.get(`/api/project/allocation-histery/${id}`),
   updateProjectsByEmployee: (id, data) =>
     api.post(`/api/project/assign-projects/${id}`, data),
-  projectNameList: (provideAll) => api.get(`/api/project/list/basic?provideAll=${provideAll}`),
+  projectNameList: (provideAll) =>
+    api.get(`/api/project/list/basic?provideAll=${provideAll}`),
+  projectNameListAll: (searchString) =>
+    api.get(`/api/project/list/basic/all?searchString=${searchString}`),
 
   getProjectDetails: (id) => api.get(`/api/project/details/${id}`),
- 
+
   getProjectInfraByproject: (projectId, serviceId) => {
     let url = `/api/project/infra-details/${projectId}`;
     if (serviceId) {
@@ -85,7 +94,7 @@ const ProjectRepository = {
     api.get(`/api/Project/get/assigned/services/${projectId}`),
   getProjectAssignedOrganizations: (projectId) =>
     api.get(`/api/Project/get/assigned/organization/${projectId}`),
-   getProjectAssignedOrganizationsName: (projectId) =>
+  getProjectAssignedOrganizationsName: (projectId) =>
     api.get(`/api/Project/get/assigned/organization/dropdown/${projectId}`),
 
   getEmployeeForTaskAssign: (projectId, serviceId, organizationId) => {