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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
@@ -17,16 +17,26 @@ function StorageMechanics() {
     const { getPointByUuid, updateAction } = useProductStore();
     const { selectedProduct } = useSelectedProduct();
     const { setSelectedAction, clearSelectedAction } = useSelectedAction();
-    const {
+    const { setCurrentMaterials, clearCurrentMaterials, updateCurrentLoad, getStorageUnitById } = useStorageUnitStore();
-        setCurrentMaterials,
-        clearCurrentMaterials,
-        updateStorageUnitLoad,
-        getStorageUnitById,
-    } = useStorageUnitStore();
 
     const email = localStorage.getItem('email')
     const organization = (email!.split("@")[1]).split(".")[0];
 
+    const updateSelectedPointData = () => {
+        if (selectedEventData && selectedProduct) {
+            const point = getPointByUuid(
+                selectedProduct.productId,
+                selectedEventData?.data.modelUuid,
+                selectedEventData?.selectedPoint
+            ) as StoragePointSchema | undefined;
+            if (point && "action" in point) {
+                setSelectedPointData(point);
+                setActiveOption(point.action.actionType as "store" | "spawn");
+                setSelectedAction(point.action.actionUuid, point.action.actionName);
+            }
+        }
+    };
+
     useEffect(() => {
         if (selectedEventData) {
             const point = getPointByUuid(
@@ -74,22 +84,23 @@ function StorageMechanics() {
                 organization,
                 event
             );
+            updateSelectedPointData();
         }
 
         if (validOption === "spawn") {
             const storageUnit = getStorageUnitById(selectedEventData.data.modelUuid);
             if (storageUnit) {
-                const materialType = selectedPointData.action.materialType || "default";
+                const materialType = selectedPointData.action.materialType || "Default material";
                 const materials = Array.from({ length: selectedPointData.action.storageCapacity }, () =>
                     createNewMaterial(materialType)
                 ).filter(Boolean) as { materialType: string; materialId: string }[];
 
                 setCurrentMaterials(selectedEventData.data.modelUuid, materials);
-                updateStorageUnitLoad(selectedEventData.data.modelUuid, selectedPointData.action.storageCapacity);
+                updateCurrentLoad(selectedEventData.data.modelUuid, selectedPointData.action.storageCapacity);
             }
         } else {
             clearCurrentMaterials(selectedEventData.data.modelUuid);
-            updateStorageUnitLoad(selectedEventData.data.modelUuid, 0);
+            updateCurrentLoad(selectedEventData.data.modelUuid, 0);
         }
     };
 
@@ -104,6 +115,7 @@ function StorageMechanics() {
                 organization,
                 event
             );
+            updateSelectedPointData();
         }
     };
 
@@ -122,32 +134,21 @@ function StorageMechanics() {
                 organization,
                 event
             );
+            updateSelectedPointData();
 
             if (activeOption === "spawn") {
                 const storageUnit = getStorageUnitById(selectedEventData.data.modelUuid);
                 if (storageUnit) {
-                    const materialType = selectedPointData.action.materialType || "default";
+                    const materialType = selectedPointData.action.materialType || "Default material";
-                    const currentCount = storageUnit.currentMaterials.length;
+                    const materials = Array.from({ length: selectedPointData.action.storageCapacity }, () =>
+                        createNewMaterial(materialType)
+                    ).filter(Boolean) as { materialType: string; materialId: string }[];
 
-                    if (newCapacity > currentCount) {
+                    setCurrentMaterials(selectedEventData.data.modelUuid, materials);
-                        const newMaterials = Array.from({ length: newCapacity - currentCount }, () =>
+                    updateCurrentLoad(selectedEventData.data.modelUuid, selectedPointData.action.storageCapacity);
-                            createNewMaterial(materialType)
-                        ).filter(Boolean) as { materialType: string; materialId: string }[];
-
-                        setCurrentMaterials(selectedEventData.data.modelUuid, [
-                            ...storageUnit.currentMaterials,
-                            ...newMaterials
-                        ]);
-                    } else if (newCapacity < currentCount) {
-                        setCurrentMaterials(
-                            selectedEventData.data.modelUuid,
-                            storageUnit.currentMaterials.slice(0, newCapacity)
-                        );
-                    }
-                    updateStorageUnitLoad(selectedEventData.data.modelUuid, newCapacity);
                 }
             } else {
-                updateStorageUnitLoad(selectedEventData.data.modelUuid, 0);
+                updateCurrentLoad(selectedEventData.data.modelUuid, 0);
             }
         }
     };
@@ -175,6 +176,7 @@ function StorageMechanics() {
                 organization,
                 event
             );
+            updateSelectedPointData();
 
             if (activeOption === "spawn") {
                 const storageUnit = getStorageUnitById(selectedEventData.data.modelUuid);
@@ -189,15 +191,20 @@ function StorageMechanics() {
         }
     };
 
-    const currentActionName = selectedPointData
+    const currentActionName = useMemo(() =>
-        ? selectedPointData.action.actionName
+        selectedPointData ? selectedPointData.action.actionName : "Action Name",
-        : "Action Name";
+        [selectedPointData]
+    );
 
-    const currentCapacity = selectedPointData
+    const currentCapacity = useMemo(() =>
-        ? selectedPointData.action.storageCapacity.toString()
+        selectedPointData ? selectedPointData.action.storageCapacity.toString() : "0",
-        : "0";
+        [selectedPointData]
+    );
 
-    const currentMaterialType = selectedPointData?.action.materialType || "default";
+    const currentMaterialType = useMemo(() =>
+        selectedPointData?.action.materialType || "Default material",
+        [selectedPointData]
+    );
 
     const availableActions = {
         defaultOption: "store",

app/src/modules/simulation/products/products.tsx

@@ -19,7 +19,7 @@ function Products() {
     const { addArmBot, clearArmBots } = useArmBotStore();
     const { addMachine, clearMachines } = useMachineStore();
     const { addConveyor, clearConveyors } = useConveyorStore();
-    const { addStorageUnit, clearStorageUnits } = useStorageUnitStore();
+    const { setCurrentMaterials, clearStorageUnits, updateCurrentLoad, addStorageUnit } = useStorageUnitStore();
     const { isReset } = useResetButtonStore();
 
     useEffect(() => {
@@ -100,9 +100,23 @@ function Products() {
             const product = getProductById(selectedProduct.productId);
             if (product) {
                 clearStorageUnits();
-                product.eventDatas.forEach(events => {
+                product.eventDatas.forEach(event => {
-                    if (events.type === 'storageUnit') {
+                    if (event.type === 'storageUnit') {
-                        addStorageUnit(selectedProduct.productId, events);
+                        addStorageUnit(selectedProduct.productId, event);
+
+                        if (event.point.action.actionType === 'spawn') {
+                            const storageAction = event.point.action as StorageAction;
+                            const materials = Array.from({ length: storageAction.storageCapacity }, () => ({
+                                materialType: storageAction.materialType || 'Default material',
+                                materialId: THREE.MathUtils.generateUUID()
+                            }));
+
+                            setCurrentMaterials(event.modelUuid, materials);
+                            updateCurrentLoad(event.modelUuid, storageAction.storageCapacity);
+                        } else {
+                            setCurrentMaterials(event.modelUuid, []);
+                            updateCurrentLoad(event.modelUuid, 0);
+                        }
                     }
                 });
             }

app/src/modules/simulation/storageUnit/instances/storageUnitInstance/storageUnitInstance.tsx

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
 function StorageUnitInstance({ storageUnit }: { storageUnit: StorageUnitStatus }) {
 
     useEffect(()=>{
-        console.log('storageUnit: ', storageUnit);
+        // console.log('storageUnit: ', storageUnit);
     },[storageUnit])
 
     return (

app/src/store/simulation/useStorageUnitStore.ts

@@ -15,7 +15,7 @@ interface StorageUnitStore {
     setStorageUnitActive: (modelUuid: string, isActive: boolean) => void;
     setStorageUnitState: (modelUuid: string, newState: StorageUnitStatus['state']) => void;
 
-    updateStorageUnitLoad: (modelUuid: string, incrementBy: number) => void;
+    updateCurrentLoad: (modelUuid: string, incrementBy: number) => void;
 
     incrementActiveTime: (modelUuid: string, incrementBy: number) => void;
     incrementIdleTime: (modelUuid: string, incrementBy: number) => void;
@@ -95,7 +95,7 @@ export const useStorageUnitStore = create<StorageUnitStore>()(
             });
         },
 
-        updateStorageUnitLoad: (modelUuid, incrementBy) => {
+        updateCurrentLoad: (modelUuid, incrementBy) => {
             set((state) => {
                 const unit = state.storageUnits.find(s => s.modelUuid === modelUuid);
                 if (unit) {