integrated asset properties in builder

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">