Merged develop into feature-country-manager-flag

package.json

@@ -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",

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;
@@ -321,6 +322,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -337,6 +339,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -353,6 +356,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -366,6 +370,7 @@ export default function PaymentRecord() {
 						}),
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -382,6 +387,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -395,6 +401,7 @@ export default function PaymentRecord() {
 						}),
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -417,10 +424,12 @@ export default function PaymentRecord() {
 	const defaultColumns = [
 		columnHelper.accessor("id", {
 			header: "ID",
+			id: "id",
 			cell: (info) => info.getValue(),
 		}),
 		columnHelper.accessor("corporate", {
 			header: "Corporate",
+			id: "corporate",
 			cell: (info) => {
 				const user = users.find((x) => x.id === info.row.original.corporate) as CorporateUser;
 				return (
@@ -436,10 +445,12 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("date", {
 			header: "Date",
+			id: "date",
 			cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
 		}),
 		columnHelper.accessor("value", {
 			header: "Amount",
+			id: "amount",
 			cell: (info) => (
 				<span>
 					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
@@ -448,6 +459,7 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("agent", {
 			header: "Country Manager",
+			id: "agent",
 			cell: (info) => (
 				<div
 					className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")}
@@ -458,10 +470,12 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("agentCommission", {
 			header: "Commission",
+			id: "agentCommission",
 			cell: (info) => <>{info.getValue()}%</>,
 		}),
 		columnHelper.accessor("agentValue", {
 			header: "Commission Value",
+			id: "agentValue",
 			cell: (info) => (
 				<span>
 					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
@@ -470,6 +484,7 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("isPaid", {
 			header: "Paid",
+			id: "isPaid",
 			cell: (info) => (
 				<Checkbox
 					isChecked={info.getValue()}
@@ -544,9 +559,24 @@ 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">
-								New Payment
+								<Button className="max-w-[200px]" variant="outline">
-							</Button>
+									<CSVLink
+										data={displayPayments}
+										headers={defaultColumns
+											.filter((e) => e.header)
+											.map((e) => ({
+												label: e.header?.toString() || "",
+												key: e.id || "",
+											}))}
+										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">

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"