Refactor zone-related API calls to use zoneUuid instead of zoneId; update endpoint versions to V1; add authorization headers with tokens; improve error handling and logging

app/package-lock.json

@@ -10133,6 +10133,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/dxf-parser/-/dxf-parser-1.1.2.tgz",
       "integrity": "sha512-GPTumUvRkounlIazLIyJMmTWt+nlg+ksS0Hdm8jWvejmZKBTz6gvHTam76wRm4PQMma5sgKLThblQyeIJcH79Q==",
+      "license": "MIT",
       "dependencies": {
         "loglevel": "^1.7.1"
       }

app/src/components/Dashboard/SidePannel.tsx

@@ -41,9 +41,8 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
     try {
       const projectId = generateProjectId();
       useSocketStore.getState().initializeSocket(email, organization, token);
-      console.log("projectId: ", projectId);
-      navigate(`/${projectId}`);
-      setLoadingProgress(1);
+
+   
       //API for creating new Project
       // const project = await createProject(
       //   projectId,
@@ -60,6 +59,18 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
       };
       console.log("projectSocket: ", projectSocket);
       if (projectSocket) {
+        // console.log('addProject: ', addProject);
+        const handleResponse = (data: any) => {
+          console.log('Project add response:', data);
+          if (data.message === "Project created successfully") {
+            setLoadingProgress(1)
+            navigate(`/${data.data.projectId}`);
+          }
+          projectSocket.off("v1-project:response:add", handleResponse); // Clean up
+        };
+        projectSocket.on("v1-project:response:add", handleResponse);
+
+        console.log('addProject: ', addProject);
         projectSocket.emit("v1:project:add", addProject);
       } else {
         console.error("Socket is not connected.");

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

@@ -20,6 +20,7 @@ import {
 import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
 import * as CONSTANTS from "../../../../types/world/worldConstants";
 import { validateBBox } from "@turf/helpers";
+import { useParams } from "react-router-dom";
 const GlobalProperties: React.FC = () => {
     const { toggleView, setToggleView } = useToggleView();
     const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
@@ -37,6 +38,7 @@ const GlobalProperties: React.FC = () => {
 
     const [limitGridDistance, setLimitGridDistance] = useState(false);
     const [gridDistance, setGridDistance] = useState<number>(3);
+    const { projectId } = useParams();
 
     const optimizeScene = async (value: any) => {
         const email = localStorage.getItem("email");
@@ -49,7 +51,8 @@ const GlobalProperties: React.FC = () => {
             roofVisibility,
             shadows,
             30,
-            true
+            true,
+            projectId
         );
         setRenderDistance(30);
         setLimitDistance(true);
@@ -67,7 +70,8 @@ const GlobalProperties: React.FC = () => {
                 roofVisibility,
                 shadows,
                 75,
-                !limitDistance
+                !limitDistance,
+                projectId
             );
             setRenderDistance(75);
         } else {
@@ -78,7 +82,8 @@ const GlobalProperties: React.FC = () => {
                 roofVisibility,
                 shadows,
                 renderDistance,
-                !limitDistance
+                !limitDistance,
+                projectId
             );
         }
         setLimitDistance(!limitDistance);
@@ -111,7 +116,8 @@ const GlobalProperties: React.FC = () => {
             roofVisibility,
             shadows,
             value,
-            limitDistance
+            limitDistance,
+            projectId
         );
     };
 
@@ -128,7 +134,8 @@ const GlobalProperties: React.FC = () => {
             !roofVisibility,
             shadows,
             renderDistance,
-            limitDistance
+            limitDistance,
+            projectId
         );
         //
 
@@ -157,7 +164,7 @@ const GlobalProperties: React.FC = () => {
             roofVisibility,
             shadows,
             renderDistance,
-            limitDistance
+            limitDistance,projectId
         );
         //
 
@@ -186,7 +193,8 @@ const GlobalProperties: React.FC = () => {
             roofVisibility,
             !shadows,
             renderDistance,
-            limitDistance
+            limitDistance,
+            projectId
         );
         //
 

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

@@ -28,7 +28,7 @@ const ZoneProperties: React.FC = () => {
       const organization = email?.split("@")[1]?.split(".")[0];
 
       let zonesdata = {
-        zoneId: selectedZone.zoneId,
+        zoneUuid: selectedZone.zoneUuid,
         viewPortposition: zonePosition,
         viewPortCenter: zoneTarget,
       };
@@ -52,7 +52,7 @@ const ZoneProperties: React.FC = () => {
     const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0];
     const zonesdata = {
-      zoneId: selectedZone.zoneId,
+      zoneUuid: selectedZone.zoneUuid,
       zoneName: newName,
     };
     // Call your API to update the zone
@@ -61,7 +61,7 @@ const ZoneProperties: React.FC = () => {
     if (response.message === "updated successfully") {
       setZones((prevZones: any[]) =>
         prevZones.map((zone) =>
-          zone.zoneId === selectedZone.zoneId
+          zone.zoneUuid === selectedZone.zoneUuid
             ? { ...zone, zoneName: newName }
             : zone
         )
@@ -80,7 +80,7 @@ const ZoneProperties: React.FC = () => {
     return zones.some(
       (zone: any) =>
         zone.zoneName.trim().toLowerCase() === name.trim().toLowerCase() &&
-        zone.zoneId !== selectedZone.zoneId
+        zone.zoneUuid !== selectedZone.zoneUuid
     );
   };
 

app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx

@@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { useParams } from "react-router-dom";
 
 type Props = {};
 
@@ -24,6 +25,8 @@ const BarChartInput = (props: Props) => {
   const email = localStorage.getItem("email") || "";
   const organization = email?.split("@")[1]?.split(".")[0];
   const [isLoading, setLoading] = useState<boolean>(true);
+  const { projectId } = useParams();
+
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -50,7 +53,15 @@ const BarChartInput = (props: Props) => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            {
+              headers: {
+                Authorization: "Bearer <access_token>",  // Replace with actual token
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",  // Coerce null to empty string
+                refresh_token: localStorage.getItem("refreshToken") || "",
+              },
+            }
           );
           if (response.status === 200) {
             setSelections(response.data.Data.measurements);
@@ -83,10 +94,18 @@ const BarChartInput = (props: Props) => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+        {
+          headers: {
+            Authorization: "Bearer <access_token>",  // Replace with actual token
+            "Content-Type": "application/json",
+            token: localStorage.getItem("token") || "",  // Coerce null to empty string
+            refresh_token: localStorage.getItem("refreshToken") || "",
+          },
+        },
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             panel: selectedChartId.panel,

app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx

@@ -87,10 +87,10 @@ const FleetEfficiencyInputComponent = (props: Props) => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/floatwidget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             header: inputName,

app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx

@@ -86,10 +86,10 @@ const FlotingWidgetInput = (props: Props) => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/floatwidget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             header: inputName,

app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx

@@ -123,6 +123,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { useParams } from "react-router-dom";
 
 type Props = {};
 
@@ -140,6 +141,7 @@ const LineGrapInput = (props: Props) => {
   const email = localStorage.getItem("email") || "";
   const organization = email?.split("@")[1]?.split(".")[0];
   const [isLoading, setLoading] = useState<boolean>(true);
+  const { projectId } = useParams();
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -166,7 +168,15 @@ const LineGrapInput = (props: Props) => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            {
+              headers: {
+                Authorization: "Bearer <access_token>",  // Replace with actual token
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",  // Coerce null to empty string
+                refresh_token: localStorage.getItem("refreshToken") || "",
+              },
+            }
           );
           if (response.status === 200) {
             setSelections(response.data.Data.measurements);
@@ -199,10 +209,18 @@ const LineGrapInput = (props: Props) => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+        {
+          headers: {
+            Authorization: "Bearer <access_token>",  // Replace with actual token
+            "Content-Type": "application/json",
+            token: localStorage.getItem("token") || "",  // Coerce null to empty string
+            refresh_token: localStorage.getItem("refreshToken") || "",
+          },
+        },
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             panel: selectedChartId.panel,

app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx

@@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { useParams } from "react-router-dom";
 
 type Props = {};
 
@@ -24,6 +25,8 @@ const PieChartInput = (props: Props) => {
   const email = localStorage.getItem("email") || "";
   const organization = email?.split("@")[1]?.split(".")[0];
   const [isLoading, setLoading] = useState<boolean>(true);
+  const { projectId } = useParams();
+
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -50,7 +53,15 @@ const PieChartInput = (props: Props) => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            {
+              headers: {
+                Authorization: "Bearer <access_token>",  // Replace with actual token
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",  // Coerce null to empty string
+                refresh_token: localStorage.getItem("refreshToken") || "",
+              },
+            }
           );
           if (response.status === 200) {
             setSelections(response.data.Data.measurements);
@@ -83,10 +94,18 @@ const PieChartInput = (props: Props) => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+        {
+          headers: {
+            Authorization: "Bearer <access_token>",  // Replace with actual token
+            "Content-Type": "application/json",
+            token: localStorage.getItem("token") || "",  // Coerce null to empty string
+            refresh_token: localStorage.getItem("refreshToken") || "",
+          },
+        },
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             panel: selectedChartId.panel,

app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx

@@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { useParams } from "react-router-dom";
 
 type Props = {};
 
@@ -24,6 +25,8 @@ const Progress1Input = (props: Props) => {
   const email = localStorage.getItem("email") || "";
   const organization = email?.split("@")[1]?.split(".")[0];
   const [isLoading, setLoading] = useState<boolean>(true);
+  const { projectId } = useParams();
+
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -50,7 +53,15 @@ const Progress1Input = (props: Props) => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            {
+              headers: {
+                Authorization: "Bearer <access_token>",  // Replace with actual token
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",  // Coerce null to empty string
+                refresh_token: localStorage.getItem("refreshToken") || "",
+              },
+            }
           );
           if (response.status === 200) {
             setSelections(response.data.Data.measurements);
@@ -83,10 +94,18 @@ const Progress1Input = (props: Props) => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+        {
+          headers: {
+            Authorization: "Bearer <access_token>",  // Replace with actual token
+            "Content-Type": "application/json",
+            token: localStorage.getItem("token") || "",  // Coerce null to empty string
+            refresh_token: localStorage.getItem("refreshToken") || "",
+          },
+        },
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             panel: selectedChartId.panel,

app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx

@@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { useParams } from "react-router-dom";
 
 type Props = {};
 
@@ -24,6 +25,8 @@ const Progress2Input = (props: Props) => {
   const email = localStorage.getItem("email") || "";
   const organization = email?.split("@")[1]?.split(".")[0];
   const [isLoading, setLoading] = useState<boolean>(true);
+  const { projectId } = useParams();
+
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -50,7 +53,15 @@ const Progress2Input = (props: Props) => {
       if (selectedChartId.id !== "") {
         try {
           const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${selectedChartId.id}/${organization}`
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            {
+              headers: {
+                Authorization: "Bearer <access_token>",  // Replace with actual token
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",  // Coerce null to empty string
+                refresh_token: localStorage.getItem("refreshToken") || "",
+              },
+            }
           );
           if (response.status === 200) {
             setSelections(response.data.Data.measurements);
@@ -83,10 +94,18 @@ const Progress2Input = (props: Props) => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+        {
+          headers: {
+            Authorization: "Bearer <access_token>",  // Replace with actual token
+            "Content-Type": "application/json",
+            token: localStorage.getItem("token") || "",  // Coerce null to empty string
+            refresh_token: localStorage.getItem("refreshToken") || "",
+          },
+        },
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             panel: selectedChartId.panel,

app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx

@@ -84,10 +84,10 @@ const WarehouseThroughputInputComponent = (props: Props) => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/floatwidget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             header: inputName,

app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx

@@ -83,10 +83,10 @@ const Widget2InputCard3D = (props: Props) => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/3dwidget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget3d/save`,
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             widgetName: inputName,

app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx

@@ -80,10 +80,10 @@ const Widget3InputCard3D = () => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/3dwidget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget3d/save`,
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             widgetName: inputName,

app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx

@@ -83,10 +83,10 @@ const Widget4InputCard3D = (props: Props) => {
   ) => {
     try {
       const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/3dwidget/save`,
+        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget3d/save`,
         {
           organization: organization,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
           widget: {
             id: selectedChartId.id,
             widgetName: inputName,

app/src/components/ui/Tools.tsx

@@ -37,6 +37,7 @@ import {
   use3DWidget,
   useFloatingWidget,
 } from "../../store/visualization/useDroppedObjectsStore";
+import { useParams } from "react-router-dom";
 
 // Utility component
 const ToolButton = ({
@@ -89,6 +90,7 @@ const Tools: React.FC = () => {
 
   const dropdownRef = useRef<HTMLButtonElement>(null);
   const [openDrop, setOpenDrop] = useState(false);
+  const { projectId } = useParams();
 
   // 1. Set UI toggles on initial render
   useEffect(() => {
@@ -257,6 +259,7 @@ const Tools: React.FC = () => {
             selectedZone,
             templates,
             visualizationSocket,
+            projectId
           })
         }
       />

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

@@ -17,7 +17,7 @@ interface DropDownListProps {
 }
 
 interface Zone {
-  zoneId: string;
+  zoneUuid: string;
   zoneName: string;
   points: [number, number, number][]; // polygon vertices
 }
@@ -93,7 +93,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
         }));
 
       return {
-        id: zone.zoneId,
+        id: zone.zoneUuid,
         name: zone.zoneName,
         assets: assetsInZone,
       };

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

@@ -20,6 +20,7 @@ import {
 import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
 import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
 import OuterClick from "../../../utils/outerClick";
+import { useParams } from "react-router-dom";
 
 interface Asset {
   id: string;
@@ -50,6 +51,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     {}
   );
   const { setFloorItems } = useFloorItems();
+  const { projectId } = useParams();
 
 
   useEffect(() => {
@@ -58,23 +60,23 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       activeSides: [],
       panelOrder: [],
       lockedPanels: [],
-      zoneId: "",
+      zoneUuid: "",
       zoneViewPortTarget: [],
       zoneViewPortPosition: [],
       widgets: [],
     });
   }, [activeModule]);
 
-  const toggleZoneExpansion = (zoneId: string) => {
+  const toggleZoneExpansion = (zoneUuid: string) => {
     setExpandedZones((prev) => ({
       ...prev,
-      [zoneId]: !prev[zoneId],
+      [zoneUuid]: !prev[zoneUuid],
     }));
   };
 
   async function handleSelectZone(id: string) {
     try {
-      if (selectedZone?.zoneId === id) {
+      if (selectedZone?.zoneUuid === id) {
         return;
       }
 
@@ -83,14 +85,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       const email = localStorage.getItem("email");
       const organization = email?.split("@")[1]?.split(".")[0] ?? "";
 
-      let response = await getZoneData(id, organization);
+      let response = await getZoneData(id, organization, projectId);
       setSelectedZone({
         zoneName: response?.zoneName,
         activeSides: response?.activeSides ?? [],
         panelOrder: response?.panelOrder ?? [],
         lockedPanels: response?.lockedPanels ?? [],
         widgets: response?.widgets ?? [],
-        zoneId: response?.zoneId,
+        zoneUuid: response?.zoneUuid,
         zoneViewPortTarget: response?.viewPortCenter ?? [],
         zoneViewPortPosition: response?.viewPortposition ?? [],
       });
@@ -110,7 +112,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     const isDuplicate = zones.some(
       (zone: any) =>
         zone.zoneName.trim().toLowerCase() === newName.trim().toLowerCase() &&
-        zone.zoneId !== selectedZone.zoneId
+        zone.zoneUuid !== selectedZone.zoneUuid
     );
 
     if (isDuplicate) {
@@ -119,7 +121,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     }
 
     const zonesdata = {
-      zoneId: selectedZone.zoneId,
+      zoneUuid: selectedZone.zoneUuid,
       zoneName: newName,
     };
 
@@ -129,7 +131,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
 
       setZones((prevZones: any[]) =>
         prevZones.map((zone) =>
-          zone.zoneId === selectedZone.zoneId
+          zone.zoneUuid === selectedZone.zoneUuid
             ? { ...zone, zoneName: newName }
             : zone
         )
@@ -161,7 +163,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     return zones.some(
       (zone: any) =>
         zone.zoneName.trim().toLowerCase() === name.trim().toLowerCase() &&
-        zone.zoneId !== selectedZone.zoneId
+        zone.zoneUuid !== selectedZone.zoneUuid
     );
   };
 
@@ -199,7 +201,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
         if (isOutsideClick(evt.target)) {
           // Clear selected zone
           setSelectedZone({
-            zoneId: '',
+            zoneUuid: '',
             zoneName: '',
             activeSides: [],
             panelOrder: [],
@@ -241,7 +243,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                   toggleZoneExpansion(item.id);
                 }}
               >
-                <div className={`list-item ${selectedZone.zoneId === item.id ? "active" : ""}`}>
+                <div className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""}`}>
                   <div className="zone-header">
                     <button className="value" id="zone-name">
                       <RenameInput

app/src/modules/builder/IntialLoad/loadInitialFloorItems.ts

@@ -12,14 +12,15 @@ async function loadInitialFloorItems(
     itemsGroup: Types.RefGroup,
     setFloorItems: Types.setFloorItemSetState,
     addEvent: (event: EventsSchema) => void,
-    renderDistance: number
+    renderDistance: number,
+    projectId?:string
 ): Promise<void> {
     if (!itemsGroup.current) return;
     let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
     const email = localStorage.getItem('email');
     const organization = (email!.split("@")[1]).split(".")[0];
 
-    const items = await getFloorAssets(organization);
+    const items = await getFloorAssets(organization,projectId);
     localStorage.setItem("FloorItems", JSON.stringify(items));
     await initializeDB();
 
@@ -36,7 +37,7 @@ async function loadInitialFloorItems(
         let modelsLoaded = 0;
         const modelsToLoad = storedFloorItems.length;
 
-        const camData = await getCamera(organization, localStorage.getItem('userId')!);
+        const camData = await getCamera(organization, localStorage.getItem('userId')!,projectId);
         let storedPosition;
         if (camData && camData.position) {
             storedPosition = camData?.position;

app/src/modules/builder/IntialLoad/loadInitialWallItems.ts

@@ -7,6 +7,7 @@ import { retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils';
 
 async function loadInitialWallItems(
     setWallItems: Types.setWallItemSetState,
+    projectId?:string
 ): Promise<void> {
     try {
         const email = localStorage.getItem('email');
@@ -15,7 +16,7 @@ async function loadInitialWallItems(
         }
 
         const organization = email.split("@")[1].split(".")[0];
-        const items = await getWallItems(organization);
+        const items = await getWallItems(organization,projectId);
 
         let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
 

app/src/modules/builder/assetGroup/assetsGroup.tsx

@@ -8,6 +8,7 @@ import { FloorItems } from "../../../types/world/worldTypes";
 import { useAssetsStore } from "../../../store/builder/useAssetStore";
 import Models from "./models/models";
 import { useGLTF } from "@react-three/drei";
+import { useParams } from "react-router-dom";
 
 const gltfLoaderWorker = new Worker(
     new URL(
@@ -19,6 +20,7 @@ const gltfLoaderWorker = new Worker(
 function AssetsGroup() {
     const { setLoadingProgress } = useLoadingProgress();
     const { setAssets } = useAssetsStore();
+    const { projectId } = useParams();
 
     const loader = new GLTFLoader();
     const dracoLoader = new DRACOLoader();
@@ -48,7 +50,8 @@ function AssetsGroup() {
             }
         };
 
-        getFloorAssets(organization).then((data) => {
+        getFloorAssets(organization,projectId).then((data) => {
+            // console.log('data: ', data);
             if (data.length > 0) {
                 const uniqueItems = (data as FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.modelfileID === item.modelfileID));
                 totalAssets = uniqueItems.length;
@@ -77,7 +80,7 @@ function AssetsGroup() {
 
                     if (loadedAssets === totalAssets) {
                         const assets: Asset[] = [];
-                        getFloorAssets(organization).then((data: FloorItems) => {
+                        getFloorAssets(organization,projectId).then((data: FloorItems) => {
                             data.forEach((item) => {
                                 if (item.eventData) {
                                     assets.push({

app/src/modules/builder/builder.tsx

@@ -50,6 +50,7 @@ import LayoutImage from "./layout/layoutImage";
 import AssetsGroup from "./assetGroup/assetsGroup";
 import { Bvh } from "@react-three/drei";
 import DxfFile from "./dfx/LoadBlueprint";
+import { useParams } from "react-router-dom";
 
 export default function Builder() {
     const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
@@ -117,6 +118,7 @@ export default function Builder() {
     const { setUpdateScene } = useUpdateScene();
     const { setWalls } = useWalls();
     const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
+    const { projectId } = useParams();
 
     // const loader = new GLTFLoader();
     // const dracoLoader = new DRACOLoader();
@@ -158,7 +160,7 @@ export default function Builder() {
         async function fetchVisibility() {
             const visibility = await findEnvironment(
                 organization,
-                localStorage.getItem("userId")!
+                localStorage.getItem("userId")!,projectId
             );
             if (visibility) {
                 setRoofVisibility(visibility.roofVisibility);

app/src/modules/builder/dfx/LoadBlueprint.tsx

@@ -7,6 +7,7 @@ import { TransformControls } from '@react-three/drei';
 import { getWallPointsFromBlueprint } from './functions/getWallPointsFromBlueprint';
 import * as Types from '../../../types/world/worldTypes';
 import arrayLineToObject from '../geomentries/lines/lineConvertions/arrayLineToObject';
+import { useParams } from 'react-router-dom';
 
 // Interface defining the props for the DxfFile component
 interface DxfFileProps {
@@ -34,6 +35,7 @@ const DxfFile = ({
     const { setUpdateScene } = useUpdateScene();
     const { toggleView } = useToggleView();
     const { socket } = useSocketStore();
+    const { projectId } = useParams();
 
     // Refs for storing line objects
     const lineRefs = useRef<Line[]>([]);
@@ -56,6 +58,7 @@ const DxfFile = ({
                 const lineData = arrayLineToObject(line as Types.Line);
                 const email = localStorage.getItem('email')
                 const organization = (email!.split("@")[1]).split(".")[0];
+                const userId = localStorage.getItem("userId");
 
                 //REST
 
@@ -68,7 +71,8 @@ const DxfFile = ({
                     layer: lineData.layer,
                     line: lineData.line,
                     type: lineData.type,
-                    socketId: socket.id
+                    socketId: socket.id,
+                    projectId,userId
                 }
 
                 socket.emit('v1:Line:create', input);

app/src/modules/builder/eventDeclaration/dragControlDeclaration.ts

@@ -15,7 +15,8 @@ export default async function addDragControl(
     floorPlanGroupLine: Types.RefGroup,
     lines: Types.RefLines,
     onlyFloorlines: Types.RefOnlyFloorLines,
-    socket: Socket<any>
+    socket: Socket<any>,
+    projectId?:string
 ) {
 
     //////////  Dragging Point and also change the size to indicate during hover  //////////
@@ -40,6 +41,7 @@ export default async function addDragControl(
         if (!dragPointControls.current) return;
         const email = localStorage.getItem('email')
         const organization = (email!.split("@")[1]).split(".")[0];
+        const userId = localStorage.getItem("userId");
 
         //REST
 
@@ -55,7 +57,8 @@ export default async function addDragControl(
             organization: organization,
             position: { "x": event.object.position.x, "y": 0.01, "z": event.object.position.z },
             uuid: event.object.uuid,
-            socketId: socket.id
+            socketId: socket.id,
+            projectId,userId
         }
 
         socket.emit('v1:Line:update', data);

app/src/modules/builder/geomentries/assets/addAssetModel.ts

@@ -11,6 +11,7 @@ import { Socket } from 'socket.io-client';
 import * as CONSTANTS from '../../../../types/world/worldConstants';
 import { setFloorItemApi } from '../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi';
 import PointsCalculator from '../../../simulation/events/points/functions/pointsCalculator';
+import { useParams } from 'react-router-dom';
 
 async function addAssetModel(
     raycaster: THREE.Raycaster,
@@ -26,12 +27,14 @@ async function addAssetModel(
     setSelectedItem: any,
     addEvent: (event: EventsSchema) => void,
     plane: Types.RefMesh,
+    projectId?: string
 ): Promise<void> {
 
     //////////  Load Floor GLtf's and set the positions, rotation, type etc. in state and store in localstorage  //////////
 
     let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
 
+
     try {
         isTempLoader.current = true;
         const loader = new GLTFLoader();
@@ -65,7 +68,7 @@ async function addAssetModel(
             const cachedModel = THREE.Cache.get(selectedItem.id);
             if (cachedModel) {
                 // console.log(`[Cache] Fetching ${selectedItem.name}`);
-                handleModelLoad(cachedModel, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, addEvent, socket);
+                handleModelLoad(cachedModel, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, addEvent, socket, projectId);
                 return;
             } else {
                 const cachedModelBlob = await retrieveGLTF(selectedItem.id);
@@ -78,7 +81,7 @@ async function addAssetModel(
                         URL.revokeObjectURL(blobUrl);
                         THREE.Cache.remove(blobUrl);
                         THREE.Cache.add(selectedItem.id, gltf);
-                        handleModelLoad(gltf, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, addEvent, socket);
+                        handleModelLoad(gltf, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, addEvent, socket, projectId);
                     },
                         () => {
                             TempLoader(intersectPoint!, isTempLoader, tempLoader, itemsGroup);
@@ -90,7 +93,7 @@ async function addAssetModel(
                         const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v2/AssetFile/${selectedItem.id}`).then((res) => res.blob());
                         await storeGLTF(selectedItem.id, modelBlob);
                         THREE.Cache.add(selectedItem.id, gltf);
-                        await handleModelLoad(gltf, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, addEvent, socket);
+                        await handleModelLoad(gltf, intersectPoint!, selectedItem, itemsGroup, tempLoader, isTempLoader, setFloorItems, addEvent, socket, projectId);
                     },
                         () => {
                             TempLoader(intersectPoint!, isTempLoader, tempLoader, itemsGroup);
@@ -115,7 +118,8 @@ async function handleModelLoad(
     isTempLoader: Types.RefBoolean,
     setFloorItems: Types.setFloorItemSetState,
     addEvent: (event: EventsSchema) => void,
-    socket: Socket<any>
+    socket: Socket<any>,
+    projectId?: string
 ) {
     const model = gltf.scene.clone();
     model.userData = { name: selectedItem.name, modelId: selectedItem.id, modelUuid: model.uuid };
@@ -149,6 +153,7 @@ async function handleModelLoad(
 
     const email = localStorage.getItem("email");
     const organization = email ? email.split("@")[1].split(".")[0] : "";
+    const userId = localStorage.getItem("userId");
 
     // API
 
@@ -381,7 +386,8 @@ async function handleModelLoad(
             isLocked: false,
             isVisible: true,
             socketId: socket.id,
-            eventData: eventData
+            eventData: eventData,
+            projectId, userId
         };
 
         model.userData.eventData = eventData;
@@ -394,7 +400,8 @@ async function handleModelLoad(
             return updatedItems;
         });
 
-        socket.emit("v2:model-asset:add", completeData);
+        console.log('completeData: ', completeData);
+        socket.emit("v1:model-asset:add", completeData);
 
         gsap.to(model.position, { y: newFloorItem.position[1], duration: 1.5, ease: "power2.out" });
         gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power2.out", onComplete: () => { echo.success("Model Added!"); } });
@@ -409,7 +416,8 @@ async function handleModelLoad(
             rotation: { x: model.rotation.x, y: model.rotation.y, z: model.rotation.z },
             isLocked: false,
             isVisible: true,
-            socketId: socket.id
+            socketId: socket.id,
+            projectId,userId
         };
 
         setFloorItems((prevItems) => {
@@ -418,7 +426,8 @@ async function handleModelLoad(
             return updatedItems;
         });
 
-        socket.emit("v2:model-asset:add", data);
+        // console.log('data: ', data);
+        socket.emit("v1:model-asset:add", data);
 
         gsap.to(model.position, { y: newFloorItem.position[1], duration: 1.5, ease: "power2.out" });
         gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power2.out", onComplete: () => { echo.success("Model Added!"); } });

app/src/modules/builder/geomentries/assets/deleteFloorItems.ts

@@ -12,7 +12,8 @@ async function DeleteFloorItems(
     itemsGroup: Types.RefGroup,
     hoveredDeletableFloorItem: Types.RefMesh,
     setFloorItems: Types.setFloorItemSetState,
-    socket: Socket<any>
+    socket: Socket<any>,
+    projectId?: string
 ): Promise<void> {
 
     ////////// Deleting the hovered Floor GLTF from the scene (itemsGroup.current) and from the floorItems and also update it in the localstorage //////////
@@ -21,8 +22,9 @@ async function DeleteFloorItems(
 
         const email = localStorage.getItem('email')
         const organization = (email!.split("@")[1]).split(".")[0];
+        const userId = localStorage.getItem("userId");
 
-        const items = await getFloorAssets(organization);
+        const items = await getFloorAssets(organization,projectId);
         const removedItem = items.find(
             (item: { modelUuid: string }) => item.modelUuid === hoveredDeletableFloorItem.current?.uuid
         );
@@ -41,10 +43,10 @@ async function DeleteFloorItems(
             organization: organization,
             modelUuid: removedItem.modelUuid,
             modelName: removedItem.modelName,
-            socketId: socket.id
+            socketId: socket.id,projectId,userId
         }
 
-        const response = socket.emit('v2:model-asset:delete', data)
+        const response = socket.emit('v1:model-asset:delete', data)
 
         useEventsStore.getState().removeEvent(removedItem.modelUuid);
         useProductStore.getState().deleteEvent(removedItem.modelUuid);

app/src/modules/builder/geomentries/floors/drawOnlyFloor.ts

@@ -37,7 +37,8 @@ async function drawOnlyFloor(
     setNewLines: any,
     setDeletedLines: any,
     activeLayer: Types.Number,
-    socket: Socket<any>
+    socket: Socket<any>,
+    projectId?:string
 ): Promise<void> {
 
     //////////  Creating lines Based on the positions clicked  //////////
@@ -72,7 +73,7 @@ async function drawOnlyFloor(
 
                 if (intersectionPoint) {
 
-                    const newLines = splitLine(visibleIntersect, intersectionPoint, currentLayerPoint, floorPlanGroupPoint, dragPointControls, isSnappedUUID, lines, setDeletedLines, floorPlanGroupLine, socket, pointColor, lineColor, intersectsLines[0].object.userData.linePoints[0][3]);
+                    const newLines = splitLine(visibleIntersect, intersectionPoint, currentLayerPoint, floorPlanGroupPoint, dragPointControls, isSnappedUUID, lines, setDeletedLines, floorPlanGroupLine, socket, pointColor, lineColor, intersectsLines[0].object.userData.linePoints[0][3],projectId);
                     setNewLines([newLines[0], newLines[1]]);
 
                     (line.current as Types.Line).push([new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z), isSnappedUUID.current!, activeLayer, CONSTANTS.lineConfig.floorName]);
@@ -83,6 +84,7 @@ async function drawOnlyFloor(
 
                         const email = localStorage.getItem('email')
                         const organization = (email!.split("@")[1]).split(".")[0];
+                        const userId = localStorage.getItem("userId");
 
                         //REST
 
@@ -95,7 +97,8 @@ async function drawOnlyFloor(
                             layer: data.layer,
                             line: data.line,
                             type: data.type,
-                            socketId: socket.id
+                            socketId: socket.id,
+                            projectId,userId
                         }
 
                         socket.emit('v1:Line:create', input);
@@ -146,6 +149,7 @@ async function drawOnlyFloor(
 
             const email = localStorage.getItem('email')
             const organization = (email!.split("@")[1]).split(".")[0];
+            const userId = localStorage.getItem("userId");
 
             //REST
 
@@ -158,7 +162,7 @@ async function drawOnlyFloor(
                 layer: data.layer,
                 line: data.line,
                 type: data.type,
-                socketId: socket.id
+                socketId: socket.id,projectId,userId
             }
 
             socket.emit('v1:Line:create', input);

app/src/modules/builder/geomentries/layers/deleteLayer.ts

@@ -14,7 +14,8 @@ async function DeleteLayer(
     floorGroup: Types.RefGroup,
     setDeletedLines: any,
     setRemovedLayer: Types.setRemoveLayerSetState,
-    socket: Socket<any>
+    socket: Socket<any>,
+    projectId?:string
 ): Promise<void> {
 
     //////////  Remove the Lines from the lines.current based on the removed layer and rearrange the layer number that are higher than the removed layer  //////////
@@ -23,6 +24,7 @@ async function DeleteLayer(
 
     const email = localStorage.getItem('email')
     const organization = (email!.split("@")[1]).split(".")[0];
+    const userId = localStorage.getItem("userId");
 
     //REST
 
@@ -33,7 +35,8 @@ async function DeleteLayer(
     const data = {
         organization: organization,
         layer: removedLayer,
-        socketId: socket.id
+        socketId: socket.id,
+        projectId,userId
     }
 
     socket.emit('v1:Line:delete:layer', data);

app/src/modules/builder/geomentries/lines/deleteLine.ts

@@ -11,7 +11,8 @@ function deleteLine(
     floorPlanGroupLine: Types.RefGroup,
     floorPlanGroupPoint: Types.RefGroup,
     setDeletedLines: any,
-    socket: Socket<any>
+    socket: Socket<any>,
+    projectId?: string
 ): void {
 
     //////////  Deleting a line and the points if they are not connected to any other line  //////////
@@ -25,6 +26,7 @@ function deleteLine(
 
     const email = localStorage.getItem('email')
     const organization = (email!.split("@")[1]).split(".")[0];
+    const userId = localStorage.getItem("userId");
 
     //REST
 
@@ -44,7 +46,8 @@ function deleteLine(
             { "uuid": linePoints[0][1] },
             { "uuid": linePoints[1][1] }
         ],
-        socketId: socket.id
+        socketId: socket.id,
+        projectId,userId
     }
 
     socket.emit('v1:Line:delete', data);

app/src/modules/builder/geomentries/lines/distanceText/distanceText.tsx

@@ -14,6 +14,7 @@ import { Vector2 } from "three";
 import * as Types from "../../../../../types/world/worldTypes";
 import getRoomsFromLines from "../getRoomsFromLines";
 import * as turf from '@turf/turf';
+import { useParams } from "react-router-dom";
 
 const DistanceText = () => {
   const [lines, setLines] = useState<
@@ -30,6 +31,7 @@ const DistanceText = () => {
   const { deletedLines, setDeletedLines } = useDeletedLines();
   const [linesState, setLinesState] = useState<Types.Lines>([]);
   const { roomsState, setRoomsState } = useRoomsState();
+  const { projectId } = useParams();
 
 
 
@@ -101,7 +103,7 @@ const DistanceText = () => {
     if (!email) return;
     const organization = email.split("@")[1].split(".")[0];
 
-    getLines(organization).then((data) => {
+    getLines(organization,projectId).then((data) => {
       data = objectLinesToArray(data);
       setLinesState(data);
 

app/src/modules/builder/geomentries/lines/drawWall.ts

@@ -33,7 +33,8 @@ async function drawWall(
     setNewLines: any,
     setDeletedLines: any,
     activeLayer: Types.Number,
-    socket: Socket<any>
+    socket: Socket<any>,
+    projectId?: string
 ): Promise<void> {
 
     //////////  Creating lines Based on the positions clicked  //////////
@@ -66,7 +67,7 @@ async function drawWall(
 
                 if (intersectionPoint) {
 
-                    const newLines = splitLine(visibleIntersect, intersectionPoint, currentLayerPoint, floorPlanGroupPoint, dragPointControls, isSnappedUUID, lines, setDeletedLines, floorPlanGroupLine, socket, CONSTANTS.pointConfig.wallOuterColor, CONSTANTS.lineConfig.wallColor, CONSTANTS.lineConfig.wallName);
+                    const newLines = splitLine(visibleIntersect, intersectionPoint, currentLayerPoint, floorPlanGroupPoint, dragPointControls, isSnappedUUID, lines, setDeletedLines, floorPlanGroupLine, socket, CONSTANTS.pointConfig.wallOuterColor, CONSTANTS.lineConfig.wallColor, CONSTANTS.lineConfig.wallName,projectId);
                     setNewLines([newLines[0], newLines[1]]);
 
                     (line.current as Types.Line).push([new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z), isSnappedUUID.current!, activeLayer, CONSTANTS.lineConfig.wallName,]);
@@ -76,6 +77,7 @@ async function drawWall(
 
                         const email = localStorage.getItem('email')
                         const organization = (email!.split("@")[1]).split(".")[0];
+                        const userId = localStorage.getItem("userId");
 
                         //REST
 
@@ -88,9 +90,11 @@ async function drawWall(
                             layer: data.layer,
                             line: data.line,
                             type: data.type,
-                            socketId: socket.id
+                            socketId: socket.id,
+                            projectId,userId
                         }
 
+                        console.log('input: ', input);
                         socket.emit('v1:Line:create', input);
 
                         setNewLines([newLines[0], newLines[1], line.current]);
@@ -135,6 +139,7 @@ async function drawWall(
 
             const email = localStorage.getItem('email')
             const organization = (email!.split("@")[1]).split(".")[0];
+            const userId = localStorage.getItem("userId");
 
             //REST
 
@@ -147,9 +152,11 @@ async function drawWall(
                 layer: data.layer,
                 line: data.line,
                 type: data.type,
-                socketId: socket.id
+                socketId: socket.id,
+                projectId,userId
             }
 
+            console.log('input: ', input);
             socket.emit('v1:Line:create', input);
 
             setNewLines([line.current])

app/src/modules/builder/geomentries/lines/splitLine.ts

@@ -23,6 +23,7 @@ function splitLine(
     pointColor: Types.String,
     lineColor: Types.String,
     lineType: Types.String,
+    projectId?: string
 ): [Types.Line, Types.Line] {
 
     //////////  Removing the clicked line and splitting it with the clicked position adding a new point and two new lines  //////////
@@ -35,6 +36,7 @@ function splitLine(
 
     const email = localStorage.getItem('email')
     const organization = (email!.split("@")[1]).split(".")[0];
+    const userId = localStorage.getItem("userId");
 
     //REST
 
@@ -55,7 +57,7 @@ function splitLine(
             { "uuid": visibleIntersect.object.userData.linePoints[0][1] },
             { "uuid": visibleIntersect.object.userData.linePoints[1][1] }
         ],
-        socketId: socket.id
+        socketId: socket.id,projectId,userId
     }
 
     socket.emit('v1:Line:delete', data);
@@ -92,7 +94,7 @@ function splitLine(
         layer: line1.layer,
         line: line1.line,
         type: line1.type,
-        socketId: socket.id
+        socketId: socket.id,projectId,userId
     }
 
     socket.emit('v1:Line:create', input1);
@@ -108,7 +110,7 @@ function splitLine(
         layer: line2.layer,
         line: line2.line,
         type: line2.type,
-        socketId: socket.id
+        socketId: socket.id,projectId,userId
     }
 
     socket.emit('v1:Line:create', input2);

app/src/modules/builder/geomentries/points/deletePoint.ts

@@ -13,7 +13,8 @@ function deletePoint(
     floorPlanGroupLine: Types.RefGroup,
     lines: Types.RefLines,
     setDeletedLines: any,
-    socket: Socket<any>
+    socket: Socket<any>,
+    projectId?:string
 ): void {
     //////////  Deleting a Point and the lines that are connected to it  //////////
 
@@ -28,6 +29,7 @@ function deletePoint(
 
     const email = localStorage.getItem('email')
     const organization = (email!.split("@")[1]).split(".")[0];
+    const userId = localStorage.getItem("userId");
 
     //REST
 
@@ -38,7 +40,8 @@ function deletePoint(
     const data = {
         organization: organization,
         uuid: DeletedPointUUID,
-        socketId: socket.id
+        socketId: socket.id,
+        projectId,userId
     }
 
     socket.emit('v1:Line:delete:point', data);

app/src/modules/builder/geomentries/walls/addWallItems.ts

@@ -12,7 +12,8 @@ async function AddWallItems(
     raycaster: THREE.Raycaster,
     CSGGroup: Types.RefMesh,
     setWallItems: Types.setWallItemSetState,
-    socket: Socket<any>
+    socket: Socket<any>,
+    projectId?: string
 ): Promise<void> {
     let intersects = raycaster?.intersectObject(CSGGroup.current!, true);
     const wallRaycastIntersection = intersects?.find((child) => child.object.name.includes("WallRaycastReference"));
@@ -100,6 +101,7 @@ async function AddWallItems(
 
         const email = localStorage.getItem('email');
         const organization = email ? (email.split("@")[1]).split(".")[0] : 'default';
+        const userId = localStorage.getItem("userId");
 
         const data = {
             organization: organization,
@@ -112,9 +114,10 @@ async function AddWallItems(
             position: newWallItem.position,
             quaternion: newWallItem.quaternion,
             scale: newWallItem.scale,
-            socketId: socket.id
+            socketId: socket.id, projectId, userId
         };
 
+        // console.log('data: ', data);
         socket.emit('v1:wallItems:set', data);
 
         setWallItems((prevItems) => {

app/src/modules/builder/geomentries/walls/deleteWallItems.ts

@@ -6,7 +6,8 @@ function DeleteWallItems(
     hoveredDeletableWallItem: Types.RefMesh,
     setWallItems: Types.setWallItemSetState,
     wallItems: Types.wallItems,
-    socket: Socket<any>
+    socket: Socket<any>,
+    projectId?: string
 ): void {
 
     ////////// Deleting the hovered Wall GLTF from thewallItems and also update it in the localstorage //////////
@@ -23,6 +24,7 @@ function DeleteWallItems(
 
             const email = localStorage.getItem('email')
             const organization = (email!.split("@")[1]).split(".")[0];
+            const userId = localStorage.getItem("userId");
 
             //REST
 
@@ -34,7 +36,7 @@ function DeleteWallItems(
                 organization: organization,
                 modelUuid: removedItem?.model?.uuid!,
                 modelName: removedItem?.modelName!,
-                socketId: socket.id
+                socketId: socket.id,projectId,userId
             }
 
             socket.emit('v1:wallItems:delete', data);

app/src/modules/builder/groups/floorGroupAisle.tsx

@@ -1,242 +1,367 @@
-import * as THREE from 'three';
-import * as  Types from '../../../types/world/worldTypes';
-import * as CONSTANTS from '../../../types/world/worldConstants';
+import * as THREE from "three";
+import * as Types from "../../../types/world/worldTypes";
+import * as CONSTANTS from "../../../types/world/worldConstants";
 import { useThree } from "@react-three/fiber";
-import { useToggleView, useActiveLayer, useSocketStore, useDeletePointOrLine, useUpdateScene, useNewLines, useToolMode } from "../../../store/builder/store";
+import {
+  useToggleView,
+  useActiveLayer,
+  useSocketStore,
+  useDeletePointOrLine,
+  useUpdateScene,
+  useNewLines,
+  useToolMode,
+} from "../../../store/builder/store";
 import { useEffect } from "react";
 import removeSoloPoint from "../geomentries/points/removeSoloPoint";
 import removeReferenceLine from "../geomentries/lines/removeReferenceLine";
 import getClosestIntersection from "../geomentries/lines/getClosestIntersection";
 import addPointToScene from "../geomentries/points/addPointToScene";
-import arrayLineToObject from '../geomentries/lines/lineConvertions/arrayLineToObject';
+import arrayLineToObject from "../geomentries/lines/lineConvertions/arrayLineToObject";
 import addLineToScene from "../geomentries/lines/addLineToScene";
-import loadAisles from '../geomentries/aisles/loadAisles';
+import loadAisles from "../geomentries/aisles/loadAisles";
+import { useParams } from "react-router-dom";
 
-const FloorGroupAilse = ({ floorGroupAisle, plane, floorPlanGroupLine, floorPlanGroupPoint, line, lines, currentLayerPoint, dragPointControls, floorPlanGroup, ReferenceLineMesh, LineCreated, isSnapped, ispreSnapped, snappedPoint, isSnappedUUID, isAngleSnapped, anglesnappedPoint }: any) => {
-    const { toggleView } = useToggleView();
-    const { setDeletePointOrLine } = useDeletePointOrLine();
-    const { toolMode } = useToolMode();
-    const { socket } = useSocketStore();
-    const { activeLayer } = useActiveLayer();
-    const { gl, raycaster } = useThree();
-    const { updateScene, setUpdateScene } = useUpdateScene();
-    const { setNewLines } = useNewLines();
+const FloorGroupAilse = ({
+  floorGroupAisle,
+  plane,
+  floorPlanGroupLine,
+  floorPlanGroupPoint,
+  line,
+  lines,
+  currentLayerPoint,
+  dragPointControls,
+  floorPlanGroup,
+  ReferenceLineMesh,
+  LineCreated,
+  isSnapped,
+  ispreSnapped,
+  snappedPoint,
+  isSnappedUUID,
+  isAngleSnapped,
+  anglesnappedPoint,
+}: any) => {
+  const { toggleView } = useToggleView();
+  const { setDeletePointOrLine } = useDeletePointOrLine();
+  const { toolMode } = useToolMode();
+  const { socket } = useSocketStore();
+  const { activeLayer } = useActiveLayer();
+  const { gl, raycaster } = useThree();
+  const { updateScene, setUpdateScene } = useUpdateScene();
+  const { setNewLines } = useNewLines();
+  const { projectId } = useParams();
 
-    useEffect(() => {
-        if (updateScene) {
-            loadAisles(lines, floorGroupAisle);
-            setUpdateScene(false);
+  useEffect(() => {
+    if (updateScene) {
+      loadAisles(lines, floorGroupAisle);
+      setUpdateScene(false);
+    }
+  }, [updateScene]);
+
+  useEffect(() => {
+    if (toolMode === "Aisle") {
+      setDeletePointOrLine(false);
+    } else {
+      removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint);
+      removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);
+    }
+  }, [toolMode]);
+
+  useEffect(() => {
+    const canvasElement = gl.domElement;
+
+    let drag = false;
+    let isLeftMouseDown = false;
+
+    const onMouseDown = (evt: any) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = true;
+        drag = false;
+      }
+    };
+
+    const onMouseUp = (evt: any) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = false;
+      }
+    };
+
+    const onMouseMove = () => {
+      if (isLeftMouseDown) {
+        drag = true;
+      }
+    };
+
+    const onContextMenu = (e: any) => {
+      e.preventDefault();
+      if (toolMode === "Aisle") {
+        removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint);
+        removeReferenceLine(
+          floorPlanGroup,
+          ReferenceLineMesh,
+          LineCreated,
+          line
+        );
+      }
+    };
+
+    const onMouseClick = (evt: any) => {
+      if (!plane.current || drag) return;
+
+      const intersects = raycaster.intersectObject(plane.current, true);
+      let intersectionPoint = intersects[0].point;
+      const points = floorPlanGroupPoint.current?.children ?? [];
+      const intersectsPoint = raycaster
+        .intersectObjects(points, true)
+        .find((intersect) => intersect.object.visible);
+      let intersectsLines: any = raycaster.intersectObjects(
+        floorPlanGroupLine.current.children,
+        true
+      );
+
+      if (
+        intersectsLines.length > 0 &&
+        intersects &&
+        intersects.length > 0 &&
+        !intersectsPoint
+      ) {
+        const lineType = intersectsLines[0].object.userData.linePoints[0][3];
+        if (lineType === CONSTANTS.lineConfig.aisleName) {
+          // console.log("intersected a aisle line");
+          const ThroughPoint =
+            intersectsLines[0].object.geometry.parameters.path.getPoints(
+              CONSTANTS.lineConfig.lineIntersectionPoints
+            );
+          let intersection = getClosestIntersection(
+            ThroughPoint,
+            intersectionPoint
+          );
+          if (!intersection) return;
+          const point = addPointToScene(
+            intersection,
+            CONSTANTS.pointConfig.aisleOuterColor,
+            currentLayerPoint,
+            floorPlanGroupPoint,
+            dragPointControls,
+            undefined,
+            CONSTANTS.lineConfig.aisleName
+          );
+          (line.current as Types.Line).push([
+            new THREE.Vector3(intersection.x, 0.01, intersection.z),
+            point.uuid,
+            activeLayer,
+            CONSTANTS.lineConfig.aisleName,
+          ]);
+          if (line.current.length >= 2 && line.current[0] && line.current[1]) {
+            lines.current.push(line.current as Types.Line);
+
+            const data = arrayLineToObject(line.current as Types.Line);
+
+            const email = localStorage.getItem("email");
+            const organization = email!.split("@")[1].split(".")[0];
+            const userId = localStorage.getItem("userId");
+
+            //REST
+
+            // setLine(organization, data.layer!, data.line!, data.type!);
+
+            //SOCKET
+
+            const input = {
+              organization: organization,
+              layer: data.layer,
+              line: data.line,
+              type: data.type,
+              socketId: socket.id,
+              projectId,
+              userId,
+            };
+
+            socket.emit("v1:Line:create", input);
+
+            setNewLines([line.current]);
+
+            addLineToScene(
+              line.current[0][0],
+              line.current[1][0],
+              CONSTANTS.pointConfig.aisleOuterColor,
+              line.current,
+              floorPlanGroupLine
+            );
+            let lastPoint = line.current[line.current.length - 1];
+            line.current = [lastPoint];
+          }
         }
-    }, [updateScene])
+      } else if (intersectsPoint && intersects && intersects.length > 0) {
+        if (
+          intersectsPoint.object.userData.type ===
+          CONSTANTS.lineConfig.aisleName
+        ) {
+          // console.log("intersected a aisle point");
+          intersectionPoint = intersectsPoint.object.position;
+          (line.current as Types.Line).push([
+            new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
+            intersectsPoint.object.uuid,
+            activeLayer,
+            CONSTANTS.lineConfig.aisleName,
+          ]);
+          if (line.current.length >= 2 && line.current[0] && line.current[1]) {
+            lines.current.push(line.current as Types.Line);
 
-    useEffect(() => {
-        if (toolMode === "Aisle") {
-            setDeletePointOrLine(false);
+            const data = arrayLineToObject(line.current as Types.Line);
+
+            const email = localStorage.getItem("email");
+            const organization = email!.split("@")[1].split(".")[0];
+            const userId = localStorage.getItem("userId");
+
+            //REST
+
+            // setLine(organization, data.layer!, data.line!, data.type!);
+
+            //SOCKET
+
+            const input = {
+              organization: organization,
+              layer: data.layer,
+              line: data.line,
+              type: data.type,
+              socketId: socket.id,
+              projectId,
+              userId,
+            };
+
+            socket.emit("v1:Line:create", input);
+
+            setNewLines([line.current]);
+
+            addLineToScene(
+              line.current[0][0],
+              line.current[1][0],
+              CONSTANTS.pointConfig.aisleOuterColor,
+              line.current,
+              floorPlanGroupLine
+            );
+            let lastPoint = line.current[line.current.length - 1];
+            line.current = [lastPoint];
+            ispreSnapped.current = false;
+            isSnapped.current = false;
+          }
+        }
+      } else if (intersects && intersects.length > 0) {
+        // console.log("intersected a empty area");
+        let uuid: string = "";
+        if (
+          isAngleSnapped.current &&
+          anglesnappedPoint.current &&
+          line.current.length > 0
+        ) {
+          intersectionPoint = anglesnappedPoint.current;
+          const point = addPointToScene(
+            intersectionPoint,
+            CONSTANTS.pointConfig.aisleOuterColor,
+            currentLayerPoint,
+            floorPlanGroupPoint,
+            dragPointControls,
+            undefined,
+            CONSTANTS.lineConfig.aisleName
+          );
+          uuid = point.uuid;
+        } else if (
+          isSnapped.current &&
+          snappedPoint.current &&
+          line.current.length > 0
+        ) {
+          intersectionPoint = snappedPoint.current;
+          uuid = isSnappedUUID.current!;
+        } else if (ispreSnapped.current && snappedPoint.current) {
+          intersectionPoint = snappedPoint.current;
+          uuid = isSnappedUUID.current!;
         } else {
-            removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint);
-            removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);
+          const point = addPointToScene(
+            intersectionPoint,
+            CONSTANTS.pointConfig.aisleOuterColor,
+            currentLayerPoint,
+            floorPlanGroupPoint,
+            dragPointControls,
+            undefined,
+            CONSTANTS.lineConfig.aisleName
+          );
+          uuid = point.uuid;
         }
-    }, [toolMode]);
+        (line.current as Types.Line).push([
+          new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z),
+          uuid,
+          activeLayer,
+          CONSTANTS.lineConfig.aisleName,
+        ]);
 
-    useEffect(() => {
+        if (line.current.length >= 2 && line.current[0] && line.current[1]) {
+          lines.current.push(line.current as Types.Line);
 
-        const canvasElement = gl.domElement;
+          const data = arrayLineToObject(line.current as Types.Line);
 
-        let drag = false;
-        let isLeftMouseDown = false;
+          const email = localStorage.getItem("email");
+          const organization = email!.split("@")[1].split(".")[0];
+          const userId = localStorage.getItem("userId");
 
-        const onMouseDown = (evt: any) => {
-            if (evt.button === 0) {
-                isLeftMouseDown = true;
-                drag = false;
-            }
-        };
+          //REST
 
-        const onMouseUp = (evt: any) => {
-            if (evt.button === 0) {
-                isLeftMouseDown = false;
-            }
+          // setLine(organization, data.layer!, data.line!, data.type!);
+
+          //SOCKET
+
+          const input = {
+            organization: organization,
+            layer: data.layer,
+            line: data.line,
+            type: data.type,
+            socketId: socket.id,
+            projectId,
+            userId,
+          };
+
+          socket.emit("v1:Line:create", input);
+
+          setNewLines([line.current]);
+
+          addLineToScene(
+            line.current[0][0],
+            line.current[1][0],
+            CONSTANTS.pointConfig.aisleOuterColor,
+            line.current,
+            floorPlanGroupLine
+          );
+          let lastPoint = line.current[line.current.length - 1];
+          line.current = [lastPoint];
+          ispreSnapped.current = false;
+          isSnapped.current = false;
         }
+      }
+    };
 
-        const onMouseMove = () => {
-            if (isLeftMouseDown) {
-                drag = true;
-            }
-        };
+    if (toolMode === "Aisle") {
+      canvasElement.addEventListener("mousedown", onMouseDown);
+      canvasElement.addEventListener("mouseup", onMouseUp);
+      canvasElement.addEventListener("mousemove", onMouseMove);
+      canvasElement.addEventListener("click", onMouseClick);
+      canvasElement.addEventListener("contextmenu", onContextMenu);
+    }
 
-        const onContextMenu = (e: any) => {
-            e.preventDefault();
-            if (toolMode === "Aisle") {
-                removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint);
-                removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);
-            }
-        };
+    return () => {
+      canvasElement.removeEventListener("mousedown", onMouseDown);
+      canvasElement.removeEventListener("mouseup", onMouseUp);
+      canvasElement.removeEventListener("mousemove", onMouseMove);
+      canvasElement.removeEventListener("click", onMouseClick);
+      canvasElement.removeEventListener("contextmenu", onContextMenu);
+    };
+  }, [toolMode]);
 
-        const onMouseClick = (evt: any) => {
-            if (!plane.current || drag) return;
+  return (
+    <group
+      ref={floorGroupAisle}
+      visible={!toggleView}
+      name="floorGroupAisle"
+    ></group>
+  );
+};
 
-            const intersects = raycaster.intersectObject(plane.current, true);
-            let intersectionPoint = intersects[0].point;
-            const points = floorPlanGroupPoint.current?.children ?? [];
-            const intersectsPoint = raycaster.intersectObjects(points, true).find(intersect => intersect.object.visible);
-            let intersectsLines: any = raycaster.intersectObjects(floorPlanGroupLine.current.children, true);
-
-
-            if (intersectsLines.length > 0 && intersects && intersects.length > 0 && !intersectsPoint) {
-                const lineType = intersectsLines[0].object.userData.linePoints[0][3];
-                if (lineType === CONSTANTS.lineConfig.aisleName) {
-                    // console.log("intersected a aisle line");
-                    const ThroughPoint = (intersectsLines[0].object.geometry.parameters.path).getPoints(CONSTANTS.lineConfig.lineIntersectionPoints);
-                    let intersection = getClosestIntersection(ThroughPoint, intersectionPoint);
-                    if (!intersection) return;
-                    const point = addPointToScene(intersection, CONSTANTS.pointConfig.aisleOuterColor, currentLayerPoint, floorPlanGroupPoint, dragPointControls, undefined, CONSTANTS.lineConfig.aisleName);
-                    (line.current as Types.Line).push([new THREE.Vector3(intersection.x, 0.01, intersection.z), point.uuid, activeLayer, CONSTANTS.lineConfig.aisleName,]);
-                    if (line.current.length >= 2 && line.current[0] && line.current[1]) {
-                        lines.current.push(line.current as Types.Line);
-
-                        const data = arrayLineToObject(line.current as Types.Line);
-
-                        const email = localStorage.getItem('email')
-                        const organization = (email!.split("@")[1]).split(".")[0];
-
-                        //REST
-
-                        // setLine(organization, data.layer!, data.line!, data.type!);
-
-                        //SOCKET
-
-                        const input = {
-                            organization: organization,
-                            layer: data.layer,
-                            line: data.line,
-                            type: data.type,
-                            socketId: socket.id
-                        }
-
-                        socket.emit('v1:Line:create', input);
-
-                        setNewLines([line.current]);
-
-                        addLineToScene(line.current[0][0], line.current[1][0], CONSTANTS.pointConfig.aisleOuterColor, line.current, floorPlanGroupLine);
-                        let lastPoint = line.current[line.current.length - 1];
-                        line.current = [lastPoint];
-                    }
-                }
-            } else if (intersectsPoint && intersects && intersects.length > 0) {
-                if (intersectsPoint.object.userData.type === CONSTANTS.lineConfig.aisleName) {
-                    // console.log("intersected a aisle point");
-                    intersectionPoint = intersectsPoint.object.position;
-                    (line.current as Types.Line).push([new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z), intersectsPoint.object.uuid, activeLayer, CONSTANTS.lineConfig.aisleName,]);
-                    if (line.current.length >= 2 && line.current[0] && line.current[1]) {
-                        lines.current.push(line.current as Types.Line);
-
-                        const data = arrayLineToObject(line.current as Types.Line);
-
-                        const email = localStorage.getItem('email')
-                        const organization = (email!.split("@")[1]).split(".")[0];
-
-                        //REST
-
-                        // setLine(organization, data.layer!, data.line!, data.type!);
-
-                        //SOCKET
-
-                        const input = {
-                            organization: organization,
-                            layer: data.layer,
-                            line: data.line,
-                            type: data.type,
-                            socketId: socket.id
-                        }
-
-                        socket.emit('v1:Line:create', input);
-
-                        setNewLines([line.current]);
-
-                        addLineToScene(line.current[0][0], line.current[1][0], CONSTANTS.pointConfig.aisleOuterColor, line.current, floorPlanGroupLine);
-                        let lastPoint = line.current[line.current.length - 1];
-                        line.current = [lastPoint];
-                        ispreSnapped.current = false;
-                        isSnapped.current = false;
-                    }
-                }
-            } else if (intersects && intersects.length > 0) {
-                // console.log("intersected a empty area");
-                let uuid: string = "";
-                if (isAngleSnapped.current && anglesnappedPoint.current && line.current.length > 0) {
-                    intersectionPoint = anglesnappedPoint.current;
-                    const point = addPointToScene(intersectionPoint, CONSTANTS.pointConfig.aisleOuterColor, currentLayerPoint, floorPlanGroupPoint, dragPointControls, undefined, CONSTANTS.lineConfig.aisleName);
-                    uuid = point.uuid;
-                } else if (isSnapped.current && snappedPoint.current && line.current.length > 0) {
-                    intersectionPoint = snappedPoint.current;
-                    uuid = isSnappedUUID.current!;
-                } else if (ispreSnapped.current && snappedPoint.current) {
-                    intersectionPoint = snappedPoint.current;
-                    uuid = isSnappedUUID.current!;
-                } else {
-                    const point = addPointToScene(intersectionPoint, CONSTANTS.pointConfig.aisleOuterColor, currentLayerPoint, floorPlanGroupPoint, dragPointControls, undefined, CONSTANTS.lineConfig.aisleName);
-                    uuid = point.uuid;
-                }
-                (line.current as Types.Line).push([new THREE.Vector3(intersectionPoint.x, 0.01, intersectionPoint.z), uuid, activeLayer, CONSTANTS.lineConfig.aisleName,]);
-
-                if (line.current.length >= 2 && line.current[0] && line.current[1]) {
-                    lines.current.push(line.current as Types.Line);
-
-                    const data = arrayLineToObject(line.current as Types.Line);
-
-                    const email = localStorage.getItem('email')
-                    const organization = (email!.split("@")[1]).split(".")[0];
-
-                    //REST
-
-                    // setLine(organization, data.layer!, data.line!, data.type!);
-
-                    //SOCKET
-
-                    const input = {
-                        organization: organization,
-                        layer: data.layer,
-                        line: data.line,
-                        type: data.type,
-                        socketId: socket.id
-                    }
-
-                    socket.emit('v1:Line:create', input);
-
-                    setNewLines([line.current]);
-
-                    addLineToScene(line.current[0][0], line.current[1][0], CONSTANTS.pointConfig.aisleOuterColor, line.current, floorPlanGroupLine);
-                    let lastPoint = line.current[line.current.length - 1];
-                    line.current = [lastPoint];
-                    ispreSnapped.current = false;
-                    isSnapped.current = false;
-                }
-            }
-        }
-
-
-        if (toolMode === 'Aisle') {
-            canvasElement.addEventListener("mousedown", onMouseDown);
-            canvasElement.addEventListener("mouseup", onMouseUp);
-            canvasElement.addEventListener("mousemove", onMouseMove);
-            canvasElement.addEventListener("click", onMouseClick);
-            canvasElement.addEventListener("contextmenu", onContextMenu);
-        }
-
-        return () => {
-            canvasElement.removeEventListener("mousedown", onMouseDown);
-            canvasElement.removeEventListener("mouseup", onMouseUp);
-            canvasElement.removeEventListener("mousemove", onMouseMove);
-            canvasElement.removeEventListener("click", onMouseClick);
-            canvasElement.removeEventListener("contextmenu", onContextMenu);
-        };
-    }, [toolMode])
-
-
-    return (
-        <group ref={floorGroupAisle} visible={!toggleView} name="floorGroupAisle">
-        </group>
-    )
-}
-
-export default FloorGroupAilse;
+export default FloorGroupAilse;

app/src/modules/builder/groups/floorItemsGroup.tsx

@@ -28,6 +28,7 @@ import { getFloorAssets } from "../../../services/factoryBuilder/assest/floorAss
 import useModuleStore from "../../../store/useModuleStore";
 import { useEventsStore } from "../../../store/simulation/useEventsStore";
 import { findEnvironment } from "../../../services/factoryBuilder/environment/findEnvironment";
+import { useParams } from "react-router-dom";
 
 const assetManagerWorker = new Worker(
     new URL(
@@ -68,6 +69,7 @@ const FloorItemsGroup = ({
     const loader = new GLTFLoader();
     const dracoLoader = new DRACOLoader();
     const { addEvent } = useEventsStore();
+    const { projectId } = useParams();
 
     dracoLoader.setDecoderPath(
         "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/"
@@ -80,7 +82,8 @@ const FloorItemsGroup = ({
 
         findEnvironment(
             organization,
-            localStorage.getItem("userId")!
+            localStorage.getItem("userId")!,
+            projectId
         ).then((evnironMentData) => {
 
             let totalAssets = 0;
@@ -99,7 +102,8 @@ const FloorItemsGroup = ({
                 }
             };
 
-            getFloorAssets(organization).then((data) => {
+            getFloorAssets(organization,projectId).then((data) => {
+                // console.log('data: ', data);
                 if (data.length > 0) {
                     const uniqueItems = (data as Types.FloorItems).filter(
                         (item, index, self) =>
@@ -117,7 +121,7 @@ const FloorItemsGroup = ({
                         itemsGroup,
                         setFloorItems,
                         addEvent,
-                        evnironMentData.renderDistance
+                        evnironMentData.renderDistance,projectId
                     );
                     updateLoadingProgress(100);
                 }
@@ -141,7 +145,7 @@ const FloorItemsGroup = ({
                                 itemsGroup,
                                 setFloorItems,
                                 addEvent,
-                                evnironMentData.renderDistance
+                                evnironMentData.renderDistance,projectId
                             );
                             updateLoadingProgress(100);
                         }
@@ -259,7 +263,8 @@ const FloorItemsGroup = ({
                         itemsGroup,
                         hoveredDeletableFloorItem,
                         setFloorItems,
-                        socket
+                        socket,
+                        projectId
                     );
                 }
 
@@ -387,7 +392,8 @@ const FloorItemsGroup = ({
                     selectedItem,
                     setSelectedItem,
                     addEvent,
-                    plane
+                    plane,
+                    projectId
                 );
             }
         };

app/src/modules/builder/groups/floorPlanGroup.tsx

@@ -16,6 +16,7 @@ import deleteLine from "../geomentries/lines/deleteLine";
 import drawWall from "../geomentries/lines/drawWall";
 import drawOnlyFloor from "../geomentries/floors/drawOnlyFloor";
 import addDragControl from "../eventDeclaration/dragControlDeclaration";
+import { useParams } from "react-router-dom";
 
 const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoint, floorGroup, currentLayerPoint, dragPointControls, hoveredDeletablePoint, hoveredDeletableLine, plane, line, lines, onlyFloorline, onlyFloorlines, ReferenceLineMesh, LineCreated, isSnapped, ispreSnapped, snappedPoint, isSnappedUUID, isAngleSnapped, anglesnappedPoint }: any) => {
     const state = useThree();
@@ -29,10 +30,12 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
     const { setNewLines } = useNewLines();
     const { setDeletedLines } = useDeletedLines();
     const { socket } = useSocketStore();
+    const { projectId } = useParams();
+
 
     useEffect(() => {
         if (toolMode === 'move') {
-            addDragControl(dragPointControls, currentLayerPoint, state, floorPlanGroupPoint, floorPlanGroupLine, lines, onlyFloorlines, socket);
+            addDragControl(dragPointControls, currentLayerPoint, state, floorPlanGroupPoint, floorPlanGroupLine, lines, onlyFloorlines, socket,projectId);
         }
 
         return () => {
@@ -47,7 +50,8 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
         const organization = (email!.split("@")[1]).split(".")[0];
 
         // Load data from localStorage if available
-        getLines(organization).then((data) => {
+        getLines(organization,projectId).then((data) => {
+            // console.log('data: ', data);
 
             const Lines: Types.Lines = objectLinesToArray(data);
 
@@ -103,7 +107,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
 
     useEffect(() => {
         if (removedLayer !== null) {
-            DeleteLayer(removedLayer, lines, floorPlanGroupLine, floorPlanGroupPoint, onlyFloorlines, floorGroup, setDeletedLines, setRemovedLayer, socket);
+            DeleteLayer(removedLayer, lines, floorPlanGroupLine, floorPlanGroupPoint, onlyFloorlines, floorGroup, setDeletedLines, setRemovedLayer, socket,projectId);
         }
     }, [removedLayer]);
 
@@ -149,19 +153,19 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
 
             if (deletePointOrLine) {
                 if (hoveredDeletablePoint.current !== null) {
-                    deletePoint(hoveredDeletablePoint, onlyFloorlines, floorPlanGroupPoint, floorPlanGroupLine, lines, setDeletedLines, socket);
+                    deletePoint(hoveredDeletablePoint, onlyFloorlines, floorPlanGroupPoint, floorPlanGroupLine, lines, setDeletedLines, socket,projectId);
                 }
                 if (hoveredDeletableLine.current !== null) {
-                    deleteLine(hoveredDeletableLine, onlyFloorlines, lines, floorPlanGroupLine, floorPlanGroupPoint, setDeletedLines, socket);
+                    deleteLine(hoveredDeletableLine, onlyFloorlines, lines, floorPlanGroupLine, floorPlanGroupPoint, setDeletedLines, socket,projectId);
                 }
             }
 
             if (toolMode === "Wall") {
-                drawWall(raycaster, plane, floorPlanGroupPoint, snappedPoint, isSnapped, isSnappedUUID, line, ispreSnapped, anglesnappedPoint, isAngleSnapped, lines, floorPlanGroupLine, floorPlanGroup, ReferenceLineMesh, LineCreated, currentLayerPoint, dragPointControls, setNewLines, setDeletedLines, activeLayer, socket);
+                drawWall(raycaster, plane, floorPlanGroupPoint, snappedPoint, isSnapped, isSnappedUUID, line, ispreSnapped, anglesnappedPoint, isAngleSnapped, lines, floorPlanGroupLine, floorPlanGroup, ReferenceLineMesh, LineCreated, currentLayerPoint, dragPointControls, setNewLines, setDeletedLines, activeLayer, socket,projectId);
             }
 
             if (toolMode === "Floor") {
-                drawOnlyFloor(raycaster, state, camera, plane, floorPlanGroupPoint, snappedPoint, isSnapped, isSnappedUUID, line, ispreSnapped, anglesnappedPoint, isAngleSnapped, onlyFloorline, onlyFloorlines, lines, floorPlanGroupLine, floorPlanGroup, ReferenceLineMesh, LineCreated, currentLayerPoint, dragPointControls, setNewLines, setDeletedLines, activeLayer, socket);
+                drawOnlyFloor(raycaster, state, camera, plane, floorPlanGroupPoint, snappedPoint, isSnapped, isSnappedUUID, line, ispreSnapped, anglesnappedPoint, isAngleSnapped, onlyFloorline, onlyFloorlines, lines, floorPlanGroupLine, floorPlanGroup, ReferenceLineMesh, LineCreated, currentLayerPoint, dragPointControls, setNewLines, setDeletedLines, activeLayer, socket,projectId);
             }
         }
 

app/src/modules/builder/groups/wallItemsGroup.tsx

@@ -19,6 +19,7 @@ import DeleteWallItems from "../geomentries/walls/deleteWallItems";
 import loadInitialWallItems from "../IntialLoad/loadInitialWallItems";
 import AddWallItems from "../geomentries/walls/addWallItems";
 import useModuleStore from "../../../store/useModuleStore";
+import { useParams } from "react-router-dom";
 
 const WallItemsGroup = ({
     currentWallItem,
@@ -38,10 +39,11 @@ const WallItemsGroup = ({
     const { setSelectedWallItem } = useSelectedWallItem();
     const { activeModule } = useModuleStore();
     const { selectedItem } = useSelectedItem();
+    const { projectId } = useParams();
 
     useEffect(() => {
         // Load Wall Items from the backend
-        loadInitialWallItems(setWallItems);
+        loadInitialWallItems(setWallItems,projectId);
     }, []);
 
     //////////  Update the Position value changes  in the selected item  //////////
@@ -121,7 +123,8 @@ const WallItemsGroup = ({
 
                     setTimeout(async () => {
                         const email = localStorage.getItem("email");
-                        const organization = email!.split("@")[1].split(".")[0];
+                        const organization = email!.split("@")[1].split(".")[0]; 
+                        const userId = localStorage.getItem("userId");
 
                         //REST
 
@@ -152,8 +155,10 @@ const WallItemsGroup = ({
                             quaternion: currentItem.quaternion,
                             scale: currentItem.scale!,
                             socketId: socket.id,
+                            projectId,userId
                         };
 
+                        // console.log('data: ', data);
                         socket.emit("v1:wallItems:set", data);
                     }, 0);
                     (state.controls as any)!.enabled = true;
@@ -190,7 +195,7 @@ const WallItemsGroup = ({
                         hoveredDeletableWallItem,
                         setWallItems,
                         wallItems,
-                        socket
+                        socket,projectId
                     );
                 }
             }
@@ -217,7 +222,8 @@ const WallItemsGroup = ({
                         raycaster,
                         CSGGroup,
                         setWallItems,
-                        socket
+                        socket,
+                        projectId
                     );
                 }
                 event.preventDefault();

app/src/modules/builder/groups/wallsMesh.tsx

@@ -9,17 +9,19 @@ import { getLines } from "../../../services/factoryBuilder/lines/getLinesApi";
 import objectLinesToArray from "../geomentries/lines/lineConvertions/objectLinesToArray";
 import loadWalls from "../geomentries/walls/loadWalls";
 import texturePath from "../../../assets/textures/floor/wall-tex.png";
+import { useParams } from "react-router-dom";
 
 const WallsMeshComponent = ({ lines }: any) => {
     const { walls, setWalls } = useWalls();
     const { updateScene, setUpdateScene } = useUpdateScene();
+    const { projectId } = useParams();
 
     useEffect(() => {
         if (updateScene) {
             const email = localStorage.getItem("email");
             const organization = email!.split("@")[1].split(".")[0];
 
-            getLines(organization).then((data) => {
+            getLines(organization,projectId).then((data) => {
                 const Lines: Types.Lines = objectLinesToArray(data);
                 localStorage.setItem("Lines", JSON.stringify(Lines));
 

app/src/modules/builder/groups/zoneGroup.tsx

@@ -19,6 +19,7 @@ import * as CONSTANTS from "../../../types/world/worldConstants";
 import * as turf from "@turf/turf";
 import { computeArea } from "../functions/computeArea";
 import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
+import { useParams } from "react-router-dom";
 
 const ZoneGroup: React.FC = () => {
   const { camera, pointer, gl, raycaster, scene, controls } = useThree();
@@ -42,6 +43,7 @@ const ZoneGroup: React.FC = () => {
   const { setDeleteTool } = useDeleteTool();
   const { activeLayer } = useActiveLayer();
   const { socket } = useSocketStore();
+  const { projectId } = useParams();
 
   const groupsRef = useRef<any>();
 
@@ -79,11 +81,12 @@ const ZoneGroup: React.FC = () => {
       if (!email) return;
 
       const organization = email.split("@")[1].split(".")[0];
-      const data = await getZonesApi(organization);
+      const data = await getZonesApi(organization, projectId);
 
-      if (data.data && data.data.length > 0) {
-        const fetchedZones = data.data.map((zone: any) => ({
-          zoneId: zone.zoneId,
+
+      if (data.length > 0) {
+        const fetchedZones = data.map((zone: any) => ({
+          zoneUuid: zone.zoneUuid,
           zoneName: zone.zoneName,
           points: zone.points,
           viewPortCenter: zone.viewPortCenter,
@@ -93,7 +96,7 @@ const ZoneGroup: React.FC = () => {
 
         setZones(fetchedZones);
 
-        const fetchedPoints = data.data.flatMap((zone: any) =>
+        const fetchedPoints = data.flatMap((zone: any) =>
           zone.points
             .slice(0, 4)
             .map(
@@ -109,6 +112,7 @@ const ZoneGroup: React.FC = () => {
   }, []);
 
   useEffect(() => {
+
     localStorage.setItem("zones", JSON.stringify(zones));
   }, [zones]);
 
@@ -128,7 +132,7 @@ const ZoneGroup: React.FC = () => {
       zones
         .filter((zone: any) => zone.layer === removedLayer)
         .forEach((zone: any) => {
-          deleteZoneFromBackend(zone.zoneId);
+          deleteZoneFromBackend(zone.zoneUuid);
         });
 
       setRemovedLayer(null);
@@ -151,7 +155,7 @@ const ZoneGroup: React.FC = () => {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const addZoneToBackend = async (zone: {
-    zoneId: string;
+    zoneUuid: string;
     zoneName: string;
     points: [number, number, number][];
     layer: string;
@@ -189,10 +193,11 @@ const ZoneGroup: React.FC = () => {
 
     const input = {
       userId: userId,
+      projectId: projectId,
       organization: organization,
       zoneData: {
         zoneName: zone.zoneName,
-        zoneId: zone.zoneId,
+        zoneUuid: zone.zoneUuid,
         points: zone.points,
         viewPortCenter: target,
         viewPortposition: position,
@@ -200,12 +205,15 @@ const ZoneGroup: React.FC = () => {
       },
     };
 
-    socket.emit("v2:zone:set", input);
+
+
+    console.log('socket: ', socket);
+    socket.emit("v1:zone:set", input);
   };
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const updateZoneToBackend = async (zone: {
-    zoneId: string;
+    zoneUuid: string;
     zoneName: string;
     points: [number, number, number][];
     layer: string;
@@ -246,7 +254,7 @@ const ZoneGroup: React.FC = () => {
       organization: organization,
       zoneData: {
         zoneName: zone.zoneName,
-        zoneId: zone.zoneId,
+        zoneUuid: zone.zoneUuid,
         points: zone.points,
         viewPortCenter: target,
         viewPortposition: position,
@@ -257,7 +265,7 @@ const ZoneGroup: React.FC = () => {
     socket.emit("v2:zone:set", input);
   };
 
-  const deleteZoneFromBackend = async (zoneId: string) => {
+  const deleteZoneFromBackend = async (zoneUuid: string) => {
     const email = localStorage.getItem("email");
     const userId = localStorage.getItem("userId");
     const organization = email!.split("@")[1].split(".")[0];
@@ -265,18 +273,18 @@ const ZoneGroup: React.FC = () => {
     const input = {
       userId: userId,
       organization: organization,
-      zoneId: zoneId,
+      zoneUuid: zoneUuid,
     };
 
-    socket.emit("v2:zone:delete", input);
+    socket.emit("v1:zone:delete", input);
   };
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const handleDeleteZone = (zoneId: string) => {
-    const updatedZones = zones.filter((zone: any) => zone.zoneId !== zoneId);
+  const handleDeleteZone = (zoneUuid: string) => {
+    const updatedZones = zones.filter((zone: any) => zone.zoneUuid !== zoneUuid);
     setZones(updatedZones);
 
-    const zoneIndex = zones.findIndex((zone: any) => zone.zoneId === zoneId);
+    const zoneIndex = zones.findIndex((zone: any) => zone.zoneUuid === zoneUuid);
     if (zoneIndex !== -1) {
       const zonePointsToRemove = zonePoints.slice(
         zoneIndex * 4,
@@ -291,10 +299,11 @@ const ZoneGroup: React.FC = () => {
       );
       setZonePoints(updatedzonePoints);
     }
-    deleteZoneFromBackend(zoneId);
+    deleteZoneFromBackend(zoneUuid);
   };
 
   useEffect(() => {
+
     if (!camera || !toggleView) return;
     const canvasElement = gl.domElement;
 
@@ -353,9 +362,9 @@ const ZoneGroup: React.FC = () => {
           ] as [number, number, number][];
 
           const zoneName = `Zone ${zones.length + 1}`;
-          const zoneId = THREE.MathUtils.generateUUID();
+          const zoneUuid = THREE.MathUtils.generateUUID();
           const newZone = {
-            zoneId,
+            zoneUuid,
             zoneName,
             points: points,
             layer: activeLayer,
@@ -375,6 +384,7 @@ const ZoneGroup: React.FC = () => {
           const updatedZonePoints = [...zonePoints, ...newzonePoints];
           setZonePoints(updatedZonePoints);
 
+
           addZoneToBackend(newZone);
           setStartPoint(null);
           setEndPoint(null);
@@ -399,8 +409,8 @@ const ZoneGroup: React.FC = () => {
           );
           if (sphereIndex !== -1) {
             const zoneIndex = Math.floor(sphereIndex / 4);
-            const zoneId = zones[zoneIndex].zoneId;
-            handleDeleteZone(zoneId);
+            const zoneUuid = zones[zoneIndex].zoneUuid;
+            handleDeleteZone(zoneUuid);
             return;
           }
         }
@@ -492,29 +502,7 @@ const ZoneGroup: React.FC = () => {
       canvasElement.removeEventListener("mousemove", onMouseMove);
       canvasElement.removeEventListener("contextmenu", onContext);
     };
-  }, [
-    gl,
-    camera,
-    startPoint,
-    toggleView,
-    scene,
-    toolMode,
-    zones,
-    isDragging,
-    deletePointOrLine,
-    zonePoints,
-    draggedSphere,
-    activeLayer,
-    raycaster,
-    pointer,
-    controls,
-    plane,
-    setZones,
-    setZonePoints,
-    addZoneToBackend,
-    handleDeleteZone,
-    updateZoneToBackend,
-  ]);
+  }, [gl, camera, startPoint, toggleView, scene, toolMode, zones, isDragging, deletePointOrLine, zonePoints, draggedSphere, activeLayer, raycaster, pointer, controls, plane, setZones, setZonePoints, addZoneToBackend, handleDeleteZone, updateZoneToBackend, socket]);
 
   useFrame(() => {
     if (!startPoint) return;
@@ -531,9 +519,9 @@ const ZoneGroup: React.FC = () => {
       <group name="zones" visible={!toggleView}>
         {zones.map((zone: any) => (
           <group
-            key={zone.zoneId}
+            key={zone.zoneUuid}
             name={zone.zoneName}
-            visible={zone.zoneId === selectedZone.zoneId}
+            visible={zone.zoneUuid === selectedZone.zoneUuid}
           >
             {zone.points
               .slice(0, -1)
@@ -553,7 +541,7 @@ const ZoneGroup: React.FC = () => {
                 const midpoint = new THREE.Vector3(
                   (point1.x + point2.x) / 2,
                   CONSTANTS.zoneConfig.height / 2 +
-                    (zone.layer - 1) * CONSTANTS.zoneConfig.height,
+                  (zone.layer - 1) * CONSTANTS.zoneConfig.height,
                   (point1.z + point2.z) / 2
                 );
 
@@ -609,7 +597,7 @@ const ZoneGroup: React.FC = () => {
                 return (
                   <Html
                     // data
-                    key={zone.zoneId}
+                    key={zone.zoneUuid}
                     position={htmlPosition}
                     // class
                     className="zone-name-wrapper"
@@ -628,14 +616,14 @@ const ZoneGroup: React.FC = () => {
           .filter((zone: any) => zone.layer === activeLayer)
           .map((zone: any) => (
             <Line
-              key={zone.zoneId}
+              key={zone.zoneUuid}
               points={zone.points}
               color="#007BFF"
               lineWidth={3}
               onClick={(e) => {
                 e.stopPropagation();
                 if (deletePointOrLine) {
-                  handleDeleteZone(zone.zoneId);
+                  handleDeleteZone(zone.zoneUuid);
                 }
               }}
             />
@@ -700,10 +688,10 @@ const ZoneGroup: React.FC = () => {
           .flatMap((zone: any) =>
             zone.points.slice(0, 4).map((point: any, pointIndex: number) => (
               <Sphere
-                key={`${zone.zoneId}-point-${pointIndex}`}
+                key={`${zone.zoneUuid}-point-${pointIndex}`}
                 position={new THREE.Vector3(...point)}
                 args={[0.3, 16, 16]}
-                name={`point-${zone.zoneId}-${pointIndex}`}
+                name={`point-${zone.zoneUuid}-${pointIndex}`}
               >
                 <meshBasicMaterial color="red" />
               </Sphere>

app/src/modules/collaboration/camera/collabCams.tsx

@@ -143,7 +143,7 @@ const CamModelsGroup = () => {
       );
     });
 
-    socket.on("cameraUpdateResponse", (data: any) => {
+    socket.on("v1:camera:Response:update", (data: any) => {
       if (
         !groupRef.current ||
         socket.id === data.socketId ||
@@ -188,7 +188,7 @@ const CamModelsGroup = () => {
     return () => {
       socket.off("userConnectResponse");
       socket.off("userDisConnectResponse");
-      socket.off("cameraUpdateResponse");
+      socket.off("v1:camera:Response:update");
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [email, loader, navigate, setActiveUsers, socket]);

app/src/modules/collaboration/socket/socketResponses.dev.tsx

@@ -33,6 +33,7 @@ import RemoveConnectedLines from "../../builder/geomentries/lines/removeConnecte
 import Layer2DVisibility from "../../builder/geomentries/layers/layer2DVisibility";
 import { retrieveGLTF, storeGLTF } from "../../../utils/indexDB/idbUtils";
 import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
+import { useParams } from "react-router-dom";
 
 export default function SocketResponses({
     floorPlanGroup,
@@ -61,6 +62,7 @@ export default function SocketResponses({
     const { setNewLines } = useNewLines();
     const { zones, setZones } = useZones();
     const { zonePoints, setZonePoints } = useZonePoints();
+    const { projectId } = useParams();
 
     useEffect(() => {
         const email = localStorage.getItem("email");
@@ -80,7 +82,7 @@ export default function SocketResponses({
             // console.log('data: ', data);
         });
 
-        socket.on("cameraUpdateResponse", (data: any) => {
+        socket.on("v1:camera:Response:update", (data: any) => {
             // console.log('data: ', data);
         });
 
@@ -88,7 +90,7 @@ export default function SocketResponses({
             // console.log('data: ', data);
         });
 
-        socket.on("model-asset:response:updates", async (data: any) => {
+        socket.on("v1:model-asset:response:add", async (data: any) => {
             // console.log('data: ', data);
             if (socket.id === data.socketId) {
                 return;
@@ -336,7 +338,7 @@ export default function SocketResponses({
             }
         });
 
-        socket.on("model-asset:response:updates", (data: any) => {
+        socket.on("v1:model-asset:response:add", (data: any) => {
             if (socket.id === data.socketId) {
                 return;
             }
@@ -369,7 +371,7 @@ export default function SocketResponses({
             }
         });
 
-        socket.on("Line:response:update", (data: any) => {
+        socket.on("v1:Line:response:update", (data: any) => {
             if (socket.id === data.socketId) {
                 return;
             }
@@ -410,7 +412,7 @@ export default function SocketResponses({
             }
         });
 
-        socket.on("Line:response:delete", (data: any) => {
+        socket.on("v1:Line:response:delete", (data: any) => {
             if (socket.id === data.socketId) {
                 return;
             }
@@ -491,7 +493,7 @@ export default function SocketResponses({
             }
         });
 
-        socket.on("Line:response:delete:point", (data: any) => {
+        socket.on("v1:Line:response:delete:point", (data: any) => {
             if (socket.id === data.socketId) {
                 return;
             }
@@ -531,7 +533,7 @@ export default function SocketResponses({
             }
         });
 
-        socket.on("Line:response:delete:layer", async (data: any) => {
+        socket.on("v1:Line:response:delete:layer", async (data: any) => {
             if (socket.id === data.socketId) {
                 return;
             }
@@ -638,7 +640,7 @@ export default function SocketResponses({
                     floorGroup.current?.remove(meshToRemove);
                 }
 
-                const zonesData = await getZonesApi(organization);
+                const zonesData = await getZonesApi(organization,projectId);
                 const highestLayer = Math.max(
                     1,
                     lines.current.reduce(
@@ -646,7 +648,7 @@ export default function SocketResponses({
                             Math.max(maxLayer, segment.layer || 0),
                         0
                     ),
-                    zonesData.data.reduce(
+                    zonesData.reduce(
                         (maxLayer: number, zone: any) =>
                             Math.max(maxLayer, zone.layer || 0),
                         0
@@ -669,7 +671,7 @@ export default function SocketResponses({
         const organization = email!.split("@")[1].split(".")[0];
         let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
 
-        socket.on("wallItemsDeleteResponse", (data: any) => {
+        socket.on("v1:wallItem:Response:Delete", (data: any) => {
             if (socket.id === data.socketId) {
                 return;
             }
@@ -699,7 +701,8 @@ export default function SocketResponses({
             }
         });
 
-        socket.on("wallItemsUpdateResponse", (data: any) => {
+        socket.on("v1:wallItems:Response:Update", (data: any) => {
+            // console.log('data: ', data);
             if (socket.id === data.socketId) {
                 return;
             }
@@ -825,8 +828,8 @@ export default function SocketResponses({
         });
 
         return () => {
-            socket.off("wallItemsDeleteResponse");
-            socket.off("wallItemsUpdateResponse");
+            socket.off("v1:wallItem:Response:Delete");
+            socket.off("v1:wallItems:Response:Update");
         };
     }, [wallItems]);
 
@@ -861,7 +864,8 @@ export default function SocketResponses({
         const email = localStorage.getItem("email");
         const organization = email!.split("@")[1].split(".")[0];
 
-        socket.on("Line:response:create", async (data: any) => {
+        socket.on("v1:Line:response:create", async (data: any) => {
+            // console.log('data: ', data);
             if (socket.id === data.socketId) {
                 return;
             }
@@ -937,7 +941,7 @@ export default function SocketResponses({
                 );
                 lines.current.push(line);
 
-                const zonesData = await getZonesApi(organization);
+                const zonesData = await getZonesApi(organization,projectId);
                 const highestLayer = Math.max(
                     1,
                     lines.current.reduce(
@@ -945,7 +949,7 @@ export default function SocketResponses({
                             Math.max(maxLayer, segment.layer || 0),
                         0
                     ),
-                    zonesData.data.reduce(
+                    zonesData.reduce(
                         (maxLayer: number, zone: any) =>
                             Math.max(maxLayer, zone.layer || 0),
                         0
@@ -969,7 +973,7 @@ export default function SocketResponses({
         });
 
         return () => {
-            socket.off("Line:response:create");
+            socket.off("v1:Line:response:create");
         };
     }, [socket, activeLayer]);
 
@@ -978,7 +982,7 @@ export default function SocketResponses({
         const email = localStorage.getItem("email");
         const organization = email!.split("@")[1].split(".")[0];
 
-        socket.on("zone:response:updates", (data: any) => {
+        socket.on("v1:zone:response:updates", (data: any) => {
             if (socket.id === data.socketId) {
                 return;
             }
@@ -1016,14 +1020,14 @@ export default function SocketResponses({
 
             if (data.message === "zone updated") {
                 const updatedZones = zones.map((zone: any) =>
-                    zone.zoneId === data.data.zoneId ? data.data : zone
+                    zone.zoneUuid === data.data.zoneUuid ? data.data : zone
                 );
                 setZones(updatedZones);
                 setUpdateScene(true);
             }
         });
 
-        socket.on("zone:response:delete", (data: any) => {
+        socket.on("v1:zone:response:delete", (data: any) => {
             if (socket.id === data.socketId) {
                 return;
             }
@@ -1032,12 +1036,12 @@ export default function SocketResponses({
             }
             if (data.message === "zone deleted") {
                 const updatedZones = zones.filter(
-                    (zone: any) => zone.zoneId !== data.data.zoneId
+                    (zone: any) => zone.zoneUuid !== data.data.zoneUuid
                 );
                 setZones(updatedZones);
 
                 const zoneIndex = zones.findIndex(
-                    (zone: any) => zone.zoneId === data.data.zoneId
+                    (zone: any) => zone.zoneUuid === data.data.zoneUuid
                 );
                 if (zoneIndex !== -1) {
                     const updatedzonePoints = zonePoints.filter(
@@ -1067,8 +1071,8 @@ export default function SocketResponses({
         });
 
         return () => {
-            socket.off("zone:response:updates");
-            socket.off("zone:response:delete");
+            socket.off("v1:zone:response:updates");
+            socket.off("v1:zone:response:delete");
         };
     }, [socket, zones, zonePoints]);
 

app/src/modules/scene/camera/switchView.tsx

@@ -4,6 +4,7 @@ import { useToggleView } from "../../../store/builder/store";
 import { useThree } from "@react-three/fiber";
 import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
 import * as CONSTANTS from '../../../types/world/worldConstants';
+import { useParams } from "react-router-dom";
 
 export default function SwitchView() {
   const { toggleView } = useToggleView();
@@ -13,6 +14,7 @@ export default function SwitchView() {
   const orthoCamera = useRef<THREE.OrthographicCamera | null>(null);
   orthoCamera.current = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.01, 1000);
   perspectiveCamera.current = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
+  const { projectId } = useParams();
 
   useEffect(() => {
     if (!perspectiveCamera.current || !orthoCamera.current) return;
@@ -38,7 +40,7 @@ export default function SwitchView() {
       try {
         const email = localStorage.getItem('email');
         const organization = (email!.split("@")[1]).split(".")[0];
-        getCamera(organization, localStorage.getItem('userId')!).then((data) => {
+        getCamera(organization, localStorage.getItem('userId')!,projectId).then((data) => {
           if (data && data.position && data.target) {
             state.controls?.setPosition(data.position.x, data.position.y, data.position.z);
             state.controls?.setTarget(data.target.x, data.target.y, data.target.z);

app/src/modules/scene/camera/updateCameraPosition.ts

@@ -5,7 +5,8 @@ export default function updateCamPosition(
     controls: any,
     socket: Socket,
     position: THREE.Vector3,
-    rotation: THREE.Euler
+    rotation: THREE.Euler,
+    projectId?:string
 ) {
     if (!controls.current) return;
     const target = controls.current.getTarget(new THREE.Vector3());
@@ -18,7 +19,7 @@ export default function updateCamPosition(
         position: position,
         target: new THREE.Vector3(target.x, 0, target.z),
         rotation: new THREE.Vector3(rotation.x, rotation.y, rotation.z),
-        socketId: socket.id,
+        socketId: socket.id,projectId
     };
     socket.emit("v1:Camera:set", camData);
     localStorage.setItem("cameraPosition", JSON.stringify(position));

app/src/modules/scene/controls/controls.tsx

@@ -11,6 +11,7 @@ import CamMode from "../camera/camMode";
 import SwitchView from "../camera/switchView";
 import SelectionControls from "./selectionControls/selectionControls";
 import TransformControl from "./transformControls/transformControls";
+import { useParams } from "react-router-dom";
 
 export default function Controls() {
     const controlsRef = useRef<CameraControls>(null);
@@ -19,6 +20,8 @@ export default function Controls() {
     const { resetCamera, setResetCamera } = useResetCamera();
     const { socket } = useSocketStore();
     const state = useThree();
+    const { projectId } = useParams();
+
 
     useEffect(() => {
         if (controlsRef.current) {
@@ -27,7 +30,7 @@ export default function Controls() {
         }
         const email = localStorage.getItem("email");
         const organization = email!.split("@")[1].split(".")[0];
-        getCamera(organization, localStorage.getItem("userId")!).then((data) => {
+        getCamera(organization, localStorage.getItem("userId")!,projectId).then((data) => {
             if (data && data.position && data.target) {
                 controlsRef.current?.setPosition(data.position.x, data.position.y, data.position.z);
                 controlsRef.current?.setTarget(data.target.x, data.target.y, data.target.z);
@@ -50,6 +53,7 @@ export default function Controls() {
 
             const email = localStorage.getItem('email')
             const organization = (email!.split("@")[1]).split(".")[0];
+            const userId = localStorage.getItem("userId");
 
             const camData = {
                 organization: organization,
@@ -57,7 +61,8 @@ export default function Controls() {
                 position: new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition),
                 target: new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget),
                 rotation: new THREE.Vector3(...CONSTANTS.threeDimension.defaultRotation),
-                socketId: socket.id
+                socketId: socket.id,
+                projectId
             };
             socket.emit('v1:Camera:set', camData)
 
@@ -75,7 +80,7 @@ export default function Controls() {
             if (hasInteracted && controlsRef.current && state.camera.position && !toggleView) {
                 const position = state.camera.position;
                 if (position.x === 0 && position.y === 0 && position.z === 0) return;
-                updateCamPosition(controlsRef, socket, position, state.camera.rotation);
+                updateCamPosition(controlsRef, socket, position, state.camera.rotation,projectId);
                 stopInterval();
             }
         };

app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx

@@ -6,6 +6,7 @@ import { useFloorItems, useSelectedAssets, useSocketStore, useToggleView } from
 import * as Types from "../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 import { useEventsStore } from "../../../../store/simulation/useEventsStore";
+import { useParams } from "react-router-dom";
 
 const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, selectionGroup, setDuplicatedObjects, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => {
     const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -15,6 +16,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
     const { floorItems, setFloorItems } = useFloorItems();
     const { socket } = useSocketStore();
     const { addEvent } = useEventsStore();
+    const { projectId } = useParams();
 
     useEffect(() => {
         if (!camera || !scene || toggleView) return;
@@ -324,6 +326,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
 
                     const email = localStorage.getItem("email");
                     const organization = email ? email.split("@")[1].split(".")[0] : "default";
+                    const userId = localStorage.getItem("userId");
 
                     //REST
 
@@ -351,9 +354,10 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                         isVisible: true,
                         socketId: socket.id,
                         eventData: eventData,
+                        userId, projectId
                     };
 
-                    socket.emit("v2:model-asset:add", data);
+                    socket.emit("v1:model-asset:add", data);
 
                     obj.userData = {
                         name: newFloorItem.modelName,
@@ -373,6 +377,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
 
                     const email = localStorage.getItem("email");
                     const organization = email ? email.split("@")[1].split(".")[0] : "default";
+                    const userId = localStorage.getItem("userId");
 
                     //REST
 
@@ -398,10 +403,10 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                         rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                         isLocked: false,
                         isVisible: true,
-                        socketId: socket.id,
+                        socketId: socket.id, projectId, userId
                     };
 
-                    socket.emit("v2:model-asset:add", data);
+                    socket.emit("v1:model-asset:add", data);
 
                     obj.userData = {
                         name: newFloorItem.modelName,

app/src/modules/scene/controls/selectionControls/duplicationControls.tsx

@@ -7,6 +7,7 @@ import * as Types from "../../../../types/world/worldTypes";
 import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 import { useEventsStore } from "../../../../store/simulation/useEventsStore";
+import { useParams } from "react-router-dom";
 
 const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedObjects, setpastedObjects, selectionGroup, movedObjects, setMovedObjects, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) => {
     const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -16,6 +17,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
     const { floorItems, setFloorItems } = useFloorItems();
     const { socket } = useSocketStore();
     const { addEvent } = useEventsStore();
+    const { projectId } = useParams();
 
     useEffect(() => {
         if (!camera || !scene || toggleView) return;
@@ -301,6 +303,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
 
                     const email = localStorage.getItem("email");
                     const organization = email ? email.split("@")[1].split(".")[0] : "default";
+                    const userId = localStorage.getItem("userId");
 
                     //REST
 
@@ -328,9 +331,10 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                         isVisible: true,
                         socketId: socket.id,
                         eventData: eventData,
+                        projectId, userId
                     };
 
-                    socket.emit("v2:model-asset:add", data);
+                    socket.emit("v1:model-asset:add", data);
 
                     obj.userData = {
                         name: newFloorItem.modelName,
@@ -350,6 +354,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
 
                     const email = localStorage.getItem("email");
                     const organization = email ? email.split("@")[1].split(".")[0] : "default";
+                    const userId = localStorage.getItem("userId");
 
                     //REST
 
@@ -376,9 +381,10 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                         isLocked: false,
                         isVisible: true,
                         socketId: socket.id,
+                        userId, projectId
                     };
 
-                    socket.emit("v2:model-asset:add", data);
+                    socket.emit("v1:model-asset:add", data);
 
                     obj.userData = {
                         name: newFloorItem.modelName,

app/src/modules/scene/controls/selectionControls/moveControls.tsx

@@ -16,6 +16,7 @@ import { useSelectedProduct } from "../../../../store/simulation/useSimulationSt
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { snapControls } from "../../../../utils/handleSnap";
 import DistanceFindingControls from "./distanceFindingControls";
+import { useParams } from "react-router-dom";
 
 function MoveControls({
     movedObjects,
@@ -42,6 +43,8 @@ function MoveControls({
     const [keyEvent, setKeyEvent] = useState<"Ctrl" | "Shift" | "Ctrl+Shift" | "">("");
     const email = localStorage.getItem("email");
     const organization = email!.split("@")[1].split(".")[0];
+    const userId = localStorage.getItem("userId");
+    const { projectId } = useParams();
 
     const updateBackend = (
         productName: string,
@@ -318,9 +321,10 @@ function MoveControls({
                     isLocked: false,
                     isVisible: true,
                     socketId: socket.id,
+                    projectId,userId
                 };
 
-                socket.emit("v2:model-asset:add", data);
+                socket.emit("v1:model-asset:add", data);
 
                 itemsGroupRef.current.add(obj);
             }

app/src/modules/scene/controls/selectionControls/rotateControls.tsx

@@ -8,6 +8,7 @@ import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
+import { useParams } from "react-router-dom";
 
 function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, boundingBoxRef }: any) {
     const { camera, controls, gl, scene, pointer, raycaster } = useThree();
@@ -22,6 +23,8 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
 
     const email = localStorage.getItem('email')
     const organization = (email?.split("@")[1])?.split(".")[0] ?? null;
+    const userId = localStorage.getItem("userId");
+    const { projectId } = useParams();
 
     const updateBackend = (
         productName: string,
@@ -257,9 +260,10 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                     isLocked: false,
                     isVisible: true,
                     socketId: socket.id,
+                    projectId,userId
                 };
 
-                socket.emit("v2:model-asset:add", data);
+                socket.emit("v1:model-asset:add", data);
 
                 itemsGroupRef.current.add(obj);
             }

app/src/modules/scene/controls/selectionControls/selectionControls.tsx

@@ -15,6 +15,7 @@ import RotateControls from "./rotateControls";
 import useModuleStore from "../../../../store/useModuleStore";
 import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { useProductStore } from "../../../../store/simulation/useProductStore";
+import { useParams } from "react-router-dom";
 
 const SelectionControls: React.FC = () => {
     const { camera, controls, gl, scene, pointer } = useThree();
@@ -32,6 +33,7 @@ const SelectionControls: React.FC = () => {
     const { activeModule } = useModuleStore();
     const { socket } = useSocketStore();
     const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]);
+    const { projectId } = useParams();
 
     useEffect(() => {
         if (!camera || !scene || toggleView) return;
@@ -203,6 +205,7 @@ const SelectionControls: React.FC = () => {
         if (selectedAssets.length > 0 && duplicatedObjects.length === 0) {
             const email = localStorage.getItem("email");
             const organization = email!.split("@")[1].split(".")[0];
+            const userId = localStorage.getItem("userId");
 
             const storedItems = JSON.parse(localStorage.getItem("FloorItems") ?? "[]");
             const selectedUUIDs = selectedAssets.map((mesh: THREE.Object3D) => mesh.uuid);
@@ -222,9 +225,10 @@ const SelectionControls: React.FC = () => {
                     modelUuid: selectedMesh.uuid,
                     modelName: selectedMesh.userData.name,
                     socketId: socket.id,
+                    projectId,userId
                 };
 
-                socket.emit("v2:model-asset:delete", data);
+                socket.emit("v1:model-asset:delete", data);
 
                 useEventsStore.getState().removeEvent(selectedMesh.uuid);
                 useProductStore.getState().deleteEvent(selectedMesh.uuid);

app/src/modules/scene/controls/transformControls/transformControls.tsx

@@ -11,6 +11,7 @@ import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+import { useParams } from "react-router-dom";
 
 export default function TransformControl() {
     const state = useThree();
@@ -25,6 +26,8 @@ export default function TransformControl() {
 
     const email = localStorage.getItem('email')
     const organization = (email!.split("@")[1]).split(".")[0];
+    const userId = localStorage.getItem("userId");
+    const { projectId } = useParams();
 
     const updateBackend = (
         productName: string,
@@ -143,10 +146,11 @@ export default function TransformControl() {
                     rotation: { "x": selectedFloorItem.rotation.x, "y": selectedFloorItem.rotation.y, "z": selectedFloorItem.rotation.z },
                     isLocked: false,
                     isVisible: true,
-                    socketId: socket.id
+                    socketId: socket.id,
+                    projectId, userId
                 }
 
-                socket.emit("v2:model-asset:add", data);
+                socket.emit("v1:model-asset:add", data);
             }
             localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
             return updatedItems;

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -11,13 +11,10 @@ import RenderOverlay from "../../components/templates/Overlay";
 import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
 import DroppedObjects from "./widgets/floating/DroppedFloatingWidgets";
 import EditWidgetOption from "../../components/ui/menu/EditWidgetOption";
-import {
-  useEditWidgetOptionsStore,
-  useRightClickSelected,
-  useRightSelected,
-} from "../../store/visualization/useZone3DWidgetStore";
+import { useEditWidgetOptionsStore, useRightClickSelected, useRightSelected, } from "../../store/visualization/useZone3DWidgetStore";
 import OuterClick from "../../utils/outerClick";
 import { useWidgetStore } from "../../store/useWidgetStore";
+import { useParams } from "react-router-dom";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -28,7 +25,7 @@ type FormattedZoneData = Record<
     panelOrder: Side[];
     points: [];
     lockedPanels: Side[];
-    zoneId: string;
+    zoneUuid: string;
     zoneViewPortTarget: number[];
     zoneViewPortPosition: number[];
     widgets: Widget[];
@@ -44,7 +41,7 @@ type Widget = {
 
 // Define the type for HiddenPanels, where keys are zone IDs and values are arrays of hidden sides
 interface HiddenPanels {
-  [zoneId: string]: Side[];
+  [zoneUuid: string]: Side[];
 }
 
 const RealTimeVisulization: React.FC = () => {
@@ -62,6 +59,7 @@ const RealTimeVisulization: React.FC = () => {
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
   const { setSelectedChartId } = useWidgetStore();
   const [waitingPanels, setWaitingPanels] = useState(null);
+  const { projectId } = useParams();
 
   OuterClick({
     contextClassName: [
@@ -80,19 +78,22 @@ const RealTimeVisulization: React.FC = () => {
       const email = localStorage.getItem("email") ?? "";
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
-        const response = await getZone2dData(organization);
+        const response = await getZone2dData(organization, projectId);
+        // console.log('responseRt: ', response);
+
 
         if (!Array.isArray(response)) {
           return;
         }
         const formattedData = response.reduce<FormattedZoneData>(
           (acc, zone) => {
+
             acc[zone.zoneName] = {
               activeSides: [],
               panelOrder: [],
               lockedPanels: [],
               points: zone.points,
-              zoneId: zone.zoneId,
+              zoneUuid: zone.zoneUuid,
               zoneViewPortTarget: zone.viewPortCenter,
               zoneViewPortPosition: zone.viewPortposition,
               widgets: [],
@@ -122,7 +123,7 @@ const RealTimeVisulization: React.FC = () => {
           panelOrder: selectedZone.panelOrder || [],
           lockedPanels: selectedZone.lockedPanels || [],
           points: selectedZone.points || [],
-          zoneId: selectedZone.zoneId || "",
+          zoneUuid: selectedZone.zoneUuid || "",
           zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
           zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
           widgets: selectedZone.widgets || [],

app/src/modules/visualization/functions/handleSaveTemplate.ts

@@ -11,6 +11,7 @@ type HandleSaveTemplateProps = {
   };
   templates?: Template[];
   visualizationSocket: any;
+  projectId?:string
 };
 
 // Generate a unique ID
@@ -25,6 +26,7 @@ export const handleSaveTemplate = async ({
   selectedZone,
   templates = [],
   visualizationSocket,
+  projectId
 }: HandleSaveTemplateProps): Promise<void> => {
   try {
     // Check if the selected zone has any widgets
@@ -68,16 +70,17 @@ export const handleSaveTemplate = async ({
     const organization = email.includes("@")
       ? email.split("@")[1]?.split(".")[0]
       : "";
-
+      const userId = localStorage.getItem("userId");
     if (!organization) {
       return;
     }
     let saveTemplate = {
       organization: organization,
       template: newTemplate,
+      userId,projectId
     };
     if (visualizationSocket) {
-      visualizationSocket.emit("v2:viz-template:add", saveTemplate);
+      visualizationSocket.emit("v1:viz-template:add", saveTemplate);
     }
 
     // Save the template

app/src/modules/visualization/functions/handleUiDrop.ts

@@ -1,3 +1,4 @@
+
 import { generateUniqueId } from "../../../functions/generateUniqueId";
 import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedObjectsStore";
 import { determinePosition } from "./determinePosition";
@@ -9,6 +10,7 @@ interface HandleDropProps {
   selectedZone: any;
   setFloatingWidget: (value: any) => void;
   event: React.DragEvent<HTMLDivElement>;
+  projectId?:string
 }
 
 export const createHandleDrop = ({
@@ -16,12 +18,14 @@ export const createHandleDrop = ({
   visualizationSocket,
   selectedZone,
   setFloatingWidget,
-  event,
+  event,projectId
 }: HandleDropProps) => {
+
   event.preventDefault();
   try {
     const email = localStorage.getItem("email") ?? "";
     const organization = email?.split("@")[1]?.split(".")[0];
+    const userId = localStorage.getItem("userId");
 
     const data = event.dataTransfer.getData("text/plain");
     if (widgetSubOption === "3D") return;
@@ -87,17 +91,20 @@ export const createHandleDrop = ({
     if (!existingZone) {
       useDroppedObjectsStore
         .getState()
-        .setZone(selectedZone.zoneName, selectedZone.zoneId);
+        .setZone(selectedZone.zoneName, selectedZone.zoneUuid);
     }
 
     const addFloatingWidget = {
       organization,
       widget: newObject,
-      zoneId: selectedZone.zoneId,
+      zoneUuid: selectedZone.zoneUuid,
+      projectId,userId
     };
+    console.log('addFloatingWidget: ', addFloatingWidget);
 
+    console.log('visualizationSocket: ', visualizationSocket);
     if (visualizationSocket) {
-      visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
+      visualizationSocket.emit("v1:viz-float:add", addFloatingWidget);
     }
 
     useDroppedObjectsStore
@@ -107,14 +114,14 @@ export const createHandleDrop = ({
     const droppedObjectsStore = useDroppedObjectsStore.getState();
     const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
 
-    if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
-      console.log(
-        `Objects for Zone ${selectedZone.zoneId}:`,
-        currentZone.objects
-      );
+    if (currentZone && currentZone.zoneUuid === selectedZone.zoneUuid) {
+      // console.log(
+      //   `Objects for Zone ${selectedZone.zoneUuid}:`,
+      //   currentZone.objects
+      // );
       setFloatingWidget(currentZone.objects);
     } else {
-      console.warn("Zone not found or zoneId mismatch");
+      console.warn("Zone not found or zoneUuid mismatch");
     }
   } catch (error) {
     echo.error("Failed to drop widget");

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

@@ -33,7 +33,7 @@ export default function SocketRealTimeViz() {
   useEffect(() => {
     if (visualizationSocket) {
       //add panel response
-      visualizationSocket.on("viz-panel:response:updates", (addPanel: any) => {
+      visualizationSocket.on("v1:viz-panel:response:add", (addPanel: any) => {
         if (addPanel.success) {
           let addPanelData = addPanel.data.data;
           setSelectedZone(addPanelData);
@@ -41,7 +41,7 @@ export default function SocketRealTimeViz() {
       });
       //delete panel response
       visualizationSocket.on(
-        "viz-panel:response:delete",
+        "v1:viz-panel:response:delete",
         (deletePanel: any) => {
           if (deletePanel.success) {
             let deletePanelData = deletePanel.data.data;
@@ -50,7 +50,7 @@ export default function SocketRealTimeViz() {
         }
       );
       //clear Panel response
-      visualizationSocket.on("viz-panel:response:clear", (clearPanel: any) => {
+      visualizationSocket.on("v1:viz-panel:response:clear", (clearPanel: any) => {
         if (
           clearPanel.success &&
           clearPanel.message === "PanelWidgets cleared successfully"
@@ -60,7 +60,7 @@ export default function SocketRealTimeViz() {
         }
       });
       //lock Panel response
-      visualizationSocket.on("viz-panel:response:locked", (lockPanel: any) => {
+      visualizationSocket.on("v1:viz-panel:response:locked", (lockPanel: any) => {
         if (
           lockPanel.success &&
           lockPanel.message === "locked panel updated successfully"
@@ -71,7 +71,7 @@ export default function SocketRealTimeViz() {
       });
       // add 2dWidget response
       visualizationSocket.on(
-        "viz-widget:response:updates",
+        "v1:viz-widget:response:updates",
         (add2dWidget: any) => {
           if (add2dWidget.success && add2dWidget.data) {
             setSelectedZone((prev) => {
@@ -81,7 +81,7 @@ export default function SocketRealTimeViz() {
               if (isWidgetAlreadyAdded) return prev; // Prevent duplicate addition
               return {
                 ...prev,
-                zoneId: add2dWidget.data.zoneId,
+                zoneUuid: add2dWidget.data.zoneUuid,
                 zoneName: add2dWidget.data.zoneName,
                 widgets: [...prev.widgets, add2dWidget.data.widgetData], // Append new widget
               };
@@ -91,12 +91,12 @@ export default function SocketRealTimeViz() {
       );
       //delete 2D Widget response
       visualizationSocket.on(
-        "viz-widget:response:delete",
+        "v1:viz-widget:response:delete",
         (deleteWidget: any) => {
           if (deleteWidget?.success && deleteWidget.data) {
             setSelectedZone((prevZone: any) => ({
               ...prevZone,
-              zoneId: deleteWidget.data.zoneId,
+              zoneUuid: deleteWidget.data.zoneUuid,
               zoneName: deleteWidget.data.zoneName,
               widgets: deleteWidget.data.widgetDeleteDatas, // Replace with new widget list
             }));
@@ -105,8 +105,9 @@ export default function SocketRealTimeViz() {
       );
       //add Floating Widget response
       visualizationSocket.on(
-        "viz-float:response:updates",
+        "v1:viz-float:response:updates",
         (addFloatingWidget: any) => {
+          console.log('addFloatingWidget: ', addFloatingWidget);
           if (addFloatingWidget.success) {
             if (
               addFloatingWidget.success &&
@@ -117,7 +118,7 @@ export default function SocketRealTimeViz() {
               if (!zone) {
                 state.setZone(
                   addFloatingWidget.data.zoneName,
-                  addFloatingWidget.data.zoneId
+                  addFloatingWidget.data.zoneUuid
                 );
               }
               const existingObjects = zone ? zone.objects : [];
@@ -144,7 +145,7 @@ export default function SocketRealTimeViz() {
       );
       //duplicate Floating Widget response
       visualizationSocket.on(
-        "viz-float:response:addDuplicate",
+        "v1:viz-float:response:addDuplicate",
         (duplicateFloatingWidget: any) => {
           if (
             duplicateFloatingWidget.success &&
@@ -178,7 +179,7 @@ export default function SocketRealTimeViz() {
       );
       //delete Floating Widget response
       visualizationSocket.on(
-        "viz-float:response:delete",
+        "v1:viz-float:response:delete",
         (deleteFloatingWidget: any) => {
           if (deleteFloatingWidget.success) {
             deleteObject(
@@ -190,18 +191,18 @@ export default function SocketRealTimeViz() {
       );
       //add 3D Widget response
       visualizationSocket.on(
-        "viz-widget3D:response:updates",
+        "v1:viz-widget3D:response:add",
         (add3DWidget: any) => {
           if (add3DWidget.success) {
             if (add3DWidget.message === "Widget created successfully") {
-              addWidget(add3DWidget.data.zoneId, add3DWidget.data.widget);
+              addWidget(add3DWidget.data.zoneUuid, add3DWidget.data.widget);
             }
           }
         }
       );
       //delete 3D Widget response
       visualizationSocket.on(
-        "viz-widget3D:response:delete",
+        "v1:viz-widget3D:response:delete",
         (delete3DWidget: any) => {
           // "3DWidget delete unsuccessfull"
           if (
@@ -209,9 +210,9 @@ export default function SocketRealTimeViz() {
             delete3DWidget.message === "3DWidget delete successfull"
           ) {
             const activeZoneWidgets =
-              zoneWidgetData[delete3DWidget.data.zoneId] || [];
+              zoneWidgetData[delete3DWidget.data.zoneUuid] || [];
             setZoneWidgetData(
-              delete3DWidget.data.zoneId,
+              delete3DWidget.data.zoneUuid,
               activeZoneWidgets.filter(
                 (w: WidgetData) => w.id !== delete3DWidget.data.id
               )
@@ -221,19 +222,19 @@ export default function SocketRealTimeViz() {
       );
       //update3D widget response
       visualizationSocket.on(
-        "viz-widget3D:response:modifyPositionRotation",
+        "v1:viz-widget3D:response:modifyPositionRotation",
         (update3DWidget: any) => {
           if (
             update3DWidget.success &&
             update3DWidget.message === "widget update successfully"
           ) {
             updateWidgetPosition(
-              update3DWidget.data.zoneId,
+              update3DWidget.data.zoneUuid,
               update3DWidget.data.widget.id,
               update3DWidget.data.widget.position
             );
             updateWidgetRotation(
-              update3DWidget.data.zoneId,
+              update3DWidget.data.zoneUuid,
               update3DWidget.data.widget.id,
               update3DWidget.data.widget.rotation
             );
@@ -242,7 +243,7 @@ export default function SocketRealTimeViz() {
       );
       // add Template response
       visualizationSocket.on(
-        "viz-template:response:add",
+        "v1:viz-template:response:add",
         (addingTemplate: any) => {
           if (addingTemplate.success) {
             if (addingTemplate.message === "Template saved successfully") {
@@ -253,7 +254,7 @@ export default function SocketRealTimeViz() {
       );
       //load Template response
       visualizationSocket.on(
-        "viz-template:response:addTemplateZone",
+        "v1:viz-template:response:addTemplateZone",
         (loadTemplate: any) => {
           if (loadTemplate.success) {
             if (loadTemplate.message === "Template placed in Zone") {
@@ -265,7 +266,7 @@ export default function SocketRealTimeViz() {
               });
               useDroppedObjectsStore
                 .getState()
-                .setZone(template.zoneName, template.zoneId);
+                .setZone(template.zoneName, template.zoneUuid);
 
               if (Array.isArray(template.floatingWidget)) {
                 template.floatingWidget.forEach((val: any) => {
@@ -280,7 +281,7 @@ export default function SocketRealTimeViz() {
       );
       //delete Template response
       visualizationSocket.on(
-        "viz-template:response:delete",
+        "v1:viz-template:response:delete",
         (deleteTemplate: any) => {
           if (deleteTemplate.success) {
             if (deleteTemplate.message === "Template deleted successfully") {

app/src/modules/visualization/template/Templates.tsx

@@ -5,18 +5,21 @@ import { useSocketStore } from "../../../store/builder/store";
 import { getTemplateData } from "../../../services/visulization/zone/getTemplate";
 import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedObjectsStore";
 import RenameInput from "../../../components/ui/inputs/RenameInput";
+import { useParams } from "react-router-dom";
+
 
 const Templates = () => {
   const { templates, removeTemplate, setTemplates } = useTemplateStore();
   const { setSelectedZone, selectedZone } = useSelectedZoneStore();
   const { visualizationSocket } = useSocketStore();
+  const { projectId } = useParams();
 
   useEffect(() => {
     async function templateData() {
       try {
         const email = localStorage.getItem("email") ?? "";
         const organization = email?.split("@")[1]?.split(".")[0];
-        let response = await getTemplateData(organization);
+        let response = await getTemplateData(organization,projectId);
         setTemplates(response);
       } catch (error) {
         echo.error("Failed to fetching template data");
@@ -35,13 +38,15 @@ const Templates = () => {
       e.stopPropagation();
       const email = localStorage.getItem("email") ?? "";
       const organization = email?.split("@")[1]?.split(".")[0];
+      const userId = localStorage.getItem("userId");
       let deleteTemplate = {
         organization: organization,
         templateID: id,
+        userId,projectId
       };
       if (visualizationSocket) {
         visualizationSocket.emit(
-          "v2:viz-template:deleteTemplate",
+          "v1:viz-template:deleteTemplate",
           deleteTemplate
         );
       }
@@ -57,15 +62,17 @@ const Templates = () => {
       if (selectedZone.zoneName === "") return;
       const email = localStorage.getItem("email") ?? "";
       const organization = email?.split("@")[1]?.split(".")[0];
+      const userId = localStorage.getItem("userId");
 
       let loadingTemplate = {
         organization: organization,
-        zoneId: selectedZone.zoneId,
+        zoneUuid: selectedZone.zoneUuid,
         templateID: template.id,
+        projectId,userId
       };
 
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-template:addToZone", loadingTemplate);
+        visualizationSocket.emit("v1:viz-template:addToZone", loadingTemplate);
       }
 
       setSelectedZone({
@@ -76,7 +83,7 @@ const Templates = () => {
 
       useDroppedObjectsStore
         .getState()
-        .setZone(selectedZone.zoneName, selectedZone.zoneId);
+        .setZone(selectedZone.zoneName, selectedZone.zoneUuid);
 
       if (Array.isArray(template.floatingWidget)) {
         template.floatingWidget.forEach((val: any) => {

app/src/modules/visualization/widgets/2d/DraggableWidget.tsx

@@ -18,6 +18,7 @@ import { useSocketStore } from "../../../../store/builder/store";
 import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
 import OuterClick from "../../../../utils/outerClick";
 import useChartStore from "../../../../store/visualization/useChartStore";
+import { useParams } from "react-router-dom";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -41,7 +42,7 @@ export const DraggableWidget = ({
 }: {
   selectedZone: {
     zoneName: string;
-    zoneId: string;
+    zoneUuid: string;
     activeSides: Side[];
     points: [];
     panelOrder: Side[];
@@ -55,7 +56,7 @@ export const DraggableWidget = ({
       panelOrder: Side[];
       points: [];
       lockedPanels: Side[];
-      zoneId: string;
+      zoneUuid: string;
       zoneViewPortTarget: number[];
       zoneViewPortPosition: number[];
       widgets: {
@@ -87,6 +88,7 @@ export const DraggableWidget = ({
     width: 0,
     height: 0,
   });
+  const { projectId } = useParams();
   useEffect(() => {}, [measurements, duration, name]);
   const handlePointerDown = () => {
     if (selectedChartId?.id !== widget.id) {
@@ -100,15 +102,17 @@ export const DraggableWidget = ({
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
+      const userId = localStorage.getItem("userId");
       let deleteWidget = {
-        zoneId: selectedZone.zoneId,
+        zoneUuid: selectedZone.zoneUuid,
         widgetID: widget.id,
         organization: organization,
+        projectId,userId
       };
 
       if (visualizationSocket) {
         setSelectedChartId(null);
-        visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
+        visualizationSocket.emit("v1:viz-widget:delete", deleteWidget);
       }
       const updatedWidgets = selectedZone.widgets.filter(
         (w: Widget) => w.id !== widget.id
@@ -171,6 +175,7 @@ export const DraggableWidget = ({
     try {
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
+      const userId = localStorage.getItem("userId");
 
       const duplicatedWidget: Widget = {
         ...widget,
@@ -184,19 +189,20 @@ export const DraggableWidget = ({
 
       let duplicateWidget = {
         organization: organization,
-        zoneId: selectedZone.zoneId,
+        zoneUuid: selectedZone.zoneUuid,
         widget: duplicatedWidget,
+        projectId,userId
       };
 
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-widget:add", duplicateWidget);
+        visualizationSocket.emit("v1:viz-widget:add", duplicateWidget);
       }
       setSelectedZone((prevZone: any) => ({
         ...prevZone,
         widgets: [...prevZone.widgets, duplicatedWidget],
       }));
 
-      // const response = await duplicateWidgetApi(selectedZone.zoneId, organization, duplicatedWidget);
+      // const response = await duplicateWidgetApi(selectedZone.zoneUuid, organization, duplicatedWidget);
 
       // if (response?.message === "Widget created successfully") {
       //   setSelectedZone((prevZone: any) => ({

app/src/modules/visualization/widgets/2d/charts/BarGraphComponent.tsx

@@ -8,6 +8,8 @@ import axios from "axios";
 import { useThemeStore } from "../../../../../store/useThemeStore";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import useChartStore from "../../../../../store/visualization/useChartStore";
+import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
+import { useParams } from "react-router-dom";
 
 interface ChartComponentProps {
   id: string;
@@ -43,6 +45,9 @@ const BarGraphComponent = ({
     datasets: [],
   });
   const { selectedChartId } = useWidgetStore();
+  const { selectedZone } = useSelectedZoneStore();
+  const { projectId } = useParams();
+
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
@@ -178,7 +183,15 @@ const BarGraphComponent = ({
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          {
+            headers: {
+              Authorization: "Bearer <access_token>",  // Replace with actual token
+              "Content-Type": "application/json",
+              token: localStorage.getItem("token") || "",  // Coerce null to empty string
+              refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+          }
         );
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements);

app/src/modules/visualization/widgets/2d/charts/DoughnutGraphComponent.tsx

@@ -6,6 +6,8 @@ import axios from "axios";
 import { useThemeStore } from "../../../../../store/useThemeStore";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import useChartStore from "../../../../../store/visualization/useChartStore";
+import { useParams } from "react-router-dom";
+import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
 
 interface ChartComponentProps {
   id: string;
@@ -34,6 +36,9 @@ const DoughnutGraphComponent = ({
     datasets: [],
   });
    const { selectedChartId } = useWidgetStore();
+   const { selectedZone } = useSelectedZoneStore();
+   const { projectId } = useParams();
+
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
@@ -159,7 +164,17 @@ const DoughnutGraphComponent = ({
     
     if (id !== "") {
       try {
-        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
+        const response = await axios.get(
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          {
+            headers: {
+              Authorization: "Bearer <access_token>",  // Replace with actual token
+              "Content-Type": "application/json",
+              token: localStorage.getItem("token") || "",  // Coerce null to empty string
+              refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+          }
+        );
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements)
           setDuration(response.data.Data.duration)

app/src/modules/visualization/widgets/2d/charts/LineGraphComponent.tsx

@@ -6,6 +6,8 @@ import axios from "axios";
 import { useThemeStore } from "../../../../../store/useThemeStore";
 import useChartStore from "../../../../../store/visualization/useChartStore";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import { useParams } from "react-router-dom";
+import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
 
 interface ChartComponentProps {
   id: string;
@@ -41,6 +43,9 @@ const LineGraphComponent = ({
     datasets: [],
   });
   const { selectedChartId } = useWidgetStore();
+  const { selectedZone } = useSelectedZoneStore();
+  const { projectId } = useParams();
+
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
@@ -176,7 +181,15 @@ const LineGraphComponent = ({
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          {
+            headers: {
+              Authorization: "Bearer <access_token>",  // Replace with actual token
+              "Content-Type": "application/json",
+              token: localStorage.getItem("token") || "",  // Coerce null to empty string
+              refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+          }
         );
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements);

app/src/modules/visualization/widgets/2d/charts/PieGraphComponent.tsx

@@ -6,6 +6,8 @@ import axios from "axios";
 import { useThemeStore } from "../../../../../store/useThemeStore";
 import useChartStore from "../../../../../store/visualization/useChartStore";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
+import { useParams } from "react-router-dom";
 
 interface ChartComponentProps {
   id: string;
@@ -41,6 +43,8 @@ const PieChartComponent = ({
     datasets: [],
   });
   const { selectedChartId } = useWidgetStore();
+  const { selectedZone } = useSelectedZoneStore();
+  const { projectId } = useParams();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
@@ -176,7 +180,15 @@ const PieChartComponent = ({
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          {
+            headers: {
+              Authorization: "Bearer <access_token>",  // Replace with actual token
+              "Content-Type": "application/json",
+              token: localStorage.getItem("token") || "",  // Coerce null to empty string
+              refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+          }
         );
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements);

app/src/modules/visualization/widgets/2d/charts/PolarAreaGraphComponent.tsx

@@ -6,6 +6,8 @@ import axios from "axios";
 import { useThemeStore } from "../../../../../store/useThemeStore";
 import useChartStore from "../../../../../store/visualization/useChartStore";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
+import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
+import { useParams } from "react-router-dom";
 
 interface ChartComponentProps {
   id: string;
@@ -41,6 +43,8 @@ const PolarAreaGraphComponent = ({
     datasets: [],
   });
   const { selectedChartId } = useWidgetStore();
+  const { selectedZone } = useSelectedZoneStore();
+  const { projectId } = useParams();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
@@ -176,7 +180,15 @@ const PolarAreaGraphComponent = ({
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          {
+            headers: {
+              Authorization: "Bearer <access_token>",  // Replace with actual token
+              "Content-Type": "application/json",
+              token: localStorage.getItem("token") || "",  // Coerce null to empty string
+              refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+          }
         );
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements);

app/src/modules/visualization/widgets/2d/charts/ProgressCard1.tsx

@@ -6,6 +6,8 @@ import axios from "axios";
 import useChartStore from "../../../../../store/visualization/useChartStore";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
+import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
+import { useParams } from "react-router-dom";
 
 const ProgressCard1 = ({ id, title }: { id: string; title: string }) => {
   const {
@@ -18,6 +20,8 @@ const ProgressCard1 = ({ id, title }: { id: string; title: string }) => {
   const [name, setName] = useState(title);
   const [value, setValue] = useState<any>("");
   const { selectedChartId } = useWidgetStore();
+  const { selectedZone } = useSelectedZoneStore();
+  const { projectId } = useParams();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
@@ -56,7 +60,15 @@ const ProgressCard1 = ({ id, title }: { id: string; title: string }) => {
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          {
+            headers: {
+              Authorization: "Bearer <access_token>",  // Replace with actual token
+              "Content-Type": "application/json",
+              token: localStorage.getItem("token") || "",  // Coerce null to empty string
+              refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+          }
         );
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements);

app/src/modules/visualization/widgets/2d/charts/ProgressCard2.tsx

@@ -6,6 +6,8 @@ import axios from "axios";
 import useChartStore from "../../../../../store/visualization/useChartStore";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { StockIncreseIcon } from "../../../../../components/icons/RealTimeVisulationIcons";
+import { useSelectedZoneStore } from "../../../../../store/visualization/useZoneStore";
+import { useParams } from "react-router-dom";
 
 const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
   const {
@@ -19,6 +21,8 @@ const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
   const [value1, setValue1] = useState<any>("");
   const [value2, setValue2] = useState<any>("");
   const { selectedChartId } = useWidgetStore();
+  const { selectedZone } = useSelectedZoneStore();
+  const { projectId } = useParams();
 
   const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
   const email = localStorage.getItem("email") || "";
@@ -60,7 +64,15 @@ const ProgressCard2 = ({ id, title }: { id: string; title: string }) => {
     if (id !== "") {
       try {
         const response = await axios.get(
-          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/WidgetData/${id}/${organization}`
+          `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+          {
+            headers: {
+              Authorization: "Bearer <access_token>",  // Replace with actual token
+              "Content-Type": "application/json",
+              token: localStorage.getItem("token") || "",  // Coerce null to empty string
+              refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+          }
         );
         if (response.status === 200) {
           setmeasurements(response.data.Data.measurements);

app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx

@@ -26,6 +26,7 @@ import StateWorking from "./cards/StateWorking";
 import Throughput from "./cards/Throughput";
 import { useWidgetStore } from "../../../../store/useWidgetStore";
 import useChartStore from "../../../../store/visualization/useChartStore";
+import { useParams } from "react-router-dom";
 
 type WidgetData = {
   id: string;
@@ -75,18 +76,21 @@ export default function Dropped3dWidgets() {
   const [horizontalX, setHorizontalX] = useState<number | undefined>();
   const [horizontalZ, setHorizontalZ] = useState<number | undefined>();
 
-  const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
+  const activeZoneWidgets = zoneWidgetData[selectedZone.zoneUuid] || [];
+  const { projectId } = useParams();
+
   useEffect(() => {
     if (activeModule !== "visualization") return;
-    if (!selectedZone.zoneId) return;
+    if (!selectedZone.zoneUuid) return;
 
     const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0];
 
     async function get3dWidgetData() {
       const result = await get3dWidgetZoneData(
-        selectedZone.zoneId,
-        organization
+        selectedZone.zoneUuid,
+        organization,
+        projectId
       );
 
       setWidgets3D(result);
@@ -99,11 +103,11 @@ export default function Dropped3dWidgets() {
         rotation: widget.rotation || [0, 0, 0],
       }));
 
-      setZoneWidgetData(selectedZone.zoneId, formattedWidgets);
+      setZoneWidgetData(selectedZone.zoneUuid, formattedWidgets);
     }
 
     get3dWidgetData();
-  }, [selectedZone.zoneId, activeModule]);
+  }, [selectedZone.zoneUuid, activeModule]);
 
   const createdWidgetRef = useRef<WidgetData | null>(null);
 
@@ -153,7 +157,7 @@ export default function Dropped3dWidgets() {
         };
 
         createdWidgetRef.current = newWidget;
-        tempWidget(selectedZone.zoneId, newWidget); // temp add in UI
+        tempWidget(selectedZone.zoneUuid, newWidget); // temp add in UI
       }
     };
 
@@ -181,7 +185,7 @@ export default function Dropped3dWidgets() {
       // Update widget's position in memory
       if (intersects.length > 0) {
         const { x, y, z } = intersects[0].point;
-        tempWidgetPosition(selectedZone.zoneId, widget.id, [x, y, z]);
+        tempWidgetPosition(selectedZone.zoneUuid, widget.id, [x, y, z]);
         widget.position = [x, y, z];
       }
     };
@@ -194,6 +198,7 @@ export default function Dropped3dWidgets() {
 
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
+      const userId = localStorage.getItem("userId");
 
       const newWidget = createdWidgetRef.current;
       if (!newWidget || !widgetSelect.startsWith("ui")) return;
@@ -215,12 +220,12 @@ export default function Dropped3dWidgets() {
 
       // ✅ Remove temp widget
       const prevWidgets =
-        useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneId] || [];
+        useZoneWidgetStore.getState().zoneWidgetData[selectedZone.zoneUuid] || [];
       const cleanedWidgets = prevWidgets.filter((w) => w.id !== newWidget.id);
       useZoneWidgetStore.setState((state) => ({
         zoneWidgetData: {
           ...state.zoneWidgetData,
-          [selectedZone.zoneId]: cleanedWidgets,
+          [selectedZone.zoneUuid]: cleanedWidgets,
         },
       }));
 
@@ -231,16 +236,17 @@ export default function Dropped3dWidgets() {
       // }
 
       // ✅ Add widget
-      addWidget(selectedZone.zoneId, newWidget);
+      addWidget(selectedZone.zoneUuid, newWidget);
 
       const add3dWidget = {
         organization,
         widget: newWidget,
-        zoneId: selectedZone.zoneId,
+        zoneUuid: selectedZone.zoneUuid,
+        projectId,userId
       };
 
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
+        visualizationSocket.emit("v1:viz-3D-widget:add", add3dWidget);
       }
 
       createdWidgetRef.current = null;
@@ -258,7 +264,7 @@ export default function Dropped3dWidgets() {
   }, [
     widgetSelect,
     activeModule,
-    selectedZone.zoneId,
+    selectedZone.zoneUuid,
     widgetSubOption,
     camera,
   ]);
@@ -267,6 +273,7 @@ export default function Dropped3dWidgets() {
     if (!rightClickSelected) return;
     const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0];
+    const userId = localStorage.getItem("userId");
 
     if (rightSelect === "Duplicate") {
       async function duplicateWidget() {
@@ -293,15 +300,16 @@ export default function Dropped3dWidgets() {
         const adding3dWidget = {
           organization: organization,
           widget: newWidget,
-          zoneId: selectedZone.zoneId,
+          zoneUuid: selectedZone.zoneUuid,
+          projectId,userId
         };
         if (visualizationSocket) {
-          visualizationSocket.emit("v2:viz-3D-widget:add", adding3dWidget);
+          visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
         }
-        // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
+        // let response = await adding3dWidgets(selectedZone.zoneUuid, organization, newWidget)
         //
 
-        addWidget(selectedZone.zoneId, newWidget);
+        addWidget(selectedZone.zoneUuid, newWidget);
         setRightSelect(null);
         setRightClickSelected(null);
       }
@@ -314,16 +322,17 @@ export default function Dropped3dWidgets() {
           const deleteWidget = {
             organization,
             id: rightClickSelected,
-            zoneId: selectedZone.zoneId,
+            zoneUuid: selectedZone.zoneUuid,
+            projectId,userId
           };
 
           if (visualizationSocket) {
-            visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
+            visualizationSocket.emit("v1:viz-3D-widget:delete", deleteWidget);
           }
           // Call the API to delete the widget
-          // const response = await delete3dWidgetApi(selectedZone.zoneId, organization, rightClickSelected);
+          // const response = await delete3dWidgetApi(selectedZone.zoneUuid, organization, rightClickSelected);
           setZoneWidgetData(
-            selectedZone.zoneId,
+            selectedZone.zoneUuid,
             activeZoneWidgets.filter(
               (w: WidgetData) => w.id !== rightClickSelected
             )
@@ -364,16 +373,17 @@ export default function Dropped3dWidgets() {
   useEffect(() => {
     const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0];
+    const userId = localStorage.getItem("userId");
     const handleMouseDown = (event: MouseEvent) => {
       if (!rightClickSelected || !rightSelect) return;
-      const selectedZoneId = Object.keys(zoneWidgetData).find(
-        (zoneId: string) =>
-          zoneWidgetData[zoneId].some(
+      const selectedzoneUuid = Object.keys(zoneWidgetData).find(
+        (zoneUuid: string) =>
+          zoneWidgetData[zoneUuid].some(
             (widget: WidgetData) => widget.id === rightClickSelected
           )
       );
-      if (!selectedZoneId) return;
-      const selectedWidget = zoneWidgetData[selectedZoneId].find(
+      if (!selectedzoneUuid) return;
+      const selectedWidget = zoneWidgetData[selectedzoneUuid].find(
         (widget: WidgetData) => widget.id === rightClickSelected
       );
       if (!selectedWidget) return;
@@ -397,14 +407,14 @@ export default function Dropped3dWidgets() {
       if (rightSelect === "RotateX" || rightSelect === "RotateY") {
         mouseStartRef.current = { x: event.clientX, y: event.clientY };
 
-        const selectedZoneId = Object.keys(zoneWidgetData).find(
-          (zoneId: string) =>
-            zoneWidgetData[zoneId].some(
+        const selectedzoneUuid = Object.keys(zoneWidgetData).find(
+          (zoneUuid: string) =>
+            zoneWidgetData[zoneUuid].some(
               (widget: WidgetData) => widget.id === rightClickSelected
             )
         );
-        if (!selectedZoneId) return;
-        const selectedWidget = zoneWidgetData[selectedZoneId].find(
+        if (!selectedzoneUuid) return;
+        const selectedWidget = zoneWidgetData[selectedzoneUuid].find(
           (widget: WidgetData) => widget.id === rightClickSelected
         );
         if (selectedWidget) {
@@ -412,19 +422,19 @@ export default function Dropped3dWidgets() {
         }
       }
     };
-   
+
 
     const handleMouseMove = (event: MouseEvent) => {
       if (!rightClickSelected || !rightSelect) return;
-      const selectedZoneId = Object.keys(zoneWidgetData).find(
-        (zoneId: string) =>
-          zoneWidgetData[zoneId].some(
+      const selectedzoneUuid = Object.keys(zoneWidgetData).find(
+        (zoneUuid: string) =>
+          zoneWidgetData[zoneUuid].some(
             (widget: WidgetData) => widget.id === rightClickSelected
           )
       );
-      if (!selectedZoneId) return;
+      if (!selectedzoneUuid) return;
 
-      const selectedWidget = zoneWidgetData[selectedZoneId].find(
+      const selectedWidget = zoneWidgetData[selectedzoneUuid].find(
         (widget: WidgetData) => widget.id === rightClickSelected
       );
       if (!selectedWidget) return;
@@ -445,14 +455,14 @@ export default function Dropped3dWidgets() {
           typeof horizontalX === "number" &&
           typeof horizontalZ === "number"
         ) {
-          const selectedZoneId = Object.keys(zoneWidgetData).find((zoneId) =>
-            zoneWidgetData[zoneId].some(
+          const selectedzoneUuid = Object.keys(zoneWidgetData).find((zoneUuid) =>
+            zoneWidgetData[zoneUuid].some(
               (widget) => widget.id === rightClickSelected
             )
           );
-          if (!selectedZoneId) return;
+          if (!selectedzoneUuid) return;
 
-          const selectedWidget = zoneWidgetData[selectedZoneId].find(
+          const selectedWidget = zoneWidgetData[selectedzoneUuid].find(
             (widget) => widget.id === rightClickSelected
           );
           if (!selectedWidget) return;
@@ -463,7 +473,7 @@ export default function Dropped3dWidgets() {
             intersect.z + horizontalZ,
           ];
 
-          updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
+          updateWidgetPosition(selectedzoneUuid, rightClickSelected, newPosition);
         }
       }
 
@@ -477,9 +487,9 @@ export default function Dropped3dWidgets() {
       //   //   planeIntersect.current
       //   // );
       //   // console.log('intersect: ', intersect);
-     
+
       //   let intersect = event.clientY
-        
+
       //   if (intersect && typeof intersectcontextmenu === "number") {
       //     console.log('intersect: ', intersect);
       //     const diff = intersect - intersectcontextmenu;
@@ -496,7 +506,7 @@ export default function Dropped3dWidgets() {
       //     console.log('newPosition: ', newPosition);
 
 
-      //     updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
+      //     updateWidgetPosition(selectedzoneUuid, rightClickSelected, newPosition);
       //   }
       // }
       if (rightSelect === "Vertical Move") {
@@ -504,22 +514,22 @@ export default function Dropped3dWidgets() {
           lastClientY.current = event.clientY;
           return;
         }
-    
+
         const diff = lastClientY.current - event.clientY; // dragging up = increase Y
         const scaleFactor = 0.05; // tune this based on your scene scale
-    
+
         const unclampedY = selectedWidget.position[1] + diff * scaleFactor;
         const newY = Math.max(0, unclampedY);
-    
+
         lastClientY.current = event.clientY;
-    
+
         const newPosition: [number, number, number] = [
           selectedWidget.position[0],
           newY,
           selectedWidget.position[2],
         ];
-    
-        updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
+
+        updateWidgetPosition(selectedzoneUuid, rightClickSelected, newPosition);
       }
 
       if (rightSelect?.startsWith("Rotate")) {
@@ -536,7 +546,7 @@ export default function Dropped3dWidgets() {
           ]; // assert type
           const newRotation: [number, number, number] = [...currentRotation];
           newRotation[index] += 0.05 * sign;
-          updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+          updateWidgetRotation(selectedzoneUuid, rightClickSelected, newRotation);
         }
       }
       // if (rightSelect === "RotateX") {
@@ -552,7 +562,7 @@ export default function Dropped3dWidgets() {
       //             selectedWidget.rotation[1],
       //             selectedWidget.rotation[2],
       //         ];
-      //         updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+      //         updateWidgetRotation(selectedzoneUuid, rightClickSelected, newRotation);
       //     }
       // }
       // if (rightSelect === "RotateY") {
@@ -566,7 +576,7 @@ export default function Dropped3dWidgets() {
       //             selectedWidget.rotation[2],
       //         ];
 
-      //         updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+      //         updateWidgetRotation(selectedzoneUuid, rightClickSelected, newRotation);
       //     }
       // }
       // if (rightSelect === "RotateZ") {
@@ -580,20 +590,20 @@ export default function Dropped3dWidgets() {
       //             selectedWidget.rotation[2] + 0.05 * sign,
       //         ];
 
-      //         updateWidgetRotation(selectedZoneId, rightClickSelected, newRotation);
+      //         updateWidgetRotation(selectedzoneUuid, rightClickSelected, newRotation);
       //     }
       // }
     };
     const handleMouseUp = () => {
       if (!rightClickSelected || !rightSelect) return;
-      const selectedZoneId = Object.keys(zoneWidgetData).find((zoneId) =>
-        zoneWidgetData[zoneId].some(
+      const selectedzoneUuid = Object.keys(zoneWidgetData).find((zoneUuid) =>
+        zoneWidgetData[zoneUuid].some(
           (widget) => widget.id === rightClickSelected
         )
       );
-      if (!selectedZoneId) return;
+      if (!selectedzoneUuid) return;
 
-      const selectedWidget = zoneWidgetData[selectedZoneId].find(
+      const selectedWidget = zoneWidgetData[selectedzoneUuid].find(
         (widget) => widget.id === rightClickSelected
       );
       if (!selectedWidget) return;
@@ -610,7 +620,7 @@ export default function Dropped3dWidgets() {
           number
         ];
         // (async () => {
-        //     let response = await update3dWidget(selectedZoneId, organization, rightClickSelected, lastPosition);
+        //     let response = await update3dWidget(selectedzoneUuid, organization, rightClickSelected, lastPosition);
         //
         //     if (response) {
         //
@@ -618,13 +628,14 @@ export default function Dropped3dWidgets() {
         // })();
         let updatingPosition = {
           organization: organization,
-          zoneId: selectedZoneId,
+          zoneUuid: selectedzoneUuid,
           id: rightClickSelected,
           position: lastPosition,
+          projectId,userId
         };
         if (visualizationSocket) {
           visualizationSocket.emit(
-            "v2:viz-3D-widget:modifyPositionRotation",
+            "v1:viz-3D-widget:modifyPositionRotation",
             updatingPosition
           );
         }
@@ -634,7 +645,7 @@ export default function Dropped3dWidgets() {
         let lastRotation = formatValues(rotation) as [number, number, number];
 
         // (async () => {
-        //     let response = await update3dWidgetRotation(selectedZoneId, organization, rightClickSelected, lastRotation);
+        //     let response = await update3dWidgetRotation(selectedzoneUuid, organization, rightClickSelected, lastRotation);
         //
         //     if (response) {
         //
@@ -642,13 +653,14 @@ export default function Dropped3dWidgets() {
         // })();
         let updatingRotation = {
           organization: organization,
-          zoneId: selectedZoneId,
+          zoneUuid: selectedzoneUuid,
           id: rightClickSelected,
           rotation: lastRotation,
+          projectId,userId
         };
         if (visualizationSocket) {
           visualizationSocket.emit(
-            "v2:viz-3D-widget:modifyPositionRotation",
+            "v1:viz-3D-widget:modifyPositionRotation",
             updatingRotation
           );
         }
@@ -686,12 +698,12 @@ export default function Dropped3dWidgets() {
     setTop(relativeY);
     setLeft(relativeX);
 
-    const selectedZoneId = Object.keys(zoneWidgetData).find((zoneId) =>
-      zoneWidgetData[zoneId].some((widget) => widget.id === id)
+    const selectedzoneUuid = Object.keys(zoneWidgetData).find((zoneUuid) =>
+      zoneWidgetData[zoneUuid].some((widget) => widget.id === id)
     );
-    if (!selectedZoneId) return;
+    if (!selectedzoneUuid) return;
 
-    const selectedWidget = zoneWidgetData[selectedZoneId].find(
+    const selectedWidget = zoneWidgetData[selectedzoneUuid].find(
       (widget) => widget.id === id
     );
     if (!selectedWidget) return;

app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx

@@ -18,6 +18,7 @@ import { useWidgetStore } from "../../../../store/useWidgetStore";
 import { useSocketStore } from "../../../../store/builder/store";
 import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
 import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
+import { useParams } from "react-router-dom";
 interface DraggingState {
   zone: string;
   index: number;
@@ -43,6 +44,7 @@ const DroppedObjects: React.FC = () => {
   const { visualizationSocket } = useSocketStore();
   const { isPlaying } = usePlayButtonStore();
   const zones = useDroppedObjectsStore((state) => state.zones);
+  const { projectId } = useParams();
 
   const [openKebabId, setOpenKebabId] = useState<string | null>(null);
   const updateObjectPosition = useDroppedObjectsStore(
@@ -110,7 +112,7 @@ const DroppedObjects: React.FC = () => {
 
   function handleDuplicate(zoneName: string, index: number) {
     setOpenKebabId(null);
-    duplicateObject(zoneName, index); // Call the duplicateObject method from the store
+    duplicateObject(zoneName, index,projectId); // Call the duplicateObject method from the store
     setSelectedChartId(null);
   }
 
@@ -119,15 +121,17 @@ const DroppedObjects: React.FC = () => {
       setSelectedChartId(null);
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
+      const userId = localStorage.getItem("userId");
 
       let deleteFloatingWidget = {
         floatWidgetID: id,
         organization: organization,
-        zoneId: zone.zoneId,
+        zoneUuid: zone.zoneUuid,
+        userId,projectId
       };
 
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget);
+        visualizationSocket.emit("v1:viz-float:delete", deleteFloatingWidget);
       }
       deleteObject(zoneName, id);
     } catch (error) {
@@ -295,7 +299,7 @@ const DroppedObjects: React.FC = () => {
         const email = localStorage.getItem("email") || "";
         const organization = email?.split("@")[1]?.split(".")[0];
         const response = await addingFloatingWidgets(
-          zone.zoneId,
+          zone.zoneUuid,
           organization,
           {
             ...zone.objects[draggingIndex.index],
@@ -437,7 +441,7 @@ const DroppedObjects: React.FC = () => {
           position: boundedPosition,
         },
         index: draggingIndex.index,
-        zoneId: zone.zoneId,
+        zoneUuid: zone.zoneUuid,
       };
       if (visualizationSocket) {
         visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget);

app/src/modules/visualization/widgets/floating/cards/SimpleCard.tsx

@@ -30,7 +30,7 @@ const SimpleCard: React.FC<SimpleCardProps> = ({
     });
     
     event.dataTransfer.setData("text/plain", cardData);
-    console.log('cardData: ', cardData);
+    // console.log('cardData: ', cardData);
   };
 
   return (

app/src/modules/visualization/widgets/panel/AddButtons.tsx

@@ -6,13 +6,14 @@ import {
 } from "../../../../components/icons/RealTimeVisulationIcons";
 import { AddIcon } from "../../../../components/icons/ExportCommonIcons";
 import { useSocketStore } from "../../../../store/builder/store";
+import { useParams } from "react-router-dom";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
 
 // Define the type for HiddenPanels, where keys are zone IDs and values are arrays of hidden sides
 interface HiddenPanels {
-  [zoneId: string]: Side[];
+  [zoneUuid: string]: Side[];
 }
 
 // Define the type for the props passed to the Buttons component
@@ -23,7 +24,7 @@ interface ButtonsProps {
     panelOrder: Side[];
     lockedPanels: Side[];
     points: [];
-    zoneId: string;
+    zoneUuid: string;
     zoneViewPortTarget: number[];
     zoneViewPortPosition: number[];
     widgets: {
@@ -41,7 +42,7 @@ interface ButtonsProps {
       panelOrder: Side[];
       lockedPanels: Side[];
       points: [];
-      zoneId: string;
+      zoneUuid: string;
       zoneViewPortTarget: number[];
       zoneViewPortPosition: number[];
       widgets: {
@@ -68,16 +69,17 @@ const AddButtons: React.FC<ButtonsProps> = ({
   setWaitingPanels,
 }) => {
   const { visualizationSocket } = useSocketStore();
+  const { projectId } = useParams();
 
   // Function to toggle visibility of a panel
   const toggleVisibility = (side: Side) => {
-    const isHidden = hiddenPanels[selectedZone.zoneId]?.includes(side) ?? false;
+    const isHidden = hiddenPanels[selectedZone.zoneUuid]?.includes(side) ?? false;
 
     if (isHidden) {
       // If the panel is already hidden, remove it from the hiddenPanels array for this zone
       setHiddenPanels((prevHiddenPanels) => ({
         ...prevHiddenPanels,
-        [selectedZone.zoneId]: prevHiddenPanels[selectedZone.zoneId].filter(
+        [selectedZone.zoneUuid]: prevHiddenPanels[selectedZone.zoneUuid].filter(
           (panel) => panel !== side
         ),
       }));
@@ -85,8 +87,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
       // If the panel is visible, add it to the hiddenPanels array for this zone
       setHiddenPanels((prevHiddenPanels) => ({
         ...prevHiddenPanels,
-        [selectedZone.zoneId]: [
-          ...(prevHiddenPanels[selectedZone.zoneId] || []),
+        [selectedZone.zoneUuid]: [
+          ...(prevHiddenPanels[selectedZone.zoneUuid] || []),
           side,
         ],
       }));
@@ -97,6 +99,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
   const toggleLockPanel = async (side: Side) => {
     const email = localStorage.getItem("email") ?? "";
     const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
+    const userId = localStorage.getItem("userId");
     //add api
     const newLockedPanels = selectedZone.lockedPanels.includes(side)
       ? selectedZone.lockedPanels.filter((panel) => panel !== side)
@@ -110,10 +113,11 @@ const AddButtons: React.FC<ButtonsProps> = ({
     let lockedPanel = {
       organization: organization,
       lockedPanel: newLockedPanels,
-      zoneId: selectedZone.zoneId,
+      zoneUuid: selectedZone.zoneUuid,
+      userId, projectId
     };
     if (visualizationSocket) {
-      visualizationSocket.emit("v2:viz-panel:locked", lockedPanel);
+      visualizationSocket.emit("v1:viz-panel:locked", lockedPanel);
     }
 
     setSelectedZone(updatedZone);
@@ -124,21 +128,23 @@ const AddButtons: React.FC<ButtonsProps> = ({
     //add api
     // console.log('side: ', side);
     if (
-      hiddenPanels[selectedZone.zoneId]?.includes(side) ||
+      hiddenPanels[selectedZone.zoneUuid]?.includes(side) ||
       selectedZone.lockedPanels.includes(side)
     )
       return;
 
     const email = localStorage.getItem("email") ?? "";
     const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
+    const userId = localStorage.getItem("userId");
 
     let clearPanel = {
       organization: organization,
       panelName: side,
-      zoneId: selectedZone.zoneId,
+      zoneUuid: selectedZone.zoneUuid,
+      userId, projectId
     };
     if (visualizationSocket) {
-      visualizationSocket.emit("v2:viz-panel:clear", clearPanel);
+      visualizationSocket.emit("v1:viz-panel:clear", clearPanel);
     }
     const cleanedWidgets = selectedZone.widgets.filter(
       (widget) => widget.panel !== side
@@ -153,7 +159,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
   // Function to handle "+" button click
   const handlePlusButtonClick = async (side: Side) => {
-    const zoneId = selectedZone.zoneId;
+    const zoneUuid = selectedZone.zoneUuid;
 
     if (selectedZone.activeSides.includes(side)) {
       // Already active: Schedule removal
@@ -165,6 +171,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
         const email = localStorage.getItem("email") ?? "";
         const organization = email?.split("@")[1]?.split(".")[0] ?? "";
+        const userId = localStorage.getItem("userId");
 
         // Remove widgets for that side
         const cleanedWidgets = selectedZone.widgets.filter(
@@ -184,19 +191,21 @@ const AddButtons: React.FC<ButtonsProps> = ({
         const deletePanel = {
           organization,
           panelName: side,
-          zoneId,
+          zoneUuid,
+          projectId,
+          userId
         };
 
         if (visualizationSocket) {
-          visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
+          visualizationSocket.emit("v1:viz-panel:delete", deletePanel);
         }
 
         setSelectedZone(updatedZone);
 
-        if (hiddenPanels[zoneId]?.includes(side)) {
+        if (hiddenPanels[zoneUuid]?.includes(side)) {
           setHiddenPanels((prev) => ({
             ...prev,
-            [zoneId]: prev[zoneId].filter((s) => s !== side),
+            [zoneUuid]: prev[zoneUuid].filter((s) => s !== side),
           }));
         }
 
@@ -208,6 +217,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
       try {
         const email = localStorage.getItem("email") ?? "";
         const organization = email?.split("@")[1]?.split(".")[0] ?? "";
+        const userId = localStorage.getItem("userId");
 
         const newActiveSides = selectedZone.activeSides.includes(side)
           ? [...selectedZone.activeSides]
@@ -221,12 +231,14 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
         const addPanel = {
           organization,
-          zoneId,
+          zoneUuid,
+          projectId,
+          userId,
           panelOrder: newActiveSides,
         };
 
         if (visualizationSocket) {
-          visualizationSocket.emit("v2:viz-panel:add", addPanel);
+          visualizationSocket.emit("v1:viz-panel:add", addPanel);
         }
 
         setSelectedZone(updatedZone);
@@ -245,9 +257,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
           <button
             id={`${side}-add-button`}
-            className={`side-button ${side}${
-              selectedZone.activeSides.includes(side) ? " active" : ""
-            }`}
+            className={`side-button ${side}${selectedZone.activeSides.includes(side) ? " active" : ""
+              }`}
             onClick={() => handlePlusButtonClick(side)}
             title={
               selectedZone.activeSides.includes(side)
@@ -265,24 +276,22 @@ const AddButtons: React.FC<ButtonsProps> = ({
             <div
               className={`extra-Bs
                   ${waitingPanels === side ? "extra-Bs-addclosing" : ""}
-                  ${
-                    !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
-                    waitingPanels !== side
-                      ? "extra-Bs-addopening"
-                      : ""
-                  }
+                  ${!hiddenPanels[selectedZone.zoneUuid]?.includes(side) &&
+                  waitingPanels !== side
+                  ? "extra-Bs-addopening"
+                  : ""
+                }
                 `}
             >
               {/* Hide Panel */}
               <button
-                className={`icon ${
-                  hiddenPanels[selectedZone.zoneId]?.includes(side)
-                    ? "active"
-                    : ""
-                }`}
+                className={`icon ${hiddenPanels[selectedZone.zoneUuid]?.includes(side)
+                  ? "active"
+                  : ""
+                  }`}
                 id={`${side}-hide-panel-visulization`}
                 title={
-                  hiddenPanels[selectedZone.zoneId]?.includes(side)
+                  hiddenPanels[selectedZone.zoneUuid]?.includes(side)
                     ? "Show Panel"
                     : "Hide Panel"
                 }
@@ -290,7 +299,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
               >
                 <EyeIcon
                   fill={
-                    hiddenPanels[selectedZone.zoneId]?.includes(side)
+                    hiddenPanels[selectedZone.zoneUuid]?.includes(side)
                       ? "var(--icon-default-color-active)"
                       : "var(--text-color)"
                   }
@@ -305,8 +314,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
                 onClick={() => cleanPanel(side)}
                 style={{
                   cursor:
-                    hiddenPanels[selectedZone.zoneId]?.includes(side) ||
-                    selectedZone.lockedPanels.includes(side)
+                    hiddenPanels[selectedZone.zoneUuid]?.includes(side) ||
+                      selectedZone.lockedPanels.includes(side)
                       ? "not-allowed"
                       : "pointer",
                 }}
@@ -316,9 +325,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
               {/* Lock/Unlock Panel */}
               <button
-                className={`icon ${
-                  selectedZone.lockedPanels.includes(side) ? "active" : ""
-                }`}
+                className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
+                  }`}
                 id={`${side}-lock-panel-visulization`}
                 title={
                   selectedZone.lockedPanels.includes(side)

app/src/modules/visualization/widgets/panel/Panel.tsx

@@ -5,6 +5,7 @@ import { useSocketStore } from "../../../../store/builder/store";
 import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
 import { useWidgetStore } from "../../../../store/useWidgetStore";
 import { DraggableWidget } from "../2d/DraggableWidget";
+import { useParams } from "react-router-dom";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -23,7 +24,7 @@ interface PanelProps {
     panelOrder: Side[];
     lockedPanels: Side[];
     points: [];
-    zoneId: string;
+    zoneUuid: string;
     zoneViewPortTarget: number[];
     zoneViewPortPosition: number[];
     widgets: Widget[];
@@ -35,7 +36,7 @@ interface PanelProps {
       panelOrder: Side[];
       lockedPanels: Side[];
       points: [];
-      zoneId: string;
+      zoneUuid: string;
       zoneViewPortTarget: number[];
       zoneViewPortPosition: number[];
       widgets: Widget[];
@@ -67,6 +68,7 @@ const Panel: React.FC<PanelProps> = ({
     width: 0,
     height: 0,
   });
+  const { projectId } = useParams();
 
   // Track canvas dimensions
   useEffect(() => {
@@ -109,9 +111,8 @@ const Panel: React.FC<PanelProps> = ({
         case "bottom":
           return {
             minWidth: "170px",
-            width: `calc(100% - ${
-              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
-            }px)`,
+            width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+              }px)`,
             minHeight: "170px",
             height: `${panelSize}px`,
             left: leftActive ? `${panelSize}px` : "0",
@@ -124,9 +125,8 @@ const Panel: React.FC<PanelProps> = ({
             minWidth: "170px",
             width: `${panelSize}px`,
             minHeight: "170px",
-            height: `calc(100% - ${
-              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
-            }px)`,
+            height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+              }px)`,
             top: topActive ? `${panelSize}px` : "0",
             bottom: bottomActive ? `${panelSize}px` : "0",
             [side]: "0",
@@ -145,7 +145,7 @@ const Panel: React.FC<PanelProps> = ({
     if (
       !draggedAsset ||
       isPanelLocked(panel) ||
-      hiddenPanels[selectedZone.zoneId]?.includes(panel)
+      hiddenPanels[selectedZone.zoneUuid]?.includes(panel)
     )
       return;
 
@@ -184,6 +184,7 @@ const Panel: React.FC<PanelProps> = ({
   const addWidgetToPanel = async (asset: any, panel: Side) => {
     const email = localStorage.getItem("email") ?? "";
     const organization = email?.split("@")[1]?.split(".")[0];
+    const userId = localStorage.getItem("userId");
 
     const newWidget = {
       ...asset,
@@ -193,12 +194,13 @@ const Panel: React.FC<PanelProps> = ({
 
     let addWidget = {
       organization: organization,
-      zoneId: selectedZone.zoneId,
+      zoneUuid: selectedZone.zoneUuid,
       widget: newWidget,
+      projectId, userId
     };
 
     if (visualizationSocket) {
-      visualizationSocket.emit("v2:viz-widget:add", addWidget);
+      visualizationSocket.emit("v1:viz-widget:add", addWidget);
     }
 
     setSelectedZone((prev) => ({
@@ -285,9 +287,8 @@ const Panel: React.FC<PanelProps> = ({
         <div
           key={side}
           id={`panel-wrapper-${side}`}
-          className={`panel ${side}-panel absolute ${
-            hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
-          }`}
+          className={`panel ${side}-panel absolute ${hiddenPanels[selectedZone.zoneUuid]?.includes(side) ? "hidePanel" : ""
+            }`}
           style={getPanelStyle(side)}
           onDrop={(e) => handleDrop(e, side)}
           onDragOver={(e) => e.preventDefault()}
@@ -300,18 +301,16 @@ const Panel: React.FC<PanelProps> = ({
           }}
         >
           <div
-            className={`panel-content ${
-              waitingPanels === side ? `${side}-closing` : ""
-            }${
-              !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
-              waitingPanels !== side
+            className={`panel-content ${waitingPanels === side ? `${side}-closing` : ""
+              }${!hiddenPanels[selectedZone.zoneUuid]?.includes(side) &&
+                waitingPanels !== side
                 ? `${side}-opening`
                 : ""
-            } ${isPlaying ? "fullScreen" : ""}`}
+              } ${isPlaying ? "fullScreen" : ""}`}
             style={{
               pointerEvents:
                 selectedZone.lockedPanels.includes(side) ||
-                hiddenPanels[selectedZone.zoneId]?.includes(side)
+                  hiddenPanels[selectedZone.zoneUuid]?.includes(side)
                   ? "none"
                   : "auto",
               opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",

app/src/modules/visualization/zone/DisplayZone.tsx

@@ -14,12 +14,13 @@ import {
 } from "../../../components/icons/SimulationIcons";
 import { InfoIcon } from "../../../components/icons/ExportCommonIcons";
 import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { useParams } from "react-router-dom";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
 
 interface HiddenPanels {
-  [zoneId: string]: Side[];
+  [zoneUuid: string]: Side[];
 }
 
 interface DisplayZoneProps {
@@ -30,7 +31,7 @@ interface DisplayZoneProps {
       lockedPanels: Side[];
       points: [];
       widgets: Widget[];
-      zoneId: string;
+      zoneUuid: string;
       zoneViewPortTarget: number[];
       zoneViewPortPosition: number[];
     };
@@ -40,7 +41,7 @@ interface DisplayZoneProps {
     activeSides: Side[];
     panelOrder: Side[];
     lockedPanels: Side[];
-    zoneId: string;
+    zoneUuid: string;
     points: [];
     zoneViewPortTarget: number[];
     zoneViewPortPosition: number[];
@@ -59,7 +60,7 @@ interface DisplayZoneProps {
       panelOrder: Side[];
       lockedPanels: Side[];
       points: [];
-      zoneId: string;
+      zoneUuid: string;
       zoneViewPortTarget: number[];
       zoneViewPortPosition: number[];
       widgets: {
@@ -92,7 +93,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   const { isPlaying } = usePlayButtonStore();
 
   const { setSelectedChartId } = useWidgetStore();
-
+  const { projectId } = useParams();
   // Function to calculate overflow state
   const updateOverflowState = useCallback(() => {
     const container = scrollContainerRef.current;
@@ -167,21 +168,23 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
     }
   };
 
-  async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
+  async function handleSelect2dZoneData(zoneUuid: string, zoneName: string) {
     try {
-      if (selectedZone?.zoneId === zoneId) {
+      if (selectedZone?.zoneUuid === zoneUuid) {
         return;
       }
       // setSelectedChartId(null);
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-      let response = await getSelect2dZoneData(zoneId, organization);
-      let res = await getFloatingZoneData(zoneId, organization);
-      console.log("res: ", res);
+ 
+      let response = await getSelect2dZoneData(zoneUuid, organization, projectId);
+      console.log('response2d: ', response);
+      let res = await getFloatingZoneData(zoneUuid, organization, projectId);
+      console.log("resFloating: ", res);
 
       setFloatingWidget(res);
       // Set the selected zone in the store
-      useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
+      useDroppedObjectsStore.getState().setZone(zoneName, zoneUuid);
       if (Array.isArray(res)) {
         res.forEach((val) => {
           useDroppedObjectsStore.getState().addObject(zoneName, val);
@@ -195,7 +198,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         lockedPanels: response.lockedPanels || [],
         widgets: response.widgets || [],
         points: response.points || [],
-        zoneId: zoneId,
+        zoneUuid: zoneUuid,
         zoneViewPortTarget: response.viewPortCenter || {},
         zoneViewPortPosition: response.viewPortposition || {},
       });
@@ -208,12 +211,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
     <div
       ref={containerRef}
       id="zone-container"
-      className={`zone-container ${
-        selectedZone?.activeSides?.includes("bottom") &&
-        !hiddenPanels[selectedZone.zoneId]?.includes("bottom")
+      className={`zone-container ${selectedZone?.activeSides?.includes("bottom") &&
+          !hiddenPanels[selectedZone.zoneUuid]?.includes("bottom")
           ? "bottom"
           : ""
-      } ${isPlaying ? "visualization-playing" : ""}`}
+        } ${isPlaying ? "visualization-playing" : ""}`}
     >
       {/* Left Arrow */}
       {showLeftArrow && (
@@ -237,11 +239,13 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
             {Object.keys(zonesData).map((zoneName, index) => (
               <div
                 key={index}
-                className={`zone ${
-                  selectedZone.zoneName === zoneName ? "active" : ""
-                }`}
-                onClick={() =>
-                  handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
+                className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
+                  }`}
+                onClick={() => {
+
+                  console.log('zonesData: ', zonesData);
+                  handleSelect2dZoneData(zonesData[zoneName]?.zoneUuid, zoneName)
+                }
                 }
               >
                 {zoneName}

app/src/pages/Dashboard.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
-  useOrganization,
-  useSocketStore,
-  useUserName,
+  useSocketStore
 } from "../store/builder/store";
 import DashboardHome from "../components/Dashboard/DashboardHome";
 import DashboardProjects from "../components/Dashboard/DashboardProjects";
@@ -13,35 +11,16 @@ import DashboardTutorial from "../components/Dashboard/DashboardTutorial";
 
 const Dashboard: React.FC = () => {
   const [activeTab, setActiveTab] = useState<string>("Home");
-  const { setUserName } = useUserName();
-  const { setOrganization } = useOrganization();
   const { socket } = useSocketStore();
   const { userId, organization, email, userName } = getUserData();
-  // const token = localStorage.getItem("token")
-  // useEffect(() => {
-  //   
-  //   useSocketStore.getState().initializeSocket(email, organization, token)
-  //   
-  //   // useSocketStore.getState().initializeSocket(email, organization, userId);
-  //   if (organization && userName) {
-  //     setOrganization(organization);
-  //     setUserName(userName);
-  //   }
 
-  // }, [socket]);
   useEffect(() => {
     const token = localStorage.getItem("token");
     if (token) {
-      try {
-      } catch (e) {
-      }
       useSocketStore.getState().initializeSocket(email, organization, token);
     } else {
 
     }
-    // return () => {
-    //   useSocketStore.getState().disconnectSocket();
-    // };
   }, [socket]);
 
   return (

app/src/pages/Project.tsx

@@ -92,7 +92,7 @@ const Project: React.FC = () => {
         filterProject._id,
         userId,
       );
-      console.log('filterProject.projectName: ', filterProject.projectName);
+      // console.log('filterProject.projectName: ', filterProject.projectName);
       setProjectName(filterProject.projectName)
 
     }
@@ -121,7 +121,10 @@ const Project: React.FC = () => {
     const email = localStorage.getItem("email");
     if (email) {
       const Organization = email.split("@")[1].split(".")[0];
-      // useSocketStore.getState().initializeSocket(email, Organization);
+      const token = localStorage.getItem("token");
+      if (token) {
+        useSocketStore.getState().initializeSocket(email, Organization, token);
+      }
       const name = localStorage.getItem("userName");
       if (Organization && name) {
         setOrganization(Organization);
@@ -229,6 +232,7 @@ const Project: React.FC = () => {
             selectedZone,
             setFloatingWidget,
             event,
+            projectId
           })
         }
         onDragOver={(event) => event.preventDefault()}

app/src/services/dashboard/createProject.ts

@@ -13,14 +13,12 @@ export const createProject = async (projectUuid: string, userId: string, thumbna
       },
       body: JSON.stringify({ projectUuid, userId, thumbnail, organization, }),
     });
-
-    console.log('response: ', response);
     if (!response.ok) {
       throw new Error("Failed to add project");
     }
 
     const result = await response.json();
-    console.log('result: ', result);
+    
     return result;
   } catch (error) {
     if (error instanceof Error) {

app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts

@@ -1,17 +1,21 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const getFloorAssets = async (organization: string) => {
+export const getFloorAssets = async (organization: string,projectId?:string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/floorAssets/${organization}`,
+      `${url_Backend_dwinzo}/api/V1/floorAssets/${projectId}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );
 
+    // console.log('response: ', response);
     if (!response.ok) {
       throw new Error("Failed to get assets");
     }

app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts

@@ -21,10 +21,13 @@ export const setFloorItemApi = async (
       isVisible,
     };
 
-    const response = await fetch(`${url_Backend_dwinzo}/api/v2/setasset`, {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/setAsset`, {
       method: "POST",
       headers: {
+        Authorization: "Bearer <access_token>",  // Replace with actual token
         "Content-Type": "application/json",
+        token: localStorage.getItem("token") || "",  // Coerce null to empty string
+        refresh_token: localStorage.getItem("refreshToken") || "",
       },
       body: JSON.stringify(body),
     });

app/src/services/factoryBuilder/assest/wallAsset/getWallItemsApi.ts

@@ -1,22 +1,27 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const getWallItems = async (organization: string) => {
+export const getWallItems = async (organization: string,projectId?:string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v1/findWallItems/${organization}`,
+      `${url_Backend_dwinzo}/api/V1/walls/${projectId}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );
 
+    // console.log('response: ', response);
     if (!response.ok) {
       throw new Error("Failed to get Wall Items");
     }
 
     const result = await response.json();
+    // console.log('result: ', result);
     return result;
   } catch (error) {
     echo.error("Failed to get wall items");

app/src/services/factoryBuilder/camera/getCameraApi.ts

@@ -3,23 +3,28 @@ import * as THREE from "three";
 
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const getCamera = async (organization: string, userId: string) => {
+export const getCamera = async (organization: string, userId: string,projectId?:string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v1/getCamera/${organization}/${userId}`,
+      `${url_Backend_dwinzo}/api/V1/cameras/${projectId}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );
 
-    if (!response.ok) {
-      throw new Error("Failed to get Camera position and target");
-    }
+    // console.log('response: ', response);
+    // if (!response.ok) {
+    //   throw new Error("Failed to get Camera position and target");
+    // }
 
     const result = await response.json();
+    // console.log('result: ', result);
     if (result === "user not found") {
       return null;
     } else {

app/src/services/factoryBuilder/environment/findEnvironment.ts

@@ -2,23 +2,28 @@ import { setEnvironment } from "./setEnvironment";
 
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const findEnvironment = async (organization: string, userId: string) => {
+export const findEnvironment = async (organization: string, userId: string, projectId?: string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v1/findEnvironments/${organization}/${userId}`,
+      `${url_Backend_dwinzo}/api/V1/Environments/${projectId}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );
 
+
     if (!response.ok) {
       throw new Error("Failed to get wall and roof visibility");
     }
 
     const result = await response.json();
+    console.log('resultgetenv: ', result);
     if (result === "user not found") {
       const userpos = setEnvironment(
         organization,
@@ -27,7 +32,8 @@ export const findEnvironment = async (organization: string, userId: string) => {
         false,
         false,
         40,
-        true
+        true,
+        projectId
       );
       return userpos;
     } else {

app/src/services/factoryBuilder/environment/setEnvironment.ts

@@ -7,15 +7,26 @@ export const setEnvironment = async (
   roofVisibility: Boolean,
   shadowVisibility: Boolean,
   renderDistance: number,
-  limitDistance: boolean
+  limitDistance: boolean,
+  projectId?: string
 ) => {
+  console.log('organization,userId,wallVisibility,roofVisibility,shadowVisibility,renderDistance,limitDistance,: ', organization,
+    userId,
+    wallVisibility,
+    roofVisibility,
+    shadowVisibility,
+    renderDistance,
+    limitDistance,projectId);
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v1/setEvironments`,
+      `${url_Backend_dwinzo}/api/V1/SetEnvironments`,
       {
         method: "POST",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
         body: JSON.stringify({
           organization,
@@ -25,15 +36,19 @@ export const setEnvironment = async (
           shadowVisibility,
           renderDistance,
           limitDistance,
+          projectId
+
         }),
       }
     );
 
+    // console.log('responseenv: ', response);
     if (!response.ok) {
       throw new Error("Failed to set wall and roof visibility");
     }
 
     const result = await response.json();
+    console.log('resultsetenv: ', result);
     return result;
   } catch (error) {
     echo.error("Failed to set env");

app/src/services/factoryBuilder/lines/getLinesApi.ts

@@ -1,13 +1,16 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const getLines = async (organization: string) => {
+export const getLines = async (organization: string,projectId?:string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v1/findLines/${organization}`,
+      `${url_Backend_dwinzo}/api/V1/lines/${projectId}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );
@@ -17,6 +20,7 @@ export const getLines = async (organization: string) => {
     }
 
     const result = await response.json();
+    // console.log('result: ', result);
     return result;
   } catch (error) {
     echo.error("Failed to get Lines");

app/src/services/factoryBuilder/zones/deleteZoneApi.ts

@@ -3,7 +3,7 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 export const deleteZonesApi = async (
   userId: string,
   organization: string,
-  zoneId: string
+  zoneUuid: string
 ) => {
   try {
     const response = await fetch(`${url_Backend_dwinzo}/api/v1/setLine`, {
@@ -11,7 +11,7 @@ export const deleteZonesApi = async (
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ userId, organization, zoneId }),
+      body: JSON.stringify({ userId, organization, zoneUuid }),
     });
 
     if (!response.ok) {

app/src/services/factoryBuilder/zones/getZonesApi.ts

@@ -1,23 +1,27 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 
-export const getZonesApi = async (organization: string) => {
+export const getZonesApi = async (organization: string, projectId?: string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/findZones/${organization}`,
+      `${url_Backend_dwinzo}/api/V1/zones/${projectId}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );
 
-    // if (!response.ok) {
-    //     throw new Error("Failed to get Zones");
-    // }
+    if (!response.ok) {
+        throw new Error("Failed to get Zones");
+    }
 
     const result = await response.json();
+    
     return result;
   } catch (error) {
     echo.error("Failed to get zone data");

app/src/services/visulization/zone/add3dWidget.ts

@@ -1,17 +1,20 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 export const adding3dWidgets = async (
-  zoneId: string,
+  zoneUuid: string,
   organization: string,
   widget: {}
 ) => {
   try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v2/3dwidget/save`, {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/widget3d/save`, {
       method: "POST",
       headers: {
+        Authorization: "Bearer <access_token>",  // Replace with actual token
         "Content-Type": "application/json",
+        token: localStorage.getItem("token") || "",  // Coerce null to empty string
+        refresh_token: localStorage.getItem("refreshToken") || "",
       },
-      body: JSON.stringify({ organization, zoneId, widget }),
+      body: JSON.stringify({ organization, zoneUuid, widget }),
     });
 
     if (!response.ok) {

app/src/services/visulization/zone/addFloatingWidgets.ts

@@ -2,19 +2,22 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 
 export const addingFloatingWidgets = async (
-  zoneId: string,
+  zoneUuid: string,
   organization: string,
   widget: {}
 ) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/floatwidget/save`,
+      `${url_Backend_dwinzo}/api/V1/floatWidget/save`,
       {
         method: "POST",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
-        body: JSON.stringify({ organization, zoneId, widget }),
+        body: JSON.stringify({ organization, zoneUuid, widget }),
       }
     );
 

app/src/services/visulization/zone/addWidgets.ts

@@ -1,17 +1,20 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 export const addingWidgets = async (
-  zoneId: string,
+  zoneUuid: string,
   organization: string,
   widget: {}
 ) => {
   try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v2/widget/save`, {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/widget/save`, {
       method: "POST",
       headers: {
+        Authorization: "Bearer <access_token>",  // Replace with actual token
         "Content-Type": "application/json",
+        token: localStorage.getItem("token") || "",  // Coerce null to empty string
+        refresh_token: localStorage.getItem("refreshToken") || "",
       },
-      body: JSON.stringify({ organization, zoneId, widget }),
+      body: JSON.stringify({ organization, zoneUuid, widget }),
     });
 
     if (!response.ok) {
@@ -19,6 +22,7 @@ export const addingWidgets = async (
     }
 
     const result = await response.json();
+    // console.log('result: ', result);
     return result;
   } catch (error) {
     echo.error("Failed to add widget");

app/src/services/visulization/zone/clearPanel.ts

@@ -1,17 +1,20 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 export const clearPanel = async (
-  zoneId: string,
+  zoneUuid: string,
   organization: string,
   panelName: string
 ) => {
   try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v2/clearpanel`, {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/panel/clear`, {
       method: "PATCH",
       headers: {
+        Authorization: "Bearer <access_token>",  // Replace with actual token
         "Content-Type": "application/json",
+        token: localStorage.getItem("token") || "",  // Coerce null to empty string
+        refresh_token: localStorage.getItem("refreshToken") || "",
       },
-      body: JSON.stringify({ organization, zoneId, panelName }),
+      body: JSON.stringify({ organization, zoneUuid, panelName }),
     });
 
     if (!response.ok) {

app/src/services/visulization/zone/delete3dWidget.ts

@@ -2,19 +2,22 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 
 export const delete3dWidgetApi = async (
-  zoneId: string,
+  zoneUuid: string,
   organization: string,
   id: string
 ) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/widget3D/delete`,
+      `${url_Backend_dwinzo}/api/V1/widget3d/delete`,
       {
         method: "PATCH",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
-        body: JSON.stringify({ organization, zoneId, id }),
+        body: JSON.stringify({ organization, zoneUuid, id }),
       }
     );
 

app/src/services/visulization/zone/deleteFloatingWidget.ts

@@ -7,11 +7,14 @@ export const deleteFloatingWidgetApi = async (
 ) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/floatwidget/delete`,
+      `${url_Backend_dwinzo}/api/V1/floatWidget/delete`,
       {
         method: "PATCH",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
         body: JSON.stringify({ organization, floatWidgetID }),
       }

app/src/services/visulization/zone/deletePanel.ts

@@ -2,17 +2,20 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 
 export const deletePanelApi = async (
-  zoneId: string,
+  zoneUuid: string,
   panelName: string,
   organization: string
 ) => {
   try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v2/panel/delete`, {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/panel/delete`, {
       method: "PATCH",
       headers: {
+        Authorization: "Bearer <access_token>",  // Replace with actual token
         "Content-Type": "application/json",
+        token: localStorage.getItem("token") || "",  // Coerce null to empty string
+        refresh_token: localStorage.getItem("refreshToken") || "",
       },
-      body: JSON.stringify({ organization, zoneId, panelName }),
+      body: JSON.stringify({ organization, zoneUuid, panelName }),
     });
 
     if (!response.ok) {

app/src/services/visulization/zone/deleteTemplate.ts

@@ -7,11 +7,14 @@ export const deleteTemplateApi = async (
 ) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/TemplateDelete/${templateID}/${organization}`,
+      `${url_Backend_dwinzo}/api/V1/template/delete`,
       {
         method: "PATCH",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );

app/src/services/visulization/zone/deleteWidgetApi.ts

@@ -4,15 +4,18 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 export const deleteWidgetApi = async (
   widgetID: string,
   organization: string,
-  zoneId: string
+  zoneUuid: string
 ) => {
   try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v2/delete/widget`, {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/widget/delete`, {
       method: "PATCH",
       headers: {
+        Authorization: "Bearer <access_token>",  // Replace with actual token
         "Content-Type": "application/json",
+        token: localStorage.getItem("token") || "",  // Coerce null to empty string
+        refresh_token: localStorage.getItem("refreshToken") || "",
       },
-      body: JSON.stringify({ organization, widgetID, zoneId }),
+      body: JSON.stringify({ organization, widgetID, zoneUuid }),
     });
 
     if (!response.ok) {

app/src/services/visulization/zone/duplicateWidget.ts

@@ -1,17 +1,20 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 export const duplicateWidgetApi = async (
-  zoneId: string,
+  zoneUuid: string,
   organization: string,
   widget: {}
 ) => {
   try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v2/widget/save`, {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/widget/save`, {
       method: "POST",
       headers: {
+        Authorization: "Bearer <access_token>",  // Replace with actual token
         "Content-Type": "application/json",
+        token: localStorage.getItem("token") || "",  // Coerce null to empty string
+        refresh_token: localStorage.getItem("refreshToken") || "",
       },
-      body: JSON.stringify({ organization, zoneId, widget }),
+      body: JSON.stringify({ organization, zoneUuid, widget }),
     });
 
     if (!response.ok) {

app/src/services/visulization/zone/get3dWidgetData.ts

@@ -1,16 +1,22 @@
+import { projectTutorial } from "../../dashboard/projectTutorial";
+
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 export const get3dWidgetZoneData = async (
-  ZoneId?: string,
-  organization?: string
+  zoneUuid?: string,
+  organization?: string,
+  projectId?: string
 ) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/3dwidgetData/${ZoneId}/${organization}`,
+      `${url_Backend_dwinzo}/api/V1/widget3d/data/${zoneUuid}/${projectId}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );

app/src/services/visulization/zone/getFloatingData.ts

@@ -1,16 +1,20 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 export const getFloatingZoneData = async (
-  ZoneId?: string,
-  organization?: string
+  zoneUuid?: string,
+  organization?: string,
+  projectId?: string
 ) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/floadData/${ZoneId}/${organization}`,
+      `${url_Backend_dwinzo}/api/V1/floatWidgets/${zoneUuid}/${projectId}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );

app/src/services/visulization/zone/getSelect2dZoneData.ts

@@ -1,17 +1,17 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 
-export const getSelect2dZoneData = async (
-  ZoneId?: string,
-  organization?: string
-) => {
+export const getSelect2dZoneData = async (zoneUuid?: string, organization?: string, projectId?: string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/ZoneVisualization/${ZoneId}?organization=${organization}`,
+      `${url_Backend_dwinzo}/api/V1/zones/panel/${projectId}/${zoneUuid}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );

app/src/services/visulization/zone/getTemplate.ts

@@ -1,13 +1,16 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
-export const getTemplateData = async (organization?: string) => {
+export const getTemplateData = async (organization?: string, projectId?: string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/templateData/${organization}`,
+      `${url_Backend_dwinzo}/api/V1/template/data/${projectId}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );

app/src/services/visulization/zone/getZoneData.ts

@@ -1,17 +1,19 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
-export const getZone2dData = async (organization?: string) => {
+export const getZone2dData = async (organization?: string, projectId?: string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/pageZodeData?organization=${organization}`,
+      `${url_Backend_dwinzo}/api/V1/zones/visualization/${projectId}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );
-
     if (!response.ok) {
       throw new Error("Failed to fetch zoneDatas");
     }

app/src/services/visulization/zone/getZones.ts

@@ -1,14 +1,17 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 
-export const getZoneData = async (zoneId: string, organization: string) => {
+export const getZoneData = async (zoneUuid: string, organization: string, projectId?: string) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/A_zone/${zoneId}/${organization}`,
+      `${url_Backend_dwinzo}/api/V1/zones/${projectId}/${zoneUuid}`,
       {
         method: "GET",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
       }
     );

app/src/services/visulization/zone/loadTemplate.ts

@@ -2,18 +2,21 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR
 // let url_Backend_dwinzo = `http://192.168.0.102:5000`;
 export const loadTempleteApi = async (
   templateID: string,
-  zoneId: string,
+  zoneUuid: string,
   organization: string
 ) => {
   try {
     const response = await fetch(
-      `${url_Backend_dwinzo}/api/v2/TemplatetoZone`,
+      `${url_Backend_dwinzo}/api/V1/template/toZone`,
       {
         method: "POST",
         headers: {
+          Authorization: "Bearer <access_token>",  // Replace with actual token
           "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "",  // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
         },
-        body: JSON.stringify({ organization, zoneId, templateID }),
+        body: JSON.stringify({ organization, zoneUuid, templateID }),
       }
     );