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

Payment Record: Created Filters for Corporate and Country Manager that has submitted file in payment records

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-07 15:22:46 +00:00
parent e687a2b3e5
commit 957400cb82
1 changed files with 101 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -239,6 +239,21 @@ const IS_PAID_OPTIONS = [
},
];
const IS_FILE_SUBMITTED_OPTIONS = [
{
value: null,
label: "All",
},
{
value: false,
label: "Submitted",
},
{
value: true,
label: "Not Submitted",
},
];
const CSV_WHITELISTED_KEYS = ["corporateId", "corporate", "date", "amount", "agent", "agentCommission", "agentValue", "isPaid"];
interface SimpleCSVColumn {
@@ -263,6 +278,8 @@ export default function PaymentRecord() {
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();
@@ -297,8 +314,6 @@ export default function PaymentRecord() {
]);
}, [agent]);
useEffect(() => console.log(filters), [filters]);
useEffect(() => {
setFilters((prev) => [
...prev.filter((x) => x.id !== "corporate-filter"),
@@ -313,6 +328,24 @@ export default function PaymentRecord() {
]);
}, [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]);
const updatePayment = (payment: Payment, key: string, value: any) => {
axios
.patch(`api/payments/${payment.id}`, {...payment, [key]: value})
@@ -745,7 +778,7 @@ export default function PaymentRecord() {
</div>
)}
</div>
<div className="flex gap-8 w-full">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Corporate account *</label>
<Select
@@ -820,9 +853,8 @@ export default function PaymentRecord() {
options={IS_PAID_OPTIONS}
value={IS_PAID_OPTIONS.find((e) => e.value === paid)}
onChange={(value) => {
if (value) {
setPaid(value.value);
}
if (value) return setPaid(value.value);
setPaid(null);
}}
styles={{
control: (styles) => ({
@@ -846,7 +878,7 @@ export default function PaymentRecord() {
<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]"
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}
@@ -865,6 +897,68 @@ export default function PaymentRecord() {
}}
/>
</div>
<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);
}}
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">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);
}}
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>
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
<thead>