Merge remote-tracking branch 'origin/v2-ui' into v2

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

@@ -1,25 +1,28 @@
 import React from "react";
-import EyeDropInput from "../../../../../ui/inputs/EyeDropInput";
 
 interface PickAndPlaceActionProps {
-    pickPointValue: string;
-    pickPointOnChange: (value: string) => void;
-    placePointValue: string;
-    placePointOnChange: (value: string) => void;
+  clearPoints: () => void;
 }
 
 const PickAndPlaceAction: React.FC<PickAndPlaceActionProps> = ({
-    pickPointValue,
-    pickPointOnChange,
-    placePointValue,
-    placePointOnChange,
+  clearPoints,
 }) => {
-    return (
-        <>
-            <EyeDropInput label="Pick Point" value={pickPointValue} onChange={pickPointOnChange} />
-            <EyeDropInput label="Unload Point" value={placePointValue} onChange={placePointOnChange} />
-        </>
-    );
+  return (
+    <div className="selected-actions-list">
+      <div className="value-field-container">
+        <div className="label">Reset</div>
+        <button
+          type="button"
+          className="regularDropdown-container"
+          onClick={() => {
+            clearPoints();
+          }}
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+  );
 };
 
 export default PickAndPlaceAction;

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

@@ -3,76 +3,92 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
 import EyeDropInput from "../../../../../ui/inputs/EyeDropInput";
 
 interface TravelActionProps {
-    loadCapacity: {
-        value: string;
-        min: number;
-        max: number;
-        defaultValue: string;
-        onChange: (value: string) => void;
-    };
-    unloadDuration: {
-        value: string;
-        min: number;
-        max: number;
-        defaultValue: string;
-        onChange: (value: string) => void;
-    };
-    pickPoint?: {
-        value: string;
-        onChange: (value: string) => void;
-    };
-    unloadPoint?: {
-        value: string;
-        onChange: (value: string) => void;
-    };
+  loadCapacity: {
+    value: string;
+    min: number;
+    max: number;
+    defaultValue: string;
+    onChange: (value: string) => void;
+  };
+  unloadDuration: {
+    value: string;
+    min: number;
+    max: number;
+    defaultValue: string;
+    onChange: (value: string) => void;
+  };
+  pickPoint?: {
+    value: string;
+    onChange: (value: string) => void;
+  };
+  unloadPoint?: {
+    value: string;
+    onChange: (value: string) => void;
+  };
+  clearPoints: () => void;
 }
 
 const TravelAction: React.FC<TravelActionProps> = ({
-    loadCapacity,
-    unloadDuration,
-    pickPoint,
-    unloadPoint,
+  loadCapacity,
+  unloadDuration,
+  pickPoint,
+  unloadPoint,
+  clearPoints,
 }) => {
-    return (
-        <>
-            <InputWithDropDown
-                label="Load Capacity"
-                value={loadCapacity.value}
-                min={loadCapacity.min}
-                max={loadCapacity.max}
-                defaultValue={loadCapacity.defaultValue}
-                step={0.1}
-                activeOption="s"
-                onClick={() => { }}
-                onChange={loadCapacity.onChange}
-            />
-            <InputWithDropDown
-                label="Unload Duration"
-                value={unloadDuration.value}
-                min={unloadDuration.min}
-                max={unloadDuration.max}
-                defaultValue={unloadDuration.defaultValue}
-                step={0.1}
-                activeOption="s"
-                onClick={() => { }}
-                onChange={unloadDuration.onChange}
-            />
-            {pickPoint && (
-                <EyeDropInput
-                    label="Pick Point"
-                    value={pickPoint.value}
-                    onChange={pickPoint.onChange}
-                />
-            )}
-            {unloadPoint && (
-                <EyeDropInput
-                    label="Unload Point"
-                    value={unloadPoint.value}
-                    onChange={unloadPoint.onChange}
-                />
-            )}
-        </>
-    );
+  return (
+    <>
+      <InputWithDropDown
+        label="Load Capacity"
+        value={loadCapacity.value}
+        min={loadCapacity.min}
+        max={loadCapacity.max}
+        defaultValue={loadCapacity.defaultValue}
+        step={1}
+        activeOption="s"
+        onClick={() => {}}
+        onChange={loadCapacity.onChange}
+      />
+      <InputWithDropDown
+        label="Unload Duration"
+        value={unloadDuration.value}
+        min={unloadDuration.min}
+        max={unloadDuration.max}
+        defaultValue={unloadDuration.defaultValue}
+        step={0.1}
+        activeOption="s"
+        onClick={() => {}}
+        onChange={unloadDuration.onChange}
+      />
+      <div className="selected-actions-list">
+        <div className="value-field-container">
+          <div className="label">Reset</div>
+          <button
+            type="button"
+            className="regularDropdown-container"
+            onClick={() => {
+              clearPoints();
+            }}
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+      {pickPoint && (
+        <EyeDropInput
+          label="Pick Point"
+          value={pickPoint.value}
+          onChange={pickPoint.onChange}
+        />
+      )}
+      {unloadPoint && (
+        <EyeDropInput
+          label="Unload Point"
+          value={unloadPoint.value}
+          onChange={unloadPoint.onChange}
+        />
+      )}
+    </>
+  );
 };
 
 export default TravelAction;

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

@@ -4,286 +4,304 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
-import { useSelectedEventData, useSelectedProduct, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
+import {
+  useSelectedEventData,
+  useSelectedProduct,
+  useSelectedAction,
+} from "../../../../../../store/simulation/useSimulationStore";
 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, getEventByModelUuid, getActionByUuid, updateEvent, updateAction, addAction, removeAction } = useProductStore();
-    const { selectedProduct } = useSelectedProduct();
-    const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
+  const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">(
+    "default"
+  );
+  const [selectedPointData, setSelectedPointData] = useState<
+    RoboticArmPointSchema | undefined
+  >();
+  const { selectedEventData } = useSelectedEventData();
+  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];
+  const email = localStorage.getItem("email");
+  const organization = email!.split("@")[1].split(".")[0];
 
-    useEffect(() => {
-        if (selectedEventData) {
-            const point = getPointByUuid(
-                selectedProduct.productId,
-                selectedEventData.data.modelUuid,
-                selectedEventData.selectedPoint
-            ) as RoboticArmPointSchema | undefined;
-            if (point?.actions) {
-                setSelectedPointData(point);
-                if (point.actions.length > 0) {
-                    setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace");
-                    setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName);
-                }
-            }
-        } else {
-            clearSelectedAction();
+  useEffect(() => {
+    if (selectedEventData) {
+      const point = getPointByUuid(
+        selectedProduct.productId,
+        selectedEventData.data.modelUuid,
+        selectedEventData.selectedPoint
+      ) as RoboticArmPointSchema | undefined;
+      if (point?.actions) {
+        setSelectedPointData(point);
+        if (point.actions.length > 0) {
+          setActiveOption(
+            point.actions[0].actionType as "default" | "pickAndPlace"
+          );
+          setSelectedAction(
+            point.actions[0].actionUuid,
+            point.actions[0].actionName
+          );
         }
-    }, [selectedEventData, selectedProduct]);
+      }
+    } else {
+      clearSelectedAction();
+    }
+  }, [selectedEventData, selectedProduct]);
 
-    const updateBackend = (
-        productName: string,
-        productId: string,
-        organization: string,
-        eventData: EventsSchema
-    ) => {
-        upsertProductOrEventApi({
-            productName: productName,
-            productId: productId,
-            organization: organization,
-            eventDatas: eventData
-        })
+  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;
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedAction.actionId,
+      { actionName: newName }
+    );
+
+    if (selectedPointData) {
+      const updatedActions = selectedPointData.actions.map((action) =>
+        action.actionUuid === selectedAction.actionId
+          ? { ...action, actionName: newName }
+          : action
+      );
+      setSelectedPointData({
+        ...selectedPointData,
+        actions: updatedActions,
+      });
     }
 
-    const handleRenameAction = (newName: string) => {
-        if (!selectedAction.actionId) return;
-        const event = updateAction(selectedProduct.productId, selectedAction.actionId, { actionName: newName });
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+  };
 
-        if (selectedPointData) {
-            const updatedActions = selectedPointData.actions.map((action) =>
-                action.actionUuid === selectedAction.actionId ? { ...action, actionName: newName } : action
-            );
-            setSelectedPointData({
-                ...selectedPointData,
-                actions: updatedActions,
-            });
-        }
-
-        if (event) {
-            updateBackend(
-                selectedProduct.productName,
-                selectedProduct.productId,
-                organization,
-                event
-            );
-        }
-    };
-
-    const handleSpeedChange = (value: string) => {
-        if (!selectedEventData) return;
-        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);
-
-        const event = updateAction(selectedProduct.productId, 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);
-
-        const event = updateAction(selectedProduct.productId, 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(selectedProduct.productId, actionUuid);
-
-        if (event) {
-            updateBackend(
-                selectedProduct.productName,
-                selectedProduct.productId,
-                organization,
-                event
-            );
-        }
-
-        const index = selectedPointData.actions.findIndex(a => a.actionUuid === actionUuid);
-        const newActions = selectedPointData.actions.filter(a => a.actionUuid !== actionUuid);
-
-        const updatedPoint = {
-            ...selectedPointData,
-            actions: newActions,
-        };
-        setSelectedPointData(updatedPoint);
-
-        if (selectedAction.actionId === actionUuid) {
-            const nextAction = newActions[index] || newActions[index - 1];
-            if (nextAction) {
-                setSelectedAction(nextAction.actionUuid, nextAction.actionName);
-            } else {
-                clearSelectedAction();
-            }
-        }
-    };
-
-    const availableActions = {
-        defaultOption: "pickAndPlace",
-        options: ["pickAndPlace"],
-    };
-
-    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);
-
-    const currentPickPoint = currentAction?.process.startPoint
-        ? `${currentAction.process.startPoint[0]},${currentAction.process.startPoint[1]},${currentAction.process.startPoint[2]}`
-        : "";
-    const currentPlacePoint = currentAction?.process.endPoint
-        ? `${currentAction.process.endPoint[0]},${currentAction.process.endPoint[1]},${currentAction.process.endPoint[2]}`
-        : "";
-
-    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
-                    selectedPointData={selectedPointData}
-                    multipleAction
-                    handleAddAction={handleAddAction}
-                    handleDeleteAction={handleDeleteAction}
-                />
-
-                {selectedAction.actionId && currentAction && (
-                    <div className="selected-actions-details">
-                        <div className="selected-actions-header">
-                            <RenameInput
-                                value={selectedAction.actionName || ''}
-                                onRename={handleRenameAction}
-                            />
-                        </div>
-                        <div className="selected-actions-list">
-                            <LabledDropdown
-                                defaultOption={activeOption}
-                                options={availableActions.options}
-                                onSelect={() => { }}
-                                disabled={true}
-                            />
-                            <PickAndPlaceAction
-                                pickPointValue={currentPickPoint}
-                                pickPointOnChange={handlePickPointChange}
-                                placePointValue={currentPlacePoint}
-                                placePointOnChange={handlePlacePointChange}
-                            />
-                        </div>
-                        <div className="tirgger">
-                            <Trigger selectedPointData={selectedPointData as any} type={'RoboticArm'} />
-                        </div>
-                    </div>
-                )}
-            </section>
-        </>
+  const handleSpeedChange = (value: string) => {
+    if (!selectedEventData) return;
+    const event = updateEvent(
+      selectedProduct.productId,
+      selectedEventData.data.modelUuid,
+      {
+        speed: parseFloat(value),
+      }
     );
+
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+  };
+  const handleClearPoints = () => {
+    if (!selectedAction.actionId || !selectedPointData) return;
+
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedAction.actionId,
+      {
+        process: {
+          startPoint: null,
+          endPoint: null,
+        },
+      }
+    );
+
+    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(selectedProduct.productId, actionUuid);
+
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+
+    const index = selectedPointData.actions.findIndex(
+      (a) => a.actionUuid === actionUuid
+    );
+    const newActions = selectedPointData.actions.filter(
+      (a) => a.actionUuid !== actionUuid
+    );
+
+    const updatedPoint = {
+      ...selectedPointData,
+      actions: newActions,
+    };
+    setSelectedPointData(updatedPoint);
+
+    if (selectedAction.actionId === actionUuid) {
+      const nextAction = newActions[index] || newActions[index - 1];
+      if (nextAction) {
+        setSelectedAction(nextAction.actionUuid, nextAction.actionName);
+      } else {
+        clearSelectedAction();
+      }
+    }
+  };
+
+  const availableActions = {
+    defaultOption: "pickAndPlace",
+    options: ["pickAndPlace"],
+  };
+
+  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
+  );
+
+  const currentPickPoint = currentAction?.process.startPoint
+    ? `${currentAction.process.startPoint[0]},${currentAction.process.startPoint[1]},${currentAction.process.startPoint[2]}`
+    : "";
+  const currentPlacePoint = currentAction?.process.endPoint
+    ? `${currentAction.process.endPoint[0]},${currentAction.process.endPoint[1]},${currentAction.process.endPoint[2]}`
+    : "";
+
+  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
+          selectedPointData={selectedPointData}
+          multipleAction
+          handleAddAction={handleAddAction}
+          handleDeleteAction={handleDeleteAction}
+        />
+
+        {selectedAction.actionId && currentAction && (
+          <div className="selected-actions-details">
+            <div className="selected-actions-header">
+              <RenameInput
+                value={selectedAction.actionName || ""}
+                onRename={handleRenameAction}
+              />
+            </div>
+            <div className="selected-actions-list">
+              <LabledDropdown
+                defaultOption={activeOption}
+                options={availableActions.options}
+                onSelect={() => {}}
+                disabled={true}
+              />
+              <PickAndPlaceAction clearPoints={handleClearPoints} />
+            </div>
+            <div className="tirgger">
+              <Trigger
+                selectedPointData={selectedPointData as any}
+                type={"RoboticArm"}
+              />
+            </div>
+          </div>
+        )}
+      </section>
+    </>
+  );
 }
 
 export default RoboticArmMechanics;

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

@@ -4,249 +4,319 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
 import {
-    useSelectedAction,
-    useSelectedEventData,
-    useSelectedProduct,
+  useSelectedAction,
+  useSelectedEventData,
+  useSelectedEventSphere,
+  useSelectedProduct,
 } from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import TravelAction from "../actions/TravelAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
+import { useVehicleStore } from "../../../../../../store/simulation/useVehicleStore";
 
 function VehicleMechanics() {
-    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();
-    const { setSelectedAction, clearSelectedAction } = useSelectedAction();
+  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();
+  const { setSelectedAction, clearSelectedAction } = useSelectedAction();
+  const { getVehicleById } = useVehicleStore();
 
-    const email = localStorage.getItem('email')
-    const organization = (email!.split("@")[1]).split(".")[0];
+  const email = localStorage.getItem("email");
+  const organization = email!.split("@")[1].split(".")[0];
 
-    useEffect(() => {
-        if (selectedEventData && selectedEventData.data.type === 'vehicle') {
-            const point = getPointByUuid(
-                selectedProduct.productId,
-                selectedEventData.data.modelUuid,
-                selectedEventData.selectedPoint
-            ) as VehiclePointSchema | undefined;
+  useEffect(() => {
+    if (selectedEventData && selectedEventData.data.type === "vehicle") {
+      const point = getPointByUuid(
+        selectedProduct.productId,
+        selectedEventData.data.modelUuid,
+        selectedEventData.selectedPoint
+      ) as VehiclePointSchema | undefined;
 
-            if (point) {
-                setSelectedPointData(point);
-                setActiveOption(point.action.actionType as "travel");
-                setSelectedAction(point.action.actionUuid, point.action.actionName);
-            }
-        } else {
-            clearSelectedAction();
-        }
-    }, [selectedProduct, selectedEventData]);
-
-    const updateBackend = (
-        productName: string,
-        productId: string,
-        organization: string,
-        eventData: EventsSchema
-    ) => {
-        upsertProductOrEventApi({
-            productName: productName,
-            productId: productId,
-            organization: organization,
-            eventDatas: eventData
-        })
+      if (point) {
+        setSelectedPointData(point);
+        setActiveOption(point.action.actionType as "travel");
+        setSelectedAction(point.action.actionUuid, point.action.actionName);
+      }
+    } else {
+      clearSelectedAction();
     }
+  }, [selectedProduct, selectedEventData]);
 
-    const handleSpeedChange = (value: string) => {
-        if (!selectedEventData) return;
-        const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
-            speed: parseFloat(value),
-        });
+  const updateBackend = (
+    productName: string,
+    productId: string,
+    organization: string,
+    eventData: EventsSchema
+  ) => {
+    upsertProductOrEventApi({
+      productName: productName,
+      productId: productId,
+      organization: organization,
+      eventDatas: eventData,
+    });
+  };
 
-        if (event) {
-            updateBackend(
-                selectedProduct.productName,
-                selectedProduct.productId,
-                organization,
-                event
-            );
-        }
-    };
-
-    const handleActionTypeChange = (option: string) => {
-        if (!selectedEventData || !selectedPointData) return;
-        const validOption = option as "travel";
-        setActiveOption(validOption);
-
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
-            actionType: validOption,
-        });
-
-        if (event) {
-            updateBackend(
-                selectedProduct.productName,
-                selectedProduct.productId,
-                organization,
-                event
-            );
-        }
-    };
-
-    const handleRenameAction = (newName: string) => {
-        if (!selectedPointData) return;
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
-
-        if (event) {
-            updateBackend(
-                selectedProduct.productName,
-                selectedProduct.productId,
-                organization,
-                event
-            );
-        }
-    };
-
-    const handleLoadCapacityChange = (value: string) => {
-        if (!selectedPointData) return;
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
-            loadCapacity: parseFloat(value),
-        });
-
-        if (event) {
-            updateBackend(
-                selectedProduct.productName,
-                selectedProduct.productId,
-                organization,
-                event
-            );
-        }
-    };
-
-    const handleUnloadDurationChange = (value: string) => {
-        if (!selectedPointData) return;
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
-            unLoadDuration: parseFloat(value),
-        });
-
-        if (event) {
-            updateBackend(
-                selectedProduct.productName,
-                selectedProduct.productId,
-                organization,
-                event
-            );
-        }
-    };
-
-    const handlePickPointChange = (value: string) => {
-        if (!selectedPointData) return;
-    };
-
-    const handleUnloadPointChange = (value: string) => {
-        if (!selectedPointData) return;
-    };
-
-    // Get current values from store
-
-    const currentSpeed = (getEventByModelUuid(
-        selectedProduct.productId, selectedEventData?.data.modelUuid || ""
-    ) as VehicleEventSchema | undefined)?.speed?.toString() || "0.5";
-
-    const currentActionName = selectedPointData
-        ? selectedPointData.action.actionName
-        : "Action Name";
-
-    const currentLoadCapacity = selectedPointData
-        ? selectedPointData.action.loadCapacity.toString()
-        : "1";
-
-    const currentUnloadDuration = selectedPointData
-        ? selectedPointData.action.unLoadDuration.toString()
-        : "1";
-
-    const currentPickPoint = selectedPointData?.action.pickUpPoint;
-
-    const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
-
-    const availableActions = {
-        defaultOption: "travel",
-        options: ["travel"],
-    };
-
-    return (
-        <>
-            {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 selectedPointData={selectedPointData as any} type={'Vehicle'} />
-                        </div>
-                    </section>
-                </>
-            )}
-        </>
+  const handleSpeedChange = (value: string) => {
+    if (!selectedEventData) return;
+    const event = updateEvent(
+      selectedProduct.productId,
+      selectedEventData.data.modelUuid,
+      {
+        speed: parseFloat(value),
+      }
     );
+
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+  };
+
+  const handleActionTypeChange = (option: string) => {
+    if (!selectedEventData || !selectedPointData) return;
+    const validOption = option as "travel";
+    setActiveOption(validOption);
+
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      {
+        actionType: validOption,
+      }
+    );
+
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+  };
+
+  const handleRenameAction = (newName: string) => {
+    if (!selectedPointData) return;
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      { actionName: newName }
+    );
+
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+  };
+
+  const handleLoadCapacityChange = (value: string) => {
+    if (!selectedPointData) return;
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      {
+        loadCapacity: parseFloat(value),
+      }
+    );
+
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+  };
+
+  const handleUnloadDurationChange = (value: string) => {
+    if (!selectedPointData) return;
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      {
+        unLoadDuration: parseFloat(value),
+      }
+    );
+
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+  };
+
+  const handlePickPointChange = (value: string) => {
+    if (!selectedPointData) return;
+  };
+
+  const handleUnloadPointChange = (value: string) => {
+    if (!selectedPointData) return;
+  };
+
+  // Get current values from store
+
+  const currentSpeed =
+    (
+      getEventByModelUuid(
+        selectedProduct.productId,
+        selectedEventData?.data.modelUuid || ""
+      ) as VehicleEventSchema | undefined
+    )?.speed?.toString() || "0.5";
+
+  const currentActionName = selectedPointData
+    ? selectedPointData.action.actionName
+    : "Action Name";
+
+  const currentLoadCapacity = selectedPointData
+    ? selectedPointData.action.loadCapacity.toString()
+    : "1";
+
+  const currentUnloadDuration = selectedPointData
+    ? selectedPointData.action.unLoadDuration.toString()
+    : "1";
+
+  const { selectedEventSphere } = useSelectedEventSphere();
+
+  function handleClearPoints() {
+    const updatedVehicle = getVehicleById(
+      selectedEventSphere?.userData.modelUuid
+    );
+
+    if (
+      !selectedProduct?.productId ||
+      !selectedEventSphere?.userData?.modelUuid ||
+      !updatedVehicle?.point
+    )
+      return;
+
+    const event = updateEvent(
+      selectedProduct.productId,
+      selectedEventSphere.userData.modelUuid,
+      {
+        point: {
+          ...updatedVehicle.point,
+          action: {
+            ...updatedVehicle.point?.action,
+            pickUpPoint: null,
+            unLoadPoint: null,
+            steeringAngle: 0,
+          },
+        },
+      }
+    );
+
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+  }
+
+  const availableActions = {
+    defaultOption: "travel",
+    options: ["travel"],
+  };
+
+  return (
+    <>
+      {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,
+                    }}
+                    clearPoints={handleClearPoints}
+                    // pickPoint={{
+                    //     value: currentPickPoint,
+                    //     onChange: handlePickPointChange,
+                    // }}
+                    // unloadPoint={{
+                    //     value: currentUnloadPoint,
+                    //     onChange: handleUnloadPointChange,
+                    // }}
+                  />
+                )}
+              </div>
+            </div>
+            <div className="tirgger">
+              <Trigger
+                selectedPointData={selectedPointData as any}
+                type={"Vehicle"}
+              />
+            </div>
+          </section>
+        </>
+      )}
+    </>
+  );
 }
 
 export default VehicleMechanics;

app/src/components/ui/inputs/EyeDropInput.tsx

@@ -1,21 +1,18 @@
 import React from "react";
 import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
-import RegularDropDown from "./RegularDropDown";
 
 interface EyeDropInputProps {
   label: string;
   value: string;
   onChange: (value: string) => void;
-  options?: string[];
 }
 
 const EyeDropInput: React.FC<EyeDropInputProps> = ({
   label = "Object",
+  value,
   onChange,
 }) => {
   const handleEyeDropClick = () => {
-    // Here you would typically implement the eye dropper functionality
-    // For now, we'll just simulate selecting a value
     const simulatedValue = "picked_value"; // Replace with actual eye dropper logic
     onChange(simulatedValue);
   };
@@ -24,18 +21,15 @@ const EyeDropInput: React.FC<EyeDropInputProps> = ({
     <div className="eye-dropper-input-container">
       <div className="label">{label}</div>
       <div className="input-container">
-        {/* <input disabled type="text" /> */}
-        <RegularDropDown
-          header="select object"
-          options={[]}
-          onSelect={() => { }}
-        />
-        <div className="eye-picker-button" onClick={handleEyeDropClick}>
+        <input disabled type="text" value={value}/>
+        {/* <input type="text" value={activeValue ?? "null"} disabled /> */}
+        {/* <input type="button" value="Clear" onClick={handleEyeDropClick}/> */}
+        <button className="eye-picker-button" onClick={handleEyeDropClick}>
           <EyeDroperIcon isActive={false} />
-        </div>
+        </button>
       </div>
     </div>
   );
 };
 
-export default EyeDropInput;
+export default EyeDropInput;

app/src/components/ui/simulation/AssetDetailsCard.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import {
-  CartBagIcon,
   ExpandIcon,
   IndicationArrow,
   SimulationStatusIcon,
@@ -107,7 +106,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
               <div className="value-container">
                 <div className="progress-bar">
                   {[...Array(5)].map((_, i) => {
-                    const percentage = (count ?? 0 / totalCapacity) * 100;
+                    const percentage = (count! / totalCapacity) * 100;
                     const start = i * 20;
                     const end = (i + 1) * 20;
                     // fill amount: 0 to 100
@@ -120,7 +119,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
                       fillPercent = ((percentage - start) / 20) * 100;
                     }
                     return (
-                      <div key={i} className="block">
+                      <div key={`block-${i}-${start}-${end}`} className="block">
                         <div
                           className="fill"
                           style={
@@ -134,7 +133,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
                   })}
                 </div>
                 <div className="value">
-                  {Math.round((count ?? 0 / totalCapacity) * 100).toString()}%
+                  {Math.round((count! / totalCapacity) * 100).toString()}%
                 </div>
               </div>
             </div>

app/src/modules/simulation/spatialUI/arm/armBotUI.tsx

@@ -3,6 +3,7 @@ import { useSelectedAction, useSelectedEventSphere, useSelectedProduct } from '.
 import { useGLTF } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
 import { useProductStore } from '../../../../store/simulation/useProductStore';
+import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
 import PickDropPoints from './PickDropPoints';
 import useDraggableGLTF from './useDraggableGLTF';
 import * as THREE from 'three';
@@ -23,6 +24,7 @@ const ArmBotUI = () => {
     const { selectedProduct } = useSelectedProduct();
     const { scene } = useThree();
     const { selectedAction } = useSelectedAction();
+    const { armBots } = useArmBotStore();
 
     const armUiPick = useGLTF(armPick) as any;
     const armUiDrop = useGLTF(armDrop) as any;
@@ -73,7 +75,7 @@ const ArmBotUI = () => {
                 }
             }
         }
-    }, [selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]);
+    }, [armBots, selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]);
 
     function getDefaultPositions(modelUuid: string): Positions {
         const modelData = getEventByModelUuid(selectedProduct.productId, modelUuid);

app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx

@@ -23,7 +23,7 @@ const VehicleUI = () => {
   const prevMousePos = useRef({ x: 0, y: 0 });
   const { selectedEventSphere } = useSelectedEventSphere();
   const { selectedProduct } = useSelectedProduct();
-  const { getVehicleById } = useVehicleStore();
+  const { vehicles, getVehicleById } = useVehicleStore();
   const { updateEvent } = useProductStore();
   const [startPosition, setStartPosition] = useState<[number, number, number]>([
     0, 1, 0,
@@ -144,7 +144,7 @@ const VehicleUI = () => {
         setSteeringRotation([0, steeringAngle, 0]);
       }
     }, 10);
-  }, [selectedEventSphere, outerGroup.current]);
+  }, [selectedEventSphere, outerGroup.current, vehicles]);
 
   const handlePointerDown = (
     e: any,

app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx

@@ -58,7 +58,7 @@ const MaterialAnimator = ({
   }, [storageModel, storage.currentMaterials]);
 
   return (
-    <group position={[0, -padding, 0]}>
+    <group {...{ position: [0, -padding, 0] }}>
       {hasLoad &&
         storage.currentMaterials.map((mat, index) => (
           <MaterialModel

app/src/styles/layout/sidebar.scss

@@ -271,6 +271,7 @@
           height: calc(100% - 16px);
           max-height: 46vh;
           overflow: auto;
+          margin: 0;
         }
       }
     }
@@ -454,7 +455,6 @@
       height: calc(100% - 36px);
       position: relative;
       width: 304px;
-      padding-bottom: 10px;
 
       .no-event-selected {
         color: #666;
@@ -780,8 +780,9 @@
   .simulations-container,
   .event-proprties-wrapper {
     position: relative;
-    max-height: calc(60vh - (47px - 35px));
+    max-height: calc(62vh - (47px - 35px));
     width: 304px;
+    border-radius: #{$border-radius-large};
     overflow-x: hidden;
 
     .header {
@@ -1175,8 +1176,8 @@
     }
 
     .analysis-content-container {
-      min-height: 50vh;
-      max-height: 60vh;
+      min-height: 48vh;
+      max-height: 56vh;
       overflow-y: auto;
 
       .dropdown-header-container,