Merge pull request 'Display completion percentage for each Work Area header' (#174) from pramod_Task-#438 into Issue_Jun_1W

Reviewed-on: #174

src/components/Charts/ProgressDonutChart.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import ReactApexChart from "react-apexcharts";
+
+const ProgressDonutChart = ({ completed = 0, planned = 1 }) => {
+  const percentage = planned > 0 ? Math.round((completed / planned) * 100) : 0;
+
+  const options = {
+    chart: {
+      height: 10,
+      type: "radialBar",
+      toolbar: { show: false },
+    },
+    plotOptions: {
+      radialBar: {
+        startAngle: 0,
+        endAngle: 360,
+        hollow: {
+          margin: 0,
+          size: "10%",
+          background: "#fff",
+          dropShadow: {
+            enabled: true,
+            top: 0,
+            left: 0,
+            blur: 3,
+            opacity: 0.45,
+          },
+        },
+        track: {
+          background: "#f5f5f5",
+          strokeWidth: "10%",
+          dropShadow: { enabled: false },
+        },
+        dataLabels: {
+          show: true,
+          name: {
+            offsetY: -10,
+            color: "#888",
+            fontSize: "14px",
+          },
+          value: {
+            formatter: (val) => `${val}%`,
+            color: "#111",
+            fontSize: "11px",
+            show: true,
+          },
+        },
+      },
+    },
+    fill: {
+      type: "gradient",
+      gradient: {
+        shade: "dark",
+        type: "horizontal",
+        shadeIntensity: 0.5,
+        gradientToColors: ["#ABE5A1"],
+        opacityFrom: 1,
+        opacityTo: 1,
+        stops: [0, 100],
+      },
+    },
+    stroke: {
+      lineCap: "round",
+    },
+  };
+
+  return (
+    <div id="chart">
+      <ReactApexChart
+        options={options}
+        series={[percentage]}
+        type="radialBar"
+        height={100}
+      />
+    </div>
+  );
+};
+
+export default ProgressDonutChart;

src/components/Project/Infrastructure/Floor.jsx

@@ -13,10 +13,10 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
           />
         ))
       ) : (
-       <tr>
+        <tr>
           <td colSpan="4" className="text-start table-cell">
-               <div className="row ps-2">
-                {/*         <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
+            <div className="row ps-2">
+              {/*         <div className="col-1 col-md-1 d-flex justify-content-between align-items-center " >
                     <button
               className="btn me-2"
             >
@@ -25,7 +25,7 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
           </div> */}
               <div className="col-12  ps-8">
                 <div className="row">
-                  <div className="col">
+                  <div className="d-flex col-5">
                     {" "}
                     <span className="fw-semibold text-primary">
                       Floor:&nbsp;
@@ -34,6 +34,13 @@ const Floor = ({ floor, workAreas, forBuilding }) => {
                       {floor.floorName}
                     </span>
                   </div>
+                  <div className="text-start col-5">
+                    {" "}
+                    <span className="fw-semibold text-primary">
+                      Work Area:&nbsp;
+                    </span>{" "}
+                    <span className="fw-normal text-danger">Not Available</span>
+                  </div>
                 </div>
               </div>
             </div>

src/components/Project/Infrastructure/InfraTable.jsx

@@ -68,7 +68,6 @@ const InfraTable = ({ buildings }) => {
         showToast("Failed to save floor", "error");
       }
     } catch (err) {
-   
       showToast("Error occurred while saving floor", "error");
     }
   };
@@ -95,14 +94,14 @@ const InfraTable = ({ buildings }) => {
               No floors have been added yet. Start by adding floors to manage
               this building.
             </p>
-            <button
+            {/* <button
               type="button"
               className="btn btn-xs btn-primary"
               onClick={() => handleAddFloor(building)}
             >
               <i className="bx bx-plus-circle me-2"></i>
               Add Floors
-            </button>
+            </button> */}
           </div>
         </td>
       </tr>

src/components/Project/Infrastructure/WorkArea.jsx

@@ -6,20 +6,46 @@ 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";
+import ProgressDonutChart from "../../Charts/ProgressDonutChart";
+import ProgressBar from "../../common/ProgressBar";
+import { componentsToColor } from "pdf-lib";
 
 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 [workAreaStatus, setWorkAreaStatus] = useState({
+    completed: 0,
+    planned: 100,
+  });
+
+  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%
+    setWorkAreaStatus({ completed: totalCompleted, planned: totalPlanned });
+  }, [workItems]);
 
   useEffect(() => {
     const project = getCachedData("projectInfo");
@@ -153,21 +179,32 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                     }}
                   ></i>
 
-                  <div className="d-flex justify-content-start gap-12">
-                    <div className="d-flex">
-                      <span className="fw-semibold small">Floor:&nbsp;</span>
-                      <span className="fw-normal text-darkgreen small">
+                  <div className="d-flex justify-content-start row w-100 align-items-center">
+                    <div className="d-flex col-5">
+                      <span className="fw-semibold  text-primary small">
+                        Floor:
+                      </span>
+                      <span className="fw-normal text-darkgreen small  px-2">
                         {floor.floorName}
                       </span>
                     </div>
-                    <div className="text-start ">
+                    <div className="text-start col-5">
                       <span className="fw-semibold text-primary small">
-                        Work Area:&nbsp;
+                        Work Area:
                       </span>
-                      <span className="fw-normal text-darkgreen small">
+                      <span className="fw-normal text-darkgreen small  px-2">
                         {workArea.areaName}
                       </span>
                     </div>
+                    {workArea?.workItems?.length > 0 && (
+                      <div className="col-2">
+                        <ProgressBar
+                          completedWork={workAreaStatus.completed}
+                          plannedWork={workAreaStatus.planned}
+                          className="m-0 text-info"
+                        ></ProgressBar>
+                      </div>
+                    )}
                   </div>
                 </button>
               </p>
@@ -198,7 +235,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>