From cff961655d121b39737826a719d42be94663aeb8 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Wed, 3 Dec 2025 11:17:06 +0530
Subject: [PATCH] UI updation in Organization.

---
 src/components/Organization/AssignOrg.jsx     | 36 +++++++++----------
 src/components/Organization/ManagOrg.jsx      |  2 +-
 .../Organization/OrgPickerFromSPId.jsx        | 14 ++++----
 .../Organization/OrganizationsList.jsx        |  1 +
 .../Organization/ViewOrganization.jsx         | 28 +++++++--------
 5 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/src/components/Organization/AssignOrg.jsx b/src/components/Organization/AssignOrg.jsx
index d0886a62..b35402ed 100644
--- a/src/components/Organization/AssignOrg.jsx
+++ b/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-5 mt-2 m-0">{orgData.name}</p>
           </div>
           <div className="text-end">
             <button
@@ -113,60 +113,60 @@ 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-3"> <i className="bx bx-sm bx-info-circle me-2" /> Organization Info</div>
       {/* Contact Info */}
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
         <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 :
           </label>
           <div className="text-muted">{orgData.contactPerson}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
         <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 :
           </label>
           <div className="text-muted">{orgData.contactNumber}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
         <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 :
           </label>
-          <div className="text-muted">{orgData.email}</div>
+          <div className="text-muted text-wrap">{orgData.email}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-4">
         <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-barcode"></i>
-  Service Provider Id (SPRID) :
+            <i className="bx bx-sm me-2 bx-barcode"></i>
+            Service Provider Id (SPRID) :
           </label>
           <div className="text-muted">{orgData.sprid}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-1 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className='bx bx-sm me-1 bx-map'></i> Address :
+            <i className='bx bx-sm me-1 bx-map'></i> Address :
           </label>
           <div className="text-muted text-start">{orgData.address}</div>
         </div>
diff --git a/src/components/Organization/ManagOrg.jsx b/src/components/Organization/ManagOrg.jsx
index e73c34e1..d994b8b5 100644
--- a/src/components/Organization/ManagOrg.jsx
+++ b/src/components/Organization/ManagOrg.jsx
@@ -189,7 +189,7 @@ const ManagOrg = () => {
           )}
         </div>
 
-        <div className="d-flex justify-content-between gap-2 my-2">
+        <div className="d-flex justify-content-between gap-2 my-5">
           <button
             type="button"
             className="btn btn-sm btn-outline-secondary"
diff --git a/src/components/Organization/OrgPickerFromSPId.jsx b/src/components/Organization/OrgPickerFromSPId.jsx
index 0c11fd0a..ffeb0bed 100644
--- a/src/components/Organization/OrgPickerFromSPId.jsx
+++ b/src/components/Organization/OrgPickerFromSPId.jsx
@@ -45,7 +45,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
   return (
     <div className="d-block mt-4">
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="row align-items-center g-2">
+        <div className="row align-items-center g-2 mb-3">
           {/* Input Section */}
           <div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
             <Label className="text-nowrap mb-1 mb-md-0" required>
@@ -88,7 +88,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
         <div className="py-2 text-tiny text-center">
           <div className="d-flex flex-column gap-2 border-0 bg-none">
             {data.data.map((org) => (
-              <div className="d-flex flex-row gap-2 text-start text-black ">
+              <div className="d-flex flex-row gap-2 text-start text-black mt-3">
                 <div className="mt-1">
                   <img
                     src="/public/assets/img/orgLogo.png"
@@ -97,19 +97,19 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
                     height={50}
                   />
                 </div>
-                <div className="d-flex flex-column p-0 m-0 cursor-pointer">
-                  <span className="fs-6 fw-semibold">{org.name}</span>
+                <div className="d-flex flex-column p-0 m-0 cursor-pointer mb-3">
+                  <span className="fs-6 fw-semibold mb-2">{org.name}</span>
                   <div className="d-flex gap-2">
                     <small
-                      className=" fw-semibold text-uppercase"
+                      className=" fw-semibold text-uppercase mb-2"
                       style={{ letterSpacing: "1px" }}
                     >
                       SPRID :{" "}
                     </small>
                     <small className="fs-6">{org.sprid}</small>
                   </div>
-                  <div className="d-flex flex-row gap-2">
-                    <small className="text-small fw-semibold">Address:</small>
+                  <div className="d-flex flex-row gap-2 mb-4">
+                    <small className="text-small fw-semibold ">Address:</small>
                     <div className="d-flex text-wrap">{org.address}</div>
                   </div>
                   <div className="m-0 p-0">
diff --git a/src/components/Organization/OrganizationsList.jsx b/src/components/Organization/OrganizationsList.jsx
index ceacbab5..611ce2de 100644
--- a/src/components/Organization/OrganizationsList.jsx
+++ b/src/components/Organization/OrganizationsList.jsx
@@ -122,6 +122,7 @@ const OrganizationsList = ({searchText}) => {
                     {organizationsColumns.map((col) => (
                       <td
                         key={col.key}
+                        style={{ height: "50px" }}
                         className={`d-table-cell ${col.align ?? ""}`}
                       >
                         {col.customRender
diff --git a/src/components/Organization/ViewOrganization.jsx b/src/components/Organization/ViewOrganization.jsx
index 7ac29f99..bd0b49f5 100644
--- a/src/components/Organization/ViewOrganization.jsx
+++ b/src/components/Organization/ViewOrganization.jsx
@@ -9,7 +9,7 @@ const VieworgDataanization = ({ orgId }) => {
   return (
     <div className="row text-black  text-black text-start ">
       {/* Header */}
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
         <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
@@ -18,7 +18,7 @@ const VieworgDataanization = ({ orgId }) => {
               width={40}
               height={40}
             />{" "}
-            <p className="fw-semibold fs-6 m-0">{data?.name}</p>
+            <p className="fw-semibold fs-5 mt-2 m-0">{data?.name}</p>
           </div>
           <div className="text-end">
             <span
@@ -30,12 +30,12 @@ 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-5">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
@@ -46,7 +46,7 @@ const VieworgDataanization = ({ orgId }) => {
           <div className="text-muted">{data?.contactPerson}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-5">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
@@ -57,7 +57,7 @@ const VieworgDataanization = ({ orgId }) => {
           <div className="text-muted">{data?.contactNumber}</div>
         </div>
       </div>
-      <div className="col-md-12 mb-3">
+      <div className="col-md-12 mb-5">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
@@ -68,32 +68,32 @@ const VieworgDataanization = ({ orgId }) => {
           <div className="text-muted">{data?.email}</div>
         </div>
       </div>
-      <div className="col-6 mb-3">
+      <div className="col-12 mb-5">
         <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-barcode"></i>
+            <i className="bx bx-sm me-2 bx-barcode"></i>
             Service Provider Id (SPRID) :
           </label>
           <div className="text-muted">{data?.sprid}</div>
         </div>
       </div>
 
-      <div className="col-6 mb-3">
+      <div className="col-12 mb-5">
         <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>
+            <i className="bx bx-sm me-2 bx-group"></i>
             Employees :
           </label>
           <div className="text-muted">{data?.activeEmployeeCount}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
         <div className="d-flex">
           <label
             className="form-label me-1 mb-0 fw-semibold"
@@ -104,7 +104,7 @@ const VieworgDataanization = ({ orgId }) => {
           <div className="text-muted text-start">{data?.address}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
         <div
           className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
           data-bs-toggle="collapse"
@@ -162,7 +162,7 @@ const VieworgDataanization = ({ orgId }) => {
       </div>
 
       {/* Services Section */}
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
         <div
           className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
           data-bs-toggle="collapse"
@@ -180,7 +180,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-5">
                   <div className="card h-100 shadow-sm border-0">
                     <div className="card-body">
                       <h6 className="fw-semibold mb-1">