upgraded progress

src/components/Directory/ListViewContact.jsx

@@ -179,7 +179,7 @@ const ListViewContact = ({ data, Pagination }) => {
                   <tr style={{ height: "200px" }}>
                     <td
                       colSpan={contactList.length + 1}
-                      className="text-center align-middle"
+                      className="text-center border-0 align-middle"
                     >
                       No contacts found
                     </td>

src/components/Project/Infrastructure/WorkArea.jsx

@@ -108,7 +108,7 @@ 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,65 @@ 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%";
-    return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
+    if (!planned || planned === 0) return 0;
+    return Math.min((completed / planned) * 100, 100);
   };
 
-  const progressStyle = {
-    width: getProgress(plannedWork, completedWork),
+  const percentage = 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
-      className={`progress ${className} ${rounded ? "rounded" : ""}`}
-      style={{ height }}
+      className={`d-flex align-items-center ${className}`}
+      style={containerStyle}
+    >
+      <div className="flex-grow-1">
+        <div
+          className={`progress ${rounded ? "rounded" : ""}`}
+          style={{ height, backgroundColor: "#f0f0f0" }}
         >
           <div
             className={`progress-bar ${rounded ? "rounded" : ""}`}
             role="progressbar"
-        style={progressStyle}
+            style={progressBarStyle}
             aria-valuenow={completedWork}
             aria-valuemin="0"
             aria-valuemax={plannedWork}
-      ></div>
+          />
+        </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;
-

src/utils/appUtils.js

@@ -92,3 +92,46 @@ Date.UTC(Number(year), Number(month) - 1, Number(day), 0, 0, 0)
 );
 return isNaN(date.getTime()) ? null : date.toISOString();
 }
+
+
+/**
+ * Flexible number formatter for currency, numbers, or percentages.
+ *
+ * @param {number} amount - The value to format.
+ * @param {Object} options - Formatting options.
+ * @param {"currency"|"number"|"percent"} [options.type="number"] - Type of format.
+ * @param {string} [options.currency="INR"] - Currency code (only used when type="currency").
+ * @param {string} [options.locale="en-US"] - Locale for formatting.
+ * @param {"short"|"long"|"standard"} [options.notation="compact"] - Display style for large numbers.
+ * @param {number} [options.minimumFractionDigits=0] - Minimum decimal places.
+ * @param {number} [options.maximumFractionDigits=2] - Maximum decimal places.
+ * @returns {string} Formatted number string.
+ */
+export const formatFigure = (
+  amount,
+  {
+    type = "number",
+    currency = "INR",
+    locale = "en-US",
+    notation = "compact",
+    compactDisplay = "short",
+    minimumFractionDigits = 0,
+    maximumFractionDigits = 2,
+  } = {}
+) => {
+  if (amount == null || isNaN(amount)) return "-";
+
+  const formatterOptions = {
+    style: type === "currency" ? "currency" : type === "percent" ? "percent" : "decimal",
+    notation: notation,
+    compactDisplay,
+    minimumFractionDigits,
+    maximumFractionDigits,
+  };
+
+  if (type === "currency") {
+    formatterOptions.currency = currency;
+  }
+
+  return new Intl.NumberFormat(locale, formatterOptions).format(amount);
+};