added donut and pole area chart and added its iot data

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

@@ -11,6 +11,8 @@ import {
   KebabIcon,
 } from "../../icons/ExportCommonIcons";
 import { useEffect, useRef, useState } from "react";
+import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneData/duplicateWidget";
+import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -34,9 +36,9 @@ export const DraggableWidget = ({
 }: {
   selectedZone: {
     zoneName: string;
+    zoneId: string;
     activeSides: Side[];
     panelOrder: Side[];
-
     lockedPanels: Side[];
     widgets: Widget[];
   };
@@ -79,21 +81,28 @@ export const DraggableWidget = ({
 
   const isPanelHidden = hiddenPanels.includes(widget.panel);
 
-  const deleteSelectedChart = () => {
-    console.log('widget.id: ', widget.id);
-    const updatedWidgets = selectedZone.widgets.filter(
-      (w: Widget) => w.id !== widget.id
-    );
-    console.log('updatedWidgets: ', updatedWidgets);
+  const deleteSelectedChart = async () => {
+    try {
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+      const response = await deleteWidgetApi(widget.id, organization);
+      if (response?.message === "Widget deleted successfully") {
+        const updatedWidgets = selectedZone.widgets.filter(
+          (w: Widget) => w.id !== widget.id
+        );
+        setSelectedZone((prevZone: any) => ({
+          ...prevZone,
+          widgets: updatedWidgets,
+        }));
+      }
+    } catch (error) {
 
-    setSelectedZone((prevZone: any) => ({
-      ...prevZone,
-      widgets: updatedWidgets,
-    }));
-
-    setOpenKebabId(null);
+    } finally {
+      setOpenKebabId(null);
+    }
   };
 
+
   const getCurrentWidgetCount = (panel: Side) =>
     selectedZone.widgets.filter((w) => w.panel === panel).length;
 
@@ -121,21 +130,32 @@ export const DraggableWidget = ({
     return currentWidgetCount >= panelCapacity;
   };
 
-  const duplicateWidget = () => {
-    const duplicatedWidget: Widget = {
-      ...widget,
-      id: `${widget.id}-copy-${Date.now()}`,
-    };
-    setSelectedZone((prevZone: any) => ({
-      ...prevZone,
-      widgets: [...prevZone.widgets, duplicatedWidget],
-    }));
+  const duplicateWidget = async () => {
+    try {
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
 
-    setOpenKebabId(null);
+      const duplicatedWidget: Widget = {
+        ...widget,
+        id: `${widget.id}-copy-${Date.now()}`,
+      };
 
+      const response = await duplicateWidgetApi(selectedZone.zoneId, organization, duplicatedWidget);
 
+      if (response?.message === "Widget created successfully") {
+        setSelectedZone((prevZone: any) => ({
+          ...prevZone,
+          widgets: [...prevZone.widgets, duplicatedWidget],
+        }));
+      }
+    } catch (error) {
+
+    } finally {
+      setOpenKebabId(null);
+    }
   };
 
+
   const handleKebabClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
     if (openKebabId === widget.id) {
@@ -176,7 +196,6 @@ export const DraggableWidget = ({
   };
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-
     event.preventDefault();
     const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); // Get the dragged widget's index
     const toIndex = index; // The index of the widget where the drop occurred
@@ -296,18 +315,11 @@ export const DraggableWidget = ({
         )}
         {widget.type === "polarArea" && (
           <PolarAreaGraphComponent
+            id={widget.id}
             type={widget.type}
             title={widget.title}
             fontSize={widget.fontSize}
             fontWeight={widget.fontWeight}
-            data={{
-              measurements: [
-                { name: "testDevice", fields: "powerConsumption" },
-                { name: "furnace", fields: "powerConsumption" },
-              ],
-              interval: 1000,
-              duration: "1h",
-            }}
           />
         )}
       </div>