Merge pull request 'Add an "All Projects" selection option in the global project dropdown.' (#253) from Kartik_Task#734 into Issues_July_2W
Reviewed-on: #253 Merged
This commit is contained in:
commit
99f3ec19d3
@ -93,33 +93,6 @@ 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 */}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
import getGreetingMessage from "../../utils/greetingHandler";
|
||||
import {
|
||||
cacheData,
|
||||
@ -20,18 +21,21 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||
|
||||
const Header = () => {
|
||||
const {profile} = useProfile();
|
||||
const { profile } = useProfile();
|
||||
const location = useLocation();
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading } = useMaster();
|
||||
const navigate = useNavigate();
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
const isDashboard = location.pathname === "/dashboard";
|
||||
// const isDirectoryPath = location.pathname === "/directory";
|
||||
|
||||
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(); // Prevent default anchor behavior (e.g., page reload)
|
||||
logout();
|
||||
@ -39,7 +43,6 @@ const Header = () => {
|
||||
|
||||
const logout = async () => {
|
||||
try {
|
||||
// Notify server about the logout (optional)
|
||||
let data = {
|
||||
refreshToken: localStorage.getItem("refreshToken"),
|
||||
};
|
||||
@ -54,6 +57,7 @@ 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");
|
||||
@ -71,39 +75,43 @@ 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
|
||||
);
|
||||
|
||||
const selectedProjectName = projectNames?.find(
|
||||
(p) => p?.id === selectedProject
|
||||
)?.name;
|
||||
|
||||
let displayText = "";
|
||||
if (selectedProjectName) {
|
||||
displayText = selectedProjectName;
|
||||
} else if (projectLoading && selectedProject) {
|
||||
displayText = selectedProject;
|
||||
// Determine the display text for the project dropdown
|
||||
let displayText = "All Projects";
|
||||
if (selectedProject === null) {
|
||||
displayText = "All Projects";
|
||||
} else if (selectedProject) {
|
||||
const selectedProjectObj = projectNames?.find(
|
||||
(p) => p?.id === selectedProject
|
||||
);
|
||||
// Fallback to selectedProject ID if name not found during loading or mismatch
|
||||
displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
|
||||
} else if (projectLoading) {
|
||||
displayText = "Loading...";
|
||||
}
|
||||
|
||||
const { openChangePassword } = useChangePassword();
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
projectNames &&
|
||||
selectedProject !== " " &&
|
||||
projectNames.length > 0 &&
|
||||
selectedProject === undefined &&
|
||||
!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 handler = useCallback(
|
||||
@ -111,58 +119,47 @@ const Header = () => {
|
||||
if (!HasManageProjectPermission) {
|
||||
await fetchData();
|
||||
const projectExist = data.projectIds.some(
|
||||
(item) => item == selectedProject
|
||||
(item) => item === selectedProject
|
||||
);
|
||||
if (projectExist) {
|
||||
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(
|
||||
async (msg) => {
|
||||
|
||||
if (HasManageProjectPermission && msg.keyword === "Create_Project") {
|
||||
await fetchData();
|
||||
} else if (projectNames.some((item) => item.id == msg.response.id)) {
|
||||
console.log((projectNames.some((item) => item.id == msg.response.id)))
|
||||
} else if (projectNames?.some((item) => item.id === msg.response.id)) {
|
||||
await fetchData();
|
||||
}
|
||||
cacheData("hasReceived", false);
|
||||
},
|
||||
[HasManageProjectPermission,projectNames]
|
||||
[HasManageProjectPermission, projectNames, fetchData]
|
||||
);
|
||||
|
||||
// useEffect(() => {
|
||||
// eventBus.on("project", newProjectHandler);
|
||||
// return () => eventBus.off("project", newProjectHandler);
|
||||
// }, [handler]);
|
||||
|
||||
useDispatch( () =>
|
||||
{
|
||||
dispatch(changeMaster("Job Role"))
|
||||
},[])
|
||||
// Correct way to dispatch an action on mount
|
||||
useEffect(() => {
|
||||
eventBus.on("assign_project_one", handler);
|
||||
eventBus.on("project", newProjectHandler);
|
||||
dispatch(changeMaster("Job Role"));
|
||||
}, [dispatch]);
|
||||
|
||||
return () => {
|
||||
eventBus.off("assign_project_one", handler);
|
||||
eventBus.off("project", newProjectHandler);
|
||||
};
|
||||
}, [handler, newProjectHandler]);
|
||||
// Event bus listeners for project changes
|
||||
useEffect(() => {
|
||||
eventBus.on("assign_project_one", handler);
|
||||
eventBus.on("project", newProjectHandler);
|
||||
|
||||
return () => {
|
||||
eventBus.off("assign_project_one", handler);
|
||||
eventBus.off("project", newProjectHandler);
|
||||
};
|
||||
}, [handler, newProjectHandler]);
|
||||
|
||||
return (
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
id="navbar-collapse"
|
||||
>
|
||||
{projectNames?.length > 0 && (
|
||||
<div className=" align-items-center">
|
||||
{(!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 > 1 && "dropdown-toggle"
|
||||
} px-1`}
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{displayText}
|
||||
</button>
|
||||
{/* Project Selection Dropdown */}
|
||||
{projectNames && !isDirectoryPath && (
|
||||
<div className="align-items-center">
|
||||
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
|
||||
} px-1`}
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{displayText}
|
||||
</button>
|
||||
|
||||
{projectNames?.length > 1 && (
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
style={{ overflow: "auto", maxHeight: "300px" }}
|
||||
>
|
||||
{[...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 ">
|
||||
{" "}
|
||||
({project?.shortName})
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{projectNames.length > 0 && (
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
style={{ overflow: "auto", maxHeight: "300px" }}
|
||||
>
|
||||
{/* Show "All Projects" only on dashboard */}
|
||||
{isDashboard && (
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => dispatch(setProjectId(null))}
|
||||
>
|
||||
All Projects
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
</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>
|
||||
)}
|
||||
{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">
|
||||
<li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
|
||||
<a
|
||||
@ -269,7 +269,6 @@ const Header = () => {
|
||||
</span>
|
||||
Dashboard
|
||||
</a>
|
||||
|
||||
<small>User Dashboard</small>
|
||||
</div>
|
||||
<div className="dropdown-shortcuts-item col">
|
||||
@ -282,7 +281,6 @@ const Header = () => {
|
||||
</span>
|
||||
Projects
|
||||
</a>
|
||||
|
||||
<small>Projects List</small>
|
||||
</div>
|
||||
</div>
|
||||
@ -323,7 +321,6 @@ const Header = () => {
|
||||
</span>
|
||||
Allocate Work
|
||||
</a>
|
||||
|
||||
<small>Work Allocations</small>
|
||||
</div>
|
||||
<div className="dropdown-shortcuts-item col">
|
||||
@ -336,321 +333,12 @@ 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"
|
||||
@ -709,25 +397,8 @@ 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"
|
||||
@ -743,7 +414,7 @@ const Header = () => {
|
||||
<a
|
||||
aria-label="click to log out"
|
||||
className="dropdown-item cusor-pointer"
|
||||
href="/logout" // Optional: Add this for accessibility, but it won't actually redirect
|
||||
href="/logout"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<i className="bx bx-power-off me-2"></i>
|
||||
@ -757,4 +428,4 @@ const Header = () => {
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
export default Header;
|
||||
export default Header;
|
||||
@ -2,48 +2,53 @@ import React, { useEffect, useState } from "react";
|
||||
import moment from "moment";
|
||||
import { getProjectStatusName } from "../../utils/projectStatus";
|
||||
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 {MANAGE_PROJECT} from "../../utils/constants";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import ManageProjectInfo from "./ManageProjectInfo";
|
||||
import {useQueryClient} from "@tanstack/react-query";
|
||||
const AboutProject = () =>
|
||||
{
|
||||
const [ IsOpenModal, setIsOpenModal ] = useState( false )
|
||||
const {mutate: UpdateProjectDetails, isPending} = useUpdateProject( {
|
||||
onSuccessCallback: () =>
|
||||
{
|
||||
setIsOpenModal(false)
|
||||
|
||||
const AboutProject = () => {
|
||||
const [IsOpenModal, setIsOpenModal] = useState(false);
|
||||
const {mutate: UpdateProjectDetails, isPending} = useUpdateProject({
|
||||
onSuccessCallback: () => {
|
||||
setIsOpenModal(false);
|
||||
}
|
||||
} )
|
||||
const ClientQuery = useQueryClient()
|
||||
const {projectId} = useParams();
|
||||
});
|
||||
const ClientQuery = useQueryClient();
|
||||
|
||||
// *** 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 )
|
||||
const handleFormSubmit = ( updatedProject ) =>
|
||||
{
|
||||
if ( projects_Details?.id )
|
||||
{
|
||||
UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject,
|
||||
} );
|
||||
refetch()
|
||||
}
|
||||
};
|
||||
const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId ); // Pass projectId from useSelector
|
||||
|
||||
const handleFormSubmit = ( updatedProject ) => {
|
||||
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
|
||||
// if UpdateProjectDetails properly invalidates the 'projectDetails' query key.
|
||||
// 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 (
|
||||
<>
|
||||
{IsOpenModal && (
|
||||
<GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
|
||||
<GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
|
||||
<ManageProjectInfo
|
||||
project={projects_Details}
|
||||
handleSubmitForm={handleFormSubmit}
|
||||
onClose={() => setIsOpenModal( false )}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
</GlobalModel>
|
||||
)}
|
||||
{projects_Details && (
|
||||
<>
|
||||
<>
|
||||
<div className="card mb-6">
|
||||
<div className="card-header text-start">
|
||||
<h6 className="card-action-title mb-0">
|
||||
@ -126,10 +131,9 @@ const AboutProject = () =>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{isLoading && <span>loading...</span>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutProject;
|
||||
export default AboutProject;
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import moment from "moment";
|
||||
import { formatNumber, getCompletionPercentage, getDateDifferenceInDays } from "../../utils/dateUtils";
|
||||
import { formatNumber, getDateDifferenceInDays } from "../../utils/dateUtils";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useProjectDetails, useUpdateProject } from "../../hooks/useProjects";
|
||||
import ManageProjectInfo from "./ManageProjectInfo";
|
||||
@ -57,7 +57,7 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
const handleViewProject = () => {
|
||||
navigate(`/projects/${projectData.id}`);
|
||||
navigate(`/projects/details`);
|
||||
};
|
||||
|
||||
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-header pb-4">
|
||||
<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">
|
||||
<i
|
||||
className="rounded-circle bx bx-building-house"
|
||||
style={{ fontSize: "xx-large" }}
|
||||
></i>
|
||||
</div>
|
||||
<div className="me-2 text-wrap ">
|
||||
<div className="me-2">
|
||||
<h5
|
||||
className="mb-0 stretched-link text-heading text-start text-truncate"
|
||||
onClick={handleViewProject}
|
||||
style={{ maxWidth: "180px", display: "inline-block" }}
|
||||
>
|
||||
className="mb-0 stretched-link text-heading text-start"
|
||||
onClick={handleViewProject}
|
||||
>
|
||||
{projectInfo.shortName
|
||||
? projectInfo.shortName
|
||||
: projectInfo.name}
|
||||
@ -228,7 +227,12 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
Task: {formatNumber(projectInfo.completedWork)} / {formatNumber(projectInfo.plannedWork)}
|
||||
</small>
|
||||
<small className="text-body">
|
||||
{getCompletionPercentage(projectInfo.completedWork, projectInfo.plannedWork)}
|
||||
{Math.floor(
|
||||
getProgressInNumber(
|
||||
projectInfo.plannedWork,
|
||||
projectInfo.completedWork
|
||||
)
|
||||
) || 0}{" "}
|
||||
% Completed
|
||||
</small>
|
||||
</div>
|
||||
@ -270,4 +274,4 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectCard;
|
||||
export default ProjectCard;
|
||||
@ -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 ActivityTimeline from "../../components/Project/ActivityTimeline";
|
||||
@ -31,157 +31,111 @@ import eventBus from "../../services/eventBus";
|
||||
import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
|
||||
|
||||
const ProjectDetails = () => {
|
||||
let { projectId } = useParams();
|
||||
const {
|
||||
projects_Details,
|
||||
loading: projectLoading,
|
||||
error: ProjectError,
|
||||
refetch
|
||||
} = useProjectDetails(projectId);
|
||||
// const { projectId } = useParams(); // REMOVE THIS LINE
|
||||
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);
|
||||
// }
|
||||
// };
|
||||
// GET projectId FROM REDUX STORE
|
||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||
|
||||
const {
|
||||
projects_Details,
|
||||
loading: projectLoading,
|
||||
error: projectError,
|
||||
refetch,
|
||||
} = useProjectDetails(projectId);
|
||||
|
||||
const [activePill, setActivePill] = useState("profile");
|
||||
|
||||
const handlePillClick = (pillKey) => {
|
||||
setActivePill(pillKey);
|
||||
};
|
||||
|
||||
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]);
|
||||
// REMOVE THIS useEffect AS projectId IS NOW FROM REDUX
|
||||
// useEffect(() => {
|
||||
// if (projectId) dispatch(setProjectId(projectId));
|
||||
// }, [projectId, dispatch]);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if (msg.keyword === "Update_Project" && projects_Details.id === msg.response.id) {
|
||||
refetch()
|
||||
if (msg.keyword === "Update_Project" && projects_Details?.id === msg.response.id) {
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
[projects_Details, handleDataChange]
|
||||
[projects_Details, refetch]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("project", handler);
|
||||
return () => eventBus.off("project", 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 (
|
||||
<>
|
||||
{}
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Projects", link: "/projects" },
|
||||
{ label: `${project?.name ? project?.name : ""}`, link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Projects", link: "/projects" },
|
||||
{ label: projects_Details?.name || "Project", link: null },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="row">
|
||||
{projectLoading && <p>Loading....</p>}
|
||||
{/* {!projectLoading && project && (
|
||||
<ProjectBanner project_data={project}></ProjectBanner>
|
||||
)} */}
|
||||
|
||||
<ProjectNav
|
||||
onPillClick={handlePillClick}
|
||||
activePill={activePill}
|
||||
></ProjectNav>
|
||||
</div>
|
||||
|
||||
<div className="row"></div>
|
||||
|
||||
{renderContent()}
|
||||
<div className="row">
|
||||
<ProjectNav onPillClick={handlePillClick} activePill={activePill} />
|
||||
</div>
|
||||
</>
|
||||
|
||||
{renderContent()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectDetails;
|
||||
export default ProjectDetails;
|
||||
@ -62,7 +62,7 @@ const ProjectListView = ({ projectData, recall }) => {
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
const handleViewProject = () => {
|
||||
navigate(`/projects/${projectData.id}`);
|
||||
navigate(`/projects/details`);
|
||||
};
|
||||
|
||||
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/${projectInfo.id}`)}
|
||||
onClick={() => navigate(`/projects/details`)}
|
||||
>
|
||||
{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/${projectInfo.id}`)}
|
||||
onClick={() => navigate(`/projects/details`)}
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
<span className="align-left">View details</span>
|
||||
@ -193,4 +193,4 @@ const ProjectListView = ({ projectData, recall }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectListView;
|
||||
export default ProjectListView;
|
||||
@ -63,7 +63,7 @@ const router = createBrowserRouter(
|
||||
{ path: "/", element: <Dashboard /> },
|
||||
{ path: "/dashboard", element: <Dashboard /> },
|
||||
{ path: "/projects", element: <ProjectList /> },
|
||||
{ path: "/projects/:projectId", element: <ProjectDetails /> },
|
||||
{ path: "/projects/details", element: <ProjectDetails /> },
|
||||
{ path: "/project/manage/:projectId", element: <ManageProject /> },
|
||||
{ path: "/employees", element: <EmployeeList /> },
|
||||
{ path: "/employee/:employeeId", element: <EmployeeProfile /> },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user