feat: Refactor event data handling and API integration; update variable names for consistency and clarity

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -37,7 +37,7 @@ const SideBarRight: React.FC = () => {
     useEffect(() => {
         if (activeModule !== "mechanics" && selectedEventData && selectedEventSphere) {
             setSubModule("mechanics");
-        } else {
+        } else if (!selectedEventData && !selectedEventSphere) {
             if (activeModule === 'simulation') {
                 setSubModule("simulations");
             }

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -1,25 +1,4 @@
 import React, { useEffect, useRef, useState } from "react";
-import InputWithDropDown from "../../../../ui/inputs/InputWithDropDown";
-import LabledDropdown from "../../../../ui/inputs/LabledDropdown";
-import {
-    AddIcon,
-    RemoveIcon,
-    ResizeHeightIcon,
-} from "../../../../icons/ExportCommonIcons";
-import RenameInput from "../../../../ui/inputs/RenameInput";
-import { handleResize } from "../../../../../functions/handleResizePannel";
-import { handleActionToggle } from "./functions/handleActionToggle";
-import { handleDeleteAction } from "./functions/handleDeleteAction";
-import DefaultAction from "./actions/DefaultAction";
-import SpawnAction from "./actions/SpawnAction";
-import SwapAction from "./actions/SwapAction";
-import DespawnAction from "./actions/DespawnAction";
-import TravelAction from "./actions/TravelAction";
-import PickAndPlaceAction from "./actions/PickAndPlaceAction";
-import ProcessAction from "./actions/ProcessAction";
-import StorageAction from "./actions/StorageAction";
-import Trigger from "./trigger/Trigger";
-
 import { useSelectedEventData, useSelectedProduct } from "../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import ConveyorMechanics from "./mechanics/conveyorMechanics";
@@ -29,23 +8,11 @@ import MachineMechanics from "./mechanics/machineMechanics";
 import StorageMechanics from "./mechanics/storageMechanics";
 
 const EventProperties: React.FC = () => {
-    const actionsContainerRef = useRef<HTMLDivElement>(null);
-
-    const [activeOption, setActiveOption] = useState("default");
-    const [selectedItem, setSelectedItem] = useState<{ item: { uuid: string; name: string } | null; }>({ item: null });
     const { selectedEventData } = useSelectedEventData();
     const { getEventByModelUuid } = useProductStore();
     const { selectedProduct } = useSelectedProduct();
-
-    // State for derived values
     const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(null);
     const [assetType, setAssetType] = useState<string | null>(null);
-    const [availableActions, setAvailableActions] = useState({
-        defaultOption: "default",
-        options: ["default"]
-    });
-    const [actions, setActions] = useState<{ uuid: string; name: string }[]>([]);
-    const [speed, setSpeed] = useState("0.5");
 
     useEffect(() => {
         const event = getCurrentEventData();
@@ -54,18 +21,6 @@ const EventProperties: React.FC = () => {
         const type = determineAssetType(event);
         setAssetType(type);
 
-        const actionsConfig = determineAvailableActions(type);
-        setAvailableActions(actionsConfig);
-
-        const actionList = getActionList(event, type);
-        setActions(actionList);
-
-        if (actionList.length > 0 && !selectedItem.item) {
-            setSelectedItem({ item: actionList[0] });
-        }
-
-        const currentSpeed = getCurrentSpeed();
-        setSpeed(currentSpeed);
     }, [selectedEventData, selectedProduct]);
 
     const getCurrentEventData = () => {
@@ -86,92 +41,6 @@ const EventProperties: React.FC = () => {
         }
     };
 
-    const determineAvailableActions = (type: string | null) => {
-        switch (type) {
-            case "conveyor":
-                return {
-                    defaultOption: "default",
-                    options: ["default", "spawn", "swap", "despawn"],
-                };
-            case "vehicle":
-                return {
-                    defaultOption: "travel",
-                    options: ["travel"],
-                };
-            case "roboticArm":
-                return {
-                    defaultOption: "pickAndPlace",
-                    options: ["pickAndPlace"],
-                };
-            case "machine":
-                return {
-                    defaultOption: "process",
-                    options: ["process"],
-                };
-            case "storageUnit":
-                return {
-                    defaultOption: "store",
-                    options: ["store", "spawn"],
-                };
-            default:
-                return {
-                    defaultOption: "default",
-                    options: ["default"],
-                };
-        }
-    };
-
-    const getActionList = (event: EventsSchema | null, type: string | null) => {
-        if (!selectedEventData?.data) return [];
-
-        switch (type) {
-            case "conveyor":
-                return (event as ConveyorEventSchema).points
-                    .find((point) => point.uuid === selectedEventData?.selectedPoint)
-                    ?.action?.triggers.map((trigger) => ({
-                        uuid: trigger.triggerUuid,
-                        name: trigger.triggerName,
-                    })) || [];
-            case "vehicle":
-                return (event as VehicleEventSchema).point.action.triggers.map(
-                    (trigger) => ({
-                        uuid: trigger.triggerUuid,
-                        name: trigger.triggerName,
-                    })
-                ) || [];
-            case "roboticArm":
-                return (event as RoboticArmEventSchema).point.actions.flatMap(
-                    (action) =>
-                        action.triggers.map((trigger) => ({
-                            uuid: trigger.triggerUuid,
-                            name: trigger.triggerName,
-                        }))
-                ) || [];
-            case "machine":
-                return (event as MachineEventSchema).point.action.triggers.map(
-                    (trigger) => ({
-                        uuid: trigger.triggerUuid,
-                        name: trigger.triggerName,
-                    })
-                ) || [];
-            case "storageUnit":
-                return [
-                    {
-                        uuid: (event as StorageEventSchema).point.action.actionUuid,
-                        name: (event as StorageEventSchema).point.action.actionName,
-                    },
-                ];
-            default:
-                return [];
-        }
-    };
-
-    const getCurrentSpeed = () => {
-        if (!selectedEventData) return "0.5";
-        if ("speed" in selectedEventData.data) return selectedEventData.data.speed.toString();
-        return "0.5";
-    };
-
     return (
         <>
             <div className="event-proprties-wrapper">

app/src/components/layout/sidebarRight/properties/eventProperties/actions/StorageAction.tsx

@@ -1,20 +1,28 @@
 import React from "react";
 import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
 
-const StorageAction: React.FC = () => {
-  return (
-    <InputWithDropDown
-      label="Storage Capacity"
-      value=""
-      min={0}
-      step={0.1}
-      max={10}
-      defaultValue="0"
-      activeOption="s"
-      onClick={() => {}}
-      onChange={(value) => console.log(value)}
-    />
-  );
+interface StorageActionProps {
+    value: string;
+    min: number;
+    max: number;
+    defaultValue: string;
+    onChange: (value: string) => void;
+}
+
+const StorageAction: React.FC<StorageActionProps> = ({ value, min, max, defaultValue, onChange }) => {
+    return (
+        <InputWithDropDown
+            label="Storage Capacity"
+            value={value}
+            min={min}
+            step={1}
+            max={max}
+            defaultValue={defaultValue}
+            activeOption="s"
+            onClick={() => { }}
+            onChange={onChange}
+        />
+    );
 };
 
 export default StorageAction;

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

@@ -96,7 +96,6 @@ function MachineMechanics() {
                                 defaultOption="process"
                                 options={availableActions.options}
                                 onSelect={handleActionTypeChange}
-                                disabled={true}
                             />
                             {activeOption === "process" &&
                                 <ProcessAction

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

@@ -7,44 +7,98 @@ import { useProductStore } from "../../../../../../store/simulation/useProductSt
 import StorageAction from '../actions/StorageAction';
 
 function StorageMechanics() {
-    const [activeOption, setActiveOption] = useState("default");
-    const [selectedPointData, setSelectedPointData] = useState<PointsScheme | undefined>();
+    const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
+    const [selectedPointData, setSelectedPointData] = useState<StoragePointSchema | undefined>();
     const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid } = useProductStore();
+    const { getPointByUuid, updateAction } = useProductStore();
     const { selectedProduct } = useSelectedProduct();
 
     useEffect(() => {
         if (selectedEventData) {
-            const point = getPointByUuid(selectedProduct.productId, selectedEventData?.data.modelUuid, selectedEventData?.selectedPoint);
+            const point = getPointByUuid(
+                selectedProduct.productId,
+                selectedEventData?.data.modelUuid,
+                selectedEventData?.selectedPoint
+            ) as StoragePointSchema | undefined;
             if (point && 'action' in point) {
-                setSelectedPointData(point as PointsScheme & { action: { actionType: string } });
-                setActiveOption((point as PointsScheme & { action: { actionType: string } }).action.actionType);
+                setSelectedPointData(point);
+                setActiveOption(point.action.actionType as "store" | "spawn");
             }
         }
     }, [selectedProduct, selectedEventData])
 
+    const handleActionTypeChange = (option: string) => {
+        if (!selectedEventData || !selectedPointData) return;
+        const validOption = option as "store" | "spawn";
+        setActiveOption(validOption);
+
+        updateAction(
+            selectedPointData.action.actionUuid,
+            { actionType: validOption }
+        );
+    };
+
+    const handleRenameAction = (newName: string) => {
+        if (!selectedPointData) return;
+        updateAction(
+            selectedPointData.action.actionUuid,
+            { actionName: newName }
+        );
+    };
+
+    const handleCapacityChange = (value: string) => {
+        if (!selectedPointData) return;
+        updateAction(
+            selectedPointData.action.actionUuid,
+            { storageCapacity: parseInt(value) }
+        );
+    };
+
+    // Get current values from store
+    const currentActionName = selectedPointData
+        ? selectedPointData.action.actionName
+        : "Action Name";
+
+    const currentCapacity = selectedPointData
+        ? selectedPointData.action.storageCapacity.toString()
+        : "0";
+
     const availableActions = {
         defaultOption: "store",
         options: ["store", "spawn"],
     };
-    
+
     return (
         <>
             {selectedEventData &&
                 <>
                     <div className="selected-actions-details">
                         <div className="selected-actions-header">
-                            <RenameInput value="Action Name" />
+                            <RenameInput
+                                value={currentActionName}
+                                onRename={handleRenameAction}
+                            />
                         </div>
                         <div className="selected-actions-list">
                             <LabledDropdown
-                                defaultOption={selectedPointData && 'action' in selectedPointData
-                                    ? (selectedPointData as PointsScheme & { action: { actionType: string } }).action.actionType
-                                    : "default"}
+                                defaultOption={activeOption}
                                 options={availableActions.options}
-                                onSelect={(option) => setActiveOption(option)}
+                                onSelect={handleActionTypeChange}
                             />
-                            {activeOption === "store" && <StorageAction />}
+                            {activeOption === "store" &&
+                                <StorageAction
+                                    value={currentCapacity}
+                                    defaultValue="0"
+                                    min={0}
+                                    max={20}
+                                    onChange={handleCapacityChange}
+                                />
+                            }
+                            {activeOption === "spawn" && (
+                                <div className="spawn-options">
+                                    <p>Spawn configuration options would go here</p>
+                                </div>
+                            )}
                         </div>
                     </div>
                     <div className="tirgger">

app/src/components/layout/sidebarRight/simulation/Simulations.tsx

@@ -90,7 +90,7 @@ const Simulations: React.FC = () => {
         (product) => product.productId === selectedProduct.productId
     );
 
-    const events: Event[] = selectedProductData?.eventsData.map((event) => ({
+    const events: Event[] = selectedProductData?.eventDatas.map((event) => ({
         pathName: event.modelName,
     })) || [];