From 67d399e3d3205eb9281f790e999182fe35c38850 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Tue, 9 Sep 2025 14:44:38 +0530
Subject: [PATCH] set proerly alignment for label and value

---
 src/components/Employee/EmpOverview.jsx | 204 ++++++++++++++----------
 1 file changed, 122 insertions(+), 82 deletions(-)

diff --git a/src/components/Employee/EmpOverview.jsx b/src/components/Employee/EmpOverview.jsx
index 6b396745..ae7b2f7e 100644
--- a/src/components/Employee/EmpOverview.jsx
+++ b/src/components/Employee/EmpOverview.jsx
@@ -9,80 +9,105 @@ const EmpOverview = ({ profile }) => {
       <div className="col-12 mb-4">
         <div className="card">
           <div className="card-body">
-
             {/* About Heading */}
             <small className="card-text text-uppercase text-body-secondary small d-block text-start mb-3">
               About
             </small>
 
             {/* 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>
+            <div className="d-flex mb-3">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-user bx-xs me-2"></i>
                 <span>Full Name</span>
-              </span>
-              <span style={{ marginLeft: "74px" }}>:</span>
-              <span className="ms-5">
+              </div>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-start text-break">
                 {profile?.firstName || <em>NA</em>} {profile?.lastName || ""}
-              </span>
+              </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>
+            <div className="d-flex mb-3">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-check bx-xs me-2"></i>
                 <span>Status</span>
-              </span>
-              <span style={{ marginLeft: "96px" }}>:</span>
-              <span className="ms-5">Active</span>
+              </div>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-start">Active</div>
             </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>
+            <div className="d-flex mb-3">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-crown bx-xs me-2"></i>
                 <span>Role</span>
-              </span>
-              <span style={{ marginLeft: "110px" }}>:</span>
-              <span className="ms-5">{profile?.jobRole || <em>NA</em>}</span>
+              </div>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-break text-start">
+                {profile?.jobRole || <em>NA</em>}
+              </div>
             </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>
+            <div className="d-flex mb-3">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-flag bx-xs me-2"></i>
                 <span>Gender</span>
-              </span>
-              <span style={{ marginLeft: "91px" }}>:</span>
-              <span className="ms-5">{profile?.gender || <em>NA</em>}</span>
+              </div>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-start">
+                {profile?.gender || <em>NA</em>}
+              </div>
             </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>
+            <div className="d-flex mb-3">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-calendar bx-xs me-2"></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>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-start">
+                {profile?.birthDate ? (
+                  new Date(profile.birthDate).toLocaleDateString()
+                ) : (
+                  <em>NA</em>
+                )}
+              </div>
             </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>
+            <div className="d-flex mb-3">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-calendar bx-xs me-2"></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>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-start">
+                {profile?.joiningDate ? (
+                  new Date(profile.joiningDate).toLocaleDateString()
+                ) : (
+                  <em>NA</em>
+                )}
+              </div>
             </div>
 
             {/* Contacts Heading */}
@@ -91,68 +116,83 @@ const EmpOverview = ({ profile }) => {
             </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>
+            <div className="d-flex mb-3">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-phone bx-xs me-2"></i>
                 <span>Contact</span>
-              </span>
-              <span style={{ marginLeft: "87px" }}>:</span>
-              <span className="ms-5">{profile?.phoneNumber || <em>NA</em>}</span>
+              </div>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-start">
+                {profile?.phoneNumber || <em>NA</em>}
+              </div>
             </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>
+            <div className="d-flex mb-3">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-envelope bx-xs me-2"></i>
                 <span>Email</span>
-              </span>
-              <span className="me-5">:</span>
-              <span>
+              </div>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-break text-start">
                 {profile?.email ? (
                   <a href={`mailto:${profile.email}`}>{profile.email}</a>
                 ) : (
                   <em>NA</em>
                 )}
-              </span>
+              </div>
             </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>
+            <div className="d-flex mb-3">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-user bx-xs me-2"></i>
                 <span>Emergency Contact</span>
-              </span>
-              <span style={{ marginLeft: "14px" }}>:</span>
-              <span className="ms-5">
+              </div>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-start">
                 {profile?.emergencyContactPerson || <em>NA</em>}
-              </span>
+              </div>
             </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>
+            <div className="d-flex mb-3">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-phone bx-xs me-2"></i>
                 <span>Emergency Phone</span>
-              </span>
-              <span style={{ marginLeft: "25px" }}>:</span>
-              <span className="ms-5">
+              </div>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-start">
                 {profile?.emergencyPhoneNumber || <em>NA</em>}
-              </span>
+              </div>
             </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>
+            <div className="d-flex mb-2">
+              <div
+                className="d-flex align-items-center me-2 text-nowrap"
+                style={{ minWidth: "160px" }}
+              >
+                <i className="bx bx-map bx-xs me-2"></i>
                 <span>Address</span>
-              </span>
-              <span style={{ marginLeft: "86px" }}>:</span>
-              <span className="ms-5">
+              </div>
+              <div className="me-5">:</div>
+              <div className="flex-grow-1 text-break text-start">
                 {profile?.currentAddress || <em>NA</em>}
-              </span>
+              </div>
             </div>
-
           </div>
         </div>
       </div>