Added market place

app/src/components/ui/componets/Panel.tsx

@@ -65,7 +65,7 @@ const Panel: React.FC<PanelProps> = ({
           return {
             width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
               }px)`,
-            height: `${panelSize - 5}px`,
+            height: `${panelSize - 2}px`,
             left: leftActive ? `${panelSize}px` : "0",
             right: rightActive ? `${panelSize}px` : "0",
             [side]: "0",
@@ -73,7 +73,7 @@ const Panel: React.FC<PanelProps> = ({
         case "left":
         case "right":
           return {
-            width: `${panelSize - 5}px`,
+            width: `${panelSize - 2}px`,
             height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
               }px)`,
             top: topActive ? `${panelSize}px` : "0",

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -44,56 +44,56 @@ const RealTimeVisulization: React.FC = () => {
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
-  useEffect(() => {
+  // useEffect(() => {
-    async function GetZoneData() {
+  //   async function GetZoneData() {
-      try {
+  //     try {
-        const response: { data: Zone[] } | undefined = await getZonesApi(
+  //       const response: { data: Zone[] } | undefined = await getZonesApi(
-          "hexrfactory"
+  //         "hexrfactory"
-        );
+  //       );
 
-        if (!response || !response.data) {
+  //       if (!response || !response.data) {
-          return;
+  //         return;
-        }
+  //       }
-        const formattedData = response?.data?.reduce<FormattedZoneData>(
+  //       const formattedData = response?.data?.reduce<FormattedZoneData>(
-          (acc, zone) => {
+  //         (acc, zone) => {
-            acc[zone.zoneName] = {
+  //           acc[zone.zoneName] = {
-              activeSides: [],
+  //             activeSides: [],
-              panelOrder: [],
+  //             panelOrder: [],
-              lockedPanels: [],
+  //             lockedPanels: [],
-              zoneCentrePoint: [],
+  //             zoneCentrePoint: [],
-              widgets: [],
+  //             widgets: [],
-            };
+  //           };
-            return acc;
+  //           return acc;
-          },
+  //         },
-          {}
+  //         {}
-        );
+  //       );
-        setZonesData(formattedData);
+  //       setZonesData(formattedData);
-      } catch (error) { }
+  //     } catch (error) { }
-    }
+  //   }
-    GetZoneData();
+  //   GetZoneData();
-  }, []);
+  // }, []);
 
   useEffect(() => {
 
     console.log('zonesData: ', zonesData);
   }, [zonesData]);
 
-  useEffect(() => {
+  // useEffect(() => {
-    setZonesData((prev) => {
+  //   setZonesData((prev) => {
-      if (!selectedZone) return prev;
+  //     if (!selectedZone) return prev;
 
-      return {
+  //     return {
-        ...prev,
+  //       ...prev,
-        [selectedZone.zoneName]: {
+  //       [selectedZone.zoneName]: {
-          ...prev[selectedZone.zoneName], // Keep existing properties
+  //         ...prev[selectedZone.zoneName], // Keep existing properties
-          activeSides: selectedZone.activeSides || [],
+  //         activeSides: selectedZone.activeSides || [],
-          panelOrder: selectedZone.panelOrder || [],
+  //         panelOrder: selectedZone.panelOrder || [],
-          lockedPanels: selectedZone.lockedPanels || [],
+  //         lockedPanels: selectedZone.lockedPanels || [],
-          widgets: selectedZone.widgets || [],
+  //         widgets: selectedZone.widgets || [],
-        },
+  //       },
-      };
+  //     };
-    });
+  //   });
-  }, [selectedZone]);
+  // }, [selectedZone]);
 
   return (
     <div