updated simulation player

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

@@ -1,10 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
 import { ProductionCapacityIcon } from "../../icons/analysis";
 
-const ProductionCapacity = () => {
+const ProductionCapacity = ({
+  progressPercent = 10,
+  avgProcessTime = "28.4 Secs/unit",
+  machineUtilization = "78%",
+  throughputValue = 128,
+  timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
+}) => {
   const totalBars = 6;
-  const progressPercent = 50;
-
   const barsToFill = Math.floor((progressPercent / 100) * totalBars);
   const partialFillPercent =
     ((progressPercent / 100) * totalBars - barsToFill) * 100;
@@ -14,8 +18,10 @@ const ProductionCapacity = () => {
       <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 className="main-header">Production Capacity</div>
+            <div className="sub-header">
+              {timeRange.startTime} - {timeRange.endTime}
+            </div>
           </div>
           <div className="icon-wrapper">
             <ProductionCapacityIcon />
@@ -24,10 +30,10 @@ const ProductionCapacity = () => {
 
         <div className="process-container">
           <div className="throughput-value">
-            <span className="value">128</span> Units/hour
+            <span className="value">{throughputValue}</span> Units/hour
           </div>
 
-          {/* Progress Bar */}
+          {/* Dynamic Progress Bar */}
           <div className="progress-bar-wrapper">
             {[...Array(totalBars)].map((_, i) => (
               <div className="progress-bar" key={i}>
@@ -47,11 +53,11 @@ const ProductionCapacity = () => {
         <div className="metrics-section">
           <div className="metric">
             <span className="label">Avg. Process Time</span>
-            <span className="value">28.4 Secs/unit</span>
+            <span className="value">{avgProcessTime}</span>
           </div>
           <div className="metric">
             <span className="label">Machine Utilization</span>
-            <span className="value">78%</span>
+            <span className="value">{machineUtilization}</span>
           </div>
         </div>
       </div>