- 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,47 +2,49 @@ import React from "react";
 
 const EmployeeNav = ({ onPillClick, activePill }) => {
   return (
-    <div className="col-md-12">
-      <div className="nav-align-top">
-        <ul className="nav nav-pills flex-column flex-sm-row mb-6">
-          <li className="nav-item">
-            <a
-              className={`nav-link ${activePill === "account" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("account");
-              }}
-            >
-              <i className="bx bx-user bx-sm me-1_5"></i> Account
-            </a>
-          </li>
-          <li className="nav-item">
-            <a
-              className={`nav-link ${activePill === "attendance" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("attendance");
-              }}
-            >
-              <i className="bx bx-group bx-sm me-1_5"></i> Attendances
-            </a>
-          </li>
-          <li className="nav-item">
-            <a
-              className={`nav-link ${activePill === "activities" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("activities");
-              }}
-            >
-              <i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
-            </a>
-          </li>
-        </ul>
-      </div>
+    <div className="nav-align-top ">
+      <ul className="nav nav-tabs">
+        <li className="nav-item">
+          <a
+            className={`nav-link ${activePill === "account" ? "active" : ""}`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("account");
+            }}
+          >
+            <i className="bx bx-user bx-sm me-1_5"></i> Account
+          </a>
+        </li>
+        <li className="nav-item">
+          <a
+            className={`nav-link ${
+              activePill === "attendance" ? "active" : ""
+            }`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("attendance");
+            }}
+          >
+            <i className="bx bx-group bx-sm me-1_5"></i> Attendances
+          </a>
+        </li>
+        <li className="nav-item">
+          <a
+            className={`nav-link ${
+              activePill === "activities" ? "active" : ""
+            }`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("activities");
+            }}
+          >
+            <i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
+          </a>
+        </li>
+      </ul>
     </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,53 +1,51 @@
 import React from "react";
-import {hasUserPermission} from "../../utils/authUtils";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
-import { VIEW_PROJECT_INFRA} from "../../utils/constants";
+import { hasUserPermission } from "../../utils/authUtils";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { VIEW_PROJECT_INFRA } from "../../utils/constants";
+
+const ProjectNav = ({ onPillClick, activePill }) => {
+  const HasViewInfraStructure = useHasUserPermission(VIEW_PROJECT_INFRA);
 
-const ProjectNav = ( {onPillClick, activePill} ) =>
-{
-  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">
-          <li className="nav-item">
-            <a
-              className={`nav-link ${activePill === "profile" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("profile");
-              }}
-            >
-              <i className="bx bx-user bx-sm me-1_5"></i> Profile
-            </a>
-          </li>
-          <li className="nav-item">
-            <a
-              className={`nav-link ${activePill === "teams" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("teams");
-              }}
-            >
-              <i className="bx bx-group bx-sm me-1_5"></i> Teams
-            </a>
-          </li>
-          <li className={`nav-item ${!HasViewInfraStructure && 'd-none'} `}>
-            <a
-              className={`nav-link ${activePill === "infra" ? "active" : ""}`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("infra");
-              }}
-            >
-              <i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure
-            </a>
-          </li>
-          {/* <li className="nav-item">
+    <div className="nav-align-top">
+      <ul className="nav nav-tabs ">
+        <li className="nav-item">
+          <a
+            className={`nav-link ${activePill === "profile" ? "active" : ""}`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("profile");
+            }}
+          >
+            <i className="bx bx-user bx-sm me-1_5"></i> Profile
+          </a>
+        </li>
+        <li className="nav-item">
+          <a
+            className={`nav-link ${activePill === "teams" ? "active" : ""}`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("teams");
+            }}
+          >
+            <i className="bx bx-group bx-sm me-1_5"></i> Teams
+          </a>
+        </li>
+        <li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
+          <a
+            className={`nav-link ${activePill === "infra" ? "active" : ""}`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("infra");
+            }}
+          >
+            <i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure
+          </a>
+        </li>
+        {/* <li className="nav-item">
             <a
               className={`nav-link ${
                 activePill === "workplan" ? "active" : ""
@@ -61,36 +59,33 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
               <i className="bx bx-link bx-sm me-1_5"></i> Work Plan
             </a>
           </li> */}
-          <li className="nav-item">
-            <a
-              className={`nav-link ${
-                activePill === "imagegallary" ? "active" : ""
-              }`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("imagegallary");
-              }}
-            >
-              <i className="bx bx-link bx-sm me-1_5"></i> Image Gallary
-            </a>
-          </li>
-          <li className="nav-item">
-            <a
-              className={`nav-link ${
-                activePill === "directory" ? "active" : ""
-              }`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("directory");
-              }}
-            >
-              <i className="bx bx-link bx-sm me-1_5"></i> Directory
-            </a>
-          </li>
-        </ul>
-      </div>
+        <li className="nav-item">
+          <a
+            className={`nav-link ${
+              activePill === "imagegallary" ? "active" : ""
+            }`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("imagegallary");
+            }}
+          >
+            <i className="bx bx-link bx-sm me-1_5"></i> Image Gallary
+          </a>
+        </li>
+        <li className="nav-item">
+          <a
+            className={`nav-link ${activePill === "directory" ? "active" : ""}`}
+            href="#"
+            onClick={(e) => {
+              e.preventDefault(); // Prevent page reload
+              onPillClick("directory");
+            }}
+          >
+            <i className="bx bx-link bx-sm me-1_5"></i> Directory
+          </a>
+        </li>
+      </ul>
     </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 {useDispatch} from "react-redux";
-import {setProjectId} from "../../slices/localVariablesSlice";
+import {
+  useEmployeesByProjectAllocated,
+  useProjectDetails,
+} from "../../hooks/useProjects";
+import { useDispatch } from "react-redux";
+import { setProjectId } from "../../slices/localVariablesSlice";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
 
-
 const ProjectDetails = () => {
-  let {projectId} = useParams();
-  const {projects_Details,loading:projectLoading,error:ProjectError} = useProjectDetails(projectId)
-  const dispatch = useDispatch()
+  let { projectId } = useParams();
+  const {
+    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 ) =>
-          {
-            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 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 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 */}
@@ -128,17 +126,17 @@ const ProjectDetails = () => {
           </div>
         );
       }
-    
+
       default:
-        return  <ComingSoonPage></ComingSoonPage>;
+        return <ComingSoonPage></ComingSoonPage>;
     }
   };
 
   useEffect(() => {
-    dispatch(setProjectId(projectId))
-    setProject( projects_Details )
-    setProjectDetails(projects_Details)
-  }, [projects_Details,projectId]);
+    dispatch(setProjectId(projectId));
+    setProject(projects_Details);
+    setProjectDetails(projects_Details);
+  }, [projects_Details, projectId]);
 
   return (
     <>
@@ -154,16 +152,18 @@ const ProjectDetails = () => {
 
         <div className="row">
           {projectLoading && <p>Loading....</p>}
-          {(!projectLoading && project) && <ProjectBanner project_data={project}  ></ProjectBanner>}
-        </div>
-      
-        <div className="row">
+          {!projectLoading && project && (
+            <ProjectBanner project_data={project}></ProjectBanner>
+          )}
+
           <ProjectNav
             onPillClick={handlePillClick}
             activePill={activePill}
           ></ProjectNav>
         </div>
 
+        <div className="row"></div>
+
         {renderContent()}
       </div>
     </>