99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useMachineCount, useMachineUptime, useMaterialCycle, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
|
|
import {
|
|
ThroughputSummaryIcon,
|
|
} from "../../icons/analysis";
|
|
import SkeletonUI from "../../templates/SkeletonUI";
|
|
|
|
const ProductionCapacity = ({
|
|
avgProcessTime = "28.4 Secs/unit",
|
|
machineUtilization = "78%",
|
|
throughputValue = 128,
|
|
timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
|
|
}) => {
|
|
const { machineActiveTime } = useMachineUptime();
|
|
const { materialCycleTime } = useMaterialCycle();
|
|
const { throughputData } = useThroughPutData()
|
|
|
|
const progressPercent = machineActiveTime;
|
|
|
|
|
|
const totalBars = 6;
|
|
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
|
|
const partialFillPercent =
|
|
((progressPercent / 100) * totalBars - barsToFill) * 100;
|
|
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (throughputData > 0) {
|
|
setIsLoading(false);
|
|
} else {
|
|
setIsLoading(true);
|
|
}
|
|
}, [throughputData])
|
|
|
|
return (
|
|
<>
|
|
|
|
{!isLoading && <div className="throughtputSummary-container analysis-card">
|
|
<div className="throughtputSummary-wrapper analysis-card-wrapper">
|
|
<div className="card-header">
|
|
<div className="header">
|
|
<div className="main-header">Throughput Summary</div>
|
|
<div className="sub-header">
|
|
{timeRange.startTime} - {timeRange.endTime}
|
|
</div>
|
|
</div>
|
|
<div className="icon-wrapper">
|
|
<ThroughputSummaryIcon />
|
|
</div>
|
|
</div>
|
|
{!isLoading ? (
|
|
<>
|
|
<div className="process-container">
|
|
<div className="throughput-value">
|
|
<span className="value">{throughputData}</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">{materialCycleTime} secs/unit </span>
|
|
</div>
|
|
<div className="metric">
|
|
<span className="label">Machine Utilization</span>
|
|
<span className="value">{machineActiveTime}</span>
|
|
{/* <span className="value">{machineActiveTime}</span> */}
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<SkeletonUI type={"default"} />
|
|
)}
|
|
</div>
|
|
</div>}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ProductionCapacity;
|