69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import React, { useState } from "react";
|
|
import { ProductionCapacityIcon } from "../../icons/analysis";
|
|
|
|
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 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">Production Capacity</div>
|
|
<div className="sub-header">
|
|
{timeRange.startTime} - {timeRange.endTime}
|
|
</div>
|
|
</div>
|
|
<div className="icon-wrapper">
|
|
<ProductionCapacityIcon />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="process-container">
|
|
<div className="throughput-value">
|
|
<span className="value">{throughputValue}</span> Units/hour
|
|
</div>
|
|
|
|
{/* Dynamic 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">{avgProcessTime}</span>
|
|
</div>
|
|
<div className="metric">
|
|
<span className="label">Machine Utilization</span>
|
|
<span className="value">{machineUtilization}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductionCapacity;
|