Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into react-query
This commit is contained in:
commit
6097b4957a
13
public/assets/vendor/css/core.css
vendored
13
public/assets/vendor/css/core.css
vendored
@ -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
2
src/assets/vendor/css/core.css
vendored
@ -2436,7 +2436,7 @@ progress {
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
/* overflow-x: auto; */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -9,7 +9,7 @@ import {
|
||||
import showToast from "../../services/toastService";
|
||||
import ProjectRepository from "../../repositories/ProjectRepository";
|
||||
import { useTaskById } from "../../hooks/useTasks";
|
||||
import {useManageTask} from "../../hooks/useProjects";
|
||||
import { useManageTask } from "../../hooks/useProjects";
|
||||
|
||||
const subTaskSchema = z.object({
|
||||
activityId: z.string().min(1, "Activity is required"),
|
||||
@ -37,14 +37,13 @@ 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")
|
||||
const { mutate: createSubTask, isPending } = useManageTask({
|
||||
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,
|
||||
@ -82,8 +81,19 @@ const SubTask = ({ activity, onClose }) => {
|
||||
parentTaskId: activity?.id,
|
||||
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">
|
||||
@ -147,15 +157,15 @@ const SubTask = ({ activity, onClose }) => {
|
||||
disabled
|
||||
>
|
||||
<option value="">
|
||||
{loading ? "Loading..." : "-- Select Activity --"}
|
||||
</option>
|
||||
{loading ? "Loading..." : "-- Select Activity --"}
|
||||
</option>
|
||||
|
||||
{!loading &&
|
||||
activities?.map((activity) => (
|
||||
<option key={activity.id} value={activity.id}>
|
||||
{activity.activityName}
|
||||
</option>
|
||||
))}
|
||||
{!loading &&
|
||||
activities?.map((activity) => (
|
||||
<option key={activity.id} value={activity.id}>
|
||||
{activity.activityName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.activityId && (
|
||||
<div className="danger-text">{errors.activityId.message}</div>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -1,55 +1,71 @@
|
||||
import React from "react";
|
||||
import { useSelector } from "react-redux"; // Import useSelector to access Redux state
|
||||
import {
|
||||
useDashboardProjectsCardData,
|
||||
useDashboardTeamsCardData,
|
||||
useDashboardTasksCardData,
|
||||
useDashboardProjectsCardData,
|
||||
useDashboardTeamsCardData,
|
||||
useDashboardTasksCardData,
|
||||
} from "../../hooks/useDashboard_Data";
|
||||
import Projects from "./Projects";
|
||||
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 = () => {
|
||||
const { projectsCardData } = useDashboardProjectsCardData();
|
||||
const { teamsCardData } = useDashboardTeamsCardData();
|
||||
const { tasksCardData } = useDashboardTasksCardData();
|
||||
const { projectsCardData } = useDashboardProjectsCardData();
|
||||
const { teamsCardData } = useDashboardTeamsCardData();
|
||||
const { tasksCardData } = useDashboardTasksCardData();
|
||||
|
||||
return (
|
||||
<div className="container-fluid mt-3">
|
||||
<div className="row gy-4">
|
||||
{/* Projects Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<Projects projectsCardData={projectsCardData} />
|
||||
</div>
|
||||
// Get the selected project ID from Redux store
|
||||
const selectedProjectId = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
|
||||
{/* Teams Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<Teams teamsCardData={teamsCardData} />
|
||||
</div>
|
||||
// Determine if "All Projects" is selected
|
||||
// selectedProjectId will be null when "All Projects" is chosen
|
||||
const isAllProjectsSelected = selectedProjectId === null;
|
||||
|
||||
{/* Tasks Card */}
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<TasksCard tasksCardData={tasksCardData} />
|
||||
</div>
|
||||
return (
|
||||
<div className="container-fluid mt-3">
|
||||
<div className="row gy-4">
|
||||
|
||||
{/* Bar Chart (Project Completion) */}
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectCompletionChart />
|
||||
</div>
|
||||
{isAllProjectsSelected && (
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<Projects projectsCardData={projectsCardData} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Line Chart (Project Progress) */}
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectProgressChart />
|
||||
</div>
|
||||
|
||||
{/* <div className="col-xxl-6 col-lg-6">
|
||||
<Attendance />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
|
||||
<Teams teamsCardData={teamsCardData} />
|
||||
</div>
|
||||
|
||||
<div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6":"col-sm-6 col-lg-4"}`}>
|
||||
<TasksCard tasksCardData={tasksCardData} />
|
||||
</div>
|
||||
|
||||
|
||||
{isAllProjectsSelected && (
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectCompletionChart />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{! isAllProjectsSelected && (
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectOverview />
|
||||
</div>
|
||||
)}
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectProgressChart />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
@ -93,33 +93,6 @@ const ProjectProgressChart = ({
|
||||
<h5 className="mb-1">Project Progress</h5>
|
||||
<p className="card-subtitle">Progress Overview by Project</p>
|
||||
</div>
|
||||
|
||||
{/* Right: Checkbox and Project Name */}
|
||||
<div className="d-flex flex-column align-items-start align-items-md-end text-start text-md-end mt-1 mt-md-0">
|
||||
{ShowAllProject == true && (
|
||||
<div className="form-check form-switch mb-1 d-flex align-items-center">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
role="switch"
|
||||
id="showAllEmployees"
|
||||
checked={showAllEmployees}
|
||||
onChange={(e) => setShowAllEmployees(e.target.checked)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
htmlFor="showAllEmployees"
|
||||
>
|
||||
All Projects
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{!showAllEmployees && selectedProjectName && (
|
||||
<p className="text-muted mb-0 small">
|
||||
<span className="card-subtitle">{selectedProjectName}</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2: Time Range Buttons */}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
import getGreetingMessage from "../../utils/greetingHandler";
|
||||
import {
|
||||
cacheData,
|
||||
@ -20,26 +21,28 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { MANAGE_PROJECT } from "../../utils/constants";
|
||||
|
||||
const Header = () => {
|
||||
const {profile} = useProfile();
|
||||
const { profile } = useProfile();
|
||||
const location = useLocation();
|
||||
const dispatch = useDispatch();
|
||||
const { data, loading } = useMaster();
|
||||
const navigate = useNavigate();
|
||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||
|
||||
const 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,98 +75,93 @@ const Header = () => {
|
||||
const handleProfilePage = () => {
|
||||
navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
|
||||
};
|
||||
// const { projects, loading: projectLoading } = useProjects();
|
||||
|
||||
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
|
||||
const selectedProjectName = projectNames?.find(
|
||||
(p) => p?.id === selectedProject
|
||||
)?.name;
|
||||
|
||||
let displayText = "";
|
||||
if (selectedProjectName) {
|
||||
displayText = selectedProjectName;
|
||||
} else if (projectLoading && selectedProject) {
|
||||
displayText = selectedProject;
|
||||
// Determine the display text for the project dropdown
|
||||
let displayText = "All Projects";
|
||||
if (selectedProject === null) {
|
||||
displayText = "All Projects";
|
||||
} else if (selectedProject) {
|
||||
const selectedProjectObj = projectNames?.find(
|
||||
(p) => p?.id === selectedProject
|
||||
);
|
||||
// Fallback to selectedProject ID if name not found during loading or mismatch
|
||||
displayText = selectedProjectObj ? selectedProjectObj.name : selectedProject;
|
||||
} else if (projectLoading) {
|
||||
displayText = "Loading...";
|
||||
}
|
||||
|
||||
const { openChangePassword } = useChangePassword();
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
projectNames &&
|
||||
selectedProject !== " " &&
|
||||
projectNames.length > 0 &&
|
||||
selectedProject === undefined &&
|
||||
!getCachedData("hasReceived")
|
||||
) {
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
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]);
|
||||
|
||||
useDispatch( () =>
|
||||
{
|
||||
dispatch(changeMaster("Job Role"))
|
||||
},[])
|
||||
useEffect(() => {
|
||||
eventBus.on("assign_project_one", handler);
|
||||
eventBus.on("project", newProjectHandler);
|
||||
dispatch(changeMaster("Job Role"));
|
||||
}, [dispatch]);
|
||||
|
||||
return () => {
|
||||
eventBus.off("assign_project_one", handler);
|
||||
eventBus.off("project", newProjectHandler);
|
||||
};
|
||||
}, [handler, newProjectHandler]);
|
||||
useEffect(() => {
|
||||
eventBus.on("assign_project_one", handler);
|
||||
eventBus.on("project", newProjectHandler);
|
||||
|
||||
return () => {
|
||||
eventBus.off("assign_project_one", handler);
|
||||
eventBus.off("project", newProjectHandler);
|
||||
};
|
||||
}, [handler, newProjectHandler]);
|
||||
|
||||
return (
|
||||
<nav
|
||||
className="layout-navbar container-fluid mb-3 navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
|
||||
className="layout-navbar container-fluid mb-3 navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
|
||||
id="layout-navbar"
|
||||
>
|
||||
<div className="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
|
||||
@ -177,60 +176,59 @@ const Header = () => {
|
||||
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
||||
id="navbar-collapse"
|
||||
>
|
||||
{projectNames?.length > 0 && (
|
||||
<div className=" align-items-center">
|
||||
{(!isProjectPath && !isDirectoryPath) && (
|
||||
<>
|
||||
<i
|
||||
className="rounded-circle bx bx-building-house bx-sm-lg bx-md"
|
||||
></i>
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className={`btn btn-sm-sm btn-xl ${
|
||||
projectNames?.length > 1 && "dropdown-toggle"
|
||||
} px-1`}
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{displayText}
|
||||
</button>
|
||||
{projectNames && !isDirectoryPath && (
|
||||
<div className="align-items-center">
|
||||
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
|
||||
<div className="btn-group">
|
||||
<button
|
||||
className={`btn btn-sm-sm btn-xl ${projectNames.length > 0 ? "dropdown-toggle" : ""
|
||||
} px-1`}
|
||||
type="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{displayText}
|
||||
</button>
|
||||
|
||||
{projectNames?.length > 1 && (
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
style={{ overflow: "auto", maxHeight: "300px" }}
|
||||
>
|
||||
{[...projectNames]
|
||||
.sort((a, b) => a?.name?.localeCompare(b.name))
|
||||
.map((project) => (
|
||||
<li key={project?.id}>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() =>
|
||||
dispatch(setProjectId(project?.id))
|
||||
}
|
||||
>
|
||||
{project?.name}{" "}
|
||||
{project?.shortName ? (
|
||||
<span className="text-primary fw-semibold ">
|
||||
{" "}
|
||||
({project?.shortName})
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{projectNames.length > 0 && (
|
||||
<ul
|
||||
className="dropdown-menu"
|
||||
style={{ overflow: "auto", maxHeight: "300px" }}
|
||||
>
|
||||
|
||||
{isDashboard && (
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => dispatch(setProjectId(null))}
|
||||
>
|
||||
All Projects
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{[...projectNames]
|
||||
.sort((a, b) => a?.name?.localeCompare(b.name))
|
||||
.map((project) => (
|
||||
<li key={project?.id}>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => dispatch(setProjectId(project?.id))}
|
||||
>
|
||||
{project?.name}
|
||||
{project?.shortName && (
|
||||
<span className="text-primary fw-semibold ms-1">
|
||||
({project?.shortName})
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{isProjectPath && (<span className=" fs-5 align-items-center"><i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>{displayText}</span>)}
|
||||
|
||||
|
||||
<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>
|
||||
@ -757,4 +426,4 @@ const Header = () => {
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
export default Header;
|
||||
export default Header;
|
||||
@ -2,48 +2,53 @@ import React, { useEffect, useState } from "react";
|
||||
import moment from "moment";
|
||||
import { getProjectStatusName } from "../../utils/projectStatus";
|
||||
import {useProjectDetails, useUpdateProject} from "../../hooks/useProjects";
|
||||
import {useParams} from "react-router-dom";
|
||||
import { useSelector } from "react-redux"; // Import useSelector
|
||||
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
|
||||
import {MANAGE_PROJECT} from "../../utils/constants";
|
||||
import GlobalModel from "../common/GlobalModel";
|
||||
import ManageProjectInfo from "./ManageProjectInfo";
|
||||
import {useQueryClient} from "@tanstack/react-query";
|
||||
const AboutProject = () =>
|
||||
{
|
||||
const [ IsOpenModal, setIsOpenModal ] = useState( false )
|
||||
const {mutate: UpdateProjectDetails, isPending} = useUpdateProject( {
|
||||
onSuccessCallback: () =>
|
||||
{
|
||||
setIsOpenModal(false)
|
||||
|
||||
const AboutProject = () => {
|
||||
const [IsOpenModal, setIsOpenModal] = useState(false);
|
||||
const {mutate: UpdateProjectDetails, isPending} = useUpdateProject({
|
||||
onSuccessCallback: () => {
|
||||
setIsOpenModal(false);
|
||||
}
|
||||
} )
|
||||
const ClientQuery = useQueryClient()
|
||||
const {projectId} = useParams();
|
||||
});
|
||||
const ClientQuery = useQueryClient();
|
||||
|
||||
// *** MODIFIED LINE: Get projectId from Redux store using useSelector ***
|
||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||
|
||||
const manageProject = useHasUserPermission(MANAGE_PROJECT);
|
||||
const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId )
|
||||
const handleFormSubmit = ( updatedProject ) =>
|
||||
{
|
||||
if ( projects_Details?.id )
|
||||
{
|
||||
UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject,
|
||||
} );
|
||||
refetch()
|
||||
}
|
||||
};
|
||||
const {projects_Details, isLoading, error,refetch} = useProjectDetails( projectId ); // Pass projectId from useSelector
|
||||
|
||||
const handleFormSubmit = ( updatedProject ) => {
|
||||
if ( projects_Details?.id ) {
|
||||
UpdateProjectDetails({ projectId: projects_Details?.id,updatedData: updatedProject });
|
||||
// The refetch here might be redundant or could be handled by react-query's invalidateQueries
|
||||
// if UpdateProjectDetails properly invalidates the 'projectDetails' query key.
|
||||
// If refetch is still needed, consider adding a delay or using onSuccess of UpdateProjectDetails.
|
||||
// For now, keeping it as is based on your original code.
|
||||
refetch();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{IsOpenModal && (
|
||||
<GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
|
||||
<GlobalModel isOpen={IsOpenModal} closeModal={()=>setIsOpenModal(false)}>
|
||||
<ManageProjectInfo
|
||||
project={projects_Details}
|
||||
handleSubmitForm={handleFormSubmit}
|
||||
onClose={() => setIsOpenModal( false )}
|
||||
isPending={isPending}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
</GlobalModel>
|
||||
)}
|
||||
{projects_Details && (
|
||||
<>
|
||||
<>
|
||||
<div className="card mb-6">
|
||||
<div className="card-header text-start">
|
||||
<h6 className="card-action-title mb-0">
|
||||
@ -126,10 +131,9 @@ const AboutProject = () =>
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{isLoading && <span>loading...</span>}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutProject;
|
||||
export default AboutProject;
|
||||
@ -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)}>
|
||||
|
||||
@ -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(() => {
|
||||
@ -96,8 +95,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
|
||||
}, [categories]);
|
||||
|
||||
const onSubmitForm = async (data) => {
|
||||
const payload = [data];
|
||||
CreateTask({payload,PreviousPlannedWork:0});
|
||||
const payload = [data];
|
||||
CreateTask({payload:payload,buildingId: data.buildingID,
|
||||
floorId: data.floorId,
|
||||
workAreaId: data.workAreaId, PreviousPlannedWork:0,previousCompletedWork:0});
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -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,
|
||||
@ -19,7 +22,7 @@ import {
|
||||
} from "../../../slices/apiDataManager";
|
||||
import { refreshData } from "../../../slices/localVariablesSlice";
|
||||
import GlobalModel from "../../common/GlobalModel";
|
||||
import {useDeleteMasterItem} from "../../../hooks/masterHook/useMaster";
|
||||
import { useDeleteMasterItem } from "../../../hooks/masterHook/useMaster";
|
||||
|
||||
const WorkItem = ({
|
||||
workItem,
|
||||
@ -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,19 +45,18 @@ const WorkItem = ({
|
||||
const [loadingDelete, setLoadingDelete] = useState(false);
|
||||
const project = getCachedData("projectInfo");
|
||||
|
||||
|
||||
const openModal = () => setIsModalOpen(true);
|
||||
const closeModal = () => setIsModalOpen( false );
|
||||
|
||||
const showModalDelete = () => setShowModal2(true);
|
||||
const closeModal = () => setIsModalOpen(false);
|
||||
|
||||
const showModalDelete = () => setShowModal2(true);
|
||||
const closeModalDelete = () => setShowModal2(false);
|
||||
const getProgress = (planned, completed) => {
|
||||
return (completed * 100) / planned + "%";
|
||||
};
|
||||
|
||||
const {mutate:DeleteTask,isPending } = useDeleteProjectTask(() => {
|
||||
closeModalDelete?.();
|
||||
});
|
||||
|
||||
const { mutate: DeleteTask, isPending } = useDeleteProjectTask(() => {
|
||||
closeModalDelete?.();
|
||||
});
|
||||
|
||||
const handleAssignTask = () => {
|
||||
setItemName("");
|
||||
@ -61,15 +65,15 @@ const WorkItem = ({
|
||||
setNewWorkItem(workItem);
|
||||
}, [workItem]);
|
||||
|
||||
const refreshWorkItem = (plannedTask) =>{
|
||||
const refreshWorkItem = (plannedTask) => {
|
||||
if (workItem) {
|
||||
const updated = {
|
||||
...workItem,
|
||||
todaysAssigned: (workItem.todaysAssigned || 0) + plannedTask,
|
||||
};
|
||||
setNewWorkItem(updated);
|
||||
}
|
||||
}
|
||||
const updated = {
|
||||
...workItem,
|
||||
todaysAssigned: (workItem.todaysAssigned || 0) + plannedTask,
|
||||
};
|
||||
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,18 +110,26 @@ 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}
|
||||
building={forBuilding}
|
||||
floor={forFloor}
|
||||
onClose={()=>setShowModal(false)}
|
||||
onClose={() => setShowModal(false)}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
@ -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
|
||||
@ -251,7 +262,7 @@ const WorkItem = ({
|
||||
<i
|
||||
className="bx bxs-edit text-secondary cursor-pointer"
|
||||
title="Edit"
|
||||
onClick={()=>setShowModal(true)}
|
||||
onClick={() => setShowModal(true)}
|
||||
role="button"
|
||||
></i>
|
||||
<i
|
||||
@ -275,7 +286,7 @@ const WorkItem = ({
|
||||
></i>
|
||||
|
||||
<ul className="dropdown-menu dropdown-menu-start">
|
||||
{!projectId &&
|
||||
{isTaskPlanning &&
|
||||
ManageAndAssignTak &&
|
||||
PlannedWork !== CompletedWork && (
|
||||
<li>
|
||||
@ -293,7 +304,7 @@ const WorkItem = ({
|
||||
<li>
|
||||
<a
|
||||
className="dropdown-item d-flex align-items-center"
|
||||
onClick={()=>setShowModal(true) }
|
||||
onClick={() => setShowModal(true)}
|
||||
>
|
||||
<i className="bx bxs-edit text-secondary me-2"></i> Edit
|
||||
</a>
|
||||
|
||||
@ -57,7 +57,7 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
const handleViewProject = () => {
|
||||
navigate(`/projects/${projectData.id}`);
|
||||
navigate(`/projects/details`);
|
||||
};
|
||||
|
||||
const handleFormSubmit = (updatedProject) => {
|
||||
@ -98,7 +98,7 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
<h5
|
||||
className="mb-0 stretched-link text-heading text-start"
|
||||
onClick={handleViewProject}
|
||||
>
|
||||
>
|
||||
{projectInfo.shortName
|
||||
? projectInfo.shortName
|
||||
: projectInfo.name}
|
||||
@ -274,4 +274,4 @@ const ProjectCard = ({ projectData, recall }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectCard;
|
||||
export default ProjectCard;
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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">
|
||||
@ -20,72 +173,78 @@ const ProjectOverview = ({ project }) => {
|
||||
<span className="ms-2">Project Statistics</span>
|
||||
</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"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
<div className="card-body">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectOverview;
|
||||
export default ProjectOverview;
|
||||
@ -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();
|
||||
|
||||
@ -26,7 +26,8 @@ const DateRangePicker = ({
|
||||
altFormat: "d-m-Y",
|
||||
defaultDate: [startDate, endDate],
|
||||
static: true,
|
||||
clickOpens: true,
|
||||
clickOpens: true,
|
||||
maxDate: endDate, // ✅ Disable future dates
|
||||
onChange: (selectedDates, dateStr) => {
|
||||
const [startDateString, endDateString] = dateStr.split(" to ");
|
||||
onRangeChange?.({ startDate: startDateString, endDate: endDateString });
|
||||
@ -54,4 +55,4 @@ const DateRangePicker = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default DateRangePicker;
|
||||
export default DateRangePicker;
|
||||
|
||||
@ -120,11 +120,11 @@ export const useEmployeesAllOrByProjectId = (projectId, showInactive) => {
|
||||
: ['projectEmployees', projectId];
|
||||
|
||||
const queryFn = async () => {
|
||||
if (isAllEmployees) {
|
||||
if (isAllEmployees) {
|
||||
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
85
src/hooks/useImageGallery.js
Normal 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;
|
||||
@ -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) => {
|
||||
|
||||
@ -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) => {
|
||||
|
||||
@ -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);
|
||||
},
|
||||
|
||||
@ -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,7 +132,13 @@ const AttendancePage = () => {
|
||||
const handleToggle = (event) => {
|
||||
setShowOnlyCheckout(event.target.checked);
|
||||
};
|
||||
useEffect(() => {
|
||||
if(selectedProject == null){
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
},[])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (modelConfig !== null) {
|
||||
openModel();
|
||||
@ -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,7 +266,8 @@ const AttendancePage = () => {
|
||||
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3">
|
||||
{activeTab === "all" && (
|
||||
<>
|
||||
<div className="tab-pane fade show active py-0">
|
||||
{!attLoading && (
|
||||
<div className="tab-pane fade show active py-0">
|
||||
<Attendance
|
||||
attendance={filteredAttendance}
|
||||
handleModalData={handleModalData}
|
||||
@ -278,6 +276,7 @@ const AttendancePage = () => {
|
||||
showOnlyCheckout={ShowPending}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!attLoading && filteredAttendance?.length === 0 && (
|
||||
<p>
|
||||
{" "}
|
||||
|
||||
@ -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 ${
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
|
||||
@ -260,7 +260,7 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
|
||||
}, [prefernceContacts]);
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<div className={IsPage ? "container-fluid":""}>
|
||||
{IsPage && (
|
||||
<Breadcrumb
|
||||
data={[
|
||||
|
||||
@ -1,25 +1,43 @@
|
||||
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";
|
||||
import DateRangePicker from "../../components/common/DateRangePicker";
|
||||
import eventBus from "../../services/eventBus";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import {formatUTCToLocalTime} from "../../utils/dateUtils";
|
||||
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);
|
||||
}
|
||||
@ -229,7 +185,7 @@ const ImageGallery = () => {
|
||||
}
|
||||
});
|
||||
});
|
||||
return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
|
||||
return Array.from(uniqueUsersMap.entries()).sort((a, b) => a[1].localeCompare(b[1]));
|
||||
}, [allImagesData]);
|
||||
|
||||
const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
|
||||
@ -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,22 +311,18 @@ const ImageGallery = () => {
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
{type !== "dateRange" &&
|
||||
selectedFilters[type] &&
|
||||
selectedFilters[type].length > 0 && (
|
||||
<button
|
||||
className="clear-button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedFilters((prev) => ({ ...prev, [type]: [] }));
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
<span className="collapse-icon">
|
||||
{collapsedFilters[type] ? '+' : '-'}
|
||||
</span>
|
||||
{type !== "dateRange" && selectedFilters[type]?.length > 0 && (
|
||||
<button
|
||||
className="clear-button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedFilters((prev) => ({ ...prev, [type]: [] }));
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
<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 (
|
||||
<label key={itemId}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isChecked}
|
||||
onChange={() => toggleFilter(type, itemId, itemName)}
|
||||
/>
|
||||
{itemName}
|
||||
</label>
|
||||
);
|
||||
})
|
||||
items.map(([itemId, itemName]) => (
|
||||
<label key={itemId}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedFilters[type].some((item) => item[0] === itemId)}
|
||||
onChange={() => toggleFilter(type, itemId, itemName)}
|
||||
/>
|
||||
{itemName}
|
||||
</label>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@ -438,40 +354,25 @@ const ImageGallery = () => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`gallery-container container-fluid ${ isFilterPanelOpen ? "filter-panel-open-end" : "" }`}>
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/" },
|
||||
{ label: "Gallary", link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
<div className={`gallery-container container-fluid ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
|
||||
<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} > {batch.floorName} >{" "}
|
||||
<strong>{batch.workAreaName || "Unknown"} >{" "}
|
||||
{batch.activityName}</strong>
|
||||
</div>
|
||||
<div>{batch.buildingName} > {batch.floorName} > <strong>{batch.workAreaName || "Unknown"} > {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,107 +398,53 @@ const ImageGallery = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="image-group-wrapper">
|
||||
{showScrollButtons && (
|
||||
<button
|
||||
className="scroll-arrow left-arrow"
|
||||
onClick={() => scrollLeft(batch.batchId)}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
)}
|
||||
<div
|
||||
className="image-group-horizontal"
|
||||
ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
|
||||
>
|
||||
{showScrollButtons && <button className="scroll-arrow left-arrow" onClick={() => scrollLeft(batch.batchId)}>‹</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)}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
)}
|
||||
{showScrollButtons && <button className="scroll-arrow right-arrow" onClick={() => scrollRight(batch.batchId)}>›</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>
|
||||
</div>
|
||||
<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")}
|
||||
{renderFilterCategory("Building", buildings, "building")}
|
||||
@ -620,12 +453,10 @@ const ImageGallery = () => {
|
||||
{renderFilterCategory("Activity", activities, "activity")}
|
||||
{renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
|
||||
{renderFilterCategory("Work Category", workCategories, "workCategory")}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageGallery;
|
||||
export default ImageGallery;
|
||||
|
||||
@ -1,103 +1,149 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@ -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"
|
||||
@ -211,4 +205,4 @@ const ChangePasswordPage = ({ onClose }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangePasswordPage;
|
||||
export default ChangePasswordPage;
|
||||
@ -18,9 +18,9 @@ const otpSchema = z.object({
|
||||
const LoginWithOtp = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [ loading, setLoading ] = useState( false );
|
||||
const [ timeLeft, setTimeLeft ] = useState( 0 );
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [timeLeft, setTimeLeft] = useState(0);
|
||||
|
||||
|
||||
const inputRefs = useRef([]);
|
||||
|
||||
@ -29,68 +29,97 @@ const LoginWithOtp = () => {
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitted },
|
||||
getValues,
|
||||
setValue,
|
||||
trigger,
|
||||
} = useForm({
|
||||
resolver: zodResolver(otpSchema),
|
||||
});
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const finalOtp = data.otp1 + data.otp2 + data.otp3 + data.otp4;
|
||||
const username = localStorage.getItem( "otpUsername" );
|
||||
const username = localStorage.getItem("otpUsername");
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
let requestedData = {
|
||||
email: username,
|
||||
otp:finalOtp
|
||||
}
|
||||
const response = await AuthRepository.verifyOTP( requestedData )
|
||||
|
||||
localStorage.setItem("jwtToken", response.data.token);
|
||||
localStorage.setItem("refreshToken", response.data.refreshToken);
|
||||
setLoading( false );
|
||||
localStorage.removeItem( "otpUsername" );
|
||||
localStorage.removeItem( "otpSentTime" );
|
||||
navigate( "/dashboard" );
|
||||
|
||||
let requestedData = {
|
||||
email: username,
|
||||
otp: finalOtp
|
||||
}
|
||||
const response = await AuthRepository.verifyOTP(requestedData)
|
||||
|
||||
localStorage.setItem("jwtToken", response.data.token);
|
||||
localStorage.setItem("refreshToken", response.data.refreshToken);
|
||||
setLoading(false);
|
||||
localStorage.removeItem("otpUsername");
|
||||
localStorage.removeItem("otpSentTime");
|
||||
navigate("/dashboard");
|
||||
|
||||
} catch (err) {
|
||||
showToast( "Invalid or expired OTP.", "error" );
|
||||
|
||||
setLoading(false);
|
||||
showToast("Invalid or expired OTP.", "error");
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const formatTime = (seconds) => {
|
||||
const min = Math.floor(seconds / 60).toString().padStart(2, "0");
|
||||
const sec = (seconds % 60).toString().padStart(2, "0");
|
||||
return `${min}:${sec}`;
|
||||
};
|
||||
const formatTime = (seconds) => {
|
||||
const min = Math.floor(seconds / 60).toString().padStart(2, "0");
|
||||
const sec = (seconds % 60).toString().padStart(2, "0");
|
||||
return `${min}:${sec}`;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const otpSentTime = localStorage.getItem("otpSentTime");
|
||||
const now = Date.now();
|
||||
// Time Logic for OTP expiry
|
||||
useEffect(() => {
|
||||
const otpSentTime = localStorage.getItem("otpSentTime");
|
||||
const now = Date.now();
|
||||
|
||||
if (otpSentTime) {
|
||||
const elapsed = Math.floor((now - Number(otpSentTime)) / 1000); // in seconds
|
||||
const remaining = Math.max(OTP_EXPIRY_SECONDS - elapsed, 0); // prevent negatives
|
||||
setTimeLeft(remaining);
|
||||
}
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (timeLeft <= 0) return;
|
||||
if (otpSentTime) {
|
||||
const elapsed = Math.floor((now - Number(otpSentTime)) / 1000); //in seconds
|
||||
const remaining = Math.max(OTP_EXPIRY_SECONDS - elapsed, 0); //prevent negatives
|
||||
setTimeLeft(remaining);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft((prev) => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer);
|
||||
localStorage.removeItem( "otpSentTime" );
|
||||
localStorage.removeItem("otpUsername");
|
||||
return 0;
|
||||
|
||||
useEffect(() => {
|
||||
if (timeLeft <= 0) return;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft((prev) => {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timer);
|
||||
localStorage.removeItem("otpSentTime");
|
||||
localStorage.removeItem("otpUsername");
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
trigger(["otp1", "otp2", "otp3", "otp4"]);
|
||||
} else {
|
||||
showToast("Invalid OTP format pasted. Please enter 4 digits")
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [timeLeft]);
|
||||
for (let i = 0; i < 4; i++) {
|
||||
setValue(`otp${i + 1}`, "")
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
@ -109,9 +138,8 @@ 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;
|
||||
ref(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}
|
||||
/>
|
||||
@ -163,17 +196,17 @@ useEffect(() => {
|
||||
>
|
||||
This OTP will expire in <strong>{formatTime(timeLeft)}</strong>
|
||||
</p>
|
||||
) : (
|
||||
<div>
|
||||
<p
|
||||
className="text-center text-danger mt-2 text small-text m-0"
|
||||
|
||||
>
|
||||
OTP has expired. Please request a new one.
|
||||
</p>
|
||||
<a className="text-primary cursor-pointer" onClick={()=>navigate('/auth/login')}>Try Again</a>
|
||||
</div>
|
||||
|
||||
) : (
|
||||
<div>
|
||||
<p
|
||||
className="text-center text-danger mt-2 text small-text m-0"
|
||||
|
||||
>
|
||||
OTP has expired. Please request a new one.
|
||||
</p>
|
||||
<a className="text-primary cursor-pointer" onClick={() => navigate('/auth/login')}>Try Again</a>
|
||||
</div>
|
||||
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -85,7 +85,7 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
sortedFinalList,
|
||||
10
|
||||
20
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -141,13 +141,12 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
id="DataTables_Table_0_length"
|
||||
>
|
||||
<div className="col-md-3 my-0 ">
|
||||
<DateRangePicker onRangeChange={setDateRange} endDateMode="yesterday"/>
|
||||
<DateRangePicker onRangeChange={setDateRange} endDateMode="yesterday" />
|
||||
</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"
|
||||
onClick={() => setIsRefreshing(!isRefreshing)}
|
||||
@ -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,9 +239,8 @@ 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
|
||||
className="page-link "
|
||||
@ -253,9 +251,8 @@ const AttendancesEmployeeRecords = ({ employee }) => {
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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,172 +14,116 @@ 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 {
|
||||
projects_Details,
|
||||
loading: projectLoading,
|
||||
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 projectId = useSelector((store) => store.localVariables.projectId);
|
||||
|
||||
const {
|
||||
projects_Details,
|
||||
loading: projectLoading,
|
||||
error: projectError,
|
||||
refetch,
|
||||
} = useProjectDetails(projectId);
|
||||
|
||||
const [activePill, setActivePill] = useState("profile");
|
||||
|
||||
const handlePillClick = (pillKey) => {
|
||||
setActivePill(pillKey);
|
||||
};
|
||||
|
||||
const handleDataChange = (data) => {
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
if (projectLoading) return <Loader></Loader>;
|
||||
switch (activePill) {
|
||||
case "profile": {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-xl-4 col-lg-5 col-md-5 mt-5">
|
||||
<AboutProject ></AboutProject>
|
||||
</div>
|
||||
<div className="col-xl-4 col-lg-5 col-md-5 mt-5">
|
||||
<ProjectOverview project={projectId} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
case "teams": {
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-lg-12 col-xl-12">
|
||||
{/* Teams */}
|
||||
<Teams ></Teams>
|
||||
{/* Teams */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "infra": {
|
||||
return (
|
||||
<ProjectInfra
|
||||
data={projects_Details}
|
||||
onDataChange={handleDataChange}
|
||||
></ProjectInfra>
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "workplan": {
|
||||
return (
|
||||
<WorkPlan
|
||||
data={projects_Details}
|
||||
onDataChange={handleDataChange}
|
||||
></WorkPlan>
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "directory": {
|
||||
return (
|
||||
<div className="row">
|
||||
<Directory IsPage={false} prefernceContacts={projects_Details.id} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
default:
|
||||
return <ComingSoonPage></ComingSoonPage>;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(setProjectId(projectId));
|
||||
|
||||
}, [projects_Details, projectId]);
|
||||
|
||||
const handler = useCallback(
|
||||
(msg) => {
|
||||
if (msg.keyword === "Update_Project" && projects_Details.id === msg.response.id) {
|
||||
refetch()
|
||||
if (msg.keyword === "Update_Project" && projects_Details?.id === msg.response.id) {
|
||||
refetch();
|
||||
}
|
||||
},
|
||||
[projects_Details, handleDataChange]
|
||||
[projects_Details, refetch]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
eventBus.on("project", handler);
|
||||
return () => eventBus.off("project", handler);
|
||||
}, [handler]);
|
||||
|
||||
const handlePillClick = (pillKey) => {
|
||||
setActivePill(pillKey);
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
if (projectLoading || !projects_Details) return <Loader />;
|
||||
|
||||
switch (activePill) {
|
||||
case "profile":
|
||||
return (
|
||||
<>
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-5 mt-5">
|
||||
<AboutProject></AboutProject>
|
||||
<ProjectOverview project={projectId} />
|
||||
</div>
|
||||
<div className="col-lg-8 col-md-7 mt-5">
|
||||
<ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
case "teams":
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<Teams />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "infra":
|
||||
return (
|
||||
<ProjectInfra data={projects_Details} onDataChange={refetch} />
|
||||
);
|
||||
|
||||
case "workplan":
|
||||
return (
|
||||
<WorkPlan data={projects_Details} onDataChange={refetch} />
|
||||
);
|
||||
|
||||
case "directory":
|
||||
return (
|
||||
<div className="row mt-2">
|
||||
<Directory IsPage={false} prefernceContacts={projects_Details.id} />
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return <ComingSoonPage />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{}
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Projects", link: "/projects" },
|
||||
{ label: `${project?.name ? project?.name : ""}`, link: null },
|
||||
]}
|
||||
></Breadcrumb>
|
||||
<div className="container-fluid">
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/dashboard" },
|
||||
{ label: "Projects", link: "/projects" },
|
||||
{ label: projects_Details?.name || "Project", link: null },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="row">
|
||||
{projectLoading && <p>Loading....</p>}
|
||||
{/* {!projectLoading && project && (
|
||||
<ProjectBanner project_data={project}></ProjectBanner>
|
||||
)} */}
|
||||
|
||||
<ProjectNav
|
||||
onPillClick={handlePillClick}
|
||||
activePill={activePill}
|
||||
></ProjectNav>
|
||||
</div>
|
||||
|
||||
<div className="row"></div>
|
||||
|
||||
{renderContent()}
|
||||
<div className="row">
|
||||
<ProjectNav onPillClick={handlePillClick} activePill={activePill} />
|
||||
</div>
|
||||
</>
|
||||
|
||||
{renderContent()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectDetails;
|
||||
export default ProjectDetails;
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -62,7 +62,7 @@ const ProjectListView = ({ projectData, recall }) => {
|
||||
const handleClose = () => setShowModal(false);
|
||||
|
||||
const handleViewProject = () => {
|
||||
navigate(`/projects/${projectData.id}`);
|
||||
navigate(`/projects/details`);
|
||||
};
|
||||
|
||||
const handleFormSubmit = (updatedProject) => {
|
||||
@ -89,7 +89,7 @@ const ProjectListView = ({ projectData, recall }) => {
|
||||
<td className="text-start" colSpan={5}>
|
||||
<span
|
||||
className="text-primary cursor-pointer"
|
||||
onClick={() => navigate(`/projects/${projectInfo.id}`)}
|
||||
onClick={() => navigate(`/projects/details`)}
|
||||
>
|
||||
{projectInfo.shortName
|
||||
? `${projectInfo.name} (${projectInfo.shortName})`
|
||||
@ -162,7 +162,7 @@ const ProjectListView = ({ projectData, recall }) => {
|
||||
<a
|
||||
aria-label="click to View details"
|
||||
className="dropdown-item"
|
||||
onClick={() => navigate(`/projects/${projectInfo.id}`)}
|
||||
onClick={() => navigate(`/projects/details`)}
|
||||
>
|
||||
<i className="bx bx-detail me-2"></i>
|
||||
<span className="align-left">View details</span>
|
||||
@ -193,4 +193,4 @@ const ProjectListView = ({ projectData, recall }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ProjectListView;
|
||||
export default ProjectListView;
|
||||
@ -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}`);
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -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 /> },
|
||||
|
||||
@ -5,7 +5,7 @@ const localVariablesSlice = createSlice({
|
||||
initialState: {
|
||||
selectedMaster:"Application Role",
|
||||
regularizationCount:0,
|
||||
projectId: "",
|
||||
projectId: null,
|
||||
reload:false
|
||||
|
||||
},
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -69,4 +69,13 @@ 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);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user