diff --git a/src/components/PaymentRequest/PaymentRequestList.jsx b/src/components/PaymentRequest/PaymentRequestList.jsx
index 0c9edfd5..1cd1b3bb 100644
--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/src/components/PaymentRequest/PaymentRequestList.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import {
EXPENSE_DRAFT,
EXPENSE_REJECTEDBY,
@@ -22,7 +22,7 @@ import Error from "../common/Error";
import Pagination from "../common/Pagination";
import PaymentRequestFilterChips from "./PaymentRequestFilterChips";
-const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy" }) => {
+const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy", tableRef, onDataFiltered }) => {
const { setManageRequest, setVieRequest } = usePaymentRequestContext();
const navigate = useNavigate();
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -30,6 +30,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
const SelfId = useSelector(
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
);
+
const groupByField = (items, field) => {
return items.reduce((acc, item) => {
let key;
@@ -149,6 +150,12 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
debouncedSearch
);
+ useEffect(() => {
+ if (onDataFiltered) {
+ onDataFiltered(data?.data ?? []);
+ }
+ }, [data, onDataFiltered]);
+
if (isError) {
return ;
}
@@ -222,7 +229,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
paramData={deletingId}
/>
)}
-
+
))}
- | Action |
+ Action |
@@ -262,7 +269,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
{items?.map((paymentRequest) => (
-
+
{paymentRequestColumns.map(
(col) =>
(col.isAlwaysVisible || groupBy !== col.key) && (
diff --git a/src/components/PaymentRequest/handlePaymentRequestExport.jsx b/src/components/PaymentRequest/handlePaymentRequestExport.jsx
new file mode 100644
index 00000000..1cf0f433
--- /dev/null
+++ b/src/components/PaymentRequest/handlePaymentRequestExport.jsx
@@ -0,0 +1,58 @@
+import moment from "moment";
+import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
+
+const handlePaymentRequestExport = (type, requests, tableRef) => {
+ if (!requests || requests.length === 0) return;
+
+ // Map export data
+ const exportData = requests.map((item) => ({
+ "Request ID": item?.paymentRequestUID ?? "-",
+ "Title": item?.title ?? "-",
+ "Payee": item?.payee ?? "-",
+ "Amount": item?.amount?.toLocaleString() ?? "-",
+ "Currency": item?.currency?.currencyCode ?? "-",
+ "Created At": item?.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "-",
+ "Due Date": item?.dueDate ? moment(item.dueDate).format("DD-MMM-YYYY") : "-",
+ "Status": item?.expenseStatus?.name ?? "-",
+ "Submitted By": `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim() || "-",
+ "Project": item?.project?.name ?? "-",
+ }));
+
+ // Define column order
+ const columns = [
+ "Request ID",
+ "Title",
+ "Payee",
+ "Amount",
+ "Currency",
+ "Created At",
+ "Due Date",
+ "Status",
+ "Submitted By",
+ "Project",
+ ];
+
+ switch (type) {
+ case "csv":
+ exportToCSV(exportData, "payment-requests", columns);
+ break;
+
+ case "excel":
+ exportToExcel(exportData, "payment-requests", columns);
+ break;
+
+ case "pdf":
+ exportToPDF(exportData, "payment-requests", columns);
+ break;
+
+ case "print":
+ if (tableRef?.current) printTable(tableRef.current);
+ break;
+
+ default:
+ console.warn("Unhandled export type:", type);
+ break;
+ }
+};
+
+export default handlePaymentRequestExport;
diff --git a/src/pages/PaymentRequest/PaymentRequestPage.jsx b/src/pages/PaymentRequest/PaymentRequestPage.jsx
index 7b7d2ff1..03be604a 100644
--- a/src/pages/PaymentRequest/PaymentRequestPage.jsx
+++ b/src/pages/PaymentRequest/PaymentRequestPage.jsx
@@ -9,6 +9,7 @@ import { defaultPaymentRequestFilter } from "../../components/PaymentRequest/Pay
import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
import PreviewDocument from "../../components/Expenses/PreviewDocument";
import MakeExpense from "../../components/PaymentRequest/MakeExpense";
+import handlePaymentRequestExport from "../../components/PaymentRequest/handlePaymentRequestExport";
export const PaymentRequestContext = createContext();
export const usePaymentRequestContext = () => {
@@ -30,7 +31,8 @@ const PaymentRequestPage = () => {
const [search, setSearch] = useState("");
const updatedRef = useRef();
const { setOffcanvasContent, setShowTrigger } = useFab();
-
+ const tableRef = useRef(null);
+ const [filteredData, setFilteredData] = useState([]);
const contextValue = {
setManageRequest,
setVieRequest,
@@ -76,6 +78,10 @@ const PaymentRequestPage = () => {
});
};
+ const handleExport = (type) => {
+ handlePaymentRequestExport(type, filteredData, tableRef); // <-- corrected
+ };
+
return (
@@ -92,18 +98,19 @@ const PaymentRequestPage = () => {
-
-
setSearch(e.target.value)}
- />
+
-
-
+
+
+ {/* 3-Dots Dropdown */}
+
+
+
+
+ -
+
+
+
+
+
+ -
+
+
+
+ -
+
+
+
+ -
+
+
+
+
+
+
@@ -129,6 +178,8 @@ const PaymentRequestPage = () => {
filterData={filterData}
removeFilterChip={handleRemoveChip}
clearFilter={clearFilter}
+ tableRef={tableRef}
+ onDataFiltered={setFilteredData}
/>
{/* Add/Edit Modal */}