From d88e93395f9a9a73a7f9d2dfe820b33a44873374 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Wed, 14 May 2025 18:21:49 +0530 Subject: [PATCH] Refactor loading state management and enhance data handling in analysis components --- .../ui/analysis/ProductionCapacity.tsx | 9 ++- app/src/components/ui/analysis/ROISummary.tsx | 23 +++--- .../ui/simulation/simulationPlayer.tsx | 80 ++++++++++--------- .../simulation/analysis/ROI/roiData.tsx | 16 +++- .../productionCapacityData.tsx | 14 ++-- .../analysis/throughPut/throughPutData.tsx | 48 +++++++---- app/src/store/builder/store.ts | 11 ++- 7 files changed, 116 insertions(+), 85 deletions(-) diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index 3e6fe03..fd6150d 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -91,11 +91,12 @@ const ThroughputSummary: React.FC = () => { useEffect(() => { if (productionCapacityData >= 0) { - setIsLoading(true); - console.log('productionCapacityData: ', productionCapacityData); + setIsLoading(false); + console.log("productionCapacityData: ", productionCapacityData); + } else { + setIsLoading(true); } - - }, [productionCapacityData]) + }, [productionCapacityData]); return (
diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx index da9d496..deaf87a 100644 --- a/app/src/components/ui/analysis/ROISummary.tsx +++ b/app/src/components/ui/analysis/ROISummary.tsx @@ -85,16 +85,13 @@ const ROISummary = ({ const { roiSummary } = useROISummaryData(); useEffect(() => { - if (roiSummary && typeof roiSummary === 'object') { - + if (roiSummary && typeof roiSummary === "object") { console.log('roiSummary: ', roiSummary); - setIsLoading(true) + setIsLoading(false); // Data loaded + } else { + setIsLoading(true); // Show skeleton while loading } - - }, [roiSummary]) - - - + }, [roiSummary]); return (
@@ -113,13 +110,13 @@ const ROISummary = ({
Product :
-
{roiSummaryData.productName}
+
{roiSummary.productName}
- +{roiSummary.roiPercentage}% ROI with payback + {roiSummary.roiPercentage}% ROI with payback in just {roiSummary.paybackPeriod} months
@@ -150,8 +147,7 @@ const ROISummary = ({
0 ? "profit" : "loss"}`} >
↑ @@ -159,7 +155,7 @@ const ROISummary = ({
₹ - {roiSummary.netProfit + {roiSummary.netProfit > 0 ? roiSummary.netProfit : roiSummary.netLoss}
@@ -241,6 +237,7 @@ const ROISummary = ({ ) : ( + //
No Data
)}
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx index 0a5b2de..2bac8ce 100644 --- a/app/src/components/ui/simulation/simulationPlayer.tsx +++ b/app/src/components/ui/simulation/simulationPlayer.tsx @@ -1,6 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons"; -import { useActiveTool } from "../../../store/builder/store"; +import { useActiveTool, useProcessBar } from "../../../store/builder/store"; import { useAnimationPlaySpeed, usePauseButtonStore, @@ -109,21 +109,25 @@ const SimulationPlayer: React.FC = () => { const hourlySimulation = 25; const dailyProduction = 75; const monthlyROI = 50; + const { processBar, setProcessBar } = useProcessBar(); + // const process = [ + // { name: "process 1", completed: 0 }, // 0% completed + // { name: "process 2", completed: 20 }, // 20% completed + // { name: "process 3", completed: 40 }, // 40% completed + // { name: "process 4", completed: 60 }, // 60% completed + // { name: "process 5", completed: 80 }, // 80% completed + // { name: "process 6", completed: 100 }, // 100% completed + // { name: "process 7", completed: 0 }, // 0% completed + // { name: "process 8", completed: 50 }, // 50% completed + // { name: "process 9", completed: 90 }, // 90% completed + // { name: "process 10", completed: 30 }, // 30% completed + // ]; - const process = [ - { name: "process 1", completed: 0 }, // 0% completed - { name: "process 2", completed: 20 }, // 20% completed - { name: "process 3", completed: 40 }, // 40% completed - { name: "process 4", completed: 60 }, // 60% completed - { name: "process 5", completed: 80 }, // 80% completed - { name: "process 6", completed: 100 }, // 100% completed - { name: "process 7", completed: 0 }, // 0% completed - { name: "process 8", completed: 50 }, // 50% completed - { name: "process 9", completed: 90 }, // 90% completed - { name: "process 10", completed: 30 }, // 30% completed - ]; + useEffect(() => { + // console.log('processBar: ', processBar); + }, [processBar]) - const intervals = [10, 20, 30, 40, 50, 60]; // in minutes + const intervals = [50, 20, 30, 40, 50, 60]; // in minutes const totalSegments = intervals.length; const progress = 20; // percent (example) @@ -285,11 +289,10 @@ const SimulationPlayer: React.FC = () => { {index < intervals.length - 1 && (
= ((index + 1) / totalSegments) * 100 - ? "filled" - : "" - }`} + className={`line ${progress >= ((index + 1) / totalSegments) * 100 + ? "filled" + : "" + }`} >
)} @@ -328,9 +331,8 @@ const SimulationPlayer: React.FC = () => {
+ )) + ) : ( +
No process data available
+ )}
diff --git a/app/src/modules/simulation/analysis/ROI/roiData.tsx b/app/src/modules/simulation/analysis/ROI/roiData.tsx index e2d854c..fd77098 100644 --- a/app/src/modules/simulation/analysis/ROI/roiData.tsx +++ b/app/src/modules/simulation/analysis/ROI/roiData.tsx @@ -1,9 +1,11 @@ import React, { useEffect, useState } from 'react' import { useInputValues, useProductionCapacityData, useROISummaryData } from '../../../../store/builder/store'; +import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore'; export default function ROIData() { const { inputValues } = useInputValues(); const { productionCapacityData } = useProductionCapacityData() + const { selectedProduct } = useSelectedProduct(); const { setRoiSummaryData } = useROISummaryData(); @@ -42,6 +44,11 @@ export default function ROIData() { console.log('RevenueForYear: ', RevenueForYear); //Costs + + let materialCount = 1200; + + //Material Cost + let MaterialCost = productionCapacityData * materialCost console.log('MaterialCost: ', MaterialCost); let LaborCost = laborCost * shiftLength * shiftsPerDay * workingDaysPerYear; @@ -52,7 +59,7 @@ export default function ROIData() { console.log('MaintenceCost: ', MaintenceCost); //Total Anuual Cost - let TotalAnnualCost = MaterialCost + LaborCost + EnergyCost + MaintenceCost; + let TotalAnnualCost = (MaterialCost * materialCount) + LaborCost + EnergyCost + MaintenceCost; console.log('TotalAnnualCost: ', TotalAnnualCost); @@ -73,11 +80,12 @@ export default function ROIData() { // Payback Period const paybackPeriod = initialInvestment / ProfitforYear; console.log('paybackPeriod: ', paybackPeriod); - + setRoiSummaryData({ - roiPercentage: ROIData, - paybackPeriod, + productName: selectedProduct.productName, + roiPercentage: parseFloat((ROIData / 100).toFixed(2)), + paybackPeriod: parseFloat(paybackPeriod.toFixed(2)), totalCost: TotalAnnualCost, revenueGenerated: RevenueForYear, netProfit: NetProfit > 0 ? NetProfit : 0, diff --git a/app/src/modules/simulation/analysis/productionCapacity/productionCapacityData.tsx b/app/src/modules/simulation/analysis/productionCapacity/productionCapacityData.tsx index 77e68ff..a77e221 100644 --- a/app/src/modules/simulation/analysis/productionCapacity/productionCapacityData.tsx +++ b/app/src/modules/simulation/analysis/productionCapacity/productionCapacityData.tsx @@ -28,18 +28,14 @@ export default function ProductionCapacityData() { console.log('afterYield: ', afterYield.toFixed(2)); //Annual Output const annualProduction = afterYield * workingDaysPerYear; - console.log('annualProduction: ', annualProduction.toFixed(2)); - setProductionCapacityData(annualProduction); + console.log('annualProduction: ', Number(annualProduction.toFixed(2))); + //Production per Hour + const productionPerHour = throughputData * (yieldRate / 100); + console.log('productionPerHour: ', productionPerHour); + setProductionCapacityData(Number(productionPerHour.toFixed(2))); } }, [throughputData, inputValues]); - - - useEffect(() => { - - - }, []) - return ( <> ) diff --git a/app/src/modules/simulation/analysis/throughPut/throughPutData.tsx b/app/src/modules/simulation/analysis/throughPut/throughPutData.tsx index 899dca9..401d730 100644 --- a/app/src/modules/simulation/analysis/throughPut/throughPutData.tsx +++ b/app/src/modules/simulation/analysis/throughPut/throughPutData.tsx @@ -3,7 +3,7 @@ import { useSelectedProduct } from '../../../../store/simulation/useSimulationSt import { useProductStore } from '../../../../store/simulation/useProductStore'; import { determineExecutionMachineSequences } from '../../simulator/functions/determineExecutionMachineSequences'; import { useArmBotStore } from '../../../../store/simulation/useArmBotStore'; -import { useMachineCount, useMachineUptime, useMaterialCycle, useThroughPutData } from '../../../../store/builder/store'; +import { useMachineCount, useMachineUptime, useMaterialCycle, useProcessBar, useThroughPutData } from '../../../../store/builder/store'; import { useVehicleStore } from '../../../../store/simulation/useVehicleStore'; import { useMachineStore } from '../../../../store/simulation/useMachineStore'; import { useConveyorStore } from '../../../../store/simulation/useConveyorStore'; @@ -25,6 +25,7 @@ export default function ThroughPutData() { const { machineActiveTime, setMachineActiveTime } = useMachineUptime(); const { materialCycleTime, setMaterialCycleTime } = useMaterialCycle(); + const { processBar, setProcessBar } = useProcessBar(); // const [totalActiveTime, setTotalActiveTime] = useState(0); const { setThroughputData } = useThroughPutData() // <=== ADD THIS @@ -32,7 +33,8 @@ export default function ThroughPutData() { // Setting machine count useEffect(() => { - if (materialCycleTime < 0) return + if (materialCycleTime <= 0) return + let process: any = []; const fetchProductSequenceData = async () => { const productData = getProductById(selectedProduct.productId); if (productData) { @@ -42,45 +44,45 @@ export default function ThroughPutData() { let totalActiveTime = 0; productSequenceData.forEach((sequence) => { sequence.forEach((item) => { + if (item.type === "roboticArm") { armBots.filter(arm => arm.modelUuid === item.modelUuid) .forEach(arm => { - if (arm.activeTime >= 0) { + process.push({ modelid: arm.modelUuid, modelName: arm.modelName, activeTime: arm?.activeTime }) totalActiveTime += arm.activeTime; } }); } else if (item.type === "vehicle") { vehicles.filter(vehicle => vehicle.modelUuid === item.modelUuid) .forEach(vehicle => { - if (vehicle.activeTime >= 0) { - // totalActiveTime += vehicle.activeTime; - totalActiveTime += 34; + process.push({ modelid: vehicle.modelUuid, modelName: vehicle.modelName, activeTime: vehicle?.activeTime }) + + totalActiveTime += vehicle.activeTime; } }); } else if (item.type === "machine") { machines.filter(machine => machine.modelUuid === item.modelUuid) .forEach(machine => { if (machine.activeTime >= 0) { - // totalActiveTime += machine.activeTime; - totalActiveTime += 12; + process.push({ modelid: machine.modelUuid, modelName: machine.modelName, activeTime: machine?.activeTime }) + totalActiveTime += machine.activeTime; } }); } else if (item.type === "transfer") { conveyors.filter(conveyor => conveyor.modelUuid === item.modelUuid) .forEach(conveyor => { if (conveyor.activeTime >= 0) { - // totalActiveTime += conveyor.activeTime; - totalActiveTime += 89; + totalActiveTime += conveyor.activeTime; } }); } else if (item.type === "storageUnit") { storageUnits.filter(storage => storage.modelUuid === item.modelUuid) .forEach(storage => { if (storage.activeTime >= 0) { - // totalActiveTime += storage.activeTime; - totalActiveTime += 45; + totalActiveTime += storage.activeTime; + } }); } @@ -90,13 +92,20 @@ export default function ThroughPutData() { setMachineCount(totalItems); setMachineActiveTime(totalActiveTime); + let arr = process.map((item: any) => ({ + name: item.modelName, + completed: Math.round((item.activeTime / totalActiveTime) * 100) + })); + setProcessBar(arr); + + } } }; fetchProductSequenceData(); - }, [products, selectedProduct, getProductById, setMachineCount, isPlaying, armBots, materialCycleTime]); + }, [products, selectedProduct, getProductById, setMachineCount, materialCycleTime, armBots, vehicles, machines]); // Setting material cycle time useEffect(() => { @@ -106,8 +115,8 @@ export default function ThroughPutData() { if (start === 0 || end === 0) return; - const totalCycleTime = end - start; - setMaterialCycleTime(totalCycleTime.toFixed(2)); // Set the material cycle time in the store + const totalCycleTime = (end - start) / 1000; // Convert milliseconds to seconds + setMaterialCycleTime(Number(totalCycleTime.toFixed(2))); // Set the material cycle time in the store }); }, [materialHistory]); @@ -115,16 +124,21 @@ export default function ThroughPutData() { useEffect(() => { if (machineActiveTime > 0 && materialCycleTime > 0 && machineCount > 0) { - const avgProcessTime = (machineActiveTime / materialCycleTime) * 100; // % value - const throughput = (3600 / materialCycleTime) * machineCount * (avgProcessTime / 100); // ✅ division by 100 + const avgProcessTime = (machineActiveTime / materialCycleTime) * 100; + const throughput = (3600 / materialCycleTime) * machineCount * (avgProcessTime / 100); setThroughputData(throughput.toFixed(2)); // Set the throughput data in the store + console.log('---Throughput Results---'); console.log('Total Active Time:', machineActiveTime); console.log('Material Cycle Time:', materialCycleTime); console.log('Machine Count:', machineCount); console.log('Average Process Time (%):', avgProcessTime); console.log('Calculated Throughput:', throughput); + + + + } }, [machineActiveTime, materialCycleTime, machineCount]); diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts index 7c72855..023716e 100644 --- a/app/src/store/builder/store.ts +++ b/app/src/store/builder/store.ts @@ -475,6 +475,11 @@ export const useProductionCapacityData = create((set: any) => ({ setProductionCapacityData: (x: any) => set({ productionCapacityData: x }), })); +export const useProcessBar = create((set: any) => ({ + processBar: [], + setProcessBar: (x: any) => set({ processBar: x }), +})); + type InputValuesStore = { inputValues: Record; @@ -495,6 +500,7 @@ export const useInputValues = create((set) => ({ })); export interface ROISummaryData { + productName: string; roiPercentage: number; paybackPeriod: number; totalCost: number; @@ -510,6 +516,7 @@ interface ROISummaryStore { export const useROISummaryData = create((set) => ({ roiSummary: { + productName: "", roiPercentage: 0, paybackPeriod: 0, totalCost: 0, @@ -518,4 +525,6 @@ export const useROISummaryData = create((set) => ({ netLoss: 0, }, setRoiSummaryData: (values) => set({ roiSummary: values }), -})); \ No newline at end of file +})); + +