feat(payment): #3 user-facing /payment/dashboard route

src/app/account/page.tsx

@@ -33,12 +33,20 @@ export default function AccountPage() {
 
           <div className="divider" />
 
-          <Link
-            href="/account/audit"
-            className="btn btn-outline min-h-11 w-full"
-          >
-            View recent security activity
-          </Link>
+          <div className="flex flex-col gap-3">
+            <Link
+              href="/account/audit"
+              className="btn btn-outline min-h-11 w-full"
+            >
+              View recent security activity
+            </Link>
+            <Link
+              href="/payment/dashboard"
+              className="btn btn-outline min-h-11 w-full"
+            >
+              View payment dashboard
+            </Link>
+          </div>
         </div>
       </main>
     </ProtectedRoute>

src/app/payment/dashboard/PaymentDashboardContent.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React from 'react';
+import { PaymentHistory } from '@/components/payment/PaymentHistory';
+import { featureFlags } from '@/config/payment';
+
+/**
+ * Client body of /payment/dashboard (#3). Shows the not-configured banner when
+ * neither payment provider is set up (mirrors /payment-demo), then the user's
+ * transaction history plus a link to subscription management.
+ */
+export function PaymentDashboardContent() {
+  const noProvidersConfigured =
+    !featureFlags.stripeEnabled && !featureFlags.paypalEnabled;
+
+  return (
+    <div className="flex flex-col gap-6">
+      {noProvidersConfigured && (
+        <div role="alert" className="alert alert-warning">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-6 w-6 shrink-0 stroke-current"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            />
+          </svg>
+          <div>
+            <p className="font-semibold">Payment providers not configured</p>
+            <p className="text-sm">
+              No payments can be processed until Stripe or PayPal is set up. Set{' '}
+              <code>NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY</code> and/or{' '}
+              <code>NEXT_PUBLIC_PAYPAL_CLIENT_ID</code> in <code>.env</code>.
+              See <code>docs/PAYMENT-DEPLOYMENT.md</code>.
+            </p>
+          </div>
+        </div>
+      )}
+
+      <section aria-labelledby="payment-history-heading">
+        <h2 id="payment-history-heading" className="mb-4 text-2xl font-bold">
+          Payment History
+        </h2>
+        <PaymentHistory initialLimit={20} showFilters />
+      </section>
+    </div>
+  );
+}
+
+export default PaymentDashboardContent;

src/app/payment/dashboard/page.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import ProtectedRoute from '@/components/auth/ProtectedRoute';
+import { PaymentDashboardContent } from './PaymentDashboardContent';
+
+export const metadata: Metadata = {
+  title: 'Payment Dashboard - ScriptHammer',
+  description: 'Review your payment activity and history',
+  robots: {
+    index: false,
+    follow: false,
+    googleBot: {
+      index: false,
+      follow: false,
+    },
+  },
+};
+
+/**
+ * /payment/dashboard — user-facing payment activity dashboard (#3).
+ * Behind ProtectedRoute; composes the existing PaymentHistory component, which
+ * reads the caller's own transactions via RLS. Mirrors the /account/audit route
+ * pattern (server page + client content) and the /payment-demo not-configured
+ * banner.
+ */
+export default function PaymentDashboardPage() {
+  return (
+    <ProtectedRoute>
+      <main className="container mx-auto px-4 py-12 sm:px-6 md:py-16 lg:px-8">
+        <div className="mx-auto max-w-3xl">
+          <div className="mb-6 flex items-center justify-between">
+            <h1 className="text-3xl font-bold">Payment Dashboard</h1>
+            <Link href="/account" className="btn btn-ghost min-h-11">
+              Back to Account
+            </Link>
+          </div>
+
+          <PaymentDashboardContent />
+        </div>
+      </main>
+    </ProtectedRoute>
+  );
+}