Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add asset thumbnail fetching and update worker data display in Hrm component

Browse Source
This commit is contained in:
Gomathi
2025-08-26 09:36:09 +05:30
parent 6026c3b82b
commit 6fa4d5323d
2 changed files with 208 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx
View File

@@ -3,6 +3,7 @@ import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/E
import { useSceneContext } from '../../../../../modules/scene/sceneContext'; import { useSceneContext } from '../../../../../modules/scene/sceneContext';
import RenameInput from '../../../../ui/inputs/RenameInput'; import RenameInput from '../../../../ui/inputs/RenameInput';
import { useResourceManagementId } from '../../../../../store/builder/store'; import { useResourceManagementId } from '../../../../../store/builder/store';
import { getAssetThumbnail } from '../../../../../services/factoryBuilder/asset/assets/getAssetThumbnail';
// import NavigateCatagory from '../NavigateCatagory' // import NavigateCatagory from '../NavigateCatagory'
const Hrm = () => { const Hrm = () => {
@@ -12,174 +13,188 @@ const Hrm = () => {
const { assetStore } = useSceneContext(); const { assetStore } = useSceneContext();
const { assets: allAssets } = assetStore(); const { assets: allAssets } = assetStore();
useEffect(() => { async function getAsset(assetId: string) {
if (allAssets.length > 0) { let thumbnail = await getAssetThumbnail(assetId)
const formattedWorkers = allAssets if (thumbnail.thumbnail) {
.filter((worker: any) => worker.eventData.type === "Human") let assetImage = thumbnail.thumbnail
.map((worker: any, index: number) => ({ return assetImage;
employee: { }
image: "", }
name: worker.modelName,
modelId: worker.modelUuid, useEffect(() => {
employee_id: `HR-${204 + index}`, if (allAssets.length > 0) {
status: "Active", const fetchWorkers = async () => {
}, const humans = allAssets.filter((worker: any) => worker.eventData.type === "Human");
task: {
status: "Ongoing", const formattedWorkers = await Promise.all(
title: worker.taskTitle ?? "No Task Assigned", humans.map(async (worker: any, index: number) => {
location: { const assetImage = await getAsset(worker.assetId);
floor: worker.floor ?? 0,
zone: worker.zone ?? "N/A" return {
employee: {
image: assetImage,
name: worker.modelName,
modelId: worker.modelUuid,
employee_id: `HR-${204 + index}`,
status: "Active",
}, },
planned_time_hours: worker.plannedTime ?? 0, task: {
time_spent_hours: worker.timeSpent ?? 0, status: "Ongoing",
total_tasks: worker.totalTasks ?? 0, title: worker.taskTitle ?? "No Task Assigned",
completed_tasks: worker.completedTasks ?? 0 location: {
}, floor: worker.floor ?? 0,
actions: [ zone: worker.zone ?? "N/A",
"Assign Task", },
"Reassign Task", planned_time_hours: worker.plannedTime ?? 0,
"Pause", time_spent_hours: worker.timeSpent ?? 0,
"Emergency Stop" total_tasks: worker.totalTasks ?? 0,
], completed_tasks: worker.completedTasks ?? 0,
location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}` },
})); actions: ["Assign Task", "Reassign Task", "Pause", "Emergency Stop"],
location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`,
};
})
);
setWorkers(formattedWorkers); setWorkers(formattedWorkers);
} };
}, [allAssets]);
// 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) {
fetchWorkers();
} }
function handleHumanClick(employee: any) { }, [allAssets]);
if (employee.modelId) {
setResourceManagementId(employee.modelId);
}
// 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) {
}
function handleHumanClick(employee: any) {
if (employee.modelId) {
setResourceManagementId(employee.modelId);
} }
}
return ( return (
<> <>
{/* <NavigateCatagory {/* <NavigateCatagory
category={["All People", "Technician", "Operator", "Supervisor", "Safety Officer"]} category={["All People", "Technician", "Operator", "Supervisor", "Safety Officer"]}
selectedCategory={selectedCategory} selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory} setSelectedCategory={setSelectedCategory}
/> */} /> */}
<div className='hrm-container assetManagement-wrapper'> <div className='hrm-container assetManagement-wrapper'>
{workers.map((employee, index) => ( {workers.map((employee, index) => (
<div <div
className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`} className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
onClick={() => setSelectedCard(index)} onClick={() => setSelectedCard(index)}
key={index} key={index}
> >
<header> <header>
<div className="user-details"> <div className="user-details">
<div className="user-image-wrapper"> <div className="user-image-wrapper">
<img className='user-image' src={employee.employee.image} alt="" /> <img className='user-image' src={employee.employee.image} alt="" />
<div className={`status ${employee.employee.status}`}></div> <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>
<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" onClick={() => { handleHumanClick(employee.employee) }}>View in Scene</div> <div className="see-more" onClick={() => { handleHumanClick(employee.employee) }}>View in Scene</div>
</header> </header>
<div className="content"> <div className="content">
{/* <div className="task-info"> {/* <div className="task-info">
<div className="task-wrapper"> <div className="task-wrapper">
<div className="task-label"> <div className="task-label">
<span className='label-icon'><ListTaskIcon /></span> <span className='label-icon'><ListTaskIcon /></span>
@@ -200,17 +215,17 @@ const Hrm = () => {
</div> </div>
</div> */} </div> */}
<div className="task-stats"> <div className="task-stats">
<div className="stat-item"> <div className="stat-item">
<div className="stat-wrapper"> <div className="stat-wrapper">
<span className="stat-icon"><ClockThreeIcon /></span> <span className="stat-icon"><ClockThreeIcon /></span>
<span>Planned time:</span> <span>Planned time:</span>
</div>
<span className='stat-value'>{employee.task.planned_time_hours} hr</span>
</div> </div>
{/* <div className="stat-item">
<span className='stat-value'>{employee.task.planned_time_hours} hr</span>
</div>
{/* <div className="stat-item">
<div className="stat-wrapper"> <div className="stat-wrapper">
<span className="stat-icon"><SlectedTickIcon /></span> <span className="stat-icon"><SlectedTickIcon /></span>
@@ -228,39 +243,39 @@ const Hrm = () => {
<span className='stat-value'>{employee.task.time_spent_hours} hr</span> <span className='stat-value'>{employee.task.time_spent_hours} hr</span>
</div> */} </div> */}
<div className="stat-item"> <div className="stat-item">
<div className="stat-wrapper"> <div className="stat-wrapper">
<span className="stat-icon"><TargetIcon /></span> <span className="stat-icon"><TargetIcon /></span>
<span>Cost per hr:</span> <span>Cost per hr:</span>
</div>
<span className='stat-value'>{employee.task.completed_tasks}</span>
</div> </div>
</div>
<div className="location-wrapper"> <span className='stat-value'>{employee.task.completed_tasks}</span>
<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>
<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> </div>
</> ))}
) </div>
</>
)
} }
export default Hrm export default Hrm

6
app/src/styles/layout/resourceManagement.scss
View File

@@ -117,6 +117,12 @@
border-radius: 50%; border-radius: 50%;
background-color: #fff; background-color: #fff;
position: relative; position: relative;
overflow: hidden;
.user-image{
height: 300%;
width: 300%;
transform: translate(-26px, -12px);
}
.status { .status {
border-radius: 50%; border-radius: 50%;