refactor: update navigation path and enhance asset/worker management components
This commit is contained in:
@@ -64,7 +64,7 @@ const SidePannel: React.FC<SidePannelProps> = ({ 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
|
||||
};
|
||||
|
||||
@@ -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 />}
|
||||
|
||||
@@ -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 = [
|
||||
{
|
||||
"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 = () => {
|
||||
/> */}
|
||||
|
||||
<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>
|
||||
|
||||
@@ -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 = [
|
||||
{
|
||||
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<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: 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 = () => {
|
||||
/> */}
|
||||
|
||||
<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">
|
||||
@@ -67,7 +123,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">
|
||||
|
||||
Reference in New Issue
Block a user