From c1be1dafc807f6cbeab21515d4d1e831554f63b0 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 13 Nov 2025 17:45:05 +0530
Subject: [PATCH] Changes in Payment Request List view adding Due Date, Created
 at and Payee.

---
 .../PaymentRequest/PaymentRequestList.jsx     | 90 ++++++++++---------
 .../PaymentRequest/ViewPaymentRequest.jsx     |  2 +-
 2 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/src/components/PaymentRequest/PaymentRequestList.jsx b/src/components/PaymentRequest/PaymentRequestList.jsx
index d7143939..f97171b4 100644
--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/src/components/PaymentRequest/PaymentRequestList.jsx
@@ -44,9 +44,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
           displayField = "Status";
           break;
         case "submittedBy":
-          key = `${item?.createdBy?.firstName ?? ""} ${
-            item.createdBy?.lastName ?? ""
-          }`.trim();
+          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
+            }`.trim();
           displayField = "Submitted By";
           break;
         case "project":
@@ -93,40 +92,52 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       align: "text-start",
       getValue: (e) => e.title || "N/A",
     },
-    // { key: "payee", label: "Payee", align: "text-start" },
-    {
-      key: "SubmittedBy",
-      label: "Submitted By",
-      align: "text-start",
-      getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${
-          e.createdBy?.lastName ?? ""
-        }`.trim() || "N/A",
-      customRender: (e) => (
-        <div
-          className="d-flex align-items-center cursor-pointer"
-          onClick={() => navigate(`/employee/${e.createdBy?.id}`)}
-        >
-          <Avatar
-            size="xs"
-            classAvatar="m-0"
-            firstName={e.createdBy?.firstName}
-            lastName={e.createdBy?.lastName}
-          />
-          <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${
-              e.createdBy?.lastName ?? ""
-            }`.trim() || "N/A"}
-          </span>
-        </div>
-      ),
-    },
+    // {
+    //   key: "SubmittedBy",
+    //   label: "Submitted By",
+    //   align: "text-start",
+    //   getValue: (e) =>
+    //     `${e.createdBy?.firstName ?? ""} ${
+    //       e.createdBy?.lastName ?? ""
+    //     }`.trim() || "N/A",
+    //   customRender: (e) => (
+    //     <div
+    //       className="d-flex align-items-center cursor-pointer"
+    //       onClick={() => navigate(`/employee/${e.createdBy?.id}`)}
+    //     >
+    //       <Avatar
+    //         size="xs"
+    //         classAvatar="m-0"
+    //         firstName={e.createdBy?.firstName}
+    //         lastName={e.createdBy?.lastName}
+    //       />
+    //       <span className="text-truncate">
+    //         {`${e.createdBy?.firstName ?? ""} ${
+    //           e.createdBy?.lastName ?? ""
+    //         }`.trim() || "N/A"}
+    //       </span>
+    //     </div>
+    //   ),
+    // },
     {
       key: "createdAt",
-      label: "Submitted On",
+      label: "Created At",
       align: "text-start",
       getValue: (e) => formatUTCToLocalTime(e?.createdAt),
     },
+    {
+      key: "payee",
+      label: "Payee",
+      align: "text-start",
+      getValue: (e) => e.payee || "N/A",
+    },
+    {
+      key: "dueDate",
+      label: "Due Date",
+      align: "text-start",
+      getValue: (e) => formatUTCToLocalTime(e?.dueDate),
+    },
+
     {
       key: "amount",
       label: "Amount",
@@ -143,9 +154,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
       align: "text-center",
       getValue: (e) => (
         <span
-          className={`badge bg-label-${
-            getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
-          }`}
+          className={`badge bg-label-${getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
+            }`}
         >
           {e?.expenseStatus?.name || "Unknown"}
         </span>
@@ -171,8 +181,8 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
   const header = [
     "Request ID",
     "Request Title",
-    "Submitted By",
-    "Submitted On",
+    "Created At",
+    "Due Date",
     "Amount",
     "Status",
     "Action",
@@ -181,10 +191,10 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
 
   const grouped = groupBy
     ? Object.fromEntries(
-        Object.entries(groupByField(data?.data ?? [], groupBy)).sort(
-          ([keyA], [keyB]) => keyA.localeCompare(keyB)
-        )
+      Object.entries(groupByField(data?.data ?? [], groupBy)).sort(
+        ([keyA], [keyB]) => keyA.localeCompare(keyB)
       )
+    )
     : { All: data?.data ?? [] };
 
   const IsGroupedByDate = [
diff --git a/src/components/PaymentRequest/ViewPaymentRequest.jsx b/src/components/PaymentRequest/ViewPaymentRequest.jsx
index c1e6170e..878b37fb 100644
--- a/src/components/PaymentRequest/ViewPaymentRequest.jsx
+++ b/src/components/PaymentRequest/ViewPaymentRequest.jsx
@@ -199,7 +199,7 @@ const ViewPaymentRequest = ({ requestId }) => {
             <div className="row text-start">
               <div className="col-6 mb-3">
                 <label className="form-label me-2 mb-0 fw-semibold text-start">
-                  Supplier:
+                  Payee:
                 </label>
               </div>
               <div className="col-6 mb-3">