Bump to 1.27.1

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -7,6 +7,35 @@ and this project follows [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [1.27.1] - 2026-10-21
+
+### Added
+
+- `npm run set-demo` also stages ten completed events from the past year, with door sales recorded by staff, staff cash counts, check-ins, refunds, donations and post-event feedback. Their cashups go through every path: a quick close; full closes with card fees, a cash deposit fee, a written-off shortfall, cash kept on hand and an unaccounted amount; a close, reopen and re-close; pending EFT money that was later received and some still outstanding; and one event left open with the cash counted, ready for a live cashup. Funnel stats older than 90 days are stored as daily totals, the way the app rolls them up. See `backend/DEMO_DATA.md`.
+
+## [1.27.0] - 2026-10-21
+
+Run `npm run prisma:deploy` in the backend when deploying. This release adds a migration.
+
+### Added
+
+- Cashups now record where each payment method's money ended up. For cash, card, EFT and other, the expected takings are split into what's **in the bank**, **cash on hand**, and **pending** (on the card machine or Yoco report, or with a proof of payment), with a reference for the pending amount. Card fees, bank charges, cash shortfalls and other losses are **written off** with a reason. Each method shows what's still **unaccounted**. Closing with an unaccounted amount is allowed after a warning, and the amount comes off profit, as variance did before.
+- When staff have counted the cash, cash on hand is worked out for you: the count, less what reached the bank and any deposit fee written off as a bank charge.
+- Pending money on a closed event can be marked **received** or **written off** later from the cashup screen, without reopening the event. Each one is logged with who did it and when.
+- Reopening an event starts the next cashup from the last one, with any pending money settled since folded in.
+- Write-offs show as **Bank & card charges** on the cashup screen and in the Cashup, Finance and Profit reports. The Cashup report has new In bank, On hand, Pending, Written off and Unaccounted columns.
+
+### Changed
+
+- Net profit now subtracts write-offs as their own line instead of showing card fees and bank charges as missing income. The net figure is the same.
+- Every dashboard page uses the same back link: the small "← Back to dashboard" link above the page title, as on the Waitlist page. The grey Back buttons are gone. Site settings, profile, donate and manual registration, which had no way back, now have one too.
+
+## [1.26.1] - 2026-10-21
+
+### Added
+
+- `npm run set-demo` in the backend replaces the database contents with demo data for showing the platform to other churches. It keeps the site settings and the admin account, and stages six upcoming events with registrations, payments, tickets, a waitlist, camp cabins, coupons, costs and funnel stats. See `backend/DEMO_DATA.md`.
+
 ## [1.26.0] - 2026-10-21
 
 ### Changed

backend/DEMO_DATA.md

@@ -0,0 +1,189 @@
+# Demo data
+
+`npm run set-demo` replaces everything in the database with a realistic set of demo data,
+for showing the platform to other churches. It stages six upcoming events with
+registrations, payments, tickets and people, and ten completed events from the past year
+with door sales, check-ins, feedback and cashups. That way every dashboard, report,
+check-in and cashup screen has something to show.
+
+> **This deletes real data.** Run it only against a database you're happy to wipe, such
+> as a dedicated demo deployment. It is not something to run on a live church site.
+
+---
+
+## Running it
+
+```bash
+cd backend
+npm run set-demo            # shows the database it will wipe and asks you to type "demo"
+npm run set-demo -- --yes   # no prompt (for scripts)
+```
+
+The script uses `DATABASE_URL` from `backend/.env`. To point it at another database
+for one run, set it in the environment first. A value already in the environment wins
+over `.env`:
+
+```bash
+DATABASE_URL="postgresql://user:pass@host:5432/hope_demo" npm run set-demo
+```
+
+It takes about five seconds and is safe to re-run as often as you like. Each run wipes the
+previous demo and creates it again.
+
+### Before you run it
+
+- The admin account must already exist. By default that's `joshua@crosscode.co.za`.
+  To keep a different account, set `DEMO_ADMIN_EMAIL`:
+  ```bash
+  DEMO_ADMIN_EMAIL="admin@example.org" npm run set-demo
+  ```
+  If the account isn't found, the script stops before changing anything.
+- Migrations must be up to date (`npm run prisma:deploy`).
+
+---
+
+## What it keeps and what it clears
+
+| Kept | Cleared |
+|---|---|
+| Site settings (`AppSetting`): org name, branding, SMTP, Yoco, WhatsApp, legal pages | Every event, with its options, variants, early-bird tiers, sections, forms, costs and cash-ups |
+| The admin account, including its login history, trusted devices and 2FA | Every other user |
+| Migration history | Registrations, payments, tickets, scans, coupons, waitlists, consents, cabins, feedback, analytics, audit log |
+| Uploaded files on disk (`public/uploads`) | Queued scheduled emails/WhatsApps (`data/scheduled-emails.json`) |
+
+The wipe and the new data are written in one database transaction. If that fails,
+nothing changes. The past events' cashups run straight afterwards, through the same
+code as the cashup screen. If one of those fails, re-run the script.
+
+---
+
+## What it creates
+
+### Upcoming events
+
+All dates are worked out from the day you run it, so these events are always upcoming.
+Registrations are spread over the past month, as if sign-ups have been coming in.
+The data is generated from a fixed seed, so every run looks the same.
+
+| When (from today) | Event | Shows off |
+|---|---|---|
+| ~1½ weeks, Sat 07:30 | **Men's Breakfast: Built to Last** | **Sold out** (60 places), 5 people on the **waitlist**, card / cash / EFT payments recorded by staff, 2 cancelled registrations |
+| ~2½ weeks, Sat 10:00 | **Family Fun Day** | Several ticket types (adult, child, family pass), a non-ticket **add-on** (lunch pack), a fixed-amount **coupon** (`FUNDAY20`), entry and food-stall check-in sections |
+| ~5 weeks, Fri–Sat | **Rooted Women's Conference** | Two **early-bird tiers** (one already expired, one still open) plus a Saturday-only ticket, T-shirt **variants** (S–XXL), a **required sign-up form** (dietary needs, workshop choice, prayer requests), a 20% **group coupon** (`ROOTED20`) used by 4 registrations |
+| ~7 weeks, Mon–Thu | **Ignite Summer Camp** | **Named attendees** (campers aged 12–17), signed **parental consent**, gender collected, **deposits and part-payments**, campers placed in boys' and girls' **cabins** with staff leaders, **sponsor-a-spot** donations towards a 10-spot goal |
+| ~8 weeks, Sun 19:00 | **Carols by Candlelight** | A **free event** with group tickets (1–6 people), plus general **donations** |
+| ~14 weeks, Fri–Sun | **Marriage Enrichment Weekend** | Room-type **variants with limited stock**, early-bird prices per room type, a per-person spa add-on, R1 000 EFT deposits |
+
+Each event also gets:
+
+- A cover photo (from Unsplash, which `next.config` already allows) and a contact person.
+- **Costs**, both once-off and per item, so the profit view and cash-up have figures.
+- About 30 days of **funnel analytics** (views → started → submitted → paid) by source
+  (WhatsApp, Facebook, Instagram, email, direct) and device.
+
+Paid registrations have tickets with QR codes, the same way the app issues them once
+payment is complete. Part-paid and pending ones don't have tickets yet.
+
+### Past events
+
+Ten completed events spread over the past year, for showing cashups and the historical
+reports. Each one has:
+
+- Online sales in the five weeks before the event, with a few unpaid no-shows.
+- **Door sales** on the day, recorded by the staff team (cash and card machine).
+- **Check-ins**: about 90% of tickets scanned, with the odd group arriving short.
+- **Staff cash counts** with note and coin denominations.
+
+Some events also have refunds, donations and post-event feedback.
+
+The cashups cover every path through the cashup screen:
+
+| When | Event | Cashup to demo |
+|---|---|---|
+| ~11 months ago | **Church Family Picnic** | **Quick closed** (no settlement) |
+| 24 Dec | **Christmas Eve Candlelight Service** | Free event with card and cash **donations**. Card settled net of **Yoco fees**, collection banked |
+| Easter Sunday | **Easter Sunrise Service & Breakfast** | Cash banked less a **cash deposit fee** (bank charge), card fees, a **refund** |
+| Mother's Day | **Mother's Day Brunch** | **Closed with R50 cash short → reopened → recounted → closed again.** The history shows all three steps |
+| ~3½ months ago | **Youth Winter Camp** | Deposits and balances. **EFT pending** (POPs) at close, later **marked received** without reopening |
+| ~2½ months ago | **Men's Golf Day** | Card-heavy, card fees written off, a refund |
+| ~2 months ago | **Kids Holiday Club** | Cash-heavy door sales. **R20 cash shortfall written off**, **R500 kept on hand** as float |
+| ~6 weeks ago | **Women's High Tea** | Closed with **R30 unaccounted**, shown in red |
+| ~4 weeks ago | **Missions Fundraiser Dinner** | **R2 600 EFT still pending** (POP received, not cleared). Shows "Mark received" / "Write off" |
+| ~10 days ago | **Worship Night** | **Still open, with the cash already counted.** Use it to do a cashup live in the demo |
+
+Easter, the Youth Camp, the Holiday Club and the High Tea have **feedback forms** with
+ratings and comments. Funnel stats older than 90 days are stored as daily totals, the
+way the app rolls them up overnight, so the funnel report covers the whole year.
+
+### Totals
+
+A typical run gives roughly:
+
+| | |
+|---|---|
+| Users | 130 (plus the admin) |
+| Registrations | ~700 (paid, part-paid, pending, cancelled and refunded) |
+| Payments | ~640, including donations, sponsorships and refunds |
+| Tickets | ~780, with ~490 check-ins |
+| Named campers | ~45 |
+| Feedback responses | ~80 |
+| Funnel rows | ~4 400 |
+
+---
+
+## Logging in
+
+Every demo account uses the password **`Demo@1234`**.
+
+| Role | Email | Good for showing |
+|---|---|---|
+| Supervisor | `lerato.khumalo@example.com` | Event setup, reports, coupons, viewing cashups |
+| Staff | `sipho.dlamini@example.com` | At-the-door payments and check-in scanning |
+| Staff | `anri.botha@example.com` | |
+| Staff | `daniel.pillay@example.com` | |
+
+Closing, reopening and settling pending money in a cashup are admin-only, so do the
+live Worship Night cashup as your own admin account.
+
+The other 126 people are ordinary members (role `user`), with emails like
+`thandi.mokoena@example.com`. Log in as one of them to show the member view: their
+registrations, tickets and payments. Any registrant's email from an event's attendee
+list works.
+
+Your own admin account keeps its existing password.
+
+---
+
+## Safety
+
+- **Nothing is sent.** The script writes straight to the database and never calls the
+  email, WhatsApp or Yoco code.
+- **Nothing can reach a real person later.** Demo people use `@example.com` addresses
+  (a reserved domain that can't receive mail) and have **no phone numbers**, so
+  reminders or broadcasts sent during a demo go nowhere. All parental consents are
+  already signed, so no consent reminders go out.
+- Card payments have made-up Yoco ids (`demo_…`). They don't exist in Yoco, so leave
+  the demo site's Yoco settings in test mode or empty.
+
+---
+
+## Customising
+
+Everything lives in [`scripts/set-demo.js`](scripts/set-demo.js). There is one
+`build…()` function per event (`buildMensBreakfast`, `buildYouthCamp`, …), and
+`main()` decides which ones run. To change an event's name, prices, ticket types or
+number of registrations, edit its function. To add an event, write a new `build…()`
+and add it to the list in `main()`.
+
+The past events are in `buildPastEvents()`, one spec each: dates, ticket types, costs,
+how many people bought online and at the door, and a `cashup` that says how it was
+closed. Supported closes:
+- `'quick'`
+- `'full'`, with `lines` saying where the money ended up
+- `'reclose'`
+- `'none'`, which leaves the event open
+
+A full close can add `later` to settle pending money after closing. The helpers
+`cardLine`, `eftLine` and `cashLine` build the usual settlements: card net of Yoco fees,
+EFT with an optional pending POP, and cash banked with an optional float, deposit fee or
+shortfall.

backend/README.md

@@ -143,6 +143,10 @@ npm run prisma:status
 npm run prisma:generate
 ```
 
+### Demo data
+
+`npm run set-demo` wipes the database (keeping site settings and the admin account) and stages six upcoming demo events with registrations, payments and tickets. See [DEMO_DATA.md](DEMO_DATA.md).
+
 ---
 
 ## Running the Server

backend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "event-management-backend",
-  "version": "1.26.0",
+  "version": "1.27.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "event-management-backend",
-      "version": "1.26.0",
+      "version": "1.27.1",
       "hasInstallScript": true,
       "dependencies": {
         "@prisma/adapter-pg": "^7.10.1",

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "event-management-backend",
-  "version": "1.26.0",
+  "version": "1.27.1",
   "description": "Event Management System Backend",
   "main": "src/index.js",
   "scripts": {
@@ -13,7 +13,8 @@
     "prisma:status": "prisma migrate status",
     "prisma:reset": "prisma migrate reset --force",
     "migrate:env-to-db": "node scripts/migrate-env-to-db.js",
-    "migrate:env-to-db:dry": "node scripts/migrate-env-to-db.js --dry-run"
+    "migrate:env-to-db:dry": "node scripts/migrate-env-to-db.js --dry-run",
+    "set-demo": "node scripts/set-demo.js"
   },
   "dependencies": {
     "@prisma/adapter-pg": "^7.10.1",

backend/prisma/migrations/20261021110951_add_cashup_settlement/migration.sql

@@ -0,0 +1,53 @@
+-- CreateEnum
+CREATE TYPE "CashupWriteOffCategory" AS ENUM ('card_fees', 'bank_charges', 'cash_shortfall', 'other');
+
+-- AlterTable
+ALTER TABLE "EventCashupLine" ADD COLUMN     "bankAmount" DOUBLE PRECISION,
+ADD COLUMN     "onHandAmount" DOUBLE PRECISION,
+ADD COLUMN     "pendingAmount" DOUBLE PRECISION,
+ADD COLUMN     "pendingReference" TEXT,
+ADD COLUMN     "writeOffTotal" DOUBLE PRECISION NOT NULL DEFAULT 0;
+
+-- CreateTable
+CREATE TABLE "EventCashupWriteOff" (
+    "id" TEXT NOT NULL,
+    "lineId" TEXT NOT NULL,
+    "category" "CashupWriteOffCategory" NOT NULL,
+    "amount" DOUBLE PRECISION NOT NULL,
+    "reason" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "EventCashupWriteOff_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "EventCashupPendingResolution" (
+    "id" TEXT NOT NULL,
+    "lineId" TEXT NOT NULL,
+    "outcome" TEXT NOT NULL,
+    "amount" DOUBLE PRECISION NOT NULL,
+    "category" "CashupWriteOffCategory",
+    "notes" TEXT,
+    "performedById" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "EventCashupPendingResolution_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "EventCashupWriteOff_lineId_idx" ON "EventCashupWriteOff"("lineId");
+
+-- CreateIndex
+CREATE INDEX "EventCashupPendingResolution_lineId_idx" ON "EventCashupPendingResolution"("lineId");
+
+-- CreateIndex
+CREATE INDEX "EventCashupPendingResolution_performedById_idx" ON "EventCashupPendingResolution"("performedById");
+
+-- AddForeignKey
+ALTER TABLE "EventCashupWriteOff" ADD CONSTRAINT "EventCashupWriteOff_lineId_fkey" FOREIGN KEY ("lineId") REFERENCES "EventCashupLine"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventCashupPendingResolution" ADD CONSTRAINT "EventCashupPendingResolution_lineId_fkey" FOREIGN KEY ("lineId") REFERENCES "EventCashupLine"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "EventCashupPendingResolution" ADD CONSTRAINT "EventCashupPendingResolution_performedById_fkey" FOREIGN KEY ("performedById") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

backend/prisma/schema.prisma

@@ -88,6 +88,7 @@ model User {
   eventsClosed     Event[]       @relation("EventClosedBy")
   eventsReopened   Event[]       @relation("EventReopenedBy")
   cashupsPerformed EventCashup[]
+  pendingResolved  EventCashupPendingResolution[] @relation("PendingResolutionBy")
   notifyForEvents  Event[]       @relation("EventNotifyRecipients")
 
   personCashCountsFor     EventCashupPersonCount[] @relation("EventCashupPersonCountFor")
@@ -708,20 +709,68 @@ model EventCashup {
   @@index([eventId, createdAt])
 }
 
+// Where one method's expected takings ended up. actualAmount = bank + on hand + pending
+// (money held or on its way); write-offs explain money that's gone (fees, charges,
+// shortfalls). expected - actual - writeOffTotal is what's still unaccounted for.
 model EventCashupLine {
-  id             String                    @id @default(uuid())
-  cashupId       String
-  cashup         EventCashup               @relation(fields: [cashupId], references: [id], onDelete: Cascade)
-  method         String
-  expectedAmount Float                     @default(0)
-  actualAmount   Float?
-  variance       Float?
-  notes          String?
-  denominations  EventCashupDenomination[]
+  id                 String                         @id @default(uuid())
+  cashupId           String
+  cashup             EventCashup                    @relation(fields: [cashupId], references: [id], onDelete: Cascade)
+  method             String
+  expectedAmount     Float                          @default(0)
+  actualAmount       Float?
+  variance           Float?
+  notes              String?
+  bankAmount         Float?
+  onHandAmount       Float?
+  pendingAmount      Float?
+  // Card/Yoco report or POP reference for the pending amount.
+  pendingReference   String?
+  writeOffTotal      Float                          @default(0)
+  denominations      EventCashupDenomination[]
+  writeOffs          EventCashupWriteOff[]
+  pendingResolutions EventCashupPendingResolution[]
 
   @@index([cashupId])
 }
 
+enum CashupWriteOffCategory {
+  card_fees
+  bank_charges
+  cash_shortfall
+  other
+}
+
+model EventCashupWriteOff {
+  id        String                 @id @default(uuid())
+  lineId    String
+  line      EventCashupLine        @relation(fields: [lineId], references: [id], onDelete: Cascade)
+  category  CashupWriteOffCategory
+  amount    Float
+  reason    String?
+  createdAt DateTime               @default(now())
+
+  @@index([lineId])
+}
+
+// Pending money settled after the event was closed: it reached the bank ('received') or
+// never will ('written_off'). Append-only, like EventCashup — the line itself is never edited.
+model EventCashupPendingResolution {
+  id            String                  @id @default(uuid())
+  lineId        String
+  line          EventCashupLine         @relation(fields: [lineId], references: [id], onDelete: Cascade)
+  outcome       String // 'received' | 'written_off'
+  amount        Float
+  category      CashupWriteOffCategory?
+  notes         String?
+  performedById String?
+  performedBy   User?                   @relation("PendingResolutionBy", fields: [performedById], references: [id], onDelete: SetNull)
+  createdAt     DateTime                @default(now())
+
+  @@index([lineId])
+  @@index([performedById])
+}
+
 model EventCashupDenomination {
   id     String          @id @default(uuid())
   lineId String

backend/src/controllers/cashupController.js

@@ -1,7 +1,20 @@
 const prisma = require('../config/db');
 const { v4: uuidv4 } = require('uuid');
 const { safeErrorMessage } = require('../utils/errorUtils');
-const { ALL_METHODS, assertEventOpen, computeEventFinancials, computeAccountabilityByUser, computeEventCashActualFromPersonCounts, savePersonCashCount } = require('../utils/cashupUtils');
+const { ALL_METHODS, WRITE_OFF_CATEGORIES, PENDING_OUTCOMES, settleLine, applyPendingResolutions, assertEventOpen, computeEventFinancials, computeAccountabilityByUser, computeEventCashActualFromPersonCounts, savePersonCashCount } = require('../utils/cashupUtils');
+
+// What the cashup screen sends per method: where the money ended up and what was written off.
+function cleanDraftLine(l) {
+  return {
+    method: l.method,
+    bankAmount: l.bankAmount ?? null,
+    onHandAmount: l.onHandAmount ?? null,
+    pendingAmount: l.pendingAmount ?? null,
+    pendingReference: l.pendingReference || null,
+    writeOffs: (Array.isArray(l.writeOffs) ? l.writeOffs : []).map(w => ({ category: w.category, amount: w.amount ?? null, reason: w.reason || null })),
+    notes: l.notes || null
+  };
+}
 
 // @desc    Cashup preview for an event: live expected/actual numbers, costs, donations-to-profit, and history
 // @route   GET /api/cashups/event/:eventId
@@ -66,7 +79,7 @@ const saveEventCashupDraft = async (req, res) => {
 
     await prisma.event.update({
       where: { id: eventId },
-      data: { cashupDraft: { lines: Array.isArray(lines) ? lines : [], notes: notes || null, savedAt: new Date().toISOString() } }
+      data: { cashupDraft: { lines: (Array.isArray(lines) ? lines : []).filter(l => l && ALL_METHODS.includes(l.method)).map(cleanDraftLine), notes: notes || null, savedAt: new Date().toISOString() } }
     });
 
     res.json({ message: 'Draft saved' });
@@ -88,40 +101,32 @@ const closeEvent = async (req, res) => {
     const financials = await computeEventFinancials(eventId);
     const isFullCashup = Array.isArray(lines) && lines.length > 0;
 
+    // Each method says where its expected money ended up (see settleLine). Cash is never a
+    // single event-wide figure: when staff counted it, the count is the cash there is, sourced
+    // here from the per-person counts rather than from whatever the frontend sent.
     let cashupLines = [];
     if (isFullCashup) {
-      const nonCashLines = lines
-        .filter(l => l && ALL_METHODS.includes(l.method) && l.method !== 'cash')
-        .map(l => {
-          const expected = financials.expectedCashByMethod[l.method] || 0;
-          const actual = l.actualAmount !== undefined && l.actualAmount !== null && l.actualAmount !== '' ? parseFloat(l.actualAmount) : null;
-          return {
-            id: uuidv4(),
-            method: l.method,
-            expectedAmount: expected,
-            actualAmount: actual,
-            variance: actual !== null ? actual - expected : null,
-            notes: l.notes || null
-          };
-        });
-
-      // Cash is never entered as a single event-wide figure — it's always the live sum of every
-      // staff member's per-person count (see computeEventCashActualFromPersonCounts), so it's
-      // always sourced here rather than from whatever (if anything) the frontend sent for it.
-      const cashLineInput = lines.find(l => l && l.method === 'cash');
-      const { actual: cashActual, denominations: cashDenominations } = await computeEventCashActualFromPersonCounts(eventId);
-      const cashExpected = financials.expectedCashByMethod.cash || 0;
-      const cashLine = {
-        id: uuidv4(),
-        method: 'cash',
-        expectedAmount: cashExpected,
-        actualAmount: cashActual,
-        variance: cashActual !== null ? cashActual - cashExpected : null,
-        notes: cashLineInput?.notes || null,
-        denominations: cashDenominations.length > 0 ? { create: cashDenominations } : undefined
-      };
-
-      cashupLines = [cashLine, ...nonCashLines];
+      const { actual: cashCounted, denominations: cashDenominations } = await computeEventCashActualFromPersonCounts(eventId);
+      cashupLines = ALL_METHODS.map(method => {
+        const input = lines.find(l => l && l.method === method) || {};
+        const expected = financials.expectedCashByMethod[method] || 0;
+        const settled = settleLine({ method, expected, counted: method === 'cash' ? cashCounted : null, input });
+        return {
+          id: uuidv4(),
+          method,
+          expectedAmount: expected,
+          actualAmount: settled.actual,
+          variance: settled.variance,
+          notes: input.notes || null,
+          bankAmount: settled.bankAmount,
+          onHandAmount: settled.onHandAmount,
+          pendingAmount: settled.pendingAmount,
+          pendingReference: settled.pendingReference,
+          writeOffTotal: settled.writeOffTotal,
+          writeOffs: settled.writeOffs.length > 0 ? { create: settled.writeOffs } : undefined,
+          denominations: method === 'cash' && cashDenominations.length > 0 ? { create: cashDenominations } : undefined
+        };
+      });
     }
 
     const totalActualRevenue = isFullCashup
@@ -142,7 +147,7 @@ const closeEvent = async (req, res) => {
         performedById: req.user.id,
         lines: { create: cashupLines }
       },
-      include: { lines: { include: { denominations: true } }, performedBy: { select: { id: true, name: true, email: true } } }
+      include: { lines: { include: { denominations: true, writeOffs: true } }, performedBy: { select: { id: true, name: true, email: true } } }
     });
 
     await prisma.event.update({
@@ -185,9 +190,33 @@ const reopenEvent = async (req, res) => {
       include: { performedBy: { select: { id: true, name: true, email: true } } }
     });
 
+    // Start the next cashup from the last one, with pending money that has since been
+    // received or written off folded in, so nothing has to be typed in again.
+    const lastClose = await prisma.eventCashup.findFirst({
+      where: { eventId, action: { in: ['closed', 'quick_closed'] } },
+      orderBy: { createdAt: 'desc' },
+      include: { lines: { include: { writeOffs: true, pendingResolutions: true } } }
+    });
+    const cashupDraft = lastClose && lastClose.lines.length > 0 ? {
+      lines: lastClose.lines.map(l => {
+        const settled = applyPendingResolutions(l);
+        return cleanDraftLine({
+          method: l.method,
+          bankAmount: settled.bank,
+          onHandAmount: settled.onHand,
+          pendingAmount: settled.pendingOutstanding || null,
+          pendingReference: settled.pendingOutstanding ? settled.pendingReference : null,
+          writeOffs: settled.writeOffs,
+          notes: l.notes
+        });
+      }),
+      notes: null,
+      savedAt: new Date().toISOString()
+    } : undefined;
+
     await prisma.event.update({
       where: { id: eventId },
-      data: { cashupStatus: 'open', reopenedAt: new Date(), reopenedById: req.user.id }
+      data: { cashupStatus: 'open', reopenedAt: new Date(), reopenedById: req.user.id, ...(cashupDraft ? { cashupDraft } : {}) }
     });
 
     res.status(201).json(auditRow);
@@ -196,6 +225,66 @@ const reopenEvent = async (req, res) => {
   }
 };
 
+// @desc    Settle money that was pending when the event was closed (on the card report, or a
+//          POP we hadn't seen in the bank yet): it has now reached the bank, or it never will and
+//          is written off. Allowed while the event is closed — no reopen needed.
+// @route   POST /api/cashups/lines/:lineId/pending
+// @access  Private/Admin
+const resolvePending = async (req, res) => {
+  try {
+    const { lineId } = req.params;
+    const { outcome, amount, category, notes } = req.body;
+
+    if (!PENDING_OUTCOMES.includes(outcome)) {
+      res.status(400);
+      throw new Error('Say whether the money was received or written off');
+    }
+    const value = Math.round(Number(amount) * 100) / 100;
+    if (!Number.isFinite(value) || value <= 0) {
+      res.status(400);
+      throw new Error('Enter an amount more than R0');
+    }
+
+    const resolution = await prisma.$transaction(async (tx) => {
+      // Lock the line so two people settling at once can't settle more than is pending.
+      await tx.$executeRaw`SELECT 1 FROM "EventCashupLine" WHERE id = ${lineId} FOR UPDATE`;
+      const line = await tx.eventCashupLine.findUnique({
+        where: { id: lineId },
+        include: { cashup: { select: { id: true, eventId: true } }, pendingResolutions: true }
+      });
+      if (!line) {
+        res.status(404);
+        throw new Error('Cashup line not found');
+      }
+      const latest = await tx.eventCashup.findFirst({ where: { eventId: line.cashup.eventId }, orderBy: { createdAt: 'desc' }, select: { id: true } });
+      if (!latest || latest.id !== line.cashupId) {
+        res.status(400);
+        throw new Error('Only the current cashup of a closed event can be updated');
+      }
+      const { pendingOutstanding } = applyPendingResolutions(line);
+      if (value > pendingOutstanding + 0.005) {
+        res.status(400);
+        throw new Error(`Only R${pendingOutstanding.toFixed(2)} is still pending`);
+      }
+      return tx.eventCashupPendingResolution.create({
+        data: {
+          lineId,
+          outcome,
+          amount: value,
+          category: outcome === 'written_off' ? (WRITE_OFF_CATEGORIES.includes(category) ? category : 'other') : null,
+          notes: notes ? String(notes).trim().slice(0, 200) : null,
+          performedById: req.user.id
+        },
+        include: { performedBy: { select: { id: true, name: true } } }
+      });
+    });
+
+    res.status(201).json(resolution);
+  } catch (error) {
+    res.status(res.statusCode === 200 ? 400 : res.statusCode).json({ message: safeErrorMessage(error) });
+  }
+};
+
 // @desc    Flat audit log of every close/quick-close/reopen, optionally filtered
 // @route   GET /api/cashups/audit
 // @access  Private/Supervisor
@@ -234,5 +323,6 @@ module.exports = {
   saveEventCashupDraft,
   closeEvent,
   reopenEvent,
+  resolvePending,
   getCashupAudit
 };

backend/src/routes/cashupRoutes.js

@@ -1,6 +1,6 @@
 const express = require('express');
 const router = express.Router();
-const { getEventCashup, getCashByRecordedUser, savePersonCash, saveEventCashupDraft, closeEvent, reopenEvent, getCashupAudit } = require('../controllers/cashupController');
+const { getEventCashup, getCashByRecordedUser, savePersonCash, saveEventCashupDraft, closeEvent, reopenEvent, resolvePending, getCashupAudit } = require('../controllers/cashupController');
 const { protect, supervisor, admin } = require('../middleware/authMiddleware');
 
 router.get('/audit', protect, supervisor, getCashupAudit);
@@ -10,5 +10,6 @@ router.put('/event/:eventId/person-cash/:userId', protect, supervisor, savePerso
 router.put('/event/:eventId/draft', protect, admin, saveEventCashupDraft);
 router.post('/event/:eventId/close', protect, admin, closeEvent);
 router.post('/event/:eventId/reopen', protect, admin, reopenEvent);
+router.post('/lines/:lineId/pending', protect, admin, resolvePending);
 
 module.exports = router;

backend/src/utils/cashupUtils.js

@@ -6,10 +6,114 @@ const ALL_METHODS = ['cash', 'card', 'eft', 'other'];
 // Standard South African Rand note/coin denominations used for the cash count grid.
 const ZAR_DENOMINATIONS = [200, 100, 50, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1];
 
+const WRITE_OFF_CATEGORIES = ['card_fees', 'bank_charges', 'cash_shortfall', 'other'];
+const PENDING_OUTCOMES = ['received', 'written_off'];
+
 function emptyByMethod(fill = 0) {
   return { cash: fill, card: fill, eft: fill, other: fill };
 }
 
+const cents = (n) => Math.round(n * 100) / 100;
+const sum = (rows) => rows.reduce((s, r) => s + r.amount, 0);
+
+// A non-negative amount rounded to cents, or null when left blank.
+function amountOrNull(value, label) {
+  if (value === undefined || value === null || value === '') return null;
+  const n = Number(value);
+  if (!Number.isFinite(n) || n < 0) throw new Error(`${label} must be zero or more`);
+  return cents(n);
+}
+
+/**
+ * Where one method's expected takings ended up, as entered on the cashup screen. Pure.
+ *
+ * actual = in bank + on hand + pending (money held or on its way); write-offs explain money
+ * that's gone (card fees, bank charges, a cash shortfall). Whatever is left —
+ * expected − actual − write-offs — is unaccounted for. Cash has no pending; when staff
+ * counted it (per-person counts), the count is all the cash there is, so whatever wasn't
+ * deposited (or taken by the bank as a deposit fee) is on hand.
+ *
+ * @param {object} p
+ * @param {string} p.method - 'cash' | 'card' | 'eft' | 'other'
+ * @param {number} p.expected - expected amount for the method (payments − costs paid from it)
+ * @param {number|null} [p.counted] - cash counted by staff, or null when nobody counted
+ * @param {object} [p.input] - { bankAmount, onHandAmount, pendingAmount, pendingReference, writeOffs: [{ category, amount, reason }] }
+ */
+function settleLine({ method, expected, counted = null, input = {} }) {
+  const bankAmount = amountOrNull(input.bankAmount, 'In bank');
+  let onHandAmount = method === 'cash' ? amountOrNull(input.onHandAmount, 'Cash on hand') : null;
+  const pendingAmount = method === 'cash' ? null : amountOrNull(input.pendingAmount, 'Pending');
+
+  const writeOffs = (Array.isArray(input.writeOffs) ? input.writeOffs : [])
+    .filter(w => w && w.amount !== undefined && w.amount !== null && w.amount !== '')
+    .map(w => {
+      if (!WRITE_OFF_CATEGORIES.includes(w.category)) throw new Error('Choose what each write-off is for');
+      const amount = amountOrNull(w.amount, 'Write-off');
+      if (!(amount > 0)) throw new Error('A write-off must be more than R0');
+      return { category: w.category, amount, reason: String(w.reason || '').trim().slice(0, 200) || null };
+    });
+  const writeOffTotal = cents(sum(writeOffs));
+
+  if (method === 'cash' && counted !== null && counted !== undefined) {
+    // A deposit fee comes out of cash that was counted and banked, so the count is what
+    // reached the bank + the fee + what's still on hand.
+    const depositFees = cents(sum(writeOffs.filter(w => w.category === 'bank_charges')));
+    if ((bankAmount || 0) + depositFees > counted + 0.005) throw new Error('More cash was deposited than was counted');
+    onHandAmount = cents(counted - (bankAmount || 0) - depositFees);
+  }
+
+  const parts = [bankAmount, onHandAmount, pendingAmount];
+  const entered = parts.some(v => v !== null) || writeOffs.length > 0;
+  const actual = entered ? cents(parts.reduce((s, v) => s + (v || 0), 0)) : null;
+
+  return {
+    bankAmount,
+    onHandAmount,
+    pendingAmount,
+    pendingReference: pendingAmount ? (String(input.pendingReference || '').trim().slice(0, 200) || null) : null,
+    writeOffs,
+    writeOffTotal,
+    actual,
+    variance: actual === null ? null : cents(actual - expected),
+    unaccounted: entered ? cents(expected - actual - writeOffTotal) : null,
+  };
+}
+
+/**
+ * A closed cashup line with any later pending resolutions folded in. Pure.
+ * 'received' moves pending money into the bank (actual unchanged); 'written_off' turns it
+ * into a write-off (actual goes down). Lines from before settlement existed have only
+ * actualAmount, so their unaccounted is the old variance.
+ */
+function applyPendingResolutions(line) {
+  const resolutions = line.pendingResolutions || [];
+  const received = cents(sum(resolutions.filter(r => r.outcome === 'received')));
+  const lateWriteOffs = resolutions.filter(r => r.outcome === 'written_off');
+  const writtenOff = cents(sum(lateWriteOffs));
+
+  const pending = line.pendingAmount || 0;
+  const actual = line.actualAmount === null || line.actualAmount === undefined ? null : cents(line.actualAmount - writtenOff);
+  const writeOffTotal = cents((line.writeOffTotal || 0) + writtenOff);
+  const expected = line.expectedAmount || 0;
+
+  return {
+    bank: line.bankAmount == null && received === 0 ? null : cents((line.bankAmount || 0) + received),
+    onHand: line.onHandAmount ?? null,
+    pending: line.pendingAmount ?? null,
+    pendingReference: line.pendingReference || null,
+    pendingReceived: received,
+    pendingOutstanding: cents(Math.max(pending - received - writtenOff, 0)),
+    writeOffs: [
+      ...(line.writeOffs || []).map(w => ({ id: w.id, category: w.category, amount: w.amount, reason: w.reason, createdAt: w.createdAt, afterClose: false })),
+      ...lateWriteOffs.map(r => ({ id: r.id, category: r.category || 'other', amount: r.amount, reason: r.notes, createdAt: r.createdAt, afterClose: true })),
+    ],
+    writeOffTotal,
+    actual,
+    variance: actual === null ? null : cents(actual - expected),
+    unaccounted: actual === null && writeOffTotal === 0 ? null : cents(expected - (actual || 0) - writeOffTotal),
+  };
+}
+
 // 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'.
@@ -88,7 +192,13 @@ async function computeEventFinancials(eventId) {
     prisma.eventCashup.findMany({
       where: { eventId },
       include: {
-        lines: { include: { denominations: true } },
+        lines: {
+          include: {
+            denominations: true,
+            writeOffs: { orderBy: { createdAt: 'asc' } },
+            pendingResolutions: { include: { performedBy: { select: { id: true, name: true } } }, orderBy: { createdAt: 'asc' } }
+          }
+        },
         performedBy: { select: { id: true, name: true, email: true } }
       },
       orderBy: { createdAt: 'desc' }
@@ -169,29 +279,55 @@ async function computeEventFinancials(eventId) {
       const out = {};
       for (const m of ALL_METHODS) {
         const line = latestReconciled.lines.find(l => l.method === m);
+        const settled = line ? applyPendingResolutions(line) : null;
         out[m] = {
+          lineId: line ? line.id : null,
           expected: line ? line.expectedAmount : expectedCashByMethod[m],
-          actual: line && line.actualAmount != null ? line.actualAmount : null,
-          variance: line && line.variance != null ? line.variance : null,
+          actual: settled ? settled.actual : null,
+          variance: settled ? settled.variance : null,
           notes: line ? line.notes : null,
-          denominations: line ? line.denominations : []
+          denominations: line ? line.denominations : [],
+          bank: settled ? settled.bank : null,
+          onHand: settled ? settled.onHand : null,
+          pending: settled ? settled.pending : null,
+          pendingReference: settled ? settled.pendingReference : null,
+          pendingReceived: settled ? settled.pendingReceived : 0,
+          pendingOutstanding: settled ? settled.pendingOutstanding : 0,
+          pendingResolutions: line ? line.pendingResolutions : [],
+          writeOffs: settled ? settled.writeOffs : [],
+          writeOffTotal: settled ? settled.writeOffTotal : 0,
+          unaccounted: settled ? settled.unaccounted : null
         };
       }
       return out;
     })()
   } : null;
 
+  // Money written off at (or after) the cashup: card fees, bank charges, shortfalls.
+  const writeOffsByMethod = emptyByMethod();
+  const writeOffsByCategory = Object.fromEntries(WRITE_OFF_CATEGORIES.map(c => [c, 0]));
+  let pendingOutstandingTotal = 0;
+  for (const m of ALL_METHODS) {
+    const r = reconciled?.byMethod?.[m];
+    if (!r) continue;
+    writeOffsByMethod[m] = r.writeOffTotal;
+    pendingOutstandingTotal += r.pendingOutstanding;
+    for (const w of r.writeOffs) writeOffsByCategory[w.category] = cents((writeOffsByCategory[w.category] || 0) + w.amount);
+  }
+  const totalWriteOffs = cents(ALL_METHODS.reduce((s, m) => s + writeOffsByMethod[m], 0));
+
   // Reconciled value is truth; system (expected) value is the fallback when nothing was counted.
-  // Tagged costs are added back so a reconciled cash count still yields a correct *gross* income figure —
-  // costs get subtracted from profit exactly once, via totalCosts, never twice.
+  // Tagged costs and write-offs are added back so income stays a *gross* figure — costs and
+  // write-offs each come off profit exactly once, below, never twice. (Unaccounted money
+  // isn't added back: it lowers income, like any variance.)
   const effectiveGrossIncomeByMethod = emptyByMethod();
   for (const m of ALL_METHODS) {
     const actual = reconciled?.byMethod?.[m]?.actual;
-    const base = actual != null ? actual : expectedCashByMethod[m];
+    const base = actual != null ? actual + writeOffsByMethod[m] : expectedCashByMethod[m];
     effectiveGrossIncomeByMethod[m] = base + costsByMethod[m];
   }
   const effectiveTotalRevenue = ALL_METHODS.reduce((s, m) => s + effectiveGrossIncomeByMethod[m], 0);
-  const netProfit = effectiveTotalRevenue - totalCosts;
+  const netProfit = effectiveTotalRevenue - totalCosts - totalWriteOffs;
 
   // What was actually sold, by ticket type — for the Finance report's income-stream breakdown.
   // Revenue is tranche-aware: a line spanning two early-bird prices contributes each tranche
@@ -221,6 +357,10 @@ async function computeEventFinancials(eventId) {
     reconciled,
     effectiveGrossIncomeByMethod,
     effectiveTotalRevenue,
+    writeOffsByMethod,
+    writeOffsByCategory,
+    totalWriteOffs,
+    pendingOutstandingTotal: cents(pendingOutstandingTotal),
     netProfit,
     unallocatedDonations,
     unallocatedDonationsTotal,
@@ -362,6 +502,10 @@ module.exports = {
   METHOD_BUCKETS,
   ALL_METHODS,
   ZAR_DENOMINATIONS,
+  WRITE_OFF_CATEGORIES,
+  PENDING_OUTCOMES,
+  settleLine,
+  applyPendingResolutions,
   bucketForMethod,
   isDonationLeg,
   assertEventOpen,

backend/tests/cashupSettlement.test.js

@@ -0,0 +1,154 @@
+const { settleLine, applyPendingResolutions } = require('../src/utils/cashupUtils');
+
+describe('settleLine', () => {
+  test('card settled net of fees, with the fees written off, leaves nothing unaccounted', () => {
+    const s = settleLine({
+      method: 'card',
+      expected: 12450,
+      input: { bankAmount: '12080.40', writeOffs: [{ category: 'card_fees', amount: '369.60', reason: 'Yoco 2.95%' }] },
+    });
+    expect(s.actual).toBe(12080.4);
+    expect(s.writeOffTotal).toBe(369.6);
+    expect(s.unaccounted).toBe(0);
+    expect(s.variance).toBe(-369.6);
+    expect(s.writeOffs).toEqual([{ category: 'card_fees', amount: 369.6, reason: 'Yoco 2.95%' }]);
+  });
+
+  test('EFT with a POP not yet in the bank counts the pending money as accounted for', () => {
+    const s = settleLine({ method: 'eft', expected: 8200, input: { bankAmount: 7200, pendingAmount: 1000, pendingReference: 'POP #417' } });
+    expect(s.actual).toBe(8200);
+    expect(s.pendingAmount).toBe(1000);
+    expect(s.pendingReference).toBe('POP #417');
+    expect(s.unaccounted).toBe(0);
+  });
+
+  test('a pending reference is dropped when nothing is pending', () => {
+    const s = settleLine({ method: 'eft', expected: 100, input: { bankAmount: 100, pendingReference: 'POP' } });
+    expect(s.pendingReference).toBeNull();
+  });
+
+  test('counted cash that was not deposited is on hand, and a shortfall shows as unaccounted', () => {
+    const s = settleLine({ method: 'cash', expected: 3000, counted: 2950, input: { bankAmount: 2000, onHandAmount: 999 } });
+    expect(s.onHandAmount).toBe(950); // derived from the count, not the typed 999
+    expect(s.actual).toBe(2950);
+    expect(s.unaccounted).toBe(50);
+  });
+
+  test('a cash shortfall written off leaves nothing unaccounted', () => {
+    const s = settleLine({ method: 'cash', expected: 3000, counted: 2950, input: { bankAmount: 2950, writeOffs: [{ category: 'cash_shortfall', amount: 50 }] } });
+    expect(s.onHandAmount).toBe(0);
+    expect(s.unaccounted).toBe(0);
+  });
+
+  test('a deposit fee comes out of the counted cash, not on top of it', () => {
+    // Counted R1000; the bank credited R941.50 after a R58.50 deposit fee; nothing left on hand.
+    const s = settleLine({ method: 'cash', expected: 1000, counted: 1000, input: { bankAmount: 941.5, writeOffs: [{ category: 'bank_charges', amount: 58.5 }] } });
+    expect(s.onHandAmount).toBe(0);
+    expect(s.actual).toBe(941.5);
+    expect(s.unaccounted).toBe(0);
+  });
+
+  test('a cash shortfall write-off does not change what is on hand', () => {
+    const s = settleLine({ method: 'cash', expected: 1000, counted: 980, input: { bankAmount: 480, writeOffs: [{ category: 'cash_shortfall', amount: 20 }] } });
+    expect(s.onHandAmount).toBe(500);
+    expect(s.unaccounted).toBe(0);
+  });
+
+  test('banking more than was counted, counting the deposit fee, is rejected', () => {
+    expect(() => settleLine({ method: 'cash', expected: 1000, counted: 1000, input: { bankAmount: 1000, writeOffs: [{ category: 'bank_charges', amount: 58.5 }] } })).toThrow('More cash was deposited');
+  });
+
+  test('cash never has a pending amount', () => {
+    const s = settleLine({ method: 'cash', expected: 500, input: { onHandAmount: 500, pendingAmount: 200 } });
+    expect(s.pendingAmount).toBeNull();
+    expect(s.actual).toBe(500);
+  });
+
+  test('without a count, cash on hand can be typed in', () => {
+    const s = settleLine({ method: 'cash', expected: 500, counted: null, input: { bankAmount: 300, onHandAmount: 200 } });
+    expect(s.actual).toBe(500);
+    expect(s.unaccounted).toBe(0);
+  });
+
+  test('depositing more cash than was counted is rejected', () => {
+    expect(() => settleLine({ method: 'cash', expected: 500, counted: 400, input: { bankAmount: 450 } })).toThrow('More cash was deposited');
+  });
+
+  test('negative or non-numeric amounts are rejected', () => {
+    expect(() => settleLine({ method: 'card', expected: 100, input: { bankAmount: -5 } })).toThrow('In bank');
+    expect(() => settleLine({ method: 'card', expected: 100, input: { pendingAmount: 'abc' } })).toThrow('Pending');
+  });
+
+  test('a write-off needs a known category and an amount over zero', () => {
+    expect(() => settleLine({ method: 'card', expected: 100, input: { writeOffs: [{ category: 'lunch', amount: 5 }] } })).toThrow('what each write-off is for');
+    expect(() => settleLine({ method: 'card', expected: 100, input: { writeOffs: [{ category: 'other', amount: 0 }] } })).toThrow('more than R0');
+  });
+
+  test('blank write-off rows are ignored', () => {
+    const s = settleLine({ method: 'card', expected: 100, input: { bankAmount: 100, writeOffs: [{ category: 'other', amount: '' }] } });
+    expect(s.writeOffs).toEqual([]);
+  });
+
+  test('nothing entered leaves the method unreconciled', () => {
+    const s = settleLine({ method: 'eft', expected: 100, input: {} });
+    expect(s.actual).toBeNull();
+    expect(s.variance).toBeNull();
+    expect(s.unaccounted).toBeNull();
+  });
+
+  test('amounts are rounded to cents', () => {
+    const s = settleLine({ method: 'card', expected: 0.3, input: { bankAmount: 0.1, pendingAmount: 0.2 } });
+    expect(s.actual).toBe(0.3);
+    expect(s.unaccounted).toBe(0);
+  });
+});
+
+describe('applyPendingResolutions', () => {
+  const line = {
+    expectedAmount: 8200,
+    actualAmount: 8200,
+    bankAmount: 7200,
+    onHandAmount: null,
+    pendingAmount: 1000,
+    pendingReference: 'POP #417',
+    writeOffTotal: 0,
+    writeOffs: [],
+  };
+
+  test('with nothing settled yet, all the pending money is outstanding', () => {
+    const s = applyPendingResolutions({ ...line, pendingResolutions: [] });
+    expect(s.pendingOutstanding).toBe(1000);
+    expect(s.bank).toBe(7200);
+    expect(s.unaccounted).toBe(0);
+  });
+
+  test('money received later moves into the bank without changing actual', () => {
+    const s = applyPendingResolutions({ ...line, pendingResolutions: [{ id: 'r1', outcome: 'received', amount: 600 }] });
+    expect(s.bank).toBe(7800);
+    expect(s.actual).toBe(8200);
+    expect(s.pendingOutstanding).toBe(400);
+    expect(s.writeOffTotal).toBe(0);
+  });
+
+  test('money written off later lowers actual and becomes a write-off', () => {
+    const s = applyPendingResolutions({
+      ...line,
+      pendingResolutions: [
+        { id: 'r1', outcome: 'received', amount: 600 },
+        { id: 'r2', outcome: 'written_off', amount: 400, category: 'other', notes: 'Never paid' },
+      ],
+    });
+    expect(s.actual).toBe(7800);
+    expect(s.writeOffTotal).toBe(400);
+    expect(s.pendingOutstanding).toBe(0);
+    expect(s.unaccounted).toBe(0);
+    expect(s.writeOffs).toEqual([expect.objectContaining({ id: 'r2', category: 'other', amount: 400, reason: 'Never paid', afterClose: true })]);
+  });
+
+  test('a line from before settlement existed reports its old variance as unaccounted', () => {
+    const s = applyPendingResolutions({ expectedAmount: 1000, actualAmount: 980, variance: -20 });
+    expect(s.bank).toBeNull();
+    expect(s.pendingOutstanding).toBe(0);
+    expect(s.unaccounted).toBe(20);
+  });
+});

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hope-events-frontend",
-  "version": "1.26.0",
+  "version": "1.27.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hope-events-frontend",
-      "version": "1.26.0",
+      "version": "1.27.1",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@hookform/resolvers": "^5.2.1",

frontend/package.json

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

frontend/src/app/dashboard/admin/audit-log/page.tsx

@@ -8,6 +8,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { History } from "lucide-react";
 import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
 import { errorMessage } from "@/lib/utils";
+import { BackLink } from "@/components/shared/BackLink";
 
 const ACTIONS = [
   "refund_created",
@@ -192,7 +193,7 @@ export default function AdminAuditLogPage() {
           <History className="w-5 h-5 text-brand-600" />
         </div>
         <div>
-          <button className="text-xs text-brand-600 hover:underline" onClick={() => router.push("/dashboard/admin")}>← Back to dashboard</button>
+          <BackLink href="/dashboard/admin" />
           <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Admin Audit Log</h1>
           <p className="text-sm text-gray-500">{total} action{total !== 1 ? "s" : ""} recorded</p>
         </div>

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

@@ -1,13 +1,14 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { useAuth } from "@/hooks/useAuth";
 import { apiFetch } from "@/lib/api";
 import { useDismissingState } from "@/hooks/useDismissingState";
-import type { EventCost, EventCostType, EventFinancials, CashupMethod, Event } from "@/types";
+import type { EventCost, EventCostType, EventFinancials, CashupMethod, CashupWriteOffCategory, ReconciledByMethod, Event } from "@/types";
 import { Wallet, DollarSign, ClipboardCheck, FileBarChart } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
+import { BackLink } from "@/components/shared/BackLink";
 
 const METHOD_LABELS: Record<CashupMethod, string> = { cash: "Cash", card: "Card", eft: "EFT", other: "Other" };
 const METHODS: CashupMethod[] = ["cash", "card", "eft", "other"];
@@ -20,12 +21,9 @@ function denomLabel(v: number): string {
   return v >= 1 ? `R${v}` : `${Math.round(v * 100)}c`;
 }
 
-type LineInput = { actualAmount: string; notes: string };
-
 export default function EventCashupPage() {
   const params = useParams<{ id: string }>();
   const eventId = params.id;
-  const router = useRouter();
   const { token } = useAuth();
 
   const [tab, setTab] = useState<"costs" | "reconciliation" | "report">("costs");
@@ -65,7 +63,7 @@ export default function EventCashupPage() {
             <Wallet className="w-5 h-5 text-brand-600" />
           </div>
           <div>
-            <button className="text-xs text-brand-600 hover:underline" onClick={() => router.push("/dashboard/admin/cashup")}>← Back to cashup</button>
+            <BackLink href="/dashboard/admin/cashup" label="Back to cashup" />
             <h1 className="text-xl font-semibold text-gray-900 mt-0.5">{data?.event?.title || "Event"} — Cashup</h1>
           </div>
         </div>
@@ -537,34 +535,73 @@ function ReportTab({ eventId, token, data, isClosed }: {
       </div>
 
       <div className="bg-white border rounded-lg p-4 space-y-2 overflow-auto">
-        <div className="text-sm font-medium">Revenue by method</div>
-        <table className="w-full text-sm min-w-[560px]">
+        <div className="text-sm font-medium">Where the money ended up</div>
+        <table className="w-full text-sm min-w-[720px]">
           <thead>
             <tr className="text-left text-gray-500 border-b">
               <th className="py-1">Method</th>
               <th className="py-1 text-right">Income</th>
-              <th className="py-1 text-right">Expected cash</th>
-              <th className="py-1 text-right">Actual</th>
-              <th className="py-1 text-right">Variance</th>
+              <th className="py-1 text-right">Expected</th>
+              <th className="py-1 text-right">In bank</th>
+              <th className="py-1 text-right">On hand</th>
+              <th className="py-1 text-right">Pending</th>
+              <th className="py-1 text-right">Written off</th>
+              <th className="py-1 text-right">Unaccounted</th>
             </tr>
           </thead>
           <tbody>
             {METHODS.map(m => {
               const r = reconciled?.byMethod?.[m];
+              const cell = (v: number | null | undefined) => (v != null && Math.abs(v) >= 0.005 ? money(v) : "—");
               return (
                 <tr key={m} className="border-b last:border-0">
                   <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.expectedCashByMethod[m])}</td>
-                  <td className="py-1.5 text-right">{r?.actual != null ? money(r.actual) : "—"}</td>
-                  <td className="py-1.5 text-right">{r?.variance != null ? money(r.variance) : "—"}</td>
+                  <td className="py-1.5 text-right">{cell(r?.bank)}</td>
+                  <td className="py-1.5 text-right">{cell(r?.onHand)}</td>
+                  <td className="py-1.5 text-right">{cell(r?.pendingOutstanding)}</td>
+                  <td className="py-1.5 text-right">{cell(r?.writeOffTotal)}</td>
+                  <td className={"py-1.5 text-right " + (r?.unaccounted != null && Math.abs(r.unaccounted) >= 0.005 ? "text-rose-700 font-medium" : "")}>
+                    {r?.unaccounted != null ? (Math.abs(r.unaccounted) >= 0.005 ? money(r.unaccounted) : "R0.00") : "—"}
+                  </td>
                 </tr>
               );
             })}
           </tbody>
         </table>
+        {!reconciled && <div className="text-xs text-gray-400">Not settled yet. Columns fill in once the event is closed with a cashup.</div>}
       </div>
 
+      {(() => {
+        const writeOffs = METHODS.flatMap(m => (reconciled?.byMethod?.[m]?.writeOffs || []).map(w => ({ ...w, method: m })));
+        return writeOffs.length > 0 ? (
+          <div className="bg-white border rounded-lg p-4 space-y-2 overflow-auto">
+            <div className="text-sm font-medium">Write-offs</div>
+            <table className="w-full text-sm min-w-[480px]">
+              <thead>
+                <tr className="text-left text-gray-500 border-b">
+                  <th className="py-1">Method</th>
+                  <th className="py-1">Type</th>
+                  <th className="py-1">Reason</th>
+                  <th className="py-1 text-right">Amount</th>
+                </tr>
+              </thead>
+              <tbody>
+                {writeOffs.map((w, i) => (
+                  <tr key={w.id || i} className="border-b last:border-0">
+                    <td className="py-1.5">{METHOD_LABELS[w.method]}</td>
+                    <td className="py-1.5">{WRITE_OFF_LABELS[w.category]}{w.afterClose ? " (after closing)" : ""}</td>
+                    <td className="py-1.5 text-gray-600">{w.reason || "—"}</td>
+                    <td className="py-1.5 text-right">{money(w.amount)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : null;
+      })()}
+
       {reconciled?.byMethod?.cash?.denominations?.length ? (
         <div className="bg-white border rounded-lg p-4 space-y-2">
           <div className="text-sm font-medium">Cash denomination count</div>
@@ -604,19 +641,273 @@ function ReportTab({ eventId, token, data, isClosed }: {
         </div>
       )}
 
-      <div className="bg-white border rounded-lg p-4 grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
+      <ProfitSummary data={data} />
+    </div>
+  );
+}
+
+// ─── Settlement ────────────────────────────────────────────────────────────
+// For each method, where did the expected money end up: in the bank, still on hand (cash),
+// or pending (on the card report / a POP we haven't seen in the bank yet) — and what was
+// written off (card fees, bank charges, a shortfall). Mirrors settleLine in
+// backend/src/utils/cashupUtils.js, which has the final say when the event is closed.
+
+type WriteOffInput = { category: CashupWriteOffCategory; amount: string; reason: string };
+type SettlementInput = { bankAmount: string; onHandAmount: string; pendingAmount: string; pendingReference: string; writeOffs: WriteOffInput[]; notes: string };
+
+const WRITE_OFF_LABELS: Record<CashupWriteOffCategory, string> = {
+  card_fees: "Card / online fees",
+  bank_charges: "Bank charges",
+  cash_shortfall: "Cash shortfall",
+  other: "Other",
+};
+const WRITE_OFF_CATEGORIES = Object.keys(WRITE_OFF_LABELS) as CashupWriteOffCategory[];
+const DEFAULT_WRITE_OFF: Record<CashupMethod, CashupWriteOffCategory> = { cash: "cash_shortfall", card: "card_fees", eft: "bank_charges", other: "other" };
+const BANK_HELP: Record<CashupMethod, string> = {
+  cash: "What reached the bank, after any deposit fee",
+  card: "Settled into the bank account",
+  eft: "Showing on the bank statement",
+  other: "Received in the bank",
+};
+const PENDING_HELP: Record<CashupMethod, string> = {
+  cash: "",
+  card: "On the card machine / Yoco report, not in the bank yet",
+  eft: "Proof of payment received, not in the bank yet",
+  other: "Expected but not in the bank yet",
+};
+const PENDING_REFERENCE_PLACEHOLDER: Record<CashupMethod, string> = { cash: "", card: "Report or batch reference", eft: "POP reference", other: "Reference" };
+
+const round2 = (n: number) => Math.round(n * 100) / 100;
+const emptySettlement = (): SettlementInput => ({ bankAmount: "", onHandAmount: "", pendingAmount: "", pendingReference: "", writeOffs: [], notes: "" });
+const amountText = (v: string | number | null | undefined) => (v === null || v === undefined ? "" : String(v));
+
+function settle(method: CashupMethod, expected: number, counted: number | null, input: SettlementInput) {
+  const num = (v: string) => (v.trim() === "" || isNaN(Number(v)) ? null : Number(v));
+  const bank = num(input.bankAmount);
+  const writeOffTotal = round2(input.writeOffs.reduce((s, w) => s + (num(w.amount) || 0), 0));
+  // A deposit fee comes out of the counted cash that was banked.
+  const depositFees = round2(input.writeOffs.filter(w => w.category === "bank_charges").reduce((s, w) => s + (num(w.amount) || 0), 0));
+  const onHand = method === "cash" ? (counted !== null ? round2(counted - (bank || 0) - depositFees) : num(input.onHandAmount)) : null;
+  const pending = method === "cash" ? null : num(input.pendingAmount);
+  const entered = [bank, onHand, pending].some(v => v !== null) || input.writeOffs.some(w => num(w.amount) !== null);
+  const actual = entered ? round2((bank || 0) + (onHand || 0) + (pending || 0)) : null;
+  return { bank, onHand, pending, writeOffTotal, actual, unaccounted: actual === null ? null : round2(expected - actual - writeOffTotal) };
+}
+
+function UnaccountedBadge({ unaccounted }: { unaccounted: number | null }) {
+  if (unaccounted === null) return <span className="text-xs text-gray-400">Not settled yet</span>;
+  if (Math.abs(unaccounted) < 0.005) return <span className="inline-block px-2 py-0.5 rounded text-xs font-medium bg-emerald-50 text-emerald-700">All accounted for</span>;
+  return (
+    <span className="inline-block px-2 py-0.5 rounded text-xs font-medium bg-rose-50 text-rose-700">
+      {unaccounted > 0 ? `${money(unaccounted)} unaccounted` : `${money(-unaccounted)} more than expected`}
+    </span>
+  );
+}
+
+function SettlementCard({ method, data, counted, input, onChange }: {
+  method: CashupMethod; data: EventFinancials; counted: number | null; input: SettlementInput; onChange: (next: SettlementInput) => void;
+}) {
+  const expected = data.expectedCashByMethod[method];
+  const s = settle(method, expected, counted, input);
+  const set = (field: keyof SettlementInput, value: string) => onChange({ ...input, [field]: value });
+  const setWriteOff = (i: number, patch: Partial<WriteOffInput>) =>
+    onChange({ ...input, writeOffs: input.writeOffs.map((w, j) => (j === i ? { ...w, ...patch } : w)) });
+  const addWriteOff = () => onChange({ ...input, writeOffs: [...input.writeOffs, { category: DEFAULT_WRITE_OFF[method], amount: "", reason: "" }] });
+  const removeWriteOff = (i: number) => onChange({ ...input, writeOffs: input.writeOffs.filter((_, j) => j !== i) });
+
+  return (
+    <div className="border rounded-lg p-3 space-y-3">
+      <div className="flex items-start justify-between gap-3 flex-wrap">
         <div>
-          <div className="text-gray-500 text-xs">Donations counted as profit</div>
-          <div className="font-semibold">{money(data.unallocatedDonationsTotal)}</div>
+          <div className="text-sm font-medium">{METHOD_LABELS[method]}</div>
+          <div className="text-xs text-gray-500">
+            Expected {money(expected)}
+            {data.costsByMethod[method] > 0 && <> ({money(data.paymentsByMethod[method])} taken, less {money(data.costsByMethod[method])} paid out)</>}
+          </div>
         </div>
+        <UnaccountedBadge unaccounted={s.unaccounted} />
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
         <div>
-          <div className="text-gray-500 text-xs">Total costs</div>
-          <div className="font-semibold">{money(data.totalCosts)}</div>
+          <label className="block text-xs text-gray-600 mb-1">In bank</label>
+          <input type="number" step="0.01" min={0} className="w-full border rounded px-2 py-1.5 text-sm" value={input.bankAmount} onChange={e => set("bankAmount", e.target.value)} />
+          <p className="text-[10px] text-gray-400 mt-0.5">{BANK_HELP[method]}</p>
         </div>
+        {method === "cash" ? (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Cash on hand</label>
+            {counted !== null ? (
+              <div className="text-sm py-1.5">{money(s.onHand)}</div>
+            ) : (
+              <input type="number" step="0.01" min={0} className="w-full border rounded px-2 py-1.5 text-sm" value={input.onHandAmount} onChange={e => set("onHandAmount", e.target.value)} />
+            )}
+            <p className="text-[10px] text-gray-400 mt-0.5">
+              {counted !== null ? `Counted ${money(counted)}, less what was deposited and any deposit fee` : "Not deposited yet. Enter staff cash counts below to work this out."}
+            </p>
+          </div>
+        ) : (
+          <div>
+            <label className="block text-xs text-gray-600 mb-1">Pending</label>
+            <div className="flex gap-2">
+              <input type="number" step="0.01" min={0} className="w-28 border rounded px-2 py-1.5 text-sm" value={input.pendingAmount} onChange={e => set("pendingAmount", e.target.value)} />
+              <input className="flex-1 min-w-0 border rounded px-2 py-1.5 text-sm" placeholder={PENDING_REFERENCE_PLACEHOLDER[method]} value={input.pendingReference} onChange={e => set("pendingReference", e.target.value)} />
+            </div>
+            <p className="text-[10px] text-gray-400 mt-0.5">{PENDING_HELP[method]}</p>
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <div className="text-xs text-gray-600">Write-offs</div>
+        {input.writeOffs.map((w, i) => (
+          <div key={i} className="flex flex-wrap gap-2 items-center">
+            <select className="border rounded px-2 py-1.5 text-sm" value={w.category} onChange={e => setWriteOff(i, { category: e.target.value as CashupWriteOffCategory })}>
+              {WRITE_OFF_CATEGORIES.map(c => <option key={c} value={c}>{WRITE_OFF_LABELS[c]}</option>)}
+            </select>
+            <input type="number" step="0.01" min={0} className="w-28 border rounded px-2 py-1.5 text-sm" placeholder="Amount" value={w.amount} onChange={e => setWriteOff(i, { amount: e.target.value })} />
+            <input className="flex-1 min-w-[140px] border rounded px-2 py-1.5 text-sm" placeholder="Reason (optional)" value={w.reason} onChange={e => setWriteOff(i, { reason: e.target.value })} />
+            <button className="text-xs text-red-600 hover:underline" onClick={() => removeWriteOff(i)}>Remove</button>
+          </div>
+        ))}
+        <button className="text-xs text-brand-600 hover:underline" onClick={addWriteOff}>+ Add write-off</button>
+      </div>
+
+      <div>
+        <label className="block text-xs text-gray-600 mb-1">Notes (optional)</label>
+        <input className="w-full border rounded px-2 py-1.5 text-sm" value={input.notes} onChange={e => set("notes", e.target.value)} />
+      </div>
+    </div>
+  );
+}
+
+// A closed method's settlement, read-only, with a way to settle pending money that has
+// since arrived (or never will) without reopening the event.
+function SettledCard({ method, r, token, onChanged }: { method: CashupMethod; r: ReconciledByMethod; token: string; onChanged: () => void }) {
+  return (
+    <div className="border rounded-lg p-3 space-y-2">
+      <div className="flex items-start justify-between gap-3 flex-wrap">
         <div>
-          <div className="text-gray-500 text-xs">Net profit</div>
-          <div className="font-semibold">{money(data.netProfit)}</div>
+          <div className="text-sm font-medium">{METHOD_LABELS[method]}</div>
+          <div className="text-xs text-gray-500">Expected {money(r.expected)}</div>
         </div>
+        <UnaccountedBadge unaccounted={r.unaccounted} />
+      </div>
+      <dl className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-sm">
+        <div><dt className="text-xs text-gray-500">In bank</dt><dd>{r.bank !== null ? money(r.bank) : "—"}</dd></div>
+        {method === "cash"
+          ? <div><dt className="text-xs text-gray-500">On hand</dt><dd>{r.onHand !== null ? money(r.onHand) : "—"}</dd></div>
+          : <div><dt className="text-xs text-gray-500">Pending</dt><dd>{r.pendingOutstanding > 0 ? money(r.pendingOutstanding) : "—"}</dd></div>}
+        <div><dt className="text-xs text-gray-500">Written off</dt><dd>{r.writeOffTotal > 0 ? money(r.writeOffTotal) : "—"}</dd></div>
+        <div><dt className="text-xs text-gray-500">Actual</dt><dd>{r.actual !== null ? money(r.actual) : "—"}</dd></div>
+      </dl>
+      {r.writeOffs.length > 0 && (
+        <ul className="text-xs text-gray-600 space-y-0.5">
+          {r.writeOffs.map((w, i) => (
+            <li key={w.id || i}>
+              {WRITE_OFF_LABELS[w.category]} {money(w.amount)}{w.reason ? ` — ${w.reason}` : ""}{w.afterClose ? " (after closing)" : ""}
+            </li>
+          ))}
+        </ul>
+      )}
+      {(r.pending || 0) > 0 && (
+        <PendingSettler method={method} r={r} token={token} onChanged={onChanged} />
+      )}
+      {r.notes && <div className="text-xs text-gray-500">Notes: {r.notes}</div>}
+    </div>
+  );
+}
+
+function PendingSettler({ method, r, token, onChanged }: { method: CashupMethod; r: ReconciledByMethod; token: string; onChanged: () => void }) {
+  const [mode, setMode] = useState<"received" | "written_off" | null>(null);
+  const [amount, setAmount] = useState("");
+  const [category, setCategory] = useState<CashupWriteOffCategory>(DEFAULT_WRITE_OFF[method]);
+  const [notes, setNotes] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  const start = (m: "received" | "written_off") => { setMode(m); setAmount(String(r.pendingOutstanding)); setNotes(""); setErr(null); };
+
+  const save = async () => {
+    if (!r.lineId || !mode) return;
+    setSaving(true); setErr(null);
+    try {
+      await apiFetch(`/api/cashups/lines/${r.lineId}/pending`, { method: "POST", authToken: token, body: { outcome: mode, amount: parseFloat(amount), category, notes: notes || null } });
+      setMode(null);
+      onChanged();
+    } catch (e) {
+      setErr(errorMessage(e) || "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="bg-amber-50 border border-amber-100 rounded p-2 space-y-2 text-xs">
+      <div className="flex items-center justify-between gap-2 flex-wrap">
+        <span>
+          Pending {money(r.pending)}{r.pendingReference ? ` (${r.pendingReference})` : ""}
+          {r.pendingOutstanding > 0 ? <> — <strong>{money(r.pendingOutstanding)} still outstanding</strong></> : " — all settled"}
+        </span>
+        {r.pendingOutstanding > 0 && mode === null && (
+          <span className="flex gap-3">
+            <button className="text-brand-600 hover:underline" onClick={() => start("received")}>Mark received</button>
+            <button className="text-red-600 hover:underline" onClick={() => start("written_off")}>Write off</button>
+          </span>
+        )}
+      </div>
+      {r.pendingResolutions.length > 0 && (
+        <ul className="text-gray-600 space-y-0.5">
+          {r.pendingResolutions.map(p => (
+            <li key={p.id}>
+              {p.outcome === "received" ? "Received in bank" : `Written off (${WRITE_OFF_LABELS[p.category || "other"]})`} {money(p.amount)}
+              {" — "}{p.performedBy?.name || "Unknown"}, {new Date(p.createdAt).toLocaleDateString()}{p.notes ? ` — ${p.notes}` : ""}
+            </li>
+          ))}
+        </ul>
+      )}
+      {mode !== null && (
+        <div className="flex flex-wrap gap-2 items-center">
+          <input type="number" step="0.01" min={0} className="w-28 border rounded px-2 py-1 text-sm bg-white" value={amount} onChange={e => setAmount(e.target.value)} />
+          {mode === "written_off" && (
+            <select className="border rounded px-2 py-1 text-sm bg-white" value={category} onChange={e => setCategory(e.target.value as CashupWriteOffCategory)}>
+              {WRITE_OFF_CATEGORIES.map(c => <option key={c} value={c}>{WRITE_OFF_LABELS[c]}</option>)}
+            </select>
+          )}
+          <input className="flex-1 min-w-[140px] border rounded px-2 py-1 text-sm bg-white" placeholder={mode === "received" ? "Bank reference (optional)" : "Reason (optional)"} value={notes} onChange={e => setNotes(e.target.value)} />
+          <button className="px-2 py-1 rounded border bg-white" onClick={() => setMode(null)} disabled={saving}>Cancel</button>
+          <button className="px-2 py-1 rounded bg-brand-600 text-white hover:bg-brand-700" onClick={save} disabled={saving}>
+            {saving ? "Saving…" : mode === "received" ? "Mark received" : "Write off"}
+          </button>
+          {err && <span className="text-red-600 w-full">{err}</span>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ProfitSummary({ data }: { data: EventFinancials }) {
+  return (
+    <div className="bg-white border rounded-lg p-4 grid grid-cols-2 sm:grid-cols-5 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>
+      </div>
+      <div>
+        <div className="text-gray-500 text-xs">Total costs</div>
+        <div className="font-semibold">{money(data.totalCosts)}</div>
+      </div>
+      <div>
+        <div className="text-gray-500 text-xs">Bank &amp; card charges</div>
+        <div className="font-semibold">{money(data.totalWriteOffs)}</div>
+      </div>
+      <div>
+        <div className="text-gray-500 text-xs">Pending (outstanding)</div>
+        <div className="font-semibold">{money(data.pendingOutstandingTotal)}</div>
+      </div>
+      <div>
+        <div className="text-gray-500 text-xs">Net profit</div>
+        <div className="font-semibold">{money(data.netProfit)}</div>
       </div>
     </div>
   );
@@ -629,32 +920,53 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
   const isClosed = data.event.cashupStatus === "closed";
   const draftLines = data.event.cashupDraft?.lines;
 
-  const initialLines: Record<CashupMethod, LineInput> = useMemo(() => {
-    const base: Record<CashupMethod, LineInput> = { cash: { actualAmount: "", notes: "" }, card: { actualAmount: "", notes: "" }, eft: { actualAmount: "", notes: "" }, other: { actualAmount: "", notes: "" } };
+  const initialLines: Record<CashupMethod, SettlementInput> = useMemo(() => {
+    const base: Record<CashupMethod, SettlementInput> = { cash: emptySettlement(), card: emptySettlement(), eft: emptySettlement(), other: emptySettlement() };
     for (const l of draftLines || []) {
-      if (l.method in base) base[l.method as CashupMethod] = { actualAmount: l.actualAmount != null ? String(l.actualAmount) : "", notes: l.notes || "" };
+      if (!(l.method in base)) continue;
+      base[l.method as CashupMethod] = {
+        bankAmount: amountText(l.bankAmount),
+        onHandAmount: amountText(l.onHandAmount),
+        pendingAmount: amountText(l.pendingAmount),
+        pendingReference: l.pendingReference || "",
+        writeOffs: (l.writeOffs || []).map(w => ({ category: w.category, amount: amountText(w.amount), reason: w.reason || "" })),
+        notes: l.notes || "",
+      };
     }
     return base;
   }, [draftLines]);
 
-  const [lines, setLines] = useState<Record<CashupMethod, LineInput>>(initialLines);
+  const [lines, setLines] = useState<Record<CashupMethod, SettlementInput>>(initialLines);
   const [closeNotes, setCloseNotes] = useState("");
   const [reopenNotes, setReopenNotes] = useState("");
-  // Cash no longer has its own manual entry — it's the live sum of every staff member's
-  // per-person count, reported up from CashByUserSection below.
+  // Counted cash is the live sum of every staff member's per-person count, reported up from
+  // CashByUserSection below; when there is one, cash on hand is whatever wasn't deposited.
   const [cashSummary, setCashSummary] = useState<{ actualTotal: number | null; denominations: PersonDenom[] }>({ actualTotal: null, denominations: [] });
 
   useEffect(() => { setLines(initialLines); }, [initialLines]);
 
-  const setLine = (method: CashupMethod, field: keyof LineInput, value: string) => {
-    setLines(prev => ({ ...prev, [method]: { ...prev[method], [field]: value } }));
-  };
+  const setLine = (method: CashupMethod, next: SettlementInput) => setLines(prev => ({ ...prev, [method]: next }));
 
-  // Cash is included with notes only — its actual/denominations are always sourced server-side
-  // from per-person counts (see cashupController.closeEvent), never from this payload.
-  const buildLinesPayload = () => METHODS.map(m => m === "cash"
-    ? { method: "cash", notes: lines.cash.notes || null }
-    : { method: m, actualAmount: lines[m].actualAmount === "" ? null : parseFloat(lines[m].actualAmount), notes: lines[m].notes || null });
+  // Methods with nothing expected and nothing entered are hidden to keep the screen short.
+  const hasInput = (m: CashupMethod) => {
+    const l = lines[m];
+    return l.bankAmount !== "" || l.onHandAmount !== "" || l.pendingAmount !== "" || l.writeOffs.length > 0;
+  };
+  const shownMethods = METHODS.filter(m => Math.abs(data.expectedCashByMethod[m]) > 0.005 || hasInput(m) || (m === "cash" && cashSummary.actualTotal !== null));
+
+  const buildLinesPayload = () => METHODS.map(m => {
+    const l = lines[m];
+    const amount = (v: string) => (v.trim() === "" ? null : parseFloat(v));
+    return {
+      method: m,
+      bankAmount: amount(l.bankAmount),
+      onHandAmount: m === "cash" ? amount(l.onHandAmount) : null,
+      pendingAmount: m === "cash" ? null : amount(l.pendingAmount),
+      pendingReference: l.pendingReference || null,
+      writeOffs: l.writeOffs.map(w => ({ category: w.category, amount: amount(w.amount), reason: w.reason || null })),
+      notes: l.notes || null,
+    };
+  });
 
   const saveDraft = async () => {
     setBusy(true); setError(null);
@@ -669,7 +981,14 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
   };
 
   const closeWithCashup = async () => {
-    if (!confirm("Close this event with the entered reconciliation? This will count unallocated donations as profit and fully lock the event until it's reopened.")) return;
+    const open = shownMethods
+      .map(m => ({ m, s: settle(m, data.expectedCashByMethod[m], m === "cash" ? cashSummary.actualTotal : null, lines[m]) }))
+      .filter(({ s }) => s.unaccounted === null || Math.abs(s.unaccounted) >= 0.005)
+      .map(({ m, s }) => `${METHOD_LABELS[m]}: ${s.unaccounted === null ? "not settled" : money(s.unaccounted)}`);
+    const warning = open.length > 0
+      ? `\n\nNot everything is accounted for:\n${open.join("\n")}\n\nThis will be recorded as a variance and comes off profit.`
+      : "";
+    if (!confirm(`Close this event with this cashup? Unallocated donations will be counted as profit and the event will be locked until it's reopened.${warning}`)) return;
     setBusy(true); setError(null);
     try {
       await apiFetch(`/api/cashups/event/${eventId}/close`, { method: "POST", authToken: token, body: { lines: buildLinesPayload(), notes: closeNotes || null } });
@@ -683,7 +1002,7 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
   };
 
   const quickClose = async () => {
-    if (!confirm("Quick close this event without a per-method cashup? System totals will be accepted as-is, unallocated donations will be counted as profit, and the event will be fully locked until it's reopened.")) return;
+    if (!confirm("Quick close this event without a cashup? System totals will be accepted as-is, unallocated donations will be counted as profit, and the event will be fully locked until it's reopened.")) return;
     setBusy(true); setError(null);
     try {
       await apiFetch(`/api/cashups/event/${eventId}/close`, { method: "POST", authToken: token, body: { notes: closeNotes || null } });
@@ -710,60 +1029,41 @@ function ReconciliationTab({ eventId, token, data, busy, setBusy, setError, onCh
   };
 
   const reconciled = data.reconciled;
+  const settledMethods = METHODS.filter(m => {
+    const r = reconciled?.byMethod?.[m];
+    return r && (Math.abs(r.expected) > 0.005 || r.actual !== null || r.writeOffTotal > 0);
+  });
 
   return (
     <div className="space-y-4">
-      <div className="bg-white border rounded-lg p-4 space-y-3 overflow-auto">
-        <div className="text-sm font-medium">Cash-up reconciliation</div>
-        <table className="w-full text-sm min-w-[640px]">
-          <thead>
-            <tr className="text-left text-gray-500 border-b">
-              <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">Actual</th>
-              <th className="py-1 text-right">Variance</th>
-              <th className="py-1">Notes</th>
-            </tr>
-          </thead>
-          <tbody>
-            {METHODS.map(m => {
-              const r = reconciled?.byMethod?.[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">
-                    {isClosed ? (
-                      money(r?.actual ?? null)
-                    ) : m === "cash" ? (
-                      cashSummary.actualTotal != null ? money(cashSummary.actualTotal) : <span className="text-gray-400">not counted</span>
-                    ) : (
-                      <input type="number" step="0.01" className="w-28 border rounded px-2 py-1 text-sm text-right" value={lines[m].actualAmount} onChange={e => setLine(m, "actualAmount", e.target.value)} />
-                    )}
-                  </td>
-                  <td className="py-1.5 text-right">
-                    {isClosed
-                      ? (r?.variance != null ? money(r.variance) : <span className="text-gray-400">not reconciled</span>)
-                      : (m === "cash"
-                        ? (cashSummary.actualTotal != null ? money(cashSummary.actualTotal - data.expectedCashByMethod[m]) : "—")
-                        : (lines[m].actualAmount !== "" ? money(parseFloat(lines[m].actualAmount) - data.expectedCashByMethod[m]) : "—"))}
-                  </td>
-                  <td className="py-1.5">
-                    {isClosed ? (r?.notes || "—") : (
-                      <input className="w-full border rounded px-2 py-1 text-sm" value={lines[m].notes} onChange={e => setLine(m, "notes", e.target.value)} />
-                    )}
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-        {!isClosed && (
-          <div className="text-xs text-gray-500">Cash actual is the live sum of per-staff-member counts entered below — there&apos;s no separate event-wide entry.</div>
+      <div className="bg-white border rounded-lg p-4 space-y-3">
+        <div>
+          <div className="text-sm font-medium">Where did the money end up?</div>
+          <div className="text-xs text-gray-500">
+            {isClosed
+              ? "As recorded when the event was closed. Pending money can be marked received or written off without reopening."
+              : "For each payment method, say how much is in the bank, still on hand or pending, and write off anything lost to fees, charges or shortfalls."}
+          </div>
+        </div>
+        {isClosed ? (
+          reconciled?.action === "closed" && settledMethods.length > 0 ? (
+            settledMethods.map(m => <SettledCard key={m} method={m} r={reconciled.byMethod[m]} token={token} onChanged={onChanged} />)
+          ) : (
+            <div className="text-xs text-gray-400">This event was quick closed, so no settlement was recorded.</div>
+          )
+        ) : shownMethods.length === 0 ? (
+          <div className="text-xs text-gray-400">No payments to settle for this event.</div>
+        ) : (
+          shownMethods.map(m => (
+            <SettlementCard
+              key={m}
+              method={m}
+              data={data}
+              counted={m === "cash" ? cashSummary.actualTotal : null}
+              input={lines[m]}
+              onChange={next => setLine(m, next)}
+            />
+          ))
         )}
       </div>
 
@@ -789,20 +1089,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>
-          <div className="text-gray-500 text-xs">Donations counted as profit</div>
-          <div className="font-semibold">{money(data.unallocatedDonationsTotal)}</div>
-        </div>
-        <div>
-          <div className="text-gray-500 text-xs">Total costs</div>
-          <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>
-      </div>
+      <ProfitSummary data={data} />
 
       {!isClosed && (
         <div className="bg-white border rounded-lg p-4 space-y-2">

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

@@ -8,6 +8,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { Wallet } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Event } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 export default function CashupLandingPage() {
   const { token } = useAuth();
@@ -55,15 +56,11 @@ export default function CashupLandingPage() {
             <Wallet className="w-5 h-5 text-brand-600" />
           </div>
           <div>
-            <h1 className="text-xl font-semibold text-gray-900">Post-event Cashup</h1>
+            <BackLink href="/dashboard" />
+            <h1 className="text-xl font-semibold text-gray-900 mt-0.5">Post-event Cashup</h1>
             <p className="text-sm text-gray-500 mt-1">Set costs, reconcile takings, and close out an event. Admin only.</p>
           </div>
         </div>
-        <button
-          type="button"
-          className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 shrink-0"
-          onClick={() => router.push("/dashboard")}
-        >Back</button>
       </div>
 
       {error && <div className="text-sm text-red-600 bg-red-50 border border-red-100 rounded p-2">{error}</div>}

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

@@ -8,6 +8,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { ClipboardList } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Event, FormResponse, Registration } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 const STATUS_OPTIONS = ["pending", "confirmed", "partial_paid", "paid", "cancelled"] as const;
 
@@ -197,11 +198,11 @@ export default function AdminRegistrationsPage() {
             <ClipboardList className="w-5 h-5 text-brand-600" />
           </div>
           <div>
-            <h1 className="text-2xl font-semibold text-gray-900">Manage Registrations</h1>
+            <BackLink href="/dashboard" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Manage Registrations</h1>
             <p className="text-sm text-gray-500">{registrations.length} registration{registrations.length !== 1 ? "s" : ""} total</p>
           </div>
         </div>
-        <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200" onClick={() => router.push('/dashboard')}>Back</button>
       </div>
 
       {!isAdmin && (

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

@@ -2,7 +2,7 @@
 
 import React, { Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import { apiFetch, ApiError, API_BASE, resolveToApiOrigin } from "@/lib/api";
 import { useSiteSettings } from "@/contexts/SiteSettingsContext";
 import { useDismissingState } from "@/hooks/useDismissingState";
@@ -14,6 +14,7 @@ import { YocoTab } from "@/components/admin/YocoTab";
 import { extractDominantColors } from "@/lib/extractColors";
 import { mapsSearchUrl } from "@/lib/maps";
 import { errorMessage } from "@/lib/utils";
+import { BackLink } from "@/components/shared/BackLink";
 
 type TabId = "organisation" | "branding" | "notifications" | "email" | "legal" | "whatsapp" | "yoco" | "backups";
 
@@ -85,7 +86,6 @@ export default function SiteSettingsPage() {
 
 function SiteSettingsPageInner() {
   const { token } = useAuth();
-  const router = useRouter();
   const searchParams = useSearchParams();
   const { reload: reloadSettings } = useSiteSettings();
 
@@ -366,15 +366,10 @@ function SiteSettingsPageInner() {
       {/* Header */}
       <div className="flex items-center justify-between mb-6">
         <div>
-          <h1 className="text-2xl font-semibold text-gray-900">Site Settings</h1>
+          <BackLink href="/dashboard/admin" />
+          <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Site Settings</h1>
           <p className="text-sm text-gray-500 mt-1">Configure your organisation, branding, email, and legal pages.</p>
         </div>
-        <button
-          className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200"
-          onClick={() => router.push("/dashboard/admin")}
-        >
-          Back
-        </button>
       </div>
 
       {/* Tab bar */}

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

@@ -10,6 +10,7 @@ import { Users as UsersIcon } from "lucide-react";
 import { RoleBadge, type Role as RoleBadgeRole } from "@/components/shared/RoleBadge";
 import { errorMessage } from "@/lib/utils";
 import type { Paginated } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 interface UserItem {
   id: string;
@@ -259,12 +260,12 @@ export default function AdminUsersPage() {
             <UsersIcon className="w-5 h-5 text-brand-600" />
           </div>
           <div>
-            <h1 className="text-2xl font-semibold text-gray-900">User Management</h1>
+            <BackLink href="/dashboard" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">User Management</h1>
             <p className="text-sm text-gray-500">{total} user{total !== 1 ? "s" : ""} total</p>
           </div>
         </div>
         <div className="flex gap-2">
-          <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200" onClick={() => router.push("/dashboard")}>Back</button>
           <button className="px-3 py-1.5 text-sm rounded-lg bg-brand-600 text-white hover:bg-brand-700" onClick={() => setCreateOpen(v => !v)}>
             {createOpen ? "Close" : "Create user"}
           </button>

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

@@ -10,6 +10,7 @@ import { QrImage } from "@/components/shared/QrImage";
 import { Ticket } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Event, Ticket as TicketRecord } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 function EventTicketsContent() {
   const { token, user } = useAuth();
@@ -239,14 +240,11 @@ function EventTicketsContent() {
             <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
               <Ticket className="w-5 h-5 text-brand-600" />
             </div>
-            <h1 className="text-2xl font-semibold text-gray-900">Event Tickets</h1>
+            <div>
+              <BackLink href="/dashboard" />
+              <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Event Tickets</h1>
+            </div>
           </div>
-          <button
-              className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm"
-              onClick={() => router.push("/dashboard")}
-          >
-            Back
-          </button>
         </div>
         <p className="text-sm text-gray-600 mb-4">
           View and print tickets for an event.

frontend/src/app/dashboard/staff/my-groups/page.tsx

@@ -2,10 +2,10 @@
 
 import React, { useEffect, useState } from "react";
 import { useAuth } from "@/hooks/useAuth";
-import { useRouter } from "next/navigation";
 import { apiFetch } from "@/lib/api";
 import { formatDate } from "@/lib/date";
 import { Users } from "lucide-react";
+import { BackLink } from "@/components/shared/BackLink";
 
 type Member = {
   id: string; name: string; gender: string | null; dateOfBirth: string | null; phone: string | null;
@@ -25,7 +25,6 @@ const ageOn = (dob: string | null, on: string) => {
 /** Groups the signed-in staff member leads (rooms, small groups, buses) and who's in them. */
 export default function MyGroupsPage() {
   const { token } = useAuth();
-  const router = useRouter();
   const [data, setData] = useState<{ medicalShown: boolean; groups: MyGroup[] } | null>(null);
   const [error, setError] = useState<string | null>(null);
 
@@ -42,7 +41,7 @@ export default function MyGroupsPage() {
           <Users className="w-5 h-5 text-brand-600" />
         </div>
         <div>
-          <button className="text-xs text-brand-600 hover:underline" onClick={() => router.push("/dashboard")}>← Back to dashboard</button>
+          <BackLink href="/dashboard" />
           <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">My groups</h1>
           <p className="text-sm text-gray-500">Rooms, small groups and buses you lead</p>
         </div>

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

@@ -5,13 +5,13 @@ 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";
 import { QrCode } from "lucide-react";
 import { useOfflineScanning } from "@/components/scanner/useOfflineScanning";
 import { OfflineScanPanel } from "@/components/scanner/OfflineScanPanel";
 import type { SnapshotTicket } from "@/lib/offlineScan";
 import { errorMessage } from "@/lib/utils";
 import type { Event, RecentScan, ScanStats, Section } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 // GET /api/tickets/scan-preview/:qr — just the fields the confirm step needs. Offline
 // scans build the same shape from the downloaded ticket list.
@@ -33,7 +33,6 @@ type ScanTicket = {
 };
 
 export default function TicketScanningPage() {
-  const router = useRouter();
   const scannerRef = useRef<QRScannerHandle>(null);
   const [scanInfo, setScanInfo] = useDismissingState<string | null>(null);
   const [error, setError] = useDismissingState<string | null>(null);
@@ -330,9 +329,11 @@ export default function TicketScanningPage() {
               <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
                 <QrCode className="w-5 h-5 text-brand-600" />
               </div>
-              <h1 className="text-2xl font-semibold text-gray-900">Ticket Scanning</h1>
+              <div>
+                <BackLink href="/dashboard" />
+                <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Ticket Scanning</h1>
+              </div>
             </div>
-            <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard')}>Back</button>
           </div>
           <p className="text-sm text-gray-600 mb-4">
             Use the button to start/stop scanning. The back camera will be used when available.

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

@@ -10,6 +10,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { BedDouble, Plus, Wand2, Printer, Trash2, Pencil, Eraser } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Event } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 type Group = { id: string; name: string; capacity: number | null; gender: "male" | "female" | null; leaderUserId: string | null; leader?: { id: string; name: string } | null };
 type AllocSet = { id: string; name: string; showOnTicket: boolean; groups: Group[]; assignments: { attendeeId: string; groupId: string }[] };
@@ -207,7 +208,7 @@ export default function AllocationsPage() {
           <BedDouble className="w-5 h-5 text-brand-600" />
         </div>
         <div>
-          <button className="text-xs text-brand-600 hover:underline" onClick={() => router.push("/dashboard")}>← Back to dashboard</button>
+          <BackLink href="/dashboard" />
           <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Rooms &amp; groups</h1>
           <p className="text-sm text-gray-500">Put attendees into rooms, small groups, teams or buses</p>
         </div>

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

@@ -10,6 +10,7 @@ import { ShieldCheck, Send, RefreshCw, HeartPulse, Printer } from "lucide-react"
 import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
 import { errorMessage } from "@/lib/utils";
 import type { Event, ConsentRow, MedicalRow } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 
 const STATUS_STYLE: Record<ConsentRow["status"], { label: string; cls: string }> = {
@@ -134,7 +135,7 @@ export default function ConsentTrackerPage() {
           <ShieldCheck className="w-5 h-5 text-brand-600" />
         </div>
         <div>
-          <button className="text-xs text-brand-600 hover:underline" onClick={() => router.push("/dashboard")}>← Back to dashboard</button>
+          <BackLink href="/dashboard" />
           <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Parental consent</h1>
           <p className="text-sm text-gray-500">Youth events: who still needs a parent&apos;s consent before check-in</p>
         </div>

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

@@ -8,6 +8,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { TicketPercent, Plus, X, Search } from "lucide-react";
 import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
 import { errorMessage } from "@/lib/utils";
+import { BackLink } from "@/components/shared/BackLink";
 
 type CouponType = "percent" | "fixed" | "comp";
 type Role = "user" | "staff" | "supervisor" | "admin";
@@ -206,7 +207,7 @@ export default function CouponsPage() {
             <TicketPercent className="w-5 h-5 text-brand-600" />
           </div>
           <div>
-            <button className="text-xs text-brand-600 hover:underline" onClick={() => router.push("/dashboard")}>← Back to dashboard</button>
+            <BackLink href="/dashboard" />
             <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Coupon codes</h1>
             <p className="text-sm text-gray-500">Discounts for staff, leaders, volunteers and promotions</p>
           </div>

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

@@ -9,6 +9,7 @@ import { Mail, Users, Zap, Clock } from "lucide-react";
 import { AllocationGroupFilter } from "@/components/shared/AllocationGroupFilter";
 import { errorMessage } from "@/lib/utils";
 import type { Event, MessageSendResult, Registration, User } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 type Attendee = { id: string; name: string; email: string; pref: string };
 type TemplateKey = 'custom'|'payment_reminder'|'event_reminder'|'tickets';
@@ -489,10 +490,10 @@ function EmailAttendeesPageInner() {
           <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
             <Mail className="w-5 h-5 text-brand-600" />
           </div>
-          <h1 className="text-2xl font-semibold text-gray-900">Email Attendees</h1>
-        </div>
-        <div className="flex items-center gap-2">
-          <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard')}>Back</button>
+          <div>
+            <BackLink href="/dashboard" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Email Attendees</h1>
+          </div>
         </div>
       </div>
 

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

@@ -8,6 +8,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { Ticket } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Event, EventOption } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 // 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
@@ -209,9 +210,11 @@ function EventOptionsContent() {
           <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
             <Ticket className="w-5 h-5 text-brand-600" />
           </div>
-          <h1 className="text-2xl font-semibold text-gray-900">Event options</h1>
+          <div>
+            <BackLink href="/dashboard/supervisor/events" label="Back to events" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Event options</h1>
+          </div>
         </div>
-        <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard/supervisor/events')}>Back</button>
       </div>
 
       {!canView && (

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

@@ -12,6 +12,7 @@ import { Calendar } from "lucide-react";
 import { ChoicesEditor } from "@/components/shared/FormFieldExtras";
 import { errorMessage } from "@/lib/utils";
 import type { Event, EventAttachment, EventFormField, EventOption, Paginated, Section } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 // ─── helpers ────────────────────────────────────────────────────────────────
 
@@ -1792,13 +1793,13 @@ export default function ManageEventsPage() {
             <Calendar className="w-5 h-5 text-brand-600" />
           </div>
           <div>
-            <h1 className="text-2xl font-semibold text-gray-900">Events</h1>
+            <BackLink href="/dashboard" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Events</h1>
             <p className="text-sm text-gray-500 mt-0.5">Manage and create events</p>
           </div>
         </div>
         <div className="flex items-center gap-2">
           <button type="button" className="px-4 py-2 text-sm rounded-lg bg-brand-600 text-white hover:bg-brand-700 shadow-sm font-medium" onClick={openCreate}>+ Add Event</button>
-          <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800" onClick={() => router.push("/dashboard")}>Back</button>
         </div>
       </div>
 

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

@@ -9,6 +9,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { FileText } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Event, EventForm, FormResponse, Registration, User } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 type FormFieldType = 'yes_no' | 'text' | 'date' | 'numeric' | 'statement' | 'paragraph' | 'rating' | 'multiple_choice';
 
@@ -452,10 +453,12 @@ export default function FormsBrowserPage() {
           <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
             <FileText className="w-5 h-5 text-brand-600" />
           </div>
-          <h1 className="text-2xl font-semibold text-gray-900">Forms</h1>
+          <div>
+            <BackLink href="/dashboard" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Forms</h1>
+          </div>
         </div>
         <div className="flex gap-2">
-          <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200" onClick={() => router.push("/dashboard")}>Back</button>
           {mode === 'view' && (
             <button className="px-3 py-1.5 text-sm rounded-lg bg-brand-600 text-white hover:bg-brand-700" onClick={onPrint} disabled={items.length === 0}>
               Print forms

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

@@ -9,6 +9,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { UserPlus } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Registration } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 type FormField = { id: string; type: 'yes_no'|'text'|'date'|'numeric'|'statement'|'paragraph'|'rating'|'multiple_choice'; label: string; isRequired?: boolean; helpText?: string|null; options?: unknown };
 
@@ -67,7 +68,10 @@ export default function ManualRegistrationPage() {
         <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
           <UserPlus className="w-5 h-5 text-brand-600" />
         </div>
-        <h1 className="text-xl font-semibold text-gray-900">Manual Registration</h1>
+        <div>
+          <BackLink href="/dashboard" />
+          <h1 className="text-xl font-semibold text-gray-900 mt-0.5">Manual Registration</h1>
+        </div>
       </div>
       <form onSubmit={submit} className="space-y-3">
         <div>

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

@@ -12,6 +12,7 @@ import { UserPlus, CreditCard } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import { optionUnitNow, variantUnitNow } from "@/lib/pricing";
 import type { Event, EventOption, Registration, RegistrationOption, User } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 // ─── Pricing helpers ─────────────────────────────────────────────────────────
 
@@ -348,9 +349,11 @@ export default function ManualRegistrationPage() {
           <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
             <UserPlus className="w-5 h-5 text-brand-600" />
           </div>
-          <h1 className="text-2xl font-semibold text-gray-900">Manual registration</h1>
+          <div>
+            <BackLink href="/dashboard" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Manual registration</h1>
+          </div>
         </div>
-        <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard')}>Back</button>
       </div>
 
       {!canView && (

frontend/src/app/dashboard/supervisor/offline-scans/page.tsx

@@ -9,6 +9,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { WifiOff, Unlock, CheckCircle2 } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Event } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 type Lock = { id: string; sectionName: string | null; deviceName: string | null; user: { name: string }; lockedAt: string; snapshotAt: string | null; lastSyncAt: string | null };
 type Report = {
@@ -86,7 +87,7 @@ export default function OfflineScansPage() {
           <WifiOff className="w-5 h-5 text-brand-600" />
         </div>
         <div>
-          <button className="text-xs text-brand-600 hover:underline" onClick={() => router.push("/dashboard")}>← Back to dashboard</button>
+          <BackLink href="/dashboard" />
           <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Offline scanning</h1>
           <p className="text-sm text-gray-500">Devices scanning without a connection, and their synced scans</p>
         </div>

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

@@ -10,6 +10,7 @@ import { Wallet, RotateCcw, HandHeart, ScanLine, Link2 } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import { registrationOptionUnitPrice } from "@/lib/pricing";
 import type { Event, Payment, Registration, User } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 // A donation is never mutated once created — assigning it to a registration creates a separate
 // "leg" Payment row (isDonation:false, originalPaymentId -> the donation, amount > 0) instead.
@@ -499,9 +500,11 @@ function PaymentsContent() {
           <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
             <Wallet className="w-5 h-5 text-brand-600" />
           </div>
-          <h1 className="text-2xl font-semibold text-gray-900">Payments</h1>
+          <div>
+            <BackLink href="/dashboard" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Payments</h1>
+          </div>
         </div>
-        <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push('/dashboard')}>Back</button>
       </div>
 
       {!canView && (

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

@@ -1,15 +1,13 @@
 "use client";
 
 import React, { Suspense } from "react";
-import { useRouter } from "next/navigation";
 import ReportsV2 from "@/components/reports/ReportsV2";
 
 export default function SupervisorReportsPage() {
-  const router = useRouter();
   return (
     <div className="w-full p-6">
       <Suspense fallback={<div className="text-sm text-gray-400">Loading…</div>}>
-        <ReportsV2 onBack={() => router.push('/dashboard')} />
+        <ReportsV2 backHref="/dashboard" />
       </Suspense>
     </div>
   );

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

@@ -10,6 +10,7 @@ import { ListChecks, ArrowUp, ArrowDown } from "lucide-react";
 import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";
 import { errorMessage } from "@/lib/utils";
 import type { Event } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 type Entry = {
   id: string;
@@ -100,7 +101,7 @@ export default function WaitlistPage() {
           <ListChecks className="w-5 h-5 text-brand-600" />
         </div>
         <div>
-          <button className="text-xs text-brand-600 hover:underline" onClick={() => router.push("/dashboard")}>← Back to dashboard</button>
+          <BackLink href="/dashboard" />
           <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Waitlist</h1>
           <p className="text-sm text-gray-500">People waiting for sold-out tickets</p>
         </div>

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

@@ -9,6 +9,7 @@ import { MessageCircle, Users, Zap, Send, Clock, type LucideIcon } from "lucide-
 import { AllocationGroupFilter } from "@/components/shared/AllocationGroupFilter";
 import { errorMessage } from "@/lib/utils";
 import type { Event, MessageSendResult, Registration, User } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 // Attendee with preference info
 type Attendee = { id: string; name: string; phone: string; pref: string };
@@ -608,11 +609,11 @@ function WhatsAppAttendeesPageInner() {
           <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
             <MessageCircle className="w-5 h-5 text-brand-600" />
           </div>
-          <h1 className="text-2xl font-semibold text-gray-900">WhatsApp Attendees</h1>
+          <div>
+            <BackLink href="/dashboard" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">WhatsApp Attendees</h1>
+          </div>
         </div>
-        <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm" onClick={() => router.push("/dashboard")}>
-          Back
-        </button>
       </div>
 
       {!canView && (

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

@@ -6,6 +6,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { HandHeart } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Event } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 export default function DonatePage() {
   const { token } = useAuth();
@@ -65,7 +66,8 @@ export default function DonatePage() {
           <HandHeart className="w-5 h-5 text-rose-600" />
         </div>
         <div>
-          <h1 className="text-2xl font-semibold text-gray-900">Make a donation</h1>
+          <BackLink href="/dashboard/user" />
+          <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Make a donation</h1>
           <p className="text-sm text-gray-500">Support an event or the ministry directly.</p>
         </div>
       </div>

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

@@ -8,6 +8,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { FileText } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Registration } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 // Types for form fields
 type FormField = { id: string; type: 'yes_no'|'text'|'date'|'numeric'|'statement'|'paragraph'|'rating'|'multiple_choice'; label: string; isRequired?: boolean; helpText?: string|null; options?: unknown };
@@ -139,9 +140,11 @@ function FormsContent() {
           <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
             <FileText className="w-5 h-5 text-brand-600" />
           </div>
-          <h1 className="text-2xl font-semibold text-gray-900">Attendee forms</h1>
+          <div>
+            <BackLink href="/dashboard/user" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Attendee forms</h1>
+          </div>
         </div>
-        <button className="px-3 py-1.5 text-sm rounded-lg bg-gray-100 hover:bg-gray-200" onClick={() => router.push('/dashboard/user')}>Back</button>
       </div>
 
       {loading && <div className="text-sm text-gray-600 mb-2">Loading…</div>}

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

@@ -9,6 +9,7 @@ import { formatPaymentMethod } from "@/lib/paymentMethod";
 import { Receipt } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
 import type { Paginated } from "@/types";
+import { BackLink } from "@/components/shared/BackLink";
 
 interface PaymentItem {
   id: string;
@@ -108,12 +109,11 @@ export default function UserPaymentsPage() {
           <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
             <Receipt className="w-5 h-5 text-brand-600" />
           </div>
-          <h1 className="text-2xl font-semibold text-gray-900">My Payments</h1>
+          <div>
+            <BackLink href="/dashboard/user" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">My Payments</h1>
+          </div>
         </div>
-        <button
-          className="px-2.5 py-1 text-xs rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-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>}

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

@@ -9,6 +9,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { TwoFactorChallenge, TwoFactorMethod } from "@/lib/auth";
 import { User, Lock, ShieldAlert, ShieldCheck, ShieldOff, Trash2, Clock, LogIn, KeyRound, RotateCcw } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
+import { BackLink } from "@/components/shared/BackLink";
 
 type ActivityEvent = { id: string; type: "login" | "password_changed" | "password_reset" | "two_factor_enabled" | "two_factor_disabled"; device: string | null; createdAt: string };
 
@@ -309,7 +310,8 @@ export default function UserProfilePage() {
   return (
     <div className="max-w-4xl mx-auto w-full">
       <div className="mb-6">
-        <h1 className="text-2xl font-semibold text-gray-900">Profile &amp; Security</h1>
+        <BackLink href="/dashboard" />
+        <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Profile &amp; Security</h1>
         <p className="text-sm text-gray-500 mt-1">Manage your personal information and keep your account secure.</p>
       </div>
 

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

@@ -6,6 +6,7 @@ import { useDismissingState } from "@/hooks/useDismissingState";
 import { useRouter } from "next/navigation";
 import { KeyRound } from "lucide-react";
 import { errorMessage } from "@/lib/utils";
+import { BackLink } from "@/components/shared/BackLink";
 
 export default function ResetPasswordPage() {
   const { token } = useAuth();
@@ -50,12 +51,11 @@ export default function ResetPasswordPage() {
           <div className="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center shrink-0">
             <KeyRound className="w-5 h-5 text-brand-600" />
           </div>
-          <h1 className="text-2xl font-semibold text-gray-900">Reset password</h1>
+          <div>
+            <BackLink href="/dashboard/user" />
+            <h1 className="text-2xl font-semibold text-gray-900 mt-0.5">Reset password</h1>
+          </div>
         </div>
-        <button
-          className="px-2.5 py-1 text-xs rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-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>}

frontend/src/components/reports/ReportsShell.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
-import { ArrowLeft, Search } from "lucide-react";
+import { Search } from "lucide-react";
+import { BackLink } from "@/components/shared/BackLink";
 import { REPORTS, REPORT_CATEGORIES, type ReportKey, type ReportCategory } from "./ReportCatalog";
 import EventsDropdown from "./EventsDropdown";
 
@@ -17,7 +18,7 @@ export default function ReportsShell({
   dateFrom, setDateFrom, dateTo, setDateTo,
   report, setReport,
   onViewReport, busy,
-  onBack,
+  backHref,
 }: {
   events: EventLite[]; isAdmin: boolean;
   showPastEvents: boolean; setShowPastEvents: (v: boolean) => void;
@@ -27,7 +28,7 @@ export default function ReportsShell({
   dateFrom: string; setDateFrom: (v: string) => void; dateTo: string; setDateTo: (v: string) => void;
   report: ReportKey; setReport: (r: ReportKey) => void;
   onViewReport: () => void; busy: boolean;
-  onBack?: () => void;
+  backHref?: string;
 }) {
   const [search, setSearch] = useState("");
   const [category, setCategory] = useState<"All" | ReportCategory>("All");
@@ -67,7 +68,8 @@ export default function ReportsShell({
     <div>
       <div className="flex flex-wrap items-start justify-between gap-3 sm:gap-4 mb-6">
         <div className="min-w-0">
-          <h1 className="text-2xl font-semibold text-gray-900">Reports</h1>
+          {backHref && <BackLink href={backHref} />}
+          <h1 className={"text-2xl font-semibold text-gray-900" + (backHref ? " mt-0.5" : "")}>Reports</h1>
           <p className="text-sm text-gray-500 mt-0.5">View, export, or email operational reports for events.</p>
         </div>
         <div className="flex items-center gap-3 w-full sm:w-auto">
@@ -80,11 +82,6 @@ export default function ReportsShell({
               onChange={e => setSearch(e.target.value)}
             />
           </div>
-          {onBack && (
-            <button type="button" className="shrink-0 flex items-center gap-1.5 px-3 py-2 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800" onClick={onBack}>
-              <ArrowLeft className="w-4 h-4" /> Back
-            </button>
-          )}
         </div>
       </div>
 

frontend/src/components/reports/ReportsV2.tsx

@@ -18,6 +18,7 @@ import type { ConsentRow, Event, EventCashup, EventFinancials, MedicalRow, Payme
 
 const METHOD_KEYS = ["cash", "card", "eft", "other"] as const;
 const METHOD_LABEL: Record<string, string> = { cash: "Cash", card: "Card", eft: "EFT", other: "Other" };
+const WRITE_OFF_LABEL: Record<string, string> = { card_fees: "Card / online fees", bank_charges: "Bank charges", cash_shortfall: "Cash shortfall", other: "Other" };
 function denomLabel(v: number): string {
   return v >= 1 ? `R${v}` : `${Math.round(v * 100)}c`;
 }
@@ -143,7 +144,7 @@ type FunnelReport = {
 };
 
 // Simple MultiSelect control used in filters
-export default function ReportsV2({ onBack }: { onBack?: () => void } = {}) {
+export default function ReportsV2({ backHref }: { backHref?: string } = {}) {
   const { token, user } = useAuth();
   const role = user?.role || "user";
   const canView = role === "admin" || role === "supervisor";
@@ -1178,23 +1179,25 @@ export default function ReportsV2({ onBack }: { onBack?: () => void } = {}) {
         METHOD_KEYS.forEach(m => {
           const r = f.reconciled?.byMethod?.[m];
           incomeByMethod[m] = (incomeByMethod[m] || 0) + (f.paymentsByMethod?.[m] || 0);
-          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)) : ""]);
+          const amount = (v: number | null | undefined) => (v != null && Math.abs(v) >= 0.005 ? Number(v.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)), amount(r?.bank), amount(r?.onHand), amount(r?.pendingOutstanding), amount(r?.writeOffTotal), r?.unaccounted != null ? Number(r.unaccounted.toFixed(2)) : "not reconciled"]);
           if (m === "cash") {
-            (r?.denominations || []).forEach((d) => rows.push([title, `  ${denomLabel(d.value)} × ${d.count}`, "", "", "", Number((d.value * d.count).toFixed(2)), ""]));
+            (r?.denominations || []).forEach((d) => rows.push([title, `  ${denomLabel(d.value)} × ${d.count}`, "", "", "", "", Number((d.value * d.count).toFixed(2)), "", "", ""]));
           }
+          (r?.writeOffs || []).forEach((w) => rows.push([title, `  Write-off: ${WRITE_OFF_LABEL[w.category] || w.category}${w.reason ? ` (${w.reason})` : ""}`, "", "", "", "", "", "", Number(w.amount.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))]);
       });
       return {
         title: 'Cashup Report', subtitle, kind: 'table', orientation: 'landscape',
         chart: { title: 'Income by method, across all selected events', data: METHOD_KEYS.map(m => ({ label: METHOD_LABEL[m], value: incomeByMethod[m] || 0, displayValue: `R ${(incomeByMethod[m] || 0).toFixed(2)}` })) },
-        table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected cash", "Actual", "Variance"], rows }
+        table: { columns: ["Event", "Method", "Income", "Costs from method", "Expected", "In bank", "On hand", "Pending", "Written off", "Unaccounted"], rows }
       };
     }
     if (report === "financeReport") {
       const rows: (string | number)[][] = [];
-      let sold = 0, paidByAll = 0, donationsProfit = 0, costsTotal = 0, netProfitTotal = 0;
+      let sold = 0, paidByAll = 0, donationsProfit = 0, costsTotal = 0, writeOffsTotal = 0, netProfitTotal = 0;
       const paidByMethod: Record<string, number> = {};
       Object.keys(financialsByEvent).forEach(evId => {
         const f = financialsByEvent[evId];
@@ -1206,6 +1209,7 @@ export default function ReportsV2({ onBack }: { onBack?: () => void } = {}) {
         METHOD_KEYS.forEach(m => { paidByMethod[m] = (paidByMethod[m] || 0) + (f.paymentsByMethod?.[m] || 0); });
         donationsProfit += f.unallocatedDonationsTotal || 0;
         costsTotal += f.totalCosts || 0;
+        writeOffsTotal += f.totalWriteOffs || 0;
         netProfitTotal += f.netProfit || 0;
         // "Sales" is ticket-price revenue for orders that reached 'paid' status — whether that
         // order was funded directly or via an assigned donation, its full price is already
@@ -1221,10 +1225,11 @@ export default function ReportsV2({ onBack }: { onBack?: () => void } = {}) {
         rows.push([title, "Cashup comparison", "", ""]);
         METHOD_KEYS.forEach(m => {
           const r = f.reconciled?.byMethod?.[m];
-          rows.push([title, "", `${METHOD_LABEL[m]} — expected / actual / variance`, `${money2(f.expectedCashByMethod?.[m])} / ${r?.actual != null ? money2(r.actual) : "—"} / ${r?.variance != null ? money2(r.variance) : "—"}`]);
+          rows.push([title, "", `${METHOD_LABEL[m]} — expected / actual / unaccounted`, `${money2(f.expectedCashByMethod?.[m])} / ${r?.actual != null ? money2(r.actual) : "—"} / ${r?.unaccounted != null ? money2(r.unaccounted) : "—"}`]);
         });
         rows.push([title, "Costs", "", ""]);
         (f.costs || []).forEach((c) => rows.push([title, "", `${c.label}${c.paidFromMethod ? ` (via ${METHOD_LABEL[c.paidFromMethod]})` : ""}`, Number((-(c.total ?? c.amount)).toFixed(2))]));
+        METHOD_KEYS.forEach(m => (f.reconciled?.byMethod?.[m]?.writeOffs || []).forEach((w) => rows.push([title, "", `${WRITE_OFF_LABEL[w.category] || w.category} (${METHOD_LABEL[m]})${w.reason ? ` — ${w.reason}` : ""}`, -Number(w.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))]);
       });
@@ -1235,6 +1240,7 @@ export default function ReportsV2({ onBack }: { onBack?: () => void } = {}) {
           { label: 'Paid by (all methods)', value: `R ${paidByAll.toFixed(2)}`, tone: 'blue' },
           { label: 'Donations counted as profit', value: `R ${donationsProfit.toFixed(2)}`, tone: 'rose' },
           { label: 'Total costs', value: `R ${costsTotal.toFixed(2)}`, tone: 'amber' },
+          { label: 'Bank & card charges', value: `R ${writeOffsTotal.toFixed(2)}`, tone: 'amber' },
           { label: 'Net profit', value: `R ${netProfitTotal.toFixed(2)}`, tone: 'violet' },
         ],
         chart: { title: 'Paid by, across all selected events', data: METHOD_KEYS.map(m => ({ label: METHOD_LABEL[m], value: paidByMethod[m] || 0, displayValue: `R ${(paidByMethod[m] || 0).toFixed(2)}` })) },
@@ -1247,23 +1253,25 @@ export default function ReportsV2({ onBack }: { onBack?: () => void } = {}) {
         const f = financialsByEvent[evId];
         acc.revenue += f?.effectiveTotalRevenue || 0;
         acc.costs += f?.totalCosts || 0;
+        acc.charges += f?.totalWriteOffs || 0;
         acc.profit += f?.netProfit || 0;
         return acc;
-      }, { revenue: 0, costs: 0, profit: 0 });
+      }, { revenue: 0, costs: 0, charges: 0, profit: 0 });
       const rows: (string | number)[][] = evIds.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?.totalWriteOffs || 0).toFixed(2)), Number((f?.netProfit || 0).toFixed(2))];
       });
       return {
         title: 'Profit Report', subtitle, kind: 'table', orientation: 'portrait',
         stats: [
           { label: 'Revenue', value: `R ${totals.revenue.toFixed(2)}`, tone: 'green' },
           { label: 'Costs', value: `R ${totals.costs.toFixed(2)}`, tone: 'amber' },
+          { label: 'Bank & card charges', value: `R ${totals.charges.toFixed(2)}`, tone: 'amber' },
           { label: 'Net profit', value: `R ${totals.profit.toFixed(2)}`, tone: 'violet' },
         ],
         chart: evIds.length > 1 ? { title: 'Net profit by event', data: evIds.map(evId => ({ label: filteredEvents.find(e => e.id === evId)?.title || evId, value: financialsByEvent[evId]?.netProfit || 0, displayValue: `R ${(financialsByEvent[evId]?.netProfit || 0).toFixed(2)}` })) } : undefined,
-        table: { columns: ["Event", "Revenue", "Costs", "Net profit"], rows }
+        table: { columns: ["Event", "Revenue", "Costs", "Bank & card charges", "Net profit"], rows }
       };
     }
     if (report === "cashupAudit") {
@@ -1455,7 +1463,7 @@ export default function ReportsV2({ onBack }: { onBack?: () => void } = {}) {
         report={report} setReport={(r: ReportKey) => { setReport(r); setReady(false); }}
         onViewReport={() => { setPopupOpen(true); onView(); }}
         busy={busy}
-        onBack={onBack}
+        backHref={backHref}
       />
 
       {popupOpen && (

frontend/src/components/shared/BackLink.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import Link from "next/link";
+
+/**
+ * The site-wide "← Back to …" link, shown above a page's title (next to its icon tile).
+ * Every dashboard page uses this one so back navigation looks and sits the same everywhere.
+ */
+export function BackLink({ href, label = "Back to dashboard" }: { href: string; label?: string }) {
+  return (
+    <Link href={href} className="inline-block text-xs text-brand-600 hover:underline">
+      ← {label}
+    </Link>
+  );
+}

frontend/src/content/help/dashboard-admin-cashup.tsx

@@ -43,13 +43,23 @@ export const dashboardAdminCashupDetailHelpContent: HelpContent = {
       icon: ClipboardCheck,
       content: (
         <div className="space-y-4">
-          <p>A per-method table (cash, card, EFT, other) compares income, costs charged to that method, and expected vs actual amounts.</p>
+          <p>For each payment method (cash, card, EFT, other) you say where the expected money ended up. Expected is what was taken, less any costs paid out of that method.</p>
+          <ul className="list-disc pl-5 space-y-1">
+            <li><strong>In bank</strong>: card settlements, EFTs on the statement, cash that was deposited.</li>
+            <li><strong>Cash on hand</strong>: cash not deposited yet.</li>
+            <li><strong>Pending</strong>: on the card machine or Yoco report, or you have a proof of payment, but it isn&apos;t in the bank yet. Add the report or POP reference.</li>
+            <li><strong>Write-offs</strong>: money that&apos;s gone, such as card fees, bank charges or a cash shortfall. Write-offs come off net profit and show as &quot;Bank &amp; card charges&quot; in the reports.</li>
+          </ul>
+          <p>Each method shows what&apos;s still <strong>unaccounted</strong>. You can close with an unaccounted amount, but you&apos;ll be warned and it comes off profit.</p>
           <div className="space-y-4">
             <GuideItem icon={ClipboardCheck} title="Cash accountability" tone="amber">
-              Cash&apos;s &quot;actual&quot; figure isn&apos;t typed directly — it&apos;s the live total of the staff cash-count panel below, where each staff member enters their physical cash by denomination.
+              Counted cash comes from the staff cash-count panel below, where each staff member enters their physical cash by denomination. When counts are entered, cash on hand is the count less what reached the bank and any deposit fee (written off as a bank charge).
+            </GuideItem>
+            <GuideItem icon={Wallet} title="Pending money after closing" tone="blue">
+              Once the event is closed, pending money shows as outstanding. When it reaches the bank, use Mark received; if it never will, use Write off. You don&apos;t need to reopen the event.
             </GuideItem>
             <GuideItem icon={Lock} title="Closing the event" tone="rose">
-              Save draft keeps working on it later; Quick close skips detailed reconciliation; Close event with cashup locks everything in. A closed event can be Reopened if something needs fixing — both actions are logged in the History panel.
+              Save draft keeps working on it later; Quick close skips the settlement; Close event with cashup locks everything in. A closed event can be Reopened if something needs fixing, and the next cashup starts from the last one. Both actions are logged in the History panel.
             </GuideItem>
           </div>
         </div>
@@ -61,7 +71,7 @@ export const dashboardAdminCashupDetailHelpContent: HelpContent = {
       icon: FileBarChart,
       content: (
         <div className="space-y-4">
-          <p>A read-only summary of revenue by method, denomination breakdown, staff cash accountability, costs, donations, and net profit. This becomes the default view automatically once the event is closed.</p>
+          <p>A read-only summary of where the money ended up by method (in bank, on hand, pending, written off, unaccounted), write-offs, denomination breakdown, staff cash accountability, costs, donations, and net profit. This becomes the default view automatically once the event is closed.</p>
         </div>
       ),
     },

frontend/src/types/index.ts

@@ -183,7 +183,36 @@ export type EventCashupLine = {
   actualAmount?: number | null;
   variance?: number | null;
   notes?: string | null;
+  bankAmount?: number | null;
+  onHandAmount?: number | null;
+  pendingAmount?: number | null;
+  pendingReference?: string | null;
+  writeOffTotal?: number;
   denominations?: EventCashupDenomination[];
+  writeOffs?: CashupWriteOff[];
+};
+
+export type CashupWriteOffCategory = "card_fees" | "bank_charges" | "cash_shortfall" | "other";
+
+export type CashupWriteOff = {
+  id?: string;
+  category: CashupWriteOffCategory;
+  amount: number;
+  reason?: string | null;
+  createdAt?: string;
+  // Written off after the event was closed (from pending money that never arrived).
+  afterClose?: boolean;
+};
+
+export type PendingResolution = {
+  id: string;
+  lineId: string;
+  outcome: "received" | "written_off";
+  amount: number;
+  category?: CashupWriteOffCategory | null;
+  notes?: string | null;
+  performedBy?: { id: string; name: string } | null;
+  createdAt: string;
 };
 
 export type CashupAction = "closed" | "quick_closed" | "reopened";
@@ -204,12 +233,25 @@ export type EventCashup = {
   event?: Pick<Event, "id" | "title">;
 };
 
+// One method of the latest close, with pending money settled since then folded in.
 export type ReconciledByMethod = {
+  lineId: string | null;
   expected: number;
   actual: number | null;
   variance: number | null;
   notes?: string | null;
   denominations: EventCashupDenomination[];
+  bank: number | null;
+  onHand: number | null;
+  pending: number | null;
+  pendingReference: string | null;
+  pendingReceived: number;
+  pendingOutstanding: number;
+  pendingResolutions: PendingResolution[];
+  writeOffs: CashupWriteOff[];
+  writeOffTotal: number;
+  // expected − actual − write-offs; null when nothing was entered for the method.
+  unaccounted: number | null;
 };
 
 export type ReconciledSnapshot = {
@@ -225,9 +267,12 @@ export type ReconciledSnapshot = {
 export type CashupDraft = {
   lines?: {
     method: string;
-    actualAmount?: string | number;
-    notes?: string;
-    denominations?: { value: number; count: number }[];
+    bankAmount?: string | number | null;
+    onHandAmount?: string | number | null;
+    pendingAmount?: string | number | null;
+    pendingReference?: string | null;
+    writeOffs?: { category: CashupWriteOffCategory; amount: string | number | null; reason?: string | null }[];
+    notes?: string | null;
   }[];
 };
 
@@ -250,6 +295,11 @@ export type EventFinancials = {
   reconciled: ReconciledSnapshot | null;
   effectiveGrossIncomeByMethod: Record<CashupMethod, number>;
   effectiveTotalRevenue: number;
+  writeOffsByMethod: Record<CashupMethod, number>;
+  writeOffsByCategory: Record<CashupWriteOffCategory, number>;
+  // Card fees, bank charges and shortfalls written off; comes off net profit.
+  totalWriteOffs: number;
+  pendingOutstandingTotal: number;
   netProfit: number;
   // Coupon discounts given on the event's registrations.
   discountsTotal?: number;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hope-events",
-  "version": "1.26.0",
+  "version": "1.27.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "hope-events",
-      "version": "1.26.0",
+      "version": "1.27.1",
       "license": "ISC",
       "devDependencies": {
         "concurrently": "^9.2.1"

package.json

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