feat: Add Resource Management module with HRM and Asset Management features
- 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
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
category: string[];
|
||||
selectedCategory: string;
|
||||
setSelectedCategory: (cat: string) => void;
|
||||
}
|
||||
|
||||
const NavigateCategory = ({ category, selectedCategory, setSelectedCategory }: Props) => {
|
||||
return (
|
||||
<div className="category-wrapper">
|
||||
{category.map((cat) => (
|
||||
<div
|
||||
key={cat}
|
||||
className={`category ${selectedCategory === cat ? "active" : ''}`}
|
||||
onClick={() => setSelectedCategory(cat)}
|
||||
>
|
||||
{cat}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavigateCategory;
|
||||
@@ -0,0 +1,48 @@
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import Search from '../../../ui/inputs/Search'
|
||||
import RegularDropDown from '../../../ui/inputs/RegularDropDown'
|
||||
import Hrm from './hrm/Hrm'
|
||||
import AssetManagement from './hrm/assetManagement/AssetManagement'
|
||||
|
||||
const ResourceManagement = () => {
|
||||
type DisplayType = "hrm" | "asset";
|
||||
const [selectType, setSelectType] = useState("assetManagement")
|
||||
|
||||
const [display, setDisplay] = useState<DisplayType>("asset");
|
||||
|
||||
return (
|
||||
<div className='resourceManagement-container'>
|
||||
<div className="navigation-wrapper">
|
||||
<div
|
||||
className={`navigation ${selectType === "assetManagement" ? "active" : ""}`}
|
||||
onClick={() => setSelectType("assetManagement")}
|
||||
>
|
||||
Asset Management
|
||||
</div>
|
||||
<div
|
||||
className={`navigation ${selectType === "peopleOperation" ? "active" : ""}`}
|
||||
onClick={() => setSelectType("peopleOperation")}
|
||||
>
|
||||
People Operations
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="search-container">
|
||||
<Search onChange={() => { }} />
|
||||
<div className="select-catagory">
|
||||
<RegularDropDown
|
||||
header={"floor"}
|
||||
options={["floor"]} // Pass layout names as options
|
||||
onSelect={() => { }}
|
||||
search={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectType === "assetManagement" ? <AssetManagement /> : <Hrm />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ResourceManagement
|
||||
@@ -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
|
||||
@@ -0,0 +1,159 @@
|
||||
import React, { useState } from 'react'
|
||||
import NavigateCatagory from '../../NavigateCatagory'
|
||||
import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
|
||||
import assetImage from "../../../../../../assets/image/asset-image.png"
|
||||
const AssetManagement = () => {
|
||||
const [selectedCategory, setSelectedCategory] = useState("All Assets");
|
||||
const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
|
||||
|
||||
const dummyAssets = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Forklift Model X200',
|
||||
model: 'FLK-0025',
|
||||
status: 'Online',
|
||||
usageRate: 89,
|
||||
level: 'Level 1',
|
||||
image: assetImage,
|
||||
description: 'Electric forklift used for moving goods and materials in warehouse operations.',
|
||||
cost: 122000,
|
||||
count: 5,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Warehouse Robot WR-300',
|
||||
model: 'WRB-3001',
|
||||
status: 'Online',
|
||||
usageRate: 76,
|
||||
level: 'Level 2',
|
||||
image: assetImage,
|
||||
description: 'Automated robot for handling packages and inventory in the warehouse.',
|
||||
cost: 85000,
|
||||
count: 3,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Conveyor Belt System CB-150',
|
||||
model: 'CBS-150X',
|
||||
status: 'Online',
|
||||
usageRate: 95,
|
||||
level: 'Level 3',
|
||||
image: assetImage,
|
||||
description: 'High-speed conveyor belt system for efficient material handling.',
|
||||
cost: 45000,
|
||||
count: 2,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <NavigateCatagory
|
||||
category={["All Assets", "Machines", "Workstation", "Vehicles"]}
|
||||
selectedCategory={selectedCategory}
|
||||
setSelectedCategory={setSelectedCategory}
|
||||
/> */}
|
||||
|
||||
<div className='assetManagement-container'>
|
||||
{dummyAssets.map((asset, index) => (
|
||||
<div className={`assetManagement-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`}>
|
||||
<header>
|
||||
<div className="header-wrapper">
|
||||
|
||||
{expandedAssetId === asset.id ?
|
||||
<img className='asset-image' src={asset.image} alt="" />
|
||||
:
|
||||
<div className="icon"><ForkLiftIcon /></div>
|
||||
}
|
||||
<div className="asset-details-container">
|
||||
<div className="asset-details">
|
||||
<div className="asset-name">{asset.name}</div>
|
||||
<div className="asset-model">{asset.model}</div>
|
||||
</div>
|
||||
<div className="asset-status-wrapper">
|
||||
<div className={`indication ${asset.status}`}></div>
|
||||
<div className="status">{asset.status}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{expandedAssetId === asset.id && <div className="description">{asset.description}</div>}
|
||||
</header>
|
||||
|
||||
{expandedAssetId === asset.id ? (
|
||||
<div className="asset-estimate">
|
||||
<div className="asset-estimate__unit-cost">
|
||||
<div className="asset-estimate__label">Cost of Asset</div>
|
||||
<div className="asset-estimate__value">₹ 1,22,000</div>
|
||||
</div>
|
||||
|
||||
<div className="asset-estimate__breakdown">
|
||||
<div className="asset-estimate__in-scene">
|
||||
<div className="asset-estimate__label">In Scene</div>
|
||||
<div className="asset-estimate__value">5 items</div>
|
||||
</div>
|
||||
<div className="asset-estimate__total-cost">
|
||||
<div className="asset-estimate__label">Total Cost</div>
|
||||
<div className="asset-estimate__value">₹ 6,10,000</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="asset-estimate__view-button" onClick={() => setExpandedAssetId(null)}>
|
||||
<EyeIcon isClosed={false} />
|
||||
<div className="asset-estimate__view-text">View in Scene</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
) : (
|
||||
<div className="asset-contents">
|
||||
<div className="asset-wrapper">
|
||||
<div className="key-wrapper">
|
||||
<div className="icon"><RightHalfFillCircleIcon /></div>
|
||||
<div className="key">Usage rate</div>
|
||||
</div>
|
||||
<div className="progress-wrapper">
|
||||
<div className="progress-bar">
|
||||
<div
|
||||
className="filled-value"
|
||||
style={{ width: `${asset.usageRate}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<div className="usage-value">{asset.usageRate}%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="asset-wrapper">
|
||||
<div className="key-wrapper">
|
||||
<div className="icon"><LocationPinIcon /></div>
|
||||
<div className="key">{asset.level}</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="viewMore"
|
||||
onClick={() =>
|
||||
setExpandedAssetId(expandedAssetId === asset.id ? null : asset.id)
|
||||
}
|
||||
>
|
||||
<div className="value">{expandedAssetId === asset.id ? "View Less" : "View More"}</div>
|
||||
<div className="icon"><KebabIcon /></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
))}
|
||||
</div >
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default AssetManagement
|
||||
|
||||
|
||||
Reference in New Issue
Block a user