admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Vikas Nale 2025-04-16 16:00:48 +05:30 committed by Pramod Mahajan
parent aeedfe23da
commit c93919602e
5 changed files with 171 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/Employee/EmployeeNav.jsx
View File

@ -2,47 +2,49 @@ import React from "react";
const EmployeeNav = ({ onPillClick, activePill }) => { const EmployeeNav = ({ onPillClick, activePill }) => {
return ( 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">
<li className="nav-item"> <a
<a className={`nav-link ${activePill === "account" ? "active" : ""}`}
className={`nav-link ${activePill === "account" ? "active" : ""}`} href="#"
href="#" onClick={(e) => {
onClick={(e) => { e.preventDefault(); // Prevent page reload
e.preventDefault(); // Prevent page reload onPillClick("account");
onPillClick("account"); }}
}} >
> <i className="bx bx-user bx-sm me-1_5"></i> Account
<i className="bx bx-user bx-sm me-1_5"></i> Account </a>
</a> </li>
</li> <li className="nav-item">
<li className="nav-item"> <a
<a className={`nav-link ${
className={`nav-link ${activePill === "attendance" ? "active" : ""}`} activePill === "attendance" ? "active" : ""
href="#" }`}
onClick={(e) => { href="#"
e.preventDefault(); // Prevent page reload onClick={(e) => {
onPillClick("attendance"); e.preventDefault(); // Prevent page reload
}} onPillClick("attendance");
> }}
<i className="bx bx-group bx-sm me-1_5"></i> Attendances >
</a> <i className="bx bx-group bx-sm me-1_5"></i> Attendances
</li> </a>
<li className="nav-item"> </li>
<a <li className="nav-item">
className={`nav-link ${activePill === "activities" ? "active" : ""}`} <a
href="#" className={`nav-link ${
onClick={(e) => { activePill === "activities" ? "active" : ""
e.preventDefault(); // Prevent page reload }`}
onPillClick("activities"); href="#"
}} onClick={(e) => {
> e.preventDefault(); // Prevent page reload
<i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities onPillClick("activities");
</a> }}
</li> >
</ul> <i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
</div> </a>
</li>
</ul>
</div> </div>
); );
}; };

2
src/components/Project/Infrastructure/WorkItem.jsx
View File

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

149
src/components/Project/ProjectNav.jsx
View File

@ -1,53 +1,51 @@
import React from "react"; 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 HasViewInfraStructure = useHasUserPermission(VIEW_PROJECT_INFRA);
const ProjectNav = ( {onPillClick, activePill} ) =>
{
const HasViewInfraStructure = useHasUserPermission( VIEW_PROJECT_INFRA )
return ( 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">
<li className="nav-item"> <a
<a className={`nav-link ${activePill === "profile" ? "active" : ""}`}
className={`nav-link ${activePill === "profile" ? "active" : ""}`} href="#"
href="#" onClick={(e) => {
onClick={(e) => { e.preventDefault(); // Prevent page reload
e.preventDefault(); // Prevent page reload onPillClick("profile");
onPillClick("profile"); }}
}} >
> <i className="bx bx-user bx-sm me-1_5"></i> Profile
<i className="bx bx-user bx-sm me-1_5"></i> Profile </a>
</a> </li>
</li> <li className="nav-item">
<li className="nav-item"> <a
<a className={`nav-link ${activePill === "teams" ? "active" : ""}`}
className={`nav-link ${activePill === "teams" ? "active" : ""}`} href="#"
href="#" onClick={(e) => {
onClick={(e) => { e.preventDefault(); // Prevent page reload
e.preventDefault(); // Prevent page reload onPillClick("teams");
onPillClick("teams"); }}
}} >
> <i className="bx bx-group bx-sm me-1_5"></i> Teams
<i className="bx bx-group bx-sm me-1_5"></i> Teams </a>
</a> </li>
</li> <li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
<li className={`nav-item ${!HasViewInfraStructure && 'd-none'} `}> <a
<a className={`nav-link ${activePill === "infra" ? "active" : ""}`}
className={`nav-link ${activePill === "infra" ? "active" : ""}`} href="#"
href="#" onClick={(e) => {
onClick={(e) => { e.preventDefault(); // Prevent page reload
e.preventDefault(); // Prevent page reload onPillClick("infra");
onPillClick("infra"); }}
}} >
> <i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure
<i className="bx bx-grid-alt bx-sm me-1_5"></i> Infrastructure </a>
</a> </li>
</li> {/* <li className="nav-item">
{/* <li className="nav-item">
<a <a
className={`nav-link ${ className={`nav-link ${
activePill === "workplan" ? "active" : "" activePill === "workplan" ? "active" : ""
@ -61,36 +59,33 @@ const ProjectNav = ( {onPillClick, activePill} ) =>
<i className="bx bx-link bx-sm me-1_5"></i> Work Plan <i className="bx bx-link bx-sm me-1_5"></i> Work Plan
</a> </a>
</li> */} </li> */}
<li className="nav-item"> <li className="nav-item">
<a <a
className={`nav-link ${ className={`nav-link ${
activePill === "imagegallary" ? "active" : "" activePill === "imagegallary" ? "active" : ""
}`} }`}
href="#" href="#"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); // Prevent page reload e.preventDefault(); // Prevent page reload
onPillClick("imagegallary"); onPillClick("imagegallary");
}} }}
> >
<i className="bx bx-link bx-sm me-1_5"></i> Image Gallary <i className="bx bx-link bx-sm me-1_5"></i> Image Gallary
</a> </a>
</li> </li>
<li className="nav-item"> <li className="nav-item">
<a <a
className={`nav-link ${ className={`nav-link ${activePill === "directory" ? "active" : ""}`}
activePill === "directory" ? "active" : "" href="#"
}`} onClick={(e) => {
href="#" e.preventDefault(); // Prevent page reload
onClick={(e) => { onPillClick("directory");
e.preventDefault(); // Prevent page reload }}
onPillClick("directory"); >
}} <i className="bx bx-link bx-sm me-1_5"></i> Directory
> </a>
<i className="bx bx-link bx-sm me-1_5"></i> Directory </li>
</a> </ul>
</li>
</ul>
</div>
</div> </div>
); );
}; };

13
src/components/common/Loader.jsx
View File

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

96
src/pages/project/ProjectDetails.jsx
View File

@ -15,52 +15,51 @@ import { cacheData, getCachedData } from "../../slices/apiDataManager";
import ProjectRepository from "../../repositories/ProjectRepository"; import ProjectRepository from "../../repositories/ProjectRepository";
import { ActivityeRepository } from "../../repositories/MastersRepository"; import { ActivityeRepository } from "../../repositories/MastersRepository";
import "./ProjectDetails.css"; 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"; import { ComingSoonPage } from "../Misc/ComingSoonPage";
const ProjectDetails = () => { 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 [project, setProject] = useState(null);
const [ projectDetails, setProjectDetails ] = useState( null ); const [projectDetails, setProjectDetails] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [ error, setError ] = useState( "" ); const [error, setError] = useState("");
const fetchData = async () => { const fetchData = async () => {
const project_cache = getCachedData("projectInfo");
const project_cache = getCachedData("projectInfo"); if (!project_cache || project_cache?.projectId !== projectId) {
if (!project_cache || project_cache?.projectId !== projectId) { ProjectRepository.getProjectByprojectId(projectId)
ProjectRepository.getProjectByprojectId(projectId) .then((response) => {
.then( ( response ) => setProjectDetails(response.data);
{ setProject(response.data);
setProjectDetails( response.data ); cacheData("projectInfo", { projectId, data: response.data });
setProject( response.data ); setLoading(false);
cacheData("projectInfo", {projectId,data: response.data} ); })
setLoading(false) .catch((error) => {
}) console.error(error);
.catch((error) => { setError("Failed to fetch data.");
console.error(error); setLoading(false);
setError( "Failed to fetch data." ); });
setLoading(false) } else {
}); setProjectDetails(project_cache.data);
} else { setProject(project_cache.data);
setProjectDetails( project_cache.data ); setLoading(false);
setProject( project_cache.data ); }
setLoading(false)
}
}; };
const [activePill, setActivePill] = useState("profile"); const [activePill, setActivePill] = useState("profile");
const handlePillClick = (pillKey) => { const handlePillClick = (pillKey) => {
setActivePill(pillKey); setActivePill(pillKey);
}; };
@ -69,19 +68,18 @@ const ProjectDetails = () => {
fetchData(); fetchData();
}; };
const renderContent = () => { const renderContent = () => {
if (projectLoading) return <Loader></Loader>; if (projectLoading) return <Loader></Loader>;
switch (activePill) { switch (activePill) {
case "profile": { case "profile": {
return ( return (
<div className="row"> <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 */} {/* About User */}
<AboutProject data={projectDetails}></AboutProject> <AboutProject data={projectDetails}></AboutProject>
{/* About User */} {/* About User */}
</div> </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 */} {/* Profile Overview */}
<ProjectOverview project={projectId} /> <ProjectOverview project={projectId} />
{/* Profile Overview */} {/* Profile Overview */}
@ -128,17 +126,17 @@ const ProjectDetails = () => {
</div> </div>
); );
} }
default: default:
return <ComingSoonPage></ComingSoonPage>; return <ComingSoonPage></ComingSoonPage>;
} }
}; };
useEffect(() => { 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 ( return (
<> <>
@ -154,16 +152,18 @@ const ProjectDetails = () => {
<div className="row"> <div className="row">
{projectLoading && <p>Loading....</p>} {projectLoading && <p>Loading....</p>}
{(!projectLoading && project) && <ProjectBanner project_data={project} ></ProjectBanner>} {!projectLoading && project && (
</div> <ProjectBanner project_data={project}></ProjectBanner>
)}
<div className="row">
<ProjectNav <ProjectNav
onPillClick={handlePillClick} onPillClick={handlePillClick}
activePill={activePill} activePill={activePill}
></ProjectNav> ></ProjectNav>
</div> </div>
<div className="row"></div>
{renderContent()} {renderContent()}
</div> </div>
</> </>