Dwinzo_Demo/app/src/components/layout/sidebarRight/hrm/Hrm.tsx

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'

const Hrm = () => {
    const [selectType, setSelectType] = useState("assetManagement")
    const [selectcatogory, setSelectCatogary] = useState("All People")
    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"
        }
    ]

    return (
        <div className='hrm-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>

            <div className="catagories-wrapper">
                {["All People", "Technician", "Operator", "Supervisor", "Safety Officer"].map((cat, index) => (
                    <div
                        key={cat}
                        className={`catagory ${selectcatogory === cat ? "active" : ''}`}
                        onClick={() => setSelectCatogary(cat)}
                    >
                        {cat}
                    </div>
                ))}
            </div>

            <div className="analysis-container">
                {employee_details.map((employee, index) => (
                    <div className="analysis-wrapper">
                        <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>Completed Tasks:</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>
        </div>
    )
}

export default Hrm