Merge branch 'develop' into improvement/stats-page-updaes

2023-12-27 14:50:10 +00:00
parent cb73196503 9dbe876d65
commit a07e5a7312
6 changed files with 247 additions and 76 deletions
--- a/package.json
+++ b/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",
--- a/src/components/Low/Checkbox.tsx
+++ b/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(
--- a/src/components/UserCard.tsx
+++ b/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
-									defaultValue={user.status}
-									onChange={(e) => setStatus(e.target.value as typeof user.status)}
-									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">
-									<option value="active">Active</option>
-									<option value="disabled">Disabled</option>
-									<option value="paymentDue">Payment Due</option>
-								</select>
+								<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={USER_STATUS_OPTIONS}
+									value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
+									onChange={(value) => setStatus(value?.value as typeof user.status)}
+									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}
+								/>
 							</div>
 							<div className="flex flex-col gap-3 w-full">
 								<label className="font-normal text-base text-mti-gray-dim">Type</label>
-								<select
-									defaultValue={user.type}
-									onChange={(e) => setType(e.target.value as typeof user.type)}
-									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">
-									{Object.keys(USER_TYPE_LABELS).map((type) => (
-										<option key={type} value={type}>
-											{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-										</option>
-									))}
-								</select>
+								<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={USER_TYPE_OPTIONS}
+									value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
+									onChange={(value) => setType(value?.value as typeof user.type)}
+									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}
+								/>
 							</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>
--- a/src/pages/payment-record.tsx
+++ b/src/pages/payment-record.tsx
@@ -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;
@@ -236,7 +237,8 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 };

 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[]>([]);
@@ -321,6 +323,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -337,6 +340,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -353,6 +357,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -366,6 +371,7 @@ export default function PaymentRecord() {
 						}),
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -382,6 +388,7 @@ export default function PaymentRecord() {
 					return [
 						columnHelper.accessor("corporateTransfer", {
 							header: "Corporate transfer",
+							id: "corporateTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -395,6 +402,7 @@ export default function PaymentRecord() {
 						}),
 						columnHelper.accessor("commissionTransfer", {
 							header: "Commission transfer",
+							id: "commissionTransfer",
 							cell: (info) => (
 								<div className={containerClassName}>
 									<PaymentAssetManager
@@ -417,10 +425,12 @@ export default function PaymentRecord() {
 	const defaultColumns = [
 		columnHelper.accessor("id", {
 			header: "ID",
+			id: "id",
 			cell: (info) => info.getValue(),
 		}),
 		columnHelper.accessor("corporate", {
 			header: "Corporate",
+			id: "corporate",
 			cell: (info) => {
 				const user = users.find((x) => x.id === info.row.original.corporate) as CorporateUser;
 				return (
@@ -428,7 +438,7 @@ export default function PaymentRecord() {
 						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}
 					</div>
 				);
@@ -436,10 +446,12 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("date", {
 			header: "Date",
+			id: "date",
 			cell: (info) => <span>{moment(info.getValue()).format("DD/MM/YYYY")}</span>,
 		}),
 		columnHelper.accessor("value", {
 			header: "Amount",
+			id: "amount",
 			cell: (info) => (
 				<span>
 					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
@@ -448,20 +460,23 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("agent", {
 			header: "Country Manager",
+			id: "agent",
 			cell: (info) => (
 				<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(users.find((x) => x.id === info.row.original.agent))}>
 					{(users.find((x) => x.id === info.row.original.agent) as AgentUser)?.name}
 				</div>
 			),
 		}),
 		columnHelper.accessor("agentCommission", {
 			header: "Commission",
+			id: "agentCommission",
 			cell: (info) => <>{info.getValue()}%</>,
 		}),
 		columnHelper.accessor("agentValue", {
 			header: "Commission Value",
+			id: "agentValue",
 			cell: (info) => (
 				<span>
 					{toFixedNumber(info.getValue(), 2)} {CURRENCIES.find((x) => x.currency === info.row.original.currency)?.label}
@@ -470,6 +485,7 @@ export default function PaymentRecord() {
 		}),
 		columnHelper.accessor("isPaid", {
 			header: "Paid",
+			id: "isPaid",
 			cell: (info) => (
 				<Checkbox
 					isChecked={info.getValue()}
@@ -502,6 +518,55 @@ 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;
+	}
+
 	return (
 		<>
 			<Head>
@@ -516,23 +581,7 @@ export default function PaymentRecord() {
 			<ToastContainer />
 			{user && (
 				<Layout user={user} className="gap-6">
-					<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
-						<>
-							{selectedUser && (
-								<div className="w-full flex flex-col gap-8">
-									<UserCard
-										loggedInUser={user}
-										onClose={(shouldReload) => {
-											setSelectedUser(undefined);
-											if (shouldReload) reload();
-										}}
-										user={selectedUser}
-									/>
-								</div>
-							)}
-						</>
-					</Modal>
-
+					{getUserModal()}
 					<Modal isOpen={isCreatingPayment} onClose={() => setIsCreatingPayment(false)}>
 						<PaymentCreator
 							onClose={() => setIsCreatingPayment(false)}
@@ -544,9 +593,24 @@ 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)}>
-								New Payment
-							</Button>
+							<div className="flex justify-end gap-2">
+								<Button className="max-w-[200px]" variant="outline">
+									<CSVLink
+										data={displayPayments}
+										headers={defaultColumns
+											.filter((e) => e.header)
+											.map((e) => ({
+												label: e.header?.toString() || "",
+												key: e.id || "",
+											}))}
+										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">
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -361,26 +361,37 @@ export default function Home() {
 									</div>
 								</form>
 							</div>
-							<div
-								className="flex flex-col gap-3 items-center w-48 h-fit cursor-pointer group"
-								onClick={() => (profilePictureInput.current as any)?.click()}>
-								<div className="relative overflow-hidden h-48 w-48 rounded-full">
-									<div
-										className={clsx(
-											"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
-											"transition ease-in-out duration-300",
-										)}>
-										<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
+							<div className="flex flex-col gap-6 w-48">
+								<div
+									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
+											className={clsx(
+												"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
+												"transition ease-in-out duration-300",
+											)}>
+											<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
+										</div>
+										<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
 									</div>
-									<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
+									<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
+									<span
+										onClick={() => (profilePictureInput.current as any)?.click()}
+										className="cursor-pointer text-mti-purple-light text-sm">
+										Change picture
+									</span>
+									<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
 								</div>
-								<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
-								<span
-									onClick={() => (profilePictureInput.current as any)?.click()}
-									className="cursor-pointer text-mti-purple-light text-sm">
-									Change picture
-								</span>
-								<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
+								{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">
--- a/yarn.lock
+++ b/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"