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

feat: Add Resource Management module with HRM and Asset Management features

Browse Source 
- Introduced FilePackageIcon component for resource management.
- Updated MainScene to include resource management functionality.
- Enhanced SideBarRight to support resource management display.
- Created NavigateCategory component for category navigation in resource management.
- Developed ResourceManagement component to switch between HRM and Asset Management views.
- Implemented Hrm component to display employee details and tasks.
- Added AssetManagement component to manage and display asset information.
- Updated useModuleStore to include resourceManagement as a submodule.
- Created resourceManagement.scss for styling the new module.
- Removed hrm.scss as its styles have been integrated into resourceManagement.scss.
- Updated main.scss to import resourceManagement styles instead of hrm.
This commit is contained in:
Nalvazhuthi
2025-08-22 12:44:55 +05:30
parent 31c07e92b4
commit dc873a8c59
15 changed files with 873 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
app/src/components/layout/sidebarRight/resourceManagement/hrm/Hrm.tsx Normal file
View File

@@ -0,0 +1,212 @@
import React, { useState } from 'react'
import Search from '../../../../ui/inputs/Search'
import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
import { ClockThreeIcon, HourGlassIcon, ListTaskIcon, LocationPinIcon, SlectedTickIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
import NavigateCatagory from '../NavigateCatagory'
const Hrm = () => {
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"
}
]
const [selectedCard, setSelectedCard] = useState(0);
console.log('selectedCard: ', selectedCard);
return (
<>
{/* <NavigateCatagory
category={["All People", "Technician", "Operator", "Supervisor", "Safety Officer"]}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
/> */}
<div className='hrm-container assetManagement-wrapper'>
{employee_details.map((employee, index) => (
<div
className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
onClick={() => setSelectedCard(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>
<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