src/components/Dashboard/ProjectProgressChart.jsx

@@ -93,6 +93,33 @@ const ProjectProgressChart = ({
             <h5 className="mb-1">Project Progress</h5>
             <p className="card-subtitle">Progress Overview by Project</p>
           </div>
+
+          {/* Right: Checkbox and Project Name */}
+          <div className="d-flex flex-column align-items-start align-items-md-end text-start text-md-end mt-1 mt-md-0">
+            {ShowAllProject == true && (
+              <div className="form-check form-switch mb-1 d-flex align-items-center">
+                <input
+                  className="form-check-input"
+                  type="checkbox"
+                  role="switch"
+                  id="showAllEmployees"
+                  checked={showAllEmployees}
+                  onChange={(e) => setShowAllEmployees(e.target.checked)}
+                />
+                <label
+                  className="form-check-label ms-2"
+                  htmlFor="showAllEmployees"
+                >
+                  All Projects
+                </label>
+              </div>
+            )}
+            {!showAllEmployees && selectedProjectName && (
+              <p className="text-muted mb-0 small">
+                <span className="card-subtitle">{selectedProjectName}</span>
+              </p>
+            )}
+          </div>
         </div>
 
         {/* Row 2: Time Range Buttons */}

src/components/Layout/Header.jsx

@@ -1,4 +1,3 @@
-
 import getGreetingMessage from "../../utils/greetingHandler";
 import {
   cacheData,
@@ -21,21 +20,18 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_PROJECT } from "../../utils/constants";
 
 const Header = () => {
-  const { profile } = useProfile();
+  const {profile} = useProfile();
   const location = useLocation();
   const dispatch = useDispatch();
   const { data, loading } = useMaster();
   const navigate = useNavigate();
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
-    const isDashboard = location.pathname === "/dashboard";
-  // const isDirectoryPath = location.pathname === "/directory";
 
   const getRole = (roles, joRoleId) => {
     if (!Array.isArray(roles)) return "User";
     let role = roles.find((role) => role.id === joRoleId);
     return role ? role.name : "User";
   };
-
   const handleLogout = (e) => {
     e.preventDefault(); // Prevent default anchor behavior (e.g., page reload)
     logout();
@@ -43,6 +39,7 @@ const Header = () => {
 
   const logout = async () => {
     try {
+      // Notify server about the logout (optional)
       let data = {
         refreshToken: localStorage.getItem("refreshToken"),
       };
@@ -57,7 +54,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");
@@ -75,43 +71,39 @@ const Header = () => {
   const handleProfilePage = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
   };
-
+  // const { projects, loading: projectLoading } = useProjects();
   const { projectNames, loading: projectLoading, fetchData } = useProjectName();
 
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
 
-  // Determine the display text for the project dropdown
+  const selectedProjectName = projectNames?.find(
-  let displayText = "All Projects";
+    (p) => p?.id === selectedProject
-  if (selectedProject === null) {
+  )?.name;
-    displayText = "All Projects";
+
-  } else if (selectedProject) {
+  let displayText = "";
-    const selectedProjectObj = projectNames?.find(
+  if (selectedProjectName) {
-      (p) => p?.id === selectedProject
+    displayText = selectedProjectName;
-    );
+  } else if (projectLoading && selectedProject) {
-    // Fallback to selectedProject ID if name not found during loading or mismatch
+    displayText = selectedProject;
-    displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
   } else if (projectLoading) {
     displayText = "Loading...";
   }
 
   const { openChangePassword } = useChangePassword();
-
   useEffect(() => {
     if (
       projectNames &&
-      projectNames.length > 0 &&
+      selectedProject !== " " &&
-      selectedProject === undefined &&
       !getCachedData("hasReceived")
     ) {
-      dispatch(setProjectId(null)); // Set to null for "All Projects"
+      dispatch(setProjectId(projectNames[0]?.id));
     }
-  }, [projectNames, selectedProject, dispatch]);
+  }, [projectNames]);
 
-
+  /** Check if current page id project details page */
-  /** Check if current page is project details page or directory page */
+  const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname) 
-  // const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
   const isDirectoryPath = /^\/directory$/.test(location.pathname);
 
   const handler = useCallback(
@@ -119,47 +111,58 @@ const Header = () => {
       if (!HasManageProjectPermission) {
         await fetchData();
         const projectExist = data.projectIds.some(
-          (item) => item === selectedProject
+          (item) => item == selectedProject
         );
         if (projectExist) {
           cacheData("hasReceived", false);
         }
       }
     },
-    [fetchData, selectedProject, HasManageProjectPermission]
+    [fetchData,projectNames,selectedProject]
   );
 
+  // useEffect(() => {
+  //   eventBus.on("assign_project_one", handler);
+  //   return () => eventBus.off("assign_project_one", handler);
+  // }, [handler]);
+
   const newProjectHandler = useCallback(
     async (msg) => {
+      
       if (HasManageProjectPermission && msg.keyword === "Create_Project") {
         await fetchData();
-      } else if (projectNames?.some((item) => item.id === msg.response.id)) {
+      } else if (projectNames.some((item) => item.id == msg.response.id)) {
+      console.log((projectNames.some((item) => item.id == msg.response.id)))
         await fetchData();
       }
       cacheData("hasReceived", false);
     },
-    [HasManageProjectPermission, projectNames, fetchData]
+    [HasManageProjectPermission,projectNames]
   );
 
-  // Correct way to dispatch an action on mount
+  // useEffect(() => {
-  useEffect(() => {
+  //   eventBus.on("project", newProjectHandler);
-    dispatch(changeMaster("Job Role"));
+  //   return () => eventBus.off("project", newProjectHandler);
-  }, [dispatch]);
+  // }, [handler]);
 
-  // Event bus listeners for project changes
+  useDispatch( () =>
+  {
+  dispatch(changeMaster("Job Role"))
+},[])
   useEffect(() => {
-    eventBus.on("assign_project_one", handler);
+  eventBus.on("assign_project_one", handler);
-    eventBus.on("project", newProjectHandler);
+  eventBus.on("project", newProjectHandler);
+
+  return () => {
+    eventBus.off("assign_project_one", handler);
+    eventBus.off("project", newProjectHandler);
+  };
+}, [handler, newProjectHandler]);
 
-    return () => {
-      eventBus.off("assign_project_one", handler);
-      eventBus.off("project", newProjectHandler);
-    };
-  }, [handler, newProjectHandler]);
 
   return (
     <nav
-      className="layout-navbar container-fluid mb-3 navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
+      className="layout-navbar container-fluid mb-3  navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
       id="layout-navbar"
     >
       <div className="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
@@ -174,64 +177,61 @@ const Header = () => {
         className="navbar-nav-right d-flex align-items-center justify-content-between"
         id="navbar-collapse"
       >
-        {/* Project Selection Dropdown */}
+        {projectNames?.length > 0 && (
-        {projectNames && !isDirectoryPath && (
+          <div className=" align-items-center">
-          <div className="align-items-center">
+            {(!isProjectPath && !isDirectoryPath)  && (
-            <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
+              <>
-            <div className="btn-group">
+                <i
-              <button
+                  className="rounded-circle bx bx-building-house bx-sm-lg bx-md"
-                className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
+                ></i>
-                  } px-1`}
+                <div className="btn-group">
-                type="button"
+                  <button
-                data-bs-toggle="dropdown"
+                    className={`btn btn-sm-sm btn-xl ${
-                aria-expanded="false"
+                      projectNames?.length > 1 && "dropdown-toggle"
-              >
+                    } px-1`}
-                {displayText}
+                    type="button"
-              </button>
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                  >
+                    {displayText}
+                  </button>
 
-              {projectNames.length > 0 && (
+                  {projectNames?.length > 1 && (
-                <ul
+                    <ul
-                  className="dropdown-menu"
+                      className="dropdown-menu"
-                  style={{ overflow: "auto", maxHeight: "300px" }}
+                      style={{ overflow: "auto", maxHeight: "300px" }}
-                >
+                    >
-                  {/* Show "All Projects" only on dashboard */}
+                      {[...projectNames]
-                  {isDashboard && (
+                        .sort((a, b) => a?.name?.localeCompare(b.name))
-                    <li>
+                        .map((project) => (
-                      <button
+                          <li key={project?.id}>
-                        className="dropdown-item"
+                            <button
-                        onClick={() => dispatch(setProjectId(null))}
+                              className="dropdown-item"
-                      >
+                              onClick={() =>
-                        All Projects
+                                dispatch(setProjectId(project?.id))
-                      </button>
+                              }
-                    </li>
+                            >
+                              {project?.name}{" "}
+                              {project?.shortName ? (
+                                <span className="text-primary fw-semibold ">
+                                  {" "}
+                                  ({project?.shortName})
+                                </span>
+                              ) : (
+                                ""
+                              )}
+                            </button>
+                          </li>
+                        ))}
+                    </ul>
                   )}
-                  {[...projectNames]
+                </div>
-                    .sort((a, b) => a?.name?.localeCompare(b.name))
+              </>
-                    .map((project) => (
+            )}
-                      <li key={project?.id}>
-                        <button
-                          className="dropdown-item"
-                          onClick={() => dispatch(setProjectId(project?.id))}
-                        >
-                          {project?.name}
-                          {project?.shortName && (
-                            <span className="text-primary fw-semibold ms-1">
-                              ({project?.shortName})
-                            </span>
-                          )}
-                        </button>
-                      </li>
-                    ))}
-                </ul>
-              )}
-            </div>
           </div>
         )}
+        {isProjectPath && (<span className=" fs-5 align-items-center"><i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>{displayText}</span>)}
 
-        {/* Display project name on project details or directory pages */}
-        {/* { (<span className="fs-5 align-items-center"><i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>{displayText}</span>)} */}
-
-        {/* User Profile and Shortcuts */}
         <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
@@ -269,6 +269,7 @@ const Header = () => {
                       </span>
                       Dashboard
                     </a>
+
                     <small>User Dashboard</small>
                   </div>
                   <div className="dropdown-shortcuts-item col">
@@ -281,6 +282,7 @@ const Header = () => {
                       </span>
                       Projects
                     </a>
+
                     <small>Projects List</small>
                   </div>
                 </div>
@@ -321,6 +323,7 @@ const Header = () => {
                       </span>
                       Allocate Work
                     </a>
+
                     <small>Work Allocations</small>
                   </div>
                   <div className="dropdown-shortcuts-item col">
@@ -333,12 +336,321 @@ const Header = () => {
                       </span>
                       Daily Work Log
                     </a>
+
                     <small>Daily Work Allocations</small>
                   </div>
                 </div>
               </div>
             </div>
           </li>
+
+          {/* <li className="nav-item dropdown-notifications navbar-dropdown dropdown me-2 me-xl-0">
+            <a
+              className="nav-link dropdown-toggle hide-arrow cursor-pointer"
+              data-bs-toggle="dropdown"
+              data-bs-auto-close="outside"
+              aria-expanded="false"
+            >
+              <span className="position-relative">
+                <i className="icon-base bx bx-bell icon-lg"></i>
+                <span className="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
+              </span>
+            </a>
+            <ul className="dropdown-menu dropdown-menu-end p-0">
+              <li className="dropdown-menu-header border-bottom">
+                <div className="dropdown-header d-flex align-items-center py-3">
+                  <h6 className="mb-0 me-auto">Notification</h6>
+                  <div className="d-flex align-items-center h6 mb-0">
+                    <span className="badge bg-label-primary me-2">8 New</span>
+                    <a
+                      href="#"
+                      className="dropdown-notifications-all p-2"
+                      data-bs-toggle="tooltip"
+                      data-bs-placement="top"
+                      aria-label="Mark all as read"
+                      data-bs-original-title="Mark all as read"
+                    >
+                      <i className="icon-base bx bx-envelope-open text-heading"></i>
+                    </a>
+                  </div>
+                </div>
+              </li>
+              <li className="dropdown-notifications-list scrollable-container ps">
+                <ul className="list-group list-group-flush">
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <img
+                            src="../../assets/img/avatars/1.png"
+                            alt=""
+                            className="rounded-circle"
+                          ></img>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">Congratulation Lettie 🎉</h6>
+                        <small className="mb-1 d-block text-body">
+                          Won the monthly best seller gold badge
+                        </small>
+                        <small className="text-body-secondary">1h ago</small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-danger">
+                            CF
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">Charles Franklin</h6>
+                        <small className="mb-1 d-block text-body">
+                          Accepted your connection
+                        </small>
+                        <small className="text-body-secondary">12hr ago</small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <img
+                            src="../../assets/img/avatars/2.png"
+                            alt=""
+                            className="rounded-circle"
+                          ></img>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">New Message ✉️</h6>
+                        <small className="mb-1 d-block text-body">
+                          You have new message from Natalie
+                        </small>
+                        <small className="text-body-secondary">1h ago</small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-success">
+                            <i className="icon-base bx bx-cart"></i>
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">
+                          Whoo! You have new order 🛒
+                        </h6>
+                        <small className="mb-1 d-block text-body">
+                          ACME Inc. made new order $1,154
+                        </small>
+                        <small className="text-body-secondary">1 day ago</small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <img
+                            src="../../assets/img/avatars/9.png"
+                            alt=""
+                            className="rounded-circle"
+                          ></img>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">
+                          Application has been approved 🚀
+                        </h6>
+                        <small className="mb-1 d-block text-body">
+                          Your ABC project application has been approved.
+                        </small>
+                        <small className="text-body-secondary">
+                          2 days ago
+                        </small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-success">
+                            <i className="icon-base bx bx-pie-chart-alt"></i>
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">
+                          Monthly report is generated
+                        </h6>
+                        <small className="mb-1 d-block text-body">
+                          July monthly financial report is generated{" "}
+                        </small>
+                        <small className="text-body-secondary">
+                          3 days ago
+                        </small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <img
+                            src="../../assets/img/avatars/5.png"
+                            alt=""
+                            className="rounded-circle"
+                          ></img>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">Send connection request</h6>
+                        <small className="mb-1 d-block text-body">
+                          Peter sent you connection request
+                        </small>
+                        <small className="text-body-secondary">
+                          4 days ago
+                        </small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <img
+                            src="../../assets/img/avatars/6.png"
+                            alt=""
+                            className="rounded-circle"
+                          ></img>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">New message from Jane</h6>
+                        <small className="mb-1 d-block text-body">
+                          Your have new message from Jane
+                        </small>
+                        <small className="text-body-secondary">
+                          5 days ago
+                        </small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-warning">
+                            <i className="icon-base bx bx-error"></i>
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">CPU is running high</h6>
+                        <small className="mb-1 d-block text-body">
+                          CPU Utilization Percent is currently at 88.63%,
+                        </small>
+                        <small className="text-body-secondary">
+                          5 days ago
+                        </small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+  
+              </li>
+              <li className="border-top">
+                <div className="d-grid p-4">
+                  <a className="btn btn-primary btn-sm d-flex" href="#;">
+                    <small className="align-middle">
+                      View all notifications
+                    </small>
+                  </a>
+                </div>
+              </li>
+            </ul>
+          </li> */}
           <li className="nav-item navbar-dropdown dropdown-user dropdown">
             <a
               aria-label="dropdown profile avatar"
@@ -397,8 +709,25 @@ const Header = () => {
                   <span className="align-middle">Settings</span>
                 </a>
               </li>
+              {/* <li>
+                <a
+                  aria-label="go to billing "
+                  className="dropdown-item cusor-pointer"
+                >
+                  <span className="d-flex align-items-center align-middle">
+                    <i className="flex-shrink-0 bx bx-credit-card me-2"></i>
+                    <span className="flex-grow-1 align-middle ms-1">
+                      Billing
+                    </span>
+                    <span className="flex-shrink-0 badge badge-center rounded-pill bg-danger w-px-20 h-px-20">
+                      4
+                    </span>
+                  </span>
+                </a>
+              </li> */}
               <li onClick={openChangePassword}>
                 {" "}
+                {/* Use the function from the context */}
                 <a
                   aria-label="go to profile"
                   className="dropdown-item cusor-pointer"
@@ -414,7 +743,7 @@ const Header = () => {
                 <a
                   aria-label="click to log out"
                   className="dropdown-item cusor-pointer"
-                  href="/logout"
+                  href="/logout" // Optional: Add this for accessibility, but it won't actually redirect
                   onClick={handleLogout}
                 >
                   <i className="bx bx-power-off me-2"></i>
@@ -428,4 +757,4 @@ const Header = () => {
     </nav>
   );
 };
-export default Header;
+export default Header;

src/components/Project/AboutProject.jsx

@@ -2,53 +2,48 @@ import React, { useEffect, useState } from "react";
 import moment from "moment";
 import { getProjectStatusName } from "../../utils/projectStatus";
 import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
-import { useSelector } from "react-redux"; // Import useSelector
+import {useParams} from "react-router-dom";
 import {useHasUserPermission} from "../../hooks/useHasUserPermission";
 import {MANAGE_PROJECT} from "../../utils/constants";
 import GlobalModel from "../common/GlobalModel";
 import ManageProjectInfo from "./ManageProjectInfo";
 import {useQueryClient} from "@tanstack/react-query";
-
+const AboutProject = () =>
-const AboutProject = () => {
+{
-  const [IsOpenModal, setIsOpenModal] = useState(false);
+  const [ IsOpenModal, setIsOpenModal ] = useState( false )
-  const {mutate: UpdateProjectDetails, isPending} = useUpdateProject({
+  const {mutate: UpdateProjectDetails, isPending} = useUpdateProject( {
-    onSuccessCallback: () => {
+    onSuccessCallback: () =>
-      setIsOpenModal(false);
+    {
+      setIsOpenModal(false)
     }
-  });
+  } )
-  const ClientQuery = useQueryClient();
+  const ClientQuery = useQueryClient()
-
+  const {projectId} = useParams();
-  // *** MODIFIED LINE: Get projectId from Redux store using useSelector ***
-  const projectId = useSelector((store) => store.localVariables.projectId);
-
   const manageProject = useHasUserPermission(MANAGE_PROJECT);
-  const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId ); // Pass projectId from useSelector
+  const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId )
-  
+  const handleFormSubmit = ( updatedProject ) =>
-  const handleFormSubmit = ( updatedProject ) => {
+  {
-    if ( projects_Details?.id ) {
+    if ( projects_Details?.id )
-      UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject });
+    {
-      // The refetch here might be redundant or could be handled by react-query's invalidateQueries
+    UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject,
-      // if UpdateProjectDetails properly invalidates the 'projectDetails' query key.
+    } );
-      // If refetch is still needed, consider adding a delay or using onSuccess of UpdateProjectDetails.
+      refetch()
-      // For now, keeping it as is based on your original code.
+  }
-      refetch(); 
+};
-    }
-  };
-
   return (
     <>
       {IsOpenModal && (
-        <GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
+         <GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
           <ManageProjectInfo
             project={projects_Details}
             handleSubmitForm={handleFormSubmit}
             onClose={() => setIsOpenModal( false )}
             isPending={isPending}
           />
-        </GlobalModel>
+      </GlobalModel>
-      )}
+     )}
       {projects_Details && (
-        <>
+       <>
         <div className="card mb-6">
           <div className="card-header text-start">
             <h6 className="card-action-title mb-0">
@@ -131,9 +126,10 @@ const AboutProject = () => {
           </>
         )}
     
+
       {isLoading && <span>loading...</span>}
     </>
   );
 };
 
-export default AboutProject;
+export default AboutProject;

src/components/Project/ProjectCard.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import moment from "moment";
-import { formatNumber, getDateDifferenceInDays } from "../../utils/dateUtils";
+import { formatNumber, getCompletionPercentage, getDateDifferenceInDays } from "../../utils/dateUtils";
 import { useNavigate } from "react-router-dom";
 import { useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
 import ManageProjectInfo from "./ManageProjectInfo";
@@ -57,7 +57,7 @@ const ProjectCard = ({ projectData, recall }) => {
   const handleClose = () => setShowModal(false);
 
   const handleViewProject = () => {
-    navigate(`/projects/details`);
+    navigate(`/projects/${projectData.id}`);
   };
 
   const handleFormSubmit = (updatedProject) => {
@@ -87,18 +87,19 @@ const ProjectCard = ({ projectData, recall }) => {
         <div className={`card cursor-pointer  ${isPending ? "bg-light opacity-50 pointer-events-none" : ""}`}>
           <div className="card-header pb-4">
             <div className="d-flex align-items-start">
-              <div className="d-flex align-items-center">
+              <div className="d-flex align-items-center ">
                 <div className="avatar me-4">
                   <i
                     className="rounded-circle bx bx-building-house"
                     style={{ fontSize: "xx-large" }}
                   ></i>
                 </div>
-                <div className="me-2">
+                <div className="me-2 text-wrap ">
                   <h5
-                    className="mb-0 stretched-link text-heading text-start"
+                 className="mb-0 stretched-link text-heading text-start text-truncate"
-                    onClick={handleViewProject}
+  onClick={handleViewProject}
-                  > 
+  style={{ maxWidth: "180px", display: "inline-block" }}
+                  >
                     {projectInfo.shortName
                       ? projectInfo.shortName
                       : projectInfo.name}
@@ -227,12 +228,7 @@ const ProjectCard = ({ projectData, recall }) => {
                 Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
               </small>
               <small className="text-body">
-                {Math.floor(
+                {getCompletionPercentage(projectInfo.completedWork, projectInfo.plannedWork)}
-                  getProgressInNumber(
-                    projectInfo.plannedWork,
-                    projectInfo.completedWork
-                  )
-                ) || 0}{" "}
                 % Completed
               </small>
             </div>
@@ -274,4 +270,4 @@ const ProjectCard = ({ projectData, recall }) => {
   );
 };
 
-export default ProjectCard;
+export default ProjectCard;

src/pages/project/ProjectDetails.jsx

@@ -1,4 +1,4 @@
-import { useSelector } from "react-redux"; // Import useSelector
+import { useParams } from "react-router-dom";
 import React, { useState, useEffect, useCallback } from "react";
 
 import ActivityTimeline from "../../components/Project/ActivityTimeline";
@@ -31,111 +31,157 @@ import eventBus from "../../services/eventBus";
 import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
 
 const ProjectDetails = () => {
-  // const { projectId } = useParams(); // REMOVE THIS LINE
+  let { projectId } = useParams();
-  const dispatch = useDispatch();
-
-  // GET projectId FROM REDUX STORE
-  const projectId = useSelector((store) => store.localVariables.projectId);
-
   const {
-    projects_Details,	
+    projects_Details,
     loading: projectLoading,
-    error: projectError,
+    error: ProjectError,
-    refetch,
+    refetch
   } = useProjectDetails(projectId);
+  const dispatch = useDispatch();
+  const [project, setProject] = useState(null);
+  // const [projectDetails, setProjectDetails] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  // const fetchData = async () => {
+  //   const project_cache = getCachedData("projectInfo");
+  //   if (!project_cache || project_cache?.projectId !== projectId) {
+  //     ProjectRepository.getProjectByprojectId(projectId)
+  //       .then((response) => {
+  //         setProjectDetails(response.data);
+  //         setProject(response.data);
+  //         cacheData("projectInfo", { projectId, data: response.data });
+  //         setLoading(false);
+  //       })
+  //       .catch((error) => {
+  //         console.error(error);
+  //         setError("Failed to fetch data.");
+  //         setLoading(false);
+  //       });
+  //   } else {
+  //     setProjectDetails(project_cache.data);
+  //     setProject(project_cache.data);
+  //     setLoading(false);
+  //   }
+  // };
 
   const [activePill, setActivePill] = useState("profile");
 
-  // REMOVE THIS useEffect AS projectId IS NOW FROM REDUX
-  // useEffect(() => {
-  //   if (projectId) dispatch(setProjectId(projectId));
-  // }, [projectId, dispatch]);
-
-  const handler = useCallback(
-    (msg) => {
-      if (msg.keyword === "Update_Project" && projects_Details?.id === msg.response.id) {
-        refetch();
-      }
-    },
-    [projects_Details, refetch]
-  );
-
-  useEffect(() => {
-    eventBus.on("project", handler);
-    return () => eventBus.off("project", handler);
-  }, [handler]);
-
   const handlePillClick = (pillKey) => {
     setActivePill(pillKey);
   };
 
+  const handleDataChange = (data) => {
+    fetchData();
+  };
+
   const renderContent = () => {
-    if (projectLoading || !projects_Details) return <Loader />;
+    if (projectLoading) return <Loader></Loader>;
-
     switch (activePill) {
-      case "profile":
+      case "profile": {
-        return (
-          <>
-            <div className="row">
-              <div className="col-lg-4 col-md-5 mt-5">
-                <AboutProject></AboutProject>
-                <ProjectOverview project={projectId} />
-              </div>
-              <div className="col-lg-8 col-md-7 mt-5">
-                <ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
-              </div>
-            </div>
-          </>
-        );
-
-      case "teams":
         return (
           <div className="row">
-            <div className="col-lg-12">
+            <div className="col-xl-4 col-lg-5 col-md-5 mt-5">
-              <Teams />
+              <AboutProject ></AboutProject>
+            </div>
+            <div className="col-xl-4 col-lg-5 col-md-5  mt-5">
+              <ProjectOverview project={projectId} />
             </div>
           </div>
         );
-
+      }
-      case "infra":
+      case "teams": {
         return (
-          <ProjectInfra data={projects_Details} onDataChange={refetch} />
+          <div className="row">
+            <div className="col-lg-12 col-xl-12">
+              {/* Teams */}
+              <Teams ></Teams>
+              {/* Teams */}
+            </div>
+          </div>
         );
-
+        break;
-      case "workplan":
+      }
+      case "infra": {
         return (
-          <WorkPlan data={projects_Details} onDataChange={refetch} />
+          <ProjectInfra
+            data={projects_Details}
+            onDataChange={handleDataChange}
+          ></ProjectInfra>
         );
-
+        break;
-      case "directory":
+      }
+      case "workplan": {
         return (
-          <div className="row mt-2">
+          <WorkPlan
+            data={projects_Details}
+            onDataChange={handleDataChange}
+          ></WorkPlan>
+        );
+        break;
+      }
+      case "directory": {
+        return (
+          <div className="row">
             <Directory IsPage={false} prefernceContacts={projects_Details.id} />
           </div>
         );
+      }
 
       default:
-        return <ComingSoonPage />;
+        return <ComingSoonPage></ComingSoonPage>;
     }
   };
 
+  useEffect(() => {
+    dispatch(setProjectId(projectId));
+
+  }, [projects_Details, projectId]);
+
+  const handler = useCallback(
+    (msg) => {
+      if (msg.keyword === "Update_Project" && projects_Details.id === msg.response.id) {
+         refetch()
+      }
+    },
+    [projects_Details, handleDataChange]
+  );
+  useEffect(() => {
+    eventBus.on("project", handler);
+    return () => eventBus.off("project", handler);
+  }, [handler]);
+
   return (
-    <div className="container-fluid">
+    <>
-      <Breadcrumb
+      {}
-        data={[
+      <div className="container-fluid">
-          { label: "Home", link: "/dashboard" },
+        <Breadcrumb
-          { label: "Projects", link: "/projects" },
+          data={[
-          { label: projects_Details?.name || "Project", link: null },
+            { label: "Home", link: "/dashboard" },
-        ]}
+            { label: "Projects", link: "/projects" },
-      />
+            { label: `${project?.name ? project?.name : ""}`, link: null },
+          ]}
+        ></Breadcrumb>
 
-      <div className="row">
+        <div className="row">
-        <ProjectNav onPillClick={handlePillClick} activePill={activePill} />
+          {projectLoading && <p>Loading....</p>}
+          {/* {!projectLoading && project && (
+            <ProjectBanner project_data={project}></ProjectBanner>
+          )} */}
+
+          <ProjectNav
+            onPillClick={handlePillClick}
+            activePill={activePill}
+          ></ProjectNav>
+        </div>
+
+        <div className="row"></div>
+
+        {renderContent()}
       </div>
-
+    </>
-      {renderContent()}
-    </div>
   );
 };
 
-export default ProjectDetails;
+export default ProjectDetails;

src/pages/project/ProjectListView.jsx

@@ -62,7 +62,7 @@ const ProjectListView = ({ projectData, recall }) => {
   const handleClose = () => setShowModal(false);
 
   const handleViewProject = () => {
-    navigate(`/projects/details`);
+    navigate(`/projects/${projectData.id}`);
   };
 
   const handleFormSubmit = (updatedProject) => {
@@ -89,7 +89,7 @@ const ProjectListView = ({ projectData, recall }) => {
         <td className="text-start" colSpan={5}>
           <span
             className="text-primary cursor-pointer"
-            onClick={() => navigate(`/projects/details`)}
+            onClick={() => navigate(`/projects/${projectInfo.id}`)}
           >
             {projectInfo.shortName
               ? `${projectInfo.name} (${projectInfo.shortName})`
@@ -162,7 +162,7 @@ const ProjectListView = ({ projectData, recall }) => {
                 <a
                   aria-label="click to  View details"
                   className="dropdown-item"
-                  onClick={() => navigate(`/projects/details`)}
+                  onClick={() => navigate(`/projects/${projectInfo.id}`)}
                 >
                   <i className="bx bx-detail me-2"></i>
                   <span className="align-left">View details</span>
@@ -193,4 +193,4 @@ const ProjectListView = ({ projectData, recall }) => {
   );
 };
 
-export default ProjectListView;
+export default ProjectListView;

src/router/AppRoutes.jsx

@@ -63,7 +63,7 @@ const router = createBrowserRouter(
             { path: "/", element: <Dashboard /> },
             { path: "/dashboard", element: <Dashboard /> },
             { path: "/projects", element: <ProjectList /> },
-            { path: "/projects/details", element: <ProjectDetails /> },
+            { path: "/projects/:projectId", element: <ProjectDetails /> },
             { path: "/project/manage/:projectId", element: <ManageProject /> },
             { path: "/employees", element: <EmployeeList /> },
             { path: "/employee/:employeeId", element: <EmployeeProfile /> },