Refactor robotic arm and conveyor action handlers for improved functionality and performance; add despawn handler and update state management

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx

@@ -38,7 +38,7 @@ function RoboticArmMechanics() {
         } else {
             clearSelectedAction();
         }
-    }, [selectedAction, selectedEventData, selectedProduct]);
+    }, [selectedEventData, selectedProduct]);
 
     const updateBackend = (
         productName: string,

app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx

@@ -9,7 +9,7 @@ import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../../../functions/handleResizePannel";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
-import { useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
+import { useSelectedAction, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
 
 type TriggerProps = {
@@ -25,6 +25,7 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
     const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
     const [activeOption, setActiveOption] = useState<"onComplete" | "onStart" | "onStop" | "delay" | "onError">("onComplete");
     const triggersContainerRef = useRef<HTMLDivElement>(null);
+    const { selectedAction } = useSelectedAction();
 
     const email = localStorage.getItem('email')
     const organization = (email!.split("@")[1]).split(".")[0];
@@ -36,12 +37,12 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
 
         if (type === 'Conveyor' || type === 'Vehicle' || type === 'Machine' || type === 'StorageUnit') {
             actionUuid = (selectedPointData as ConveyorPointSchema | VehiclePointSchema | MachinePointSchema | StoragePointSchema).action?.actionUuid;
-        } else if (type === 'RoboticArm') {
+        } else if (type === 'RoboticArm' && selectedAction) {
-            actionUuid = (selectedPointData as RoboticArmPointSchema).actions[0]?.actionUuid;
+            actionUuid = selectedAction.actionId;
         }
 
         setCurrentAction(actionUuid);
-    }, [selectedPointData, selectedProduct, type]);
+    }, [selectedPointData, selectedProduct, type, selectedAction]);
 
     const updateBackend = (
         productName: string,

app/src/components/templates/SkeletonUI.tsx

@@ -7,7 +7,6 @@ interface SkeletonUIProps {
 
 // Define the SkeletonUI component
 const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
-  console.log("type: ", type);
 
   // Function to render skeleton content based on 'type'
   const renderSkeleton = () => {

app/src/modules/simulation/actions/conveyor/actionHandler/useDelayHandler.ts

@@ -71,7 +71,7 @@ export function useDelayHandler() {
     });
 
     const handleDelay = useCallback((action: ConveyorAction, materialId?: string) => {
-        if (!action || action.actionType !== 'delay' || !isPlaying || !materialId) return;
+        if (!action || action.actionType !== 'delay' || !materialId) return;
 
         const delayMs = (action.delay || 0) * 1000;
         if (delayMs <= 0) return;

app/src/modules/simulation/actions/conveyor/actionHandler/useDespawnHandler.ts

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { useMaterialStore } from "../../../../../store/simulation/useMaterialStore";
+
+export function useDespawnHandler() {
+    const { addMaterial, getMaterialById, setMaterial } = useMaterialStore();
+
+    const deSpawnLogStatus = (materialUuid: string, status: string) => {
+        console.log(`${materialUuid}, ${status}`);
+    }
+
+    const handleDespawn = useCallback((action: ConveyorAction, materialId?: string) => {
+        if (!action || action.actionType !== 'despawn' || !materialId) return;
+
+        const material = getMaterialById(materialId);
+        if (!material) return;
+
+        deSpawnLogStatus(material.materialId, `Despawned`);
+
+    }, [addMaterial, getMaterialById, setMaterial]);
+
+    return {
+        handleDespawn,
+    };
+}

app/src/modules/simulation/actions/conveyor/actionHandler/useSpawnHandler.ts

@@ -65,6 +65,7 @@ export function useSpawnHandler() {
         const modelUuid = getModelUuidByActionUuid(selectedProduct.productId, action.actionUuid);
         const pointUuid = getPointUuidByActionUuid(selectedProduct.productId, action.actionUuid);
         if (!modelUuid || !pointUuid) return;
+        const currentTime = performance.now();
 
         const newMaterial: MaterialSchema = {
             materialId: THREE.MathUtils.generateUUID(),
@@ -74,13 +75,12 @@ export function useSpawnHandler() {
             isVisible: true,
             isPaused: false,
             isRendered: true,
+            startTime:currentTime,
             current: {
                 modelUuid: modelUuid,
                 pointUuid: pointUuid,
                 actionUuid: action.actionUuid
             },
-            weight: 1,
-            cost: 1
         };
 
         if (action.triggers[0].triggeredAsset?.triggeredModel.modelUuid &&

app/src/modules/simulation/actions/conveyor/actionHandler/useSwapHandler.ts

@@ -1,21 +1,15 @@
 import { useCallback } from "react";
 import { useMaterialStore } from "../../../../../store/simulation/useMaterialStore";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
-import { useSelectedProduct } from "../../../../../store/simulation/useSimulationStore";
-import { usePlayButtonStore } from "../../../../../store/usePlayButtonStore";
 
 export function useSwapHandler() {
-    const { addMaterial, getMaterialById, setMaterial } = useMaterialStore();
+    const { getMaterialById, setMaterial } = useMaterialStore();
-    const { getPointUuidByActionUuid } = useProductStore();
-    const { selectedProduct } = useSelectedProduct();
-    const { isPlaying } = usePlayButtonStore();
 
     const swapLogStatus = (materialUuid: string, status: string) => {
         // console.log(`${materialUuid}, ${status}`);
     }
 
     const handleSwap = useCallback((action: ConveyorAction, materialId?: string) => {
-        if (!action || action.actionType !== 'swap' || !isPlaying || !materialId) return;
+        if (!action || action.actionType !== 'swap' || !materialId) return;
 
         const { material: newMaterialType } = action;
         const material = getMaterialById(materialId);
@@ -24,7 +18,7 @@ export function useSwapHandler() {
         setMaterial(material.materialId, newMaterialType);
         swapLogStatus(material.materialId, `Swapped to ${newMaterialType}`);
 
-    }, [addMaterial, getMaterialById, getPointUuidByActionUuid, isPlaying, setMaterial, selectedProduct.productId]);
+    }, [getMaterialById, setMaterial]);
 
     return {
         handleSwap,

app/src/modules/simulation/actions/conveyor/useConveyorActions.ts

@@ -2,10 +2,12 @@ import { useEffect, useCallback } from "react";
 import { useSpawnHandler } from "./actionHandler/useSpawnHandler";
 import { useSwapHandler } from "./actionHandler/useSwapHandler";
 import { useDelayHandler } from "./actionHandler/useDelayHandler";
+import { useDespawnHandler } from "./actionHandler/useDespawnHandler";
 
 export function useConveyorActions() {
     const { handleSpawn, clearCurrentSpawn } = useSpawnHandler();
     const { handleSwap } = useSwapHandler();
+    const { handleDespawn } = useDespawnHandler();
     const { handleDelay, cleanupDelay } = useDelayHandler();
 
     const handleDefaultAction = useCallback((action: ConveyorAction) => {
@@ -23,9 +25,9 @@ export function useConveyorActions() {
         handleDelay(action, materialId);
     }, [handleDelay]);
 
-    const handleDespawnAction = useCallback((action: ConveyorAction) => {
+    const handleDespawnAction = useCallback((action: ConveyorAction, materialId?: string) => {
-        console.log(`Despawning material`);
+        handleDespawn(action, materialId)
-    }, []);
+    }, [handleDespawn]);
 
     const handleConveyorAction = useCallback((action: ConveyorAction, materialId?: string) => {
         if (!action) return;
@@ -44,7 +46,7 @@ export function useConveyorActions() {
                 handleDelayAction(action, materialId);
                 break;
             case 'despawn':
-                handleDespawnAction(action);
+                handleDespawnAction(action, materialId);
                 break;
             default:
                 console.warn(`Unknown conveyor action type: ${action.actionType}`);

app/src/modules/simulation/materials/instances/animator/materialAnimator.tsx

@@ -46,12 +46,24 @@ function MaterialAnimator({
 
     useEffect(() => {
         if (!isPlaying || !material.next?.pointUuid) {
-            setIsAnimating(false);
+            if (material.current.pointUuid) {
+                const newTarget = getWorldPosition(material.current.pointUuid);
+                if (newTarget && matRef.current && !material.isPaused) {
+                    animationState.current.startPosition.copy(matRef.current.position);
+                    animationState.current.totalDistance = animationState.current.startPosition.distanceTo(newTarget);
+                    animationState.current.startTime = performance.now() - animationState.current.pausedTime;
+                    animationState.current.pausedTime = 0;
+                    animationState.current.isPaused = false;
+                    setTargetPosition(newTarget);
+                    setIsAnimating(true);
+                }
+            } else {
+                setIsAnimating(false);
+            }
             return;
         }
-
         const newTarget = getWorldPosition(material.next.pointUuid);
-        if (newTarget && matRef.current) {
+        if (newTarget && matRef.current && !material.isPaused) {
             animationState.current.startPosition.copy(matRef.current.position);
             animationState.current.totalDistance = animationState.current.startPosition.distanceTo(newTarget);
             animationState.current.startTime = performance.now() - animationState.current.pausedTime;
@@ -60,7 +72,7 @@ function MaterialAnimator({
             setTargetPosition(newTarget);
             setIsAnimating(true);
         }
-    }, [material.next?.pointUuid, isPlaying]);
+    }, [material, isPlaying]);
 
     useEffect(() => {
         if (shouldPause) {

app/src/modules/simulation/materials/instances/instance/materialInstance.tsx

@@ -84,7 +84,6 @@ function MaterialInstance({ material }: { material: MaterialSchema }) {
     }
 
     useEffect(() => {
-        // console.log('material: ', material);
         if (material.current && material.next) {
             // console.log('current: ', material.current.pointUuid);
             // console.log('next: ', material.next.pointUuid);

app/src/modules/simulation/roboticArm/instances/animator/materialAnimator.tsx

@@ -14,7 +14,7 @@ export default function MaterialAnimator({ ikSolver, armBot, currentPhase }: Mat
     const [isRendered, setIsRendered] = useState<boolean>(false);
 
     useEffect(() => {
-        if (currentPhase === "start-to-end") {
+        if (currentPhase === "start-to-end" || currentPhase === "dropping") {
             setIsRendered(true);
         } else {
             setIsRendered(false);

app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx

@@ -280,7 +280,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
                 rotation={[armBot.rotation[0], armBot.rotation[1], armBot.rotation[2]]}
             >
                 {/* Green ring */}
-                <mesh rotation={[-Math.PI / 2, 0, 0]}>
+                <mesh rotation={[-Math.PI / 2, 0, 0]} visible={false}>
                     <ringGeometry args={[CIRCLE_RADIUS, CIRCLE_RADIUS + 0.02, 64]} />
                     <meshBasicMaterial color="green" side={THREE.DoubleSide} />
                 </mesh>

app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react'
+import * as THREE from "three";
+import { useThree } from "@react-three/fiber";
 import IKInstance from '../ikInstance/ikInstance';
 import RoboticArmAnimator from '../animator/roboticArmAnimator';
-import { usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
-import { useArmBotStore } from '../../../../../store/simulation/useArmBotStore';
-import armModel from "../../../../../assets/gltf-glb/rigged/ik_arm_1.glb";
-import { useThree } from "@react-three/fiber";
-import * as THREE from "three";
 import MaterialAnimator from '../animator/materialAnimator';
-
+import armModel from "../../../../../assets/gltf-glb/rigged/ik_arm_1.glb";
+import { usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
+import { useMaterialStore } from '../../../../../store/simulation/useMaterialStore';
+import { useArmBotStore } from '../../../../../store/simulation/useArmBotStore';
+import { useProductStore } from '../../../../../store/simulation/useProductStore';
+import { useSelectedProduct } from '../../../../../store/simulation/useSimulationStore';
+import { useTriggerHandler } from '../../../triggers/triggerHandler/useTriggerHandler';
 
 function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
 
@@ -21,8 +24,12 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
     const pauseTimeRef = useRef<number | null>(null);
     const isPausedRef = useRef<boolean>(false);
     let startTime: number;
-    //zustand
+
-    const { addCurrentAction, setArmBotActive, setArmBotState, removeCurrentAction } = useArmBotStore();
+    const { setArmBotActive, setArmBotState, removeCurrentAction } = useArmBotStore();
+    const { setIsVisible } = useMaterialStore();
+    const { selectedProduct } = useSelectedProduct();
+    const { getActionByUuid } = useProductStore();
+    const { triggerPointActions } = useTriggerHandler();
     const { isPlaying } = usePlayButtonStore();
     const { isReset } = useResetButtonStore();
     const { isPaused } = usePauseButtonStore();
@@ -65,6 +72,10 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
                 if (curve) {
                     logStatus(armBot.modelUuid, "picking the object");
                     setPath(curve.points.map(point => [point.x, point.y, point.z]))
+
+                    if (armBot.currentAction) {
+                        setIsVisible(armBot.currentAction.materialId || '', false);
+                    }
                 }
             }
             logStatus(armBot.modelUuid, "Moving armBot from start point to end position.")
@@ -80,6 +91,18 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
                 if (curve) {
                     logStatus(armBot.modelUuid, "dropping the object");
                     setPath(curve.points.map(point => [point.x, point.y, point.z]));
+
+                    if (armBot.currentAction) {
+                        setIsVisible(armBot.currentAction.materialId || '', true);
+                    }
+
+                    if (armBot.currentAction) {
+                        const action = getActionByUuid(selectedProduct.productId, armBot.currentAction.actionUuid);
+                        if (action && armBot.currentAction.materialId) {
+                            triggerPointActions(action, armBot.currentAction.materialId)
+                            removeCurrentAction(armBot.modelUuid)
+                        }
+                    }
                 }
             }
             logStatus(armBot.modelUuid, "Moving armBot from end point to rest position.")
@@ -137,10 +160,6 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
             //Waiting for trigger.
             else if (armBot && !armBot.isActive && armBot.state === "idle" && currentPhase === "rest" && !armBot.currentAction) {
                 logStatus(armBot.modelUuid, "Waiting to trigger CurrentAction")
-                const timeoutId = setTimeout(() => {
-                    addCurrentAction(armBot.modelUuid, armBot.point.actions[0].actionUuid, 'Material 2');
-                }, 3000);
-                return () => clearTimeout(timeoutId);
             }
             //Moving to pickup point
             else if (armBot && !armBot.isActive && armBot.state === "idle" && currentPhase === "rest" && armBot.currentAction) {
@@ -219,7 +238,6 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
             setArmBotState(armBot.modelUuid, "idle")
             setCurrentPhase("rest");
             setPath([])
-            removeCurrentAction(armBot.modelUuid)
         }
     }
     const logStatus = (id: string, status: string) => {
@@ -232,7 +250,7 @@ function RoboticArmInstance({ armBot }: { armBot: ArmBotStatus }) {
                     <IKInstance modelUrl={armModel} setIkSolver={setIkSolver} ikSolver={ikSolver} armBot={armBot} groupRef={groupRef} />
                     <RoboticArmAnimator HandleCallback={HandleCallback} restPosition={restPosition} ikSolver={ikSolver} targetBone={targetBone} armBot={armBot}
                         logStatus={logStatus} path={path} currentPhase={currentPhase} />
-                 </>
+                </>
             )}
             <MaterialAnimator ikSolver={ikSolver} armBot={armBot} currentPhase={currentPhase} />
         </>

app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts

@@ -3,12 +3,14 @@ import { useActionHandler } from '../../actions/useActionHandler';
 import { useProductStore } from '../../../../store/simulation/useProductStore';
 import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore';
 import { useMaterialStore } from '../../../../store/simulation/useMaterialStore';
+import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
 
 export function useTriggerHandler() {
-    const { getEventByTriggerUuid, getEventByModelUuid } = useProductStore();
     const { handleAction } = useActionHandler();
-    const { setCurrentLocation, setNextLocation, getMaterialById } = useMaterialStore();
     const { selectedProduct } = useSelectedProduct();
+    const { getEventByTriggerUuid, getEventByModelUuid, getActionByUuid, getModelUuidByActionUuid } = useProductStore();
+    const { addCurrentAction, getArmBotById } = useArmBotStore();
+    const { setCurrentLocation, setNextLocation, getMaterialById, setIsPaused, setEndTime } = useMaterialStore();
 
     const handleTrigger = (trigger: TriggerSchema, action: Action, materialId: string) => {
 
@@ -46,7 +48,38 @@ export function useTriggerHandler() {
 
             } else if (toEvent?.type === 'roboticArm') {
                 // Transfer to Robotic Arm
+                if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint && trigger.triggeredAsset.triggeredAction) {
+                    const material = getMaterialById(materialId);
+                    if (material) {
+                        if (material.next) {
+                            const armBot = getArmBotById(trigger.triggeredAsset?.triggeredModel.modelUuid);
+                            if (armBot) {
+                                if (armBot.isActive === false && armBot.state === 'idle') {
+                                    setCurrentLocation(material.materialId, {
+                                        modelUuid: material.next.modelUuid,
+                                        pointUuid: material.next.pointUuid,
+                                        actionUuid: trigger.triggeredAsset?.triggeredAction?.actionUuid,
+                                    });
 
+                                    setNextLocation(material.materialId, null);
+
+                                    setIsPaused(material.materialId, true);
+                                    addCurrentAction(
+                                        trigger.triggeredAsset?.triggeredModel.modelUuid,
+                                        trigger.triggeredAsset?.triggeredAction?.actionUuid,
+                                        material.materialType,
+                                        material.materialId
+                                    );
+                                } else {
+
+                                    // Event Manager Needed
+
+                                }
+                            }
+                        }
+                        handleAction(action, materialId);
+                    }
+                }
             } else if (toEvent?.type === 'storageUnit') {
                 // Transfer to Storage Unit
 
@@ -88,6 +121,31 @@ export function useTriggerHandler() {
         } else if (fromEvent?.type === 'roboticArm') {
             if (toEvent?.type === 'transfer') {
                 // Robotic Arm to Transfer
+                if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint && trigger.triggeredAsset.triggeredAction) {
+                    const material = getMaterialById(materialId);
+                    if (material) {
+                        setIsPaused(material.materialId, false);
+
+                        setCurrentLocation(material.materialId, {
+                            modelUuid: trigger.triggeredAsset.triggeredModel.modelUuid,
+                            pointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+                            actionUuid: trigger.triggeredAsset?.triggeredAction?.actionUuid,
+                        });
+
+                        const action = getActionByUuid(selectedProduct.productId, trigger.triggeredAsset.triggeredAction.actionUuid);
+
+                        if (action && action.triggers.length > 0 &&
+                            action.triggers[0].triggeredAsset?.triggeredModel.modelUuid &&
+                            action.triggers[0].triggeredAsset?.triggeredPoint?.pointUuid) {
+                            setNextLocation(material.materialId, {
+                                modelUuid: action.triggers[0].triggeredAsset?.triggeredModel.modelUuid,
+                                pointUuid: action.triggers[0].triggeredAsset?.triggeredPoint?.pointUuid,
+                            })
+                            handleAction(action, material.materialId);
+                        }
+
+                    }
+                }
 
             } else if (toEvent?.type === 'vehicle') {
                 // Robotic Arm to Vehicle
@@ -122,26 +180,75 @@ export function useTriggerHandler() {
         }
     }
 
+    const handleFinalAction = (action: Action, materialId: string) => {
+        if (!action) return;
+
+        const modelUuid = getModelUuidByActionUuid(selectedProduct.productId, action.actionUuid);
+        if (!modelUuid) return;
+        const finalModel = getEventByModelUuid(selectedProduct.productId, modelUuid);
+        if (!finalModel) return;
+        const material = getMaterialById(materialId);
+
+        if (finalModel.type === 'transfer') {
+            // Storage Unit to Transfer
+
+            if (material) {
+                const currentTime = performance.now();
+
+                setCurrentLocation(material.materialId, {
+                    modelUuid: material.next?.modelUuid || '',
+                    pointUuid: material.next?.pointUuid || '',
+                    actionUuid: action.actionUuid,
+                });
+
+                setNextLocation(material.materialId, null);
+
+                setEndTime(material.materialId, currentTime);
+
+                handleAction(action, material.materialId);
+            }
+
+        } else if (finalModel.type === 'vehicle') {
+            // Storage Unit to Vehicle
+
+        } else if (finalModel.type === 'machine') {
+            // Storage Unit to Machine
+
+        } else if (finalModel.type === 'roboticArm') {
+            // Storage Unit to Robotic Arm
+
+        } else if (finalModel.type === 'storageUnit') {
+            // Storage Unit to Storage Unit
+
+        }
+
+    }
+
     const triggerPointActions = useCallback((action: Action, materialId: string) => {
         if (!action) return;
 
-        action.triggers.forEach(trigger => {
+        if (action.triggers.length > 0) {
-            switch (trigger.triggerType) {
+
-                case 'onStart':
+            action.triggers.forEach(trigger => {
-                    break;
+                switch (trigger.triggerType) {
-                case 'onComplete':
+                    case 'onStart':
-                    handleTrigger(trigger, action, materialId);
+                        break;
-                    break;
+                    case 'onComplete':
-                case 'onStop':
+                        handleTrigger(trigger, action, materialId);
-                    break;
+                        break;
-                case 'onError':
+                    case 'onStop':
-                    break;
+                        break;
-                case 'delay':
+                    case 'onError':
-                    break;
+                        break;
-                default:
+                    case 'delay':
-                    console.warn(`Unknown trigger type: ${trigger.triggerType}`);
+                        break;
-            }
+                    default:
-        });
+                        console.warn(`Unknown trigger type: ${trigger.triggerType}`);
+                }
+            });
+        } else {
+            handleFinalAction(action, materialId);
+        }
     }, []);
 
     return {

app/src/store/simulation/useArmBotStore.ts

@@ -12,7 +12,7 @@ interface ArmBotStore {
     ) => void;
     clearArmBots: () => void;
 
-    addCurrentAction: (modelUuid: string, actionUuid: string, materialType: string) => void;
+    addCurrentAction: (modelUuid: string, actionUuid: string, materialType: string, materialId: string) => void;
     removeCurrentAction: (modelUuid: string) => void;
 
     addAction: (modelUuid: string, action: RoboticArmPointSchema['actions'][number]) => void;
@@ -75,7 +75,7 @@ export const useArmBotStore = create<ArmBotStore>()(
             });
         },
 
-        addCurrentAction: (modelUuid, actionUuid, materialType) => {
+        addCurrentAction: (modelUuid, actionUuid, materialType, materialId) => {
             set((state) => {
                 const armBot = state.armBots.find(a => a.modelUuid === modelUuid);
                 if (armBot) {
@@ -84,7 +84,8 @@ export const useArmBotStore = create<ArmBotStore>()(
                         armBot.currentAction = {
                             actionUuid: action.actionUuid,
                             actionName: action.actionName,
-                            materialType: materialType
+                            materialType: materialType,
+                            materialId:materialId
                         };
                     }
                 }

app/src/store/simulation/useMaterialStore.ts

@@ -20,20 +20,20 @@ type MaterialsStore = {
 
     setNextLocation: (
         materialId: string,
-        location?: {
+        location: {
             modelUuid: string;
             pointUuid: string;
         } | null
     ) => MaterialSchema | undefined;
 
     setMaterial: (materialId: string, materialType: string) => MaterialSchema | undefined;
-    setStartTime: (materialId: string, startTime: string) => MaterialSchema | undefined;
+    setStartTime: (materialId: string, startTime: number) => MaterialSchema | undefined;
-    setEndTime: (materialId: string, endTime: string) => MaterialSchema | undefined;
+    setEndTime: (materialId: string, endTime: number) => MaterialSchema | undefined;
     setCost: (materialId: string, cost: number) => MaterialSchema | undefined;
     setWeight: (materialId: string, weight: number) => MaterialSchema | undefined;
     setIsActive: (materialId: string, isActive: boolean) => MaterialSchema | undefined;
     setIsVisible: (materialId: string, isVisible: boolean) => MaterialSchema | undefined;
-    setIsPaused: (materialId: string, isPlaying: boolean) => MaterialSchema | undefined;
+    setIsPaused: (materialId: string, isPaused: boolean) => MaterialSchema | undefined;
     setIsRendered: (materialId: string, isRendered: boolean) => MaterialSchema | undefined;
 
     getMaterialById: (materialId: string) => MaterialSchema | undefined;
@@ -102,7 +102,7 @@ export const useMaterialStore = create<MaterialsStore>()(
             set((state) => {
                 const material = state.materials.find(m => m.materialId === materialId);
                 if (material) {
-                    material.next = location || undefined;
+                    material.next = location;
                     updatedMaterial = JSON.parse(JSON.stringify(material));
                 }
             });

app/src/types/simulationTypes.d.ts

@@ -171,6 +171,7 @@ interface ArmBotStatus extends RoboticArmEventSchema {
         actionUuid: string;
         actionName: string;
         materialType: string | null;
+        materialId: string | null;
     };
 }
 
@@ -201,8 +202,8 @@ interface MaterialSchema {
     isVisible: boolean;
     isPaused: boolean;
     isRendered: boolean;
-    startTime?: string;
+    startTime?: number;
-    endTime?: string;
+    endTime?: number;
     cost?: number;
     weight?: number;
 
@@ -215,7 +216,7 @@ interface MaterialSchema {
     next?: {
         modelUuid: string;
         pointUuid: string;
-    };
+    } | null;
 }
 
 type MaterialsSchema = MaterialSchema[];