From 80d3434bbf09e8d1b19aaae175daa92e52b2dbb3 Mon Sep 17 00:00:00 2001
From: Pramod Mahajan <pramodmahajan1411200@gmail.com>
Date: Mon, 2 Jun 2025 19:18:05 +0530
Subject: [PATCH] Display completion percentage for each Work Area header

---
 .../Project/Infrastructure/WorkArea.jsx       | 47 ++++++++++++++-----
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/Project/Infrastructure/WorkArea.jsx b/src/components/Project/Infrastructure/WorkArea.jsx
index 69663630..65c9e04b 100644
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/src/components/Project/Infrastructure/WorkArea.jsx
@@ -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>