Merge branch 'develop' into feature-payment-corporate-id

CSV Improvements after merge issues

package.json

@@ -49,6 +49,7 @@
     "random-words": "^2.0.0",
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
+    "react-csv": "^2.2.2",
     "react-currency-input-field": "^3.6.12",
     "react-datepicker": "^4.18.0",
     "react-dom": "18.2.0",
@@ -78,6 +79,7 @@
     "@types/lodash": "^4.14.191",
     "@types/nodemailer": "^6.4.11",
     "@types/nodemailer-express-handlebars": "^4.0.3",
+    "@types/react-csv": "^1.1.10",
     "@types/react-datepicker": "^4.15.1",
     "@types/uuid": "^9.0.1",
     "@types/wavesurfer.js": "^6.0.6",

src/components/Low/Checkbox.tsx

@@ -6,11 +6,15 @@ interface Props {
 	isChecked: boolean;
 	onChange: (isChecked: boolean) => void;
 	children: ReactNode;
+	disabled?: boolean;
 }
 
-export default function Checkbox({isChecked, onChange, children}: Props) {
+export default function Checkbox({isChecked, onChange, children, disabled}: Props) {
 	return (
-		<div className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer" onClick={() => onChange(!isChecked)}>
+		<div className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer" onClick={() => {
+			if(disabled) return;
+			onChange(!isChecked);
+		}}>
 			<input type="checkbox" className="hidden" />
 			<div
 				className={clsx(

src/components/UserCard.tsx

@@ -36,9 +36,30 @@ interface Props {
 	onViewStudents?: () => void;
 	onViewTeachers?: () => void;
 	onViewCorporate?: () => void;
+	disabled?: boolean;
 }
 
-const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate}: Props) => {
+const USER_STATUS_OPTIONS = [
+	{
+		value: 'active',
+		label: 'Active',
+	}, {
+		value: 'disabled',
+		label: 'Disabled',
+	}, {
+		value: 'paymentDue',
+		label: 'Payment Due',
+	}
+];
+
+const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
+	value: type,
+	label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]
+}));
+
+const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, currency}) => ({ value: currency, label }));
+
+const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false}: Props) => {
 	const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
 	const [type, setType] = useState(user.type);
 	const [status, setStatus] = useState(user.status);
@@ -154,6 +175,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							placeholder="Enter corporate name"
 							defaultValue={companyName}
 							required
+							disabled={disabled}
 						/>
 						<Input
 							label="Commercial Registration"
@@ -163,6 +185,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							placeholder="Enter commercial registration"
 							defaultValue={commercialRegistration}
 							required
+							disabled={disabled}
 						/>
 					</div>
 					<Divider className="w-full !m-0" />
@@ -178,6 +201,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							onChange={setCompanyName}
 							placeholder="Enter corporate name"
 							defaultValue={companyName}
+							disabled={disabled}
 						/>
 						<Input
 							label="Number of Users"
@@ -186,6 +210,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
 							placeholder="Enter number of users"
 							defaultValue={userAmount}
+							disabled={disabled}
 						/>
 						<Input
 							label="Monthly Duration"
@@ -194,6 +219,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
 							placeholder="Enter monthly duration"
 							defaultValue={monthlyDuration}
+							disabled={disabled}
 						/>
 						<div className="flex flex-col gap-3 w-full lg:col-span-2">
 							<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
@@ -204,17 +230,31 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 									type="number"
 									defaultValue={paymentValue || 0}
 									className="col-span-3"
+									disabled={disabled}
+								/>
+								<Select
+									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={CURRENCIES_OPTIONS}
+									value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
+									onChange={(value) => setPaymentCurrency(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,
+										}),
+									}}
+									isDisabled={disabled}
 								/>
-								<select
-									defaultValue={paymentCurrency}
-									onChange={(e) => setPaymentCurrency(e.target.value)}
-									className="p-6 col-span-2 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
-									{CURRENCIES.map(({label, currency}) => (
-										<option value={currency} key={currency}>
-											{label}
-										</option>
-									))}
-								</select>
 							</div>
 						</div>
 					</div>
@@ -249,6 +289,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 											color: state.isFocused ? "black" : styles.color,
 										}),
 									}}
+									isDisabled={disabled}
 								/>
 							)}
 						</div>
@@ -262,6 +303,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 										type="number"
 										defaultValue={commissionValue || 0}
 										className="col-span-3"
+										disabled={disabled}
 									/>
 								</>
 							) : (
@@ -316,7 +358,8 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 							<label className="font-normal text-base text-mti-gray-dim">Employment Status</label>
 							<RadioGroup
 								value={user.demographicInformation?.employment}
-								className="grid grid-cols-2 items-center gap-4 place-items-center">
+								className="grid grid-cols-2 items-center gap-4 place-items-center"
+								disabled={disabled}>
 								{EMPLOYMENT_STATUS.map(({status, label}) => (
 									<RadioGroup.Option value={status} key={status}>
 										{({checked}) => (
@@ -351,7 +394,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 					<div className="flex flex-col gap-8 w-full">
 						<div className="relative flex flex-col gap-3 w-full">
 							<label className="font-normal text-base text-mti-gray-dim">Gender</label>
-							<RadioGroup value={user.demographicInformation?.gender} className="flex flex-row gap-4 justify-between">
+							<RadioGroup
+								value={user.demographicInformation?.gender}
+								className="flex flex-row gap-4 justify-between"
+								disabled={disabled}
+							>
 								<RadioGroup.Option value="male">
 									{({checked}) => (
 										<span
@@ -401,7 +448,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 								<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
 								<Checkbox
 									isChecked={!!expiryDate}
-									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}>
+									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}
+									disabled={disabled}
+								>
 									Enabled
 								</Checkbox>
 							</div>
@@ -434,6 +483,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 									dateFormat="dd/MM/yyyy"
 									selected={moment(expiryDate).toDate()}
 									onChange={(date) => setExpiryDate(date)}
+									disabled={disabled}
 								/>
 							)}
 						</div>
@@ -445,27 +495,55 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 						<div className="flex flex-col md:flex-row gap-8 w-full">
 							<div className="flex flex-col gap-3 w-full">
 								<label className="font-normal text-base text-mti-gray-dim">Status</label>
-								<select
+								<Select
-									defaultValue={user.status}
+									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"
-									onChange={(e) => setStatus(e.target.value as typeof user.status)}
+									options={USER_STATUS_OPTIONS}
-									className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+									value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
-									<option value="active">Active</option>
+									onChange={(value) => setStatus(value?.value as typeof user.status)}
-									<option value="disabled">Disabled</option>
+									styles={{
-									<option value="paymentDue">Payment Due</option>
+										control: (styles) => ({
-								</select>
+											...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,
+										}),
+									}}
+									isDisabled={disabled}
+								/>
 							</div>
 							<div className="flex flex-col gap-3 w-full">
 								<label className="font-normal text-base text-mti-gray-dim">Type</label>
-								<select
+								<Select
-									defaultValue={user.type}
+									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"
-									onChange={(e) => setType(e.target.value as typeof user.type)}
+									options={USER_TYPE_OPTIONS}
-									className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
+									value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
-									{Object.keys(USER_TYPE_LABELS).map((type) => (
+									onChange={(value) => setType(value?.value as typeof user.type)}
-										<option key={type} value={type}>
+									styles={{
-											{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+										control: (styles) => ({
-										</option>
+											...styles,
-									))}
+											paddingLeft: "4px",
-								</select>
+											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,
+										}),
+									}}
+									isDisabled={disabled}
+								/>
 							</div>
 						</div>
 					</>
@@ -494,7 +572,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
 					<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
 						Close
 					</Button>
-					<Button onClick={updateUser} className="w-full max-w-[200px]">
+					<Button disabled={disabled} onClick={updateUser} className="w-full max-w-[200px]">
 						Update
 					</Button>
 				</div>

src/pages/payment-record.tsx

@@ -8,11 +8,11 @@ import Layout from "@/components/High/Layout";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import usePayments from "@/hooks/usePayments";
 import {Payment} from "@/interfaces/paypal";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import {CellContext, createColumnHelper, flexRender, getCoreRowModel, HeaderGroup, useReactTable} from "@tanstack/react-table";
 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";
@@ -26,6 +26,7 @@ import ReactDatePicker from "react-datepicker";
 import moment from "moment";
 import PaymentAssetManager from "@/components/PaymentAssetManager";
 import {toFixedNumber} from "@/utils/number";
+import {CSVLink} from "react-csv";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -235,8 +236,39 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 	);
 };
 
+const IS_PAID_OPTIONS = [
+{
+	value: null,
+	label: 'All',
+}, {
+	value: false,
+	label: 'Unpaid',
+}, {
+	value: true,
+	label: 'Paid',
+},
+];
+
+const CSV_WHITELISTED_KEYS = [
+	'corporateId',
+	'corporate',
+	'date',
+	'amount',
+	'agent',
+	'agentCommission',
+	'agentValue',
+	'isPaid',
+];
+
+interface SimpleCSVColumn {
+	key: string,
+	label: string,
+	index: number,
+};
+
 export default function PaymentRecord() {
-	const [selectedUser, setSelectedUser] = useState<User>();
+	const [selectedCorporateUser, setSelectedCorporateUser] = useState<User>();
+	const [selectedAgentUser, setSelectedAgentUser] = useState<User>();
 	const [isCreatingPayment, setIsCreatingPayment] = useState(false);
 	const [filters, setFilters] = useState<{filter: (p: Payment) => boolean; id: string}[]>([]);
 	const [displayPayments, setDisplayPayments] = useState<Payment[]>([]);
@@ -246,13 +278,22 @@ 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
@@ -284,6 +325,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})
@@ -321,6 +369,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -337,6 +386,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -353,6 +403,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -366,6 +417,7 @@ export default function PaymentRecord() {
 						}),
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -382,6 +434,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -395,6 +448,7 @@ export default function PaymentRecord() {
 						}),
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -414,69 +468,134 @@ export default function PaymentRecord() {
 
 		return [];
 	};
+
+	const columHelperValue = (key: string, info: any) => {
+		switch(key) {
+			case 'agentCommission': {
+				const value = info.getValue();
+				return { value: `${value}%`};
+			}
+			case 'agent': {
+				const user = users.find((x) => x.id === info.row.original.agent) as AgentUser;
+				return {
+					value: user?.name,
+					user,
+				}
+			}
+			case 'agentValue':
+			case 'amount': {
+				const value = info.getValue();
+				const numberValue = toFixedNumber(value, 2)
+				const currency = CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label
+				return { value: `${numberValue} ${currency}` };
+			}
+			case 'date': {
+				const value = info.getValue();
+				return { value: moment(value).format("DD/MM/YYYY") };
+			}
+			case 'corporate': {
+				const specificValue = info.row.original.corporate;
+				const user = users.find((x) => x.id === specificValue) as CorporateUser;
+				return {
+					user,
+					value: user?.corporateInformation.companyInformation.name || user?.name,
+				};
+			}
+			case 'isPaid':
+			case 'corporateId':
+			default: {
+				const value = info.getValue();
+				return { value };
+			}
+		}
+
+	}
+
+
 	const defaultColumns = [
 		columnHelper.accessor("corporate", {
 			header: "Corporate ID",
-			cell: (info) => info.getValue(),
+			id: 'corporateId',
+			cell: (info) => {
+				const { value } = columHelperValue(info.column.id, info);
+				return value;
+			},
 		}),
 		columnHelper.accessor("corporate", {
 			header: "Corporate",
+			id: "corporate",
 			cell: (info) => {
-				const user = users.find((x) => x.id === info.row.original.corporate) as CorporateUser;
+				const { user, value } = columHelperValue(info.column.id, info);
 				return (
 					<div
 						className={clsx(
 							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
 						)}
-						onClick={() => setSelectedUser(user)}>
+						onClick={() => setSelectedCorporateUser(user)}>
-						{user?.corporateInformation.companyInformation.name || user?.name}
+						{value}
 					</div>
 				);
 			},
 		}),
 		columnHelper.accessor("date", {
 			header: "Date",
-			cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
+			id: "date",
+			cell: (info) => {
+				const { value } = columHelperValue(info.column.id, info);
+				return <span>{value}</span>;
+			},
 		}),
 		columnHelper.accessor("value", {
 			header: "Amount",
-			cell: (info) => (
+			id: "amount",
-				<span>
+			cell: (info) => {
-					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
+				const { value } = columHelperValue(info.column.id, info);
-				</span>
+				return <span>{value}</span>;
-			),
+			}
 		}),
 		columnHelper.accessor("agent", {
 			header: "Country Manager",
-			cell: (info) => (
+			id: "agent",
+			cell: (info) => {
+				const {	user, value } = columHelperValue(info.column.id, info);
+				return (
 					<div
 						className={clsx("underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer")}
-					onClick={() => setSelectedUser(users.find((x) => x.id === info.row.original.agent))}>
+						onClick={() => setSelectedAgentUser(user)}>
-					{(users.find((x) => x.id === info.row.original.agent) as AgentUser)?.name}
+						{value}
 					</div>
-			),
+				);
+			},
 		}),
 		columnHelper.accessor("agentCommission", {
 			header: "Commission",
-			cell: (info) => <>{info.getValue()}%</>,
+			id: "agentCommission",
+			cell: (info) => {
+				const { value } = columHelperValue(info.column.id, info);
+				return <>{value}</>
+			},
 		}),
 		columnHelper.accessor("agentValue", {
 			header: "Commission Value",
-			cell: (info) => (
+			id: "agentValue",
-				<span>
+			cell: (info) => {
-					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
+				const { value } = columHelperValue(info.column.id, info);
-				</span>
+				return <span>{value}</span>;
-			),
+			},
 		}),
 		columnHelper.accessor("isPaid", {
 			header: "Paid",
-			cell: (info) => (
+			id: "isPaid",
+			cell: (info) => {
+				const { value } = columHelperValue(info.column.id, info);
+				return (
 					<Checkbox
-					isChecked={info.getValue()}
+						isChecked={value}
 						onChange={(e) => (user?.type !== "agent" ? updatePayment(info.row.original, "isPaid", e) : null)}>
 						<span></span>
 					</Checkbox>
-			),
+				);
+			},
 		}),
 		...getFileAssetsColumns(),
 		{
@@ -502,6 +621,93 @@ export default function PaymentRecord() {
 		getCoreRowModel: getCoreRowModel(),
 	});
 
+	const getUserModal = () => {
+		if(user) {
+			if(selectedCorporateUser) {
+				return (
+					<Modal isOpen={!!selectedCorporateUser} onClose={() => setSelectedCorporateUser(undefined)}>
+						<>
+							{selectedCorporateUser && (
+								<div className="w-full flex flex-col gap-8">
+									<UserCard
+										loggedInUser={user}
+										onClose={(shouldReload) => {
+											setSelectedCorporateUser(undefined);
+											if (shouldReload) reload();
+										}}
+										user={selectedCorporateUser}
+										disabled
+									/>
+								</div>
+							)}
+						</>
+					</Modal>
+				);
+			}
+
+			if(selectedAgentUser) {
+				return (
+					<Modal isOpen={!!selectedAgentUser} onClose={() => setSelectedAgentUser(undefined)}>
+						<>
+							{selectedAgentUser && (
+								<div className="w-full flex flex-col gap-8">
+									<UserCard
+										loggedInUser={user}
+										onClose={(shouldReload) => {
+											setSelectedAgentUser(undefined);
+											if (shouldReload) reload();
+										}}
+										user={selectedAgentUser}
+									/>
+								</div>
+							)}
+						</>
+					</Modal>
+				);
+			}
+		}
+
+		return null;
+	}
+	
+
+	const getCSVData = () => {
+		const columns = table.getHeaderGroups().reduce((accm: SimpleCSVColumn[], group: HeaderGroup<Payment>) => {
+			const whitelistedColumns = group.headers.filter((header) => CSV_WHITELISTED_KEYS.includes(header.id));
+			
+			const data = whitelistedColumns.map((data) => ({
+				key: data.column.columnDef.id,
+				label: data.column.columnDef.header,
+				index: data.index,
+			})) as SimpleCSVColumn[];
+		
+			return [
+				...accm, 
+				...data,
+			];
+		}, []);
+
+		const { rows } = table.getRowModel();
+
+
+		return {
+			columns,
+			rows:  rows.map((row) => {
+				return columns.reduce((accm, { key, index }) => {
+					const { value } = columHelperValue(key, {
+						row,
+						getValue: () => row.getValue(key),
+					});
+					return {
+						...accm, 
+						[key]: value,
+					};
+				}, {});
+			}),
+		};
+	}
+
+	const { rows: csvRows, columns: csvColumns } = getCSVData();
 	return (
 		<>
 			<Head>
@@ -516,23 +722,7 @@ export default function PaymentRecord() {
 			<ToastContainer />
 			{user && (
 				<Layout user={user} className="gap-6">
-					<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
+					{getUserModal()}
-						<>
-							{selectedUser && (
-								<div className="w-full flex flex-col gap-8">
-									<UserCard
-										loggedInUser={user}
-										onClose={(shouldReload) => {
-											setSelectedUser(undefined);
-											if (shouldReload) reload();
-										}}
-										user={selectedUser}
-									/>
-								</div>
-							)}
-						</>
-					</Modal>
-
 					<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
 						<PaymentCreator
 							onClose={() => setIsCreatingPayment(false)}
@@ -544,9 +734,19 @@ export default function PaymentRecord() {
 					<div className="w-full flex flex-end justify-between p-2">
 						<h1 className="text-2xl font-semibold">Payment Record</h1>
 						{(user.type === "developer" || user.type === "admin") && (
-							<Button className="w-full max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
+							<div className="flex justify-end gap-2">
+								<Button className="max-w-[200px]" variant="outline">
+									<CSVLink
+										data={csvRows}
+										headers={csvColumns}
+										filename="payment-records.csv">
+										Download CSV
+									</CSVLink>
+								</Button>
+								<Button className="max-w-[200px]" variant="outline" onClick={() => setIsCreatingPayment(true)}>
 									New Payment
 								</Button>
+							</div>
 						)}
 					</div>
 					<div className="flex gap-8 w-full">
@@ -613,6 +813,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">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]"
+								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>

src/pages/profile.tsx

@@ -361,8 +361,9 @@ export default function Home() {
 									</div>
 								</form>
 							</div>
+							<div className="flex flex-col gap-6 w-48">
 								<div
-								className="flex flex-col gap-3 items-center w-48 h-fit cursor-pointer group"
+									className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
 									onClick={() => (profilePictureInput.current as any)?.click()}>
 									<div className="relative overflow-hidden h-48 w-48 rounded-full">
 										<div
@@ -382,6 +383,16 @@ export default function Home() {
 									</span>
 									<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
 								</div>
+								{user.type === 'agent' && (
+									<div className="flag items-center h-fit">
+										<img
+											alt={user.demographicInformation?.country.toLowerCase() + '_flag'}
+											src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
+											width="320"
+										/>
+									</div>
+								)}
+							</div>
 						</div>
 						<div className="flex flex-col gap-4 mt-8 mb-20">
 							<span className="text-lg font-bold">Bio</span>

yarn.lock

@@ -1287,6 +1287,13 @@
   resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
+"@types/react-csv@^1.1.10":
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/@types/react-csv/-/react-csv-1.1.10.tgz#b4e292d7330d2fa12062c579c752f254f559bf56"
+  integrity sha512-PESAyASL7Nfi/IyBR3ufd8qZkyoS+7jOylKmJxRZUZLFASLo4NZaRsJ8rNP8pCcbIziADyWBbLPD1nPddhsL4g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-datepicker@^4.15.1":
   version "4.15.1"
   resolved "https://registry.yarnpkg.com/@types/react-datepicker/-/react-datepicker-4.15.1.tgz#a66fee520f2a31f83b45f4ed7f28af7296e11d0c"
@@ -4519,6 +4526,11 @@ react-chartjs-2@^5.2.0:
   resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz"
   integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==
 
+react-csv@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/react-csv/-/react-csv-2.2.2.tgz#5bbf0d72a846412221a14880f294da9d6def9bfb"
+  integrity sha512-RG5hOcZKZFigIGE8LxIEV/OgS1vigFQT4EkaHeKgyuCbUAu9Nbd/1RYq++bJcJJ9VOqO/n9TZRADsXNDR4VEpw==
+
 react-currency-input-field@^3.6.12:
   version "3.6.12"
   resolved "https://registry.yarnpkg.com/react-currency-input-field/-/react-currency-input-field-3.6.12.tgz#6c59bec50b9a769459c971f94f9a67b7bf9046f7"