UI changes in Employee Profile and Project Profile.
This commit is contained in:
parent
e485066bd1
commit
d4c4454eb1
@ -58,74 +58,87 @@ const AboutProject = () => {
|
||||
</h6>
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<ul className="list-unstyled my-3 ps-2">
|
||||
<li className="d-flex align-items-center mb-3">
|
||||
<i className="bx bx-cog"></i>
|
||||
<span className="fw-medium mx-2">Name:</span>{" "}
|
||||
<span>{projects_Details.name}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-3">
|
||||
<i className="bx bx-fingerprint"></i>
|
||||
<span className="fw-medium mx-2">Nick Name:</span>{" "}
|
||||
<span> {projects_Details.shortName} </span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-3">
|
||||
<i className="bx bx-check"></i>
|
||||
<span className="fw-medium mx-2">Start Date:</span>{" "}
|
||||
<span>
|
||||
{projects_Details.startDate
|
||||
? moment(projects_Details.startDate).format("DD-MMM-YYYY")
|
||||
: "N/A"}
|
||||
</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-3">
|
||||
<i className="bx bx-stop-circle"></i>{" "}
|
||||
<span className="fw-medium mx-2">End Date:</span>{" "}
|
||||
<span>
|
||||
{projects_Details.endDate
|
||||
? moment(projects_Details.endDate).format("DD-MMM-YYYY")
|
||||
: "N/A"}
|
||||
</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-3">
|
||||
<i className="bx bx-trophy"></i>
|
||||
<span className="fw-medium mx-2">Status:</span>{" "}
|
||||
<span>{projects_Details?.projectStatus?.status}</span>
|
||||
</li>
|
||||
<li className="d-flex align-items-center mb-3">
|
||||
<i className="bx bx-user"></i>
|
||||
<span className="fw-medium mx-2">Contact:</span>{" "}
|
||||
<span>{projects_Details.contactPerson}</span>
|
||||
</li>
|
||||
<li className="d-flex flex-column align-items-start mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<i className="bx bx-flag"></i>
|
||||
<span className="fw-medium mx-2">Address:</span>
|
||||
{projects_Details.projectAddress?.length <= 20 && (
|
||||
<span>{projects_Details.projectAddress}</span>
|
||||
)}
|
||||
</div>
|
||||
{projects_Details.projectAddress?.length > 20 && (
|
||||
<div className="ms-4 text-start">{projects_Details.projectAddress}</div>
|
||||
)}
|
||||
</li>
|
||||
<ul className="list-unstyled my-3 ps-2">
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '120px' }}> {/* Adjust width as needed for alignment */}
|
||||
<i className="bx bx-cog"></i>
|
||||
<span className="fw-medium mx-2">Name:</span>
|
||||
</div>
|
||||
<span>{projects_Details.name}</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '120px' }}>
|
||||
<i className="bx bx-fingerprint"></i>
|
||||
<span className="fw-medium mx-2">Nick Name:</span>
|
||||
</div>
|
||||
<span>{projects_Details.shortName}</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '120px' }}>
|
||||
<i className="bx bx-check"></i>
|
||||
<span className="fw-medium mx-2">Start Date:</span>
|
||||
</div>
|
||||
<span>
|
||||
{projects_Details.startDate
|
||||
? moment(projects_Details.startDate).format("DD-MMM-YYYY")
|
||||
: "N/A"}
|
||||
</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '120px' }}>
|
||||
<i className="bx bx-stop-circle"></i>
|
||||
<span className="fw-medium mx-2">End Date:</span>
|
||||
</div>
|
||||
<span>
|
||||
{projects_Details.endDate
|
||||
? moment(projects_Details.endDate).format("DD-MMM-YYYY")
|
||||
: "N/A"}
|
||||
</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '120px' }}>
|
||||
<i className="bx bx-trophy"></i>
|
||||
<span className="fw-medium mx-2">Status:</span>
|
||||
</div>
|
||||
<span>{projects_Details?.projectStatus?.status}</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
<div className="d-flex align-items-center" style={{ width: '120px' }}>
|
||||
<i className="bx bx-user"></i>
|
||||
<span className="fw-medium mx-2">Contact:</span>
|
||||
</div>
|
||||
<span>{projects_Details.contactPerson}</span>
|
||||
</li>
|
||||
<li className="d-flex mb-3">
|
||||
{/* Label section with icon */}
|
||||
<div className="d-flex align-items-start" style={{ minWidth: "120px" }}>
|
||||
<i className="bx bx-flag mt-1"></i>
|
||||
<span className="fw-medium mx-2 text-nowrap">Address:</span>
|
||||
</div>
|
||||
|
||||
<li className="d-flex justify-content-center mb-3">
|
||||
{manageProject && (
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm btn-primary ${
|
||||
!manageProject && "d-none"
|
||||
}`}
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-project-modal"
|
||||
onClick={()=>setIsOpenModal(true)}
|
||||
>
|
||||
Modify Details
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
{/* Content section that wraps nicely */}
|
||||
<div className="flex-grow-1 text-start text-wrap">
|
||||
{projects_Details.projectAddress}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
|
||||
{manageProject && (
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm btn-primary ${!manageProject && "d-none"
|
||||
}`}
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-project-modal"
|
||||
onClick={() => setIsOpenModal(true)}
|
||||
>
|
||||
Modify Details
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -102,8 +102,8 @@ const EmployeeProfile = () => {
|
||||
return (
|
||||
<>
|
||||
{showModal && (
|
||||
<GlobalModel size="lg" isOpen={showModal} closeModal={()=>setShowModal(false)}>
|
||||
<ManageEmployee employeeId={employeeId} onClosed={()=>setShowModal(false)} />
|
||||
<GlobalModel size="lg" isOpen={showModal} closeModal={() => setShowModal(false)}>
|
||||
<ManageEmployee employeeId={employeeId} onClosed={() => setShowModal(false)} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
<div className="container-fluid">
|
||||
@ -146,34 +146,29 @@ const EmployeeProfile = () => {
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
<td className="fw-medium text-start text-nowrap">
|
||||
Phone Number:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.phoneNumber || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
<td className="fw-medium text-start" style={{ width: '120px' }}>
|
||||
Emergency Contact Person:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.emergencyContactPerson || (
|
||||
<em>NA</em>
|
||||
)}
|
||||
<td className="text-start align-bottom">
|
||||
{currentEmployee?.emergencyContactPerson || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Emergency Contact Number:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.emergencyPhoneNumber || (
|
||||
<em>NA</em>
|
||||
)}
|
||||
<td className="text-start align-bottom">
|
||||
{currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
Gender:
|
||||
@ -220,21 +215,20 @@ const EmployeeProfile = () => {
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="fw-medium text-start">
|
||||
<td className="fw-medium text-start align-top" >
|
||||
Address:
|
||||
</td>
|
||||
<td className="text-start">
|
||||
{currentEmployee?.currentAddress || (
|
||||
<em>NA</em>
|
||||
)}
|
||||
{currentEmployee?.currentAddress || <em>NA</em>}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary btn-block"
|
||||
onClick={()=>setShowModal(true)}
|
||||
onClick={() => setShowModal(true)}
|
||||
>
|
||||
Edit Profile
|
||||
</button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user