41 lines
2.1 KiB
TypeScript
41 lines
2.1 KiB
TypeScript
'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>
|
|
);
|
|
}
|