Added Document Managment feature #388
@ -9,80 +9,105 @@ const EmpOverview = ({ profile }) => {
|
||||
<div className="col-12 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
|
||||
{/* About Heading */}
|
||||
<small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3">
|
||||
About
|
||||
</small>
|
||||
|
||||
{/* Full Name */}
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<span className="d-flex">
|
||||
<i className="bx bx-user bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-3">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-user bx-xs me-2"></i>
|
||||
<span>Full Name</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "74px" }}>:</span>
|
||||
<span className="ms-5">
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-start text-break">
|
||||
{profile?.firstName || <em>NA</em>} {profile?.lastName || ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status */}
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<span className="d-flex">
|
||||
<i className="bx bx-check bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-3">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-check bx-xs me-2"></i>
|
||||
<span>Status</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "96px" }}>:</span>
|
||||
<span className="ms-5">Active</span>
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-start">Active</div>
|
||||
</div>
|
||||
|
||||
{/* Role */}
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<span className="d-flex">
|
||||
<i className="bx bx-crown bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-3">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-crown bx-xs me-2"></i>
|
||||
<span>Role</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "110px" }}>:</span>
|
||||
<span className="ms-5">{profile?.jobRole || <em>NA</em>}</span>
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-break text-start">
|
||||
{profile?.jobRole || <em>NA</em>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gender */}
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<span className="d-flex">
|
||||
<i className="bx bx-flag bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-3">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-flag bx-xs me-2"></i>
|
||||
<span>Gender</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "91px" }}>:</span>
|
||||
<span className="ms-5">{profile?.gender || <em>NA</em>}</span>
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-start">
|
||||
{profile?.gender || <em>NA</em>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Birth Date */}
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<span className="d-flex">
|
||||
<i className="bx bx-calendar bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-3">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-calendar bx-xs me-2"></i>
|
||||
<span>Birth Date</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "74px" }}>:</span>
|
||||
<span className="ms-5">
|
||||
{profile?.birthDate
|
||||
? new Date(profile.birthDate).toLocaleDateString()
|
||||
: <em>NA</em>}
|
||||
</span>
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-start">
|
||||
{profile?.birthDate ? (
|
||||
new Date(profile.birthDate).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Joining Date */}
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<span className="d-flex">
|
||||
<i className="bx bx-calendar bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-3">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-calendar bx-xs me-2"></i>
|
||||
<span>Joining Date</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "60px" }}>:</span>
|
||||
<span className="ms-5">
|
||||
{profile?.joiningDate
|
||||
? new Date(profile.joiningDate).toLocaleDateString()
|
||||
: <em>NA</em>}
|
||||
</span>
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-start">
|
||||
{profile?.joiningDate ? (
|
||||
new Date(profile.joiningDate).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contacts Heading */}
|
||||
@ -91,68 +116,83 @@ const EmpOverview = ({ profile }) => {
|
||||
</small>
|
||||
|
||||
{/* Contact Number */}
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<span className="d-flex">
|
||||
<i className="bx bx-phone bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-3">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-phone bx-xs me-2"></i>
|
||||
<span>Contact</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "87px" }}>:</span>
|
||||
<span className="ms-5">{profile?.phoneNumber || <em>NA</em>}</span>
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-start">
|
||||
{profile?.phoneNumber || <em>NA</em>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<span className="d-flex" style={{ minWidth: "160px", whiteSpace: "nowrap" }}>
|
||||
<i className="bx bx-envelope bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-3">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-envelope bx-xs me-2"></i>
|
||||
<span>Email</span>
|
||||
</span>
|
||||
<span className="me-5">:</span>
|
||||
<span>
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-break text-start">
|
||||
{profile?.email ? (
|
||||
<a href={`mailto:${profile.email}`}>{profile.email}</a>
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Emergency Contact */}
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<span className="d-flex">
|
||||
<i className="bx bx-user bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-3">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-user bx-xs me-2"></i>
|
||||
<span>Emergency Contact</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "14px" }}>:</span>
|
||||
<span className="ms-5">
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-start">
|
||||
{profile?.emergencyContactPerson || <em>NA</em>}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Emergency Phone */}
|
||||
<div className="d-flex align-items-start mb-3">
|
||||
<span className="d-flex">
|
||||
<i className="bx bx-phone bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-3">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-phone bx-xs me-2"></i>
|
||||
<span>Emergency Phone</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "25px" }}>:</span>
|
||||
<span className="ms-5">
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-start">
|
||||
{profile?.emergencyPhoneNumber || <em>NA</em>}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div className="d-flex align-items-start">
|
||||
<span className="d-flex">
|
||||
<i className="bx bx-map bx-xs me-2 mt-1"></i>
|
||||
<div className="d-flex mb-2">
|
||||
<div
|
||||
className="d-flex align-items-center me-2 text-nowrap"
|
||||
style={{ minWidth: "160px" }}
|
||||
>
|
||||
<i className="bx bx-map bx-xs me-2"></i>
|
||||
<span>Address</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "86px" }}>:</span>
|
||||
<span className="ms-5">
|
||||
</div>
|
||||
<div className="me-5">:</div>
|
||||
<div className="flex-grow-1 text-break text-start">
|
||||
{profile?.currentAddress || <em>NA</em>}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user