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

2025-04-23 18:27:50 +05:30 · 2025-04-23 18:27:50 +05:30 · d2aa0ba6c3
parent 0f716d64a6 e43bfb6e98
commit d2aa0ba6c3
19 changed files with 742 additions and 37 deletions
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/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,
+                      });
                    }}
                  />

--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/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 {
-  useSelectedFloorItem,
-} from "../../../store/store";
+import { 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>
          )}
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DefaultAction.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/ProcessAction.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SpawnAction.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/StorageAction.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/functions/handleActionToggle.ts
+++ b/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.
+}
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/functions/handleDeleteAction.ts
+++ b/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.
+}
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/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;
--- a/app/src/components/ui/inputs/InputWithDropDown.tsx
+++ b/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}
--- a/app/src/components/ui/inputs/PreviewSelectionWithUpload.tsx
+++ b/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;
--- a/app/src/styles/components/input.scss
+++ b/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-offset: -2px;
+  outline: 1px solid var(--border-color);
+  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);
+    }
+  }
+}
--- a/app/src/styles/layout/sidebar.scss
+++ b/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,
-              var(--background-color) 40%,
-              transparent);
+          background: color-mix(
+            in srgb,
+            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;
  }
-}
+}
--- a/app/src/types/simulationTypes.d.ts
+++ b/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;
    };