Display completion percentage for each Work Area header

This commit is contained in:
Pramod Mahajan 2025-06-02 19:18:05 +05:30
parent 8c3b10f1cb
commit a5dfb69ea4

View File

@ -6,20 +6,39 @@ import { useDispatch } from "react-redux";
import { refreshData } from "../../../slices/localVariablesSlice";
import ProjectRepository from "../../../repositories/ProjectRepository";
import showToast from "../../../services/toastService";
import {useHasUserPermission} from "../../../hooks/useHasUserPermission";
import {ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA, MANAGE_TASK} from "../../../utils/constants";
import {useParams} from "react-router-dom";
import { useHasUserPermission } from "../../../hooks/useHasUserPermission";
import {
ASSIGN_REPORT_TASK,
MANAGE_PROJECT_INFRA,
MANAGE_TASK,
} from "../../../utils/constants";
import { useParams } from "react-router-dom";
const WorkArea = ({ workArea, floor, forBuilding }) => {
const [workItems, setWorkItems] = useState([]);
const dispatch = useDispatch();
const [ Project, setProject ] = useState();
const {projectId} = useParams();
const ManageTasks = useHasUserPermission(MANAGE_TASK);
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
const ManageAndAssignTak = useHasUserPermission( ASSIGN_REPORT_TASK );
const [Project, setProject] = useState();
const { projectId } = useParams();
const ManageTasks = useHasUserPermission(MANAGE_TASK);
const ManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
const ManageAndAssignTak = useHasUserPermission(ASSIGN_REPORT_TASK);
const [percentComplete, setPercentComplete] = useState(0);
useEffect(() => {
const totalCompleted = workItems.reduce(
(sum, i) => sum + (i.workItem?.completedWork || 0),
0
);
const totalPlanned = workItems.reduce(
(sum, i) => sum + (i.workItem?.plannedWork || 0),
0
);
const percent =
totalPlanned > 0 ? (totalCompleted / totalPlanned) * 100 : 0;
setPercentComplete(Math.min(percent, 100)); // cap at 100%
}, [workItems]);
useEffect(() => {
const project = getCachedData("projectInfo");
@ -167,6 +186,11 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
<span className="fw-normal text-darkgreen small">
{workArea.areaName}
</span>
{workArea?.workItems?.length > 0 && (
<span className="small-text px-3">
{percentComplete.toFixed(2) + "%"}
</span>
)}
</div>
</div>
</button>
@ -198,7 +222,8 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
<th className="infra-activity-table-header">
Progress
</th>
{( ManageInfra || ( !projectId && ManageAndAssignTak ) ) && (
{(ManageInfra ||
(!projectId && ManageAndAssignTak)) && (
<th className="infra-activity-table-header text-end">
<span className="px-2">Actions</span>
</th>