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)} - /> +
+
+ 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 */}