Updated the User list to also show their demographic information

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

@@ -110,6 +110,10 @@ const CreatePanel = ({user, users, group, onCreate}: CreateDialogProps) => {
 				className="w-full max-w-[200px] self-end"
 				disabled={!name}
 				onClick={() => {
+					if (name !== group?.name && (name === "Students" || name === "Teachers")) {
+						toast.error("That group name is reserved and cannot be used, please enter another one.");
+						return;
+					}
 					onCreate({name: name!, admin, participants, id: group?.id || uuidv4()});
 				}}>
 				{!group ? "Create" : "Update"}

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

@@ -9,13 +9,17 @@ import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
 import moment from "moment";
-import {Fragment} from "react";
+import {Fragment, useState} from "react";
 import {BsCheck, BsCheckCircle, BsFillExclamationOctagonFill, BsPerson, BsStop, BsTrash} from "react-icons/bs";
 import {toast} from "react-toastify";
+import {countries, TCountries} from "countries-list";
+import countryCodes from "country-codes-list";
 
 const columnHelper = createColumnHelper<User>();
 
 export default function UserList({user}: {user: User}) {
+	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
+
 	const {users, reload} = useUsers();
 	const {groups} = useGroups(user.id);
 
@@ -80,43 +84,7 @@ export default function UserList({user}: {user: User}) {
 			});
 	};
 
-	const defaultColumns = [
+	const actionColumn = ({row}: {row: {original: User}}) => {
-		columnHelper.accessor("name", {
-			header: "Name",
-			cell: (info) => info.getValue(),
-			enableSorting: true,
-		}),
-		columnHelper.accessor("email", {
-			header: "E-mail",
-			cell: (info) => info.getValue(),
-		}),
-		columnHelper.accessor("type", {
-			header: "Type",
-			cell: (info) => capitalize(info.getValue()),
-		}),
-		columnHelper.accessor("subscriptionExpirationDate", {
-			header: "Expiry Date",
-			cell: (info) => (!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")),
-		}),
-		columnHelper.accessor("isVerified", {
-			header: "Verification",
-			cell: (info) => (
-				<div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
-					<div
-						className={clsx(
-							"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
-							"transition duration-300 ease-in-out",
-							info.getValue() && "!bg-mti-purple-light ",
-						)}>
-						<BsCheck color="white" className="w-full h-full" />
-					</div>
-				</div>
-			),
-		}),
-		{
-			header: "",
-			id: "actions",
-			cell: ({row}: {row: {original: User}}) => {
 		return (
 			<div className="flex gap-4">
 				{PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
@@ -139,17 +107,13 @@ export default function UserList({user}: {user: User}) {
 									<Button
 										onClick={() => updateAccountType(row.original, "student")}
 										className="text-sm !py-2 !px-4"
-												disabled={
+										disabled={row.original.type === "student" || !PERMISSIONS.generateCode["student"].includes(user.type)}>
-													row.original.type === "student" || !PERMISSIONS.generateCode["student"].includes(user.type)
-												}>
 										Student
 									</Button>
 									<Button
 										onClick={() => updateAccountType(row.original, "teacher")}
 										className="text-sm !py-2 !px-4"
-												disabled={
+										disabled={row.original.type === "teacher" || !PERMISSIONS.generateCode["teacher"].includes(user.type)}>
-													row.original.type === "teacher" || !PERMISSIONS.generateCode["teacher"].includes(user.type)
-												}>
 										Teacher
 									</Button>
 									<Button
@@ -193,13 +157,96 @@ export default function UserList({user}: {user: User}) {
 				)}
 			</div>
 		);
+	};
+
+	const demographicColumns = [
+		columnHelper.accessor("name", {
+			header: "Name",
+			cell: (info) => info.getValue(),
+			enableSorting: true,
+		}),
+		columnHelper.accessor("demographicInformation.country", {
+			header: "Country",
+			cell: (info) =>
+				info.getValue()
+					? `${countryCodes.findOne("countryCode" as any, info.getValue()).flag} ${
+							countries[info.getValue() as unknown as keyof TCountries].name
+					  } (+${countryCodes.findOne("countryCode" as any, info.getValue()).countryCallingCode})`
+					: "Not available",
+		}),
+		columnHelper.accessor("demographicInformation.phone", {
+			header: "Phone",
+			cell: (info) => info.getValue() || "Not available",
+			enableSorting: true,
+		}),
+		columnHelper.accessor("demographicInformation.employment", {
+			header: "Employment",
+			cell: (info) => capitalize(info.getValue()) || "Not available",
+			enableSorting: true,
+		}),
+		columnHelper.accessor("demographicInformation.gender", {
+			header: "Gender",
+			cell: (info) => capitalize(info.getValue()) || "Not available",
+			enableSorting: true,
+		}),
+		{
+			header: (
+				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
+					Switch
+				</span>
+			),
+			id: "actions",
+			cell: actionColumn,
 		},
+	];
+
+	const defaultColumns = [
+		columnHelper.accessor("name", {
+			header: "Name",
+			cell: (info) => info.getValue(),
+			enableSorting: true,
+		}),
+		columnHelper.accessor("email", {
+			header: "E-mail",
+			cell: (info) => info.getValue(),
+		}),
+		columnHelper.accessor("type", {
+			header: "Type",
+			cell: (info) => capitalize(info.getValue()),
+		}),
+		columnHelper.accessor("subscriptionExpirationDate", {
+			header: "Expiry Date",
+			cell: (info) => (!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")),
+		}),
+		columnHelper.accessor("isVerified", {
+			header: "Verification",
+			cell: (info) => (
+				<div className="flex gap-3 items-center text-mti-gray-dim text-sm self-center">
+					<div
+						className={clsx(
+							"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
+							"transition duration-300 ease-in-out",
+							info.getValue() && "!bg-mti-purple-light ",
+						)}>
+						<BsCheck color="white" className="w-full h-full" />
+					</div>
+				</div>
+			),
+		}),
+		{
+			header: (
+				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
+					Switch
+				</span>
+			),
+			id: "actions",
+			cell: actionColumn,
 		},
 	];
 
 	const table = useReactTable({
 		data: user.type === "admin" || user.type === "student" ? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id)) : users,
-		columns: defaultColumns,
+		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
 		getCoreRowModel: getCoreRowModel(),
 	});