update assetID

app/src/app.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
+import { Cache } from "three";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Dashboard from "./pages/Dashboard";
 import Project from "./pages/Project";
@@ -8,6 +9,11 @@ import { LoggerProvider } from "./components/ui/log/LoggerContext";
 
 const App: React.FC = () => {
 
+  useEffect(() => {
+    Cache.clear();
+    Cache.enabled = true;
+  }, []);
+
   return (
     <LoggerProvider>
       <Router>

app/src/components/layout/scenes/ComparisonScene.tsx

@@ -1,11 +1,11 @@
 import { useProductContext } from '../../../modules/simulation/products/productContext'
 import RegularDropDown from '../../ui/inputs/RegularDropDown';
 import { useProductStore } from '../../../store/simulation/useProductStore';
-import { useSaveVersion } from '../../../store/builder/store';
+import { useLoadingProgress, useSaveVersion } from '../../../store/builder/store';
 import useModuleStore from '../../../store/useModuleStore';
 import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
 import ComparisonResult from '../../ui/compareVersion/ComparisonResult';
-import { useComparisonProduct } from '../../../store/simulation/useSimulationStore';
+import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
 import { usePauseButtonStore, usePlayButtonStore } from '../../../store/usePlayButtonStore';
 
 function ComparisonScene() {
@@ -16,13 +16,14 @@ function ComparisonScene() {
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
     const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
+    const { mainProduct } = useMainProduct();
     const { setIsPaused } = usePauseButtonStore();
+    const { loadingProgress } = useLoadingProgress();
 
     const handleSelectLayout = (option: string) => {
         const product = products.find((product) => product.productName === option);
         if (product) {
             setComparisonProduct(product.productUuid, product.productName);
-            setIsPlaying(true);
             setIsPaused(true);
         }
     };
@@ -41,7 +42,7 @@ function ComparisonScene() {
                         </div>
                     }
                     <CompareLayOut />
-                    {false && <ComparisonResult />}
+                    {(comparisonProduct && mainProduct && !loadingProgress) && <ComparisonResult />}
                 </>
             )}
         </>

app/src/components/layout/scenes/MainScene.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import {
   useLoadingProgress,
+  useRenameModeStore,
   useSaveVersion,
+  useSelectedFloorItem,
   useSocketStore,
   useWidgetSubOption,
 } from "../../../store/builder/store";
@@ -30,6 +32,10 @@ import {
 import { useProductContext } from "../../../modules/simulation/products/productContext";
 import { useProductStore } from "../../../store/simulation/useProductStore";
 import RegularDropDown from "../../ui/inputs/RegularDropDown";
+import RenameTooltip from "../../ui/features/RenameTooltip";
+import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+import { useAssetsStore } from "../../../store/builder/useAssetStore";
+import { useParams } from "react-router-dom";
 
 function MainScene() {
   const { products } = useProductStore();
@@ -47,13 +53,33 @@ function MainScene() {
   const { selectedZone } = useSelectedZoneStore();
   const { setFloatingWidget } = useFloatingWidget();
   const { comparisonProduct } = useComparisonProduct();
-
+  const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
+  const { setName } = useAssetsStore();
+  const { projectId } = useParams()
+  const { isRenameMode, setIsRenameMode } = useRenameModeStore();
   const handleSelectLayout = (option: string) => {
     const product = products.find((product) => product.productName === option);
     if (product) {
       setMainProduct(product.productUuid, product.productName);
     }
   };
+  const handleObjectRename = async (newName: string) => {
+    const email = localStorage.getItem("email") ?? "";
+    const organization = email?.split("@")[1]?.split(".")[0];
+    let response = await setFloorItemApi(
+      organization,
+      selectedFloorItem.userData.modelUuid,
+      newName,
+      projectId
+    );
+    selectedFloorItem.userData = {
+      ...selectedFloorItem.userData,
+      modelName: newName
+    };
+    setSelectedFloorItem(selectedFloorItem);
+    setIsRenameMode(false);
+    setName(selectedFloorItem.userData.modelUuid, response.modelName);
+  }
 
   return (
     <>
@@ -79,6 +105,7 @@ function MainScene() {
           {(isPlaying || comparisonProduct !== null) &&
             activeModule !== "simulation" && <ControlsPlayer />}
 
+          {isRenameMode && selectedFloorItem?.userData.modelName && <RenameTooltip name={selectedFloorItem?.userData.modelName} onSubmit={handleObjectRename} />}
           {/* remove this later */}
           {activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
         </>

app/src/components/layout/sidebarRight/simulation/Simulations.tsx

@@ -137,6 +137,7 @@ const Simulations: React.FC = () => {
                 }
             );
         }
+
     }, [selectedProduct.productUuid, products]);
 
     return (

app/src/components/ui/Tools.tsx

@@ -22,8 +22,6 @@ import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
 import {
   useActiveTool,
   useAddAction,
-  useDeleteTool,
-  useDeletePointOrLine,
   useRefTextUpdate,
   useSelectedWallItem,
   useSocketStore,
@@ -32,7 +30,7 @@ import {
   useActiveSubTool,
   useShortcutStore,
 } from "../../store/builder/store";
-import {useToggleStore} from "../../store/useUIToggleStore";
+import { useToggleStore } from "../../store/useUIToggleStore";
 import {
   use3DWidget,
   useFloatingWidget,
@@ -72,8 +70,6 @@ const Tools: React.FC = () => {
     setActiveTool,
     setToolMode,
     setAddAction,
-    setDeleteTool,
-    setDeletePointOrLine,
   } = useStoreHooks();
 
   const { setActiveSubTool, activeSubTool } = useActiveSubTool();
@@ -131,18 +127,14 @@ const Tools: React.FC = () => {
 
   const resetTools = () => {
     setToolMode(null);
-    setDeleteTool(false);
     setAddAction(null);
-    setDeletePointOrLine(false);
     setRefTextUpdate((prev) => prev - 1);
   };
 
   const updateToolBehavior = (tool: string, is2D: boolean) => {
     switch (tool) {
       case "cursor":
-        if (toggleView) {
+        is2D ? setToolMode("move") : setToolMode("cursor");
-          setToolMode("move");
-        }
         break;
       case "draw-wall":
         is2D && setToolMode("Wall");
@@ -160,10 +152,10 @@ const Tools: React.FC = () => {
         setToolMode("MeasurementScale");
         break;
       case "Add pillar":
-        if (!is2D) setAddAction("pillar");
+        if (!is2D) setAddAction("Pillar");
         break;
       case "delete":
-        is2D ? setDeletePointOrLine(true) : setDeleteTool(true);
+        is2D ? setToolMode('2D-Delete') : setToolMode('3D-Delete');
         break;
     }
   };
@@ -175,7 +167,6 @@ const Tools: React.FC = () => {
     setToggleUI(toggleTo2D, toggleTo2D);
     if (toggleTo2D) {
       setSelectedWallItem(null);
-      setDeleteTool(false);
       setAddAction(null);
     }
     setActiveTool("cursor");
@@ -410,9 +401,7 @@ const useStoreHooks = () => {
   return {
     ...useActiveTool(),
     ...useToolMode(),
-    ...useDeleteTool(),
     ...useAddAction(),
-    ...useDeletePointOrLine(),
     ...useRefTextUpdate(),
   };
 };

app/src/components/ui/compareVersion/CompareLayOut.tsx

@@ -118,7 +118,6 @@ const CompareLayOut = () => {
     if (product) {
       setComparisonProduct(product.productUuid, product.productName);
       setLoadingProgress(1);
-      setIsPlaying(true);
       setIsPaused(true);
     }
   };

app/src/components/ui/compareVersion/ComparisonResult.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import PerformanceResult from "./result-card/PerformanceResult";
 import EnergyUsage from "./result-card/EnergyUsage";
-import { Bar, Line } from "react-chartjs-2";
+import { Bar, Line, Pie } from "react-chartjs-2";
 
 const ComparisonResult = () => {
   const options = useMemo(
@@ -33,21 +33,22 @@ const ComparisonResult = () => {
         backgroundColor: [purpleDark, purpleLight],
         borderColor: [purpleDark, purpleLight],
         borderWidth: 1,
+        borderRadius: 10,         // ✅ Rounded all corners (TypeScript-safe)
+        // borderSkipped: "bottom",  // ✅ This is allowed by the Chart.js types
       },
     ],
   };
 
-  const cycleTimeData = {
+
+  const cycleTimePieData = {
     labels: ["Layout 1", "Layout 2"],
     datasets: [
       {
         label: "Cycle Time (sec)",
-        data: [110, 110],
+        data: [120, 110],
-        backgroundColor: [purpleLight],
+        backgroundColor: [purpleDark, purpleLight],
-        borderColor: purpleDark,
+        borderColor: "#fff",
         borderWidth: 2,
-        tension: 0.4,
-        fill: false,
       },
     ],
   };
@@ -61,6 +62,8 @@ const ComparisonResult = () => {
         backgroundColor: [purpleDark, purpleLight],
         borderColor: [purpleDark, purpleLight],
         borderWidth: 1,
+        borderRadius: 10,
+        borderSkipped: false,
       },
     ],
   };
@@ -74,6 +77,8 @@ const ComparisonResult = () => {
         backgroundColor: [purpleDark, purpleLight],
         borderColor: [purpleDark, purpleLight],
         borderWidth: 1,
+        borderRadius: 10,
+        borderSkipped: false,
       },
     ],
   };
@@ -83,7 +88,6 @@ const ComparisonResult = () => {
       <div className="header">Performance Comparison</div>
       <div className="compare-result-wrapper">
         <EnergyUsage />
-
         <div className="throughPutCard-container comparisionCard">
           <h4>Throughput (units/hr)</h4>
           <div className="layers-wrapper">
@@ -95,11 +99,11 @@ const ComparisonResult = () => {
               <div className="key">Layout 2</div>
               <div className="value">550/ hr</div>
             </div>
-          </div>
             <div className="chart">
               <Bar data={throughputData} options={options} />
             </div>
           </div>
+        </div>
 
         <div className="cycle-time-container comparisionCard">
           <div className="cycle-main">
@@ -122,7 +126,7 @@ const ComparisonResult = () => {
             </div>
           </div>
           <div className="chart">
-            <Line data={cycleTimeData} options={options} />
+            <Pie data={cycleTimePieData} options={options} />
           </div>
         </div>
 

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

@@ -122,7 +122,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       zoneUuid: selectedZone.zoneUuid,
       zoneName: newName,
     };
-    const response = await zoneCameraUpdate(zonesdata, organization,projectId);
+    const response = await zoneCameraUpdate(zonesdata, organization, projectId);
     if (response.message === "zone updated") {
       setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
       setZones((prevZones: any[]) =>
@@ -143,9 +143,11 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       let response = await setFloorItemApi(
         organization,
         zoneAssetId.id,
-        newName
+        newName,
+        projectId
       );
       // console.log("response: ", response);
+      console.log('        zoneAssetId.id,: ',         zoneAssetId.id,);
 
       setName(zoneAssetId.id, response.modelName);
     }

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -69,6 +69,9 @@ const SimulationPlayer: React.FC = () => {
   };
   const handlePlayStop = () => {
     setIsPaused(!isPaused);
+    if (isPaused) {
+      setIsPlaying(true);
+    }
     echo.warn(`Simulation is ${isPaused ? "Resumed" : "Paused"}`);
   };
   const handleExit = () => {

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

@@ -7,7 +7,7 @@ import { retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils';
 
 async function loadInitialWallItems(
     setWallItems: Types.setWallItemSetState,
-    projectId?:string
+    projectId?: string
 ): Promise<void> {
     try {
         const email = localStorage.getItem('email');
@@ -16,7 +16,7 @@ async function loadInitialWallItems(
         }
 
         const organization = email.split("@")[1].split(".")[0];
-        const items = await getWallItems(organization,projectId);
+        const items = await getWallItems(organization, projectId);
 
         let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
 
@@ -34,33 +34,33 @@ async function loadInitialWallItems(
 
         const loadedWallItems = await Promise.all(items.map(async (item: Types.WallItem) => {
             // Check THREE.js cache first
-            const cachedModel = THREE.Cache.get(item.modelfileID!);
+            const cachedModel = THREE.Cache.get(item.assetId!);
             if (cachedModel) {
                 return processModel(cachedModel, item);
             }
 
             // Check IndexedDB cache
-            const cachedModelBlob = await retrieveGLTF(item.modelfileID!);
+            const cachedModelBlob = await retrieveGLTF(item.assetId!);
             if (cachedModelBlob) {
                 const blobUrl = URL.createObjectURL(cachedModelBlob);
                 return new Promise<Types.WallItem>((resolve) => {
                     loader.load(blobUrl, (gltf) => {
                         URL.revokeObjectURL(blobUrl);
-                        THREE.Cache.add(item.modelfileID!, gltf);
+                        THREE.Cache.add(item.assetId!, gltf);
                         resolve(processModel(gltf, item));
                     });
                 });
             }
 
             // Load from original URL if not cached
-            const modelUrl = `${url_Backend_dwinzo}/api/v2/AssetFile/${item.modelfileID!}`;
+            const modelUrl = `${url_Backend_dwinzo}/api/v2/AssetFile/${item.assetId!}`;
             return new Promise<Types.WallItem>((resolve) => {
                 loader.load(modelUrl, async (gltf) => {
                     try {
                         // Cache the model
                         const modelBlob = await fetch(modelUrl).then((res) => res.blob());
-                        await storeGLTF(item.modelfileID!, modelBlob);
+                        await storeGLTF(item.assetId!, modelBlob);
-                        THREE.Cache.add(item.modelfileID!, gltf);
+                        THREE.Cache.add(item.assetId!, gltf);
                         resolve(processModel(gltf, item));
                     } catch (error) {
                         console.error('Failed to cache model:', error);
@@ -91,7 +91,7 @@ function processModel(gltf: GLTF, item: Types.WallItem): Types.WallItem {
         type: item.type,
         model: model,
         modelName: item.modelName,
-        modelfileID: item.modelfileID,
+        assetId: item.assetId,
         scale: item.scale,
         csgscale: item.csgscale,
         csgposition: item.csgposition,

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

@@ -1,7 +1,7 @@
 import * as THREE from "three"
 import { useEffect } from 'react'
 import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
-import { useLoadingProgress, useSelectedFloorItem, useSelectedItem, useSocketStore } from '../../../store/builder/store';
+import { useLoadingProgress, useRenameModeStore, useSelectedFloorItem, useSelectedItem, useSocketStore } from '../../../store/builder/store';
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { FloorItems, RefGroup, RefMesh } from "../../../types/world/worldTypes";
@@ -13,6 +13,7 @@ import { useThree } from "@react-three/fiber";
 import { CameraControls } from "@react-three/drei";
 import addAssetModel from "./functions/addAssetModel";
 import { useParams } from "react-router-dom";
+import { useLeftData, useTopData } from "../../../store/visualization/useZone3DWidgetStore";
 
 const gltfLoaderWorker = new Worker(
     new URL(
@@ -31,9 +32,12 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
     const { setSelectedFloorItem } = useSelectedFloorItem();
     const { selectedItem, setSelectedItem } = useSelectedItem();
     const { projectId } = useParams();
+    const { isRenameMode, setIsRenameMode } = useRenameModeStore();
     const email = localStorage.getItem("email");
     const organization = email!.split("@")[1].split(".")[0];
     const userId = localStorage.getItem("userId")!;
+    const { setTop } = useTopData();
+    const { setLeft } = useLeftData();
 
     const loader = new GLTFLoader();
     const dracoLoader = new DRACOLoader();
@@ -63,7 +67,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
 
         getFloorAssets(organization, projectId).then((data) => {
             if (data.length > 0) {
-                const uniqueItems = (data as FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.modelfileID === item.modelfileID));
+                const uniqueItems = (data as FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.assetId === item.assetId));
                 totalAssets = uniqueItems.length;
                 if (totalAssets === 0) {
                     updateLoadingProgress(100);
@@ -96,7 +100,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
                                     assets.push({
                                         modelUuid: item.modelUuid,
                                         modelName: item.modelName,
-                                        assetId: item.modelfileID,
+                                        assetId: item.assetId,
                                         position: item.position,
                                         rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
                                         isLocked: item.isLocked,
@@ -236,7 +240,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
                                     assets.push({
                                         modelUuid: item.modelUuid,
                                         modelName: item.modelName,
-                                        assetId: item.modelfileID,
+                                        assetId: item.assetId,
                                         position: item.position,
                                         rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
                                         isLocked: item.isLocked,
@@ -257,6 +261,7 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
 
     useEffect(() => {
         const canvasElement = gl.domElement;
+
         const onDrop = (event: any) => {
             if (!event.dataTransfer?.files[0]) return;
 
@@ -272,11 +277,28 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
         const onDragOver = (event: any) => {
             event.preventDefault();
         };
+        const onMouseMove = (evt: any) => {
+            if (!canvasElement) return;
+            const canvasRect = canvasElement.getBoundingClientRect();
+            const relativeX = evt.clientX - canvasRect.left;
+            const relativeY = evt.clientY - canvasRect.top;
+            if (!isRenameMode) {
+                setTop(relativeY);
+                setLeft(relativeX);
+            }
+
+
+        };
+        const onMouseUp = (evt: any) => {
+            setIsRenameMode(false);
+        }
 
 
         if (activeModule === "builder") {
             canvasElement.addEventListener("drop", onDrop);
             canvasElement.addEventListener("dragover", onDragOver);
+            canvasElement.addEventListener("mousemove", onMouseMove);
+            canvasElement.addEventListener("mouseup", onMouseUp);
         } else {
             if ((controls as CameraControls)) {
                 const target = (controls as CameraControls).getTarget(new THREE.Vector3());
@@ -288,8 +310,10 @@ function AssetsGroup({ floorGroup, plane }: { readonly floorGroup: RefGroup, rea
         return () => {
             canvasElement.removeEventListener("drop", onDrop);
             canvasElement.removeEventListener("dragover", onDragOver);
+            canvasElement.removeEventListener("mousemove", onMouseMove);
+            canvasElement.removeEventListener("mouseup", onMouseUp);
         };
-    }, [selectedItem, camera, pointer, activeModule, controls]);
+    }, [selectedItem, camera, pointer, activeModule, controls, isRenameMode]);
 
     return (
         <Models />

app/src/modules/builder/asset/functions/addAssetModel.ts

@@ -136,7 +136,7 @@ async function handleModelLoad(
     //     organization,
     //     newFloorItem.modelUuid,
     //     newFloorItem.modelName,
-    //     newFloorItem.modelfileID,
+    //     newFloorItem.assetId,
     //     newFloorItem.position,
     //     { x: 0, y: 0, z: 0 },
     //     false,
@@ -352,7 +352,7 @@ async function handleModelLoad(
             organization,
             modelUuid: newFloorItem.modelUuid,
             modelName: newFloorItem.modelName,
-            modelfileID: newFloorItem.assetId,
+            assetId: newFloorItem.assetId,
             position: newFloorItem.position,
             rotation: {
                 x: model.rotation.x,
@@ -372,7 +372,7 @@ async function handleModelLoad(
         const asset: Asset = {
             modelUuid: completeData.modelUuid,
             modelName: completeData.modelName,
-            assetId: completeData.modelfileID,
+            assetId: completeData.assetId,
             position: completeData.position,
             rotation: [
                 completeData.rotation.x,
@@ -392,7 +392,7 @@ async function handleModelLoad(
             organization,
             modelUuid: newFloorItem.modelUuid,
             modelName: newFloorItem.modelName,
-            modelfileID: newFloorItem.assetId,
+            assetId: newFloorItem.assetId,
             position: newFloorItem.position,
             rotation: {
                 x: model.rotation.x,
@@ -411,7 +411,7 @@ async function handleModelLoad(
         const asset = {
             modelUuid: data.modelUuid,
             modelName: data.modelName,
-            assetId: data.modelfileID,
+            assetId: data.assetId,
             position: data.position,
             rotation: [data.rotation.x, data.rotation.y, data.rotation.z] as [number, number, number],
             isLocked: data.isLocked,

app/src/modules/builder/asset/models/model/model.tsx

@@ -1,10 +1,10 @@
 import * as THREE from 'three';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { retrieveGLTF, storeGLTF } from '../../../../../utils/indexDB/idbUtils';
 import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { ThreeEvent, useFrame, useThree } from '@react-three/fiber';
-import { useActiveTool, useDeletableFloorItem, useRenderDistance, useSelectedFloorItem, useSocketStore, useToggleView } from '../../../../../store/builder/store';
+import { useActiveTool, useDeletableFloorItem, useRenderDistance, useSelectedFloorItem, useSocketStore, useToggleView, useToolMode } from '../../../../../store/builder/store';
 import { AssetBoundingBox } from '../../functions/assetBoundingBox';
 import { CameraControls } from '@react-three/drei';
 import { useAssetsStore } from '../../../../../store/builder/useAssetStore';
@@ -39,8 +39,13 @@ function Model({ asset }: { readonly asset: Asset }) {
     const [gltfScene, setGltfScene] = useState<GLTF["scene"] | null>(null);
     const [boundingBox, setBoundingBox] = useState<THREE.Box3 | null>(null);
     const groupRef = useRef<THREE.Group>(null);
+    const { toolMode } = useToolMode();
     const { projectId } = useParams();
 
+    useEffect(() => {
+        setDeletableFloorItem(null);
+    }, [activeModule, toolMode])
+
     useEffect(() => {
         const loader = new GLTFLoader();
         const dracoLoader = new DRACOLoader();
@@ -191,21 +196,21 @@ function Model({ asset }: { readonly asset: Asset }) {
         }
     }
 
-    const handlePointerOver = (asset: Asset) => {
+    const handlePointerOver = useCallback((asset: Asset) => {
-        if (activeTool === "delete") {
+        if (activeTool === "delete" && activeModule === 'builder') {
             if (deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
                 return;
             } else {
                 setDeletableFloorItem(groupRef.current);
             }
         }
-    }
+    }, [activeTool, activeModule, deletableFloorItem]);
 
-    const handlePointerOut = (asset: Asset) => {
+    const handlePointerOut = useCallback((asset: Asset) => {
         if (activeTool === "delete" && deletableFloorItem && deletableFloorItem.uuid === asset.modelUuid) {
             setDeletableFloorItem(null);
         }
-    }
+    }, [activeTool, deletableFloorItem]);
 
     const handleContextMenu = (asset: Asset, evt: ThreeEvent<MouseEvent>) => {
         if (activeTool === "cursor" && subModule === 'simulations') {
@@ -247,6 +252,7 @@ function Model({ asset }: { readonly asset: Asset }) {
 
     return (
         <group
+            key={asset.modelUuid}
             name='Asset Model'
             ref={groupRef}
             uuid={asset.modelUuid}
@@ -266,7 +272,7 @@ function Model({ asset }: { readonly asset: Asset }) {
                     handleClick(asset);
                 }
             }}
-            onPointerOver={(e) => {
+            onPointerEnter={(e) => {
                 if (!toggleView) {
                     e.stopPropagation();
                     handlePointerOver(asset);

app/src/modules/builder/builder.tsx

@@ -13,7 +13,6 @@ import ReferenceDistanceText from "./geomentries/lines/distanceText/referenceDis
 
 import {
     useToggleView,
-    useDeletePointOrLine,
     useActiveLayer,
     useWallVisibility,
     useRoofVisibility,
@@ -58,18 +57,10 @@ export default function Builder() {
     const csg = useRef(); // Reference for CSG object, used for 3D modeling.
     const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects.
     const scene = useRef() as Types.RefScene; // Reference to the scene.
-    const camera = useRef() as Types.RefCamera; // Reference to the camera object.
-    const controls = useRef<any>(); // Reference to the controls object.
-    const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene.
     const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control.
 
     // Assigning the scene and camera from the Three.js state to the references.
 
-    scene.current = state.scene;
-    camera.current = state.camera;
-    controls.current = state.controls;
-    raycaster.current = state.raycaster;
-
     const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference.
     const grid = useRef() as any; // Reference for a grid object for raycaster reference.
     const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line.
@@ -78,8 +69,6 @@ export default function Builder() {
     const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active.
     const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point.
     const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start).
-    const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items.
-    const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active.
     const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation.
     const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn.
     const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn.
@@ -88,13 +77,10 @@ export default function Builder() {
     const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw.
     const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not.
     const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed.
-    const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf).
     const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors.
     const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group.
     const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn.
     const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created.
-    const floorGroupAisle = useRef() as Types.RefGroup;
-    const zoneGroup = useRef() as Types.RefGroup;
     const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls.
     const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted.
     const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted.
@@ -108,7 +94,6 @@ export default function Builder() {
     const { activeLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
     const { toggleView } = useToggleView(); // State for toggling between 2D and 3D.
     const { toolMode, setToolMode } = useToolMode();
-    const { setDeletePointOrLine } = useDeletePointOrLine();
     const { setRoofVisibility } = useRoofVisibility();
     const { setWallVisibility } = useWallVisibility();
     const { setShadows } = useShadows();
@@ -141,19 +126,13 @@ export default function Builder() {
             );
         } else {
             setHoveredPoint(null);
-            setToolMode(null);
+            setToolMode('cursor');
-            setDeletePointOrLine(false);
             loadWalls(lines, setWalls);
             setUpdateScene(true);
             line.current = [];
         }
     }, [toggleView]);
 
-    useEffect(() => {
-        THREE.Cache.clear();
-        THREE.Cache.enabled = true;
-    }, []);
-
     useEffect(() => {
         const email = localStorage.getItem("email");
         const organization = email!.split("@")[1].split(".")[0];
@@ -180,12 +159,10 @@ export default function Builder() {
                 plane,
                 cursorPosition,
                 floorPlanGroupPoint,
-                floorPlanGroupLine,
                 snappedPoint,
                 isSnapped,
                 isSnappedUUID,
                 line,
-                lines,
                 ispreSnapped,
                 floorPlanGroup,
                 ReferenceLineMesh,
@@ -219,16 +196,11 @@ export default function Builder() {
                     floorPlanGroup={floorPlanGroup}
                     lines={lines}
                     floorGroup={floorGroup}
-                    floorGroupAisle={floorGroupAisle}
                     scene={scene}
                     onlyFloorlines={onlyFloorlines}
-                    itemsGroup={itemsGroup}
-                    isTempLoader={isTempLoader}
-                    tempLoader={tempLoader}
                     currentLayerPoint={currentLayerPoint}
                     floorPlanGroupPoint={floorPlanGroupPoint}
                     floorPlanGroupLine={floorPlanGroupLine}
-                    zoneGroup={zoneGroup}
                     dragPointControls={dragPointControls}
                 />
             </Bvh>
@@ -290,6 +262,7 @@ export default function Builder() {
                 <MeasurementTool />
 
                 <CalculateAreaGroup />
+
                 <NavMesh lines={lines} />
 
                 <DxfFile

app/src/modules/builder/csg/csg.tsx

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import { Geometry, Base, Subtraction } from "@react-three/csg";
-import { useDeleteTool } from "../../../store/builder/store";
 import { useRef } from "react";
+import { useToolMode } from "../../../store/builder/store";
 
 export interface CsgProps {
     position: THREE.Vector3 | [number, number, number];
@@ -11,19 +11,19 @@ export interface CsgProps {
 }
 
 export const Csg: React.FC<CsgProps> = (props) => {
-    const { deleteTool } = useDeleteTool();
+    const { toolMode } = useToolMode();
     const modelRef = useRef<THREE.Object3D>();
     const originalMaterials = useRef<Map<THREE.Mesh, THREE.Material>>(new Map());
 
     const handleHover = (hovered: boolean, object: THREE.Mesh | null) => {
-        if (modelRef.current && deleteTool) {
+        if (modelRef.current && toolMode === "3D-Delete") {
             modelRef.current.traverse((child) => {
                 if (child instanceof THREE.Mesh) {
                     if (!originalMaterials.current.has(child)) {
                         originalMaterials.current.set(child, child.material);
                     }
                     child.material = child.material.clone();
-                    child.material.color.set(hovered && deleteTool ? 0xff0000 : (originalMaterials.current.get(child) as any).color);
+                    child.material.color.set(hovered && toolMode === "3D-Delete" ? 0xff0000 : (originalMaterials.current.get(child) as any).color);
                 }
             });
         }

app/src/modules/builder/functions/draw.ts

@@ -7,12 +7,10 @@ async function Draw(
     plane: Types.RefMesh,
     cursorPosition: Types.Vector3,
     floorPlanGroupPoint: Types.RefGroup,
-    floorPlanGroupLine: Types.RefGroup,
     snappedPoint: Types.RefVector3,
     isSnapped: Types.RefBoolean,
     isSnappedUUID: Types.RefString,
     line: Types.RefLine,
-    lines: Types.RefLines,
     ispreSnapped: Types.RefBoolean,
     floorPlanGroup: Types.RefGroup,
     ReferenceLineMesh: Types.RefMesh,
@@ -29,7 +27,7 @@ async function Draw(
     if (!plane.current) return;
     const intersects = state.raycaster.intersectObject(plane.current, true);
 
-    if (intersects.length > 0 && (toolMode === "Wall" || toolMode === "Aisle" || toolMode === "Floor")) {
+    if (intersects.length > 0 && (toolMode === "Wall" || toolMode === "Floor")) {
         const intersectionPoint = intersects[0].point;
         cursorPosition.copy(intersectionPoint);
         const snapThreshold = 1;
@@ -40,8 +38,7 @@ async function Draw(
 
                 const canSnap =
                     ((toolMode === "Wall") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName)) ||
-                    ((toolMode === "Floor") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName)) ||
+                    ((toolMode === "Floor") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName))
-                    ((toolMode === "Aisle") && pointType === CONSTANTS.lineConfig.aisleName);;
 
                 if (canSnap && cursorPosition.distanceTo(point.position) < snapThreshold + 0.5 && point.visible) {
                     cursorPosition.copy(point.position);
@@ -60,8 +57,7 @@ async function Draw(
 
                 let canSnap =
                     ((toolMode === "Wall") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName)) ||
-                    ((toolMode === "Floor") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName)) ||
+                    ((toolMode === "Floor") && (pointType === CONSTANTS.lineConfig.wallName || pointType === CONSTANTS.lineConfig.floorName))
-                    ((toolMode === "Aisle") && pointType === CONSTANTS.lineConfig.aisleName);
 
                 if (canSnap && cursorPosition.distanceTo(point.position) < snapThreshold && point.visible) {
                     cursorPosition.copy(point.position);

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

@@ -95,7 +95,6 @@ async function drawWall(
                             userId
                         }
 
-                        console.log('input: ', input);
                         socket.emit('v1:Line:create', input);
 
                         setNewLines([newLines[0], newLines[1], line.current]);
@@ -158,7 +157,6 @@ async function drawWall(
                 userId
             }
 
-            console.log('input: ', input);
             socket.emit('v1:Line:create', input);
 
             setNewLines([line.current])

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

@@ -91,7 +91,7 @@ async function AddWallItems(
             type: selected.subCategory,
             model: model,
             modelName: selected.name,
-            modelfileID: selected.id,
+            assetId: selected.id,
             scale: [1, 1, 1] as [number, number, number],
             csgscale: csgscale,
             csgposition: csgposition,
@@ -107,7 +107,7 @@ async function AddWallItems(
             organization: organization,
             modelUuid: model.uuid,
             modelName: newWallItem.modelName,
-            modelfileID: selected.id,
+            assetId: selected.id,
             type: selected.subCategory,
             csgposition: newWallItem.csgposition,
             csgscale: newWallItem.csgscale,
@@ -119,7 +119,6 @@ async function AddWallItems(
             userId
         };
 
-        // console.log('data: ', data);
         socket.emit('v1:wallItems:set', data);
 
         setWallItems((prevItems) => {

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

@@ -1,12 +1,12 @@
 import { useFrame, useThree } from "@react-three/fiber";
 import {
   useAddAction,
-  useDeleteTool,
   useRoofVisibility,
   useToggleView,
   useWallVisibility,
   useUpdateScene,
   useRenameModeStore,
+  useToolMode,
 } from "../../../store/builder/store";
 import hideRoof from "../geomentries/roofs/hideRoof";
 import hideWalls from "../geomentries/walls/hideWalls";
@@ -30,7 +30,7 @@ const FloorGroup = ({
   const { toggleView } = useToggleView();
   const { scene, camera, raycaster, gl } = useThree();
   const { addAction } = useAddAction();
-  const { deleteTool } = useDeleteTool();
+  const { toolMode } = useToolMode();
   const { updateScene, setUpdateScene } = useUpdateScene();
   const { setTop } = useTopData();
   const { setLeft } = useLeftData();
@@ -75,7 +75,7 @@ const FloorGroup = ({
           if (addAction === "pillar") {
             addPillar(referencePole, floorGroup);
           }
-          if (deleteTool) {
+          if (toolMode === '3D-Delete') {
             DeletePillar(hoveredDeletablePillar, floorGroup);
           }
         }
@@ -87,10 +87,10 @@ const FloorGroup = ({
       const canvasRect = canvasElement.getBoundingClientRect();
       const relativeX = evt.clientX - canvasRect.left;
       const relativeY = evt.clientY - canvasRect.top;
-      if (!isRenameMode) {
+      // if (!isRenameMode) {
-        setTop(relativeY);
+      //   setTop(relativeY);
-        setLeft(relativeX);
+      //   setLeft(relativeX);
-      }
+      // }
       if (isLeftMouseDown) {
         drag = true;
       }
@@ -105,7 +105,7 @@ const FloorGroup = ({
       canvasElement.removeEventListener("mouseup", onMouseUp);
       canvasElement.removeEventListener("mousemove", onMouseMove);
     };
-  }, [deleteTool, addAction, isRenameMode]);
+  }, [toolMode, addAction, isRenameMode]);
 
   useFrame(() => {
     hideRoof(roofVisibility, floorGroup, camera);
@@ -114,7 +114,7 @@ const FloorGroup = ({
     if (addAction === "pillar") {
       addAndUpdateReferencePillar(raycaster, floorGroup, referencePole);
     }
-    if (deleteTool) {
+    if (toolMode === '3D-Delete') {
       DeletableHoveredPillar(state, floorGroup, hoveredDeletablePillar);
     }
   });

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

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import * as Types from '../../../types/world/worldTypes';
-import { useActiveLayer, useDeletedLines, useDeletePointOrLine, useToolMode, useNewLines, useRemovedLayer, useSocketStore, useToggleView, useUpdateScene } from "../../../store/builder/store";
+import { useActiveLayer, useDeletedLines, useToolMode, useNewLines, useRemovedLayer, useSocketStore, useToggleView, useUpdateScene } from "../../../store/builder/store";
 import Layer2DVisibility from "../geomentries/layers/layer2DVisibility";
 import { useFrame, useThree } from "@react-three/fiber";
 import DeletableLineorPoint from "../functions/deletableLineOrPoint";
@@ -23,8 +23,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
     const { camera, gl, raycaster, controls } = state;
     const { activeLayer } = useActiveLayer();
     const { toggleView } = useToggleView();
-    const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
+    const { toolMode } = useToolMode();
-    const { toolMode, setToolMode } = useToolMode();
     const { removedLayer, setRemovedLayer } = useRemovedLayer();
     const { setUpdateScene } = useUpdateScene();
     const { setNewLines } = useNewLines();
@@ -32,7 +31,6 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
     const { socket } = useSocketStore();
     const { projectId } = useParams();
 
-
     useEffect(() => {
         if (toolMode === 'move') {
             addDragControl(dragPointControls, currentLayerPoint, state, floorPlanGroupPoint, floorPlanGroupLine, lines, onlyFloorlines, socket, projectId);
@@ -74,17 +72,12 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
     }, [toggleView]);
 
     useEffect(() => {
-        if (toolMode === "Wall" || toolMode === "Floor") {
-            setDeletePointOrLine(false);
-        } else {
         removeSoloPoint(line, floorPlanGroupLine, floorPlanGroupPoint);
         removeReferenceLine(floorPlanGroup, ReferenceLineMesh, LineCreated, line);
-        }
     }, [toolMode]);
 
     useEffect(() => {
         if (toolMode === 'move' && toggleView) {
-            setDeletePointOrLine(false);
             if (dragPointControls.current) {
                 dragPointControls.current.enabled = true;
             }
@@ -95,12 +88,6 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
         }
     }, [toolMode, toggleView, state]);
 
-    useEffect(() => {
-        if (deletePointOrLine) {
-            setToolMode(null);
-        }
-    }, [deletePointOrLine]);
-
     useEffect(() => {
         Layer2DVisibility(activeLayer, floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoint, currentLayerPoint, dragPointControls);
     }, [activeLayer]);
@@ -151,7 +138,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
         const onMouseClick = (evt: any) => {
             if (!plane.current || drag) return;
 
-            if (deletePointOrLine) {
+            if (toolMode === "2D-Delete") {
                 if (hoveredDeletablePoint.current !== null) {
                     deletePoint(hoveredDeletablePoint, onlyFloorlines, floorPlanGroupPoint, floorPlanGroupLine, lines, setDeletedLines, socket, projectId);
                 }
@@ -169,7 +156,7 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
             }
         }
 
-        if (deletePointOrLine || toolMode === "Wall" || toolMode === "Floor") {
+        if (toolMode === "2D-Delete" || toolMode === "Wall" || toolMode === "Floor") {
             canvasElement.addEventListener("mousedown", onMouseDown);
             canvasElement.addEventListener("mouseup", onMouseUp);
             canvasElement.addEventListener("mousemove", onMouseMove);
@@ -184,11 +171,11 @@ const FloorPlanGroup = ({ floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoin
             canvasElement.removeEventListener("click", onMouseClick);
             canvasElement.removeEventListener("contextmenu", onContextMenu);
         };
-    }, [deletePointOrLine, toolMode, activeLayer])
+    }, [toolMode, activeLayer])
 
 
     useFrame(() => {
-        if (deletePointOrLine) {
+        if (toolMode === '2D-Delete') {
             DeletableLineorPoint(state, plane, floorPlanGroupLine, floorPlanGroupPoint, hoveredDeletableLine, hoveredDeletablePoint);
         }
     })

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

@@ -1,13 +1,12 @@
 import { useEffect } from "react";
 import {
-    useDeleteTool,
-    useDeletePointOrLine,
     useObjectPosition,
     useObjectRotation,
     useSelectedWallItem,
     useSocketStore,
     useWallItems,
     useSelectedItem,
+    useToolMode,
 } from "../../../store/builder/store";
 import { Csg } from "../csg/csg";
 import * as Types from "../../../types/world/worldTypes";
@@ -31,11 +30,10 @@ const WallItemsGroup = ({
     const state = useThree();
     const { socket } = useSocketStore();
     const { pointer, camera, raycaster } = state;
-    const { deleteTool } = useDeleteTool();
+    const { toolMode } = useToolMode();
     const { wallItems, setWallItems } = useWallItems();
     const { setObjectPosition } = useObjectPosition();
     const { setObjectRotation } = useObjectRotation();
-    const { deletePointOrLine } = useDeletePointOrLine();
     const { setSelectedWallItem } = useSelectedWallItem();
     const { activeModule } = useModuleStore();
     const { selectedItem } = useSelectedItem();
@@ -43,7 +41,7 @@ const WallItemsGroup = ({
 
     useEffect(() => {
         // Load Wall Items from the backend
-        loadInitialWallItems(setWallItems,projectId);
+        loadInitialWallItems(setWallItems, projectId);
     }, []);
 
     //////////  Update the Position value changes  in the selected item  //////////
@@ -51,7 +49,7 @@ const WallItemsGroup = ({
     useEffect(() => {
         const canvasElement = state.gl.domElement;
         function handlePointerMove(e: any) {
-            if (selectedItemsIndex !== null && !deletePointOrLine && e.buttons === 1) {
+            if (selectedItemsIndex !== null && toolMode === 'cursor' && e.buttons === 1) {
                 const Raycaster = state.raycaster;
                 const intersects = Raycaster.intersectObjects(CSGGroup.current?.children[0].children!, true);
                 const Object = intersects.find((child) => child.object.name.includes("WallRaycastReference"));
@@ -132,7 +130,7 @@ const WallItemsGroup = ({
                         //   organization,
                         //   currentItem?.model?.uuid,
                         //   currentItem.modelName,
-                        //   currentItem.modelfileID,
+                        //   currentItem.assetId,
                         //   currentItem.type!,
                         //   currentItem.csgposition!,
                         //   currentItem.csgscale!,
@@ -146,7 +144,7 @@ const WallItemsGroup = ({
                         const data = {
                             organization: organization,
                             modelUuid: currentItem.model?.uuid!,
-                            modelfileID: currentItem.modelfileID,
+                            assetId: currentItem.assetId,
                             modelName: currentItem.modelName!,
                             type: currentItem.type!,
                             csgposition: currentItem.csgposition!,
@@ -191,12 +189,12 @@ const WallItemsGroup = ({
         const onMouseUp = (evt: any) => {
             if (evt.button === 0) {
                 isLeftMouseDown = false;
-                if (!drag && deleteTool && activeModule === "builder") {
+                if (!drag && toolMode === '3D-Delete' && activeModule === "builder") {
                     DeleteWallItems(
                         hoveredDeletableWallItem,
                         setWallItems,
                         wallItems,
-                        socket,projectId
+                        socket, projectId
                     );
                 }
             }
@@ -248,10 +246,10 @@ const WallItemsGroup = ({
             canvasElement.removeEventListener("drop", onDrop);
             canvasElement.removeEventListener("dragover", onDragOver);
         };
-    }, [deleteTool, wallItems, selectedItem, camera]);
+    }, [toolMode, wallItems, selectedItem, camera]);
 
     useEffect(() => {
-        if (deleteTool && activeModule === "builder") {
+        if (toolMode && activeModule === "builder") {
             handleMeshMissed(
                 currentWallItem,
                 setSelectedWallItem,
@@ -260,7 +258,7 @@ const WallItemsGroup = ({
             setSelectedWallItem(null);
             setSelectedItemsIndex(null);
         }
-    }, [deleteTool]);
+    }, [toolMode]);
 
     return (
         <>

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

@@ -1,8 +1,8 @@
 import { Geometry } from "@react-three/csg";
 import {
-    useDeleteTool,
     useSelectedWallItem,
     useToggleView,
+    useToolMode,
     useWallItems,
     useWalls,
 } from "../../../store/builder/store";
@@ -23,7 +23,7 @@ const WallsAndWallItems = ({
     const { walls } = useWalls();
     const { wallItems } = useWallItems();
     const { toggleView } = useToggleView();
-    const { deleteTool } = useDeleteTool();
+    const { toolMode } = useToolMode();
     const { setSelectedWallItem } = useSelectedWallItem();
 
     return (
@@ -34,7 +34,7 @@ const WallsAndWallItems = ({
             receiveShadow
             visible={!toggleView}
             onClick={(event) => {
-                if (!deleteTool) {
+                if (toolMode === "cursor") {
                     handleMeshDown(
                         event,
                         currentWallItem,
@@ -46,7 +46,7 @@ const WallsAndWallItems = ({
                 }
             }}
             onPointerMissed={() => {
-                if (!deleteTool) {
+                if (toolMode === "cursor") {
                     handleMeshMissed(
                         currentWallItem,
                         setSelectedWallItem,

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

@@ -4,8 +4,6 @@ import { useThree, useFrame } from "@react-three/fiber";
 import * as THREE from "three";
 import {
     useActiveLayer,
-  useDeleteTool,
-  useDeletePointOrLine,
     useSocketStore,
     useToggleView,
     useToolMode,
@@ -37,10 +35,8 @@ const ZoneGroup: React.FC = () => {
         []
     );
     const { toggleView } = useToggleView();
-  const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
     const { removedLayer, setRemovedLayer } = useRemovedLayer();
     const { toolMode } = useToolMode();
-  const { setDeleteTool } = useDeleteTool();
     const { activeLayer } = useActiveLayer();
     const { socket } = useSocketStore();
     const { projectId } = useParams();
@@ -97,11 +93,7 @@ const ZoneGroup: React.FC = () => {
                 setZones(fetchedZones);
 
                 const fetchedPoints = data.flatMap((zone: any) =>
-          zone.points
+                    zone.points.slice(0, 4).map((point: [number, number, number]) => new THREE.Vector3(...point))
-            .slice(0, 4)
-            .map(
-              (point: [number, number, number]) => new THREE.Vector3(...point)
-            )
                 );
 
                 setZonePoints(fetchedPoints);
@@ -117,9 +109,7 @@ const ZoneGroup: React.FC = () => {
 
     useEffect(() => {
         if (removedLayer) {
-      const updatedZones = zones.filter(
+            const updatedZones = zones.filter((zone: any) => zone.layer !== removedLayer);
-        (zone: any) => zone.layer !== removedLayer
-      );
             setZones(updatedZones);
 
             const updatedzonePoints = zonePoints.filter((_: any, index: any) => {
@@ -128,11 +118,7 @@ const ZoneGroup: React.FC = () => {
             });
             setZonePoints(updatedzonePoints);
 
-      zones
+            zones.filter((zone: any) => zone.layer === removedLayer).forEach((zone: any) => { deleteZoneFromBackend(zone.zoneUuid); });
-        .filter((zone: any) => zone.layer === removedLayer)
-        .forEach((zone: any) => {
-          deleteZoneFromBackend(zone.zoneUuid);
-        });
 
             setRemovedLayer(null);
         }
@@ -142,9 +128,6 @@ const ZoneGroup: React.FC = () => {
         if (toolMode !== "Zone") {
             setStartPoint(null);
             setEndPoint(null);
-    } else {
-      setDeletePointOrLine(false);
-      setDeleteTool(false);
         }
         if (!toggleView) {
             setStartPoint(null);
@@ -159,7 +142,6 @@ const ZoneGroup: React.FC = () => {
         points: [number, number, number][];
         layer: string;
     }) => {
-    console.log('zoneUuid: ', zone);
         const email = localStorage.getItem("email");
         const userId = localStorage.getItem("userId");
         const organization = email!.split("@")[1].split(".")[0];
@@ -167,9 +149,7 @@ const ZoneGroup: React.FC = () => {
         const calculateCenter = (points: number[][]) => {
             if (!points || points.length === 0) return null;
 
-      let sumX = 0,
+            let sumX = 0, sumY = 0, sumZ = 0;
-        sumY = 0,
-        sumZ = 0;
             const numPoints = points.length;
 
             points.forEach(([x, y, z]) => {
@@ -185,9 +165,7 @@ const ZoneGroup: React.FC = () => {
             ];
         };
 
-    const target: [number, number, number] | null = calculateCenter(
+        const target: [number, number, number] | null = calculateCenter(zone.points);
-      zone.points
-    );
         if (!target || zone.points.length < 4) return;
         const position = [target[0], 10, target[2]];
 
@@ -222,9 +200,7 @@ const ZoneGroup: React.FC = () => {
         const calculateCenter = (points: number[][]) => {
             if (!points || points.length === 0) return null;
 
-      let sumX = 0,
+            let sumX = 0, sumY = 0, sumZ = 0;
-        sumY = 0,
-        sumZ = 0;
             const numPoints = points.length;
 
             points.forEach(([x, y, z]) => {
@@ -240,9 +216,7 @@ const ZoneGroup: React.FC = () => {
             ];
         };
 
-    const target: [number, number, number] | null = calculateCenter(
+        const target: [number, number, number] | null = calculateCenter(zone.points);
-      zone.points
-    );
         if (!target || zone.points.length < 4) return;
         const position = [target[0], 10, target[2]];
 
@@ -285,17 +259,9 @@ const ZoneGroup: React.FC = () => {
 
         const zoneIndex = zones.findIndex((zone: any) => zone.zoneUuid === zoneUuid);
         if (zoneIndex !== -1) {
-      const zonePointsToRemove = zonePoints.slice(
+            const zonePointsToRemove = zonePoints.slice(zoneIndex * 4, zoneIndex * 4 + 4);
-        zoneIndex * 4,
+            zonePointsToRemove.forEach((point: any) => groupsRef.current.remove(point));
-        zoneIndex * 4 + 4
+            const updatedzonePoints = zonePoints.filter((_: any, index: any) => index < zoneIndex * 4 || index >= zoneIndex * 4 + 4);
-      );
-      zonePointsToRemove.forEach((point: any) =>
-        groupsRef.current.remove(point)
-      );
-      const updatedzonePoints = zonePoints.filter(
-        (_: any, index: any) =>
-          index < zoneIndex * 4 || index >= zoneIndex * 4 + 4
-      );
             setZonePoints(updatedzonePoints);
         }
         deleteZoneFromBackend(zoneUuid);
@@ -314,10 +280,7 @@ const ZoneGroup: React.FC = () => {
                 drag = false;
 
                 raycaster.setFromCamera(pointer, camera);
-        const intersects = raycaster.intersectObjects(
+                const intersects = raycaster.intersectObjects(groupsRef.current.children, true);
-          groupsRef.current.children,
-          true
-        );
 
                 if (intersects.length > 0 && toolMode === "move") {
                     const clickedObject = intersects[0].object;
@@ -334,10 +297,10 @@ const ZoneGroup: React.FC = () => {
         };
 
         const onMouseUp = (evt: any) => {
-      if (evt.button === 0 && !drag && !isDragging && !deletePointOrLine) {
+            if (evt.button === 0 && !drag && !isDragging && toolMode === 'Zone') {
                 isLeftMouseDown = false;
 
-        if (!startPoint && toolMode !== "move") {
+                if (!startPoint) {
                     raycaster.setFromCamera(pointer, camera);
                     const intersectionPoint = new THREE.Vector3();
                     const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
@@ -345,7 +308,7 @@ const ZoneGroup: React.FC = () => {
                         setStartPoint(point);
                         setEndPoint(null);
                     }
-        } else if (startPoint && toolMode !== "move") {
+                } else if (startPoint) {
                     raycaster.setFromCamera(pointer, camera);
                     const intersectionPoint = new THREE.Vector3();
                     const point = raycaster.ray.intersectPlane(plane, intersectionPoint);
@@ -386,12 +349,7 @@ const ZoneGroup: React.FC = () => {
                     setStartPoint(null);
                     setEndPoint(null);
                 }
-      } else if (
+            } else if (evt.button === 0 && !drag && !isDragging && toolMode === '2D-Delete') {
-        evt.button === 0 &&
-        !drag &&
-        !isDragging &&
-        deletePointOrLine
-      ) {
                 raycaster.setFromCamera(pointer, camera);
                 const intersects = raycaster.intersectObjects(
                     groupsRef.current.children,
@@ -418,9 +376,7 @@ const ZoneGroup: React.FC = () => {
                     setIsDragging(false);
                     setDraggedSphere(null);
 
-          const sphereIndex = zonePoints.findIndex(
+                    const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere);
-            (point: any) => point === draggedSphere
-          );
                     if (sphereIndex !== -1) {
                         const zoneIndex = Math.floor(sphereIndex / 4);
 
@@ -438,17 +394,10 @@ const ZoneGroup: React.FC = () => {
                 drag = true;
             }
             raycaster.setFromCamera(pointer, camera);
-      const intersects = raycaster.intersectObjects(
+            const intersects = raycaster.intersectObjects(groupsRef.current.children, true);
-        groupsRef.current.children,
-        true
-      );
 
-      if (
+            if (intersects.length > 0 && intersects[0].object.name.includes("point")) {
-        intersects.length > 0 &&
+                gl.domElement.style.cursor = toolMode === "move" ? "pointer" : "default";
-        intersects[0].object.name.includes("point")
-      ) {
-        gl.domElement.style.cursor =
-          toolMode === "move" ? "pointer" : "default";
             } else {
                 gl.domElement.style.cursor = "default";
             }
@@ -459,9 +408,7 @@ const ZoneGroup: React.FC = () => {
                 if (point) {
                     draggedSphere.set(point.x, 0.15, point.z);
 
-          const sphereIndex = zonePoints.findIndex(
+                    const sphereIndex = zonePoints.findIndex((point: any) => point === draggedSphere);
-            (point: any) => point === draggedSphere
-          );
                     if (sphereIndex !== -1) {
                         const zoneIndex = Math.floor(sphereIndex / 4);
                         const cornerIndex = sphereIndex % 4;
@@ -488,7 +435,7 @@ const ZoneGroup: React.FC = () => {
             setEndPoint(null);
         };
 
-    if (toolMode === "Zone" || deletePointOrLine || toolMode === "move") {
+        if (toolMode === "Zone" || toolMode === '2D-Delete' || toolMode === "move") {
             canvasElement.addEventListener("mousedown", onMouseDown);
             canvasElement.addEventListener("mouseup", onMouseUp);
             canvasElement.addEventListener("mousemove", onMouseMove);
@@ -500,29 +447,7 @@ const ZoneGroup: React.FC = () => {
             canvasElement.removeEventListener("mousemove", onMouseMove);
             canvasElement.removeEventListener("contextmenu", onContext);
         };
-  }, [
+    }, [gl, camera, startPoint, toggleView, scene, toolMode, zones, isDragging, 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,
-  ]);
 
     useFrame(() => {
         if (!startPoint) return;
@@ -643,7 +568,7 @@ const ZoneGroup: React.FC = () => {
                             lineWidth={3}
                             onClick={(e) => {
                                 e.stopPropagation();
-                if (deletePointOrLine) {
+                                if (toolMode === '2D-Delete') {
                                     handleDeleteZone(zone.zoneUuid);
                                 }
                             }}

app/src/modules/builder/point/point.tsx

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import * as Constants from '../../../types/world/worldConstants';
 import { useRef, useState, useEffect, useMemo } from 'react';
-import { useDeletePointOrLine, useToolMode } from '../../../store/builder/store';
+import { useToolMode } from '../../../store/builder/store';
 import { DragControls } from '@react-three/drei';
 import { useAisleStore } from '../../../store/builder/useAisleStore';
 import { useThree } from '@react-three/fiber';
@@ -24,7 +24,6 @@ function Point({ point }: { readonly point: Point }) {
     const { snapPosition } = useAislePointSnapping(point);
     const { checkSnapForAisle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position });
     const { hoveredPoint, setHoveredPoint } = useBuilderStore();
-    const { deletePointOrLine } = useDeletePointOrLine();
     const { projectId } = useParams();
     const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
     const colors = getColor(point);
@@ -64,12 +63,12 @@ function Point({ point }: { readonly point: Point }) {
     }
 
     useEffect(() => {
-        if (materialRef.current && (toolMode === 'move' || deletePointOrLine)) {
+        if (materialRef.current && (toolMode === 'move' || toolMode === '2D-Delete')) {
             let innerColor;
             let outerColor;
             if (isHovered) {
-                innerColor = deletePointOrLine ? colors.defaultDeleteColor : colors.defaultOuterColor;
+                innerColor = toolMode === '2D-Delete' ? colors.defaultDeleteColor : colors.defaultOuterColor;
-                outerColor = deletePointOrLine ? colors.defaultDeleteColor : colors.defaultOuterColor;
+                outerColor = toolMode === '2D-Delete' ? colors.defaultDeleteColor : colors.defaultOuterColor;
             } else {
                 innerColor = colors.defaultInnerColor;
                 outerColor = colors.defaultOuterColor;
@@ -82,7 +81,7 @@ function Point({ point }: { readonly point: Point }) {
             materialRef.current.uniforms.uOuterColor.value.set(colors.defaultOuterColor);
             materialRef.current.uniformsNeedUpdate = true;
         }
-    }, [isHovered, colors.defaultInnerColor, colors.defaultOuterColor, colors.defaultDeleteColor, toolMode, deletePointOrLine]);
+    }, [isHovered, colors.defaultInnerColor, colors.defaultOuterColor, colors.defaultDeleteColor, toolMode]);
 
     const uniforms = useMemo(() => ({
         uOuterColor: { value: new THREE.Color(colors.defaultOuterColor) },
@@ -114,7 +113,7 @@ function Point({ point }: { readonly point: Point }) {
     }
 
     const handleDragEnd = (point: Point) => {
-        if (deletePointOrLine) return;
+        if (toolMode === '2D-Delete') return;
         if (point.pointType === 'Aisle') {
             const updatedAisles = getAislesByPointId(point.pointUuid);
             if (updatedAisles.length > 0 && projectId) {
@@ -128,7 +127,7 @@ function Point({ point }: { readonly point: Point }) {
     }
 
     const handlePointClick = (point: Point) => {
-        if (deletePointOrLine) {
+        if (toolMode === '2D-Delete') {
             if (point.pointType === 'Aisle') {
                 const removedAisles = removeAislePoint(point.pointUuid);
                 if (removedAisles.length > 0) {

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

@@ -40,16 +40,11 @@ export default function SocketResponses({
     floorPlanGroup,
     lines,
     floorGroup,
-    floorGroupAisle,
     scene,
     onlyFloorlines,
-    itemsGroup,
-    isTempLoader,
-    tempLoader,
     currentLayerPoint,
     floorPlanGroupPoint,
     floorPlanGroupLine,
-    zoneGroup,
     dragPointControls,
 }: any) {
     const { socket } = useSocketStore();
@@ -104,7 +99,7 @@ export default function SocketResponses({
                     const asset: Asset = {
                         modelUuid: data.data.modelUuid,
                         modelName: data.data.modelName,
-                        assetId: data.data.modelfileID,
+                        assetId: data.data.assetId,
                         position: data.data.position,
                         rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z],
                         isLocked: data.data.isLocked,
@@ -125,7 +120,7 @@ export default function SocketResponses({
                     const asset: Asset = {
                         modelUuid: data.data.modelUuid,
                         modelName: data.data.modelName,
-                        assetId: data.data.modelfileID,
+                        assetId: data.data.assetId,
                         position: data.data.position,
                         rotation: [data.data.rotation.x, data.data.rotation.y, data.data.rotation.z],
                         isLocked: data.data.isLocked,
@@ -474,13 +469,14 @@ export default function SocketResponses({
         let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
 
         socket.on("v1:wallItem:Response:Delete", (data: any) => {
+            // console.log('data: ', data);
             if (socket.id === data.socketId) {
                 return;
             }
             if (organization !== data.organization) {
                 return;
             }
-            if (data.message === "wallitem deleted") {
+            if (data.message === "wall Item deleted successfully") {
                 const deletedUUID = data.data.modelUuid;
                 let WallItemsRef = wallItems;
                 const Items = WallItemsRef.filter((item: any) => item.model?.uuid !== deletedUUID);
@@ -504,6 +500,7 @@ export default function SocketResponses({
         });
 
         socket.on("v1:wallItems:Response:Update", (data: any) => {
+            // console.log('data: ', data);
             // 
             if (socket.id === data.socketId) {
                 return;
@@ -511,7 +508,7 @@ export default function SocketResponses({
             if (organization !== data.organization) {
                 return;
             }
-            if (data.message === "wallIitem created") {
+            if (data.message === "wall Item created successfully") {
                 const loader = new GLTFLoader();
                 const dracoLoader = new DRACOLoader();
 
@@ -519,20 +516,20 @@ export default function SocketResponses({
                 loader.setDRACOLoader(dracoLoader);
 
                 // Check THREE.js cache first
-                const cachedModel = THREE.Cache.get(data.data.modelfileID);
+                const cachedModel = THREE.Cache.get(data.data.assetId);
                 if (cachedModel) {
                     handleModelLoad(cachedModel);
                     return;
                 }
 
                 // Check IndexedDB cache
-                retrieveGLTF(data.data.modelfileID).then((cachedModelBlob) => {
+                retrieveGLTF(data.data.assetId).then((cachedModelBlob) => {
                     if (cachedModelBlob) {
                         const blobUrl = URL.createObjectURL(cachedModelBlob);
                         loader.load(blobUrl, (gltf) => {
                             URL.revokeObjectURL(blobUrl);
                             THREE.Cache.remove(blobUrl);
-                            THREE.Cache.add(data.data.modelfileID, gltf);
+                            THREE.Cache.add(data.data.assetId, gltf);
                             handleModelLoad(gltf);
                         });
                         return;
@@ -540,11 +537,11 @@ export default function SocketResponses({
                 })
 
                 // Load from backend if not in any cache
-                loader.load(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.modelfileID}`, async (gltf) => {
+                loader.load(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.assetId}`, async (gltf) => {
                     try {
-                        const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.modelfileID}`).then((res) => res.blob());
+                        const modelBlob = await fetch(`${url_Backend_dwinzo}/api/v2/AssetFile/${data.data.assetId}`).then((res) => res.blob());
-                        await storeGLTF(data.data.modelfileID, modelBlob);
+                        await storeGLTF(data.data.assetId, modelBlob);
-                        THREE.Cache.add(data.data.modelfileID, gltf);
+                        THREE.Cache.add(data.data.assetId, gltf);
                         await handleModelLoad(gltf);
                     } catch (error) {
 
@@ -567,7 +564,7 @@ export default function SocketResponses({
                         type: data.data.type,
                         model: model,
                         modelName: data.data.modelName,
-                        modelfileID: data.data.modelfileID,
+                        assetId: data.data.assetId,
                         scale: data.data.scale,
                         csgscale: data.data.csgscale,
                         csgposition: data.data.csgposition,
@@ -592,7 +589,7 @@ export default function SocketResponses({
                     });
                 }
 
-            } else if (data.message === "wallIitem updated") {
+            } else if (data.message === "Updated successfully") {
                 const updatedUUID = data.data.modelUuid;
 
                 setWallItems((prevItems: any) => {

app/src/modules/market/CardsContainer.tsx

@@ -10,7 +10,7 @@ interface ModelData {
   description: string;
   filename: string;
   isArchieve: boolean;
-  modelfileID: string;
+  assetId: string;
   tags: string;
   thumbnail: string;
   uploadDate: number;
@@ -65,7 +65,7 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
                   onSelectCard={handleCardSelect}
                   AssetID={assetDetail.AssetID}
                   image={assetDetail.thumbnail}
-                  modelUrl={assetDetail.modelfileID}
+                  modelUrl={assetDetail.assetId}
                   description={assetDetail.description}
                 />
               </React.Fragment>

app/src/modules/market/FilterSearch.tsx

@@ -10,7 +10,7 @@ interface ModelData {
   description: string;
   filename: string;
   isArchieve: boolean;
-  modelfileID: string;
+  assetId: string;
   tags: string;
   thumbnail: string;
   uploadDate: number;

app/src/modules/market/MarketPlace.tsx

@@ -10,7 +10,7 @@ interface ModelData {
   description: string;
   filename: string;
   isArchieve: boolean;
-  modelfileID: string;
+  assetId: string;
   tags: string;
   thumbnail: string;
   uploadDate: number;

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

@@ -158,7 +158,7 @@ const CopyPasteControls = ({
                 const newFloorItem: Types.FloorItemType = {
                     modelUuid: THREE.MathUtils.generateUUID(),
                     modelName: obj.userData.modelName,
-                    modelfileID: obj.userData.assetId,
+                    assetId: obj.userData.assetId,
                     position: [worldPosition.x, worldPosition.y, worldPosition.z],
                     rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
                     isLocked: false,
@@ -352,7 +352,7 @@ const CopyPasteControls = ({
                         organization,
                         modelUuid: newFloorItem.modelUuid,
                         modelName: newFloorItem.modelName,
-                        modelfileID: newFloorItem.modelfileID,
+                        assetId: newFloorItem.assetId,
                         position: newFloorItem.position,
                         rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                         isLocked: false,
@@ -368,7 +368,7 @@ const CopyPasteControls = ({
 
                     obj.userData = {
                         name: newFloorItem.modelName,
-                        modelId: newFloorItem.modelfileID,
+                        modelId: newFloorItem.assetId,
                         modelUuid: newFloorItem.modelUuid,
                         eventData: JSON.parse(JSON.stringify(eventData))
                     };
@@ -376,7 +376,7 @@ const CopyPasteControls = ({
                     const asset: Asset = {
                         modelUuid: data.modelUuid,
                         modelName: data.modelName,
-                        assetId: data.modelfileID,
+                        assetId: data.assetId,
                         position: data.position,
                         rotation: [data.rotation.x, data.rotation.y, data.rotation.z],
                         isLocked: data.isLocked,
@@ -409,7 +409,7 @@ const CopyPasteControls = ({
                         organization,
                         modelUuid: newFloorItem.modelUuid,
                         modelName: newFloorItem.modelName,
-                        modelfileID: newFloorItem.modelfileID,
+                        assetId: newFloorItem.assetId,
                         position: newFloorItem.position,
                         rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                         isLocked: false,
@@ -425,7 +425,7 @@ const CopyPasteControls = ({
                     const asset: Asset = {
                         modelUuid: data.modelUuid,
                         modelName: data.modelName,
-                        assetId: data.modelfileID,
+                        assetId: data.assetId,
                         position: data.position,
                         rotation: [data.rotation.x, data.rotation.y, data.rotation.z],
                         isLocked: data.isLocked,

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

@@ -133,7 +133,7 @@ const DuplicationControls = ({
                 const newFloorItem: Types.FloorItemType = {
                     modelUuid: THREE.MathUtils.generateUUID(),
                     modelName: obj.userData.modelName,
-                    modelfileID: obj.userData.assetId,
+                    assetId: obj.userData.assetId,
                     position: [worldPosition.x, worldPosition.y, worldPosition.z],
                     rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z, },
                     isLocked: false,
@@ -327,7 +327,7 @@ const DuplicationControls = ({
                         organization,
                         modelUuid: newFloorItem.modelUuid,
                         modelName: newFloorItem.modelName,
-                        modelfileID: newFloorItem.modelfileID,
+                        assetId: newFloorItem.assetId,
                         position: newFloorItem.position,
                         rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                         isLocked: false,
@@ -344,7 +344,7 @@ const DuplicationControls = ({
                     const asset: Asset = {
                         modelUuid: data.modelUuid,
                         modelName: data.modelName,
-                        assetId: data.modelfileID,
+                        assetId: data.assetId,
                         position: data.position,
                         rotation: [data.rotation.x, data.rotation.y, data.rotation.z],
                         isLocked: data.isLocked,
@@ -378,7 +378,7 @@ const DuplicationControls = ({
                         organization,
                         modelUuid: newFloorItem.modelUuid,
                         modelName: newFloorItem.modelName,
-                        modelfileID: newFloorItem.modelfileID,
+                        assetId: newFloorItem.assetId,
                         position: newFloorItem.position,
                         rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                         isLocked: false,
@@ -394,7 +394,7 @@ const DuplicationControls = ({
                     const asset: Asset = {
                         modelUuid: data.modelUuid,
                         modelName: data.modelName,
-                        assetId: data.modelfileID,
+                        assetId: data.assetId,
                         position: data.position,
                         rotation: [data.rotation.x, data.rotation.y, data.rotation.z],
                         isLocked: data.isLocked,

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

@@ -237,7 +237,7 @@ function MoveControls({
                 const newFloorItem: Types.FloorItemType = {
                     modelUuid: obj.userData.modelUuid,
                     modelName: obj.userData.modelName,
-                    modelfileID: obj.userData.assetId,
+                    assetId: obj.userData.assetId,
                     position: [worldPosition.x, worldPosition.y, worldPosition.z],
                     rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                     isLocked: false,
@@ -304,7 +304,7 @@ function MoveControls({
                     organization,
                     modelUuid: newFloorItem.modelUuid,
                     modelName: newFloorItem.modelName,
-                    modelfileID: newFloorItem.modelfileID,
+                    assetId: newFloorItem.assetId,
                     position: newFloorItem.position,
                     rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                     isLocked: false,

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

@@ -203,7 +203,7 @@ function RotateControls({
                 const newFloorItem: Types.FloorItemType = {
                     modelUuid: obj.userData.modelUuid,
                     modelName: obj.userData.modelName,
-                    modelfileID: obj.userData.assetId,
+                    assetId: obj.userData.assetId,
                     position: [worldPosition.x, worldPosition.y, worldPosition.z],
                     rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                     isLocked: false,
@@ -263,7 +263,7 @@ function RotateControls({
                     organization,
                     modelUuid: newFloorItem.modelUuid,
                     modelName: newFloorItem.modelName,
-                    modelfileID: newFloorItem.modelfileID,
+                    assetId: newFloorItem.assetId,
                     position: newFloorItem.position,
                     rotation: { x: obj.rotation.x, y: obj.rotation.y, z: obj.rotation.z },
                     isLocked: false,

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

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { SelectionBox } from "three/examples/jsm/interactive/SelectionBox";
 import { SelectionHelper } from "./selectionHelper";
 import { useFrame, useThree } from "@react-three/fiber";
-import { useSelectedAssets, useSocketStore, useToggleView, } from "../../../../store/builder/store";
+import { useSelectedAssets, useSocketStore, useToggleView, useToolMode, } from "../../../../store/builder/store";
 import BoundingBox from "./boundingBoxHelper";
 // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
 import * as Types from "../../../../types/world/worldTypes";
@@ -33,6 +33,7 @@ const SelectionControls: React.FC = () => {
     const { socket } = useSocketStore();
     const { removeAsset } = useAssetsStore();
     const selectionBox = useMemo(() => new SelectionBox(camera, scene), [camera, scene]);
+    const { toolMode } = useToolMode();
     const { projectId } = useParams();
 
     const isDragging = useRef(false);
@@ -173,7 +174,7 @@ const SelectionControls: React.FC = () => {
             rightClickMoved.current = false;
         };
 
-        if (!toggleView && activeModule === "builder") {
+        if (!toggleView && activeModule === "builder" && toolMode === 'cursor') {
             helper.enabled = true;
             canvasElement.addEventListener("pointermove", onPointerMove);
             canvasElement.addEventListener("pointerup", onPointerUp);
@@ -194,7 +195,7 @@ const SelectionControls: React.FC = () => {
             helper.enabled = false;
             helper.dispose();
         };
-    }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, rotatedObjects, activeModule,]);
+    }, [camera, controls, scene, toggleView, selectedAssets, copiedObjects, pastedObjects, duplicatedObjects, movedObjects, socket, rotatedObjects, activeModule, toolMode]);
 
     useEffect(() => {
         if (activeModule !== "builder") {

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

@@ -124,7 +124,7 @@ export default function TransformControl() {
                 organization,
                 modelUuid: asset.modelUuid,
                 modelName: asset.modelName,
-                modelfileID: asset.assetId,
+                assetId: asset.assetId,
                 position: [selectedFloorItem.position.x, 0, selectedFloorItem.position.z] as [number, number, number],
                 rotation: { x: selectedFloorItem.rotation.x, y: selectedFloorItem.rotation.y, z: selectedFloorItem.rotation.z },
                 isLocked: false,

app/src/modules/simulation/analysis/ROI/roiData.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { useInputValues, useProductionCapacityData, useROISummaryData } from '../../../../store/builder/store';
 import { usePlayButtonStore } from '../../../../store/usePlayButtonStore';
 import { useProductContext } from '../../products/productContext';
+import { useProductStore } from '../../../../store/simulation/useProductStore';
 
 export default function ROIData() {
     const { selectedProductStore } = useProductContext();
@@ -10,6 +11,9 @@ export default function ROIData() {
     const { selectedProduct } = selectedProductStore();
     const { isPlaying } = usePlayButtonStore();
     const { setRoiSummaryData } = useROISummaryData();
+    const { products, getProductById } = useProductStore();
+    const [compareProducts, setCompareProducts] = useState<any[]>([]);
+
     useEffect(() => {
         if (!isPlaying) {
             setRoiSummaryData({
@@ -43,47 +47,36 @@ export default function ROIData() {
             !isNaN(materialCost) && !isNaN(productionPeriod) && !isNaN(salvageValue) && !isNaN(sellingPrice) &&
             !isNaN(shiftLength) && !isNaN(shiftsPerDay) && !isNaN(workingDaysPerYear) && productionCapacityData > 0) {
 
-
-
-
             const totalHoursPerYear = shiftLength * shiftsPerDay * workingDaysPerYear;
-
             // Total good units produced per year
             const annualProductionUnits = productionCapacityData * totalHoursPerYear;
-
             // Revenue for a year
             const annualRevenue = annualProductionUnits * sellingPrice;
-
             // Costs
             const totalMaterialCost = annualProductionUnits * materialCost;
             const totalLaborCost = laborCost * totalHoursPerYear;
             const totalEnergyCost = electricityCost * totalHoursPerYear;
             const totalMaintenanceCost = maintenanceCost + fixedCost;
-
             const totalAnnualCost = totalMaterialCost + totalLaborCost + totalEnergyCost + totalMaintenanceCost;
-
             // Annual Profit
             const annualProfit = annualRevenue - totalAnnualCost;
-            console.log('annualProfit: ', annualProfit);
             
             // Net Profit over production period
             const netProfit = annualProfit * productionPeriod;
-
             // ROI
             const roiPercentage = ((netProfit + salvageValue - initialInvestment) / initialInvestment) * 100;
-
             // Payback Period
             const paybackPeriod = initialInvestment / (annualProfit || 1); // Avoid division by 0
-            console.log('paybackPeriod: ', paybackPeriod);
             
-            // console.log("--- ROI Breakdown ---");
+
-            // console.log("Annual Production Units:", annualProductionUnits.toFixed(2));
+            // 
-            // console.log("Annual Revenue:", annualRevenue.toFixed(2));
+            // 
-            // console.log("Total Annual Cost:", totalAnnualCost.toFixed(2));
+            // 
-            // console.log("Annual Profit:", annualProfit.toFixed(2));
+            // 
-            // console.log("Net Profit:", netProfit.toFixed(2));
+            // 
-            // console.log("ROI %:", roiPercentage.toFixed(2));
+            // 
-            // console.log("Payback Period (years):", paybackPeriod.toFixed(2));
+            // 
+            // 
 
             setRoiSummaryData({
                 productName: selectedProduct.productName,
@@ -107,12 +100,47 @@ export default function ROIData() {
             const netProfitForTarget = profitForTargetUnits > 0 ? profitForTargetUnits : 0;
             const netLossForTarget = profitForTargetUnits < 0 ? -profitForTargetUnits : 0;
 
-            // console.log("--- Fixed Product Count (" + productCount + ") ---");
+            // 
-            // console.log("Cost per Unit:", costPerUnit.toFixed(2));
+            // 
-            // console.log("Total Cost for " + productCount + " Units:", costForTargetUnits.toFixed(2));
+            // 
-            // console.log("Revenue for " + productCount + " Units:", revenueForTargetUnits.toFixed(2));
+            // 
-            // console.log("Profit:", netProfitForTarget.toFixed(2));
+            // 
-            // console.log("Loss:", netLossForTarget.toFixed(2));
+            // 
+
+            const productData = getProductById(selectedProduct.productUuid);
+            
+            
+            setCompareProducts(prev => {
+                const newData = {
+                    productUuid: productData?.productUuid,
+                    productName: productData?.productName,
+                    costPerUnit: parseFloat(costPerUnit.toFixed(2)),
+                    workingDaysPerYear: parseFloat(workingDaysPerYear.toFixed(2)),
+                    shiftLength: parseFloat(shiftLength.toFixed(2)),
+                    shiftsPerDay: parseFloat(shiftsPerDay.toFixed(2)),
+                    roiPercentage: parseFloat((roiPercentage / 100).toFixed(2)),
+                    paybackPeriod: parseFloat(paybackPeriod.toFixed(2)),
+                    totalCost: parseFloat(totalAnnualCost.toFixed(2)),
+                    revenueGenerated: parseFloat(annualRevenue.toFixed(2)),
+                    netProfit: netProfit > 0 ? parseFloat(netProfit.toFixed(2)) : 0,
+                    netLoss: netProfit < 0 ? parseFloat((-netProfit).toFixed(2)) : 0
+                };
+
+                const existingIndex = prev.findIndex(
+                    item => item.productUuid === productData?.productUuid
+                );
+
+                if (existingIndex !== -1) {
+                    // Replace the existing item
+                    const updated = [...prev];
+                    updated[existingIndex] = newData;
+                    return updated;
+                } else {
+                    // Add as new item
+                    return [...prev, newData];
+                }
+            });
+            // console.log('compareProducts: ', compareProducts);
             
         }
 

app/src/modules/simulation/analysis/throughPut/throughPutData.tsx

@@ -190,9 +190,6 @@ export default function ThroughPutData() {
 
     useEffect(() => {
         if (machineActiveTime > 0 && materialCycleTime > 0 && machineCount > 0) {
-            
-            
-            
             const utilization = machineActiveTime / 3600; // Active time per hour
             const unitsPerMachinePerHour = 3600 / materialCycleTime;
             const throughput = unitsPerMachinePerHour * machineCount * utilization;

app/src/modules/simulation/events/arrows/arrows.tsx

@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import { useMemo, useRef, useState } from "react";
 import { useThree } from "@react-three/fiber";
-import { useDeleteTool } from "../../../../store/builder/store";
+import { useToolMode } from "../../../../store/builder/store";
 
 interface ConnectionLine {
     id: string;
@@ -14,7 +14,7 @@ export function Arrows({ connections }: { readonly connections: ConnectionLine[]
     const [hoveredLineKey, setHoveredLineKey] = useState<string | null>(null);
     const groupRef = useRef<THREE.Group>(null);
     const { scene } = useThree();
-    const { deleteTool } = useDeleteTool();
+    const { toolMode } = useToolMode();
 
     const getWorldPositionFromScene = (uuid: string): THREE.Vector3 | null => {
         const obj = scene.getObjectByProperty("uuid", uuid);
@@ -61,7 +61,7 @@ export function Arrows({ connections }: { readonly connections: ConnectionLine[]
                     onPointerOut={() => setHoveredLineKey(null)}
                 >
                     <meshStandardMaterial
-                        color={deleteTool && hoveredLineKey === key ? "red" : "#42a5f5"}
+                        color={toolMode === '2D-Delete' && hoveredLineKey === key ? "red" : "#42a5f5"}
                     />
                 </mesh>
                 <mesh
@@ -72,7 +72,7 @@ export function Arrows({ connections }: { readonly connections: ConnectionLine[]
                     onPointerOut={() => setHoveredLineKey(null)}
                 >
                     <meshStandardMaterial
-                        color={deleteTool && hoveredLineKey === key ? "red" : "#42a5f5"}
+                        color={toolMode === '2D-Delete' && hoveredLineKey === key ? "red" : "#42a5f5"}
                     />
                 </mesh>
             </group>

app/src/modules/simulation/events/points/creator/pointsCreator.tsx

@@ -11,6 +11,7 @@ import { usePlayButtonStore } from "../../../../../store/usePlayButtonStore";
 import { upsertProductOrEventApi } from "../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../products/productContext";
 import { useParams } from "react-router-dom";
+import { useToolMode } from "../../../../../store/builder/store";
 
 function PointsCreator() {
     const { gl, raycaster, scene, pointer, camera } = useThree();
@@ -26,7 +27,7 @@ function PointsCreator() {
     const { selectedEventSphere, setSelectedEventSphere, clearSelectedEventSphere, } = useSelectedEventSphere();
     const { setSelectedEventData, clearSelectedEventData } = useSelectedEventData();
     const { isPlaying } = usePlayButtonStore();
-
+    const { toolMode } = useToolMode();
     const { projectId } = useParams();
 
     const updateBackend = (
@@ -204,9 +205,11 @@ function PointsCreator() {
                                                 ref={(el) => (sphereRefs.current[point.uuid] = el!)}
                                                 onClick={(e) => {
                                                     e.stopPropagation();
+                                                    if (toolMode === 'cursor') {
                                                         setSelectedEventSphere(
                                                             sphereRefs.current[point.uuid]
                                                         );
+                                                    }
                                                 }}
                                                 key={`${index}-${point.uuid}`}
                                                 position={new THREE.Vector3(...point.position)}
@@ -235,9 +238,11 @@ function PointsCreator() {
                                             ref={(el) => (sphereRefs.current[point.uuid] = el!)}
                                             onClick={(e) => {
                                                 e.stopPropagation();
+                                                if (toolMode === 'cursor') {
                                                     setSelectedEventSphere(
                                                         sphereRefs.current[point.uuid]
                                                     );
+                                                }
                                             }}
                                             position={new THREE.Vector3(...point.position)}
                                             userData={{
@@ -264,9 +269,11 @@ function PointsCreator() {
                                             ref={(el) => (sphereRefs.current[point.uuid] = el!)}
                                             onClick={(e) => {
                                                 e.stopPropagation();
+                                                if (toolMode === 'cursor') {
                                                     setSelectedEventSphere(
                                                         sphereRefs.current[point.uuid]
                                                     );
+                                                }
                                             }}
                                             position={new THREE.Vector3(...point.position)}
                                             userData={{
@@ -293,9 +300,11 @@ function PointsCreator() {
                                             ref={(el) => (sphereRefs.current[point.uuid] = el!)}
                                             onClick={(e) => {
                                                 e.stopPropagation();
+                                                if (toolMode === 'cursor') {
                                                     setSelectedEventSphere(
                                                         sphereRefs.current[point.uuid]
                                                     );
+                                                }
                                             }}
                                             position={new THREE.Vector3(...point.position)}
                                             userData={{
@@ -322,9 +331,11 @@ function PointsCreator() {
                                             ref={(el) => (sphereRefs.current[point.uuid] = el!)}
                                             onClick={(e) => {
                                                 e.stopPropagation();
+                                                if (toolMode === 'cursor') {
                                                     setSelectedEventSphere(
                                                         sphereRefs.current[point.uuid]
                                                     );
+                                                }
                                             }}
                                             position={new THREE.Vector3(...point.position)}
                                             userData={{

app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx

@@ -8,11 +8,11 @@ import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { handleAddEventToProduct } from "../points/functions/handleAddEventToProduct";
 import { QuadraticBezierLine } from "@react-three/drei";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
-import { useDeleteTool } from "../../../../store/builder/store";
 import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
 import { ArrowOnQuadraticBezier, Arrows } from "../arrows/arrows";
 import { useProductContext } from "../../products/productContext";
 import { useParams } from "react-router-dom";
+import { useToolMode } from "../../../../store/builder/store";
 
 interface ConnectionLine {
     id: string;
@@ -32,7 +32,7 @@ function TriggerConnector() {
     const groupRefs = useRef<Record<string, any>>({});
     const [helperlineColor, setHelperLineColor] = useState<string>("red");
     const [currentLine, setCurrentLine] = useState<{ start: THREE.Vector3; end: THREE.Vector3; mid: THREE.Vector3; } | null>(null);
-    const { deleteTool } = useDeleteTool();
+    const { toolMode } = useToolMode();
     const { isPlaying } = usePlayButtonStore();
     const { selectedAction } = useSelectedAction();
     const { projectId } = useParams();
@@ -344,7 +344,7 @@ function TriggerConnector() {
             }
         };
 
-        if (subModule === 'mechanics' && !deleteTool && selectedAction.actionId && selectedAction.actionName) {
+        if (subModule === 'mechanics' && toolMode === 'cursor' && selectedAction.actionId && selectedAction.actionName) {
             canvasElement.addEventListener("mousedown", onMouseDown);
             canvasElement.addEventListener("mouseup", onMouseUp);
             canvasElement.addEventListener("mousemove", onMouseMove);
@@ -360,7 +360,7 @@ function TriggerConnector() {
             canvasElement.removeEventListener('contextmenu', handleRightClick);
         };
 
-    }, [gl, subModule, selectedProduct, firstSelectedPoint, deleteTool, selectedAction]);
+    }, [gl, subModule, selectedProduct, firstSelectedPoint, toolMode, selectedAction]);
 
     useFrame(() => {
         if (firstSelectedPoint) {
@@ -477,15 +477,15 @@ function TriggerConnector() {
                         start={startPoint.toArray()}
                         end={endPoint.toArray()}
                         mid={midPoint.toArray()}
-                        color={deleteTool && hoveredLineKey === connection.id ? "red" : "#42a5f5"}
+                        color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#42a5f5"}
                         lineWidth={4}
-                        dashed={deleteTool && hoveredLineKey === connection.id ? false : true}
+                        dashed={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? false : true}
                         dashSize={0.75}
                         dashScale={20}
                         onPointerOver={() => setHoveredLineKey(connection.id)}
                         onPointerOut={() => setHoveredLineKey(null)}
                         onClick={() => {
-                            if (deleteTool) {
+                            if (toolMode === '3D-Delete') {
                                 setHoveredLineKey(null);
                                 setCurrentLine(null);
                                 removeConnection(connection);

app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx

@@ -259,10 +259,9 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
         }
     });
 
-    //Helper to Visible the Circle and Curve
     return (
         <>
-            {customCurvePoints && customCurvePoints?.length >= 2 && currentPath && isPlaying && (
+            {/* {customCurvePoints && customCurvePoints?.length >= 2 && currentPath && isPlaying && (
                 <mesh rotation={armBot.rotation} position={armBot.position} visible={false}>
                     <Line
                         points={customCurvePoints.map((p) => [p.x, p.y, p.z] as [number, number, number])}
@@ -277,19 +276,16 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
                 rotation={[armBot.rotation[0], armBot.rotation[1], armBot.rotation[2]]}
                 visible={false}
             >
-                {/* Green ring */}
                 <mesh rotation={[-Math.PI / 2, 0, 0]} visible={false}>
                     <ringGeometry args={[CIRCLE_RADIUS, CIRCLE_RADIUS + 0.02, 64]} />
                     <meshBasicMaterial color="green" side={THREE.DoubleSide} />
                 </mesh>
 
-                {/* Markers at 90°, 180°, 270°, 360° */}
                 {[90, 180, 270, 360].map((degree, index) => {
                     const rad = ((degree) * Math.PI) / 180;
                     const x = CIRCLE_RADIUS * Math.cos(rad);
                     const z = CIRCLE_RADIUS * Math.sin(rad);
-                    const y = 0; // same plane as the ring (Y axis)
+                    const y = 0;
-
                     return (
                         <mesh key={index} position={[x, y, z]}>
                             <sphereGeometry args={[0.05, 16, 16]} />
@@ -302,7 +298,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
                     const rad = ((degree) * Math.PI) / 180;
                     const x = CIRCLE_RADIUS * Math.cos(rad);
                     const z = CIRCLE_RADIUS * Math.sin(rad);
-                    const y = 0.15; // lift the text slightly above the ring
+                    const y = 0.15;
 
                     return (
                         <Text
@@ -317,9 +313,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
                         </Text>
                     );
                 })}
-
+            </group> */}
-
-            </group>
 
         </>
     );

app/src/modules/simulation/roboticArm/instances/armInstance/roboticArmInstance.tsx

@@ -10,6 +10,7 @@ import { useProductStore } from '../../../../../store/simulation/useProductStore
 import { useTriggerHandler } from '../../../triggers/triggerHandler/useTriggerHandler';
 import { useSceneContext } from '../../../../scene/sceneContext';
 import { useProductContext } from '../../../products/productContext';
+import { Preload } from '@react-three/drei';
 
 function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
 
@@ -45,7 +46,7 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
     const animationFrameIdRef = useRef<number | null>(null);
     const previousTimeRef = useRef<number | null>(null);
 
-    const lastRemoved = useRef<{ type: string, materialId: string } | null>(null);
+    const lastRemoved = useRef<{ type: string, materialId: string, modelId: string } | null>(null);
 
     function firstFrame() {
         startTime = performance.now();
@@ -72,7 +73,7 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
                         removeLastStorageMaterial(previousModel.modelUuid);
                         updateCurrentLoad(previousModel.modelUuid, -1)
                     }
-                    lastRemoved.current = { type: previousModel.type, materialId: armBot.currentAction.materialId };
+                    lastRemoved.current = { type: previousModel.type, materialId: armBot.currentAction.materialId, modelId: previousModel.modelUuid };
                 } else {
                     setIsVisible(armBot.currentAction.materialId, false);
                 }
@@ -104,13 +105,13 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
                 removeCurrentAction(armBot.modelUuid)
             }
 
-            if (lastRemoved.current) {
+            // if (lastRemoved.current) {
-                if (lastRemoved.current.type === 'transfer') {
+            //     if (lastRemoved.current.type === 'transfer') {
-                    setIsPaused(lastRemoved.current.materialId, true)
+            //         setIsPaused(lastRemoved.current.materialId, true)
-                } else {
+            //     } else {
-                    setIsPaused(lastRemoved.current.materialId, false)
+            //         setIsPaused(lastRemoved.current.materialId, false)
-                }
+            //     }
-            }
+            // }
         }
     }
 
@@ -392,7 +393,7 @@ function RoboticArmInstance({ armBot }: { readonly armBot: ArmBotStatus }) {
         <>
             {!isReset && isPlaying && (
                 <>
-                    <IKInstance modelUrl={armModel} setIkSolver={setIkSolver} ikSolver={ikSolver} armBot={armBot} groupRef={groupRef} />
+                    <IKInstance modelUrl={armModel} setIkSolver={setIkSolver} armBot={armBot} groupRef={groupRef} />
                     <RoboticArmAnimator
                         HandleCallback={HandleCallback}
                         restPosition={restPosition}

app/src/modules/simulation/roboticArm/instances/ikInstance/ikInstance.tsx

@@ -1,21 +1,19 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo } from 'react'
 import * as THREE from "three";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { clone } from "three/examples/jsm/utils/SkeletonUtils";
-import { useLoader, useThree } from "@react-three/fiber";
+import { useLoader } from "@react-three/fiber";
-import { CCDIKSolver, CCDIKHelper, } from "three/examples/jsm/animation/CCDIKSolver";
+import { CCDIKSolver, CCDIKHelper } from "three/examples/jsm/animation/CCDIKSolver";
-import { TransformControls } from '@react-three/drei';
 
 type IKInstanceProps = {
     modelUrl: string;
-    ikSolver: any;
     setIkSolver: any
     armBot: ArmBotStatus;
     groupRef: any;
 };
-function IKInstance({ modelUrl, setIkSolver, ikSolver, armBot, groupRef }: IKInstanceProps) {
+
-    const { scene } = useThree()
+function IKInstance({ modelUrl, setIkSolver, armBot, groupRef }: IKInstanceProps) {
     const gltf = useLoader(GLTFLoader, modelUrl, (loader) => {
         const draco = new DRACOLoader();
         draco.setDecoderPath("https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/");
@@ -24,7 +22,6 @@ function IKInstance({ modelUrl, setIkSolver, ikSolver, armBot, groupRef }: IKIns
     const cloned = useMemo(() => clone(gltf?.scene), [gltf]);
     const targetBoneName = "Target";
     const skinnedMeshName = "link_0";
-    const [selectedArm, setSelectedArm] = useState<THREE.Group>();
 
     useEffect(() => {
         if (!gltf) return;
@@ -66,19 +63,14 @@ function IKInstance({ modelUrl, setIkSolver, ikSolver, armBot, groupRef }: IKIns
         const solver = new CCDIKSolver(OOI.Skinned_Mesh, iks);
         setIkSolver(solver);
 
-        const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05)
+        // const helper = new CCDIKHelper(OOI.Skinned_Mesh, iks, 0.05)
-
-        setSelectedArm(OOI.Target_Bone);
 
         // scene.add(helper);
 
-    }, [cloned, gltf, setIkSolver]);
+    }, [cloned, gltf]);
 
     return (
-        <>
+        <group ref={groupRef} position={armBot.position} rotation={armBot.rotation}>
-            <group ref={groupRef} position={armBot.position} rotation={armBot.rotation} onClick={() => {
-                setSelectedArm(groupRef.current?.getObjectByName(targetBoneName))
-            }}>
             <primitive
                 uuid={`${armBot.modelUuid}_IK`}
                 object={cloned}
@@ -86,8 +78,6 @@ function IKInstance({ modelUrl, setIkSolver, ikSolver, armBot, groupRef }: IKIns
                 name={armBot.modelName}
             />
         </group>
-            {/* {selectedArm && <TransformControls object={selectedArm} />} */}
-        </>
     )
 }
 

app/src/modules/simulation/roboticArm/instances/roboticArmInstances.tsx

@@ -1,18 +1,20 @@
+import { useViewSceneStore } from "../../../../store/builder/store";
 import { useSceneContext } from "../../../scene/sceneContext";
 import RoboticArmInstance from "./armInstance/roboticArmInstance";
-// import RoboticArmContentUi from "../../ui3d/RoboticArmContentUi";
+import RoboticArmContentUi from "../../ui3d/RoboticArmContentUi";
 import React from "react";
 
 function RoboticArmInstances() {
-    const {armBotStore} = useSceneContext();
+    const { armBotStore } = useSceneContext();
     const { armBots } = armBotStore();
+    const { viewSceneLabels } = useViewSceneStore();
 
     return (
         <>
             {armBots?.map((robot: ArmBotStatus) => (
                 <React.Fragment key={robot.modelUuid}>
                     <RoboticArmInstance armBot={robot} />
-                    {/* <RoboticArmContentUi roboticArm={robot} /> */}
+                    {viewSceneLabels && <RoboticArmContentUi roboticArm={robot} />}
                 </React.Fragment>
             ))}
         </>

app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts

@@ -604,6 +604,7 @@ export function useTriggerHandler() {
                                         modelUuid: action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid,
                                         pointUuid: action.triggers[0]?.triggeredAsset?.triggeredPoint?.pointUuid,
                                     })
+                                    setIsPaused(material.materialId, false); // New
                                     handleAction(action, material.materialId);
                                 }
                             } else {

app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx

@@ -48,14 +48,24 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
 
     const computePath = useCallback(
         (start: any, end: any) => {
+            console.log('end: ', end);
             try {
                 const navMeshQuery = new NavMeshQuery(navMesh);
                 const { path: segmentPath } = navMeshQuery.computePath(start, end);
-                return (
+                if (
-                    segmentPath?.map(({ x, y, z }) => [x, 0, z] as [number, number, number]) || []
+                    segmentPath.length > 0 &&
-                );
+                    Math.round(segmentPath[segmentPath.length - 1].x) == Math.round(end.x) &&
+                    Math.round(segmentPath[segmentPath.length - 1].z) == Math.round(end.z)
+                ) {
+                    console.log('if ', segmentPath);
+                    return segmentPath?.map(({ x, y, z }) => [x, 0, z] as [number, number, number]) || [];
+                } else {
+                    console.log("There is no path here...Choose valid path")
+                    const { path: segmentPaths } = navMeshQuery.computePath(start, start);
+                    return segmentPaths.map(({ x, y, z }) => [x, 0, z] as [number, number, number]) || [];
+                }
             } catch {
-                echo.error("Failed to compute path");
+                console.error("Failed to compute path");
                 return [];
             }
         },
@@ -96,6 +106,10 @@ function VehicleInstance({ agvDetail }: Readonly<{ agvDetail: VehicleStatus }>)
                     new THREE.Vector3(agvDetail?.position[0], agvDetail?.position[1], agvDetail?.position[2]),
                     agvDetail?.point?.action?.pickUpPoint?.position
                 );
+                // const toPickupPath = computePath(
+                //     new THREE.Vector3(agvDetail?.position[0], agvDetail?.position[1], agvDetail?.position[2]),
+                //     new THREE.Vector3(agvDetail?.position[0], agvDetail?.position[1], agvDetail?.position[2])
+                // );
                 setPath(toPickupPath);
                 setCurrentPhase('stationed-pickup');
                 setVehicleState(agvDetail.modelUuid, 'running');

app/src/pages/Dashboard.tsx

@@ -8,11 +8,20 @@ import DashboardTrash from "../components/Dashboard/DashboardTrash";
 import { getUserData } from "../components/Dashboard/functions/getUserData";
 import SidePannel from "../components/Dashboard/SidePannel";
 import DashboardTutorial from "../components/Dashboard/DashboardTutorial";
+import { useProductStore } from "../store/simulation/useProductStore";
+import { useEventsStore } from "../store/simulation/useEventsStore";
 
 const Dashboard: React.FC = () => {
   const [activeTab, setActiveTab] = useState<string>("Home");
   const { socket } = useSocketStore();
   const { userId, organization, email, userName } = getUserData();
+  const { clearProducts } = useProductStore();
+  const { clearEvents } = useEventsStore();
+
+  useEffect(() => {
+    clearEvents();
+    clearProducts();
+  }, [])
 
   useEffect(() => {
     const token = localStorage.getItem("token");

app/src/pages/UserAuth.tsx

@@ -61,14 +61,13 @@ const UserAuth: React.FC = () => {
           const projects = await recentlyViewed(organization, res.message.userId);
           console.log('projects: ', projects);
 
+          if (res.message.isShare) {
             if (Object.values(projects.RecentlyViewed).length > 0) {
               const firstId = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
               setLoadingProgress(1)
               navigate(`/${firstId}`)
             } else {
-            if (res.message.isShare) {
               setLoadingProgress(1);
-              // navigate("/Project");
               navigate("/Dashboard");
             }
           }

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

@@ -1,6 +1,6 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const getFloorAssets = async (organization: string,projectId?:string) => {
+export const getFloorAssets = async (organization: string, projectId?: string) => {
   try {
     const response = await fetch(
       `${url_Backend_dwinzo}/api/V1/floorAssets/${projectId}`,

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

@@ -3,7 +3,8 @@ export const setFloorItemApi = async (
   organization: string,
   modelUuid?: string,
   modelName?: string,
-  modelfileID?: string,
+  assetId?: string,
+  projectId?: string,
   position?: Object,
   rotation?: Object,
   isLocked?: boolean,
@@ -14,9 +15,10 @@ export const setFloorItemApi = async (
       organization,
       modelUuid,
       modelName,
+      projectId,
       position,
       rotation,
-      modelfileID,
+      assetId,
       isLocked,
       isVisible,
     };

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

@@ -21,7 +21,6 @@ export const getWallItems = async (organization: string,projectId?:string) => {
     }
 
     const result = await response.json();
-    // console.log('result: ', result);
     return result;
   } catch (error) {
     echo.error("Failed to get wall items");

app/src/services/factoryBuilder/webWorkers/gltfLoaderWorker.js

@@ -13,14 +13,14 @@ onmessage = async (event) => {
     const { floorItems } = event.data;
 
     const uniqueItems = floorItems.filter((item, index, self) =>
-        index === self.findIndex((t) => t.modelfileID === item.modelfileID)
+        index === self.findIndex((t) => t.assetId === item.assetId)
     );
 
     for (const item of uniqueItems) {
-        if(item.modelfileID === null || item.modelfileID === undefined) {
+        if(item.assetId === null || item.assetId === undefined) {
-            continue; // Skip items without a valid modelfileID
+            continue; // Skip items without a valid assetId
         }
-        const modelID = item.modelfileID;
+        const modelID = item.assetId;
         const indexedDBModel = await retrieveGLTF(modelID);
 
         let modelBlob;

app/src/store/builder/store.ts

@@ -197,10 +197,10 @@ export const useMenuVisible = create<any>((set: any) => ({
   setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
 }));
 
-export const useDeleteTool = create<any>((set: any) => ({
+// export const useDeleteTool = create<any>((set: any) => ({
-  deleteTool: false,
+//   deleteTool: false,
-  setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
+//   setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
-}));
+// }));
 
 export const useToolMode = create<any>((set: any) => ({
   toolMode: null,
@@ -222,10 +222,10 @@ export const useMovePoint = create<any>((set: any) => ({
   setMovePoint: (x: any) => set(() => ({ movePoint: x })),
 }));
 
-export const useDeletePointOrLine = create<any>((set: any) => ({
+// export const useDeletePointOrLine = create<any>((set: any) => ({
-  deletePointOrLine: false,
+//   deletePointOrLine: false,
-  setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
+//   setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
-}));
+// }));
 
 export const useWallItems = create<any>((set: any) => ({
   wallItems: [],
@@ -631,6 +631,7 @@ export const useCompareStore = create<CompareStore>((set) => ({
   toggleComparePopUp: () =>
     set((state) => ({ comparePopUp: !state.comparePopUp })),
 }));
+
 // Save state store
 interface SaveVersionStore {
   isVersionSaved: boolean;

app/src/store/simulation/useEventsStore.ts

@@ -7,6 +7,7 @@ type EventsStore = {
     // Event-level actions
     addEvent: (event: EventsSchema) => void;
     removeEvent: (modelUuid: string) => void;
+    clearEvents: () => void;
     updateEvent: (modelUuid: string, updates: Partial<EventsSchema>) => EventsSchema | undefined;
 
     // Point-level actions
@@ -61,6 +62,12 @@ export const useEventsStore = create<EventsStore>()(
             });
         },
 
+        clearEvents: () => {
+            set((state) => {
+                state.events = [];
+            });
+        },
+
         updateEvent: (modelUuid, updates) => {
             let updatedEvent: EventsSchema | undefined;
             set((state) => {

app/src/store/simulation/useProductStore.ts

@@ -7,6 +7,7 @@ type ProductsStore = {
     // Product-level actions
     addProduct: (productName: string, productUuid: string) => void;
     setProducts: (products: productsSchema) => void;
+    clearProducts: () => void;
     removeProduct: (productUuid: string) => void;
     updateProduct: (productUuid: string, updates: Partial<{ productName: string; eventDatas: EventsSchema[] }>) => void;
 
@@ -99,6 +100,12 @@ export const useProductStore = create<ProductsStore>()(
             });
         },
 
+        clearProducts: () => {
+            set((state) => {
+                state.products = [];
+            });
+        },
+
         removeProduct: (productUuid) => {
             set((state) => {
                 state.products = state.products.filter(p => p.productUuid !== productUuid);

app/src/styles/layout/compareLayout.scss

@@ -463,6 +463,7 @@
         width: 100%;
         display: flex;
         justify-content: space-between;
+        position: relative;
 
         .layer-wrapper {
             display: flex;
@@ -472,6 +473,12 @@
                 justify-content: end;
             }
         }
+
+        .chart {
+            width: 60%;
+            height: 70%;
+            position: absolute;
+        }
     }
 
     .chart {
@@ -484,6 +491,8 @@
 }
 
 .cycle-time-container {
+    position: relative;
+
     .cycle-main {
         display: flex;
         justify-content: space-between;
@@ -519,6 +528,14 @@
             }
         }
     }
+
+    .chart {
+        position: absolute;
+        bottom: 0;
+        left: 10px;
+        width: 60%;
+        height: 80%;
+    }
 }
 
 .overallDowntime-container {

app/src/styles/pages/dashboard.scss

@@ -144,7 +144,7 @@
 
           &.active {
             background: var(--background-color-button);
-            color: var(--text-color);
+            color: var(--text-button-color);
           }
         }
       }

app/src/types/world/worldTypes.d.ts

@@ -193,7 +193,7 @@ export type FloorItemType = {
     modelName: string;
     position: [number, number, number];
     rotation: { x: number; y: number; z: number };
-    modelfileID: string;
+    assetId: string;
     isLocked: boolean;
     isVisible: boolean;
     eventData?: {
@@ -224,7 +224,7 @@ interface WallItem {
     type: "fixed-move" | "free-move" | undefined;
     model?: THREE.Group;
     modelUuid?: string;
-    modelfileID: string;
+    assetId: string;
     modelName?: string;
     scale?: [number, number, number];
     csgscale?: [number, number, number];

app/src/utils/shortcutkeys/handleShortcutKeys.ts

@@ -5,7 +5,6 @@ import {
   useActiveSubTool,
   useActiveTool,
   useAddAction,
-  useDeleteTool,
   useRenameModeStore,
   useSaveVersion,
   useSelectedFloorItem,
@@ -32,7 +31,6 @@ const KeyPressListener: React.FC = () => {
   const { setToolMode } = useToolMode();
   const { isPlaying, setIsPlaying } = usePlayButtonStore();
   const { toggleView, setToggleView } = useToggleView();
-  const { setDeleteTool } = useDeleteTool();
   const { setAddAction } = useAddAction();
   const { setSelectedWallItem } = useSelectedWallItem();
   const { setActiveTool } = useActiveTool();
@@ -60,7 +58,6 @@ const KeyPressListener: React.FC = () => {
     };
     const module = modules[keyCombination];
     if (module && !toggleView) {
-      console.log("hi");
       setActiveTool("cursor");
       setActiveSubTool("cursor");
       if (module === "market") setToggleUI(false, false);
@@ -91,7 +88,6 @@ const KeyPressListener: React.FC = () => {
       setToggleUI(toggleTo2D, toggleTo2D);
       if (toggleTo2D) {
         setSelectedWallItem(null);
-        setDeleteTool(false);
         setAddAction(null);
       }
       setActiveTool("cursor");