From 339a5ff257b0c1e6d89bfd34752417ce3e8a29c1 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 27 Nov 2025 15:56:19 +0530
Subject: [PATCH] UI alignment in Purchase Invoice popup and changes in Jobs
 Arcieve and Archieve button.

---
 src/components/ServiceProject/Jobs.jsx        |  31 ++-
 .../ServiceProjectJob/ManageJob.jsx           |  31 +--
 src/components/purchase/ViewPurchase.jsx      | 210 ++++++++++--------
 3 files changed, 151 insertions(+), 121 deletions(-)

diff --git a/src/components/ServiceProject/Jobs.jsx b/src/components/ServiceProject/Jobs.jsx
index f0e1cb1e..edec54d1 100644
--- a/src/components/ServiceProject/Jobs.jsx
+++ b/src/components/ServiceProject/Jobs.jsx
@@ -62,15 +62,27 @@ const Jobs = () => {
         <div className="card page-min-h my-2 px-7 pb-4">
           <div className="row align-items-center py-4">
 
-            {/* LEFT — Tabs */}
+            {/* LEFT — Archive / Unarchive Toggle */}
             <div className="col-12 col-md-6 text-start">
-              <button
-                type="button"
-                className={`btn btn-sm ${showArchive ? "btn-secondary" : "btn-outline-secondary"}`}
-                onClick={() => setShowArchive(!showArchive)}
-              >
-               <i className="bx bx-archive bx-sm me-1 mt-1"></i>  Archived
-              </button>
+              <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
+                <button
+                  type="button"
+                  className={`btn px-3 py-1 rounded-0 text-tiny ${!showArchive ? "btn-primary text-white" : ""
+                    }`}
+                  onClick={() => setShowArchive(false)}
+                >
+                  <i className="bx bx-archive-out me-1"></i> Active Jobs
+                </button>
+
+                <button
+                  type="button"
+                  className={`btn px-3 py-1 rounded-0 text-tiny ${showArchive ? "btn-primary text-white" : ""
+                    }`}
+                  onClick={() => setShowArchive(true)}
+                >
+                  <i className="bx bx-archive me-1"></i> Archived
+                </button>
+              </div>
             </div>
 
             {/* RIGHT — New Job button */}
@@ -79,9 +91,10 @@ const Jobs = () => {
                 className="btn btn-sm btn-primary"
                 onClick={() => setManageJob({ isOpen: true, jobId: null })}
               >
-                <i className="bx bx-plus-circle bx-md me-2"></i>New Job
+                <i className="bx bx-plus-circle bx-md me-2"></i> New Job
               </button>
             </div>
+
           </div>
 
           {/* Job List */}
diff --git a/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx b/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
index cc2066e0..70cacaf9 100644
--- a/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
@@ -172,6 +172,20 @@ const ManageJob = ({ Job }) => {
     <div className="container">
       <AppFormProvider {...methods}>
         <form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
+           <div className="col-12 col-md-12">
+            <SelectFieldSearch
+              label="Select Branch"
+              placeholder="Select Branch"
+              value={watch("projectBranchId")}
+              onChange={(val) => setValue("projectBranchId", val)}
+              valueKey="id"
+              labelKey="branchName"
+              hookParams={[projectId, true, 10, 1]}
+              useFetchHook={useBranches}
+              isMultiple={false}
+              disabled={Job}
+            />
+          </div>
           <div className="col-12 col-md-12 mb-2 ">
             <Label required>Title</Label>
             <input
@@ -244,20 +258,7 @@ const ManageJob = ({ Job }) => {
               placeholder="Enter Tag"
             />
           </div>
-          <div className="col-12 col-md-6 mb-2 mb-md-4">
-            <SelectFieldSearch
-              label="Select Branch"
-              placeholder="Select Branch"
-              value={watch("projectBranchId")}
-              onChange={(val) => setValue("projectBranchId", val)}
-              valueKey="id"
-              labelKey="branchName"
-              hookParams={[projectId, true, 10, 1]}
-              useFetchHook={useBranches}
-              isMultiple={false}
-              disabled={Job}
-            />
-          </div>
+         
           <div className="col-12">
             <Label required>Description</Label>
             <textarea
@@ -276,7 +277,7 @@ const ManageJob = ({ Job }) => {
                 ? "Please wait..."
                 : Job
                 ? "Update"
-                : "Submit"}
+                : "Assign"}
             </button>
           </div>
         </form>
diff --git a/src/components/purchase/ViewPurchase.jsx b/src/components/purchase/ViewPurchase.jsx
index 583066ca..6cb07df8 100644
--- a/src/components/purchase/ViewPurchase.jsx
+++ b/src/components/purchase/ViewPurchase.jsx
@@ -11,126 +11,142 @@ const ViewPurchase = ({ purchaseId }) => {
   if (isError) return <Error error={error} />;
 
   return (
-    <div className="row g-3">
-      <div className="col-12 text-start">
-        <div className=" ">
-          <p className="fs-6 mb-3">Purchase Details</p>
-          <div className="row">
-            <div className="col-md-4">
-              <small className="text-secondary">Purchase No:</small>
-              <p className="fw-light mb-1">{data?.purchaseInvoiceUId}</p>
-            </div>
+    <div className="row g-3 px-3">
+      <div className="col-12 mb-1">
+        <h5 className="fw-semibold m-0">Purchase Invoice Details</h5>
+      </div>
 
-            <div className="col-md-4">
-              <small className="text-secondary">Title:</small>
+      <div className="col-12 text-start">
+        <div className="row">
+          <div className="fs-6 col-md-10 d-flex align-items-center fw-semibold">
+            <p className="mb-0 me-1">Purchase No:</p>
+            <p className="mb-0">{data?.purchaseInvoiceUId}</p>
+          </div>
+
+          <div className="col-md-2 d-flex align-items-center">
+            <p className="fw-light me-2 mb-0"></p>
+            <span className={`badge rounded-pill bg-label-${getColorNameFromHex(data?.status?.color)}`}>
+              {data?.status?.displayName || "NA"}
+            </span>
+          </div>
+
+        </div>
+      </div>
+
+      <div className="col-12 text-start border-bottom">
+        <div className=" ">
+          <p className="fw-semibold mb-3">Purchase Details</p>
+          <div className="row mb-3">
+            <div className="col-md-6">
+              <p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Title:</p>
               <p className="fw-light mb-1">{data?.title}</p>
             </div>
-
-            <div className="col-md-4">
-              <small className="fw-light me-3">Status:</small>
-              
-                <span className={`badge rounded-pill bg-label-${getColorNameFromHex(data?.status?.color)}`}>
-          {data?.status.displayName || "NA"}
-        </span>
-            </div>
-
-            <div className="col-12 ">
-              <small className="text-secondary">Description:</small>
-              <p className="fw-light mb-1">{data?.description}</p>
+            <div className="col-md-6">
+              <p className="text-secondary mb-0"><i class='bx bx-comment-detail bx-sm me-1'></i>Description:</p>
+              <p className="fw-light mb-1 ">{data?.description}</p>
             </div>
           </div>
         </div>
       </div>
 
-      <div className="col-md-6">
-        <div className="text-start  h-auto">
+      <div className="col-12 border-bottom">
+        <div className="text-start h-auto fw-semibold">
           <p className="text-muted mb-2">Project</p>
-
-          <div>
-            <small className="text-secondary">Name:</small>
-            <p className="fw-light mb-1">{data?.project?.name}</p>
+        </div>
+        <div className="row text-start h-auto">
+          {/* Project Name */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Project Name:</p>
+            <p className="fw-light mb-0">{data?.project?.name}</p>
           </div>
 
-          <div>
-            <small className="text-secondary">Organization</small>{" "}
-            <p className="fw-light mb-1"> {data?.organization?.name}</p>
+          {/* Organization Name */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bxs-component bx-sm me-1'></i>Organization:</p>
+            <p className="fw-light mb-0">{data?.organization?.name}</p>
           </div>
 
-          <div className="d-flex flex-column flex-md-row gap-3 my-1">
-            <div>
-              <small className="text-secondary">Email:</small>
-              <p className="fw-light mb-0">{data?.organization?.email}</p>
-            </div>
-            <div>
-              <small className="text-secondary">Contact:</small>{" "}
-              <p className="fw-light mb-0">
-                {data?.organization?.contactNumber}
-              </p>
-            </div>
+          {/* Email */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-envelope me-1 bx-sm'></i>Email:</p>
+            <p className="fw-light mb-0">{data?.organization?.email}</p>
           </div>
-          <div>
-            <small className="text-secondary">Address:</small>{" "}
-            <p className="fw-light">{data?.organization?.address}</p>
+
+          {/* Contact Number */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
+            <p className="fw-light mb-0">{data?.organization?.contactNumber}</p>
+          </div>
+
+          {/* Address */}
+          <div className="col-12 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
+            <p className="fw-light mb-0">{data?.organization?.address}</p>
+          </div>
+        </div>
+      </div>
+
+
+      <div className="col-12 border-bottom">
+        <div className="row text-start h-auto">
+          <p className="text-muted mb-2 fw-semibold">Supplier</p>
+
+          {/* Supplier Name */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Name:</p>
+            <p className="fw-light mb-0">{data?.supplier?.name}</p>
+          </div>
+
+          {/* Contact Person */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-support bx-sm me-1'></i>Contact Person:</p>
+            <p className="fw-light mb-0">{data?.supplier?.contactPerson}</p>
+          </div>
+
+          {/* Email */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-envelope me-1 bx-sm'></i>Email:</p>
+            <p className="fw-light mb-0">{data?.supplier?.email}</p>
+          </div>
+
+          {/* Contact Number */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
+            <p className="fw-light mb-0">{data?.supplier?.contactNumber}</p>
+          </div>
+
+          {/* Address */}
+          <div className="col-12 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
+            <p className="fw-light mb-0">{data?.supplier?.address}</p>
           </div>
         </div>
       </div>
 
       <div className="col-md-6">
         <div className="text-start h-auto">
-          <p className="text-muted mb-2">Supplier</p>
-
-          <div>
-            <small className="text-secondary">Name:</small>
-            <p className="fw-light mb-1">{data?.supplier?.name}</p>
-          </div>
-
-          <div>
-            <small className="text-secondary">Contact Person:</small>
-            <p className="fw-light mb-1">{data?.supplier?.contactPerson}</p>
-          </div>
-
-          <div className="d-flex flex-column flex-md-row gap-3 my-1">
-            <div>
-              <small className="text-secondary">Email:</small>
-              <p className="fw-light mb-0">{data?.supplier?.email}</p>
-            </div>
-
-            <div>
-              <small className="text-secondary">Contact:</small>
-              <p className="fw-light mb-0">{data?.supplier?.contactNumber}</p>
-            </div>
-          </div>
-
-          <div>
-            <small className="text-secondary">Address:</small>
-            <p className="fw-light">{data?.supplier?.address}</p>
-          </div>
-        </div>
-      </div>
-      <div className="col-md-6">
-        <div className="text-start h-auto">
-          <p className="text-muted mb-2">Invoice Details</p>
+          <p className="text-muted mb-2 fw-semibold">Invoice Details</p>
 
           <div className="row g-3">
             {/* Left column */}
             <div className="col-12 col-sm-6">
               <div>
-                <small className="text-secondary">Invoice No:</small>
+                <p className="text-secondary mb-0">Invoice No:</p>
                 <p className="fw-light mb-1">{data?.invoiceNumber}</p>
               </div>
 
               <div>
-                <small className="text-secondary">Proforma No:</small>
+                <p className="text-secondary mb-0">Proforma No:</p>
                 <p className="fw-light mb-1">{data?.proformaInvoiceNumber}</p>
               </div>
 
               <div>
-                <small className="text-secondary">E-Way Bill:</small>
+                <p className="text-secondary mb-0">E-Way Bill:</p>
                 <p className="fw-light mb-1">{data?.eWayBillNumber}</p>
               </div>
 
               <div>
-                <small className="text-secondary">PO No:</small>
+                <p className="text-secondary mb-0">PO No:</p>
                 <p className="fw-light mb-1">{data?.purchaseOrderNumber}</p>
               </div>
             </div>
@@ -138,28 +154,28 @@ const ViewPurchase = ({ purchaseId }) => {
             {/* Right column */}
             <div className="col-12 col-sm-6">
               <div>
-                <small className="text-secondary">Invoice Date:</small>
+                <p className="text-secondary mb-0 ">Invoice Date:</p>
                 <p className="fw-light mb-1">
                   {formatUTCToLocalTime(data?.invoiceDate)}
                 </p>
               </div>
 
               <div>
-                <small className="text-secondary">Proforma Date:</small>
+                <p className="text-secondary mb-0">Proforma Date:</p>
                 <p className="fw-light mb-1">
                   {formatUTCToLocalTime(data?.proformaInvoiceDate)}
                 </p>
               </div>
 
               <div>
-                <small className="text-secondary">E-Way Date:</small>
+                <p className="text-secondary mb-0">E-Way Date:</p>
                 <p className="fw-light mb-1">
                   {formatUTCToLocalTime(data?.eWayBillDate)}
                 </p>
               </div>
 
               <div>
-                <small className="text-secondary">PO Date:</small>
+                <p className="text-secondary mb-0">PO Date:</p>
                 <p className="fw-light">
                   {formatUTCToLocalTime(data?.purchaseOrderDate)}
                 </p>
@@ -171,20 +187,20 @@ const ViewPurchase = ({ purchaseId }) => {
 
       <div className="col-md-6">
         <div className="text-start h-auto">
-          <p className="text-muted mb-2">Amount Summary</p>
+          <p className="text-muted mb-2 fw-semibold">Amount Summary</p>
 
           <div className="d-flex justify-content-between">
-            <small className="text-secondary">Base Amount</small>
+            <p className="text-secondary mb-0">Base Amount</p>
             <p className="fw-light mb-1">₹ {data?.baseAmount}</p>
           </div>
 
           <div className="d-flex justify-content-between">
-            <small className="text-secondary">Tax</small>
+            <p className="text-secondary mb-0">Tax</p>
             <p className="fw-light mb-1">₹ {data?.taxAmount}</p>
           </div>
 
           <div className="d-flex justify-content-between">
-            <small className="text-secondary">Transport</small>
+            <p className="text-secondary mb-0">Transport</p>
             <p className="fw-light mb-1">₹ {data?.transportCharges}</p>
           </div>
 
@@ -196,7 +212,7 @@ const ViewPurchase = ({ purchaseId }) => {
           </div>
 
           <div className="mt-2">
-            <small className="text-secondary">Due Date:</small>
+            <p className="text-secondary mb-0">Due Date:</p>
             <p className="fw-light mb-0">
               {formatUTCToLocalTime(data?.paymentDueDate)}
             </p>
@@ -205,17 +221,17 @@ const ViewPurchase = ({ purchaseId }) => {
       </div>
 
       <div className="row mt-3 text-start">
-        <div className="col-md-6 mb-3">
-          <div className="  h-100">
-            <p className="text-secondary mb-2">Billing Address</p>
+        <div className="col-md-6 mb-3 ms-n2">
+          <div className="h-100">
+            <p className="text-secondary mb-0">Billing Address</p>
 
             <p className="mb-0 fw-light">{data?.billingAddress || "-"}</p>
           </div>
         </div>
 
         <div className="col-md-6 mb-3 text-start">
-          <div className="  h-100">
-            <p className="text-secondary mb-2">Shipping Address</p>
+          <div className="h-100">
+            <p className="text-secondary mb-0">Shipping Address</p>
             <p className="mb-0 fw-light">{data?.shippingAddress || "-"}</p>
           </div>
         </div>