Refactor EventProperties component to utilize new state management for selected event data and asset selection; implement action handling based on asset type and improve action rendering logic.

Enhance Simulations component to support adding and removing events from products; integrate new asset selection store for better state management.

Fix import paths in Design component and related files to ensure correct module resolution.

Update Tools component to correct import paths for template saving functionality.

Refactor EditWidgetOption component to simplify option handling and remove unnecessary state management.

Add new mechanics components for various asset types (Conveyor, Machine, Robotic Arm, Storage, Vehicle) as placeholders for future implementation.

Implement Trigger and TriggerConnector components to manage right-click interactions and asset selection in the simulation environment.

Enhance product store with new helper functions for event and action retrieval based on UUIDs.

Introduce new selected event data and asset state management in the simulation store for improved event handling.

Update simulation types to include new action types and improve type definitions for better type safety.

Remove obsolete temp markdown file from triggers directory.

app/src/components/layout/sidebarLeft/SideBarLeft.tsx

@@ -5,8 +5,8 @@ import Header from "./Header";
 import useToggleStore from "../../../store/useUIToggleStore";
 import Assets from "./Assets";
 import useModuleStore from "../../../store/useModuleStore";
-import Widgets from ".//visualization/widgets/Widgets";
-import Templates from "../../../modules//visualization/template/Templates";
+import Widgets from "./visualization/widgets/Widgets";
+import Templates from "../../../modules/visualization/template/Templates";
 import Search from "../../ui/inputs/Search";
 
 const SideBarLeft: React.FC = () => {

app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx

@@ -5,11 +5,11 @@ import {
   GlobeIcon,
   WalletIcon,
 } from "../../../../icons/3dChartIcons";
-import SimpleCard from "../../../../../modules//visualization/widgets/floating/cards/SimpleCard";
+import SimpleCard from "../../../../../modules/visualization/widgets/floating/cards/SimpleCard";
 
-import WarehouseThroughput from "../../../../../modules//visualization/widgets/floating/cards/WarehouseThroughput";
-import ProductivityDashboard from "../../../../../modules//visualization/widgets/floating/cards/ProductivityDashboard";
-import FleetEfficiency from "../../../../../modules//visualization/widgets/floating/cards/FleetEfficiency";
+import WarehouseThroughput from "../../../../../modules/visualization/widgets/floating/cards/WarehouseThroughput";
+import ProductivityDashboard from "../../../../../modules/visualization/widgets/floating/cards/ProductivityDashboard";
+import FleetEfficiency from "../../../../../modules/visualization/widgets/floating/cards/FleetEfficiency";
 
 interface Widget {
   id: string;

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

@@ -1,173 +1,148 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import Header from "./Header";
 import useModuleStore, {
-  useSubModuleStore,
+    useSubModuleStore,
 } from "../../../store/useModuleStore";
 import {
-  AnalysisIcon,
-  MechanicsIcon,
-  PropertiesIcon,
-  SimulationIcon,
+    AnalysisIcon,
+    MechanicsIcon,
+    PropertiesIcon,
+    SimulationIcon,
 } from "../../icons/SimulationIcons";
 import useToggleStore from "../../../store/useUIToggleStore";
 import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
 import { useSelectedFloorItem } from "../../../store/store";
+import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
 import GlobalProperties from "./properties/GlobalProperties";
 import AsstePropertiies from "./properties/AssetProperties";
 import ZoneProperties from "./properties/ZoneProperties";
 import EventProperties from "./properties/eventProperties/EventProperties";
 
 const SideBarRight: React.FC = () => {
-  const { activeModule } = useModuleStore();
-  const { toggleUI } = useToggleStore();
-  const { subModule, setSubModule } = useSubModuleStore();
-  const { selectedFloorItem } = useSelectedFloorItem();
+    const { activeModule } = useModuleStore();
+    const { toggleUI } = useToggleStore();
+    const { subModule, setSubModule } = useSubModuleStore();
+    const { selectedFloorItem } = useSelectedFloorItem();
+    const { selectedEventData } = useSelectedEventData();
+    const { selectedEventSphere } = useSelectedEventSphere();
 
-  // Reset activeList whenever activeModule changes
-  useEffect(() => {
-    if (activeModule !== "simulation") setSubModule("properties");
-    if (activeModule === "simulation") setSubModule("mechanics");
-  }, [activeModule]);
+    // Reset activeList whenever activeModule changes
+    useEffect(() => {
+        if (activeModule !== "simulation") setSubModule("properties");
+        if (activeModule === "simulation") setSubModule("simulations");
+    }, [activeModule]);
 
-  // romove late
-  const dummyData = {
-    assetType: "store",
-    selectedPoint: {
-      name: "Point A",
-      uuid: "123e4567-e89b-12d3-a456-426614174000",
-      actions: [
-        {
-          uuid: "action-1",
-          name: "Action One",
-        },
-        {
-          uuid: "action-2",
-          name: "Action Two",
-        },
-        {
-          uuid: "action-3",
-          name: "Action Three",
-        },
-      ],
-    },
-    selectedItem: {
-      item: {
-        uuid: "item-1",
-        name: "Item One",
-        isUsed: false,
-      },
-    },
-    setSelectedPoint: (value: string) => {
-      console.log(`Selected point updated to: ${value}`);
-    },
-    selectedActionSphere: "Sphere A",
-  };
+    useEffect(() => {
+        if (activeModule !== "mechanics" && selectedEventData && selectedEventSphere) {
+            setSubModule("mechanics");
+        } else {
+            if (activeModule === 'simulation') {
+                setSubModule("simulations");
+            }
+        };
+    }, [activeModule, selectedEventData, selectedEventSphere])
 
-  return (
-    <div className="sidebar-right-wrapper">
-      <Header />
-      {toggleUI && (
-        <div className="sidebar-actions-container">
-          {/* {activeModule === "builder" && ( */}
-          <div
-            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
-              }`}
-            onClick={() => setSubModule("properties")}
-          >
-            <PropertiesIcon isActive={subModule === "properties"} />
-          </div>
-          {/* )} */}
-          {activeModule === "simulation" && (
-            <>
-              <div
-                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
-                  }`}
-                onClick={() => setSubModule("mechanics")}
-              >
-                <MechanicsIcon isActive={subModule === "mechanics"} />
-              </div>
-              <div
-                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
-                  }`}
-                onClick={() => setSubModule("simulations")}
-              >
-                <SimulationIcon isActive={subModule === "simulations"} />
-              </div>
-              <div
-                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
-                  }`}
-                onClick={() => setSubModule("analysis")}
-              >
-                <AnalysisIcon isActive={subModule === "analysis"} />
-              </div>
-            </>
-          )}
+    return (
+        <div className="sidebar-right-wrapper">
+            <Header />
+            {toggleUI && (
+                <div className="sidebar-actions-container">
+                    <div
+                        className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
+                            }`}
+                        onClick={() => setSubModule("properties")}
+                    >
+                        <PropertiesIcon isActive={subModule === "properties"} />
+                    </div>
+                    {activeModule === "simulation" && (
+                        <>
+                            <div
+                                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
+                                    }`}
+                                onClick={() => setSubModule("mechanics")}
+                            >
+                                <MechanicsIcon isActive={subModule === "mechanics"} />
+                            </div>
+                            <div
+                                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
+                                    }`}
+                                onClick={() => setSubModule("simulations")}
+                            >
+                                <SimulationIcon isActive={subModule === "simulations"} />
+                            </div>
+                            <div
+                                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
+                                    }`}
+                                onClick={() => setSubModule("analysis")}
+                            >
+                                <AnalysisIcon isActive={subModule === "analysis"} />
+                            </div>
+                        </>
+                    )}
+                </div>
+            )}
+            {/* process builder */}
+            {toggleUI &&
+                subModule === "properties" &&
+                activeModule !== "visualization" &&
+                !selectedFloorItem && (
+                    <div className="sidebar-right-container">
+                        <div className="sidebar-right-content-container">
+                            <GlobalProperties />
+                        </div>
+                    </div>
+                )}
+            {toggleUI &&
+                subModule === "properties" &&
+                activeModule !== "visualization" &&
+                selectedFloorItem && (
+                    <div className="sidebar-right-container">
+                        <div className="sidebar-right-content-container">
+                            <AsstePropertiies />
+                        </div>
+                    </div>
+                )}
+            {toggleUI &&
+                subModule === "zoneProperties" &&
+                (activeModule === "builder" || activeModule === "simulation") && (
+                    <div className="sidebar-right-container">
+                        <div className="sidebar-right-content-container">
+                            <ZoneProperties />
+                        </div>
+                    </div>
+                )}
+            {/* simulation */}
+            {toggleUI && activeModule === "simulation" && (
+                <>
+                    {subModule === "simulations" && (
+                        <div className="sidebar-right-container">
+                            <div className="sidebar-right-content-container">
+                                <Simulations />
+                            </div>
+                        </div>
+                    )}
+                    {subModule === "mechanics" && selectedEventData && selectedEventSphere && (
+                        <div className="sidebar-right-container">
+                            <div className="sidebar-right-content-container">
+                                <EventProperties />
+                            </div>
+                        </div>
+                    )}
+                    {subModule === "analysis" && (
+                        <div className="sidebar-right-container">
+                            <div className="sidebar-right-content-container">
+                                <Analysis />
+                            </div>
+                        </div>
+                    )}
+                </>
+            )}
+            {/* realtime visualization */}
+            {toggleUI && activeModule === "visualization" && <Visualization />}
         </div>
-      )}
-      {/* process builder */}
-      {toggleUI &&
-        subModule === "properties" &&
-        activeModule !== "visualization" &&
-        !selectedFloorItem && (
-          <div className="sidebar-right-container">
-            <div className="sidebar-right-content-container">
-              <GlobalProperties />
-            </div>
-          </div>
-        )}
-      {toggleUI &&
-        subModule === "properties" &&
-        activeModule !== "visualization" &&
-        selectedFloorItem && (
-          <div className="sidebar-right-container">
-            <div className="sidebar-right-content-container">
-              <AsstePropertiies />
-            </div>
-          </div>
-        )}
-      {toggleUI &&
-        subModule === "zoneProperties" &&
-        (activeModule === "builder" || activeModule === "simulation") && (
-          <div className="sidebar-right-container">
-            <div className="sidebar-right-content-container">
-              <ZoneProperties />
-            </div>
-          </div>
-        )}
-      {/* simulation */}
-
-      {toggleUI && activeModule === "simulation" && (
-        <>
-          {subModule === "mechanics" && (
-            <div className="sidebar-right-container">
-              <div className="sidebar-right-content-container">
-                <EventProperties {...dummyData} />
-              </div>
-            </div>
-          )}
-          {subModule === "analysis" && (
-            <div className="sidebar-right-container">
-              <div className="sidebar-right-content-container">
-                <Analysis />
-              </div>
-            </div>
-          )}
-          {subModule === "simulations" && (
-            <div className="sidebar-right-container">
-              <div className="sidebar-right-content-container">
-                <Simulations />
-              </div>
-            </div>
-          )}
-        </>
-      )}
-
-      {/* realtime visualization */}
-      {toggleUI && activeModule === "visualization" && <Visualization />}
-    </div>
-  );
+    );
 };
 
-export default SideBarRight;
+export default SideBarRight;

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

@@ -1,10 +1,10 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import InputWithDropDown from "../../../../ui/inputs/InputWithDropDown";
 import LabledDropdown from "../../../../ui/inputs/LabledDropdown";
 import {
-  AddIcon,
-  RemoveIcon,
-  ResizeHeightIcon,
+    AddIcon,
+    RemoveIcon,
+    ResizeHeightIcon,
 } from "../../../../icons/ExportCommonIcons";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../../functions/handleResizePannel";
@@ -20,191 +20,260 @@ import ProcessAction from "./actions/ProcessAction";
 import StorageAction from "./actions/StorageAction";
 import Trigger from "./trigger/Trigger";
 
-interface EventPropertiesProps {
-  assetType: string;
-  selectedPoint: {
-    name: string;
-    uuid: string;
-    actions: {
-      uuid: string;
-      name: string;
-    }[];
-  };
-  selectedItem: {
-    item: {
-      uuid: string;
-      name: string;
-    } | null;
-  };
-  setSelectedPoint: (value: string) => void;
-  selectedActionSphere: string;
-}
+import { useSelectedEventData, useSelectedProduct } from "../../../../../store/simulation/useSimulationStore";
+import { useProductStore } from "../../../../../store/simulation/useProductStore";
 
-const EventProperties: React.FC<EventPropertiesProps> = ({
-  assetType,
-  selectedPoint,
-  selectedItem,
-  setSelectedPoint,
-  selectedActionSphere,
-}) => {
-  const actionsContainerRef = useRef<HTMLDivElement>(null);
+const EventProperties: React.FC = () => {
+    const actionsContainerRef = useRef<HTMLDivElement>(null);
 
-  const [activeOption, setActiveOption] = useState("default");
-  const [dummyactiveOption, setTypeOption] = useState("default");
+    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();
 
-  const getAvailableActions = () => {
-    if (assetType === "conveyor") {
-      return {
-        defaultOption: "default",
-        options: ["default", "spawn", "swap", "despawn"],
-      };
-    }
-    if (assetType === "vehicle") {
-      return {
-        defaultOption: "travel",
-        options: ["travel"],
-      };
-    }
-    if (assetType === "roboticArm") {
-      return {
-        defaultOption: "pickAndPlace",
-        options: ["pickAndPlace"],
-      };
-    }
-    if (assetType === "machine") {
-      return {
-        defaultOption: "process",
-        options: ["process"],
-      };
-    }
-    if (assetType === "store") {
-      return {
-        defaultOption: "store",
-        options: ["store", "spawn"],
-      };
-    } else {
-      return {
-        defaultOption: "default",
-        options: ["default"],
-      };
-    }
-  };
+    useEffect(() => {
+        const actions = getActions();
+        if (actions.length > 0 && !selectedItem.item) {
+            setSelectedItem({ item: actions[0] });
+        }
+    }, [selectedEventData]);
 
-  return (
-    <div className="event-proprties-wrapper">
-      <div className="header">
-        <div className="header-value">{selectedPoint.name}</div>
-      </div>
-      <div className="global-props">
-        <div className="property-list-container">
-          {/* <div className="property-item">
-            <LabledDropdown
-              defaultOption={assetType}
-              options={[]}
-              onSelect={(option) => setTypeOption(option)}
-            />
-          </div> */}
-          <div className="property-item">
-            <InputWithDropDown
-              label="Speed"
-              value="0.5"
-              min={0}
-              step={0.1}
-              defaultValue="0.5"
-              max={10}
-              activeOption="s"
-              onClick={() => {}}
-              onChange={(value) => console.log(value)}
-            />
-          </div>
-          <div className="property-item">
-            <InputWithDropDown
-              label="Delay"
-              value="0.5"
-              min={0}
-              step={0.1}
-              defaultValue="0.5"
-              max={10}
-              activeOption="s"
-              onClick={() => {}}
-              onChange={(value) => console.log(value)}
-            />
-          </div>
-        </div>
-      </div>
-      <div className="actions-list-container">
-        <div className="actions">
-          <div className="header">
-            <div className="header-value">Actions</div>
-            <div className="add-button" onClick={() => {}}>
-              <AddIcon /> Add
-            </div>
-          </div>
-          <div
-            className="lists-main-container"
-            ref={actionsContainerRef}
-            style={{ height: "120px" }}
-          >
-            <div className="list-container">
-              {selectedPoint?.actions.map((action) => (
-                <div
-                  key={action.uuid}
-                  className={`list-item ${
-                    selectedItem.item?.uuid === action.uuid ? "active" : ""
-                  }`}
-                >
-                  <div
-                    className="value"
-                    onClick={() => handleActionToggle(action.uuid)}
-                  >
-                    <RenameInput value={action.name} />
-                  </div>
-                  {selectedPoint?.actions.length > 1 && (
-                    <div
-                      className="remove-button"
-                      onClick={() => handleDeleteAction(action.uuid)}
-                    >
-                      <RemoveIcon />
+    const getCurrentEventData = () => {
+        if (!selectedEventData?.data || !selectedProduct) return null;
+        const event = getEventByModelUuid(selectedProduct.productId, selectedEventData.data.modelUuid);
+        return event || null;
+    };
+
+    const getAssetType = () => {
+        const event = getCurrentEventData();
+        if (!event) return null;
+
+        switch (event.type) {
+            case 'transfer': return 'conveyor';
+            case 'vehicle': return 'vehicle';
+            case 'roboticArm': return 'roboticArm';
+            case 'machine': return 'machine';
+            case 'storageUnit': return 'storageUnit';
+            default: return null;
+        }
+    };
+
+    const getAvailableActions = () => {
+        switch (getAssetType()) {
+            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"],
+                };
+        }
+    };
+
+    // Get actions based on asset type
+    const getActions = () => {
+        if (!selectedEventData?.data) return [];
+
+        const event = selectedEventData.data;
+        switch (getAssetType()) {
+            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 handleActionToggle = (actionUuid: string) => {
+        const actions = getActions();
+        const selected = actions.find(action => action.uuid === actionUuid);
+        if (selected) {
+            setSelectedItem({ item: selected });
+        }
+    };
+
+    const handleDeleteAction = (actionUuid: string) => {
+
+    };
+
+    const actions = getActions();
+
+    const getSpeed = () => {
+        if (!selectedEventData) return "0.5";
+        if ("speed" in selectedEventData.data) return selectedEventData.data.speed.toString();
+        return "0.5";
+    };
+
+    return (
+        <>
+            {getCurrentEventData() &&
+                <div className="event-proprties-wrapper">
+                    <div className="header">
+                        <div className="header-value">{selectedEventData?.data.modelName}</div>
+                    </div>
+                    <div className="global-props">
+                        <div className="property-list-container">
+                            <div className="property-item">
+                                <InputWithDropDown
+                                    label="Speed"
+                                    value="0.5"
+                                    min={0}
+                                    step={0.1}
+                                    defaultValue={getSpeed()}
+                                    max={10}
+                                    activeOption="s"
+                                    onClick={() => { }}
+                                    onChange={(value) => console.log(value)}
+                                />
+                            </div>
+
+                            <div className="property-item">
+                                <InputWithDropDown
+                                    label="Delay"
+                                    value="0.5"
+                                    min={0}
+                                    step={0.1}
+                                    defaultValue="0.5"
+                                    max={10}
+                                    activeOption="s"
+                                    onClick={() => { }}
+                                    onChange={(value) => console.log(value)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    {getAssetType() === 'roboticArm' &&
+                        <div className="actions-list-container">
+                            <div className="actions">
+                                <div className="header">
+                                    <div className="header-value">Actions</div>
+                                    <div className="add-button" onClick={() => { }}>
+                                        <AddIcon /> Add
+                                    </div>
+                                </div>
+                                <div
+                                    className="lists-main-container"
+                                    ref={actionsContainerRef}
+                                    style={{ height: "120px" }}
+                                >
+                                    <div className="list-container">
+                                        {actions.map((action) => (
+                                            <div
+                                                key={action.uuid}
+                                                className={`list-item ${selectedItem.item?.uuid === action.uuid ? "active" : ""}`}
+                                            >
+                                                <div
+                                                    className="value"
+                                                    onClick={() => handleActionToggle(action.uuid)}
+                                                >
+                                                    <RenameInput value={action.name} />
+                                                </div>
+                                                {actions.length > 1 && (
+                                                    <div
+                                                        className="remove-button"
+                                                        onClick={() => handleDeleteAction(action.uuid)}
+                                                    >
+                                                        <RemoveIcon />
+                                                    </div>
+                                                )}
+                                            </div>
+                                        ))}
+                                    </div>
+                                    <div
+                                        className="resize-icon"
+                                        id="action-resize"
+                                        onMouseDown={(e) => handleResize(e, actionsContainerRef)}
+                                    >
+                                        <ResizeHeightIcon />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    }
+                    <div className="selected-actions-details">
+                        <div className="selected-actions-header">
+                            <RenameInput value="Action Name" />
+                        </div>
+                        <div className="selected-actions-list">
+                            <LabledDropdown
+                                defaultOption={getAvailableActions().defaultOption}
+                                options={getAvailableActions().options}
+                                onSelect={(option) => setActiveOption(option)}
+                            />
+                            {activeOption === "default" && <DefaultAction />}
+                            {activeOption === "spawn" && <SpawnAction />}
+                            {activeOption === "swap" && <SwapAction />}
+                            {activeOption === "despawn" && <DespawnAction />}
+                            {activeOption === "travel" && <TravelAction />}
+                            {activeOption === "pickAndPlace" && <PickAndPlaceAction />}
+                            {activeOption === "process" && <ProcessAction />}
+                            {activeOption === "store" && <StorageAction />}
+                        </div>
+                    </div>
+                    <div className="tirgger">
+                        <Trigger />
                     </div>
-                  )}
                 </div>
-              ))}
-            </div>
-            <div
-              className="resize-icon"
-              id="action-resize"
-              onMouseDown={(e) => handleResize(e, actionsContainerRef)}
-            >
-              <ResizeHeightIcon />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="selected-actions-details">
-        <div className="selected-actions-header">
-          <RenameInput value="Action Name" />
-        </div>
-        <div className="selected-actions-list">
-          <LabledDropdown
-            defaultOption={getAvailableActions().defaultOption}
-            options={getAvailableActions().options}
-            onSelect={(option) => setActiveOption(option)}
-          />
-          {activeOption === "default" && <DefaultAction />} {/* done */}
-          {activeOption === "spawn" && <SpawnAction />} {/* done */}
-          {activeOption === "swap" && <SwapAction />} {/* done */}
-          {activeOption === "despawn" && <DespawnAction />} {/* done */}
-          {activeOption === "travel" && <TravelAction />} {/* done */}
-          {activeOption === "pickAndPlace" && <PickAndPlaceAction />} {/* done */}
-          {activeOption === "process" && <ProcessAction />} {/* done */}
-          {activeOption === "store" && <StorageAction />} {/* done */}
-        </div>
-      </div>
-      <div className="tirgger">
-        <Trigger />
-      </div>
-    </div>
-  );
+            }
+        </>
+    );
 };
 
 export default EventProperties;

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

@@ -0,0 +1,10 @@
+import React from 'react'
+
+function ConveyorMechanics() {
+    return (
+        <>
+        </>
+    )
+}
+
+export default ConveyorMechanics

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

@@ -0,0 +1,10 @@
+import React from 'react'
+
+function MachineMechanics() {
+    return (
+        <>
+        </>
+    )
+}
+
+export default MachineMechanics

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

@@ -0,0 +1,10 @@
+import React from 'react'
+
+function RoboticArmMechanics() {
+    return (
+        <>
+        </>
+    )
+}
+
+export default RoboticArmMechanics

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

@@ -0,0 +1,10 @@
+import React from 'react'
+
+function StorageMechanics() {
+    return (
+        <>
+        </>
+    )
+}
+
+export default StorageMechanics

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

@@ -0,0 +1,10 @@
+import React from 'react'
+
+function VehicleMechanics() {
+    return (
+        <>
+        </>
+    )
+}
+
+export default VehicleMechanics

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

@@ -7,9 +7,11 @@ import {
 } from "../../../icons/ExportCommonIcons";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../functions/handleResizePannel";
-import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
+import { useSelectedAsset, useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { generateUUID } from "three/src/math/MathUtils";
+import RenderOverlay from "../../../templates/Overlay";
+import EditWidgetOption from "../../../ui/menu/EditWidgetOption";
 
 interface Event {
     pathName: string;
@@ -31,14 +33,9 @@ const List: React.FC<ListProps> = ({ val }) => {
 
 const Simulations: React.FC = () => {
     const productsContainerRef = useRef<HTMLDivElement>(null);
-    const { products, addProduct, removeProduct, renameProduct } = useProductStore();
+    const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent } = useProductStore();
     const { selectedProduct, setSelectedProduct } = useSelectedProduct();
-
-    useEffect(() => {
-        if (products.length > 0 && selectedProduct.productId === '' && selectedProduct.productName === '') {
-            setSelectedProduct(products[0].productId, products[0].productName);
-        }
-    }, [products, selectedProduct]);
+    const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
 
     const handleAddProduct = () => {
         addProduct(`Product ${products.length + 1}`, generateUUID());
@@ -75,12 +72,26 @@ const Simulations: React.FC = () => {
         }
     };
 
+    const handleAddEventToProduct = () => {
+        if (selectedAsset) {
+            addEvent(selectedProduct.productId, selectedAsset);
+            clearSelectedAsset();
+        }
+    };
+
+    const handleRemoveEventFromProduct = () => {
+        if (selectedAsset) {
+            removeEvent(selectedProduct.productId, selectedAsset.modelUuid);
+            clearSelectedAsset();
+        }
+    };
+
     const selectedProductData = products.find(
         (product) => product.productId === selectedProduct.productId
     );
 
-    const events: Event[] = selectedProductData?.eventsData.map((event, index) => ({
-        pathName: `${event.modelName} - ${event.type} #${index + 1}`,
+    const events: Event[] = selectedProductData?.eventsData.map((event) => ({
+        pathName: event.modelName,
     })) || [];
 
     return (
@@ -165,6 +176,21 @@ const Simulations: React.FC = () => {
                     </div>
                 </div>
             </div>
+
+            {selectedAsset &&
+                <RenderOverlay>
+                    <EditWidgetOption
+                        options={['Add to Product', 'Remove from Product']}
+                        onClick={(option) => {
+                            if (option === 'Add to Product') {
+                                handleAddEventToProduct();
+                            } else {
+                                handleRemoveEventFromProduct();
+                            }
+                        }}
+                    />
+                </RenderOverlay>
+            }
         </div>
     );
 };

app/src/components/layout/sidebarRight/visualization/design/Design.tsx

@@ -1,9 +1,9 @@
 import { useState, useEffect, useRef } from "react";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
-import ChartComponent from "../../../sidebarLeft//visualization/widgets/ChartComponent";
+import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";
 import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
 import { WalletIcon } from "../../../../icons/3dChartIcons";
-import SimpleCard from "../../../../../modules//visualization/widgets/floating/cards/SimpleCard";
+import SimpleCard from "../../../../../modules/visualization/widgets/floating/cards/SimpleCard";
 
 interface Widget {
   id: string;

app/src/components/ui/Tools.tsx

@@ -15,7 +15,7 @@ import {
 } from "../icons/ExportToolsIcons";
 import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons";
 import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
-import { handleSaveTemplate } from "../../modules//visualization/functions/handleSaveTemplate";
+import { handleSaveTemplate } from "../../modules/visualization/functions/handleSaveTemplate";
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";

app/src/components/ui/menu/EditWidgetOption.tsx

@@ -1,23 +1,20 @@
 import React, { useEffect } from "react";
 import {
-  useEditWidgetOptionsStore,
   useLeftData,
-  useRightClickSelected,
-  useRightSelected,
   useTopData,
 } from "../../../store/visualization/useZone3DWidgetStore";
 
 interface EditWidgetOptionProps {
   options: string[];
+  onClick: (option: string) => void;
 }
 
 const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
   options,
+  onClick
 }) => {
   const { top } = useTopData();
   const { left } = useLeftData();
-  const { setRightSelect } = useRightSelected();
-  const { setEditWidgetOptions } = useEditWidgetOptionsStore();
 
   useEffect(() => {
 
@@ -38,10 +35,7 @@ const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
           <div
             className="option"
             key={index}
-            onClick={(e) => {
-              setRightSelect(option);
-              setEditWidgetOptions(false);
-            }}
+            onClick={() => onClick(option)}
           >
             {option}
           </div>