Added drag and drop widgets, and zone datas

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

@@ -5,68 +5,91 @@ import AddButtons from "./AddButtons";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
+import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
+
 
 type Side = "top" | "bottom" | "left" | "right";
 
-interface Widget {
+type FormattedZoneData = Record<
+  string,
+  {
+    activeSides: Side[];
+    panelOrder: Side[];
+    lockedPanels: Side[];
+    zoneCentrePoint: number[];
+    widgets: Widget[];
+  }
+>;
+type Widget = {
   id: string;
   type: string;
   title: string;
   panel: Side;
   data: any;
-}
+};
+type Zone = {
+  zoneId: string;
+  zoneName: string;
+  points: number[][];
+  layer: number;
+};
 
 const RealTimeVisulization: React.FC = () => {
   const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
-  const [zonesData, setZonesData] = useState<{
-    [key: string]: {
-      activeSides: Side[];
-      panelOrder: Side[];
-      lockedPanels: Side[];
-      widgets: Widget[];
-    };
-  }>({
-    "Manufacturing unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Assembly unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Packing unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    Warehouse: {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    Inventory: {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-  });
-
   const { isPlaying } = usePlayButtonStore();
-
+  const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+
   useEffect(() => {
-    setZonesData((prev) => ({
-      ...prev,
-      [selectedZone.zoneName]: selectedZone,
-    }));
+    async function GetZoneData() {
+      try {
+        const response: { data: Zone[] } | undefined = await getZonesApi(
+          "hexrfactory"
+        );
+
+        if (!response || !response.data) {
+          return;
+        }
+        const formattedData = response?.data?.reduce<FormattedZoneData>(
+          (acc, zone) => {
+            acc[zone.zoneName] = {
+              activeSides: [],
+              panelOrder: [],
+              lockedPanels: [],
+              zoneCentrePoint: [],
+              widgets: [],
+            };
+            return acc;
+          },
+          {}
+        );
+        setZonesData(formattedData);
+      } catch (error) { }
+    }
+    GetZoneData();
+  }, []);
+
+  useEffect(() => {
+
+    console.log('zonesData: ', zonesData);
+  }, [zonesData]);
+
+  useEffect(() => {
+    setZonesData((prev) => {
+      if (!selectedZone) return prev;
+
+      return {
+        ...prev,
+        [selectedZone.zoneName]: {
+          ...prev[selectedZone.zoneName], // Keep existing properties
+          activeSides: selectedZone.activeSides || [],
+          panelOrder: selectedZone.panelOrder || [],
+          lockedPanels: selectedZone.lockedPanels || [],
+          widgets: selectedZone.widgets || [],
+        },
+      };
+    });
   }, [selectedZone]);
 
   return (