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