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

src/pages/payment-record.tsx

@@ -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) {
+									if (value) return setPaid(value.value);
-										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>