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

Add an "All Projects" selection option in the global project dropdown. #253

Merged
pramod.mahajan merged 6 commits from Kartik_Task#734 into Issues_July_2W 2025-07-15 09:41:08 +00:00
Conversation 0 Commits 6 Files Changed 7 +234 -628
7 changed files with 234 additions and 628 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Dashboard/ProjectProgressChart.jsx
View File

@ -93,33 +93,6 @@ const ProjectProgressChart = ({
<h5 className="mb-1">Project Progress</h5> <h5 className="mb-1">Project Progress</h5>
<p className="card-subtitle">Progress Overview by Project</p> <p className="card-subtitle">Progress Overview by Project</p>
</div> </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> </div>
{/* Row 2: Time Range Buttons */} {/* Row 2: Time Range Buttons */}

523
src/components/Layout/Header.jsx
View File

@ -1,3 +1,4 @@
import getGreetingMessage from "../../utils/greetingHandler"; import getGreetingMessage from "../../utils/greetingHandler";
import { import {
cacheData, cacheData,
@ -20,18 +21,21 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_PROJECT } from "../../utils/constants"; import { MANAGE_PROJECT } from "../../utils/constants";
const Header = () => { const Header = () => {
const {profile} = useProfile(); const { profile } = useProfile();
const location = useLocation(); const location = useLocation();
const dispatch = useDispatch(); const dispatch = useDispatch();
const { data, loading } = useMaster(); const { data, loading } = useMaster();
const navigate = useNavigate(); const navigate = useNavigate();
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT); const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
const isDashboard = location.pathname === "/dashboard";
// const isDirectoryPath = location.pathname === "/directory";
const getRole = (roles, joRoleId) => { const getRole = (roles, joRoleId) => {
if (!Array.isArray(roles)) return "User"; if (!Array.isArray(roles)) return "User";
let role = roles.find((role) => role.id === joRoleId); let role = roles.find((role) => role.id === joRoleId);
return role ? role.name : "User"; return role ? role.name : "User";
}; };
const handleLogout = (e) => { const handleLogout = (e) => {
e.preventDefault(); // Prevent default anchor behavior (e.g., page reload) e.preventDefault(); // Prevent default anchor behavior (e.g., page reload)
logout(); logout();
@ -39,7 +43,6 @@ const Header = () => {
const logout = async () => { const logout = async () => {
try { try {
// Notify server about the logout (optional)
let data = { let data = {
refreshToken: localStorage.getItem("refreshToken"), refreshToken: localStorage.getItem("refreshToken"),
}; };
@ -54,6 +57,7 @@ const Header = () => {
window.location.href = "/auth/login"; window.location.href = "/auth/login";
}) })
.catch((error) => { .catch((error) => {
// Even if logout API fails, clear local storage and redirect
localStorage.removeItem("jwtToken"); localStorage.removeItem("jwtToken");
localStorage.removeItem("refreshToken"); localStorage.removeItem("refreshToken");
localStorage.removeItem("user"); localStorage.removeItem("user");
@ -71,39 +75,43 @@ const Header = () => {
const handleProfilePage = () => { const handleProfilePage = () => {
navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`); navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
}; };
// const { projects, loading: projectLoading } = useProjects();
const { projectNames, loading: projectLoading, fetchData } = useProjectName(); const { projectNames, loading: projectLoading, fetchData } = useProjectName();
const selectedProject = useSelector( const selectedProject = useSelector(
(store) => store.localVariables.projectId (store) => store.localVariables.projectId
); );
const selectedProjectName = projectNames?.find( // Determine the display text for the project dropdown
(p) => p?.id === selectedProject let displayText = "All Projects";
)?.name; if (selectedProject === null) {
displayText = "All Projects";
let displayText = ""; } else if (selectedProject) {
if (selectedProjectName) { const selectedProjectObj = projectNames?.find(
displayText = selectedProjectName; (p) => p?.id === selectedProject
} else if (projectLoading && selectedProject) { );
displayText = selectedProject; // Fallback to selectedProject ID if name not found during loading or mismatch
displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
} else if (projectLoading) { } else if (projectLoading) {
displayText = "Loading..."; displayText = "Loading...";
} }
const { openChangePassword } = useChangePassword(); const { openChangePassword } = useChangePassword();
useEffect(() => { useEffect(() => {
if ( if (
projectNames && projectNames &&
selectedProject !== " " && projectNames.length > 0 &&
selectedProject === undefined &&
!getCachedData("hasReceived") !getCachedData("hasReceived")
) { ) {
dispatch(setProjectId(projectNames[0]?.id)); dispatch(setProjectId(null)); // Set to null for "All Projects"
} }
}, [projectNames]); }, [projectNames, selectedProject, dispatch]);
/** Check if current page id project details page */
const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname) /** Check if current page is project details page or directory page */
// const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
const isDirectoryPath = /^\/directory$/.test(location.pathname); const isDirectoryPath = /^\/directory$/.test(location.pathname);
const handler = useCallback( const handler = useCallback(
@ -111,58 +119,47 @@ const Header = () => {
if (!HasManageProjectPermission) { if (!HasManageProjectPermission) {
await fetchData(); await fetchData();
const projectExist = data.projectIds.some( const projectExist = data.projectIds.some(
(item) => item == selectedProject (item) => item === selectedProject
); );
if (projectExist) { if (projectExist) {
cacheData("hasReceived", false); cacheData("hasReceived", false);
} }
} }
}, },
[fetchData,projectNames,selectedProject] [fetchData, selectedProject, HasManageProjectPermission]
); );
// useEffect(() => {
// eventBus.on("assign_project_one", handler);
// return () => eventBus.off("assign_project_one", handler);
// }, [handler]);
const newProjectHandler = useCallback( const newProjectHandler = useCallback(
async (msg) => { async (msg) => {
if (HasManageProjectPermission && msg.keyword === "Create_Project") { if (HasManageProjectPermission && msg.keyword === "Create_Project") {
await fetchData(); 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(); await fetchData();
} }
cacheData("hasReceived", false); cacheData("hasReceived", false);
}, },
[HasManageProjectPermission,projectNames] [HasManageProjectPermission, projectNames, fetchData]
); );
// useEffect(() => { // Correct way to dispatch an action on mount
// eventBus.on("project", newProjectHandler);
// return () => eventBus.off("project", newProjectHandler);
// }, [handler]);
useDispatch( () =>
{
dispatch(changeMaster("Job Role"))
},[])
useEffect(() => { useEffect(() => {
eventBus.on("assign_project_one", handler); dispatch(changeMaster("Job Role"));
eventBus.on("project", newProjectHandler); }, [dispatch]);
return () => { // Event bus listeners for project changes
eventBus.off("assign_project_one", handler); useEffect(() => {
eventBus.off("project", newProjectHandler); eventBus.on("assign_project_one", handler);
}; eventBus.on("project", newProjectHandler);
}, [handler, newProjectHandler]);
return () => {
eventBus.off("assign_project_one", handler);
eventBus.off("project", newProjectHandler);
};
}, [handler, newProjectHandler]);
return ( return (
<nav <nav
className="layout-navbar container-fluid mb-3 navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" className="layout-navbar container-fluid mb-3 navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
id="layout-navbar" id="layout-navbar"
> >
<div className="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none"> <div className="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
@ -177,61 +174,64 @@ const Header = () => {
className="navbar-nav-right d-flex align-items-center justify-content-between" className="navbar-nav-right d-flex align-items-center justify-content-between"
id="navbar-collapse" id="navbar-collapse"
> >
{projectNames?.length > 0 && ( {/* Project Selection Dropdown */}
<div className=" align-items-center"> {projectNames && !isDirectoryPath && (
{(!isProjectPath && !isDirectoryPath) && ( <div className="align-items-center">
<> <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
<i <div className="btn-group">
className="rounded-circle bx bx-building-house bx-sm-lg bx-md" <button
></i> className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
<div className="btn-group"> } px-1`}
<button type="button"
className={`btn btn-sm-sm btn-xl ${ data-bs-toggle="dropdown"
projectNames?.length > 1 && "dropdown-toggle" aria-expanded="false"
} px-1`} >
type="button" {displayText}
data-bs-toggle="dropdown" </button>
aria-expanded="false"
>
{displayText}
</button>
{projectNames?.length > 1 && ( {projectNames.length > 0 && (
<ul <ul
className="dropdown-menu" className="dropdown-menu"
style={{ overflow: "auto", maxHeight: "300px" }} style={{ overflow: "auto", maxHeight: "300px" }}
> >
{[...projectNames] {/* Show "All Projects" only on dashboard */}
.sort((a, b) => a?.name?.localeCompare(b.name)) {isDashboard && (
.map((project) => ( <li>
<li key={project?.id}> <button
<button className="dropdown-item"
className="dropdown-item" onClick={() => dispatch(setProjectId(null))}
onClick={() => >
dispatch(setProjectId(project?.id)) All Projects
} </button>
> </li>
{project?.name}{" "}
{project?.shortName ? (
<span className="text-primary fw-semibold ">
{" "}
({project?.shortName})
</span>
) : (
""
)}
</button>
</li>
))}
</ul>
)} )}
</div> {[...projectNames]
</> .sort((a, b) => a?.name?.localeCompare(b.name))
)} .map((project) => (
<li key={project?.id}>
<button
className="dropdown-item"
onClick={() => dispatch(setProjectId(project?.id))}
>
{project?.name}
{project?.shortName && (
<span className="text-primary fw-semibold ms-1">
({project?.shortName})
</span>
)}
</button>
</li>
))}
</ul>
)}
</div>
</div> </div>
)} )}
{isProjectPath && (<span className=" fs-5 align-items-center"><i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>{displayText}</span>)}
{/* Display project name on project details or directory pages */}
{/* { (<span className="fs-5 align-items-center"><i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>{displayText}</span>)} */}
{/* User Profile and Shortcuts */}
<ul className="navbar-nav flex-row align-items-center ms-md-auto"> <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"> <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
<a <a
@ -269,7 +269,6 @@ const Header = () => {
</span> </span>
Dashboard Dashboard
</a> </a>
<small>User Dashboard</small> <small>User Dashboard</small>
</div> </div>
<div className="dropdown-shortcuts-item col"> <div className="dropdown-shortcuts-item col">
@ -282,7 +281,6 @@ const Header = () => {
</span> </span>
Projects Projects
</a> </a>
<small>Projects List</small> <small>Projects List</small>
</div> </div>
</div> </div>
@ -323,7 +321,6 @@ const Header = () => {
</span> </span>
Allocate Work Allocate Work
</a> </a>
<small>Work Allocations</small> <small>Work Allocations</small>
</div> </div>
<div className="dropdown-shortcuts-item col"> <div className="dropdown-shortcuts-item col">
@ -336,321 +333,12 @@ const Header = () => {
</span> </span>
Daily Work Log Daily Work Log
</a> </a>
<small>Daily Work Allocations</small> <small>Daily Work Allocations</small>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</li> </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"> <li className="nav-item navbar-dropdown dropdown-user dropdown">
<a <a
aria-label="dropdown profile avatar" aria-label="dropdown profile avatar"
@ -709,25 +397,8 @@ const Header = () => {
<span className="align-middle">Settings</span> <span className="align-middle">Settings</span>
</a> </a>
</li> </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}> <li onClick={openChangePassword}>
{" "} {" "}
{/* Use the function from the context */}
<a <a
aria-label="go to profile" aria-label="go to profile"
className="dropdown-item cusor-pointer" className="dropdown-item cusor-pointer"
@ -743,7 +414,7 @@ const Header = () => {
<a <a
aria-label="click to log out" aria-label="click to log out"
className="dropdown-item cusor-pointer" className="dropdown-item cusor-pointer"
href="/logout" // Optional: Add this for accessibility, but it won't actually redirect href="/logout"
onClick={handleLogout} onClick={handleLogout}
> >
<i className="bx bx-power-off me-2"></i> <i className="bx bx-power-off me-2"></i>
@ -757,4 +428,4 @@ const Header = () => {
</nav> </nav>
); );
}; };
export default Header; export default Header;

58
src/components/Project/AboutProject.jsx
View File

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

24
src/components/Project/ProjectCard.jsx
View File

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

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

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

8
src/pages/project/ProjectListView.jsx
View File

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

2
src/router/AppRoutes.jsx
View File

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