UI Enhancement Request – Highlight Key Employee Profile Information
This commit is contained in:
parent
9669e725a4
commit
cbfce2e4e2
@ -20,9 +20,9 @@ const EmpDashboard = ({ profile }) => {
|
||||
<div className="col col-sm-6 pt-5">
|
||||
<div className="card ">
|
||||
<div className="card-body">
|
||||
<small className="card-text text-uppercase text-body-secondary small">
|
||||
<small className="card-text text-uppercase text-body-secondary small text-start d-block">
|
||||
My Projects
|
||||
</small>{" "}
|
||||
</small>
|
||||
<ul className="list-unstyled text-start my-3 py-1">
|
||||
{selectedProjectLoding && <span>Loading</span>}
|
||||
{projectList.map((project) => (
|
||||
@ -71,7 +71,7 @@ const EmpDashboard = ({ profile }) => {
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,109 +1,163 @@
|
||||
import React from "react";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
|
||||
const EmpOverview = ({ profile }) => {
|
||||
const { loggedInUserProfile } = useProfile();
|
||||
|
||||
return (
|
||||
<>
|
||||
{" "}
|
||||
<div className="row">
|
||||
<div className="col-12 mb-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<small className="card-text text-uppercase text-body-secondary small">
|
||||
|
||||
{/* About Heading */}
|
||||
<small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3">
|
||||
About
|
||||
</small>
|
||||
<ul className="list-unstyled my-3 py-1">
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-user"></i>
|
||||
<span className="fw-medium mx-2">Full Name:</span>{" "}
|
||||
<span>{`${profile?.firstName} ${profile?.lastName}`}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-check"></i>
|
||||
<span className="fw-medium mx-2">Status:</span>{" "}
|
||||
<span>Active</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-crown"></i>
|
||||
<span className="fw-medium mx-2">Role:</span>{" "}
|
||||
<span> {profile?.jobRole || <em>NA</em>}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-flag"></i>
|
||||
<span className="fw-medium mx-2">Gender:</span>{" "}
|
||||
<span> {profile?.gender || <em>NA</em>}</span>
|
||||
</li>{" "}
|
||||
<li className="d-flex align-items-center mb-2">
|
||||
<i className="icon-base bx bx-calendar "></i>
|
||||
<span className="fw-medium mx-2">Birth Date:</span>{" "}
|
||||
<span>
|
||||
{profile?.birthDate ? (
|
||||
new Date(profile.birthDate).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
<span>Full Name</span>
|
||||
</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-2">
|
||||
<i className="icon-base bx bx-calendar "></i>
|
||||
<span className="fw-medium mx-2">Joining Date:</span>{" "}
|
||||
<span>
|
||||
{profile?.joiningDate ? (
|
||||
new Date(profile.joiningDate).toLocaleDateString()
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
<span style={{ marginLeft: "74px" }}>:</span>
|
||||
<span className="ms-5">
|
||||
{profile?.firstName || <em>NA</em>} {profile?.lastName || ""}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<small className="card-text text-uppercase text-body-secondary small">
|
||||
</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>
|
||||
<span>Status</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "96px" }}>:</span>
|
||||
<span className="ms-5">Active</span>
|
||||
</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>
|
||||
<span>Role</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "110px" }}>:</span>
|
||||
<span className="ms-5">{profile?.jobRole || <em>NA</em>}</span>
|
||||
</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>
|
||||
<span>Gender</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "91px" }}>:</span>
|
||||
<span className="ms-5">{profile?.gender || <em>NA</em>}</span>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
{/* Contacts Heading */}
|
||||
<small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3 mt-4">
|
||||
Contacts
|
||||
</small>
|
||||
<ul className="list-unstyled my-3 py-1">
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-phone"></i>
|
||||
<span className="fw-medium mx-2">Contact:</span>{" "}
|
||||
<span> {profile?.phoneNumber || <em>NA</em>}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-envelope"></i>
|
||||
<span className="fw-medium mx-2">Email:</span>{" "}
|
||||
<a href={`mailto:${profile?.email}`}>
|
||||
{" "}
|
||||
{profile?.email || <em>NA</em>}
|
||||
</a>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-user"></i>
|
||||
<span className="fw-medium mx-2">
|
||||
{" "}
|
||||
Emergency Contact:
|
||||
</span>{" "}
|
||||
<span> {profile?.emergencyContactPerson || <em>NA</em>}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-4">
|
||||
<i className="icon-base bx bx-phone"></i>
|
||||
<span className="fw-medium mx-2"> Emergency Phone:</span>{" "}
|
||||
<span> {profile?.emergencyPhoneNumber || <em>NA</em>}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center ">
|
||||
<div className="container p-0">
|
||||
<div className="fw-medium text-start">
|
||||
<i className="icon-base bx bx-map "></i> Address:
|
||||
|
||||
{/* 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>
|
||||
<span>Contact</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "87px" }}>:</span>
|
||||
<span className="ms-5">{profile?.phoneNumber || <em>NA</em>}</span>
|
||||
</div>
|
||||
<div className="text-start ms-7">
|
||||
|
||||
{/* 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>
|
||||
<span>Email</span>
|
||||
</span>
|
||||
<span className="me-5">:</span>
|
||||
<span>
|
||||
{profile?.email ? (
|
||||
<a href={`mailto:${profile.email}`}>{profile.email}</a>
|
||||
) : (
|
||||
<em>NA</em>
|
||||
)}
|
||||
</span>
|
||||
</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>
|
||||
<span>Emergency Contact</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "14px" }}>:</span>
|
||||
<span className="ms-5">
|
||||
{profile?.emergencyContactPerson || <em>NA</em>}
|
||||
</span>
|
||||
</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>
|
||||
<span>Emergency Phone</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "25px" }}>:</span>
|
||||
<span className="ms-5">
|
||||
{profile?.emergencyPhoneNumber || <em>NA</em>}
|
||||
</span>
|
||||
</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>
|
||||
<span>Address</span>
|
||||
</span>
|
||||
<span style={{ marginLeft: "86px" }}>:</span>
|
||||
<span className="ms-5">
|
||||
{profile?.currentAddress || <em>NA</em>}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmpOverview;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user