Added search text to Paypal payments
Updated CSV Downlaod Reordered the UI of the page
This commit is contained in:
Joao Ramos
@@ -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,283 +1135,7 @@ export default function PaymentRecord() {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<Tab.Group>
|
||||
<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 }) =>
|
||||
@@ -1406,12 +1166,297 @@ export default function PaymentRecord() {
|
||||
Paypal
|
||||
</Tab>
|
||||
</Tab.List>
|
||||
<Tab.Panels className="mt-2">
|
||||
<Tab.Panel className="overflow-y-scroll max-h-[600px] rounded-xl scrollbar-hide">
|
||||
<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">
|
||||
{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>
|
||||
|
||||
Reference in New Issue
Block a user