added active chart select

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

@@ -13,6 +13,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneData/duplicateWidget";
 import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
+import { useClickOutside } from "./functions/handleWidgetsOuterClick";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -79,6 +80,8 @@ export const DraggableWidget = ({
     }
   };
 
+  const chartWidget = useRef<HTMLDivElement>(null);
+
   const isPanelHidden = hiddenPanels.includes(widget.panel);
 
   const deleteSelectedChart = async () => {
@@ -96,13 +99,11 @@ export const DraggableWidget = ({
         }));
       }
     } catch (error) {
-
     } finally {
       setOpenKebabId(null);
     }
   };
 
-
   const getCurrentWidgetCount = (panel: Side) =>
     selectedZone.widgets.filter((w) => w.panel === panel).length;
 
@@ -140,7 +141,11 @@ export const DraggableWidget = ({
         id: `${widget.id}-copy-${Date.now()}`,
       };
 
-      const response = await duplicateWidgetApi(selectedZone.zoneId, organization, duplicatedWidget);
+      const response = await duplicateWidgetApi(
+        selectedZone.zoneId,
+        organization,
+        duplicatedWidget
+      );
 
       if (response?.message === "Widget created successfully") {
         setSelectedZone((prevZone: any) => ({
@@ -149,13 +154,11 @@ export const DraggableWidget = ({
         }));
       }
     } catch (error) {
-
     } finally {
       setOpenKebabId(null);
     }
   };
 
-
   const handleKebabClick = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
     if (openKebabId === widget.id) {
@@ -204,13 +207,18 @@ export const DraggableWidget = ({
     }
   };
 
+  useClickOutside(chartWidget, () => {
+    setSelectedChartId(null);
+  });
+
   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}
@@ -220,6 +228,8 @@ export const DraggableWidget = ({
           opacity: isPanelHidden ? 0 : 1,
           pointerEvents: isPanelHidden ? "none" : "auto",
         }}
+        ref={chartWidget}
+        onClick={() => setSelectedChartId(widget)}
       >
         {/* Kebab Icon */}
         <div className="icon kebab" onClick={handleKebabClick}>
@@ -230,8 +240,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">
@@ -249,7 +260,7 @@ export const DraggableWidget = ({
         )}
 
         {/* Render charts based on widget type */}
-        
+
         {widget.type === "progress" && (
           <ProgressCard title={widget.title} data={widget.data} />
         )}