From fea8e0672ebadd412e1bd6c4c38a5aa3d36b85fe Mon Sep 17 00:00:00 2001 From: Joao Ramos Date: Sat, 23 Dec 2023 00:01:24 +0000 Subject: [PATCH 1/4] Added Export CSV --- package.json | 2 ++ src/pages/payment-record.tsx | 21 ++++++++++++++++++--- yarn.lock | 12 ++++++++++++ 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index b8266c65..1a4b6ec2 100644 --- a/package.json +++ b/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", diff --git a/src/pages/payment-record.tsx b/src/pages/payment-record.tsx index e123779f..ed4be520 100644 --- a/src/pages/payment-record.tsx +++ b/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() {

Payment Record

{(user.type === "developer" || user.type === "admin") && ( - +
+ + +
)}
diff --git a/yarn.lock b/yarn.lock index 6b4aa13c..24bb6199 100644 --- a/yarn.lock +++ b/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" From cc655fed6c1777efdbe7530fcbcd8c1ec403b81e Mon Sep 17 00:00:00 2001 From: Joao Ramos Date: Sat, 23 Dec 2023 14:51:28 +0000 Subject: [PATCH 2/4] Added flag display for agents --- src/pages/profile.tsx | 48 +++++++++++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 18 deletions(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index 53a565aa..b632ee46 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -159,6 +159,7 @@ export default function Home() { setIsLoading(false); }; + debugger; return ( <> @@ -361,26 +362,37 @@ export default function Home() {
-
(profilePictureInput.current as any)?.click()}> -
-
- +
+
(profilePictureInput.current as any)?.click()}> +
+
+ +
+ {user.name}
- {user.name} + + (profilePictureInput.current as any)?.click()} + className="cursor-pointer text-mti-purple-light text-sm"> + Change picture + +
{USER_TYPE_LABELS[user.type]}
- - (profilePictureInput.current as any)?.click()} - className="cursor-pointer text-mti-purple-light text-sm"> - Change picture - -
{USER_TYPE_LABELS[user.type]}
+ {user.type === 'agent' && ( +
+ {user.demographicInformation?.country.toLowerCase() +
+ )}
From 938a5e9c7cb65c671c90c91dfc383551904af499 Mon Sep 17 00:00:00 2001 From: Joao Ramos Date: Sat, 23 Dec 2023 14:52:56 +0000 Subject: [PATCH 3/4] Removed debugger --- src/pages/profile.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx index b632ee46..3d142ed4 100644 --- a/src/pages/profile.tsx +++ b/src/pages/profile.tsx @@ -159,7 +159,6 @@ export default function Home() { setIsLoading(false); }; - debugger; return ( <> From 1c645fcba2fa6be4fd24c55ac63d3a8d9599e877 Mon Sep 17 00:00:00 2001 From: Tiago Ribeiro Date: Sat, 23 Dec 2023 20:44:04 +0000 Subject: [PATCH 4/4] Added an ID to every payment record column --- src/pages/payment-record.tsx | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/pages/payment-record.tsx b/src/pages/payment-record.tsx index ed4be520..ef72c476 100644 --- a/src/pages/payment-record.tsx +++ b/src/pages/payment-record.tsx @@ -26,7 +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"; +import {CSVLink} from "react-csv"; export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; @@ -322,6 +322,7 @@ export default function PaymentRecord() { return [ columnHelper.accessor("corporateTransfer", { header: "Corporate transfer", + id: "corporateTransfer", 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 ( @@ -437,10 +445,12 @@ export default function PaymentRecord() { }), columnHelper.accessor("date", { header: "Date", + id: "date", cell: (info) => {moment(info.getValue()).format("DD/MM/YYYY")}, }), columnHelper.accessor("value", { header: "Amount", + id: "amount", cell: (info) => ( {toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label} @@ -449,6 +459,7 @@ export default function PaymentRecord() { }), columnHelper.accessor("agent", { header: "Country Manager", + id: "agent", cell: (info) => (
<>{info.getValue()}%, }), columnHelper.accessor("agentValue", { header: "Commission Value", + id: "agentValue", cell: (info) => ( {toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label} @@ -471,6 +484,7 @@ export default function PaymentRecord() { }), columnHelper.accessor("isPaid", { header: "Paid", + id: "isPaid", cell: (info) => ( e.header).map((e) => ({ - label: e.header, - key: e.accessorKey, - }))} - filename="payment-records.csv" - > + headers={defaultColumns + .filter((e) => e.header) + .map((e) => ({ + label: e.header?.toString() || "", + key: e.id || "", + }))} + filename="payment-records.csv"> Download CSV