Added Export CSV

src/pages/payment-record.tsx

@@ -26,6 +26,7 @@ import ReactDatePicker from "react-datepicker";
 import moment from "moment";
 import PaymentAssetManager from "@/components/PaymentAssetManager";
 import {toFixedNumber} from "@/utils/number";
+import { CSVLink } from "react-csv";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -544,9 +545,23 @@ export default function PaymentRecord() {
 					<div className="w-full flex flex-end justify-between p-2">
 						<h1 className="text-2xl font-semibold">Payment Record</h1>
 						{(user.type === "developer" || user.type === "admin") && (
-							<Button className="w-full max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
-								New Payment
-							</Button>
+							<div className="flex justify-end gap-2">
+								<Button className="max-w-[200px]" variant="outline">
+									<CSVLink
+										data={displayPayments}
+										headers={defaultColumns.filter((e) => e.header).map((e) => ({
+											label: e.header,
+											key: e.accessorKey,
+										}))}
+										filename="payment-records.csv"
+										>
+										Download CSV
+									</CSVLink>
+								</Button>
+								<Button className="max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
+									New Payment
+								</Button>
+							</div>
 						)}
 					</div>
 					<div className="flex gap-8 w-full">