From 1d9de3dbca1450d0d0ad8972924f946c6b3ba43c Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 23 Jul 2025 17:08:50 +0530
Subject: [PATCH] UI changes in Employee Profile and Project Profile.

---
 src/components/Project/AboutProject.jsx | 147 +++++++++++++-----------
 src/pages/employee/EmployeeProfile.jsx  |  32 +++---
 2 files changed, 93 insertions(+), 86 deletions(-)

diff --git a/src/components/Project/AboutProject.jsx b/src/components/Project/AboutProject.jsx
index e5196eac..5d6ff344 100644
--- a/src/components/Project/AboutProject.jsx
+++ b/src/components/Project/AboutProject.jsx
@@ -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>
           </>
diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index 3801fe9f..fd94c668 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/src/pages/employee/EmployeeProfile.jsx
@@ -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>