src/components/Layout/Header.jsx

@@ -33,11 +33,9 @@ const Header = () => {
     /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
 
   // Define the specific project status IDs you want to filter by
-  // Changed to explicitly include only 'Active', 'On Hold', 'In Progress'
   const allowedProjectStatusIds = [
     "603e994b-a27f-4e5d-a251-f3d69b0498ba", // On Hold
     "cdad86aa-8a56-4ff4-b633-9c629057dfef", // In Progress
-    "ef1c356e-0fe0-42df-a5d3-8daee355492d", // Inactive - Removed as per requirement
     "b74da4c2-d07e-46f2-9919-e75e49b12731", // Active
   ];
 
@@ -68,7 +66,6 @@ const Header = () => {
           window.location.href = "/auth/login";
         })
         .catch((error) => {
-          // Even if logout API fails, clear local storage and redirect
           localStorage.removeItem("jwtToken");
           localStorage.removeItem("refreshToken");
           localStorage.removeItem("user");
@@ -94,9 +91,10 @@ const Header = () => {
   );
 
   // Conditional filtering for projectsForDropdown
-  // If on Dashboard, show all projects. Otherwise, filter by allowedProjectStatusIds.
+  // This list will be shown in the dropdown for regular users (without MANAGE_PROJECT permission)
+  // On Dashboard, it will contain all projects. On other pages, only allowed statuses.
   const projectsForDropdown = isDashboard
-    ? projectNames // On dashboard, show all projects
+    ? projectNames // On dashboard, show all projects for selection if managing permission is given
     : projectNames?.filter(project =>
         allowedProjectStatusIds.includes(project.projectStatusId)
       );
@@ -106,11 +104,9 @@ const Header = () => {
   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
     );
-    // Fallback to selectedProject ID if name not found during loading or mismatch
     displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
   } else if (projectLoading) {
     displayText = "Loading...";
@@ -125,15 +121,22 @@ const Header = () => {
       selectedProject === undefined &&
       !getCachedData("hasReceived")
     ) {
-      if (isDashboard) {
+      if (isDashboard && HasManageProjectPermission) {
-        dispatch(setProjectId(null)); // Always set to null for "All Projects" on Dashboard initial load
+        dispatch(setProjectId(null)); // "All Projects" default for managers on dashboard
+      } else if (isDashboard && !HasManageProjectPermission) {
+        // If regular user on dashboard, and only one project, select that one
+        if (projectNames.length === 1) {
+          dispatch(setProjectId(projectNames[0].id));
+        } else {
+          dispatch(setProjectId(null)); // If multiple projects, default to "All Projects" for regular users on dashboard
+        }
       } else {
         // 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
+        dispatch(setProjectId(firstAllowedProject?.id || null));
       }
     }
-  }, [projectNames, selectedProject, dispatch, isDashboard]);
+  }, [projectNames, selectedProject, dispatch, isDashboard, HasManageProjectPermission]);
 
 
   const handler = useCallback(
@@ -178,17 +181,27 @@ const Header = () => {
   }, [handler, newProjectHandler]);
 
   const handleProjectChange = (project) => {
-    dispatch(setProjectId(project)); // Always set the projectId
+    dispatch(setProjectId(project));
 
     if (isProjectPath && project !== null) {
-      navigate("/projects/details"); // Navigate only if on /projects and a specific project is selected
+      navigate("/projects/details");
     }
-    // No navigation if on dashboard or if "All Projects" is selected
   };
 
   // Determine if the dropdown should be shown
-  const shouldShowDropdown =
+  const shouldShowDropdown = (() => {
-    isDashboard || (projectsForDropdown && projectsForDropdown.length > 1);
+    if (HasManageProjectPermission) {
+      // Managers always see the dropdown if there's more than one project (total)
+      return projectNames && projectNames.length > 1;
+    } else {
+      // Regular users only see the dropdown if they have more than one *assigned* project
+      return projectsForDropdown && projectsForDropdown.length > 1;
+    }
+  })();
+
+  // Determine if "All Projects" option should be displayed in the dropdown
+  const shouldShowAllProjectsOption = HasManageProjectPermission || (isDashboard && projectsForDropdown && projectsForDropdown.length > 1);
+
 
   return (
     <nav
@@ -211,7 +224,6 @@ const Header = () => {
           <div className="align-items-center">
             <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
             <div className="btn-group">
-              {/* Conditionally render the button based on shouldShowDropdown */}
               {shouldShowDropdown ? (
                 <button
                   className={`btn btn-sm-sm btn-xl ${projectsForDropdown && projectsForDropdown.length > 0 ? "dropdown-toggle" : ""
@@ -223,7 +235,7 @@ const Header = () => {
                   {displayText}
                 </button>
               ) : (
-                // If only one project, just display its name without a dropdown
+                // If only one project, or no dropdown needed, just display its name
                 <span className="btn btn-sm-sm btn-xl px-1">
                   {projectsForDropdown && projectsForDropdown.length === 1
                     ? projectsForDropdown[0].name
@@ -231,23 +243,22 @@ const Header = () => {
                 </span>
               )}
 
-              {/* Only render the dropdown menu if shouldShowDropdown is true */}
+              {shouldShowDropdown && (
-              {shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
                 <ul
                   className="dropdown-menu"
                   style={{ overflow: "auto", maxHeight: "300px" }}
                 >
-                  {isDashboard && (
+                  {shouldShowAllProjectsOption && (
                     <li>
                       <button
                         className="dropdown-item"
-                        onClick={() => handleProjectChange(null)} // Set projectId to null for "All Projects"
+                        onClick={() => handleProjectChange(null)}
                       >
                         All Projects
                       </button>
                     </li>
                   )}
-                  {[...projectsForDropdown] // Sort the conditionally filtered list
+                  {[...projectsForDropdown]
                     .sort((a, b) => a?.name?.localeCompare(b.name))
                     .map((project) => (
                       <li key={project?.id}>