fix: audit fixes — tier-quota bypass, webhook SSRF, auth hardening, pagination, a11y

Full audit (bugs/UI-UX/backend/feature-gap) turned up a money-leak AI quota
bypass, webhook SSRF, and a long tail of missing pagination/auth/a11y work.
Fixes land together since HANDOFF.md tracked them as one backlog.

- AI routes charge tier quota before generating; nutrition POST is author-only
- Webhook dispatch re-validates URL per delivery (SSRF/DNS-rebinding), treats
  redirects as failures; recipe.published now actually dispatches
- New indexes/unique constraints on recipes, meal-planning, comments FK cascade
- Recipe PUT/restore snapshot only inside the transaction, after validation
- Recipe DELETE cleans up S3 objects (recipe + review photos)
- Optimistic UI (favorite/star/follow/shopping-list) rolls back on failure
- Upload presign enforces file size cap + per-tier storage quota
- Route-level loading/error/not-found states across (app), admin, and root
- middleware.ts guards (app)/admin; requireAdmin checks DB role, not cached
  session; rate limiting applied to both session and API-key branches,
  bucketed per key; Stripe webhook dedupes by event id
- Pagination added to recipes, feed, profile, comments, pantry, admin tables
- Nav shows real avatar + profile link + dark-mode toggle; destructive actions
  standardized on AlertDialog
- Unsaved-changes guard + real ingredient/step validation on recipe form;
  canonical /recipes/[id] used in-app; next/image migration; aria-labels and
  alt text across icon buttons, avatars, recipe photos
- packages/api-types removed (zero callers, too drifted to safely rewire);
  openapi.ts and ai-keys error shape drift fixed; BYOK decrypt failures now
  surface instead of silently falling back to the platform key

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

apps/web/app/admin/reports/page.tsx

@@ -1,25 +1,41 @@
 import type { Metadata } from "next";
-import { db, reports, users, eq, desc } from "@epicure/db";
+import Link from "next/link";
+import { db, reports, users, eq, desc, count } from "@epicure/db";
 import { ReportsQueue } from "@/components/admin/reports-queue";
 
 export const metadata: Metadata = {};
 
-export default async function AdminReportsPage() {
-  const rows = await db
-    .select({
-      id: reports.id,
-      targetType: reports.targetType,
-      targetId: reports.targetId,
-      reason: reports.reason,
-      createdAt: reports.createdAt,
-      reporterName: users.name,
-      reporterEmail: users.email,
-    })
-    .from(reports)
-    .innerJoin(users, eq(reports.reporterId, users.id))
-    .where(eq(reports.status, "pending"))
-    .orderBy(desc(reports.createdAt))
-    .limit(100);
+const PAGE_SIZE = 100;
+
+interface PageProps {
+  searchParams: Promise<{ page?: string }>;
+}
+
+export default async function AdminReportsPage({ searchParams }: PageProps) {
+  const { page: pageParam } = await searchParams;
+  const page = Math.max(1, parseInt(pageParam ?? "1", 10) || 1);
+  const offset = (page - 1) * PAGE_SIZE;
+
+  const [rows, totalRow] = await Promise.all([
+    db
+      .select({
+        id: reports.id,
+        targetType: reports.targetType,
+        targetId: reports.targetId,
+        reason: reports.reason,
+        createdAt: reports.createdAt,
+        reporterName: users.name,
+        reporterEmail: users.email,
+      })
+      .from(reports)
+      .innerJoin(users, eq(reports.reporterId, users.id))
+      .where(eq(reports.status, "pending"))
+      .orderBy(desc(reports.createdAt))
+      .limit(PAGE_SIZE)
+      .offset(offset),
+    db.select({ count: count() }).from(reports).where(eq(reports.status, "pending")),
+  ]);
+  const total = totalRow[0]?.count ?? 0;
 
   return (
     <div className="space-y-6">
@@ -32,6 +48,25 @@ export default async function AdminReportsPage() {
       <ReportsQueue
         reports={rows.map((r) => ({ ...r, createdAt: r.createdAt.toISOString() }))}
       />
+
+      <div className="flex gap-2">
+        {page > 1 && (
+          <Link
+            href={`/admin/reports?page=${page - 1}`}
+            className="rounded-md border px-3 py-1 text-sm hover:bg-accent"
+          >
+            Previous
+          </Link>
+        )}
+        {offset + rows.length < total && (
+          <Link
+            href={`/admin/reports?page=${page + 1}`}
+            className="rounded-md border px-3 py-1 text-sm hover:bg-accent"
+          >
+            Next
+          </Link>
+        )}
+      </div>
     </div>
   );
 }