63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
|
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;
|