public/assets/vendor/css/core.css

@@ -836,7 +836,7 @@ progress {
 }
 
 .row {
-  --bs-gutter-x: 0.500rem;
+  --bs-gutter-x: 1.625rem;
   --bs-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
@@ -8966,8 +8966,10 @@ a:not([href]):hover {
 }
 
 /* Autofill input bg and text color issue on different OS and browsers */
+input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
 textarea:-webkit-autofill:hover,
 textarea:-webkit-autofill:focus,
 select:-webkit-autofill,
@@ -8976,15 +8978,6 @@ select:-webkit-autofill:focus,
 input:-internal-autofill-selected {
   background-clip: text !important;
 }
-input:-webkit-autofill,
-textarea:-webkit-autofill,
-select:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
-  box-shadow: 0 0 0px 1000px white inset !important;
-  -webkit-text-fill-color: #000 !important;
-  caret-color: #000 !important;
-  transition: background-color 5000s ease-in-out 0s;
-}
 
 h1,
 .h1 {

src/assets/vendor/css/core.css

@@ -2436,7 +2436,7 @@ progress {
 }
 
 .table-responsive {
-  /* overflow-x: auto; */
+  overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
 

src/components/Activities/AttendcesLogs.jsx

@@ -234,7 +234,7 @@ const AttendanceLog = ({
       </div>
       <div
         className="table-responsive text-nowrap"
-        style={{ minHeight: "200px", display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+        style={{ minHeight: "250px" }}
       >
         {data && data.length > 0 && (
           <table className="table mb-0">
@@ -332,7 +332,7 @@ const AttendanceLog = ({
           </table>
         )}
         {!loading && !isRefreshing && data.length === 0 && (
-         <span className="text-muted">No employee logs</span>
+          <span>No employee logs</span>
         )}
         {/* {error && !loading && !isRefreshing && (
           <tr>

src/components/Activities/SubTask.jsx

@@ -38,12 +38,13 @@ const SubTask = ({ activity, onClose }) => {
   const selectedActivityId = watch("activityId");
   const selectedActivity = activities?.find((a) => a.id === selectedActivityId);
   const {mutate:createSubTask,isPending } = useManageTask( {
-    onSuccessCallback: () => {
+    onSuccessCallback: () =>
-      showToast("Sub Task Created Successfully", "success");
+    {
+      showToast("Sub Task Created Successfully","success")
       reset();
       onClose();
-    },
+    }
-  });
+  } )
 
   useEffect(() => {
     setCategoryData(categories);
@@ -72,7 +73,7 @@ const SubTask = ({ activity, onClose }) => {
   };
 
   const onSubmitForm = async (formData) => {
-    let data = {
+    let payload = {
       workAreaID: Task.workItem.workAreaId,
       workCategoryId: formData.workCategoryId,
       activityID: formData.activityId,
@@ -82,18 +83,7 @@ const SubTask = ({ activity, onClose }) => {
       comment: formData.comment,
     };
   
-    const payload = [data];
+    createSubTask([payload])
-    let buildingId = activity.workItem.workArea.floor.building.id;
-    let floorId = activity.workItem.workArea.floor.id;
-    let workAreaId = activity.workItem.workArea.id;
-    createSubTask({
-      payload: payload,
-      buildingId: buildingId,
-      floorId: floorId,
-      workAreaId: workAreaId,
-      PreviousPlannedWork:0,
-      previousCompletedWork:0
-    });
   };
   return (
     <div className="container-xxl my-1">

src/components/Charts/LineChart.jsx

@@ -117,7 +117,7 @@ const LineChart = ({
 
 
   return (
-    <div className="w-full overflow-x-false">
+    <div className="w-full overflow-x-auto">
       <ReactApexChart
         options={chartOptions}
         series={seriesData}

src/components/Dashboard/Dashboard.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useSelector } from "react-redux"; // Import useSelector to access Redux state
 import {
   useDashboardProjectsCardData,
   useDashboardTeamsCardData,
@@ -10,7 +9,6 @@ import Teams from "./Teams";
 import TasksCard from "./Tasks";
 import ProjectCompletionChart from "./ProjectCompletionChart";
 import ProjectProgressChart from "./ProjectProgressChart";
-import ProjectOverview from "../Project/ProjectOverview";
 // import Attendance from "./Attendance";
 
 const Dashboard = () => {
@@ -18,51 +16,37 @@ const { projectsCardData } = useDashboardProjectsCardData();
   const { teamsCardData } = useDashboardTeamsCardData();
   const { tasksCardData } = useDashboardTasksCardData();
 
-// Get the selected project ID from Redux store
-const selectedProjectId = useSelector(
-(store) => store.localVariables.projectId
-);
-
-// Determine if "All Projects" is selected
-// selectedProjectId will be null when "All Projects" is chosen
-const isAllProjectsSelected = selectedProjectId === null;
-
   return (
     <div className="container-fluid mt-3">
       <div className="row gy-4">
-
+        {/* Projects Card */}
-{isAllProjectsSelected && (
         <div className="col-sm-6 col-lg-4">
           <Projects projectsCardData={projectsCardData} />
         </div>
-)}
 
-
+        {/* Teams Card */}
-<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
+        <div className="col-sm-6 col-lg-4">
           <Teams teamsCardData={teamsCardData} />
         </div>
 
-<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
+        {/* Tasks Card */}
+        <div className="col-sm-6 col-lg-4">
           <TasksCard tasksCardData={tasksCardData} />
         </div>
 
-
+        {/* Bar Chart (Project Completion) */}
-{isAllProjectsSelected && (
         <div className="col-xxl-6 col-lg-6">
           <ProjectCompletionChart />
         </div>
-)}
 
-{! isAllProjectsSelected && (
+        {/* Line Chart (Project Progress) */}
-    <div className="col-xxl-6 col-lg-6">
-    <ProjectOverview />
-</div>
-)}
         <div className="col-xxl-6 col-lg-6">
           <ProjectProgressChart />
         </div>
 
-
+        {/* <div className="col-xxl-6 col-lg-6">
+          <Attendance />
+        </div> */}
       </div>
     </div>
   );

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,
@@ -28,21 +27,19 @@ const Header = () => {
   const navigate = useNavigate();
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
 
-    const isDirectoryPath = /^\/directory$/.test(location.pathname);
-    const isDashboard = /^\/dashboard$/.test(location.pathname);
   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(); 
+    e.preventDefault(); // Prevent default anchor behavior (e.g., page reload)
     logout();
   };
 
   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,80 +71,84 @@ 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";
-  if (selectedProject === null) {
-    displayText = "All Projects";
-  } else if (selectedProject) {
-    const selectedProjectObj = projectNames?.find(
     (p) => p?.id === selectedProject
-    );
+  )?.name;
-    // Fallback to selectedProject ID if name not found during loading or mismatch
+
-    displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
+  let displayText = "";
+  if (selectedProjectName) {
+    displayText = selectedProjectName;
+  } else if (projectLoading && selectedProject) {
+    displayText = selectedProject;
   } else if (projectLoading) {
     displayText = "Loading...";
   }
 
   const { openChangePassword } = useChangePassword();
-
   useEffect(() => {
     if (
       projectNames &&
-      projectNames.length > 0 &&
+      selectedProject !== " " &&
-      selectedProject === undefined &&
       !getCachedData("hasReceived")
     ) {
-      if(isDashboard){
-        dispatch(setProjectId(null));
-      }else{
       dispatch(setProjectId(projectNames[0]?.id));
     }
-    }
+  }, [projectNames]);
-  }, [projectNames, selectedProject, dispatch]);
-
-
-  /** Check if current page is project details page or directory page */
-  // const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
 
+  /** Check if current page id project details page */
+  const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname) 
+  const isDirectoryPath = /^\/directory$/.test(location.pathname);
 
   const handler = useCallback(
     async (data) => {
       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]
   );
 
-  useEffect(() => {
+  // useEffect(() => {
-    dispatch(changeMaster("Job Role"));
+  //   eventBus.on("project", newProjectHandler);
-  }, [dispatch]);
+  //   return () => eventBus.off("project", newProjectHandler);
+  // }, [handler]);
 
+  useDispatch( () =>
+  {
+  dispatch(changeMaster("Job Role"))
+},[])
   useEffect(() => {
   eventBus.on("assign_project_one", handler);
   eventBus.on("project", newProjectHandler);
@@ -159,6 +159,7 @@ const Header = () => {
   };
 }, [handler, newProjectHandler]);
 
+
   return (
     <nav
       className="layout-navbar container-fluid mb-3  navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@@ -176,12 +177,17 @@ const Header = () => {
         className="navbar-nav-right d-flex align-items-center justify-content-between"
         id="navbar-collapse"
       >
-        {projectNames && !isDirectoryPath && (
+        {projectNames?.length > 0 && (
           <div className=" align-items-center">
-            <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
+            {(!isProjectPath && !isDirectoryPath)  && (
+              <>
+                <i
+                  className="rounded-circle bx bx-building-house bx-sm-lg bx-md"
+                ></i>
                 <div className="btn-group">
                   <button
-                className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
+                    className={`btn btn-sm-sm btn-xl ${
+                      projectNames?.length > 1 && "dropdown-toggle"
                     } px-1`}
                     type="button"
                     data-bs-toggle="dropdown"
@@ -190,35 +196,29 @@ const Header = () => {
                     {displayText}
                   </button>
 
-              {projectNames.length > 0 && (
+                  {projectNames?.length > 1 && (
                     <ul
                       className="dropdown-menu"
                       style={{ overflow: "auto", maxHeight: "300px" }}
                     >
-            
-                  {isDashboard && (
-                    <li>
-                      <button
-                        className="dropdown-item"
-                        onClick={() => dispatch(setProjectId(null))}
-                      >
-                        All Projects
-                      </button>
-                    </li>
-                  )}
                       {[...projectNames]
                         .sort((a, b) => a?.name?.localeCompare(b.name))
                         .map((project) => (
                           <li key={project?.id}>
                             <button
                               className="dropdown-item"
-                          onClick={() => dispatch(setProjectId(project?.id))}
+                              onClick={() =>
+                                dispatch(setProjectId(project?.id))
+                              }
                             >
-                          {project?.name}
+                              {project?.name}{" "}
-                          {project?.shortName && (
+                              {project?.shortName ? (
-                            <span className="text-primary fw-semibold ms-1">
+                                <span className="text-primary fw-semibold ">
+                                  {" "}
                                   ({project?.shortName})
                                 </span>
+                              ) : (
+                                ""
                               )}
                             </button>
                           </li>
@@ -226,9 +226,11 @@ const Header = () => {
                     </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>)}
 
         <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">
@@ -267,6 +269,7 @@ const Header = () => {
                       </span>
                       Dashboard
                     </a>
+
                     <small>User Dashboard</small>
                   </div>
                   <div className="dropdown-shortcuts-item col">
@@ -279,6 +282,7 @@ const Header = () => {
                       </span>
                       Projects
                     </a>
+
                     <small>Projects List</small>
                   </div>
                 </div>
@@ -319,6 +323,7 @@ const Header = () => {
                       </span>
                       Allocate Work
                     </a>
+
                     <small>Work Allocations</small>
                   </div>
                   <div className="dropdown-shortcuts-item col">
@@ -331,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"
@@ -395,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"
@@ -412,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>

src/components/Project/AboutProject.jsx

@@ -2,39 +2,34 @@ 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( {
-    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 && (
@@ -131,6 +126,7 @@ const AboutProject = () => {
           </>
         )}
     
+
       {isLoading && <span>loading...</span>}
     </>
   );

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -116,17 +116,8 @@ useEffect(() => {
       floorId: floor?.id,
       workAreaId: workArea?.id,
     };
-    let plannedTask =
+    let plannedTask =   workItem?.workItem?.plannedWork || workItem?.plannedWork || 0
-      workItem?.workItem?.plannedWork || workItem?.plannedWork || 0;
+   UpdateTask({payload:[payload],PreviousPlannedWork:plannedTask})
-    let completedTask = workItem?.workItem?.completedWork || workItem?.completedWork || 0
-    UpdateTask({
-      payload: [payload],
-      PreviousPlannedWork: plannedTask,
-      buildingId: building?.id,
-      floorId: floor?.id,
-      workAreaId: workArea?.id,
-      previousCompletedWork:completedTask
-    });
  }
   return (
     <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>

src/components/Project/Infrastructure/TaskModel.jsx

@@ -69,9 +69,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const selectedCategory = categoryData?.find((c) => c.id === watchCategoryId);
 
   const { mutate: CreateTask, isPending } = useManageTask({
-    onSuccessCallback: (response) => {
+    onSuccessCallback: ( response ) =>
-      showToast(response?.message, "success");
+    {
-      onClose?.();
+      showToast( response?.message, "success" )
+      onClose?.()
     },
   });
   useEffect(() => {
@@ -96,9 +97,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
 
   const onSubmitForm = async (data) => {
     const payload = [data];
-      CreateTask({payload:payload,buildingId: data.buildingID,
+    CreateTask({payload,PreviousPlannedWork:0});
-      floorId: data.floorId,
-      workAreaId: data.workAreaId, PreviousPlannedWork:0,previousCompletedWork:0});
   };
 
   return (

src/components/Project/Infrastructure/WorkItem.jsx

@@ -10,10 +10,7 @@ import {
 } from "../../../utils/constants";
 import ConfirmModal from "../../common/ConfirmModal";
 import ProjectRepository from "../../../repositories/ProjectRepository";
-import {
+import { useDeleteProjectTask, useProjectDetails } from "../../../hooks/useProjects";
-  useDeleteProjectTask,
-  useProjectDetails,
-} from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
 import {
   cacheData,
@@ -31,9 +28,7 @@ const WorkItem = ({
   forWorkArea,
   deleteHandleTask,
 }) => {
-  // const { projectId } = useParams();
+  const { projectId } = useParams();
-const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
-
   const [itemName, setItemName] = useState("");
   const [NewWorkItem, setNewWorkItem] = useState();
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -45,6 +40,7 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
   const [loadingDelete, setLoadingDelete] = useState(false);
   const project = getCachedData("projectInfo");
 
+
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen( false );
   
@@ -73,7 +69,7 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
     };
     setNewWorkItem(updated);
   }
-  };
+  }
   let assigndata = {
     building: forBuilding,
     floor: forFloor,
@@ -89,17 +85,15 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
     tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
   }, []);
 
+
+
+
+
+
   const handleSubmit = async () => {
     let WorkItemId = workItem.workItemId || workItem.id;
-    debugger
+    DeleteTask({workItemId:WorkItemId,workAreaId:forWorkArea?.id})
-    DeleteTask({
+    
-      workItemId: WorkItemId,
-      workAreaId: forWorkArea?.id,
-      completedTask: workItem?.completedWork,
-      plannedTask: workItem?.plannedWork,
-      buildingId: forBuilding?.id,
-      floorId: forFloor?.id,
-    });
   };
 
   const PlannedWork =
@@ -110,20 +104,12 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
     <>
       {isModalOpen && (
         <GlobalModel isOpen={isModalOpen} size="lg" closeModal={closeModal}>
-          <AssignTask
+           <AssignTask assignData={assigndata} onClose={closeModal} setAssigned={refreshWorkItem} />
-            assignData={assigndata}
-            onClose={closeModal}
-            setAssigned={refreshWorkItem}
-          />
         </GlobalModel>
       )}
 
       {showModal && (
-        <GlobalModel
+       <GlobalModel isOpen={showModal} size="lg" closeModal={()=>setShowModal(false)}>
-          isOpen={showModal}
-          size="lg"
-          closeModal={() => setShowModal(false)}
-        >
           <EditActivityModal
             workItem={workItem}
             workArea={forWorkArea}
@@ -181,6 +167,7 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
             : "NA"}
         </td>
 
+        
         <td className="text-center table-cell-small d-none d-md-table-cell">
           <span className="fw-light">
             {hasWorkItem
@@ -208,7 +195,9 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
         <td className="text-center d-none d-md-table-cell">
           {hasWorkItem
             ? `${
-                NewWorkItem?.todaysAssigned ?? workItem?.todaysAssigned ?? "0"
+                NewWorkItem?.todaysAssigned ??
+                workItem?.todaysAssigned ??
+                "0"
               }`
             : "NA"}
         </td>
@@ -246,7 +235,7 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
           <td className="text-end align-items-middle border-top">
             {/* Desktop (md and up): inline icons */}
             <div className="d-none d-md-flex justify-content-end gap-1 px-2">
-              {isTaskPlanning &&
+              {!projectId &&
                 ManageAndAssignTak &&
                 PlannedWork !== CompletedWork && (
                   <i
@@ -286,7 +275,7 @@ const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
               ></i>
 
               <ul className="dropdown-menu dropdown-menu-start">
-                {isTaskPlanning &&
+                {!projectId &&
                   ManageAndAssignTak &&
                   PlannedWork !== CompletedWork && (
                     <li>

src/components/Project/ProjectCard.jsx

@@ -57,7 +57,7 @@ const ProjectCard = ({ projectData, recall }) => {
   const handleClose = () => setShowModal(false);
 
   const handleViewProject = () => {
-    navigate(`/projects/details`);
+    navigate(`/projects/${projectData.id}`);
   };
 
   const handleFormSubmit = (updatedProject) => {

src/components/Project/ProjectInfra.jsx

@@ -25,7 +25,7 @@ import GlobalModel from "../common/GlobalModel";
 
 const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
 {
-  const projectId = useSelector((store)=>store.localVariables.projectId)
+  const {projectId} = useParams()
   const reloadedData = useSelector((store) => store.localVariables.reload);
   const [ expandedBuildings, setExpandedBuildings ] = useState( [] );
    const {projectInfra,isLoading,error} = useProjectInfra(projectId)

src/components/Project/ProjectNav.jsx

@@ -14,7 +14,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
       <ul className="nav nav-tabs ">
         <li className="nav-item">
           <a
-            className={`nav-link ${activePill === "profile" ? "active" : ""} fs-6`}
+            className={`nav-link ${activePill === "profile" ? "active" : ""}`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); 
@@ -26,7 +26,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
         </li>
         <li className="nav-item">
           <a
-            className={`nav-link ${activePill === "teams" ? "active" : ""} fs-6`}
+            className={`nav-link ${activePill === "teams" ? "active" : ""}`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); 
@@ -38,7 +38,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
         </li>
         <li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
           <a
-            className={`nav-link ${activePill === "infra" ? "active" : ""} fs-6`}
+            className={`nav-link ${activePill === "infra" ? "active" : ""}`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); 
@@ -53,20 +53,20 @@ const ProjectNav = ({ onPillClick, activePill }) => {
           <a
             className={`nav-link ${
               activePill === "imagegallary" ? "active" : ""
-            } fs-6`}
+            }`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); // Prevent page reload
               onPillClick("imagegallary");
             }}
           >
-           <i className='bx bxs-cog bx-sm me-1_5'></i> <span className="d-none d-md-inline">project Setup</span>
+            <i className="bx bxs-file-image bx-sm me-1_5"></i> <span className="d-none d-md-inline">Image Gallary</span>
           </a>
         </li>
         {(DirAdmin || DireManager || DirUser) && (
             <li className="nav-item">
           <a
-            className={`nav-link ${activePill === "directory" ? "active" : ""} fs-6`}
+            className={`nav-link ${activePill === "directory" ? "active" : ""}`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); // Prevent page reload

src/components/Project/ProjectOverview.jsx

@@ -1,168 +1,15 @@
 import React from "react";
-import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-
 import {
   useEmployeesByProjectAllocated,
   useProjects,
 } from "../../hooks/useProjects";
-import ReactApexChart from "react-apexcharts";
+import { formatNumber } from "../../utils/dateUtils";
-import Chart from "react-apexcharts";
+import ProgressBar from "../common/ProgressBar";
 
 const ProjectOverview = ({ project }) => {
   const { projects } = useProjects();
-  const [current_project, setCurrentProject] = useState(
-    projects.find((pro) => pro.id == project)
-  );
 
-  const selectedProject = useSelector(
+  const project_detail = projects.find((pro) => pro.id == project);
-    (store) => store.localVariables.projectId
-  );
-
-  const getProgressInPercentage = (planned, completed) => {
-    if (completed && planned) return (completed * 100) / planned;
-    else return 0;
-  };
-
-  //let project_detail = projects.find((pro) => pro.id == project);
-
-  // Utility function to check if a number has a decimal part
-  const hasDecimal = (num) => {
-    // Convert to string and check for a decimal point
-    // Or, check if the number is not equal to its integer part
-    return num % 1 !== 0;
-  };
-
-  // FormattedNumber component to display numbers with conditional decimal places
-  function FormattedNumber(value, locale = "en-US") {
-    // Ensure the value is a number
-    const numericValue = parseFloat(value);
-
-    // Handle non-numeric values gracefully
-    if (isNaN(numericValue)) {
-      return 0;
-    }
-
-    let options = {};
-
-    // Determine formatting options based on whether the number has a decimal part
-    if (hasDecimal(numericValue)) {
-      // If it has a decimal, format to exactly two decimal places
-      options = {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      };
-    } else {
-      // If it's a whole number, format to zero decimal places
-      options = {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-      };
-    }
-
-    // Use Intl.NumberFormat for robust and locale-aware formatting
-    const formattedString = new Intl.NumberFormat(locale, options).format(
-      numericValue
-    );
-
-    return formattedString;
-  }
-
-  const getRadialBarOptions = (percentage) => {
-    return {
-      chart: {
-        height: 350,
-        type: "radialBar",
-        sparkline: {
-          // Often used with gauges for a minimalist look
-          enabled: true,
-        },
-      },
-      plotOptions: {
-        radialBar: {
-          startAngle: -90, // Start the gauge from the left (bottom-left)
-          endAngle: 90, // End the gauge at the right (bottom-right)
-          hollow: {
-            size: "70%", // Size of the hollow part of the bar
-          },
-          dataLabels: {
-            show: true,
-            name: {
-              show: true,
-              fontSize: "16px",
-              fontFamily: "Inter, sans-serif",
-              color: "#6B7280", // Tailwind gray-500
-              offsetY: -10,
-            },
-            value: {
-              show: true,
-              fontSize: "28px",
-              fontFamily: "Inter, sans-serif",
-              color: "#374151", // Tailwind gray-700
-              offsetY: 20,
-              formatter: function (val) {
-                return FormattedNumber(val) + "%"; // Format value as percentage
-              },
-            },
-          },
-          track: {
-            background: "#E5E7EB", // Tailwind gray-200 for the track
-            strokeWidth: "97%",
-            margin: 5, // margin in between segments
-            dropShadow: {
-              enabled: true,
-              top: 2,
-              left: 0,
-              blur: 4,
-              opacity: 0.15,
-            },
-          },
-        },
-      },
-      fill: {
-        type: "gradient",
-        gradient: {
-          shade: "dark",
-          type: "horizontal",
-          shadeIntensity: 0.5,
-          gradientToColors: ["#6366F1"], // Tailwind indigo-500
-          inverseColors: true,
-          opacityFrom: 1,
-          opacityTo: 1,
-          stops: [0, 100],
-        },
-      },
-      stroke: {
-        lineCap: "round", 
-      },
-      labels: ["Progress"], 
-      series: [percentage], 
-    };
-  };
-  const [radialPercentage, setRadialPercentage] = useState(75); // Initial percentage
-
-  const radialBarOptions = getRadialBarOptions(radialPercentage);
-
-  useEffect(() => {
-    if (current_project) {
-      let val = getProgressInPercentage(
-        current_project.plannedWork,
-        current_project.completedWork
-      );
-      setRadialPercentage(val);
-    } else setRadialPercentage(0);
-  }, [current_project]);
-
-  useEffect(() => {
-    setCurrentProject(projects.find((pro) => pro.id == selectedProject));
-    if (current_project) {
-      let val = getProgressInPercentage(
-        current_project.plannedWork,
-        current_project.completedWork
-      );
-      setRadialPercentage(val);
-    } else setRadialPercentage(0);
-  }, [selectedProject]);
 
   return (
     <div className="card mb-6">
@@ -174,75 +21,69 @@ const ProjectOverview = ({ project }) => {
         </h6>
       </div>
       <div className="card-body">
-  <ul className="list-unstyled m-0 p-0">
+        <ul className="list-unstyled mb-0 mt-3 pt-1">
-    <li className="d-flex flex-wrap">
+          <li className="d-flex align-items-center mb-3">
-      <div className="w-100 d-flex flex-wrap">
+            <i className="bx bx-check"></i>
-        {/* Centered Chart */}
+            <span className="fw-medium mx-2">Task Planned:</span>{" "}
-        <div className="w-100 d-flex justify-content-center mb-3">
+            <span>{formatNumber(project_detail?.plannedWork)}</span>
-          <div >
+          </li>
-            <Chart
+          <li className="d-flex align-items-center mb-3">
-              options={radialBarOptions}
+            <i className="bx bx-star"></i>
-              series={radialBarOptions.series}
+            <span className="fw-medium mx-2">Task Completed:</span>{" "}
-              type="radialBar"
+            <span>{formatNumber(project_detail?.completedWork)}</span>
-              height="100%"
+          </li>
+          <li className="d-flex align-items-center mb-3">
+            <i className="bx bx-user"></i>
+            <span className="fw-medium mx-2">Current team Size:</span>{" "}
+            <span>{project_detail?.teamSize}</span>
+          </li>
+          <li className=" mb-3">
+            {project_detail && (
+              <>
+                <div className="d-flex  text-end mb-2  mt-5">
+                  <small className="text-body text-muted ">
+                    {/* {Math.floor(
+                      getProgressInNumber(
+                        
+                        project_detail.completedWork
+                      )
+                    ) || 0}{" "} */}
+                    {
+                      (formatNumber(project_detail.plannedWork),
+                      "/",
+                      formatNumber(project_detail.completedWork))
+                    }
+                    % Completed
+                  </small>
+                </div>
+                {/* <div
+                  className="progress mb-4 rounded"
+                  style={{ height: "8px" }}
+                >
+                  <div
+                    className="progress-bar rounded"
+                    role="progressbar"
+                    style={{
+                      width: getProgress(
+                        project_detail.plannedWork,
+                        project_detail.completedWork
+                      ),
+                    }}
+                    aria-valuenow={project_detail.completedWork}
+                    aria-valuemin="0"
+                    aria-valuemax={project_detail.plannedWork}
+                  ></div>
+                </div> */}
+                <ProgressBar
+                  completedWork={formatNumber(project_detail?.completedWork)}
+                  plannedWork={formatNumber(project_detail?.plannedWork)}
+                  className="m-0 text-info"
                 />
-          </div>
+              </>
-        </div>
+            )}
-
-        {/* Info Section */}
-        <div className="mb-2" style={{ flex: "1 1 auto" }}>
-          <div>
-            {/* Tasks Planned */}
-            <div className="d-flex align-items-center mb-3">
-              <div className="avatar me-2">
-                <span className="avatar-initial rounded-2 bg-label-primary">
-                  <i className="bx bx-check text-primary fs-4"></i>
-                </span>
-              </div>
-              <div className="d-flex flex-column text-start">
-                <small className="fw-bold">Tasks Planned</small>
-                <h5 className="mb-0">
-                  {FormattedNumber(current_project?.plannedWork)}
-                </h5>
-              </div>
-            </div>
-
-            {/* Tasks Completed */}
-            <div className="d-flex align-items-center mb-3">
-              <div className="avatar me-2">
-                <span className="avatar-initial rounded-2 bg-label-info">
-                  <i className="bx bx-star text-info fs-4"></i>
-                </span>
-              </div>
-              <div className="d-flex flex-column text-start">
-                <small className="fw-bold">Tasks Completed</small>
-                <h5 className="mb-0">
-                  {FormattedNumber(current_project?.completedWork)}
-                </h5>
-              </div>
-            </div>
-
-            {/* Team Size */}
-            <div className="d-flex align-items-center">
-              <div className="avatar me-2">
-                <span className="avatar-initial rounded-2 bg-label-primary">
-                  <i className="bx bx-group text-primary fs-4"></i>
-                </span>
-              </div>
-              <div className="d-flex flex-column text-start">
-                <small className="fw-bold">Current Team Size</small>
-                <h5 className="mb-0">
-                  {FormattedNumber(current_project?.teamSize)}
-                </h5>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
           </li>
         </ul>
       </div>
-
     </div>
   );
 };

src/components/Project/Teams.jsx

@@ -7,7 +7,7 @@ import Avatar from "../common/Avatar";
 import moment from "moment";
 
 import ProjectRepository from "../../repositories/ProjectRepository";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
@@ -18,8 +18,7 @@ import {useEmployeesByProjectAllocated, useManageProjectAllocation} from "../../
 
 const Teams = () =>
 {
-  // const {projectId} = useParams()
+  const {projectId} = useParams()
-  const projectId = useSelector((store)=>store.localVariables.projectId)
   const dispatch = useDispatch();
 
   const { data, loading } = useMaster();

src/components/common/DateRangePicker.jsx

@@ -27,7 +27,6 @@ const DateRangePicker = ({
       defaultDate: [startDate, endDate], 
       static: true,       
       clickOpens: true,   
-      maxDate: endDate, // ✅ Disable future dates
       onChange: (selectedDates, dateStr) => {
         const [startDateString, endDateString] = dateStr.split(" to ");
         onRangeChange?.({ startDate: startDateString, endDate: endDateString });

src/hooks/useEmployees.js

@@ -124,7 +124,7 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
       const res = await EmployeeRepository.getAllEmployeeList(showInactive);
       return res.data;
     } else {
-      const res = await EmployeeRepository.getEmployeeListByproject(projectId);
+      const res = await ProjectRepository.getEmployeesByProject(projectId);
       return res.data;
     }
   };

src/hooks/useImageGallery.js

@@ -1,85 +0,0 @@
-import { useState, useCallback } from "react";
-// import { ImageGalleryAPI } from "../repositories/ImageGalleyRepository";
-import { ImageGalleryAPI } from "../repositories/ImageGalleryAPI";
-
-const PAGE_SIZE = 10;
-
-const useImageGallery = (selectedProjectId) => {
-  const [images, setImages] = useState([]);
-  const [allImagesData, setAllImagesData] = useState([]);
-  const [pageNumber, setPageNumber] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
-  const [loading, setLoading] = useState(false);
-  const [loadingMore, setLoadingMore] = useState(false);
-
-  const fetchImages = useCallback(async (page = 1, filters = {}, reset = false) => {
-    if (!selectedProjectId) return;
-
-    try {
-      if (page === 1) {
-        setLoading(true);
-      } else {
-        setLoadingMore(true);
-      }
-
-      const res = await ImageGalleryAPI.ImagesGet(
-        selectedProjectId,
-        filters,
-        page,
-        PAGE_SIZE
-      );
-
-      const newBatches = res.data || [];
-      const receivedCount = newBatches.length;
-
-      setImages((prev) => {
-        if (page === 1 || reset) return newBatches;
-        const uniqueNew = newBatches.filter(
-          (batch) => !prev.some((b) => b.batchId === batch.batchId)
-        );
-        return [...prev, ...uniqueNew];
-      });
-
-      setAllImagesData((prev) => {
-        if (page === 1 || reset) return newBatches;
-        const uniqueAll = newBatches.filter(
-          (batch) => !prev.some((b) => b.batchId === batch.batchId)
-        );
-        return [...prev, ...uniqueAll];
-      });
-
-      setHasMore(receivedCount === PAGE_SIZE);
-    } catch (error) {
-      console.error("Error fetching images:", error);
-      if (page === 1) {
-        setImages([]);
-        setAllImagesData([]);
-      }
-      setHasMore(false);
-    } finally {
-      setLoading(false);
-      setLoadingMore(false);
-    }
-  }, [selectedProjectId]);
-
-  const resetGallery = useCallback(() => {
-    setImages([]);
-    setAllImagesData([]);
-    setPageNumber(1);
-    setHasMore(true);
-  }, []);
-
-  return {
-    images,
-    allImagesData,
-    pageNumber,
-    setPageNumber,
-    hasMore,
-    loading,
-    loadingMore,
-    fetchImages,
-    resetGallery,
-  };
-};
-
-export default useImageGallery;

src/hooks/usePagination.js

@@ -1,31 +1,12 @@
-import { useState, useMemo,useEffect } from "react";
+import { useState, useMemo } from "react";
 
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
-
+  const totalPages = Math.ceil(data?.length / itemsPerPage);
-  // const totalPages = Math.ceil(data?.length / itemsPerPage);
-
-// add this new line
-   const totalPages = useMemo(() => {
-    return Math.ceil((data?.length || 0) / itemsPerPage);
-  }, [data?.length, itemsPerPage]);
-
-  useEffect(() => {
-    if (currentPage > totalPages && totalPages > 0) {
-      setCurrentPage(1);
-    } else if (!data || data.length === 0) {
-      setCurrentPage(1);
-    } else if (currentPage === 0 && totalPages > 0) {
-        setCurrentPage(1);
-    }
-  }, [data, totalPages, currentPage]);
 
   const currentItems = useMemo(() => {
     const startIndex = (currentPage - 1) * itemsPerPage;
-
+    return data?.slice(startIndex, startIndex + itemsPerPage);
-    // return data?.slice(startIndex, startIndex + itemsPerPage);
-    return data?.slice(startIndex, startIndex + itemsPerPage) || [];
-    
   }, [data, currentPage, itemsPerPage]);
 
   const paginate = (pageNumber) => {

src/hooks/useProjects.js

@@ -311,72 +311,14 @@ export const useManageTask = ({ onSuccessCallback }) => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
+
   return useMutation({
-    mutationFn: async ({
+    mutationFn: async ({ payload, PreviousPlannedWork }) =>
-      payload,
+      await ProjectRepository.manageProjectTasks(payload),
-      PreviousPlannedWork,
-      previousCompletedWork,
-      buildingId,
-      floorId,
-      workAreaId,
-    }) => await ProjectRepository.manageProjectTasks(payload),
     onSuccess: (data, variables) => {
-      const {
+      const { PreviousPlannedWork } = variables;
-        workAreaId,
-        buildingId,
-        floorId,
-        PreviousPlannedWork,
-        previousCompletedWork,
-      } = variables;
       queryClient.invalidateQueries({ queryKey: ["WorkItems"] });
       const getPlannedDelta = (previous, current) => current - previous;
-      queryClient.setQueryData(["ProjectInfra", selectedProject], (oldData) => {
-        if (!oldData) return oldData;
-        const { workAreaId, floorId, buildingId } = variables;
-        const updatedData = JSON.parse(JSON.stringify(oldData));
-        return updatedData.map((building) => {
-          if (building.id !== buildingId) return building;
-          return {
-            ...building,
-            floors: building.floors.map((floor) => {
-              if (floor.id !== floorId) return floor;
-
-              return {
-                ...floor,
-                workAreas: floor.workAreas.map((area) => {
-                  if (area.id !== workAreaId) return area;
-
-                  const previousPlanned = PreviousPlannedWork ?? 0;
-                  const currentPlanned =
-                    data?.data[0]?.workItem.plannedWork ?? 0;
-
-                  const plannedWorkDelta = getPlannedDelta(
-                    previousPlanned,
-                    currentPlanned
-                  );
-                  const updatedPlannedWork =
-                    (area.plannedWork ?? 0) + plannedWorkDelta;
-                  const previousCompleted = previousCompletedWork;
-
-                  const currentCompleted =
-                    data?.data[0]?.workItem.completedWork ?? 0;
-                  const completedWorkDelta = getPlannedDelta(
-                    previousCompleted,
-                    currentCompleted
-                  );
-                  const updatedCompletedWork =
-                    (area.completedWork ?? 0) + completedWorkDelta;
-                  return {
-                    ...area,
-                    plannedWork: updatedPlannedWork,
-                    completedWork: updatedCompletedWork,
-                  };
-                }),
-              };
-            }),
-          };
-        });
-      });
 
       queryClient.setQueryData(["ProjectsList"], (projects) => {
         if (!projects) return projects;
@@ -384,30 +326,20 @@ export const useManageTask = ({ onSuccessCallback }) => {
         return projects.map((project) => {
           if (project.id !== selectedProject) return project;
 
-          const previousPlanned = PreviousPlannedWork ?? 0;
+          const previous = PreviousPlannedWork ?? 0;
-          const currentPlanned = data?.data[0]?.workItem.plannedWork ?? 0;
+          const current = data?.data[0]?.workItem.plannedWork ?? 0;
 
-          const plannedWorkDelta = getPlannedDelta(
+          const plannedWorkDelta = getPlannedDelta(previous, current);
-            previousPlanned,
-            currentPlanned
-          );
           const updatedPlannedWork =
             (project.plannedWork ?? 0) + plannedWorkDelta;
-          const previousCompleted = previousCompletedWork;
+
-          const currentCompleted = data?.data[0]?.workItem.completedWork ?? 0;
-          const completedWorkDelta = getPlannedDelta(
-            previousCompleted,
-            currentCompleted
-          );
-          const updatedCompletedWork =
-            (project.completedWork ?? 0) + completedWorkDelta;
           return {
             ...project,
             plannedWork: updatedPlannedWork,
-            completedWork: updatedCompletedWork,
           };
         });
       });
+
       if (onSuccessCallback) onSuccessCallback(data);
     },
     onError: (error) => {
@@ -422,73 +354,16 @@ export const useManageTask = ({ onSuccessCallback }) => {
 
 export const useDeleteProjectTask = (onSuccessCallback) => {
   const queryClient = useQueryClient();
-  const selectedProject = useSelector(
+
-    (store) => store.localVariables.projectId
-  );
   return useMutation({
-    mutationFn: async ({
+    mutationFn: async ({ workItemId, workAreaId }) => {
-      workItemId,
-      workAreaId,
-      completedTask,
-      plannedTask,
-    }) => {
       return await ProjectRepository.deleteProjectTask(workItemId);
     },
     onSuccess: (_, variables) => {
-      const { completedTask, plannedTask, workAreaId, buildingId, floorId } =
+      showToast("Task deleted successfully", "success");
-        variables;
-
       queryClient.invalidateQueries({
         queryKey: ["WorkItems", variables.workAreaId],
       });
-
-      queryClient.setQueryData(["ProjectInfra", selectedProject], (oldData) => {
-        if (!oldData) return oldData;
-
-        const { workAreaId, floorId, buildingId, plannedTask, completedTask } =
-          variables;
-
-        const updatedData = JSON.parse(JSON.stringify(oldData));
-
-        return updatedData.map((building) => {
-          if (building.id !== buildingId) return building;
-
-          return {
-            ...building,
-            floors: building.floors.map((floor) => {
-              if (floor.id !== floorId) return floor;
-
-              return {
-                ...floor,
-                workAreas: floor.workAreas.map((area) => {
-                  if (area.id !== workAreaId) return area;
-
-                  return {
-                    ...area,
-                    plannedWork: (area.plannedWork ?? 0) - plannedTask,
-                    completedWork: (area.completedWork ?? 0) - completedTask,
-                  };
-                }),
-              };
-            }),
-          };
-        });
-      });
-
-      queryClient.setQueryData(["ProjectsList"], (projects) => {
-        if (!projects) return projects;
-
-        return projects.map((project) => {
-          if (project.id !== selectedProject) return project;
-
-          return {
-            ...project,
-            plannedWork: (project.plannedWork ?? 0) - plannedTask,
-            completedWork: (project.completedWork ?? 0) - completedTask,
-          };
-        });
-      });
-      showToast("Task deleted successfully", "success");
       if (onSuccessCallback) onSuccessCallback();
     },
     onError: (error) => {

src/hooks/useTasks.js

@@ -78,17 +78,17 @@ export const useAuditStatus = () => {
   return { status, loading, error, refetch };
 };
 
-// -----------------------Mutation------------------------
+// ---------====================Mutation================------------------
 const toDate = new Date().toISOString().split("T")[0];
 const dateFrom = new Date(Date.now() - 6 * 24 * 60 * 60 * 1000)
   .toISOString()
   .split("T")[0];
 
 export const useReportTask = ({ onSuccessCallback, onErrorCallback } = {}) => {
-  const queryClient = useQueryClient();
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
+  const queryClient = useQueryClient();
   const { mutate, isPending, isSuccess, isError, error } = useMutation({
     mutationFn: async ({ reportData, workAreaId }) => {
       return await TasksRepository.reportTask(reportData);
@@ -138,6 +138,7 @@ export const useReportTask = ({ onSuccessCallback, onErrorCallback } = {}) => {
           };
         });
       });
+
       showToast("Task Reported Successfully.", "success");
       if (onSuccessCallback) onSuccessCallback(data);
     },

src/pages/Activities/AttendancePage.jsx

@@ -21,14 +21,13 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
 import eventBus from "../../services/eventBus";
 import AttendanceRepository from "../../repositories/AttendanceRepository";
-import { useProjectName } from "../../hooks/useProjects";
 
 const AttendancePage = () => {
   const [activeTab, setActiveTab] = useState("all");
   const [ShowPending, setShowPending] = useState(false);
   const loginUser = getCachedProfileData();
   var selectedProject = useSelector((store) => store.localVariables.projectId);
-  const dispatch = useDispatch()
+  // const { projects, loading: projectLoading } = useProjects();
   const {
     attendance,
     loading: attLoading,
@@ -39,8 +38,7 @@ const AttendancePage = () => {
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [modelConfig, setModelConfig] = useState();
   const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
-  const { projectNames, loading: projectLoading, fetchData } = useProjectName();
+  const dispatch = useDispatch();
-  
 
   const [formData, setFormData] = useState({
     markTime: "",
@@ -132,12 +130,6 @@ const AttendancePage = () => {
   const handleToggle = (event) => {
     setShowOnlyCheckout(event.target.checked);
   };
-  useEffect(() => {
-   if(selectedProject == null){
-       dispatch(setProjectId(projectNames[0]?.id));
-   }
-   },[])
-
 
   useEffect(() => {
     if (modelConfig !== null) {
@@ -148,7 +140,18 @@ const AttendancePage = () => {
     setAttendances(attendance);
   }, [attendance]);
 
+  // useEffect(() => {
+  //   if (selectedProject === 1 || selectedProject === undefined) {
+  //     dispatch(setProjectId(loginUser?.projects[0]));
+  //   }
+  // }, [selectedProject, loginUser?.projects]);
 
+  // Filter attendance data based on the toggle
+  // const filteredAttendance = showOnlyCheckout
+  //   ? attendances?.filter(
+  //     (att) => att?.checkOutTime !== null && att?.checkInTime !== null
+  //   )
+  //   : attendances;
   const filteredAttendance = ShowPending
     ? attendances?.filter(
         (att) => att?.checkInTime !== null && att?.checkOutTime === null
@@ -230,7 +233,7 @@ const AttendancePage = () => {
             <li className="nav-item">
               <button
                 type="button"
-                className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
+                className={`nav-link ${activeTab === "all" ? "active" : ""}`}
                 onClick={() => setActiveTab("all")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-home"
@@ -241,7 +244,7 @@ const AttendancePage = () => {
             <li className="nav-item">
               <button
                 type="button"
-                className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
+                className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
                 onClick={() => setActiveTab("logs")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-profile"
@@ -254,7 +257,7 @@ const AttendancePage = () => {
                 type="button"
                 className={`nav-link ${
                   activeTab === "regularization" ? "active" : ""
-                } fs-6`}
+                }`}
                 onClick={() => setActiveTab("regularization")}
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-messages"
@@ -266,7 +269,6 @@ const AttendancePage = () => {
           <div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
             {activeTab === "all" && (
               <>
-                {!attLoading && (
                 <div className="tab-pane fade show active py-0">
                   <Attendance
                     attendance={filteredAttendance}
@@ -276,7 +278,6 @@ const AttendancePage = () => {
                     showOnlyCheckout={ShowPending}
                   />
                 </div>
-                )}
                 {!attLoading && filteredAttendance?.length === 0 && (
                   <p>
                     {" "}

src/pages/Activities/DailyTask.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import { useTaskList } from "../../hooks/useTasks";
-import { useProjectName, useProjects } from "../../hooks/useProjects";
+import { useProjects } from "../../hooks/useProjects";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { ReportTask } from "../../components/Activities/ReportTask";
 import ReportTaskComments from "../../components/Activities/ReportTaskComments";
@@ -14,15 +14,13 @@ import GlobalModel from "../../components/common/GlobalModel";
 import AssignTask from "../../components/Project/AssignTask";
 import SubTask from "../../components/Activities/SubTask";
 import {formatNumber} from "../../utils/dateUtils";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { APPROVE_TASK, ASSIGN_REPORT_TASK } from "../../utils/constants";
 
 const DailyTask = () => {
+  const [searchParams] = useSearchParams();
+  const projectIdFromUrl = searchParams.get("project");
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
-  const dispatch = useDispatch()
-    const { projectNames, loading: projectLoading, fetchData } = useProjectName();
 
 
   const [filters, setFilters] = useState({
@@ -34,8 +32,6 @@ const DailyTask = () => {
 
 
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
-  const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK)
-  const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK)
 
   const {
     TaskList,
@@ -48,11 +44,7 @@ const DailyTask = () => {
     dateRange?.endDate || null
     );
   
-  useEffect(() => {
+
-   if(selectedProject == null){
-       dispatch(setProjectId(projectNames[0]?.id));
-   }
-   },[])
   const [TaskLists, setTaskLists] = useState([]);
   const [dates, setDates] = useState([]);
   const popoverRefs = useRef([]);
@@ -394,7 +386,6 @@ const DailyTask = () => {
                                   </td>
                                   <td className="text-center">
                                     <div className="d-flex justify-content-end">
-                                     { ReportTaskRights && 
                                       <button
                                         type="button"
                                         className={`btn btn-xs btn-primary ${
@@ -409,8 +400,7 @@ const DailyTask = () => {
                                       >
                                         Report
                                       </button>
-                          }
+                                      {task.reportedDate && (
-                                      {(ApprovedTaskRights && task.reportedDate ) && (
                                         <button
                                           type="button"
                                           className={`btn btn-xs btn-warning ${

src/pages/Activities/TaskPlannng.jsx

@@ -1,23 +1,9 @@
-import React,{useEffect} from "react";
+import React from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import InfraPlanning from "../../components/Activities/InfraPlanning";
-import { useProjectName } from "../../hooks/useProjects";
-import { useDispatch, useSelector } from "react-redux";
-import { setProjectId } from "../../slices/localVariablesSlice";
 
 
 const TaskPlannng = () => {
-  const selectedProject = useSelector(
-    (store) => store.localVariables.projectId
-  );
-
-  const dispatch = useDispatch()
-    const { projectNames, loading: projectLoading, fetchData } = useProjectName();
-  useEffect(() => {
-   if(selectedProject == null){
-       dispatch(setProjectId(projectNames[0]?.id));
-   }
-   },[])
 
   return (
     <>

src/pages/Directory/Directory.jsx

@@ -260,7 +260,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
   }, [prefernceContacts]);
 
   return (
-    <div className={IsPage ? "container-fluid":""}>
+    <div className="container-fluid">
       {IsPage && (
         <Breadcrumb
           data={[

src/pages/Gallary/ImageGallary.jsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import "./ImageGallery.css";
+import { ImageGalleryAPI } from "./ImageGalleryAPI";
 import moment from "moment";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { useModal } from "./ModalContext";
 import ImagePop from "./ImagePop";
 import Avatar from "../../components/common/Avatar";
@@ -9,35 +10,16 @@ import DateRangePicker from "../../components/common/DateRangePicker";
 import eventBus from "../../services/eventBus";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import {formatUTCToLocalTime} from "../../utils/dateUtils";
-import useImageGallery from "../../hooks/useImageGallery";
-import { useProjectName } from "../../hooks/useProjects";
-import { setProjectId } from "../../slices/localVariablesSlice";
 
+const PAGE_SIZE = 10;
 const SCROLL_THRESHOLD = 5;
 
 const ImageGallery = () => {
+  const [images, setImages] = useState([]);
+  const [allImagesData, setAllImagesData] = useState([]);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
   const selectedProjectId = useSelector((store) => store.localVariables.projectId);
-
-  const dispatch = useDispatch()
-    const { projectNames, loading: projectLoading, fetchData } = useProjectName();
-  useEffect(() => {
-   if(selectedProjectId == null){
-       dispatch(setProjectId(projectNames[0]?.id));
-   }
-   },[])
-
-  const {
-    images,
-    allImagesData,
-    pageNumber,
-    setPageNumber,
-    hasMore,
-    loading,
-    loadingMore,
-    fetchImages,
-    resetGallery,
-  } = useImageGallery(selectedProjectId);
-
   const { openModal } = useModal();
 
   const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD');
@@ -76,6 +58,8 @@ const ImageGallery = () => {
 
   const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
   const [hoveredImage, setHoveredImage] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
 
   const imageGroupRefs = useRef({});
   const loaderRef = useRef(null);
@@ -107,18 +91,71 @@ const ImageGallery = () => {
 
   useEffect(() => {
     if (!selectedProjectId) {
-      resetGallery();
+      setImages([]);
+      setAllImagesData([]);
+      setLoading(false);
+      setHasMore(false);
       return;
     }
 
-    resetGallery();
+    setImages([]);
+    setPageNumber(1);
+    setHasMore(true);
+    setLoading(true);
+
+    setAllImagesData([]);
     fetchImages(1, appliedFilters, true);
   }, [selectedProjectId, appliedFilters]);
 
+  const fetchImages = useCallback(async (page, filters) => {
+    if (!selectedProjectId) return;
+
+    try {
+      if (page === 1) {
+        setLoading(true);
+      } else {
+        setLoadingMore(true);
+      }
+
+      const res = await ImageGalleryAPI.ImagesGet(selectedProjectId, filters, page, PAGE_SIZE);
+      const newBatches = res.data || [];
+      const receivedCount = newBatches.length;
+
+      setImages((prevImages) => {
+        const uniqueNewBatches = newBatches.filter(
+          (newBatch) => !prevImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
+        );
+        return [...prevImages, ...uniqueNewBatches];
+      });
+
+      setAllImagesData((prevAllImages) => {
+        const uniqueAllImages = newBatches.filter(
+          (newBatch) => !prevAllImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
+        );
+        return [...prevAllImages, ...uniqueAllImages];
+      });
+
+      setHasMore(receivedCount === PAGE_SIZE);
+    } catch (err) {
+      console.error("Error fetching images:", err);
+      if (page === 1) {
+        setImages([]);
+        setAllImagesData([]);
+      }
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, [selectedProjectId]);
+
   useEffect(() => {
     const handleExternalEvent = (data) => {
       if (selectedProjectId === data.projectId) {
-        resetGallery();
+        setImages([]);
+        setAllImagesData([]);
+        setPageNumber(1);
+        setHasMore(true);
         fetchImages(1, appliedFilters, true);
       }
     };
@@ -159,13 +196,20 @@ const ImageGallery = () => {
     if (pageNumber > 1) {
       fetchImages(pageNumber, appliedFilters);
     }
-  }, [pageNumber]);
+  }, [pageNumber, fetchImages, appliedFilters]);
 
   const getUniqueValuesWithIds = useCallback((idKey, nameKey) => {
     const map = new Map();
     allImagesData.forEach(batch => {
-      let id = idKey === "floorIds" ? batch.floorIds : batch[idKey];
+      let id;
+      if (idKey === "floorIds") {
+        id = batch.floorIds;
+      } else {
+        id = batch[idKey];
+      }
+      
       const name = batch[nameKey];
+      
       if (id && name && !map.has(id)) {
         map.set(id, name);
       }
@@ -228,12 +272,30 @@ const ImageGallery = () => {
 
   const handleApplyFilters = useCallback(() => {
     const payload = {
-      buildingIds: selectedFilters.building.length ? selectedFilters.building.map((item) => item[0]) : null,
+      buildingIds:
-      floorIds: selectedFilters.floor.length ? selectedFilters.floor.map((item) => item[0]) : null,
+        selectedFilters.building.length > 0
-      workAreaIds: selectedFilters.workArea.length ? selectedFilters.workArea.map((item) => item[0]) : null,
+          ? selectedFilters.building.map((item) => item[0])
-      workCategoryIds: selectedFilters.workCategory.length ? selectedFilters.workCategory.map((item) => item[0]) : null,
+          : null,
-      activityIds: selectedFilters.activity.length ? selectedFilters.activity.map((item) => item[0]) : null,
+      floorIds:
-      uploadedByIds: selectedFilters.uploadedBy.length ? selectedFilters.uploadedBy.map((item) => item[0]) : null,
+        selectedFilters.floor.length > 0
+          ? selectedFilters.floor.map((item) => item[0])
+          : null,
+      workAreaIds:
+        selectedFilters.workArea.length > 0
+          ? selectedFilters.workArea.map((item) => item[0])
+          : null,
+      workCategoryIds:
+        selectedFilters.workCategory.length > 0
+          ? selectedFilters.workCategory.map((item) => item[0])
+          : null,
+      activityIds:
+        selectedFilters.activity.length > 0
+          ? selectedFilters.activity.map((item) => item[0])
+          : null,
+      uploadedByIds:
+        selectedFilters.uploadedBy.length > 0
+          ? selectedFilters.uploadedBy.map((item) => item[0])
+          : null,
       startDate: selectedFilters.startDate || null,
       endDate: selectedFilters.endDate || null,
     };
@@ -241,23 +303,30 @@ const ImageGallery = () => {
     const areFiltersChanged = Object.keys(payload).some(key => {
       const oldVal = appliedFilters[key];
       const newVal = payload[key];
+
       if (Array.isArray(oldVal) && Array.isArray(newVal)) {
         if (oldVal.length !== newVal.length) return true;
         const oldSet = new Set(oldVal);
         const newSet = new Set(newVal);
+        if (oldSet.size !== newSet.size) return true;
         for (const item of newSet) {
           if (!oldSet.has(item)) return true;
         }
         return false;
       }
-      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) return false;
+      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) {
+          return false;
+      }
       return oldVal !== newVal;
     });
 
     if (areFiltersChanged) {
       setAppliedFilters(payload);
-      resetGallery();
+      setImages([]);
+      setPageNumber(1);
+      setHasMore(true);
     }
+    // Removed setIsFilterPanelOpen(false); to keep the drawer open
   }, [selectedFilters, appliedFilters]);
 
   const handleClearAllFilters = useCallback(() => {
@@ -284,7 +353,9 @@ const ImageGallery = () => {
       endDate: null,
     };
     setAppliedFilters(initialStateApplied);
-    resetGallery();
+    setImages([]);
+    setPageNumber(1);
+    setHasMore(true);
   }, []);
 
   const scrollLeft = useCallback((key) => {
@@ -311,7 +382,9 @@ const ImageGallery = () => {
               Clear
             </button>
           )}
-          {type !== "dateRange" && selectedFilters[type]?.length > 0 && (
+          {type !== "dateRange" &&
+            selectedFilters[type] &&
+            selectedFilters[type].length > 0 && (
               <button
                 className="clear-button"
                 onClick={(e) => {
@@ -322,7 +395,9 @@ const ImageGallery = () => {
                 Clear
               </button>
             )}
-          <span className="collapse-icon">{collapsedFilters[type] ? '+' : '-'}</span>
+          <span className="collapse-icon">
+            {collapsedFilters[type] ? '+' : '-'}
+          </span>
         </div>
       </div>
       {!collapsedFilters[type] && (
@@ -331,22 +406,31 @@ const ImageGallery = () => {
             <div className="date-range-inputs">
               <DateRangePicker
                 onRangeChange={setDateRange}
-                endDateMode="today"
+                defaultStartDate={selectedFilters.startDate || yesterday}
+                defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
                 startDate={selectedFilters.startDate}
                 endDate={selectedFilters.endDate}
               />
             </div>
           ) : (
-            items.map(([itemId, itemName]) => (
+            items.map((item) => {
+              const itemId = item[0];
+              const itemName = item[1];
+              const isChecked = selectedFilters[type].some(
+                (selectedItem) => selectedItem[0] === itemId
+              );
+
+              return (
                 <label key={itemId}>
                   <input
                     type="checkbox"
-                  checked={selectedFilters[type].some((item) => item[0] === itemId)}
+                    checked={isChecked}
                     onChange={() => toggleFilter(type, itemId, itemName)}
                   />
                   {itemName}
                 </label>
-            ))
+              );
+            })
           )}
         </div>
       )}
@@ -355,24 +439,39 @@ const ImageGallery = () => {
 
   return (
     <div className={`gallery-container container-fluid ${ isFilterPanelOpen ? "filter-panel-open-end" : "" }`}>
-      <Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallary", link: null }]} />
+       <Breadcrumb
+          data={[
+            { label: "Home", link: "/" },
+            { label: "Gallary", link: null },
+          ]}
+      ></Breadcrumb>
       <div className="main-content">
         <button
           className={`filter-button btn-primary ${isFilterPanelOpen ? "closed-icon" : ""}`}
           onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
           ref={filterButtonRef}
         >
-          {isFilterPanelOpen ? <i className="fa-solid fa-times fs-5"></i> : <i className="fa-solid fa-filter ms-1 fs-5"></i>}
+          {isFilterPanelOpen ? (
+            <i className="fa-solid fa-times fs-5"></i>
+          ) : (
+            <><i className="fa-solid fa-filter ms-1 fs-5"></i></>
+          )}
         </button>
 
         <div className="activity-section">
           {loading && pageNumber === 1 ? (
-            <div className="spinner-container"><div className="spinner" /></div>
+            <div className="spinner-container">
+              <div className="spinner" />
+            </div>
           ) : images.length > 0 ? (
             images.map((batch) => {
               const firstDoc = batch.documents[0];
-              const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""}`.trim();
+              const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""
-              const date = formatUTCToLocalTime(firstDoc?.uploadedAt);
+                }`.trim();
+              const date = formatUTCToLocalTime(firstDoc?.uploadedAt)
+              
+              
+
               const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
 
               return (
@@ -380,15 +479,29 @@ const ImageGallery = () => {
                   <div className="group-heading">
                     <div className="d-flex flex-column">
                       <div className="d-flex align-items-center mb-1">
-                        <Avatar size="xs" firstName={firstDoc?.uploadedBy?.firstName} lastName={firstDoc?.uploadedBy?.lastName} className="me-2" />
+                        <Avatar
+                          size="xs"
+                          firstName={firstDoc?.uploadedBy?.firstName}
+                          lastName={firstDoc?.uploadedBy?.lastName}
+                          className="me-2"
+                        />
                         <div className="d-flex flex-column align-items-start">
-                          <strong className="user-name-text">{userName}</strong>
+                          <strong className="user-name-text">
-                          <span className="me-2">{date}</span>
+                            {userName}
+                          </strong>
+                          <span className="me-2">
+                            {date} 
+                          </span>
                         </div>
                       </div>
                     </div>
+
                     <div className="location-line">
-                      <div>{batch.buildingName} &gt; {batch.floorName} &gt; <strong>{batch.workAreaName || "Unknown"} &gt; {batch.activityName}</strong></div>
+                      <div>
+                        {batch.buildingName} &gt; {batch.floorName} &gt;{" "}
+                        <strong>{batch.workAreaName || "Unknown"} &gt;{" "}
+                          {batch.activityName}</strong>
+                      </div>
                       {batch.workCategoryName && (
                         <div className="work-category-display ms-2">
                           <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
@@ -398,52 +511,106 @@ const ImageGallery = () => {
                       )}
                     </div>
                   </div>
+
                   <div className="image-group-wrapper">
-                    {showScrollButtons && <button className="scroll-arrow left-arrow" onClick={() => scrollLeft(batch.batchId)}>&#8249;</button>}
+                    {showScrollButtons && (
-                    <div className="image-group-horizontal" ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}>
+                      <button
+                        className="scroll-arrow left-arrow"
+                        onClick={() => scrollLeft(batch.batchId)}
+                      >
+                        &#8249;
+                      </button>
+                    )}
+                    <div
+                      className="image-group-horizontal"
+                      ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
+                    >
                       {batch.documents.map((doc, idx) => {
                         const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY");
                         const hoverTime = moment(doc.uploadedAt).format("hh:mm A");
 
                         return (
-                          <div key={doc.id} className="image-card" onClick={() => openModal(<ImagePop batch={batch} initialIndex={idx} />)} onMouseEnter={() => setHoveredImage(doc)} onMouseLeave={() => setHoveredImage(null)}>
+                          <div
+                            key={doc.id}
+                            className="image-card"
+                            onClick={() =>
+                              openModal(<ImagePop batch={batch} initialIndex={idx} />)
+                            }
+                            onMouseEnter={() => setHoveredImage(doc)}
+                            onMouseLeave={() => setHoveredImage(null)}
+                          >
                             <div className="image-wrapper">
                               <img src={doc.url} alt={`Image ${idx + 1}`} />
                             </div>
                             {hoveredImage === doc && (
                               <div className="image-hover-description">
-                                <p><strong>Date:</strong> {hoverDate}</p>
+                                <p>
-                                <p><strong>Time:</strong> {hoverTime}</p>
+                                  <strong>Date:</strong> {hoverDate}
-                                <p><strong>Activity:</strong> {batch.activityName}</p>
+                                </p>
+                                <p>
+                                  <strong>Time:</strong> {hoverTime}
+                                </p>
+                                <p>
+                                  <strong>Activity:</strong> {batch.activityName}
+                                </p>
                               </div>
                             )}
                           </div>
                         );
                       })}
                     </div>
-                    {showScrollButtons && <button className="scroll-arrow right-arrow" onClick={() => scrollRight(batch.batchId)}>&#8250;</button>}
+                    {showScrollButtons && (
+                      <button
+                        className="scroll-arrow right-arrow"
+                        onClick={() => scrollRight(batch.batchId)}
+                      >
+                        &#8250;
+                      </button>
+                    )}
                   </div>
                 </div>
               );
             })
           ) : (
-            !loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>No images match the selected filters.</p>
+            !loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
+              No images match the selected filters.
+            </p>
           )}
+
           <div ref={loaderRef} style={{ height: '50px', margin: '20px 0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
             {loadingMore && hasMore && <div className="spinner" />}
-            {!hasMore && !loading && images.length > 0 && <p style={{ color: '#aaa' }}>You've reached the end of the images.</p>}
+            {!hasMore && !loading && images.length > 0 && (
+              <p style={{ color: '#aaa' }}>You've reached the end of the images.</p>
+            )}
           </div>
         </div>
       </div>
 
-      <div className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`} tabIndex="-1" id="filterOffcanvas" aria-labelledby="filterOffcanvasLabel" ref={filterPanelRef}>
+      <div
+        className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`}
+        tabIndex="-1"
+        id="filterOffcanvas"
+        aria-labelledby="filterOffcanvasLabel"
+        ref={filterPanelRef}
+      >
         <div className="offcanvas-header">
-          <h5 className="offcanvas-title" id="filterOffcanvasLabel">Filters</h5>
+          <h5 className="offcanvas-title" id="filterOffcanvasLabel">
-          <button type="button" className="btn-close" onClick={() => setIsFilterPanelOpen(false)} aria-label="Close" />
+            Filters
+          </h5>
+          <button
+            type="button"
+            className="btn-close"
+            onClick={() => setIsFilterPanelOpen(false)}
+            aria-label="Close"
+          ></button>
         </div>
         <div className="filter-actions mt-auto mx-2">
-          <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>Clear All</button>
+            <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
-          <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>Apply Filters</button>
+              Clear All
+            </button>
+            <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
+              Apply Filters
+            </button>
           </div>
         <div className="offcanvas-body d-flex flex-column">
           {renderFilterCategory("Date Range", [], "dateRange")}
@@ -453,6 +620,8 @@ const ImageGallery = () => {
           {renderFilterCategory("Activity", activities, "activity")}
           {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
           {renderFilterCategory("Work Category", workCategories, "workCategory")}
+
+        
         </div>
       </div>
     </div>

src/pages/Gallary/ImageGalleryAPI.jsx

@@ -1,8 +1,9 @@
-import { api } from "../utils/axiosClient";
+import { api } from "../../utils/axiosClient";
 
 export const ImageGalleryAPI = {
     ImagesGet: (projectId, filter, pageNumber, pageSize) => {
         const payloadJsonString = JSON.stringify(filter);
+        // Corrected API endpoint with pagination parameters
         return api.get(`/api/image/images/${projectId}?filter=${payloadJsonString}&pageNumber=${pageNumber}&pageSize=${pageSize}`);
     },
 };

src/pages/Gallary/ImagePop.css

@@ -1,148 +1,102 @@
-/* Image Modal Overlay */
 .image-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 9999;
+  z-index: 9999; /* High z-index to ensure it's on top */
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.85);
+  background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-/* Main Modal Content Box */
 .image-modal-content {
   background: #fff;
   padding: 24px;
-  max-width: 50%;
+  max-width: 90%; /* Responsive max-width */
-  max-height: 95vh; /* Limits the modal's height to 95% of viewport height */
+  max-height: 100%; /* Responsive max-height */
   border-radius: 12px;
   position: relative;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
   text-align: center;
-  display: flex;
+  display: flex; /* Use flexbox for internal layout */
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  overflow-y: auto; /* Enables vertical scrolling */
-
-  /* --- HIDE SCROLLBAR FOR MAIN MODAL CONTENT --- */
-  /* For Webkit browsers (Chrome, Safari, Edge) */
-  &::-webkit-scrollbar {
-    width: 0px; /* Hide vertical scrollbar */
-    height: 0px; /* Hide horizontal scrollbar, though unlikely needed here */
-  }
-  /* For Firefox */
-  scrollbar-width: none; /* Hide scrollbar in Firefox */
-  /* For Internet Explorer and Edge (legacy) */
-  -ms-overflow-style: none;
-  /* --- END HIDE SCROLLBAR --- */
 }
 
-/* Image Styles */
 .modal-image {
   max-width: 100%;
-  max-height: 70vh;
+  max-height: 70vh; /* Limits image height to 70% of viewport height */
-  width: auto;
   border-radius: 10px;
-  object-fit: contain;
+  object-fit: contain; /* Ensures the whole image is visible without cropping */
   margin-bottom: 20px;
-  flex-shrink: 0;
+  flex-shrink: 0; /* Prevent image from shrinking if content is too large */
 }
 
-/* Scrollable Container for Text Details */
-.image-details-scroll-container {
-  width: 100%;
-  flex-grow: 1;
-  max-height: calc(95vh - 70vh - (24px * 2) - 20px); /* Approximate calculation for text area height */
-  overflow-y: auto; /* Enables vertical scrolling for details */
-  text-align: left;
-  padding-right: 5px; /* Add some padding so text doesn't touch the hidden scrollbar area */
-
-  /* --- HIDE SCROLLBAR FOR TEXT DETAILS SECTION --- */
-  /* For Webkit browsers (Chrome, Safari, Edge) */
-  &::-webkit-scrollbar {
-    width: 0px; /* Hide vertical scrollbar */
-    height: 0px; /* Hide horizontal scrollbar */
-  }
-  /* For Firefox */
-  scrollbar-width: none; /* Hide scrollbar in Firefox */
-  /* For Internet Explorer and Edge (legacy) */
-  -ms-overflow-style: none;
-  /* --- END HIDE SCROLLBAR --- */
-}
-
-/* Image Details Section (inside the scroll container) */
 .image-details {
+  text-align: left;
   color: #444;
   font-size: 14px;
   line-height: 1.4;
   margin: 0;
   padding: 0;
-  width: 100%;
+  width: 100%; /* Ensure details section takes full width */
-  text-align: left;
 }
 
 .image-details p {
-  margin: 4px 0;
+  margin: 4px 0; /* Reduce vertical space between lines in details */
-  white-space: normal;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  text-overflow: initial;
-  text-align: left;
 }
 
-/* Close Button */
 .close-button {
   position: absolute;
-  top: 1px;
+  top: 1px; /* Position relative to the modal content */
   right: 8px;
   font-size: 30px;
   background: none;
   border: none;
-  color: black;
+  color: black; /* White color for visibility on dark overlay */
   cursor: pointer;
   padding: 0;
   line-height: 1;
-  z-index: 10000;
+  z-index: 10000; /* Ensure it's above everything else */
 }
 
-/* Navigation Buttons */
+/* Styles for the navigation buttons */
 .nav-button {
   position: absolute;
-  top: 50%;
+  top: 50%; /* Vertically center them */
-  transform: translateY(-50%);
+  transform: translateY(-50%); /* Adjust for perfect vertical centering */
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
   color: white;
   border: none;
   padding: 10px 15px;
   font-size: 30px;
   cursor: pointer;
-  z-index: 1000;
+  z-index: 1000; /* Ensure buttons are above the image */
-  border-radius: 50%;
+  border-radius: 50%; /* Make them circular */
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.3s ease;
+  transition: background-color 0.3s ease; /* Smooth hover effect */
 }
 
 .nav-button:hover {
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
 }
 
 .nav-button.prev-button {
-  left: 0px;
+  left: 0px; /* Position left arrow */
 }
 
 .nav-button.next-button {
-  right: 0px;
+  right: 0px; /* Position right arrow */
 }
 
-/* Disabled Button Style */
+/* Style for disabled buttons (optional) */
 .nav-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;

src/pages/authentication/ChangePassword.jsx

@@ -69,17 +69,22 @@ const ChangePasswordPage = ({ onClose }) => {
       className="modal d-flex align-items-center justify-content-center show"
       tabIndex="-1"
       role="dialog"
-      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+      style={{ display: "flex", backgroundColor: "rgba(0,0,0,0.5)" }}
     >
       <div className="modal-dialog" role="document">
-        <div className="modal-content p-10 rounded shadow bg-white position-relative">
+        <div className="modal-header">
+          {" "}
           <button
             type="button"
-            className="btn-close"
+            class="btn-close"
-            data-bs-dismiss="modal" aria-label="Close"
+            data-bs-dismiss="modal"
-            onClick={onClose} // Use onClick to trigger onClose function
+            style={{ top: "40px", right: "15px" }}
-            style={{ position: "absolute", top: "15px", right: "15px" }} // Example positioning
+            aria-label="Close"
           ></button>
+        </div>
+
+        <div className="modal-content p-10 rounded shadow bg-white position-relative">
+          {/* Close Button */}
 
           <h5 className="mb-2">Change Password</h5>
           <p className="mb-4" style={{ fontSize: "14px" }}>
@@ -114,6 +119,7 @@ const ChangePasswordPage = ({ onClose }) => {
               )}
             </div>
 
+            {/* <div className="row"> */}
             <div className="mb-3 text-start">
               <label className="form-label">New Password</label>
               <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
@@ -174,14 +180,14 @@ const ChangePasswordPage = ({ onClose }) => {
                 </div>
               )}
             </div>
-
+            {/* </div> */}
-            <div className="d-flex justify-content-center pt-2 text-muted small">
+            <div className="d-flex justify-content-center  pt-2">
               Your password must have at least 8 characters and include a lower
-              case letter, an uppercase letter, a number, and a special
+              case latter, an uppercase letter, a number, and a special
               character.
             </div>
             {/* Action Buttons */}
-            <div className="d-flex justify-content-center pt-4">
+            <div className="d-flex justify-content-center  pt-2">
               <button
                 type="submit"
                 className="btn btn-primary btn-sm me-2"

src/pages/authentication/LoginWithOtp.jsx

@@ -29,8 +29,6 @@ const LoginWithOtp = () => {
     handleSubmit,
     formState: { errors, isSubmitted },
     getValues,
-    setValue,
-    trigger,
   } = useForm({
     resolver: zodResolver(otpSchema),
   });
@@ -66,7 +64,6 @@ const LoginWithOtp = () => {
   return `${min}:${sec}`;
 };
 
-  // Time Logic for OTP expiry
 useEffect(() => {
   const otpSentTime = localStorage.getItem("otpSentTime");
   const now = Date.now();
@@ -77,8 +74,6 @@ const LoginWithOtp = () => {
     setTimeLeft(remaining);
   }
 }, []);
-
-
 useEffect(() => {
   if (timeLeft <= 0) return;
 
@@ -97,30 +92,6 @@ const LoginWithOtp = () => {
   return () => clearInterval(timer);
 }, [timeLeft]);
 
-  // Handle Paste Event
-  const handlePaste = (e) => {
-    e.preventDefault();
-
-    const pastedData = e.clipboardData.getData("text/plain").trim();
-    if (pastedData.match(/^\d{4}$/)) {
-      for (let i = 0; i < pastedData.length; i++) {
-        setValue(`otp${i + 1}`, pastedData[i], { shouldValidate: true });
-
-        if (inputRefs.current[i + 1]) {
-          inputRefs.current[i + 1].focus();
-        }
-      }
-      trigger(["otp1", "otp2", "otp3", "otp4"]);
-    } else {
-      showToast("Invalid OTP format pasted. Please enter 4 digits")
-
-      for (let i = 0; i < 4; i++) {
-        setValue(`otp${i + 1}`, "")
-
-      }
-    }
-  }
-
 
   return (
     <AuthWrapper>
@@ -138,7 +109,8 @@ const LoginWithOtp = () => {
                   key={num}
                   type="text"
                   maxLength={1}
-                  className={`form-control text-center ${errors[`otp${num}`] ? "is-invalid" : ""
+                  className={`form-control text-center ${
+                    errors[`otp${num}`] ? "is-invalid" : ""
                   }`}
                   ref={(el) => {
                     inputRefs.current[idx] = el;
@@ -149,9 +121,6 @@ const LoginWithOtp = () => {
                     onChange(e);
                     if (/^\d$/.test(val) && idx < 3) {
                       inputRefs.current[idx + 1]?.focus();
-
-                    } else if (val === "" && idx > 0) {
-                      inputRefs.current[idx - 1]?.focus();
                     }
                   }}
                   onKeyDown={(e) => {
@@ -163,8 +132,6 @@ const LoginWithOtp = () => {
                       inputRefs.current[idx - 1]?.focus();
                     }
                   }}
-
-                  onPaste={idx === 0 ? handlePaste : undefined}
                   style={{ width: "40px", height: "40px", fontSize: "15px" }}
                   {...rest}
                 />

src/pages/employee/AttendancesEmployeeRecords.jsx

@@ -85,7 +85,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const currentDate = new Date().toLocaleDateString("en-CA");
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     sortedFinalList,
-    20
+    10
   );
 
   useEffect(() => {
@@ -145,7 +145,8 @@ const AttendancesEmployeeRecords = ({ employee }) => {
           </div>
           <div className="col-md-2 m-0 text-end">
             <i
-              className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
+              className={`bx bx-refresh cursor-pointer fs-4 ${
+                loading ? "spin" : ""
               }`}
               data-toggle="tooltip"
               title="Refresh"
@@ -223,7 +224,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
             </table>
           )}
         </div>
-        {!loading && sortedFinalList.length > 20 && (
+        {!loading && data.length > 5 && (
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li
@@ -239,7 +240,8 @@ const AttendancesEmployeeRecords = ({ employee }) => {
               {[...Array(totalPages)].map((_, index) => (
                 <li
                   key={index}
-                  className={`page-item ${currentPage === index + 1 ? "active" : ""
+                  className={`page-item ${
+                    currentPage === index + 1 ? "active" : ""
                   }`}
                 >
                   <button
@@ -251,7 +253,8 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                 </li>
               ))}
               <li
-                className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                className={`page-item ${
+                  currentPage === totalPages ? "disabled" : ""
                 }`}
               >
                 <button

src/pages/employee/EmployeeList.jsx

@@ -5,19 +5,11 @@ import { Link, NavLink, useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import ManageEmp from "../../components/Employee/ManageRole";
-import {
+import { useEmployeesAllOrByProjectId, useSuspendEmployee } from "../../hooks/useEmployees";
-  useEmployeesAllOrByProjectId,
+import { useProjects } from "../../hooks/useProjects";
-  useSuspendEmployee,
-} from "../../hooks/useEmployees";
-import { useProjectName, useProjects } from "../../hooks/useProjects";
 import { useProfile } from "../../hooks/useProfile";
 import { hasUserPermission } from "../../utils/authUtils";
-import {
+import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
-  ITEMS_PER_PAGE,
-  MANAGE_EMPLOYEES,
-  VIEW_ALL_EMPLOYEES,
-  VIEW_TEAM_MEMBERS,
-} from "../../utils/constants";
 import { clearCacheKey } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
@@ -30,20 +22,16 @@ import {
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import ManageEmployee from "../../components/Employee/ManageEmployee";
 import ConfirmModal from "../../components/common/ConfirmModal";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import eventBus from "../../services/eventBus";
 import { newlineChars } from "pdf-lib";
 import GlobalModel from "../../components/common/GlobalModel";
 import usePagination from "../../hooks/usePagination";
-import { setProjectId } from "../../slices/localVariablesSlice";
 
 const EmployeeList = () => {
   const selectedProjectId = useSelector(
     (store) => store.localVariables.projectId
   );
-  const { projectNames, loading: projectLoading, fetchData } = useProjectName();
-
-  const dispatch = useDispatch();
 
   const [showInactive, setShowInactive] = useState(false);
   const [showAllEmployees, setShowAllEmployees] = useState(false);
@@ -57,7 +45,7 @@ const EmployeeList = () => {
 
   const [employeeList, setEmployeeList] = useState([]);
   const [ modelConfig, setModelConfig ] = useState();
-  const [EmpForManageRole, setEmpForManageRole] = useState(null);
+  const [EmpForManageRole,setEmpForManageRole] = useState(null)
   // const [currentPage, setCurrentPage] = useState(1);
   // const [itemsPerPage] = useState(ITEMS_PER_PAGE);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@@ -68,22 +56,19 @@ const EmployeeList = () => {
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
   const [ employeeLodaing, setemployeeLodaing ] = useState( false );
-  const ViewTeamMember = useHasUserPermission(VIEW_TEAM_MEMBERS);
+  const {
-  const ViewAllEmployee = useHasUserPermission(VIEW_ALL_EMPLOYEES);
+  mutate: suspendEmployee,
-  const { mutate: suspendEmployee, isPending: empLodaing } = useSuspendEmployee(
+  isPending: empLodaing
-    {
+} = useSuspendEmployee({
   setIsDeleteModalOpen,
-      setemployeeLodaing,
+  setemployeeLodaing
-    }
+} );
-  );
+ 
+
 
-  useEffect(() => {
-    if (selectedProjectId === null) {
-      dispatch(setProjectId(projectNames[0]?.id));
-    }
-  }, [selectedProjectId]);
   const navigate = useNavigate();
 
+  
   const applySearchFilter = (data, text) => {
   if (!text) {
     return data;
@@ -114,23 +99,88 @@ const EmployeeList = () => {
   });
 };
 
+
   const handleSearch = (e) => {
     const value = e.target.value;
     setSearchText(value);
     setCurrentPage(1);
   };
+useEffect(() => {
+  const filtered = applySearchFilter(employeeList, searchText);
+  setFilteredData(filtered);
+}, [searchText, employeeList]);
+
 
    const displayData = searchText ? filteredData : employeeList;
-  const { currentPage, totalPages, currentItems, paginate, setCurrentPage } =
+   const { currentPage, totalPages, currentItems, paginate,setCurrentPage } = usePagination(
-    usePagination(displayData, ITEMS_PER_PAGE);
+            displayData,
+           ITEMS_PER_PAGE
+          );
    const openModal = () => {
     setIsCreateModalOpen(true);
    };
 
+  // const closeModal = () => {
+  //   setIsCreateModalOpen(false);
+
+  //   const modalElement = document.getElementById("managerole-modal");
+  //   if (modalElement && !showModal) {
+  //     modalElement.classList.remove("show");
+  //     modalElement.style.display = "none";
+  //     document.body.classList.remove("modal-open");
+  //     document.querySelector(".modal-backdrop")?.remove();
+  //   }
+  //   setShowModal(false);
+  //   clearCacheKey("employeeProfile");
+  //   recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
+  // };
+  // const handleShow = () => setShowModal(true);
+  // const handleClose = () => setShowModal( false );
+  
+useEffect(() => {
+  if (!loading && Array.isArray(employees)) {
+    const sorted = [...employees].sort((a, b) => {
+      const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""}`.toLowerCase();
+      const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""}`.toLowerCase();
+      return nameA?.localeCompare(nameB);
+    });
+
+    setEmployeeList((prevList) => {
+      const prevJSON = JSON.stringify(prevList);
+      const nextJSON = JSON.stringify(sorted);
+      if (prevJSON !== nextJSON) {
+        return sorted;
+      }
+      return prevList;
+    });
+
+    setFilteredData((prev) => {
+      const prevJSON = JSON.stringify(prev);
+      const nextJSON = JSON.stringify(sorted);
+      if (prevJSON !== nextJSON) {
+        return sorted;
+      }
+      return prev;
+    });
+
+    // set currentPage to 1 only if needed
+    setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
+  }
+}, [loading, employees, selectedProjectId, showAllEmployees]);
+
+
+
+
   const handleConfigData = (config) => {
     setModelConfig(config);
   };
 
+  // useEffect(() => {
+  //   if (modelConfig !== null) {
+  //     openModal();
+  //   }
+  // }, [modelConfig, isCreateModalOpen]);
+
   const tableRef = useRef(null);
   const handleExport = (type) => {
     if (!currentItems || currentItems.length === 0) return;
@@ -155,16 +205,14 @@ const EmployeeList = () => {
 
   const handleToggle = (e) => {
     setShowInactive(e.target.checked);
-    recallEmployeeData(
+    recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
-      e.target.checked,
-      showAllEmployees ? null : selectedProjectId
-    ); // Use selectedProjectId here
   };
 
 const handleAllEmployeesToggle = (e) => {
   const isChecked = e.target.checked;
   setShowInactive(false);
   setShowAllEmployees(isChecked);
+
 };
 
   const handleEmployeeModel = (id) => {
@@ -176,43 +224,6 @@ const EmployeeList = () => {
     setSelectedEmpFordelete(employee);
     setIsDeleteModalOpen(true);
   };
-  useEffect(() => {
-    const filtered = applySearchFilter(employeeList, searchText);
-    setFilteredData(filtered);
-  }, [searchText, employeeList]);
-  useEffect(() => {
-    if (!loading && Array.isArray(employees)) {
-      const sorted = [...employees].sort((a, b) => {
-        const nameA = `${a.firstName || ""}${a.middleName || ""}${
-          a.lastName || ""
-        }`.toLowerCase();
-        const nameB = `${b.firstName || ""}${b.middleName || ""}${
-          b.lastName || ""
-        }`.toLowerCase();
-        return nameA?.localeCompare(nameB);
-      });
-
-      setEmployeeList((prevList) => {
-        const prevJSON = JSON.stringify(prevList);
-        const nextJSON = JSON.stringify(sorted);
-        if (prevJSON !== nextJSON) {
-          return sorted;
-        }
-        return prevList;
-      });
-
-      setFilteredData((prev) => {
-        const prevJSON = JSON.stringify(prev);
-        const nextJSON = JSON.stringify(sorted);
-        if (prevJSON !== nextJSON) {
-          return sorted;
-        }
-        return prev;
-      });
-
-      setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
-    }
-  }, [loading, employees, selectedProjectId, showAllEmployees]);
 
   useEffect(() => {
     if (!showAllEmployees) {
@@ -224,40 +235,27 @@ const EmployeeList = () => {
     (msg) => {
       if(employees.some((item) => item.id == msg.employeeId)){
         setEmployeeList([]);
-        recallEmployeeData(
+        recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
-          showInactive,
-          showAllEmployees ? null : selectedProjectId
-        ); // Use selectedProjectId here
       }
-    },
+    },[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
-    [employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
   );
 
   useEffect(() => {
     eventBus.on("employee",handler);
-    return () => eventBus.off("employee", handler);
+    return () => eventBus.off("employee",handler)
-  }, [handler]);
+  },[handler])
+
 
   return (
     <>
       {EmpForManageRole && (
-        <GlobalModel
+        <GlobalModel isOpen={EmpForManageRole} closeModal={() => setEmpForManageRole( null )}>
-          isOpen={EmpForManageRole}
+            <ManageEmp employeeId={EmpForManageRole} onClosed={()=>setEmpForManageRole(null)} />
-          closeModal={() => setEmpForManageRole(null)}
-        >
-          <ManageEmp
-            employeeId={EmpForManageRole}
-            onClosed={() => setEmpForManageRole(null)}
-          />
       </GlobalModel>
       )}
       
       {showModal && (
-        <GlobalModel
+        <GlobalModel isOpen={showModal} size="lg" closeModal={()=>setShowModal(false)}>
-          isOpen={showModal}
-          size="lg"
-          closeModal={() => setShowModal(false)}
-        >
            <ManageEmployee
               employeeId={selectedEmployeeId}
             onClosed={() => setShowModal( false )}
@@ -298,11 +296,10 @@ const EmployeeList = () => {
             { label: "Employees", link: null },
           ]}
         ></Breadcrumb>
-
-        {ViewTeamMember ? (
         <div className="row">
           <div className="card ">
             <div className="card-datatable table-responsive pt-2">
+
               <div
                 id="DataTables_Table_0_wrapper"
                 className="dataTables_wrapper dt-bootstrap5 no-footer"
@@ -312,7 +309,6 @@ const EmployeeList = () => {
                   {/* Switches: All Employees + Inactive */}
                   <div className="d-flex flex-wrap align-items-center gap-3">
                     {/* All Employees Switch */}
-                      {ViewAllEmployee && (
                     <div className="form-check form-switch text-start">
                       <input
                         type="checkbox"
@@ -322,14 +318,10 @@ const EmployeeList = () => {
                         checked={showAllEmployees}
                         onChange={handleAllEmployeesToggle}
                       />
-                          <label
+                      <label className="form-check-label ms-0" htmlFor="allEmployeesCheckbox">
-                            className="form-check-label ms-0"
-                            htmlFor="allEmployeesCheckbox"
-                          >
                         All Employees
                       </label>
                     </div>
-                      )}
 
                     {/* Show Inactive Employees Switch */}
                     {showAllEmployees && (
@@ -342,14 +334,12 @@ const EmployeeList = () => {
                           checked={showInactive}
                           onChange={handleToggle}
                         />
-                          <label
+                        <label className="form-check-label ms-0" htmlFor="inactiveEmployeesCheckbox">
-                            className="form-check-label ms-0"
-                            htmlFor="inactiveEmployeesCheckbox"
-                          >
                           Show Inactive Employees
                         </label>
                       </div>
                     )}
+
                   </div>
 
                   {/* Right side: Search + Export + Add Employee */}
@@ -381,38 +371,22 @@ const EmployeeList = () => {
                       </button>
                       <ul className="dropdown-menu">
                         <li>
-                            <a
+                          <a className="dropdown-item" href="#" onClick={() => handleExport("print")}>
-                              className="dropdown-item"
-                              href="#"
-                              onClick={() => handleExport("print")}
-                            >
                             <i className="bx bx-printer me-1"></i> Print
                           </a>
                         </li>
                         <li>
-                            <a
+                          <a className="dropdown-item" href="#" onClick={() => handleExport("csv")}>
-                              className="dropdown-item"
-                              href="#"
-                              onClick={() => handleExport("csv")}
-                            >
                             <i className="bx bx-file me-1"></i> CSV
                           </a>
                         </li>
                         <li>
-                            <a
+                          <a className="dropdown-item" href="#" onClick={() => handleExport("excel")}>
-                              className="dropdown-item"
-                              href="#"
-                              onClick={() => handleExport("excel")}
-                            >
                             <i className="bx bxs-file-export me-1"></i> Excel
                           </a>
                         </li>
                         <li>
-                            <a
+                          <a className="dropdown-item" href="#" onClick={() => handleExport("pdf")}>
-                              className="dropdown-item"
-                              href="#"
-                              onClick={() => handleExport("pdf")}
-                            >
                             <i className="bx bxs-file-pdf me-1"></i> PDF
                           </a>
                         </li>
@@ -427,9 +401,7 @@ const EmployeeList = () => {
                         onClick={() => handleEmployeeModel(null)}
                       >
                         <i className="bx bx-plus-circle me-2"></i>
-                          <span className="d-none d-md-inline-block">
+                        <span className="d-none d-md-inline-block">Add New Employee</span>
-                            Add New Employee
-                          </span>
                       </button>
                     )}
                   </div>
@@ -510,8 +482,7 @@ const EmployeeList = () => {
                         Status
                       </th>
                       <th
-                          className={`sorting_disabled  ${
+                        className={`sorting_disabled  ${!Manage_Employee && "d-none"
-                            !Manage_Employee && "d-none"
                           }`}
                         rowSpan="1"
                         colSpan="1"
@@ -531,10 +502,7 @@ const EmployeeList = () => {
                       </tr>
                     )}
                     {/* Conditional messages for no data or no search results */}
-                      {!loading &&
+                    {!loading && displayData?.length === 0 && searchText && !showAllEmployees ? (
-                      displayData?.length === 0 &&
-                      searchText &&
-                      !showAllEmployees ? (
                       <tr>
                         <td colSpan={8}>
                           <small className="muted">
@@ -543,9 +511,7 @@ const EmployeeList = () => {
                         </td>
                       </tr>
                     ) : null}
-                      {!loading &&
+                    {!loading && displayData?.length === 0 && (!searchText || showAllEmployees) ? (
-                      displayData?.length === 0 &&
-                      (!searchText || showAllEmployees) ? (
                       <tr>
                         <td
                           colSpan={8}
@@ -557,9 +523,7 @@ const EmployeeList = () => {
                     ) : null}
 
                     {/* Render current items */}
-                      {currentItems &&
+                    {currentItems && !loading && currentItems.map((item) => (
-                        !loading &&
-                        currentItems.map((item) => (
                       <tr className="odd" key={item.id}>
                         <td className="sorting_1" colSpan={2}>
                           <div className="d-flex justify-content-start align-items-center user-name">
@@ -645,8 +609,7 @@ const EmployeeList = () => {
                                     }
                                     className="dropdown-item py-1"
                                   >
-                                      <i className="bx bx-detail bx-sm"></i>{" "}
+                                    <i className="bx bx-detail bx-sm"></i> View
-                                      View
                                   </button>
                                   <button
                                     className="dropdown-item py-1"
@@ -697,9 +660,7 @@ const EmployeeList = () => {
                   <nav aria-label="Page">
                     <ul className="pagination pagination-sm justify-content-end py-1">
                       <li
-                          className={`page-item ${
+                        className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
-                            currentPage === 1 ? "disabled" : ""
-                          }`}
                       >
                         <button
                           className="page-link btn-xs"
@@ -712,8 +673,7 @@ const EmployeeList = () => {
                       {[...Array(totalPages)]?.map((_, index) => (
                         <li
                           key={index}
-                            className={`page-item ${
+                          className={`page-item ${currentPage === index + 1 ? "active" : ""
-                              currentPage === index + 1 ? "active" : ""
                             }`}
                         >
                           <button
@@ -726,8 +686,7 @@ const EmployeeList = () => {
                       ))}
 
                       <li
-                          className={`page-item ${
+                        className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                            currentPage === totalPages ? "disabled" : ""
                           }`}
                       >
                         <button
@@ -744,17 +703,6 @@ const EmployeeList = () => {
             </div>
           </div>
         </div>
-        ) : (
-          <div className="card">
-            <div className="text-center">
-              <i className="fa-solid fa-triangle-exclamation fs-5"></i>
-              <p>
-                Access Denied: You don't have permission to perform this action.
-                !
-              </p>
-            </div>
-          </div>
-        )}
       </div>
     </>
   );

src/pages/project/ProjectDetails.jsx

@@ -1,9 +1,11 @@
-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";
 import ProjectOverview from "../../components/Project/ProjectOverview";
 import AboutProject from "../../components/Project/AboutProject";
 import ProjectNav from "../../components/Project/ProjectNav";
+import ProjectBanner from "../../components/Project/ProjectBanner";
 import Teams from "../../components/Project/Teams";
 import ProjectInfra from "../../components/Project/ProjectInfra";
 import Loader from "../../components/common/Loader";
@@ -14,115 +16,171 @@ import {
   clearCacheKey,
   getCachedData,
 } from "../../slices/apiDataManager";
+import ProjectRepository from "../../repositories/ProjectRepository";
+import { ActivityeRepository } from "../../repositories/MastersRepository";
 import "./ProjectDetails.css";
 import {
+  useEmployeesByProjectAllocated,
   useProjectDetails,
 } from "../../hooks/useProjects";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../slices/localVariablesSlice";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
 import Directory from "../Directory/Directory";
 import eventBus from "../../services/eventBus";
 import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
 
 const ProjectDetails = () => {
-
+  let { projectId } = useParams();
-
-  const projectId = useSelector((store) => store.localVariables.projectId);
-
   const {
     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");
 
-
-
-  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 renderContent = () => {
+  const handleDataChange = (data) => {
-    if (projectLoading || !projects_Details) return <Loader />;
+    fetchData();
+  };
 
+  const renderContent = () => {
+    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">
+            <div className="col-xl-4 col-lg-5 col-md-5 mt-5">
               <AboutProject ></AboutProject>
+            </div>
+            <div className="col-xl-4 col-lg-5 col-md-5  mt-5">
               <ProjectOverview project={projectId} />
             </div>
-              <div className="col-lg-8 col-md-7 mt-5">
-                <ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
           </div>
-            </div>
-          </>
         );
-
+      }
-      case "teams":
+      case "teams": {
         return (
           <div className="row">
-            <div className="col-lg-12">
+            <div className="col-lg-12 col-xl-12">
-              <Teams />
+              {/* Teams */}
+              <Teams ></Teams>
+              {/* Teams */}
             </div>
           </div>
         );
-
+        break;
-      case "infra":
+      }
+      case "infra": {
         return (
-          <ProjectInfra data={projects_Details} onDataChange={refetch} />
+          <ProjectInfra
+            data={projects_Details}
+            onDataChange={handleDataChange}
+          ></ProjectInfra>
         );
-
+        break;
-      case "workplan":
+      }
+      case "workplan": {
         return (
-          <WorkPlan data={projects_Details} onDataChange={refetch} />
+          <WorkPlan
+            data={projects_Details}
+            onDataChange={handleDataChange}
+          ></WorkPlan>
         );
-
+        break;
-      case "directory":
+      }
+      case "directory": {
         return (
-          <div className="row mt-2">
+          <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={[
             { label: "Home", link: "/dashboard" },
             { label: "Projects", link: "/projects" },
-          { label: projects_Details?.name || "Project", link: null },
+            { label: `${project?.name ? project?.name : ""}`, link: null },
           ]}
-      />
+        ></Breadcrumb>
 
         <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>
+    </>
   );
 };
 

src/pages/project/ProjectList.jsx

@@ -5,6 +5,11 @@ import Breadcrumb from "../../components/common/Breadcrumb";
 import ProjectRepository from "../../repositories/ProjectRepository";
 import { useProjects, useCreateProject } from "../../hooks/useProjects";
 import showToast from "../../services/toastService";
+// import {
+//   getCachedData,
+//   cacheData,
+//   clearCacheKey,
+// } from "../../slices/apiDataManager";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useProfile } from "../../hooks/useProfile";
 import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
@@ -15,15 +20,11 @@ import { defaultCheckBoxAppearanceProvider } from "pdf-lib";
 import { useMutation } from "@tanstack/react-query";
 import usePagination from "../../hooks/usePagination";
 import GlobalModel from "../../components/common/GlobalModel";
-import { useDispatch, useSelector } from "react-redux";
-import { setProjectId } from "../../slices/localVariablesSlice";
 
 const ProjectList = () => {
   const { profile: loginUser } = useProfile();
   const [listView, setListView] = useState(false);
   const [showModal, setShowModal] = useState(false);
-  const selectedProject = useSelector((store)=>store.localVariables.projectId)
-  const dispatch = useDispatch()
 
   const { projects, loading, error, refetch } = useProjects();
   const [projectList, setProjectList] = useState([]);
@@ -74,10 +75,6 @@ const ProjectList = () => {
   };
 
   useEffect(() => {
-   if(selectedProject == null){
-       dispatch(setProjectId(projects[0]?.id));
-   }
-
     if (!loading && projects) {
       sortingProject(projects);
     }

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>

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 /> },

src/slices/localVariablesSlice.jsx

@@ -5,7 +5,7 @@ const localVariablesSlice = createSlice({
   initialState: {
     selectedMaster:"Application Role",
     regularizationCount:0,
-    projectId: null,
+    projectId: "",
     reload:false
   
   },

src/utils/constants.jsx

@@ -11,11 +11,6 @@ export const VIEW_PROJECTS = "6ea44136-987e-44ba-9e5d-1cf8f5837ebc"
 
 export const MANAGE_EMPLOYEES = "a97d366a-c2bb-448d-be93-402bd2324566"
 
-export const VIEW_ALL_EMPLOYEES = "60611762-7f8a-4fb5-b53f-b1139918796b"
-
-export const VIEW_TEAM_MEMBERS = "b82d2b7e-0d52-45f3-997b-c008ea460e7f"
-
-
 export const MANAGE_PROJECT_INFRA = "cf2825ad-453b-46aa-91d9-27c124d63373"
 
 export const VIEW_PROJECT_INFRA = "8d7cc6e3-9147-41f7-aaa7-fa507e450bd4"
@@ -29,8 +24,6 @@ export const INFRASTRUCTURE = "9666de86-d7c7-4d3d-acaa-fcd6d6b81f3c";
 
 export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
 
-export const APPROVE_TASK = "db4e40c5-2ba9-4b6d-b8a6-a16a250ff99c"
-
 export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
 
 export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"

src/utils/dateUtils.jsx

@@ -70,12 +70,3 @@ export  const formatNumber = (num) => {
 export const formatUTCToLocalTime = (datetime) =>{
   return moment.utc(datetime).local().format("MMMM DD, YYYY [at] hh:mm A");
 }
-
-export  const getCompletionPercentage = (completedWork, plannedWork)=> {
-  if (!plannedWork || plannedWork === 0) return 0;
-
-  const percentage = (completedWork / plannedWork) * 100;
-  const clamped = Math.min(Math.max(percentage, 0), 100);
-
-  return clamped.toFixed(2); 
-}