feat: add pagination to /admin/servers (10 per page)

Author: ddrayko

public/js/admin.js

@@ -512,6 +512,8 @@ function updateAdminNav() {
   });
 }
 
+let adminServersPage = 1;
+
 async function renderAdminServers() {
   document.querySelectorAll('.admin-page').forEach(p => p.classList.remove('active'));
   const el = $a('#admin-page-servers');
@@ -538,16 +540,27 @@ async function renderAdminServers() {
           <tr><td colspan="6" style="text-align:center;padding:32px;color:var(--text-secondary)"><span class="spinner"></span> Loading...</td></tr>
         </tbody>
       </table>
+      <div id="admin-servers-pagination" style="display:none"></div>
     </div>
   `;
 
+  await fetchAdminServers(adminServersPage);
+}
+
+async function fetchAdminServers(pageNum) {
+  pageNum = pageNum || 1;
+  const limit = 10;
+  const offset = (pageNum - 1) * limit;
+  const paginationEl = $a('#admin-servers-pagination');
+
   try {
-    const data = await adminApi('/servers');
+    const data = await adminApi(`/servers?limit=${limit}&offset=${offset}`);
     const tbody = $a('#admin-servers-tbody');
     if (!tbody) return;
 
     if (data.servers.length === 0) {
       tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:32px;color:var(--text-secondary)">No servers found.</td></tr>';
+      if (paginationEl) paginationEl.style.display = 'none';
       return;
     }
 
@@ -574,13 +587,31 @@ async function renderAdminServers() {
         </tr>
       `;
     }).join('');
+
+    if (data.totalPages > 1) {
+      paginationEl.innerHTML = ahtml`
+        <div class="log-pagination">
+          <button class="btn btn-ghost btn-sm" onclick="changeAdminServersPage(${pageNum - 1})" ${pageNum <= 1 ? 'disabled' : ''}>Previous</button>
+          <span class="log-pagination-info">Page ${data.page} of ${data.totalPages} (${data.total} total)</span>
+          <button class="btn btn-ghost btn-sm" onclick="changeAdminServersPage(${pageNum + 1})" ${pageNum >= data.totalPages ? 'disabled' : ''}>Next</button>
+        </div>
+      `;
+      paginationEl.style.display = '';
+    } else {
+      paginationEl.style.display = 'none';
+    }
   } catch (err) {
     const tbody = $a('#admin-servers-tbody');
     if (tbody) tbody.innerHTML = `<tr><td colspan="6" style="text-align:center;padding:32px;color:var(--accent-red)">Error: ${err.message}</td></tr>`;
   }
   initIcons();
 }
 
+function changeAdminServersPage(pageNum) {
+  adminServersPage = pageNum;
+  fetchAdminServers(pageNum);
+}
+
 async function renderAdminServerDetail(serverId) {
   document.querySelectorAll('.admin-page').forEach(p => p.classList.remove('active'));
   const detailPage = $a('#admin-page-server-detail');

routes/admin.js

@@ -131,14 +131,21 @@ router.get('/check', authenticateToken, requireAdmin, (req, res) => {
 
 router.get('/servers', authenticateToken, requireAdmin, async (req, res) => {
   try {
-    const allServers = await getAllServers();
+    const limit = Math.min(parseInt(req.query.limit, 10) || 10, 50);
+    const offset = Math.max(parseInt(req.query.offset, 10) || 0, 0);
+
+    const result = await getAllServers(limit, offset);
+    const { servers: paginatedServers, total } = result;
+    const page = Math.floor(offset / limit) + 1;
+    const totalPages = Math.ceil(total / limit) || 1;
+
     const users = await query('SELECT id, email, username, ptero_user_id FROM users');
     const userMap = {};
     for (const u of users) {
       userMap[u.ptero_user_id] = { id: u.id, email: u.email, username: u.username };
     }
 
-    for (const s of allServers) {
+    for (const s of paginatedServers) {
       s.owner = userMap[s.user] || { id: null, email: 'Unknown', username: 'Unknown' };
       try {
         const meta = await query('SELECT * FROM server_meta WHERE ptero_server_id = ?', [s.id]);
@@ -148,7 +155,7 @@ router.get('/servers', authenticateToken, requireAdmin, async (req, res) => {
       }
     }
 
-    res.json({ servers: allServers });
+    res.json({ servers: paginatedServers, total, page, totalPages, limit });
   } catch (err) {
     console.error('Admin servers list error:', err.message);
     res.status(500).json({ error: 'Failed to fetch servers' });

services/pyrodactyl.js

@@ -143,7 +143,7 @@ export async function getPteroNestEggs(nestId) {
   return data.data.map(e => e.attributes);
 }
 
-export async function getAllServers() {
+export async function getAllServers(limit = null, offset = null) {
   let allServers = [];
   let page = 1;
   let hasMore = true;
@@ -160,7 +160,14 @@ export async function getAllServers() {
     }
   }
 
-  for (const server of allServers) {
+  const total = allServers.length;
+
+  let serversToEnrich = allServers;
+  if (limit !== null && offset !== null) {
+    serversToEnrich = allServers.slice(offset, offset + limit);
+  }
+
+  for (const server of serversToEnrich) {
     try {
       const node = await getNode(server.node);
       server.nodeFqdn = node.fqdn;
@@ -176,6 +183,10 @@ export async function getAllServers() {
     } catch { server.eggDetails = null; }
   }
 
+  if (limit !== null && offset !== null) {
+    return { servers: serversToEnrich, total };
+  }
+
   return allServers;
 }