Added the ability to view all exams

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

@@ -0,0 +1,85 @@
+import useUsers from "@/hooks/useUsers";
+import {Type} from "@/interfaces/user";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import clsx from "clsx";
+import {capitalize} from "lodash";
+import {useState} from "react";
+import {BsCheck} from "react-icons/bs";
+
+type TableUser = {
+	id: string;
+	name: string;
+	email: string;
+	type: Type;
+	isVerified: boolean;
+};
+
+const columnHelper = createColumnHelper<TableUser>();
+
+export default function UserList() {
+	const {users} = useUsers();
+
+	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("isVerified", {
+			header: "Verification Status",
+			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>
+			),
+		}),
+	];
+
+	const table = useReactTable({
+		data: users,
+		columns: defaultColumns,
+		getCoreRowModel: getCoreRowModel(),
+	});
+
+	return (
+		<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+			<thead>
+				{table.getHeaderGroups().map((headerGroup) => (
+					<tr key={headerGroup.id}>
+						{headerGroup.headers.map((header) => (
+							<th className="py-4" key={header.id}>
+								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+							</th>
+						))}
+					</tr>
+				))}
+			</thead>
+			<tbody className="px-2">
+				{table.getRowModel().rows.map((row) => (
+					<tr className="bg-white rounded-lg shadow py-2" key={row.id}>
+						{row.getVisibleCells().map((cell) => (
+							<td className="px-4 py-2" key={cell.id}>
+								{flexRender(cell.column.columnDef.cell, cell.getContext())}
+							</td>
+						))}
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+}