Ui implementation in Organization.

src/components/Organization/AssignOrg.jsx

@@ -96,11 +96,11 @@ const AssignOrg = ({ setStep }) => {
         <div className="d-flex justify-content-between align-items-center text-start mb-1">
           <div className="d-flex flex-row gap-2 align-items-center text-wrap">
             <img
-                    src="/public/assets/img/orgLogo.png"
-                    alt="logo"
-                    width={40}
-                    height={40}
-                  />  <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
+              src="/public/assets/img/orgLogo.png"
+              alt="logo"
+              width={40}
+              height={40}
+            />  <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
           </div>
           <div className="text-end">
             <button
@@ -113,60 +113,72 @@ const AssignOrg = ({ setStep }) => {
           </div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
+      <div className="d-flex text-secondary mb-4"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
       {/* Contact Info */}
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-6">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className="bx bx-sm bx-user me-1" /> Contact Person :
+            <i className="bx bx-sm bx-user me-1" /> Contact Person<span style={{ marginLeft: "15px" }}>:</span>
           </label>
           <div className="text-muted">{orgData.contactPerson}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-6">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
+            <i className='bx bx-sm me-1 bx-phone'></i> Contact Number<span style={{ marginLeft: "10px" }}>:</span>
           </label>
           <div className="text-muted">{orgData.contactNumber}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-6">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-          <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
+            <i className='bx bx-sm me-1 bx-envelope'></i>Email Address<span style={{ marginLeft: "30px" }}>:</span>
           </label>
-          <div className="text-muted">{orgData.email}</div>
+
+          <div className="text-muted text-wrap text-break">
+            {orgData.email}
+          </div>
         </div>
       </div>
-      <div className="col-12 mb-3">
-        <div className="d-flex">
+
+      <div className="col-12 mb-6">
+        <div className="d-flex align-items-start">
+
+          {/* Icon */}
+          <i className="bx bx-sm me-1 bx-barcode mt-0"></i>
+
+          {/* Label (2 lines) */}
           <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ maxWidth: "130px" }}
+            className="form-label mb-0 fw-semibold me-2"
+            style={{ minWidth: "115px", lineHeight: "1.2" }}
           >
-          <i className="bx bx-sm me-1 bx-barcode"></i>
-  Service Provider Id (SPRID) :
+            <span className="d-block">Service Provider</span>
+            <span className="d-block">Id (SPRID) <span style={{ marginLeft: "50px" }}>:</span></span>
           </label>
-          <div className="text-muted">{orgData.sprid}</div>
+
+          {/* Value */}
+          <div className="text-muted mt-4">{orgData.sprid}</div>
         </div>
       </div>
+
       <div className="col-12 mb-3">
         <div className="d-flex">
           <label
             className="form-label me-1 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
+            style={{ minWidth: "145px" }}
           >
-           <i className='bx bx-sm me-1 bx-map'></i> Address :
+            <i className='bx bx-sm me-1 bx-map'></i> Address<span style={{ marginLeft: "60px" }}>:</span>
           </label>
           <div className="text-muted text-start">{orgData.address}</div>
         </div>

src/components/Organization/ViewOrganization.jsx

@@ -7,9 +7,9 @@ const VieworgDataanization = ({ orgId }) => {
   if (isLoading) return <OrgDetailsSkeleton />;
   if (isError) return <div>{error.message}</div>;
   return (
-    <div className="row text-black  text-black text-start ">
+    <div className="row text-black text-black text-start ">
       {/* Header */}
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-6">
         <div className="d-flex justify-content-between align-items-center text-start mb-1">
           <div className="d-flex flex-row gap-2 align-items-center text-wrap">
             <img
@@ -30,81 +30,87 @@ const VieworgDataanization = ({ orgId }) => {
           </div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2">
+      <div className="d-flex text-secondary mb-5">
         {" "}
         <i className="bx bx-sm bx-info-circle me-1" /> Organization Info
       </div>
       {/* Contact Info */}
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-6">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            <i className="bx bx-sm bx-user me-1" /> Contact Person :
+            <i className="bx bx-sm bx-user me-1" /> Contact Person<span style={{ marginLeft: "18px" }}>:</span>
           </label>
           <div className="text-muted">{data?.contactPerson}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-6">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            <i className="bx bx-sm me-1 bx-phone"></i> Contact Number :
+            <i className="bx bx-sm me-1 bx-phone"></i> Contact Number <span style={{ marginLeft: "5px" }}>:</span>
           </label>
           <div className="text-muted">{data?.contactNumber}</div>
         </div>
       </div>
-      <div className="col-md-12 mb-3">
+      <div className="col-md-12 mb-6">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-            <i className="bx bx-sm me-1 bx-envelope"></i> Email Address :
+            <i className="bx bx-sm me-1 bx-envelope"></i> Email Address <span style={{ marginLeft: "19px" }}>:</span>
           </label>
           <div className="text-muted">{data?.email}</div>
         </div>
       </div>
-      <div className="col-6 mb-3">
-        <div className="d-flex">
+      <div className="col-12 mb-6">
+        <div className="d-flex align-items-start">
+
+          {/* Icon */}
+          <i className="bx bx-sm me-1 bx-barcode mt-0"></i>
+
+          {/* Label (2 lines) */}
           <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ maxWidth: "130px" }}
+            className="form-label mb-0 fw-semibold me-2"
+            style={{ minWidth: "115px", lineHeight: "1.2" }}
           >
-            <i className="bx bx-sm me-1 bx-barcode"></i>
-            Service Provider Id (SPRID) :
+            <span className="d-block">Service Provider <span style={{ marginLeft: "10px" }}>:</span></span>
+            <span className="d-block">Id (SPRID)</span>
           </label>
-          <div className="text-muted">{data?.sprid}</div>
+
+          {/* Value */}
+          <div className="text-muted mt-0">{data?.sprid}</div>
         </div>
       </div>
 
-      <div className="col-6 mb-3">
+      <div className="col-12 mb-6">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
-            style={{ maxWidth: "130px" }}
           >
             <i className="bx bx-sm me-1 bx-group"></i>
-            Employees :
+            Employees<span style={{ marginLeft: "45px" }}>:</span>
           </label>
           <div className="text-muted">{data?.activeEmployeeCount}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-6">
         <div className="d-flex">
           <label
             className="form-label me-1 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
+            style={{ minWidth: "136px" }}
           >
-            <i className="bx bx-sm me-1 bx-map"></i> Address :
+            <i className="bx bx-sm me-1 bx-map"></i> Address<span style={{ marginLeft: "58px" }}>:</span>
           </label>
-          <div className="text-muted text-start">{data?.address}</div>
+          <div className="text-muted text-start ">{data?.address}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-6">
         <div
           className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
           data-bs-toggle="collapse"
@@ -162,7 +168,7 @@ const VieworgDataanization = ({ orgId }) => {
       </div>
 
       {/* Services Section */}
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-6">
         <div
           className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
           data-bs-toggle="collapse"
@@ -180,7 +186,7 @@ const VieworgDataanization = ({ orgId }) => {
           {data?.services && data.services.length > 0 ? (
             <div className="row">
               {data.services.map((service) => (
-                <div key={service.id} className="col-md-12 mb-3">
+                <div key={service.id} className="col-md-12 mb-6">
                   <div className="card h-100 shadow-sm border-0">
                     <div className="card-body">
                       <h6 className="fw-semibold mb-1">