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/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