integrated asset properties in builder

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

@@ -12,7 +12,6 @@ const Header: React.FC = () => {
   const guestUsers: ActiveUser[] = activeUsers.filter(
     (user: ActiveUser) => user.userName !== userName
   );
-  console.log('guestUsers: ', guestUsers);
 
   return (
     <div className="header-container">

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

@@ -14,7 +14,10 @@ import ConveyorMechanics from "./mechanics/ConveyorMechanics";
 import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
-import { useSelectedActionSphere } from "../../../store/store";
+import {
+  useSelectedActionSphere,
+  useselectedFloorItem,
+} from "../../../store/store";
 import GlobalProperties from "./properties/GlobalProperties";
 import AsstePropertiies from "./properties/AssetProperties";
 import ZoneProperties from "./properties/ZoneProperties";
@@ -25,6 +28,7 @@ const SideBarRight: React.FC = () => {
   const { toggleUI } = useToggleStore();
   const { selectedActionSphere } = useSelectedActionSphere();
   const { subModule, setSubModule } = useSubModuleStore();
+  const { selectedFloorItem } = useselectedFloorItem();
   // Reset activeList whenever activeModule changes
   useEffect(() => {
     if (activeModule !== "simulation") setSubModule("properties");
@@ -38,8 +42,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 +53,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"} />
@@ -75,12 +83,21 @@ const SideBarRight: React.FC = () => {
       {/* process builder */}
       {toggleUI &&
         subModule === "properties" &&
-        activeModule !== "visualization" && (
+        activeModule !== "visualization" &&
+        !selectedFloorItem && (
           <div className="sidebar-right-container">
             <div className="sidebar-right-content-container">
               <GlobalProperties />
-              {/* <ZoneProperties /> */}
-              {/* <AsstePropertiies /> */}
+            </div>
+          </div>
+        )}
+      {toggleUI &&
+        subModule === "properties" &&
+        activeModule !== "visualization" &&
+        selectedFloorItem && (
+          <div className="sidebar-right-container">
+            <div className="sidebar-right-content-container">
+              <AsstePropertiies />
             </div>
           </div>
         )}
@@ -89,9 +106,7 @@ const SideBarRight: React.FC = () => {
         activeModule === "builder" && (
           <div className="sidebar-right-container">
             <div className="sidebar-right-content-container">
-              {/* <GlobalProperties /> */}
               <ZoneProperties />
-              {/* <AsstePropertiies /> */}
             </div>
           </div>
         )}
@@ -99,20 +114,24 @@ const SideBarRight: React.FC = () => {
 
       {toggleUI && activeModule === "simulation" && (
         <>
-          {subModule === "mechanics" && selectedActionSphere && selectedActionSphere.path.type === "Conveyor" && (
-            <div className="sidebar-right-container">
-              <div className="sidebar-right-content-container">
-                <ConveyorMechanics />
+          {subModule === "mechanics" &&
+            selectedActionSphere &&
+            selectedActionSphere.path.type === "Conveyor" && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <ConveyorMechanics />
+                </div>
               </div>
-            </div>
-          )}
-          {subModule === "mechanics" && selectedActionSphere && selectedActionSphere.path.type === "Vehicle" && (
-            <div className="sidebar-right-container">
-              <div className="sidebar-right-content-container">
-                <VehicleMechanics />
+            )}
+          {subModule === "mechanics" &&
+            selectedActionSphere &&
+            selectedActionSphere.path.type === "Vehicle" && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <VehicleMechanics />
+                </div>
               </div>
-            </div>
-          )}
+            )}
           {subModule === "mechanics" && !selectedActionSphere && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">

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

@@ -4,12 +4,16 @@ interface PositionInputProps {
   onChange: (value: string) => void; // Callback for value change
   placeholder?: string; // Optional placeholder
   type?: string; // Input type (e.g., text, number, email)
+  value1?: number;
+  value2?: number;
 }
 
 const PositionInput: React.FC<PositionInputProps> = ({
   onChange,
   placeholder = "Enter value", // Default placeholder
   type = "number", // Default type
+  value1 = "number",
+  value2 = "number",
 }) => {
   return (
     <div className="custom-input-container">
@@ -22,6 +26,7 @@ const PositionInput: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            value={value2}
           />
         </div>
         <div className="input-container">
@@ -31,6 +36,7 @@ const PositionInput: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            value={value1}
           />
         </div>
       </div>

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

@@ -4,17 +4,19 @@ interface RotationInputProps {
   onChange: (value: string) => void; // Callback for value change
   placeholder?: string; // Optional placeholder
   type?: string; // Input type (e.g., text, number, email)
+  value?: number;
 }
 
 const RotationInput: React.FC<RotationInputProps> = ({
   onChange,
   placeholder = "Enter value", // Default placeholder
   type = "number", // Default type
+  value = "number",
 }) => {
   return (
     <div className="custom-input-container">
       <div className="header">Rotation</div>
-      <div className="inputs-container"  style={{display: "block"}}>
+      <div className="inputs-container" style={{ display: "block" }}>
         <div className="input-container">
           <div className="custom-input-label">Rotate : </div>
           <input
@@ -22,6 +24,7 @@ const RotationInput: React.FC<RotationInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            value={value}
           />
         </div>
       </div>

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

@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import { RemoveIcon } from "../../../icons/ExportCommonIcons";
 import PositionInput from "../customInput/PositionInputs";
 import RotationInput from "../customInput/RotationInput";
+import { useselectedFloorItem } from "../../../../store/store";
+import * as THREE from "three";
 
 interface UserData {
   id: number; // Unique identifier for the user data
@@ -14,7 +16,13 @@ interface UserData {
 const AssetProperties: React.FC = () => {
   const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
   const [nextId, setNextId] = useState(1); // Unique ID for new entries
+  const { selectedFloorItem } = useselectedFloorItem();
+  let xValue = selectedFloorItem.position.x;
+  let zValue = selectedFloorItem.position.z;
+  let rotationRad = selectedFloorItem.rotation.y;
+  let rotationDeg = THREE.MathUtils.radToDeg(rotationRad);
 
+  // useEffect(() => {}, [selectedFloorItem]);
   // Function to handle adding new user data
   const handleAddUserData = () => {
     const newUserData: UserData = {
@@ -45,12 +53,16 @@ const AssetProperties: React.FC = () => {
   return (
     <div className="asset-properties-container">
       {/* Name */}
-      <div className="header">Selected Object</div>
+      <div className="header">{selectedFloorItem.userData.name}</div>
 
       <div className="split"></div>
 
-      <PositionInput onChange={() => { }} />
-      <RotationInput onChange={() => { }} />
+      <PositionInput
+        onChange={() => {}}
+        value1={xValue.toFixed(5)}
+        value2={zValue.toFixed(5)}
+      />
+      <RotationInput onChange={() => {}} value={rotationDeg} />
 
       <div className="split"></div>