admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge pull request 'Kartik_Bug#787 UI correction in Project Profile and Employee profile page.' (#285) from Kartik_Bug#787 into Issues_July_4W

Browse Source 
Reviewed-on: #285
This commit is contained in:
Vikas Nale 2025-07-24 10:38:48 +00:00
commit 3de7ce30c4
2 changed files with 93 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/Project/AboutProject.jsx
View File

@ -58,74 +58,87 @@ const AboutProject = () => {
</h6> </h6>
</div> </div>
<div className="card-body"> <div className="card-body">
<ul className="list-unstyled my-3 ps-2"> <ul className="list-unstyled my-3 ps-2">
<li className="d-flex align-items-center mb-3"> <li className="d-flex mb-3">
<i className="bx bx-cog"></i> <div className="d-flex align-items-center" style={{ width: '120px' }}> {/* Adjust width as needed for alignment */}
<span className="fw-medium mx-2">Name:</span>{" "} <i className="bx bx-cog"></i>
<span>{projects_Details.name}</span> <span className="fw-medium mx-2">Name:</span>
</li> </div>
<li className="d-flex align-items-center mb-3"> <span>{projects_Details.name}</span>
<i className="bx bx-fingerprint"></i> </li>
<span className="fw-medium mx-2">Nick Name:</span>{" "} <li className="d-flex mb-3">
<span> {projects_Details.shortName} </span> <div className="d-flex align-items-center" style={{ width: '120px' }}>
</li> <i className="bx bx-fingerprint"></i>
<li className="d-flex align-items-center mb-3"> <span className="fw-medium mx-2">Nick Name:</span>
<i className="bx bx-check"></i> </div>
<span className="fw-medium mx-2">Start Date:</span>{" "} <span>{projects_Details.shortName}</span>
<span> </li>
{projects_Details.startDate <li className="d-flex mb-3">
? moment(projects_Details.startDate).format("DD-MMM-YYYY") <div className="d-flex align-items-center" style={{ width: '120px' }}>
: "N/A"} <i className="bx bx-check"></i>
</span> <span className="fw-medium mx-2">Start Date:</span>
</li> </div>
<li className="d-flex align-items-center mb-3"> <span>
<i className="bx bx-stop-circle"></i>{" "} {projects_Details.startDate
<span className="fw-medium mx-2">End Date:</span>{" "} ? moment(projects_Details.startDate).format("DD-MMM-YYYY")
<span> : "N/A"}
{projects_Details.endDate </span>
? moment(projects_Details.endDate).format("DD-MMM-YYYY") </li>
: "N/A"} <li className="d-flex mb-3">
</span> <div className="d-flex align-items-center" style={{ width: '120px' }}>
</li> <i className="bx bx-stop-circle"></i>
<li className="d-flex align-items-center mb-3"> <span className="fw-medium mx-2">End Date:</span>
<i className="bx bx-trophy"></i> </div>
<span className="fw-medium mx-2">Status:</span>{" "} <span>
<span>{projects_Details?.projectStatus?.status}</span> {projects_Details.endDate
</li> ? moment(projects_Details.endDate).format("DD-MMM-YYYY")
<li className="d-flex align-items-center mb-3"> : "N/A"}
<i className="bx bx-user"></i> </span>
<span className="fw-medium mx-2">Contact:</span>{" "} </li>
<span>{projects_Details.contactPerson}</span> <li className="d-flex mb-3">
</li> <div className="d-flex align-items-center" style={{ width: '120px' }}>
<li className="d-flex flex-column align-items-start mb-3"> <i className="bx bx-trophy"></i>
<div className="d-flex align-items-center"> <span className="fw-medium mx-2">Status:</span>
<i className="bx bx-flag"></i> </div>
<span className="fw-medium mx-2">Address:</span> <span>{projects_Details?.projectStatus?.status.replace(/\s/g, '')}</span>
{projects_Details.projectAddress?.length <= 20 && ( </li>
<span>{projects_Details.projectAddress}</span> <li className="d-flex mb-3">
)} <div className="d-flex align-items-center" style={{ width: '120px' }}>
</div> <i className="bx bx-user"></i>
{projects_Details.projectAddress?.length > 20 && ( <span className="fw-medium mx-2">Contact:</span>
<div className="ms-4 text-start">{projects_Details.projectAddress}</div> </div>
)} <span>{projects_Details.contactPerson}</span>
</li> </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"> {/* Content section that wraps nicely */}
{manageProject && ( <div className="flex-grow-1 text-start text-wrap">
<button {projects_Details.projectAddress}
type="button" </div>
className={`btn btn-sm btn-primary ${ </li>
!manageProject && "d-none"
}`}
data-bs-toggle="modal"
data-bs-target="#edit-project-modal" <li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
onClick={()=>setIsOpenModal(true)} {manageProject && (
> <button
Modify Details type="button"
</button> className={`btn btn-sm btn-primary ${!manageProject && "d-none"
)} }`}
</li> data-bs-toggle="modal"
</ul> data-bs-target="#edit-project-modal"
onClick={() => setIsOpenModal(true)}
>
Modify Details
</button>
)}
</li>
</ul>
</div> </div>
</div> </div>
</> </>

32
src/pages/employee/EmployeeProfile.jsx
View File

@ -102,8 +102,8 @@ const EmployeeProfile = () => {
return ( return (
<> <>
{showModal && ( {showModal && (
<GlobalModel size="lg" isOpen={showModal} closeModal={()=>setShowModal(false)}> <GlobalModel size="lg" isOpen={showModal} closeModal={() => setShowModal(false)}>
<ManageEmployee employeeId={employeeId} onClosed={()=>setShowModal(false)} /> <ManageEmployee employeeId={employeeId} onClosed={() => setShowModal(false)} />
</GlobalModel> </GlobalModel>
)} )}
<div className="container-fluid"> <div className="container-fluid">
@ -146,34 +146,29 @@ const EmployeeProfile = () => {
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start"> <td className="fw-medium text-start text-nowrap">
Phone Number: Phone Number:
</td> </td>
<td className="text-start"> <td className="text-start">
{currentEmployee?.phoneNumber || <em>NA</em>} {currentEmployee?.phoneNumber || <em>NA</em>}
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start"> <td className="fw-medium text-start" style={{ width: '120px' }}>
Emergency Contact Person: Emergency Contact Person:
</td> </td>
<td className="text-start"> <td className="text-start align-bottom">
{currentEmployee?.emergencyContactPerson || ( {currentEmployee?.emergencyContactPerson || <em>NA</em>}
<em>NA</em>
)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start"> <td className="fw-medium text-start">
Emergency Contact Number: Emergency Contact Number:
</td> </td>
<td className="text-start"> <td className="text-start align-bottom">
{currentEmployee?.emergencyPhoneNumber || ( {currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
<em>NA</em>
)}
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start"> <td className="fw-medium text-start">
Gender: Gender:
@ -220,21 +215,20 @@ const EmployeeProfile = () => {
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="fw-medium text-start"> <td className="fw-medium text-start align-top" >
Address: Address:
</td> </td>
<td className="text-start"> <td className="text-start">
{currentEmployee?.currentAddress || ( {currentEmployee?.currentAddress || <em>NA</em>}
<em>NA</em>
)}
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<button <button
className="btn btn-primary btn-block" className="btn btn-primary btn-block"
onClick={()=>setShowModal(true)} onClick={() => setShowModal(true)}
> >
Edit Profile Edit Profile
</button> </button>