Add pagination to admin stops page (50/page)

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

src/app/admin/stops/page.tsx

@@ -7,6 +7,8 @@ import { redirect } from "next/navigation";
 import { pool } from "@/lib/db";
 import { type Stop } from "@/components/admin/stops/types";
 
+const PAGE_SIZE = 50;
+
 const StopIcon = () => (
   <svg className="h-5 w-5 sm:h-6 sm:w-6 text-current" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
     <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/>
@@ -14,7 +16,15 @@ const StopIcon = () => (
   </svg>
 );
 
-export default async function AdminStopsPage() {
+interface PageProps {
+  searchParams: Promise<{ page?: string }>;
+}
+
+export default async function AdminStopsPage({ searchParams }: PageProps) {
+  const params = await searchParams;
+  const page = Math.max(1, parseInt(params.page ?? "1", 10) || 1);
+  const offset = (page - 1) * PAGE_SIZE;
+
   const adminUser = await getAdminUser();
 
   if (!adminUser) return <AdminAccessDenied />;
@@ -24,6 +34,7 @@ export default async function AdminStopsPage() {
   }
 
   let stops: Stop[] = [];
+  let totalCount = 0;
   let error: { message: string } | null = null;
 
   try {
@@ -31,6 +42,13 @@ export default async function AdminStopsPage() {
       ? `AND brand_id = '${adminUser.brand_id}'`
       : "";
 
+    // Get total count for pagination
+    const countResult = await pool.query<{ count: string }>(`
+      SELECT count(*) as count FROM stops WHERE status = 'active' ${brandFilter}
+    `);
+    totalCount = parseInt(countResult.rows[0]?.count ?? "0", 10);
+
+    // Get paginated stops
     const { rows } = await pool.query<Stop& { brand_name: string }>(`
       SELECT
         s.id,
@@ -51,6 +69,7 @@ export default async function AdminStopsPage() {
       WHERE s.status = 'active'
       ${brandFilter}
       ORDER BY s.date ASC
+      LIMIT ${PAGE_SIZE} OFFSET ${offset}
     `);
 
     stops = rows.map((r) => ({
@@ -73,6 +92,8 @@ export default async function AdminStopsPage() {
     error = { message: e instanceof Error ? e.message : String(e) };
   }
 
+  const totalPages = Math.ceil(totalCount / PAGE_SIZE);
+
   if (error) {
     return (
       <main className="min-h-screen bg-[var(--admin-bg)]">
@@ -81,7 +102,7 @@ export default async function AdminStopsPage() {
             <nav className="flex items-center gap-2 text-xs sm:text-sm mb-6">
               <a href="/admin" className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-secondary)]">Admin</a>
               <span className="text-[var(--admin-text-muted)]">/</span>
-              <span className="text-[var(--admin-text-primary)] font-medium">Stops& Routes</span>
+              <span className="text-[var(--admin-text-primary)] font-medium">Stops & Routes</span>
             </nav>
             <h1 className="text-2xl sm:text-3xl font-black text-red-600 tracking-tight">
               Error loading stops
@@ -112,7 +133,12 @@ export default async function AdminStopsPage() {
 
       {/* Content */}
       <div className="px-4 sm:px-6 md:px-8 py-4 sm:py-6">
-        <StopsDashboardClient stops={stops} />
+        <StopsDashboardClient
+          stops={stops}
+          page={page}
+          totalPages={totalPages}
+          totalCount={totalCount}
+        />
       </div>
     </main>
   );