3d widget api added and template frontend and backend completed

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

@@ -2,9 +2,10 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Widget } from "../../../store/useWidgetStore";
 import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
 import { InfoIcon } from "../../icons/ExportCommonIcons";
-import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
+import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
 import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
 import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData";
+import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -72,6 +73,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   // State to track overflow visibility
   const [showLeftArrow, setShowLeftArrow] = useState(false);
   const [showRightArrow, setShowRightArrow] = useState(false);
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
 
   // Function to calculate overflow state
   const updateOverflowState = useCallback(() => {
@@ -150,14 +152,16 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
     try {
       if (selectedZone?.zoneId === zoneId) {
-        console.log("Zone is already selected:", zoneName);
+
         return;
       }
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       // Fetch data from backend
       let response = await getSelect2dZoneData(zoneId, organization);
+      console.log('response: ', response);
       let res = await getFloatingZoneData(zoneId, organization);
+      setFloatingWidget(res)
       // Set the selected zone in the store
       useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
       if (Array.isArray(res)) {
@@ -177,8 +181,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         zoneViewPortPosition: response.viewPortposition || {},
       });
     } catch (error) {
-      console.log('error: ', error);
-      
+
+
     }
   }
 
@@ -186,9 +190,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   return (
     <div
       ref={containerRef}
-      className={`zone-wrapper ${
-        selectedZone?.activeSides?.includes("bottom") && "bottom"
-      }`}
+      className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") && "bottom"
+        }`}
     >
       {/* Left Arrow */}
       {showLeftArrow && (