app/src/components/layout/sidebarLeft/visualization/Templates.tsx

@@ -26,8 +26,12 @@ const Templates = () => {
     templateData();
   }, []);
 
-  const handleDeleteTemplate = async (id: string) => {
+  const handleDeleteTemplate = async (
+    e: React.MouseEvent<HTMLButtonElement>,
+    id: string
+  ) => {
     try {
+      e.stopPropagation();
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       let deleteTemplate = {
@@ -108,7 +112,7 @@ const Templates = () => {
               <RenameInput value={`Template ${index + 1}`} />
             </div>
             <button
-              onClick={() => handleDeleteTemplate(template.id)}
+              onClick={(e) => handleDeleteTemplate(e, template.id)}
               className="delete-button"
               aria-label="Delete template"
             >

app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx

@@ -33,7 +33,7 @@ const WidgetsFloating = () => {
   };
 
   return (
-    <div className="floatingWidgets-wrapper">
+    <div className="floatingWidgets-wrapper widgets-wrapper">
       {/* {widgets.map((widget) => (
         <div
           key={widget.id}
@@ -48,24 +48,28 @@ const WidgetsFloating = () => {
       <SimpleCard
         header={"Today’s Earnings"}
         icon={WalletIcon}
+        iconName={"WalletIcon"}
         value={"$53,000"}
         per={"+55%"}
       />
       <SimpleCard
         header={"Today’s Users"}
         icon={GlobeIcon}
+        iconName={"GlobeIcon"}
         value={"1,200"}
         per={"+30%"}
       />
       <SimpleCard
         header={"New Clients"}
         icon={DocumentIcon}
+        iconName={"DocumentIcon"}
         value={"250"}
         per={"+12%"}
       />
       <SimpleCard
         header={"Total Sales"}
         icon={CartIcon}
+        iconName={"CartIcon"}
         value={"$150,000"}
         per={"+20%"}
       />{" "}

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

@@ -89,16 +89,7 @@ export const DraggableWidget = ({
 
   const chartWidget = useRef<HTMLDivElement>(null);
 
-  OuterClick({
+
-    contextClassName: [
-      "chart-container",
-      "floating",
-      "sidebar-right-wrapper",
-      "card",
-      "dropdown-menu",
-    ],
-    setMenuVisible: () => setSelectedChartId(null),
-  });
 
   const deleteSelectedChart = async () => {
     try {

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

@@ -117,6 +117,7 @@ const DroppedObjects: React.FC = () => {
   const zoneEntries = Object.entries(zones);
   if (zoneEntries.length === 0) return null;
   const [zoneName, zone] = zoneEntries[0];
+  console.log('zone: ', zone);
 
   function handleDuplicate(zoneName: string, index: number) {
     setOpenKebabId(null);
@@ -560,7 +561,7 @@ const DroppedObjects: React.FC = () => {
             key={`${zoneName}-${index}`}
             className={`${obj.className} ${
               selectedChartId?.id === obj.id && "activeChart"
-            }`}
+            } `}
             ref={chartWidget}
             style={{
               position: "absolute",
@@ -569,7 +570,9 @@ const DroppedObjects: React.FC = () => {
               right: rightPosition,
               bottom: bottomPosition,
               pointerEvents: isPlaying ? "none" : "auto",
-              minHeight: `${obj.className === "warehouseThroughput" && "150px !important"} `
+              minHeight: `${
+                obj.className === "warehouseThroughput" && "150px !important"
+              } `,
             }}
             onPointerDown={(event) => {
               setSelectedChartId(obj);

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

@@ -7,7 +7,10 @@ import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
 
-import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
+import {
+  useDroppedObjectsStore,
+  useFloatingWidget,
+} from "../../../store/useDroppedObjectsStore";
 import {
   useAsset3dWidget,
   useSocketStore,
@@ -29,6 +32,8 @@ import {
   useRightSelected,
 } from "../../../store/useZone3DWidgetStore";
 import Dropped3dWidgets from "./Dropped3dWidget";
+import OuterClick from "../../../utils/outerClick";
+import { useWidgetStore } from "../../../store/useWidgetStore";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -74,10 +79,22 @@ const RealTimeVisulization: React.FC = () => {
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
 
   // const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
   const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
+  const { setSelectedChartId } = useWidgetStore();
+
+  OuterClick({
+    contextClassName: [
+      "chart-container",
+      "floating",
+      "sidebar-right-wrapper",
+      "card",
+      "dropdown-menu",
+    ],
+    setMenuVisible: () => setSelectedChartId(null),
+  });
 
   useEffect(() => {
     async function GetZoneData() {
@@ -85,7 +102,7 @@ const RealTimeVisulization: React.FC = () => {
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
         const response = await getZone2dData(organization);
-        console.log('response: ', response);
+        console.log("response: ", response);
 
         if (!Array.isArray(response)) {
           return;
@@ -107,7 +124,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) { }
+      } catch (error) {}
     }
 
     GetZoneData();
@@ -123,7 +140,7 @@ const RealTimeVisulization: React.FC = () => {
           activeSides: selectedZone.activeSides || [],
           panelOrder: selectedZone.panelOrder || [],
           lockedPanels: selectedZone.lockedPanels || [],
-          points:selectedZone.points||[],
+          points: selectedZone.points || [],
           zoneId: selectedZone.zoneId || "",
           zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
           zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
@@ -196,7 +213,7 @@ const RealTimeVisulization: React.FC = () => {
           `Objects for Zone ID: ${selectedZone.zoneId}`,
           currentZone.objects
         );
-        setFloatingWidget(currentZone.objects)
+        setFloatingWidget(currentZone.objects);
       } else {
         console.warn("Zone not found or mismatched zoneId");
       }
@@ -211,9 +228,7 @@ const RealTimeVisulization: React.FC = () => {
       // }
 
       // Update floating widgets state
-
+    } catch (error) {}
-    } catch (error) { }
-
   };
 
   useEffect(() => {

app/src/components/ui/realTimeVis/floating/SimpleCard.tsx

@@ -2,7 +2,8 @@ import React from "react";
 
 interface SimpleCardProps {
   header: string;
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; // React component for SVG icon
+  icon: React.ElementType; // React component for SVG icon
+  iconName?: string;
   value: string;
   per: string; // Percentage change
   position?: [number, number];
@@ -11,23 +12,25 @@ interface SimpleCardProps {
 const SimpleCard: React.FC<SimpleCardProps> = ({
   header,
   icon: Icon,
+  iconName,
   value,
   per,
   position = [0, 0],
 }) => {
   const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
     const rect = event.currentTarget.getBoundingClientRect(); // Get position
+
     const cardData = JSON.stringify({
       header,
       value,
       per,
-      icon: Icon,
+      iconName: iconName || "UnknownIcon", // Use the custom iconName
-
       className: event.currentTarget.className,
       position: [rect.top, rect.left], // ✅ Store position
     });
 
     event.dataTransfer.setData("text/plain", cardData);
+    console.log("cardData: ", cardData);
   };
 
   return (

app/src/components/ui/realTimeVis/floating/TotalCardComponent.tsx

@@ -4,7 +4,12 @@ import useChartStore from "../../../../store/useChartStore";
 import { useWidgetStore } from "../../../../store/useWidgetStore";
 import axios from "axios";
 import io from "socket.io-client";
-import { WalletIcon } from "../../../icons/3dChartIcons";
+import {
+  CartIcon,
+  DocumentIcon,
+  GlobeIcon,
+  WalletIcon,
+} from "../../../icons/3dChartIcons";
 
 const TotalCardComponent = ({ object }: any) => {
   const [progress, setProgress] = useState<any>(0);
@@ -77,6 +82,20 @@ const TotalCardComponent = ({ object }: any) => {
     }
   }, [header, flotingDuration, flotingMeasurements]);
 
+  const mapIcon = (iconName: string) => {
+    switch (iconName) {
+      case "WalletIcon":
+        return <WalletIcon />;
+      case "GlobeIcon":
+        return <GlobeIcon />;
+      case "DocumentIcon":
+        return <DocumentIcon />;
+      case "CartIcon":
+        return <CartIcon />;
+      default:
+        return <WalletIcon />;
+    }
+  };
   return (
     <>
       <div className="header-wrapper">
@@ -86,9 +105,7 @@ const TotalCardComponent = ({ object }: any) => {
           <div className="per">{object.per}</div>
         </div>
       </div>
-      <div className="icon">
+      <div className="icon">{mapIcon(object.iconName)}</div>
-        <WalletIcon />
-      </div>
     </>
   );
 };