merged to main

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

@@ -5,11 +5,13 @@ import { useSelectedZoneStore } from "../../../../store/useZoneStore";
 import { getTemplateData } from "../../../../services/realTimeVisulization/zoneData/getTemplate";
 import { deleteTemplateApi } from "../../../../services/realTimeVisulization/zoneData/deleteTemplate";
 import { loadTempleteApi } from "../../../../services/realTimeVisulization/zoneData/loadTemplate";
+import { useSocketStore } from "../../../../store/store";
 
 const Templates = () => {
   const { templates, removeTemplate } = useTemplateStore();
   const { setTemplates } = useTemplateStore();
   const { setSelectedZone, selectedZone } = useSelectedZoneStore();
+  const { visualizationSocket } = useSocketStore();
 
   useEffect(() => {
     async function templateData() {
@@ -30,12 +32,18 @@ const Templates = () => {
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-
+      let deleteTemplate = {
-      let response = await deleteTemplateApi(id, organization);
+        organization: organization,
-
+        templateID: id,
-      if (response.message === "Template deleted successfully") {
-        removeTemplate(id);
       }
+      if (visualizationSocket) {
+        visualizationSocket.emit("v2:viz-template:deleteTemplate", deleteTemplate)
+      }
+      removeTemplate(id);
+      // let response = await deleteTemplateApi(id, organization);
+
+      // if (response.message === "Template deleted successfully") {
+      // }
     } catch (error) {
       console.error("Error deleting template:", error);
     }
@@ -48,9 +56,20 @@ const Templates = () => {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
 
-      let response = await loadTempleteApi(template.id, selectedZone.zoneId, organization);
+      let loadingTemplate = {
+        organization: organization,
+        zoneId: selectedZone.zoneId,
+        templateID: template.id,
+      }
+      console.log('template: ', template);
+      console.log('loadingTemplate: ', loadingTemplate);
 
-      if (response.message === "Template placed in Zone") {
+      if (visualizationSocket) {
+        visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate)
+      }
+      // let response = await loadTempleteApi(template.id, selectedZone.zoneId, organization);
+
+      // if (response.message === "Template placed in Zone") {
         setSelectedZone({
           panelOrder: template.panelOrder,
           activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
@@ -64,7 +83,7 @@ const Templates = () => {
             useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val);
           });
         }
-      }
+      // }
     } catch (error) {
       console.error("Error loading template:", error);
     }

app/src/components/ui/Tools.tsx

@@ -27,6 +27,7 @@ import {
   useMovePoint,
   useRefTextUpdate,
   useSelectedWallItem,
+  useSocketStore,
   useToggleView,
   useToolMode,
   useTransformMode,
@@ -45,7 +46,7 @@ const Tools: React.FC = () => {
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [openDrop, setOpenDrop] = useState(false);
-
+  const { visualizationSocket } = useSocketStore();
   const { activeModule } = useModuleStore();
   const { isPlaying, setIsPlaying } = usePlayButtonStore();
   const { addTemplate } = useTemplateStore();
@@ -408,8 +409,10 @@ const Tools: React.FC = () => {
                         widgets3D,
                         selectedZone,
                         templates,
-                      });
+                        visualizationSocket
-                    }}
+                      })
+                    }
+                    }
                   >
                     <SaveTemplateIcon isActive={false} />
                   </div>

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

@@ -97,6 +97,7 @@ export const DraggableWidget = ({
         widgetID: widget.id,
         organization: organization
       }
+      console.log('deleteWidget: ', deleteWidget);
       if (visualizationSocket) {
         visualizationSocket.emit("v2:viz-widget:delete", deleteWidget)
       }
@@ -163,18 +164,27 @@ export const DraggableWidget = ({
         id: `${widget.id}-copy-${Date.now()}`,
       };
 
-      const response = await duplicateWidgetApi(
+      let duplicateWidget = {
-        selectedZone.zoneId,
+        organization: organization,
-        organization,
+        zoneId: selectedZone.zoneId,
-        duplicatedWidget
+        widget: duplicatedWidget
-      );
-
-      if (response?.message === "Widget created successfully") {
-        setSelectedZone((prevZone: any) => ({
-          ...prevZone,
-          widgets: [...prevZone.widgets, duplicatedWidget],
-        }));
       }
+      if (visualizationSocket) {
+        visualizationSocket.emit("v2:viz-widget:add", duplicateWidget)
+      }
+      setSelectedZone((prevZone: any) => ({
+        ...prevZone,
+        widgets: [...prevZone.widgets, duplicatedWidget],
+      }));
+
+      // const response = await duplicateWidgetApi(selectedZone.zoneId, organization, duplicatedWidget);
+
+      // if (response?.message === "Widget created successfully") {
+      //   setSelectedZone((prevZone: any) => ({
+      //     ...prevZone,
+      //     widgets: [...prevZone.widgets, duplicatedWidget],
+      //   }));
+      // }
     } catch (error) {
     } finally {
       setOpenKebabId(null);

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

@@ -1,6 +1,6 @@
 import { useThree } from "@react-three/fiber";
 import React, { useState, useEffect } from "react";
-import { useAsset3dWidget, useWidgetSubOption } from "../../../store/store";
+import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
 import useModuleStore from "../../../store/useModuleStore";
 import { ThreeState } from "../../../types/world/worldTypes";
 import * as THREE from "three";
@@ -13,24 +13,23 @@ import { generateUniqueId } from "../../../functions/generateUniqueId";
 import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
 import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
 import { use3DWidget } from "../../../store/useDroppedObjectsStore";
+import { useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
 
 export default function Dropped3dWidgets() {
-  const { widgetSelect } = useAsset3dWidget();
+    const { widgetSelect } = useAsset3dWidget();
-  const { activeModule } = useModuleStore();
+    const { activeModule } = useModuleStore();
-  const { raycaster, gl, scene }: ThreeState = useThree();
+    const { raycaster, gl, scene }: ThreeState = useThree();
-  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
+    const { widgetSubOption } = useWidgetSubOption();
-  const { selectedZone } = useSelectedZoneStore(); // Get the currently active zone
+    const { selectedZone } = useSelectedZoneStore();
-  // 🔥 Store widget data (id, type, position) based on the selected zone
+
-  const [zoneWidgetData, setZoneWidgetData] = useState<
+    // ✅ Use Zustand Store instead of useState
-    Record<
+    const { zoneWidgetData, setZoneWidgetData, addWidget } = useZoneWidgetStore();
-      string,
+    const { setWidgets3D } = use3DWidget();
-      { id: string; type: string; position: [number, number, number] }[]
+    const { visualizationSocket } = useSocketStore();
-    >
+
-  >({});
+    useEffect(() => {
-  const { setWidgets3D } = use3DWidget();
+        if (activeModule !== "visualization") return;
-  useEffect(() => {
+        if (!selectedZone.zoneId) return;
-    if (activeModule !== "visualization") return;
-    if (selectedZone.zoneName === "") return;
 
     const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0];
@@ -38,102 +37,79 @@ export default function Dropped3dWidgets() {
         async function get3dWidgetData() {
             let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
             console.log('result: ', result);
-            setWidgets3D(result)
+            setWidgets3D(result);
-            // Ensure the extracted data has id, type, and position correctly mapped
+
             const formattedWidgets = result.map((widget: any) => ({
                 id: widget.id,
                 type: widget.type,
                 position: widget.position,
             }));
 
-      setZoneWidgetData((prev) => ({
+            setZoneWidgetData(selectedZone.zoneId, formattedWidgets);
-        ...prev,
+        }
-        [selectedZone.zoneId]: formattedWidgets,
-      }));
-    }
 
-    get3dWidgetData();
+        get3dWidgetData();
-  }, [selectedZone.zoneId, activeModule]);
+    }, [selectedZone.zoneId, activeModule]);
-  // useEffect(() => {
-  //     // ✅ Set data only for the selected zone, keeping existing state structure
-  //     setZoneWidgetData((prev) => ({
-  //         ...prev,
-  //         [selectedZone.zoneId]: [
-  //             {
-  //                 "id": "1743322674626-50mucpb1c",
-  //                 "type": "ui-Widget 1",
-  //                 "position": [120.94655021768133, 4.142360029666558, 124.39283546121099]
-  //             },
-  //             {
-  //                 "id": "1743322682086-je2h9x33v",
-  //                 "type": "ui-Widget 2",
-  //                 "position": [131.28751045879255, 0.009999999999970264, 133.92059801984362]
-  //             }
-  //         ]
-  //     }));
-  // }, [selectedZone.zoneId]); // ✅ Only update when the zone changes
 
-  useEffect(() => {
+    useEffect(() => {
-    if (activeModule !== "visualization") return;
+        if (activeModule !== "visualization") return;
-    if (widgetSubOption === "Floating") return;
+        if (widgetSubOption === "Floating" || widgetSubOption === "2D") return;
-    if (selectedZone.zoneName === "") return;
+        if (selectedZone.zoneName === "") return;
-    const canvasElement = gl.domElement;
-    const onDrop = async (event: DragEvent) => {
-      event.preventDefault(); // Prevent default browser behavior
-      const email = localStorage.getItem("email") || "";
-      const organization = email?.split("@")[1]?.split(".")[0];
-      if (!widgetSelect.startsWith("ui")) return;
-      const group1 = scene.getObjectByName("itemsGroup");
-      if (!group1) return;
-      const intersects = raycaster
-        .intersectObjects(scene.children, true)
-        .filter(
-          (intersect) =>
-            !intersect.object.name.includes("Roof") &&
-            !intersect.object.name.includes("agv-collider") &&
-            !intersect.object.name.includes("MeasurementReference") &&
-            !intersect.object.userData.isPathObject &&
-            !(intersect.object.type === "GridHelper")
-        );
-      if (intersects.length > 0) {
-        const { x, y, z } = intersects[0].point;
 
-        // ✅ Explicitly define position as a tuple
+        const canvasElement = gl.domElement;
-        const newWidget: {
+
-          id: string;
+        const onDrop = async (event: DragEvent) => {
-          type: string;
+            event.preventDefault();
-          position: [number, number, number];
+
-        } = {
+            const email = localStorage.getItem("email") || "";
-          id: generateUniqueId(),
+            const organization = email?.split("@")[1]?.split(".")[0];
-          type: widgetSelect,
+            if (!widgetSelect.startsWith("ui")) return;
-          position: [x, y, z], // Ensures TypeScript recognizes it as a tuple
+            const group1 = scene.getObjectByName("itemsGroup");
+            if (!group1) return;
+
+            const intersects = raycaster.intersectObjects(scene.children, true).filter(
+                (intersect) =>
+                    !intersect.object.name.includes("Roof") &&
+                    !intersect.object.name.includes("agv-collider") &&
+                    !intersect.object.name.includes("MeasurementReference") &&
+                    !intersect.object.userData.isPathObject &&
+                    !(intersect.object.type === "GridHelper")
+            );
+
+            if (intersects.length > 0) {
+                const { x, y, z } = intersects[0].point;
+                const newWidget = {
+                    id: generateUniqueId(),
+                    type: widgetSelect,
+                    position: [x, y, z] as [number, number, number],
+                };
+
+                let add3dWidget = {
+                    organization: organization,
+                    widget: newWidget,
+                    zoneId: selectedZone.zoneId
+                }
+                console.log('add3dWidget: ', add3dWidget);
+                if (visualizationSocket) {
+                    visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget)
+                }
+
+                // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget);
+                // console.log('response: ', response);
+
+                // if (response.message === "Widget created successfully") {
+                addWidget(selectedZone.zoneId, newWidget);
+                // }
+            }
         };
 
-        let response = await adding3dWidgets(
+        canvasElement.addEventListener("drop", onDrop);
-          selectedZone.zoneId,
+        return () => {
-          organization,
+            canvasElement.removeEventListener("drop", onDrop);
-          newWidget
+        };
-        );
+    }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption]);
 
-        // ✅ Store widgets uniquely for each zone
+    const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
-        setZoneWidgetData((prev) => ({
-          ...prev,
-          [selectedZone.zoneId]: [
-            ...(prev[selectedZone.zoneId] || []),
-            newWidget,
-          ],
-        }));
-      }
-    };
-
-    canvasElement.addEventListener("drop", onDrop);
-    return () => {
-      canvasElement.removeEventListener("drop", onDrop);
-    };
-  }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption]);
-
-  // Get widgets for the currently active zone
-  const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
 
     return (
         <>

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

@@ -20,6 +20,7 @@ import TotalCardComponent from "../realTimeVis/floating/TotalCardComponent";
 import WarehouseThroughputComponent from "../realTimeVis/floating/WarehouseThroughputComponent";
 import FleetEfficiencyComponent from "../realTimeVis/floating/FleetEfficiencyComponent";
 import { useWidgetStore } from "../../../store/useWidgetStore";
+import { useSocketStore } from "../../../store/store";
 import { useClickOutside } from "./functions/handleWidgetsOuterClick";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
@@ -45,6 +46,7 @@ interface DraggingState {
   };
 }
 const DroppedObjects: React.FC = () => {
+  const { visualizationSocket } = useSocketStore();
   const { isPlaying } = usePlayButtonStore();
   const zones = useDroppedObjectsStore((state) => state.zones);
   const [openKebabId, setOpenKebabId] = useState<string | null>(null);
@@ -110,23 +112,39 @@ const DroppedObjects: React.FC = () => {
   const zoneEntries = Object.entries(zones);
   if (zoneEntries.length === 0) return null;
   const [zoneName, zone] = zoneEntries[0];
+  
 
   function handleDuplicate(zoneName: string, index: number) {
     setOpenKebabId(null);
     duplicateObject(zoneName, index); // Call the duplicateObject method from the store
   }
 
-  async function handleDelete(zoneName: string, id: string, index: number) {
+  async function handleDelete(zoneName: string, id: string) {
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-
+      
-      let res = await deleteFloatingWidgetApi(id, organization);
+      
-
+      let deleteFloatingWidget = {
-      if (res.message === "FloatingWidget deleted successfully") {
+        floatWidgetID: id,
-        deleteObject(zoneName, id, index); // Call the deleteObject method from the store
+        organization: organization,
+        zoneId: zone.zoneId
       }
-    } catch (error) {}
+      
+      if (visualizationSocket) {
+        visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget)
+      }
+      deleteObject(zoneName, id);
+
+      // let res = await deleteFloatingWidgetApi(id, organization);
+      // s
+
+      // if (res.message === "FloatingWidget deleted successfully") {
+      //   deleteObject(zoneName, id, index); // Call the deleteObject method from the store
+      // }
+    } catch (error) {
+      
+    }
   }
 
   const handlePointerDown = (event: React.PointerEvent, index: number) => {
@@ -426,15 +444,30 @@ const DroppedObjects: React.FC = () => {
       // Save to backend
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-      const response = await addingFloatingWidgets(zone.zoneId, organization, {
+      // const response = await addingFloatingWidgets(zone.zoneId, organization, {
-        ...zone.objects[draggingIndex.index],
+      //   ...zone.objects[draggingIndex.index],
-        position: boundedPosition,
+      //   position: boundedPosition,
-      });
+      // });
-      console.log('response: ', response);
+      
 
-      if (response.message === "Widget updated successfully") {
+      let updateFloatingWidget = {
-        updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
+        organization: organization,
+        widget: {
+          ...zone.objects[draggingIndex.index],
+          position: boundedPosition,
+        },
+        index:draggingIndex.index,
+        zoneId: zone.zoneId
       }
+      if (visualizationSocket) {
+        visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget)
+      }
+
+      // if (response.message === "Widget updated successfully") {
+        
+      console.log('boundedPosition: ', boundedPosition);
+      updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
+      // }
 
       // // Clean up
       // setDraggingIndex(null);
@@ -446,7 +479,7 @@ const DroppedObjects: React.FC = () => {
       //   animationRef.current = null;
       // }
     } catch (error) {
-      console.error("Error in handlePointerUp:", error);
+      
     } finally {
       // Clean up regardless of success or failure
       setDraggingIndex(null);
@@ -554,13 +587,10 @@ const DroppedObjects: React.FC = () => {
                 </div>
                 <div className="label">Duplicate</div>
               </div>
-              <div
+              <div className="edit btn" onClick={(event) => {
-                className="edit btn"
+                event.stopPropagation();
-                onClick={(event) => {
+                handleDelete(zoneName, obj.id); // Call the delete handler
-                  event.stopPropagation();
+              }}>
-                  handleDelete(zoneName, obj.id, index); // Call the delete handler
-                }}
-              >
                 <div className="icon">
                   <DeleteIcon />
                 </div>
@@ -607,4 +637,4 @@ const DroppedObjects: React.FC = () => {
 
 export default DroppedObjects;
 
-// always place the mousePointer in the same point in the floatingCard even in pointerMove
+

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

@@ -155,8 +155,6 @@ const Panel: React.FC<PanelProps> = ({
       zoneId: selectedZone.zoneId,
       widget: newWidget
     }
-    console.log('newWidget: ', newWidget);
-    console.log('addWidget: ', addWidget);
     if (visualizationSocket) {
       visualizationSocket.emit("v2:viz-widget:add", addWidget)
     }
@@ -165,18 +163,18 @@ const Panel: React.FC<PanelProps> = ({
       widgets: [...prev.widgets, newWidget],
     }));
 
-    // try {
+    try {
-    //   let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
+      // let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
 
-    //   if (response.message === "Widget created successfully") {
+      // if (response.message === "Widget created successfully") {
-    //     setSelectedZone((prev) => ({
+      //   setSelectedZone((prev) => ({
-    //       ...prev,
+      //     ...prev,
-    //       widgets: [...prev.widgets, newWidget],
+      //     widgets: [...prev.widgets, newWidget],
-    //     }));
+      //   }));
-    //   }
+      // }
-    // } catch (error) {
+    } catch (error) {
-    //   console.error("Error adding widget:", error);
+      console.error("Error adding widget:", error);
-    // }
+    }
 
   };
 

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

@@ -147,12 +147,6 @@ const RealTimeVisulization: React.FC = () => {
         position: determinePosition(canvasRect, relativeX, relativeY),
       };
 
-      let response = await addingFloatingWidgets(
-        selectedZone.zoneId,
-        organization,
-        newObject
-      );
-
       // Only set zone if it’s not already in the store (prevents overwriting objects)
       const existingZone =
         useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
@@ -162,12 +156,28 @@ const RealTimeVisulization: React.FC = () => {
           .setZone(selectedZone.zoneName, selectedZone.zoneId);
       }
 
-      // Add the dropped object to the zone if the API call is successful
+      let addFloatingWidget = {
-      if (response.message === "FloatWidget created successfully") {
+        organization: organization,
-        useDroppedObjectsStore
+        widget: newObject,
-          .getState()
+        zoneId: selectedZone.zoneId
-          .addObject(selectedZone.zoneName, newObject);
       }
+      console.log('newObject: ', newObject);
+
+      if (visualizationSocket) {
+        visualizationSocket.emit("v2:viz-float:add", addFloatingWidget)
+      }
+
+      // let response = await addingFloatingWidgets(
+      //   selectedZone.zoneId,
+      //   organization,
+      //   newObject
+      // );
+      // Add the dropped object to the zone if the API call is successful
+      // if (response.message === "FloatWidget created successfully") {
+      useDroppedObjectsStore
+        .getState()
+        .addObject(selectedZone.zoneName, newObject);
+      // }
 
       // Update floating widgets state
       setFloatingWidgets((prevWidgets) => ({
@@ -226,6 +236,11 @@ const RealTimeVisulization: React.FC = () => {
       {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
       {activeModule === "visualization" && <SocketRealTimeViz />}
       {/* <DroppedObjects /> */}
+      {/* <RenderOverlay>
+        <EditWidgetOption
+          options={["Dublicate", "Vertical Move", "Horizontal Move", "Delete"]}
+        />
+      </RenderOverlay> */}
       {activeModule === "visualization" && (
         <>
           <DisplayZone

app/src/modules/visualization/handleSaveTemplate.ts

@@ -1,4 +1,5 @@
 import { saveTemplateApi } from "../../services/realTimeVisulization/zoneData/saveTempleteApi";
+import { useSocketStore } from "../../store/store";
 import { Template } from "../../store/useTemplateStore";
 import { captureVisualization } from "./captureVisualization";
 
@@ -11,6 +12,7 @@ type HandleSaveTemplateProps = {
     widgets: any[];
   };
   templates?: Template[];
+  visualizationSocket: any;
 };
 
 // Generate a unique ID
@@ -24,6 +26,7 @@ export const handleSaveTemplate = async ({
   widgets3D,
   selectedZone,
   templates = [],
+  visualizationSocket,
 }: HandleSaveTemplateProps): Promise<void> => {
   try {
     // Check if the selected zone has any widgets
@@ -47,7 +50,7 @@ export const handleSaveTemplate = async ({
 
     // Capture visualization snapshot
     const snapshot = await captureVisualization();
-    console.log("snapshot: ", snapshot);
+
     // if (!snapshot) {
     //   return;
     // }
@@ -72,18 +75,25 @@ export const handleSaveTemplate = async ({
       console.error("Organization could not be determined from email.");
       return;
     }
+    let saveTemplate = {
+      organization: organization,
+      template: newTemplate,
+    };
+    if (visualizationSocket) {
+      visualizationSocket.emit("v2:viz-template:add", saveTemplate);
+    }
 
     // Save the template
     try {
-      const response = await saveTemplateApi(organization, newTemplate);
+      addTemplate(newTemplate);
-      console.log("Save API Response:", response);
+      // const response = await saveTemplateApi(organization, newTemplate);
+      // console.log("Save API Response:", response);
 
       // Add template only if API call succeeds
-      addTemplate(newTemplate);
     } catch (apiError) {
-      console.error("Error saving template to API:", apiError);
+      // console.error("Error saving template to API:", apiError);
     }
   } catch (error) {
-    console.error("Error in handleSaveTemplate:", error);
+    // console.error("Error in handleSaveTemplate:", error);
   }
 };

app/src/modules/visualization/realTimeVizSocket.dev.tsx

@@ -1,16 +1,27 @@
 import { useEffect } from "react";
 import { useSocketStore } from "../../store/store";
 import { useSelectedZoneStore } from "../../store/useZoneStore";
+import { useDroppedObjectsStore } from "../../store/useDroppedObjectsStore";
+import { useZoneWidgetStore } from "../../store/useZone3DWidgetStore";
+import useTemplateStore from "../../store/useTemplateStore";
 
 export default function SocketRealTimeViz() {
     const { visualizationSocket } = useSocketStore();
     const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+    const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
+    const duplicateObject = useDroppedObjectsStore((state) => state.duplicateObject);
+    const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition);
+    const { addWidget } = useZoneWidgetStore()
+    const { templates, removeTemplate } = useTemplateStore();
+    const { setTemplates } = useTemplateStore();
+
     useEffect(() => {
         const email = localStorage.getItem("email") || "";
         const organization = email?.split("@")[1]?.split(".")[0];
         if (visualizationSocket) {
             //add panel response
             visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
+                console.log('addPanel: ', addPanel);
                 if (addPanel.success) {
                     let addPanelData = addPanel.data.data
                     setSelectedZone(addPanelData)
@@ -18,32 +29,35 @@ export default function SocketRealTimeViz() {
             })
             //delete panel response
             visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => {
+                console.log('deletePanel: ', deletePanel);
                 if (deletePanel.success) {
                     let deletePanelData = deletePanel.data.data
                     setSelectedZone(deletePanelData)
                 }
             })
-            // add 2dWidget
+            // add 2dWidget response
-            visualizationSocket.on("viz-widget:response:updates", (response: any) => {
+            visualizationSocket.on("viz-widget:response:updates", (add2dWidget: any) => {
-                console.log('response: ', response);
+                console.log('add2dWidget: ', add2dWidget);
-                if (response.success && response.data) {
+
+                if (add2dWidget.success && add2dWidget.data) {
                     setSelectedZone((prev) => {
                         const isWidgetAlreadyAdded = prev.widgets.some(
-                            (widget) => widget.id === response.data.widgetData.id
+                            (widget) => widget.id === add2dWidget.data.widgetData.id
                         );
                         if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
                         return {
                             ...prev,
-                            zoneId: response.data.zoneId,
+                            zoneId: add2dWidget.data.zoneId,
-                            zoneName: response.data.zoneName,
+                            zoneName: add2dWidget.data.zoneName,
-                            widgets: [...prev.widgets, response.data.widgetData],  // Append new widget
+                            widgets: [...prev.widgets, add2dWidget.data.widgetData],  // Append new widget
                         };
                     });
                 }
             });
-            //delete 2D Widget
+            //delete 2D Widget response
             visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
                 console.log('deleteWidget: ', deleteWidget);
+
                 if (deleteWidget?.success && deleteWidget.data) {
                     setSelectedZone((prevZone: any) => ({
                         ...prevZone,
@@ -53,12 +67,127 @@ export default function SocketRealTimeViz() {
                     }));
                 }
             });
+            //add Floating Widget response
+            visualizationSocket.on("viz-float:response:updates", (addFloatingWidget: any) => {
+                console.log('addFloatingWidget: ', addFloatingWidget);
+
+                if (addFloatingWidget.success) {
+                    if (addFloatingWidget.success && addFloatingWidget.message === "FloatWidget created successfully") {
+                        const state = useDroppedObjectsStore.getState();
+                        const zone = state.zones[addFloatingWidget.data.zoneName];
+                        if (!zone) {
+                            state.setZone(addFloatingWidget.data.zoneName, addFloatingWidget.data.zoneId);
+                        }
+                        const existingObjects = zone ? zone.objects : [];
+                        const newWidget = addFloatingWidget.data.widget;
+                        // ✅ Check if the widget ID already exists before adding
+                        const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
+                        if (isAlreadyAdded) {
+
+                            return; // Don't add the widget if it already exists
+                        }
+                        // Add widget only if it doesn't exist
+                        state.addObject(addFloatingWidget.data.zoneName, newWidget);
+                    }
+                    if (addFloatingWidget.message === "Widget updated successfully") {
+                        updateObjectPosition(addFloatingWidget.data.zoneName, addFloatingWidget.data.index, addFloatingWidget.data.position);
+                    }
+                }
+            });
+            //duplicate Floating Widget response
+            visualizationSocket.on("viz-float:response:addDuplicate", (duplicateFloatingWidget: any) => {
+                console.log('duplicateFloatingWidget: ', duplicateFloatingWidget);
+
+                if (duplicateFloatingWidget.success && duplicateFloatingWidget.message === "duplicate FloatWidget created successfully") {
+                    useDroppedObjectsStore.setState((state) => {
+                        const zone = state.zones[duplicateFloatingWidget.data.zoneName];
+                        if (!zone) return state; // Zone doesn't exist, return state as is
+                        const existingObjects = zone.objects;
+                        const newWidget = duplicateFloatingWidget.data.widget;
+                        // ✅ Check if the object with the same ID already exists
+                        const isAlreadyAdded = existingObjects.some(obj => obj.id === newWidget.id);
+                        if (isAlreadyAdded) {
+
+                            return state; // Don't update state if it's already there
+                        }
+                        return {
+                            zones: {
+                                ...state.zones,
+                                [duplicateFloatingWidget.data.zoneName]: {
+                                    ...zone,
+                                    objects: [...existingObjects, newWidget], // Append only if it's not a duplicate
+                                },
+                            },
+                        };
+                    });
+                }
+            });
+            //delete Floating Widget response
+            visualizationSocket.on("viz-float:response:delete", (deleteFloatingWidget: any) => {
+                console.log('deleteFloatingWidget: ', deleteFloatingWidget);
+
+                if (deleteFloatingWidget.success) {
+                    deleteObject(deleteFloatingWidget.data.zoneName, deleteFloatingWidget.data.floatWidgetID);
+                }
+            });
+            //add 3D Widget response
+            visualizationSocket.on("viz-widget3D:response:updates", (add3DWidget: any) => {
+                console.log('add3DWidget: ', add3DWidget);
+
+                if (add3DWidget.success) {
+                    if (add3DWidget.message === "Widget created successfully") {
+                        addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
+                    }
+                }
+            });
+            // add Template response
+            visualizationSocket.on("viz-template:response:add", (addingTemplate: any) => {
+                console.log('addingTemplate: ', addingTemplate);
+
+                if (addingTemplate.success) {
+                    if (addingTemplate.message === "Template saved successfully") {
+                        setTemplates(addingTemplate.data);
+                    }
+                }
+            });
+            //load Template response
+            visualizationSocket.on("viz-template:response:addTemplateZone", (loadTemplate: any) => {
+                console.log('loadTemplate: ', loadTemplate);
+
+                if (loadTemplate.success) {
+                    if (loadTemplate.message === "Template placed in Zone") {
+                        let template = loadTemplate.data.template
+                        setSelectedZone({
+                            panelOrder: template.panelOrder,
+                            activeSides: Array.from(new Set(template.panelOrder)), // No merging with previous `activeSides`
+                            widgets: template.widgets,
+                        });
+                        useDroppedObjectsStore.getState().setZone(template.zoneName, template.zoneId);
+
+                        if (Array.isArray(template.floatingWidget)) {
+                            template.floatingWidget.forEach((val: any) => {
+                                useDroppedObjectsStore.getState().addObject(template.zoneName, val);
+                            });
+                        }
+                    }
+
+                }
+            });
+            //delete Template response
+            visualizationSocket.on("viz-template:response:delete", (deleteTemplate: any) => {
+                console.log('deleteTemplate: ', deleteTemplate);
+
+                if (deleteTemplate.success) {
+                    if (deleteTemplate.message === 'Template deleted successfully') {
+                        removeTemplate(deleteTemplate.data);
+                    }
+
+
+                }
+            });
         }
-    }, [])
+    }, [visualizationSocket])
 
-    useEffect(() => {
-
-    }, [selectedZone])
     return (
         <></>
     )

app/src/services/realTimeVisulization/zoneData/deleteWidgetApi.ts

@@ -3,21 +3,24 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 
 export const deleteWidgetApi = async (
   widgetID: string,
-  organization: string
+  organization: string,
+  zoneId:string
 ) => {
+  console.log('zoneId: ', zoneId);
+  console.log('organization: ', organization);
+  console.log('widgetID: ', widgetID);
   try {
     const response = await fetch(`${url_Backend_dwinzo}/api/v2/delete/widget`, {
       method: "PATCH",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ organization, widgetID }),
+      body: JSON.stringify({ organization, widgetID,zoneId }),
     });
 
     if (!response.ok) {
       throw new Error("Failed to delete widget in the zone");
     }
-
     const result = await response.json();
     return result;
   } catch (error) {

app/src/store/useDroppedObjectsStore.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import { addingFloatingWidgets } from "../services/realTimeVisulization/zoneData/addFloatingWidgets";
+import { useSocketStore } from "./store";
 
 type DroppedObject = {
   className: string;
@@ -36,7 +37,7 @@ type DroppedObjectsState = {
       bottom: number | "auto";
     }
   ) => void;
-  deleteObject: (zoneName: string, id: string, index: number) => void; // Add this line
+  deleteObject: (zoneName: string, id: string) => void; // Add this line
   duplicateObject: (zoneName: string, index: number) => void; // Add this line
 };
 
@@ -77,10 +78,10 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
       };
     }),
 
-  deleteObject: (zoneName: string, id: string, index: number) =>
+  deleteObject: (zoneName: string, id: string) =>
     set((state) => {
       const zone = state.zones[zoneName];
-      console.log("zone: ", zone);
+
       if (!zone) return state;
       return {
         zones: {
@@ -94,6 +95,8 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
   duplicateObject: async (zoneName: string, index: number) => {
     const state = useDroppedObjectsStore.getState(); // Get the current state
     const zone = state.zones[zoneName];
+    let socketState = useSocketStore.getState();
+    let visualizationSocket = socketState.visualizationSocket;
 
     if (!zone) return;
 
@@ -120,8 +123,28 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
       },
     };
 
-    console.log("zone: ", zone.zoneId);
+    let duplicateFloatingWidget = {
-    console.log("duplicatedObject: ", duplicatedObject);
+      organization: organization,
+      widget: duplicatedObject,
+      zoneId: zone.zoneId,
+      index: index,
+    };
+
+    if (visualizationSocket) {
+      visualizationSocket.emit(
+        "v2:viz-float:addDuplicate",
+        duplicateFloatingWidget
+      );
+    }
+    useDroppedObjectsStore.setState((state) => ({
+      zones: {
+        ...state.zones,
+        [zoneName]: {
+          ...state.zones[zoneName],
+          objects: [...state.zones[zoneName].objects, duplicatedObject], // Append duplicated object
+        },
+      },
+    }));
 
     // Make async API call outside of Zustand set function
     // let response = await addingFloatingWidgets(
@@ -132,15 +155,7 @@ export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
 
     // if (response.message === "FloatWidget created successfully") {
     // Update the state inside `set`
-    useDroppedObjectsStore.setState((state) => ({
+
-      zones: {
-        ...state.zones,
-        [zoneName]: {
-          ...state.zones[zoneName],
-          objects: [...state.zones[zoneName].objects, duplicatedObject], // Append duplicated object
-        },
-      },
-    }));
     // }
   },
 }));

app/src/store/useZone3DWidgetStore.ts

@@ -0,0 +1,33 @@
+import { create } from "zustand";
+
+type WidgetData = {
+    id: string;
+    type: string;
+    position: [number, number, number];
+};
+
+type ZoneWidgetStore = {
+    zoneWidgetData: Record<string, WidgetData[]>;
+    setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) => void;
+    addWidget: (zoneId: string, widget: WidgetData) => void;
+};
+
+export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({
+    zoneWidgetData: {},
+    
+    setZoneWidgetData: (zoneId, widgets) =>
+        set((state) => ({
+            zoneWidgetData: {
+                ...state.zoneWidgetData,
+                [zoneId]: widgets,
+            },
+        })),
+    
+    addWidget: (zoneId, widget) =>
+        set((state) => ({
+            zoneWidgetData: {
+                ...state.zoneWidgetData,
+                [zoneId]: [...(state.zoneWidgetData[zoneId] || []), widget],
+            },
+        })),
+}));