Paginate the bookings page and the event attendee/ticket tabs.

Extract the pagination controls shared by the events and users lists into
components/admin/Pagination, along with a usePaginatedList helper that slices a
list and keeps the page in range when the list shrinks under it.

Bookings, the Attendees tab and the Tickets tab paginate client-side rather than
on the server: each already loads its full set for figures a slice would break —
the bookings stat cards, the group-booking totals and the sibling payment-method
lookup, and the per-status counts the two tabs share with the event's other tabs.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/app/admin/bookings/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useLanguage } from '@/context/LanguageContext';
 import { ticketsApi, eventsApi, paymentsApi, Ticket, Event } from '@/lib/api';
 import { parseDate, formatRucDisplay } from '@/lib/utils';
@@ -8,6 +8,7 @@ import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import { BottomSheet, MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
+import Pagination, { usePaginatedList } from '@/components/admin/Pagination';
 import { 
   TicketIcon, 
   CheckCircleIcon, 
@@ -51,6 +52,8 @@ export default function AdminBookingsPage() {
   const [selectedPaymentStatus, setSelectedPaymentStatus] = useState<string>('');
   const [searchQuery, setSearchQuery] = useState('');
   const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
 
   useEffect(() => {
     loadData();
@@ -203,6 +206,19 @@ export default function AdminBookingsPage() {
     (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
   );
 
+  // Bookings are paginated client-side: the page already loads every ticket so
+  // that the stat cards, the group-booking totals and the sibling payment-method
+  // lookup can see the whole set, and those would break on a server-side slice.
+  const filterKey = JSON.stringify([selectedEvent, selectedStatus, selectedPaymentStatus, searchQuery]);
+  const prevFilterKey = useRef(filterKey);
+  useEffect(() => {
+    if (prevFilterKey.current !== filterKey) {
+      prevFilterKey.current = filterKey;
+      setPage(1);
+    }
+  }, [filterKey]);
+  const pagedTickets = usePaginatedList(sortedTickets, page, pageSize, setPage);
+
   const stats = {
     total: tickets.length,
     pending: tickets.filter(t => t.status === 'pending').length,
@@ -408,7 +424,7 @@ export default function AdminBookingsPage() {
                   </td>
                 </tr>
               ) : (
-                sortedTickets.map((ticket) => {
+                pagedTickets.map((ticket) => {
                   const bookingInfo = getBookingInfo(ticket);
                   return (
                     <tr key={ticket.id} className="hover:bg-gray-50">
@@ -502,7 +518,7 @@ export default function AdminBookingsPage() {
             No bookings found.
           </div>
         ) : (
-          sortedTickets.map((ticket) => {
+          pagedTickets.map((ticket) => {
             const bookingInfo = getBookingInfo(ticket);
             const primary = getPrimaryAction(ticket);
             const eventTitle = ticket.event?.title || events.find(e => e.id === ticket.eventId)?.title || 'Unknown';
@@ -580,6 +596,15 @@ export default function AdminBookingsPage() {
         )}
       </div>
 
+      <Pagination
+        id="bookings"
+        page={page}
+        pageSize={pageSize}
+        total={sortedTickets.length}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+      />
+
       {/* Mobile Filter BottomSheet */}
       <BottomSheet open={mobileFilterOpen} onClose={() => setMobileFilterOpen(false)} title="Filters">
         <div className="space-y-4">

frontend/src/app/admin/events/[id]/_tabs/AttendeesTab.tsx

@@ -1,8 +1,10 @@
+import { useEffect, useRef, useState } from 'react';
 import { Ticket } from '@/lib/api';
 import { parseDate, EVENT_TIMEZONE } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { Dropdown, DropdownItem, MoreMenu } from '@/components/admin/MobileComponents';
+import Pagination, { usePaginatedList } from '@/components/admin/Pagination';
 import clsx from 'clsx';
 import {
   MagnifyingGlassIcon,
@@ -79,6 +81,20 @@ export function AttendeesTab({
   handleMarkPaid,
   handleCheckin,
 }: AttendeesTabProps) {
+  // Paginated client-side: the parent already holds every ticket for the event
+  // so the status counts and the other tabs keep seeing the full set.
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+  const filterKey = `${searchQuery}|${statusFilter}`;
+  const prevFilterKey = useRef(filterKey);
+  useEffect(() => {
+    if (prevFilterKey.current !== filterKey) {
+      prevFilterKey.current = filterKey;
+      setPage(1);
+    }
+  }, [filterKey]);
+  const pagedTickets = usePaginatedList(filteredTickets, page, pageSize, setPage);
+
   return (
     <div className="space-y-3">
       {/* Desktop toolbar */}
@@ -237,7 +253,7 @@ export function AttendeesTab({
                   </td>
                 </tr>
               ) : (
-                filteredTickets.map((ticket) => {
+                pagedTickets.map((ticket) => {
                   const primary = getPrimaryAction(ticket);
                   return (
                     <tr key={ticket.id} className="hover:bg-gray-50/50">
@@ -323,7 +339,7 @@ export function AttendeesTab({
             {tickets.length === 0 ? 'No attendees yet' : 'No attendees match the current filters'}
           </div>
         ) : (
-          filteredTickets.map((ticket) => {
+          pagedTickets.map((ticket) => {
             const primary = getPrimaryAction(ticket);
             return (
               <Card key={ticket.id} className="p-3">
@@ -380,6 +396,16 @@ export function AttendeesTab({
         )}
       </div>
 
+      <Pagination
+        id="attendees"
+        page={page}
+        pageSize={pageSize}
+        total={filteredTickets.length}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        className="mb-20 md:mb-0"
+      />
+
       {/* Mobile FAB */}
       <div className="md:hidden fixed bottom-6 right-6 z-40">
         <button

frontend/src/app/admin/events/[id]/_tabs/TicketsTab.tsx

@@ -1,8 +1,10 @@
+import { useEffect, useRef, useState } from 'react';
 import { Ticket } from '@/lib/api';
 import { parseDate, EVENT_TIMEZONE } from '@/lib/utils';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { Dropdown, DropdownItem, MoreMenu } from '@/components/admin/MobileComponents';
+import Pagination, { usePaginatedList } from '@/components/admin/Pagination';
 import {
   MagnifyingGlassIcon,
   ChevronDownIcon,
@@ -48,6 +50,20 @@ export function TicketsTab({
   handleRemoveCheckin,
   setShowTicketExportSheet,
 }: TicketsTabProps) {
+  // Paginated client-side, same as the Attendees tab: the parent keeps the full
+  // ticket list for the header counts and the export actions.
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+  const filterKey = `${ticketSearchQuery}|${ticketStatusFilter}`;
+  const prevFilterKey = useRef(filterKey);
+  useEffect(() => {
+    if (prevFilterKey.current !== filterKey) {
+      prevFilterKey.current = filterKey;
+      setPage(1);
+    }
+  }, [filterKey]);
+  const pagedTickets = usePaginatedList(filteredConfirmedTickets, page, pageSize, setPage);
+
   return (
     <div className="space-y-3">
       {/* Desktop toolbar */}
@@ -152,7 +168,7 @@ export function TicketsTab({
                   </td>
                 </tr>
               ) : (
-                filteredConfirmedTickets.map((ticket) => (
+                pagedTickets.map((ticket) => (
                   <tr key={ticket.id} className="hover:bg-gray-50/50">
                     <td className="px-4 py-2.5">
                       <p className="font-medium text-sm">{ticket.attendeeFirstName} {ticket.attendeeLastName || ''}</p>
@@ -216,7 +232,7 @@ export function TicketsTab({
             {confirmedTickets.length === 0 ? 'No confirmed tickets yet' : 'No tickets match the current filters'}
           </div>
         ) : (
-          filteredConfirmedTickets.map((ticket) => (
+          pagedTickets.map((ticket) => (
             <Card key={ticket.id} className="p-3">
               <div className="flex items-start justify-between gap-2">
                 <div className="min-w-0 flex-1">
@@ -253,6 +269,15 @@ export function TicketsTab({
           ))
         )}
       </div>
+
+      <Pagination
+        id="tickets"
+        page={page}
+        pageSize={pageSize}
+        total={filteredConfirmedTickets.length}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+      />
     </div>
   );
 }

frontend/src/app/admin/events/page.tsx

@@ -9,26 +9,13 @@ import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import { MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
-import { PlusIcon, PencilIcon, TrashIcon, EyeIcon, PhotoIcon, DocumentDuplicateIcon, ArchiveBoxIcon, StarIcon, LinkIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { PlusIcon, PencilIcon, TrashIcon, EyeIcon, PhotoIcon, DocumentDuplicateIcon, ArchiveBoxIcon, StarIcon, LinkIcon } from '@heroicons/react/24/outline';
 import { StarIcon as StarIconSolid } from '@heroicons/react/24/solid';
 import toast from 'react-hot-toast';
 import clsx from 'clsx';
 import { parseDate } from '@/lib/utils';
 import EventFormModal from './_components/EventFormModal';
-
+import Pagination from '@/components/admin/Pagination';
-const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-
-function getPageNumbers(current: number, totalPages: number): (number | '...')[] {
-  if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
-  const pages: (number | '...')[] = [1];
-  const start = Math.max(2, current - 1);
-  const end = Math.min(totalPages - 1, current + 1);
-  if (start > 2) pages.push('...');
-  for (let i = start; i <= end; i++) pages.push(i);
-  if (end < totalPages - 1) pages.push('...');
-  pages.push(totalPages);
-  return pages;
-}
 
 export default function AdminEventsPage() {
   const router = useRouter();
@@ -438,64 +425,15 @@ export default function AdminEventsPage() {
         )}
       </div>
 
-      {/* Pagination */}
+      <Pagination
-      {total > 0 && (
+        id="events"
-        <div className="mt-4 mb-20 md:mb-0 flex flex-col sm:flex-row items-center justify-between gap-3">
+        page={page}
-          <div className="flex items-center gap-2 text-sm text-gray-600">
+        pageSize={pageSize}
-            <label htmlFor="events-page-size" className="whitespace-nowrap">Per page</label>
+        total={total}
-            <select
+        onPageChange={setPage}
-              id="events-page-size"
+        onPageSizeChange={setPageSize}
-              value={pageSize}
+        className="mb-20 md:mb-0"
-              onChange={(e) => { setPageSize(Number(e.target.value)); setPage(1); }}
+      />
-              className="px-2 py-1.5 rounded-btn border border-secondary-light-gray text-sm"
-            >
-              {PAGE_SIZE_OPTIONS.map((size) => (
-                <option key={size} value={size}>{size}</option>
-              ))}
-            </select>
-            <span className="text-xs text-gray-500 whitespace-nowrap">
-              {(page - 1) * pageSize + 1}&ndash;{Math.min(page * pageSize, total)} of {total}
-            </span>
-          </div>
-          <div className="flex items-center gap-1">
-            <button
-              onClick={() => setPage(page - 1)}
-              disabled={page <= 1}
-              className="p-2 rounded-btn border border-secondary-light-gray text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:pointer-events-none min-h-[36px] min-w-[36px] flex items-center justify-center"
-              aria-label="Previous page"
-            >
-              <ChevronLeftIcon className="w-4 h-4" />
-            </button>
-            {getPageNumbers(page, Math.max(1, Math.ceil(total / pageSize))).map((p, i) =>
-              p === '...' ? (
-                <span key={`ellipsis-${i}`} className="px-1.5 text-sm text-gray-400">&hellip;</span>
-              ) : (
-                <button
-                  key={p}
-                  onClick={() => setPage(p)}
-                  className={clsx(
-                    'min-h-[36px] min-w-[36px] px-2 rounded-btn text-sm',
-                    p === page
-                      ? 'bg-primary-yellow text-primary-dark font-semibold'
-                      : 'border border-secondary-light-gray text-gray-600 hover:bg-gray-50'
-                  )}
-                  aria-current={p === page ? 'page' : undefined}
-                >
-                  {p}
-                </button>
-              )
-            )}
-            <button
-              onClick={() => setPage(page + 1)}
-              disabled={page >= Math.ceil(total / pageSize)}
-              className="p-2 rounded-btn border border-secondary-light-gray text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:pointer-events-none min-h-[36px] min-w-[36px] flex items-center justify-center"
-              aria-label="Next page"
-            >
-              <ChevronRightIcon className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-      )}
 
       {/* Mobile FAB */}
       <div className="md:hidden fixed bottom-6 right-6 z-40">

frontend/src/app/admin/users/page.tsx

@@ -9,26 +9,13 @@ import Button from '@/components/ui/Button';
 import { AdminPageSkeleton } from '@/components/ui/Skeleton';
 import Input from '@/components/ui/Input';
 import { MoreMenu, DropdownItem, BottomSheet, AdminMobileStyles } from '@/components/admin/MobileComponents';
-import { TrashIcon, PencilSquareIcon, FunnelIcon, XMarkIcon, MagnifyingGlassIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { TrashIcon, PencilSquareIcon, FunnelIcon, XMarkIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import toast from 'react-hot-toast';
 import clsx from 'clsx';
+import Pagination from '@/components/admin/Pagination';
 
 type RegisteredRange = '' | '7d' | '30d' | '90d';
 
-const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-
-function getPageNumbers(current: number, totalPages: number): (number | '...')[] {
-  if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
-  const pages: (number | '...')[] = [1];
-  const start = Math.max(2, current - 1);
-  const end = Math.min(totalPages - 1, current + 1);
-  if (start > 2) pages.push('...');
-  for (let i = start; i <= end; i++) pages.push(i);
-  if (end < totalPages - 1) pages.push('...');
-  pages.push(totalPages);
-  return pages;
-}
-
 function registeredAfterFromRange(range: RegisteredRange): string | undefined {
   if (!range) return undefined;
   const days = range === '7d' ? 7 : range === '30d' ? 30 : 90;
@@ -418,64 +405,14 @@ export default function AdminUsersPage() {
         )}
       </div>
 
-      {/* Pagination */}
+      <Pagination
-      {total > 0 && (
+        id="users"
-        <div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-3">
+        page={page}
-          <div className="flex items-center gap-2 text-sm text-gray-600">
+        pageSize={pageSize}
-            <label htmlFor="users-page-size" className="whitespace-nowrap">Per page</label>
+        total={total}
-            <select
+        onPageChange={setPage}
-              id="users-page-size"
+        onPageSizeChange={setPageSize}
-              value={pageSize}
+      />
-              onChange={(e) => { setPageSize(Number(e.target.value)); setPage(1); }}
-              className="px-2 py-1.5 rounded-btn border border-secondary-light-gray text-sm"
-            >
-              {PAGE_SIZE_OPTIONS.map((size) => (
-                <option key={size} value={size}>{size}</option>
-              ))}
-            </select>
-            <span className="text-xs text-gray-500 whitespace-nowrap">
-              {(page - 1) * pageSize + 1}&ndash;{Math.min(page * pageSize, total)} of {total}
-            </span>
-          </div>
-          <div className="flex items-center gap-1">
-            <button
-              onClick={() => setPage(page - 1)}
-              disabled={page <= 1}
-              className="p-2 rounded-btn border border-secondary-light-gray text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:pointer-events-none min-h-[36px] min-w-[36px] flex items-center justify-center"
-              aria-label="Previous page"
-            >
-              <ChevronLeftIcon className="w-4 h-4" />
-            </button>
-            {getPageNumbers(page, Math.max(1, Math.ceil(total / pageSize))).map((p, i) =>
-              p === '...' ? (
-                <span key={`ellipsis-${i}`} className="px-1.5 text-sm text-gray-400">&hellip;</span>
-              ) : (
-                <button
-                  key={p}
-                  onClick={() => setPage(p)}
-                  className={clsx(
-                    'min-h-[36px] min-w-[36px] px-2 rounded-btn text-sm',
-                    p === page
-                      ? 'bg-primary-yellow text-primary-dark font-semibold'
-                      : 'border border-secondary-light-gray text-gray-600 hover:bg-gray-50'
-                  )}
-                  aria-current={p === page ? 'page' : undefined}
-                >
-                  {p}
-                </button>
-              )
-            )}
-            <button
-              onClick={() => setPage(page + 1)}
-              disabled={page >= Math.ceil(total / pageSize)}
-              className="p-2 rounded-btn border border-secondary-light-gray text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:pointer-events-none min-h-[36px] min-w-[36px] flex items-center justify-center"
-              aria-label="Next page"
-            >
-              <ChevronRightIcon className="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-      )}
 
       {/* Mobile Filter BottomSheet */}
       <BottomSheet open={mobileFilterOpen} onClose={() => setMobileFilterOpen(false)} title="Filters">

frontend/src/components/admin/Pagination.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { useEffect } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+
+/**
+ * Page buttons to show: first, last, the current page and its neighbours, with
+ * ellipses standing in for the gaps once there are more than 7 pages.
+ */
+export function getPageNumbers(current: number, totalPages: number): (number | '...')[] {
+  if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1);
+  const pages: (number | '...')[] = [1];
+  const start = Math.max(2, current - 1);
+  const end = Math.min(totalPages - 1, current + 1);
+  if (start > 2) pages.push('...');
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (end < totalPages - 1) pages.push('...');
+  pages.push(totalPages);
+  return pages;
+}
+
+/**
+ * Slices a list for client-side pagination and keeps the page in range when the
+ * list shrinks underneath it (filter change, deletion, refresh).
+ */
+export function usePaginatedList<T>(items: T[], page: number, pageSize: number, setPage: (page: number) => void) {
+  const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages);
+  }, [page, totalPages, setPage]);
+  const safePage = Math.min(page, totalPages);
+  return items.slice((safePage - 1) * pageSize, safePage * pageSize);
+}
+
+interface PaginationProps {
+  page: number;
+  pageSize: number;
+  total: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+  /** Unique per page — the per-page <select> needs its own id for the label. */
+  id: string;
+  className?: string;
+}
+
+export default function Pagination({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  onPageSizeChange,
+  id,
+  className,
+}: PaginationProps) {
+  if (total === 0) return null;
+
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  return (
+    <div className={clsx('mt-4 flex flex-col sm:flex-row items-center justify-between gap-3', className)}>
+      <div className="flex items-center gap-2 text-sm text-gray-600">
+        <label htmlFor={`${id}-page-size`} className="whitespace-nowrap">Per page</label>
+        <select
+          id={`${id}-page-size`}
+          value={pageSize}
+          onChange={(e) => { onPageSizeChange(Number(e.target.value)); onPageChange(1); }}
+          className="px-2 py-1.5 rounded-btn border border-secondary-light-gray text-sm"
+        >
+          {PAGE_SIZE_OPTIONS.map((size) => (
+            <option key={size} value={size}>{size}</option>
+          ))}
+        </select>
+        <span className="text-xs text-gray-500 whitespace-nowrap">
+          {(page - 1) * pageSize + 1}&ndash;{Math.min(page * pageSize, total)} of {total}
+        </span>
+      </div>
+      <div className="flex items-center gap-1">
+        <button
+          onClick={() => onPageChange(page - 1)}
+          disabled={page <= 1}
+          className="p-2 rounded-btn border border-secondary-light-gray text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:pointer-events-none min-h-[36px] min-w-[36px] flex items-center justify-center"
+          aria-label="Previous page"
+        >
+          <ChevronLeftIcon className="w-4 h-4" />
+        </button>
+        {getPageNumbers(page, totalPages).map((p, i) =>
+          p === '...' ? (
+            <span key={`ellipsis-${i}`} className="px-1.5 text-sm text-gray-400">&hellip;</span>
+          ) : (
+            <button
+              key={p}
+              onClick={() => onPageChange(p)}
+              className={clsx(
+                'min-h-[36px] min-w-[36px] px-2 rounded-btn text-sm',
+                p === page
+                  ? 'bg-primary-yellow text-primary-dark font-semibold'
+                  : 'border border-secondary-light-gray text-gray-600 hover:bg-gray-50'
+              )}
+              aria-current={p === page ? 'page' : undefined}
+            >
+              {p}
+            </button>
+          )
+        )}
+        <button
+          onClick={() => onPageChange(page + 1)}
+          disabled={page >= totalPages}
+          className="p-2 rounded-btn border border-secondary-light-gray text-gray-600 hover:bg-gray-50 disabled:opacity-40 disabled:pointer-events-none min-h-[36px] min-w-[36px] flex items-center justify-center"
+          aria-label="Next page"
+        >
+          <ChevronRightIcon className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  );
+}