Refactor VehicleMechanics component for improved state management and event handling

- Simplified state initialization and effect hooks for better readability. - Enhanced event handling functions for speed, action type, and action renaming. - Updated current values retrieval logic to utilize getEventByModelUuid. - Cleaned up JSX structure for better maintainability. Update addAssetModel to remove unnecessary console log - Removed debug logging for roboticArmEvent in addAssetModel. Enhance copyPasteControls and duplicationControls with event handling - Integrated useEventsStore to manage events during copy and paste operations. - Updated event data structure for Conveyor, Vehicle, ArmBot, and StaticMachine types. - Ensured proper UUID generation for new events and actions. Refactor PointsCreator to ensure event sphere clearing - Re-enabled clearSelectedEventSphere on pointer miss events for better UX. Add logging in Products component for debugging - Added console log to inspect data fetched from getAllProductsApi. Update useProductStore to return updated events after modifications - Modified updateEvent, addAction, removeAction, updateAction, and renameAction to return updated event data. - Ensured consistency in event handling across the product store.
2025-04-30 15:58:23 +05:30
parent 304d6689c1
commit a704be77d3
11 changed files with 1004 additions and 512 deletions
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
@@ -1,202 +1,149 @@
 import React, { useRef } from "react";
 import {
-  AddIcon,
-  RemoveIcon,
-  ResizeHeightIcon,
+    AddIcon,
+    RemoveIcon,
+    ResizeHeightIcon,
 } from "../../../../../icons/ExportCommonIcons";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../../../functions/handleResizePannel";
-import {
-  useSelectedAction,
-  useSelectedEventData,
-  useSelectedProduct,
-} from "../../../../../../store/simulation/useSimulationStore";
-import { MathUtils } from "three";
+import { useSelectedAction, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";

 interface ActionsListProps {
-  setSelectedPointData: (data: any) => void; // You can replace `any` with a more specific type if you have one
-  selectedPointData: any; // You can replace `any` with a more specific type if you have one
-  // ui control props
-  multipleAction?: boolean;
+    selectedPointData: any;
+    multipleAction?: boolean;
+    handleAddAction?: () => void;
+    handleDeleteAction?: (actionUuid: string) => void;
 }

 const ActionsList: React.FC<ActionsListProps> = ({
-  setSelectedPointData,
-  selectedPointData,
-  multipleAction = false,
+    selectedPointData,
+    multipleAction = false,
+    handleAddAction,
+    handleDeleteAction,
 }) => {
-  const actionsContainerRef = useRef<HTMLDivElement>(null);
+    const actionsContainerRef = useRef<HTMLDivElement>(null);

-  // store
-  const { selectedEventData } = useSelectedEventData();
-  const { updateAction, addAction, removeAction } = useProductStore();
-  const { selectedProduct } = useSelectedProduct();
-  const { selectedAction, setSelectedAction, clearSelectedAction } =
-    useSelectedAction();
+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];

-  const handleAddAction = () => {
-    if (!selectedEventData || !selectedPointData) return;
+    // store
+    const { renameAction } = useProductStore();
+    const { selectedProduct } = useSelectedProduct();
+    const { selectedAction, setSelectedAction } = useSelectedAction();

-    const newAction = {
-      actionUuid: MathUtils.generateUUID(),
-      actionName: `Action ${selectedPointData.actions.length + 1}`,
-      actionType: "pickAndPlace" as const,
-      process: {
-        startPoint: null,
-        endPoint: null,
-      },
-      triggers: [] as TriggerSchema[],
+    const handleRenameAction = (newName: string) => {
+        if (!selectedAction.actionId) return;
+        const event = renameAction(selectedAction.actionId, newName);
+
+        if (event) {
+            upsertProductOrEventApi({
+                productName: selectedProduct.productName,
+                productId: selectedProduct.productId,
+                organization: organization,
+                eventDatas: event
+            })
+        }
    };

-    addAction(
-      selectedProduct.productId,
-      selectedEventData.data.modelUuid,
-      selectedEventData.selectedPoint,
-      newAction
-    );
-
-    const updatedPoint = {
-      ...selectedPointData,
-      actions: [...selectedPointData.actions, newAction],
+    const handleActionSelect = (actionUuid: string, actionName: string) => {
+        setSelectedAction(actionUuid, actionName);
    };
-    setSelectedPointData(updatedPoint);
-    setSelectedAction(newAction.actionUuid, newAction.actionName);
-  };

-  const handleDeleteAction = (actionUuid: string) => {
-    if (!selectedPointData) return;
+    return (
+        <div className="actions-list-container">
+            <div className="actions">
+                <div className="header">
+                    <div className="header-value">Actions</div>

-    removeAction(actionUuid);
-    const newActions = selectedPointData.actions.filter(
-      (a: any) => a.actionUuid !== actionUuid
-    );
-
-    const updatedPoint = {
-      ...selectedPointData,
-      actions: newActions,
-    };
-    setSelectedPointData(updatedPoint);
-
-    if (selectedAction.actionId === actionUuid) {
-      if (newActions.length > 0) {
-        setSelectedAction(newActions[0].actionUuid, newActions[0].actionName);
-      } else {
-        clearSelectedAction();
-      }
-    }
-  };
-
-  const handleRenameAction = (newName: string) => {
-    if (!selectedAction.actionId) return;
-    updateAction(selectedAction.actionId, { actionName: newName });
-
-    if (selectedPointData?.actions) {
-      const updatedActions = selectedPointData.actions.map((action: any) =>
-        action.actionUuid === selectedAction.actionId
-          ? { ...action, actionName: newName }
-          : action
-      );
-      setSelectedPointData({
-        ...selectedPointData,
-        actions: updatedActions,
-      });
-    } else {
-      // write logic for single action
-      return;
-    }
-  };
-
-  const handleActionSelect = (actionUuid: string, actionName: string) => {
-    setSelectedAction(actionUuid, actionName);
-  };
-
-  return (
-    <div className="actions-list-container">
-      <div className="actions">
-        <div className="header">
-          <div className="header-value">Actions</div>
-
-          <button
-            className="add-button"
-            onClick={() => handleAddAction()}
-            disabled={!multipleAction}
-          >
-            <AddIcon /> Add
-          </button>
-        </div>
-        <div
-          className="lists-main-container"
-          ref={actionsContainerRef}
-          style={{ height: "120px" }}
-        >
-          <div className="list-container">
-            {multipleAction &&
-              selectedPointData.actions.map((action: any) => (
-                <div
-                  key={action.actionUuid}
-                  className={`list-item ${
-                    selectedAction.actionId === action.actionUuid
-                      ? "active"
-                      : ""
-                  }`}
-                >
-                  <button
-                    className="value"
-                    onClick={() =>
-                      handleActionSelect(action.actionUuid, action.actionName)
-                    }
-                  >
-                    <RenameInput
-                      value={action.actionName}
-                      onRename={handleRenameAction}
-                    />
-                  </button>
-                  {selectedPointData.actions.length > 1 && (
                    <button
-                      className="remove-button"
-                      onClick={() => handleDeleteAction(action.actionUuid)}
+                        className="add-button"
+                        onClick={() => {
+                            if (handleAddAction) {
+                                handleAddAction();
+                            }
+                        }}
+                        disabled={!multipleAction}
                    >
-                      <RemoveIcon />
+                        <AddIcon /> Add
                    </button>
-                  )}
                </div>
-              ))}
-            {!multipleAction && selectedPointData && (
-              <div
-                key={selectedPointData.action.actionUuid}
-                className={`list-item active`}
-              >
-                <button
-                  className="value"
-                  onClick={() =>
-                    handleActionSelect(
-                      selectedPointData.action.actionUuid,
-                      selectedPointData.action.actionName
-                    )
-                  }
+                <div
+                    className="lists-main-container"
+                    ref={actionsContainerRef}
+                    style={{ height: "120px" }}
                >
-                  <RenameInput
-                    value={selectedPointData.action.actionName}
-                    onRename={handleRenameAction}
-                  />
-                </button>
-              </div>
-            )}
-          </div>
-          {multipleAction && (
-            <button
-              className="resize-icon"
-              id="action-resize"
-              onMouseDown={(e: any) => handleResize(e, actionsContainerRef)}
-            >
-              <ResizeHeightIcon />
-            </button>
-          )}
+                    <div className="list-container">
+                        {multipleAction && selectedPointData &&
+                            selectedPointData.actions.map((action: any) => (
+                                <div
+                                    key={action.actionUuid}
+                                    className={`list-item ${selectedAction.actionId === action.actionUuid
+                                        ? "active"
+                                        : ""
+                                        }`}
+                                >
+                                    <button
+                                        className="value"
+                                        onClick={() =>
+                                            handleActionSelect(action.actionUuid, action.actionName)
+                                        }
+                                    >
+                                        <RenameInput
+                                            value={action.actionName}
+                                            onRename={(value) => handleRenameAction(value)}
+                                        />
+                                    </button>
+                                    {selectedPointData.actions.length > 1 && (
+                                        <button
+                                            className="remove-button"
+                                            onClick={() => {
+                                                if (handleDeleteAction) {
+                                                    handleDeleteAction(action.actionUuid);
+                                                }
+                                            }}
+                                        >
+                                            <RemoveIcon />
+                                        </button>
+                                    )}
+                                </div>
+                            ))}
+                        {!multipleAction && selectedPointData && (
+                            <div
+                                key={selectedPointData.action.actionUuid}
+                                className={`list-item active`}
+                            >
+                                <button
+                                    className="value"
+                                    onClick={() =>
+                                        handleActionSelect(
+                                            selectedPointData.action.actionUuid,
+                                            selectedPointData.action.actionName
+                                        )
+                                    }
+                                >
+                                    <RenameInput
+                                        value={selectedPointData.action.actionName}
+                                        onRename={handleRenameAction}
+                                    />
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                    {multipleAction && (
+                        <button
+                            className="resize-icon"
+                            id="action-resize"
+                            onMouseDown={(e: any) => handleResize(e, actionsContainerRef)}
+                        >
+                            <ResizeHeightIcon />
+                        </button>
+                    )}
+                </div>
+            </div>
        </div>
-      </div>
-    </div>
-  );
+    );
 };

 export default ActionsList;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
@@ -11,14 +11,18 @@ import Trigger from "../trigger/Trigger";
 import { useSelectedEventData, useSelectedProduct } from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";

 function ConveyorMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "spawn" | "swap" | "delay" | "despawn">("default");
    const [selectedPointData, setSelectedPointData] = useState<ConveyorPointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, updateEvent, updateAction } = useProductStore();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
    const { selectedProduct } = useSelectedProduct();

+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];
+
    useEffect(() => {
        if (selectedEventData) {
            const point = getPointByUuid(
@@ -33,11 +37,34 @@ function ConveyorMechanics() {
        }
    }, [selectedProduct, selectedEventData, getPointByUuid]);

+    const updateBackend = (
+        productName: string,
+        productId: string,
+        organization: string,
+        eventData: EventsSchema
+    ) => {
+        upsertProductOrEventApi({
+            productName: productName,
+            productId: productId,
+            organization: organization,
+            eventDatas: eventData
+        })
+    }
+
    const handleSpeedChange = (value: string) => {
        if (!selectedEventData) return;
-        updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+        const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
            speed: parseFloat(value),
        });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
    };

    const handleActionTypeChange = (option: string) => {
@@ -45,40 +72,94 @@ function ConveyorMechanics() {
        const validOption = option as | "default" | "spawn" | "swap" | "delay" | "despawn";
        setActiveOption(validOption);

-        updateAction(selectedPointData.action.actionUuid, {
+        const event = updateAction(selectedPointData.action.actionUuid, {
            actionType: validOption,
        });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
    };

    const handleRenameAction = (newName: string) => {
-        if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+        if (!selectedEventData || !selectedPointData) return;
+        const event = updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
    };

    const handleSpawnCountChange = (value: string) => {
-        if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, {
+        if (!selectedEventData || !selectedPointData) return;
+        const event = updateAction(selectedPointData.action.actionUuid, {
            spawnCount: value === "inherit" ? "inherit" : parseFloat(value),
        });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
    };

    const handleSpawnIntervalChange = (value: string) => {
-        if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, {
+        if (!selectedEventData || !selectedPointData) return;
+        const event = updateAction(selectedPointData.action.actionUuid, {
            spawnInterval: value === "inherit" ? "inherit" : parseFloat(value),
        });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
    };

    const handleMaterialSelect = (material: string) => {
-        if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, { material });
+        if (!selectedEventData || !selectedPointData) return;
+        const event = updateAction(selectedPointData.action.actionUuid, { material });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
    };

    const handleDelayChange = (value: string) => {
-        if (!selectedPointData) return;
-        updateAction(selectedPointData.action.actionUuid, {
+        if (!selectedEventData || !selectedPointData) return;
+        const event = updateAction(selectedPointData.action.actionUuid, {
            delay: value === "inherit" ? "inherit" : parseFloat(value),
        });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
    };

    const availableActions = {
@@ -87,9 +168,9 @@ function ConveyorMechanics() {
    };

    // Get current values from store
-    const currentSpeed = selectedEventData?.data.type === "transfer"
-        ? selectedEventData.data.speed.toString()
-        : "0.5";
+    const currentSpeed = (getEventByModelUuid(
+        selectedProduct.productId, selectedEventData?.data.modelUuid || ""
+    ) as ConveyorEventSchema | undefined)?.speed?.toString() || "0.5";

    const currentActionName = selectedPointData
        ? selectedPointData.action.actionName
@@ -132,7 +213,6 @@ function ConveyorMechanics() {
            </div>
            <section>
                <ActionsList
-                    setSelectedPointData={setSelectedPointData}
                    selectedPointData={selectedPointData}
                />

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
@@ -87,7 +87,6 @@ function MachineMechanics() {
                            />
                        </div>
                        <ActionsList
-                            setSelectedPointData={setSelectedPointData}
                            selectedPointData={selectedPointData}
                        />
                        <div className="selected-actions-list">
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { MathUtils } from "three";
 import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
@@ -7,15 +8,19 @@ import { useSelectedEventData, useSelectedProduct, useSelectedAction } from "../
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import PickAndPlaceAction from "../actions/PickAndPlaceAction";
 import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";

 function RoboticArmMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default");
    const [selectedPointData, setSelectedPointData] = useState<RoboticArmPointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, updateEvent, updateAction } = useProductStore();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction, addAction, removeAction } = useProductStore();
    const { selectedProduct } = useSelectedProduct();
    const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();

+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];
+
    useEffect(() => {
        if (selectedEventData) {
            const point = getPointByUuid(
@@ -38,9 +43,23 @@ function RoboticArmMechanics() {
        }
    }, [clearSelectedAction, getPointByUuid, selectedAction.actionId, selectedEventData, selectedProduct, setSelectedAction,]);

+    const updateBackend = (
+        productName: string,
+        productId: string,
+        organization: string,
+        eventData: EventsSchema
+    ) => {
+        upsertProductOrEventApi({
+            productName: productName,
+            productId: productId,
+            organization: organization,
+            eventDatas: eventData
+        })
+    }
+
    const handleRenameAction = (newName: string) => {
        if (!selectedAction.actionId) return;
-        updateAction(selectedAction.actionId, { actionName: newName });
+        const event = updateAction(selectedAction.actionId, { actionName: newName });

        if (selectedPointData) {
            const updatedActions = selectedPointData.actions.map((action) =>
@@ -51,37 +70,145 @@ function RoboticArmMechanics() {
                actions: updatedActions,
            });
        }
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
    };

    const handleSpeedChange = (value: string) => {
        if (!selectedEventData) return;
-        updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+        const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
            speed: parseFloat(value),
        });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
    };

    const handlePickPointChange = (value: string) => {
        if (!selectedAction.actionId || !selectedPointData) return;
        const [x, y, z] = value.split(",").map(Number);

-        updateAction(selectedAction.actionId, {
+        const event = updateAction(selectedAction.actionId, {
            process: {
                startPoint: [x, y, z] as [number, number, number],
                endPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.endPoint || null,
            },
        });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
    };

    const handlePlacePointChange = (value: string) => {
        if (!selectedAction.actionId || !selectedPointData) return;
        const [x, y, z] = value.split(",").map(Number);

-        updateAction(selectedAction.actionId, {
+        const event = updateAction(selectedAction.actionId, {
            process: {
                startPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.startPoint || null,
                endPoint: [x, y, z] as [number, number, number],
            },
        });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
+    };
+
+
+    const handleAddAction = () => {
+        if (!selectedEventData || !selectedPointData) return;
+
+        const newAction = {
+            actionUuid: MathUtils.generateUUID(),
+            actionName: `Action ${selectedPointData.actions.length + 1}`,
+            actionType: "pickAndPlace" as const,
+            process: {
+                startPoint: null,
+                endPoint: null,
+            },
+            triggers: [] as TriggerSchema[],
+        };
+
+        const event = addAction(
+            selectedProduct.productId,
+            selectedEventData.data.modelUuid,
+            selectedEventData.selectedPoint,
+            newAction
+        );
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
+
+        const updatedPoint = {
+            ...selectedPointData,
+            actions: [...selectedPointData.actions, newAction],
+        };
+        setSelectedPointData(updatedPoint);
+        setSelectedAction(newAction.actionUuid, newAction.actionName);
+    };
+
+    const handleDeleteAction = (actionUuid: string) => {
+        if (!selectedPointData) return;
+
+        const event = removeAction(actionUuid);
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productId,
+                organization,
+                event
+            );
+        }
+
+        const newActions = selectedPointData.actions.filter(
+            (a: any) => a.actionUuid !== actionUuid
+        );
+
+        const updatedPoint = {
+            ...selectedPointData,
+            actions: newActions,
+        };
+        setSelectedPointData(updatedPoint);
+
+        if (selectedAction.actionId === actionUuid) {
+            if (newActions.length > 0) {
+                setSelectedAction(newActions[0].actionUuid, newActions[0].actionName);
+            } else {
+                clearSelectedAction();
+            }
+        }
    };

    const availableActions = {
@@ -89,9 +216,9 @@ function RoboticArmMechanics() {
        options: ["pickAndPlace"],
    };

-    const currentSpeed = selectedEventData?.data.type === "roboticArm"
-        ? selectedEventData.data.speed.toString()
-        : "0.5";
+    const currentSpeed = (getEventByModelUuid(
+        selectedProduct.productId, selectedEventData?.data.modelUuid || ""
+    ) as RoboticArmEventSchema | undefined)?.speed?.toString() || "0.5";

    const currentAction = selectedPointData?.actions.find((a) => a.actionUuid === selectedAction.actionId);

@@ -122,10 +249,12 @@ function RoboticArmMechanics() {
                </div>
            </div>
            <section>
+
                <ActionsList
-                    setSelectedPointData={setSelectedPointData}
                    selectedPointData={selectedPointData}
                    multipleAction
+                    handleAddAction={handleAddAction}
+                    handleDeleteAction={handleDeleteAction}
                />

                {selectedAction.actionId && currentAction && (
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
@@ -69,7 +69,6 @@ function StorageMechanics() {
            {selectedEventData && (
                <section>
                    <ActionsList
-                        setSelectedPointData={setSelectedPointData}
                        selectedPointData={selectedPointData}
                    />
                    <div className="selected-actions-details">
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
@@ -4,186 +4,181 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
 import {
-  useSelectedEventData,
-  useSelectedProduct,
+    useSelectedEventData,
+    useSelectedProduct,
 } from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import TravelAction from "../actions/TravelAction";
 import ActionsList from "../components/ActionsList";

 function VehicleMechanics() {
-  const [activeOption, setActiveOption] = useState<"default" | "travel">(
-    "default"
-  );
-  const [selectedPointData, setSelectedPointData] = useState<
-    VehiclePointSchema | undefined
-  >();
-  const { selectedEventData } = useSelectedEventData();
-  const { getPointByUuid, updateEvent, updateAction } = useProductStore();
-  const { selectedProduct } = useSelectedProduct();
+    const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
+    const [selectedPointData, setSelectedPointData] = useState<VehiclePointSchema | undefined>();
+    const { selectedEventData } = useSelectedEventData();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
+    const { selectedProduct } = useSelectedProduct();

-  useEffect(() => {
-    if (selectedEventData) {
-      const point = getPointByUuid(
-        selectedProduct.productId,
-        selectedEventData.data.modelUuid,
-        selectedEventData.selectedPoint
-      ) as VehiclePointSchema | undefined;
+    useEffect(() => {
+        if (selectedEventData) {
+            const point = getPointByUuid(
+                selectedProduct.productId,
+                selectedEventData.data.modelUuid,
+                selectedEventData.selectedPoint
+            ) as VehiclePointSchema | undefined;

-      if (point) {
-        setSelectedPointData(point);
-        setActiveOption(point.action.actionType as "travel");
-      }
-    }
-  }, [selectedProduct, selectedEventData, getPointByUuid]);
+            if (point) {
+                setSelectedPointData(point);
+                setActiveOption(point.action.actionType as "travel");
+            }
+        }
+    }, [selectedProduct, selectedEventData, getPointByUuid]);

-  const handleSpeedChange = (value: string) => {
-    if (!selectedEventData) return;
-    updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
-      speed: parseFloat(value),
-    });
-  };
+    const handleSpeedChange = (value: string) => {
+        if (!selectedEventData) return;
+        updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+            speed: parseFloat(value),
+        });
+    };

-  const handleActionTypeChange = (option: string) => {
-    if (!selectedEventData || !selectedPointData) return;
-    const validOption = option as "travel";
-    setActiveOption(validOption);
+    const handleActionTypeChange = (option: string) => {
+        if (!selectedEventData || !selectedPointData) return;
+        const validOption = option as "travel";
+        setActiveOption(validOption);

-    updateAction(selectedPointData.action.actionUuid, {
-      actionType: validOption,
-    });
-  };
+        updateAction(selectedPointData.action.actionUuid, {
+            actionType: validOption,
+        });
+    };

-  const handleRenameAction = (newName: string) => {
-    if (!selectedPointData) return;
-    updateAction(selectedPointData.action.actionUuid, { actionName: newName });
-  };
+    const handleRenameAction = (newName: string) => {
+        if (!selectedPointData) return;
+        updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+    };

-  const handleLoadCapacityChange = (value: string) => {
-    if (!selectedPointData) return;
-    updateAction(selectedPointData.action.actionUuid, {
-      loadCapacity: parseFloat(value),
-    });
-  };
+    const handleLoadCapacityChange = (value: string) => {
+        if (!selectedPointData) return;
+        updateAction(selectedPointData.action.actionUuid, {
+            loadCapacity: parseFloat(value),
+        });
+    };

-  const handleUnloadDurationChange = (value: string) => {
-    if (!selectedPointData) return;
-    updateAction(selectedPointData.action.actionUuid, {
-      unLoadDuration: parseFloat(value),
-    });
-  };
+    const handleUnloadDurationChange = (value: string) => {
+        if (!selectedPointData) return;
+        updateAction(selectedPointData.action.actionUuid, {
+            unLoadDuration: parseFloat(value),
+        });
+    };

-  const handlePickPointChange = (value: string) => {
-    if (!selectedPointData) return;
-  };
+    const handlePickPointChange = (value: string) => {
+        if (!selectedPointData) return;
+    };

-  const handleUnloadPointChange = (value: string) => {
-    if (!selectedPointData) return;
-  };
+    const handleUnloadPointChange = (value: string) => {
+        if (!selectedPointData) return;
+    };

-  // Get current values from store
-  const currentSpeed =
-    selectedEventData?.data.type === "vehicle"
-      ? selectedEventData.data.speed.toString()
-      : "0.5";
+    // Get current values from store

-  const currentActionName = selectedPointData
-    ? selectedPointData.action.actionName
-    : "Action Name";
+    const currentSpeed = (getEventByModelUuid(
+        selectedProduct.productId, selectedEventData?.data.modelUuid || ""
+    ) as VehicleEventSchema | undefined)?.speed?.toString() || "0.5";

-  const currentLoadCapacity = selectedPointData
-    ? selectedPointData.action.loadCapacity.toString()
-    : "1";
+    const currentActionName = selectedPointData
+        ? selectedPointData.action.actionName
+        : "Action Name";

-  const currentUnloadDuration = selectedPointData
-    ? selectedPointData.action.unLoadDuration.toString()
-    : "1";
+    const currentLoadCapacity = selectedPointData
+        ? selectedPointData.action.loadCapacity.toString()
+        : "1";

-  const currentPickPoint = selectedPointData?.action.pickUpPoint;
+    const currentUnloadDuration = selectedPointData
+        ? selectedPointData.action.unLoadDuration.toString()
+        : "1";

-  const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
+    const currentPickPoint = selectedPointData?.action.pickUpPoint;

-  const availableActions = {
-    defaultOption: "travel",
-    options: ["travel"],
-  };
+    const currentUnloadPoint = selectedPointData?.action.unLoadPoint;

-  return (
-    <>
-      {selectedEventData && (
+    const availableActions = {
+        defaultOption: "travel",
+        options: ["travel"],
+    };
+
+    return (
        <>
-          <div className="global-props section">
-            <div className="property-list-container">
-              <div className="property-item">
-                <InputWithDropDown
-                  label="Speed"
-                  value={currentSpeed}
-                  min={0}
-                  step={0.1}
-                  defaultValue={"0.5"}
-                  max={10}
-                  activeOption="m/s"
-                  onClick={() => {}}
-                  onChange={handleSpeedChange}
-                />
-              </div>
-            </div>
-          </div>
-          <section>
-            <ActionsList
-              setSelectedPointData={setSelectedPointData}
-              selectedPointData={selectedPointData}
-            />
-            <div className="selected-actions-details">
-              <div className="selected-actions-header">
-                <RenameInput
-                  value={currentActionName}
-                  onRename={handleRenameAction}
-                />
-              </div>
-              <div className="selected-actions-list">
-                <LabledDropdown
-                  defaultOption="travel"
-                  options={availableActions.options}
-                  onSelect={handleActionTypeChange}
-                />
+            {selectedEventData && (
+                <>
+                    <div className="global-props section">
+                        <div className="property-list-container">
+                            <div className="property-item">
+                                <InputWithDropDown
+                                    label="Speed"
+                                    value={currentSpeed}
+                                    min={0}
+                                    step={0.1}
+                                    defaultValue={"0.5"}
+                                    max={10}
+                                    activeOption="m/s"
+                                    onClick={() => { }}
+                                    onChange={handleSpeedChange}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <section>
+                        <ActionsList
+                            selectedPointData={selectedPointData}
+                        />
+                        <div className="selected-actions-details">
+                            <div className="selected-actions-header">
+                                <RenameInput
+                                    value={currentActionName}
+                                    onRename={handleRenameAction}
+                                />
+                            </div>
+                            <div className="selected-actions-list">
+                                <LabledDropdown
+                                    defaultOption="travel"
+                                    options={availableActions.options}
+                                    onSelect={handleActionTypeChange}
+                                />

-                {activeOption === "travel" && (
-                  <TravelAction
-                    loadCapacity={{
-                      value: currentLoadCapacity,
-                      min: 1,
-                      max: 100,
-                      defaultValue: "1",
-                      onChange: handleLoadCapacityChange,
-                    }}
-                    unloadDuration={{
-                      value: currentUnloadDuration,
-                      min: 1,
-                      max: 60,
-                      defaultValue: "1",
-                      onChange: handleUnloadDurationChange,
-                    }}
-                    // pickPoint={{
-                    //     value: currentPickPoint,
-                    //     onChange: handlePickPointChange,
-                    // }}
-                    // unloadPoint={{
-                    //     value: currentUnloadPoint,
-                    //     onChange: handleUnloadPointChange,
-                    // }}
-                  />
-                )}
-              </div>
-            </div>
-            <div className="tirgger">
-              <Trigger />
-            </div>
-          </section>
+                                {activeOption === "travel" && (
+                                    <TravelAction
+                                        loadCapacity={{
+                                            value: currentLoadCapacity,
+                                            min: 1,
+                                            max: 100,
+                                            defaultValue: "1",
+                                            onChange: handleLoadCapacityChange,
+                                        }}
+                                        unloadDuration={{
+                                            value: currentUnloadDuration,
+                                            min: 1,
+                                            max: 60,
+                                            defaultValue: "1",
+                                            onChange: handleUnloadDurationChange,
+                                        }}
+                                    // pickPoint={{
+                                    //     value: currentPickPoint,
+                                    //     onChange: handlePickPointChange,
+                                    // }}
+                                    // unloadPoint={{
+                                    //     value: currentUnloadPoint,
+                                    //     onChange: handleUnloadPointChange,
+                                    // }}
+                                    />
+                                )}
+                            </div>
+                        </div>
+                        <div className="tirgger">
+                            <Trigger />
+                        </div>
+                    </section>
+                </>
+            )}
        </>
-      )}
-    </>
-  );
+    );
 }

 export default VehicleMechanics;