refactor: update z-index values, enhance UserAuth checkbox, and improve sidebar styles; add ZoneProperties and Vector3Input components

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

@@ -3,9 +3,12 @@ import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
 import { LogoIcon } from "../../icons/Logo";
 import FileMenu from "../../ui/FileMenu";
 import useToggleStore from "../../../store/useUIToggleStore";
+import useModuleStore from "../../../store/useModuleStore";
 
 const Header: React.FC = () => {
   const { toggleUI, setToggleUI } = useToggleStore();
+  const { activeModule } = useModuleStore();
+
   return (
     <div className="header-container">
       <div className="header-content">
@@ -19,7 +22,7 @@ const Header: React.FC = () => {
       <div
         className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
         onClick={() => {
-          setToggleUI(!toggleUI);
+          if (activeModule !== "market") setToggleUI(!toggleUI);
         }}
       >
         <ToggleSidebarIcon />

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

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
-import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
 import {
   AnalysisIcon,
   MechanicsIcon,
@@ -15,6 +17,7 @@ import AsstePropertiies from "./properties/AssetProperties";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
 import { useSelectedActionSphere } from "../../../store/store";
+import ZoneProperties from "./properties/ZoneProperties";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
@@ -24,7 +27,8 @@ const SideBarRight: React.FC = () => {
 
   // Reset subModule whenever activeModule changes
   useEffect(() => {
-    setSubModule("properties");
+    if (activeModule !== "simulation") setSubModule("properties");
+    if (activeModule === "simulation") setSubModule("mechanics");
   }, [activeModule]);
 
   return (
@@ -32,32 +36,38 @@ const SideBarRight: React.FC = () => {
       <Header />
       {toggleUI && (
         <div className="sidebar-actions-container">
-          <div
-            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
+          {/* {activeModule === "builder" && ( */}
+            <div
+              className={`sidebar-action-list ${
+                subModule === "properties" ? "active" : ""
               }`}
-            onClick={() => setSubModule("properties")}
-          >
-            <PropertiesIcon isActive={subModule === "properties"} />
-          </div>
+              onClick={() => setSubModule("properties")}
+            >
+              <PropertiesIcon isActive={subModule === "properties"} />
+            </div>
+          {/* )} */}
           {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"} />
@@ -73,6 +83,7 @@ const SideBarRight: React.FC = () => {
           <div className="sidebar-right-container">
             <div className="sidebar-right-content-container">
               <GlobalProperties />
+              {/* <ZoneProperties /> */}
               {/* <AsstePropertiies /> */}
             </div>
           </div>
@@ -82,17 +93,17 @@ const SideBarRight: React.FC = () => {
 
       {toggleUI && activeModule === "simulation" && (
         <>
-          {(subModule === "mechanics" && selectedActionSphere) && (
+          {subModule === "mechanics" && selectedActionSphere && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
                 <MachineMechanics />
               </div>
             </div>
           )}
-          {(subModule === "mechanics" && !selectedActionSphere) && (
+          {subModule === "mechanics" && !selectedActionSphere && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
-                {/* <MachineMechanics /> */}
+                <MachineMechanics />
               </div>
             </div>
           )}

app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+
+interface PositionInputProps {
+  onChange: (value: string) => void; // Callback for value change
+  header: string;
+  placeholder?: string; // Optional placeholder
+  type?: string; // Input type (e.g., text, number, email)
+}
+
+const Vector3Input: React.FC<PositionInputProps> = ({
+  onChange,
+  header,
+  placeholder = "Enter value", // Default placeholder
+  type = "number", // Default type
+}) => {
+  return (
+    <div className="custom-input-container">
+      <div className="header">
+        {header}{" "}
+        <div className="eyedrop-button">
+          <EyeDroperIcon isActive={false} />
+        </div>
+      </div>
+      <div className="inputs-container">
+        <div className="input-container">
+          <div className="custom-input-label">X : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+          />
+        </div>
+        <div className="input-container">
+          <div className="custom-input-label">Y : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            min={0}
+          />
+        </div>
+        <div className="input-container">
+          <div className="custom-input-label">Z : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Vector3Input;

app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx

@@ -14,8 +14,8 @@ import EyeDropInput from "../../../ui/inputs/EyeDropInput";
 import { useSelectedActionSphere } from "../../../../store/store";
 
 const MachineMechanics: React.FC = () => {
-  const { selectedActionSphere, setSelectedActionSphere } = useSelectedActionSphere();
-  console.log('selectedActionSphere: ', selectedActionSphere);
+  const { selectedActionSphere } = useSelectedActionSphere();
+  console.log("selectedActionSphere: ", selectedActionSphere);
   const [actionList, setActionList] = useState<string[]>([]);
   const [triggerList, setTriggerList] = useState<string[]>([]);
   const [selectedItem, setSelectedItem] = useState<{
@@ -71,7 +71,9 @@ const MachineMechanics: React.FC = () => {
 
   return (
     <div className="machine-mechanics-container">
-      <div className="machine-mechanics-header">{selectedActionSphere.path.modelName}</div>
+      <div className="machine-mechanics-header">
+        {selectedActionSphere?.path?.modelName || "path name not found"}
+      </div>
       {/* <div className="process-list-container">
         <div className="label">Process:</div>
         <RegularDropDown
@@ -100,11 +102,12 @@ const MachineMechanics: React.FC = () => {
               {actionList.map((action, index) => (
                 <div
                   key={index}
-                  className={`list-item ${selectedItem?.type === "action" &&
+                  className={`list-item ${
+                    selectedItem?.type === "action" &&
                     selectedItem.name === action
-                    ? "active"
-                    : ""
-                    }`}
+                      ? "active"
+                      : ""
+                  }`}
                 >
                   <div
                     className="value"
@@ -146,11 +149,12 @@ const MachineMechanics: React.FC = () => {
               {triggerList.map((trigger, index) => (
                 <div
                   key={index}
-                  className={`list-item ${selectedItem?.type === "trigger" &&
+                  className={`list-item ${
+                    selectedItem?.type === "trigger" &&
                     selectedItem.name === trigger
-                    ? "active"
-                    : ""
-                    }`}
+                      ? "active"
+                      : ""
+                  }`}
                 >
                   <div
                     className="value"
@@ -188,7 +192,7 @@ const MachineMechanics: React.FC = () => {
                 label="Speed"
                 value=""
                 activeOption=".mm"
-                onChange={() => { }}
+                onChange={() => {}}
               />
               <EyeDropInput />
             </>

app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import Vector3Input from "../customInput/Vector3Input";
+
+const ZoneProperties = () => {
+  return (
+    <div className="zone-properties-container">
+      <div className="header">
+        <RenameInput value="Selected Zone Name" />
+      </div>
+      <Vector3Input onChange={()=>{}} header="Target"/>
+      <Vector3Input onChange={()=>{}} header="Position"/>
+    </div>
+  );
+};
+
+export default ZoneProperties;

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

@@ -28,7 +28,7 @@ const DropList: React.FC<DropListProps> = ({ val }) => {
         }}
       >
         {val.pathName}
-        <div className="arrow-container">
+        <div className={`arrow-container${openDrop ? " active" : ""}`}>
           <ArrowIcon />
         </div>
       </div>
@@ -87,8 +87,9 @@ const Simulations: React.FC = () => {
               {productsList.map((action, index) => (
                 <div
                   key={index}
-                  className={`list-item ${selectedItem === action ? "active" : ""
-                    }`}
+                  className={`list-item ${
+                    selectedItem === action ? "active" : ""
+                  }`}
                 >
                   <div
                     className="value"