Added drag and drop widgets, and zone datas

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

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useWidgetStore } from "../../../store/useWidgetStore";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import { DraggableWidget } from "./DraggableWidget";
+import { arrayMove } from "@dnd-kit/sortable";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -60,9 +61,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 - 5}px`,
             left: leftActive ? `${panelSize}px` : "0",
             right: rightActive ? `${panelSize}px` : "0",
@@ -72,9 +72,8 @@ const Panel: React.FC<PanelProps> = ({
         case "right":
           return {
             width: `${panelSize - 5}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",
@@ -97,6 +96,8 @@ const Panel: React.FC<PanelProps> = ({
 
     if (currentWidgetsCount >= maxCapacity) return;
 
+    console.log('draggedAsset: ', draggedAsset);
+    console.log('panel: ', panel);
     addWidgetToPanel(draggedAsset, panel);
   };
 
@@ -163,6 +164,32 @@ const Panel: React.FC<PanelProps> = ({
     };
   }, [selectedZone.activeSides]);
 
+  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
+
+      // Filter widgets for the specified panel
+      const widgetsInPanel = prev.widgets.filter((w) => w.panel === panel);
+
+      // Reorder widgets within the same panel
+      const reorderedWidgets = arrayMove(widgetsInPanel, fromIndex, toIndex);
+
+      // Merge the reordered widgets back into the full list while preserving the order
+      const updatedWidgets = prev.widgets
+        .filter((widget) => widget.panel !== panel) // Keep widgets from other panels
+        .concat(reorderedWidgets); // Add the reordered widgets for the specified panel
+
+      return {
+        ...prev,
+        widgets: updatedWidgets,
+      };
+    });
+  };
+
+
   const { isPlaying } = usePlayButtonStore();
 
   return (
@@ -193,11 +220,15 @@ const Panel: React.FC<PanelProps> = ({
           >
             {selectedZone.widgets
               .filter((w) => w.panel === side)
-              .map((widget) => (
+              .map((widget, index) => (
                 <DraggableWidget
                   hiddenPanels={hiddenPanels}
                   widget={widget}
                   key={widget.id}
+                  index={index}
+                  onReorder={(fromIndex, toIndex) =>
+                    handleReorder(fromIndex, toIndex, side)
+                  }
                 />
               ))}
           </div>
@@ -208,3 +239,5 @@ const Panel: React.FC<PanelProps> = ({
 };
 
 export default Panel;
+
+