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

human resource management profile ui fix

Browse Source
This commit is contained in:
Vishnu
2025-08-29 17:07:00 +05:30
parent df36ee0366
commit b956ed57e8
2 changed files with 253 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,200 +1,225 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from "react";
import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/ExportCommonIcons' import {
import { useSceneContext } from '../../../../../modules/scene/sceneContext'; ClockThreeIcon,
import RenameInput from '../../../../ui/inputs/RenameInput'; LocationPinIcon,
import { useResourceManagementId } from '../../../../../store/builder/store'; TargetIcon,
import { getAssetThumbnail } from '../../../../../services/factoryBuilder/asset/assets/getAssetThumbnail'; } from "../../../../icons/ExportCommonIcons";
import { useSceneContext } from "../../../../../modules/scene/sceneContext";
import RenameInput from "../../../../ui/inputs/RenameInput";
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 = () => {
const [selectedCard, setSelectedCard] = useState(0); const [selectedCard, setSelectedCard] = useState(0);
const [workers, setWorkers] = useState<any[]>([]); const [workers, setWorkers] = useState<any[]>([]);
const { setResourceManagementId } = useResourceManagementId(); const { setResourceManagementId } = useResourceManagementId();
const { assetStore } = useSceneContext(); const { assetStore } = useSceneContext();
const { assets: allAssets } = assetStore(); const { assets: allAssets } = assetStore();
async function getAsset(assetId: string) { async function getAsset(assetId: string) {
let thumbnail = await getAssetThumbnail(assetId) let thumbnail = await getAssetThumbnail(assetId);
if (thumbnail.thumbnail) { if (thumbnail.thumbnail) {
let assetImage = thumbnail.thumbnail let assetImage = thumbnail.thumbnail;
return assetImage; return assetImage;
}
} }
}
useEffect(() => { useEffect(() => {
if (allAssets.length > 0) { if (allAssets.length > 0) {
const fetchWorkers = async () => { const fetchWorkers = async () => {
const humans = allAssets.filter((worker: any) => worker.eventData.type === "Human"); const humans = allAssets.filter(
(worker: any) => worker.eventData.type === "Human"
);
const formattedWorkers = await Promise.all( const formattedWorkers = await Promise.all(
humans.map(async (worker: any, index: number) => { humans.map(async (worker: any, index: number) => {
const assetImage = await getAsset(worker.assetId); const assetImage = await getAsset(worker.assetId);
return { return {
employee: { employee: {
image: assetImage, image: assetImage,
name: worker.modelName, name: worker.modelName,
modelId: worker.modelUuid, modelId: worker.modelUuid,
employee_id: `HR-${204 + index}`, employee_id: `HR-${204 + index}`,
status: "Active", status: "Active",
}, },
task: { task: {
status: "Ongoing", status: "Ongoing",
title: worker.taskTitle ?? "No Task Assigned", title: worker.taskTitle ?? "No Task Assigned",
location: { location: {
floor: worker.floor ?? 0, floor: worker.floor ?? 0,
zone: worker.zone ?? "N/A", zone: worker.zone ?? "N/A",
}, },
planned_time_hours: worker.plannedTime ?? 0, planned_time_hours: worker.plannedTime ?? 0,
time_spent_hours: worker.timeSpent ?? 0, time_spent_hours: worker.timeSpent ?? 0,
total_tasks: worker.totalTasks ?? 0, total_tasks: worker.totalTasks ?? 0,
completed_tasks: worker.completedTasks ?? 0, completed_tasks: worker.completedTasks ?? 0,
}, },
actions: ["Assign Task", "Reassign Task", "Pause", "Emergency Stop"], actions: [
location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`, "Assign Task",
}; "Reassign Task",
}) "Pause",
); "Emergency Stop",
],
location: `Floor ${worker.floor || "-"} . Zone ${
worker.zone || "-"
}`,
};
})
);
setWorkers(formattedWorkers); setWorkers(formattedWorkers);
}; };
fetchWorkers(); fetchWorkers();
} }
}, [allAssets]); }, [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",
// const employee_details = [ // },
// { // "task": {
// "employee": { // "status": "Ongoing",
// image: "", // "title": "Calibrating Sensor Y",
// "name": "John Doe", // "location": {
// "employee_id": "HR-204", // "floor": 2,
// "status": "Active", // "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": { // "task": {
// "status": "Ongoing", // "status": "Ongoing",
// "title": "Inspecting Machine X", // "title": "Testing Conveyor Belt Z",
// "location": { // "location": {
// "floor": 4, // "floor": 5,
// "zone": "B" // "zone": "C"
// }, // },
// "planned_time_hours": 6, // "planned_time_hours": 5,
// "time_spent_hours": 2, // "time_spent_hours": 3,
// "total_tasks": 12, // "total_tasks": 8,
// "completed_tasks": 3 // "completed_tasks": 5
// }, // },
// "actions": [ // "actions": [
// "Assign Task", // "Assign Task",
// "Reassign Task", // "Reassign Task",
// "Pause", // "Pause",
// "Emergency Stop" // "Emergency Stop"
// ], // ],
// "location": "Floor 4 . Zone B" // "location": "Floor 4 . Zone B"
// }, // },
// { // ]
// "employee": { function handleRenameWorker(newName: string) {}
// image: "", function handleHumanClick(employee: any) {
// "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) { if (employee.modelId) {
setResourceManagementId(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 ${
onClick={() => setSelectedCard(index)} selectedCard === index ? "active" : ""
key={index} }`}
> onClick={() => setSelectedCard(index)}
<header> key={index}
<div className="user-details"> >
<div className="user-image-wrapper"> <header>
<img className='user-image' src={employee.employee.image} alt="" /> <div className="user-details">
<div className={`status ${employee.employee.status}`}></div> <div className="user-image-wrapper">
</div> <img
<div className="details" > className="user-image"
{/* <div className="employee-name">{employee.employee.name}</div> */} src={employee.employee.image}
<RenameInput value={employee.employee.name} onRename={handleRenameWorker} /> alt=""
<div className="employee-id">{employee.employee.employee_id}</div> />
</div> <div className={`status ${employee.employee.status}`}></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
</header> className="see-more"
onClick={() => {
handleHumanClick(employee.employee);
}}
>
View in Scene
</div>
</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>
@@ -215,17 +240,20 @@ return (
</div> </div>
</div> */} </div> */}
<div className="task-stats"> <div className="task-stats">
<div className="stat-item"> <div className="stat-item">
<div className="stat-wrapper">
<span className="stat-icon">
<ClockThreeIcon />
</span>
<span>Planned time:</span>
</div>
<div className="stat-wrapper"> <span className="stat-value">
<span className="stat-icon"><ClockThreeIcon /></span> {employee.task.planned_time_hours} hr
<span>Planned time:</span> </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>
@@ -243,39 +271,41 @@ return (
<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">
<span className="stat-icon"><TargetIcon /></span> <TargetIcon />
<span>Cost per hr:</span> </span>
</div> <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>
<span className="stat-value">
{employee.task.completed_tasks}
</span>
</div> </div>
))} </div>
</div>
</>
)
}
export default Hrm <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;

21
app/src/styles/layout/_resourceManagement.scss
View File

@@ -114,35 +114,34 @@
.user-image-wrapper { .user-image-wrapper {
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 50%;
background-color: #fff;
position: relative; position: relative;
overflow: hidden; .user-image {
.user-image{ height: 100%;
height: 300%; width: 100%;
width: 300%; border-radius: 50%;
transform: translate(-26px, -12px); background-color: #fff;
overflow: hidden;
// transform: translate(-26px, -12px);
} }
.status { .status {
border-radius: 50%; border-radius: 50%;
width: 6px; width: 6px;
height: 6px; height: 6px;
outline: 1px solid #2f2c32; outline: 2px solid var(--background-color-solid);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
&.Active { &.Active {
background-color: #44e5c6; background-color: #1d9419;
} }
} }
} }
.details { .details {
max-width: 144px; max-width: 144px;
.input-value{ .input-value {
max-width: 120px; max-width: 120px;
} }
.employee-id { .employee-id {