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

app/src/components/icons/RealTimeVisulationIcons.tsx

@@ -107,7 +107,7 @@ export function StockIncreseIcon() {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_3050_69519)">
+      <g clipPath="url(#clip0_3050_69519)">
         <path
           d="M7.80766 6.99219H1.17811C0.752382 6.99219 0.407227 7.33734 0.407227 7.76307C0.407227 8.18879 0.752382 8.53395 1.17811 8.53395H7.80766C8.23339 8.53395 8.57854 8.18879 8.57854 7.76307C8.57854 7.33733 8.23339 6.99219 7.80766 6.99219Z"
           fill="white"
@@ -142,8 +142,8 @@ export function StockIncreseIcon() {
           y2="8.53122"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#31B2B9" />
+          <stop stopColor="#31B2B9" />
-          <stop offset="1" stop-color="#FBD8B8" />
+          <stop offset="1" stopColor="#FBD8B8" />
         </linearGradient>
         <clipPath id="clip0_3050_69519">
           <rect

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,31 +36,37 @@ const SideBarRight: React.FC = () => {
       <Header />
       {toggleUI && (
         <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"} />
             </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")}
               >
@@ -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();
+  const { selectedActionSphere } = useSelectedActionSphere();
-  console.log('selectedActionSphere: ', selectedActionSphere);
+  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,7 +102,8 @@ 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"
                       : ""
@@ -146,7 +149,8 @@ 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"
                       : ""
@@ -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,7 +87,8 @@ const Simulations: React.FC = () => {
               {productsList.map((action, index) => (
                 <div
                   key={index}
-                  className={`list-item ${selectedItem === action ? "active" : ""
+                  className={`list-item ${
+                    selectedItem === action ? "active" : ""
                   }`}
                 >
                   <div

app/src/components/ui/ModuleToggle.tsx

@@ -6,15 +6,20 @@ import {
   SimulationIcon,
   VisualizationIcon,
 } from "../icons/ExportModuleIcons";
+import useToggleStore from "../../store/useUIToggleStore";
 
 const ModuleToggle: React.FC = () => {
   const { activeModule, setActiveModule } = useModuleStore();
+  const { setToggleUI } = useToggleStore();
 
   return (
     <div className="module-toggle-container">
       <div
         className={`module-list ${activeModule === "builder" && "active"}`}
-        onClick={() => setActiveModule("builder")}
+        onClick={() => {
+          setActiveModule("builder");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <BuilderIcon isActive={activeModule === "builder"} />
@@ -23,7 +28,10 @@ const ModuleToggle: React.FC = () => {
       </div>
       <div
         className={`module-list ${activeModule === "simulation" && "active"}`}
-        onClick={() => setActiveModule("simulation")}
+        onClick={() => {
+          setActiveModule("simulation");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <SimulationIcon isActive={activeModule === "simulation"} />
@@ -34,7 +42,10 @@ const ModuleToggle: React.FC = () => {
         className={`module-list ${
           activeModule === "visualization" && "active"
         }`}
-        onClick={() => setActiveModule("visualization")}
+        onClick={() => {
+          setActiveModule("visualization");
+          setToggleUI(true);
+        }}
       >
         <div className="icon">
           <VisualizationIcon isActive={activeModule === "visualization"} />
@@ -42,10 +53,11 @@ const ModuleToggle: React.FC = () => {
         <div className="module">Visualization</div>
       </div>
       <div
-        className={`module-list ${
+        className={`module-list ${activeModule === "market" && "active"}`}
-          activeModule === "market" && "active"
+        onClick={() => {
-        }`}
+          setActiveModule("market");
-        onClick={() => setActiveModule("market")}
+          setToggleUI(false);
+        }}
       >
         <div className="icon">
           <CartIcon isActive={activeModule === "market"} />

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -5,6 +5,7 @@ import AddButtons from "./AddButtons";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
+import useModuleStore from "../../../store/useModuleStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -60,6 +61,7 @@ const RealTimeVisulization: React.FC = () => {
   });
 
   const { isPlaying } = usePlayButtonStore();
+  const { activeModule } = useModuleStore();
 
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   useEffect(() => {
@@ -75,17 +77,23 @@ const RealTimeVisulization: React.FC = () => {
       id="real-time-vis-canvas"
       className="realTime-viz canvas"
       style={{
-        height: isPlaying ? "100vh" : "",
+        height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
-        width: isPlaying ? "100%" : "",
+        width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
-        left: isPlaying ? "0%" : "",
+        left: isPlaying || activeModule !== "visualization" ? "0%" : "",
       }}
     >
       <div
         className="scene-container"
-        style={{ height: "100%", width: "100%" }}
+        style={{
+          height: "100%",
+          width: "100%",
+          borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
+        }}
       >
         <Scene />
       </div>
+      {activeModule === "visualization" && (
+        <>
           <DisplayZone
             zonesData={zonesData}
             selectedZone={selectedZone}
@@ -101,7 +109,12 @@ const RealTimeVisulization: React.FC = () => {
             />
           )}
 
-      <Panel selectedZone={selectedZone} setSelectedZone={setSelectedZone} />
+          <Panel
+            selectedZone={selectedZone}
+            setSelectedZone={setSelectedZone}
+          />
+        </>
+      )}
     </div>
   );
 };

app/src/pages/Project.tsx

@@ -21,8 +21,8 @@ const Project: React.FC = () => {
   let navigate = useNavigate();
   const { activeModule } = useModuleStore();
 
-  const { userName, setUserName } = useUserName();
+  const { setUserName } = useUserName();
-  const { organization, setOrganization } = useOrganization();
+  const { setOrganization } = useOrganization();
   const { setFloorItems } = useFloorItems();
   const { setWallItems } = useWallItems();
   const { setZones } = useZones();
@@ -50,15 +50,13 @@ const Project: React.FC = () => {
       <ModuleToggle />
       <SideBarLeft />
       <SideBarRight />
-      {activeModule === "visualization" && <RealTimeVisulization />}
+      <RealTimeVisulization />
-      <Tools />
+      {activeModule !== "market" && <Tools />}
       {/* <SimulationUI /> */}
       <div
         className="canvas-container"
         style={{ height: "100vh", width: "100vw" }}
-      >
+      ></div>
-        {activeModule !== "visualization" && <Scene />}
-      </div>
     </div>
   );
 };

app/src/pages/UserAuth.tsx

@@ -141,7 +141,7 @@ const UserAuth: React.FC = () => {
           </div>
           {!isSignIn && (
             <div className="policy-checkbox">
-              <input type="checkbox" name="" id="" />
+              <input type="checkbox" name="" id="" required/>
               <div className="label">
                 I have read and agree to the terms of service
               </div>

app/src/styles/components/tools.scss

@@ -14,7 +14,7 @@
   width: fit-content;
   transition: width 0.2s;
   background-color: var(--background-color);
-  z-index: #{$z-index-tools};
+  z-index: #{$z-index-default};
   .split {
     height: 20px;
     width: 2px;

app/src/styles/layout/sidebar.scss

@@ -662,16 +662,30 @@
       .collapse-header-container {
         @include flex-space-between;
         padding-right: 12px;
+        margin-top: 8px;
+        border-top: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--border-color);
+        .header {
+          color: var(--accent-color);
+        }
       }
       .process-container {
+        padding: 0 12px;
+        margin: 6px 0;
         .value {
+          @include flex-space-between;
           .arrow-container {
+            height: 16px;
+            width: 16px;
           }
           .active {
+            rotate: 90deg;
           }
         }
         .children-drop {
           .value {
+            padding: 6px;
+            border-left: 1px solid var(--border-color);
           }
         }
       }
@@ -716,12 +730,16 @@
   }
   .global-properties-container,
   .analysis-main-container,
-  .asset-properties-container {
+  .asset-properties-container,
+  .zone-properties-container {
     .header {
       padding: 8px 12px;
       border-top: 1px solid var(--highlight-accent-color);
       border-bottom: 1px solid var(--highlight-accent-color);
       color: var(--accent-color);
+      .input-value {
+        color: inherit;
+      }
     }
     .input-container {
       @include flex-center;
@@ -759,7 +777,11 @@
     }
     .custom-input-container {
       .header {
+        @include flex-space-between;
         border: none;
+        .eyedrop-button {
+          @include flex-center;
+        }
       }
       .inputs-container {
         @include flex-space-between;

app/src/styles/pages/realTimeViz.scss

@@ -11,6 +11,13 @@
   top: 50%;
   left: calc(270px + 45px);
   transform: translate(0, -50%);
+  border-radius: #{$border-radius-medium};
+  transition: all 0.2s;
+  z-index: #{$z-index-default};
+
+  .scene-container {
+    overflow: hidden;
+  }
 
   .icon {
     display: flex;
@@ -180,7 +187,6 @@
       }
     }
 
-
     &.top-panel,
     &.bottom-panel {
       left: 0;