added market placeCards

2025-03-26 12:32:09 +05:30 · 2025-03-26 12:32:09 +05:30 · 9a358bc1c0
parent b585e74fcb 6971fff571
commit 9a358bc1c0
23 changed files with 967 additions and 671 deletions
--- a/app/.gitignore
+++ b/app/.gitignore
@ -2,6 +2,7 @@

 # dependencies
 /node_modules
+/package-lock.json
 /.pnp
 .pnp.js

--- a/app/src/assets/image/image.png
+++ b/app/src/assets/image/image.png
--- a/app/src/components/icons/RealTimeVisulationIcons.tsx
+++ b/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 offset="1" stop-color="#FBD8B8" />
+          <stop stopColor="#31B2B9" />
+          <stop offset="1" stopColor="#FBD8B8" />
        </linearGradient>
        <clipPath id="clip0_3050_69519">
          <rect
--- a/app/src/components/icons/marketPlaceIcons.tsx
+++ b/app/src/components/icons/marketPlaceIcons.tsx
@ -44,23 +44,23 @@ export function DownloadIcon() {
 export function EyeIconBig() {
  return (
    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M2.5 11.875C2.84518 11.875 3.125 12.1548 3.125 12.5C3.125 13.6962 3.12633 14.5304 3.21096 15.1599C3.29317 15.7714 3.44354 16.0952 3.67418 16.3258C3.90481 16.5565 4.22863 16.7068 4.8401 16.7891C5.46956 16.8737 6.30383 16.875 7.5 16.875H12.5C13.6962 16.875 14.5304 16.8737 15.1599 16.7891C15.7714 16.7068 16.0952 16.5565 16.3258 16.3258C16.5565 16.0952 16.7068 15.7714 16.7891 15.1599C16.8737 14.5304 16.875 13.6962 16.875 12.5C16.875 12.1548 17.1548 11.875 17.5 11.875C17.8452 11.875 18.125 12.1548 18.125 12.5V12.5458C18.125 13.6854 18.125 14.604 18.0279 15.3265C17.9271 16.0766 17.7113 16.7081 17.2097 17.2097C16.7081 17.7113 16.0766 17.9271 15.3265 18.0279C14.604 18.125 13.6854 18.125 12.5458 18.125H7.45428C6.31462 18.125 5.39602 18.125 4.67354 18.0279C3.92345 17.9271 3.29189 17.7113 2.79029 17.2097C2.28869 16.7081 2.07295 16.0766 1.9721 15.3265C1.87497 14.604 1.87498 13.6854 1.875 12.5458C1.875 12.5305 1.875 12.5152 1.875 12.5C1.875 12.1548 2.15483 11.875 2.5 11.875Z"
-        fill="#FCFDFD"
+        d="M2.75 11.918C6.05 4.58464 15.95 4.58464 19.25 11.918"
+        stroke="#2B3344"
+        stroke-linecap="round"
+        stroke-linejoin="round"
      />
      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M10.0003 13.9583C10.1758 13.9583 10.3432 13.8846 10.4616 13.7551L13.7949 10.1093C14.0278 9.8545 14.0102 9.45917 13.7554 9.22625C13.5007 8.99333 13.1053 9.011 12.8724 9.26575L10.6253 11.7235V2.5C10.6253 2.15483 10.3455 1.875 10.0003 1.875C9.65516 1.875 9.37533 2.15483 9.37533 2.5V11.7235L7.12827 9.26575C6.89535 9.011 6.50002 8.99333 6.24527 9.22625C5.99052 9.45917 5.97281 9.8545 6.20573 10.1093L9.53908 13.7551C9.65749 13.8846 9.82483 13.9583 10.0003 13.9583Z"
-        fill="#FCFDFD"
+        d="M11 15.5859C10.6389 15.5859 10.2813 15.5148 9.94762 15.3766C9.61398 15.2384 9.31082 15.0358 9.05546 14.7805C8.80009 14.5251 8.59753 14.222 8.45933 13.8883C8.32113 13.5547 8.25 13.1971 8.25 12.8359C8.25 12.4748 8.32113 12.1172 8.45933 11.7836C8.59753 11.4499 8.80009 11.1468 9.05546 10.8914C9.31082 10.636 9.61398 10.4335 9.94762 10.2953C10.2813 10.1571 10.6389 10.0859 11 10.0859C11.7293 10.0859 12.4288 10.3757 12.9445 10.8914C13.4603 11.4071 13.75 12.1066 13.75 12.8359C13.75 13.5653 13.4603 14.2648 12.9445 14.7805C12.4288 15.2962 11.7293 15.5859 11 15.5859Z"
+        stroke="#2B3344"
+        stroke-linecap="round"
+        stroke-linejoin="round"
      />
    </svg>
  );
--- a/app/src/components/layout/sidebarLeft/Header.tsx
+++ b/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 />
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
-import useModuleStore from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
 import {
  AnalysisIcon,
  MechanicsIcon,
@ -14,15 +16,19 @@ 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 ZoneProperties from "./properties/ZoneProperties";

 const SideBarRight: React.FC = () => {
  const { activeModule } = useModuleStore();
-  const [activeList, setActiveList] = useState("properties");
+  const [activeList] = useState("properties");
  const { toggleUI } = useToggleStore();
-
+  const { selectedActionSphere } = useSelectedActionSphere();
+  const { subModule, setSubModule } = useSubModuleStore();
  // Reset activeList whenever activeModule changes
  useEffect(() => {
-    setActiveList("properties");
+    if (activeModule !== "simulation") setSubModule("properties");
+    if (activeModule === "simulation") setSubModule("mechanics");
  }, [activeModule]);

  return (
@ -30,37 +36,39 @@ const SideBarRight: React.FC = () => {
      <Header />
      {toggleUI && (
        <div className="sidebar-actions-container">
+          {/* {activeModule === "builder" && ( */}
          <div
            className={`sidebar-action-list ${
-              activeList === "properties" ? "active" : ""
+              subModule === "properties" ? "active" : ""
            }`}
-            onClick={() => setActiveList("properties")}
+            onClick={() => setSubModule("properties")}
          >
-            <PropertiesIcon isActive={activeList === "properties"} />
+            <PropertiesIcon isActive={subModule === "properties"} />
          </div>
+          {/* )} */}
          {activeModule === "simulation" && (
            <>
              <div
                className={`sidebar-action-list ${
-                  activeList === "mechanics" ? "active" : ""
+                  subModule === "mechanics" ? "active" : ""
                }`}
-                onClick={() => setActiveList("mechanics")}
+                onClick={() => setSubModule("mechanics")}
              >
                <MechanicsIcon isActive={activeList === "mechanics"} />
              </div>
              <div
                className={`sidebar-action-list ${
-                  activeList === "simulations" ? "active" : ""
+                  subModule === "simulations" ? "active" : ""
                }`}
-                onClick={() => setActiveList("simulations")}
+                onClick={() => setSubModule("simulations")}
              >
                <SimulationIcon isActive={activeList === "simulations"} />
              </div>
              <div
                className={`sidebar-action-list ${
-                  activeList === "analysis" ? "active" : ""
+                  subModule === "analysis" ? "active" : ""
                }`}
-                onClick={() => setActiveList("analysis")}
+                onClick={() => setSubModule("analysis")}
              >
                <AnalysisIcon isActive={activeList === "analysis"} />
              </div>
@ -75,6 +83,7 @@ const SideBarRight: React.FC = () => {
          <div className="sidebar-right-container">
            <div className="sidebar-right-content-container">
              <GlobalProperties />
+              {/* <ZoneProperties /> */}
              {/* <AsstePropertiies /> */}
            </div>
          </div>
@ -84,14 +93,21 @@ const SideBarRight: React.FC = () => {

      {toggleUI && activeModule === "simulation" && (
        <>
-          {activeList === "mechanics" && (
+          {subModule === "mechanics" && selectedActionSphere && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
                <MachineMechanics />
              </div>
            </div>
          )}
-          {activeList === "analysis" && (
+          {subModule === "mechanics" && !selectedActionSphere && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                <MachineMechanics />
+              </div>
+            </div>
+          )}
+          {subModule === "analysis" && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
                <Analysis />
--- a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
+++ b/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,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"
                      : ""
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/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;
--- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
+++ b/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
--- a/app/src/components/ui/ModuleToggle.tsx
+++ b/app/src/components/ui/ModuleToggle.tsx
@ -6,17 +6,20 @@ import {
  SimulationIcon,
  VisualizationIcon,
 } from "../icons/ExportModuleIcons";
-import { usePlayButtonStore } from "../../store/usePlayButtonStore";
+import useToggleStore from "../../store/useUIToggleStore";

 const ModuleToggle: React.FC = () => {
  const { activeModule, setActiveModule } = useModuleStore();
-  const { isPlaying, setIsPlaying } = usePlayButtonStore();
+  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"} />
@ -25,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"} />
@ -36,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"} />
@ -45,7 +54,10 @@ const ModuleToggle: React.FC = () => {
      </div>
      <div
        className={`module-list ${activeModule === "market" && "active"}`}
-        onClick={() => setActiveModule("market")}
+        onClick={() => {
+          setActiveModule("market");
+          setToggleUI(false);
+        }}
      >
        <div className="icon">
          <CartIcon isActive={activeModule === "market"} />
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/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(() => {
@ -73,18 +75,32 @@ const RealTimeVisulization: React.FC = () => {
    <div
      ref={containerRef}
      id="real-time-vis-canvas"
-      className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
+      className="realTime-viz canvas"
      style={{
-        height: isPlaying ? "100vh" : "",
-        left: isPlaying ? "0%" : "",
+        height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+        width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+        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}
+            setSelectedZone={setSelectedZone}
+          />
+
          {!isPlaying && (
            <AddButtons
              hiddenPanels={hiddenPanels}
@ -93,16 +109,14 @@ const RealTimeVisulization: React.FC = () => {
              setSelectedZone={setSelectedZone}
            />
          )}
-      <DisplayZone
-        zonesData={zonesData}
-        selectedZone={selectedZone}
-        setSelectedZone={setSelectedZone}
-      />
+
          <Panel
            selectedZone={selectedZone}
-        hiddenPanels={hiddenPanels}
            setSelectedZone={setSelectedZone}
-      />{" "}
+            hiddenPanels={hiddenPanels}
+          />
+        </>
+      )}
    </div>
  );
 };
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
@ -128,6 +128,25 @@ const ZoneGroup: React.FC = () => {
        const userId = localStorage.getItem('userId');
        const organization = (email!.split("@")[1]).split(".")[0];

+        const calculateCenter = (points: number[][]) => {
+            if (!points || points.length === 0) return null;
+
+            let sumX = 0, sumY = 0, sumZ = 0;
+            const numPoints = points.length;
+
+            points.forEach(([x, y, z]) => {
+                sumX += x;
+                sumY += y;
+                sumZ += z;
+            });
+
+            return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number];
+        };
+
+        const target: [number, number, number] | null = calculateCenter(zone.points);
+        if (!target) return;
+        const position = [target[0], 75, target[2]];
+
        const input = {
            userId: userId,
            organization: organization,
@ -135,6 +154,8 @@ const ZoneGroup: React.FC = () => {
                zoneName: zone.zoneName,
                zoneId: zone.zoneId,
                points: zone.points,
+                viewPortCenter: target,
+                viewPortposition: position,
                layer: zone.layer
            }
        }
@ -148,6 +169,25 @@ const ZoneGroup: React.FC = () => {
        const userId = localStorage.getItem('userId');
        const organization = (email!.split("@")[1]).split(".")[0];

+        const calculateCenter = (points: number[][]) => {
+            if (!points || points.length === 0) return null;
+
+            let sumX = 0, sumY = 0, sumZ = 0;
+            const numPoints = points.length;
+
+            points.forEach(([x, y, z]) => {
+                sumX += x;
+                sumY += y;
+                sumZ += z;
+            });
+
+            return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number];
+        };
+
+        const target: [number, number, number] | null = calculateCenter(zone.points);
+        if (!target) return;
+        const position = [target[0], 75, target[2]];
+
        const input = {
            userId: userId,
            organization: organization,
@ -155,6 +195,8 @@ const ZoneGroup: React.FC = () => {
                zoneName: zone.zoneName,
                zoneId: zone.zoneId,
                points: zone.points,
+                viewPortCenter: target,
+                viewPortposition: position,
                layer: zone.layer
            }
        }
@ -162,6 +204,7 @@ const ZoneGroup: React.FC = () => {
        socket.emit('v2:zone:set', input);
    };

+
    const deleteZoneFromBackend = async (zoneId: string) => {

        const email = localStorage.getItem('email');
--- a/app/src/modules/market/Card.tsx
+++ b/app/src/modules/market/Card.tsx
@ -7,6 +7,7 @@ import {
  VerifiedIcon,
 } from "../../components/icons/marketPlaceIcons";

+import assetImage from "../../assets/image/image.png";
 const Card: React.FC = () => {
  return (
    <div className="card-container">
@ -14,7 +15,7 @@ const Card: React.FC = () => {
        <DownloadIcon />
      </div>
      <div className="image-container">
-        <img src="" alt="" />
+        <img src={assetImage} alt="" />
      </div>
      <div className="assets-container">
        <div className="name-container">
@ -32,11 +33,18 @@ const Card: React.FC = () => {
          </div>
        </div>
      </div>
+
      <div className="vendor-icon">
        HEXR FACTORY <VerifiedIcon />
      </div>
      <div className="stars-container">
+        <div className="stars-wrapper">
          <StarsIconSmall />
+          <StarsIconSmall />
+          <StarsIconSmall />
+          <StarsIconSmall />
+          <StarsIconSmall />
+        </div>
        <div className="units">
          ₹ 36,500/<span>unit</span>
        </div>
--- a/app/src/modules/market/MarketPlace.tsx
+++ b/app/src/modules/market/MarketPlace.tsx
@ -4,10 +4,14 @@ import CardsContainer from "./CardsContainer";

 const MarketPlace = () => {
  return (
+    <div className="marketplace-wrapper">
+      <div className="marketplace-container">
        <div className="marketPlace">
          <FilterSearch />
          <CardsContainer />
        </div>
+      </div>
+    </div>
  );
 };

--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@ -23,8 +23,8 @@ const Project: React.FC = () => {
  let navigate = useNavigate();
  const { activeModule } = useModuleStore();

-  const { userName, setUserName } = useUserName();
-  const { organization, setOrganization } = useOrganization();
+  const { setUserName } = useUserName();
+  const { setOrganization } = useOrganization();
  const { setFloorItems } = useFloorItems();
  const { setWallItems } = useWallItems();
  const { setZones } = useZones();
@ -50,24 +50,17 @@ const Project: React.FC = () => {

  return (
    <div className="project-main">
-      {!isPlaying && <ModuleToggle />}
-      {!isPlaying && <SideBarLeft />}
-      {!isPlaying && <SideBarRight />}
-      {activeModule === "visualization" && <RealTimeVisulization />}
-      {activeModule === "market" && <MarketPlace />}
-      {/* {activeModule !== "visualization" && <Scene />} */}
-      <Tools />
-
-      {/* <Scene /> */}
-      {/* <SimulationUI /> */}
-      <div
-        className="canvas-container"
-        style={{ height: "100vh", width: "100vw" }}
-      >
-        {activeModule !== "visualization" && activeModule !== "market" && (
-          <Scene />
+      {!isPlaying && (
+        <>
+          <ModuleToggle />
+          <SideBarLeft />
+          <SideBarRight />
+        </>
      )}
-      </div>
+      {activeModule === "market" && <MarketPlace />}
+      <RealTimeVisulization />
+      {activeModule !== "market" && <Tools />}
+      {/* <SimulationUI /> */}
    </div>
  );
 };
--- a/app/src/pages/UserAuth.tsx
+++ b/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>
--- a/app/src/store/useModuleStore.ts
+++ b/app/src/store/useModuleStore.ts
@ -6,7 +6,7 @@ interface ModuleStore {
 }

 const useModuleStore = create<ModuleStore>((set) => ({
-  activeModule: "market", // Initial state
+  activeModule: "builder", // Initial state
  setActiveModule: (module) => set({ activeModule: module }), // Update state
 }));

--- a/app/src/styles/components/marketPlace/marketPlace.scss
+++ b/app/src/styles/components/marketPlace/marketPlace.scss
@ -1,32 +1,51 @@
@use "../../abstracts/variables" as *;
@use "../../abstracts/mixins.scss" as *;

+.marketplace-wrapper {
+    height: 100vh;
+    width: 100vw;
+    z-index: #{$z-index-marketplace};
+    background-color: var(--background-color-secondary);
+    position: absolute;
+    left: 0;
+    padding: 100px 50px;
+
+    .marketplace-container {
+        padding: 20px 2px;
+        height: calc(100vh - 120px);
+        background-color: var(--background-color);
+        box-shadow: #{$box-shadow-medium};
+        border-radius: #{$border-radius-extra-large};
+    }

    .marketPlace {
-    width: calc((100vw) - (320px + 270px + 100px));
-    background-color: #FCFDFD;
-    position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        left: calc(120px / 2);
        top: 100px;
-    left: calc(240px + 45px);
        padding: 14px;
+        padding-bottom: 60px;
        display: flex;
        flex-direction: column;
        gap: 24px;

        .filter-search-container {
+            width: 100%;
            display: flex;
            align-items: center;
            gap: 12px;

            .search-wrapper {
-            min-width: 40%;
-
-            width: 684px;
+                min-width: 60%;
+                max-width: 684px;
                padding: 0;
+                border-radius: $border-radius-large ;

                .search-container {
                    border: none !important;
-                box-shadow: 0px 2px 10.5px 0px #0000000D;
+                    box-shadow: $box-shadow-medium;
+                    border-radius: $border-radius-large ;

                    input {
                        border: none !important;
@ -60,6 +79,11 @@
        }

        .cards-container-container {
+            padding: 0px 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+
            .header {
                color: var(--text-color);
                font-weight: $medium-weight;
@ -67,14 +91,22 @@
            }

            .cards-wrapper-container {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 28px;
+
                .card-container {
-                width: 316px;
-                height: 309px;
+                    width: calc(25% - 23px);
                    border-radius: 18px;
                    padding: 12px;
                    box-shadow: 0px 2px 10.5px 0px #0000000D;
                    border: 1px solid var(--background-accent-transparent, #E0DFFF80);
                    position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    gap: 6px;
+
                    .icon {
                        position: absolute;
                        top: 12px;
@ -85,6 +117,70 @@
                        padding: 5px;
                        background-color: var(--accent-color);
                    }
+
+                    .image-container {
+                        width: 100%;
+                        display: flex;
+                        justify-content: center;
+                    }
+
+                    .assets-container {
+                        display: flex;
+                        justify-content: space-between;
+
+                        .name-container {
+                            display: flex;
+                            flex-direction: column;
+                            gap: 3px;
+
+                            .asstes-container {
+                                font-weight: #{$bold-weight};
+                                font-size: $regular ;
+                            }
+
+                            .assets-date {
+                                color: var(--accent-color);
+                                font-size: $small;
+                            }
+                        }
+
+                        .details {
+                            display: flex;
+                            align-items: center;
+                            gap: 10px;
+
+                            .content {
+                                display: flex;
+                                align-items: center;
+                                gap: 6px;
+                            }
+                        }
+                    }
+
+                    .vendor-icon {
+
+                        font-weight: #{$bold-weight};
+                        font-size: $regular ;
+                    }
+
+                    .stars-container {
+                        display: flex;
+                        justify-content: space-between;
+                    }
+
+                    .buy-now-button {
+                        width: 100%;
+                        background-color: var(--background-color-secondary);
+                        border-radius: $border-radius-extra-large ;
+                        padding: 8px 0;
+                        @include flex-center;
+                        color: var(--accent-color);
+
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
+                }
            }
        }
    }
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@ -14,8 +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;
--- a/app/src/styles/layout/sidebar.scss
+++ b/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;
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@ -6,22 +6,20 @@
  background-color: var(--background-color);
  border-radius: 20px;
  box-shadow: $box-shadow-medium;
-  width: 100%;
-  height: 100%;
+  width: calc(100% - (320px + 270px + 90px));
+  height: calc(100% - (200px + 80px));
  position: absolute;
-  top: 0;
-  left: 0;
-  transform: scale(1);
+  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 {
-    width: 100%;
-    height: 100%;
-
-    canvas {
-      width: 100vw !important;
-      height: 100% !important;
-
-    }
+    overflow: hidden;
  }
+
  // Panels
  .panel {
    position: absolute;
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,6 @@
+{
+  "name": "Dwinzo_dev",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}