From 6aeef163d2359c060592d0096a6f2ed6c063bf3f Mon Sep 17 00:00:00 2001
From: Gomathi9520 <gomathi@hexrfactory.com>
Date: Mon, 25 Aug 2025 17:05:24 +0530
Subject: [PATCH] feat: implement resource management ID handling in Hrm and
 AssetManagement components

---
 .../resourceManagement/hrm/Hrm.tsx            | 17 +++++++++---
 .../hrm/assetManagement/AssetManagement.tsx   | 26 ++++++++++++-------
 app/src/components/ui/list/List.tsx           | 15 ++++++-----
 .../model/eventHandlers/useEventHandlers.ts   | 19 +++++++++++---
 app/src/store/builder/store.ts                | 10 +++++++
 5 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
index 369c04f..99828ae 100644
--- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
+++ b/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">
diff --git a/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx
index 2cfe731..463afe1 100644
--- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx
+++ b/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',
@@ -105,10 +113,10 @@ const AssetManagement = () => {
     return (
         <>
             {/* <NavigateCatagory
-                category={["All Assets", "Machines", "Workstation", "Vehicles"]}
-                selectedCategory={selectedCategory}
-                setSelectedCategory={setSelectedCategory}
-            /> */}
+                    category={["All Assets", "Machines", "Workstation", "Vehicles"]}
+                    selectedCategory={selectedCategory}
+                    setSelectedCategory={setSelectedCategory}
+                /> */}
 
             <div className='assetManagement-container assetManagement-wrapper'>
                 {assets.map((asset, index) => (
@@ -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>
 
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx
index 6792fa4..8f38189 100644
--- a/app/src/components/ui/list/List.tsx
+++ b/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,9 +258,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                 }}
               >
                 <div
-                  className={`list-item ${
-                    selectedZone.zoneUuid === item.id ? "active" : ""
-                  }`}
+                  className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""
+                    }`}
                 >
                   <div className="zone-header">
                     <button className="value" id="zone-name">
@@ -301,9 +303,8 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                     {item.assets.map((asset) => (
                       <li
                         key={`asset-${asset.id}`}
-                        className={`list-container asset-item ${
-                          zoneAssetId?.id === asset.id ? "active" : ""
-                        }`}
+                        className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""
+                          }`}
                         onClick={() => handleAssetClick(asset)}
                       >
                         <div className="list-item">
diff --git a/app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts b/app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts
index 5c02a2c..360c513 100644
--- a/app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts
+++ b/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("");
         }
     };
 
diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts
index bd84d59..0fadaf3 100644
--- a/app/src/store/builder/store.ts
+++ b/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;