Added payment and date filter

src/pages/payment-record.tsx

@@ -12,7 +12,7 @@ import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@t
 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";
@@ -235,6 +235,18 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 	);
 };
 
+const IS_PAID_OPTIONS = [
+{
+	value: null,
+	label: 'All',
+}, {
+	value: false,
+	label: 'Unpaid',
+}, {
+	value: true,
+	label: 'Paid',
+},
+];
 export default function PaymentRecord() {
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [isCreatingPayment, setIsCreatingPayment] = useState(false);
@@ -246,18 +258,31 @@ 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
 				.map((f) => f.filter)
-				.reduce((d, f) => d.filter(f), payments)
+				.reduce((d, f) => {
+					// unlike other filters, date period is not optional
+					debugger;
+					return d.filter(f);
+				}, payments)
 				.sort((a, b) => moment(b.date).diff(moment(a.date))),
 		);
 	}, [payments, filters]);
@@ -284,6 +309,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})
@@ -613,6 +645,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">Country manager *</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>