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

This commit is contained in:
Kartik sharma 2025-07-14 14:47:01 +05:30 committed by pramod.mahajan
parent 8748193069
commit 0ef60621fb
3 changed files with 62 additions and 413 deletions

View File

@ -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 */}

View File

@ -20,7 +20,7 @@ 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();
@ -32,6 +32,7 @@ const Header = () => {
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 +40,6 @@ const Header = () => {
const logout = async () => {
try {
// Notify server about the logout (optional)
let data = {
refreshToken: localStorage.getItem("refreshToken"),
};
@ -54,6 +54,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 +72,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;
// Determine the display text for the project dropdown
let displayText = "";
if (selectedProjectName) {
displayText = selectedProjectName;
} else if (projectLoading && selectedProject) {
displayText = selectedProject;
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 +116,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,17 +171,16 @@ 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) && (
{/* Project Selection Dropdown */}
{projectNames && ( // Ensure projectNames is not null before rendering dropdown
<div className="align-items-center">
{(!isProjectPath && !isDirectoryPath) && (
<>
<i
className="rounded-circle bx bx-building-house bx-sm-lg bx-md"
></i>
<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 > 1 && "dropdown-toggle"
projectNames.length > 0 ? "dropdown-toggle" : ""
} px-1`}
type="button"
data-bs-toggle="dropdown"
@ -196,11 +189,21 @@ const Header = () => {
{displayText}
</button>
{projectNames?.length > 1 && (
{/* Render dropdown menu only if there are projects or the "All Projects" option is relevant */}
{projectNames.length > 0 && (
<ul
className="dropdown-menu"
style={{ overflow: "auto", maxHeight: "300px" }}
>
{/* "All Projects" option */}
<li>
<button
className="dropdown-item"
onClick={() => dispatch(setProjectId(null))} // Set projectId to null for "All Projects"
>
All Projects
</button>
</li>
{[...projectNames]
.sort((a, b) => a?.name?.localeCompare(b.name))
.map((project) => (
@ -214,7 +217,6 @@ const Header = () => {
{project?.name}{" "}
{project?.shortName ? (
<span className="text-primary fw-semibold ">
{" "}
({project?.shortName})
</span>
) : (
@ -230,8 +232,11 @@ const Header = () => {
)}
</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 */}
{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>)}
{/* 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 +274,6 @@ const Header = () => {
</span>
Dashboard
</a>
<small>User Dashboard</small>
</div>
<div className="dropdown-shortcuts-item col">
@ -282,7 +286,6 @@ const Header = () => {
</span>
Projects
</a>
<small>Projects List</small>
</div>
</div>
@ -323,7 +326,6 @@ const Header = () => {
</span>
Allocate Work
</a>
<small>Work Allocations</small>
</div>
<div className="dropdown-shortcuts-item col">
@ -336,321 +338,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 +402,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 +419,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 +433,4 @@ const Header = () => {
</nav>
);
};
export default Header;
export default Header;

View File

@ -88,7 +88,7 @@ const ProjectDetails = () => {
<div className="col-xl-4 col-lg-5 col-md-5 mt-5">
<ProjectOverview project={projectId} />
</div>
</div>
</>
);
}
case "teams": {