Project dropdown should only include active ,On Hold and In Progress Projects only show in Projects page.

src/components/Layout/Header.jsx

@@ -1,4 +1,3 @@
-
 import getGreetingMessage from "../../utils/greetingHandler";
 import {
   cacheData,
@@ -28,9 +27,19 @@ const Header = () => {
   const navigate = useNavigate();
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
 
-    const isDirectoryPath = /^\/directory$/.test(location.pathname);
+  const isDirectoryPath = /^\/directory$/.test(location.pathname);
-    const isProjectPath = /^\/projects$/.test(location.pathname);
+  const isProjectPath = /^\/projects$/.test(location.pathname);
-    const isDashboard = /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname) ;
+  const isDashboard =
+    /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
+
+  // Define the specific project status IDs you want to filter by
+  const allowedProjectStatusIds = [
+    "603e994b-a27f-4e5d-a251-f3d69b0498ba", // On Hold
+    "cdad86aa-8a56-4ff4-b633-9c629057dfef", // In Progress
+    "ef1c356e-0fe0-42df-a5d3-8daee355492d", // Inactive
+    "b74da4c2-d07e-46f2-9919-e75e49b12731", // Active
+  ];
+
   const getRole = (roles, joRoleId) => {
     if (!Array.isArray(roles)) return "User";
     let role = roles.find((role) => role.id === joRoleId);
@@ -38,7 +47,7 @@ const Header = () => {
   };
 
   const handleLogout = (e) => {
-    e.preventDefault(); 
+    e.preventDefault();
     logout();
   };
 
@@ -83,11 +92,20 @@ const Header = () => {
     (store) => store.localVariables.projectId
   );
 
+  // Conditional filtering for projectsForDropdown
+  // If on Dashboard, show all projects. Otherwise, filter by allowedProjectStatusIds.
+  const projectsForDropdown = isDashboard
+    ? projectNames // On dashboard, show all projects
+    : projectNames?.filter(project =>
+      allowedProjectStatusIds.includes(project.projectStatusId)
+    );
+
   // Determine the display text for the project dropdown
   let displayText = "All Projects";
   if (selectedProject === null) {
     displayText = "All Projects";
   } else if (selectedProject) {
+    // Find the selected project from the full projectNames list
     const selectedProjectObj = projectNames?.find(
       (p) => p?.id === selectedProject
     );
@@ -101,22 +119,20 @@ const Header = () => {
 
   useEffect(() => {
     if (
-      projectNames &&
+      projectNames && // Use the original projectNames for initial setting to ensure all are considered for initial state if needed
       projectNames.length > 0 &&
       selectedProject === undefined &&
       !getCachedData("hasReceived")
     ) {
-      if(isDashboard){
+      if (isDashboard) {
-        dispatch(setProjectId(null));
+        dispatch(setProjectId(null)); // Always set to null for "All Projects" on Dashboard initial load
-      }else{
+      } else {
-         dispatch(setProjectId(projectNames[0]?.id));
+        // If not dashboard, set to the first project that matches the allowed statuses if available
+        const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId));
+        dispatch(setProjectId(firstAllowedProject?.id || null)); // Fallback to null if no allowed projects
       }
     }
-  }, [projectNames, selectedProject, dispatch]);
+  }, [projectNames, selectedProject, dispatch, isDashboard]);
-
-
-  /** Check if current page is project details page or directory page */
-  // const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
 
 
   const handler = useCallback(
@@ -160,15 +176,16 @@ const Header = () => {
     };
   }, [handler, newProjectHandler]);
 
-  const handleProjectChange =(project)=>{
+  const handleProjectChange = (project) => {
-    if(isProjectPath){
+    dispatch(setProjectId(project)); // Always set the projectId
-     dispatch(setProjectId(project))
-     navigate("/projects/details")
-    } else{
-      dispatch(setProjectId(project))
-    }
-  }
 
+    if (isProjectPath && project !== null) {
+      navigate("/projects/details"); // Navigate only if on /projects and a specific project is selected
+    }
+    // No navigation if on dashboard or if "All Projects" is selected
+  };
+
+  console.log("Kartik sharma", projectNames);
   return (
     <nav
       className="layout-navbar container-fluid mb-3 navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@@ -191,7 +208,7 @@ const Header = () => {
             <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
             <div className="btn-group">
               <button
-                className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
+                className={`btn btn-sm-sm btn-xl ${projectsForDropdown && projectsForDropdown.length > 0 ? "dropdown-toggle" : ""
                   } px-1`}
                 type="button"
                 data-bs-toggle="dropdown"
@@ -200,29 +217,28 @@ const Header = () => {
                 {displayText}
               </button>
 
-              {projectNames.length > 0 && (
+              {projectsForDropdown && projectsForDropdown.length > 0 && (
                 <ul
                   className="dropdown-menu"
                   style={{ overflow: "auto", maxHeight: "300px" }}
                 >
-            
                   {isDashboard && (
                     <li>
                       <button
                         className="dropdown-item"
-                        onClick={() => dispatch(setProjectId(null))}
+                        onClick={() => handleProjectChange(null)} // Set projectId to null for "All Projects"
                       >
                         All Projects
                       </button>
                     </li>
                   )}
-                  {[...projectNames]
+                  {[...projectsForDropdown] // Sort the conditionally filtered list
                     .sort((a, b) => a?.name?.localeCompare(b.name))
                     .map((project) => (
                       <li key={project?.id}>
                         <button
                           className="dropdown-item"
-                          onClick={()=>handleProjectChange(project?.id)}
+                          onClick={() => handleProjectChange(project?.id)}
                         >
                           {project?.name}
                           {project?.shortName && (
@@ -239,7 +255,6 @@ const Header = () => {
           </div>
         )}
 
-
         <ul className="navbar-nav flex-row align-items-center ms-md-auto">
           <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
             <a