Add Yoco processing fee tracking to payments, settings, and reports

Estimates and snapshots the Yoco card-processing fee (always church-borne)
on every card payment, lets the admin configure in-person/online fee % per
plan in Settings -> Payments, and surfaces the fee alongside gross revenue
across the Finance/Profit reports, Master Orders, Revenue Detailed, and the
full cashup reconciliation flow (close-out screen, Cashup report, and audit
trail) so payout figures match what actually lands in the bank.

CHANGELOG.md

@@ -7,6 +7,58 @@ and this project follows [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+### Added
+
+- Yoco processing fee tracking: Settings → Payments lets you pick your Yoco plan (Core/Plus/Pro) to pre-fill estimated in-person and online fee percentages, both freely editable. The church always absorbs this fee — it's never added to what attendees pay.
+- Every card payment now snapshots its estimated Yoco fee at the time it's recorded, so later changes to the settings don't retroactively alter historical reports.
+- Finance report, Profit report, Master Orders, and Revenue Detailed (including their CSV/PDF/email exports) now show the estimated Yoco fee and a "net after fees" figure alongside gross revenue, so the numbers reflect what actually lands in the bank.
+- Cashup reconciliation (the per-event close-out screen, the Cashup report, and the Cashup Audit Trail) now shows three figures for the card method: expected before Yoco fees, the fee itself, and expected after fees — plus overall Yoco fees and net-profit-after-fees totals — so counts reconcile against what actually settles from Yoco rather than the gross card total.
+
+## [1.3.0] - 2026-07-27
+
+### Added
+
+- At The Door: new "Check-In" tab (before "Tickets" in the tab order) for quickly redeeming a registration's Main Tickets by quantity (e.g. checking in 2 of 3 people on a booking) without scanning each QR code individually. Like the Payment tab, it only ever shows the currently opened registration — reached via the "Open" button, not a general search.
+- Checking in a Main Ticket (via the new Check-In tab or the existing QR camera scanner) now automatically sends the ticket holder a confirmation email and WhatsApp message (respecting their notification preference) stating how many were checked in and how many remain.
+
+### Changed
+
+- At The Door: the "Open" button on a registration now jumps to the Payment tab only when a balance is still outstanding; fully paid registrations jump straight to the new Check-In tab instead.
+- At The Door: recording a payment that fully settles a registration's balance now jumps straight to the Check-In tab instead of generating and print-previewing a paper ticket — tickets are already emailed/WhatsApped to the attendee automatically once the registration is paid, so a physical print is no longer forced on this path.
+
+## [1.2.0] - 2026-07-27
+
+### Added
+
+- Supervisor dashboard: `/dashboard/supervisor/manual` now has a "Record Payment" tab (alongside "Register"), for capturing a payment without leaving the page. It pre-fills with the user and registration from the most recently created manual registration, but only switches tabs when a supervisor/admin clicks it themselves.
+
+### Changed
+
+- Self-service payments ("Pay with Yoco" after registering, and "Make payment" on the user dashboard) now go straight to a Yoco checkout for the full remaining outstanding balance, instead of first showing a page to choose a custom/partial amount. Generating a partial-amount payment link remains available only from the supervisor/admin Payments dashboard.
+
+### Removed
+
+- `/dashboard/user/pay` — the self-service partial-payment page — has been removed; it's no longer linked to from anywhere in the app.
+
+### Fixed
+
+- `/registration/success` read the auth token from the wrong `localStorage` key (`token` instead of `hope_events_token`), which silently broke loading the registration/attendee-form data on that page and made the "Pay with Yoco" button fail with "Not authorized, token failed". Now uses the shared auth context, like the rest of the app.
+- User dashboard: clicking "Make payment" briefly showed a "Sending tickets…" loading dialog (borrowed from the ticket-email flow) instead of a payment-specific message.
+
+## [1.1.0] - 2026-07-24
+
+### Added
+
+- User dashboard: new "Payment history" page listing the user's own payments (donations excluded), with server-side pagination (25 per page), date range, method, and payment/refund filters.
+- User dashboard: registration status (Pending/Confirmed/Partially Paid/Paid/Cancelled) is now shown as a colored badge, matching the existing event Closed/Past/Inactive badge convention, instead of a raw status string.
+- Dashboard-wide: inline success/error/confirmation messages (e.g. after creating a manual registration on `/dashboard/supervisor/manual`) now auto-dismiss after 7 seconds instead of persisting indefinitely, via a new shared `useDismissingState` hook. Applied consistently across all dashboard pages with this pattern; excluded are message-only modal dialogs (e.g. ticket-scanning's success/error confirmations, which still require a manual OK) and a couple of mixed validation/async error states shown inside actively-open forms (the registration-edit modal and the event create/edit modal), which continue to persist until the user acts.
+
+### Fixed
+
+- Cashup/reports: payments tagged with a digital wallet method (e.g. `apple_pay`, `google_pay` from online checkouts) are now bucketed as "card" for reconciliation instead of silently falling into "other".
+- User dashboard payment history: `GET /api/payments/mypayments` now normalizes `method` to the fixed set cash/card/eft/voucher/other. Card-network wallet payments (`apple_pay`, `google_pay`) are reported and filterable as "card"; any other gateway-reported value falls under "other" — instead of exposing raw, inconsistent gateway strings the filter dropdown didn't know about.
+- User dashboard: the registration payment list (shown on the main dashboard when viewing a registration's bill) applies the same cash/card/eft/voucher/other normalization client-side, so it no longer shows a raw `apple_pay`/`google_pay` string. Staff-facing payment views (supervisor payments, reports, cashup) are unaffected — they still show the raw method, which is what reconciliation needs.
+
 ## [1.0.1] - 2026-07-23
 
 ### Added
@@ -24,6 +76,9 @@ and this project follows [Semantic Versioning](https://semver.org/).
 
 - Initial release of the Hope Family Church event management app (Next.js frontend + Express/Prisma backend).
 
-[Unreleased]: https://git.crosscode.co.za/joshua/hope-events/compare/v1.0.1...main
+[Unreleased]: https://git.crosscode.co.za/joshua/hope-events/compare/v1.3.0...main
+[1.3.0]: https://git.crosscode.co.za/joshua/hope-events/compare/v1.2.0...v1.3.0
+[1.2.0]: https://git.crosscode.co.za/joshua/hope-events/compare/v1.1.0...v1.2.0
+[1.1.0]: https://git.crosscode.co.za/joshua/hope-events/compare/v1.0.1...v1.1.0
 [1.0.1]: https://git.crosscode.co.za/joshua/hope-events/compare/v1.0.0...v1.0.1
 [1.0.0]: https://git.crosscode.co.za/joshua/hope-events/releases/tag/v1.0.0

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "event-management-backend",
-  "version": "1.0.1",
+  "version": "1.3.0",
   "description": "Event Management System Backend",
   "main": "src/index.js",
   "scripts": {

backend/prisma/migrations/20260728060433_add_yoco_fee_fields_to_payment/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Payment" ADD COLUMN     "feeAmount" DOUBLE PRECISION,
+ADD COLUMN     "feeChannel" TEXT,
+ADD COLUMN     "feePayer" TEXT,
+ADD COLUMN     "feeRate" DOUBLE PRECISION;

backend/prisma/migrations/20260728065200_add_event_fee_payer_override/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Event" ADD COLUMN     "feePayerOnline" TEXT;

backend/prisma/migrations/20260728070306_remove_fee_payer_fields/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `feePayerOnline` on the `Event` table. All the data in the column will be lost.
+  - You are about to drop the column `feePayer` on the `Payment` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Event" DROP COLUMN "feePayerOnline";
+
+-- AlterTable
+ALTER TABLE "Payment" DROP COLUMN "feePayer";

backend/prisma/migrations/20260728085349_add_fee_amount_to_cashup_line/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "EventCashupLine" ADD COLUMN     "feeAmount" DOUBLE PRECISION;

backend/prisma/schema.prisma

@@ -221,6 +221,9 @@ model Payment {
   externalId        String?           @unique
   status            String?
   originalPaymentId String?
+  feeAmount         Float?
+  feeRate           Float?
+  feeChannel        String?
   createdAt         DateTime          @default(now())
   user              User              @relation(fields: [userId], references: [id], onDelete: Restrict)
   registration      Registration?     @relation(fields: [registrationId], references: [id], onDelete: SetNull)
@@ -461,6 +464,7 @@ model EventCashupLine {
   cashup         EventCashup               @relation(fields: [cashupId], references: [id], onDelete: Cascade)
   method         String
   expectedAmount Float                     @default(0)
+  feeAmount      Float?
   actualAmount   Float?
   variance       Float?
   notes          String?

backend/src/controllers/cashupController.js

@@ -53,7 +53,9 @@ const closeEvent = async (req, res) => {
       ? lines
         .filter(l => l && ALL_METHODS.includes(l.method))
         .map(l => {
-          const expected = financials.expectedCashByMethod[l.method] || 0;
+          // expectedInBankByMethod nets out Yoco fees (only ever nonzero for 'card') so the
+          // variance reconciles against what should actually land in the bank, not the gross figure.
+          const expected = financials.expectedInBankByMethod[l.method] || 0;
           const denominations = l.method === 'cash' && Array.isArray(l.denominations)
             ? l.denominations
               .map(d => ({ value: parseFloat(d.value), count: parseInt(d.count, 10) || 0 }))
@@ -66,6 +68,7 @@ const closeEvent = async (req, res) => {
             id: uuidv4(),
             method: l.method,
             expectedAmount: expected,
+            feeAmount: financials.feesByMethod[l.method] || 0,
             actualAmount: actual,
             variance: actual !== null ? actual - expected : null,
             notes: l.notes || null,
@@ -77,7 +80,7 @@ const closeEvent = async (req, res) => {
     const totalActualRevenue = isFullCashup
       ? cashupLines.reduce((sum, l) => sum + (l.actualAmount !== null ? l.actualAmount : 0), 0)
       : null;
-    const totalExpectedRevenue = ALL_METHODS.reduce((sum, m) => sum + financials.expectedCashByMethod[m], 0);
+    const totalExpectedRevenue = ALL_METHODS.reduce((sum, m) => sum + financials.expectedInBankByMethod[m], 0);
 
     const cashup = await prisma.eventCashup.create({
       data: {

backend/src/controllers/paymentController.js

@@ -5,7 +5,8 @@ const { computeRegistrationTotalDue, refreshPricingForRegistration } = require('
 const axios = require('axios');
 const { emailTickets } = require('./ticketController');
 const { safeErrorMessage } = require('../utils/errorUtils');
-const { assertEventOpen } = require('../utils/cashupUtils');
+const { assertEventOpen, bucketForMethod } = require('../utils/cashupUtils');
+const { getYocoFeeConfig, computeFeeSnapshot } = require('../utils/yocoFees');
 
 // @desc    Create a new payment
 // @route   POST /api/payments
@@ -58,6 +59,14 @@ const createPayment = async (req, res) => {
       throw new Error('Payment method is required');
     }
 
+    // Snapshot the Yoco fee estimate for this payment's method/amount at creation time —
+    // never recomputed later, so historical reports stay stable if settings change (see
+    // priceSnapshot in utils/pricing.js for the same philosophy). In-person is always
+    // church-borne: this app doesn't control the amount charged on a physical card machine.
+    const feeConfig = await getYocoFeeConfig();
+    const feeBucket = bucketForMethod(method);
+    const feeFor = (amt) => computeFeeSnapshot({ grossAmount: amt, channel: 'in_person', bucket: feeBucket, config: feeConfig });
+
     // Validate required parameters based on isDonation flag
     if (isDonation && !eventId) {
       res.status(400);
@@ -160,7 +169,8 @@ const createPayment = async (req, res) => {
             registrationId: null,
             eventId: registration.eventId,
             isDonation: true,
-            createdAt: paidAtDate || undefined
+            createdAt: paidAtDate || undefined,
+            ...feeFor(requestedAmount)
           },
           include: {
             user: { select: { id: true, name: true, email: true } },
@@ -178,7 +188,8 @@ const createPayment = async (req, res) => {
             registrationId,
             eventId: registrationEventId || eventId || null,
             isDonation: false,
-            createdAt: paidAtDate || undefined
+            createdAt: paidAtDate || undefined,
+            ...feeFor(applyAmount)
           },
           include: {
             user: { select: { id: true, name: true, email: true } },
@@ -199,7 +210,8 @@ const createPayment = async (req, res) => {
               eventId: registration.eventId,
               isDonation: true,
               originalPaymentId: payment.id,
-              createdAt: paidAtDate || undefined
+              createdAt: paidAtDate || undefined,
+              ...feeFor(excess)
             }
           });
         }
@@ -215,7 +227,8 @@ const createPayment = async (req, res) => {
           registrationId: registrationId || null,
           eventId: registrationEventId || eventId || null,
           isDonation: isDonation || false,
-          createdAt: paidAtDate || undefined
+          createdAt: paidAtDate || undefined,
+          ...feeFor(parseFloat(amount))
         },
         include: {
           user: { select: { id: true, name: true, email: true } },
@@ -349,30 +362,89 @@ const getPayments = async (req, res) => {
   }
 };
 
-// @desc    Get user payments
+// Payment.method is free-text — online checkouts get tagged with whatever wallet type the
+// gateway reports (apple_pay, google_pay, ...), not just the manual-entry methods below.
+// For the user-facing dashboard: card-network wallets count as "card" (same settlement, no
+// separate float); anything else unrecognized falls into "other".
+const USER_FACING_METHODS = ['cash', 'card', 'eft', 'voucher'];
+const CARD_ALIASES = ['apple_pay', 'google_pay'];
+const KNOWN_METHODS = [...USER_FACING_METHODS, ...CARD_ALIASES];
+
+function normalizeUserMethod(method) {
+  const m = String(method || '').toLowerCase();
+  if (USER_FACING_METHODS.includes(m)) return m;
+  if (CARD_ALIASES.includes(m)) return 'card';
+  return 'other';
+}
+
+// @desc    Get user payments (paginated, excludes donations, supports date range/method/kind filters)
 // @route   GET /api/payments/mypayments
 // @access  Private
 const getUserPayments = async (req, res) => {
   try {
-    // Users should see payments they made (donations) and payments tied to their registrations
-    const payments = await prisma.payment.findMany({
-      where: {
-        OR: [
-          { userId: req.user.id }, // payments made by the user (includes donations)
-          { registration: { userId: req.user.id } } // payments tied to the user's registrations
-        ]
-      },
-      include: {
-        registration: {
-          include: {
-            event: true
-          }
-        },
-        event: true
-      }
-    });
+    const page  = Math.max(1, parseInt(req.query.page)  || 1);
+    const limit = Math.min(25, Math.max(1, parseInt(req.query.limit) || 25));
+    const skip  = (page - 1) * limit;
 
-    res.json(payments);
+    // Users should see payments they made and payments tied to their registrations,
+    // excluding donations.
+    const where = {
+      isDonation: false,
+      OR: [
+        { userId: req.user.id },
+        { registration: { userId: req.user.id } }
+      ]
+    };
+
+    if (req.query.method) {
+      const requested = String(req.query.method).toLowerCase();
+      if (requested === 'card') {
+        // "Card" also covers card-network wallet types (apple_pay, google_pay) — same
+        // settlement as a card payment, no separate float to reconcile.
+        where.AND = [{
+          OR: ['card', ...CARD_ALIASES].map(m => ({ method: { equals: m, mode: 'insensitive' } }))
+        }];
+      } else if (requested === 'other') {
+        // "Other" covers every method that isn't one of the recognized buckets above.
+        where.NOT = {
+          OR: KNOWN_METHODS.map(m => ({ method: { equals: m, mode: 'insensitive' } }))
+        };
+      } else if (USER_FACING_METHODS.includes(requested)) {
+        where.method = { equals: requested, mode: 'insensitive' };
+      }
+    }
+
+    if (req.query.kind === 'refund') {
+      where.amount = { lt: 0 };
+    } else if (req.query.kind === 'payment') {
+      where.amount = { gte: 0 };
+    }
+
+    if (req.query.startDate || req.query.endDate) {
+      where.createdAt = {
+        ...(req.query.startDate && { gte: new Date(req.query.startDate) }),
+        ...(req.query.endDate && { lte: new Date(req.query.endDate) })
+      };
+    }
+
+    const [payments, total] = await prisma.$transaction([
+      prisma.payment.findMany({
+        where,
+        include: {
+          registration: { include: { event: true } },
+          event: true
+        },
+        orderBy: { createdAt: 'desc' },
+        skip,
+        take: limit
+      }),
+      prisma.payment.count({ where })
+    ]);
+
+    // Normalize the displayed method so the dashboard never shows a raw gateway string.
+    const normalizedPayments = payments.map(p => ({ ...p, method: normalizeUserMethod(p.method) }));
+
+    res.json({ data: normalizedPayments, total, page, limit, pages: Math.ceil(total / limit) });
   } catch (error) {
     res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
   }

backend/src/controllers/ticketController.js

@@ -321,6 +321,7 @@ const scanTicket = async (req, res) => {
         e.title              AS "eventTitle",
         eo.id                AS "eventOptionId",
         eo.name              AS "eventOptionName",
+        eo."isMainTicket"    AS "isMainTicket",
         COALESCE(
           json_agg(
             json_build_object(
@@ -352,7 +353,7 @@ const scanTicket = async (req, res) => {
       isUsed:   r.isUsed,
       eventId:  r.eventId,
       event:    { title: r.eventTitle },
-      registrationOption: { eventOption: { id: r.eventOptionId, name: r.eventOptionName } },
+      registrationOption: { eventOption: { id: r.eventOptionId, name: r.eventOptionName, isMainTicket: r.isMainTicket } },
       usages:   r.usages || []
     };
 
@@ -398,6 +399,14 @@ const scanTicket = async (req, res) => {
       })
     ]);
 
+    // Only Main Tickets trigger a check-in notification (add-on tickets scanned via
+    // the QR camera flow are unaffected)
+    if (ticket.registrationOption?.eventOption?.isMainTicket) {
+      require('../utils/notifications')
+        .sendCheckInEmails(ticket.id, qtyToRedeem, newTotalRedeemed, newRemaining)
+        .catch(e => console.error('Failed to send check-in notification:', e));
+    }
+
     res.json({
       message: `Ticket scanned successfully (${qtyToRedeem} of ${ticket.quantity || 1} redeemed${newRemaining > 0 ? `, ${newRemaining} remaining` : ''})`,
       ticketUsage,

backend/src/controllers/webhookController.js

@@ -4,6 +4,8 @@ const { v4: uuidv4 } = require('uuid');
 const { generateTicketsForRegistration } = require('../utils/ticketUtils');
 const { emailTickets } = require('./ticketController');
 const { computeRegistrationTotalDue, refreshPricingForRegistration } = require('../utils/pricing');
+const { bucketForMethod } = require('../utils/cashupUtils');
+const { getYocoFeeConfig, computeFeeSnapshot } = require('../utils/yocoFees');
 
 // @desc    Handle Yoco webhook events
 // @route   POST /api/webhooks/yoco
@@ -313,18 +315,25 @@ const handlePaymentSucceeded = async (webhookData) => {
       } catch (e) { /* ignore — payment will fail below if still null */ }
     }
 
+    // Snapshot the Yoco fee for this payment at creation time, using current settings — never
+    // recomputed later, so historical reports stay stable if settings change.
+    const grossAmount = amount / 100;
+    const feeConfig = await getYocoFeeConfig();
+    const feeSnapshot = computeFeeSnapshot({ grossAmount, channel: 'online', bucket: bucketForMethod(method.type), config: feeConfig });
+
     // Create payment record
     const payment = await prisma.payment.create({
       data: {
         id: uuidv4(), // Generate a UUID for the payment
-        amount: amount / 100, // Convert cents to your currency unit
+        amount: grossAmount, // Convert cents to your currency unit
         method: method.type, // The type of payment from the webhook
         status: status === 'succeeded' ? 'completed' : status,
         externalId: yocoPaymentId,
         registrationId: registration?.id || null,
         userId: resolvedUserId,
         eventId: registration?.eventId || metadata?.eventId || null,
-        isDonation: !registration?.id
+        isDonation: !registration?.id,
+        ...feeSnapshot
       },
       include: {
         user: {

backend/src/index.js

@@ -543,8 +543,9 @@ app.get('/docs', async (req, res) => {
         responses:[
           { status:201, desc:'Recorded', body:{ id:'pay-uuid-...', amount:450, method:'cash', status:'succeeded', createdAt:'2025-06-10T09:00:00.000Z' }},
         ]},
-      { method:'GET', path:'/api/payments/mypayments', auth:'user+', desc:'Get own payment history',
-        responses:[{ status:200, desc:'Success', body:[{ id:'pay-uuid-...', amount:450, method:'card', status:'succeeded', createdAt:'2025-06-01T11:00:00.000Z' }]}]},
+      { method:'GET', path:'/api/payments/mypayments', auth:'user+', desc:'Get own payment history (paginated, excludes donations). Returned method is normalized to cash|card|eft|voucher|other — apple_pay/google_pay report as "card", any other gateway-reported value reports as "other"',
+        queryParams:{ page:'Page (default 1)', limit:'Per page (default 25, max 25)', startDate:'ISO date, filters createdAt >=', endDate:'ISO date, filters createdAt <=', method:'Filter by normalized method: cash|card|eft|voucher|other', kind:'payment|refund — filters by amount sign' },
+        responses:[{ status:200, desc:'Success', body:{ data:[{ id:'pay-uuid-...', amount:450, method:'card', status:'succeeded', createdAt:'2025-06-01T11:00:00.000Z' }], total:1, page:1, limit:25, pages:1 }}]},
       { method:'GET', path:'/api/payments', auth:'supervisor+', desc:'List all payments',
         queryParams:{ page:'Page (default 1)', limit:'Per page (default 20)', eventId:'Filter by event', userId:'Filter by user', method:'Filter by method (cash|card|eft|donation)', startDate:'ISO date', endDate:'ISO date' },
         responses:[{ status:200, desc:'Success', body:{ data:[{ id:'pay-uuid-...', amount:450, method:'card', user:{ name:'Jane Doe' }, registration:{ event:{ title:'Camp 2025' }}}], total:1 }}]},

backend/src/utils/cashupUtils.js

@@ -11,11 +11,13 @@ function emptyByMethod(fill = 0) {
 }
 
 // Normalizes a free-text Payment.method into one of the fixed cashup buckets.
+// Card-network wallets (Apple Pay, Google Pay, etc.) settle exactly like a card payment —
+// no separate float to reconcile — so they belong in the 'card' bucket, not 'other'.
 function bucketForMethod(method) {
   const m = String(method || '').toLowerCase();
   if (m.includes('cash')) return 'cash';
   if (m.includes('eft')) return 'eft';
-  if (m.includes('card') || m.includes('yoco')) return 'card';
+  if (m.includes('card') || m.includes('yoco') || m.includes('pay')) return 'card';
   return 'other';
 }
 
@@ -102,6 +104,15 @@ async function computeEventFinancials(eventId) {
   }
   const totalRevenue = payments.reduce((sum, p) => sum + p.amount, 0);
 
+  // Yoco processing fees, snapshotted per-payment at creation time (see utils/yocoFees.js).
+  // Always absorbed by the church — never passed on to the buyer.
+  const feesByMethod = emptyByMethod();
+  for (const p of nonRefundPayments) {
+    if (p.feeAmount == null) continue;
+    feesByMethod[bucketForMethod(p.method)] += p.feeAmount;
+  }
+  const totalFees = ALL_METHODS.reduce((s, m) => s + feesByMethod[m], 0);
+
   // Costs, with computed totals and attribution to a payment method's float (if tagged)
   const costBreakdown = costs.map(c => {
     const total = c.costType === 'per_item'
@@ -124,6 +135,13 @@ async function computeEventFinancials(eventId) {
   const expectedCashByMethod = emptyByMethod();
   for (const m of ALL_METHODS) expectedCashByMethod[m] = paymentsByMethod[m] - costsByMethod[m];
 
+  // What should actually land in the bank per method — same as expectedCashByMethod, minus
+  // Yoco's cut (only ever nonzero for 'card'). This is a reconciliation-only figure: it must
+  // NOT feed effectiveGrossIncomeByMethod/netProfit below, since totalFees is already subtracted
+  // there once via netProfitAfterFees — folding it into expectedCashByMethod too would double-count.
+  const expectedInBankByMethod = emptyByMethod();
+  for (const m of ALL_METHODS) expectedInBankByMethod[m] = expectedCashByMethod[m] - feesByMethod[m];
+
   // Most recent reconciliation on record (if any) — the source of "actual" truth
   const latestReconciled = history.find(h => h.action === 'closed' || h.action === 'quick_closed') || null;
   const reconciled = latestReconciled ? {
@@ -137,7 +155,8 @@ async function computeEventFinancials(eventId) {
       for (const m of ALL_METHODS) {
         const line = latestReconciled.lines.find(l => l.method === m);
         out[m] = {
-          expected: line ? line.expectedAmount : expectedCashByMethod[m],
+          expected: line ? line.expectedAmount : expectedInBankByMethod[m],
+          fee: line && line.feeAmount != null ? line.feeAmount : feesByMethod[m],
           actual: line && line.actualAmount != null ? line.actualAmount : null,
           variance: line && line.variance != null ? line.variance : null,
           notes: line ? line.notes : null,
@@ -159,6 +178,7 @@ async function computeEventFinancials(eventId) {
   }
   const effectiveTotalRevenue = ALL_METHODS.reduce((s, m) => s + effectiveGrossIncomeByMethod[m], 0);
   const netProfit = effectiveTotalRevenue - totalCosts;
+  const netProfitAfterFees = netProfit - totalFees;
 
   // What was actually sold, by ticket type — for the Finance report's income-stream breakdown
   const salesByOptionMap = {};
@@ -181,10 +201,14 @@ async function computeEventFinancials(eventId) {
     untaggedCostsTotal,
     totalCosts,
     expectedCashByMethod,
+    expectedInBankByMethod,
     reconciled,
     effectiveGrossIncomeByMethod,
     effectiveTotalRevenue,
     netProfit,
+    feesByMethod,
+    totalFees,
+    netProfitAfterFees,
     unallocatedDonations,
     unallocatedDonationsTotal,
     totalDonations,

backend/src/utils/notifications.js

@@ -80,6 +80,17 @@ async function loadRegistrationFull(registrationId) {
   });
 }
 
+async function loadTicketFull(ticketId) {
+  return prisma.ticket.findUnique({
+    where: { id: ticketId },
+    include: {
+      user: { select: { id: true, name: true, email: true, phoneNumber: true, notificationPreference: true } },
+      event: true,
+      registrationOption: { include: { eventOption: true, variant: true } },
+    },
+  });
+}
+
 async function loadPaymentFull(paymentId) {
   return prisma.payment.findUnique({
     where: { id: paymentId },
@@ -488,6 +499,33 @@ function buildPaymentReceipt(payment) {
   return { subject, text, html: emailWrapper(body, { preheader }) };
 }
 
+// ─── Check-in confirmation (Main Tickets, door check-in) ───────────────────────
+
+function buildCheckInConfirmation(ticket, qtyRedeemed, totalRedeemed, remaining) {
+  const org = getOrg();
+  const eventTitle = ticket.event?.title || 'the event';
+  const optionName = ticket.registrationOption?.eventOption?.name || 'Main Ticket';
+  const fullyCheckedIn = remaining <= 0;
+  const subject = `Checked in – ${eventTitle}`;
+  const preheader = `${qtyRedeemed} checked in for ${eventTitle}.`;
+
+  const body = `
+    <p style="font-size:22px;font-weight:800;color:#0f172a;margin:0 0 8px 0;letter-spacing:-0.3px">You're checked in! ✅</p>
+    <p style="font-size:14px;color:#64748b;margin:0 0 32px 0">See you inside</p>
+
+    <p style="margin:0 0 4px 0;color:#374151;font-family:${ff}">Hi <strong>${ticket.user?.name || 'there'}</strong>,</p>
+    <p style="margin:0 0 28px 0;color:#374151;font-family:${ff}">
+      <strong>${qtyRedeemed}</strong> ${optionName}${qtyRedeemed === 1 ? '' : 's'} just checked in for <strong>${eventTitle}</strong>.
+    </p>
+
+    ${callout(`<strong style="font-size:15px">${totalRedeemed} of ${ticket.quantity || 1} checked in</strong>${
+      fullyCheckedIn ? '' : `<br/><span style="font-size:13px">${remaining} remaining on this ticket</span>`
+    }`, fullyCheckedIn ? 'success' : 'info')}`;
+
+  const text = `You're checked in!\n\nHi ${ticket.user?.name || 'there'},\n\n${qtyRedeemed} ${optionName}(s) just checked in for ${eventTitle}.\n\n${totalRedeemed} of ${ticket.quantity || 1} checked in${fullyCheckedIn ? '' : `, ${remaining} remaining`}.\n\n${org.name} — ${org.email}`;
+  return { subject, text, html: emailWrapper(body, { preheader }) };
+}
+
 // ─── Donation applied to a registration ────────────────────────────────────────
 //
 // Distinct from buildPaymentReceipt: this is sent to the REGISTRANT when staff apply
@@ -893,6 +931,32 @@ async function sendRefundEmail(refundPaymentId) {
   }
 }
 
+async function sendCheckInEmails(ticketId, qtyRedeemed, totalRedeemed, remaining) {
+  try {
+    const ticket = await loadTicketFull(ticketId);
+    if (!ticket) return;
+    const user = ticket.user;
+    const { shouldEmail, waText, waTextAny } = require('./notify');
+    const { buildWACheckIn } = require('./waMessages');
+
+    const sends = [];
+    const hasValidEmail = user?.email && !user.email.endsWith('@guest.local') && !user.email.endsWith('@deleted.invalid');
+    if (hasValidEmail && shouldEmail(user)) {
+      const msg = buildCheckInConfirmation(ticket, qtyRedeemed, totalRedeemed, remaining);
+      sends.push(sendMail({ to: user.email, subject: msg.subject, html: msg.html, text: msg.text }));
+    }
+    const waMsg = buildWACheckIn(ticket, qtyRedeemed, totalRedeemed, remaining);
+    if (hasValidEmail) {
+      sends.push(waText(user, waMsg));
+    } else {
+      sends.push(waTextAny(user, waMsg));
+    }
+    await Promise.all(sends);
+  } catch (e) {
+    console.error('Failed to send check-in emails:', e);
+  }
+}
+
 // Sent when staff apply a donation to someone's registration. Only the registrant is
 // notified (anonymously, per design) — the donor already received their donation-received
 // notification when the donation was originally made, so they are deliberately not emailed
@@ -981,4 +1045,6 @@ module.exports = {
   sendRefundEmail,
   sendSelfServiceRegistrationEmails,
   sendDonationAssignmentEmails,
+  sendCheckInEmails,
+  buildCheckInConfirmation,
 };

backend/src/utils/waMessages.js

@@ -107,6 +107,26 @@ function buildWAPayment(payment) {
   ].join('\n');
 }
 
+// ─── Check-in confirmation (Main Tickets, door check-in) ───────────────────────
+
+function buildWACheckIn(ticket, qtyRedeemed, totalRedeemed, remaining) {
+  const org        = getOrg();
+  const eventTitle = ticket.event?.title || 'the event';
+  const name       = ticket.user?.name || 'there';
+  const fullyCheckedIn = remaining <= 0;
+
+  return [
+    `✅ *Checked In*`,
+    '',
+    `Hi ${name},`,
+    '',
+    `*${qtyRedeemed}* checked in for *${eventTitle}*.`,
+    `*${totalRedeemed} of ${ticket.quantity || 1}* checked in${fullyCheckedIn ? '' : `, *${remaining}* remaining`}.`,
+    '',
+    `_${org.name}_ | ${org.url}`,
+  ].join('\n');
+}
+
 // ─── Login notification ───────────────────────────────────────────────────────
 
 function buildWALogin({ name, when, location, userAgent }) {
@@ -255,4 +275,5 @@ module.exports = {
   buildWAWelcome,
   buildWAAccountClosed,
   buildWATicketCaption,
+  buildWACheckIn,
 };

backend/src/utils/yocoFees.js

@@ -0,0 +1,35 @@
+/**
+ * Yoco processing fee estimation.
+ *
+ * Yoco's real rate depends on plan, channel (in-person card machine vs. online checkout),
+ * monthly volume tier, and card type — none of which this app tracks. Instead the admin
+ * configures one flat, editable % per channel (Settings → Payments), pre-filled from a
+ * representative default when they pick a plan. The church always absorbs this fee — it's
+ * shown in reports so payout figures are accurate, never passed on to the buyer.
+ */
+
+const { getSetting } = require('./settingsCache');
+
+async function getYocoFeeConfig() {
+  const [inPersonPct, onlinePct] = await Promise.all([
+    getSetting('yoco_fee_in_person_pct', '0'),
+    getSetting('yoco_fee_online_pct', '0'),
+  ]);
+  return {
+    inPersonRate: parseFloat(inPersonPct) || 0, // percent, e.g. 2.30
+    onlineRate: parseFloat(onlinePct) || 0,
+  };
+}
+
+// Snapshot to store on a Payment row at creation time. Only 'card' payments are fee-eligible —
+// cash/eft/voucher never incur a Yoco fee.
+function computeFeeSnapshot({ grossAmount, channel, bucket, config }) {
+  if (bucket !== 'card') {
+    return { feeAmount: null, feeRate: null, feeChannel: null };
+  }
+  const rate = channel === 'online' ? config.onlineRate : config.inPersonRate;
+  const feeAmount = Math.round(grossAmount * (rate / 100) * 100) / 100;
+  return { feeAmount, feeRate: rate, feeChannel: channel };
+}
+
+module.exports = { getYocoFeeConfig, computeFeeSnapshot };

frontend/README.md

@@ -164,7 +164,6 @@ frontend/src/
 |-------|-------------|
 | `/dashboard/user` | My registrations + tickets overview |
 | `/dashboard/user/profile` | Edit profile, notification preferences |
-| `/dashboard/user/pay` | Pay outstanding balance |
 | `/dashboard/user/donate` | Make a donation |
 | `/dashboard/user/forms` | Complete registration forms |
 | `/dashboard/user/reset-password` | Change password (authenticated) |
@@ -255,7 +254,7 @@ A "Select Email/both" or "Select WhatsApp/both" quick-select button is available
 5. Backend reconciles payment, updates registration status, generates and emails tickets
 6. User sees `/payment/success` and tickets appear in their dashboard
 
-Outstanding balances can be paid at any time from `/dashboard/user/pay`.
+Outstanding balances can be paid at any time from the "Make payment" button on `/dashboard/user` — this always creates a checkout for the full remaining balance. Partial-amount payment links can only be generated by a supervisor/admin from `/dashboard/supervisor/payments`.
 
 ---
 

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hope-events-frontend",
-  "version": "1.0.1",
+  "version": "1.3.0",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

frontend/src/app/dashboard/admin/cashup/[id]/page.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { useAuth } from "@/hooks/useAuth";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 import type { EventCost, EventCostType, EventFinancials, CashupMethod } from "@/types";
 
 const METHOD_LABELS: Record<CashupMethod, string> = { cash: "Cash", card: "Card", eft: "EFT", other: "Other" };
@@ -29,7 +30,7 @@ export default function EventCashupPage() {
   const [data, setData] = useState<EventFinancials | null>(null);
   const [eventOptions, setEventOptions] = useState<{ id: string; name: string }[]>([]);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
   const [busy, setBusy] = useState(false);
 
   const isClosed = data?.event?.cashupStatus === "closed";
@@ -371,7 +372,9 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
               <th className="py-1">Method</th>
               <th className="py-1 text-right">Income</th>
               <th className="py-1 text-right">Costs from method</th>
-              <th className="py-1 text-right">Expected cash</th>
+              <th className="py-1 text-right">Expected (before fees)</th>
+              <th className="py-1 text-right">Yoco fee</th>
+              <th className="py-1 text-right">Expected (after fees)</th>
               <th className="py-1 text-right">Actual</th>
               <th className="py-1 text-right">Variance</th>
               <th className="py-1">Notes</th>
@@ -380,12 +383,15 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
           <tbody>
             {METHODS.map(m => {
               const r = reconciled?.byMethod?.[m];
+              const expected = data.expectedInBankByMethod[m];
               return (
                 <tr key={m} className="border-b last:border-0 align-top">
                   <td className="py-1.5">{METHOD_LABELS[m]}</td>
                   <td className="py-1.5 text-right">{money(data.paymentsByMethod[m])}</td>
                   <td className="py-1.5 text-right">{money(data.costsByMethod[m])}</td>
                   <td className="py-1.5 text-right">{money(data.expectedCashByMethod[m])}</td>
+                  <td className="py-1.5 text-right">{money(data.feesByMethod[m])}</td>
+                  <td className="py-1.5 text-right">{money(expected)}</td>
                   <td className="py-1.5 text-right">
                     {isClosed ? (
                       money(r?.actual ?? null)
@@ -399,8 +405,8 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
                     {isClosed
                       ? (r?.variance != null ? money(r.variance) : <span className="text-gray-400">not reconciled</span>)
                       : (m === "cash"
-                        ? (cashActualFromDenoms > 0 ? money(cashActualFromDenoms - data.expectedCashByMethod[m]) : "—")
-                        : (lines[m].actualAmount !== "" ? money(parseFloat(lines[m].actualAmount) - data.expectedCashByMethod[m]) : "—"))}
+                        ? (cashActualFromDenoms > 0 ? money(cashActualFromDenoms - expected) : "—")
+                        : (lines[m].actualAmount !== "" ? money(parseFloat(lines[m].actualAmount) - expected) : "—"))}
                   </td>
                   <td className="py-1.5">
                     {isClosed ? (r?.notes || "—") : (
@@ -446,7 +452,7 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
         )}
       </div>
 
-      <div className="bg-white border rounded-lg p-4 grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
+      <div className="bg-white border rounded-lg p-4 grid grid-cols-1 sm:grid-cols-4 gap-3 text-sm">
         <div>
           <div className="text-gray-500 text-xs">Donations counted as profit</div>
           <div className="font-semibold">{money(data.unallocatedDonationsTotal)}</div>
@@ -456,8 +462,12 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
           <div className="font-semibold">{money(data.totalCosts)}</div>
         </div>
         <div>
-          <div className="text-gray-500 text-xs">Net profit</div>
-          <div className="font-semibold">{money(data.netProfit)}</div>
+          <div className="text-gray-500 text-xs">Yoco fees</div>
+          <div className="font-semibold">{money(data.totalFees)}</div>
+        </div>
+        <div>
+          <div className="text-gray-500 text-xs">Net profit (after fees)</div>
+          <div className="font-semibold">{money(data.netProfitAfterFees)}</div>
         </div>
       </div>
 

frontend/src/app/dashboard/admin/cashup/page.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/hooks/useAuth";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 export default function CashupLandingPage() {
   const { token } = useAuth();
@@ -11,7 +12,7 @@ export default function CashupLandingPage() {
 
   const [events, setEvents] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
   const [search, setSearch] = useState("");
   const [showPast, setShowPast] = useState(true);
   const [showInactive, setShowInactive] = useState(false);

frontend/src/app/dashboard/admin/registrations/page.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useRouter } from "next/navigation";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 const STATUS_OPTIONS = ["pending", "confirmed", "partial_paid", "paid", "cancelled"] as const;
 
@@ -29,8 +30,8 @@ export default function AdminRegistrationsPage() {
   const [registrations, setRegistrations] = useState<any[]>([]);
   const [events, setEvents] = useState<any[]>([]);
   const [loadingRegs, setLoadingRegs] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
 
   // Filters
   const [query, setQuery] = useState("");

frontend/src/app/dashboard/admin/settings/page.tsx

@@ -5,8 +5,9 @@ import { useAuth } from "@/hooks/useAuth";
 import { useRouter } from "next/navigation";
 import { apiFetch, API_BASE, resolveToApiOrigin } from "@/lib/api";
 import { useSiteSettings } from "@/contexts/SiteSettingsContext";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
-type TabId = "organisation" | "branding" | "notifications" | "email" | "legal";
+type TabId = "organisation" | "branding" | "notifications" | "email" | "legal" | "payments";
 
 const TABS: { id: TabId; label: string }[] = [
   { id: "organisation",  label: "Organisation"  },
@@ -14,8 +15,19 @@ const TABS: { id: TabId; label: string }[] = [
   { id: "notifications", label: "Notifications" },
   { id: "email",         label: "Email"         },
   { id: "legal",         label: "Legal"         },
+  { id: "payments",      label: "Payments"      },
 ];
 
+// Default fee % pre-fill per Yoco plan — the "Up to R50k / Debit" rate, since debit is the
+// most common consumer card type in SA and small churches likely stay in the lowest volume
+// tier. Purely a UI convenience for the plan <select>; the actual % fields stay freely
+// editable afterward so the admin can match their real blended rate.
+const YOCO_PLAN_DEFAULTS: Record<"core" | "plus" | "pro", { inPerson: string; online: string }> = {
+  core: { inPerson: "2.30", online: "2.95" },
+  plus: { inPerson: "2.10", online: "2.75" },
+  pro:  { inPerson: "1.95", online: "2.55" },
+};
+
 const inputCls =
   "w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400";
 
@@ -36,19 +48,17 @@ function Field({
 }
 
 function SaveBar({
-  saving, onSave, result, onDismiss,
+  saving, onSave, result,
 }: {
   saving: boolean;
   onSave: () => void;
   result: { ok: boolean; message: string } | null;
-  onDismiss: () => void;
 }) {
   return (
     <div className="flex items-center justify-between pt-4 border-t mt-6 flex-wrap gap-3">
       {result ? (
         <span className={`text-sm flex items-center gap-1.5 ${result.ok ? "text-green-600" : "text-red-600"}`}>
           {result.ok ? "✓" : "✗"} {result.message}
-          <button type="button" onClick={onDismiss} className="ml-1 text-gray-400 hover:text-gray-600 text-xs">×</button>
         </span>
       ) : (
         <span />
@@ -75,7 +85,7 @@ export default function SiteSettingsPage() {
 
   // Per-tab save state
   const [saving, setSaving] = useState(false);
-  const [result, setResult] = useState<{ ok: boolean; message: string } | null>(null);
+  const [result, setResult] = useDismissingState<{ ok: boolean; message: string } | null>(null);
 
   // ── Organisation ──
   const [orgName, setOrgName] = useState("");
@@ -104,7 +114,7 @@ export default function SiteSettingsPage() {
   const [smtpPass, setSmtpPass] = useState("");
   const [smtpPassSet, setSmtpPassSet] = useState(false);
   const [smtpTesting, setSmtpTesting] = useState(false);
-  const [smtpTestResult, setSmtpTestResult] = useState<{ ok: boolean; message: string; raw?: string } | null>(null);
+  const [smtpTestResult, setSmtpTestResult] = useDismissingState<{ ok: boolean; message: string; raw?: string } | null>(null);
 
   // ── Legal ──
   const [legalOperatorName, setLegalOperatorName] = useState("");
@@ -113,6 +123,11 @@ export default function SiteSettingsPage() {
   const [legalWebsiteUrl, setLegalWebsiteUrl] = useState("");
   const [legalEffectiveDate, setLegalEffectiveDate] = useState("");
 
+  // ── Payments (Yoco fees) ──
+  const [yocoPlan, setYocoPlan] = useState<"core" | "plus" | "pro">("core");
+  const [feeInPersonPct, setFeeInPersonPct] = useState("");
+  const [feeOnlinePct, setFeeOnlinePct] = useState("");
+
   // ── Load all settings once ────────────────────────────────────────────────
   useEffect(() => {
     if (!token) return;
@@ -139,6 +154,9 @@ export default function SiteSettingsPage() {
         setLegalIoEmail(s.legal_io_email || "");
         setLegalWebsiteUrl(s.legal_website_url || "");
         setLegalEffectiveDate(s.legal_effective_date || "");
+        setYocoPlan((s.yoco_plan as "core" | "plus" | "pro") || "core");
+        setFeeInPersonPct(s.yoco_fee_in_person_pct || "");
+        setFeeOnlinePct(s.yoco_fee_online_pct || "");
       })
       .catch((e: any) => setResult({ ok: false, message: e?.message || "Failed to load settings" }))
       .finally(() => setLoadingInitial(false));
@@ -240,6 +258,19 @@ export default function SiteSettingsPage() {
     legal_effective_date: legalEffectiveDate.trim(),
   });
 
+  const handleYocoPlanChange = (plan: "core" | "plus" | "pro") => {
+    setYocoPlan(plan);
+    const defaults = YOCO_PLAN_DEFAULTS[plan];
+    setFeeInPersonPct(defaults.inPerson);
+    setFeeOnlinePct(defaults.online);
+  };
+
+  const savePayments = () => save({
+    yoco_plan:                 yocoPlan,
+    yoco_fee_in_person_pct:    feeInPersonPct.trim(),
+    yoco_fee_online_pct:       feeOnlinePct.trim(),
+  });
+
   const handleTestSmtp = async () => {
     if (!token) return;
     setSmtpTesting(true);
@@ -332,7 +363,7 @@ export default function SiteSettingsPage() {
             <input className={inputCls} placeholder="https://events.yourchurch.org"
               value={appBaseUrl} onChange={e => setAppBaseUrl(e.target.value)} />
           </Field>
-          <SaveBar saving={saving} onSave={saveOrganisation} result={result} onDismiss={() => setResult(null)} />
+          <SaveBar saving={saving} onSave={saveOrganisation} result={result} />
         </div>
       )}
 
@@ -371,7 +402,7 @@ export default function SiteSettingsPage() {
             }} className="text-sm" />
           </Field>
 
-          <SaveBar saving={saving} onSave={saveBranding} result={result} onDismiss={() => setResult(null)} />
+          <SaveBar saving={saving} onSave={saveBranding} result={result} />
         </div>
       )}
 
@@ -385,7 +416,7 @@ export default function SiteSettingsPage() {
             <input className={inputCls} placeholder="registrations@yourchurch.org, admin@yourchurch.org"
               value={notifEmails} onChange={e => setNotifEmails(e.target.value)} />
           </Field>
-          <SaveBar saving={saving} onSave={saveNotifications} result={result} onDismiss={() => setResult(null)} />
+          <SaveBar saving={saving} onSave={saveNotifications} result={result} />
         </div>
       )}
 
@@ -464,7 +495,7 @@ export default function SiteSettingsPage() {
             )}
           </div>
 
-          <SaveBar saving={saving} onSave={saveSmtp} result={result} onDismiss={() => setResult(null)} />
+          <SaveBar saving={saving} onSave={saveSmtp} result={result} />
         </div>
       )}
 
@@ -503,7 +534,45 @@ export default function SiteSettingsPage() {
             </div>
           </div>
 
-          <SaveBar saving={saving} onSave={saveLegal} result={result} onDismiss={() => setResult(null)} />
+          <SaveBar saving={saving} onSave={saveLegal} result={result} />
+        </div>
+      )}
+
+      {/* ── Payments (Yoco fees) ─────────────────────────────────────────────── */}
+      {activeTab === "payments" && (
+        <div className="space-y-4">
+          <p className="text-sm text-gray-500">
+            Yoco deducts a processing fee from every card transaction before it reaches your bank account.
+            Reports use the estimate below to show a more accurate payout. Yoco&apos;s real rate varies by
+            monthly volume and card type, which this app doesn&apos;t track — pick your plan to pre-fill a
+            starting value, then adjust the percentages to match your actual bank statement.
+          </p>
+
+          <Field label="Yoco plan">
+            <select
+              className={inputCls}
+              value={yocoPlan}
+              onChange={e => handleYocoPlanChange(e.target.value as "core" | "plus" | "pro")}
+            >
+              <option value="core">Core</option>
+              <option value="plus">Plus</option>
+              <option value="pro">Pro</option>
+            </select>
+          </Field>
+
+          <div className="grid sm:grid-cols-2 gap-4">
+            <Field label="In-person (card machine) fee %">
+              <input type="number" step="0.01" min="0" max="100" className={inputCls} placeholder="2.30"
+                value={feeInPersonPct} onChange={e => setFeeInPersonPct(e.target.value)} />
+            </Field>
+            <Field label="Online (checkout link) fee %">
+              <input type="number" step="0.01" min="0" max="100" className={inputCls} placeholder="2.95"
+                value={feeOnlinePct} onChange={e => setFeeOnlinePct(e.target.value)} />
+            </Field>
+          </div>
+          <p className="text-xs text-gray-400">These fees are always absorbed by the church — they're shown in reports for an accurate payout, never added to what attendees pay.</p>
+
+          <SaveBar saving={saving} onSave={savePayments} result={result} />
         </div>
       )}
     </div>

frontend/src/app/dashboard/admin/users/page.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useRouter } from "next/navigation";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 interface UserItem {
   id: string;
@@ -43,7 +44,7 @@ export default function AdminUsersPage() {
   // Data state
   const [users, setUsers] = useState<UserItem[]>([]);
   const [fetching, setFetching] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [total, setTotal] = useState(0);

frontend/src/app/dashboard/admin/whatsapp/page.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useAuth } from "@/hooks/useAuth";
 import { useRouter } from "next/navigation";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -123,7 +124,7 @@ export default function WhatsAppAdminPage() {
   const [pairingPhone, setPairingPhone] = useState("");
 
   // ── Shared action feedback ───────────────────────────────────────────────────
-  const [actionMsg, setActionMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+  const [actionMsg, setActionMsg] = useDismissingState<{ type: "ok" | "err"; text: string } | null>(null);
   const [busy, setBusy]           = useState<string | null>(null);
 
   // ── Load config ──────────────────────────────────────────────────────────────

frontend/src/app/dashboard/staff/event-tickets/page.tsx

@@ -3,6 +3,7 @@
 import React, { Suspense, useEffect, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 import { useRouter, useSearchParams } from "next/navigation";
 import { formatDate } from "@/lib/date";
 import { QrImage } from "@/components/shared/QrImage";
@@ -18,7 +19,7 @@ function EventTicketsContent() {
   const [events, setEvents] = useState<any[]>([]);
   const [eventId, setEventId] = useState<string>(paramEventId);
   const [tickets, setTickets] = useState<any[]>([]);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
   const [selectedUserId, setSelectedUserId] = useState<string>(paramUserId);

frontend/src/app/dashboard/staff/ticket-scanning/page.tsx

@@ -4,14 +4,15 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { QRScanner, QRScannerHandle } from "@/components/qr/QRScanner";
 import { useAuth } from "@/hooks/useAuth";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 import { useRouter } from "next/navigation";
 
 export default function TicketScanningPage() {
   const router = useRouter();
   const scannerRef = useRef<QRScannerHandle>(null);
   const [lastResult, setLastResult] = useState<string | null>(null);
-  const [scanInfo, setScanInfo] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [scanInfo, setScanInfo] = useDismissingState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
   const [alreadyUsedModal, setAlreadyUsedModal] = useState<{ message: string; ticket?: any } | null>(null);
   const [errorModal, setErrorModal] = useState<string | null>(null);
   const { token, user } = useAuth();

frontend/src/app/dashboard/supervisor/at-the-door/page.tsx

@@ -5,8 +5,17 @@ import { useAuth } from "@/hooks/useAuth";
 import { useRouter } from "next/navigation";
 import { apiFetch } from "@/lib/api";
 import { scoreUser } from "@/lib/fuzzyMatch";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
-type Mode = "registration" | "payment" | "tickets" | "refund";
+type Mode = "registration" | "payment" | "checkin" | "tickets" | "refund";
+
+const MODE_LABELS: Record<Mode, string> = {
+    registration: "REGISTRATION",
+    payment: "PAYMENT",
+    checkin: "CHECK-IN",
+    tickets: "TICKETS",
+    refund: "REFUND",
+};
 
 // ─── Fuzzy search helpers ─────────────────────────────────────────────────────
 
@@ -154,34 +163,11 @@ export default function AtTheDoorPage() {
     const [mode, setMode] = useState<Mode>("registration");
 
     const [activeRegistration, setActiveRegistration] = useState<any | null>(null);
-    const [info, setInfo] = useState<string | null>(null);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-        if (!info) return;
-
-        const id = setTimeout(() => {
-            setInfo(null);
-        }, 10000); // ⏱ disappears after 5s
-
-        return () => clearTimeout(id);
-
-    }, [info]);
-
-    useEffect(() => {
-        if (!error) return;
-
-        const id = setTimeout(() => {
-            setError(null);
-        }, 15000); // errors linger slightly longer
-
-        return () => clearTimeout(id);
-
-    }, [error]);
+    const [info, setInfo] = useDismissingState<string | null>(null);
+    const [error, setError] = useDismissingState<string | null>(null);
 
     const handleRegistrationCreated = (registration: any) => {
-        setActiveRegistration(registration);
-        setMode("payment"); // 🚀 Jump automatically
+        setActiveRegistration(registration); // 🚀 Jump automatically (see effect below)
     };
 
     const handleRegistrationSelected = (registration: any) => {
@@ -192,7 +178,9 @@ export default function AtTheDoorPage() {
         if (!activeRegistration) return;
 
         const id = setTimeout(() => {
-            setMode("payment");
+            // Fully paid → head straight to check-in; otherwise there's still a
+            // balance to collect, so go capture payment first.
+            setMode(activeRegistration.status === "paid" ? "checkin" : "payment");
         }, 0);
 
         return () => clearTimeout(id);
@@ -338,28 +326,12 @@ export default function AtTheDoorPage() {
 
         const reg = registration || activeRegistration;
 
-        try {
-            const res = await apiFetch<any>("/api/tickets/generate", {
-                method: "POST",
-                authToken: token,
-                body: {
-                    registrationId: reg.id
-                }
-            });
-
-            const tickets = res?.tickets || [];
-
-            if (tickets.length) {
-                printTickets(tickets);
-            }
-
-            setInfo("Payment recorded & tickets printed");
-            setActiveRegistration(null);
-            setMode("registration");
-
-        } catch (e: any) {
-            setError(e?.message || "Tickets failed to generate");
-        }
+        // Tickets are generated and emailed/WhatsApped automatically server-side
+        // once a registration reaches "paid" (see paymentController) — no need to
+        // fetch/print them here, just move straight to checking the attendee in.
+        setActiveRegistration(reg);
+        setInfo("Payment recorded — tickets sent. Ready to check in.");
+        setMode("checkin");
     };
 
     const handleDonation = (user?: any) => {
@@ -367,97 +339,6 @@ export default function AtTheDoorPage() {
         setShowDonationModal(true);
     };
 
-    const buildTicketHtmlCard = (t: any) => {
-        const eventTitle =
-            t.event?.title ||
-            t.registrationOption?.registration?.event?.title ||
-            "Event";
-
-        const ticketType = ticketLabel(t);
-        const qty = t.quantity || 1;
-        const holder =
-            t.user?.name ||
-            t.registrationOption?.registration?.user?.name ||
-            "";
-        const qrValue = t.qrCode || t.id;
-        const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrValue)}`;
-
-        return `<div class="ticket">
-  <div class="top">
-    <div class="evt">${eventTitle}</div>
-    <div class="type">${ticketType}</div>
-    ${holder ? `<div class="holder">${holder}</div>` : ""}
-    <div class="qty">Qty: <strong>${qty}</strong></div>
-  </div>
-  <div class="qrwrap"><img src="${qrSrc}" alt="QR" /></div>
-  <div class="meta">${t.id}</div>
-</div>`;
-    };
-
-    const openPrintWindow = (cardsHtml: string) => {
-        const w = window.open("", "_blank");
-        if (!w) return;
-        w.document.write(`<!doctype html><html><head><style>
-  @page { size: A4; margin: 8mm; }
-  * { box-sizing: border-box; }
-  body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; background: #fff; }
-  .page {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    width: 194mm;
-    height: 281mm;
-    gap: 4mm;
-    page-break-after: always;
-    break-after: page;
-  }
-  .page:last-child { page-break-after: avoid; break-after: avoid; }
-  .ticket {
-    border: 1.5px solid #222;
-    border-radius: 3mm;
-    padding: 5mm;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: hidden;
-    min-height: 0;
-  }
-  .top { flex: 0 0 auto; }
-  .evt { font-weight: bold; font-size: 13pt; line-height: 1.2; }
-  .type { font-size: 11pt; margin-top: 2mm; color: #333; }
-  .holder { font-size: 10pt; margin-top: 1mm; color: #555; }
-  .qty { font-size: 10pt; margin-top: 1mm; }
-  .qrwrap { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; padding: 3mm 0; }
-  .qrwrap img { width: 48mm; height: 48mm; display: block; }
-  .meta { font-size: 7pt; color: #777; text-align: center; flex: 0 0 auto; word-break: break-all; }
-</style></head><body>${cardsHtml}<script>
-(function(){
-  function go(){
-    var imgs=Array.prototype.slice.call(document.images);
-    if(!imgs.length){window.print();return;}
-    var n=imgs.length;
-    function done(){if(--n<=0)setTimeout(function(){window.print();},150);}
-    imgs.forEach(function(i){if(i.complete)done();else{i.addEventListener('load',done,{once:true});i.addEventListener('error',done,{once:true});}});
-  }
-  if(document.readyState==='complete')go();else window.addEventListener('load',go);
-})();
-</script></body></html>`);
-        w.document.close();
-    };
-
-    const printTickets = (tickets: any[]) => {
-        if (!tickets?.length) return;
-        // 4 per A4 page (2 columns × 2 rows)
-        const PAGE_SIZE = 4;
-        const pages: string[] = [];
-        for (let i = 0; i < tickets.length; i += PAGE_SIZE) {
-            const chunk = tickets.slice(i, i + PAGE_SIZE);
-            pages.push(`<div class="page">${chunk.map(buildTicketHtmlCard).join("")}</div>`);
-        }
-        openPrintWindow(pages.join(""));
-    };
-
-
     return (
         <div className="max-w-6xl mx-auto w-full p-4 sm:p-6">
 
@@ -503,7 +384,7 @@ export default function AtTheDoorPage() {
 
             {/* Mode Buttons */}
             <div className="flex gap-2 mb-4 flex-wrap">
-                {(["registration", "payment", "tickets", "refund"] as Mode[]).map(m => (
+                {(["registration", "payment", "checkin", "tickets", "refund"] as Mode[]).map(m => (
                     <button
                         key={m}
                         onClick={() => setMode(m)}
@@ -515,7 +396,7 @@ export default function AtTheDoorPage() {
                                 : "bg-white hover:bg-gray-50"
                         }`}
                     >
-                        {m.toUpperCase()}
+                        {MODE_LABELS[m]}
                     </button>
                 ))}
             </div>
@@ -543,6 +424,10 @@ export default function AtTheDoorPage() {
                 />
             )}
 
+            {mode === "checkin" && (
+                <DoorCheckInPanel token={token} eventId={eventId} registration={activeRegistration} setError={setError} setInfo={setInfo} />
+            )}
+
             {mode === "tickets" && (
                 <DoorTicketsPanel token={token} eventId={eventId} />
             )}
@@ -1102,6 +987,148 @@ function DoorTicketsPanel({ token, eventId }: any) {
     );
 }
 
+function DoorCheckInPanel({ token, eventId, registration, setError, setInfo }: any) {
+    const [ticketsForEvent, setTicketsForEvent] = useState<any[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [qtyByTicket, setQtyByTicket] = useState<Record<string, number>>({});
+    const [submittingId, setSubmittingId] = useState<string | null>(null);
+
+    const load = async () => {
+        if (!token || !eventId) return;
+        try {
+            setLoading(true);
+            const res = await apiFetch<any>(`/api/tickets/event/${eventId}`, { authToken: token });
+            const tickets = res?.tickets || res?.data || (Array.isArray(res) ? res : []);
+            setTicketsForEvent(tickets.filter((t: any) => t.registrationOption?.eventOption?.isMainTicket));
+        } catch {
+            setTicketsForEvent([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => { load(); }, [token, eventId]);
+
+    if (!registration) {
+        return (
+            <div className="border rounded-xl p-6 bg-white shadow-sm text-sm text-gray-500">
+                No registration selected
+            </div>
+        );
+    }
+
+    const myTickets = ticketsForEvent
+        .filter(t => t.registrationOption?.registration?.id === registration.id)
+        .map(t => {
+            const totalRedeemed = (t.usages || []).reduce((s: number, u: any) => s + (u.quantityRedeemed || 1), 0);
+            const remaining = (t.quantity || 1) - totalRedeemed;
+            return { ...t, totalRedeemed, remaining };
+        });
+
+    const qtyFor = (t: any) => qtyByTicket[t.id] ?? (t.remaining > 0 ? t.remaining : 1);
+    const setQtyFor = (t: any, n: number) =>
+        setQtyByTicket(q => ({ ...q, [t.id]: Math.max(1, Math.min(t.remaining || 1, n)) }));
+
+    const commit = async (ticket: any) => {
+        const qty = qtyFor(ticket);
+        try {
+            setSubmittingId(ticket.id);
+            const res = await apiFetch<any>(
+                `/api/tickets/scan/${encodeURIComponent(ticket.qrCode)}?eventId=${encodeURIComponent(eventId)}`,
+                { method: "POST", authToken: token, body: { qty } }
+            );
+            setInfo(`${res?.qtyRedeemed ?? qty} checked in for ${registration.user?.name || "guest"}${
+                res?.remaining > 0 ? ` — ${res.remaining} remaining` : " — fully checked in"
+            }. Confirmation sent.`);
+            await load();
+        } catch (e: any) {
+            setError(e?.message || "Check-in failed");
+        } finally {
+            setSubmittingId(null);
+        }
+    };
+
+    return (
+        <div className="border rounded-xl p-6 bg-white shadow-sm">
+
+            <div className="text-xl font-semibold mb-4">Check-In</div>
+
+            {/* ✅ User */}
+            <div className="mb-4">
+                <div className="text-lg font-semibold">
+                    {registration.user?.name || "Guest"}
+                </div>
+            </div>
+
+            {loading && (
+                <div className="text-sm text-gray-500">Loading…</div>
+            )}
+
+            {!loading && myTickets.length === 0 && (
+                <div className="text-sm text-gray-500">
+                    No Main Tickets on this registration
+                </div>
+            )}
+
+            <div className="space-y-4">
+                {myTickets.map(t => {
+                    const qty = qtyFor(t);
+                    return (
+                        <div key={t.id} className="border rounded-lg p-4">
+                            <div className="text-sm font-medium mb-3">{ticketLabel(t)}</div>
+
+                            <div className="grid grid-cols-3 gap-3 mb-4">
+                                <div className="border rounded-lg p-3 text-center">
+                                    <div className="text-xs text-gray-500">TOTAL</div>
+                                    <div className="text-lg font-semibold">{t.quantity || 1}</div>
+                                </div>
+
+                                <div className="border rounded-lg p-3 text-center">
+                                    <div className="text-xs text-gray-500">CHECKED IN</div>
+                                    <div className="text-lg font-semibold">{t.totalRedeemed}</div>
+                                </div>
+
+                                <div className="border rounded-lg p-3 text-center bg-emerald-50">
+                                    <div className="text-xs text-gray-500">REMAINING</div>
+                                    <div className="text-2xl font-bold text-emerald-600">{t.remaining}</div>
+                                </div>
+                            </div>
+
+                            {t.remaining > 0 ? (
+                                <div className="flex items-center gap-3">
+                                    <button
+                                        onClick={() => setQtyFor(t, qty - 1)}
+                                        className="w-9 h-9 border rounded flex items-center justify-center text-lg font-bold"
+                                    >
+                                        –
+                                    </button>
+                                    <div className="w-10 text-center text-lg font-semibold">{qty}</div>
+                                    <button
+                                        onClick={() => setQtyFor(t, qty + 1)}
+                                        className="w-9 h-9 border rounded flex items-center justify-center text-lg font-bold bg-emerald-50 border-emerald-300 text-emerald-700"
+                                    >
+                                        +
+                                    </button>
+
+                                    <button
+                                        onClick={() => commit(t)}
+                                        disabled={submittingId === t.id}
+                                        className="ml-auto px-4 py-2 text-sm rounded bg-indigo-600 text-white disabled:opacity-50"
+                                    >
+                                        {submittingId === t.id ? "Checking in…" : `Check In ${qty}`}
+                                    </button>
+                                </div>
+                            ) : (
+                                <div className="text-sm text-emerald-600 font-medium">Fully checked in ✓</div>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
 function OptionsModal({ open, onClose, options, quantities, setQuantities, minQuantities = {}, onConfirm, confirming, isEdit, totalPaid = 0 }: any) {
     if (!open) return null;
 
@@ -1332,7 +1359,7 @@ function SendTicketsModal({ open, onClose, token, registration, setError, setInf
     const [phone, setPhone] = useState("");
     const [email, setEmail] = useState("");
     const [sending, setSending] = useState(false);
-    const [localError, setLocalError] = useState("");
+    const [localError, setLocalError] = useDismissingState("");
     const [localInfo, setLocalInfo] = useState("");
 
     useEffect(() => {
@@ -1369,7 +1396,7 @@ function SendTicketsModal({ open, onClose, token, registration, setError, setInf
                 },
             });
             setLocalInfo("Tickets sent successfully.");
-            setTimeout(() => { setLocalInfo(""); onClose(); }, 2000);
+            setTimeout(() => { setLocalInfo(""); onClose(); }, 7000);
         } catch (e: any) {
             setLocalError(e?.message || "Failed to send tickets");
         } finally {
@@ -1461,7 +1488,7 @@ function RefundModal({ open, onClose, token, registration, maxRefund, onRefunded
     const [method, setMethod] = useState("cash");
     const [reason, setReason] = useState("");
     const [saving, setSaving] = useState(false);
-    const [localError, setLocalError] = useState("");
+    const [localError, setLocalError] = useDismissingState("");
 
     useEffect(() => {
         if (open) { setAmount(""); setReason(""); setLocalError(""); }

frontend/src/app/dashboard/supervisor/email-attendees/page.tsx

@@ -4,6 +4,7 @@ import React, { Suspense, useEffect, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useRouter, useSearchParams } from "next/navigation";
 import { apiFetch, fetchAllUsers } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 type Attendee = { id: string; name: string; email: string; pref: string };
 
@@ -171,8 +172,8 @@ function EmailAttendeesPageInner() {
 
   // Load events for selection
   const [loadingEvents, setLoadingEvents] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
 
   // Tabs: attendees (current), automations (coming soon), broadcasts
   const [tab, setTab] = useState<'attendees'|'automations'|'broadcasts'|'scheduled'>('attendees');

frontend/src/app/dashboard/supervisor/event-options/page.tsx

@@ -4,6 +4,7 @@ import React, { Suspense, useEffect, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useRouter, useSearchParams } from "next/navigation";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 // Format a Date (or date-like input) to the value expected by <input type="datetime-local">
 // This returns local time (browser timezone) as YYYY-MM-DDTHH:mm
@@ -112,8 +113,8 @@ function EventOptionsContent() {
   const [selectedEventId, setSelectedEventId] = useState<string>("");
   const [options, setOptions] = useState<any[]>([]);
   const [loadingEv, setLoadingEv] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
 
   const loadEvents = async () => {
     if (!token) return;

frontend/src/app/dashboard/supervisor/events/page.tsx

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { useAuth } from "@/hooks/useAuth";
 import { useRouter } from "next/navigation";
 import { apiFetch, resolveToApiOrigin } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 // ─── helpers ────────────────────────────────────────────────────────────────
 
@@ -690,7 +691,7 @@ function NotifyRecipientsManager({ eventId, creator, initialRecipients }: { even
   const [selected, setSelected] = useState<NotifyUser[]>(initialRecipients || []);
   const [loading, setLoading] = useState(!hasInitial);
   const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
 
   useEffect(() => {
     if (hasInitial) return; // already have the data — skip the network round trip entirely
@@ -1415,7 +1416,7 @@ export default function ManageEventsPage() {
 
   const [events, setEvents] = useState<any[]>([]);
   const [loadingEvents, setLoadingEvents] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
 
   const loadEvents = async () => {
     if (!token) return;

frontend/src/app/dashboard/supervisor/forms/page.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useRouter } from "next/navigation";
 import { apiFetch, fetchAllUsers } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 type FormFieldType = 'yes_no' | 'text' | 'date' | 'numeric' | 'statement' | 'paragraph';
 
@@ -144,8 +145,8 @@ export default function FormsBrowserPage() {
   const [items, setItems] = useState<any[]>([]);
   const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [loadingList, setLoadingList] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
 
   const loadEvents = async () => {
     if (!token) return;

frontend/src/app/dashboard/supervisor/manual-registration/page.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useRouter } from "next/navigation";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 type FormField = { id: string; type: 'yes_no'|'text'|'date'|'numeric'|'statement'|'paragraph'; label: string; isRequired?: boolean; helpText?: string|null };
 
@@ -18,7 +19,7 @@ export default function ManualRegistrationPage() {
   const [phoneNumber, setPhoneNumber] = useState("");
   const [registerAsGuest, setRegisterAsGuest] = useState(false);
   const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
   const [createdReg, setCreatedReg] = useState<any | null>(null);
   const [form, setForm] = useState<{ isRequired: boolean; fields: FormField[] } | null>(null);
   const [formsData, setFormsData] = useState<Record<number, Record<string, string>>>({});
@@ -110,8 +111,8 @@ export default function ManualRegistrationPage() {
 function AttendeeFormsSection({ registration, form, formsData, setFormsData }: { registration: any; form: { isRequired: boolean; fields: FormField[] }; formsData: Record<number, Record<string,string>>; setFormsData: any; }) {
   const { token } = useAuth();
   const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
   const mainTickets = (registration?.registrationOptions || []).filter((o: any) => o?.eventOption?.isMainTicket).reduce((s: number, o: any) => s + (o.quantity || 0), 0);
   const count = Math.max(0, mainTickets);
 

frontend/src/app/dashboard/supervisor/manual/page.tsx

@@ -5,6 +5,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { useRouter } from "next/navigation";
 import { apiFetch, fetchAllUsers } from "@/lib/api";
 import { scoreUser } from "@/lib/fuzzyMatch";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 // ─── Pricing helpers ─────────────────────────────────────────────────────────
 
@@ -38,6 +39,18 @@ function fmtPrice(n: number) {
   return n === 0 ? "Free" : `R ${n.toFixed(2)}`;
 }
 
+// Effective unit price for an existing registration option (as returned by /api/registrations).
+// Prefers priceSnapshot (authoritative price captured at registration time) and only falls
+// back to a live early-bird calculation for legacy rows without a snapshot.
+function optionUnitPrice(opt: any): number {
+  if (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined) {
+    return Number(opt.priceSnapshot);
+  }
+  const eo = opt.eventOption;
+  if (opt.variant) return effectiveVariantUnit(eo, opt.variant);
+  return effectiveOptionUnit(eo);
+}
+
 // ─── Component ───────────────────────────────────────────────────────────────
 
 export default function ManualRegistrationPage() {
@@ -72,8 +85,25 @@ export default function ManualRegistrationPage() {
   const searchRef = useRef<HTMLDivElement>(null);
 
   const [submitting, setSubmitting] = useState(false);
-  const [message, setMessage] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useDismissingState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+
+  // ── Tabs ──────────────────────────────────────────────────────────────────
+  const [tab, setTab] = useState<"register" | "payment">("register");
+
+  // ── Record Payment tab state ─────────────────────────────────────────────
+  const [allRegistrations, setAllRegistrations] = useState<any[]>([]);
+  const [payUserId, setPayUserId] = useState<string>("");
+  const [payUserQuery, setPayUserQuery] = useState("");
+  const [payDropdownOpen, setPayDropdownOpen] = useState(false);
+  const paySearchRef = useRef<HTMLDivElement>(null);
+  const [payRegistrationId, setPayRegistrationId] = useState<string>("");
+  const [payAmount, setPayAmount] = useState<string>("");
+  const [payMethod, setPayMethod] = useState<string>("cash");
+  const [payPaidAtLocal, setPayPaidAtLocal] = useState<string>("");
+  const [paySubmitting, setPaySubmitting] = useState(false);
+  const [payMessage, setPayMessage] = useDismissingState<string | null>(null);
+  const [payError, setPayError] = useDismissingState<string | null>(null);
 
   // Load all users for client-side fuzzy matching
   useEffect(() => {
@@ -83,6 +113,97 @@ export default function ManualRegistrationPage() {
       .catch(() => {});
   }, [token]);
 
+  // Load all registrations for the Record Payment tab (embeds payments, so outstanding
+  // balances can be computed without a per-registration fetch loop).
+  useEffect(() => {
+    if (!token) return;
+    apiFetch<any[]>("/api/registrations", { authToken: token })
+      .then(regs => setAllRegistrations(Array.isArray(regs) ? regs : []))
+      .catch(() => {});
+  }, [token]);
+
+  const regOutstanding = useMemo(() => {
+    const map: Record<string, { totalDue: number; totalPaid: number; outstanding: number }> = {};
+    for (const r of allRegistrations) {
+      const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => sum + optionUnitPrice(opt) * (opt.quantity || 0), 0);
+      const totalPaid = (r.payments || []).reduce((s: number, p: any) => s + (p.amount || 0), 0);
+      map[r.id] = { totalDue, totalPaid, outstanding: Math.max(0, totalDue - totalPaid) };
+    }
+    return map;
+  }, [allRegistrations]);
+
+  const payMatchedUsers = useMemo(() => {
+    if (payUserQuery.trim().length < 2) return [];
+    return allUsers
+      .map(u => ({ u, score: scoreUser(u, payUserQuery) }))
+      .filter(x => x.score >= 0.45)
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 6)
+      .map(x => x.u);
+  }, [payUserQuery, allUsers]);
+
+  const selectPayUser = (u: any) => {
+    setPayUserId(u.id);
+    setPayUserQuery(u.name || "");
+    setPayDropdownOpen(false);
+    setPayRegistrationId("");
+  };
+
+  // Close payment-tab user dropdown on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (paySearchRef.current && !paySearchRef.current.contains(e.target as Node)) {
+        setPayDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  const regsForPayUser = useMemo(() => {
+    if (!payUserId) return [];
+    return allRegistrations
+      .filter((r: any) => String(r.userId || r.user?.id) === String(payUserId))
+      .filter((r: any) => (regOutstanding[r.id]?.outstanding ?? 0) > 0.000001)
+      .sort((a: any, b: any) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+  }, [allRegistrations, payUserId, regOutstanding]);
+
+  const createManualPayment = async () => {
+    if (!token) return;
+    setPayError(null);
+    setPayMessage(null);
+    const amt = parseFloat(payAmount || "0");
+    if (!amt || amt <= 0) { setPayError("Enter a valid amount"); return; }
+    if (!payRegistrationId) { setPayError("Please select a registration"); return; }
+    try {
+      setPaySubmitting(true);
+      await apiFetch<any>("/api/payments", {
+        method: "POST",
+        authToken: token,
+        body: {
+          amount: amt,
+          method: payMethod,
+          userId: payUserId || undefined,
+          registrationId: payRegistrationId,
+          isDonation: false,
+          paidAt: payPaidAtLocal ? new Date(payPaidAtLocal).toISOString() : undefined,
+        }
+      });
+      setPayMessage(`Payment recorded (R ${amt.toFixed(2)}).`);
+      setPayAmount("");
+      setPayPaidAtLocal("");
+      // Refresh registrations so the displayed outstanding balance updates
+      try {
+        const regs = await apiFetch<any[]>("/api/registrations", { authToken: token });
+        setAllRegistrations(Array.isArray(regs) ? regs : []);
+      } catch {}
+    } catch (e: any) {
+      setPayError(e?.message || "Failed to record payment");
+    } finally {
+      setPaySubmitting(false);
+    }
+  };
+
   // Fuzzy match results (top 6, score threshold 0.45)
   const matchedUsers = useMemo(() => {
     if (userQuery.trim().length < 2) return [];
@@ -192,6 +313,14 @@ export default function ManualRegistrationPage() {
       });
       setMessage("Manual registration created successfully.");
 
+      // Pre-load the Record Payment tab with this registration so it's ready to go the
+      // moment a supervisor clicks over — the tab itself is never switched to automatically.
+      setAllRegistrations(prev => [res, ...prev.filter((r: any) => r.id !== res.id)]);
+      setPayUserId(res.userId || res.user?.id || "");
+      setPayUserQuery(res.user?.name || guest.name || "");
+      setPayRegistrationId(res.id);
+      setPayDropdownOpen(false);
+
       // Reset guest/ticket fields so the next registration starts from a clean slate
       setGuest({ name: "", email: "", phoneNumber: "" });
       setRegisterAsGuest(false);
@@ -219,6 +348,19 @@ export default function ManualRegistrationPage() {
         </div>
       )}
 
+      <div className="mb-4 flex items-center gap-2">
+        <label className={`px-3 py-1.5 text-sm rounded border ${tab === 'register' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="tab" value="register" className="hidden" checked={tab==='register'} onChange={() => setTab('register')} />
+          Register
+        </label>
+        <label className={`px-3 py-1.5 text-sm rounded border ${tab === 'payment' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-800 border-gray-200'} cursor-pointer`}>
+          <input type="radio" name="tab" value="payment" className="hidden" checked={tab==='payment'} onChange={() => setTab('payment')} />
+          Record Payment
+        </label>
+      </div>
+
+      {tab === 'register' && (
+      <>
       {message && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{message}</div>}
       {error && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{error}</div>}
 
@@ -446,6 +588,92 @@ export default function ManualRegistrationPage() {
         <div className="text-sm">Total due: <span className="font-semibold">R {totalDue.toFixed(2)}</span></div>
         <button disabled={submitting} onClick={submit} className="px-4 py-2 text-sm rounded bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 shadow-sm">{submitting ? 'Creating…' : 'Create registration'}</button>
       </div>
+      </>
+      )}
+
+      {tab === 'payment' && (
+      <div className="max-w-xl">
+        {payMessage && <div className="p-3 mb-3 border rounded bg-emerald-50 text-emerald-800 text-sm">{payMessage}</div>}
+        {payError && <div className="p-3 mb-3 border rounded bg-red-50 text-red-700 text-sm">{payError}</div>}
+
+        <div className="border rounded-xl p-4 bg-white shadow-sm">
+          <div className="text-lg font-semibold mb-3">Record a payment</div>
+          <div className="grid gap-3">
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Amount</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" type="number" step="0.01" value={payAmount} onChange={e => setPayAmount(e.target.value)} />
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Method</label>
+              <select className="w-full border rounded px-3 py-2 text-sm" value={payMethod} onChange={e => setPayMethod(e.target.value)}>
+                <option value="cash">Cash</option>
+                <option value="card">Card</option>
+                <option value="eft">EFT</option>
+                <option value="voucher">Voucher</option>
+              </select>
+            </div>
+            <div ref={paySearchRef} className="relative">
+              <label className="block text-xs text-gray-600 mb-1">User</label>
+              <input
+                className="w-full border rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+                placeholder="Search by name, email or phone…"
+                value={payUserQuery}
+                autoComplete="off"
+                onChange={e => { setPayUserQuery(e.target.value); setPayDropdownOpen(true); if (!e.target.value) { setPayUserId(""); setPayRegistrationId(""); } }}
+                onFocus={() => { if (payUserQuery.length >= 2) setPayDropdownOpen(true); }}
+              />
+              {payDropdownOpen && payUserQuery.trim().length >= 2 && (
+                <div className="absolute z-30 top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden">
+                  {payMatchedUsers.length > 0 ? (
+                    <>
+                      <div className="px-3 py-1.5 text-[11px] text-gray-400 bg-gray-50 border-b">
+                        {payMatchedUsers.length} match{payMatchedUsers.length !== 1 ? "es" : ""}
+                      </div>
+                      {payMatchedUsers.map(u => (
+                        <button
+                          key={u.id}
+                          type="button"
+                          className="w-full text-left px-3 py-2.5 hover:bg-indigo-50 border-b border-gray-100 last:border-b-0 transition-colors"
+                          onClick={() => selectPayUser(u)}
+                        >
+                          <div className="text-sm font-medium text-gray-900">{u.name}</div>
+                          <div className="text-xs text-gray-500 mt-0.5 flex gap-2 flex-wrap">
+                            {u.email && <span>{u.email}</span>}
+                            {u.phoneNumber && <span>· {u.phoneNumber}</span>}
+                          </div>
+                        </button>
+                      ))}
+                    </>
+                  ) : (
+                    <div className="px-3 py-3 text-sm text-gray-500 italic">No matching users found.</div>
+                  )}
+                </div>
+              )}
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Registration</label>
+              <select className="w-full max-w-full border rounded px-3 py-2 text-sm truncate" value={payRegistrationId} onChange={e => setPayRegistrationId(e.target.value)} disabled={!payUserId}>
+                <option value="">Select registration…</option>
+                {regsForPayUser.map((r: any) => {
+                  const out = regOutstanding[r.id]?.outstanding ?? 0;
+                  const label = `${r.event?.title || r.eventId || 'Event'} — Outstanding: R ${out.toFixed(2)} — #${String(r.id).slice(0,8)}`;
+                  return <option key={r.id} value={r.id} title={label}>{label}</option>;
+                })}
+              </select>
+              {!payUserId && <div className="text-xs text-gray-500 mt-1">Search for a user above to see their registrations.</div>}
+            </div>
+            <div>
+              <label className="block text-xs text-gray-600 mb-1">Paid at (optional)</label>
+              <input className="w-full border rounded px-3 py-2 text-sm" type="datetime-local" value={payPaidAtLocal} onChange={e => setPayPaidAtLocal(e.target.value)} max={new Date().toISOString().slice(0,16)} />
+              <div className="text-[10px] text-gray-500 mt-1">Leave blank to use current time</div>
+            </div>
+          </div>
+          <div className="mt-3">
+            <button disabled={paySubmitting} onClick={createManualPayment} className="w-full px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 shadow-sm">{paySubmitting ? 'Recording…' : 'Record payment'}</button>
+          </div>
+        </div>
+      </div>
+      )}
     </div>
   );
 }

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

@@ -4,6 +4,7 @@ import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useRouter, useSearchParams } from "next/navigation";
 import { apiFetch, fetchAllUsers, fetchAllPayments } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 import { scoreUser } from "@/lib/fuzzyMatch";
 
 function RegistrationOptions({ regs, regOutstanding }: {
@@ -115,8 +116,8 @@ function PaymentsContent() {
 
   const [payments, setPayments] = useState<any[]>([]);
   const [loadingList, setLoadingList] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
   const [registrations, setRegistrations] = useState<any[]>([]);
   const [loadingRegs, setLoadingRegs] = useState(false);
   const [regOutstanding, setRegOutstanding] = useState<Record<string, { totalDue: number; totalPaid: number; outstanding: number }>>({});

frontend/src/app/dashboard/supervisor/whatsapp-attendees/page.tsx

@@ -4,6 +4,7 @@ import React, { Suspense, useEffect, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useRouter, useSearchParams } from "next/navigation";
 import { apiFetch, fetchAllUsers } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 // Attendee with preference info
 type Attendee = { id: string; name: string; phone: string; pref: string };
@@ -358,8 +359,8 @@ function WhatsAppAttendeesPageInner() {
     if (!user) router.replace("/login");
   }, [user, loading, router]);
 
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
   const [tab, setTab] = useState<"attendees" | "automations" | "broadcasts" | "scheduled">("attendees");
   const [loadingEvents, setLoadingEvents] = useState(false);
   const [allEvents, setAllEvents] = useState<any[]>([]);

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

@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 export default function DonatePage() {
   const { token } = useAuth();
@@ -9,8 +10,8 @@ export default function DonatePage() {
   const [eventId, setEventId] = useState<string>("");
   const [amount, setAmount] = useState<string>("");
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
 
   useEffect(() => {
     (async () => {

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

@@ -3,6 +3,7 @@ import React, { Suspense, useEffect, useMemo, useState } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import { useAuth } from "@/hooks/useAuth";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 // Types for form fields
 type FormField = { id: string; type: 'yes_no'|'text'|'date'|'numeric'|'statement'|'paragraph'; label: string; isRequired?: boolean; helpText?: string|null };
@@ -16,8 +17,8 @@ function FormsContent() {
   const [registration, setRegistration] = useState<any | null>(null);
   const [eventForm, setEventForm] = useState<{ isRequired: boolean; fields: FormField[] } | null>(null);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
 
   // Local entry state for new responses
   const [formsData, setFormsData] = useState<Record<number, Record<string, string>>>({});

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

@@ -1,10 +1,12 @@
 "use client";
 import React, { useEffect, useMemo, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
-import { apiFetch } from "@/lib/api";
+import { apiFetch, createFullPaymentCheckout } from "@/lib/api";
 import { useRouter } from "next/navigation";
 import { formatDate } from "@/lib/date";
+import { formatPaymentMethod } from "@/lib/paymentMethod";
 import { QrImage } from "@/components/shared/QrImage";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 // Helper formatters
 const formatRand = (n: number) => `R ${n.toFixed(2)}`;
@@ -29,6 +31,20 @@ function EventStatusBadge({ event }: { event: any }) {
   return <span className={`text-[10px] px-1.5 py-0.5 rounded ${className}`}>{label}</span>;
 }
 
+// Status badge for a registration, shown wherever registration.status is displayed on this
+// page. Colors match the status coloring already used on dashboard/admin/registrations.
+const REGISTRATION_STATUS_STYLES: Record<string, { label: string; className: string }> = {
+  pending: { label: 'Pending', className: 'bg-gray-100 text-gray-600' },
+  confirmed: { label: 'Confirmed', className: 'bg-blue-50 text-blue-700' },
+  partial_paid: { label: 'Partially Paid', className: 'bg-amber-50 text-amber-700' },
+  paid: { label: 'Paid', className: 'bg-green-50 text-green-700' },
+  cancelled: { label: 'Cancelled', className: 'bg-red-50 text-red-700' },
+};
+function RegistrationStatusBadge({ status }: { status: string }) {
+  const s = REGISTRATION_STATUS_STYLES[status] || { label: status, className: 'bg-gray-100 text-gray-500' };
+  return <span className={`text-[10px] px-1.5 py-0.5 rounded ${s.className}`}>{s.label}</span>;
+}
+
 // Effective unit price for an event option (or one of its variants), early-bird aware.
 // Used by the registration editor, which works off raw /api/events/:id data rather than
 // a registration's priceSnapshot — mirrors the pricing logic in register/[eventId]/RegisterForm.tsx.
@@ -52,8 +68,8 @@ export default function UserDashboardPage() {
   const { token, user } = useAuth();
   const [registrations, setRegistrations] = useState<any[]>([]);
   const [tickets, setTickets] = useState<any[]>([]);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [info, setInfo] = useDismissingState<string | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
   // Filters
@@ -71,7 +87,7 @@ export default function UserDashboardPage() {
 
   // Registration details modal
   const [activeRegId, setActiveRegId] = useState<string | null>(null);
-  const [dialog, setDialog] = useState<{ open: boolean; message: string; loading?: boolean }>({ open: false, message: "", loading: false });
+  const [dialog, setDialog] = useState<{ open: boolean; message: string; loading?: boolean; loadingTitle?: string; loadingSubtitle?: string }>({ open: false, message: "", loading: false });
 
   // Track whether the active registration's event has attendee forms
   const [activeEventHasForm, setActiveEventHasForm] = useState<boolean | null>(null);
@@ -296,6 +312,41 @@ export default function UserDashboardPage() {
     }
   };
 
+  // Creates a Yoco checkout for the full outstanding balance and redirects there directly —
+  // choosing a partial amount is only available from the supervisor payments dashboard.
+  const payNow = async (registrationId: string) => {
+    if (!token) return;
+    setError(null);
+    setInfo(null);
+    setDialog({ open: true, message: "Creating payment link…", loading: true, loadingTitle: "Creating payment link…", loadingSubtitle: "Please wait while we redirect you to Yoco." });
+    try {
+      const res = await createFullPaymentCheckout(token, registrationId);
+      if (res.priceUpdated) {
+        setDialog({ open: false, message: "", loading: false });
+        setError(`${res.message || 'Pricing has changed.'} New total: R ${(res.newTotal ?? 0).toFixed(2)}. Please try again.`);
+        // Refresh this registration's billing so the displayed outstanding reflects the new price
+        try {
+          const now = new Date();
+          const r = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
+          const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(registrationId)}`, { authToken: token });
+          const totalPaid = pays.reduce((s, p) => s + (p.amount || 0), 0);
+          const totalDue = (r.registrationOptions || []).reduce((sum: number, opt: any) => sum + optionUnitPrice(opt, null, now) * (opt.quantity || 0), 0);
+          setBilling(prev => ({ ...prev, [registrationId]: { totalDue, totalPaid, outstanding: Math.max(0, totalDue - totalPaid), payments: pays } }));
+        } catch {}
+        return;
+      }
+      if (!res.redirectUrl) {
+        setDialog({ open: false, message: "", loading: false });
+        setError("Failed to create checkout");
+        return;
+      }
+      window.location.href = res.redirectUrl;
+    } catch (e: any) {
+      setDialog({ open: false, message: "", loading: false });
+      setError(e?.message || "Failed to create checkout");
+    }
+  };
+
   // Print helpers
   const buildTicketHtmlCard = (t: any, buyerName?: string) => {
     const eventTitle = t.event?.title || t.eventId || "Event";
@@ -629,6 +680,10 @@ export default function UserDashboardPage() {
             className="px-2.5 py-1 text-xs rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
             onClick={() => router.push("/dashboard/user/reset-password")}
           >Reset password</button>
+          <button
+            className="px-2.5 py-1 text-xs rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
+            onClick={() => router.push("/dashboard/user/payments")}
+          >Payment history</button>
           <button
             className="px-3 py-1.5 text-sm rounded bg-blue-600 text-white hover:bg-blue-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
             onClick={() => router.push("/dashboard/user/donate")}
@@ -677,7 +732,7 @@ export default function UserDashboardPage() {
                           <EventStatusBadge event={r.event} />
                         </div>
                         <div className="text-xs text-gray-600">
-                          Status: {r.status}{isCancelled && <span className="ml-2 inline-block text-[10px] px-1.5 py-0.5 rounded bg-gray-200 text-gray-700">cancelled</span>}
+                          Status: <RegistrationStatusBadge status={r.status} />
                         </div>
                         {(() => {
                           const fs = formStatuses[r.id];
@@ -864,7 +919,7 @@ export default function UserDashboardPage() {
             </div>
             <div className="space-y-3">
               <div>
-                <div className="text-sm text-gray-600">Status: {activeReg.status}</div>
+                <div className="text-sm text-gray-600">Status: <RegistrationStatusBadge status={activeReg.status} /></div>
                 {activeBill && (
                   <div className="text-sm">
                     <div>Total: {formatRand(activeBill.totalDue)}</div>
@@ -1004,7 +1059,7 @@ export default function UserDashboardPage() {
                   <div className="font-medium mb-1">Payments</div>
                   <ul className="text-sm list-disc pl-5 space-y-1">
                     {activeBill.payments.map((p: any) => (
-                      <li key={p.id}>{new Date(p.createdAt).toLocaleString()} — {formatRand(p.amount)} ({p.method || "Payment"})</li>
+                      <li key={p.id}>{new Date(p.createdAt).toLocaleString()} — {formatRand(p.amount)} ({formatPaymentMethod(p.method)})</li>
                     ))}
                   </ul>
                 </div>
@@ -1019,7 +1074,7 @@ export default function UserDashboardPage() {
                 {canModifyActive && activeBill && activeBill.outstanding > 0 ? (
                   <button
                     className="px-3 py-1.5 text-sm bg-green-600 text-white rounded hover:bg-green-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1"
-                    onClick={() => router.push(`/dashboard/user/pay?registrationId=${encodeURIComponent(activeReg.id)}`)}
+                    onClick={() => payNow(activeReg.id)}
                   >Make payment</button>
                 ) : (
                   <>
@@ -1076,8 +1131,8 @@ export default function UserDashboardPage() {
             {dialog.loading ? (
               <div className="flex flex-col items-center">
                 <div className="w-10 h-10 mb-3 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" aria-label="Loading" />
-                <div className="text-base font-medium">Sending tickets…</div>
-                <p className="text-sm text-gray-600 mt-1">Please wait while we send your tickets.</p>
+                <div className="text-base font-medium">{dialog.loadingTitle || "Sending tickets…"}</div>
+                <p className="text-sm text-gray-600 mt-1">{dialog.loadingSubtitle || "Please wait while we send your tickets."}</p>
               </div>
             ) : (
               <>

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

@@ -1,207 +0,0 @@
-"use client";
-import React, { Suspense, useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "next/navigation";
-import { useAuth } from "@/hooks/useAuth";
-import { apiFetch } from "@/lib/api";
-
-function MakePaymentContent() {
-  const searchParams = useSearchParams();
-  const registrationId = searchParams.get("registrationId");
-  const { token } = useAuth();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [info, setInfo] = useState<string | null>(null);
-  const [registration, setRegistration] = useState<any | null>(null);
-  const [payments, setPayments] = useState<any[]>([]);
-  const [amount, setAmount] = useState<string>("");
-  const [priceUpdated, setPriceUpdated] = useState<{ newTotal: number; message: string } | null>(null);
-
-  // Compute effective unit price for a registration option.
-  // Uses priceSnapshot when available (authoritative backend price, variant-aware).
-  // Falls back to deadline-only early-bird calculation for legacy rows without a snapshot.
-  const optionUnitPrice = (opt: any, referenceTime: any, atTime: Date): number => {
-    if (opt.priceSnapshot !== null && opt.priceSnapshot !== undefined) {
-      return Number(opt.priceSnapshot);
-    }
-    const eo = opt.eventOption;
-    const variantId: string | null = opt.variantId || null;
-    const base = (opt.variant?.price !== null && opt.variant?.price !== undefined)
-      ? Number(opt.variant.price)
-      : Number(eo?.price || 0);
-    const allTiers = Array.isArray(eo?.earlyBirdTiers) ? eo.earlyBirdTiers.slice() : [];
-    const tiers = variantId
-      ? allTiers.filter((t: any) => t.variantId === variantId)
-      : allTiers.filter((t: any) => !t.variantId);
-    if (tiers.length === 0) return base;
-    const t = atTime ? new Date(atTime) : new Date();
-    const ref = referenceTime ? new Date(referenceTime) : t;
-    const applicable = tiers
-      .map((x: any) => ({ ...x, deadline: new Date(x.deadline) }))
-      .filter((x: any) => (ref < x.deadline) && (t < x.deadline))
-      .sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime() || (a.order||0) - (b.order||0) || a.price - b.price);
-    if (applicable.length === 0) return base;
-    const price = Number(applicable[0].price);
-    return (price >= 0) ? price : base;
-  };
-
-  const totals = useMemo(() => {
-    if (!registration) return { totalDue: 0, totalPaid: 0, outstanding: 0 };
-    const now = new Date();
-    // totalDue uses priceSnapshot — not time-dependent, consistent with what the backend charges
-    const totalDue = (registration.registrationOptions || []).reduce((s: number, opt: any) => s + optionUnitPrice(opt, null, now) * (opt.quantity || 0), 0);
-    const totalPaid = payments.reduce((s: number, p: any) => s + (p.amount || 0), 0);
-    const outstanding = Math.max(0, totalDue - totalPaid);
-    return { totalDue, totalPaid, outstanding };
-  }, [registration, payments]);
-
-  const minAllowed = useMemo(() => {
-    if (totals.outstanding <= 0) return 0;
-    return totals.outstanding >= 15 ? 15 : totals.outstanding;
-  }, [totals.outstanding]);
-
-  useEffect(() => {
-    (async () => {
-      if (!token || !registrationId) return;
-      try {
-        setError(null);
-        setLoading(true);
-        const reg = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
-        setRegistration(reg);
-        const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(registrationId)}`, { authToken: token });
-        setPayments(pays);
-      } catch (e: any) {
-        setError(e?.message || "Failed to load registration");
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, [token, registrationId]);
-
-  useEffect(() => {
-    if (totals.outstanding <= 0) {
-      setAmount("");
-    }
-  }, [totals.outstanding]);
-
-  const submit = async () => {
-    if (!token || !registrationId) return;
-    const amt = parseFloat(amount);
-    if (!(amt > 0)) { setError("Enter a valid amount"); return; }
-    if (amt > totals.outstanding) { setError(`Amount cannot exceed outstanding (R ${totals.outstanding.toFixed(2)})`); return; }
-    if (amt < minAllowed) {
-      if (totals.outstanding >= 15) {
-        setError("Minimum payment is R15");
-      } else {
-        setError(`Please pay the remaining outstanding amount (R ${totals.outstanding.toFixed(2)})`);
-      }
-      return;
-    }
-    try {
-      setError(null);
-      setInfo(null);
-      setPriceUpdated(null);
-      setLoading(true);
-      const res = await apiFetch<{ redirectUrl?: string; priceUpdated?: boolean; newTotal?: number; message?: string }>("/api/payments/yoco-checkout", {
-        method: "POST",
-        body: {
-          registrationId,
-          amount: amt,
-          successUrl: window.location.origin + "/payment/success",
-          cancelUrl: window.location.origin + "/payment/cancel",
-          failureUrl: window.location.origin + "/payment/failure",
-        },
-        authToken: token,
-      });
-      if (res.priceUpdated) {
-        // Early-bird price changed — show warning and reload registration data
-        setPriceUpdated({ newTotal: res.newTotal ?? 0, message: res.message ?? 'Prices have changed.' });
-        // Reload registration so totals reflect updated priceSnapshot
-        try {
-          const reg = await apiFetch<any>(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
-          setRegistration(reg);
-          const pays = await apiFetch<any[]>(`/api/payments/registration/${encodeURIComponent(registrationId)}`, { authToken: token });
-          setPayments(pays);
-        } catch {}
-        setAmount("");
-        return;
-      }
-      setInfo("Redirecting to payment...");
-      window.location.href = res.redirectUrl!;
-    } catch (e: any) {
-      setError(e?.message || "Failed to create checkout");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (!registrationId) return <div className="p-6">Missing registrationId.</div>;
-
-  return (
-    <div className="max-w-xl mx-auto w-full p-6">
-      <h1 className="text-2xl font-semibold mb-4">Make a payment</h1>
-      {error && <p className="text-red-600 text-sm mb-3">{error}</p>}
-      {info && <p className="text-green-700 text-sm mb-3">{info}</p>}
-      {priceUpdated && (
-        <div className="mb-4 p-3 border border-amber-300 bg-amber-50 rounded text-sm text-amber-800">
-          <strong>Pricing has changed.</strong> {priceUpdated.message}
-          <div className="mt-1">New outstanding: <strong>R {priceUpdated.newTotal.toFixed(2)}</strong></div>
-          <button
-            className="mt-2 text-xs underline text-amber-700 hover:text-amber-900"
-            onClick={() => setPriceUpdated(null)}
-          >OK, I understand — continue with new price</button>
-        </div>
-      )}
-
-      {registration ? (
-        <div className="border rounded p-3 mb-4">
-          <div className="font-medium">{registration.event?.title || registration.eventId}</div>
-          <div className="text-sm text-gray-600">Registration #{registration.id.slice(0,8)}</div>
-          <div className="mt-2 text-sm">
-            <div>Total: R {totals.totalDue.toFixed(2)}</div>
-            <div>Paid: R {totals.totalPaid.toFixed(2)}</div>
-            <div>Outstanding: <span className={totals.outstanding>0?"text-red-600":"text-green-700"}>R {totals.outstanding.toFixed(2)}</span></div>
-          </div>
-          {(() => {
-            const tiers = (registration.registrationOptions || []).flatMap((ro: any) => Array.isArray(ro.eventOption?.earlyBirdTiers) ? ro.eventOption.earlyBirdTiers : []);
-            const upcoming = tiers.map((t: any) => ({ ...t, deadline: new Date(t.deadline) })).filter((t: any) => new Date() < t.deadline).sort((a: any, b: any) => a.deadline.getTime() - b.deadline.getTime());
-            if (upcoming.length === 0) return null;
-            const d = upcoming[0].deadline as Date;
-            const dateStr = d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: '2-digit' });
-            return <div className="mt-2 text-xs text-amber-700">Early bird pricing applies if paid before {dateStr}.</div>;
-          })()}
-        </div>
-      ) : (
-        <p className="text-sm text-gray-600 mb-4">Loading registration...</p>
-      )}
-
-      <label className="block text-sm font-medium mb-1">Amount (R)</label>
-      <input
-        type="number"
-        min={minAllowed.toFixed(2)}
-        max={totals.outstanding > 0 ? totals.outstanding.toFixed(2) : "0"}
-        step="1"
-        placeholder={totals.outstanding >= 15 ? "Enter amount (min R15)" : `Enter amount (max R ${totals.outstanding.toFixed(2)})`}
-        value={amount}
-        onChange={(e) => setAmount(e.target.value)}
-        disabled={totals.outstanding <= 0}
-        className="w-full border rounded px-3 py-2 mb-1 disabled:opacity-60"
-      />
-      {totals.outstanding > 0 && (
-        <p className="text-xs text-gray-600 mb-3">Minimum payment {totals.outstanding >= 15 ? "is R15" : `is the remaining outstanding amount (R ${totals.outstanding.toFixed(2)})`}.</p>
-      )}
-      <button
-        disabled={loading || totals.outstanding <= 0}
-        onClick={submit}
-        className="bg-green-600 text-white px-4 py-2 rounded disabled:opacity-60"
-      >{loading?"Creating checkout...": totals.outstanding <= 0 ? "No outstanding amount" : "Pay now"}</button>
-    </div>
-  );
-}
-
-export default function MakePaymentPage() {
-  return (
-    <Suspense fallback={<div className="p-6">Loading...</div>}>
-      <MakePaymentContent />
-    </Suspense>
-  );
-}

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

@@ -0,0 +1,203 @@
+"use client";
+import React, { useCallback, useEffect, useState } from "react";
+import { useAuth } from "@/hooks/useAuth";
+import { useRouter } from "next/navigation";
+import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
+import { formatDateTime } from "@/lib/date";
+import { formatPaymentMethod } from "@/lib/paymentMethod";
+
+interface PaymentItem {
+  id: string;
+  amount: number;
+  method: string | null;
+  createdAt: string;
+  registrationId: string | null;
+  eventId: string | null;
+  registration?: { event?: { title?: string } | null } | null;
+  event?: { title?: string } | null;
+}
+
+const formatRand = (n: number) => `R ${Math.abs(n).toFixed(2)}`;
+
+export default function UserPaymentsPage() {
+  const { user, loading, token } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (loading) return;
+    if (!user) router.replace("/login");
+  }, [user, loading, router]);
+
+  const [payments, setPayments] = useState<PaymentItem[]>([]);
+  const [fetching, setFetching] = useState(false);
+  const [error, setError] = useDismissingState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [total, setTotal] = useState(0);
+
+  // Filters
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [method, setMethod] = useState("");
+  const [kind, setKind] = useState<"" | "payment" | "refund">("");
+
+  const buildQuery = useCallback((p: number) => {
+    const qs = new URLSearchParams({ page: String(p), limit: "25" });
+    if (startDate) qs.set("startDate", startDate);
+    if (endDate) qs.set("endDate", endDate);
+    if (method) qs.set("method", method);
+    if (kind) qs.set("kind", kind);
+    return `/api/payments/mypayments?${qs.toString()}`;
+  }, [startDate, endDate, method, kind]);
+
+  const loadPayments = useCallback(async (p = 1) => {
+    if (!token) return;
+    setError(null);
+    setFetching(true);
+    try {
+      const res = await apiFetch<any>(buildQuery(p), { authToken: token });
+      setPayments(Array.isArray(res?.data) ? res.data : []);
+      setTotal(res?.total ?? 0);
+      setTotalPages(res?.pages ?? 1);
+      setPage(p);
+    } catch (e: any) {
+      setError(e?.message || "Failed to load payments");
+    } finally {
+      setFetching(false);
+    }
+  }, [token, buildQuery]);
+
+  useEffect(() => { if (token) loadPayments(1); }, [token, startDate, endDate, method, kind]);
+
+  const goToPage = (p: number) => loadPayments(p);
+
+  return (
+    <div className="max-w-4xl mx-auto w-full px-4 py-6 sm:px-6">
+      <div className="flex items-center justify-between mb-4">
+        <h1 className="text-2xl font-semibold">My Payments</h1>
+        <button
+          className="px-2.5 py-1 text-xs rounded bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
+          onClick={() => router.push("/dashboard/user")}
+        >Back to dashboard</button>
+      </div>
+
+      {error && <p className="text-red-600 text-sm mb-3">{error}</p>}
+
+      <div className="border rounded-xl p-4 bg-white shadow-sm">
+        <div className="flex flex-wrap items-end gap-3 mb-4">
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">From</label>
+            <input
+              type="date"
+              className="border rounded px-2 py-1.5 text-sm"
+              value={startDate}
+              onChange={e => setStartDate(e.target.value)}
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">To</label>
+            <input
+              type="date"
+              className="border rounded px-2 py-1.5 text-sm"
+              value={endDate}
+              onChange={e => setEndDate(e.target.value)}
+            />
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Method</label>
+            <select className="border rounded px-2 py-1.5 text-sm" value={method} onChange={e => setMethod(e.target.value)}>
+              <option value="">All methods</option>
+              <option value="cash">Cash</option>
+              <option value="card">Card</option>
+              <option value="eft">EFT</option>
+              <option value="voucher">Voucher</option>
+              <option value="other">Other</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Type</label>
+            <select className="border rounded px-2 py-1.5 text-sm" value={kind} onChange={e => setKind(e.target.value as any)}>
+              <option value="">Payments &amp; refunds</option>
+              <option value="payment">Payments only</option>
+              <option value="refund">Refunds only</option>
+            </select>
+          </div>
+          {(startDate || endDate || method || kind) && (
+            <button
+              className="text-sm px-2 py-1.5 rounded bg-gray-100 hover:bg-gray-200"
+              onClick={() => { setStartDate(""); setEndDate(""); setMethod(""); setKind(""); }}
+            >Clear filters</button>
+          )}
+        </div>
+
+        <div className="text-xs text-gray-500 mb-2">
+          {total} payment{total !== 1 ? "s" : ""} total
+          {total > 0 && ` — page ${page} of ${totalPages}`}
+        </div>
+
+        <ul className="text-sm space-y-2">
+          {payments.map(p => {
+            const amt = p.amount || 0;
+            const isRefund = amt < 0;
+            const eventTitle = p.registration?.event?.title || p.event?.title;
+            return (
+              <li key={p.id} className={`border rounded p-2 ${isRefund ? "bg-red-50" : ""}`}>
+                <div className="flex justify-between">
+                  <div className={`font-medium ${isRefund ? "text-red-700" : ""}`}>
+                    {isRefund ? "-" : ""}{formatRand(amt)}
+                    {isRefund && <span className="text-xs text-red-700 ml-1">(refund)</span>}
+                  </div>
+                  <div className="text-xs text-gray-500">{formatDateTime(p.createdAt)}</div>
+                </div>
+                <div className="text-xs text-gray-600">Method: {formatPaymentMethod(p.method)}</div>
+                {eventTitle && <div className="text-xs text-gray-600">Event: {eventTitle}</div>}
+              </li>
+            );
+          })}
+          {payments.length === 0 && !fetching && (
+            <li className="text-gray-500">No payments found.</li>
+          )}
+          {fetching && <li className="text-gray-400">Loading…</li>}
+        </ul>
+
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between mt-4 text-sm">
+            <span className="text-gray-500">Page {page} of {totalPages}</span>
+            <div className="flex gap-1">
+              <button
+                className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40"
+                disabled={page <= 1 || fetching}
+                onClick={() => goToPage(page - 1)}
+              >← Prev</button>
+              {Array.from({ length: totalPages }, (_, i) => i + 1)
+                .filter(p => p === 1 || p === totalPages || Math.abs(p - page) <= 1)
+                .reduce<(number | "…")[]>((acc, p, i, arr) => {
+                  if (i > 0 && (p as number) - (arr[i - 1] as number) > 1) acc.push("…");
+                  acc.push(p);
+                  return acc;
+                }, [])
+                .map((p, i) =>
+                  p === "…" ? (
+                    <span key={`ellipsis-${i}`} className="px-2 py-1 text-gray-400">…</span>
+                  ) : (
+                    <button
+                      key={p}
+                      className={`px-2 py-1 rounded ${page === p ? "bg-indigo-600 text-white" : "bg-gray-100 hover:bg-gray-200"}`}
+                      disabled={fetching}
+                      onClick={() => goToPage(p as number)}
+                    >{p}</button>
+                  )
+                )}
+              <button
+                className="px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 disabled:opacity-40"
+                disabled={page >= totalPages || fetching}
+                onClick={() => goToPage(page + 1)}
+              >Next →</button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -5,6 +5,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { useRouter } from "next/navigation";
 import { apiFetch } from "@/lib/api";
 import { isValidZAPhone } from "@/lib/phone";
+import { useDismissingState } from "@/hooks/useDismissingState";
 
 export default function UserProfilePage() {
   const { user, token, logout, updateToken } = useAuth();
@@ -19,7 +20,7 @@ export default function UserProfilePage() {
   const [email, setEmail] = useState("");
   const [phone, setPhone] = useState("");
   const [notifPref, setNotifPref] = useState<"email" | "whatsapp" | "both">("email");
-  const [profileMsg, setProfileMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+  const [profileMsg, setProfileMsg] = useDismissingState<{ type: "ok" | "err"; text: string } | null>(null);
   const [savingProfile, setSavingProfile] = useState(false);
 
   const hasValidPhone = isValidZAPhone(phone);
@@ -63,7 +64,7 @@ export default function UserProfilePage() {
   const [currentPassword, setCurrentPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [pwMsg, setPwMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+  const [pwMsg, setPwMsg] = useDismissingState<{ type: "ok" | "err"; text: string } | null>(null);
   const [savingPw, setSavingPw] = useState(false);
 
   const changePassword = async (e: React.FormEvent) => {
@@ -98,7 +99,7 @@ export default function UserProfilePage() {
   };
 
   // ── Revoke sessions ───────────────────────────────────────────────────────
-  const [revokeMsg, setRevokeMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+  const [revokeMsg, setRevokeMsg] = useDismissingState<{ type: "ok" | "err"; text: string } | null>(null);
   const [revoking, setRevoking] = useState(false);
 
   const revokeSessions = async () => {
@@ -126,7 +127,7 @@ export default function UserProfilePage() {
   const [closeStep, setCloseStep] = useState<"idle" | "confirm">("idle");
   const [deleteData, setDeleteData] = useState(false);
   const [closePassword, setClosePassword] = useState("");
-  const [closeMsg, setCloseMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+  const [closeMsg, setCloseMsg] = useDismissingState<{ type: "ok" | "err"; text: string } | null>(null);
   const [closing, setClosing] = useState(false);
 
   const submitAccountClosure = async (e: React.FormEvent) => {

frontend/src/app/dashboard/user/reset-password/page.tsx

@@ -2,6 +2,7 @@
 import React, { useMemo, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { apiFetch } from "@/lib/api";
+import { useDismissingState } from "@/hooks/useDismissingState";
 import { useRouter } from "next/navigation";
 
 export default function ResetPasswordPage() {
@@ -11,7 +12,7 @@ export default function ResetPasswordPage() {
   const [password, setPassword] = useState("");
   const [confirm, setConfirm] = useState("");
   const [status, setStatus] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useDismissingState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
   const canSubmit = useMemo(() => current.length > 0 && password.length >= 8 && password === confirm, [current, password, confirm]);

frontend/src/app/registration/success/page.tsx

@@ -3,12 +3,14 @@ import React, { Suspense } from "react";
 import { Navbar } from "@/components/layout/Navbar";
 import { Footer } from "@/components/layout/Footer";
 import { useSearchParams, useRouter } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
 
 type FormField = { id: string; type: 'yes_no'|'text'|'date'|'numeric'|'statement'|'paragraph'; label: string; isRequired?: boolean; helpText?: string|null };
 
 function RegistrationSuccessContent() {
   const search = useSearchParams();
   const router = useRouter();
+  const { token } = useAuth();
   const registrationId = search.get("registrationId") || search.get("id");
   const fallbackTotalParam = search.get("totalDue");
   const fallbackTotalDue = React.useMemo(() => {
@@ -22,6 +24,7 @@ function RegistrationSuccessContent() {
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
   const [info, setInfo] = React.useState<string | null>(null);
+  const [payLoading, setPayLoading] = React.useState(false);
 
   React.useEffect(() => {
     (async () => {
@@ -31,7 +34,6 @@ function RegistrationSuccessContent() {
       try {
         setLoading(true);
         // Try to fetch registration and event form
-        const token = (typeof window !== 'undefined') ? localStorage.getItem('token') : null;
         const r = token ? await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token }) : null;
         if (r) {
           setReg(r);
@@ -49,7 +51,7 @@ function RegistrationSuccessContent() {
         setLoading(false);
       }
     })();
-  }, [registrationId]);
+  }, [registrationId, token]);
 
   const totalDue = React.useMemo(() => {
     if (!reg) return 0;
@@ -69,7 +71,6 @@ function RegistrationSuccessContent() {
       // attempt ticket generation if status is paid (may fail if required forms aren't completed)
       (async () => {
         try {
-          const token = (typeof window !== 'undefined') ? localStorage.getItem('token') : null;
           if (token && reg?.id) {
             await (await import('@/lib/api')).apiFetch('/api/tickets/generate', { method: 'POST', authToken: token, body: { registrationId: reg.id } });
           }
@@ -77,11 +78,33 @@ function RegistrationSuccessContent() {
         setTimeout(() => router.replace('/dashboard'), 600);
       })();
     }
-  }, [reg, totalDue, router]);
+  }, [reg, totalDue, router, token]);
 
-  const goPay = () => {
+  const goPay = async () => {
     if (!registrationId) return;
-    router.push(`/dashboard/user/pay?registrationId=${encodeURIComponent(registrationId)}`);
+    if (!token) { setError('Please login to pay.'); return; }
+    try {
+      setError(null);
+      setPayLoading(true);
+      const { createFullPaymentCheckout } = await import('@/lib/api');
+      const res = await createFullPaymentCheckout(token, registrationId);
+      if (res.priceUpdated) {
+        // Early-bird price changed since registration — surface the new total and
+        // reload the registration so the displayed totalDue reflects it, instead of redirecting.
+        setError(`${res.message || 'Pricing has changed.'} New total: R ${(res.newTotal ?? 0).toFixed(2)}. Please try again.`);
+        try {
+          const r = await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}`, { authToken: token });
+          if (r) setReg(r);
+        } catch {}
+        return;
+      }
+      if (!res.redirectUrl) { setError('Failed to create checkout'); return; }
+      window.location.href = res.redirectUrl;
+    } catch (e: any) {
+      setError(e?.message || 'Failed to create checkout');
+    } finally {
+      setPayLoading(false);
+    }
   };
 
   const goDashboard = () => {
@@ -108,9 +131,9 @@ function RegistrationSuccessContent() {
             {(totalDue > 0 || (!reg && fallbackTotalDue > 0)) && (
               <button
                 onClick={goPay}
-                disabled={!registrationId}
+                disabled={!registrationId || payLoading}
                 className="px-4 py-2 rounded bg-green-600 text-white disabled:opacity-60"
-              >Pay with Yoco</button>
+              >{payLoading ? "Creating checkout..." : "Pay with Yoco"}</button>
             )}
             <button
               onClick={goDashboard}
@@ -129,6 +152,7 @@ function RegistrationSuccessContent() {
 }
 
 function AttendeeForms({ reg, form, formsData, setFormsData, setError, setInfo }: { reg: any; form: { isRequired: boolean; fields: FormField[] }; formsData: Record<number, Record<string,string>>; setFormsData: any; setError: any; setInfo: any; }) {
+  const { token } = useAuth();
   const registrationId = reg?.id;
   const mainTickets = (reg?.registrationOptions || []).filter((o: any) => o?.eventOption?.isMainTicket).reduce((s: number, o: any) => s + (o.quantity || 0), 0);
   const count = Math.max(0, mainTickets);
@@ -157,7 +181,6 @@ function AttendeeForms({ reg, form, formsData, setFormsData, setError, setInfo }
   const submit = async () => {
     try {
       setError(null); setInfo(null);
-      const token = (typeof window !== 'undefined') ? localStorage.getItem('token') : null;
       if (!token) { setError('Please login to submit forms.'); return; }
       const payload = [] as any[];
       for (let i = 0; i < count; i++) {
@@ -177,7 +200,6 @@ function AttendeeForms({ reg, form, formsData, setFormsData, setError, setInfo }
   const saveDraft = async () => {
     try {
       setError(null); setInfo(null);
-      const token = (typeof window !== 'undefined') ? localStorage.getItem('token') : null;
       if (!token) { setError('Please login to save drafts.'); return; }
       await (await import('@/lib/api')).apiFetch(`/api/registrations/${encodeURIComponent(registrationId)}/forms/draft`, {
         method: 'PUT',

frontend/src/components/reports/ReportsV2.tsx

@@ -473,11 +473,26 @@ export default function ReportsV2() {
     return map;
   }, [paymentsByEvent]);
 
+  // Yoco processing fee totals per registration, from the per-payment snapshot (see
+  // Payment.feeAmount in the backend) — never recomputed from current settings, so this
+  // always reflects what was actually estimated at payment time.
+  const feeByReg = useMemo(() => {
+    const map = new Map<string, number>();
+    Object.keys(paymentsByEvent).forEach(evId => {
+      (paymentsByEvent[evId] || []).forEach((p: any) => {
+        if (p.registrationId && p.feeAmount != null) {
+          map.set(p.registrationId, (map.get(p.registrationId) || 0) + (p.feeAmount || 0));
+        }
+      });
+    });
+    return map;
+  }, [paymentsByEvent]);
+
   const revDetRows = useMemo(() => {
     if (report !== "revenueDetailed") return [] as any[];
     const df = payFrom ? new Date(payFrom).getTime() : null;
     const dt = payTo ? new Date(payTo).getTime() : null;
-    type Row = { eventId: string; eventTitle: string; userName: string; userEmail?: string; totalPaid: number; status?: string; registrationId: string; outstanding: number };
+    type Row = { eventId: string; eventTitle: string; userName: string; userEmail?: string; totalPaid: number; status?: string; registrationId: string; outstanding: number; fee: number; netAfterFee: number };
     const rows: Row[] = [];
     // Iterate registrations to include those with zero payments and show each once
     Object.keys(registrationsByEvent).forEach(evId => {
@@ -489,6 +504,7 @@ export default function ReportsV2() {
         if (dt && created && created > dt) return;
         const totalPaid = paidByReg.get(r.id) || 0;
         const outstanding = outstandingByReg.get(r.id) || 0;
+        const fee = feeByReg.get(r.id) || 0;
         rows.push({
           eventId: evId,
           eventTitle: evTitle,
@@ -498,12 +514,14 @@ export default function ReportsV2() {
           status: r.status,
           registrationId: r.id,
           outstanding,
+          fee,
+          netAfterFee: totalPaid - fee,
         });
       });
     });
     rows.sort((a,b) => (a.eventTitle.localeCompare(b.eventTitle) || (a.userName || '').localeCompare(b.userName || '')));
     return rows;
-  }, [report, registrationsByEvent, filteredEvents, payFrom, payTo, paidByReg, outstandingByReg]);
+  }, [report, registrationsByEvent, filteredEvents, payFrom, payTo, paidByReg, outstandingByReg, feeByReg]);
 
   // Derived for attendees (layered) for a single event
   const attendeesLayer = useMemo(() => {
@@ -631,6 +649,7 @@ export default function ReportsV2() {
           totalPaid: paidByReg.get(r.id) || 0,
           outstanding: outstandingByReg.get(r.id) || 0,
           donations: donationsByUser.get(r.user?.id || r.userId) || 0,
+          fee: feeByReg.get(r.id) || 0,
           __prices: {} as Record<string, number> // 👈 hidden helper
         };
 
@@ -660,7 +679,7 @@ export default function ReportsV2() {
 
     return rows;
 
-  }, [report, registrationsByEvent, filteredEvents, masterOptions, paidByReg, outstandingByReg]);
+  }, [report, registrationsByEvent, filteredEvents, masterOptions, paidByReg, outstandingByReg, feeByReg]);
 
   //Master Report Totals
   const masterTotals = useMemo(() => {
@@ -671,6 +690,7 @@ export default function ReportsV2() {
       totalPaid: 0,
       outstanding: 0,
       donations: 0,
+      fee: 0,
     };
 
     // 👇 initialise dynamic option totals
@@ -683,6 +703,7 @@ export default function ReportsV2() {
       totals.orderTotal += row.orderTotal;
       totals.totalPaid += row.totalPaid;
       totals.outstanding += row.outstanding;
+      totals.fee += row.fee || 0;
 
       masterOptions.forEach(opt => {
         const qty = row[opt.name] || 0;
@@ -761,6 +782,8 @@ export default function ReportsV2() {
         Email: r.userEmail || "",
         Status: r.status || "",
         TotalPaid: r.totalPaid,
+        Fee: r.fee,
+        NetAfterFee: r.netAfterFee,
         Outstanding: r.outstanding,
         RegistrationId: r.registrationId
       })));
@@ -793,7 +816,7 @@ export default function ReportsV2() {
       return downloadCsv(`donations_${new Date().toISOString().slice(0,10)}`, rows);
     }
     if (report === "cashup") {
-      const cols = ["Event", "Section", "Detail", "Income", "CostsFromMethod", "ExpectedCash", "Actual", "Variance"];
+      const cols = ["Event", "Section", "Detail", "Income", "CostsFromMethod", "ExpectedBeforeFees", "YocoFee", "ExpectedAfterFees", "Actual", "Variance"];
       const rows: any[] = [];
       Object.keys(financialsByEvent).forEach(evId => {
         const f = financialsByEvent[evId];
@@ -802,15 +825,15 @@ export default function ReportsV2() {
         const title = ev?.title || evId;
         METHOD_KEYS.forEach(m => {
           const r = f.reconciled?.byMethod?.[m];
-          rows.push({ Event: title, Section: "Method", Detail: METHOD_LABEL[m], Income: f.paymentsByMethod?.[m] || 0, CostsFromMethod: f.costsByMethod?.[m] || 0, ExpectedCash: f.expectedCashByMethod?.[m] || 0, Actual: r?.actual ?? "", Variance: r?.variance ?? "" });
+          rows.push({ Event: title, Section: "Method", Detail: METHOD_LABEL[m], Income: f.paymentsByMethod?.[m] || 0, CostsFromMethod: f.costsByMethod?.[m] || 0, ExpectedBeforeFees: f.expectedCashByMethod?.[m] || 0, YocoFee: f.feesByMethod?.[m] || 0, ExpectedAfterFees: f.expectedInBankByMethod?.[m] || 0, Actual: r?.actual ?? "", Variance: r?.variance ?? "" });
           if (m === "cash") {
-            (r?.denominations || []).forEach((d: any) => rows.push({ Event: title, Section: "Denomination", Detail: denomLabel(d.value) + " × " + d.count, Income: "", CostsFromMethod: "", ExpectedCash: "", Actual: d.value * d.count, Variance: "" }));
+            (r?.denominations || []).forEach((d: any) => rows.push({ Event: title, Section: "Denomination", Detail: denomLabel(d.value) + " × " + d.count, Income: "", CostsFromMethod: "", ExpectedBeforeFees: "", YocoFee: "", ExpectedAfterFees: "", Actual: d.value * d.count, Variance: "" }));
           }
         });
         if ((f.untaggedCostsTotal || 0) > 0) {
-          rows.push({ Event: title, Section: "Untagged costs", Detail: "Not tied to a specific method", Income: "", CostsFromMethod: f.untaggedCostsTotal, ExpectedCash: "", Actual: "", Variance: "" });
+          rows.push({ Event: title, Section: "Untagged costs", Detail: "Not tied to a specific method", Income: "", CostsFromMethod: f.untaggedCostsTotal, ExpectedBeforeFees: "", YocoFee: "", ExpectedAfterFees: "", Actual: "", Variance: "" });
         }
-        rows.push({ Event: title, Section: "Donations counted as profit", Detail: "Unallocated donations", Income: "", CostsFromMethod: "", ExpectedCash: "", Actual: f.unallocatedDonationsTotal || 0, Variance: "" });
+        rows.push({ Event: title, Section: "Donations counted as profit", Detail: "Unallocated donations", Income: "", CostsFromMethod: "", ExpectedBeforeFees: "", YocoFee: "", ExpectedAfterFees: "", Actual: f.unallocatedDonationsTotal || 0, Variance: "" });
       });
       return downloadCsv(`cashup_${new Date().toISOString().slice(0,10)}`, rows, cols.map(c => ({ key: c, label: c })));
     }
@@ -833,7 +856,8 @@ export default function ReportsV2() {
         });
         (f.costs || []).forEach((c: any) => rows.push({ Event: title, Section: "Costs", Detail: `${c.label}${c.paidFromMethod ? ` (paid via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Amount: -(c.total ?? c.amount) }));
         rows.push({ Event: title, Section: "Donations counted as profit", Detail: "Unallocated donations", Amount: f.unallocatedDonationsTotal || 0 });
-        rows.push({ Event: title, Section: "Net profit", Detail: "", Amount: f.netProfit || 0 });
+        rows.push({ Event: title, Section: "Fees", Detail: "Yoco processing fees", Amount: -(f.totalFees || 0) });
+        rows.push({ Event: title, Section: "Net profit", Detail: "After fees", Amount: f.netProfitAfterFees || 0 });
       });
       return downloadCsv(`finance_report_${new Date().toISOString().slice(0,10)}`, rows, cols.map(c => ({ key: c, label: c })));
     }
@@ -841,20 +865,20 @@ export default function ReportsV2() {
       const rows = Object.keys(financialsByEvent).map(evId => {
         const f = financialsByEvent[evId];
         const ev = filteredEvents.find(e => e.id === evId);
-        return { Event: ev?.title || evId, Revenue: f?.effectiveTotalRevenue || 0, Costs: f?.totalCosts || 0, NetProfit: f?.netProfit || 0 };
+        return { Event: ev?.title || evId, Revenue: f?.effectiveTotalRevenue || 0, Costs: f?.totalCosts || 0, Fees: f?.totalFees || 0, NetProfit: f?.netProfitAfterFees || 0 };
       });
       return downloadCsv(`profit_report_${new Date().toISOString().slice(0,10)}`, rows);
     }
     if (report === "cashupAudit") {
-      const cols = ["Event", "Action", "PerformedBy", "Date", "Method", "Expected", "Actual", "Variance", "DeltaVsPreviousClose", "DonationsCountedAsProfit", "Notes"];
+      const cols = ["Event", "Action", "PerformedBy", "Date", "Method", "ExpectedBeforeFees", "YocoFee", "ExpectedAfterFees", "Actual", "Variance", "DeltaVsPreviousClose", "DonationsCountedAsProfit", "Notes"];
       const rows: any[] = [];
       auditRows.forEach((r: any) => {
         const base = { Event: r.event?.title || r.eventId, Action: actionLabel(r.action), PerformedBy: r.performedBy?.name || "", Date: new Date(r.createdAt).toLocaleString() };
         if (r.action === "reopened") {
-          rows.push({ ...base, Method: "", Expected: "", Actual: "", Variance: "", DeltaVsPreviousClose: "", DonationsCountedAsProfit: "", Notes: r.notes || "" });
+          rows.push({ ...base, Method: "", ExpectedBeforeFees: "", YocoFee: "", ExpectedAfterFees: "", Actual: "", Variance: "", DeltaVsPreviousClose: "", DonationsCountedAsProfit: "", Notes: r.notes || "" });
         } else {
           (r.lines || []).forEach((l: any) => rows.push({
-            ...base, Method: METHOD_LABEL[l.method] || l.method, Expected: l.expectedAmount, Actual: l.actualAmount ?? "", Variance: l.variance ?? "",
+            ...base, Method: METHOD_LABEL[l.method] || l.method, ExpectedBeforeFees: (l.expectedAmount || 0) + (l.feeAmount || 0), YocoFee: l.feeAmount ?? 0, ExpectedAfterFees: l.expectedAmount, Actual: l.actualAmount ?? "", Variance: l.variance ?? "",
             DeltaVsPreviousClose: r._deltaVsPrevious?.[l.method] ?? "", DonationsCountedAsProfit: r.unallocatedDonationsTotal || 0, Notes: l.notes || r.notes || ""
           }));
         }
@@ -874,6 +898,7 @@ export default function ReportsV2() {
 
         OrderTotal: r.orderTotal,
         Paid: r.totalPaid,
+        Fee: r.fee,
         Outstanding: r.outstanding,
         Donations: r.donations
       }));
@@ -891,6 +916,7 @@ export default function ReportsV2() {
 
         OrderTotal: masterTotals?.orderTotal ?? 0,
         Paid: masterTotals?.totalPaid ?? 0,
+        Fee: masterTotals?.fee ?? 0,
         Outstanding: masterTotals?.outstanding ?? 0,
         Donations: masterTotals?.donations ?? 0,
       });
@@ -1006,6 +1032,8 @@ export default function ReportsV2() {
           r.userEmail || "",
           r.status || "",
           Number((r.totalPaid || 0).toFixed(2)),
+          Number((r.fee || 0).toFixed(2)),
+          Number((r.netAfterFee || 0).toFixed(2)),
           Number((r.outstanding || 0).toFixed(2)),
           r.registrationId || "",
         ]);
@@ -1013,7 +1041,7 @@ export default function ReportsV2() {
           title: 'Revenue Detailed',
           kind: 'table',
           orientation: 'landscape',
-          table: { columns: ["Event","Name","Email","Status","Total paid","Outstanding","RegistrationId"], rows }
+          table: { columns: ["Event","Name","Email","Status","Total paid","Fee","Net after fee","Outstanding","RegistrationId"], rows }
         });
         return;
       }
@@ -1042,15 +1070,15 @@ export default function ReportsV2() {
           const title = ev?.title || evId;
           METHOD_KEYS.forEach(m => {
             const r = f.reconciled?.byMethod?.[m];
-            rows.push([title, METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2)), Number((f.costsByMethod?.[m] || 0).toFixed(2)), Number((f.expectedCashByMethod?.[m] || 0).toFixed(2)), r?.actual != null ? Number(r.actual.toFixed(2)) : "not reconciled", r?.variance != null ? Number(r.variance.toFixed(2)) : ""]);
+            rows.push([title, METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2)), Number((f.costsByMethod?.[m] || 0).toFixed(2)), Number((f.expectedCashByMethod?.[m] || 0).toFixed(2)), Number((f.feesByMethod?.[m] || 0).toFixed(2)), Number((f.expectedInBankByMethod?.[m] || 0).toFixed(2)), r?.actual != null ? Number(r.actual.toFixed(2)) : "not reconciled", r?.variance != null ? Number(r.variance.toFixed(2)) : ""]);
             if (m === "cash") {
-              (r?.denominations || []).forEach((d: any) => rows.push([title, `  ${denomLabel(d.value)} × ${d.count}`, "", "", "", Number((d.value * d.count).toFixed(2)), ""]));
+              (r?.denominations || []).forEach((d: any) => rows.push([title, `  ${denomLabel(d.value)} × ${d.count}`, "", "", "", "", "", Number((d.value * d.count).toFixed(2)), ""]));
             }
           });
-          if ((f.untaggedCostsTotal || 0) > 0) rows.push([title, "Untagged costs", "", Number(f.untaggedCostsTotal.toFixed(2)), "", "", ""]);
-          rows.push([title, "Donations counted as profit", "", "", "", Number((f.unallocatedDonationsTotal || 0).toFixed(2)), ""]);
+          if ((f.untaggedCostsTotal || 0) > 0) rows.push([title, "Untagged costs", "", Number(f.untaggedCostsTotal.toFixed(2)), "", "", "", "", ""]);
+          rows.push([title, "Donations counted as profit", "", "", "", "", "", Number((f.unallocatedDonationsTotal || 0).toFixed(2)), ""]);
         });
-        await downloadReportPdf(API_BASE, token, { title: 'Cashup Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected cash", "Actual", "Variance"], rows } });
+        await downloadReportPdf(API_BASE, token, { title: 'Cashup Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected (before fees)", "Yoco fee", "Expected (after fees)", "Actual", "Variance"], rows } });
         return;
       }
       if (report === "financeReport") {
@@ -1073,7 +1101,8 @@ export default function ReportsV2() {
           rows.push([title, "Costs", "", ""]);
           (f.costs || []).forEach((c: any) => rows.push([title, "", `${c.label}${c.paidFromMethod ? ` (via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Number((-(c.total ?? c.amount)).toFixed(2))]));
           rows.push([title, "", "Donations counted as profit", Number((f.unallocatedDonationsTotal || 0).toFixed(2))]);
-          rows.push([title, "", "Net profit", Number((f.netProfit || 0).toFixed(2))]);
+          rows.push([title, "Fees", "Yoco processing fees", Number((-(f.totalFees || 0)).toFixed(2))]);
+          rows.push([title, "", "Net profit (after fees)", Number((f.netProfitAfterFees || 0).toFixed(2))]);
         });
         await downloadReportPdf(API_BASE, token, { title: 'Finance Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Section", "Detail", "Amount"], rows } });
         return;
@@ -1082,9 +1111,9 @@ export default function ReportsV2() {
         const rows: (string | number)[][] = Object.keys(financialsByEvent).map(evId => {
           const f = financialsByEvent[evId];
           const ev = filteredEvents.find(e => e.id === evId);
-          return [ev?.title || evId, Number((f?.effectiveTotalRevenue || 0).toFixed(2)), Number((f?.totalCosts || 0).toFixed(2)), Number((f?.netProfit || 0).toFixed(2))];
+          return [ev?.title || evId, Number((f?.effectiveTotalRevenue || 0).toFixed(2)), Number((f?.totalCosts || 0).toFixed(2)), Number((f?.totalFees || 0).toFixed(2)), Number((f?.netProfitAfterFees || 0).toFixed(2))];
         });
-        await downloadReportPdf(API_BASE, token, { title: 'Profit Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event", "Revenue", "Costs", "Net profit"], rows } });
+        await downloadReportPdf(API_BASE, token, { title: 'Profit Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event", "Revenue", "Costs", "Fees", "Net profit (after fees)"], rows } });
         return;
       }
       if (report === "cashupAudit") {
@@ -1092,13 +1121,13 @@ export default function ReportsV2() {
         auditRows.forEach((r: any) => {
           const base = [r.event?.title || r.eventId, actionLabel(r.action), r.performedBy?.name || "", new Date(r.createdAt).toLocaleString()];
           if (r.action === "reopened") {
-            rows.push([...base, "", "", "", "", "", r.notes || ""]);
+            rows.push([...base, "", "", "", "", "", "", "", r.notes || ""]);
           } else {
-            (r.lines || []).forEach((l: any) => rows.push([...base, METHOD_LABEL[l.method] || l.method, Number((l.expectedAmount || 0).toFixed(2)), l.actualAmount != null ? Number(l.actualAmount.toFixed(2)) : "", l.variance != null ? Number(l.variance.toFixed(2)) : "", r._deltaVsPrevious?.[l.method] != null ? Number(r._deltaVsPrevious[l.method].toFixed(2)) : "", l.notes || ""]));
-            if (!r.lines || r.lines.length === 0) rows.push([...base, "", "", "", "", "", `Donations counted as profit: ${money2(r.unallocatedDonationsTotal)}`]);
+            (r.lines || []).forEach((l: any) => rows.push([...base, METHOD_LABEL[l.method] || l.method, Number(((l.expectedAmount || 0) + (l.feeAmount || 0)).toFixed(2)), Number((l.feeAmount || 0).toFixed(2)), Number((l.expectedAmount || 0).toFixed(2)), l.actualAmount != null ? Number(l.actualAmount.toFixed(2)) : "", l.variance != null ? Number(l.variance.toFixed(2)) : "", r._deltaVsPrevious?.[l.method] != null ? Number(r._deltaVsPrevious[l.method].toFixed(2)) : "", l.notes || ""]));
+            if (!r.lines || r.lines.length === 0) rows.push([...base, "", "", "", "", "", "", "", `Donations counted as profit: ${money2(r.unallocatedDonationsTotal)}`]);
           }
         });
-        await downloadReportPdf(API_BASE, token, { title: 'Cashup Audit Trail', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Action", "Performed by", "Date", "Method", "Expected", "Actual", "Variance", "Δ vs previous close", "Notes"], rows } });
+        await downloadReportPdf(API_BASE, token, { title: 'Cashup Audit Trail', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Action", "Performed by", "Date", "Method", "Expected (before fees)", "Yoco fee", "Expected (after fees)", "Actual", "Variance", "Δ vs previous close", "Notes"], rows } });
         return;
       }
       if (report === "masterOrders") {
@@ -1111,6 +1140,7 @@ export default function ReportsV2() {
 
           Number(r.orderTotal.toFixed(2)),
           Number(r.totalPaid.toFixed(2)),
+          Number((r.fee || 0).toFixed(2)),
           Number(r.outstanding.toFixed(2))
         ]);
 
@@ -1124,6 +1154,7 @@ export default function ReportsV2() {
 
           Number((masterTotals?.orderTotal ?? 0).toFixed(2)),
           Number((masterTotals?.totalPaid ?? 0).toFixed(2)),
+          Number((masterTotals?.fee ?? 0).toFixed(2)),
           Number((masterTotals?.outstanding ?? 0).toFixed(2))
         ]);
 
@@ -1137,6 +1168,7 @@ export default function ReportsV2() {
               `R ${(masterTotals?.[`${opt.name}_revenue`] ?? 0).toFixed(2)}`
           ),
 
+          "",
           "",
           "",
           ""
@@ -1156,6 +1188,7 @@ export default function ReportsV2() {
 
               "Order Total",
               "Paid",
+              "Fee",
               "Outstanding"
             ],
             rows: bodyRows
@@ -1217,8 +1250,8 @@ export default function ReportsV2() {
         });
         await emailReportPdf(API_BASE, token, { title: 'Revenue Summary', kind: 'table', orientation: 'portrait', table: { columns: ["Event","Method","Amount","Event Total"], rows }, subject, body });
       } else if (report === 'revenueDetailed') {
-        const rows: (string|number)[][] = (revDetRows as any[]).map(r => [ r.eventTitle, r.userName, r.userEmail || "", r.status || "", Number((r.totalPaid || 0).toFixed(2)), Number((r.outstanding || 0).toFixed(2)), r.registrationId || "" ]);
-        await emailReportPdf(API_BASE, token, { title: 'Revenue Detailed', kind: 'table', orientation: 'landscape', table: { columns: ["Event","Name","Email","Status","Total paid","Outstanding","RegistrationId"], rows }, subject, body });
+        const rows: (string|number)[][] = (revDetRows as any[]).map(r => [ r.eventTitle, r.userName, r.userEmail || "", r.status || "", Number((r.totalPaid || 0).toFixed(2)), Number((r.fee || 0).toFixed(2)), Number((r.netAfterFee || 0).toFixed(2)), Number((r.outstanding || 0).toFixed(2)), r.registrationId || "" ]);
+        await emailReportPdf(API_BASE, token, { title: 'Revenue Detailed', kind: 'table', orientation: 'landscape', table: { columns: ["Event","Name","Email","Status","Total paid","Fee","Net after fee","Outstanding","RegistrationId"], rows }, subject, body });
       } else if (report === 'regStatus') {
         const rows: (string|number)[][] = [];
         Object.keys(registrationsByEvent).forEach(evId => { const ev = filteredEvents.find(e => e.id === evId); const regs = registrationsByEvent[evId] || []; const counts: Record<string, number> = { pending: 0, partial_paid: 0, paid: 0, cancelled: 0 }; regs.forEach((r: any) => { if (!statusIncludeCancelled && r.status === 'cancelled') return; counts[r.status] = (counts[r.status] || 0) + 1; }); rows.push([ev?.title || evId, counts.pending||0, counts.partial_paid||0, counts.paid||0, counts.cancelled||0]); });
@@ -1230,13 +1263,13 @@ export default function ReportsV2() {
           const title = ev?.title || evId;
           METHOD_KEYS.forEach(m => {
             const r = f.reconciled?.byMethod?.[m];
-            rows.push([title, METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2)), Number((f.costsByMethod?.[m] || 0).toFixed(2)), Number((f.expectedCashByMethod?.[m] || 0).toFixed(2)), r?.actual != null ? Number(r.actual.toFixed(2)) : "not reconciled", r?.variance != null ? Number(r.variance.toFixed(2)) : ""]);
-            if (m === "cash") (r?.denominations || []).forEach((d: any) => rows.push([title, `  ${denomLabel(d.value)} × ${d.count}`, "", "", "", Number((d.value * d.count).toFixed(2)), ""]));
+            rows.push([title, METHOD_LABEL[m], Number((f.paymentsByMethod?.[m] || 0).toFixed(2)), Number((f.costsByMethod?.[m] || 0).toFixed(2)), Number((f.expectedCashByMethod?.[m] || 0).toFixed(2)), Number((f.feesByMethod?.[m] || 0).toFixed(2)), Number((f.expectedInBankByMethod?.[m] || 0).toFixed(2)), r?.actual != null ? Number(r.actual.toFixed(2)) : "not reconciled", r?.variance != null ? Number(r.variance.toFixed(2)) : ""]);
+            if (m === "cash") (r?.denominations || []).forEach((d: any) => rows.push([title, `  ${denomLabel(d.value)} × ${d.count}`, "", "", "", "", "", Number((d.value * d.count).toFixed(2)), ""]));
           });
-          if ((f.untaggedCostsTotal || 0) > 0) rows.push([title, "Untagged costs", "", Number(f.untaggedCostsTotal.toFixed(2)), "", "", ""]);
-          rows.push([title, "Donations counted as profit", "", "", "", Number((f.unallocatedDonationsTotal || 0).toFixed(2)), ""]);
+          if ((f.untaggedCostsTotal || 0) > 0) rows.push([title, "Untagged costs", "", Number(f.untaggedCostsTotal.toFixed(2)), "", "", "", "", ""]);
+          rows.push([title, "Donations counted as profit", "", "", "", "", "", Number((f.unallocatedDonationsTotal || 0).toFixed(2)), ""]);
         });
-        await emailReportPdf(API_BASE, token, { title: 'Cashup Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected cash", "Actual", "Variance"], rows }, subject, body });
+        await emailReportPdf(API_BASE, token, { title: 'Cashup Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected (before fees)", "Yoco fee", "Expected (after fees)", "Actual", "Variance"], rows }, subject, body });
       } else if (report === 'financeReport') {
         const rows: (string | number)[][] = [];
         Object.keys(financialsByEvent).forEach(evId => {
@@ -1255,26 +1288,27 @@ export default function ReportsV2() {
           rows.push([title, "Costs", "", ""]);
           (f.costs || []).forEach((c: any) => rows.push([title, "", `${c.label}${c.paidFromMethod ? ` (via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Number((-(c.total ?? c.amount)).toFixed(2))]));
           rows.push([title, "", "Donations counted as profit", Number((f.unallocatedDonationsTotal || 0).toFixed(2))]);
-          rows.push([title, "", "Net profit", Number((f.netProfit || 0).toFixed(2))]);
+          rows.push([title, "Fees", "Yoco processing fees", Number((-(f.totalFees || 0)).toFixed(2))]);
+          rows.push([title, "", "Net profit (after fees)", Number((f.netProfitAfterFees || 0).toFixed(2))]);
         });
         await emailReportPdf(API_BASE, token, { title: 'Finance Report', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Section", "Detail", "Amount"], rows }, subject, body });
       } else if (report === 'profitReport') {
         const rows: (string | number)[][] = Object.keys(financialsByEvent).map(evId => {
           const f = financialsByEvent[evId]; const ev = filteredEvents.find(e => e.id === evId);
-          return [ev?.title || evId, Number((f?.effectiveTotalRevenue || 0).toFixed(2)), Number((f?.totalCosts || 0).toFixed(2)), Number((f?.netProfit || 0).toFixed(2))];
+          return [ev?.title || evId, Number((f?.effectiveTotalRevenue || 0).toFixed(2)), Number((f?.totalCosts || 0).toFixed(2)), Number((f?.totalFees || 0).toFixed(2)), Number((f?.netProfitAfterFees || 0).toFixed(2))];
         });
-        await emailReportPdf(API_BASE, token, { title: 'Profit Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event", "Revenue", "Costs", "Net profit"], rows }, subject, body });
+        await emailReportPdf(API_BASE, token, { title: 'Profit Report', kind: 'table', orientation: 'portrait', table: { columns: ["Event", "Revenue", "Costs", "Fees", "Net profit (after fees)"], rows }, subject, body });
       } else if (report === 'cashupAudit') {
         const rows: (string | number)[][] = [];
         auditRows.forEach((r: any) => {
           const base = [r.event?.title || r.eventId, actionLabel(r.action), r.performedBy?.name || "", new Date(r.createdAt).toLocaleString()];
           if (r.action === "reopened") {
-            rows.push([...base, "", "", "", "", "", r.notes || ""]);
+            rows.push([...base, "", "", "", "", "", "", "", r.notes || ""]);
           } else {
-            (r.lines || []).forEach((l: any) => rows.push([...base, METHOD_LABEL[l.method] || l.method, Number((l.expectedAmount || 0).toFixed(2)), l.actualAmount != null ? Number(l.actualAmount.toFixed(2)) : "", l.variance != null ? Number(l.variance.toFixed(2)) : "", r._deltaVsPrevious?.[l.method] != null ? Number(r._deltaVsPrevious[l.method].toFixed(2)) : "", l.notes || ""]));
+            (r.lines || []).forEach((l: any) => rows.push([...base, METHOD_LABEL[l.method] || l.method, Number(((l.expectedAmount || 0) + (l.feeAmount || 0)).toFixed(2)), Number((l.feeAmount || 0).toFixed(2)), Number((l.expectedAmount || 0).toFixed(2)), l.actualAmount != null ? Number(l.actualAmount.toFixed(2)) : "", l.variance != null ? Number(l.variance.toFixed(2)) : "", r._deltaVsPrevious?.[l.method] != null ? Number(r._deltaVsPrevious[l.method].toFixed(2)) : "", l.notes || ""]));
           }
         });
-        await emailReportPdf(API_BASE, token, { title: 'Cashup Audit Trail', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Action", "Performed by", "Date", "Method", "Expected", "Actual", "Variance", "Δ vs previous close", "Notes"], rows }, subject, body });
+        await emailReportPdf(API_BASE, token, { title: 'Cashup Audit Trail', kind: 'table', orientation: 'landscape', table: { columns: ["Event", "Action", "Performed by", "Date", "Method", "Expected (before fees)", "Yoco fee", "Expected (after fees)", "Actual", "Variance", "Δ vs previous close", "Notes"], rows }, subject, body });
       }
       alert('Email sent with PDF attachment');
     } catch (e: any) {
@@ -1710,6 +1744,8 @@ export default function ReportsV2() {
                                 <th className="text-left">Email</th>
                                 <th className="text-left">Status</th>
                                 <th className="text-left">Total paid</th>
+                                <th className="text-left">Fee</th>
+                                <th className="text-left">Net after fee</th>
                                 <th className="text-left">Outstanding</th>
                                 <th className="text-left">Registration</th>
                               </tr>
@@ -1721,6 +1757,8 @@ export default function ReportsV2() {
                                   <td>{r.userEmail || ''}</td>
                                   <td className="capitalize">{r.status || ''}</td>
                                   <td>R {Number(r.totalPaid || 0).toFixed(2)}</td>
+                                  <td>R {Number(r.fee || 0).toFixed(2)}</td>
+                                  <td>R {Number(r.netAfterFee || 0).toFixed(2)}</td>
                                   <td>R {Number(r.outstanding || 0).toFixed(2)}</td>
                                   <td className="font-mono text-xs">{r.registrationId || ''}</td>
                                 </tr>
@@ -1823,6 +1861,7 @@ export default function ReportsV2() {
                         <span className="font-medium">Totals:</span>
                         <span className="ml-3">Order: R {masterTotals?.orderTotal.toFixed(2)}</span>
                         <span className="ml-3">Paid: R {masterTotals?.totalPaid.toFixed(2)}</span>
+                        <span className="ml-3">Fee: R {(masterTotals?.fee ?? 0).toFixed(2)}</span>
                         <span className="ml-3">Outstanding: R {masterTotals?.outstanding.toFixed(2)}</span>
                       </div>
 
@@ -1840,6 +1879,7 @@ export default function ReportsV2() {
 
                             <th>Order Total</th>
                             <th>Paid</th>
+                            <th>Fee</th>
                             <th>Outstanding</th>
                             <th>Donations</th>
                           </tr>
@@ -1859,6 +1899,7 @@ export default function ReportsV2() {
 
                                 <td>R {r.orderTotal.toFixed(2)}</td>
                                 <td>R {r.totalPaid.toFixed(2)}</td>
+                                <td>R {(r.fee || 0).toFixed(2)}</td>
                                 <td>R {r.outstanding.toFixed(2)}</td>
                                 <td>R {r.donations.toFixed(2)}</td>
                               </tr>
@@ -1874,6 +1915,7 @@ export default function ReportsV2() {
 
                             <td>R {masterTotals?.orderTotal.toFixed(2)}</td>
                             <td>R {masterTotals?.totalPaid.toFixed(2)}</td>
+                            <td>R {(masterTotals?.fee ?? 0).toFixed(2)}</td>
                             <td>R {masterTotals?.outstanding.toFixed(2)}</td>
                             <td>R {masterTotals?.donations.toFixed(2)}</td>
                           </tr>
@@ -1886,7 +1928,7 @@ export default function ReportsV2() {
                                 </td>
                             ))}
 
-                            <td colSpan={4}></td>
+                            <td colSpan={5}></td>
                           </tr>
                           </tbody>
                         </table>
@@ -1912,7 +1954,7 @@ export default function ReportsV2() {
                       </div>
                       <div className="overflow-auto">
                         <table className="min-w-[640px] text-sm">
-                          <thead><tr><th className="text-left">Method</th><th className="text-left">Income</th><th className="text-left">Costs from method</th><th className="text-left">Expected cash</th><th className="text-left">Actual</th><th className="text-left">Variance</th></tr></thead>
+                          <thead><tr><th className="text-left">Method</th><th className="text-left">Income</th><th className="text-left">Costs from method</th><th className="text-left">Expected (before fees)</th><th className="text-left">Yoco fee</th><th className="text-left">Expected (after fees)</th><th className="text-left">Actual</th><th className="text-left">Variance</th></tr></thead>
                           <tbody>
                             {METHOD_KEYS.map(m => {
                               const r = f.reconciled?.byMethod?.[m];
@@ -1923,13 +1965,15 @@ export default function ReportsV2() {
                                     <td>R {(f.paymentsByMethod?.[m] || 0).toFixed(2)}</td>
                                     <td>R {(f.costsByMethod?.[m] || 0).toFixed(2)}</td>
                                     <td>R {(f.expectedCashByMethod?.[m] || 0).toFixed(2)}</td>
+                                    <td>R {(f.feesByMethod?.[m] || 0).toFixed(2)}</td>
+                                    <td>R {(f.expectedInBankByMethod?.[m] || 0).toFixed(2)}</td>
                                     <td>{r?.actual != null ? `R ${r.actual.toFixed(2)}` : <span className="text-gray-400">not reconciled</span>}</td>
                                     <td className={r?.variance != null && r.variance !== 0 ? (r.variance < 0 ? "text-red-600" : "text-emerald-600") : ""}>{r?.variance != null ? `R ${r.variance.toFixed(2)}` : "—"}</td>
                                   </tr>
                                   {m === "cash" && (r?.denominations || []).length > 0 && (r?.denominations || []).map((d: any) => (
                                     <tr key={d.id} className="text-xs text-gray-500">
                                       <td className="pl-4">{denomLabel(d.value)} × {d.count}</td>
-                                      <td colSpan={4}></td>
+                                      <td colSpan={6}></td>
                                       <td>R {(d.value * d.count).toFixed(2)}</td>
                                     </tr>
                                   ))}
@@ -2011,7 +2055,8 @@ export default function ReportsV2() {
                       </div>
 
                       <div className="text-sm flex items-center justify-between border-t pt-1"><span>Donations counted as profit</span><span>R {(f.unallocatedDonationsTotal || 0).toFixed(2)}</span></div>
-                      <div className="text-sm font-semibold flex items-center justify-between"><span>Net profit</span><span>R {(f.netProfit || 0).toFixed(2)}</span></div>
+                      <div className="text-sm flex items-center justify-between"><span>Yoco processing fees</span><span>-R {(f.totalFees || 0).toFixed(2)}</span></div>
+                      <div className="text-sm font-semibold flex items-center justify-between"><span>Net profit (after fees)</span><span>R {(f.netProfitAfterFees || 0).toFixed(2)}</span></div>
                     </div>
                   );
                 })
@@ -2024,7 +2069,7 @@ export default function ReportsV2() {
                 <div className="text-sm text-gray-500">No data available. Select events and view.</div>
               ) : (
                 <table className="min-w-[600px] text-sm">
-                  <thead><tr><th className="text-left">Event</th><th className="text-left">Revenue</th><th className="text-left">Costs</th><th className="text-left">Net profit</th></tr></thead>
+                  <thead><tr><th className="text-left">Event</th><th className="text-left">Revenue</th><th className="text-left">Costs</th><th className="text-left">Fees</th><th className="text-left">Net profit (after fees)</th></tr></thead>
                   <tbody>
                     {Object.keys(financialsByEvent).map(evId => {
                       const f = financialsByEvent[evId];
@@ -2034,7 +2079,8 @@ export default function ReportsV2() {
                           <td>{ev?.title || evId}</td>
                           <td>R {(f?.effectiveTotalRevenue || 0).toFixed(2)}</td>
                           <td>R {(f?.totalCosts || 0).toFixed(2)}</td>
-                          <td className="font-medium">R {(f?.netProfit || 0).toFixed(2)}</td>
+                          <td>R {(f?.totalFees || 0).toFixed(2)}</td>
+                          <td className="font-medium">R {(f?.netProfitAfterFees || 0).toFixed(2)}</td>
                         </tr>
                       );
                     })}
@@ -2063,11 +2109,13 @@ export default function ReportsV2() {
                     {(r.action === "closed" || r.action === "quick_closed") && (
                       <div className="overflow-auto mt-2">
                         <table className="min-w-[560px] text-sm">
-                          <thead><tr><th className="text-left">Method</th><th className="text-left">Expected</th><th className="text-left">Actual</th><th className="text-left">Variance</th><th className="text-left">Δ vs previous close</th></tr></thead>
+                          <thead><tr><th className="text-left">Method</th><th className="text-left">Expected (before fees)</th><th className="text-left">Yoco fee</th><th className="text-left">Expected (after fees)</th><th className="text-left">Actual</th><th className="text-left">Variance</th><th className="text-left">Δ vs previous close</th></tr></thead>
                           <tbody>
-                            {(r.lines && r.lines.length > 0 ? r.lines : METHOD_KEYS.map(m => ({ method: m, expectedAmount: null, actualAmount: null, variance: null }))).map((l: any) => (
+                            {(r.lines && r.lines.length > 0 ? r.lines : METHOD_KEYS.map(m => ({ method: m, expectedAmount: null, feeAmount: null, actualAmount: null, variance: null }))).map((l: any) => (
                               <tr key={l.method}>
                                 <td>{METHOD_LABEL[l.method] || l.method}</td>
+                                <td>{l.expectedAmount != null ? `R ${(l.expectedAmount + (l.feeAmount || 0)).toFixed(2)}` : "—"}</td>
+                                <td>{l.feeAmount != null ? `R ${l.feeAmount.toFixed(2)}` : "—"}</td>
                                 <td>{l.expectedAmount != null ? `R ${l.expectedAmount.toFixed(2)}` : "—"}</td>
                                 <td>{l.actualAmount != null ? `R ${l.actualAmount.toFixed(2)}` : <span className="text-gray-400">not reconciled</span>}</td>
                                 <td>{l.variance != null ? `R ${l.variance.toFixed(2)}` : "—"}</td>

frontend/src/hooks/useDismissingState.ts

@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Like useState, but a truthy value auto-clears back to the initial falsy value after
+ * `ms` milliseconds. Every call to the setter cancels any pending timer and (if the new
+ * value is truthy) arms a fresh one, so rapid-fire updates reset the countdown instead of
+ * cutting it short. Meant for post-action confirmation/error banners that shouldn't linger.
+ */
+export function useDismissingState<T>(initial: T, ms = 7000) {
+  const [value, setValue] = useState<T>(initial);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const set = useCallback((next: T) => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setValue(next);
+    if (next) {
+      timeoutRef.current = setTimeout(() => setValue(initial), ms);
+    }
+  }, [ms, initial]);
+
+  useEffect(() => () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }, []);
+
+  return [value, set] as const;
+}

frontend/src/lib/api.ts

@@ -155,3 +155,19 @@ export function fetchAllUsers(token: string, params: Record<string, string> = {}
 export function fetchAllPayments(token: string, params: Record<string, string> = {}): Promise<any[]> {
   return fetchAllPages("/api/payments", token, params);
 }
+
+// Creates a Yoco checkout for a registration's full remaining outstanding balance.
+// Omitting `amount` makes the backend charge the full remainder rather than a partial amount —
+// partial-amount checkouts are only ever created from the supervisor payments dashboard.
+export function createFullPaymentCheckout(token: string, registrationId: string): Promise<{ redirectUrl?: string; priceUpdated?: boolean; newTotal?: number; message?: string }> {
+  return apiFetch("/api/payments/yoco-checkout", {
+    method: "POST",
+    authToken: token,
+    body: {
+      registrationId,
+      successUrl: window.location.origin + "/payment/success",
+      cancelUrl: window.location.origin + "/payment/cancel",
+      failureUrl: window.location.origin + "/payment/failure",
+    },
+  });
+}

frontend/src/lib/paymentMethod.ts

@@ -0,0 +1,26 @@
+// Payment.method is free-text — online checkouts get tagged with whatever wallet type the
+// gateway reports (apple_pay, google_pay, ...), not just the manual-entry methods below.
+// Mirrors normalizeUserMethod in backend/src/controllers/paymentController.js: card-network
+// wallets count as "card" (same settlement, no separate float); anything else is "other".
+const USER_FACING_METHODS = ["cash", "card", "eft", "voucher"];
+const CARD_ALIASES = ["apple_pay", "google_pay"];
+
+const METHOD_LABELS: Record<string, string> = {
+  cash: "Cash",
+  card: "Card",
+  eft: "EFT",
+  voucher: "Voucher",
+  other: "Other",
+};
+
+export function normalizePaymentMethod(method: string | null | undefined): string {
+  const m = String(method || "").toLowerCase();
+  if (USER_FACING_METHODS.includes(m)) return m;
+  if (CARD_ALIASES.includes(m)) return "card";
+  return "other";
+}
+
+export function formatPaymentMethod(method: string | null | undefined): string {
+  if (!method) return "Payment";
+  return METHOD_LABELS[normalizePaymentMethod(method)];
+}

frontend/src/types/index.ts

@@ -76,6 +76,7 @@ export type EventCashupLine = {
   cashupId: string;
   method: CashupMethod;
   expectedAmount: number;
+  feeAmount?: number | null;
   actualAmount?: number | null;
   variance?: number | null;
   notes?: string | null;
@@ -102,6 +103,7 @@ export type EventCashup = {
 
 export type ReconciledByMethod = {
   expected: number;
+  fee: number;
   actual: number | null;
   variance: number | null;
   notes?: string | null;
@@ -133,10 +135,14 @@ export type EventFinancials = {
   untaggedCostsTotal: number;
   totalCosts: number;
   expectedCashByMethod: Record<CashupMethod, number>;
+  expectedInBankByMethod: Record<CashupMethod, number>;
   reconciled: ReconciledSnapshot | null;
   effectiveGrossIncomeByMethod: Record<CashupMethod, number>;
   effectiveTotalRevenue: number;
   netProfit: number;
+  feesByMethod: Record<CashupMethod, number>;
+  totalFees: number;
+  netProfitAfterFees: number;
   unallocatedDonations: Payment[];
   unallocatedDonationsTotal: number;
   totalDonations: number;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hope-events",
-  "version": "1.0.1",
+  "version": "1.3.0",
   "main": "index.js",
   "scripts": {
     "dev:backend": "cd backend && npm run dev",