Added kebab for delete widgets

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

@@ -3,20 +3,58 @@ import ProgressCard from "../realTimeVis/charts/ProgressCard";
 import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
 import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
 import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
-import RadarGraphComponent from "../realTimeVis/charts/RadarGraphComponent";
 import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
 import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
+import {
+  DeleteIcon,
+  DublicateIcon,
+  KebabIcon,
+} from "../../icons/ExportCommonIcons";
+import { useEffect, useRef } from "react";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+interface Widget {
+  id: string;
+  type: string;
+  title: string;
+  panel: Side;
+  data: any;
+}
 
 export const DraggableWidget = ({
   widget,
   hiddenPanels, // Add this prop to track hidden panels
-  index, onReorder
+  index,
+  onReorder,
+  openKebabId,
+  setOpenKebabId,
+  selectedZone,
+  setSelectedZone,
 }: {
+  selectedZone: {
+    zoneName: string;
+    activeSides: Side[];
+    panelOrder: Side[];
+    lockedPanels: Side[];
+    widgets: Widget[];
+  };
+  setSelectedZone: React.Dispatch<
+    React.SetStateAction<{
+      zoneName: string;
+      activeSides: Side[];
+      panelOrder: Side[];
+      lockedPanels: Side[];
+      widgets: Widget[];
+    }>
+  >;
   widget: any;
   hiddenPanels: string[]; // Array of hidden panel names
-  index: number; onReorder: (fromIndex: number, toIndex: number) => void
+  index: number;
+  onReorder: (fromIndex: number, toIndex: number) => void;
+  openKebabId: string | null; // ID of the widget with an open kebab menu
+  setOpenKebabId: (id: string | null) => void; // Function to update the open kebab menu
 }) => {
-
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
 
   const handlePointerDown = () => {
@@ -29,7 +67,7 @@ export const DraggableWidget = ({
   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
+    event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget
   };
   const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault(); // Allow drop
@@ -41,21 +79,89 @@ 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 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
     }
   };
+  // Handle kebab icon click to toggle kebab options
+  const handleKebabClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation(); // Prevent click from propagating to parent elements
+    if (openKebabId === widget.id) {
+      // If the current kebab is already open, close it
+      setOpenKebabId(null);
+    } else {
+      // Open the kebab for the clicked widget and close others
+      setOpenKebabId(widget.id);
+    }
+  };
+
+  const deleteSelectedChart = () => {
+    // Filter out the widget to be deleted
+    const updatedWidgets = selectedZone.widgets.filter(
+      (w: Widget) => w.id !== widget.id
+    );
+
+    // Update the selectedZone state
+    setSelectedZone((prevZone: any) => ({
+      ...prevZone,
+      widgets: updatedWidgets, // Replace the widgets array with the updated one
+    }));
+
+    // Close the kebab menu after deletion
+    setOpenKebabId(null);
+  };
+  const widgetRef = useRef<HTMLDivElement | null>(null);
+
+  // Handle click outside to close the kebab menu
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        widgetRef.current &&
+        !widgetRef.current.contains(event.target as Node)
+      ) {
+        setOpenKebabId(null); // Close the kebab menu if the click is outside
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [setOpenKebabId]);
 
 
+  const duplicateWidget = () => {
+    // Create a copy of the current widget with a new unique ID
+    const duplicatedWidget: Widget = {
+      ...widget,
+      id: `${widget.id}-copy-${Date.now()}`, // Generate a unique ID using a timestamp
+    };
+  
+    // Add the duplicated widget to the selectedZone's widgets array
+    setSelectedZone((prevZone: any) => ({
+      ...prevZone,
+      widgets: [...prevZone.widgets, duplicatedWidget],
+    }));
+  
+    // Close the kebab menu after duplication
+    setOpenKebabId(null);
+  
+    console.log("Duplicated widget with ID:", duplicatedWidget.id);
+  };
+
+  
   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}
@@ -66,6 +172,32 @@ export const DraggableWidget = ({
           pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
         }}
       >
+        {/* Kebab Icon */}
+        <div className="icon kebab" onClick={handleKebabClick}>
+          <KebabIcon />
+        </div>
+
+        {/* Kebab Options */}
+        {openKebabId === widget.id && (
+          <div
+            className="kebab-options"
+            ref={widgetRef} // Attach the ref to the widget container
+          >
+            <div className="edit btn">
+              <div className="icon">
+                <DublicateIcon />
+              </div>
+              <div className="label">Duplicate</div>
+            </div>
+            <div className="edit btn" onClick={deleteSelectedChart}>
+              <div className="icon">
+                <DeleteIcon />
+              </div>
+              <div className="label">Delete</div>
+            </div>
+          </div>
+        )}
+
         {/* Render charts based on widget type */}
         {widget.type === "progress" && (
           <ProgressCard title={widget.title} data={widget.data} />