- Added more panels and lists;

- Added the ability to view more information on the user;
- Added the ability to update the user's expiry date

src/pages/(admin)/Lists/UserList.tsx

@@ -10,17 +10,20 @@ import clsx from "clsx";
 import {capitalize, reverse} from "lodash";
 import moment from "moment";
 import {Fragment, useEffect, useState} from "react";
-import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
+import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
 import {toast} from "react-toastify";
 import {countries, TCountries} from "countries-list";
 import countryCodes from "country-codes-list";
+import Modal from "@/components/Modal";
+import UserCard from "@/components/UserCard";
 
 const columnHelper = createColumnHelper<User>();
 
-export default function UserList({user}: {user: User}) {
+export default function UserList({user, filter}: {user: User; filter?: (user: User) => boolean}) {
 	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
 	const [sorter, setSorter] = useState<string>();
 	const [displayUsers, setDisplayUsers] = useState<User[]>([]);
+	const [selectedUser, setSelectedUser] = useState<User>();
 
 	const {users, reload} = useUsers();
 	const {groups} = useGroups(user ? user.id : undefined);
@@ -30,7 +33,9 @@ export default function UserList({user}: {user: User}) {
 			const filterUsers =
 				user.type === "admin" || user.type === "student" ? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id)) : users;
 
-			setDisplayUsers([...filterUsers.sort(sortFunction)]);
+			const filteredUsers = filter ? filterUsers.filter(filter) : filterUsers;
+
+			setDisplayUsers([...filteredUsers.sort(sortFunction)]);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [user, users, sorter, groups]);
@@ -186,7 +191,16 @@ export default function UserList({user}: {user: User}) {
 					<SorterArrow name="name" />
 				</button>
 			) as any,
-			cell: (info) => info.getValue(),
+			cell: ({row, getValue}) => (
+				<div
+					className={clsx(
+						PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+					)}
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) ? setSelectedUser(row.original) : null)}>
+					{getValue()}
+				</div>
+			),
 		}),
 		columnHelper.accessor("demographicInformation.country", {
 			header: (
@@ -251,7 +265,16 @@ export default function UserList({user}: {user: User}) {
 					<SorterArrow name="name" />
 				</button>
 			) as any,
-			cell: (info) => info.getValue(),
+			cell: ({row, getValue}) => (
+				<div
+					className={clsx(
+						PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+					)}
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) ? setSelectedUser(row.original) : null)}>
+					{getValue()}
+				</div>
+			),
 		}),
 		columnHelper.accessor("email", {
 			header: (
@@ -260,7 +283,16 @@ export default function UserList({user}: {user: User}) {
 					<SorterArrow name="email" />
 				</button>
 			) as any,
-			cell: (info) => info.getValue(),
+			cell: ({row, getValue}) => (
+				<div
+					className={clsx(
+						PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) &&
+							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+					)}
+					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) ? setSelectedUser(row.original) : null)}>
+					{getValue()}
+				</div>
+			),
 		}),
 		columnHelper.accessor("type", {
 			header: (
@@ -397,6 +429,21 @@ export default function UserList({user}: {user: User}) {
 
 	return (
 		<div className="w-full">
+			<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
+				<>
+					{selectedUser && (
+						<div className="w-full flex flex-col gap-8">
+							<UserCard
+								onClose={(shouldReload) => {
+									setSelectedUser(undefined);
+									if (shouldReload) reload();
+								}}
+								{...selectedUser}
+							/>
+						</div>
+					)}
+				</>
+			</Modal>
 			<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 				<thead>
 					{table.getHeaderGroups().map((headerGroup) => (