Fix payment method handling for non-default types (apple_pay, google_pay)

Yoco webhook payments are tagged with whatever wallet type the gateway
reports, not just cash/card/eft/voucher. Cashup/report totals were
silently dropping those into the "other" bucket instead of "card", and
the new user payment history page couldn't filter by them and showed
raw snake_case values.

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

frontend/src/app/dashboard/user/payments/page.tsx

@@ -18,6 +18,26 @@ interface PaymentItem {
 
 const formatRand = (n: number) => `R ${Math.abs(n).toFixed(2)}`;
 
+// Payment.method is free-text — online payments arrive tagged with whatever wallet type the
+// gateway reports (e.g. apple_pay, google_pay), not just the manual-entry methods below.
+const METHOD_LABELS: Record<string, string> = {
+  cash: "Cash",
+  card: "Card",
+  eft: "EFT",
+  voucher: "Voucher",
+  apple_pay: "Apple Pay",
+  google_pay: "Google Pay",
+};
+
+const formatMethod = (method: string | null | undefined) => {
+  if (!method) return "Payment";
+  if (METHOD_LABELS[method]) return METHOD_LABELS[method];
+  return method
+    .replace(/[_-]+/g, " ")
+    .replace(/([a-z])([A-Z])/g, "$1 $2")
+    .replace(/\b\w/g, c => c.toUpperCase());
+};
+
 export default function UserPaymentsPage() {
   const { user, loading, token } = useAuth();
   const router = useRouter();
@@ -37,7 +57,7 @@ export default function UserPaymentsPage() {
   // Filters
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
-  const [method, setMethod] = useState<"" | "cash" | "card" | "eft" | "voucher">("");
+  const [method, setMethod] = useState<"" | "cash" | "card" | "eft" | "voucher" | "apple_pay" | "google_pay">("");
   const [kind, setKind] = useState<"" | "payment" | "refund">("");
 
   const buildQuery = useCallback((p: number) => {
@@ -110,6 +130,8 @@ export default function UserPaymentsPage() {
               <option value="card">Card</option>
               <option value="eft">EFT</option>
               <option value="voucher">Voucher</option>
+              <option value="apple_pay">Apple Pay</option>
+              <option value="google_pay">Google Pay</option>
             </select>
           </div>
           <div>
@@ -147,7 +169,7 @@ export default function UserPaymentsPage() {
                   </div>
                   <div className="text-xs text-gray-500">{formatDateTime(p.createdAt)}</div>
                 </div>
-                <div className="text-xs text-gray-600">Method: {p.method || "payment"}</div>
+                <div className="text-xs text-gray-600">Method: {formatMethod(p.method)}</div>
                 {eventTitle && <div className="text-xs text-gray-600">Event: {eventTitle}</div>}
               </li>
             );