Merge pull request 'Adding percentage in Infrastructure.' (#456) from Kartik_Bug#1350 into Issues_Oct_1W

Reviewed-on: #456
merged

src/components/Project/Infrastructure/WorkArea.jsx

@@ -108,7 +108,10 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                       <ProgressBar
                         completedWork={formatNumber(workArea?.completedWork)}
                         plannedWork={formatNumber(workArea?.plannedWork)}
-                        className="m-0 my-2 me-6 text-info"
+                        className="m-0 my-2"
+                        height="6px"
+                        rounded
+                        showLabel={true}
                       />
                     </div>
                   </div>

src/components/common/ProgressBar.jsx

@@ -3,35 +3,62 @@ import React from "react";
 const ProgressBar = ({
   plannedWork = 100,
   completedWork = 0,
-  height = "8px",
+  height = "6px",
   className = "mb-4",
   rounded = true,
+  showLabel = true,
 }) => {
   const getProgress = (planned, completed) => {
-    if (!planned || planned === 0) return "0%";
+    if (!planned || planned === 0) return 0;
-    return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
+    return Math.min((completed / planned) * 100, 100);
   };
 
-  const progressStyle = {
+  const percentage = getProgress(plannedWork, completedWork);
-    width: getProgress(plannedWork, completedWork),
+
+  const progressBarStyle = {
+    width: `${percentage.toFixed(2)}%`,
+    transition: "width 0.4s ease",
+  };
+
+  const containerStyle = {
+    height,
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
   };
 
   return (
-    <div
+    <div className={`d-flex align-items-center ${className}`} style={containerStyle}>
-      className={`progress ${className} ${rounded ? "rounded" : ""}`}
+      <div className="flex-grow-1">
-      style={{ height }}
+        <div
-    >
+          className={`progress ${rounded ? "rounded" : ""}`}
-      <div
+          style={{ height, backgroundColor: "#f0f0f0" }}
-        className={`progress-bar ${rounded ? "rounded" : ""}`}
+        >
-        role="progressbar"
+          <div
-        style={progressStyle}
+            className={`progress-bar ${rounded ? "rounded" : ""}`}
-        aria-valuenow={completedWork}
+            role="progressbar"
-        aria-valuemin="0"
+            style={progressBarStyle}
-        aria-valuemax={plannedWork}
+            aria-valuenow={completedWork}
-      ></div>
+            aria-valuemin="0"
+            aria-valuemax={plannedWork}
+          />
+        </div>
+      </div>
+
+      {showLabel && (
+        <span
+          className="fw-semibold text-secondary"
+          style={{
+            minWidth: "45px",
+            textAlign: "right",
+            fontSize: "0.8rem",
+          }}
+        >
+          {percentage.toFixed(2)}%
+        </span>
+      )}
     </div>
   );
 };
 
 export default ProgressBar;
-