Added a feature to allow a user to filter the payment record

src/pages/payment-record.tsx

@@ -227,11 +227,47 @@ const PaymentCreator = ({onClose, reload}: {onClose: () => void; reload: () => v
 export default function PaymentRecord() {
 	const [selectedUser, setSelectedUser] = useState<User>();
 	const [isCreatingPayment, setIsCreatingPayment] = useState(false);
+	const [filters, setFilters] = useState<{filter: (p: Payment) => boolean; id: string}[]>([]);
+	const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);
+
+	const [corporate, setCorporate] = useState<User>();
+	const [agent, setAgent] = useState<User>();
 
 	const {user} = useUser({redirectTo: "/login"});
 	const {users} = useUsers();
 	const {payments, reload} = usePayments();
 
+	useEffect(() => {
+		setDisplayPayments(
+			filters
+				.map((f) => f.filter)
+				.reduce((d, f) => d.filter(f), payments)
+				.sort((a, b) => moment(b.date).diff(moment(a.date))),
+		);
+	}, [payments, filters]);
+
+	useEffect(() => {
+		if (user && user.type === "agent") {
+			setAgent(user);
+		}
+	}, [user]);
+
+	useEffect(() => {
+		setFilters((prev) => [
+			...prev.filter((x) => x.id !== "agent-filter"),
+			...(!agent ? [] : [{id: "agent-filter", filter: (p: Payment) => p.agent === agent.id}]),
+		]);
+	}, [agent]);
+
+	useEffect(() => console.log(filters), [filters]);
+
+	useEffect(() => {
+		setFilters((prev) => [
+			...prev.filter((x) => x.id !== "corporate-filter"),
+			...(!corporate ? [] : [{id: "corporate-filter", filter: (p: Payment) => p.corporate === corporate.id}]),
+		]);
+	}, [corporate]);
+
 	const updatePayment = (payment: Payment, key: string, value: any) => {
 		axios
 			.patch(`api/payments/${payment.id}`, {...payment, [key]: value})
@@ -339,7 +375,7 @@ export default function PaymentRecord() {
 	];
 
 	const table = useReactTable({
-		data: (user?.type === "agent" ? payments.filter((p) => p.agent === user.id) : payments).sort((a, b) => moment(b.date).diff(moment(a.date))),
+		data: displayPayments,
 		columns: defaultColumns,
 		getCoreRowModel: getCoreRowModel(),
 	});
@@ -387,6 +423,71 @@ export default function PaymentRecord() {
 							</Button>
 						)}
 					</div>
+					<div className="flex 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
+								isClearable
+								className="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 bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
+								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}`,
+								}))}
+								onChange={(value) => setCorporate((value as any)?.meta ?? undefined)}
+								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>
+							<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)}
+								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>
 							{table.getHeaderGroups().map((headerGroup) => (