3d widget api added and template frontend and backend completed

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

@@ -1,25 +1,76 @@
+import { useEffect } from "react";
+import { useDroppedObjectsStore } from "../../../../store/useDroppedObjectsStore";
 import useTemplateStore from "../../../../store/useTemplateStore";
 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";
 
 const Templates = () => {
   const { templates, removeTemplate } = useTemplateStore();
-  const { setSelectedZone } = useSelectedZoneStore();
+  const { setTemplates } = useTemplateStore();
+  const { setSelectedZone, selectedZone } = useSelectedZoneStore();
 
-  const handleDeleteTemplate = (id: string) => {
-    removeTemplate(id);
+  useEffect(() => {
+    async function templateData() {
+      try {
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+        let response = await getTemplateData(organization);
+        setTemplates(response);
+      } catch (error) {
+        console.error("Error fetching template data:", error);
+      }
+    }
+
+    templateData();
+  }, []);
+
+  const handleDeleteTemplate = async (id: string) => {
+    try {
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+
+      let response = await deleteTemplateApi(id, organization);
+
+      if (response.message === "Template deleted successfully") {
+        removeTemplate(id);
+      }
+    } catch (error) {
+      console.error("Error deleting template:", error);
+    }
   };
 
-  const handleLoadTemplate = (template: any) => {
-    setSelectedZone((prev) => ({
-      ...prev,
-      panelOrder: template.panelOrder,
-      activeSides: Array.from(
-        new Set([...prev.activeSides, ...template.panelOrder])
-      ),
-      widgets: template.widgets,
-    }));
+  const handleLoadTemplate = async (template: any) => {
+    try {
+      if (selectedZone.zoneName === "") return;
+
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0];
+
+      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`
+          widgets: template.widgets,
+        });
+
+        useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId);
+
+        if (Array.isArray(template.floatingWidget)) {
+          template.floatingWidget.forEach((val: any) => {
+            useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, val);
+          });
+        }
+      }
+    } catch (error) {
+      console.error("Error loading template:", error);
+    }
   };
 
+
   return (
     <div
       className="template-list"
@@ -41,7 +92,7 @@ const Templates = () => {
             transition: "box-shadow 0.3s ease",
           }}
         >
-          {template.snapshot && (
+          {template?.snapshot && (
             <div style={{ position: "relative", paddingBottom: "56.25%" }}>
               {" "}
               {/* 16:9 aspect ratio */}
@@ -122,3 +173,4 @@ const Templates = () => {
 };
 
 export default Templates;
+

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

@@ -20,17 +20,16 @@ const ZoneProperties: React.FC = () => {
     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);