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) => (