Added drag and drop widgets, and zone datas

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

@@ -10,11 +10,13 @@ import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphCompone
 export const DraggableWidget = ({
   widget,
   hiddenPanels, // Add this prop to track hidden panels
+  index, onReorder
 }: {
   widget: any;
   hiddenPanels: string[]; // Array of hidden panel names
+  index: number; onReorder: (fromIndex: number, toIndex: number) => void
 }) => {
-  console.log("widget: ", widget.type);
+
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
 
   const handlePointerDown = () => {
@@ -26,14 +28,39 @@ export const DraggableWidget = ({
   // Determine if the widget's panel is hidden
   const isPanelHidden = hiddenPanels.includes(widget.panel);
 
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.setData('text/plain', index.toString()); // Store the index of the dragged widget
+  };
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Allow drop
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Allow drop
+  };
+
+  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
+    if (fromIndex !== toIndex) {
+      onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
+    }
+  };
+
+
   return (
     <>
       <div
+        draggable
         key={widget.id}
-        className={`chart-container ${
-          selectedChartId?.id === widget.id && "activeChart"
-        }`}
+        className={`chart-container ${selectedChartId?.id === widget.id && "activeChart"
+          }`}
         onPointerDown={handlePointerDown}
+        onDragStart={handleDragStart}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
         style={{
           opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
           pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden