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

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

@@ -3,24 +3,26 @@ import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
 import Widgets2D from "./Widgets2D";
 import Widgets3D from "./Widgets3D";
 import WidgetsFloating from "./WidgetsFloating";
+import { useWidgetSubOption } from "../../../../../store/store";
 
 const Widgets = () => {
   const [activeOption, setActiveOption] = useState("2D");
+  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
 
   const handleToggleClick = (option: string) => {
-    setActiveOption(option);
+    setWidgetSubOption(option);
   };
 
   return (
     <div className="widget-left-sideBar">
       <ToggleHeader
         options={["2D", "3D", "Floating"]}
-        activeOption={activeOption}
+        activeOption={widgetSubOption}
         handleClick={handleToggleClick}
       />
-      {activeOption === "2D" && <Widgets2D />}
-      {activeOption === "3D" && <Widgets3D />}
-      {activeOption === "Floating" && <WidgetsFloating />}
+      {widgetSubOption === "2D" && <Widgets2D />}
+      {widgetSubOption === "3D" && <Widgets3D />}
+      {widgetSubOption === "Floating" && <WidgetsFloating />}
     </div>
   );
 };

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

@@ -24,9 +24,8 @@ const Widgets3D = () => {
             let crt = e.target
             if (crt instanceof HTMLElement) {
               const widget = crt.cloneNode(true) as HTMLElement;
-              console.log('widget: ', widget);
-              e.dataTransfer.setDragImage(widget,0,0)
-              e.dataTransfer.effectAllowed="move"
+              e.dataTransfer.setDragImage(widget, 0, 0)
+              e.dataTransfer.effectAllowed = "move"
             }
           }}
           onPointerDown={() => {
@@ -41,7 +40,7 @@ const Widgets3D = () => {
             className="widget-image"
             src={widget.img}
             alt={widget.name}
-            // draggable={false}
+          // draggable={false}
           />
         </div>
       ))}

app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx

@@ -3,6 +3,7 @@ import RenameInput from "../../../ui/inputs/RenameInput";
 import Vector3Input from "../customInput/Vector3Input";
 import { useSelectedZoneStore } from "../../../../store/useZoneStore";
 import { useEditPosition, usezonePosition, usezoneTarget } from "../../../../store/store";
+import { zoneCameraUpdate } from "../../../../services/realTimeVisulization/zoneData/zoneCameraUpdation";
 
 const ZoneProperties: React.FC = () => {
   const { Edit, setEdit } = useEditPosition();
@@ -15,12 +16,25 @@ const ZoneProperties: React.FC = () => {
     setZoneTarget(selectedZone.zoneViewPortTarget)
   }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])
 
-  function handleSetView() {
-    console.log("setApi");
-
-    console.log('zoneTarget: ', zoneTarget);
-    console.log('zonePosition: ', zonePosition);
-    setEdit(false);
+  async function handleSetView() {
+    try {
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+  
+      let zonesdata = {
+        zoneId: selectedZone.zoneId,
+        viewPortposition: zonePosition,
+        viewPortCenter: zoneTarget
+      };
+  
+      let response = await zoneCameraUpdate(zonesdata, organization);
+      console.log('response: ', response);
+     
+  
+      setEdit(false);
+    } catch (error) {
+      console.error("Error in handleSetView:", error);
+    }
   }
 
   function handleEditView() {
@@ -36,7 +50,7 @@ const ZoneProperties: React.FC = () => {
   }
 
   useEffect(() => {
-    console.log("Updated selectedZone: ", selectedZone);
+
   }, [selectedZone]);
 
   return (