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>
2026-08-23 06:01:27 +00:00
parent 87bf9a6151
commit ed1d3a8c12
6 changed files with 223 additions and 153 deletions
@@ -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>
+  );
+}