added api to fetch data

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');

app/src/modules/market/Card.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import {
+  CommentsIcon,
+  DownloadIcon,
+  EyeIconBig,
+  StarsIconSmall,
+  VerifiedIcon,
+} from "../../components/icons/marketPlaceIcons";
+
+import assetImage from "../../assets/image/image.png";
+const Card: React.FC = () => {
+  return (
+    <div className="card-container">
+      <div className="icon">
+        <DownloadIcon />
+      </div>
+      <div className="image-container">
+        <img src={assetImage} alt="" />
+      </div>
+      <div className="assets-container">
+        <div className="name-container">
+          <div className="asstes-container">Asset name</div>
+          <div className="assets-date">Uploaded on-12 Jan 23</div>
+        </div>
+        <div className="details">
+          <div className="content">
+            <EyeIconBig />
+            1.5k
+          </div>
+          <div className="content">
+            <CommentsIcon />
+            32
+          </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>
+      </div>
+      <div className="buy-now-button">Buy now</div>
+    </div>
+  );
+};
+
+export default Card;

app/src/modules/market/CardsContainer.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import Card from "./Card";
+
+const CardsContainer: React.FC = () => {
+  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  return (
+    <div className="cards-container-container">
+      <div className="header">Products You May Like</div>
+      <div className="cards-wrapper-container">
+        {array.map((index) => (
+          <Card key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CardsContainer;

app/src/modules/market/FilterSearch.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+// import RegularDropDown from "./ui/inputs/RegularDropDown";
+
+import Search from "../../components/ui/inputs/Search";
+import { StarsIcon } from "../../components/icons/marketPlaceIcons";
+import RegularDropDown from "../../components/ui/inputs/RegularDropDown";
+
+const FilterSearch: React.FC = () => {
+  const [activeOption, setActiveOption] = useState("Sort by"); // State for active option
+
+  const handleSelect = (option: string) => {
+    setActiveOption(option);
+  };
+  return (
+    <div className="filter-search-container">
+      <Search onChange={() => {}} />
+      <RegularDropDown
+        header={activeOption}
+        options={["Alphabet ascending", "Alphabet descending", ""]}
+        onSelect={handleSelect}
+        search={false}
+      />
+      <div className="button">Free</div>
+      <div className="button">Animated</div>
+      <div className="rating-container">
+        <div className="label">Rating</div>
+        <div className="stars">
+          <StarsIcon />
+          <StarsIcon />
+          <StarsIcon />
+          <StarsIcon />
+          <StarsIcon />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilterSearch;

app/src/modules/market/MarketPlace.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import FilterSearch from "./FilterSearch";
+import CardsContainer from "./CardsContainer";
+
+const MarketPlace = () => {
+  return (
+    <div className="marketplace-wrapper">
+      <div className="marketplace-container">
+        <div className="marketPlace">
+          <FilterSearch />
+          <CardsContainer />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MarketPlace;