From 9ddf530710d73e32c926ffe0634069d312f59c69 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Tue, 30 Sep 2025 17:48:11 +0530
Subject: [PATCH] UI updation in Organization view and Search button

---
 src/components/Organization/AssignOrg.jsx     | 167 +++++++++---------
 .../Organization/OrgPickerFromSPId.jsx        |  16 +-
 .../Organization/ViewOrganization.jsx         |  49 +++--
 3 files changed, 116 insertions(+), 116 deletions(-)

diff --git a/src/components/Organization/AssignOrg.jsx b/src/components/Organization/AssignOrg.jsx
index d0886a62..32dc91fa 100644
--- a/src/components/Organization/AssignOrg.jsx
+++ b/src/components/Organization/AssignOrg.jsx
@@ -92,95 +92,93 @@ const AssignOrg = ({ setStep }) => {
   return (
     <div className="row text-black text-start mb-3">
       {/* Organization Info Display */}
-      <div className="col-12 mb-3">
-        <div className="d-flex justify-content-between align-items-center text-start mb-1">
+      <div className="col-12 mb-4">
+        <div className="d-flex justify-content-between align-items-center">
           <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
-              type="button"
-              onClick={handleEdit}
-              className="btn btn-link p-0"
-            >
-              <i className="bx bx-edit text-secondary"></i>
-            </button>
+          <button
+            type="button"
+            onClick={handleEdit}
+            className="btn btn-link p-0"
+          >
+            <i className="bx bx-edit text-secondary"></i>
+          </button>
+        </div>
+      </div>
+
+      <div className="col-12 fw-semibold mb-4 mt-2 fs-6">
+        <i className="bx bx-sm bx-info-circle me-1" /> Organization Info
+      </div>
+
+      {/* Contact Person */}
+      <div className="col-12 mb-4">
+        <div className="row">
+          <div className="col-md-4 col-12 fw-semibold mb-2 mb-md-0">
+            <i className="bx bx-sm bx-user me-1" /> Contact Person :
           </div>
+          <div className="col-md-8 col-12 text-muted">{orgData.contactPerson}</div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
-      {/* Contact Info */}
-      <div className="col-md-6 mb-3">
-        <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 :
-          </label>
-          <div className="text-muted">{orgData.contactPerson}</div>
+
+      {/* Contact Number */}
+      <div className="col-12 mb-4">
+        <div className="row">
+          <div className="col-md-4 col-12 fw-semibold mb-2 mb-md-0">
+            <i className="bx bx-sm bx-phone me-1" /> Contact Number :
+          </div>
+          <div className="col-md-8 col-12 text-muted">{orgData.contactNumber}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
-        <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 :
-          </label>
-          <div className="text-muted">{orgData.contactNumber}</div>
+
+      {/* Email */}
+      <div className="col-12 mb-4">
+        <div className="row">
+          <div className="col-md-4 col-12 fw-semibold mb-2 mb-md-0">
+            <i className="bx bx-sm bx-envelope me-1" /> Email Address :
+          </div>
+          <div className="col-md-8 col-12 text-muted">{orgData.email}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
-        <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 :
-          </label>
-          <div className="text-muted">{orgData.email}</div>
+
+      {/* SPRID */}
+      <div className="col-12 mb-4">
+        <div className="row">
+          <div className="col-md-4 col-12 fw-semibold mb-2 mb-md-0">
+            <i className="bx bx-sm bx-barcode me-1" /> Service Provider Id :
+          </div>
+          <div className="col-md-8 col-12 text-muted">{orgData.sprid}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
-        <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) :
-          </label>
-          <div className="text-muted">{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" }}
-          >
-           <i className='bx bx-sm me-1 bx-map'></i> Address :
-          </label>
-          <div className="text-muted text-start">{orgData.address}</div>
+
+      {/* Address */}
+      <div className="col-12 mb-4">
+        <div className="row">
+          <div className="col-md-4 col-12 fw-semibold mb-2 mb-md-0">
+            <i className="bx bx-sm bx-map me-1" /> Address :
+          </div>
+          <div className="col-md-8 col-12 text-muted">{orgData.address}</div>
         </div>
       </div>
 
       {/* Form */}
-      <div className="text-black text-start">
+      <div className="col-12 text-black text-start">
         <form onSubmit={handleSubmit(onSubmit)}>
-          {/* Show fields only if flowType is NOT default */}
           {flowType !== "default" && (
             <>
               {/* Organization Type */}
-              <div className="mb-3 text-start">
-                <Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
+              <div className="mb-4">
+                <Label
+                  htmlFor="organizationTypeId"
+                  className="mb-3 fw-semibold"
+                  required
+                >
                   Organization Type
                 </Label>
                 <div className="d-flex flex-wrap gap-3 mt-1">
@@ -213,21 +211,23 @@ const AssignOrg = ({ setStep }) => {
               </div>
 
               {/* Services */}
-              <div className="mb-3">
+              <div className="mb-4">
                 <Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
                   Select Services
                 </Label>
-                {mergedServices?.map((service) => (
-                  <div key={service.id} className="form-check mb-3">
-                    <input
-                      type="checkbox"
-                      value={service.id}
-                      {...register("serviceIds")}
-                      className="form-check-input"
-                    />
-                    <label className="form-check-label">{service.name}</label>
-                  </div>
-                ))}
+                <div className="d-flex flex-column gap-3">
+                  {mergedServices?.map((service) => (
+                    <div key={service.id} className="form-check">
+                      <input
+                        type="checkbox"
+                        value={service.id}
+                        {...register("serviceIds")}
+                        className="form-check-input"
+                      />
+                      <label className="form-check-label">{service.name}</label>
+                    </div>
+                  ))}
+                </div>
                 {errors.serviceIds && (
                   <div className="text-danger small">
                     {errors.serviceIds.message}
@@ -237,7 +237,7 @@ const AssignOrg = ({ setStep }) => {
             </>
           )}
 
-          {/* Buttons: Always visible */}
+          {/* Buttons */}
           <div className="d-flex justify-content-between mt-5">
             <button
               type="button"
@@ -245,7 +245,7 @@ const AssignOrg = ({ setStep }) => {
               onClick={handleBack}
               disabled={isPending}
             >
-              <i className="bx bx-chevron-left"></i>Back
+              <i className="bx bx-chevron-left"></i> Back
             </button>
             <button
               type="submit"
@@ -262,6 +262,7 @@ const AssignOrg = ({ setStep }) => {
         </form>
       </div>
     </div>
+
   );
 };
 
diff --git a/src/components/Organization/OrgPickerFromSPId.jsx b/src/components/Organization/OrgPickerFromSPId.jsx
index 69774947..3a036a5b 100644
--- a/src/components/Organization/OrgPickerFromSPId.jsx
+++ b/src/components/Organization/OrgPickerFromSPId.jsx
@@ -44,8 +44,8 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
         className="d-flex flex-row gap-6 text-start align-items-center"
         onSubmit={handleSubmit(onSubmit)}
       >
-        <div className="d-flex flex-row align-items-center gap-2">
-          <Label className="text-secondary">Search by SPRID</Label>
+        <div className="d-flex flex-row  align-items-center gap-2">
+          <Label className="fw-semibold">Search by SPRID</Label>
           <input
             type="search"
             {...register("spridSearchText")}
@@ -72,10 +72,10 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
       {isLoading ? (
         <OrgCardSkeleton />
       ) : data && data?.data.length > 0 ? (
-        <div className="py-2 text-tiny text-center">
+        <div className="py-2 text-tiny text-center mt-5">
           <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-4 text-start text-black ">
                 <div className="mt-1">
                   <img
                     src="/public/assets/img/orgLogo.png"
@@ -85,8 +85,8 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
                   />
                 </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 gap-2">
+                  <span className="fs-5 fw-semibold">{org.name}</span>
+                  <div className="d-flex gap-2 mt-2">
                     <small
                       className=" fw-semibold text-uppercase"
                       style={{ letterSpacing: "1px" }}
@@ -95,11 +95,11 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
                     </small>
                     <small className="fs-6">{org.sprid}</small>
                   </div>
-                  <div className="d-flex flex-row gap-2">
+                  <div className="d-flex flex-row gap-2 mt-2">
                     <small className="text-small fw-semibold">Address:</small>
                     <div className="d-flex text-wrap">{org.address}</div>
                   </div>
-                  <div className="m-0 p-0">
+                  <div className="m-0 p-0 mt-4">
                     {" "}
                     <button
                       type="submit"
diff --git a/src/components/Organization/ViewOrganization.jsx b/src/components/Organization/ViewOrganization.jsx
index 4fc4d6ec..5059b755 100644
--- a/src/components/Organization/ViewOrganization.jsx
+++ b/src/components/Organization/ViewOrganization.jsx
@@ -22,36 +22,35 @@ const VieworgDataanization = ({ orgId }) => {
           </div>
           <div className="text-end">
             <span
-              className={`badge bg-label-${
-                data?.isActive ? "primary" : "secondary"
-              } `}
+              className={`badge bg-label-${data?.isActive ? "primary" : "secondary"
+                } `}
             >
               {data?.isActive ? "Active" : "In-Active"}{" "}
             </span>
           </div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2">
+      <div className="d-flex fw-semibold fs-6 mb-4 mt-2">
         {" "}
         <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-3">
         <div className="d-flex">
           <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
+            className="form-label me-2 mb-1 fw-semibold"
+            style={{ minWidth: "200px" }}
           >
             <i className="bx bx-sm bx-user me-1" /> Contact Person :
           </label>
           <div className="text-muted">{data?.contactPerson}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-3">
         <div className="d-flex">
           <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
+            className="form-label me-2 mb-1 fw-semibold"
+            style={{ minWidth: "200px" }}
           >
             <i className="bx bx-sm me-1 bx-phone"></i> Contact Number :
           </label>
@@ -61,44 +60,44 @@ const VieworgDataanization = ({ orgId }) => {
       <div className="col-md-12 mb-3">
         <div className="d-flex">
           <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
+            className="form-label me-2 mb-1 fw-semibold"
+            style={{ minWidth: "200px" }}
           >
             <i className="bx bx-sm me-1 bx-envelope"></i> Email Address :
           </label>
           <div className="text-muted">{data?.email}</div>
         </div>
       </div>
-      <div className="col-6 mb-3">
+      <div className="col-md-12 mb-3">
         <div className="d-flex">
           <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ maxWidth: "130px" }}
+            className="form-label me-2 mb-1 fw-semibold"
+            style={{ maxWidth: "250px" }}
           >
-            <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 className="text-muted ms-1">{data?.sprid}</div>
         </div>
       </div>
 
-      <div className="col-6 mb-3">
+      <div className="col-md-12 mb-3">
         <div className="d-flex">
           <label
-            className="form-label me-2 mb-0 fw-semibold"
-            style={{ maxWidth: "130px" }}
+            className="form-label me-2 mb-1 fw-semibold"
+
           >
-            <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 className="text-muted" style={{ marginLeft: "104px" }}>{data?.activeEmployeeCount}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-md-12 mb-3">
         <div className="d-flex">
           <label
-            className="form-label me-1 mb-0 fw-semibold"
-            style={{ minWidth: "130px" }}
+            className="form-label me-1 mb-1 fw-semibold"
+            style={{ minWidth: "207px" }}
           >
             <i className="bx bx-sm me-1 bx-map"></i> Address :
           </label>