handled option chain error

src/components/Layout/Header.jsx

@@ -8,16 +8,21 @@ 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";
+import { useProjects } from "../../hooks/useProjects";
 import {useEffect, useState} from "react";
+
+
 const Header = () => {
   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";
@@ -63,17 +68,33 @@ const Header = () => {
   const handleProfilePage = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
   };
-  const handleProjectselection = (project) =>
+  const { projects, loading: projectLoading } = useProjects();
+
+  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( () =>
   {
-     useDispatch(setProjectId(project.id))
-    setProject(project)
-  }
- 
-
-
-  const {openChangePassword} = useChangePassword();
-  
-
+    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"
@@ -91,9 +112,8 @@ 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 ">
                     <label>
                               <select
@@ -118,22 +138,18 @@ const Header = () => {
                               </select>
                             </label>
           </li> */}
-          
 
           <div className="btn-group">
             <button
-              className="btn btn-outline-primary btn-sm dropdown-toggle"
+              className="btn btn-sm-sm btn-xl dropdown-toggle"
               type="button"
               data-bs-toggle="dropdown"
               aria-expanded="false"
             >
-              {selectedProject === " "
-                ? "All Projects"
-                : projects?.find((p) => p?.id === selectedProject)?.name || "Select Project"}
+               {displayText}
             </button>
 
             <ul className="dropdown-menu">
-             
               {projects?.map((project) => (
                 <li key={project?.id}>
                   <button
@@ -145,7 +161,7 @@ const Header = () => {
                 </li>
               ))}
             </ul>
-          </div> 
+          </div>
           {/* <div className="nav-item navbar-search-wrapper mb-0">
             <a className="nav-item nav-link search-toggler px-0" href="#">
               <span
@@ -178,10 +194,7 @@ 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
               className="nav-link dropdown-toggle hide-arrow"
@@ -688,7 +701,9 @@ const Header = () => {
                   </span>
                 </a>
               </li>
-              <li onClick={openChangePassword}> {/* Use the function from the context */}
+              <li onClick={openChangePassword}>
+                {" "}
+                {/* Use the function from the context */}
                 <a
                   aria-label="go to profile"
                   className="dropdown-item cusor-pointer"
@@ -718,4 +733,4 @@ const Header = () => {
     </nav>
   );
 };
-export default Header;
+export default Header;