- Change Loader style on Project Details page. Earlier, it was showing multiple glowing circles of various colors. Now only two will be displayed

- Changed Navigation Style for project modules. Earlier, we were using pills; now, tabs are used for better visualization
- Changed Navigation Style for Employee Details Page

src/components/Employee/EmployeeNav.jsx

@@ -2,9 +2,8 @@ import React from "react";
 
 const EmployeeNav = ({ onPillClick, activePill }) => {
   return (
-    <div className="col-md-12">
+    <div className="nav-align-top ">
-      <div className="nav-align-top">
+      <ul className="nav nav-tabs">
-        <ul className="nav nav-pills flex-column flex-sm-row mb-6">
         <li className="nav-item">
           <a
             className={`nav-link ${activePill === "account" ? "active" : ""}`}
@@ -19,7 +18,9 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
         </li>
         <li className="nav-item">
           <a
-              className={`nav-link ${activePill === "attendance" ? "active" : ""}`}
+            className={`nav-link ${
+              activePill === "attendance" ? "active" : ""
+            }`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); // Prevent page reload
@@ -31,7 +32,9 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
         </li>
         <li className="nav-item">
           <a
-              className={`nav-link ${activePill === "activities" ? "active" : ""}`}
+            className={`nav-link ${
+              activePill === "activities" ? "active" : ""
+            }`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); // Prevent page reload
@@ -43,7 +46,6 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
         </li>
       </ul>
     </div>
-    </div>
   );
 };
 

src/components/Project/Infrastructure/WorkItem.jsx

@@ -87,7 +87,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
                   NewWorkItem?.workItem?.completedWork ||
                     workItem?.completedWork
                 ),
-                height: "10px",
+                height: "5px",
               }}
               aria-valuenow={
                 hasWorkItem

src/components/Project/ProjectNav.jsx

@@ -1,16 +1,14 @@
 import React from "react";
-import {hasUserPermission} from "../../utils/authUtils";
+import { hasUserPermission } from "../../utils/authUtils";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { VIEW_PROJECT_INFRA} from "../../utils/constants";
+import { VIEW_PROJECT_INFRA } from "../../utils/constants";
 
-const ProjectNav = ( {onPillClick, activePill} ) =>
+const ProjectNav = ({ onPillClick, activePill }) => {
-{
+  const HasViewInfraStructure = useHasUserPermission(VIEW_PROJECT_INFRA);
-  const HasViewInfraStructure = useHasUserPermission( VIEW_PROJECT_INFRA )
 
   return (
-    <div className="col-md-12">
     <div className="nav-align-top">
-        <ul className="nav nav-pills flex-column flex-sm-row mb-6">
+      <ul className="nav nav-tabs ">
         <li className="nav-item">
           <a
             className={`nav-link ${activePill === "profile" ? "active" : ""}`}
@@ -35,7 +33,7 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
             <i className="bx bx-group bx-sm me-1_5"></i> Teams
           </a>
         </li>
-          <li className={`nav-item ${!HasViewInfraStructure && 'd-none'} `}>
+        <li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
           <a
             className={`nav-link ${activePill === "infra" ? "active" : ""}`}
             href="#"
@@ -77,9 +75,7 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
         </li>
         <li className="nav-item">
           <a
-              className={`nav-link ${
+            className={`nav-link ${activePill === "directory" ? "active" : ""}`}
-                activePill === "directory" ? "active" : ""
-              }`}
             href="#"
             onClick={(e) => {
               e.preventDefault(); // Prevent page reload
@@ -91,7 +87,6 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
         </li>
       </ul>
     </div>
-    </div>
   );
 };
 

src/components/common/Loader.jsx

@@ -3,12 +3,13 @@ import React from "react";
 const Loader = () => {
   return (
     <div className="demo-inline-spacing">
-      <div className="spinner-grow" role="status">
-        <span className="visually-hidden">Loading...</span>
-      </div>
       <div className="spinner-grow text-primary" role="status">
         <span className="visually-hidden">Loading...</span>
       </div>
+      {/* <div className="spinner-grow" role="status">
+        <span className="visually-hidden">Loading...</span>
+      </div>
+    
       <div className="spinner-grow text-secondary" role="status">
         <span className="visually-hidden">Loading...</span>
       </div>
@@ -23,13 +24,13 @@ const Loader = () => {
       </div>
       <div className="spinner-grow text-info" role="status">
         <span className="visually-hidden">Loading...</span>
-      </div>
+      </div> */}
       <div className="spinner-grow text-light" role="status">
         <span className="visually-hidden">Loading...</span>
       </div>
-      <div className="spinner-grow text-dark" role="status">
+      {/* <div className="spinner-grow text-dark" role="status">
         <span className="visually-hidden">Loading...</span>
-      </div>
+      </div> */}
     </div>
   );
 };

src/pages/project/ProjectDetails.jsx

@@ -15,52 +15,51 @@ import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import ProjectRepository from "../../repositories/ProjectRepository";
 import { ActivityeRepository } from "../../repositories/MastersRepository";
 import "./ProjectDetails.css";
-import {useEmployeesByProjectAllocated, useProjectDetails} from "../../hooks/useProjects";
+import {
-import {useDispatch} from "react-redux";
+  useEmployeesByProjectAllocated,
-import {setProjectId} from "../../slices/localVariablesSlice";
+  useProjectDetails,
+} from "../../hooks/useProjects";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../slices/localVariablesSlice";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
 
-
 const ProjectDetails = () => {
-  let {projectId} = useParams();
+  let { projectId } = useParams();
-  const {projects_Details,loading:projectLoading,error:ProjectError} = useProjectDetails(projectId)
+  const {
-  const dispatch = useDispatch()
+    projects_Details,
+    loading: projectLoading,
+    error: ProjectError,
+  } = useProjectDetails(projectId);
+  const dispatch = useDispatch();
   const [project, setProject] = useState(null);
-  const [ projectDetails, setProjectDetails ] = useState( null );
+  const [projectDetails, setProjectDetails] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [ error, setError ] = useState( "" );
+  const [error, setError] = useState("");
-  
-
 
   const fetchData = async () => {
-    
     const project_cache = getCachedData("projectInfo");
     if (!project_cache || project_cache?.projectId !== projectId) {
       ProjectRepository.getProjectByprojectId(projectId)
-          .then( ( response ) =>
+        .then((response) => {
-          {
+          setProjectDetails(response.data);
-            setProjectDetails( response.data );
+          setProject(response.data);
-            setProject( response.data );
+          cacheData("projectInfo", { projectId, data: response.data });
-            cacheData("projectInfo", {projectId,data: response.data} );
+          setLoading(false);
-            setLoading(false)
         })
         .catch((error) => {
           console.error(error);
-            setError( "Failed to fetch data." );
+          setError("Failed to fetch data.");
-            setLoading(false)
+          setLoading(false);
         });
     } else {
-        setProjectDetails( project_cache.data );
+      setProjectDetails(project_cache.data);
-        setProject( project_cache.data );
+      setProject(project_cache.data);
-        setLoading(false)
+      setLoading(false);
     }
-    
   };
 
-
   const [activePill, setActivePill] = useState("profile");
 
- 
   const handlePillClick = (pillKey) => {
     setActivePill(pillKey);
   };
@@ -69,19 +68,18 @@ const ProjectDetails = () => {
     fetchData();
   };
 
- 
   const renderContent = () => {
     if (projectLoading) return <Loader></Loader>;
     switch (activePill) {
       case "profile": {
         return (
           <div className="row">
-            <div className="col-xl-4 col-lg-5 col-md-5">
+            <div className="col-xl-4 col-lg-5 col-md-5 mt-5">
               {/* About User */}
               <AboutProject data={projectDetails}></AboutProject>
               {/* About User */}
             </div>
-            <div className="col-xl-4 col-lg-5 col-md-5">
+            <div className="col-xl-4 col-lg-5 col-md-5  mt-5">
               {/* Profile Overview */}
               <ProjectOverview project={projectId} />
               {/* Profile Overview */}
@@ -135,10 +133,10 @@ const ProjectDetails = () => {
   };
 
   useEffect(() => {
-    dispatch(setProjectId(projectId))
+    dispatch(setProjectId(projectId));
-    setProject( projects_Details )
+    setProject(projects_Details);
-    setProjectDetails(projects_Details)
+    setProjectDetails(projects_Details);
-  }, [projects_Details,projectId]);
+  }, [projects_Details, projectId]);
 
   return (
     <>
@@ -154,16 +152,18 @@ const ProjectDetails = () => {
 
         <div className="row">
           {projectLoading && <p>Loading....</p>}
-          {(!projectLoading && project) && <ProjectBanner project_data={project}  ></ProjectBanner>}
+          {!projectLoading && project && (
-        </div>
+            <ProjectBanner project_data={project}></ProjectBanner>
+          )}
 
-        <div className="row">
           <ProjectNav
             onPillClick={handlePillClick}
             activePill={activePill}
           ></ProjectNav>
         </div>
 
+        <div className="row"></div>
+
         {renderContent()}
       </div>
     </>