Merge branch 'develop' into feature-payment-corporate-id
CSV Improvements after merge issues
This commit is contained in:
Joao Ramos
@@ -8,11 +8,11 @@ import Layout from "@/components/High/Layout";
|
||||
import {shouldRedirectHome} from "@/utils/navigation.disabled";
|
||||
import usePayments from "@/hooks/usePayments";
|
||||
import {Payment} from "@/interfaces/paypal";
|
||||
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
|
||||
import {CellContext, createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, useReactTable} from "@tanstack/react-table";
|
||||
import {CURRENCIES} from "@/resources/paypal";
|
||||
import {BsTrash} from "react-icons/bs";
|
||||
import axios from "axios";
|
||||
import {useEffect, useState} from "react";
|
||||
import {useEffect, useState, useMemo} from "react";
|
||||
import {AgentUser, CorporateUser, User} from "@/interfaces/user";
|
||||
import UserCard from "@/components/UserCard";
|
||||
import Modal from "@/components/Modal";
|
||||
@@ -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;
|
||||
@@ -235,8 +236,39 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
|
||||
);
|
||||
};
|
||||
|
||||
const IS_PAID_OPTIONS = [
|
||||
{
|
||||
value: null,
|
||||
label: 'All',
|
||||
}, {
|
||||
value: false,
|
||||
label: 'Unpaid',
|
||||
}, {
|
||||
value: true,
|
||||
label: 'Paid',
|
||||
},
|
||||
];
|
||||
|
||||
const CSV_WHITELISTED_KEYS = [
|
||||
'corporateId',
|
||||
'corporate',
|
||||
'date',
|
||||
'amount',
|
||||
'agent',
|
||||
'agentCommission',
|
||||
'agentValue',
|
||||
'isPaid',
|
||||
];
|
||||
|
||||
interface SimpleCSVColumn {
|
||||
key: string,
|
||||
label: string,
|
||||
index: number,
|
||||
};
|
||||
|
||||
export default function PaymentRecord() {
|
||||
const [selectedUser, setSelectedUser] = useState<User>();
|
||||
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[]>([]);
|
||||
@@ -246,13 +278,22 @@ export default function PaymentRecord() {
|
||||
|
||||
const {user} = useUser({redirectTo: "/login"});
|
||||
const {users, reload: reloadUsers} = useUsers();
|
||||
const {payments, reload: reloadPayment} = usePayments();
|
||||
|
||||
const {payments: originalPayments, reload: reloadPayment} = usePayments();
|
||||
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 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]);
|
||||
|
||||
useEffect(() => {
|
||||
setDisplayPayments(
|
||||
filters
|
||||
@@ -284,6 +325,13 @@ export default function PaymentRecord() {
|
||||
]);
|
||||
}, [corporate]);
|
||||
|
||||
useEffect(() => {
|
||||
setFilters((prev) => [
|
||||
...prev.filter((x) => x.id !== "paid"),
|
||||
...(typeof paid !== 'boolean' ? [] : [{id: "paid", filter: (p: Payment) => p.isPaid === paid}]),
|
||||
])
|
||||
}, [paid]);
|
||||
|
||||
const updatePayment = (payment: Payment, key: string, value: any) => {
|
||||
axios
|
||||
.patch(`api/payments/${payment.id}`, {...payment, [key]: value})
|
||||
@@ -321,6 +369,7 @@ export default function PaymentRecord() {
|
||||
return [
|
||||
columnHelper.accessor("corporateTransfer", {
|
||||
header: "Corporate transfer",
|
||||
id: "corporateTransfer",
|
||||
cell: (info) => (
|
||||
<div className={containerClassName}>
|
||||
<PaymentAssetManager
|
||||
@@ -337,6 +386,7 @@ export default function PaymentRecord() {
|
||||
return [
|
||||
columnHelper.accessor("commissionTransfer", {
|
||||
header: "Commission transfer",
|
||||
id: "commissionTransfer",
|
||||
cell: (info) => (
|
||||
<div className={containerClassName}>
|
||||
<PaymentAssetManager
|
||||
@@ -353,6 +403,7 @@ export default function PaymentRecord() {
|
||||
return [
|
||||
columnHelper.accessor("corporateTransfer", {
|
||||
header: "Corporate transfer",
|
||||
id: "corporateTransfer",
|
||||
cell: (info) => (
|
||||
<div className={containerClassName}>
|
||||
<PaymentAssetManager
|
||||
@@ -366,6 +417,7 @@ export default function PaymentRecord() {
|
||||
}),
|
||||
columnHelper.accessor("commissionTransfer", {
|
||||
header: "Commission transfer",
|
||||
id: "commissionTransfer",
|
||||
cell: (info) => (
|
||||
<div className={containerClassName}>
|
||||
<PaymentAssetManager
|
||||
@@ -382,6 +434,7 @@ export default function PaymentRecord() {
|
||||
return [
|
||||
columnHelper.accessor("corporateTransfer", {
|
||||
header: "Corporate transfer",
|
||||
id: "corporateTransfer",
|
||||
cell: (info) => (
|
||||
<div className={containerClassName}>
|
||||
<PaymentAssetManager
|
||||
@@ -395,6 +448,7 @@ export default function PaymentRecord() {
|
||||
}),
|
||||
columnHelper.accessor("commissionTransfer", {
|
||||
header: "Commission transfer",
|
||||
id: "commissionTransfer",
|
||||
cell: (info) => (
|
||||
<div className={containerClassName}>
|
||||
<PaymentAssetManager
|
||||
@@ -414,69 +468,134 @@ export default function PaymentRecord() {
|
||||
|
||||
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)
|
||||
const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label
|
||||
return { value: `${numberValue} ${currency}` };
|
||||
}
|
||||
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 'isPaid':
|
||||
case 'corporateId':
|
||||
default: {
|
||||
const value = info.getValue();
|
||||
return { value };
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
const defaultColumns = [
|
||||
columnHelper.accessor("corporate", {
|
||||
header: "Corporate ID",
|
||||
cell: (info) => info.getValue(),
|
||||
id: 'corporateId',
|
||||
cell: (info) => {
|
||||
const { value } = columHelperValue(info.column.id, info);
|
||||
return value;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("corporate", {
|
||||
header: "Corporate",
|
||||
id: "corporate",
|
||||
cell: (info) => {
|
||||
const user = users.find((x) => x.id === info.row.original.corporate) as CorporateUser;
|
||||
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={() => setSelectedUser(user)}>
|
||||
{user?.corporateInformation.companyInformation.name || user?.name}
|
||||
onClick={() => setSelectedCorporateUser(user)}>
|
||||
{value}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("date", {
|
||||
header: "Date",
|
||||
cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
|
||||
id: "date",
|
||||
cell: (info) => {
|
||||
const { value } = columHelperValue(info.column.id, info);
|
||||
return <span>{value}</span>;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("value", {
|
||||
header: "Amount",
|
||||
cell: (info) => (
|
||||
<span>
|
||||
{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
|
||||
</span>
|
||||
),
|
||||
id: "amount",
|
||||
cell: (info) => {
|
||||
const { value } = columHelperValue(info.column.id, info);
|
||||
return <span>{value}</span>;
|
||||
}
|
||||
}),
|
||||
columnHelper.accessor("agent", {
|
||||
header: "Country Manager",
|
||||
cell: (info) => (
|
||||
<div
|
||||
className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")}
|
||||
onClick={() => setSelectedUser(users.find((x) => x.id === info.row.original.agent))}>
|
||||
{(users.find((x) => x.id === info.row.original.agent) as AgentUser)?.name}
|
||||
</div>
|
||||
),
|
||||
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",
|
||||
cell: (info) => <>{info.getValue()}%</>,
|
||||
id: "agentCommission",
|
||||
cell: (info) => {
|
||||
const { value } = columHelperValue(info.column.id, info);
|
||||
return <>{value}</>
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("agentValue", {
|
||||
header: "Commission Value",
|
||||
cell: (info) => (
|
||||
<span>
|
||||
{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
|
||||
</span>
|
||||
),
|
||||
id: "agentValue",
|
||||
cell: (info) => {
|
||||
const { value } = columHelperValue(info.column.id, info);
|
||||
return <span>{value}</span>;
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("isPaid", {
|
||||
header: "Paid",
|
||||
cell: (info) => (
|
||||
<Checkbox
|
||||
isChecked={info.getValue()}
|
||||
onChange={(e) => (user?.type !== "agent" ? updatePayment(info.row.original, "isPaid", e) : null)}>
|
||||
<span></span>
|
||||
</Checkbox>
|
||||
),
|
||||
id: "isPaid",
|
||||
cell: (info) => {
|
||||
const { value } = columHelperValue(info.column.id, info);
|
||||
return (
|
||||
<Checkbox
|
||||
isChecked={value}
|
||||
onChange={(e) => (user?.type !== "agent" ? updatePayment(info.row.original, "isPaid", e) : null)}>
|
||||
<span></span>
|
||||
</Checkbox>
|
||||
);
|
||||
},
|
||||
}),
|
||||
...getFileAssetsColumns(),
|
||||
{
|
||||
@@ -502,6 +621,93 @@ export default function PaymentRecord() {
|
||||
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 columns = table.getHeaderGroups().reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
|
||||
const whitelistedColumns = group.headers.filter((header) => CSV_WHITELISTED_KEYS.includes(header.id));
|
||||
|
||||
const data = whitelistedColumns.map((data) => ({
|
||||
key: data.column.columnDef.id,
|
||||
label: data.column.columnDef.header,
|
||||
index: data.index,
|
||||
})) as SimpleCSVColumn[];
|
||||
|
||||
return [
|
||||
...accm,
|
||||
...data,
|
||||
];
|
||||
}, []);
|
||||
|
||||
const { rows } = table.getRowModel();
|
||||
|
||||
|
||||
return {
|
||||
columns,
|
||||
rows: rows.map((row) => {
|
||||
return columns.reduce((accm, { key, index }) => {
|
||||
const { value } = columHelperValue(key, {
|
||||
row,
|
||||
getValue: () => row.getValue(key),
|
||||
});
|
||||
return {
|
||||
...accm,
|
||||
[key]: value,
|
||||
};
|
||||
}, {});
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
const { rows: csvRows, columns: csvColumns } = getCSVData();
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@@ -516,23 +722,7 @@ export default function PaymentRecord() {
|
||||
<ToastContainer />
|
||||
{user && (
|
||||
<Layout user={user} className="gap-6">
|
||||
<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
|
||||
<>
|
||||
{selectedUser && (
|
||||
<div className="w-full flex flex-col gap-8">
|
||||
<UserCard
|
||||
loggedInUser={user}
|
||||
onClose={(shouldReload) => {
|
||||
setSelectedUser(undefined);
|
||||
if (shouldReload) reload();
|
||||
}}
|
||||
user={selectedUser}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</Modal>
|
||||
|
||||
{getUserModal()}
|
||||
<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
|
||||
<PaymentCreator
|
||||
onClose={() => setIsCreatingPayment(false)}
|
||||
@@ -544,9 +734,19 @@ 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)}>
|
||||
New Payment
|
||||
</Button>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button className="max-w-[200px]" variant="outline">
|
||||
<CSVLink
|
||||
data={csvRows}
|
||||
headers={csvColumns}
|
||||
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">
|
||||
@@ -613,6 +813,62 @@ export default function PaymentRecord() {
|
||||
}}
|
||||
/>
|
||||
</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) {
|
||||
setPaid(value.value);
|
||||
}
|
||||
}}
|
||||
styles={{
|
||||
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="border border-mti-gray-dim/40 px-4 py-1.5 rounded-lg text-center w-[256px]"
|
||||
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>
|
||||
</div>
|
||||
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
|
||||
<thead>
|
||||
|
||||
Reference in New Issue
Block a user