From fad9c74730190f1629c4c79a0bb568e3ac183a68 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Mon, 25 Aug 2025 10:28:11 +0530 Subject: [PATCH] refactor: update navigation path and enhance asset/worker management components --- app/src/components/Dashboard/SidePannel.tsx | 2 +- .../resourceManagement/ResourceManagement.tsx | 8 - .../resourceManagement/hrm/Hrm.tsx | 233 +++++++++++------- .../hrm/assetManagement/AssetManagement.tsx | 145 ++++++++--- 4 files changed, 252 insertions(+), 136 deletions(-) diff --git a/app/src/components/Dashboard/SidePannel.tsx b/app/src/components/Dashboard/SidePannel.tsx index 89ce5ea..f38f0bc 100644 --- a/app/src/components/Dashboard/SidePannel.tsx +++ b/app/src/components/Dashboard/SidePannel.tsx @@ -64,7 +64,7 @@ const SidePannel: React.FC = ({ setActiveTab, activeTab }) => { const handleResponse = (data: any) => { if (data.message === "Project created successfully") { setLoadingProgress(1) - navigate(`/${data.data.projectId}`); + navigate(`/projects/${data.data.projectId}`); } projectSocket.off("v1-project:response:add", handleResponse); // Clean up }; diff --git a/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx b/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx index 3b0df8a..e5c0442 100644 --- a/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx +++ b/app/src/components/layout/sidebarRight/resourceManagement/ResourceManagement.tsx @@ -30,14 +30,6 @@ const ResourceManagement = () => {
{ }} /> -
- { }} - search={false} - /> -
{selectType === "assetManagement" ? : } diff --git a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx b/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx index 2aeacc2..369c04f 100644 --- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx +++ b/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([]); - const employee_details = [ - { - "employee": { - image: "", - "name": "John Doe", - "employee_id": "HR-204", - "status": "Active", + const { productStore } = useSceneContext(); + const { products, getProductById } = productStore(); + const { selectedProductStore } = useProductContext(); + const { selectedProduct } = selectedProductStore(); - }, - "task": { - "status": "Ongoing", - "title": "Inspecting Machine X", - "location": { - "floor": 4, - "zone": "B" - }, - "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", + useEffect(() => { + if (selectedProduct) { + const productDetails = getProductById(selectedProduct.productUuid); + const workerDetails = productDetails?.eventDatas || []; - }, - "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", + const formattedWorkers = workerDetails + .filter((worker: any) => worker.type === "human") + .map((worker: any, index: number) => ({ + employee: { + image: "", + name: worker.modelName, + employee_id: `HR-${204 + index}`, + status: "Active", + }, + task: { + status: "Ongoing", + title: worker.taskTitle || "No Task Assigned", + location: { + floor: worker.floor || 0, + zone: worker.zone || "N/A" + }, + planned_time_hours: worker.plannedTime || 0, + time_spent_hours: worker.timeSpent || 0, + total_tasks: worker.totalTasks || 0, + completed_tasks: worker.completedTasks || 0 + }, + actions: [ + "Assign Task", + "Reassign Task", + "Pause", + "Emergency Stop" + ], + location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}` + })); + + setWorkers(formattedWorkers); + } + }, [selectedProduct, getProductById]); + + useEffect(() => { + // console.log("Workers data updated:", workers); + }, [workers]); + + + + + // const employee_details = [ + // { + // "employee": { + // image: "", + // "name": "John Doe", + // "employee_id": "HR-204", + // "status": "Active", + + // }, + // "task": { + // "status": "Ongoing", + // "title": "Inspecting Machine X", + // "location": { + // "floor": 4, + // "zone": "B" + // }, + // "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 = () => { /> */}
- {employee_details.map((employee, index) => ( + {workers.map((employee, index) => (
setSelectedCard(index)} @@ -114,7 +174,8 @@ const Hrm = () => {
-
{employee.employee.name}
+ {/*
{employee.employee.name}
*/} +
{employee.employee.employee_id}
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 4daa7aa..2cfe731 100644 --- a/app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx +++ b/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(null); + const [assets, setAssets] = useState([]); - 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, - }, - ]; + const { productStore } = useSceneContext(); + const { products, getProductById } = productStore(); + const { selectedProductStore } = useProductContext(); + const { selectedProduct } = selectedProductStore(); + + + + useEffect(() => { + if (selectedProduct) { + const productDetails = getProductById(selectedProduct.productUuid); + const productAssets = productDetails?.eventDatas || []; + const grouped: Record = {}; + 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: asset.description || "No description", + cost: asset.cost || 0, + count: 1, + }; + } else { + grouped[asset.modelName].count += 1; + } + }); + + setAssets(Object.values(grouped)); + } + }, [selectedProduct]); + + function handleRenameAsset(newName: string) { + // console.log('newName: ', newName); + // if (expandedAssetId) { + // setAssets(prevAssets => + // prevAssets.map(asset => + // asset.id === expandedAssetId ? { ...asset, name: newName } : asset + // ) + // ); + // } + } + + useEffect(() => { + + + }, [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 = () => { /> */}
- {dummyAssets.map((asset, index) => ( + {assets.map((asset, index) => (
@@ -67,7 +123,14 @@ const AssetManagement = () => { }
-
{asset.name}
+ {/*
{asset.name}
*/} + + {asset.count !== 1 &&
+ x + {asset.count} +
} + +
{asset.model}