initial: standalone repo from monorepo split

src/app/(portal)/payments/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { api } from '@/lib/api';
+
+const methodLabels: Record<string, string> = { gcash: 'GCash', maya: 'Maya', cash: 'Cash', bank_transfer: 'Bank Transfer' };
+
+export default function PortalPaymentsPage() {
+  const [payments, setPayments] = useState<any[]>([]);
+  useEffect(() => { api.get('/payments').then((r) => setPayments(r.data.data || r.data)).catch(() => {}); }, []);
+
+  return (
+    <div>
+      <h1 className="text-xl font-bold text-surface-900">Payment History</h1>
+      <p className="mt-1 text-sm text-surface-500">Your payment records</p>
+
+      <div className="mt-5 bg-white rounded-xl border border-surface-200 overflow-hidden">
+        <table className="min-w-full divide-y divide-surface-200">
+          <thead className="bg-surface-50/50"><tr>
+            <th className="px-5 py-3 text-left text-xs font-medium text-surface-500 uppercase">Date</th>
+            <th className="px-5 py-3 text-right text-xs font-medium text-surface-500 uppercase">Amount</th>
+            <th className="px-5 py-3 text-left text-xs font-medium text-surface-500 uppercase">Method</th>
+            <th className="px-5 py-3 text-left text-xs font-medium text-surface-500 uppercase">Invoice</th>
+          </tr></thead>
+          <tbody className="divide-y divide-surface-100">
+            {payments.map((p) => (
+              <tr key={p.id} className="hover:bg-surface-50/50">
+                <td className="px-5 py-3.5 text-sm text-surface-500">{new Date(p.createdAt).toLocaleDateString()}</td>
+                <td className="px-5 py-3.5 text-sm text-right font-medium text-surface-900">PHP {Number(p.amount).toLocaleString()}</td>
+                <td className="px-5 py-3.5 text-sm text-surface-600">{methodLabels[p.method] || p.method}</td>
+                <td className="px-5 py-3.5 text-sm font-mono text-surface-500">{p.invoice?.number || '—'}</td>
+              </tr>
+            ))}
+            {payments.length === 0 && <tr><td colSpan={4} className="px-5 py-8 text-center text-surface-400">No payments yet</td></tr>}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}