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

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

@@ -73,7 +73,7 @@ const Assets: React.FC = () => {
       try {
         const filt = await fetchAssets();
         setFiltereredAssets(filt);
-      } catch { }
+      } catch {}
     };
     filteredAssets();
   }, [categoryAssets]);
@@ -135,7 +135,7 @@ const Assets: React.FC = () => {
         const res = await getCategoryAsset(asset);
         setCategoryAssets(res);
         setFiltereredAssets(res);
-      } catch (error) { }
+      } catch (error) {}
     }
   };
   return (
@@ -151,7 +151,12 @@ const Assets: React.FC = () => {
           <div className="assets-container">
             {categoryAssets &&
               categoryAssets?.map((asset: any, index: number) => (
-                <div key={index} className="assets" id={asset.filename}>
+                <div
+                  key={index}
+                  className="assets"
+                  id={asset.filename}
+                  title={asset.filename}
+                >
                   <img
                     src={asset?.thumbnail}
                     alt={asset.filename}
@@ -187,7 +192,12 @@ const Assets: React.FC = () => {
           <div className="assets-container">
             {categoryAssets &&
               categoryAssets?.map((asset: any, index: number) => (
-                <div key={index} className="assets" id={asset.filename}>
+                <div
+                  key={index}
+                  className="assets"
+                  id={asset.filename}
+                  title={asset.filename}
+                >
                   <img
                     src={asset?.thumbnail}
                     alt={asset.filename}
@@ -196,8 +206,9 @@ const Assets: React.FC = () => {
                       setSelectedItem({
                         name: asset.filename,
                         id: asset.AssetID,
-                        type: asset.type === "undefined" ? undefined : asset.type
+                        type:
-                      })
+                          asset.type === "undefined" ? undefined : asset.type,
+                      });
                     }}
                   />
 

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

@@ -13,24 +13,58 @@ import useToggleStore from "../../../store/useUIToggleStore";
 import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
-import {
+import { useSelectedFloorItem } from "../../../store/store";
-  useSelectedFloorItem,
-} from "../../../store/store";
 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();
+
   // Reset activeList whenever activeModule changes
   useEffect(() => {
     if (activeModule !== "simulation") setSubModule("properties");
     if (activeModule === "simulation") setSubModule("mechanics");
   }, [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",
+  };
+
   return (
     <div className="sidebar-right-wrapper">
       <Header />
@@ -38,8 +72,9 @@ const SideBarRight: React.FC = () => {
         <div className="sidebar-actions-container">
           {/* {activeModule === "builder" && ( */}
           <div
-            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
+            className={`sidebar-action-list ${
-              }`}
+              subModule === "properties" ? "active" : ""
+            }`}
             onClick={() => setSubModule("properties")}
           >
             <PropertiesIcon isActive={subModule === "properties"} />
@@ -48,22 +83,25 @@ const SideBarRight: React.FC = () => {
           {activeModule === "simulation" && (
             <>
               <div
-                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
+                className={`sidebar-action-list ${
-                  }`}
+                  subModule === "mechanics" ? "active" : ""
+                }`}
                 onClick={() => setSubModule("mechanics")}
               >
                 <MechanicsIcon isActive={subModule === "mechanics"} />
               </div>
               <div
-                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
+                className={`sidebar-action-list ${
-                  }`}
+                  subModule === "simulations" ? "active" : ""
+                }`}
                 onClick={() => setSubModule("simulations")}
               >
                 <SimulationIcon isActive={subModule === "simulations"} />
               </div>
               <div
-                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
+                className={`sidebar-action-list ${
-                  }`}
+                  subModule === "analysis" ? "active" : ""
+                }`}
                 onClick={() => setSubModule("analysis")}
               >
                 <AnalysisIcon isActive={subModule === "analysis"} />
@@ -109,6 +147,7 @@ const SideBarRight: React.FC = () => {
           {subModule === "mechanics" && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
+                <EventProperties {...dummyData} />
               </div>
             </div>
           )}

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

@@ -0,0 +1,210 @@
+import React, { useRef, useState } from "react";
+import InputWithDropDown from "../../../../ui/inputs/InputWithDropDown";
+import LabledDropdown from "../../../../ui/inputs/LabledDropdown";
+import {
+  AddIcon,
+  RemoveIcon,
+  ResizeHeightIcon,
+} from "../../../../icons/ExportCommonIcons";
+import RenameInput from "../../../../ui/inputs/RenameInput";
+import { handleResize } from "../../../../../functions/handleResizePannel";
+import { handleActionToggle } from "./functions/handleActionToggle";
+import { handleDeleteAction } from "./functions/handleDeleteAction";
+import DefaultAction from "./actions/DefaultAction";
+import SpawnAction from "./actions/SpawnAction";
+import SwapAction from "./actions/SwapAction";
+import DespawnAction from "./actions/DespawnAction";
+import TravelAction from "./actions/TravelAction";
+import PickAndPlaceAction from "./actions/PickAndPlaceAction";
+import ProcessAction from "./actions/ProcessAction";
+import StorageAction from "./actions/StorageAction";
+import Trigger from "./trigger/Trigger";
+
+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;
+}
+
+const EventProperties: React.FC<EventPropertiesProps> = ({
+  assetType,
+  selectedPoint,
+  selectedItem,
+  setSelectedPoint,
+  selectedActionSphere,
+}) => {
+  const actionsContainerRef = useRef<HTMLDivElement>(null);
+
+  const [activeOption, setActiveOption] = useState("default");
+  const [dummyactiveOption, setTypeOption] = useState("default");
+
+  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"],
+      };
+    }
+  };
+
+  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 />
+                    </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/actions/DefaultAction.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const DefaultAction:React.FC = () => {
+  return <></>;
+};
+
+export default DefaultAction;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
+
+const DespawnAction: React.FC = () => {
+  return (
+    <>
+      <InputWithDropDown
+        label="Delay"
+        value=""
+        min={0}
+        step={0.1}
+        max={10}
+        defaultValue="0"
+        activeOption="s"
+        onClick={() => {}}
+        onChange={(value) => console.log(value)}
+      />
+    </>
+  );
+};
+
+export default DespawnAction;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import EyeDropInput from "../../../../../ui/inputs/EyeDropInput";
+
+const PickAndPlaceAction: React.FC = () => {
+  return (
+    <>
+      <EyeDropInput label="Pick Point" value="na" onChange={() => {}} />
+      <EyeDropInput label="Unload Point" value="na" onChange={() => {}} />
+    </>
+  );
+};
+
+export default PickAndPlaceAction;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
+import SwapAction from "./SwapAction";
+
+const ProcessAction: React.FC = () => {
+  return (
+    <>
+      <InputWithDropDown
+        label="Process Time"
+        value="6"
+        min={0}
+        step={1}
+        max={10}
+        defaultValue="0"
+        activeOption="s"
+        onClick={() => {}}
+        onChange={(value) => console.log(value)}
+      />
+      <SwapAction />
+    </>
+  );
+};
+
+export default ProcessAction;

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

@@ -0,0 +1,35 @@
+import React from "react";
+import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";
+import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
+
+const SpawnAction: React.FC = () => {
+  return (
+    <>
+      <InputWithDropDown
+        label="Spawn interval"
+        value="0"
+        min={0}
+        step={1}
+        defaultValue="0"
+        max={10}
+        activeOption="s"
+        onClick={() => {}}
+        onChange={(value) => console.log(value)}
+      />
+      <InputWithDropDown
+        label="Spawn count"
+        value="0"
+        min={0}
+        step={1}
+        defaultValue="0"
+        max={10}
+        activeOption="s"
+        onClick={() => {}}
+        onChange={(value) => console.log(value)}
+      />
+      <PreviewSelectionWithUpload />
+    </>
+  );
+};
+
+export default SpawnAction;

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

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

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

@@ -0,0 +1,12 @@
+import React from "react";
+import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";
+
+const SwapAction: React.FC = () => {
+  return (
+    <>
+      <PreviewSelectionWithUpload />
+    </>
+  );
+};
+
+export default SwapAction;

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

@@ -0,0 +1,36 @@
+import React from "react";
+import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
+import EyeDropInput from "../../../../../ui/inputs/EyeDropInput";
+
+const TravelAction: React.FC = () => {
+  return (
+    <>
+      <InputWithDropDown
+        label="Load Capacity"
+        value=""
+        min={0}
+        step={0.1}
+        max={10}
+        defaultValue="0"
+        activeOption="s"
+        onClick={() => {}}
+        onChange={(value) => console.log(value)}
+      />
+      <InputWithDropDown
+        label="Unload Duration"
+        value=""
+        min={0}
+        step={0.1}
+        max={10}
+        defaultValue="0"
+        activeOption="s"
+        onClick={() => {}}
+        onChange={(value) => console.log(value)}
+      />
+      <EyeDropInput label="Pick Point" value="na" onChange={() => {}} />
+      <EyeDropInput label="Unload Point" value="na" onChange={() => {}} />
+    </>
+  );
+};
+
+export default TravelAction;

app/src/components/layout/sidebarRight/properties/eventProperties/functions/handleActionToggle.ts

@@ -0,0 +1,6 @@
+export function handleActionToggle(uuid: string) {
+    // This function handles the action toggle for the event properties.
+    // It updates the selected action and its properties based on the provided UUID.
+    // The function is currently empty and needs to be implemented.
+    // You can add your logic here to handle the action toggle.
+}

app/src/components/layout/sidebarRight/properties/eventProperties/functions/handleDeleteAction.ts

@@ -0,0 +1,6 @@
+export function handleDeleteAction(uuid: string) {
+    // This function handles the action toggle for the event properties.
+    // It updates the selected action and its properties based on the provided UUID.
+    // The function is currently empty and needs to be implemented.
+    // You can add your logic here to handle the action toggle.
+}

app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import { AddIcon, RemoveIcon } from "../../../../../icons/ExportCommonIcons";
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
+
+const Trigger: React.FC = () => {
+  // State to hold the list of triggers
+  const [triggers, setTriggers] = useState<string[]>([]);
+  const [activeOption, setActiveOption] = useState("onComplete");
+
+  // States for dropdowns
+  const [triggeredModel, setTriggeredModel] = useState<string[]>([]);
+  const [triggeredPoint, setTriggeredPoint] = useState<string[]>([]);
+  const [triggeredAction, setTriggeredAction] = useState<string[]>([]);
+
+  // Function to handle adding a new trigger
+  const addTrigger = (): void => {
+    const newTrigger = `Trigger ${triggers.length + 1}`;
+    setTriggers([...triggers, newTrigger]); // Add new trigger to the state
+
+    // Initialize the states for the new trigger
+    setTriggeredModel([...triggeredModel, ""]);
+    setTriggeredPoint([...triggeredPoint, ""]);
+    setTriggeredAction([...triggeredAction, ""]);
+  };
+
+  // Function to handle removing a trigger
+  const removeTrigger = (index: number): void => {
+    setTriggers(triggers.filter((_, i) => i !== index)); // Remove trigger by index
+    setTriggeredModel(triggeredModel.filter((_, i) => i !== index));
+    setTriggeredPoint(triggeredPoint.filter((_, i) => i !== index));
+    setTriggeredAction(triggeredAction.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="trigger-wrapper">
+      <div className="header">
+        <div className="title">Trigger</div>
+        <div
+          className="add-button"
+          onClick={addTrigger}
+          style={{ cursor: "pointer" }}
+        >
+          <AddIcon /> Add
+        </div>
+      </div>
+      <div className="trigger-list">
+        {/* Map over triggers and render them */}
+        {triggers.map((trigger, index) => (
+          <div key={index} className="trigger-item">
+            <div className="trigger-name">
+              {trigger}
+              <div
+                className="remove-button"
+                onClick={() => removeTrigger(index)}
+                style={{ cursor: "pointer" }}
+              >
+                <RemoveIcon />
+              </div>
+            </div>
+            <LabledDropdown
+              defaultOption={activeOption}
+              options={["onComplete", "onStart", "onStop", "delay"]}
+              onSelect={(option) => setActiveOption(option)}
+            />
+            <div className="trigger-options">
+              <div>
+                <LabledDropdown
+                  defaultOption={triggeredModel[index] || "Select Model"}
+                  options={["Model 1", "Model 2", "Model 3"]}
+                  onSelect={(option) => {
+                    const newModel = [...triggeredModel];
+                    newModel[index] = option;
+                    setTriggeredModel(newModel);
+                  }}
+                />
+              </div>
+              <div>
+                <LabledDropdown
+                  defaultOption={triggeredPoint[index] || "Select Point"}
+                  options={["Point 1", "Point 2", "Point 3"]}
+                  onSelect={(option) => {
+                    const newPoint = [...triggeredPoint];
+                    newPoint[index] = option;
+                    setTriggeredPoint(newPoint);
+                  }}
+                />
+              </div>
+              <div>
+                <LabledDropdown
+                  defaultOption={triggeredAction[index] || "Select Action"}
+                  options={["Action 1", "Action 2", "Action 3"]}
+                  onSelect={(option) => {
+                    const newAction = [...triggeredAction];
+                    newAction[index] = option;
+                    setTriggeredAction(newAction);
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Trigger;

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

@@ -5,6 +5,7 @@ type InputWithDropDownProps = {
   label: string;
   value: string;
   min?: number;
+  max?: number;
   step?: number;
   defaultValue?: string;
   options?: string[]; // Array of dropdown options
@@ -19,6 +20,7 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
   label,
   value,
   min,
+  max,
   step,
   defaultValue,
   options,
@@ -47,6 +49,7 @@ const InputWithDropDown: React.FC<InputWithDropDownProps> = ({
       <div className="input default" id={separatedWords}>
         <input
           min={min}
+          max={max}
           step={step}
           type="number"
           defaultValue={value}

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

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import LabledDropdown from "./LabledDropdown";
+import { ArrowIcon } from "../../icons/ExportCommonIcons";
+
+const PreviewSelectionWithUpload: React.FC = () => {
+  const [showPreview, setSetshowPreview] = useState(false);
+  return (
+    <div className="preview-selection-with-upload-wrapper">
+      <div
+        className="input-header-container"
+        onClick={() => setSetshowPreview(!showPreview)}
+      >
+        <div className="input-header">Preview</div>
+        <div
+          className="arrow-container"
+          style={{ rotate: showPreview ? "0deg" : "90deg" }}
+        >
+          <ArrowIcon />
+        </div>
+      </div>
+      {showPreview && (
+        <div className="canvas-wrapper">
+          <div className="canvas-container"></div>
+        </div>
+      )}
+      <div className="asset-selection-container">
+        <div className="upload-custom-asset-button">
+          <div className="title">Upload Product</div>
+          <input
+            type="file"
+            accept=".glb, .gltf"
+            id="simulation-product-upload"
+          />
+          <label className="upload-button" htmlFor="simulation-product-upload">
+            Upload here
+          </label>
+        </div>
+        <LabledDropdown
+          label="Presets"
+          defaultOption={"Default material"}
+          options={["Default material", "Product 1", "Product 2"]}
+          onSelect={(option) => console.log(option)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PreviewSelectionWithUpload;

app/src/styles/components/input.scss

@@ -7,8 +7,8 @@ input {
   width: 100%;
   padding: 2px 4px;
   border-radius: #{$border-radius-small};
-  outline: 2px solid var(--border-color);
+  outline: 1px solid var(--border-color);
-  outline-offset: -2px;
+  outline-offset: -1px;
   border: none;
   background: transparent;
   color: var(--input-text-color);
@@ -30,6 +30,24 @@ input {
     background-color: var(--background-color) !important;
     -webkit-box-shadow: 0 0 0px 1000px var(--background-color) inset !important;
   }
+
+  // File input specific style adjustments
+  &::file-selector-button {
+    font-size: 14px;
+    color: var(--accent-color);
+    background-color: var(--background-color-secondary);
+    border: none;
+    outline: none;
+    border-radius: #{$border-radius-small};
+    padding: 2px;
+    cursor: pointer;
+
+    // Hover effect for the file button
+    &:hover {
+      color: var(--primary-color);
+      background-color: var(--accent-color);
+    }
+  }
 }
 
 .input-value {
@@ -712,3 +730,47 @@ input {
     border: 1px solid var(--accent-color);
   }
 }
+
+.preview-selection-with-upload-wrapper {
+  .input-header-container {
+    padding: 6px 12px;
+    @include flex-space-between;
+    .arrow-container {
+      transition: all 0.2s;
+      @include flex-center;
+    }
+  }
+  .upload-custom-asset-button{
+    padding: 6px 12px;
+    @include flex-space-between;
+    .title{
+      white-space: nowrap;
+      width: 40%;
+    }
+    input{
+      display: none;
+    }
+    .upload-button{
+      width: 60%;
+      background: var(--highlight-accent-color);
+      color: var(--accent-color);
+      padding: 3px 6px;
+      border-radius: #{$border-radius-small};
+      text-align: center;
+    }
+  }
+  .canvas-wrapper {
+    height: 150px;
+    width: 100%;
+    padding: 8px;
+    padding-right: 4px;
+    overflow: hidden;
+    position: relative;
+    .canvas-container {
+      width: 100%;
+      height: 100%;
+      border-radius: #{$border-radius-small};
+      background-color: var(--background-color-gray);
+    }
+  }
+}

app/src/styles/layout/sidebar.scss

@@ -7,6 +7,7 @@
   top: 32px;
   left: 8px;
   background-color: var(--background-color);
+  backdrop-filter: blur(150px);
   border-radius: #{$border-radius-extra-large};
   box-shadow: #{$box-shadow-medium};
   z-index: #{$z-index-tools};
@@ -131,15 +132,12 @@
       }
 
       .widgets-wrapper {
-
         min-height: 50vh;
         max-height: 60vh;
         overflow: auto;
       }
 
       .widget-left-sideBar {
-
-
         .widget2D {
           overflow: auto;
 
@@ -246,6 +244,7 @@
   top: 32px;
   right: 8px;
   background-color: var(--background-color);
+  backdrop-filter: blur(150px);
   border-radius: #{$border-radius-extra-large};
   box-shadow: #{$box-shadow-medium};
   z-index: #{$z-index-tools};
@@ -643,7 +642,7 @@
 
         path {
           stroke: var(--accent-color);
-          strokewidth: 1.5px;
+          stroke-width: 1.5px;
         }
 
         &:hover {
@@ -658,7 +657,8 @@
   }
 
   .machine-mechanics-content-container,
-  .simulations-container {
+  .simulations-container,
+  .event-proprties-wrapper {
     max-height: calc(60vh - (47px - 35px));
     overflow: auto;
     overflow-y: scroll;
@@ -682,6 +682,52 @@
       }
     }
 
+    .global-props {
+      .property-list-container {
+        .property-item {
+          .value-field-container {
+            margin: 0;
+            input {
+              padding: 5px 4px;
+            }
+            .dropdown {
+              top: 4px;
+              right: 4px;
+            }
+          }
+        }
+      }
+    }
+
+    .selected-actions-details {
+      .selected-actions-header .input-value {
+        padding: 8px 12px;
+        color: var(--accent-color);
+      }
+      .selected-actions-list {
+        margin-bottom: 8px;
+        .eye-dropper-input-container{
+          padding: 6px 12px;
+          .regularDropdown-container {
+            padding: 5px 8px;
+            outline: 2px solid var(--border-color);
+            outline-offset: -2px;
+            border: none;
+          }
+        }
+        .value-field-container {
+          margin: 0;
+          input {
+            padding: 5px 4px;
+          }
+          .dropdown {
+            top: 4px;
+            right: 4px;
+          }
+        }
+      }
+    }
+
     .lists-main-container {
       margin: 2px 8px;
       width: calc(100% - 12px);
@@ -712,6 +758,7 @@
 
           input {
             width: fit-content;
+            outline: none;
             accent-color: var(--accent-color);
           }
         }
@@ -1183,25 +1230,21 @@
           z-index: 3;
           padding: 8px;
           width: 100%;
+          max-height: 38px;
           font-size: var(--font-size-regular);
-          background: color-mix(in srgb,
+          background: color-mix(
-              var(--background-color) 40%,
+            in srgb,
-              transparent);
+            var(--background-color) 40%,
+            transparent
+          );
           backdrop-filter: blur(5px);
           opacity: 0;
           transition: opacity 0.3s ease;
-
-          /* Added properties for ellipsis */
           display: -webkit-box;
-          /* Necessary for multiline truncation */
           -webkit-line-clamp: 2;
-          /* Number of lines to show */
           -webkit-box-orient: vertical;
-          /* Box orientation for the ellipsis */
           overflow: hidden;
-          /* Hide overflowing content */
           text-overflow: ellipsis;
-          /* Add ellipsis for truncated content */
         }
 
         .asset-image {
@@ -1271,4 +1314,4 @@
   .assets-wrapper {
     margin: 0;
   }
-}
+}

app/src/types/simulationTypes.d.ts

@@ -59,7 +59,7 @@ interface RoboticArmPointSchema {
         actionUuid: string;
         actionName: string;
         actionType: "pickAndPlace";
-        process: { startPoint: [number, number, number] | null; endPoint: [number, number, number] | null };
+        process: { startPoint: [number, number, number] | null; endPoint: [number, number, number] | null; };
         triggers: TriggerSchema[];
     }[];
 }
@@ -85,7 +85,7 @@ interface StoragePointSchema {
     action: {
         actionUuid: string;
         actionName: string;
-        actionType: "storage";
+        actionType: "store";
         materials: { materialName: string; materialId: string; }[];
         storageCapacity: number;
     };