Weidget_Dashoard_Jobs :- Creating Weiget for Jobs. #521
@ -39,14 +39,12 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
|
||||
dateTo: localToUtc(formData.dateTo),
|
||||
};
|
||||
handleFilter(filterPayload);
|
||||
closePanel();
|
||||
};
|
||||
|
||||
const onClear = () => {
|
||||
setResetKey((prev) => prev + 1);
|
||||
handleFilter(TaskReportDefaultValue);
|
||||
reset(TaskReportDefaultValue);
|
||||
closePanel();
|
||||
};
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
|
||||
@ -204,24 +204,34 @@ const TaskReportList = () => {
|
||||
<HoverPopup
|
||||
id="total_pending_task"
|
||||
title="Total Pending Task"
|
||||
content={<p>This shows the total pending tasks for each activity on that date.</p>}
|
||||
content={
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
This shows the total pending tasks for each activity on that date.
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||
</HoverPopup>
|
||||
</span>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<span>
|
||||
Reported/Planned{" "}
|
||||
<HoverPopup
|
||||
id="reportes_and_planned_task"
|
||||
title="Reported and Planned Task"
|
||||
content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
|
||||
content={
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
This shows the reported versus planned tasks for each activity on that date.
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
|
||||
</HoverPopup>
|
||||
</span>
|
||||
</th>
|
||||
|
||||
<th>Assign Date</th>
|
||||
<th>Team</th>
|
||||
<th className="text-center">Actions</th>
|
||||
|
||||
@ -100,7 +100,7 @@ const AttendanceOverview = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white px-4 rounded shadow d-flex flex-column h-100">
|
||||
<div className="bg-white px-4 rounded shadow d-flex flex-column h-100" style={{ minHeight: "450px" }}>
|
||||
{/* Header */}
|
||||
<div className="d-flex mt-2 justify-content-between align-items-center mb-3">
|
||||
<div className="card-title mb-0 text-start">
|
||||
|
||||
@ -17,12 +17,19 @@ import ExpenseAnalysis from "./ExpenseAnalysis";
|
||||
import ExpenseStatus from "./ExpenseStatus";
|
||||
import ExpenseByProject from "./ExpenseByProject";
|
||||
import ProjectStatistics from "../Project/ProjectStatistics";
|
||||
import ServiceJobs from "./ServiceJobs";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";
|
||||
|
||||
const Dashboard = () => {
|
||||
|
||||
// Get the selected project ID from Redux store
|
||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||
const isAllProjectsSelected = projectId === null;
|
||||
const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
||||
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
|
||||
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
|
||||
|
||||
|
||||
return (
|
||||
<div className="container-fluid mt-5">
|
||||
@ -49,7 +56,7 @@ const Dashboard = () => {
|
||||
<div className="col-xxl-6 col-lg-6">
|
||||
<ProjectProgressChart />
|
||||
</div>
|
||||
{!isAllProjectsSelected && (
|
||||
{!isAllProjectsSelected && (canRegularize || canTeamAttendance || canSelfAttendance) && (
|
||||
<div className="col-12 col-md-6 mb-sm-0 mb-4">
|
||||
<AttendanceOverview />
|
||||
</div>
|
||||
@ -57,8 +64,10 @@ const Dashboard = () => {
|
||||
|
||||
{!isAllProjectsSelected && (
|
||||
<div className="col-xxl-4 col-lg-4">
|
||||
<div className="card h-100">
|
||||
<ProjectStatistics />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 col-xl-4 col-md-6">
|
||||
<div className="card ">
|
||||
@ -74,6 +83,9 @@ const Dashboard = () => {
|
||||
<div className="col-12 col-md-6">
|
||||
<ExpenseByProject />
|
||||
</div>
|
||||
{/* <div className="col-12 col-md-12">
|
||||
<ServiceJobs />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
237
src/components/Dashboard/ServiceJobs.jsx
Normal file
237
src/components/Dashboard/ServiceJobs.jsx
Normal file
@ -0,0 +1,237 @@
|
||||
import React from "react";
|
||||
|
||||
const ServiceJobs = () => {
|
||||
return (
|
||||
<div className="col-xxl-4 col-lg-6">
|
||||
<div className="card h-100">
|
||||
<div className="card-header d-flex justify-content-between">
|
||||
<div className="card-title mb-0 text-start">
|
||||
<h5 className="mb-1">Service Jobs</h5>
|
||||
<p className="card-subtitle">All Projects</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card-body p-0">
|
||||
<div className="nav-align-top">
|
||||
|
||||
{/* Tabs */}
|
||||
<ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
|
||||
<li className="nav-item">
|
||||
<button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
|
||||
My Jobs
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
|
||||
Assigned
|
||||
</button>
|
||||
</li>
|
||||
<li className="nav-item">
|
||||
<button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
|
||||
In Progress
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="tab-content border-0 mx-1 text-start">
|
||||
|
||||
{/* ---------------------- NEW TAB ---------------------- */}
|
||||
<div className="tab-pane fade show active" id="tab-new">
|
||||
{/* Entry 1 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
|
||||
<i className="bx bx-check-circle"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-success text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">Myrtle Ullrich</h6>
|
||||
<p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">Barry Schowalter</h6>
|
||||
<p className="text-body mb-0">939 Orange, California(CA), 92118</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
||||
|
||||
{/* Entry 2 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
|
||||
<i className="bx bx-check-circle"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-success text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">Veronica Herman</h6>
|
||||
<p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">Helen Jacobs</h6>
|
||||
<p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* ---------------------- PREPARING TAB ---------------------- */}
|
||||
<div className="tab-pane fade" id="tab-preparing">
|
||||
|
||||
{/* Entry 1 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
|
||||
<i className="bx bx-time-five"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-warning text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">Oliver Grant</h6>
|
||||
<p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">Samantha Lee</h6>
|
||||
<p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
||||
|
||||
{/* Entry 2 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
|
||||
<i className="bx bx-time-five"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-warning text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">Marcus Howard</h6>
|
||||
<p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">Daniel Foster</h6>
|
||||
<p className="text-body mb-0">312 Marina, California(CA), 94109</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* ---------------------- SHIPPING TAB ---------------------- */}
|
||||
<div className="tab-pane fade" id="tab-shipping">
|
||||
|
||||
{/* Entry 1 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
|
||||
<i className="bx bx-package"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-info text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">James Carter</h6>
|
||||
<p className="text-body mb-0">441 Market St, California(CA), 94111</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">Linda Moore</h6>
|
||||
<p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div className="border-1 border-light border-top border-dashed my-4"></div>
|
||||
|
||||
{/* Entry 2 */}
|
||||
<ul className="timeline mb-0">
|
||||
<li className="timeline-item ps-6 border-left-dashed">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
|
||||
<i className="bx bx-package"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-info text-uppercase">Sender</small>
|
||||
</div>
|
||||
<h6 className="my-50">Sarah Bennett</h6>
|
||||
<p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li className="timeline-item ps-6 border-transparent">
|
||||
<span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
|
||||
<i className="bx bx-map"></i>
|
||||
</span>
|
||||
<div className="timeline-event ps-1">
|
||||
<div className="timeline-header">
|
||||
<small className="text-primary text-uppercase">Receiver</small>
|
||||
</div>
|
||||
<h6 className="my-50">George Simmons</h6>
|
||||
<p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ServiceJobs;
|
||||
@ -165,7 +165,7 @@ const ProjectStatistics = ({ project }) => {
|
||||
}, [selectedProject]);
|
||||
|
||||
return (
|
||||
<div className="card h-100">
|
||||
<>
|
||||
<div className="card-header text-start">
|
||||
<h5 className="card-action-title mb-0">
|
||||
{" "}
|
||||
@ -242,8 +242,8 @@ const ProjectStatistics = ({ project }) => {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -252,16 +252,15 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<HoverPopup
|
||||
title="Payment Type"
|
||||
id="payment_type"
|
||||
|
||||
content={
|
||||
<div className=" w-50">
|
||||
<p>
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
Choose whether the payment amount varies or remains fixed
|
||||
each cycle.
|
||||
<br />
|
||||
<strong>Is Variable:</strong> Amount changes per cycle.
|
||||
<br />
|
||||
<strong>Fixed:</strong> Amount stays constant.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
@ -476,10 +475,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
title="Payment Buffer Days"
|
||||
id="payment_buffer_days"
|
||||
content={
|
||||
<p>
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
Number of extra days allowed after the due date before
|
||||
payment is considered late.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||
@ -511,10 +510,11 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<HoverPopup
|
||||
title="End Date"
|
||||
id="end_date"
|
||||
|
||||
content={
|
||||
<p>
|
||||
<div className="text-wrap" style={{ maxWidth: "200px" }}>
|
||||
The date when the last payment in the recurrence occurs.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||
|
||||
@ -58,117 +58,43 @@ const HoverPopup = ({
|
||||
return () => document.removeEventListener("click", handler);
|
||||
}, [Mode, visible, dispatch, id]);
|
||||
|
||||
// Positioning effect: respects align prop and stays inside boundary (drawer)
|
||||
useEffect(() => {
|
||||
if (!visible || !popupRef.current || !triggerRef.current) return;
|
||||
|
||||
// run in next frame so DOM/layout settles
|
||||
requestAnimationFrame(() => {
|
||||
const popup = popupRef.current;
|
||||
|
||||
// choose boundary: provided boundaryRef or nearest positioned parent (popup.parentElement)
|
||||
const boundaryEl =
|
||||
(boundaryRef && boundaryRef.current) || popup.parentElement;
|
||||
const boundaryEl = (boundaryRef && boundaryRef.current) || popup.parentElement;
|
||||
if (!boundaryEl) return;
|
||||
|
||||
const boundaryRect = boundaryEl.getBoundingClientRect();
|
||||
const triggerRect = triggerRef.current.getBoundingClientRect();
|
||||
|
||||
// reset styles first
|
||||
popup.style.left = "";
|
||||
popup.style.right = "";
|
||||
popup.style.transform = "";
|
||||
popup.style.top = "";
|
||||
|
||||
const popupRect = popup.getBoundingClientRect();
|
||||
const parentRect = boundaryRect; // alias
|
||||
const triggerCenterX = triggerRect.left + triggerRect.width / 2 - boundaryRect.left;
|
||||
let left = triggerCenterX - popupRect.width / 2;
|
||||
|
||||
// Convert trigger center to parent coordinates
|
||||
const triggerCenterX =
|
||||
triggerRect.left + triggerRect.width / 2 - parentRect.left;
|
||||
|
||||
// preferred left so popup center aligns to trigger center:
|
||||
const preferredLeft = triggerCenterX - popupRect.width / 2;
|
||||
|
||||
// Helpers to set styles in parent's coordinate system:
|
||||
const setLeft = (leftPx) => {
|
||||
popup.style.left = `${leftPx}px`;
|
||||
popup.style.right = "auto";
|
||||
popup.style.transform = "none";
|
||||
};
|
||||
const setRight = (rightPx) => {
|
||||
popup.style.left = "auto";
|
||||
popup.style.right = `${rightPx}px`;
|
||||
popup.style.transform = "none";
|
||||
};
|
||||
|
||||
// If user forced align:
|
||||
if (align === "left") {
|
||||
// align popup's left to parent's left (0)
|
||||
setLeft(0);
|
||||
return;
|
||||
}
|
||||
if (align === "right") {
|
||||
// align popup's right to parent's right (0)
|
||||
setRight(0);
|
||||
return;
|
||||
}
|
||||
if (align === "center") {
|
||||
popup.style.left = "50%";
|
||||
popup.style.right = "auto";
|
||||
popup.style.transform = "translateX(-50%)";
|
||||
return;
|
||||
}
|
||||
|
||||
// align === "auto": try preferred centered position, but flip fully if overflow
|
||||
// clamp preferredLeft to boundaries so it doesn't render partially outside
|
||||
const leftIfCentered = Math.max(
|
||||
0,
|
||||
Math.min(preferredLeft, parentRect.width - popupRect.width)
|
||||
);
|
||||
|
||||
// if centered fits, use it
|
||||
if (leftIfCentered === preferredLeft) {
|
||||
setLeft(leftIfCentered);
|
||||
return;
|
||||
}
|
||||
|
||||
// if centering would overflow right -> stick popup fully to left (left=0)
|
||||
if (preferredLeft > parentRect.width - popupRect.width) {
|
||||
// place popup so its right aligns to parent's right
|
||||
// i.e., left = parent width - popup width
|
||||
setLeft(parentRect.width - popupRect.width);
|
||||
return;
|
||||
}
|
||||
|
||||
// if centering would overflow left -> stick popup fully to left=0
|
||||
if (preferredLeft < 0) {
|
||||
setLeft(0);
|
||||
return;
|
||||
}
|
||||
|
||||
// fallback center
|
||||
setLeft(leftIfCentered);
|
||||
// Clamp to boundaries
|
||||
left = Math.max(0, Math.min(left, boundaryRect.width - popupRect.width));
|
||||
popup.style.left = `${left}px`;
|
||||
});
|
||||
}, [visible, align, boundaryRef]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="d-inline-block position-relative" // <-- ADD THIS !!
|
||||
style={{
|
||||
maxWidth: "calc(700px - 100px)",
|
||||
width: "100%",
|
||||
wordWrap: "break-word",
|
||||
overflow: "visible", // also make sure popup isn't clipped
|
||||
}}
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<div
|
||||
className="d-inline-block"
|
||||
|
||||
ref={triggerRef}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
style={{ cursor: "pointer" }}
|
||||
style={{ cursor: "pointer", display: "inline-block" }}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
@ -180,8 +106,9 @@ const HoverPopup = ({
|
||||
style={{
|
||||
zIndex: 2000,
|
||||
top: "100%",
|
||||
width: "max-content",
|
||||
minWidth: "120px",
|
||||
minWidth: "200px",
|
||||
maxWidth: "300px",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
@ -190,7 +117,7 @@ const HoverPopup = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -24,6 +24,9 @@ import { useProjectAccess } from "../../hooks/useProjectAccess";
|
||||
|
||||
import "./ProjectDetails.css";
|
||||
import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
|
||||
import ProjectStatistics from "../../components/Project/ProjectStatistics";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";
|
||||
|
||||
const ProjectDetails = () => {
|
||||
const projectId = useSelectedProject();
|
||||
@ -34,6 +37,10 @@ const ProjectDetails = () => {
|
||||
useProjectDetails(projectId);
|
||||
|
||||
const { canView, loading: permsLoading } = useProjectAccess(projectId);
|
||||
const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
|
||||
const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
|
||||
const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!projectId && projectNames.length > 0) {
|
||||
@ -82,13 +89,16 @@ const ProjectDetails = () => {
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-md-5 mt-2">
|
||||
<AboutProject />
|
||||
<ProjectOverview project={projectId} />
|
||||
<div className="card"><ProjectStatistics project={projectId} /></div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-8 col-md-7 mt-2">
|
||||
<ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
|
||||
{(canRegularize || canTeamAttendance || canSelfAttendance) && (
|
||||
<div className="mt-5">
|
||||
<AttendanceOverview />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user