Added Export CSV
This commit is contained in:
@@ -49,6 +49,7 @@
|
||||
"random-words": "^2.0.0",
|
||||
"react": "18.2.0",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-csv": "^2.2.2",
|
||||
"react-currency-input-field": "^3.6.12",
|
||||
"react-datepicker": "^4.18.0",
|
||||
"react-dom": "18.2.0",
|
||||
@@ -78,6 +79,7 @@
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/nodemailer": "^6.4.11",
|
||||
"@types/nodemailer-express-handlebars": "^4.0.3",
|
||||
"@types/react-csv": "^1.1.10",
|
||||
"@types/react-datepicker": "^4.15.1",
|
||||
"@types/uuid": "^9.0.1",
|
||||
"@types/wavesurfer.js": "^6.0.6",
|
||||
|
||||
@@ -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)}>
|
||||
<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">
|
||||
|
||||
12
yarn.lock
12
yarn.lock
@@ -1287,6 +1287,13 @@
|
||||
resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz"
|
||||
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
|
||||
|
||||
"@types/react-csv@^1.1.10":
|
||||
version "1.1.10"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-csv/-/react-csv-1.1.10.tgz#b4e292d7330d2fa12062c579c752f254f559bf56"
|
||||
integrity sha512-PESAyASL7Nfi/IyBR3ufd8qZkyoS+7jOylKmJxRZUZLFASLo4NZaRsJ8rNP8pCcbIziADyWBbLPD1nPddhsL4g==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-datepicker@^4.15.1":
|
||||
version "4.15.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.15.1.tgz#a66fee520f2a31f83b45f4ed7f28af7296e11d0c"
|
||||
@@ -4519,6 +4526,11 @@ react-chartjs-2@^5.2.0:
|
||||
resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz"
|
||||
integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
|
||||
|
||||
react-csv@^2.2.2:
|
||||
version "2.2.2"
|
||||
resolved "https://registry.yarnpkg.com/react-csv/-/react-csv-2.2.2.tgz#5bbf0d72a846412221a14880f294da9d6def9bfb"
|
||||
integrity sha512-RG5hOcZKZFigIGE8LxIEV/OgS1vigFQT4EkaHeKgyuCbUAu9Nbd/1RYq++bJcJJ9VOqO/n9TZRADsXNDR4VEpw==
|
||||
|
||||
react-currency-input-field@^3.6.12:
|
||||
version "3.6.12"
|
||||
resolved "https://registry.yarnpkg.com/react-currency-input-field/-/react-currency-input-field-3.6.12.tgz#6c59bec50b9a769459c971f94f9a67b7bf9046f7"
|
||||
|
||||
Reference in New Issue
Block a user