272 lines
11 KiB
TypeScript
272 lines
11 KiB
TypeScript
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 { productStore } = useSceneContext();
|
|
const { products, getProductById } = productStore();
|
|
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: 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);
|
|
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
{/* <NavigateCatagory
|
|
category={["All People", "Technician", "Operator", "Supervisor", "Safety Officer"]}
|
|
selectedCategory={selectedCategory}
|
|
setSelectedCategory={setSelectedCategory}
|
|
/> */}
|
|
|
|
<div className='hrm-container assetManagement-wrapper'>
|
|
{workers.map((employee, index) => (
|
|
<div
|
|
className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
|
|
onClick={() => setSelectedCard(index)}
|
|
key={index}
|
|
>
|
|
<header>
|
|
<div className="user-details">
|
|
<div className="user-image-wrapper">
|
|
<img className='user-image' src={employee.employee.image} alt="" />
|
|
<div className={`status ${employee.employee.status}`}></div>
|
|
</div>
|
|
<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>
|
|
</header>
|
|
|
|
<div className="content">
|
|
{/* <div className="task-info">
|
|
<div className="task-wrapper">
|
|
<div className="task-label">
|
|
<span className='label-icon'><ListTaskIcon /></span>
|
|
<span className='label-text'>Ongoing Task:</span>
|
|
</div>
|
|
<div className="task-title">{employee.task.title}</div>
|
|
</div>
|
|
|
|
|
|
<div className="task-wrapper">
|
|
<div className="task-label">
|
|
<span className='label-icon'><LocationPinIcon /></span>
|
|
<span className='label-text'>Location:</span>
|
|
</div>
|
|
<div className="task-title">
|
|
Floor {employee.task.location.floor}. Zone {employee.task.location.zone}
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
|
|
<div className="task-stats">
|
|
<div className="stat-item">
|
|
|
|
<div className="stat-wrapper">
|
|
<span className="stat-icon"><ClockThreeIcon /></span>
|
|
<span>Planned time:</span>
|
|
</div>
|
|
|
|
<span className='stat-value'>{employee.task.planned_time_hours} hr</span>
|
|
</div>
|
|
{/* <div className="stat-item">
|
|
|
|
<div className="stat-wrapper">
|
|
<span className="stat-icon"><SlectedTickIcon /></span>
|
|
<span>Total Tasks:</span>
|
|
</div>
|
|
|
|
<span className='stat-value'>{employee.task.total_tasks}</span>
|
|
</div>
|
|
<div className="stat-item">
|
|
|
|
<div className="stat-wrapper">
|
|
<span className="stat-icon"><HourGlassIcon /></span>
|
|
<span>Time Spent:</span>
|
|
</div>
|
|
|
|
<span className='stat-value'>{employee.task.time_spent_hours} hr</span>
|
|
</div> */}
|
|
<div className="stat-item">
|
|
|
|
<div className="stat-wrapper">
|
|
<span className="stat-icon"><TargetIcon /></span>
|
|
<span>Cost per hr:</span>
|
|
</div>
|
|
|
|
<span className='stat-value'>{employee.task.completed_tasks}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="location-wrapper">
|
|
<div className="location-header">
|
|
<div className="icon">
|
|
<LocationPinIcon />
|
|
</div>
|
|
<div className="header">Location:</div>
|
|
</div>
|
|
<div className="location-value">{employee.location}</div>
|
|
</div>
|
|
<div className="task-actions">
|
|
{/* <button className="btn btn-default">Assign Task</button>
|
|
<button className="btn btn-default">Reassign Task</button> */}
|
|
<button className="btn btn-default">Pause</button>
|
|
<button className="btn btn-danger">Emergency Stop</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Hrm
|