UI Enhancement Request – Highlight Key Employee Profile Information
This commit is contained in:
parent
9669e725a4
commit
cbfce2e4e2
@ -20,58 +20,58 @@ const EmpDashboard = ({ profile }) => {
|
|||||||
<div className="col col-sm-6 pt-5">
|
<div className="col col-sm-6 pt-5">
|
||||||
<div className="card ">
|
<div className="card ">
|
||||||
<div className="card-body">
|
<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
|
My Projects
|
||||||
</small>{" "}
|
</small>
|
||||||
<ul className="list-unstyled text-start my-3 py-1">
|
<ul className="list-unstyled text-start my-3 py-1">
|
||||||
{selectedProjectLoding && <span>Loading</span>}
|
{selectedProjectLoding && <span>Loading</span>}
|
||||||
{projectList.map((project) => (
|
{projectList.map((project) => (
|
||||||
<li
|
<li
|
||||||
className="d-flex mb-4 align-items-start flex-wrap"
|
className="d-flex mb-4 align-items-start flex-wrap"
|
||||||
key={project.id}
|
key={project.id}
|
||||||
>
|
>
|
||||||
{/* Project Info */}
|
{/* Project Info */}
|
||||||
<div className="flex-grow-1">
|
<div className="flex-grow-1">
|
||||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
|
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<div className="avatar flex-shrink-0 me-3">
|
<div className="avatar flex-shrink-0 me-3">
|
||||||
<span className="avatar-initial rounded bg-label-primary">
|
<span className="avatar-initial rounded bg-label-primary">
|
||||||
<i className="icon-base bx bx-buildings icon-lg"></i>
|
<i className="icon-base bx bx-buildings icon-lg"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h6 className="mb-0">{project.projectShortName}</h6>
|
<h6 className="mb-0">{project.projectShortName}</h6>
|
||||||
<small className="text-muted">{project.projectName}</small>
|
<small className="text-muted">{project.projectName}</small>
|
||||||
<div className="label-secondary">
|
<div className="label-secondary">
|
||||||
Assigned:{" "}
|
Assigned:{" "}
|
||||||
{project.assignedDate ? (
|
{project.assignedDate ? (
|
||||||
new Date(project.assignedDate).toLocaleDateString()
|
new Date(project.assignedDate).toLocaleDateString()
|
||||||
) : (
|
) : (
|
||||||
<em>NA</em>
|
<em>NA</em>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span className="badge bg-label-secondary">
|
<span className="badge bg-label-secondary">
|
||||||
{project.designation}
|
{project.designation}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Dates */}
|
{/* Dates */}
|
||||||
{project.removedDate && (
|
{project.removedDate && (
|
||||||
<div className="mt-2 d-flex flex-column flex-sm-row justify-content-between">
|
<div className="mt-2 d-flex flex-column flex-sm-row justify-content-between">
|
||||||
<div className="label-secondary">
|
<div className="label-secondary">
|
||||||
Unassigned:{" "}
|
Unassigned:{" "}
|
||||||
{new Date(project.removedDate).toLocaleDateString()}
|
{new Date(project.removedDate).toLocaleDateString()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,109 +1,163 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import Avatar from "../common/Avatar";
|
|
||||||
import { useProfile } from "../../hooks/useProfile";
|
import { useProfile } from "../../hooks/useProfile";
|
||||||
|
|
||||||
const EmpOverview = ({ profile }) => {
|
const EmpOverview = ({ profile }) => {
|
||||||
const { loggedInUserProfile } = useProfile();
|
const { loggedInUserProfile } = useProfile();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="row">
|
||||||
{" "}
|
<div className="col-12 mb-4">
|
||||||
<div className="row">
|
<div className="card">
|
||||||
<div className="col-12 mb-4">
|
<div className="card-body">
|
||||||
<div className="card">
|
|
||||||
<div className="card-body">
|
{/* About Heading */}
|
||||||
<small className="card-text text-uppercase text-body-secondary small">
|
<small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3">
|
||||||
About
|
About
|
||||||
</small>
|
</small>
|
||||||
<ul className="list-unstyled my-3 py-1">
|
|
||||||
<li className="d-flex align-items-center mb-4">
|
{/* Full Name */}
|
||||||
<i className="icon-base bx bx-user"></i>
|
<div className="d-flex align-items-start mb-3">
|
||||||
<span className="fw-medium mx-2">Full Name:</span>{" "}
|
<span className="d-flex">
|
||||||
<span>{`${profile?.firstName} ${profile?.lastName}`}</span>
|
<i className="bx bx-user bx-xs me-2 mt-1"></i>
|
||||||
</li>
|
<span>Full Name</span>
|
||||||
<li className="d-flex align-items-center mb-4">
|
</span>
|
||||||
<i className="icon-base bx bx-check"></i>
|
<span style={{ marginLeft: "74px" }}>:</span>
|
||||||
<span className="fw-medium mx-2">Status:</span>{" "}
|
<span className="ms-5">
|
||||||
<span>Active</span>
|
{profile?.firstName || <em>NA</em>} {profile?.lastName || ""}
|
||||||
</li>
|
</span>
|
||||||
<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>
|
|
||||||
)}
|
|
||||||
</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>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<small className="card-text text-uppercase text-body-secondary small">
|
|
||||||
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:
|
|
||||||
</div>
|
|
||||||
<div className="text-start ms-7">
|
|
||||||
{profile?.currentAddress || <em>NA</em>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
|
||||||
|
{/* 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default EmpOverview;
|
export default EmpOverview;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user