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

Added search text to Paypal payments

Browse Source 
Updated CSV Downlaod
Reordered the UI of the page
This commit is contained in:
Joao Ramos
2024-02-26 18:46:21 +00:00
parent d7f1a4f6b2
commit 9b5ff70037
1 changed files with 343 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,7 +37,7 @@ 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;
@@ -69,7 +69,7 @@ export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
}, sessionOptions);
const columnHelper = createColumnHelper<Payment>();
const paypalColumnHelper = createColumnHelper<PaypalPayment>();
const paypalColumnHelper = createColumnHelper<PaypalPaymentWithUserData>();
const PaymentCreator = ({
onClose,
@@ -348,7 +348,7 @@ const IS_FILE_SUBMITTED_OPTIONS = [
},
];
const CSV_WHITELISTED_KEYS = [
const CSV_PAYMENTS_WHITELISTED_KEYS = [
"corporateId",
"corporate",
"date",
@@ -359,12 +359,28 @@ const CSV_WHITELISTED_KEYS = [
"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>();
@@ -407,6 +423,8 @@ export default function PaymentRecord() {
});
}, [originalPayments, startDate, endDate]);
const [selectedIndex, setSelectedIndex] = useState(0);
useEffect(() => {
setDisplayPayments(
filters
@@ -839,6 +857,15 @@ export default function PaymentRecord() {
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",
@@ -856,24 +883,20 @@ export default function PaymentRecord() {
return <span>{value}</span>;
},
}),
paypalColumnHelper.accessor("userId", {
paypalColumnHelper.accessor("name", {
header: "User Name",
id: "name",
cell: (info) => {
const { value } = columHelperValue("userId", info);
const user = users.find((x) => x.id === value) as User;
return <span>{user?.name}</span>;
const { value } = columHelperValue(info.column.id, info);
return <span>{value}</span>;
},
}),
paypalColumnHelper.accessor("userId", {
paypalColumnHelper.accessor("email", {
header: "Email",
id: "email",
cell: (info) => {
const { value } = columHelperValue("userId", info);
const user = users.find((x) => x.id === value) as User;
return <span>{user?.email}</span>;
const { value } = columHelperValue(info.column.id, info);
return <span>{value}</span>;
},
}),
paypalColumnHelper.accessor("value", {
@@ -906,8 +929,13 @@ export default function PaymentRecord() {
}),
];
const { rows: filteredRows, renderSearch } = useListSearch(
paypalFilterRows,
updatedPaypalPayments
);
const paypalTable = useReactTable({
data: paypalPayments,
data: filteredRows,
columns: paypalColumns,
getCoreRowModel: getCoreRowModel(),
});
@@ -967,11 +995,18 @@ export default function PaymentRecord() {
};
const getCSVData = () => {
const columns = table
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()
.reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
const whitelistedColumns = group.headers.filter((header) =>
CSV_WHITELISTED_KEYS.includes(header.id)
whitelist.includes(header.id)
);
const data = whitelistedColumns.map((data) => ({
@@ -982,7 +1017,7 @@ export default function PaymentRecord() {
return [...accm, ...data];
}, []);
const { rows } = table.getRowModel();
const { rows } = currentTable.getRowModel();
const finalColumns = [
...columns,
@@ -1045,6 +1080,7 @@ export default function PaymentRecord() {
</tbody>
</table>
);
return (
<>
<Head>
@@ -1099,6 +1135,39 @@ export default function PaymentRecord() {
)}
</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>
<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",
@@ -1117,7 +1186,9 @@ export default function PaymentRecord() {
"!bg-mti-gray-platinum/40 !text-mti-gray-dim !cursor-not-allowed"
)}
options={(
users.filter((u) => u.type === "corporate") as CorporateUser[]
users.filter(
(u) => u.type === "corporate"
) as CorporateUser[]
).map((user) => ({
value: user.id,
meta: user,
@@ -1132,8 +1203,8 @@ export default function PaymentRecord() {
value: user.id,
meta: user,
label: `${
user.corporateInformation?.companyInformation?.name ||
user.name
user.corporateInformation?.companyInformation
?.name || user.name
} - ${user.email}`,
}
: undefined
@@ -1196,7 +1267,9 @@ export default function PaymentRecord() {
: undefined
}
onChange={(value) =>
setAgent(value !== null ? (value as any).meta : undefined)
setAgent(
value !== null ? (value as any).meta : undefined
)
}
menuPortalTarget={document?.body}
styles={{
@@ -1231,7 +1304,9 @@ export default function PaymentRecord() {
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"
user.type === "agent"
? "bg-mti-gray-platinum/40"
: "bg-white"
)}
options={IS_PAID_OPTIONS}
value={IS_PAID_OPTIONS.find((e) => e.value === paid)}
@@ -1279,7 +1354,9 @@ export default function PaymentRecord() {
moment(date).isSameOrBefore(moment(new Date()))
}
onChange={([initialDate, finalDate]: [Date, Date]) => {
setStartDate(initialDate ?? moment("01/01/2023").toDate());
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
@@ -1375,43 +1452,11 @@ export default function PaymentRecord() {
/>
</div>
</div>
<Tab.Group>
<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>
<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 className="mt-2">
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
{renderTable(table as Table<Payment>)}
</Tab.Panel>
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
{renderTable(paypalTable as Table<PaypalPayment>)}
<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>