Continued improving this

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

@@ -59,7 +59,7 @@ export default function UserList({
 	const [displayUsers, setDisplayUsers] = useState<User[]>([]);
 	const [selectedUser, setSelectedUser] = useState<User>();
 
-	const {users, reload} = useUsers({type});
+	const {users, page, total, reload, next, previous} = useUsers({type, size: 25});
 	const {permissions} = usePermissions(user?.id || "");
 	const {balance} = useUserBalance();
 	const {groups} = useGroups({
@@ -602,7 +602,7 @@ export default function UserList({
 
 	return (
 		<>
-			{renderHeader && renderHeader(displayUsers.length)}
+			{renderHeader && renderHeader(total)}
 			<div className="w-full">
 				<Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
 					{selectedUser && renderUserCard(selectedUser)}
@@ -614,6 +614,14 @@ export default function UserList({
 							Download List
 						</Button>
 					</div>
+					<div className="w-full flex gap-2 justify-between">
+						<Button className="w-full max-w-[200px]" disabled={page === 0} onClick={previous}>
+							Previous Page
+						</Button>
+						<Button className="w-full max-w-[200px]" disabled={page * 25 >= total} onClick={next}>
+							Next Page
+						</Button>
+					</div>
 					<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 						<thead>
 							{table.getHeaderGroups().map((headerGroup) => (

src/pages/api/users/list.ts

@@ -13,14 +13,16 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const {page, size, type} = req.query as {page?: string; size?: string; type?: Type};
-	const users = await getLinkedUsers(
+	const {size, type, latestID, firstID} = req.query as {size?: string; type?: Type; latestID?: string; firstID?: string};
+
+	const {users, total} = await getLinkedUsers(
 		req.session.user?.id,
 		req.session.user?.type,
 		type,
-		page !== undefined ? parseInt(page) : undefined,
+		firstID,
+		latestID,
 		size !== undefined ? parseInt(size) : undefined,
 	);
 
-	res.status(200).json(users);
+	res.status(200).json({users, total});
 }