floatingwidgets Api and 3dwidget frontend and 2d widget delete Api and zonecameraUpdation

app/src/components/ui/list/DropDownList.tsx

@@ -32,7 +32,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
   listType = "default",
   remove,
 }) => {
-  
+
   const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
   const { zones, setZones } = useZones()
 
@@ -43,6 +43,17 @@ const DropDownList: React.FC<DropDownListProps> = ({
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
   useEffect(() => {
+    // console.log(zones);
+    //     setZoneDataList([
+    //       { id: "2e996073-546c-470c-8323-55bd3700c6aa", name: "zone1" },
+    //       { id: "3f473bf0-197c-471c-a71f-943fc9ca2b47", name: "zone2" },
+    //       { id: "905e8fb6-9e18-469b-9474-e0478fb9601b", name: "zone3" },
+    //       { id: "9d9efcbe-8e96-47eb-bfad-128a9e4c532e", name: "zone4" },
+    //       { id: "884f3d29-eb5a-49a5-abe9-d11971c08e85", name: "zone5" },
+    //       { id: "70fa55cd-b5c9-4f80-a8c4-6319af3bfb4e", name: "zone6" },
+    //     ])
+
+
     const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({
       id: val.zoneId,
       name: val.zoneName

app/src/components/ui/list/List.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 import RenameInput from "../inputs/RenameInput";
 import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
-import { useSubModuleStore } from "../../../store/useModuleStore";
+import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
 
 interface ListProps {
   items?: { id: string; name: string }[]; // Optional array of items to render
@@ -12,27 +12,55 @@ interface ListProps {
 }
 
 const List: React.FC<ListProps> = ({ items = [], remove }) => {
-  const { setSelectedZone } = useSelectedZoneStore();
+  const { activeModule, setActiveModule } = useModuleStore();
+  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { setSubModule } = useSubModuleStore();
+  useEffect(() => {
+    useSelectedZoneStore.getState().setSelectedZone({
+      zoneName: "",
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      zoneId: "",
+      zoneViewPortTarget: [],
+      zoneViewPortPosition: [],
+      widgets: [],
+    });
+  }, [activeModule]);
+  
 
   async function handleSelectZone(id: string) {
-    setSubModule("zoneProperties")
-    const email = localStorage.getItem('email')
-    const organization = (email!.split("@")[1]).split(".")[0];
-    let response = await getZoneData(id, organization)
-    setSelectedZone({
-      zoneName: response?.zoneName,
-      activeSides: response?.activeSides || [],
-      panelOrder: response?.panelOrder || [],
-      lockedPanels: response?.lockedPanels || [],
-      widgets: response?.widgets || [],
-      zoneId: response?.zoneId,
-      zoneViewPortTarget: response?.viewPortCenter || [],
-      zoneViewPortPosition:
-        response?.viewPortposition || [],
-    });
+    try {
+      // Avoid re-fetching if the same zone is already selected
+      if (selectedZone?.zoneId === id) {
+        console.log("Zone is already selected:", selectedZone.zoneName);
+        return;
+      }
 
+      setSubModule("zoneProperties");
+
+      const email = localStorage.getItem("email");
+      const organization = email?.split("@")[1]?.split(".")[0] || "";
+
+      let response = await getZoneData(id, organization);
+
+      setSelectedZone({
+        zoneName: response?.zoneName,
+        activeSides: response?.activeSides || [],
+        panelOrder: response?.panelOrder || [],
+        lockedPanels: response?.lockedPanels || [],
+        widgets: response?.widgets || [],
+        zoneId: response?.zoneId,
+        zoneViewPortTarget: response?.viewPortCenter || [],
+        zoneViewPortPosition: response?.viewPortposition || [],
+      });
+
+      console.log("Zone selected:", response?.zoneName);
+    } catch (error) {
+      console.error("Error selecting zone:", error);
+    }
   }
+
   return (
     <>
       {items.length > 0 ? (