Added drag and drop widgets, and zone datas

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

@@ -152,21 +152,29 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   return (
     <div
       ref={containerRef}
-      className={`zoon-wrapper ${
-        selectedZone.activeSides.includes("bottom") && "bottom"
-      }`}
+      className={`zoon-wrapper ${selectedZone.activeSides.includes("bottom") && "bottom"
+        }`}
     >
       {Object.keys(zonesData).map((zoneName, index) => (
         <div
           key={index}
-          className={`zone ${
-            selectedZone.zoneName === zoneName ? "active" : ""
+          className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
           }`}
           onClick={() => {
+            console.log('zoneName: ', zoneName);
+
             setSelectedZone({
               zoneName,
-              ...zonesData[zoneName],
-            });
+              activeSides: zonesData[zoneName].activeSides || [],
+              panelOrder: zonesData[zoneName].panelOrder || [],
+              lockedPanels: zonesData[zoneName].lockedPanels || [],
+              widgets: zonesData[zoneName].widgets || [],
+            })
+            // setSelectedZone({
+            //   zoneName,
+            //   ...zonesData[zoneName],
+            // });
+            console.log(selectedZone);
           }}
         >
           {zoneName}