updating progressbar

app/src/components/ui/analysis/ProductionCapacity.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { ProductionCapacityIcon } from "../../icons/analysis";
+
+const ProductionCapacity = () => {
+  const totalBars = 6;
+  const progressPercent = 50;
+
+  const barsToFill = Math.floor((progressPercent / 100) * totalBars);
+  const partialFillPercent =
+    ((progressPercent / 100) * totalBars - barsToFill) * 100;
+
+  return (
+    <div className="productionCapacity-container analysis-card">
+      <div className="productionCapacity-wrapper analysis-card-wrapper">
+        <div className="card-header">
+          <div className="header">
+            <div className="main-header">Throughput Summary</div>
+            <div className="sub-header">08:00 - 09:00 AM</div>
+          </div>
+          <div className="icon-wrapper">
+            <ProductionCapacityIcon />
+          </div>
+        </div>
+
+        <div className="process-container">
+          <div className="throughput-value">
+            <span className="value">128</span> Units/hour
+          </div>
+
+          {/* Progress Bar */}
+          <div className="progress-bar-wrapper">
+            {[...Array(totalBars)].map((_, i) => (
+              <div className="progress-bar" key={i}>
+                {i < barsToFill ? (
+                  <div className="bar-fill full" />
+                ) : i === barsToFill ? (
+                  <div
+                    className="bar-fill partial"
+                    style={{ width: `${partialFillPercent}%` }}
+                  />
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="metrics-section">
+          <div className="metric">
+            <span className="label">Avg. Process Time</span>
+            <span className="value">28.4 Secs/unit</span>
+          </div>
+          <div className="metric">
+            <span className="label">Machine Utilization</span>
+            <span className="value">78%</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductionCapacity;