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

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

@@ -1,9 +1,13 @@
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 = () => {
@@ -14,9 +18,9 @@ const Hrm = () => {
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;
} }
} }
@@ -24,7 +28,9 @@ const Hrm = () => {
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) => {
@@ -50,8 +56,15 @@ const Hrm = () => {
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 || "-"
}`,
}; };
}) })
); );
@@ -61,108 +74,102 @@ const Hrm = () => {
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"]}
@@ -170,27 +177,45 @@ return (
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>
<div className="details" > <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} /> <RenameInput
<div className="employee-id">{employee.employee.employee_id}</div> value={employee.employee.name}
onRename={handleRenameWorker}
/>
<div className="employee-id">
{employee.employee.employee_id}
</div>
</div> </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">
@@ -217,13 +242,16 @@ return (
<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> </div>
<span className='stat-value'>{employee.task.planned_time_hours} hr</span> <span className="stat-value">
{employee.task.planned_time_hours} hr
</span>
</div> </div>
{/* <div className="stat-item"> {/* <div className="stat-item">
@@ -244,13 +272,16 @@ 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"><TargetIcon /></span> <span className="stat-icon">
<TargetIcon />
</span>
<span>Cost per hr:</span> <span>Cost per hr:</span>
</div> </div>
<span className='stat-value'>{employee.task.completed_tasks}</span> <span className="stat-value">
{employee.task.completed_tasks}
</span>
</div> </div>
</div> </div>
@@ -263,19 +294,18 @@ return (
</div> </div>
<div className="location-value">{employee.location}</div> <div className="location-value">{employee.location}</div>
</div> </div>
<div className="task-actions"> {/* <div className="task-actions">
{/* <button className="btn btn-default">Assign Task</button> <button className="btn btn-default">Assign Task</button>
<button className="btn btn-default">Reassign Task</button> */} <button className="btn btn-default">Reassign Task</button>
<button className="btn btn-default">Pause</button> <button className="btn btn-default">Pause</button>
<button className="btn btn-danger">Emergency Stop</button> <button className="btn btn-danger">Emergency Stop</button>
</div> */}
</div> </div>
</div> </div>
</div>
))} ))}
</div> </div>
</> </>
) );
} };
export default Hrm export default Hrm;

17
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;
position: relative;
.user-image {
height: 100%;
width: 100%;
border-radius: 50%; border-radius: 50%;
background-color: #fff; background-color: #fff;
position: relative;
overflow: hidden; overflow: hidden;
.user-image{ // transform: translate(-26px, -12px);
height: 300%;
width: 300%;
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 {