added select at Global level

src/components/Layout/Header.jsx

@@ -1,18 +1,22 @@
 import getGreetingMessage from "../../utils/greetingHandler";
 import { clearAllCache } from "../../slices/apiDataManager";
 import AuthRepository from "../../repositories/AuthRepository";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
-import { changeMaster } from "../../slices/localVariablesSlice";
+import { changeMaster, setProjectId } from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
 import { useProfile } from "../../hooks/useProfile";
 import { useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import { useChangePassword } from "../Context/ChangePasswordContext";
+import {useProjects} from "../../hooks/useProjects";
 const Header = () => {
   const { profile } = useProfile();
   const dispatch = useDispatch(changeMaster("Job Role"));
   const { data, loading } = useMaster();
   const navigate = useNavigate();
+  const {projects, loading:projectLoading} = useProjects()
+  const selectedProject = useSelector((store)=>store. localVariables.projectId)
+
   const getRole = (roles, joRoleId) => {
     if (!Array.isArray(roles)) return "User";
     let role = roles.find((role) => role.id === joRoleId);
@@ -121,6 +125,30 @@ const Header = () => {
 
         {/* icon list */}
         <ul className="navbar-nav flex-row align-items-center ms-md-auto">
+          <li className="nav-item ">
+                    <label>
+                              <select
+                                name="DataTables_Table_0_length"
+                                aria-controls="DataTables_Table_0"
+                                className="form-select form-select-sm"
+                                value={selectedProject}
+                                onChange={(e) => dispatch(setProjectId(e.target.value))}
+                                aria-label=""
+                              >
+                                {!projectLoading &&
+                                  projects?.map((project) => (
+                                      <option value={project.id} key={project.id}>
+                                        {project.name}
+                                      </option>
+                                    ))}
+                                {projectLoading && (
+                                  <option value="Loading..." disabled>
+                                    Loading...
+                                  </option>
+                                )}
+                              </select>
+                            </label>
+            </li>
           <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
             <a
               className="nav-link dropdown-toggle hide-arrow"
@@ -602,7 +630,7 @@ const Header = () => {
                   <span className="align-middle">My Profile</span>
                 </a>
               </li>
-              <li onClick={handleProfilePage}>
+              <li>
                 <a
                   aria-label="go to setting "
                   className="dropdown-item cusor-pointer"
@@ -611,7 +639,7 @@ const Header = () => {
                   <span className="align-middle">Settings</span>
                 </a>
               </li>
-              {/* <li>
+              <li>
                 <a
                   aria-label="go to billing "
                   className="dropdown-item cusor-pointer"
@@ -626,10 +654,8 @@ const Header = () => {
                     </span>
                   </span>
                 </a>
-              </li> */}
+              </li>
-              <li onClick={openChangePassword}>
+              <li onClick={openChangePassword}> {/* Use the function from the context */}
-                {" "}
-                {/* Use the function from the context */}
                 <a
                   aria-label="go to profile"
                   className="dropdown-item cusor-pointer"