handled globale select project

src/components/Layout/Header.jsx

@@ -9,8 +9,10 @@ import { useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import { useChangePassword } from "../Context/ChangePasswordContext";
 import {useProjects} from "../../hooks/useProjects";
+import {useEffect, useState} from "react";
 const Header = () => {
-  const { profile } = useProfile();
+  const {profile} = useProfile();
+  const [selectedProjectId, setSelectedProjectId] = useState("all");
   const dispatch = useDispatch(changeMaster("Job Role"));
   const { data, loading } = useMaster();
   const navigate = useNavigate();
@@ -61,11 +63,17 @@ const Header = () => {
   const handleProfilePage = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
   };
-  // const ChangePasswordPage = () => {
+  const handleProjectselection = (project) =>
-  //   navigate(`/auth/changepassword`);
+  {
-  // };
+     useDispatch(setProjectId(project.id))
+    setProject(project)
+  }
+ 
+
+
+  const {openChangePassword} = useChangePassword();
+  
 
-  const { openChangePassword } = useChangePassword();
   return (
     <nav
       className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@@ -84,8 +92,61 @@ const Header = () => {
         id="navbar-collapse"
       >
         {/* Search */}
-        <div className="navbar-nav align-items-center">
+        <div className=" align-items-center">
-          <div className="nav-item navbar-search-wrapper mb-0">
+{/* 
+               <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> */}
+          
+
+          <div className="btn-group">
+            <button
+              className="btn btn-outline-primary btn-sm dropdown-toggle"
+              type="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              {selectedProject === " "
+                ? "All Projects"
+                : projects?.find((p) => p?.id === selectedProject)?.name || "Select Project"}
+            </button>
+
+            <ul className="dropdown-menu">
+             
+              {projects?.map((project) => (
+                <li key={project?.id}>
+                  <button
+                    className="dropdown-item"
+                    onClick={() => dispatch(setProjectId(project?.id))}
+                  >
+                    {project?.name}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </div> 
+          {/* <div className="nav-item navbar-search-wrapper mb-0">
             <a className="nav-item nav-link search-toggler px-0" href="#">
               <span
                 className="d-inline-block text-body-secondary fw-normal"
@@ -114,41 +175,13 @@ const Header = () => {
                 </div>
               </span>
             </a>
-          </div>
+          </div> */}
         </div>
 
-        {/* marquee */}
-        {/* <marquee>
-          {" "}
-          {getGreetingMessage(profile?.employeeInfo?.firstName)}
-        </marquee> */}
 
         {/* 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"