human resource management profile ui fix
This commit is contained in:
@@ -1,200 +1,225 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ClockThreeIcon, LocationPinIcon, TargetIcon } 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 { useEffect, useState } from "react";
|
||||
import {
|
||||
ClockThreeIcon,
|
||||
LocationPinIcon,
|
||||
TargetIcon,
|
||||
} 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'
|
||||
|
||||
const Hrm = () => {
|
||||
const [selectedCard, setSelectedCard] = useState(0);
|
||||
const [workers, setWorkers] = useState<any[]>([]);
|
||||
const { setResourceManagementId } = useResourceManagementId();
|
||||
const { assetStore } = useSceneContext();
|
||||
const { assets: allAssets } = assetStore();
|
||||
const [selectedCard, setSelectedCard] = useState(0);
|
||||
const [workers, setWorkers] = useState<any[]>([]);
|
||||
const { setResourceManagementId } = useResourceManagementId();
|
||||
const { assetStore } = useSceneContext();
|
||||
const { assets: allAssets } = assetStore();
|
||||
|
||||
async function getAsset(assetId: string) {
|
||||
let thumbnail = await getAssetThumbnail(assetId)
|
||||
if (thumbnail.thumbnail) {
|
||||
let assetImage = thumbnail.thumbnail
|
||||
return assetImage;
|
||||
}
|
||||
async function getAsset(assetId: string) {
|
||||
let thumbnail = await getAssetThumbnail(assetId);
|
||||
if (thumbnail.thumbnail) {
|
||||
let assetImage = thumbnail.thumbnail;
|
||||
return assetImage;
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
if (allAssets.length > 0) {
|
||||
const fetchWorkers = async () => {
|
||||
const humans = allAssets.filter((worker: any) => worker.eventData.type === "Human");
|
||||
const fetchWorkers = async () => {
|
||||
const humans = allAssets.filter(
|
||||
(worker: any) => worker.eventData.type === "Human"
|
||||
);
|
||||
|
||||
const formattedWorkers = await Promise.all(
|
||||
humans.map(async (worker: any, index: number) => {
|
||||
const assetImage = await getAsset(worker.assetId);
|
||||
const formattedWorkers = await Promise.all(
|
||||
humans.map(async (worker: any, index: number) => {
|
||||
const assetImage = await getAsset(worker.assetId);
|
||||
|
||||
return {
|
||||
employee: {
|
||||
image: assetImage,
|
||||
name: worker.modelName,
|
||||
modelId: worker.modelUuid,
|
||||
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 || "-"}`,
|
||||
};
|
||||
})
|
||||
);
|
||||
return {
|
||||
employee: {
|
||||
image: assetImage,
|
||||
name: worker.modelName,
|
||||
modelId: worker.modelUuid,
|
||||
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);
|
||||
};
|
||||
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 = [
|
||||
// {
|
||||
// "employee": {
|
||||
// image: "",
|
||||
// "name": "John Doe",
|
||||
// "employee_id": "HR-204",
|
||||
// "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": "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) {
|
||||
// },
|
||||
// "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);
|
||||
setResourceManagementId(employee.modelId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
return (
|
||||
<>
|
||||
{/* <NavigateCatagory
|
||||
{/* <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="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" onClick={() => { handleHumanClick(employee.employee) }}>View in Scene</div>
|
||||
</header>
|
||||
<div
|
||||
className="see-more"
|
||||
onClick={() => {
|
||||
handleHumanClick(employee.employee);
|
||||
}}
|
||||
>
|
||||
View in Scene
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="content">
|
||||
{/* <div className="task-info">
|
||||
<div className="content">
|
||||
{/* <div className="task-info">
|
||||
<div className="task-wrapper">
|
||||
<div className="task-label">
|
||||
<span className='label-icon'><ListTaskIcon /></span>
|
||||
@@ -215,17 +240,20 @@ return (
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="task-stats">
|
||||
<div className="stat-item">
|
||||
<div className="task-stats">
|
||||
<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-icon"><ClockThreeIcon /></span>
|
||||
<span>Planned time:</span>
|
||||
</div>
|
||||
|
||||
<span className='stat-value'>{employee.task.planned_time_hours} hr</span>
|
||||
</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">
|
||||
<span className="stat-icon"><SlectedTickIcon /></span>
|
||||
@@ -243,39 +271,41 @@ return (
|
||||
|
||||
<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 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>
|
||||
|
||||
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;
|
||||
|
||||
@@ -114,35 +114,34 @@
|
||||
.user-image-wrapper {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.user-image{
|
||||
height: 300%;
|
||||
width: 300%;
|
||||
transform: translate(-26px, -12px);
|
||||
.user-image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
// transform: translate(-26px, -12px);
|
||||
}
|
||||
|
||||
.status {
|
||||
border-radius: 50%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
outline: 1px solid #2f2c32;
|
||||
|
||||
outline: 2px solid var(--background-color-solid);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
||||
&.Active {
|
||||
background-color: #44e5c6;
|
||||
background-color: #1d9419;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
max-width: 144px;
|
||||
.input-value{
|
||||
.input-value {
|
||||
max-width: 120px;
|
||||
}
|
||||
.employee-id {
|
||||
|
||||
Reference in New Issue
Block a user