devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged develop into feature-payment-block-corporate-update

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-12-26 20:24:39 +00:00
parent cf90cae4eb f2aa377cfe
commit fd402bbd32
4 changed files with 76 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -49,6 +49,7 @@
"random-words": "^2.0.0", "random-words": "^2.0.0",
"react": "18.2.0", "react": "18.2.0",
"react-chartjs-2": "^5.2.0", "react-chartjs-2": "^5.2.0",
"react-csv": "^2.2.2",
"react-currency-input-field": "^3.6.12", "react-currency-input-field": "^3.6.12",
"react-datepicker": "^4.18.0", "react-datepicker": "^4.18.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
@@ -78,6 +79,7 @@
"@types/lodash": "^4.14.191", "@types/lodash": "^4.14.191",
"@types/nodemailer": "^6.4.11", "@types/nodemailer": "^6.4.11",
"@types/nodemailer-express-handlebars": "^4.0.3", "@types/nodemailer-express-handlebars": "^4.0.3",
"@types/react-csv": "^1.1.10",
"@types/react-datepicker": "^4.15.1", "@types/react-datepicker": "^4.15.1",
"@types/uuid": "^9.0.1", "@types/uuid": "^9.0.1",
"@types/wavesurfer.js": "^6.0.6", "@types/wavesurfer.js": "^6.0.6",

36
src/pages/payment-record.tsx
View File

@@ -26,6 +26,7 @@ import ReactDatePicker from "react-datepicker";
import moment from "moment"; import moment from "moment";
import PaymentAssetManager from "@/components/PaymentAssetManager"; import PaymentAssetManager from "@/components/PaymentAssetManager";
import {toFixedNumber} from "@/utils/number"; import {toFixedNumber} from "@/utils/number";
import {CSVLink} from "react-csv";
export const getServerSideProps = withIronSessionSsr(({req, res}) => { export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user; const user = req.session.user;
@@ -322,6 +323,7 @@ export default function PaymentRecord() {
return [ return [
columnHelper.accessor("corporateTransfer", { columnHelper.accessor("corporateTransfer", {
header: "Corporate transfer", header: "Corporate transfer",
id: "corporateTransfer",
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
@@ -338,6 +340,7 @@ export default function PaymentRecord() {
return [ return [
columnHelper.accessor("commissionTransfer", { columnHelper.accessor("commissionTransfer", {
header: "Commission transfer", header: "Commission transfer",
id: "commissionTransfer",
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
@@ -354,6 +357,7 @@ export default function PaymentRecord() {
return [ return [
columnHelper.accessor("corporateTransfer", { columnHelper.accessor("corporateTransfer", {
header: "Corporate transfer", header: "Corporate transfer",
id: "corporateTransfer",
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
@@ -367,6 +371,7 @@ export default function PaymentRecord() {
}), }),
columnHelper.accessor("commissionTransfer", { columnHelper.accessor("commissionTransfer", {
header: "Commission transfer", header: "Commission transfer",
id: "commissionTransfer",
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
@@ -383,6 +388,7 @@ export default function PaymentRecord() {
return [ return [
columnHelper.accessor("corporateTransfer", { columnHelper.accessor("corporateTransfer", {
header: "Corporate transfer", header: "Corporate transfer",
id: "corporateTransfer",
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
@@ -396,6 +402,7 @@ export default function PaymentRecord() {
}), }),
columnHelper.accessor("commissionTransfer", { columnHelper.accessor("commissionTransfer", {
header: "Commission transfer", header: "Commission transfer",
id: "commissionTransfer",
cell: (info) => ( cell: (info) => (
<div className={containerClassName}> <div className={containerClassName}>
<PaymentAssetManager <PaymentAssetManager
@@ -418,10 +425,12 @@ export default function PaymentRecord() {
const defaultColumns = [ const defaultColumns = [
columnHelper.accessor("id", { columnHelper.accessor("id", {
header: "ID", header: "ID",
id: "id",
cell: (info) => info.getValue(), cell: (info) => info.getValue(),
}), }),
columnHelper.accessor("corporate", { columnHelper.accessor("corporate", {
header: "Corporate", header: "Corporate",
id: "corporate",
cell: (info) => { cell: (info) => {
const user = users.find((x) => x.id === info.row.original.corporate) as CorporateUser; const user = users.find((x) => x.id === info.row.original.corporate) as CorporateUser;
return ( return (
@@ -437,10 +446,12 @@ export default function PaymentRecord() {
}), }),
columnHelper.accessor("date", { columnHelper.accessor("date", {
header: "Date", header: "Date",
id: "date",
cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>, cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
}), }),
columnHelper.accessor("value", { columnHelper.accessor("value", {
header: "Amount", header: "Amount",
id: "amount",
cell: (info) => ( cell: (info) => (
<span> <span>
{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label} {toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
@@ -449,6 +460,7 @@ export default function PaymentRecord() {
}), }),
columnHelper.accessor("agent", { columnHelper.accessor("agent", {
header: "Country Manager", header: "Country Manager",
id: "agent",
cell: (info) => ( cell: (info) => (
<div <div
className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")} className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")}
@@ -459,10 +471,12 @@ export default function PaymentRecord() {
}), }),
columnHelper.accessor("agentCommission", { columnHelper.accessor("agentCommission", {
header: "Commission", header: "Commission",
id: "agentCommission",
cell: (info) => <>{info.getValue()}%</>, cell: (info) => <>{info.getValue()}%</>,
}), }),
columnHelper.accessor("agentValue", { columnHelper.accessor("agentValue", {
header: "Commission Value", header: "Commission Value",
id: "agentValue",
cell: (info) => ( cell: (info) => (
<span> <span>
{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label} {toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
@@ -471,6 +485,7 @@ export default function PaymentRecord() {
}), }),
columnHelper.accessor("isPaid", { columnHelper.accessor("isPaid", {
header: "Paid", header: "Paid",
id: "isPaid",
cell: (info) => ( cell: (info) => (
<Checkbox <Checkbox
isChecked={info.getValue()} isChecked={info.getValue()}
@@ -578,9 +593,24 @@ export default function PaymentRecord() {
<div className="w-full flex flex-end justify-between p-2"> <div className="w-full flex flex-end justify-between p-2">
<h1 className="text-2xl font-semibold">Payment Record</h1> <h1 className="text-2xl font-semibold">Payment Record</h1>
{(user.type === "developer" || user.type === "admin") && ( {(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>
<div className="flex gap-8 w-full"> <div className="flex gap-8 w-full">

47
src/pages/profile.tsx
View File

@@ -361,26 +361,37 @@ export default function Home() {
</div> </div>
</form> </form>
</div> </div>
<div <div className="flex flex-col gap-6 w-48">
className="flex flex-col gap-3 items-center w-48 h-fit cursor-pointer group" <div
onClick={() => (profilePictureInput.current as any)?.click()}> className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
<div className="relative overflow-hidden h-48 w-48 rounded-full"> onClick={() => (profilePictureInput.current as any)?.click()}>
<div <div className="relative overflow-hidden h-48 w-48 rounded-full">
className={clsx( <div
"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100", className={clsx(
"transition ease-in-out duration-300", "absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
)}> "transition ease-in-out duration-300",
<BsCamera className="text-6xl text-mti-purple-ultralight/80" /> )}>
<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
</div>
<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
</div> </div>
<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" /> <input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
<span
onClick={() => (profilePictureInput.current as any)?.click()}
className="cursor-pointer text-mti-purple-light text-sm">
Change picture
</span>
<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
</div> </div>
<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} /> {user.type === 'agent' && (
<span <div className="flag items-center h-fit">
onClick={() => (profilePictureInput.current as any)?.click()} <img
className="cursor-pointer text-mti-purple-light text-sm"> alt={user.demographicInformation?.country.toLowerCase() + '_flag'}
Change picture src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
</span> width="320"
<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6> />
</div>
)}
</div> </div>
</div> </div>
<div className="flex flex-col gap-4 mt-8 mb-20"> <div className="flex flex-col gap-4 mt-8 mb-20">

12
yarn.lock
View File

@@ -1287,6 +1287,13 @@
resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz" resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz"
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== 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": "@types/react-datepicker@^4.15.1":
version "4.15.1" version "4.15.1"
resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.15.1.tgz#a66fee520f2a31f83b45f4ed7f28af7296e11d0c" 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" resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz"
integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA== 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: react-currency-input-field@^3.6.12:
version "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" resolved "https://registry.yarnpkg.com/react-currency-input-field/-/react-currency-input-field-3.6.12.tgz#6c59bec50b9a769459c971f94f9a67b7bf9046f7"