Merge remote-tracking branch 'origin/main-demo' into ui

app/package-lock.json

@@ -2027,7 +2027,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2039,7 +2039,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4190,6 +4190,26 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4301,25 +4321,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -9090,7 +9110,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9967,7 +9987,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -15351,7 +15371,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -20886,7 +20906,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20929,7 +20949,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20941,7 +20961,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21437,7 +21457,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22496,7 +22516,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }

app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx

@@ -30,14 +30,6 @@ const ResourceManagement = () => {
 
             <div className="search-container">
                 <Search onChange={() => { }} />
-                <div className="select-catagory">
-                    <RegularDropDown
-                        header={"floor"}
-                        options={["floor"]} // Pass layout names as options
-                        onSelect={() => { }}
-                        search={false}
-                    />
-                </div>
             </div>
 
             {selectType === "assetManagement" ? <AssetManagement /> : <Hrm />}

app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx

@@ -1,96 +1,156 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
+import { useSceneContext } from '../../../../../modules/scene/sceneContext';
+import { useProductContext } from '../../../../../modules/simulation/products/productContext';
+import RenameInput from '../../../../ui/inputs/RenameInput';
 // import NavigateCatagory from '../NavigateCatagory'
 
 const Hrm = () => {
     const [selectedCard, setSelectedCard] = useState(0);
+    const [workers, setWorkers] = useState<any[]>([]);
 
-    const employee_details = [
+    const { productStore } = useSceneContext();
-        {
+    const { products, getProductById } = productStore();
-            "employee": {
+    const { selectedProductStore } = useProductContext();
+    const { selectedProduct } = selectedProductStore();
+
+    useEffect(() => {
+        if (selectedProduct) {
+            const productDetails = getProductById(selectedProduct.productUuid);
+            const workerDetails = productDetails?.eventDatas || [];
+
+            const formattedWorkers = workerDetails
+                .filter((worker: any) => worker.type === "human")
+                .map((worker: any, index: number) => ({
+                    employee: {
                         image: "",
-                "name": "John Doe",
+                        name: worker.modelName,
-                "employee_id": "HR-204",
+                        employee_id: `HR-${204 + index}`,
-                "status": "Active",
+                        status: "Active",
-
                     },
-            "task": {
+                    task: {
-                "status": "Ongoing",
+                        status: "Ongoing",
-                "title": "Inspecting Machine X",
+                        title: worker.taskTitle || "No Task Assigned",
-                "location": {
+                        location: {
-                    "floor": 4,
+                            floor: worker.floor || 0,
-                    "zone": "B"
+                            zone: worker.zone || "N/A"
                         },
-                "planned_time_hours": 6,
+                        planned_time_hours: worker.plannedTime || 0,
-                "time_spent_hours": 2,
+                        time_spent_hours: worker.timeSpent || 0,
-                "total_tasks": 12,
+                        total_tasks: worker.totalTasks || 0,
-                "completed_tasks": 3
+                        completed_tasks: worker.completedTasks || 0
                     },
-            "actions": [
+                    actions: [
                         "Assign Task",
                         "Reassign Task",
                         "Pause",
                         "Emergency Stop"
                     ],
-            "location": "Floor 4 . Zone B"
+                    location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`
-        },
+                }));
-        {
-            "employee": {
-                image: "",
-                "name": "Alice Smith",
-                "employee_id": "HR-205",
-                "status": "Active",
 
-            },
+            setWorkers(formattedWorkers);
-            "task": {
+        }
-                "status": "Ongoing",
+    }, [selectedProduct, getProductById]);
-                "title": "Calibrating Sensor Y",
+
-                "location": {
+    useEffect(() => {
-                    "floor": 2,
+        // console.log("Workers data updated:", workers);
-                    "zone": "A"
+    }, [workers]);
-                },
+
-                "planned_time_hours": 4,
+
-                "time_spent_hours": 1.5,
+
-                "total_tasks": 10,
+
-                "completed_tasks": 2
+    // const employee_details = [
-            },
+    //     {
-            "actions": [
+    //         "employee": {
-                "Assign Task",
+    //             image: "",
-                "Reassign Task",
+    //             "name": "John Doe",
-                "Pause",
+    //             "employee_id": "HR-204",
-                "Emergency Stop"
+    //             "status": "Active",
-            ],
+
-            "location": "Floor 4 . Zone B"
+    //         },
-        },
+    //         "task": {
-        {
+    //             "status": "Ongoing",
-            "employee": {
+    //             "title": "Inspecting Machine X",
-                image: "",
+    //             "location": {
-                "name": "Michael Lee",
+    //                 "floor": 4,
-                "employee_id": "HR-206",
+    //                 "zone": "B"
-                "status": "Active",
+    //             },
+    //             "planned_time_hours": 6,
+    //             "time_spent_hours": 2,
+    //             "total_tasks": 12,
+    //             "completed_tasks": 3
+    //         },
+    //         "actions": [
+    //             "Assign Task",
+    //             "Reassign Task",
+    //             "Pause",
+    //             "Emergency Stop"
+    //         ],
+    //         "location": "Floor 4 . Zone B"
+    //     },
+    //     {
+    //         "employee": {
+    //             image: "",
+    //             "name": "Alice Smith",
+    //             "employee_id": "HR-205",
+    //             "status": "Active",
+
+    //         },
+    //         "task": {
+    //             "status": "Ongoing",
+    //             "title": "Calibrating Sensor Y",
+    //             "location": {
+    //                 "floor": 2,
+    //                 "zone": "A"
+    //             },
+    //             "planned_time_hours": 4,
+    //             "time_spent_hours": 1.5,
+    //             "total_tasks": 10,
+    //             "completed_tasks": 2
+    //         },
+    //         "actions": [
+    //             "Assign Task",
+    //             "Reassign Task",
+    //             "Pause",
+    //             "Emergency Stop"
+    //         ],
+    //         "location": "Floor 4 . Zone B"
+    //     },
+    //     {
+    //         "employee": {
+    //             image: "",
+    //             "name": "Michael Lee",
+    //             "employee_id": "HR-206",
+    //             "status": "Active",
+
+    //         },
+    //         "task": {
+    //             "status": "Ongoing",
+    //             "title": "Testing Conveyor Belt Z",
+    //             "location": {
+    //                 "floor": 5,
+    //                 "zone": "C"
+    //             },
+    //             "planned_time_hours": 5,
+    //             "time_spent_hours": 3,
+    //             "total_tasks": 8,
+    //             "completed_tasks": 5
+    //         },
+    //         "actions": [
+    //             "Assign Task",
+    //             "Reassign Task",
+    //             "Pause",
+    //             "Emergency Stop"
+    //         ],
+    //         "location": "Floor 4 . Zone B"
+    //     },
+    // ]
+    function handleRenameWorker(newName: string) {
+        // console.log('newName: ', newName);
+
+    }
 
-            },
-            "task": {
-                "status": "Ongoing",
-                "title": "Testing Conveyor Belt Z",
-                "location": {
-                    "floor": 5,
-                    "zone": "C"
-                },
-                "planned_time_hours": 5,
-                "time_spent_hours": 3,
-                "total_tasks": 8,
-                "completed_tasks": 5
-            },
-            "actions": [
-                "Assign Task",
-                "Reassign Task",
-                "Pause",
-                "Emergency Stop"
-            ],
-            "location": "Floor 4 . Zone B"
-        },
-    ]
 
     return (
         <>
@@ -101,7 +161,7 @@ const Hrm = () => {
             /> */}
 
             <div className='hrm-container assetManagement-wrapper'>
-                {employee_details.map((employee, index) => (
+                {workers.map((employee, index) => (
                     <div
                         className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
                         onClick={() => setSelectedCard(index)}
@@ -114,7 +174,8 @@ const Hrm = () => {
                                     <div className={`status ${employee.employee.status}`}></div>
                                 </div>
                                 <div className="details">
-                                    <div className="employee-name">{employee.employee.name}</div>
+                                    {/* <div className="employee-name">{employee.employee.name}</div> */}
+                                    <RenameInput value={employee.employee.name} onRename={handleRenameWorker} />
                                     <div className="employee-id">{employee.employee.employee_id}</div>
                                 </div>
                             </div>

app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx

@@ -1,49 +1,105 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 // import NavigateCatagory from '../../NavigateCatagory'
 import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
 import assetImage from "../../../../../../assets/image/asset-image.png"
+import { useSceneContext } from '../../../../../../modules/scene/sceneContext';
+import { useProductContext } from '../../../../../../modules/simulation/products/productContext';
+import RenameInput from '../../../../../ui/inputs/RenameInput';
 const AssetManagement = () => {
     // const [selectedCategory, setSelectedCategory] = useState("All Assets");
     const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
+    const [assets, setAssets] = useState<any[]>([]);
 
-    const dummyAssets = [
+    const { productStore } = useSceneContext();
-        {
+    const { products, getProductById } = productStore();
-            id: '1',
+    const { selectedProductStore } = useProductContext();
-            name: 'Forklift Model X200',
+    const { selectedProduct } = selectedProductStore();
-            model: 'FLK-0025',
+
-            status: 'Online',
+
-            usageRate: 15,
+
-            level: 'Level 1',
+    useEffect(() => {
+        if (selectedProduct) {
+            const productDetails = getProductById(selectedProduct.productUuid);
+            const productAssets = productDetails?.eventDatas || [];
+            const grouped: Record<string, any> = {};
+            productAssets.forEach((asset: any) => {
+                if (asset.type === "storageUnit" || asset.type === "human") return;
+                if (!grouped[asset.modelName]) {
+                    grouped[asset.modelName] = {
+                        id: asset.assetId,
+                        name: asset.modelName,
+                        model: asset.modelCode || "N/A",
+                        status: asset.status || "Online",
+                        usageRate: asset.usageRate || 15,
+                        level: asset.level || "Level 1",
                         image: assetImage,
-            description: 'Electric forklift used for moving goods and materials in warehouse operations.',
+                        description: asset.description || "No description",
-            cost: 122000,
+                        cost: asset.cost || 0,
-            count: 5,
+                        count: 1,
-        },
+                    };
-        {
+                } else {
-            id: '2',
+                    grouped[asset.modelName].count += 1;
-            name: 'Warehouse Robot WR-300',
+                }
-            model: 'WRB-3001',
+            });
-            status: 'Online',
+
-            usageRate: 50,
+            setAssets(Object.values(grouped));
-            level: 'Level 2',
+        }
-            image: assetImage,
+    }, [selectedProduct]);
-            description: 'Automated robot for handling packages and inventory in the warehouse.',
+
-            cost: 85000,
+    function handleRenameAsset(newName: string) {
-            count: 3,
+        // console.log('newName: ', newName);
-        },
+        // if (expandedAssetId) {
-        {
+        //     setAssets(prevAssets =>
-            id: '3',
+        //         prevAssets.map(asset =>
-            name: 'Conveyor Belt System CB-150',
+        //             asset.id === expandedAssetId ? { ...asset, name: newName } : asset
-            model: 'CBS-150X',
+        //         )
-            status: 'Online',
+        //     );
-            usageRate: 95,
+        // }
-            level: 'Level 3',
+    }
-            image: assetImage,
+
-            description: 'High-speed conveyor belt system for efficient material handling.',
+    useEffect(() => {
-            cost: 45000,
+
-            count: 2,
+
-        },
+    }, [assets]);
-    ];
+
+    // const dummyAssets = [
+    //     {
+    //         id: '1',
+    //         name: 'Forklift Model X200',
+    //         model: 'FLK-0025',
+    //         status: 'Online',
+    //         usageRate: 15,
+    //         level: 'Level 1',
+    //         image: assetImage,
+    //         description: 'Electric forklift used for moving goods and materials in warehouse operations.',
+    //         cost: 122000,
+    //         count: 5,
+    //     },
+    //     {
+    //         id: '2',
+    //         name: 'Warehouse Robot WR-300',
+    //         model: 'WRB-3001',
+    //         status: 'Online',
+    //         usageRate: 50,
+    //         level: 'Level 2',
+    //         image: assetImage,
+    //         description: 'Automated robot for handling packages and inventory in the warehouse.',
+    //         cost: 85000,
+    //         count: 3,
+    //     },
+    //     {
+    //         id: '3',
+    //         name: 'Conveyor Belt System CB-150',
+    //         model: 'CBS-150X',
+    //         status: 'Online',
+    //         usageRate: 95,
+    //         level: 'Level 3',
+    //         image: assetImage,
+    //         description: 'High-speed conveyor belt system for efficient material handling.',
+    //         cost: 45000,
+    //         count: 2,
+    //     },
+    // ];
 
 
     return (
@@ -55,7 +111,7 @@ const AssetManagement = () => {
             /> */}
 
             <div className='assetManagement-container assetManagement-wrapper'>
-                {dummyAssets.map((asset, index) => (
+                {assets.map((asset, index) => (
                     <div className={`assetManagement-card-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`} key={index}>
                         <header>
                             <div className="header-wrapper">
@@ -70,7 +126,14 @@ const AssetManagement = () => {
                                 }
                                 <div className="asset-details-container">
                                     <div className="asset-details">
-                                        <div className="asset-name">{asset.name}</div>
+                                        {/* <div className="asset-name">{asset.name}</div> */}
+                                        <RenameInput value={asset.name} onRename={handleRenameAsset} />
+                                        {asset.count !== 1 && <div>
+                                            <span className="asset-id-label">x</span>
+                                            <span className="asset-id">{asset.count}</span>
+                                        </div>}
+
+
                                         <div className="asset-model">{asset.model}</div>
                                     </div>
                                     <div className="asset-status-wrapper">

app/src/components/ui/Tools.tsx

@@ -36,6 +36,7 @@ import {
 } from "../../store/visualization/useDroppedObjectsStore";
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../modules/builder/version/versionContext";
+import { MoveIcon, RotateIcon } from "../icons/ShortcutIcons";
 
 // Utility component
 const ToolButton = ({
@@ -65,12 +66,8 @@ const Tools: React.FC = () => {
   const { isPlaying, setIsPlaying } = usePlayButtonStore();
   const { showShortcuts } = useShortcutStore();
 
-  const {
+  const { activeTool, setActiveTool, setToolMode, setAddAction } =
-    activeTool,
+    useStoreHooks();
-    setActiveTool,
-    setToolMode,
-    setAddAction,
-  } = useStoreHooks();
 
   const { setActiveSubTool, activeSubTool } = useActiveSubTool();
   const { setSelectedWallItem } = useSelectedWallItem();
@@ -81,14 +78,15 @@ const Tools: React.FC = () => {
   const { selectedZone } = useSelectedZoneStore();
   const { floatingWidget } = useFloatingWidget();
   const { widgets3D } = use3DWidget();
-  const { visualizationSocket } = useSocketStore();
 
-  const dropdownRef = useRef<HTMLButtonElement>(null);
+  const { visualizationSocket } = useSocketStore();
-  const [openDrop, setOpenDrop] = useState(false);
   const { selectedVersionStore } = useVersionContext();
   const { selectedVersion } = selectedVersionStore();
   const { projectId } = useParams();
 
+  const dropdownRef = useRef<HTMLButtonElement>(null);
+  const [openDrop, setOpenDrop] = useState(false);
+
   // 1. Set UI toggles on initial render
   useEffect(() => {
     setToggleUI(
@@ -155,7 +153,7 @@ const Tools: React.FC = () => {
         if (!is2D) setAddAction("Pillar");
         break;
       case "delete":
-        is2D ? setToolMode('2D-Delete') : setToolMode('3D-Delete');
+        is2D ? setToolMode("2D-Delete") : setToolMode("3D-Delete");
         break;
     }
   };
@@ -251,7 +249,7 @@ const Tools: React.FC = () => {
             templates,
             visualizationSocket,
             projectId,
-            versionId: selectedVersion?.versionId || ''
+            versionId: selectedVersion?.versionId || "",
           })
         }
       />
@@ -278,6 +276,10 @@ const Tools: React.FC = () => {
         return FreeMoveIcon;
       case "delete":
         return DeleteIcon;
+      case "move":
+        return MoveIcon;
+      case "rotate":
+        return RotateIcon;
       default:
         return CursorIcon;
     }
@@ -304,6 +306,10 @@ const Tools: React.FC = () => {
         return <FreeMoveIcon isActive={false} />;
       case "delete":
         return <DeleteIcon isActive={false} />;
+      case "move":
+        return <MoveIcon />;
+      case "rotate":
+        return <RotateIcon />;
       default:
         return null;
     }
@@ -362,6 +368,24 @@ const Tools: React.FC = () => {
         )}
       </div>
 
+      {activeModule !== "visualization" && (
+        <>
+          <div className="split"></div>
+          <div className="transform-tools">
+            {["move", "rotate"].map((tool) => (
+              <ToolButton
+                key={tool}
+                toolId={tool}
+                icon={getIconByTool(tool)}
+                tooltip={`${tool}`}
+                active={activeTool === tool}
+                onClick={() => setActiveTool(tool)}
+              />
+            ))}
+          </div>
+        </>
+      )}
+
       <div className="split"></div>
       {activeModule === "builder" && renderBuilderTools()}
       {activeModule === "simulation" && renderSimulationTools()}

app/src/modules/scene/tools/measurementTool.tsx

@@ -2,33 +2,15 @@ import * as THREE from "three";
 import { useEffect, useRef, useState } from "react";
 import { useThree, useFrame } from "@react-three/fiber";
 import { useToolMode } from "../../../store/builder/store";
-import { Html } from "@react-three/drei";
+import { Html, Line } from "@react-three/drei";
 
 const MeasurementTool = () => {
   const { gl, raycaster, pointer, camera, scene } = useThree();
   const { toolMode } = useToolMode();
 
   const [points, setPoints] = useState<THREE.Vector3[]>([]);
-    const [tubeGeometry, setTubeGeometry] = useState<THREE.TubeGeometry | null>(
+  const [linePoints, setLinePoints] = useState<THREE.Vector3[] | null>(null);
-        null
-    );
   const groupRef = useRef<THREE.Group>(null);
-    const [startConePosition, setStartConePosition] =
-        useState<THREE.Vector3 | null>(null);
-    const [endConePosition, setEndConePosition] = useState<THREE.Vector3 | null>(
-        null
-    );
-    const [startConeQuaternion, setStartConeQuaternion] = useState(
-        new THREE.Quaternion()
-    );
-    const [endConeQuaternion, setEndConeQuaternion] = useState(
-        new THREE.Quaternion()
-    );
-    const [coneSize, setConeSize] = useState({ radius: 0.2, height: 0.5 });
-
-    const MIN_RADIUS = 0.001, MAX_RADIUS = 0.1;
-    const MIN_CONE_RADIUS = 0.01, MAX_CONE_RADIUS = 0.4;
-    const MIN_CONE_HEIGHT = 0.035, MAX_CONE_HEIGHT = 2.0;
 
   useEffect(() => {
     const canvasElement = gl.domElement;
@@ -54,7 +36,9 @@ const MeasurementTool = () => {
               !intersect.object.name.includes("zonePlane") &&
               !intersect.object.name.includes("SelectionGroup") &&
               !intersect.object.name.includes("selectionAssetGroup") &&
-                            !intersect.object.name.includes("SelectionGroupBoundingBoxLine") &&
+              !intersect.object.name.includes(
+                "SelectionGroupBoundingBoxLine"
+              ) &&
               !intersect.object.name.includes("SelectionGroupBoundingBox") &&
               !intersect.object.name.includes("SelectionGroupBoundingLine") &&
               intersect.object.type !== "GridHelper"
@@ -78,9 +62,8 @@ const MeasurementTool = () => {
     const onContextMenu = (evt: any) => {
       evt.preventDefault();
       if (!drag) {
-                evt.preventDefault();
         setPoints([]);
-                setTubeGeometry(null);
+        setLinePoints(null);
       }
     };
 
@@ -90,8 +73,8 @@ const MeasurementTool = () => {
       canvasElement.addEventListener("pointerup", onMouseUp);
       canvasElement.addEventListener("contextmenu", onContextMenu);
     } else {
-            resetMeasurement();
       setPoints([]);
+      setLinePoints(null);
     }
 
     return () => {
@@ -100,10 +83,12 @@ const MeasurementTool = () => {
       canvasElement.removeEventListener("pointerup", onMouseUp);
       canvasElement.removeEventListener("contextmenu", onContextMenu);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [toolMode, camera, raycaster, pointer, scene, points]);
 
   useFrame(() => {
     if (points.length === 1) {
+      // live preview for second point
       raycaster.setFromCamera(pointer, camera);
       const intersects = raycaster
         .intersectObjects(scene.children, true)
@@ -122,116 +107,79 @@ const MeasurementTool = () => {
         );
 
       if (intersects.length > 0) {
-                updateMeasurement(points[0], intersects[0].point);
+        const tempEnd = intersects[0].point.clone();
+        updateMeasurement(points[0], tempEnd);
       }
     } else if (points.length === 2) {
+      // second point already fixed
       updateMeasurement(points[0], points[1]);
     } else {
-            resetMeasurement();
+      setLinePoints(null);
     }
   });
 
   const updateMeasurement = (start: THREE.Vector3, end: THREE.Vector3) => {
-        const distance = start.distanceTo(end);
+    setLinePoints([start.clone(), end.clone()]);
-
-        const radius = THREE.MathUtils.clamp(distance * 0.02, MIN_RADIUS, MAX_RADIUS);
-        const coneRadius = THREE.MathUtils.clamp(distance * 0.05, MIN_CONE_RADIUS, MAX_CONE_RADIUS);
-        const coneHeight = THREE.MathUtils.clamp(distance * 0.2, MIN_CONE_HEIGHT, MAX_CONE_HEIGHT);
-
-        setConeSize({ radius: coneRadius, height: coneHeight });
-
-        const direction = new THREE.Vector3().subVectors(end, start).normalize();
-
-        const offset = direction.clone().multiplyScalar(coneHeight * 0.5);
-
-        let tubeStart = start.clone().add(offset);
-        let tubeEnd = end.clone().sub(offset);
-
-        tubeStart.y = Math.max(tubeStart.y, 0);
-        tubeEnd.y = Math.max(tubeEnd.y, 0);
-
-        const curve = new THREE.CatmullRomCurve3([tubeStart, tubeEnd]);
-        setTubeGeometry(new THREE.TubeGeometry(curve, 20, radius, 8, false));
-
-        setStartConePosition(tubeStart);
-        setEndConePosition(tubeEnd);
-        setStartConeQuaternion(getArrowOrientation(start, end));
-        setEndConeQuaternion(getArrowOrientation(end, start));
   };
 
-    const resetMeasurement = () => {
-        setTubeGeometry(null);
-        setStartConePosition(null);
-        setEndConePosition(null);
-    };
-
-    const getArrowOrientation = (start: THREE.Vector3, end: THREE.Vector3) => {
-        const direction = new THREE.Vector3()
-            .subVectors(end, start)
-            .normalize()
-            .negate();
-        const quaternion = new THREE.Quaternion();
-        quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
-        return quaternion;
-    };
-
-    useEffect(() => {
-        if (points.length === 2) {
-            // console.log(points[0].distanceTo(points[1]));
-        }
-    }, [points]);
-
   return (
     <group ref={groupRef} name="MeasurementGroup">
-            {startConePosition && (
+      {linePoints && (
-                <mesh
+        <>
-                    name="MeasurementReference"
+          {/* Outline line */}
-                    position={startConePosition}
+          <Line
-                    quaternion={startConeQuaternion}
+            points={linePoints}
-                >
+            color="black"
-                    <coneGeometry args={[coneSize.radius, coneSize.height, 16]} />
+            lineWidth={6} // thicker than main line
-                    <meshBasicMaterial color="yellow" />
+            depthTest={false}
-                </mesh>
+            depthWrite={false}
-            )}
+            renderOrder={998} // render behind main line
-            {endConePosition && (
+          />
-                <mesh
+
-                    name="MeasurementReference"
+          {/* Main line */}
-                    position={endConePosition}
+          <Line
-                    quaternion={endConeQuaternion}
+            points={linePoints}
-                >
+            color="#b18ef1"
-                    <coneGeometry args={[coneSize.radius, coneSize.height, 16]} />
+            lineWidth={2} // actual line width
-                    <meshBasicMaterial color="yellow" />
+            depthTest={false}
-                </mesh>
+            depthWrite={false}
-            )}
+            transparent={false}
-            {tubeGeometry && (
+            opacity={1}
-                <mesh name="MeasurementReference" geometry={tubeGeometry}>
+            renderOrder={999} // render on top
-                    <meshBasicMaterial color="yellow" />
+          />
-                </mesh>
+        </>
       )}
 
-            {startConePosition && endConePosition && (
+      {points.map((point, index) => (
         <Html
-                    scale={THREE.MathUtils.clamp(
+          key={index}
-                        startConePosition.distanceTo(endConePosition) * 0.25,
+          position={point}
-                        0,
+          scale={0.5}
-                        10
+          wrapperClass="measurement-label-wrapper"
-                    )}
+          className="measurement-label"
-                    position={[
-                        (startConePosition.x + endConePosition.x) / 2,
-                        (startConePosition.y + endConePosition.y) / 2,
-                        (startConePosition.z + endConePosition.z) / 2,
-                    ]}
-                    // class
-                    wrapperClass="distance-text-wrapper"
-                    className="distance-text"
-                    // other
           zIndexRange={[1, 0]}
           prepend
           sprite
         >
-                    <div>
+          <div className="measurement-point"></div>
-                        {(startConePosition.distanceTo(endConePosition) + (coneSize.height)).toFixed(2)} m
+        </Html>
-                    </div>
+      ))}
+
+      {linePoints && linePoints.length === 2 && (
+        <Html
+          position={[
+            (linePoints[0].x + linePoints[1].x) / 2,
+            (linePoints[0].y + linePoints[1].y) / 2,
+            (linePoints[0].z + linePoints[1].z) / 2,
+          ]}
+          scale={0.5}
+          wrapperClass="distance-text-wrapper"
+          className="distance-text"
+          zIndexRange={[2, 1]}
+          prepend
+          sprite
+        >
+          <div>{linePoints[0].distanceTo(linePoints[1]).toFixed(2)} m</div>
         </Html>
       )}
     </group>

app/src/styles/components/tools.scss

@@ -31,6 +31,7 @@
   }
 
   .draw-tools,
+  .transform-tools,
   .general-options,
   .activeDropicon {
     @include flex-center;

app/src/styles/layout/resourceManagement.scss

@@ -1,15 +1,12 @@
 @use "../abstracts/variables" as *;
 @use "../abstracts/mixins" as *;
 
-
-
 .resourceManagement-container {
   .navigation-wrapper {
     @include flex-space-between;
     justify-content: space-around;
 
     .navigation {
-
       padding: 4px 12px;
       border-radius: 20px;
       text-wrap: nowrap;
@@ -20,7 +17,6 @@
         background: var(--background-color-button);
       }
     }
-
   }
 
   .search-container {
@@ -74,7 +70,6 @@
           border-radius: 100px;
           background: var(--background-color-button);
         }
-
       }
     }
   }
@@ -104,7 +99,7 @@
       background: var(--background-color);
 
       &.active {
-                outline: 1px solid var(--Color-Hover, #CCACFF);
+        outline: 1px solid var(--Color-Hover, #ccacff);
       }
 
       header {
@@ -127,29 +122,28 @@
               border-radius: 50%;
               width: 6px;
               height: 6px;
-                            outline: 1px solid #2F2C32;
+              outline: 1px solid #2f2c32;
 
               position: absolute;
               bottom: 0;
               right: 0;
 
               &.Active {
-                                background-color: #44E5C6;
+                background-color: #44e5c6;
               }
             }
           }
 
           .details {
+            max-width: 144px;
             .employee-id {
-                            color: #B7B7C6;
+              color: #b7b7c6;
               font-size: $tiny;
-
             }
           }
         }
 
         .see-more {
-
           padding: 4px 12px;
           border-radius: 20px;
           text-wrap: nowrap;
@@ -165,7 +159,7 @@
           left: 0;
           width: 100%;
           height: 1px;
-                    background-color: #6F6F7A;
+          background-color: #6f6f7a;
         }
       }
 
@@ -191,7 +185,7 @@
               gap: 3px;
 
               .label-text {
-                                color: #B7B7C6;
+                color: #b7b7c6;
               }
             }
           }
@@ -205,10 +199,12 @@
           .stat-item {
             border-radius: 100px;
             @include flex-space-between;
-                        background: linear-gradient(162.53deg,
+            background: linear-gradient(
+              162.53deg,
               rgba(51, 51, 51, 0.7) 0%,
-                                rgba(45, 36, 55, 0.7) 106.84%);
+              rgba(45, 36, 55, 0.7) 106.84%
-                        border: 1px solid #FFFFFF0D;
+            );
+            border: 1px solid #ffffff0d;
             padding: 6px;
 
             .stat-wrapper {
@@ -241,7 +237,7 @@
 
             .header {
               font-size: 12px;
-                            color: #B7B7C6;
+              color: #b7b7c6;
             }
           }
         }
@@ -255,16 +251,15 @@
           button {
             line-height: 133%;
             font-size: 11px;
-                        border: 1px solid var(--Linear-Border, #564B69);
+            border: 1px solid var(--Linear-Border, #564b69);
             border-radius: 100px;
             padding: 4px 0;
 
             &:last-child {
-                            background-color: #CC2C1E;
+              background-color: #cc2c1e;
             }
           }
         }
-
       }
     }
   }
@@ -274,21 +269,17 @@
     display: flex;
     flex-direction: column;
     gap: 6px;
-        position: relative;
 
     .assetManagement-card-wrapper {
       padding: 16px;
-            border: 1px solid #564B69;
+      border: 1px solid #564b69;
       border-radius: 20px;
       gap: 10px;
-            position: relative;
-
 
       header {
         border-bottom: 1px solid #595965;
         padding-bottom: 8px;
 
-
         .header-wrapper {
           display: flex;
           gap: 8px;
@@ -299,14 +290,6 @@
             border-radius: 7px;
             @include flex-center;
             background: var(--background-color-button);
-
-                    }
-
-                    .drop-icon {
-                        position: absolute;
-                        top: 15px;
-                        right: 17px;
-                        cursor: pointer;
           }
 
           .asset-image {
@@ -321,20 +304,23 @@
             @include flex-space-between;
 
             .asset-details {
-
+              display: flex;
-                            // .asset-name{
+              gap: 4px;
-                            //     overflow: hidden;
+              width: 100%;
-                            // }
+              max-width: 160px;
+              .input-value {
+                width: fit-content;
+              }
               .asset-model {
                 color: var(--text-disabled);
-
+                display: none;
               }
             }
           }
 
           .asset-status-wrapper {
             padding: 4px 8px;
-                        border: 1px solid var(--text-color-dark, #F3F3FDD9);
+            border: 1px solid var(--text-color-dark, #f3f3fdd9);
             border-radius: 100px;
             @include flex-space-between;
             gap: 4px;
@@ -345,7 +331,7 @@
               border-radius: 100%;
 
               &.Online {
-                                background-color: #44E5C6;
+                background-color: #44e5c6;
               }
             }
 
@@ -393,7 +379,7 @@
               width: 100%;
               height: 5px;
               border-radius: 20px;
-                            background-color: #6F6F7A;
+              background-color: #6f6f7a;
               position: relative;
 
               .filled-value {
@@ -402,7 +388,7 @@
                 left: 0;
                 height: 100%;
                 width: 10px;
-                                background-color: #CCACFF;
+                background-color: #ccacff;
                 border-radius: 20px;
               }
             }
@@ -411,13 +397,12 @@
       }
 
       .asset-estimate {
-                margin-top: 5px;
         display: flex;
         flex-direction: column;
         gap: 10px;
 
         &__label {
-                    color: #B7B7C6;
+          color: #b7b7c6;
           font-size: 14px;
         }
 
@@ -458,7 +443,7 @@
 
       &.openViewMore {
         outline-offset: -1px;
-                outline: 1px solid var(--Color-Hover, #CCACFF);
+        outline: 1px solid var(--Color-Hover, #ccacff);
 
         header {
           display: flex;
@@ -466,7 +451,227 @@
           gap: 6px;
 
           .header-wrapper {
+            gap: 14px;
 
+            .asset-details-container {
+              flex-direction: column;
+              align-items: start;
+              justify-content: start;
+
+              .asset-details {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+                max-width: 144px;
+                .input-value {
+                  text-wrap: wrap;
+                  font-size: 1rem;
+                }
+              }
+
+              .asset-status-wrapper {
+                margin-top: 8px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// ASSET MANAGEMENT
+.assetManagement-container {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+
+  .assetManagement-card-wrapper {
+    padding: 16px;
+    border: 1px solid #564b69;
+    border-radius: 20px;
+    gap: 10px;
+    position: relative;
+
+    header {
+      border-bottom: 1px solid #595965;
+      padding-bottom: 8px;
+
+      .header-wrapper {
+        display: flex;
+        gap: 8px;
+
+        .icon {
+          min-width: 28px;
+          height: 28px;
+          border-radius: 7px;
+          @include flex-center;
+          background: var(--background-color-button);
+        }
+
+        .drop-icon {
+          position: absolute;
+          top: 18px;
+          right: 16px;
+          cursor: pointer;
+        }
+
+        .asset-image {
+          width: 114px;
+          height: 112px;
+          border-radius: 15.2px;
+          object-fit: cover;
+        }
+
+        .asset-details-container {
+          width: 100%;
+          @include flex-space-between;
+
+          .asset-details {
+            // .asset-name{
+            //     overflow: hidden;
+            // }
+            .asset-model {
+              color: var(--text-disabled);
+            }
+          }
+        }
+
+        .asset-status-wrapper {
+          padding: 4px 8px;
+          border: 1px solid var(--text-color-dark, #f3f3fdd9);
+          border-radius: 100px;
+          @include flex-space-between;
+          gap: 4px;
+
+          .indication {
+            width: 6px;
+            height: 6px;
+            border-radius: 100%;
+
+            &.Online {
+              background-color: #44e5c6;
+            }
+          }
+
+          .status {
+            font-size: $small;
+          }
+        }
+      }
+    }
+
+    .asset-contents {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+
+      .asset-wrapper {
+        @include flex-space-between;
+        padding: 6px 0;
+        gap: 20px;
+
+        .key-wrapper,
+        .viewMore {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+
+          .icon {
+            @include flex-center;
+          }
+        }
+
+        .viewMore {
+          padding: 8px;
+          border-radius: 100px;
+          background: var(--background-color-button);
+          cursor: pointer;
+        }
+
+        .progress-wrapper {
+          flex: 1;
+          @include flex-space-between;
+          gap: 4px;
+
+          .progress-bar {
+            width: 100%;
+            height: 5px;
+            border-radius: 20px;
+            background-color: #6f6f7a;
+            position: relative;
+
+            .filled-value {
+              position: absolute;
+              top: 0;
+              left: 0;
+              height: 100%;
+              width: 10px;
+              background-color: #ccacff;
+              border-radius: 20px;
+            }
+          }
+        }
+      }
+    }
+
+    .asset-estimate {
+      margin-top: 5px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      &__label {
+        color: #b7b7c6;
+        font-size: 14px;
+      }
+
+      &__value {
+        font-weight: 500;
+        font-size: 16px;
+      }
+
+      &__unit-cost {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      &__breakdown {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 2px;
+      }
+
+      &__view-button {
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        background-color: var(--background-color-button);
+        border-radius: 20px;
+        padding: 8px 0;
+      }
+
+      &__view-text {
+        font-weight: 500;
+        // color: #4A4AFF;
+      }
+    }
+
+    &.openViewMore {
+      outline-offset: -1px;
+      outline: 1px solid var(--Color-Hover, #ccacff);
+
+      header {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+
+        .header-wrapper {
           gap: 20px;
 
           .asset-details-container {
@@ -490,12 +695,6 @@
           }
         }
       }
-
-
-
-            }
-
     }
   }
-
 }

app/src/styles/scene/scene.scss

@@ -130,15 +130,25 @@
   svg {
     display: none;
   }
-  .c-jiwtRJ{
+  .c-jiwtRJ {
     align-items: center;
   }
 }
 
-.stats{
+.stats {
   top: auto !important;
   bottom: 36px !important;
   left: 12px !important;
   border-radius: 6px;
   overflow: hidden;
 }
+
+.measurement-point {
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  background: #b18ef1;
+  outline: 2px solid black;
+  outline-offset: -1px;
+  transform: translate(-50%, -50%);
+}