Update styles, add marketplace components, and enhance drag-and-drop functionality

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

@@ -12,20 +12,19 @@ import {
 import useToggleStore from "../../../store/useUIToggleStore";
 import MachineMechanics from "./mechanics/MachineMechanics";
 import Visualization from "./visualization/Visualization";
-import GlobalProperties from "./properties/GlobalProperties";
-import AsstePropertiies from "./properties/AssetProperties";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
 import { useSelectedActionSphere } from "../../../store/store";
+import GlobalProperties from "./properties/GlobalProperties";
+import AsstePropertiies from "./properties/AssetProperties";
 import ZoneProperties from "./properties/ZoneProperties";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
+  const { toggleUI } = useToggleStore();
   const { selectedActionSphere } = useSelectedActionSphere();
   const { subModule, setSubModule } = useSubModuleStore();
-  const { toggleUI } = useToggleStore();
-
-  // Reset subModule whenever activeModule changes
+  // Reset activeList whenever activeModule changes
   useEffect(() => {
     if (activeModule !== "simulation") setSubModule("properties");
     if (activeModule === "simulation") setSubModule("mechanics");
@@ -84,7 +83,17 @@ const SideBarRight: React.FC = () => {
             </div>
           </div>
         )}
-
+      {toggleUI &&
+        subModule === "zoneProperties" &&
+        activeModule === "builder" && (
+          <div className="sidebar-right-container">
+            <div className="sidebar-right-content-container">
+              {/* <GlobalProperties /> */}
+              <ZoneProperties />
+              {/* <AsstePropertiies /> */}
+            </div>
+          </div>
+        )}
       {/* simulation */}
 
       {toggleUI && activeModule === "simulation" && (