added dublicate widget function and added missed drag and drop

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

@@ -151,6 +151,26 @@ export const DraggableWidget = ({
     };
   }, [setOpenKebabId]);
 
+  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
@@ -160,6 +180,10 @@ export const DraggableWidget = ({
           selectedChartId?.id === widget.id && "activeChart"
         }`}
         onPointerDown={handlePointerDown}
+        onDragStart={handleDragStart}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
         style={{
           opacity: isPanelHidden ? 0 : 1,
           pointerEvents: isPanelHidden ? "none" : "auto",
@@ -174,7 +198,9 @@ export const DraggableWidget = ({
         {openKebabId === widget.id && (
           <div className="kebab-options" ref={widgetRef}>
             <div
-              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""}`}
+              className={`edit btn ${
+                isPanelFull(widget.panel) ? "btn-blur" : ""
+              }`}
               onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
             >
               <div className="icon">