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

Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into react-query

Browse Source
This commit is contained in:
pramod mahajan 2025-07-15 23:07:11 +05:30
commit 6097b4957a
41 changed files with 1782 additions and 1757 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/assets/vendor/css/core.css vendored
View File

@ -836,7 +836,7 @@ progress {
}
.row {
--bs-gutter-x: 1.625rem;
--bs-gutter-x: 0.500rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
@ -8966,10 +8966,8 @@ a:not([href]):hover {
}
/* Autofill input bg and text color issue on different OS and browsers */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
@ -8978,6 +8976,15 @@ select:-webkit-autofill:focus,
input:-internal-autofill-selected {
background-clip: text !important;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
box-shadow: 0 0 0px 1000px white inset !important;
-webkit-text-fill-color: #000 !important;
caret-color: #000 !important;
transition: background-color 5000s ease-in-out 0s;
}
h1,
.h1 {

2
src/assets/vendor/css/core.css vendored
View File

@ -2436,7 +2436,7 @@ progress {
}
.table-responsive {
overflow-x: auto;
/* overflow-x: auto; */
-webkit-overflow-scrolling: touch;
}

4
src/components/Activities/AttendcesLogs.jsx
View File

@ -234,7 +234,7 @@ const AttendanceLog = ({
</div>
<div
className="table-responsive text-nowrap"
style={{ minHeight: "250px" }}
style={{ minHeight: "200px", display: 'flex', alignItems: 'center', justifyContent: 'center' }}
>
{data && data.length > 0 && (
<table className="table mb-0">
@ -332,7 +332,7 @@ const AttendanceLog = ({
</table>
)}
{!loading && !isRefreshing && data.length === 0 && (
<span>No employee logs</span>
<span className="text-muted">No employee logs</span>
)}
{/* {error && !loading && !isRefreshing && (
<tr>

24
src/components/Activities/SubTask.jsx
View File

@ -38,13 +38,12 @@ const SubTask = ({ activity, onClose }) => {
const selectedActivityId = watch("activityId");
const selectedActivity = activities?.find((a) => a.id === selectedActivityId);
const { mutate: createSubTask, isPending } = useManageTask({
onSuccessCallback: () =>
{
showToast("Sub Task Created Successfully","success")
onSuccessCallback: () => {
showToast("Sub Task Created Successfully", "success");
reset();
onClose();
}
} )
},
});
useEffect(() => {
setCategoryData(categories);
@ -73,7 +72,7 @@ const SubTask = ({ activity, onClose }) => {
};
const onSubmitForm = async (formData) => {
let payload = {
let data = {
workAreaID: Task.workItem.workAreaId,
workCategoryId: formData.workCategoryId,
activityID: formData.activityId,
@ -83,7 +82,18 @@ const SubTask = ({ activity, onClose }) => {
comment: formData.comment,
};
createSubTask([payload])
const payload = [data];
let buildingId = activity.workItem.workArea.floor.building.id;
let floorId = activity.workItem.workArea.floor.id;
let workAreaId = activity.workItem.workArea.id;
createSubTask({
payload: payload,
buildingId: buildingId,
floorId: floorId,
workAreaId: workAreaId,
PreviousPlannedWork:0,
previousCompletedWork:0
});
};
return (
<div className="container-xxl my-1">

2
src/components/Charts/LineChart.jsx
View File

@ -117,7 +117,7 @@ const LineChart = ({
return (
<div className="w-full overflow-x-auto">
<div className="w-full overflow-x-false">
<ReactApexChart
options={chartOptions}
series={seriesData}

36
src/components/Dashboard/Dashboard.jsx
View File

@ -1,4 +1,5 @@
import React from "react";
import { useSelector } from "react-redux"; // Import useSelector to access Redux state
import {
useDashboardProjectsCardData,
useDashboardTeamsCardData,
@ -9,6 +10,7 @@ import Teams from "./Teams";
import TasksCard from "./Tasks";
import ProjectCompletionChart from "./ProjectCompletionChart";
import ProjectProgressChart from "./ProjectProgressChart";
import ProjectOverview from "../Project/ProjectOverview";
// import Attendance from "./Attendance";
const Dashboard = () => {
@ -16,37 +18,51 @@ const Dashboard = () => {
const { teamsCardData } = useDashboardTeamsCardData();
const { tasksCardData } = useDashboardTasksCardData();
// Get the selected project ID from Redux store
const selectedProjectId = useSelector(
(store) => store.localVariables.projectId
);
// Determine if "All Projects" is selected
// selectedProjectId will be null when "All Projects" is chosen
const isAllProjectsSelected = selectedProjectId === null;
return (
<div className="container-fluid mt-3">
<div className="row gy-4">
{/* Projects Card */}
{isAllProjectsSelected && (
<div className="col-sm-6 col-lg-4">
<Projects projectsCardData={projectsCardData} />
</div>
)}
{/* Teams Card */}
<div className="col-sm-6 col-lg-4">
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
<Teams teamsCardData={teamsCardData} />
</div>
{/* Tasks Card */}
<div className="col-sm-6 col-lg-4">
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
<TasksCard tasksCardData={tasksCardData} />
</div>
{/* Bar Chart (Project Completion) */}
{isAllProjectsSelected && (
<div className="col-xxl-6 col-lg-6">
<ProjectCompletionChart />
</div>
)}
{/* Line Chart (Project Progress) */}
{! isAllProjectsSelected && (
<div className="col-xxl-6 col-lg-6">
<ProjectOverview />
</div>
)}
<div className="col-xxl-6 col-lg-6">
<ProjectProgressChart />
</div>
{/* <div className="col-xxl-6 col-lg-6">
<Attendance />
</div> */}
</div>
</div>
);

27
src/components/Dashboard/ProjectProgressChart.jsx
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 */}

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

@ -1,3 +1,4 @@
import getGreetingMessage from "../../utils/greetingHandler";
import {
cacheData,
@ -27,19 +28,21 @@ const Header = () => {
const navigate = useNavigate();
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
const isDirectoryPath = /^\/directory$/.test(location.pathname);
const isDashboard = /^\/dashboard$/.test(location.pathname);
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)
e.preventDefault();
logout();
};
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,84 +75,80 @@ 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(
// 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
)?.name;
let displayText = "";
if (selectedProjectName) {
displayText = selectedProjectName;
} 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) {
displayText = "Loading...";
}
const { openChangePassword } = useChangePassword();
useEffect(() => {
if (
projectNames &&
selectedProject !== " " &&
projectNames.length > 0 &&
selectedProject === undefined &&
!getCachedData("hasReceived")
) {
if(isDashboard){
dispatch(setProjectId(null));
}else{
dispatch(setProjectId(projectNames[0]?.id));
}
}, [projectNames]);
}
}, [projectNames, selectedProject, dispatch]);
/** Check if current page is project details page or directory page */
// const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
/** Check if current page id project details page */
const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname)
const isDirectoryPath = /^\/directory$/.test(location.pathname);
const handler = useCallback(
async (data) => {
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]);
useEffect(() => {
dispatch(changeMaster("Job Role"));
}, [dispatch]);
useDispatch( () =>
{
dispatch(changeMaster("Job Role"))
},[])
useEffect(() => {
eventBus.on("assign_project_one", handler);
eventBus.on("project", newProjectHandler);
@ -159,7 +159,6 @@ const Header = () => {
};
}, [handler, newProjectHandler]);
return (
<nav
className="layout-navbar container-fluid mb-3 navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@ -177,17 +176,12 @@ const Header = () => {
className="navbar-nav-right d-flex align-items-center justify-content-between"
id="navbar-collapse"
>
{projectNames?.length > 0 && (
{projectNames && !isDirectoryPath && (
<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"
className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
} px-1`}
type="button"
data-bs-toggle="dropdown"
@ -196,29 +190,35 @@ const Header = () => {
{displayText}
</button>
{projectNames?.length > 1 && (
{projectNames.length > 0 && (
<ul
className="dropdown-menu"
style={{ overflow: "auto", maxHeight: "300px" }}
>
{isDashboard && (
<li>
<button
className="dropdown-item"
onClick={() => dispatch(setProjectId(null))}
>
All Projects
</button>
</li>
)}
{[...projectNames]
.sort((a, b) => a?.name?.localeCompare(b.name))
.map((project) => (
<li key={project?.id}>
<button
className="dropdown-item"
onClick={() =>
dispatch(setProjectId(project?.id))
}
onClick={() => dispatch(setProjectId(project?.id))}
>
{project?.name}{" "}
{project?.shortName ? (
<span className="text-primary fw-semibold ">
{" "}
{project?.name}
{project?.shortName && (
<span className="text-primary fw-semibold ms-1">
({project?.shortName})
</span>
) : (
""
)}
</button>
</li>
@ -226,11 +226,9 @@ const Header = () => {
</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>)}
<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">
@ -269,7 +267,6 @@ const Header = () => {
</span>
Dashboard
</a>
<small>User Dashboard</small>
</div>
<div className="dropdown-shortcuts-item col">
@ -282,7 +279,6 @@ const Header = () => {
</span>
Projects
</a>
<small>Projects List</small>
</div>
</div>
@ -323,7 +319,6 @@ const Header = () => {
</span>
Allocate Work
</a>
<small>Work Allocations</small>
</div>
<div className="dropdown-shortcuts-item col">
@ -336,321 +331,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 +395,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 +412,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>

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

@ -2,34 +2,39 @@ 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 AboutProject = () => {
const [IsOpenModal, setIsOpenModal] = useState(false);
const {mutate: UpdateProjectDetails, isPending} = useUpdateProject({
onSuccessCallback: () =>
{
setIsOpenModal(false)
onSuccessCallback: () => {
setIsOpenModal(false);
}
} )
const ClientQuery = useQueryClient()
const {projectId} = useParams();
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 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 ); // 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 && (
@ -126,7 +131,6 @@ const AboutProject = () =>
</>
)}
{isLoading && <span>loading...</span>}
</>
);

13
src/components/Project/Infrastructure/EditActivityModal.jsx
View File

@ -116,8 +116,17 @@ useEffect(() => {
floorId: floor?.id,
workAreaId: workArea?.id,
};
let plannedTask = workItem?.workItem?.plannedWork || workItem?.plannedWork || 0
UpdateTask({payload:[payload],PreviousPlannedWork:plannedTask})
let plannedTask =
workItem?.workItem?.plannedWork || workItem?.plannedWork || 0;
let completedTask = workItem?.workItem?.completedWork || workItem?.completedWork || 0
UpdateTask({
payload: [payload],
PreviousPlannedWork: plannedTask,
buildingId: building?.id,
floorId: floor?.id,
workAreaId: workArea?.id,
previousCompletedWork:completedTask
});
}
return (
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>

11
src/components/Project/Infrastructure/TaskModel.jsx
View File

@ -69,10 +69,9 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
const selectedCategory = categoryData?.find((c) => c.id === watchCategoryId);
const { mutate: CreateTask, isPending } = useManageTask({
onSuccessCallback: ( response ) =>
{
showToast( response?.message, "success" )
onClose?.()
onSuccessCallback: (response) => {
showToast(response?.message, "success");
onClose?.();
},
});
useEffect(() => {
@ -97,7 +96,9 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
const onSubmitForm = async (data) => {
const payload = [data];
CreateTask({payload,PreviousPlannedWork:0});
CreateTask({payload:payload,buildingId: data.buildingID,
floorId: data.floorId,
workAreaId: data.workAreaId, PreviousPlannedWork:0,previousCompletedWork:0});
};
return (

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

@ -10,7 +10,10 @@ import {
} from "../../../utils/constants";
import ConfirmModal from "../../common/ConfirmModal";
import ProjectRepository from "../../../repositories/ProjectRepository";
import { useDeleteProjectTask, useProjectDetails } from "../../../hooks/useProjects";
import {
useDeleteProjectTask,
useProjectDetails,
} from "../../../hooks/useProjects";
import showToast from "../../../services/toastService";
import {
cacheData,
@ -28,7 +31,9 @@ const WorkItem = ({
forWorkArea,
deleteHandleTask,
}) => {
const { projectId } = useParams();
// const { projectId } = useParams();
const isTaskPlanning = /^\/activities\/task$/.test(location.pathname);
const [itemName, setItemName] = useState("");
const [NewWorkItem, setNewWorkItem] = useState();
const [isModalOpen, setIsModalOpen] = useState(false);
@ -40,7 +45,6 @@ const WorkItem = ({
const [loadingDelete, setLoadingDelete] = useState(false);
const project = getCachedData("projectInfo");
const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);
@ -69,7 +73,7 @@ const WorkItem = ({
};
setNewWorkItem(updated);
}
}
};
let assigndata = {
building: forBuilding,
floor: forFloor,
@ -85,15 +89,17 @@ const WorkItem = ({
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, []);
const handleSubmit = async () => {
let WorkItemId = workItem.workItemId || workItem.id;
DeleteTask({workItemId:WorkItemId,workAreaId:forWorkArea?.id})
debugger
DeleteTask({
workItemId: WorkItemId,
workAreaId: forWorkArea?.id,
completedTask: workItem?.completedWork,
plannedTask: workItem?.plannedWork,
buildingId: forBuilding?.id,
floorId: forFloor?.id,
});
};
const PlannedWork =
@ -104,12 +110,20 @@ const WorkItem = ({
<>
{isModalOpen && (
<GlobalModel isOpen={isModalOpen} size="lg" closeModal={closeModal}>
<AssignTask assignData={assigndata} onClose={closeModal} setAssigned={refreshWorkItem} />
<AssignTask
assignData={assigndata}
onClose={closeModal}
setAssigned={refreshWorkItem}
/>
</GlobalModel>
)}
{showModal && (
<GlobalModel isOpen={showModal} size="lg" closeModal={()=>setShowModal(false)}>
<GlobalModel
isOpen={showModal}
size="lg"
closeModal={() => setShowModal(false)}
>
<EditActivityModal
workItem={workItem}
workArea={forWorkArea}
@ -167,7 +181,6 @@ const WorkItem = ({
: "NA"}
</td>
<td className="text-center table-cell-small d-none d-md-table-cell">
<span className="fw-light">
{hasWorkItem
@ -195,9 +208,7 @@ const WorkItem = ({
<td className="text-center d-none d-md-table-cell">
{hasWorkItem
? `${
NewWorkItem?.todaysAssigned ??
workItem?.todaysAssigned ??
"0"
NewWorkItem?.todaysAssigned ?? workItem?.todaysAssigned ?? "0"
}`
: "NA"}
</td>
@ -235,7 +246,7 @@ const WorkItem = ({
<td className="text-end align-items-middle border-top">
{/* Desktop (md and up): inline icons */}
<div className="d-none d-md-flex justify-content-end gap-1 px-2">
{!projectId &&
{isTaskPlanning &&
ManageAndAssignTak &&
PlannedWork !== CompletedWork && (
<i
@ -275,7 +286,7 @@ const WorkItem = ({
></i>
<ul className="dropdown-menu dropdown-menu-start">
{!projectId &&
{isTaskPlanning &&
ManageAndAssignTak &&
PlannedWork !== CompletedWork && (
<li>

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

@ -57,7 +57,7 @@ const ProjectCard = ({ projectData, recall }) => {
const handleClose = () => setShowModal(false);
const handleViewProject = () => {
navigate(`/projects/${projectData.id}`);
navigate(`/projects/details`);
};
const handleFormSubmit = (updatedProject) => {

2
src/components/Project/ProjectInfra.jsx
View File

@ -25,7 +25,7 @@ import GlobalModel from "../common/GlobalModel";
const ProjectInfra = ( {data, onDataChange, eachSiteEngineer} ) =>
{
const {projectId} = useParams()
const projectId = useSelector((store)=>store.localVariables.projectId)
const reloadedData = useSelector((store) => store.localVariables.reload);
const [ expandedBuildings, setExpandedBuildings ] = useState( [] );
const {projectInfra,isLoading,error} = useProjectInfra(projectId)

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

@ -14,7 +14,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
<ul className="nav nav-tabs ">
<li className="nav-item">
<a
className={`nav-link ${activePill === "profile" ? "active" : ""}`}
className={`nav-link ${activePill === "profile" ? "active" : ""} fs-6`}
href="#"
onClick={(e) => {
e.preventDefault();
@ -26,7 +26,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
</li>
<li className="nav-item">
<a
className={`nav-link ${activePill === "teams" ? "active" : ""}`}
className={`nav-link ${activePill === "teams" ? "active" : ""} fs-6`}
href="#"
onClick={(e) => {
e.preventDefault();
@ -38,7 +38,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
</li>
<li className={`nav-item ${!HasViewInfraStructure && "d-none"} `}>
<a
className={`nav-link ${activePill === "infra" ? "active" : ""}`}
className={`nav-link ${activePill === "infra" ? "active" : ""} fs-6`}
href="#"
onClick={(e) => {
e.preventDefault();
@ -53,20 +53,20 @@ const ProjectNav = ({ onPillClick, activePill }) => {
<a
className={`nav-link ${
activePill === "imagegallary" ? "active" : ""
}`}
} fs-6`}
href="#"
onClick={(e) => {
e.preventDefault(); // Prevent page reload
onPillClick("imagegallary");
}}
>
<i className="bx bxs-file-image bx-sm me-1_5"></i> <span className="d-none d-md-inline">Image Gallary</span>
<i className='bx bxs-cog bx-sm me-1_5'></i> <span className="d-none d-md-inline">project Setup</span>
</a>
</li>
{(DirAdmin || DireManager || DirUser) && (
<li className="nav-item">
<a
className={`nav-link ${activePill === "directory" ? "active" : ""}`}
className={`nav-link ${activePill === "directory" ? "active" : ""} fs-6`}
href="#"
onClick={(e) => {
e.preventDefault(); // Prevent page reload

283
src/components/Project/ProjectOverview.jsx
View File

@ -1,15 +1,168 @@
import React from "react";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import {
useEmployeesByProjectAllocated,
useProjects,
} from "../../hooks/useProjects";
import { formatNumber } from "../../utils/dateUtils";
import ProgressBar from "../common/ProgressBar";
import ReactApexChart from "react-apexcharts";
import Chart from "react-apexcharts";
const ProjectOverview = ({ project }) => {
const { projects } = useProjects();
const [current_project, setCurrentProject] = useState(
projects.find((pro) => pro.id == project)
);
const project_detail = projects.find((pro) => pro.id == project);
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const getProgressInPercentage = (planned, completed) => {
if (completed && planned) return (completed * 100) / planned;
else return 0;
};
//let project_detail = projects.find((pro) => pro.id == project);
// Utility function to check if a number has a decimal part
const hasDecimal = (num) => {
// Convert to string and check for a decimal point
// Or, check if the number is not equal to its integer part
return num % 1 !== 0;
};
// FormattedNumber component to display numbers with conditional decimal places
function FormattedNumber(value, locale = "en-US") {
// Ensure the value is a number
const numericValue = parseFloat(value);
// Handle non-numeric values gracefully
if (isNaN(numericValue)) {
return 0;
}
let options = {};
// Determine formatting options based on whether the number has a decimal part
if (hasDecimal(numericValue)) {
// If it has a decimal, format to exactly two decimal places
options = {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
};
} else {
// If it's a whole number, format to zero decimal places
options = {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
};
}
// Use Intl.NumberFormat for robust and locale-aware formatting
const formattedString = new Intl.NumberFormat(locale, options).format(
numericValue
);
return formattedString;
}
const getRadialBarOptions = (percentage) => {
return {
chart: {
height: 350,
type: "radialBar",
sparkline: {
// Often used with gauges for a minimalist look
enabled: true,
},
},
plotOptions: {
radialBar: {
startAngle: -90, // Start the gauge from the left (bottom-left)
endAngle: 90, // End the gauge at the right (bottom-right)
hollow: {
size: "70%", // Size of the hollow part of the bar
},
dataLabels: {
show: true,
name: {
show: true,
fontSize: "16px",
fontFamily: "Inter, sans-serif",
color: "#6B7280", // Tailwind gray-500
offsetY: -10,
},
value: {
show: true,
fontSize: "28px",
fontFamily: "Inter, sans-serif",
color: "#374151", // Tailwind gray-700
offsetY: 20,
formatter: function (val) {
return FormattedNumber(val) + "%"; // Format value as percentage
},
},
},
track: {
background: "#E5E7EB", // Tailwind gray-200 for the track
strokeWidth: "97%",
margin: 5, // margin in between segments
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 4,
opacity: 0.15,
},
},
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "horizontal",
shadeIntensity: 0.5,
gradientToColors: ["#6366F1"], // Tailwind indigo-500
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100],
},
},
stroke: {
lineCap: "round",
},
labels: ["Progress"],
series: [percentage],
};
};
const [radialPercentage, setRadialPercentage] = useState(75); // Initial percentage
const radialBarOptions = getRadialBarOptions(radialPercentage);
useEffect(() => {
if (current_project) {
let val = getProgressInPercentage(
current_project.plannedWork,
current_project.completedWork
);
setRadialPercentage(val);
} else setRadialPercentage(0);
}, [current_project]);
useEffect(() => {
setCurrentProject(projects.find((pro) => pro.id == selectedProject));
if (current_project) {
let val = getProgressInPercentage(
current_project.plannedWork,
current_project.completedWork
);
setRadialPercentage(val);
} else setRadialPercentage(0);
}, [selectedProject]);
return (
<div className="card mb-6">
@ -21,69 +174,75 @@ const ProjectOverview = ({ project }) => {
</h6>
</div>
<div className="card-body">
<ul className="list-unstyled mb-0 mt-3 pt-1">
<li className="d-flex align-items-center mb-3">
<i className="bx bx-check"></i>
<span className="fw-medium mx-2">Task Planned:</span>{" "}
<span>{formatNumber(project_detail?.plannedWork)}</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-star"></i>
<span className="fw-medium mx-2">Task Completed:</span>{" "}
<span>{formatNumber(project_detail?.completedWork)}</span>
</li>
<li className="d-flex align-items-center mb-3">
<i className="bx bx-user"></i>
<span className="fw-medium mx-2">Current team Size:</span>{" "}
<span>{project_detail?.teamSize}</span>
</li>
<li className=" mb-3">
{project_detail && (
<>
<div className="d-flex text-end mb-2 mt-5">
<small className="text-body text-muted ">
{/* {Math.floor(
getProgressInNumber(
project_detail.completedWork
)
) || 0}{" "} */}
{
(formatNumber(project_detail.plannedWork),
"/",
formatNumber(project_detail.completedWork))
}
% Completed
</small>
</div>
{/* <div
className="progress mb-4 rounded"
style={{ height: "8px" }}
>
<div
className="progress-bar rounded"
role="progressbar"
style={{
width: getProgress(
project_detail.plannedWork,
project_detail.completedWork
),
}}
aria-valuenow={project_detail.completedWork}
aria-valuemin="0"
aria-valuemax={project_detail.plannedWork}
></div>
</div> */}
<ProgressBar
completedWork={formatNumber(project_detail?.completedWork)}
plannedWork={formatNumber(project_detail?.plannedWork)}
className="m-0 text-info"
<ul className="list-unstyled m-0 p-0">
<li className="d-flex flex-wrap">
<div className="w-100 d-flex flex-wrap">
{/* Centered Chart */}
<div className="w-100 d-flex justify-content-center mb-3">
<div >
<Chart
options={radialBarOptions}
series={radialBarOptions.series}
type="radialBar"
height="100%"
/>
</>
)}
</div>
</div>
{/* Info Section */}
<div className="mb-2" style={{ flex: "1 1 auto" }}>
<div>
{/* Tasks Planned */}
<div className="d-flex align-items-center mb-3">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-primary">
<i className="bx bx-check text-primary fs-4"></i>
</span>
</div>
<div className="d-flex flex-column text-start">
<small className="fw-bold">Tasks Planned</small>
<h5 className="mb-0">
{FormattedNumber(current_project?.plannedWork)}
</h5>
</div>
</div>
{/* Tasks Completed */}
<div className="d-flex align-items-center mb-3">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-info">
<i className="bx bx-star text-info fs-4"></i>
</span>
</div>
<div className="d-flex flex-column text-start">
<small className="fw-bold">Tasks Completed</small>
<h5 className="mb-0">
{FormattedNumber(current_project?.completedWork)}
</h5>
</div>
</div>
{/* Team Size */}
<div className="d-flex align-items-center">
<div className="avatar me-2">
<span className="avatar-initial rounded-2 bg-label-primary">
<i className="bx bx-group text-primary fs-4"></i>
</span>
</div>
<div className="d-flex flex-column text-start">
<small className="fw-bold">Current Team Size</small>
<h5 className="mb-0">
{FormattedNumber(current_project?.teamSize)}
</h5>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
);
};

5
src/components/Project/Teams.jsx
View File

@ -7,7 +7,7 @@ import Avatar from "../common/Avatar";
import moment from "moment";
import ProjectRepository from "../../repositories/ProjectRepository";
import { useDispatch } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
@ -18,7 +18,8 @@ import {useEmployeesByProjectAllocated, useManageProjectAllocation} from "../../
const Teams = () =>
{
const {projectId} = useParams()
// const {projectId} = useParams()
const projectId = useSelector((store)=>store.localVariables.projectId)
const dispatch = useDispatch();
const { data, loading } = useMaster();

1
src/components/common/DateRangePicker.jsx
View File

@ -27,6 +27,7 @@ const DateRangePicker = ({
defaultDate: [startDate, endDate],
static: true,
clickOpens: true,
maxDate: endDate, // ✅ Disable future dates
onChange: (selectedDates, dateStr) => {
const [startDateString, endDateString] = dateStr.split(" to ");
onRangeChange?.({ startDate: startDateString, endDate: endDateString });

2
src/hooks/useEmployees.js
View File

@ -124,7 +124,7 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
const res = await EmployeeRepository.getAllEmployeeList(showInactive);
return res.data;
} else {
const res = await ProjectRepository.getEmployeesByProject(projectId);
const res = await EmployeeRepository.getEmployeeListByproject(projectId);
return res.data;
}
};

85
src/hooks/useImageGallery.js Normal file
View File

@ -0,0 +1,85 @@
import { useState, useCallback } from "react";
// import { ImageGalleryAPI } from "../repositories/ImageGalleyRepository";
import { ImageGalleryAPI } from "../repositories/ImageGalleryAPI";
const PAGE_SIZE = 10;
const useImageGallery = (selectedProjectId) => {
const [images, setImages] = useState([]);
const [allImagesData, setAllImagesData] = useState([]);
const [pageNumber, setPageNumber] = useState(1);
const [hasMore, setHasMore] = useState(true);
const [loading, setLoading] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
const fetchImages = useCallback(async (page = 1, filters = {}, reset = false) => {
if (!selectedProjectId) return;
try {
if (page === 1) {
setLoading(true);
} else {
setLoadingMore(true);
}
const res = await ImageGalleryAPI.ImagesGet(
selectedProjectId,
filters,
page,
PAGE_SIZE
);
const newBatches = res.data || [];
const receivedCount = newBatches.length;
setImages((prev) => {
if (page === 1 || reset) return newBatches;
const uniqueNew = newBatches.filter(
(batch) => !prev.some((b) => b.batchId === batch.batchId)
);
return [...prev, ...uniqueNew];
});
setAllImagesData((prev) => {
if (page === 1 || reset) return newBatches;
const uniqueAll = newBatches.filter(
(batch) => !prev.some((b) => b.batchId === batch.batchId)
);
return [...prev, ...uniqueAll];
});
setHasMore(receivedCount === PAGE_SIZE);
} catch (error) {
console.error("Error fetching images:", error);
if (page === 1) {
setImages([]);
setAllImagesData([]);
}
setHasMore(false);
} finally {
setLoading(false);
setLoadingMore(false);
}
}, [selectedProjectId]);
const resetGallery = useCallback(() => {
setImages([]);
setAllImagesData([]);
setPageNumber(1);
setHasMore(true);
}, []);
return {
images,
allImagesData,
pageNumber,
setPageNumber,
hasMore,
loading,
loadingMore,
fetchImages,
resetGallery,
};
};
export default useImageGallery;

25
src/hooks/usePagination.js
View File

@ -1,12 +1,31 @@
import { useState, useMemo } from "react";
import { useState, useMemo,useEffect } from "react";
const usePagination = (data, itemsPerPage) => {
const [currentPage, setCurrentPage] = useState(1);
const totalPages = Math.ceil(data?.length / itemsPerPage);
// const totalPages = Math.ceil(data?.length / itemsPerPage);
// add this new line
const totalPages = useMemo(() => {
return Math.ceil((data?.length || 0) / itemsPerPage);
}, [data?.length, itemsPerPage]);
useEffect(() => {
if (currentPage > totalPages && totalPages > 0) {
setCurrentPage(1);
} else if (!data || data.length === 0) {
setCurrentPage(1);
} else if (currentPage === 0 && totalPages > 0) {
setCurrentPage(1);
}
}, [data, totalPages, currentPage]);
const currentItems = useMemo(() => {
const startIndex = (currentPage - 1) * itemsPerPage;
return data?.slice(startIndex, startIndex + itemsPerPage);
// return data?.slice(startIndex, startIndex + itemsPerPage);
return data?.slice(startIndex, startIndex + itemsPerPage) || [];
}, [data, currentPage, itemsPerPage]);
const paginate = (pageNumber) => {

149
src/hooks/useProjects.js
View File

@ -311,14 +311,72 @@ export const useManageTask = ({ onSuccessCallback }) => {
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
return useMutation({
mutationFn: async ({ payload, PreviousPlannedWork }) =>
await ProjectRepository.manageProjectTasks(payload),
mutationFn: async ({
payload,
PreviousPlannedWork,
previousCompletedWork,
buildingId,
floorId,
workAreaId,
}) => await ProjectRepository.manageProjectTasks(payload),
onSuccess: (data, variables) => {
const { PreviousPlannedWork } = variables;
const {
workAreaId,
buildingId,
floorId,
PreviousPlannedWork,
previousCompletedWork,
} = variables;
queryClient.invalidateQueries({ queryKey: ["WorkItems"] });
const getPlannedDelta = (previous, current) => current - previous;
queryClient.setQueryData(["ProjectInfra", selectedProject], (oldData) => {
if (!oldData) return oldData;
const { workAreaId, floorId, buildingId } = variables;
const updatedData = JSON.parse(JSON.stringify(oldData));
return updatedData.map((building) => {
if (building.id !== buildingId) return building;
return {
...building,
floors: building.floors.map((floor) => {
if (floor.id !== floorId) return floor;
return {
...floor,
workAreas: floor.workAreas.map((area) => {
if (area.id !== workAreaId) return area;
const previousPlanned = PreviousPlannedWork ?? 0;
const currentPlanned =
data?.data[0]?.workItem.plannedWork ?? 0;
const plannedWorkDelta = getPlannedDelta(
previousPlanned,
currentPlanned
);
const updatedPlannedWork =
(area.plannedWork ?? 0) + plannedWorkDelta;
const previousCompleted = previousCompletedWork;
const currentCompleted =
data?.data[0]?.workItem.completedWork ?? 0;
const completedWorkDelta = getPlannedDelta(
previousCompleted,
currentCompleted
);
const updatedCompletedWork =
(area.completedWork ?? 0) + completedWorkDelta;
return {
...area,
plannedWork: updatedPlannedWork,
completedWork: updatedCompletedWork,
};
}),
};
}),
};
});
});
queryClient.setQueryData(["ProjectsList"], (projects) => {
if (!projects) return projects;
@ -326,20 +384,30 @@ export const useManageTask = ({ onSuccessCallback }) => {
return projects.map((project) => {
if (project.id !== selectedProject) return project;
const previous = PreviousPlannedWork ?? 0;
const current = data?.data[0]?.workItem.plannedWork ?? 0;
const previousPlanned = PreviousPlannedWork ?? 0;
const currentPlanned = data?.data[0]?.workItem.plannedWork ?? 0;
const plannedWorkDelta = getPlannedDelta(previous, current);
const plannedWorkDelta = getPlannedDelta(
previousPlanned,
currentPlanned
);
const updatedPlannedWork =
(project.plannedWork ?? 0) + plannedWorkDelta;
const previousCompleted = previousCompletedWork;
const currentCompleted = data?.data[0]?.workItem.completedWork ?? 0;
const completedWorkDelta = getPlannedDelta(
previousCompleted,
currentCompleted
);
const updatedCompletedWork =
(project.completedWork ?? 0) + completedWorkDelta;
return {
...project,
plannedWork: updatedPlannedWork,
completedWork: updatedCompletedWork,
};
});
});
if (onSuccessCallback) onSuccessCallback(data);
},
onError: (error) => {
@ -354,16 +422,73 @@ export const useManageTask = ({ onSuccessCallback }) => {
export const useDeleteProjectTask = (onSuccessCallback) => {
const queryClient = useQueryClient();
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
return useMutation({
mutationFn: async ({ workItemId, workAreaId }) => {
mutationFn: async ({
workItemId,
workAreaId,
completedTask,
plannedTask,
}) => {
return await ProjectRepository.deleteProjectTask(workItemId);
},
onSuccess: (_, variables) => {
showToast("Task deleted successfully", "success");
const { completedTask, plannedTask, workAreaId, buildingId, floorId } =
variables;
queryClient.invalidateQueries({
queryKey: ["WorkItems", variables.workAreaId],
});
queryClient.setQueryData(["ProjectInfra", selectedProject], (oldData) => {
if (!oldData) return oldData;
const { workAreaId, floorId, buildingId, plannedTask, completedTask } =
variables;
const updatedData = JSON.parse(JSON.stringify(oldData));
return updatedData.map((building) => {
if (building.id !== buildingId) return building;
return {
...building,
floors: building.floors.map((floor) => {
if (floor.id !== floorId) return floor;
return {
...floor,
workAreas: floor.workAreas.map((area) => {
if (area.id !== workAreaId) return area;
return {
...area,
plannedWork: (area.plannedWork ?? 0) - plannedTask,
completedWork: (area.completedWork ?? 0) - completedTask,
};
}),
};
}),
};
});
});
queryClient.setQueryData(["ProjectsList"], (projects) => {
if (!projects) return projects;
return projects.map((project) => {
if (project.id !== selectedProject) return project;
return {
...project,
plannedWork: (project.plannedWork ?? 0) - plannedTask,
completedWork: (project.completedWork ?? 0) - completedTask,
};
});
});
showToast("Task deleted successfully", "success");
if (onSuccessCallback) onSuccessCallback();
},
onError: (error) => {

5
src/hooks/useTasks.js
View File

@ -78,17 +78,17 @@ export const useAuditStatus = () => {
return { status, loading, error, refetch };
};
// ---------====================Mutation================------------------
// -----------------------Mutation------------------------
const toDate = new Date().toISOString().split("T")[0];
const dateFrom = new Date(Date.now() - 6 * 24 * 60 * 60 * 1000)
.toISOString()
.split("T")[0];
export const useReportTask = ({ onSuccessCallback, onErrorCallback } = {}) => {
const queryClient = useQueryClient();
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const queryClient = useQueryClient();
const { mutate, isPending, isSuccess, isError, error } = useMutation({
mutationFn: async ({ reportData, workAreaId }) => {
return await TasksRepository.reportTask(reportData);
@ -138,7 +138,6 @@ export const useReportTask = ({ onSuccessCallback, onErrorCallback } = {}) => {
};
});
});
showToast("Task Reported Successfully.", "success");
if (onSuccessCallback) onSuccessCallback(data);
},

31
src/pages/Activities/AttendancePage.jsx
View File

@ -21,13 +21,14 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
import eventBus from "../../services/eventBus";
import AttendanceRepository from "../../repositories/AttendanceRepository";
import { useProjectName } from "../../hooks/useProjects";
const AttendancePage = () => {
const [activeTab, setActiveTab] = useState("all");
const [ShowPending, setShowPending] = useState(false);
const loginUser = getCachedProfileData();
var selectedProject = useSelector((store) => store.localVariables.projectId);
// const { projects, loading: projectLoading } = useProjects();
const dispatch = useDispatch()
const {
attendance,
loading: attLoading,
@ -38,7 +39,8 @@ const AttendancePage = () => {
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [modelConfig, setModelConfig] = useState();
const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
const dispatch = useDispatch();
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
const [formData, setFormData] = useState({
markTime: "",
@ -130,6 +132,12 @@ const AttendancePage = () => {
const handleToggle = (event) => {
setShowOnlyCheckout(event.target.checked);
};
useEffect(() => {
if(selectedProject == null){
dispatch(setProjectId(projectNames[0]?.id));
}
},[])
useEffect(() => {
if (modelConfig !== null) {
@ -140,18 +148,7 @@ const AttendancePage = () => {
setAttendances(attendance);
}, [attendance]);
// useEffect(() => {
// if (selectedProject === 1 || selectedProject === undefined) {
// dispatch(setProjectId(loginUser?.projects[0]));
// }
// }, [selectedProject, loginUser?.projects]);
// Filter attendance data based on the toggle
// const filteredAttendance = showOnlyCheckout
// ? attendances?.filter(
// (att) => att?.checkOutTime !== null && att?.checkInTime !== null
// )
// : attendances;
const filteredAttendance = ShowPending
? attendances?.filter(
(att) => att?.checkInTime !== null && att?.checkOutTime === null
@ -233,7 +230,7 @@ const AttendancePage = () => {
<li className="nav-item">
<button
type="button"
className={`nav-link ${activeTab === "all" ? "active" : ""}`}
className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
onClick={() => setActiveTab("all")}
data-bs-toggle="tab"
data-bs-target="#navs-top-home"
@ -244,7 +241,7 @@ const AttendancePage = () => {
<li className="nav-item">
<button
type="button"
className={`nav-link ${activeTab === "logs" ? "active" : ""}`}
className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
onClick={() => setActiveTab("logs")}
data-bs-toggle="tab"
data-bs-target="#navs-top-profile"
@ -257,7 +254,7 @@ const AttendancePage = () => {
type="button"
className={`nav-link ${
activeTab === "regularization" ? "active" : ""
}`}
} fs-6`}
onClick={() => setActiveTab("regularization")}
data-bs-toggle="tab"
data-bs-target="#navs-top-messages"
@ -269,6 +266,7 @@ const AttendancePage = () => {
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
{activeTab === "all" && (
<>
{!attLoading && (
<div className="tab-pane fade show active py-0">
<Attendance
attendance={filteredAttendance}
@ -278,6 +276,7 @@ const AttendancePage = () => {
showOnlyCheckout={ShowPending}
/>
</div>
)}
{!attLoading && filteredAttendance?.length === 0 && (
<p>
{" "}

20
src/pages/Activities/DailyTask.jsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import Breadcrumb from "../../components/common/Breadcrumb";
import { useTaskList } from "../../hooks/useTasks";
import { useProjects } from "../../hooks/useProjects";
import { useProjectName, useProjects } from "../../hooks/useProjects";
import { setProjectId } from "../../slices/localVariablesSlice";
import { ReportTask } from "../../components/Activities/ReportTask";
import ReportTaskComments from "../../components/Activities/ReportTaskComments";
@ -14,13 +14,15 @@ import GlobalModel from "../../components/common/GlobalModel";
import AssignTask from "../../components/Project/AssignTask";
import SubTask from "../../components/Activities/SubTask";
import {formatNumber} from "../../utils/dateUtils";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { APPROVE_TASK, ASSIGN_REPORT_TASK } from "../../utils/constants";
const DailyTask = () => {
const [searchParams] = useSearchParams();
const projectIdFromUrl = searchParams.get("project");
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const dispatch = useDispatch()
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
const [filters, setFilters] = useState({
@ -32,6 +34,8 @@ const DailyTask = () => {
const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK)
const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK)
const {
TaskList,
@ -44,7 +48,11 @@ const DailyTask = () => {
dateRange?.endDate || null
);
useEffect(() => {
if(selectedProject == null){
dispatch(setProjectId(projectNames[0]?.id));
}
},[])
const [TaskLists, setTaskLists] = useState([]);
const [dates, setDates] = useState([]);
const popoverRefs = useRef([]);
@ -386,6 +394,7 @@ const DailyTask = () => {
</td>
<td className="text-center">
<div className="d-flex justify-content-end">
{ ReportTaskRights &&
<button
type="button"
className={`btn btn-xs btn-primary ${
@ -400,7 +409,8 @@ const DailyTask = () => {
>
Report
</button>
{task.reportedDate && (
}
{(ApprovedTaskRights && task.reportedDate ) && (
<button
type="button"
className={`btn btn-xs btn-warning ${

16
src/pages/Activities/TaskPlannng.jsx
View File

@ -1,9 +1,23 @@
import React from "react";
import React,{useEffect} from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import InfraPlanning from "../../components/Activities/InfraPlanning";
import { useProjectName } from "../../hooks/useProjects";
import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice";
const TaskPlannng = () => {
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const dispatch = useDispatch()
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
useEffect(() => {
if(selectedProject == null){
dispatch(setProjectId(projectNames[0]?.id));
}
},[])
return (
<>

2
src/pages/Directory/Directory.jsx
View File

@ -260,7 +260,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
}, [prefernceContacts]);
return (
<div className="container-fluid">
<div className={IsPage ? "container-fluid":""}>
{IsPage && (
<Breadcrumb
data={[

305
src/pages/Gallary/ImageGallary.jsx
View File

@ -1,8 +1,7 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import "./ImageGallery.css";
import { ImageGalleryAPI } from "./ImageGalleryAPI";
import moment from "moment";
import { useSelector } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import { useModal } from "./ModalContext";
import ImagePop from "./ImagePop";
import Avatar from "../../components/common/Avatar";
@ -10,16 +9,35 @@ import DateRangePicker from "../../components/common/DateRangePicker";
import eventBus from "../../services/eventBus";
import Breadcrumb from "../../components/common/Breadcrumb";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import useImageGallery from "../../hooks/useImageGallery";
import { useProjectName } from "../../hooks/useProjects";
import { setProjectId } from "../../slices/localVariablesSlice";
const PAGE_SIZE = 10;
const SCROLL_THRESHOLD = 5;
const ImageGallery = () => {
const [images, setImages] = useState([]);
const [allImagesData, setAllImagesData] = useState([]);
const [pageNumber, setPageNumber] = useState(1);
const [hasMore, setHasMore] = useState(true);
const selectedProjectId = useSelector((store) => store.localVariables.projectId);
const dispatch = useDispatch()
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
useEffect(() => {
if(selectedProjectId == null){
dispatch(setProjectId(projectNames[0]?.id));
}
},[])
const {
images,
allImagesData,
pageNumber,
setPageNumber,
hasMore,
loading,
loadingMore,
fetchImages,
resetGallery,
} = useImageGallery(selectedProjectId);
const { openModal } = useModal();
const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD');
@ -58,8 +76,6 @@ const ImageGallery = () => {
const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
const [hoveredImage, setHoveredImage] = useState(null);
const [loading, setLoading] = useState(true);
const [loadingMore, setLoadingMore] = useState(false);
const imageGroupRefs = useRef({});
const loaderRef = useRef(null);
@ -91,71 +107,18 @@ const ImageGallery = () => {
useEffect(() => {
if (!selectedProjectId) {
setImages([]);
setAllImagesData([]);
setLoading(false);
setHasMore(false);
resetGallery();
return;
}
setImages([]);
setPageNumber(1);
setHasMore(true);
setLoading(true);
setAllImagesData([]);
resetGallery();
fetchImages(1, appliedFilters, true);
}, [selectedProjectId, appliedFilters]);
const fetchImages = useCallback(async (page, filters) => {
if (!selectedProjectId) return;
try {
if (page === 1) {
setLoading(true);
} else {
setLoadingMore(true);
}
const res = await ImageGalleryAPI.ImagesGet(selectedProjectId, filters, page, PAGE_SIZE);
const newBatches = res.data || [];
const receivedCount = newBatches.length;
setImages((prevImages) => {
const uniqueNewBatches = newBatches.filter(
(newBatch) => !prevImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
);
return [...prevImages, ...uniqueNewBatches];
});
setAllImagesData((prevAllImages) => {
const uniqueAllImages = newBatches.filter(
(newBatch) => !prevAllImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
);
return [...prevAllImages, ...uniqueAllImages];
});
setHasMore(receivedCount === PAGE_SIZE);
} catch (err) {
console.error("Error fetching images:", err);
if (page === 1) {
setImages([]);
setAllImagesData([]);
}
setHasMore(false);
} finally {
setLoading(false);
setLoadingMore(false);
}
}, [selectedProjectId]);
useEffect(() => {
const handleExternalEvent = (data) => {
if (selectedProjectId === data.projectId) {
setImages([]);
setAllImagesData([]);
setPageNumber(1);
setHasMore(true);
resetGallery();
fetchImages(1, appliedFilters, true);
}
};
@ -196,20 +159,13 @@ const ImageGallery = () => {
if (pageNumber > 1) {
fetchImages(pageNumber, appliedFilters);
}
}, [pageNumber, fetchImages, appliedFilters]);
}, [pageNumber]);
const getUniqueValuesWithIds = useCallback((idKey, nameKey) => {
const map = new Map();
allImagesData.forEach(batch => {
let id;
if (idKey === "floorIds") {
id = batch.floorIds;
} else {
id = batch[idKey];
}
let id = idKey === "floorIds" ? batch.floorIds : batch[idKey];
const name = batch[nameKey];
if (id && name && !map.has(id)) {
map.set(id, name);
}
@ -272,30 +228,12 @@ const ImageGallery = () => {
const handleApplyFilters = useCallback(() => {
const payload = {
buildingIds:
selectedFilters.building.length > 0
? selectedFilters.building.map((item) => item[0])
: null,
floorIds:
selectedFilters.floor.length > 0
? selectedFilters.floor.map((item) => item[0])
: null,
workAreaIds:
selectedFilters.workArea.length > 0
? selectedFilters.workArea.map((item) => item[0])
: null,
workCategoryIds:
selectedFilters.workCategory.length > 0
? selectedFilters.workCategory.map((item) => item[0])
: null,
activityIds:
selectedFilters.activity.length > 0
? selectedFilters.activity.map((item) => item[0])
: null,
uploadedByIds:
selectedFilters.uploadedBy.length > 0
? selectedFilters.uploadedBy.map((item) => item[0])
: null,
buildingIds: selectedFilters.building.length ? selectedFilters.building.map((item) => item[0]) : null,
floorIds: selectedFilters.floor.length ? selectedFilters.floor.map((item) => item[0]) : null,
workAreaIds: selectedFilters.workArea.length ? selectedFilters.workArea.map((item) => item[0]) : null,
workCategoryIds: selectedFilters.workCategory.length ? selectedFilters.workCategory.map((item) => item[0]) : null,
activityIds: selectedFilters.activity.length ? selectedFilters.activity.map((item) => item[0]) : null,
uploadedByIds: selectedFilters.uploadedBy.length ? selectedFilters.uploadedBy.map((item) => item[0]) : null,
startDate: selectedFilters.startDate || null,
endDate: selectedFilters.endDate || null,
};
@ -303,30 +241,23 @@ const ImageGallery = () => {
const areFiltersChanged = Object.keys(payload).some(key => {
const oldVal = appliedFilters[key];
const newVal = payload[key];
if (Array.isArray(oldVal) && Array.isArray(newVal)) {
if (oldVal.length !== newVal.length) return true;
const oldSet = new Set(oldVal);
const newSet = new Set(newVal);
if (oldSet.size !== newSet.size) return true;
for (const item of newSet) {
if (!oldSet.has(item)) return true;
}
return false;
}
if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) {
return false;
}
if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) return false;
return oldVal !== newVal;
});
if (areFiltersChanged) {
setAppliedFilters(payload);
setImages([]);
setPageNumber(1);
setHasMore(true);
resetGallery();
}
// Removed setIsFilterPanelOpen(false); to keep the drawer open
}, [selectedFilters, appliedFilters]);
const handleClearAllFilters = useCallback(() => {
@ -353,9 +284,7 @@ const ImageGallery = () => {
endDate: null,
};
setAppliedFilters(initialStateApplied);
setImages([]);
setPageNumber(1);
setHasMore(true);
resetGallery();
}, []);
const scrollLeft = useCallback((key) => {
@ -382,9 +311,7 @@ const ImageGallery = () => {
Clear
</button>
)}
{type !== "dateRange" &&
selectedFilters[type] &&
selectedFilters[type].length > 0 && (
{type !== "dateRange" && selectedFilters[type]?.length > 0 && (
<button
className="clear-button"
onClick={(e) => {
@ -395,9 +322,7 @@ const ImageGallery = () => {
Clear
</button>
)}
<span className="collapse-icon">
{collapsedFilters[type] ? '+' : '-'}
</span>
<span className="collapse-icon">{collapsedFilters[type] ? '+' : '-'}</span>
</div>
</div>
{!collapsedFilters[type] && (
@ -406,31 +331,22 @@ const ImageGallery = () => {
<div className="date-range-inputs">
<DateRangePicker
onRangeChange={setDateRange}
defaultStartDate={selectedFilters.startDate || yesterday}
defaultEndDate={selectedFilters.endDate || moment().format('YYYY-MM-DD')}
endDateMode="today"
startDate={selectedFilters.startDate}
endDate={selectedFilters.endDate}
/>
</div>
) : (
items.map((item) => {
const itemId = item[0];
const itemName = item[1];
const isChecked = selectedFilters[type].some(
(selectedItem) => selectedItem[0] === itemId
);
return (
items.map(([itemId, itemName]) => (
<label key={itemId}>
<input
type="checkbox"
checked={isChecked}
checked={selectedFilters[type].some((item) => item[0] === itemId)}
onChange={() => toggleFilter(type, itemId, itemName)}
/>
{itemName}
</label>
);
})
))
)}
</div>
)}
@ -439,39 +355,24 @@ const ImageGallery = () => {
return (
<div className={`gallery-container container-fluid ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
<Breadcrumb
data={[
{ label: "Home", link: "/" },
{ label: "Gallary", link: null },
]}
></Breadcrumb>
<Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallary", link: null }]} />
<div className="main-content">
<button
className={`filter-button btn-primary ${isFilterPanelOpen ? "closed-icon" : ""}`}
onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
ref={filterButtonRef}
>
{isFilterPanelOpen ? (
<i className="fa-solid fa-times fs-5"></i>
) : (
<><i className="fa-solid fa-filter ms-1 fs-5"></i></>
)}
{isFilterPanelOpen ? <i className="fa-solid fa-times fs-5"></i> : <i className="fa-solid fa-filter ms-1 fs-5"></i>}
</button>
<div className="activity-section">
{loading && pageNumber === 1 ? (
<div className="spinner-container">
<div className="spinner" />
</div>
<div className="spinner-container"><div className="spinner" /></div>
) : images.length > 0 ? (
images.map((batch) => {
const firstDoc = batch.documents[0];
const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""
}`.trim();
const date = formatUTCToLocalTime(firstDoc?.uploadedAt)
const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""}`.trim();
const date = formatUTCToLocalTime(firstDoc?.uploadedAt);
const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
return (
@ -479,29 +380,15 @@ const ImageGallery = () => {
<div className="group-heading">
<div className="d-flex flex-column">
<div className="d-flex align-items-center mb-1">
<Avatar
size="xs"
firstName={firstDoc?.uploadedBy?.firstName}
lastName={firstDoc?.uploadedBy?.lastName}
className="me-2"
/>
<Avatar size="xs" firstName={firstDoc?.uploadedBy?.firstName} lastName={firstDoc?.uploadedBy?.lastName} className="me-2" />
<div className="d-flex flex-column align-items-start">
<strong className="user-name-text">
{userName}
</strong>
<span className="me-2">
{date}
</span>
<strong className="user-name-text">{userName}</strong>
<span className="me-2">{date}</span>
</div>
</div>
</div>
<div className="location-line">
<div>
{batch.buildingName} &gt; {batch.floorName} &gt;{" "}
<strong>{batch.workAreaName || "Unknown"} &gt;{" "}
{batch.activityName}</strong>
</div>
<div>{batch.buildingName} &gt; {batch.floorName} &gt; <strong>{batch.workAreaName || "Unknown"} &gt; {batch.activityName}</strong></div>
{batch.workCategoryName && (
<div className="work-category-display ms-2">
<span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
@ -511,106 +398,52 @@ const ImageGallery = () => {
)}
</div>
</div>
<div className="image-group-wrapper">
{showScrollButtons && (
<button
className="scroll-arrow left-arrow"
onClick={() => scrollLeft(batch.batchId)}
>
&#8249;
</button>
)}
<div
className="image-group-horizontal"
ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
>
{showScrollButtons && <button className="scroll-arrow left-arrow" onClick={() => scrollLeft(batch.batchId)}>&#8249;</button>}
<div className="image-group-horizontal" ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}>
{batch.documents.map((doc, idx) => {
const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY");
const hoverTime = moment(doc.uploadedAt).format("hh:mm A");
return (
<div
key={doc.id}
className="image-card"
onClick={() =>
openModal(<ImagePop batch={batch} initialIndex={idx} />)
}
onMouseEnter={() => setHoveredImage(doc)}
onMouseLeave={() => setHoveredImage(null)}
>
<div key={doc.id} className="image-card" onClick={() => openModal(<ImagePop batch={batch} initialIndex={idx} />)} onMouseEnter={() => setHoveredImage(doc)} onMouseLeave={() => setHoveredImage(null)}>
<div className="image-wrapper">
<img src={doc.url} alt={`Image ${idx + 1}`} />
</div>
{hoveredImage === doc && (
<div className="image-hover-description">
<p>
<strong>Date:</strong> {hoverDate}
</p>
<p>
<strong>Time:</strong> {hoverTime}
</p>
<p>
<strong>Activity:</strong> {batch.activityName}
</p>
<p><strong>Date:</strong> {hoverDate}</p>
<p><strong>Time:</strong> {hoverTime}</p>
<p><strong>Activity:</strong> {batch.activityName}</p>
</div>
)}
</div>
);
})}
</div>
{showScrollButtons && (
<button
className="scroll-arrow right-arrow"
onClick={() => scrollRight(batch.batchId)}
>
&#8250;
</button>
)}
{showScrollButtons && <button className="scroll-arrow right-arrow" onClick={() => scrollRight(batch.batchId)}>&#8250;</button>}
</div>
</div>
);
})
) : (
!loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
No images match the selected filters.
</p>
!loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>No images match the selected filters.</p>
)}
<div ref={loaderRef} style={{ height: '50px', margin: '20px 0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
{loadingMore && hasMore && <div className="spinner" />}
{!hasMore && !loading && images.length > 0 && (
<p style={{ color: '#aaa' }}>You've reached the end of the images.</p>
)}
{!hasMore && !loading && images.length > 0 && <p style={{ color: '#aaa' }}>You've reached the end of the images.</p>}
</div>
</div>
</div>
<div
className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`}
tabIndex="-1"
id="filterOffcanvas"
aria-labelledby="filterOffcanvasLabel"
ref={filterPanelRef}
>
<div className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`} tabIndex="-1" id="filterOffcanvas" aria-labelledby="filterOffcanvasLabel" ref={filterPanelRef}>
<div className="offcanvas-header">
<h5 className="offcanvas-title" id="filterOffcanvasLabel">
Filters
</h5>
<button
type="button"
className="btn-close"
onClick={() => setIsFilterPanelOpen(false)}
aria-label="Close"
></button>
<h5 className="offcanvas-title" id="filterOffcanvasLabel">Filters</h5>
<button type="button" className="btn-close" onClick={() => setIsFilterPanelOpen(false)} aria-label="Close" />
</div>
<div className="filter-actions mt-auto mx-2">
<button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
Clear All
</button>
<button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
Apply Filters
</button>
<button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>Clear All</button>
<button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>Apply Filters</button>
</div>
<div className="offcanvas-body d-flex flex-column">
{renderFilterCategory("Date Range", [], "dateRange")}
@ -620,8 +453,6 @@ const ImageGallery = () => {
{renderFilterCategory("Activity", activities, "activity")}
{renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
{renderFilterCategory("Work Category", workCategories, "workCategory")}
</div>
</div>
</div>

96
src/pages/Gallary/ImagePop.css
View File

@ -1,102 +1,148 @@
/* Image Modal Overlay */
.image-modal-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 9999; /* High z-index to ensure it's on top */
z-index: 9999;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */
background-color: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
}
/* Main Modal Content Box */
.image-modal-content {
background: #fff;
padding: 24px;
max-width: 90%; /* Responsive max-width */
max-height: 100%; /* Responsive max-height */
max-width: 50%;
max-height: 95vh; /* Limits the modal's height to 95% of viewport height */
border-radius: 12px;
position: relative;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
text-align: center;
display: flex; /* Use flexbox for internal layout */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto; /* Enables vertical scrolling */
/* --- HIDE SCROLLBAR FOR MAIN MODAL CONTENT --- */
/* For Webkit browsers (Chrome, Safari, Edge) */
&::-webkit-scrollbar {
width: 0px; /* Hide vertical scrollbar */
height: 0px; /* Hide horizontal scrollbar, though unlikely needed here */
}
/* For Firefox */
scrollbar-width: none; /* Hide scrollbar in Firefox */
/* For Internet Explorer and Edge (legacy) */
-ms-overflow-style: none;
/* --- END HIDE SCROLLBAR --- */
}
/* Image Styles */
.modal-image {
max-width: 100%;
max-height: 70vh; /* Limits image height to 70% of viewport height */
max-height: 70vh;
width: auto;
border-radius: 10px;
object-fit: contain; /* Ensures the whole image is visible without cropping */
object-fit: contain;
margin-bottom: 20px;
flex-shrink: 0; /* Prevent image from shrinking if content is too large */
flex-shrink: 0;
}
.image-details {
/* Scrollable Container for Text Details */
.image-details-scroll-container {
width: 100%;
flex-grow: 1;
max-height: calc(95vh - 70vh - (24px * 2) - 20px); /* Approximate calculation for text area height */
overflow-y: auto; /* Enables vertical scrolling for details */
text-align: left;
padding-right: 5px; /* Add some padding so text doesn't touch the hidden scrollbar area */
/* --- HIDE SCROLLBAR FOR TEXT DETAILS SECTION --- */
/* For Webkit browsers (Chrome, Safari, Edge) */
&::-webkit-scrollbar {
width: 0px; /* Hide vertical scrollbar */
height: 0px; /* Hide horizontal scrollbar */
}
/* For Firefox */
scrollbar-width: none; /* Hide scrollbar in Firefox */
/* For Internet Explorer and Edge (legacy) */
-ms-overflow-style: none;
/* --- END HIDE SCROLLBAR --- */
}
/* Image Details Section (inside the scroll container) */
.image-details {
color: #444;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
width: 100%; /* Ensure details section takes full width */
width: 100%;
text-align: left;
}
.image-details p {
margin: 4px 0; /* Reduce vertical space between lines in details */
margin: 4px 0;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
text-overflow: initial;
text-align: left;
}
/* Close Button */
.close-button {
position: absolute;
top: 1px; /* Position relative to the modal content */
top: 1px;
right: 8px;
font-size: 30px;
background: none;
border: none;
color: black; /* White color for visibility on dark overlay */
color: black;
cursor: pointer;
padding: 0;
line-height: 1;
z-index: 10000; /* Ensure it's above everything else */
z-index: 10000;
}
/* Styles for the navigation buttons */
/* Navigation Buttons */
.nav-button {
position: absolute;
top: 50%; /* Vertically center them */
transform: translateY(-50%); /* Adjust for perfect vertical centering */
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px 15px;
font-size: 30px;
cursor: pointer;
z-index: 1000; /* Ensure buttons are above the image */
border-radius: 50%; /* Make them circular */
z-index: 1000;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease; /* Smooth hover effect */
transition: background-color 0.3s ease;
}
.nav-button:hover {
background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */
background-color: rgba(0, 0, 0, 0.8);
}
.nav-button.prev-button {
left: 0px; /* Position left arrow */
left: 0px;
}
.nav-button.next-button {
right: 0px; /* Position right arrow */
right: 0px;
}
/* Style for disabled buttons (optional) */
/* Disabled Button Style */
.nav-button:disabled {
opacity: 0.5;
cursor: not-allowed;

26
src/pages/authentication/ChangePassword.jsx
View File

@ -69,22 +69,17 @@ const ChangePasswordPage = ({ onClose }) => {
className="modal d-flex align-items-center justify-content-center show"
tabIndex="-1"
role="dialog"
style={{ display: "flex", backgroundColor: "rgba(0,0,0,0.5)" }}
style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
>
<div className="modal-dialog" role="document">
<div className="modal-header">
{" "}
<div className="modal-content p-10 rounded shadow bg-white position-relative">
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
style={{ top: "40px", right: "15px" }}
aria-label="Close"
className="btn-close"
data-bs-dismiss="modal" aria-label="Close"
onClick={onClose} // Use onClick to trigger onClose function
style={{ position: "absolute", top: "15px", right: "15px" }} // Example positioning
></button>
</div>
<div className="modal-content p-10 rounded shadow bg-white position-relative">
{/* Close Button */}
<h5 className="mb-2">Change Password</h5>
<p className="mb-4" style={{ fontSize: "14px" }}>
@ -119,7 +114,6 @@ const ChangePasswordPage = ({ onClose }) => {
)}
</div>
{/* <div className="row"> */}
<div className="mb-3 text-start">
<label className="form-label">New Password</label>
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
@ -180,14 +174,14 @@ const ChangePasswordPage = ({ onClose }) => {
</div>
)}
</div>
{/* </div> */}
<div className="d-flex justify-content-center pt-2">
<div className="d-flex justify-content-center pt-2 text-muted small">
Your password must have at least 8 characters and include a lower
case latter, an uppercase letter, a number, and a special
case letter, an uppercase letter, a number, and a special
character.
</div>
{/* Action Buttons */}
<div className="d-flex justify-content-center pt-2">
<div className="d-flex justify-content-center pt-4">
<button
type="submit"
className="btn btn-primary btn-sm me-2"

37
src/pages/authentication/LoginWithOtp.jsx
View File

@ -29,6 +29,8 @@ const LoginWithOtp = () => {
handleSubmit,
formState: { errors, isSubmitted },
getValues,
setValue,
trigger,
} = useForm({
resolver: zodResolver(otpSchema),
});
@ -64,6 +66,7 @@ const formatTime = (seconds) => {
return `${min}:${sec}`;
};
// Time Logic for OTP expiry
useEffect(() => {
const otpSentTime = localStorage.getItem("otpSentTime");
const now = Date.now();
@ -74,6 +77,8 @@ useEffect(() => {
setTimeLeft(remaining);
}
}, []);
useEffect(() => {
if (timeLeft <= 0) return;
@ -92,6 +97,30 @@ useEffect(() => {
return () => clearInterval(timer);
}, [timeLeft]);
// Handle Paste Event
const handlePaste = (e) => {
e.preventDefault();
const pastedData = e.clipboardData.getData("text/plain").trim();
if (pastedData.match(/^\d{4}$/)) {
for (let i = 0; i < pastedData.length; i++) {
setValue(`otp${i + 1}`, pastedData[i], { shouldValidate: true });
if (inputRefs.current[i + 1]) {
inputRefs.current[i + 1].focus();
}
}
trigger(["otp1", "otp2", "otp3", "otp4"]);
} else {
showToast("Invalid OTP format pasted. Please enter 4 digits")
for (let i = 0; i < 4; i++) {
setValue(`otp${i + 1}`, "")
}
}
}
return (
<AuthWrapper>
@ -109,8 +138,7 @@ useEffect(() => {
key={num}
type="text"
maxLength={1}
className={`form-control text-center ${
errors[`otp${num}`] ? "is-invalid" : ""
className={`form-control text-center ${errors[`otp${num}`] ? "is-invalid" : ""
}`}
ref={(el) => {
inputRefs.current[idx] = el;
@ -121,6 +149,9 @@ useEffect(() => {
onChange(e);
if (/^\d$/.test(val) && idx < 3) {
inputRefs.current[idx + 1]?.focus();
} else if (val === "" && idx > 0) {
inputRefs.current[idx - 1]?.focus();
}
}}
onKeyDown={(e) => {
@ -132,6 +163,8 @@ useEffect(() => {
inputRefs.current[idx - 1]?.focus();
}
}}
onPaste={idx === 0 ? handlePaste : undefined}
style={{ width: "40px", height: "40px", fontSize: "15px" }}
{...rest}
/>

13
src/pages/employee/AttendancesEmployeeRecords.jsx
View File

@ -85,7 +85,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
const currentDate = new Date().toLocaleDateString("en-CA");
const { currentPage, totalPages, currentItems, paginate } = usePagination(
sortedFinalList,
10
20
);
useEffect(() => {
@ -145,8 +145,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
</div>
<div className="col-md-2 m-0 text-end">
<i
className={`bx bx-refresh cursor-pointer fs-4 ${
loading ? "spin" : ""
className={`bx bx-refresh cursor-pointer fs-4 ${loading ? "spin" : ""
}`}
data-toggle="tooltip"
title="Refresh"
@ -224,7 +223,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
</table>
)}
</div>
{!loading && data.length > 5 && (
{!loading && sortedFinalList.length > 20 && (
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<li
@ -240,8 +239,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
className={`page-item ${currentPage === index + 1 ? "active" : ""
}`}
>
<button
@ -253,8 +251,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`}
>
<button

268
src/pages/employee/EmployeeList.jsx
View File

@ -5,11 +5,19 @@ import { Link, NavLink, useNavigate } from "react-router-dom";
import Avatar from "../../components/common/Avatar";
import Breadcrumb from "../../components/common/Breadcrumb";
import ManageEmp from "../../components/Employee/ManageRole";
import { useEmployeesAllOrByProjectId, useSuspendEmployee } from "../../hooks/useEmployees";
import { useProjects } from "../../hooks/useProjects";
import {
useEmployeesAllOrByProjectId,
useSuspendEmployee,
} from "../../hooks/useEmployees";
import { useProjectName, useProjects } from "../../hooks/useProjects";
import { useProfile } from "../../hooks/useProfile";
import { hasUserPermission } from "../../utils/authUtils";
import { ITEMS_PER_PAGE, MANAGE_EMPLOYEES } from "../../utils/constants";
import {
ITEMS_PER_PAGE,
MANAGE_EMPLOYEES,
VIEW_ALL_EMPLOYEES,
VIEW_TEAM_MEMBERS,
} from "../../utils/constants";
import { clearCacheKey } from "../../slices/apiDataManager";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
@ -22,16 +30,20 @@ import {
import EmployeeRepository from "../../repositories/EmployeeRepository";
import ManageEmployee from "../../components/Employee/ManageEmployee";
import ConfirmModal from "../../components/common/ConfirmModal";
import { useSelector } from "react-redux";
import { useDispatch, useSelector } from "react-redux";
import eventBus from "../../services/eventBus";
import { newlineChars } from "pdf-lib";
import GlobalModel from "../../components/common/GlobalModel";
import usePagination from "../../hooks/usePagination";
import { setProjectId } from "../../slices/localVariablesSlice";
const EmployeeList = () => {
const selectedProjectId = useSelector(
(store) => store.localVariables.projectId
);
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
const dispatch = useDispatch();
const [showInactive, setShowInactive] = useState(false);
const [showAllEmployees, setShowAllEmployees] = useState(false);
@ -45,7 +57,7 @@ const EmployeeList = () => {
const [employeeList, setEmployeeList] = useState([]);
const [modelConfig, setModelConfig] = useState();
const [EmpForManageRole,setEmpForManageRole] = useState(null)
const [EmpForManageRole, setEmpForManageRole] = useState(null);
// const [currentPage, setCurrentPage] = useState(1);
// const [itemsPerPage] = useState(ITEMS_PER_PAGE);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
@ -56,19 +68,22 @@ const EmployeeList = () => {
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedEmpFordelete, setSelectedEmpFordelete] = useState(null);
const [employeeLodaing, setemployeeLodaing] = useState(false);
const {
mutate: suspendEmployee,
isPending: empLodaing
} = useSuspendEmployee({
const ViewTeamMember = useHasUserPermission(VIEW_TEAM_MEMBERS);
const ViewAllEmployee = useHasUserPermission(VIEW_ALL_EMPLOYEES);
const { mutate: suspendEmployee, isPending: empLodaing } = useSuspendEmployee(
{
setIsDeleteModalOpen,
setemployeeLodaing
} );
setemployeeLodaing,
}
);
useEffect(() => {
if (selectedProjectId === null) {
dispatch(setProjectId(projectNames[0]?.id));
}
}, [selectedProjectId]);
const navigate = useNavigate();
const applySearchFilter = (data, text) => {
if (!text) {
return data;
@ -99,88 +114,23 @@ const EmployeeList = () => {
});
};
const handleSearch = (e) => {
const value = e.target.value;
setSearchText(value);
setCurrentPage(1);
};
useEffect(() => {
const filtered = applySearchFilter(employeeList, searchText);
setFilteredData(filtered);
}, [searchText, employeeList]);
const displayData = searchText ? filteredData : employeeList;
const { currentPage, totalPages, currentItems, paginate,setCurrentPage } = usePagination(
displayData,
ITEMS_PER_PAGE
);
const { currentPage, totalPages, currentItems, paginate, setCurrentPage } =
usePagination(displayData, ITEMS_PER_PAGE);
const openModal = () => {
setIsCreateModalOpen(true);
};
// const closeModal = () => {
// setIsCreateModalOpen(false);
// const modalElement = document.getElementById("managerole-modal");
// if (modalElement && !showModal) {
// modalElement.classList.remove("show");
// modalElement.style.display = "none";
// document.body.classList.remove("modal-open");
// document.querySelector(".modal-backdrop")?.remove();
// }
// setShowModal(false);
// clearCacheKey("employeeProfile");
// recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
// };
// const handleShow = () => setShowModal(true);
// const handleClose = () => setShowModal( false );
useEffect(() => {
if (!loading && Array.isArray(employees)) {
const sorted = [...employees].sort((a, b) => {
const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""}`.toLowerCase();
const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""}`.toLowerCase();
return nameA?.localeCompare(nameB);
});
setEmployeeList((prevList) => {
const prevJSON = JSON.stringify(prevList);
const nextJSON = JSON.stringify(sorted);
if (prevJSON !== nextJSON) {
return sorted;
}
return prevList;
});
setFilteredData((prev) => {
const prevJSON = JSON.stringify(prev);
const nextJSON = JSON.stringify(sorted);
if (prevJSON !== nextJSON) {
return sorted;
}
return prev;
});
// set currentPage to 1 only if needed
setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
}
}, [loading, employees, selectedProjectId, showAllEmployees]);
const handleConfigData = (config) => {
setModelConfig(config);
};
// useEffect(() => {
// if (modelConfig !== null) {
// openModal();
// }
// }, [modelConfig, isCreateModalOpen]);
const tableRef = useRef(null);
const handleExport = (type) => {
if (!currentItems || currentItems.length === 0) return;
@ -205,14 +155,16 @@ useEffect(() => {
const handleToggle = (e) => {
setShowInactive(e.target.checked);
recallEmployeeData(e.target.checked, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
recallEmployeeData(
e.target.checked,
showAllEmployees ? null : selectedProjectId
); // Use selectedProjectId here
};
const handleAllEmployeesToggle = (e) => {
const isChecked = e.target.checked;
setShowInactive(false);
setShowAllEmployees(isChecked);
};
const handleEmployeeModel = (id) => {
@ -224,6 +176,43 @@ const handleAllEmployeesToggle = (e) => {
setSelectedEmpFordelete(employee);
setIsDeleteModalOpen(true);
};
useEffect(() => {
const filtered = applySearchFilter(employeeList, searchText);
setFilteredData(filtered);
}, [searchText, employeeList]);
useEffect(() => {
if (!loading && Array.isArray(employees)) {
const sorted = [...employees].sort((a, b) => {
const nameA = `${a.firstName || ""}${a.middleName || ""}${
a.lastName || ""
}`.toLowerCase();
const nameB = `${b.firstName || ""}${b.middleName || ""}${
b.lastName || ""
}`.toLowerCase();
return nameA?.localeCompare(nameB);
});
setEmployeeList((prevList) => {
const prevJSON = JSON.stringify(prevList);
const nextJSON = JSON.stringify(sorted);
if (prevJSON !== nextJSON) {
return sorted;
}
return prevList;
});
setFilteredData((prev) => {
const prevJSON = JSON.stringify(prev);
const nextJSON = JSON.stringify(sorted);
if (prevJSON !== nextJSON) {
return sorted;
}
return prev;
});
setCurrentPage((prevPage) => (prevPage !== 1 ? 1 : prevPage));
}
}, [loading, employees, selectedProjectId, showAllEmployees]);
useEffect(() => {
if (!showAllEmployees) {
@ -235,27 +224,40 @@ const handleAllEmployeesToggle = (e) => {
(msg) => {
if (employees.some((item) => item.id == msg.employeeId)) {
setEmployeeList([]);
recallEmployeeData(showInactive, showAllEmployees ? null : selectedProjectId); // Use selectedProjectId here
recallEmployeeData(
showInactive,
showAllEmployees ? null : selectedProjectId
); // Use selectedProjectId here
}
},[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
},
[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
);
useEffect(() => {
eventBus.on("employee", handler);
return () => eventBus.off("employee",handler)
},[handler])
return () => eventBus.off("employee", handler);
}, [handler]);
return (
<>
{EmpForManageRole && (
<GlobalModel isOpen={EmpForManageRole} closeModal={() => setEmpForManageRole( null )}>
<ManageEmp employeeId={EmpForManageRole} onClosed={()=>setEmpForManageRole(null)} />
<GlobalModel
isOpen={EmpForManageRole}
closeModal={() => setEmpForManageRole(null)}
>
<ManageEmp
employeeId={EmpForManageRole}
onClosed={() => setEmpForManageRole(null)}
/>
</GlobalModel>
)}
{showModal && (
<GlobalModel isOpen={showModal} size="lg" closeModal={()=>setShowModal(false)}>
<GlobalModel
isOpen={showModal}
size="lg"
closeModal={() => setShowModal(false)}
>
<ManageEmployee
employeeId={selectedEmployeeId}
onClosed={() => setShowModal(false)}
@ -296,10 +298,11 @@ const handleAllEmployeesToggle = (e) => {
{ label: "Employees", link: null },
]}
></Breadcrumb>
{ViewTeamMember ? (
<div className="row">
<div className="card ">
<div className="card-datatable table-responsive pt-2">
<div
id="DataTables_Table_0_wrapper"
className="dataTables_wrapper dt-bootstrap5 no-footer"
@ -309,6 +312,7 @@ const handleAllEmployeesToggle = (e) => {
{/* Switches: All Employees + Inactive */}
<div className="d-flex flex-wrap align-items-center gap-3">
{/* All Employees Switch */}
{ViewAllEmployee && (
<div className="form-check form-switch text-start">
<input
type="checkbox"
@ -318,10 +322,14 @@ const handleAllEmployeesToggle = (e) => {
checked={showAllEmployees}
onChange={handleAllEmployeesToggle}
/>
<label className="form-check-label ms-0" htmlFor="allEmployeesCheckbox">
<label
className="form-check-label ms-0"
htmlFor="allEmployeesCheckbox"
>
All Employees
</label>
</div>
)}
{/* Show Inactive Employees Switch */}
{showAllEmployees && (
@ -334,12 +342,14 @@ const handleAllEmployeesToggle = (e) => {
checked={showInactive}
onChange={handleToggle}
/>
<label className="form-check-label ms-0" htmlFor="inactiveEmployeesCheckbox">
<label
className="form-check-label ms-0"
htmlFor="inactiveEmployeesCheckbox"
>
Show Inactive Employees
</label>
</div>
)}
</div>
{/* Right side: Search + Export + Add Employee */}
@ -371,22 +381,38 @@ const handleAllEmployeesToggle = (e) => {
</button>
<ul className="dropdown-menu">
<li>
<a className="dropdown-item" href="#" onClick={() => handleExport("print")}>
<a
className="dropdown-item"
href="#"
onClick={() => handleExport("print")}
>
<i className="bx bx-printer me-1"></i> Print
</a>
</li>
<li>
<a className="dropdown-item" href="#" onClick={() => handleExport("csv")}>
<a
className="dropdown-item"
href="#"
onClick={() => handleExport("csv")}
>
<i className="bx bx-file me-1"></i> CSV
</a>
</li>
<li>
<a className="dropdown-item" href="#" onClick={() => handleExport("excel")}>
<a
className="dropdown-item"
href="#"
onClick={() => handleExport("excel")}
>
<i className="bx bxs-file-export me-1"></i> Excel
</a>
</li>
<li>
<a className="dropdown-item" href="#" onClick={() => handleExport("pdf")}>
<a
className="dropdown-item"
href="#"
onClick={() => handleExport("pdf")}
>
<i className="bx bxs-file-pdf me-1"></i> PDF
</a>
</li>
@ -401,7 +427,9 @@ const handleAllEmployeesToggle = (e) => {
onClick={() => handleEmployeeModel(null)}
>
<i className="bx bx-plus-circle me-2"></i>
<span className="d-none d-md-inline-block">Add New Employee</span>
<span className="d-none d-md-inline-block">
Add New Employee
</span>
</button>
)}
</div>
@ -482,7 +510,8 @@ const handleAllEmployeesToggle = (e) => {
Status
</th>
<th
className={`sorting_disabled ${!Manage_Employee && "d-none"
className={`sorting_disabled ${
!Manage_Employee && "d-none"
}`}
rowSpan="1"
colSpan="1"
@ -502,7 +531,10 @@ const handleAllEmployeesToggle = (e) => {
</tr>
)}
{/* Conditional messages for no data or no search results */}
{!loading && displayData?.length === 0 && searchText && !showAllEmployees ? (
{!loading &&
displayData?.length === 0 &&
searchText &&
!showAllEmployees ? (
<tr>
<td colSpan={8}>
<small className="muted">
@ -511,7 +543,9 @@ const handleAllEmployeesToggle = (e) => {
</td>
</tr>
) : null}
{!loading && displayData?.length === 0 && (!searchText || showAllEmployees) ? (
{!loading &&
displayData?.length === 0 &&
(!searchText || showAllEmployees) ? (
<tr>
<td
colSpan={8}
@ -523,7 +557,9 @@ const handleAllEmployeesToggle = (e) => {
) : null}
{/* Render current items */}
{currentItems && !loading && currentItems.map((item) => (
{currentItems &&
!loading &&
currentItems.map((item) => (
<tr className="odd" key={item.id}>
<td className="sorting_1" colSpan={2}>
<div className="d-flex justify-content-start align-items-center user-name">
@ -609,7 +645,8 @@ const handleAllEmployeesToggle = (e) => {
}
className="dropdown-item py-1"
>
<i className="bx bx-detail bx-sm"></i> View
<i className="bx bx-detail bx-sm"></i>{" "}
View
</button>
<button
className="dropdown-item py-1"
@ -660,7 +697,9 @@ const handleAllEmployeesToggle = (e) => {
<nav aria-label="Page">
<ul className="pagination pagination-sm justify-content-end py-1">
<li
className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
className={`page-item ${
currentPage === 1 ? "disabled" : ""
}`}
>
<button
className="page-link btn-xs"
@ -673,7 +712,8 @@ const handleAllEmployeesToggle = (e) => {
{[...Array(totalPages)]?.map((_, index) => (
<li
key={index}
className={`page-item ${currentPage === index + 1 ? "active" : ""
className={`page-item ${
currentPage === index + 1 ? "active" : ""
}`}
>
<button
@ -686,7 +726,8 @@ const handleAllEmployeesToggle = (e) => {
))}
<li
className={`page-item ${currentPage === totalPages ? "disabled" : ""
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
>
<button
@ -703,6 +744,17 @@ const handleAllEmployeesToggle = (e) => {
</div>
</div>
</div>
) : (
<div className="card">
<div className="text-center">
<i className="fa-solid fa-triangle-exclamation fs-5"></i>
<p>
Access Denied: You don't have permission to perform this action.
!
</p>
</div>
</div>
)}
</div>
</>
);

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

@ -1,11 +1,9 @@
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";
import ProjectOverview from "../../components/Project/ProjectOverview";
import AboutProject from "../../components/Project/AboutProject";
import ProjectNav from "../../components/Project/ProjectNav";
import ProjectBanner from "../../components/Project/ProjectBanner";
import Teams from "../../components/Project/Teams";
import ProjectInfra from "../../components/Project/ProjectInfra";
import Loader from "../../components/common/Loader";
@ -16,171 +14,115 @@ import {
clearCacheKey,
getCachedData,
} from "../../slices/apiDataManager";
import ProjectRepository from "../../repositories/ProjectRepository";
import { ActivityeRepository } from "../../repositories/MastersRepository";
import "./ProjectDetails.css";
import {
useEmployeesByProjectAllocated,
useProjectDetails,
} from "../../hooks/useProjects";
import { useDispatch } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice";
import { ComingSoonPage } from "../Misc/ComingSoonPage";
import Directory from "../Directory/Directory";
import eventBus from "../../services/eventBus";
import ProjectProgressChart from "../../components/Dashboard/ProjectProgressChart";
const ProjectDetails = () => {
let { projectId } = useParams();
const projectId = useSelector((store) => store.localVariables.projectId);
const {
projects_Details,
loading: projectLoading,
error: ProjectError,
refetch
error: projectError,
refetch,
} = useProjectDetails(projectId);
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);
// }
// };
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]);
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 },
{ label: projects_Details?.name || "Project", link: null },
]}
></Breadcrumb>
/>
<div className="row">
{projectLoading && <p>Loading....</p>}
{/* {!projectLoading && project && (
<ProjectBanner project_data={project}></ProjectBanner>
)} */}
<ProjectNav
onPillClick={handlePillClick}
activePill={activePill}
></ProjectNav>
<ProjectNav onPillClick={handlePillClick} activePill={activePill} />
</div>
<div className="row"></div>
{renderContent()}
</div>
</>
);
};

13
src/pages/project/ProjectList.jsx
View File

@ -5,11 +5,6 @@ import Breadcrumb from "../../components/common/Breadcrumb";
import ProjectRepository from "../../repositories/ProjectRepository";
import { useProjects, useCreateProject } from "../../hooks/useProjects";
import showToast from "../../services/toastService";
// import {
// getCachedData,
// cacheData,
// clearCacheKey,
// } from "../../slices/apiDataManager";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { useProfile } from "../../hooks/useProfile";
import { ITEMS_PER_PAGE, MANAGE_PROJECT } from "../../utils/constants";
@ -20,11 +15,15 @@ import { defaultCheckBoxAppearanceProvider } from "pdf-lib";
import { useMutation } from "@tanstack/react-query";
import usePagination from "../../hooks/usePagination";
import GlobalModel from "../../components/common/GlobalModel";
import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice";
const ProjectList = () => {
const { profile: loginUser } = useProfile();
const [listView, setListView] = useState(false);
const [showModal, setShowModal] = useState(false);
const selectedProject = useSelector((store)=>store.localVariables.projectId)
const dispatch = useDispatch()
const { projects, loading, error, refetch } = useProjects();
const [projectList, setProjectList] = useState([]);
@ -75,6 +74,10 @@ const ProjectList = () => {
};
useEffect(() => {
if(selectedProject == null){
dispatch(setProjectId(projects[0]?.id));
}
if (!loading && projects) {
sortingProject(projects);
}

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

@ -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>

3
src/pages/Gallary/ImageGalleryAPI.jsx → src/repositories/ImageGalleryAPI.jsx
View File

@ -1,9 +1,8 @@
import { api } from "../../utils/axiosClient";
import { api } from "../utils/axiosClient";
export const ImageGalleryAPI = {
ImagesGet: (projectId, filter, pageNumber, pageSize) => {
const payloadJsonString = JSON.stringify(filter);
// Corrected API endpoint with pagination parameters
return api.get(`/api/image/images/${projectId}?filter=${payloadJsonString}&pageNumber=${pageNumber}&pageSize=${pageSize}`);
},
};

2
src/router/AppRoutes.jsx
View File

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

2
src/slices/localVariablesSlice.jsx
View File

@ -5,7 +5,7 @@ const localVariablesSlice = createSlice({
initialState: {
selectedMaster:"Application Role",
regularizationCount:0,
projectId: "",
projectId: null,
reload:false
},

7
src/utils/constants.jsx
View File

@ -11,6 +11,11 @@ export const VIEW_PROJECTS = "6ea44136-987e-44ba-9e5d-1cf8f5837ebc"
export const MANAGE_EMPLOYEES = "a97d366a-c2bb-448d-be93-402bd2324566"
export const VIEW_ALL_EMPLOYEES = "60611762-7f8a-4fb5-b53f-b1139918796b"
export const VIEW_TEAM_MEMBERS = "b82d2b7e-0d52-45f3-997b-c008ea460e7f"
export const MANAGE_PROJECT_INFRA = "cf2825ad-453b-46aa-91d9-27c124d63373"
export const VIEW_PROJECT_INFRA = "8d7cc6e3-9147-41f7-aaa7-fa507e450bd4"
@ -24,6 +29,8 @@ export const INFRASTRUCTURE = "9666de86-d7c7-4d3d-acaa-fcd6d6b81f3c";
export const MANAGE_TASK = "08752f33-3b29-4816-b76b-ea8a968ed3c5"
export const APPROVE_TASK = "db4e40c5-2ba9-4b6d-b8a6-a16a250ff99c"
export const VIEW_TASK = "9fcc5f87-25e3-4846-90ac-67a71ab92e3c"
export const ASSIGN_REPORT_TASK = "6a32379b-8b3f-49a6-8c48-4b7ac1b55dc2"

9
src/utils/dateUtils.jsx
View File

@ -70,3 +70,12 @@ export const formatNumber = (num) => {
export const formatUTCToLocalTime = (datetime) =>{
return moment.utc(datetime).local().format("MMMM DD, YYYY [at] hh:mm A");
}
export const getCompletionPercentage = (completedWork, plannedWork)=> {
if (!plannedWork || plannedWork === 0) return 0;
const percentage = (completedWork / plannedWork) * 100;
const clamped = Math.min(Math.max(percentage, 0), 100);
return clamped.toFixed(2);
}