119 lines
4.4 KiB
JavaScript
119 lines
4.4 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
|
|
import { useChangePassword } from "../../components/Context/ChangePasswordContext";
|
|
import GlobalModel from "../common/GlobalModel";
|
|
import ManageEmployee from "./ManageEmployee";
|
|
|
|
const EmpBanner = ({ profile, loggedInUser }) => {
|
|
const { openChangePassword } = useChangePassword();
|
|
const [showModal, setShowModal] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
{showModal && (
|
|
<GlobalModel
|
|
size="lg"
|
|
isOpen={showModal}
|
|
closeModal={() => setShowModal(false)}
|
|
>
|
|
<ManageEmployee
|
|
employeeId={profile.id}
|
|
onClosed={() => setShowModal(false)}
|
|
/>
|
|
</GlobalModel>
|
|
)}
|
|
<div className="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-8">
|
|
<div className="flex-shrink-0 mt-1 mx-sm-0 mx-auto">
|
|
{profile?.gender?.toLowerCase() == "male" && (
|
|
<img
|
|
width={125}
|
|
src="../../assets/img/avatars/avatar_m_01.png"
|
|
alt="user image"
|
|
className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
|
|
/>
|
|
)}
|
|
{profile?.gender?.toLowerCase() == "female" && (
|
|
<img
|
|
width={125}
|
|
src="../../assets/img/avatars/avatar_f_02.png"
|
|
alt="user image"
|
|
className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className="flex-grow-1 mt-1 mt-lg-1">
|
|
<div className="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
|
|
<div className="user-profile-info">
|
|
<h4 className="mb-2">
|
|
<span>{profile?.firstName}</span>
|
|
{profile?.middleName ? (
|
|
<span className="ms-1">{profile?.middleName}</span>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{profile?.lastName ? (
|
|
<span className="ms-1">{profile?.lastName}</span>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</h4>
|
|
<ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 mt-4">
|
|
<li className="list-inline-item">
|
|
<i className="icon-base bx bx-crown me-1 align-top"></i>
|
|
<span className="fw-medium">
|
|
{profile?.jobRole || <em>NA</em>}
|
|
</span>
|
|
</li>
|
|
<li className="list-inline-item">
|
|
<i className="icon-base bx bx-phone me-0 align-top"></i>
|
|
<span className="fw-medium">
|
|
{" "}
|
|
{profile?.phoneNumber || <em>NA</em>}
|
|
</span>
|
|
</li>
|
|
<li className="list-inline-item">
|
|
<i className="icon-base bx bx-calendar me-0 align-top"></i>
|
|
<span className="fw-medium">
|
|
{" "}
|
|
Joined on{" "}
|
|
{profile?.joiningDate ? (
|
|
new Date(profile.joiningDate).toLocaleDateString()
|
|
) : (
|
|
<em>NA</em>
|
|
)}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
<ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center mt-4">
|
|
{profile?.isActive && ( // ✅ show only if active
|
|
<li className="list-inline-item">
|
|
<button
|
|
className="btn btn-sm btn-primary btn-block"
|
|
onClick={() => setShowModal(true)}
|
|
>
|
|
Edit Profile
|
|
</button>
|
|
</li>
|
|
)}
|
|
|
|
<li className="list-inline-item">
|
|
{profile?.id === loggedInUser?.employeeInfo?.id && (
|
|
<button
|
|
className="btn btn-sm btn-outline-primary btn-block"
|
|
onClick={() => openChangePassword()}
|
|
>
|
|
Change Password
|
|
</button>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EmpBanner;
|