From 26675d61c3e33e4ae6be3a2cc6560cdf403ea925 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 10 Nov 2025 15:36:17 +0530
Subject: [PATCH 1/2] UI correction at Collection form.

---
 src/components/collections/CollectionList.jsx |  2 +-
 .../collections/ManageCollection.jsx          | 23 +++++----
 src/pages/collections/CollectionPage.jsx      | 47 +++++++++----------
 3 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/components/collections/CollectionList.jsx b/src/components/collections/CollectionList.jsx
index eba51a1d..7ef961c3 100644
--- a/src/components/collections/CollectionList.jsx
+++ b/src/components/collections/CollectionList.jsx
@@ -156,7 +156,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {
         className="card-datatable table-responsive page-min-h"
         id="horizontal-example"
       >
-        <div className="dataTables_wrapper no-footer mx-5 pb-2">
+        <div className="dataTables_wrapper no-footer mx-3 pb-2">
           <table className="table dataTable text-nowrap">
             <thead>
               <tr className="table_header_border">
diff --git a/src/components/collections/ManageCollection.jsx b/src/components/collections/ManageCollection.jsx
index 68667d61..608a6c33 100644
--- a/src/components/collections/ManageCollection.jsx
+++ b/src/components/collections/ManageCollection.jsx
@@ -140,15 +140,15 @@ const ManageCollection = ({ collectionId, onClose }) => {
         description: data?.description,
         attachments: data.attachments
           ? data.attachments.map((doc) => ({
-              fileName: doc.fileName,
-              base64Data: null,
-              contentType: doc.contentType,
-              documentId: doc.documentId,
-              fileSize: 0,
-              description: "",
-              preSignedUrl: doc.preSignedUrl,
-              isActive: doc.isActive ?? true,
-            }))
+            fileName: doc.fileName,
+            base64Data: null,
+            contentType: doc.contentType,
+            documentId: doc.documentId,
+            fileSize: 0,
+            description: "",
+            preSignedUrl: doc.preSignedUrl,
+            isActive: doc.isActive ?? true,
+          }))
           : [],
       });
     }
@@ -228,6 +228,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
             <div className="col-12 col-md-6  mb-2">
               <Label required>Invoice Date</Label>
               <DatePicker
+                className="w-100"
                 name="invoiceDate"
                 control={control}
                 maxDate={new Date()}
@@ -241,6 +242,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
             <div className="col-12 col-md-6  mb-2">
               <Label required>Expected Payment Date</Label>
               <DatePicker
+                className="w-100"
                 name="exceptedPaymentDate"
                 control={control}
                 minDate={watch("invoiceDate")}
@@ -254,6 +256,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
             <div className="col-12 col-md-6  mb-2">
               <Label required>Submission Date (Client)</Label>
               <DatePicker
+                className="w-100"
                 name="clientSubmitedDate"
                 control={control}
                 maxDate={new Date()}
@@ -411,7 +414,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                       (fileError?.fileSize?.message ||
                         fileError?.contentType?.message ||
                         fileError?.base64Data?.message,
-                      fileError?.documentId?.message)
+                        fileError?.documentId?.message)
                     }
                   </div>
                 ))}
diff --git a/src/pages/collections/CollectionPage.jsx b/src/pages/collections/CollectionPage.jsx
index 298bde19..fbac9564 100644
--- a/src/pages/collections/CollectionPage.jsx
+++ b/src/pages/collections/CollectionPage.jsx
@@ -112,15 +112,15 @@ const CollectionPage = () => {
           data={[{ label: "Home", link: "/" }, { label: "Collection" }]}
         />
 
-        <div className="card my-3 py-2 px-sm-4 px-0">
-          <div className="row px-3">
-            <div className="col-12 col-md-3 mb-1">
+        <div className="card my-3 py-2 px-sm-4 px-2">
+          <div className="row align-items-center mx-0">
+            {/* Left side: Date Picker + Show Pending (stacked on mobile) */}
+            <div className="col-12 col-md-6 d-flex flex-column flex-md-row flex-wrap align-items-start align-md-items-center gap-2 gap-md-3 mb-3 mb-md-0">
               <FormProvider {...methods}>
                 <DateRangePicker1 howManyDay={180} />
               </FormProvider>
-            </div>
-            <div className="col-12 col-md-3 d-flex align-items-center gap-2 ">
-              <div className="form-check form-switch text-start align-items-center">
+
+              <div className="form-check form-switch d-flex align-items-center mt-1">
                 <input
                   type="checkbox"
                   className="form-check-input"
@@ -130,41 +130,38 @@ const CollectionPage = () => {
                   onChange={(e) => setShowPending(e.target.checked)}
                 />
                 <label
-                  className="form-check-label ms-0"
+                  className="form-check-label ms-2"
                   htmlFor="inactiveEmployeesCheckbox"
                 >
-                  Show Pending
+                  Show Completed Collections
                 </label>
               </div>
             </div>
 
-            <div className="col-12 col-md-6  d-flex justify-content-between justify-content-md-end gap-4">
-              <div className="w-md-auto">
-                {" "}
-                <input
-                  type="search"
-                  value={searchText}
-                  onChange={(e) => setSearchText(e.target.value)}
-                  placeholder="Search Collection"
-                  className="form-control form-control-sm"
-                />
-              </div>
+            {/* Right side: Search + Add Button */}
+            <div className="col-12 col-sm-6 d-flex justify-content-end align-items-center gap-2">
+              <input
+                type="search"
+                value={searchText}
+                onChange={(e) => setSearchText(e.target.value)}
+                placeholder="Search Collection"
+                className="form-control form-control-sm w-auto"
+              />
+
               {(canCreate || isAdmin) && (
                 <button
                   className="btn btn-sm btn-primary"
                   type="button"
-                  onClick={() =>
-                    setCollection({ isOpen: true, invoiceId: null })
-                  }
+                  onClick={() => setCollection({ isOpen: true, invoiceId: null })}
                 >
                   <i className="bx bx-plus-circle me-2"></i>
-                  <span className="d-none d-md-inline-block">
-                    Add New Collection
-                  </span>
+                  <span className="d-none d-md-inline-block">Add New Collection</span>
                 </button>
               )}
             </div>
+
           </div>
+
         </div>
 
         <CollectionList

From 00e74b645c2edef764f2daa9a864229ceef02303 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 10 Nov 2025 16:00:28 +0530
Subject: [PATCH 2/2] Ui alignment in Recurring Expense and Payment Request
 page.

---
 src/components/Expenses/ExpenseSkeleton.jsx              | 2 +-
 src/components/PaymentRequest/PaymentRequestList.jsx     | 2 +-
 src/components/RecurringExpense/RecurringExpenseList.jsx | 8 +++++---
 src/pages/PaymentRequest/PaymentRequestPage.jsx          | 8 +++++---
 src/pages/RecurringExpense/RecurringExpensePage.jsx      | 7 ++++---
 5 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/Expenses/ExpenseSkeleton.jsx b/src/components/Expenses/ExpenseSkeleton.jsx
index 4356eda0..8a4afe95 100644
--- a/src/components/Expenses/ExpenseSkeleton.jsx
+++ b/src/components/Expenses/ExpenseSkeleton.jsx
@@ -154,7 +154,7 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
         <thead>
           <tr>
             <th className="d-none d-sm-table-cell">
-              <div className="text-start ms-5">Expense Categort</div>
+              <div className="text-start ms-5">Expense Category</div>
             </th>
             <th className="d-none d-sm-table-cell">
               <div className="text-start ms-5">Payment Mode</div>
diff --git a/src/components/PaymentRequest/PaymentRequestList.jsx b/src/components/PaymentRequest/PaymentRequestList.jsx
index c8167e45..d7143939 100644
--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/src/components/PaymentRequest/PaymentRequestList.jsx
@@ -239,7 +239,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
         />
       )}
       <div className="card page-min-h table-responsive px-sm-4">
-        <div className="card-datatable" id="payment-request-table">
+        <div className="card-datatable mx-2" id="payment-request-table ">
           <table className="table border-top dataTable text-nowrap align-middle">
             <thead>
               <tr>
diff --git a/src/components/RecurringExpense/RecurringExpenseList.jsx b/src/components/RecurringExpense/RecurringExpenseList.jsx
index aa039448..2d413ead 100644
--- a/src/components/RecurringExpense/RecurringExpenseList.jsx
+++ b/src/components/RecurringExpense/RecurringExpenseList.jsx
@@ -181,10 +181,11 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
         />
       )}
 
-      <div className="card page-min-h table-responsive px-sm-4 ">
+      <div className="card page-min-h table-responsive px-sm-4">
         <div className="card-datatable" id="payment-request-table">
-          {Array.isArray(filteredData) && filteredData.length > 0 && (
-            <table className="table border-top dataTable text-nowrap align-middle">
+         <div className="mx-2">
+           {Array.isArray(filteredData) && filteredData.length > 0 && (
+            <table className="table border-top dataTable text-nowrap  align-middle">
               <thead>
                 <tr>
                   {recurringExpenseColumns.map((col) => (
@@ -284,6 +285,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
                 {isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)}
               </div>
             )}
+         </div>
         </div>
 
         {/* Pagination */}
diff --git a/src/pages/PaymentRequest/PaymentRequestPage.jsx b/src/pages/PaymentRequest/PaymentRequestPage.jsx
index 541a366e..db174309 100644
--- a/src/pages/PaymentRequest/PaymentRequestPage.jsx
+++ b/src/pages/PaymentRequest/PaymentRequestPage.jsx
@@ -73,7 +73,7 @@ const PaymentRequestPage = () => {
 
         {/* Top Bar */}
         <div className="card my-3 px-sm-4 px-0">
-          <div className="card-body py-2 px-0">
+          <div className="card-body py-2 px-0 mx-2">
             <div className="row align-items-center">
               <div className="col-6">
                 <input
@@ -81,11 +81,12 @@ const PaymentRequestPage = () => {
                   className="form-control form-control-sm w-auto"
                   placeholder="Search Payment Request"
                   value={search}
+                  style={{minWidth:"200px"}}
                   onChange={(e) => setSearch(e.target.value)}
                 />
               </div>
 
-              <div className="col-6 text-end mt-2 mt-sm-0">
+              <div className="col-6 text-end mt-sm-0">
                 <button
                   className="btn btn-sm btn-primary"
                   type="button"
@@ -145,7 +146,8 @@ const PaymentRequestPage = () => {
             size="md"
             closeModal={() => setIsExpenseGenerate({IsOpen:false, requestId: null})}
           >
-            <MakeExpense   onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} />
+            <MakeExpe
+            nse   onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} />
           </GlobalModel>
         )}
 
diff --git a/src/pages/RecurringExpense/RecurringExpensePage.jsx b/src/pages/RecurringExpense/RecurringExpensePage.jsx
index f7b36dd6..12c07e10 100644
--- a/src/pages/RecurringExpense/RecurringExpensePage.jsx
+++ b/src/pages/RecurringExpense/RecurringExpensePage.jsx
@@ -57,16 +57,17 @@ const RecurringExpensePage = () => {
 
         {/* Top Bar */}
         <div className="card my-3 px-sm-4 px-0">
-          <div className="card-body py-2 px-1">
+          <div className="card-body py-2 px-1 mx-2">
             <div className="row align-items-center mb-0">
               {/* Left Column: Search + Filter */}
               <div className="col-md-8 col-sm-12 mb-2 mb-md-0">
                 <div className="d-flex align-items-center flex-wrap gap-0">
                   <input
                     type="search"
-                    className="form-control form-control-sm w-25"
+                    className="form-control form-control-sm w-auto"
                     placeholder="Search Recurring Expense"
                     value={search}
+                    style={{minWidth:"200px"}}
                     onChange={(e) => setSearch(e.target.value)}
                   />
 
@@ -99,7 +100,7 @@ const RecurringExpensePage = () => {
               </div>
 
               {/* Right Column: Add Button */}
-              <div className="col-md-4 col-sm-12 text-md-end text-start">
+              <div className="col-md-4 col-sm-12 text-md-end text-end">
                 <button
                   className="btn btn-sm btn-primary"
                   type="button"