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

@@ -109,7 +109,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
 
       // Update the selectedZone state
-      console.log('updatedZone: ', updatedZone);
+      console.log("updatedZone: ", updatedZone);
       setSelectedZone(updatedZone);
     } else {
       // If the panel is not active, activate it
@@ -122,7 +122,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
 
       // Update the selectedZone state
-      console.log('updatedZone: ', updatedZone);
+      console.log("updatedZone: ", updatedZone);
       setSelectedZone(updatedZone);
     }
   };
@@ -148,8 +148,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
             <div className="extra-Bs">
               {/* Hide Panel */}
               <div
-                className={`icon ${hiddenPanels.includes(side) ? "active" : ""
+                className={`icon ${
-                  }`}
+                  hiddenPanels.includes(side) ? "active" : ""
+                }`}
                 title={
                   hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
                 }
@@ -171,8 +172,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
               {/* Lock/Unlock Panel */}
               <div
-                className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
+                className={`icon ${
-                  }`}
+                  selectedZone.lockedPanels.includes(side) ? "active" : ""
+                }`}
                 title={
                   selectedZone.lockedPanels.includes(side)
                     ? "Unlock Panel"
@@ -180,7 +182,13 @@ const AddButtons: React.FC<ButtonsProps> = ({
                 }
                 onClick={() => toggleLockPanel(side)}
               >
-                <LockIcon fill={selectedZone.lockedPanels.includes(side) ? "#ffffff" : "#1D1E21"} />
+                <LockIcon
+                  fill={
+                    selectedZone.lockedPanels.includes(side)
+                      ? "#ffffff"
+                      : "#1D1E21"
+                  }
+                />
               </div>
             </div>
           )}

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

@@ -10,7 +10,7 @@ import {
   DublicateIcon,
   KebabIcon,
 } from "../../icons/ExportCommonIcons";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -24,7 +24,7 @@ interface Widget {
 
 export const DraggableWidget = ({
   widget,
-  hiddenPanels, // Add this prop to track hidden panels
+  hiddenPanels,
   index,
   onReorder,
   openKebabId,
@@ -49,111 +49,108 @@ export const DraggableWidget = ({
     }>
   >;
   widget: any;
-  hiddenPanels: string[]; // Array of hidden panel names
+  hiddenPanels: string[];
   index: number;
   onReorder: (fromIndex: number, toIndex: number) => void;
-  openKebabId: string | null; // ID of the widget with an open kebab menu
+  openKebabId: string | null;
-  setOpenKebabId: (id: string | null) => void; // Function to update the open kebab menu
+  setOpenKebabId: (id: string | null) => void;
 }) => {
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
-
+  const [panelDimensions, setPanelDimensions] = useState<{
+    [side in Side]?: { width: number; height: number };
+  }>({});
   const handlePointerDown = () => {
     if (selectedChartId?.id !== widget.id) {
       setSelectedChartId(widget);
     }
   };
 
-  // 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
-    }
-  };
-  // 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
+      widgets: updatedWidgets,
     }));
 
-    // Close the kebab menu after deletion
     setOpenKebabId(null);
   };
+
+  const getCurrentWidgetCount = (panel: Side) =>
+    selectedZone.widgets.filter((w) => w.panel === panel).length;
+
+  const calculatePanelCapacity = (panel: Side) => {
+    const CHART_WIDTH = 150;
+    const CHART_HEIGHT = 150;
+    const FALLBACK_HORIZONTAL_CAPACITY = 5;
+    const FALLBACK_VERTICAL_CAPACITY = 3;
+
+    const dimensions = panelDimensions[panel];
+    if (!dimensions) {
+      return panel === "top" || panel === "bottom"
+        ? FALLBACK_HORIZONTAL_CAPACITY
+        : FALLBACK_VERTICAL_CAPACITY;
+    }
+
+    return panel === "top" || panel === "bottom"
+      ? Math.floor(dimensions.width / CHART_WIDTH)
+      : Math.floor(dimensions.height / CHART_HEIGHT);
+  };
+
+  const isPanelFull = (panel: Side) => {
+    const currentWidgetCount = getCurrentWidgetCount(panel);
+    const panelCapacity = calculatePanelCapacity(panel);
+    return currentWidgetCount >= panelCapacity;
+  };
+
+  const duplicateWidget = () => {
+    const duplicatedWidget: Widget = {
+      ...widget,
+      id: `${widget.id}-copy-${Date.now()}`,
+    };
+
+    setSelectedZone((prevZone: any) => ({
+      ...prevZone,
+      widgets: [...prevZone.widgets, duplicatedWidget],
+    }));
+
+    setOpenKebabId(null);
+
+    console.log("Duplicated widget with ID:", duplicatedWidget.id);
+  };
+
+  const handleKebabClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    if (openKebabId === widget.id) {
+      setOpenKebabId(null);
+    } else {
+      setOpenKebabId(widget.id);
+    }
+  };
+
   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
+        setOpenKebabId(null);
       }
     };
 
     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
@@ -163,13 +160,9 @@ export const DraggableWidget = ({
           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
+          opacity: isPanelHidden ? 0 : 1,
-          pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
+          pointerEvents: isPanelHidden ? "none" : "auto",
         }}
       >
         {/* Kebab Icon */}
@@ -179,11 +172,11 @@ export const DraggableWidget = ({
 
         {/* Kebab Options */}
         {openKebabId === widget.id && (
-          <div
+          <div className="kebab-options" ref={widgetRef}>
-            className="kebab-options"
+            <div
-            ref={widgetRef} // Attach the ref to the widget container
+              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""}`}
-          >
+              onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
-            <div className="edit btn">
+            >
               <div className="icon">
                 <DublicateIcon />
               </div>
@@ -234,15 +227,6 @@ export const DraggableWidget = ({
             }}
           />
         )}
-        {/* {widget.type === "radar" && (
-          <RadarGraphComponent
-            type={widget.type}
-            title={widget.title}
-            fontSize={widget.fontSize}
-            fontWeight={widget.fontWeight}
-            data={widget.data.measurements.map((item: any) => item.fields)}
-          />
-        )} */}
         {widget.type === "pie" && (
           <PieGraphComponent
             type={widget.type}

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

@@ -48,6 +48,7 @@ const Panel: React.FC<PanelProps> = ({
   const [panelDimensions, setPanelDimensions] = useState<{
     [side in Side]?: { width: number; height: number };
   }>({});
+  const [openKebabId, setOpenKebabId] = useState<string | null>(null);
 
   const { isPlaying } = usePlayButtonStore();
 
@@ -131,6 +132,7 @@ const Panel: React.FC<PanelProps> = ({
       : Math.floor(dimensions.height / CHART_HEIGHT);
   };
 
+  // while dublicate check this and add
   const addWidgetToPanel = (asset: any, panel: Side) => {
     const newWidget = {
       ...asset,
@@ -195,8 +197,6 @@ const Panel: React.FC<PanelProps> = ({
     });
   };
 
-  const [openKebabId, setOpenKebabId] = useState<string | null>(null);
-
   return (
     <>
       {selectedZone.activeSides.map((side) => (

app/src/styles/components/marketPlace/marketPlace.scss

@@ -175,7 +175,9 @@
                     }
 
                     .vendor-icon {
-
+                        display: flex;
+                        align-items: center;
+                        gap: 4px;
                         font-weight: #{$bold-weight};
                         font-size: $regular ;
                     }

app/src/styles/pages/realTimeViz.scss

@@ -164,13 +164,14 @@
     transition: all 0.3s ease;
     border-radius: 6px;
     overflow: visible !important;
+    z-index: $z-index-tools;
 
     .panel-content {
       position: relative;
       height: 100%;
       padding: 10px;
 
-      
+
       display: flex;
       flex-direction: column;
       gap: 10px;
@@ -200,7 +201,7 @@
           top: 0px;
           right: 0px;
           z-index: 10;
-          
+
           @include flex-center;
         }
 
@@ -219,6 +220,8 @@
 
           box-shadow: var(--box-shadow-medium);
 
+
+
           .btn {
             display: flex;
             gap: 6px;
@@ -226,10 +229,9 @@
             padding: 5px 10px;
             color: var(--text-color);
 
-            .label {
+            &:hover {
-              &:hover {
+              .label {
                 color: var(--accent-color);
-
               }
             }
 
@@ -249,6 +251,12 @@
               }
             }
           }
+
+          .btn-blur {
+            color: var(--text-disabled);
+            cursor: not-allowed;
+            pointer-events: none;
+          }
         }
       }