1469 lines
49 KiB
TypeScript
1469 lines
49 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import Head from "next/head";
|
|
import { withIronSessionSsr } from "iron-session/next";
|
|
import { sessionOptions } from "@/lib/session";
|
|
import useUser from "@/hooks/useUser";
|
|
import { toast, ToastContainer } from "react-toastify";
|
|
import Layout from "@/components/High/Layout";
|
|
import { shouldRedirectHome } from "@/utils/navigation.disabled";
|
|
import usePayments from "@/hooks/usePayments";
|
|
import usePaypalPayments from "@/hooks/usePaypalPayments";
|
|
import { Payment, PaypalPayment } from "@/interfaces/paypal";
|
|
import {
|
|
CellContext,
|
|
createColumnHelper,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
HeaderGroup,
|
|
Table,
|
|
useReactTable,
|
|
} from "@tanstack/react-table";
|
|
import { CURRENCIES } from "@/resources/paypal";
|
|
import { BsTrash } from "react-icons/bs";
|
|
import axios from "axios";
|
|
import { useEffect, useState, useMemo } from "react";
|
|
import { AgentUser, CorporateUser, User } from "@/interfaces/user";
|
|
import UserCard from "@/components/UserCard";
|
|
import Modal from "@/components/Modal";
|
|
import clsx from "clsx";
|
|
import useUsers from "@/hooks/useUsers";
|
|
import Checkbox from "@/components/Low/Checkbox";
|
|
import Button from "@/components/Low/Button";
|
|
import Select from "react-select";
|
|
import Input from "@/components/Low/Input";
|
|
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 { Tab } from "@headlessui/react";
|
|
import { useListSearch } from "@/hooks/useListSearch";
|
|
export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
|
|
const user = req.session.user;
|
|
|
|
if (!user || !user.isVerified) {
|
|
res.setHeader("location", "/login");
|
|
res.statusCode = 302;
|
|
res.end();
|
|
return {
|
|
props: {
|
|
user: null,
|
|
},
|
|
};
|
|
}
|
|
|
|
if (shouldRedirectHome(user) || !["admin", "developer"].includes(user.type)) {
|
|
res.setHeader("location", "/");
|
|
res.statusCode = 302;
|
|
res.end();
|
|
return {
|
|
props: {
|
|
user: null,
|
|
},
|
|
};
|
|
}
|
|
|
|
return {
|
|
props: { user: req.session.user },
|
|
};
|
|
}, sessionOptions);
|
|
|
|
const columnHelper = createColumnHelper<Payment>();
|
|
const paypalColumnHelper = createColumnHelper<PaypalPaymentWithUserData>();
|
|
|
|
const PaymentCreator = ({
|
|
onClose,
|
|
reload,
|
|
showComission = false,
|
|
}: {
|
|
onClose: () => void;
|
|
reload: () => void;
|
|
showComission: boolean;
|
|
}) => {
|
|
const [corporate, setCorporate] = useState<CorporateUser>();
|
|
const [date, setDate] = useState<Date>(new Date());
|
|
|
|
const { users } = useUsers();
|
|
|
|
const price = corporate?.corporateInformation?.payment?.value || 0;
|
|
const commission = corporate?.corporateInformation?.payment?.commission || 0;
|
|
const currency = corporate?.corporateInformation?.payment?.currency || "EUR";
|
|
|
|
const referralAgent = useMemo(() => {
|
|
if (corporate?.corporateInformation?.referralAgent) {
|
|
return users.find(
|
|
(u) => u.id === corporate.corporateInformation.referralAgent
|
|
);
|
|
}
|
|
|
|
return undefined;
|
|
}, [corporate?.corporateInformation?.referralAgent, users]);
|
|
|
|
const submit = () => {
|
|
axios
|
|
.post(`/api/payments`, {
|
|
corporate: corporate?.id,
|
|
agent: referralAgent?.id,
|
|
agentCommission: commission,
|
|
agentValue: toFixedNumber((commission! / 100) * price!, 2),
|
|
currency,
|
|
value: price,
|
|
isPaid: false,
|
|
date: date.toISOString(),
|
|
})
|
|
.then(() => {
|
|
toast.success("New payment has been created successfully!");
|
|
reload();
|
|
onClose();
|
|
})
|
|
.catch(() => {
|
|
toast.error("Something went wrong, please try again later!");
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<h1 className="text-2xl font-semibold">New Payment</h1>
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-3">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Corporate account *
|
|
</label>
|
|
<Select
|
|
className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
options={(
|
|
users.filter((u) => u.type === "corporate") as CorporateUser[]
|
|
).map((user) => ({
|
|
value: user.id,
|
|
meta: user,
|
|
label: `${
|
|
user.corporateInformation?.companyInformation?.name || user.name
|
|
} - ${user.email}`,
|
|
}))}
|
|
defaultValue={{ value: "undefined", label: "Select an account" }}
|
|
onChange={(value) =>
|
|
setCorporate((value as any)?.meta ?? undefined)
|
|
}
|
|
menuPortalTarget={document?.body}
|
|
styles={{
|
|
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused
|
|
? "#D5D9F0"
|
|
: state.isSelected
|
|
? "#7872BF"
|
|
: "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Price *
|
|
</label>
|
|
<div className="w-full grid grid-cols-5 gap-2">
|
|
<Input
|
|
name="paymentValue"
|
|
onChange={() => {}}
|
|
type="number"
|
|
value={price}
|
|
defaultValue={0}
|
|
className="col-span-3"
|
|
disabled
|
|
/>
|
|
<Select
|
|
className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-mti-gray-platinum/40 text-mti-gray-dim cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
options={CURRENCIES.map(({ label, currency }) => ({
|
|
value: currency,
|
|
label,
|
|
}))}
|
|
defaultValue={{
|
|
value: currency || "EUR",
|
|
label:
|
|
CURRENCIES.find((c) => c.currency === currency)?.label ||
|
|
"Euro",
|
|
}}
|
|
onChange={() => {}}
|
|
value={{
|
|
value: currency || "EUR",
|
|
label:
|
|
CURRENCIES.find((c) => c.currency === currency)?.label ||
|
|
"Euro",
|
|
}}
|
|
menuPortalTarget={document?.body}
|
|
styles={{
|
|
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused
|
|
? "#D5D9F0"
|
|
: state.isSelected
|
|
? "#7872BF"
|
|
: "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
isDisabled
|
|
/>
|
|
</div>
|
|
</div>
|
|
{showComission && (
|
|
<div className="flex gap-4 w-full">
|
|
<div className="flex flex-col w-full gap-3">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Commission *
|
|
</label>
|
|
<Input
|
|
name="commission"
|
|
onChange={() => {}}
|
|
type="number"
|
|
defaultValue={0}
|
|
value={commission}
|
|
disabled
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col w-full gap-3">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Commission Value*
|
|
</label>
|
|
<Input
|
|
name="commissionValue"
|
|
value={`${(commission! / 100) * price!} ${
|
|
CURRENCIES.find((c) => c.currency === currency)?.label
|
|
}`}
|
|
onChange={() => null}
|
|
type="text"
|
|
defaultValue={0}
|
|
disabled
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex gap-4">
|
|
<div className="flex flex-col w-full gap-3">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Date *
|
|
</label>
|
|
<ReactDatePicker
|
|
className={clsx(
|
|
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
|
"hover:border-mti-purple tooltip",
|
|
"transition duration-300 ease-in-out"
|
|
)}
|
|
dateFormat="dd/MM/yyyy"
|
|
selected={moment(date).toDate()}
|
|
onChange={(date) => setDate(date ?? new Date())}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col w-full gap-3">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Country Manager *
|
|
</label>
|
|
<Input
|
|
name="referralAgent"
|
|
value={
|
|
referralAgent
|
|
? `${referralAgent.name} - ${referralAgent.email}`
|
|
: "No country manager"
|
|
}
|
|
onChange={() => null}
|
|
type="text"
|
|
defaultValue={"No country manager"}
|
|
disabled
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full justify-end items-center gap-8 mt-4">
|
|
<Button
|
|
variant="outline"
|
|
color="red"
|
|
className="w-full max-w-[200px]"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
className="w-full max-w-[200px]"
|
|
onClick={submit}
|
|
disabled={!corporate || !price}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const IS_PAID_OPTIONS = [
|
|
{
|
|
value: null,
|
|
label: "All",
|
|
},
|
|
{
|
|
value: false,
|
|
label: "Unpaid",
|
|
},
|
|
{
|
|
value: true,
|
|
label: "Paid",
|
|
},
|
|
];
|
|
|
|
const IS_FILE_SUBMITTED_OPTIONS = [
|
|
{
|
|
value: null,
|
|
label: "All",
|
|
},
|
|
{
|
|
value: false,
|
|
label: "Submitted",
|
|
},
|
|
{
|
|
value: true,
|
|
label: "Not Submitted",
|
|
},
|
|
];
|
|
|
|
const CSV_PAYMENTS_WHITELISTED_KEYS = [
|
|
"corporateId",
|
|
"corporate",
|
|
"date",
|
|
"amount",
|
|
"agent",
|
|
"agentCommission",
|
|
"agentValue",
|
|
"isPaid",
|
|
];
|
|
|
|
const CSV_PAYPAL_WHITELISTED_KEYS = [
|
|
"orderId",
|
|
"status",
|
|
"name",
|
|
"email",
|
|
"value",
|
|
"createdAt",
|
|
"subscriptionExpirationDate",
|
|
];
|
|
|
|
interface SimpleCSVColumn {
|
|
key: string;
|
|
label: string;
|
|
index: number;
|
|
}
|
|
|
|
interface PaypalPaymentWithUserData extends PaypalPayment {
|
|
name: string;
|
|
email: string;
|
|
}
|
|
|
|
const paypalFilterRows = [["email"], ["name"]];
|
|
export default function PaymentRecord() {
|
|
const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
|
|
const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
|
|
const [isCreatingPayment, setIsCreatingPayment] = useState(false);
|
|
const [filters, setFilters] = useState<
|
|
{ filter: (p: Payment) => boolean; id: string }[]
|
|
>([]);
|
|
const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);
|
|
|
|
const [corporate, setCorporate] = useState<User>();
|
|
const [agent, setAgent] = useState<User>();
|
|
|
|
const { user } = useUser({ redirectTo: "/login" });
|
|
const { users, reload: reloadUsers } = useUsers();
|
|
const { payments: originalPayments, reload: reloadPayment } = usePayments();
|
|
const { payments: paypalPayments, reload: reloadPaypalPayment } =
|
|
usePaypalPayments();
|
|
const [startDate, setStartDate] = useState<Date | null>(
|
|
moment("01/01/2023").toDate()
|
|
);
|
|
const [endDate, setEndDate] = useState<Date | null>(
|
|
moment().endOf("day").toDate()
|
|
);
|
|
const [paid, setPaid] = useState<Boolean | null>(IS_PAID_OPTIONS[0].value);
|
|
const [commissionTransfer, setCommissionTransfer] = useState<Boolean | null>(
|
|
IS_FILE_SUBMITTED_OPTIONS[0].value
|
|
);
|
|
const [corporateTransfer, setCorporateTransfer] = useState<Boolean | null>(
|
|
IS_FILE_SUBMITTED_OPTIONS[0].value
|
|
);
|
|
const reload = () => {
|
|
reloadUsers();
|
|
reloadPayment();
|
|
};
|
|
|
|
const payments = useMemo(() => {
|
|
return originalPayments.filter((p: Payment) => {
|
|
const date = moment(p.date);
|
|
return date.isAfter(startDate) && date.isBefore(endDate);
|
|
});
|
|
}, [originalPayments, startDate, endDate]);
|
|
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
setDisplayPayments(
|
|
filters
|
|
.map((f) => f.filter)
|
|
.reduce((d, f) => d.filter(f), payments)
|
|
.sort((a, b) => moment(b.date).diff(moment(a.date)))
|
|
);
|
|
}, [payments, filters]);
|
|
|
|
useEffect(() => {
|
|
if (user && user.type === "agent") {
|
|
setAgent(user);
|
|
}
|
|
}, [user]);
|
|
|
|
useEffect(() => {
|
|
setFilters((prev) => [
|
|
...prev.filter((x) => x.id !== "agent-filter"),
|
|
...(!agent
|
|
? []
|
|
: [
|
|
{
|
|
id: "agent-filter",
|
|
filter: (p: Payment) => p.agent === agent.id,
|
|
},
|
|
]),
|
|
]);
|
|
}, [agent]);
|
|
|
|
useEffect(() => {
|
|
setFilters((prev) => [
|
|
...prev.filter((x) => x.id !== "corporate-filter"),
|
|
...(!corporate
|
|
? []
|
|
: [
|
|
{
|
|
id: "corporate-filter",
|
|
filter: (p: Payment) => p.corporate === corporate.id,
|
|
},
|
|
]),
|
|
]);
|
|
}, [corporate]);
|
|
|
|
useEffect(() => {
|
|
setFilters((prev) => [
|
|
...prev.filter((x) => x.id !== "paid"),
|
|
...(typeof paid !== "boolean"
|
|
? []
|
|
: [{ id: "paid", filter: (p: Payment) => p.isPaid === paid }]),
|
|
]);
|
|
}, [paid]);
|
|
|
|
useEffect(() => {
|
|
setFilters((prev) => [
|
|
...prev.filter((x) => x.id !== "commissionTransfer"),
|
|
...(typeof commissionTransfer !== "boolean"
|
|
? []
|
|
: [
|
|
{
|
|
id: "commissionTransfer",
|
|
filter: (p: Payment) =>
|
|
!p.commissionTransfer === commissionTransfer,
|
|
},
|
|
]),
|
|
]);
|
|
}, [commissionTransfer]);
|
|
|
|
useEffect(() => {
|
|
setFilters((prev) => [
|
|
...prev.filter((x) => x.id !== "corporateTransfer"),
|
|
...(typeof corporateTransfer !== "boolean"
|
|
? []
|
|
: [
|
|
{
|
|
id: "corporateTransfer",
|
|
filter: (p: Payment) =>
|
|
!p.corporateTransfer === corporateTransfer,
|
|
},
|
|
]),
|
|
]);
|
|
}, [corporateTransfer]);
|
|
|
|
useEffect(() => {
|
|
if (user && user.type === "corporate") return setCorporate(user);
|
|
if (user && user.type === "agent") return setAgent(user);
|
|
}, [user]);
|
|
|
|
const updatePayment = (payment: Payment, key: string, value: any) => {
|
|
axios
|
|
.patch(`api/payments/${payment.id}`, { ...payment, [key]: value })
|
|
.then(() => toast.success("Updated the payment"))
|
|
.finally(reload);
|
|
};
|
|
|
|
const deletePayment = (id: string) => {
|
|
if (!confirm(`Are you sure you want to delete this payment?`)) return;
|
|
|
|
axios
|
|
.delete(`/api/payments/${id}`)
|
|
.then(() => toast.success(`Deleted the "${id}" payment`))
|
|
.catch((reason) => {
|
|
if (reason.response.status === 404) {
|
|
toast.error("Exam not found!");
|
|
return;
|
|
}
|
|
|
|
if (reason.response.status === 403) {
|
|
toast.error(
|
|
"You do not have permission to delete an approved payment record!"
|
|
);
|
|
return;
|
|
}
|
|
|
|
toast.error("Something went wrong, please try again later.");
|
|
})
|
|
.finally(reload);
|
|
};
|
|
|
|
const getFileAssetsColumns = () => {
|
|
if (user) {
|
|
const containerClassName =
|
|
"flex gap-2 text-mti-purple-light hover:text-mti-purple-dark ease-in-out duration-300 cursor-pointer";
|
|
switch (user.type) {
|
|
case "corporate":
|
|
return [
|
|
columnHelper.accessor("corporateTransfer", {
|
|
header: "Corporate transfer",
|
|
id: "corporateTransfer",
|
|
cell: (info) => (
|
|
<div className={containerClassName}>
|
|
<PaymentAssetManager
|
|
reload={reload}
|
|
permissions={info.row.original.isPaid ? "read" : "write"}
|
|
asset={info.row.original.corporateTransfer}
|
|
paymentId={info.row.original.id}
|
|
type="corporate"
|
|
/>
|
|
</div>
|
|
),
|
|
}),
|
|
];
|
|
case "agent":
|
|
return [
|
|
columnHelper.accessor("commissionTransfer", {
|
|
header: "Commission transfer",
|
|
id: "commissionTransfer",
|
|
cell: (info) => (
|
|
<div className={containerClassName}>
|
|
<PaymentAssetManager
|
|
reload={reload}
|
|
permissions="read"
|
|
asset={info.row.original.commissionTransfer}
|
|
paymentId={info.row.original.id}
|
|
type="commission"
|
|
/>
|
|
</div>
|
|
),
|
|
}),
|
|
];
|
|
case "admin":
|
|
return [
|
|
columnHelper.accessor("corporateTransfer", {
|
|
header: "Corporate transfer",
|
|
id: "corporateTransfer",
|
|
cell: (info) => (
|
|
<div className={containerClassName}>
|
|
<PaymentAssetManager
|
|
reload={reload}
|
|
permissions="read"
|
|
asset={info.row.original.corporateTransfer}
|
|
paymentId={info.row.original.id}
|
|
type="corporate"
|
|
/>
|
|
</div>
|
|
),
|
|
}),
|
|
columnHelper.accessor("commissionTransfer", {
|
|
header: "Commission transfer",
|
|
id: "commissionTransfer",
|
|
cell: (info) => (
|
|
<div className={containerClassName}>
|
|
<PaymentAssetManager
|
|
reload={reload}
|
|
permissions={info.row.original.isPaid ? "read" : "write"}
|
|
asset={info.row.original.commissionTransfer}
|
|
paymentId={info.row.original.id}
|
|
type="commission"
|
|
/>
|
|
</div>
|
|
),
|
|
}),
|
|
];
|
|
case "developer":
|
|
return [
|
|
columnHelper.accessor("corporateTransfer", {
|
|
header: "Corporate transfer",
|
|
id: "corporateTransfer",
|
|
cell: (info) => (
|
|
<div className={containerClassName}>
|
|
<PaymentAssetManager
|
|
reload={reload}
|
|
permissions="write"
|
|
asset={info.row.original.corporateTransfer}
|
|
paymentId={info.row.original.id}
|
|
type="corporate"
|
|
/>
|
|
</div>
|
|
),
|
|
}),
|
|
columnHelper.accessor("commissionTransfer", {
|
|
header: "Commission transfer",
|
|
id: "commissionTransfer",
|
|
cell: (info) => (
|
|
<div className={containerClassName}>
|
|
<PaymentAssetManager
|
|
reload={reload}
|
|
permissions="write"
|
|
asset={info.row.original.commissionTransfer}
|
|
paymentId={info.row.original.id}
|
|
type="commission"
|
|
/>
|
|
</div>
|
|
),
|
|
}),
|
|
];
|
|
default:
|
|
return [];
|
|
}
|
|
}
|
|
|
|
return [];
|
|
};
|
|
|
|
const columHelperValue = (key: string, info: any) => {
|
|
switch (key) {
|
|
case "agentCommission": {
|
|
const value = info.getValue();
|
|
return { value: `${value}%` };
|
|
}
|
|
case "agent": {
|
|
const user = users.find(
|
|
(x) => x.id === info.row.original.agent
|
|
) as AgentUser;
|
|
return {
|
|
value: user?.name,
|
|
user,
|
|
};
|
|
}
|
|
case "agentValue":
|
|
case "amount": {
|
|
const value = info.getValue();
|
|
const numberValue = toFixedNumber(value, 2);
|
|
return { value: numberValue };
|
|
}
|
|
case "date": {
|
|
const value = info.getValue();
|
|
return { value: moment(value).format("DD/MM/YYYY") };
|
|
}
|
|
case "corporate": {
|
|
const specificValue = info.row.original.corporate;
|
|
const user = users.find((x) => x.id === specificValue) as CorporateUser;
|
|
return {
|
|
user,
|
|
value:
|
|
user?.corporateInformation.companyInformation.name || user?.name,
|
|
};
|
|
}
|
|
case "currency": {
|
|
return {
|
|
value: info.row.original.currency,
|
|
};
|
|
}
|
|
case "isPaid":
|
|
case "corporateId":
|
|
default: {
|
|
const value = info.getValue();
|
|
return { value };
|
|
}
|
|
}
|
|
};
|
|
|
|
const hiddenToCorporateColumns = () => {
|
|
if (user && user.type !== "corporate")
|
|
return [
|
|
columnHelper.accessor("agent", {
|
|
header: "Country Manager",
|
|
id: "agent",
|
|
cell: (info) => {
|
|
const { user, value } = columHelperValue(info.column.id, info);
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
|
|
)}
|
|
onClick={() => setSelectedAgentUser(user)}
|
|
>
|
|
{value}
|
|
</div>
|
|
);
|
|
},
|
|
}),
|
|
columnHelper.accessor("agentCommission", {
|
|
header: "Commission",
|
|
id: "agentCommission",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
return <>{value}</>;
|
|
},
|
|
}),
|
|
columnHelper.accessor("agentValue", {
|
|
header: "Commission Value",
|
|
id: "agentValue",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
const currency = CURRENCIES.find(
|
|
(x) => x.currency === info.row.original.currency
|
|
)?.label;
|
|
const finalValue = `${value} ${currency}`;
|
|
return <span>{finalValue}</span>;
|
|
},
|
|
}),
|
|
];
|
|
return [];
|
|
};
|
|
|
|
const defaultColumns = [
|
|
columnHelper.accessor("corporate", {
|
|
header: "Corporate ID",
|
|
id: "corporateId",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
return value;
|
|
},
|
|
}),
|
|
columnHelper.accessor("corporate", {
|
|
header: "Corporate",
|
|
id: "corporate",
|
|
cell: (info) => {
|
|
const { user, value } = columHelperValue(info.column.id, info);
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
|
|
)}
|
|
onClick={() => setSelectedCorporateUser(user)}
|
|
>
|
|
{value}
|
|
</div>
|
|
);
|
|
},
|
|
}),
|
|
columnHelper.accessor("date", {
|
|
header: "Date",
|
|
id: "date",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
return <span>{value}</span>;
|
|
},
|
|
}),
|
|
columnHelper.accessor("value", {
|
|
header: "Amount",
|
|
id: "amount",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
const currency = CURRENCIES.find(
|
|
(x) => x.currency === info.row.original.currency
|
|
)?.label;
|
|
const finalValue = `${value} ${currency}`;
|
|
return <span>{finalValue}</span>;
|
|
},
|
|
}),
|
|
...hiddenToCorporateColumns(),
|
|
columnHelper.accessor("isPaid", {
|
|
header: "Paid",
|
|
id: "isPaid",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
|
|
return (
|
|
<Checkbox
|
|
isChecked={value}
|
|
onChange={(e) => {
|
|
if (user?.type === agent || user?.type === "corporate" || value)
|
|
return null;
|
|
if (
|
|
!info.row.original.commissionTransfer ||
|
|
!info.row.original.corporateTransfer
|
|
)
|
|
return alert(
|
|
"All files need to be uploaded to consider it paid!"
|
|
);
|
|
if (
|
|
!confirm(`Are you sure you want to consider this payment paid?`)
|
|
)
|
|
return null;
|
|
|
|
return updatePayment(info.row.original, "isPaid", e);
|
|
}}
|
|
>
|
|
<span></span>
|
|
</Checkbox>
|
|
);
|
|
},
|
|
}),
|
|
...getFileAssetsColumns(),
|
|
{
|
|
header: "",
|
|
id: "actions",
|
|
cell: ({ row }: { row: { original: Payment } }) => {
|
|
return (
|
|
<div className="flex gap-4">
|
|
{user?.type !== "agent" && (
|
|
<div
|
|
data-tip="Delete"
|
|
className="cursor-pointer tooltip"
|
|
onClick={() => deletePayment(row.original.id)}
|
|
>
|
|
<BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
const table = useReactTable({
|
|
data: displayPayments,
|
|
columns: defaultColumns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
});
|
|
|
|
const updatedPaypalPayments = useMemo(
|
|
() =>
|
|
paypalPayments.map((p) => {
|
|
const user = users.find((x) => x.id === p.userId) as User;
|
|
return { ...p, name: user?.name, email: user?.email };
|
|
}),
|
|
[paypalPayments, users]
|
|
);
|
|
|
|
const paypalColumns = [
|
|
paypalColumnHelper.accessor("orderId", {
|
|
header: "Order ID",
|
|
id: "orderId",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
return <span>{value}</span>;
|
|
},
|
|
}),
|
|
paypalColumnHelper.accessor("status", {
|
|
header: "Status",
|
|
id: "status",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
return <span>{value}</span>;
|
|
},
|
|
}),
|
|
paypalColumnHelper.accessor("name", {
|
|
header: "User Name",
|
|
id: "name",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
return <span>{value}</span>;
|
|
},
|
|
}),
|
|
paypalColumnHelper.accessor("email", {
|
|
header: "Email",
|
|
id: "email",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
return <span>{value}</span>;
|
|
},
|
|
}),
|
|
paypalColumnHelper.accessor("value", {
|
|
header: "Amount",
|
|
id: "value",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
const currency = CURRENCIES.find(
|
|
(x) => x.currency === info.row.original.currency
|
|
)?.label;
|
|
const finalValue = `${value} ${currency}`;
|
|
return <span>{finalValue}</span>;
|
|
},
|
|
}),
|
|
paypalColumnHelper.accessor("createdAt", {
|
|
header: "Date",
|
|
id: "createdAt",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
return <span>{moment(value).format("DD/MM/YYYY")}</span>;
|
|
},
|
|
}),
|
|
paypalColumnHelper.accessor("subscriptionExpirationDate", {
|
|
header: "Expiration Date",
|
|
id: "subscriptionExpirationDate",
|
|
cell: (info) => {
|
|
const { value } = columHelperValue(info.column.id, info);
|
|
return <span>{moment(value).format("DD/MM/YYYY")}</span>;
|
|
},
|
|
}),
|
|
];
|
|
|
|
const { rows: filteredRows, renderSearch } = useListSearch(
|
|
paypalFilterRows,
|
|
updatedPaypalPayments
|
|
);
|
|
|
|
const paypalTable = useReactTable({
|
|
data: filteredRows,
|
|
columns: paypalColumns,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
});
|
|
const getUserModal = () => {
|
|
if (user) {
|
|
if (selectedCorporateUser) {
|
|
return (
|
|
<Modal
|
|
isOpen={!!selectedCorporateUser}
|
|
onClose={() => setSelectedCorporateUser(undefined)}
|
|
>
|
|
<>
|
|
{selectedCorporateUser && (
|
|
<div className="w-full flex flex-col gap-8">
|
|
<UserCard
|
|
loggedInUser={user}
|
|
onClose={(shouldReload) => {
|
|
setSelectedCorporateUser(undefined);
|
|
if (shouldReload) reload();
|
|
}}
|
|
user={selectedCorporateUser}
|
|
disabled
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
if (selectedAgentUser) {
|
|
return (
|
|
<Modal
|
|
isOpen={!!selectedAgentUser}
|
|
onClose={() => setSelectedAgentUser(undefined)}
|
|
>
|
|
<>
|
|
{selectedAgentUser && (
|
|
<div className="w-full flex flex-col gap-8">
|
|
<UserCard
|
|
loggedInUser={user}
|
|
onClose={(shouldReload) => {
|
|
setSelectedAgentUser(undefined);
|
|
if (shouldReload) reload();
|
|
}}
|
|
user={selectedAgentUser}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
</Modal>
|
|
);
|
|
}
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
const getCSVData = () => {
|
|
const tables = [table, paypalTable];
|
|
const whitelists = [
|
|
CSV_PAYMENTS_WHITELISTED_KEYS,
|
|
CSV_PAYPAL_WHITELISTED_KEYS,
|
|
];
|
|
const currentTable = tables[selectedIndex];
|
|
const whitelist = whitelists[selectedIndex];
|
|
const columns = (currentTable
|
|
.getHeaderGroups() as any[])
|
|
.reduce((accm: any[], group: any) => {
|
|
const whitelistedColumns = group.headers.filter((header: any) =>
|
|
whitelist.includes(header.id)
|
|
);
|
|
|
|
const data = whitelistedColumns.map((data: any) => ({
|
|
key: data.column.columnDef.id,
|
|
label: data.column.columnDef.header,
|
|
})) as SimpleCSVColumn[];
|
|
|
|
return [...accm, ...data];
|
|
}, []);
|
|
|
|
const { rows } = currentTable.getRowModel();
|
|
|
|
const finalColumns = [
|
|
...columns,
|
|
{
|
|
key: "currency",
|
|
label: "Currency",
|
|
},
|
|
];
|
|
|
|
return {
|
|
columns: finalColumns,
|
|
rows: rows.map((row) => {
|
|
return finalColumns.reduce((accm, { key }) => {
|
|
const { value } = columHelperValue(key, {
|
|
row,
|
|
getValue: () => row.getValue(key),
|
|
});
|
|
return {
|
|
...accm,
|
|
[key]: value,
|
|
};
|
|
}, {});
|
|
}),
|
|
};
|
|
};
|
|
|
|
const { rows: csvRows, columns: csvColumns } = getCSVData();
|
|
|
|
const renderTable = (table: Table<any>) => (
|
|
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
|
<thead>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<tr key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<th className="p-4 text-left" key={header.id}>
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext()
|
|
)}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</thead>
|
|
<tbody className="px-2">
|
|
{table.getRowModel().rows.map((row) => (
|
|
<tr
|
|
className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
|
|
key={row.id}
|
|
>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<td className="px-4 py-2" key={cell.id}>
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Payment Record | EnCoach</title>
|
|
<meta
|
|
name="description"
|
|
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
|
|
/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<ToastContainer />
|
|
{user && (
|
|
<Layout user={user} className="gap-6">
|
|
{getUserModal()}
|
|
<Modal
|
|
isOpen={isCreatingPayment}
|
|
onClose={() => setIsCreatingPayment(false)}
|
|
>
|
|
<PaymentCreator
|
|
onClose={() => setIsCreatingPayment(false)}
|
|
reload={reload}
|
|
showComission={user.type === "developer" || user.type === "admin"}
|
|
/>
|
|
</Modal>
|
|
|
|
<div className="w-full flex flex-end justify-between p-2">
|
|
<h1 className="text-2xl font-semibold">Payment Record</h1>
|
|
<div className="flex justify-end gap-2">
|
|
{(user.type === "developer" ||
|
|
user.type === "admin" ||
|
|
user.type === "agent" ||
|
|
user.type === "corporate") && (
|
|
<Button className="max-w-[200px]" variant="outline">
|
|
<CSVLink
|
|
data={csvRows}
|
|
headers={csvColumns}
|
|
filename="payment-records.csv"
|
|
>
|
|
Download CSV
|
|
</CSVLink>
|
|
</Button>
|
|
)}
|
|
{(user.type === "developer" || user.type === "admin") && (
|
|
<Button
|
|
className="max-w-[200px]"
|
|
variant="outline"
|
|
onClick={() => setIsCreatingPayment(true)}
|
|
>
|
|
New Payment
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
|
|
<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
|
|
<Tab
|
|
className={({ selected }) =>
|
|
clsx(
|
|
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
|
|
"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
|
|
"transition duration-300 ease-in-out",
|
|
selected
|
|
? "bg-white shadow"
|
|
: "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
|
|
)
|
|
}
|
|
>
|
|
Payments
|
|
</Tab>
|
|
{['admin','developer'].includes(user.type) && (<Tab
|
|
className={({ selected }) =>
|
|
clsx(
|
|
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
|
|
"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
|
|
"transition duration-300 ease-in-out",
|
|
selected
|
|
? "bg-white shadow"
|
|
: "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark"
|
|
)
|
|
}
|
|
>
|
|
Paypal
|
|
</Tab>
|
|
)}
|
|
</Tab.List>
|
|
<Tab.Panels>
|
|
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide gap-8 flex flex-col gap-8">
|
|
<div
|
|
className={clsx(
|
|
"grid grid-cols-1 md:grid-cols-2 gap-8 w-full",
|
|
user.type !== "corporate" && "lg:grid-cols-3"
|
|
)}
|
|
>
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Corporate account *
|
|
</label>
|
|
<Select
|
|
isClearable={user.type !== "corporate"}
|
|
className={clsx(
|
|
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
|
|
user.type === "corporate" &&
|
|
"!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed"
|
|
)}
|
|
options={(
|
|
users.filter(
|
|
(u) => u.type === "corporate"
|
|
) as CorporateUser[]
|
|
).map((user) => ({
|
|
value: user.id,
|
|
meta: user,
|
|
label: `${
|
|
user.corporateInformation?.companyInformation?.name ||
|
|
user.name
|
|
} - ${user.email}`,
|
|
}))}
|
|
defaultValue={
|
|
user.type === "corporate"
|
|
? {
|
|
value: user.id,
|
|
meta: user,
|
|
label: `${
|
|
user.corporateInformation?.companyInformation
|
|
?.name || user.name
|
|
} - ${user.email}`,
|
|
}
|
|
: undefined
|
|
}
|
|
isDisabled={user.type === "corporate"}
|
|
onChange={(value) =>
|
|
setCorporate((value as any)?.meta ?? undefined)
|
|
}
|
|
menuPortalTarget={document?.body}
|
|
styles={{
|
|
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused
|
|
? "#D5D9F0"
|
|
: state.isSelected
|
|
? "#7872BF"
|
|
: "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
{user.type !== "corporate" && (
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Country manager *
|
|
</label>
|
|
<Select
|
|
isClearable
|
|
isDisabled={user.type === "agent"}
|
|
className={clsx(
|
|
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
|
|
user.type === "agent"
|
|
? "bg-mti-gray-platinum/40"
|
|
: "bg-white"
|
|
)}
|
|
options={(
|
|
users.filter((u) => u.type === "agent") as AgentUser[]
|
|
).map((user) => ({
|
|
value: user.id,
|
|
meta: user,
|
|
label: `${user.name} - ${user.email}`,
|
|
}))}
|
|
value={
|
|
agent
|
|
? {
|
|
value: agent?.id,
|
|
label: `${agent.name} - ${agent.email}`,
|
|
}
|
|
: undefined
|
|
}
|
|
onChange={(value) =>
|
|
setAgent(
|
|
value !== null ? (value as any).meta : undefined
|
|
)
|
|
}
|
|
menuPortalTarget={document?.body}
|
|
styles={{
|
|
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused
|
|
? "#D5D9F0"
|
|
: state.isSelected
|
|
? "#7872BF"
|
|
: "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Paid
|
|
</label>
|
|
<Select
|
|
isClearable
|
|
className={clsx(
|
|
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none",
|
|
user.type === "agent"
|
|
? "bg-mti-gray-platinum/40"
|
|
: "bg-white"
|
|
)}
|
|
options={IS_PAID_OPTIONS}
|
|
value={IS_PAID_OPTIONS.find((e) => e.value === paid)}
|
|
onChange={(value) => {
|
|
if (value) return setPaid(value.value);
|
|
setPaid(null);
|
|
}}
|
|
menuPortalTarget={document?.body}
|
|
styles={{
|
|
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused
|
|
? "#D5D9F0"
|
|
: state.isSelected
|
|
? "#7872BF"
|
|
: "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Date
|
|
</label>
|
|
<ReactDatePicker
|
|
dateFormat="dd/MM/yyyy"
|
|
className="px-4 py-6 w-full text-sm text-center font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
selected={startDate}
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
selectsRange
|
|
showMonthDropdown
|
|
filterDate={(date: Date) =>
|
|
moment(date).isSameOrBefore(moment(new Date()))
|
|
}
|
|
onChange={([initialDate, finalDate]: [Date, Date]) => {
|
|
setStartDate(
|
|
initialDate ?? moment("01/01/2023").toDate()
|
|
);
|
|
if (finalDate) {
|
|
// basicly selecting a final day works as if I'm selecting the first
|
|
// minute of that day. this way it covers the whole day
|
|
setEndDate(moment(finalDate).endOf("day").toDate());
|
|
return;
|
|
}
|
|
setEndDate(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
{user.type !== "corporate" && (
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Commission transfer
|
|
</label>
|
|
<Select
|
|
isClearable
|
|
className={clsx(
|
|
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
)}
|
|
options={IS_FILE_SUBMITTED_OPTIONS}
|
|
value={IS_FILE_SUBMITTED_OPTIONS.find(
|
|
(e) => e.value === commissionTransfer
|
|
)}
|
|
onChange={(value) => {
|
|
if (value) return setCommissionTransfer(value.value);
|
|
setCommissionTransfer(null);
|
|
}}
|
|
menuPortalTarget={document?.body}
|
|
styles={{
|
|
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused
|
|
? "#D5D9F0"
|
|
: state.isSelected
|
|
? "#7872BF"
|
|
: "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">
|
|
Corporate transfer
|
|
</label>
|
|
<Select
|
|
isClearable
|
|
className={clsx(
|
|
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
)}
|
|
options={IS_FILE_SUBMITTED_OPTIONS}
|
|
value={IS_FILE_SUBMITTED_OPTIONS.find(
|
|
(e) => e.value === corporateTransfer
|
|
)}
|
|
onChange={(value) => {
|
|
if (value) return setCorporateTransfer(value.value);
|
|
setCorporateTransfer(null);
|
|
}}
|
|
menuPortalTarget={document?.body}
|
|
styles={{
|
|
menuPortal: (base) => ({ ...base, zIndex: 9999 }),
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused
|
|
? "#D5D9F0"
|
|
: state.isSelected
|
|
? "#7872BF"
|
|
: "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{renderTable(table as Table<Payment>)}
|
|
</Tab.Panel>
|
|
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide flex flex-col gap-8">
|
|
{renderSearch()}
|
|
{renderTable(paypalTable as Table<PaypalPaymentWithUserData>)}
|
|
</Tab.Panel>
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
</Layout>
|
|
)}
|
|
</>
|
|
);
|
|
}
|