import { useEffect, useState } from "react"; import { useMachineCount, useMachineUptime } from "../../../store/store"; import { ProductionCapacityIcon, ThroughputSummaryIcon, } from "../../icons/analysis"; import SkeletonUI from "../../templates/SkeletonUI"; const ProductionCapacity = ({ progressPercent = 50, 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; const [isLoading, setIsLoading] = useState(false); const { machineCount, setMachineCount } = useMachineCount() const { machineActiveTime, setMachineActiveTime } = useMachineUptime() useEffect(() => { setIsLoading(true); machineUtilization = machineActiveTime console.log('machineActiveTime: ', machineActiveTime); }, [machineActiveTime]) return (
Throughput Summary
{timeRange.startTime} - {timeRange.endTime}
{isLoading ? ( <>
{throughputValue} Units/hour
{/* Dynamic Progress Bar */}
{[...Array(totalBars)].map((_, i) => (
{i < barsToFill ? (
) : i === barsToFill ? (
) : null}
))}
Avg. Process Time {avgProcessTime}
Machine Utilization {machineActiveTime}
) : ( )}
); }; export default ProductionCapacity;