feat: implement resource management ID handling in Hrm and AssetManagement components

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

@@ -3,6 +3,8 @@ import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/E
 import { useSceneContext } from '../../../../../modules/scene/sceneContext';
 import { useProductContext } from '../../../../../modules/simulation/products/productContext';
 import RenameInput from '../../../../ui/inputs/RenameInput';
+import { useResourceManagementId } from '../../../../../store/builder/store';
+import { set } from 'immer/dist/internal';
 // import NavigateCatagory from '../NavigateCatagory'
 
 const Hrm = () => {
@@ -13,6 +15,7 @@ const Hrm = () => {
     const { products, getProductById } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
+    const { setResourceManagementId } = useResourceManagementId();
 
     useEffect(() => {
         if (selectedProduct) {
@@ -25,6 +28,7 @@ const Hrm = () => {
                     employee: {
                         image: "",
                         name: worker.modelName,
+                        modelId: worker.modelUuid,
                         employee_id: `HR-${204 + index}`,
                         status: "Active",
                     },
@@ -54,7 +58,7 @@ const Hrm = () => {
     }, [selectedProduct, getProductById]);
 
     useEffect(() => {
-        // console.log("Workers data updated:", workers);
+        // 
     }, [workers]);
 
 
@@ -147,9 +151,14 @@ const Hrm = () => {
     //     },
     // ]
     function handleRenameWorker(newName: string) {
-        // console.log('newName: ', newName);
+        // 
 
     }
+    function handleHumanClick(employee: any) {
+        if (employee.modelId) {
+            setResourceManagementId(employee.modelId);
+        }
+    }
 
 
     return (
@@ -173,14 +182,14 @@ const Hrm = () => {
                                     <img className='user-image' src={employee.employee.image} alt="" />
                                     <div className={`status ${employee.employee.status}`}></div>
                                 </div>
-                                <div className="details">
+                                <div className="details" >
                                     {/* <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>
 
-                            <div className="see-more">View more</div>
+                            <div className="see-more" onClick={() => { handleHumanClick(employee.employee) }}>View in Scene</div>
                         </header>
 
                         <div className="content">

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

@@ -5,6 +5,7 @@ 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';
+import { useResourceManagementId } from '../../../../../../store/builder/store';
 const AssetManagement = () => {
     // const [selectedCategory, setSelectedCategory] = useState("All Assets");
     const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
@@ -14,6 +15,7 @@ const AssetManagement = () => {
     const { products, getProductById } = productStore();
     const { selectedProductStore } = useProductContext();
     const { selectedProduct } = selectedProductStore();
+    const { setResourceManagementId } = useResourceManagementId();
 
 
 
@@ -26,7 +28,7 @@ const AssetManagement = () => {
                 if (asset.type === "storageUnit" || asset.type === "human") return;
                 if (!grouped[asset.modelName]) {
                     grouped[asset.modelName] = {
-                        id: asset.assetId,
+                        id: asset.modelUuid,
                         name: asset.modelName,
                         model: asset.modelCode || "N/A",
                         status: asset.status || "Online",
@@ -47,7 +49,7 @@ const AssetManagement = () => {
     }, [selectedProduct]);
 
     function handleRenameAsset(newName: string) {
-        // console.log('newName: ', newName);
+        // 
         // if (expandedAssetId) {
         //     setAssets(prevAssets =>
         //         prevAssets.map(asset =>
@@ -62,6 +64,12 @@ const AssetManagement = () => {
 
     }, [assets]);
 
+    function handleAssetClick(id: string) {
+        
+        
+        setResourceManagementId(id);
+    }
+
     // const dummyAssets = [
     //     {
     //         id: '1',
@@ -122,15 +130,13 @@ const AssetManagement = () => {
                                     <div className="icon"><ForkLiftIcon /></div>
                                 }
                                 <div className="asset-details-container">
-                                    <div className="asset-details">
+                                    <div className="asset-details" >
                                         {/* <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">
@@ -163,7 +169,7 @@ const AssetManagement = () => {
 
                                 <div className="asset-estimate__view-button" onClick={() => setExpandedAssetId(null)}>
                                     <EyeIcon isClosed={false} />
-                                    <div className="asset-estimate__view-text">View in Scene</div>
+                                    <div className="asset-estimate__view-text" onClick={() => handleAssetClick(asset.id)}>View in Scene</div>
                                 </div>
                             </div>
 

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

@@ -57,6 +57,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { zoneStore } = useSceneContext();
   const { zones, setZoneName } = zoneStore();
 
+
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
       zoneName: "",
@@ -121,6 +122,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   }
 
   function handleAssetClick(asset: Asset) {
+    
     setZoneAssetId(asset);
   }
 
@@ -157,8 +159,9 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
         modelUuid: zoneAssetId.id,
         modelName: newName,
         projectId,
+        versionId: selectedVersion?.versionId || ''
+        
       });
-      // console.log("response: ", response);
 
       setName(zoneAssetId.id, response.modelName);
     }
@@ -255,8 +258,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                 }}
               >
                 <div
-                  className={`list-item ${
+                  className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""
-                    selectedZone.zoneUuid === item.id ? "active" : ""
                     }`}
                 >
                   <div className="zone-header">
@@ -301,8 +303,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                     {item.assets.map((asset) => (
                       <li
                         key={`asset-${asset.id}`}
-                        className={`list-container asset-item ${
+                        className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""
-                          zoneAssetId?.id === asset.id ? "active" : ""
                           }`}
                         onClick={() => handleAssetClick(asset)}
                       >

app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts

@@ -3,7 +3,7 @@ import { CameraControls } from '@react-three/drei';
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { useCallback, useEffect, useRef } from 'react';
 
-import { useActiveTool, useDeletableFloorItem, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
+import { useActiveTool, useDeletableFloorItem, useResourceManagementId, useSelectedFloorItem, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
 import useModuleStore, { useSubModuleStore } from '../../../../../../store/useModuleStore';
 import { useSocketStore } from '../../../../../../store/builder/store';
 import { useSceneContext } from '../../../../../scene/sceneContext';
@@ -36,6 +36,7 @@ export function useModelEventHandlers({
     const { push3D } = undoRedo3DStore();
     const { getAssetById, removeAsset } = assetStore();
     const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
+    const { resourceManagementId, setResourceManagementId } = useResourceManagementId();
     const { removeEvent, getEventByModelUuid } = eventStore();
     const { getIsEventInProduct, addPoint, deleteEvent } = productStore();
     const { setSelectedAsset, clearSelectedAsset } = useSelectedAsset();
@@ -74,7 +75,17 @@ export function useModelEventHandlers({
         if (zoneAssetId.id === asset.modelUuid) {
             handleDblClick(asset);
         }
+
     }, [zoneAssetId])
+    useEffect(() => {
+        if (!resourceManagementId) return
+        if (resourceManagementId === asset.modelUuid) {
+            
+            
+            handleDblClick(asset);
+        }
+
+    }, [resourceManagementId])
 
     useEffect(() => {
         if (!selectedFloorItem) {
@@ -83,10 +94,8 @@ export function useModelEventHandlers({
     }, [selectedFloorItem])
 
     const handleDblClick = (asset: Asset) => {
-        if (asset && activeTool === "cursor" && boundingBox && groupRef.current && activeModule === 'builder') {
+        if (asset && activeTool === "cursor" && boundingBox && groupRef.current && (activeModule === 'builder' || (activeModule === 'simulation' && resourceManagementId))) {
-
             const frontView = false;
-
             if (frontView) {
                 const size = boundingBox.getSize(new THREE.Vector3());
                 const center = boundingBox.getCenter(new THREE.Vector3());
@@ -107,6 +116,7 @@ export function useModelEventHandlers({
                     paddingBottom: 5,
                     paddingRight: 5,
                 });
+
             } else {
 
                 const collisionPos = new THREE.Vector3();
@@ -127,6 +137,7 @@ export function useModelEventHandlers({
             }
 
             setSelectedFloorItem(groupRef.current);
+            setResourceManagementId("");
         }
     };
 

app/src/store/builder/store.ts

@@ -436,6 +436,16 @@ export const useZoneAssetId = create<ZoneAssetState>((set) => ({
     setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
 }));
 
+interface ResourceManagementState {
+    resourceManagementId: string;
+    setResourceManagementId: (id: string) => void;
+}
+
+export const useResourceManagementId = create<ResourceManagementState>((set) => ({
+    resourceManagementId: "", // default value
+    setResourceManagementId: (id: string) => set({ resourceManagementId: id }),
+}));
+
 // version visible hidden
 interface VersionHistoryState {
     viewVersionHistory: boolean;