Merge pull request 'rtViz' (#31) from rtViz into main

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/31

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

@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import { useSocketStore } from "../../store/store";
+import { useSelectedZoneStore } from "../../store/useZoneStore";
+
+export default function SocketRealTimeViz() {
+    const { visualizationSocket } = useSocketStore();
+    const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+    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) => {
+                if (addPanel.success) {
+                    let addPanelData = addPanel.data.data
+                    setSelectedZone(addPanelData)
+                }
+            })
+            //delete panel response
+            visualizationSocket.on("viz-panel:response:delete", (deletePanel: any) => {
+                if (deletePanel.success) {
+                    let deletePanelData = deletePanel.data.data
+                    setSelectedZone(deletePanelData)
+                }
+            })
+            // add 2dWidget
+            visualizationSocket.on("viz-widget:response:updates", (response: any) => {
+                console.log('response: ', response);
+                if (response.success && response.data) {
+                    setSelectedZone((prev) => {
+                        const isWidgetAlreadyAdded = prev.widgets.some(
+                            (widget) => widget.id === response.data.widgetData.id
+                        );
+                        if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
+                        return {
+                            ...prev,
+                            zoneId: response.data.zoneId,
+                            zoneName: response.data.zoneName,
+                            widgets: [...prev.widgets, response.data.widgetData],  // Append new widget
+                        };
+                    });
+                }
+            });
+            //delete 2D Widget
+            visualizationSocket.on("viz-widget:response:delete", (deleteWidget: any) => {
+                console.log('deleteWidget: ', deleteWidget);
+                if (deleteWidget?.success && deleteWidget.data) {
+                    setSelectedZone((prevZone: any) => ({
+                        ...prevZone,
+                        zoneId: deleteWidget.data.zoneId,
+                        zoneName: deleteWidget.data.zoneName,
+                        widgets: deleteWidget.data.widgetDeleteDatas, // Replace with new widget list
+                    }));
+                }
+            });
+        }
+    }, [])
+
+    useEffect(() => {
+
+    }, [selectedZone])
+    return (
+        <></>
+    )
+}