3dWidget dnd and 2d widgets backend api updated

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

@@ -3,6 +3,7 @@ import { useWidgetStore } from "../../../store/useWidgetStore";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import { DraggableWidget } from "./DraggableWidget";
 import { arrayMove } from "@dnd-kit/sortable";
+import { addingWidgets } from "../../../services/realTimeVisulization/zoneData/addWidgets";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -19,6 +20,7 @@ interface PanelProps {
     zoneName: string;
     activeSides: Side[];
     panelOrder: Side[];
+
     lockedPanels: Side[];
     zoneId: string;
     zoneViewPortTarget: number[];
@@ -30,6 +32,7 @@ interface PanelProps {
       zoneName: string;
       activeSides: Side[];
       panelOrder: Side[];
+
       lockedPanels: Side[];
       zoneId: string;
       zoneViewPortTarget: number[];
@@ -72,9 +75,8 @@ const Panel: React.FC<PanelProps> = ({
         case "top":
         case "bottom":
           return {
-            width: `calc(100% - ${
-              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
-            }px)`,
+            width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+              }px)`,
             height: `${panelSize - 2}px`,
             left: leftActive ? `${panelSize}px` : "0",
             right: rightActive ? `${panelSize}px` : "0",
@@ -84,9 +86,8 @@ const Panel: React.FC<PanelProps> = ({
         case "right":
           return {
             width: `${panelSize - 2}px`,
-            height: `calc(100% - ${
-              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
-            }px)`,
+            height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+              }px)`,
             top: topActive ? `${panelSize}px` : "0",
             bottom: bottomActive ? `${panelSize}px` : "0",
             [side]: "0",
@@ -99,6 +100,7 @@ const Panel: React.FC<PanelProps> = ({
   );
 
   const handleDrop = (e: React.DragEvent, panel: Side) => {
+
     e.preventDefault();
     const { draggedAsset } = useWidgetStore.getState();
     if (!draggedAsset) return;
@@ -109,8 +111,6 @@ const Panel: React.FC<PanelProps> = ({
 
     if (currentWidgetsCount >= maxCapacity) return;
 
-    console.log("draggedAsset: ", draggedAsset);
-    console.log("panel: ", panel);
     addWidgetToPanel(draggedAsset, panel);
   };
 
@@ -139,17 +139,27 @@ const Panel: React.FC<PanelProps> = ({
   };
 
   // while dublicate check this and add
-  const addWidgetToPanel = (asset: any, panel: Side) => {
+  const addWidgetToPanel = async (asset: any, panel: Side) => {
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]
     const newWidget = {
       ...asset,
       id: generateUniqueId(),
       panel,
     };
+    try {
+      let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
+      console.log("response: ", response);
+      if (response.message === "Widget created successfully") {
+        setSelectedZone((prev) => ({
+          ...prev,
+          widgets: [...prev.widgets, newWidget],
+        }));
+      }
+    } catch (error) {
+      console.error("Error adding widget:", error);
+    }
 
-    setSelectedZone((prev) => ({
-      ...prev,
-      widgets: [...prev.widgets, newWidget],
-    }));
   };
 
   useEffect(() => {
@@ -180,7 +190,7 @@ const Panel: React.FC<PanelProps> = ({
 
   const handleReorder = (fromIndex: number, toIndex: number, panel: Side) => {
     if (!selectedZone) return; // Ensure selectedZone is not null
-    console.log("selectedZone: ", selectedZone);
+
 
     setSelectedZone((prev) => {
       if (!prev) return prev; // Ensure prev is not null