handle set default project initially

src/components/Layout/Header.jsx

@@ -9,17 +9,20 @@ 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";
+import {useEffect, useState} from "react";
+
+
 const Header = () => {
-  const { profile } = useProfile();
+  const {profile} = useProfile();
-  const [selectedProjectId, setSelectedProjectId] = useState("all");
+  //  const { projects, loading: projectLoading } = useProjects();
+  // const selectedProject = useSelector(
+  //   (store) => store.localVariables.projectId
+  // );
+  // const [selectedProjectId, setSelectedProjectId] = useState("all");
   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";
@@ -65,13 +68,33 @@ const Header = () => {
   const handleProfilePage = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
   };
-  const handleProjectselection = (project) => {
+  const { projects, loading: projectLoading } = useProjects();
-    useDispatch(setProjectId(project.id));
+
-    setProject(project);
+  const selectedProject = useSelector(
-  };
+    (store) => store.localVariables.projectId
+  );
+
+const selectedProjectName = projects?.find(
+  (p) => p.id === selectedProject
+)?.name;
+
+let displayText = "";
+if (selectedProjectName) {
+  displayText = selectedProjectName;
+} else if (projectLoading && selectedProject) {
+  displayText = selectedProject; 
+} else if (projectLoading) {
+  displayText = "Loading...";
+}
 
   const { openChangePassword } = useChangePassword();
-
+  useEffect( () =>
+  {
+    if ( projects && selectedProject !== ' ')
+    {
+      dispatch(setProjectId(projects[0]?.id))
+    }
+},[projects])
   return (
     <nav
       className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@@ -89,7 +112,6 @@ const Header = () => {
         className="navbar-nav-right d-flex align-items-center justify-content-between"
         id="navbar-collapse"
       >
-        {/* Search */}
         <div className=" align-items-center">
           {/* 
                <li className="nav-item ">
@@ -124,10 +146,7 @@ const Header = () => {
               data-bs-toggle="dropdown"
               aria-expanded="false"
             >
-              {selectedProject === " "
+               {displayText}
-                ? "All Projects"
-                : projects?.find((p) => p?.id === selectedProject)?.name ||
-                  "Select Project"}
             </button>
 
             <ul className="dropdown-menu">
@@ -175,7 +194,6 @@ const Header = () => {
           </div> */}
         </div>
 
-        {/* icon list */}
         <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