diff --git a/src/components/common/ProgressBar.jsx b/src/components/common/ProgressBar.jsx
index 1a29a343..947c6a00 100644
--- a/src/components/common/ProgressBar.jsx
+++ b/src/components/common/ProgressBar.jsx
@@ -1,30 +1,37 @@
 import React from "react";
 
-const ProgressBar = ( {completeValue, totalValue} ) =>
-{
-    
-
-  const getProgress = (complete, total) => {
-    return (total * 100) / complete + "%";
+const ProgressBar = ({
+  plannedWork = 100,
+  completedWork = 0,
+  height = "8px",
+  className = "mb-4",
+  rounded = true,
+}) => {
+  const getProgress = (planned, completed) => {
+    if (!planned || planned === 0) return "0%";
+    return `${Math.min((completed / planned) * 100, 100).toFixed(2)}%`;
   };
-    return (
-        <div className="progress mb-4 rounded" style={{height: "8px"}}>
-                <div className="progress p-0">
+
+  const progressStyle = {
+    width: getProgress(plannedWork, completedWork),
+  };
+
+  return (
+    <div
+      className={`progress ${className} ${rounded ? "rounded" : ""}`}
+      style={{ height }}
+    >
       <div
-        className="progress-bar"
+        className={`progress-bar ${rounded ? "rounded" : ""}`}
         role="progressbar"
-        style={{
-          width: `${getProgress( totalValue,completeValue)}`,
-          height: "10px",
-        }}
-        aria-valuenow={completeValue}
+        style={progressStyle}
+        aria-valuenow={completedWork}
         aria-valuemin="0"
-        aria-valuemax={totalValue}
+        aria-valuemax={plannedWork}
       ></div>
     </div>
-        </div>
-
   );
 };
 
 export default ProgressBar;
+