diff --git a/AGENTS.md b/AGENTS.md
index 285fce1..58d6ee0 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -22,7 +22,11 @@ What the app is and how to run it: [`README.md`](README.md). UI rules: [`docs/de
   backend's `people.*` responses with `people.contract.ts` and, in agent mode, uses the in-memory fake
   (`AGENT_PERMISSIONS`, `AGENT_PERSON` pick the viewer). `/dashboard` admits `people:self` without `admin:access`;
   Capo Admin and Team Lead come from the person's own record (`peopleRoles` in the route context) and only open their
-  sections. Handoff notes, decisions and the plan: `docs/people/`.
+  sections. Fees and receipts (`docs/people/fees.md`): `people:fees:write` reviews, marks paid and reminds;
+  `people:receipts:sign` downloads and uploads signed receipts for the officer on the caller's record.
+  Preparing CIE requests additionally requires `esign:sign` and reuses the existing eSign UI and agent; the backend
+  owns the durable receipt/request association and completion (the People backend contract is still pending). Handoff notes,
+  decisions and the plan: `docs/people/`.
 - **Shared UI**: `src/components/shell`, `src/components/primitives`, `src/components/ui`.
 
 ## Conventions
diff --git a/README.md b/README.md
index 2af26db..b5ca4ee 100644
--- a/README.md
+++ b/README.md
@@ -9,8 +9,10 @@ requires `azure:members:create`. Groups require `azure:groups:read`; adding and
 Telegram › Capo Admin and Account › My area for volunteers themselves. The dashboard talks to a typed `people.*`
 contract (`src/features/people/people.contract.ts`, documented in `docs/people/contract.md`); until the backend
 implements it, agent mode serves sample data from `people.fake.server.ts`. Permissions: `people:read`, `people:write`,
-`people:members:read`, `people:members:write`, `people:appoint`, and `people:self`, which alone admits non-admins to My
-area and, by the role on their record, Capo Admin or their team. See `docs/people/README.md`.
+`people:members:read`, `people:members:write`, `people:appoint`, `people:fees:write` (review transfer receipts, mark fees
+paid, reminders), `people:receipts:sign` (the President and Vice-president sign receipts), and `people:self`, which alone
+admits non-admins to My area and, by the role on their record, Capo Admin or their team. See `docs/people/README.md`
+and, for fees and receipts, `docs/people/fees.md`.
 
 Built with TanStack Start (React 19), Vite+, Nitro, Tailwind CSS v4 and shadcn/Base UI. The server is an OIDC BFF:
 only it holds the IdP access/refresh/ID tokens. Browsers hold an opaque, HttpOnly session cookie; sessions live in a
@@ -29,23 +31,23 @@ Signing in as a real user needs a development client registered in the IdP.
 
 Set the following runtime variables (the build does not need secrets):
 
-| Variable                  | Meaning                                                                                                                                                                                                                                              |
-| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `APP_URL`                 | Dashboard's public origin. Required outside development; HTTPS in production. Development defaults to `http://localhost:$PORT` (3001). Used for exact Origin CSRF validation and callback/logout URLs.                                               |
-| `BACKEND_URL`             | tRPC backend origin; use the in-cluster service address in production. Defaults to `http://localhost:3000` in development.                                                                                                                           |
-| `IDP_URL`                 | Public IdP origin; defaults to `https://auth.polinetwork.org`. Issuer is `$IDP_URL/api/auth`. Browser redirects retain this public origin.                                                                                                           |
-| `IDP_INTERNAL_URL`        | Optional internal IdP origin, e.g. `http://auth-service.auth.svc.cluster.local:3000`. Rewrites discovery, token, JWKS and revocation transport only; issuer, JWT assertion audiences (public token/revoke endpoints) and browser URLs remain public. |
-| `OIDC_CLIENT_ID`          | Registered confidential dashboard client, with authorization code and refresh grants, scopes `openid profile email offline_access backend:admin`, and backend resource link.                                                                         |
-| `OIDC_CLIENT_PRIVATE_JWK` | Private signing JWK JSON with `kid` and `alg` (`EdDSA`/Ed25519 or `ES256`/P-256); inject from this service's Key Vault. Register only its public JWKS in the IdP.                                                                                    |
-| `OIDC_CLIENT_SECRET`      | Alternative `client_secret_basic` credential; set exactly one client credential mode.                                                                                                                                                                |
-| `BACKEND_RESOURCE`        | Backend OAuth resource/audience; defaults to `https://backend.internal.polinetwork.org`. Sent on every authorize, code exchange and refresh request.                                                                                                 |
-| `REDIS_URL`               | Dedicated dashboard Redis connection. Required outside development; development defaults to `redis://localhost:6379`. Never point to shared backend Redis.                                                                                           |
-| `SESSION_SECRET`          | Independent random secret of at least 32 characters, encrypting the 10-minute state/nonce/PKCE cookie. Rotation invalidates pending login attempts.                                                                                                  |
-| `AGENT_PERMISSIONS`       | Development only. Comma-separated permissions for the agent-mode user (default: all). `people:self` alone previews the restricted People view.                                                                                                       |
-| `AGENT_PERSON`            | Development only. The agent-mode user's People record (default `P-0007`, Direttivo). `P-0098` is a Capo Admin, `P-0034` the IT Team Lead, `P-0115` an IT member; `match:P-0115` previews the first sign-in, `none` a sign-in without a record.       |
-| `AGENT_MODE`              | Fake all-permission user in development only. Backend must be a local fake or local legacy test instance. Production ignores this mode.                                                                                                              |
-| `PORT`                    | Local listening port (3001 by default); use a port ≥10000 for agent previews.                                                                                                                                                                        |
-| `TEST_REDIS_URL`          | Opt-in disposable Redis for integration tests. Tests create/delete only UUID session keys.                                                                                                                                                           |
+| Variable                  | Meaning                                                                                                                                                                                                                                                                                                                                            |
+| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `APP_URL`                 | Dashboard's public origin. Required outside development; HTTPS in production. Development defaults to `http://localhost:$PORT` (3001). Used for exact Origin CSRF validation and callback/logout URLs.                                                                                                                                             |
+| `BACKEND_URL`             | tRPC backend origin; use the in-cluster service address in production. Defaults to `http://localhost:3000` in development.                                                                                                                                                                                                                         |
+| `IDP_URL`                 | Public IdP origin; defaults to `https://auth.polinetwork.org`. Issuer is `$IDP_URL/api/auth`. Browser redirects retain this public origin.                                                                                                                                                                                                         |
+| `IDP_INTERNAL_URL`        | Optional internal IdP origin, e.g. `http://auth-service.auth.svc.cluster.local:3000`. Rewrites discovery, token, JWKS and revocation transport only; issuer, JWT assertion audiences (public token/revoke endpoints) and browser URLs remain public.                                                                                               |
+| `OIDC_CLIENT_ID`          | Registered confidential dashboard client, with authorization code and refresh grants, scopes `openid profile email offline_access backend:admin`, and backend resource link.                                                                                                                                                                       |
+| `OIDC_CLIENT_PRIVATE_JWK` | Private signing JWK JSON with `kid` and `alg` (`EdDSA`/Ed25519 or `ES256`/P-256); inject from this service's Key Vault. Register only its public JWKS in the IdP.                                                                                                                                                                                  |
+| `OIDC_CLIENT_SECRET`      | Alternative `client_secret_basic` credential; set exactly one client credential mode.                                                                                                                                                                                                                                                              |
+| `BACKEND_RESOURCE`        | Backend OAuth resource/audience; defaults to `https://backend.internal.polinetwork.org`. Sent on every authorize, code exchange and refresh request.                                                                                                                                                                                               |
+| `REDIS_URL`               | Dedicated dashboard Redis connection. Required outside development; development defaults to `redis://localhost:6379`. Never point to shared backend Redis.                                                                                                                                                                                         |
+| `SESSION_SECRET`          | Independent random secret of at least 32 characters, encrypting the 10-minute state/nonce/PKCE cookie. Rotation invalidates pending login attempts.                                                                                                                                                                                                |
+| `AGENT_PERMISSIONS`       | Development only. Comma-separated permissions for the agent-mode user (default: all). `people:self` alone previews the restricted People view.                                                                                                                                                                                                     |
+| `AGENT_PERSON`            | Development only. The agent-mode user's People record (default `P-0007`, Direttivo and President). `P-0098` is a Capo Admin and the Vice-president, `P-0034` the IT Team Lead, `P-0115` an IT member, `P-0045` has a fee receipt to review, `P-0021` a rejected one; `match:P-0115` previews the first sign-in, `none` a sign-in without a record. |
+| `AGENT_MODE`              | Fake all-permission user in development only. Backend must be a local fake or local legacy test instance. Production ignores this mode.                                                                                                                                                                                                            |
+| `PORT`                    | Local listening port (3001 by default); use a port ≥10000 for agent previews.                                                                                                                                                                                                                                                                      |
+| `TEST_REDIS_URL`          | Opt-in disposable Redis for integration tests. Tests create/delete only UUID session keys.                                                                                                                                                                                                                                                         |
 
 Before review run `pnpm check`, `pnpm typecheck`, `pnpm test` and `pnpm build`. Run real Redis tests with
 `TEST_REDIS_URL=redis://127.0.0.1:<test-port> pnpm test`. The OIDC integration test uses a local fake provider with
@@ -78,3 +80,8 @@ Logout deletes the server session, attempts refresh revocation, and redirects to
 requests require an `Origin` exactly equal to `APP_URL`'s configured origin. Sessions and identity responses are not
 cacheable. Production cookies are host-only, `Secure`, `HttpOnly`, `SameSite=Lax`; tokens and client keys never appear
 in browser storage or route loader output.
+
+People receipt signing reuses PoliNetwork eSign's CIE popup and keeps ZIP download/signed-file upload as an option.
+The People backend (including the durable receipt/eSign bridge) is still pending; see
+[`docs/people/fees.md`](docs/people/fees.md#integration-with-esign). Agent mode previews the manual receipt flow and
+reports the backend requirement for CIE signing.
diff --git a/docs/design.md b/docs/design.md
index d72ac40..79fea11 100644
--- a/docs/design.md
+++ b/docs/design.md
@@ -117,7 +117,7 @@ service title ("PoliNetwork Admin" on Overview), Search, the theme toggle and th
 as horizontally scrolling pills that scroll away with the page. The current pill stays in view after navigation,
 font loading and changes to the bar's width, including when it first appears below 760px. A 64px bottom nav lists the visible services (current one
 accent with a top bar, Reports with the open-reports dot). The device's bottom safe area adds space below the 64px
-bar. Below 360px, WhatsApp uses "WA" so all labels remain readable. Section pills and bottom nav are the only navigation; there
+bar. Below 360px, WhatsApp uses "WA" so all labels remain readable. With seven services, WhatsApp uses "WA" below 440px and Telegram uses "TG" below 360px. Section pills and bottom nav are the only navigation; there
 is no sheet.
 
 **Command palette** (`⌘K`/`Ctrl+K`, the rail and top bar Search, the Overview search): sections, "Find “…” in
@@ -264,7 +264,9 @@ first/last buttons); on narrow tables "‹ 1 of 34 ›".
 Clickable rows and rows with actions hover on `--pn-accent-soft`, using the brand blue in both themes.
 
 **Row actions** (`RowActions`, `IconButton`). Order: other actions → edit → delete → `⋮` menu, the menu always far
-right. Always visible, 2px apart, monochrome `--pn-fg-muted` ghosts. Every action uses brand blue on hover,
+right. A `⋮` menu holds at least two actions: a single one is its own icon button, and none leaves an empty slot so the
+icons of every row align. Menus never repeat the row's own link (Open record) or an action already visible on the row,
+never start with a separator, and keep destructive actions last after one. Always visible, 2px apart, monochrome `--pn-fg-muted` ghosts. Every action uses brand blue on hover,
 including destructive actions; `tone="info"` marks an "on" state in accent (the visibility eye). Group row actions keep their semantic
 colors at rest: labels use `--pn-warning-fg`, edit uses `--pn-success-fg`, and leave/delete use `--pn-danger-fg`.
 Visibility, labels, edit and leave/delete all hover in brand blue (`--pn-accent` on `--pn-accent-soft`);
@@ -329,11 +331,14 @@ the language name over a field-like box that holds the `bare` input. Single-line
 **Forms** (`FormField`, `fieldControl`). Label above, real `<label for>`. Required is unmarked; optional fields say
 "(optional)". Hints 12px under the field. Validate on submit, then on blur for fields that have errored; never per
 keystroke. Errors: danger border, 12px danger text with an icon, `aria-invalid` + `aria-describedby`. Read-only values
-are text in a `KeyValueList`, never disabled inputs. Length counters (`FieldCounter`) appear only in the last 20% of the
+are text in a `KeyValueList`, never disabled inputs. A single choice among a few explained options is a
+`RadioCardGroup` of `RadioCard`s (custom radios, arrow keys move the choice), never native radio inputs; files are
+chosen with `FileButton` or `FilePickerButton` (several files). Length counters (`FieldCounter`) appear only in the last 20% of the
 limit.
 
-Calendar dates use a custom picker at every viewport, display the same day–month–year format as read-only dates,
-and retain ISO values for the server. Month and year selectors are custom controls; calendars start on Monday.
+Calendar dates use `DateField`: a custom picker at every viewport that shows the same day–month–year format as read-only
+dates and keeps ISO values for the server. Its month and year selectors are custom controls (the years cover the last
+ten and the next one); calendars start on Monday.
 Grant date/time fields use the calendar and time wheels on touch devices too, with no native date/time fallback.
 
 **Alerts and toasts.** `InlineAlert` for what persists or needs action: load errors, dialog submit errors, partial
@@ -467,6 +472,13 @@ Rules that the templates above don't imply.
   use `FormDialog` with `submitTone="danger"`; plain confirmations stay `ConfirmDialog`.
 - **Member register**: status segments scope the table; Number leads on desktop, the name on mobile. Add member from a
   record opens the register's dialog via `?add=P-…`. Export confirms before downloading.
+- **Fees and receipts** (`docs/people/fees.md`): the register's first row action follows the fee (Review receipt,
+  Send reminder, or an empty slot); its header keeps one outline action (Send reminders), with Export register as a boxed
+  icon. People › Receipts is a queue with the pipeline as segments and the officer's to-sign count in the panel.
+  Sign with CIE uses the shared eSign flow; Download to sign and Upload signed stay in its signing-options menu.
+  Review receipt is an `lg` `FormDialog` whose Reject switches it to a required reason (`submitTone="danger"`, Back on
+  the left). The fee status shows once per page: the record and My area say it in their fee card, not in Member or My
+  roles. Amounts are `formatCents` ("€10.00") with tabular numbers.
 - **Admins**: Groups, Capo Admin of reference, Member and Census never hide; the rest follow the table width. The four
   quick filters scroll sideways on phones.
 - **Teams**: index cards then all members; a Team Lead without `people:read` sees only their team, as the section
diff --git a/docs/esign/contracts.md b/docs/esign/contracts.md
index f1eff8e..8071a44 100644
--- a/docs/esign/contracts.md
+++ b/docs/esign/contracts.md
@@ -94,3 +94,13 @@ permissions}, updatedBySub, updatedAt}], catalog: {roles: [{key, name}], permiss
 
 Placement: `{page (0-based), x, y, width, height}` as fractions of the displayed page (crop box after rotation),
 origin top-left.
+
+## People fee receipts
+
+People › Receipts reuses this signing flow through `people.receipts.prepareSignatures({receiptIds})` (1–10 distinct
+IDs), then passes the returned `requestId`s to `esign.jobs.create`. The bridge requires the People receipt-signing
+permission, the actual President/Vice-president and `esign:sign`; it does not require general request management.
+The backend fixes the issued PDF, officer and placement, persists receipt/request ownership and completes/delivers
+receipts after eSign completion without a browser callback. Retrying preparation reuses the request. Manual
+ZIP/download/upload remains supported; both paths share completion and concurrency guards. This bridge is part of
+the **pending People backend contract**: see [`../people/contract.md`](../people/contract.md#fees-and-receipts).
diff --git a/docs/people/README.md b/docs/people/README.md
index a318f4a..1ffcef8 100644
--- a/docs/people/README.md
+++ b/docs/people/README.md
@@ -7,6 +7,7 @@ Everything an agent needs to build, or continue building, the People area of the
 | [`brief.md`](brief.md)         | The original brief, verbatim                                                             |
 | [`decisions.md`](decisions.md) | What was settled after the brief: owner decisions, navigation, per-page rules, roles     |
 | [`contract.md`](contract.md)   | The `people.*` backend contract the dashboard codes against                              |
+| [`fees.md`](fees.md)           | Fees and receipts: renewal flow, signing, reminders, screens and the receipt PDF         |
 | [`plan.md`](plan.md)           | Phases, checklist and progress log: **start here to know what is done and what is next** |
 | [`prototype/`](prototype/)     | The clickable prototype's source (structure and copy reference only)                     |
 
diff --git a/docs/people/contract.md b/docs/people/contract.md
index 479c25a..b9efc6b 100644
--- a/docs/people/contract.md
+++ b/docs/people/contract.md
@@ -8,7 +8,8 @@ and `people.me.roles` returns `{ capoScope, leads }` for the navigation. In agen
 dashboard serves the same shapes from `src/features/people/people.fixtures.server.ts`.
 
 Every procedure checks permissions server-side; the "Needs" column is the minimum. Dates are ISO `YYYY-MM-DD` strings
-(`Europe/Rome`); timestamps ISO 8601. Academic years are strings like `"2026/27"`.
+(`Europe/Rome`); timestamps ISO 8601. Academic years are strings like `"2026/27"` and start on 1 September: the
+dashboard labels the current census and fee year from today's date (`currentYear()` in `people-format.ts`).
 
 ## Shared types
 
@@ -77,8 +78,20 @@ type CensusEntry = {
 
 type Account =
   | { status: "none" }
-  | { status: "invite"; email: string; sentOn: string; expiresOn: string; sentBy: string }
-  | { status: "linked"; email: string; via: string; linkedOn: string; how: string }
+  | {
+      status: "invite"
+      email: string
+      sentOn: string
+      expiresOn: string
+      sentBy: string
+    }
+  | {
+      status: "linked"
+      email: string
+      via: string
+      linkedOn: string
+      how: string
+    }
   | { status: "review"; reviewId: string; issue: string }
 
 type PersonSummary = {
@@ -186,7 +199,12 @@ type Review = {
   id: string
   kind: "telegram-conflict" | "ask-to-be-added" | "two-records" | "not-me" | "name-only"
   since: string
-  account: { name: string; email: string; telegram: string | null; via: string }
+  account: {
+    name: string
+    email: string
+    telegram: string | null
+    via: string
+  }
   record: { id: PersonId; name: string } | null
   other: { id: PersonId; name: string } | null
   message: string | null
@@ -237,21 +255,140 @@ type MyArea =
       }[]
       roster: {
         team: TeamId
-        members: { name: string; role: TeamRole; telegram: string | null; email: string | null }[]
+        members: {
+          name: string
+          role: TeamRole
+          telegram: string | null
+          email: string | null
+        }[]
       } | null
     }
   | {
       state: "match"
-      candidate: { id: PersonId; name: string; course: string; year: string; campus: Campus; roles: string[] }
+      candidate: {
+        id: PersonId
+        name: string
+        course: string
+        year: string
+        campus: Campus
+        roles: string[]
+      }
       reason: string
     }
   | { state: "none"; request: { sentOn: string } | null }
 ```
 
+## Fees and receipts
+
+The flow, screens and PDF template are in [`fees.md`](fees.md). `PersonRecord` gains `fees` (`null` for people who
+were never members, or without `people:members:read` except on the caller's own record), and the linked `MyArea` gains
+`feeInstructions` (bank details while the caller is a current member). Amounts are integer cents; files travel as
+`{ fileName, contentType, base64 }`.
+
+```ts
+type FeeDetail = {
+  year: string // "2026/27"
+  status: FeeStatus // the same value as member.fee
+  amountCents: number
+  dueOn: string
+  upload: {
+    fileName: string
+    size: number
+    uploadedAt: string
+    transferDate: string
+    amountCents: number
+  } | null
+  rejection: { reason: string; by: string; at: string } | null // until the member uploads again
+  payment: {
+    paidOn: string
+    method: "transfer" | "cash"
+    amountCents: number
+    transferDate: string | null
+  } | null
+  lastReminder: string | null
+}
+
+type Receipt = {
+  id: string
+  number: string // "2026/042", never reused
+  year: string // fee year
+  person: { id: PersonId; name: string }
+  memberNumber: string
+  amountCents: number
+  issuedOn: string
+  paidOn: string
+  method: "transfer" | "cash"
+  transferDate: string | null
+  status: "toSign" | "signed" | "sent" | "failed" | "voided"
+  signer: "president" | "vicePresident" // the Vice-president signs the President's own
+  signedBy: string | null
+  signedOn: string | null
+  sentAt: string | null
+  sentTo: string | null
+  failure: string | null
+  voided: { reason: string; by: string; on: string } | null
+}
+
+type Fees = { current: FeeDetail | null; receipts: Receipt[] } // newest first, voided included
+```
+
+| Procedure                           | Kind     | Input                                                                  | Output                                                                                       | Needs                                 |
+| ----------------------------------- | -------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------- |
+| `people.fees.review`                | query    | `{ personId }`                                                         | `{ person, memberNumber, m365Email, fee: FeeDetail, rejections, nextReceipt }`               | `people:fees:write`                   |
+| `people.fees.upload`                | query    | `{ personId }`                                                         | file: the uploaded transfer receipt                                                          | `people:fees:write`                   |
+| `people.fees.approve`               | mutation | `{ personId }`                                                         | `{ receipt }` (the number issued)                                                            | `people:fees:write`                   |
+| `people.fees.reject`                | mutation | `{ personId, reason }`                                                 | `void` (fee back to Due, or Unpaid after the deadline)                                       | `people:fees:write`                   |
+| `people.fees.markPaid`              | mutation | `{ personId, paidOn, amountCents, method, note }`                      | `{ receipt }`                                                                                | `people:fees:write`                   |
+| `people.fees.remind`                | mutation | `{ personId: PersonId \| null }`                                       | `{ sent, skipped }` (all: Due and Unpaid, skips reminded < 3 days)                           | `people:fees:write`                   |
+| `people.receipts.list`              | query    | `{ year: string \| null }` (null: current fee year)                    | `{ year, years, viewerSigner, officers: { president, vicePresident }, receipts }`            | `people:members:read`                 |
+| `people.receipts.download`          | query    | `{ receiptId }`                                                        | file: the signed copy once there is one, else the generated PDF                              | `people:members:read`                 |
+| `people.receipts.prepareSignatures` | mutation | `{ receiptIds: string[] }` (1–10 distinct IDs)                         | `{ receiptId, requestId: UUID, title }[]`                                                    | `people:receipts:sign` + `esign:sign` |
+| `people.receipts.toSign`            | mutation | —                                                                      | file: a ZIP of the receipts waiting for the caller's signature                               | `people:receipts:sign`                |
+| `people.receipts.previewSigned`     | mutation | `FormData` (`files`: up to 100 PDF or .p7m, 10 MB each)                | `{ uploadId, files: { fileId, fileName, size, receiptId, signature: { valid, signer } }[] }` | `people:receipts:sign`                |
+| `people.receipts.sendSigned`        | mutation | `{ uploadId, assignments: Record<fileId, receiptId> }`                 | `{ sent, failed }`                                                                           | `people:receipts:sign`                |
+| `people.receipts.retry`             | mutation | `{ receiptId }`                                                        | `void`                                                                                       | `people:fees:write`                   |
+| `people.receipts.void`              | mutation | `{ receiptId, reason }`                                                | `void`                                                                                       | `people:fees:write`                   |
+| `people.me.uploadTransferReceipt`   | mutation | `FormData` (`file` PDF/JPG/PNG ≤ 10 MB, `transferDate`, `amountCents`) | `void` (fee → Receipt uploaded)                                                              | `people:self`                         |
+| `people.me.receipt`                 | query    | `{ receiptId }`                                                        | file: one of the caller's own signed receipts                                                | `people:self`                         |
+
+Backend rules for fees and receipts:
+
+- **Officers**: the association's President and Vice-president are configuration on the backend (or a record field).
+  `viewerSigner` is the caller's office, and only when they also hold `people:receipts:sign`. Every receipt's `signer`
+  is `president`, except the President's own (`vicePresident`). `toSign`, `previewSigned` and `sendSigned` act only on
+  receipts whose `signer` is the caller's office.
+- **CIE preparation**: `prepareSignatures` requires `admin:access`, both signing permissions and the actual officer
+  on the linked, confirmed People record. Validate the whole batch before creating anything: 1–10 distinct receipts,
+  all `toSign`, all assigned to that officer. Resolve officer IdP subjects on the backend; the browser never chooses
+  a signer, PDF, placement, recipient or output drive. Create or reuse one active eSign request per receipt/version
+  under a uniqueness constraint; retries return the same requests. Use the issued PDF with its hash and fixed signature
+  placement, the caller's office, and no separate eSign delivery (the receipt pipeline owns the email).
+- **CIE completion**: bind the receipt to its eSign request persistently. The eSign completion transaction verifies
+  the signature, officer, current receipt/version and `toSign` status, stores the signed PDF, writes Activity and queues
+  the receipt email exactly once. Cancellation or failure leaves the receipt `toSign` for retry or manual upload;
+  voiding invalidates active eSign requests/jobs. A manual upload also completes or cancels the linked request/jobs.
+  Use concurrency guards so an upload and CIE completion cannot replace each other's file or send twice. Completion
+  and delivery must work with the browser closed, including requests signed later from Signatures › To sign. A
+  receipt's active eSign request is system-owned: generic request deletion must not break receipt retention/audit.
+- **Numbering**: per fee year, `YYYY/NNN` from the year's first calendar year; issued atomically, never reused, voided
+  ones included.
+- **Signatures**: verify each file for real (PAdES in the PDF or a CAdES `.p7m`), that the certificate is the officer's,
+  and that the signed document is the receipt it is matched to. Refuse the whole send when any assignment points at an
+  unsigned file, a receipt that isn't `toSign`, another officer's receipt, or the same receipt twice.
+- **Email**: send the signed receipt to the member's Microsoft 365 address; on failure keep the receipt `failed` with
+  the mail server's reason until Retry.
+- **Reminders**: automatic ones go out 14 and 3 days before the deadline to members whose fee is Due; manual ones
+  follow `people.fees.remind`. Each sets `lastReminder` and writes an activity line.
+- **Uploads**: check the content, not the extension (PDF, JPEG or PNG; PDF or CMS for signed files), and the size.
+- **Activity**: upload, approval, rejection (with the reason), Mark as paid (with the note), issue, signature, email,
+  failure, retry, void and reminders each add a line to the person's activity.
+- **Members** download only their own receipts, and only once signed (`signed`, `sent` or `failed`).
+
 ## Permissions
 
 New IdP permissions (add to `src/server/permissions.ts`): `people:self`, `people:read`, `people:write`,
-`people:members:read`, `people:members:write`, `people:appoint`. Capo Admin and Team Lead are not permissions: they
+`people:members:read`, `people:members:write`, `people:appoint`, and for fees `people:fees:write` and
+`people:receipts:sign`. Capo Admin and Team Lead are not permissions: they
 come from the signed-in person's record (`people.me.get`), and the backend scopes `people.capo.*` and team writes to
 them.
 
diff --git a/docs/people/decisions.md b/docs/people/decisions.md
index 97763b6..bee61ae 100644
--- a/docs/people/decisions.md
+++ b/docs/people/decisions.md
@@ -43,8 +43,8 @@ Known prototype defects to not reproduce:
 
 ## Navigation
 
-- **People** is a rail service (`UsersRound`), placed first after Search. Sections: Overview, Member register, Admins,
-  Teams, Census, Linking. Deep pages: person (`/dashboard/people/$personId`), team (`/dashboard/people/teams/$teamId`),
+- **People** is a rail service (`UsersRound`), placed first after Search. Sections: Overview, Member register,
+  Receipts, Admins, Teams, Census, Linking. Deep pages: person (`/dashboard/people/$personId`), team (`/dashboard/people/teams/$teamId`),
   campaign (`/dashboard/people/census/$campaignId`).
 - **Capo Admin** is a Telegram section (`/dashboard/telegram/capo`, icon `Crown`), visible only to Capo Admins. A Capo
   Admin without other rights sees Telegram with that one section, so no panel (one-section rule).
@@ -52,7 +52,8 @@ Known prototype defects to not reproduce:
   and Sign-in & security (today's `/dashboard/account`, unchanged content).
 - A **Team Lead** without people rights gets People with only Teams, which opens their team directly.
 - People with only `people:self`: the logo links to My area instead of Overview.
-- Linking shows its needs-review count in the panel, like Reports › Open, because it is a queue.
+- Linking shows its needs-review count in the panel, like Reports › Open, because it is a queue. Receipts does the
+  same with the receipts waiting for the signed-in officer.
 
 ## Data and display
 
@@ -70,7 +71,7 @@ Known prototype defects to not reproduce:
 
 - **Overview**: personal email is the secondary line. Admin is a state badge (Active / Former); Capo Admin a scope chip.
   Last census reads "year · answer" and falls back to the last answered year. Row actions: Send invite (only while not
-  linked; linked rows keep an empty slot so icons align) and ⋮ (Open record, Link account, Add to team). Columns hide
+  linked; linked rows keep an empty slot so icons align) and Link account (while not linked). The row itself opens the record, so no menu repeats it. Columns hide
   by priority: Capo Admin, then Last census, then Teams.
 - **Person record**: two columns from 1100px (1.55 : 1): left Profile, Admin, Teams, Census history; right Account,
   Member, Consents, HR notes. Activity full width below. Discrepancies are warning `InlineAlert`s above the cards, each
@@ -83,13 +84,13 @@ Known prototype defects to not reproduce:
   Actions column and no header actions.
 - **Admins**: course is the name's secondary line. Groups, Capo Admin of reference, Member and Census always show;
   Year, Campus, Active since, then Requested, Representative, Other associations and Available as Capo Admin appear as
-  the table widens. Active / Former is the scope control. Row icon: Open in Telegram; the rest in ⋮.
+  the table widens. Active / Former is the scope control. Row icon: Open in Telegram; the role actions follow it.
 - **Teams**: index = one `NavCard` per team (lead, member count, missing census answers) then all team members in one
   table with a Team column. Team page columns follow the team's fields (IT: GitHub, Areas; Design & Social: Tools,
   Portfolio; HR and Events: Focus; International: Languages). Team Leads see phone and Telegram for their team. Lead
   option in Add to team only for `people:appoint`. End membership needs a reason and keeps history.
 - **Census**: campaign list is a table with a stacked progress meter and counts. Campaign page: Import responses
-  (primary), Send reminders (outline), Close campaign in ⋮. Segments: Expected (all), Answered, Continuing, Leaving, No
+  (primary), Send reminders (outline, an icon on phones) and Close campaign (icon). Segments: Expected (all), Answered, Continuing, Leaving, No
   answer. Reminders skip people reminded in the last 3 days, and the confirmation says how many. No "New campaign"
   while one is open.
 - **Import wizard**: lg dialog (bottom sheet on mobile), five steps Upload → Review → Duplicates → Telegram → Confirm;
@@ -109,6 +110,11 @@ Known prototype defects to not reproduce:
   this you?" card with the matched record and the match reason. No record: empty state with Ask to be added, then a
   "Waiting for HR" state.
 
+- **Fees and receipts**: see [`fees.md`](fees.md). The register's Fee column keeps its badge and gains the fee's own
+  row action; Send reminders becomes the register's outline action and Export register a boxed icon next to Add
+  member. People › Receipts is the signing queue. The record gets a Fees and receipts card, My area a Membership fee
+  card. Receipts are never deleted, only voided.
+
 ## Roles to permissions
 
 | Viewer      | Permissions (IdP)                                                                                                             | Sees                                              |
@@ -120,5 +126,10 @@ Known prototype defects to not reproduce:
 | Team member | `people:self`                                                                                                                 | My area with their team roster                    |
 | Admin only  | `people:self`                                                                                                                 | My area                                           |
 
+Fees add `people:fees:write` (the Direttivo, or whoever handles payments) and `people:receipts:sign` (the President
+and the Vice-president, who sign only as the officer on their own record). Direct CIE signing also needs `esign:sign`;
+it reuses PoliNetwork eSign with a durable backend receipt/request association. ZIP download and signed-file upload
+remain an option.
+
 Contacts (phone, personal email) need `people:read`, or Capo Admin scope / Team Lead role over that person. HR notes and
 full census answers need `people:read`. The backend enforces all of this again; the dashboard only hides.
diff --git a/docs/people/fees.md b/docs/people/fees.md
new file mode 100644
index 0000000..c80d4cc
--- /dev/null
+++ b/docs/people/fees.md
@@ -0,0 +1,111 @@
+# People area: fees and receipts
+
+How a member renews and gets a receipt. Shapes and procedures are in [`contract.md`](contract.md) ("Fees and
+receipts"); `src/features/people/people.contract.ts` stays the source of truth. The design canvas (desktop and mobile,
+light and dark, every state) is <https://claude.ai/artifact/LoNAUNpx6bfgRni9Bhqkyy>, private to the owner; like the
+People prototype it fixes structure and copy, while spacing comes from the primitives.
+
+## The flow
+
+1. **The member pays** by bank transfer, outside the dashboard, with the reference My area gives them
+   (`Quota 2026/27 0344 Name Surname`), then uploads the bank's transfer receipt in **Account › My area** with the
+   transfer date and amount. The fee turns **Receipt uploaded**.
+2. **An admin reviews** it (`people:fees:write`) from **People › Member register** or the person's record: **Approve**
+   or **Reject** with a reason the member reads in My area and in the email. Without an upload, **Mark as paid** records
+   a payment by hand (date, amount, bank transfer or cash, optional note). Every change shows at once.
+3. **The system issues the receipt** on approval or Mark as paid: a PDF filled in from the record, numbered in issue
+   order per fee year (`2026/042`: the fee year's first calendar year and a sequence never reused, voided ones
+   included). It is **To sign**.
+4. **The President signs** (`people:receipts:sign`, plus `esign:sign` for CIE): **People › Receipts › Sign with CIE**
+   opens the existing [PoliNetwork eSign](https://github.com/PoliNetworkOrg/esign) flow, up to 10 receipts with one PIN.
+   The backend prepares or reuses a durable eSign request for each receipt, fixing the PDF and its signing officer.
+   The PIN stays in the local eSign window. Completion saves the signed PDF and emails it to the member even if the
+   dashboard has closed. A receipt becomes **Signed**, then **Sent**, or **Send failed** with Retry sending on the row.
+   **Download to sign** and **Upload signed** remain available in the signing options for signing externally with the
+   CIE app. The backend matches uploaded files by number, verifies their signature and lets the officer correct matches.
+5. **The President's own receipt** is signed by the **Vice-president**: it waits in their queue, and the President's
+   upload marks it **Needs another signer**.
+6. Receipts are **never deleted**. **Void receipt** keeps the number and the file with a reason; voiding this year's
+   only receipt reopens the fee (Due, or Unpaid after the deadline) so a correct one can be issued.
+
+Fee states (from the People contract, unchanged): **Due** (warning) before the deadline, **Receipt uploaded** (brand),
+**Paid** (success), **Unpaid** (danger) after the deadline. Receipt states: **To sign** (warning), **Signed** (brand),
+**Sent** (success), **Send failed** (danger), **Voided** (neutral).
+
+## Reminders
+
+- **Automatic**, by the backend: an email 14 and 3 days before the deadline (31 Oct for 2026/27) to every current
+  member whose fee is Due. The dashboard shows when the last one went out.
+- **By hand**: Send reminder on a register row or record (no confirmation: it only sends an email), or the register's
+  page action **Send reminders**, which confirms first and skips members reminded in the last 3 days.
+- Every reminder, upload, review, payment, signature, email and void is a line in the person's Activity.
+
+## Permissions
+
+| Permission             | Gives                                                                                                                                |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `people:members:read`  | People › Receipts (read-only), the record's Fees and receipts card, receipt downloads                                                |
+| `people:fees:write`    | Review receipt, Mark as paid, Send reminder(s), Retry sending, Void receipt                                                          |
+| `people:receipts:sign` | Prepare CIE receipt requests, Download to sign, Upload signed, for the officer on the signed-in record (President or Vice-president) |
+| `people:self`          | My area's fee card: pay, upload the transfer receipt, download one's own signed receipts                                             |
+
+These names are provisional, in the style of the People permissions. Holding `people:receipts:sign` is not enough: the
+backend signs only for the person who holds the office (`viewerSigner`), so the queue and the ZIP follow the record,
+not the permission.
+
+## Screens
+
+- **Member register**: the Fee column keeps its badge and filter; the row's first action follows the fee (Review
+  receipt for Receipt uploaded, Send reminder for Due and Unpaid, an empty slot otherwise, so icons align); Mark as
+  paid joins the row's other actions. The page's outline action is Send reminders; Export register is a boxed icon
+  button after Add member, in the same place for everyone who can export (one primary and at most one outline per
+  header).
+- **Review receipt** (lg dialog, bottom sheet on phones): the uploaded file (a PDF's pages drawn with pdf.js, an image shown, Open in a new
+  tab), the member and fee year, the declared transfer, earlier rejections, and the receipt number approving would
+  issue. Reject switches the dialog to a required reason with three one-click starts; Back returns.
+- **People › Receipts** (new section, `Receipt` icon, after Member register): fee-year menu, search, a segmented filter
+  over the pipeline with totals, and a table (Receipt, Member, Amount, Issued on, Signer, Status). Signers see "n
+  receipts are waiting for your signature", Sign with CIE and a signing-options menu; the section shows their count in the panel, like
+  Reports › Open. A danger alert leads to Send failed.
+- **Upload signed receipts** (lg dialog): one row per file with its receipt (a select to correct the match) and the
+  outcome: Signed, Not signed, Needs another signer, No receipt, Duplicate or Already signed. "Send n receipts" sends
+  only the Signed ones.
+- **Person record**: a Fees and receipts card under Member (the fee status lives there only): the current year, the
+  upload or payment, the last rejection and reminder, then every receipt with its PDF.
+- **My area**: a Membership fee card under the census: bank details with copy buttons and Upload transfer receipt
+  while Due or Unpaid, the rejection reason when there is one, the review state while uploaded, the receipt being
+  signed once paid, and the signed receipts to download.
+
+## Receipt PDF
+
+A4, Italian, light only. In agent mode `receipt-files.server.ts` renders it; the backend owns the real one.
+
+- Header: PoliNetwork, legal form, registered address and tax code (placeholders until the backend has them);
+  "Ricevuta n. 2026/042" and "Milano, 15 ottobre 2026" on the right.
+- Title "Ricevuta di pagamento della quota associativa".
+- Ricevuto da: name, tax code (placeholder), member number.
+- La somma di: the amount in figures (`€ 10,00`) and in words (`dieci/00 euro`).
+- A titolo di: "Quota associativa per l'anno sociale 2026/27", the method (Bonifico bancario / Contanti) and its date.
+- A placeholder for the tax note, if one applies.
+- Signature space: "Il Presidente" (or "Il Vicepresidente" on the President's own receipt) over a line and the name.
+- Footer: association details and "Ricevuta 2026/042 · pagina 1 di 1".
+
+## Agent mode
+
+The sample data adds fee years and receipts from their own seed: a sent 2025/26 receipt for older members, this year's
+receipts in payment order with the newest to sign, one Send failed and one Voided. `AGENT_PERSON=P-0007` (default) is
+the President, `P-0098` the Vice-president, `P-0045` has a receipt to review and `P-0021` a rejected one. A file counts
+as signed when it is a `.p7m`, holds a PDF signature dictionary (`/ByteRange`) or has "signed"/"firmata" in its name.
+
+## Integration with eSign
+
+The existing `esign.jobs.create`, job-status polling, cancellation and `/api/esign/agent/…` proxy are reused without
+changes to the local agent. `people.receipts.prepareSignatures` (see [`contract.md`](contract.md)) is the backend
+bridge. It needs both `people:receipts:sign` and `esign:sign`, plus `admin:access`, but does not grant the general
+`esign:requests:manage` permission. The backend must create the association and finish the receipt transaction;
+copying files back in a browser callback would lose completion when the page closes.
+
+**Backend implementation remains pending**, together with the rest of the People contract. The dashboard implements
+the validated adapter and shared CIE UI, not PDF signing or email delivery. Agent mode deliberately reports that CIE
+signing needs the backend; it does not invent eSign request IDs or mark sample receipts signed through the CIE action.
+The existing manual demo remains available.
diff --git a/docs/people/plan.md b/docs/people/plan.md
index 8290121..22ce7aa 100644
--- a/docs/people/plan.md
+++ b/docs/people/plan.md
@@ -117,6 +117,17 @@ src/routes/dashboard/account/  me.tsx (My area), index.tsx (today's Account page
       architecture lines
 - [x] PR description final, all checks green
 
+### 11. Fees and receipts ([`fees.md`](fees.md))
+
+- [x] Contract: `FeeDetail`, `Receipt`, `fees` on the record, `feeInstructions` in My area, the `people.fees.*`,
+      `people.receipts.*` and two `people.me.*` procedures; permissions `people:fees:write`, `people:receipts:sign`
+- [x] Agent mode: seeded fee years and receipts, review, Mark as paid, reminders, signing, email failure, void; the
+      receipt PDF and the ZIP to sign (`receipt-files.server.ts`)
+- [x] Member register: fee row actions, Send reminders, Export in ⋮; Review receipt and Mark as paid dialogs
+- [x] People › Receipts with its panel count; Upload signed receipts; Void receipt; Retry sending
+- [x] Person record Fees and receipts card; My area Membership fee card and Upload transfer receipt
+- [ ] Backend: implement the procedures, the officers, automatic reminders, signature verification and email
+
 ## Progress log
 
 Newest last. One line per commit or session: date, what was done, what is next.
@@ -169,3 +180,14 @@ Newest last. One line per commit or session: date, what was done, what is next.
   every People route redirects to sign-in. Still open: empty states are written for every list but were never seen
   with empty data (the fake has no empty mode), loading skeletons were not looked at, and the signed-in flow without
   agent mode needs a development IdP client.
+- 2026-10-16: phase 11 (fees and receipts) on its own branch over this PR: contract, agent-mode data and files, Member
+  register actions, People › Receipts, Upload signed receipts, record and My area cards, `docs/people/fees.md`.
+  Verified in agent mode at 1440 and 390, light and dark, as the President (`P-0007`) and a rejected member
+  (`P-0021`): approve, reject, Mark as paid, reminders, download to sign, upload and send, retry, void, member upload.
+  Next: the backend side.
+
+- 2026-10-17: reconciled #97 and #100 with main's eSign routes and shared pending counts. People › Receipts now
+  reuses `SignWithCie` for batches of up to ten and keeps manual download/upload in its options. Added the durable
+  `people.receipts.prepareSignatures` contract and adapter, both signing permissions, and regression tests for
+  officer restrictions, loader refresh and merged navigation. The People backend bridge remains pending, so agent
+  mode reports that requirement instead of simulating CIE success.
diff --git a/src/features/people/date-field.tsx b/src/components/primitives/date-field.tsx
similarity index 83%
rename from src/features/people/date-field.tsx
rename to src/components/primitives/date-field.tsx
index 45dfe47..5e39de4 100644
--- a/src/features/people/date-field.tsx
+++ b/src/components/primitives/date-field.tsx
@@ -1,7 +1,6 @@
 import { CalendarIcon } from "lucide-react"
 import { useRef, useState } from "react"
 
-import { buttonMotion, fieldControl, floatingMotion, raisedSurface } from "@/components/primitives"
 import { Button } from "@/components/ui/button"
 import { Calendar } from "@/components/ui/calendar"
 import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "@/components/ui/popover"
@@ -9,7 +8,9 @@ import { dateOnlyValue, parseDateOnly } from "@/lib/date-only"
 import { formatDate } from "@/lib/format"
 import { cn } from "@/lib/utils"
 
-import { SelectField } from "./people-ui"
+import { fieldControl } from "./form-field"
+import { buttonMotion, floatingMotion, raisedSurface } from "./motion"
+import { SelectField } from "./select-field"
 
 const MONTHS = [
   "January",
@@ -26,7 +27,11 @@ const MONTHS = [
   "December",
 ].map((label, index) => ({ value: String(index), label }))
 
-/** A custom calendar at every viewport; its stored value is ISO, its visible date matches the rest of the app. */
+/**
+ * A calendar date: a custom picker at every viewport, with month and year selects over the grid. The value is ISO
+ * (`YYYY-MM-DD`, or `""` when empty); the button shows the same day–month–year as read-only dates. The year select
+ * covers the last `pastYears` and the next `futureYears`, widened to include the chosen date.
+ */
 export function DateField({
   id,
   value,
@@ -34,6 +39,8 @@ export function DateField({
   invalid = false,
   describedBy,
   disabled = false,
+  pastYears = 10,
+  futureYears = 1,
 }: {
   id: string
   value: string
@@ -41,13 +48,16 @@ export function DateField({
   invalid?: boolean
   describedBy?: string
   disabled?: boolean
+  pastYears?: number
+  futureYears?: number
 }) {
   const selected = parseDateOnly(value)
   const [open, setOpen] = useState(false)
   const popupRef = useRef<HTMLDivElement>(null)
   const [month, setMonth] = useState(() => selected ?? new Date())
-  const firstYear = Math.min(1900, month.getFullYear())
-  const lastYear = Math.max(new Date().getFullYear() + 10, month.getFullYear())
+  const thisYear = new Date().getFullYear()
+  const firstYear = Math.min(thisYear - pastYears, month.getFullYear())
+  const lastYear = Math.max(thisYear + futureYears, month.getFullYear())
   const years = Array.from({ length: lastYear - firstYear + 1 }, (_, index) => {
     const year = String(lastYear - index)
     return { value: year, label: year }
diff --git a/src/components/primitives/file-button.tsx b/src/components/primitives/file-button.tsx
index 86e7ff5..74c8278 100644
--- a/src/components/primitives/file-button.tsx
+++ b/src/components/primitives/file-button.tsx
@@ -19,6 +19,61 @@ type FileButtonProps = {
   className?: string
 }
 
+/** The outline button over a hidden file input. `FileButton` adds the chosen file's chip; alone it picks several. */
+export function FilePickerButton({
+  id,
+  onFiles,
+  accept,
+  multiple = false,
+  label,
+  pending = false,
+  invalid = false,
+  describedBy,
+}: {
+  id?: string
+  onFiles: (files: File[]) => void
+  accept?: string
+  multiple?: boolean
+  label: string
+  pending?: boolean
+  invalid?: boolean
+  describedBy?: string
+}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  return (
+    <>
+      <input
+        ref={inputRef}
+        id={id}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        aria-invalid={invalid || undefined}
+        aria-describedby={describedBy}
+        onChange={(event) => {
+          const files = Array.from(event.target.files ?? [])
+          // Cleared so choosing the same file again still fires a change.
+          event.target.value = ""
+          onFiles(files)
+        }}
+        className="sr-only"
+        tabIndex={-1}
+      />
+      <LoadingButton
+        type="button"
+        variant="outline"
+        icon={Upload}
+        pending={pending}
+        aria-describedby={describedBy}
+        onClick={() => inputRef.current?.click()}
+        className={cn("shadow-none", invalid && "border-(--pn-danger-solid)")}
+      >
+        {label}
+      </LoadingButton>
+    </>
+  )
+}
+
 /** Outline "Choose file" button + selected filename chip with remove, and the type/size hint. */
 export function FileButton({
   file,
@@ -30,40 +85,21 @@ export function FileButton({
   id,
   className,
 }: FileButtonProps) {
-  const inputRef = useRef<HTMLInputElement>(null)
   const generatedId = useId()
   const inputId = id ?? generatedId
   const hintId = `${inputId}-hint`
 
-  function clear() {
-    if (inputRef.current) inputRef.current.value = ""
-    onChange(null)
-  }
-
   return (
     <div className={cn("flex flex-col gap-1.5", className)}>
       <div className="flex flex-wrap items-center gap-2">
-        <input
-          ref={inputRef}
+        <FilePickerButton
           id={inputId}
-          type="file"
           accept={accept}
-          aria-invalid={invalid || undefined}
-          aria-describedby={hint ? hintId : undefined}
-          onChange={(event) => onChange(event.target.files?.[0] ?? null)}
-          className="sr-only"
-          tabIndex={-1}
+          label={label}
+          invalid={invalid}
+          describedBy={hint ? hintId : undefined}
+          onFiles={(files) => onChange(files[0] ?? null)}
         />
-        <LoadingButton
-          type="button"
-          variant="outline"
-          icon={Upload}
-          aria-describedby={hint ? hintId : undefined}
-          onClick={() => inputRef.current?.click()}
-          className={cn("shadow-none", invalid && "border-(--pn-danger-solid)")}
-        >
-          {label}
-        </LoadingButton>
         {file && (
           <span className="inline-flex h-7 max-w-64 items-center gap-1.5 rounded-(--pn-r-full) bg-(--pn-muted) pr-0.5 pl-2.5 text-xs font-medium text-(--pn-fg)">
             <FileText aria-hidden className="size-3.5 shrink-0 text-(--pn-fg-muted)" />
@@ -74,7 +110,7 @@ export function FileButton({
               <button
                 type="button"
                 aria-label="Remove file"
-                onClick={clear}
+                onClick={() => onChange(null)}
                 className="relative flex size-6 shrink-0 items-center justify-center rounded-full text-(--pn-fg-muted) transition-[background-color,color] duration-120 after:absolute after:-inset-1.5 hover:bg-(--pn-hover) hover:text-(--pn-fg)"
               >
                 <X aria-hidden className="size-3.5" />
diff --git a/src/components/primitives/filter-menu.tsx b/src/components/primitives/filter-menu.tsx
new file mode 100644
index 0000000..c8dbf62
--- /dev/null
+++ b/src/components/primitives/filter-menu.tsx
@@ -0,0 +1,122 @@
+import { Check, ChevronDown } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Toggle } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils"
+
+import { Menu, MenuContent, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuTrigger } from "./menu"
+import { buttonMotion } from "./motion"
+
+/** The 40px outline look shared by toolbar filters. */
+const toolbarControl =
+  "h-10 shrink-0 rounded-[9px] border-(--pn-line-strong) bg-(--pn-surface) text-[14px] font-medium text-(--pn-fg)"
+const activeControl = "border-[color-mix(in_oklab,var(--pn-accent)_40%,transparent)]"
+
+export type FilterOption<T extends string> = { value: T; label: string; count?: number }
+
+type FilterMenuProps<T extends string> = {
+  label: string
+  options: readonly FilterOption<T>[]
+  /** Option labels in DM Mono, for identifiers such as years ("2026/27"). */
+  mono?: boolean
+} & (
+  | {
+      /** The first option, which clears the filter ("All statuses"). */
+      allLabel: string
+      value: T | null
+      onChange: (value: T | null) => void
+    }
+  | { allLabel?: undefined; value: T; onChange: (value: T) => void }
+)
+
+/**
+ * Single-choice toolbar filter: a 40px outline button naming the filter ("Role", or "Role: Member" once set) and a radio
+ * menu. With `allLabel` it starts with that option and can be cleared; without, one option is always chosen.
+ */
+export function FilterMenu<T extends string>(props: FilterMenuProps<T>) {
+  const { label, options, mono = false, value } = props
+  const selected = options.find((option) => option.value === value)
+  function choose(next: string) {
+    const option = options.find((candidate) => candidate.value === next)
+    if (props.allLabel !== undefined) props.onChange(option?.value ?? null)
+    else if (option) props.onChange(option.value)
+  }
+  return (
+    <Menu>
+      <MenuTrigger
+        render={
+          <Button
+            variant="outline"
+            className={cn(
+              buttonMotion,
+              toolbarControl,
+              "gap-1.5 px-3",
+              selected && props.allLabel !== undefined && activeControl
+            )}
+          />
+        }
+      >
+        <span>{label}</span>
+        {selected ? (
+          <span className={cn(props.allLabel !== undefined && "text-(--pn-accent)", mono && "font-mono")}>
+            {selected.label}
+          </span>
+        ) : null}
+        <ChevronDown aria-hidden strokeWidth={1.75} className="size-4 text-(--pn-fg-muted)" />
+      </MenuTrigger>
+      <MenuContent align="start" className="min-w-52">
+        <MenuRadioGroup value={value ?? ""} onValueChange={choose}>
+          {props.allLabel !== undefined ? (
+            <>
+              <MenuRadioItem value="">{props.allLabel}</MenuRadioItem>
+              <MenuSeparator />
+            </>
+          ) : null}
+          {options.map((option) => (
+            <MenuRadioItem key={option.value} value={option.value}>
+              <span className={cn("flex-1", mono && "font-mono")}>{option.label}</span>
+              {option.count !== undefined ? (
+                <span className="font-mono text-xs text-(--pn-fg-muted) tabular-nums">{option.count}</span>
+              ) : null}
+            </MenuRadioItem>
+          ))}
+        </MenuRadioGroup>
+      </MenuContent>
+    </Menu>
+  )
+}
+
+/** On/off toolbar filter ("No groups", "Has licenses"), with an optional count. */
+export function ToggleFilter({
+  label,
+  count,
+  pressed,
+  onPressedChange,
+  className,
+}: {
+  label: string
+  count?: number
+  pressed: boolean
+  onPressedChange: (pressed: boolean) => void
+  className?: string
+}) {
+  return (
+    <Toggle
+      variant="outline"
+      size="lg"
+      pressed={pressed}
+      onPressedChange={onPressedChange}
+      className={cn(
+        toolbarControl,
+        "gap-2 px-3.5 transition-[background-color,color,border-color] duration-120 hover:bg-(--pn-hover) aria-pressed:border-[color-mix(in_oklab,var(--pn-accent)_40%,transparent)] aria-pressed:bg-(--pn-accent-soft) aria-pressed:text-(--pn-accent) aria-pressed:hover:bg-(--pn-accent-soft-hover)",
+        className
+      )}
+    >
+      {pressed ? <Check aria-hidden strokeWidth={2} className="size-4" /> : null}
+      {label}
+      {count !== undefined ? (
+        <span className="font-mono text-xs font-normal text-(--pn-fg-muted) tabular-nums">{count}</span>
+      ) : null}
+    </Toggle>
+  )
+}
diff --git a/src/components/primitives/index.ts b/src/components/primitives/index.ts
index 497754b..91ad38e 100644
--- a/src/components/primitives/index.ts
+++ b/src/components/primitives/index.ts
@@ -5,11 +5,13 @@ export { ColorSwatchSelect } from "./color-swatch-select"
 export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "./combobox"
 export { ConfirmDialog, dialogFooter, dialogFooterButton, dialogPanel } from "./confirm-dialog"
 export { CountBadge } from "./count-badge"
+export { DateField } from "./date-field"
 export { DataTable, RowActions, type DataTableColumn, type DataTableError, type TableSort } from "./data-table"
 export { useEditSlot } from "./edit-slot"
 export { EmptyState } from "./empty-state"
 export { FieldCounter, isCounterVisible } from "./field-counter"
-export { FileButton } from "./file-button"
+export { FileButton, FilePickerButton } from "./file-button"
+export { FilterMenu, type FilterOption, ToggleFilter } from "./filter-menu"
 export { checkboxControl, fieldControl, fieldHintId, FormField } from "./form-field"
 export { FormDialog } from "./form-dialog"
 export { GroupLabelBadges } from "./group-label-badges"
@@ -38,12 +40,14 @@ export {
 export { buttonMotion, dialogMotion, floatingMotion, raisedSurface, scrimClasses } from "./motion"
 export { NavCard } from "./nav-card"
 export { PlatformGlyph } from "./platform-glyph"
+export { RadioCard, RadioCardGroup } from "./radio-card"
 export { RecordHeader } from "./record-header"
 export { Reveal } from "./reveal"
 export { SectionCard } from "./section-card"
 export { SectionEmpty } from "./section-empty"
 export { SectionHeading } from "./section-heading"
 export { SegmentedControl, type SegmentedItem } from "./segmented-control"
+export { SelectField } from "./select-field"
 export { CardsSkeleton, RecordSkeleton, SettingsListSkeleton, SkeletonRows, TableSkeleton } from "./skeletons"
 export { Spinner } from "./spinner"
 export { StatusBadge, type StatusTone } from "./status-badge"
diff --git a/src/components/primitives/radio-card.tsx b/src/components/primitives/radio-card.tsx
new file mode 100644
index 0000000..0cf3e58
--- /dev/null
+++ b/src/components/primitives/radio-card.tsx
@@ -0,0 +1,92 @@
+import { Radio } from "@base-ui/react/radio"
+import { RadioGroup } from "@base-ui/react/radio-group"
+import { type ReactNode, useId } from "react"
+
+import { cn } from "@/lib/utils"
+
+/**
+ * A single choice drawn as cards (`RadioCard` children). Arrow keys move the choice; the label sits above the cards,
+ * or stays for screen readers only with `hideLabel`.
+ */
+export function RadioCardGroup<T extends string>({
+  label,
+  hideLabel = false,
+  value,
+  onValueChange,
+  invalid = false,
+  describedBy,
+  className,
+  children,
+}: {
+  label: string
+  hideLabel?: boolean
+  value: T | null
+  onValueChange: (value: T) => void
+  invalid?: boolean
+  describedBy?: string
+  className?: string
+  children: ReactNode
+}) {
+  const labelId = useId()
+  return (
+    <div className="flex flex-col gap-2">
+      <span id={labelId} className={hideLabel ? "sr-only" : "text-[13px] font-medium"}>
+        {label}
+      </span>
+      <RadioGroup<T | null>
+        value={value}
+        onValueChange={(next) => {
+          if (next !== null) onValueChange(next)
+        }}
+        aria-labelledby={labelId}
+        aria-invalid={invalid || undefined}
+        aria-describedby={describedBy}
+        className={cn("flex flex-col gap-2", className)}
+      >
+        {children}
+      </RadioGroup>
+    </div>
+  )
+}
+
+/** One choice in a `RadioCardGroup`: the radio, a bold label and a muted line explaining it; the whole card is clickable. */
+export function RadioCard<T extends string>({
+  value,
+  label,
+  description,
+  lead,
+  end,
+}: {
+  value: T
+  label: ReactNode
+  description?: ReactNode
+  /** Between the radio and the text, such as an avatar. */
+  lead?: ReactNode
+  end?: ReactNode
+}) {
+  const id = useId()
+  return (
+    <label className="flex cursor-pointer items-start gap-3 rounded-(--pn-r-4) border border-(--pn-line-strong) p-3 transition-[background-color,border-color] duration-120 hover:border-(--pn-hover-line) hover:bg-(--pn-hover) has-data-checked:border-(--pn-accent) has-data-checked:bg-(--pn-accent-soft) has-data-checked:hover:bg-(--pn-accent-soft)">
+      <Radio.Root
+        value={value}
+        aria-labelledby={`${id}-label`}
+        aria-describedby={description ? `${id}-description` : undefined}
+        className="mt-0.5 grid size-4 shrink-0 place-items-center rounded-full border border-(--pn-line-strong) bg-(--pn-surface) transition-[background-color,border-color] duration-120 data-checked:border-(--pn-accent-solid) data-checked:bg-(--pn-accent-solid)"
+      >
+        <Radio.Indicator className="size-1.5 rounded-full bg-(--pn-accent-solid-fg)" />
+      </Radio.Root>
+      {lead}
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span id={`${id}-label`} className="text-[14px] font-medium">
+          {label}
+        </span>
+        {description ? (
+          <span id={`${id}-description`} className="text-xs text-(--pn-fg-muted)">
+            {description}
+          </span>
+        ) : null}
+      </span>
+      {end}
+    </label>
+  )
+}
diff --git a/src/components/primitives/select-field.tsx b/src/components/primitives/select-field.tsx
new file mode 100644
index 0000000..b1eedb3
--- /dev/null
+++ b/src/components/primitives/select-field.tsx
@@ -0,0 +1,54 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+import { floatingMotion, raisedSurface } from "./motion"
+
+/** A form select over a list of labels, full width, styled like the inputs around it. */
+export function SelectField<T extends string>({
+  id,
+  value,
+  options,
+  onChange,
+  placeholder,
+  invalid = false,
+  describedBy,
+}: {
+  id: string
+  value: T | null
+  options: readonly { value: T; label: string }[]
+  onChange: (value: T) => void
+  placeholder?: string
+  invalid?: boolean
+  describedBy?: string
+}) {
+  return (
+    <Select
+      value={value}
+      onValueChange={(next) => {
+        const option = options.find((candidate) => candidate.value === next)
+        if (option) onChange(option.value)
+      }}
+      items={options}
+    >
+      <SelectTrigger
+        id={id}
+        aria-invalid={invalid || undefined}
+        aria-describedby={describedBy}
+        className="h-9 w-full border-(--pn-line-strong) bg-(--pn-surface) text-sm text-(--pn-fg) shadow-none aria-invalid:border-(--pn-danger-solid) pointer-coarse:text-base dark:bg-(--pn-surface)"
+      >
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className={cn(raisedSurface, floatingMotion)}>
+        {options.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            className="h-9 text-[13px] focus:bg-(--pn-hover) focus:text-(--pn-fg) not-data-[variant=destructive]:focus:**:text-(--pn-fg)"
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/src/components/shell/mobile-nav.tsx b/src/components/shell/mobile-nav.tsx
index 9b5ecce..07c8bf7 100644
--- a/src/components/shell/mobile-nav.tsx
+++ b/src/components/shell/mobile-nav.tsx
@@ -84,6 +84,7 @@ export type MobileBottomNavProps = {
 /** Below 760px: the five services as a bottom tab bar; the current one is accent with a top indicator. */
 export function MobileBottomNav({ match, serviceHref, pending, className }: MobileBottomNavProps) {
   const services = useVisibleServices().filter(isRailService)
+  const compactLabels = services.length > 6
   const activeId = serviceFor(match).id
 
   return (
@@ -115,7 +116,12 @@ export function MobileBottomNav({ match, serviceHref, pending, className }: Mobi
             <span aria-hidden className="max-w-full truncate">
               {service.id === "whatsapp" ? (
                 <>
-                  <span className="min-[360px]:hidden">WA</span>
+                  <span className={compactLabels ? "min-[440px]:hidden" : "min-[360px]:hidden"}>WA</span>
+                  <span className={compactLabels ? "max-[440px]:hidden" : "max-[360px]:hidden"}>{service.short}</span>
+                </>
+              ) : service.id === "telegram" && compactLabels ? (
+                <>
+                  <span className="min-[360px]:hidden">TG</span>
                   <span className="max-[360px]:hidden">{service.short}</span>
                 </>
               ) : (
diff --git a/src/components/shell/nav.ts b/src/components/shell/nav.ts
index 6adc52b..e78e104 100644
--- a/src/components/shell/nav.ts
+++ b/src/components/shell/nav.ts
@@ -18,6 +18,7 @@ import {
   LayoutList,
   Link2,
   LayoutDashboard,
+  Receipt,
   type LucideIcon,
   MessageCircle,
   MessagesSquare,
@@ -102,6 +103,7 @@ export type PageMatch =
   | { kind: "people-overview" }
   | { kind: "people-person"; personId: string }
   | { kind: "people-members" }
+  | { kind: "people-receipts" }
   | { kind: "people-admins" }
   | { kind: "people-teams" }
   | { kind: "people-team"; teamId: string }
@@ -187,6 +189,14 @@ const people: Service = {
       permission: "people:members:read",
       searchPlaceholder: "Search by name, number or email…",
     },
+    {
+      id: "receipts",
+      title: "Receipts",
+      icon: Receipt,
+      path: "/dashboard/people/receipts",
+      permission: "people:members:read",
+      searchPlaceholder: "Search by name or receipt number…",
+    },
     {
       id: "admins",
       title: "Admins",
@@ -478,6 +488,7 @@ export function matchPath(pathname: string): PageMatch {
     if (second === undefined) return { kind: "people-overview" }
     if (third === undefined) {
       if (second === "members") return { kind: "people-members" }
+      if (second === "receipts") return { kind: "people-receipts" }
       if (second === "admins") return { kind: "people-admins" }
       if (second === "teams") return { kind: "people-teams" }
       if (second === "census") return { kind: "people-census" }
@@ -550,6 +561,7 @@ export function serviceFor(match: PageMatch): Service {
     case "people-overview":
     case "people-person":
     case "people-members":
+    case "people-receipts":
     case "people-admins":
     case "people-teams":
     case "people-team":
@@ -606,6 +618,8 @@ export function sectionFor(match: PageMatch): Section | null {
       return section(people, "overview")
     case "people-members":
       return section(people, "members")
+    case "people-receipts":
+      return section(people, "receipts")
     case "people-admins":
       return section(people, "admins")
     case "people-teams":
@@ -690,6 +704,7 @@ export function documentTitle(match: PageMatch): string {
 export type PendingCounts = {
   reports: Promise<number | null>
   signatures: Promise<number | null>
+  receipts: Promise<number | null>
   linking: Promise<number | null>
 }
 
@@ -714,5 +729,6 @@ export function sectionPending(
   if (serviceId === "reports" && sectionId === "open") return pending.reports
   if (serviceId === "esign" && sectionId === "inbox") return pending.signatures
   if (serviceId === "people" && sectionId === "linking") return pending.linking
+  if (serviceId === "people" && sectionId === "receipts") return pending.receipts
   return NO_COUNT
 }
diff --git a/src/features/azure/members-page.tsx b/src/features/azure/members-page.tsx
index e7c2721..23bb095 100644
--- a/src/features/azure/members-page.tsx
+++ b/src/features/azure/members-page.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "@tanstack/react-router"
-import { Check, Plus, UsersRound } from "lucide-react"
+import { Plus, UsersRound } from "lucide-react"
 import { useDeferredValue, useState } from "react"
 
 import {
@@ -11,12 +11,12 @@ import {
   EmptyState,
   initialsOf,
   type TableSort,
+  ToggleFilter,
   Unset,
 } from "@/components/primitives"
 import { Hint } from "@/components/primitives/hint"
 import { appToast, Count, PageBar, PageContent, Toolbar, useCan } from "@/components/shell"
 import { Button } from "@/components/ui/button"
-import { Toggle } from "@/components/ui/toggle"
 import type { AzureMember } from "@/lib/api/types"
 import { formatLicense, pluralize } from "@/lib/format"
 
@@ -195,19 +195,14 @@ export function AzureMembersPage({ members }: { members: AzureMember[] | null })
             <Toolbar
               search={{ value: query, onChange: changeQuery }}
               filters={
-                <Toggle
-                  variant="outline"
-                  size="lg"
+                <ToggleFilter
+                  label="Members only"
                   pressed={membersOnly}
                   onPressedChange={(pressed) => {
                     setMembersOnly(pressed)
                     setPage(1)
                   }}
-                  className="h-10 shrink-0 gap-2 rounded-[9px] border-(--pn-line-strong) bg-(--pn-surface) px-3.5 text-[14px] font-medium text-(--pn-fg) transition-[background-color,color,border-color] duration-120 hover:bg-(--pn-hover) aria-pressed:border-[color-mix(in_oklab,var(--pn-accent)_40%,transparent)] aria-pressed:bg-(--pn-accent-soft) aria-pressed:text-(--pn-accent) aria-pressed:hover:bg-(--pn-accent-soft-hover)"
-                >
-                  {membersOnly ? <Check aria-hidden strokeWidth={2} className="size-4" /> : null}
-                  Members only
-                </Toggle>
+                />
               }
               count={
                 filteredView ? (
diff --git a/src/features/guides/guide-dialogs.tsx b/src/features/guides/guide-dialogs.tsx
index 39bff43..5f57ac7 100644
--- a/src/features/guides/guide-dialogs.tsx
+++ b/src/features/guides/guide-dialogs.tsx
@@ -1,24 +1,11 @@
 import { useServerFn } from "@tanstack/react-start"
 import { isSameDay } from "date-fns"
-import { CalendarDays, ChevronDown } from "lucide-react"
 import { useId, useState } from "react"
 
-import {
-  buttonMotion,
-  fieldControl,
-  fieldHintId,
-  FileButton,
-  floatingMotion,
-  FormDialog,
-  FormField,
-  raisedSurface,
-} from "@/components/primitives"
-import { Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
+import { DateField, fieldControl, fieldHintId, FileButton, FormDialog, FormField } from "@/components/primitives"
 import { Input } from "@/components/ui/input"
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { dateOnlyValue, parseDateOnly } from "@/lib/date-only"
 import { errorHasCode } from "@/lib/errors"
-import { formatDate } from "@/lib/format"
 import { cn } from "@/lib/utils"
 
 import { createGuide } from "./guides.functions"
@@ -62,7 +49,6 @@ export function PublishEditionDialog({
   const [version, setVersion] = useState(suggestedVersion)
   const [date, setDate] = useState(initialDate)
   const [file, setFile] = useState<File | null>(null)
-  const [datePickerOpen, setDatePickerOpen] = useState(false)
   const [shown, setShown] = useState<Errors>({})
   const versionId = useId()
   const dateId = useId()
@@ -137,42 +123,11 @@ export function PublishEditionDialog({
         />
       </FormField>
       <FormField label="Date" htmlFor={dateId}>
-        <Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
-          <PopoverTrigger
-            render={
-              <Button
-                id={dateId}
-                variant="outline"
-                size="sm"
-                className={cn(
-                  buttonMotion,
-                  "w-full justify-start gap-2 border-(--pn-line-strong) bg-(--pn-surface) px-3 text-sm font-normal text-(--pn-fg) shadow-none hover:bg-(--pn-hover) dark:bg-(--pn-surface)"
-                )}
-              />
-            }
-          >
-            <CalendarDays aria-hidden className="text-(--pn-fg-muted)" />
-            <span className="tabular-nums">{formatDate(date, "local")}</span>
-            <ChevronDown aria-hidden className="ml-auto text-(--pn-fg-muted)" />
-          </PopoverTrigger>
-          <PopoverContent
-            align="start"
-            className={cn(raisedSurface, floatingMotion, "w-auto overflow-hidden rounded-(--pn-r-4) p-0")}
-          >
-            <Calendar
-              mode="single"
-              selected={date}
-              defaultMonth={date}
-              captionLayout="dropdown"
-              weekStartsOn={1}
-              required
-              onSelect={(selected) => {
-                setDate(selected)
-                setDatePickerOpen(false)
-              }}
-            />
-          </PopoverContent>
-        </Popover>
+        <DateField
+          id={dateId}
+          value={dateOnlyValue(date)}
+          onChange={(value) => setDate(parseDateOnly(value) ?? date)}
+        />
       </FormField>
       <FormField label="PDF file" htmlFor={fileId} hint="PDF only, up to 2 MB." error={shown.file}>
         <FileButton
diff --git a/src/features/people/admin-dialogs.tsx b/src/features/people/admin-dialogs.tsx
index 9fd5b10..e44291e 100644
--- a/src/features/people/admin-dialogs.tsx
+++ b/src/features/people/admin-dialogs.tsx
@@ -1,15 +1,23 @@
 import { useServerFn } from "@tanstack/react-start"
 import { Crown } from "lucide-react"
-import { useEffect, useState } from "react"
+import { useMemo, useState } from "react"
 
-import { ConfirmDialog, fieldControl, fieldHintId, FormDialog, FormField, Spinner } from "@/components/primitives"
+import {
+  ConfirmDialog,
+  fieldControl,
+  fieldHintId,
+  FormDialog,
+  FormField,
+  SelectField,
+  Spinner,
+} from "@/components/primitives"
 import { Textarea } from "@/components/ui/textarea"
+import { pluralize } from "@/lib/format"
 import { cn } from "@/lib/utils"
 
 import { setCapoScope } from "./people-appoint.functions"
 import { personName } from "./people-format"
-import { errorMessage, useRefreshAfter } from "./people-hooks"
-import { SelectField } from "./people-ui"
+import { errorMessage, useLoaded, useRefreshAfter } from "./people-hooks"
 import { endAdminRole, setCapoOfReference } from "./people-write.functions"
 import { COURSES, type PersonRow } from "./people.contract"
 import { getPeople } from "./people.functions"
@@ -45,8 +53,7 @@ export function EndAdminDialog({
       await end({ data: { personId: target.personId, reason: text } })
     } catch (caught) {
       console.error(caught)
-      const fallback = "The admin role could not be ended."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Couldn't end the admin role."), { cause: caught })
     }
     await refresh("Admin role ended.")
     onOpenChange(false)
@@ -57,7 +64,7 @@ export function EndAdminDialog({
       open={open}
       onOpenChange={onOpenChange}
       title="End admin role?"
-      description={`${target.name} stops being an admin of ${target.groups === 1 ? "1 group" : `${target.groups} groups`}. The bot removes their admin rights there; the record keeps the history.`}
+      description={`${target.name} stops being an admin of ${pluralize(target.groups, "group")}. The bot removes their admin rights there; the record keeps the history.`}
       noun="change"
       dirty={reason !== null || details.trim() !== ""}
       submitLabel="End admin role"
@@ -125,26 +132,10 @@ export function CapoOfReferenceDialog({
   const save = useServerFn(setCapoOfReference)
   const load = useServerFn(getPeople)
   const refresh = useRefreshAfter()
-  const [loaded, setLoaded] = useState<CapoOption[] | null>(people ? capoOptions(people) : null)
-  const [loadError, setLoadError] = useState(false)
   const [value, setValue] = useState(current ?? NONE)
-
-  useEffect(() => {
-    if (people) return
-    let active = true
-    load().then(
-      (rows) => {
-        if (active) setLoaded(capoOptions(rows))
-      },
-      (caught) => {
-        console.error(caught)
-        if (active) setLoadError(true)
-      }
-    )
-    return () => {
-      active = false
-    }
-  }, [people, load])
+  // Pages that already hold every person pass them; the record page loads them.
+  const { data: rows, failed: loadError } = useLoaded(useMemo(() => (people ? null : () => load()), [people, load]))
+  const loaded = people ? capoOptions(people) : rows ? capoOptions(rows) : null
 
   async function submit() {
     if (value === (current ?? NONE)) {
@@ -155,8 +146,7 @@ export function CapoOfReferenceDialog({
       await save({ data: { personId: target.personId, capoId: value === NONE ? null : value } })
     } catch (caught) {
       console.error(caught)
-      const fallback = "The Capo Admin could not be changed."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Couldn't change the Capo Admin."), { cause: caught })
     }
     await refresh("Capo Admin of reference saved.")
     onOpenChange(false)
@@ -223,8 +213,7 @@ export function CapoScopeDialog({
       await save({ data: { personId: target.personId, scope: value } })
     } catch (caught) {
       console.error(caught)
-      const fallback = "The Capo Admin role could not be saved."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Couldn't save the Capo Admin role."), { cause: caught })
     }
     await refresh(scope ? "Capo Admin scope changed." : `${target.name} appointed Capo Admin.`)
     onOpenChange(false)
diff --git a/src/features/people/admins-page.tsx b/src/features/people/admins-page.tsx
index 9d2f131..596b4e9 100644
--- a/src/features/people/admins-page.tsx
+++ b/src/features/people/admins-page.tsx
@@ -1,5 +1,4 @@
-import { Link } from "@tanstack/react-router"
-import { Crown, EllipsisVertical, Send, ShieldUser, UserMinus, UserRound, UserRoundCog } from "lucide-react"
+import { Crown, Send, ShieldUser, UserMinus, UserRoundCog } from "lucide-react"
 import { useDeferredValue, useState } from "react"
 
 import {
@@ -9,17 +8,15 @@ import {
   DataTable,
   type DataTableColumn,
   EmptyState,
+  FilterMenu,
   IconButton,
-  Menu,
-  MenuContent,
-  MenuItem,
-  MenuSeparator,
-  MenuTrigger,
   PlatformGlyph,
   RowActions,
   SegmentedControl,
   type TableSort,
+  ToggleFilter,
   Unset,
+  useOpenGeneration,
 } from "@/components/primitives"
 import { Count, PageBar, PageContent, Toolbar, useCan } from "@/components/shell"
 import { Button } from "@/components/ui/button"
@@ -35,7 +32,7 @@ import {
 import {
   CENSUS_ANSWER,
   censusEntry,
-  CURRENT_YEAR,
+  currentYear,
   formatDay,
   isMember,
   NO_ANSWER,
@@ -43,7 +40,7 @@ import {
   telegramUrl,
   yearOf,
 } from "./people-format"
-import { FilterMenu, PersonCell, StateBadge, ToggleFilter, TruncatedChip } from "./people-ui"
+import { ActionMenu, PersonCell, StateBadge, TruncatedChip } from "./people-ui"
 import { type AdminRole, CAMPUSES, type Campus, type PersonRow, YEARS } from "./people.contract"
 
 type Admin = PersonRow & { admin: AdminRole }
@@ -61,12 +58,12 @@ const QUICK = {
   availableAsCapo: { label: "Available as Capo Admin", test: (person: Admin) => person.admin.availableAsCapo },
   declaredMember: {
     label: "Declared member but not registered",
-    test: (person: Admin) => censusEntry(person, CURRENT_YEAR)?.declaredMember === true && !isMember(person),
+    test: (person: Admin) => censusEntry(person, currentYear())?.declaredMember === true && !isMember(person),
   },
   noCensus: {
     label: "No census answer",
     test: (person: Admin) => {
-      const entry = censusEntry(person, CURRENT_YEAR)
+      const entry = censusEntry(person, currentYear())
       return entry !== undefined && entry.answer === null
     },
   },
@@ -85,173 +82,176 @@ function matchesQuery(person: Admin, query: string) {
 }
 
 function CensusCell({ person }: { person: Admin }) {
-  const entry = censusEntry(person, CURRENT_YEAR)
+  const entry = censusEntry(person, currentYear())
   if (!entry) return <Unset />
   return <StateBadge state={entry.answer ? CENSUS_ANSWER[entry.answer] : NO_ANSWER} />
 }
 
-const columns: DataTableColumn<Admin>[] = [
-  {
-    id: "name",
-    label: "Name",
-    sortable: true,
-    fill: true,
-    minWidth: 220,
-    mobile: "main",
-    cell: (person) => (
-      <>
-        <PersonCell
-          name={personName(person)}
-          secondary={person.profile.course}
-          muted={person.admin.status === "former"}
-        />
-        {/* Mobile cards: groups and census on one labelled line, then the Capo Admin scope. */}
-        <span className="mt-2 hidden flex-col items-start gap-1.5 pl-11 text-xs text-(--pn-fg-muted) max-shell:flex">
-          <span className="flex flex-wrap items-center gap-1.5">
-            {person.admin.status !== "active"
-              ? "Former admin"
-              : person.admin.groups.length
-                ? pluralize(person.admin.groups.length, "group")
-                : "No groups"}
-            <span aria-hidden>·</span>
-            Census <CensusCell person={person} />
+/** The table's columns; the census and fee columns name the current academic year. */
+function tableColumns(year: string): DataTableColumn<Admin>[] {
+  return [
+    {
+      id: "name",
+      label: "Name",
+      sortable: true,
+      fill: true,
+      minWidth: 220,
+      mobile: "main",
+      cell: (person) => (
+        <>
+          <PersonCell
+            name={personName(person)}
+            secondary={person.profile.course}
+            muted={person.admin.status === "former"}
+          />
+          {/* Mobile cards: groups and census on one labelled line, then the Capo Admin scope. */}
+          <span className="mt-2 hidden flex-col items-start gap-1.5 pl-11 text-xs text-(--pn-fg-muted) max-shell:flex">
+            <span className="flex flex-wrap items-center gap-1.5">
+              {person.admin.status !== "active"
+                ? "Former admin"
+                : person.admin.groups.length
+                  ? pluralize(person.admin.groups.length, "group")
+                  : "No groups"}
+              <span aria-hidden>·</span>
+              Census <CensusCell person={person} />
+            </span>
+            {person.admin.capoScope ? <Chip>Capo Admin · {person.admin.capoScope}</Chip> : null}
           </span>
-          {person.admin.capoScope ? <Chip>Capo Admin · {person.admin.capoScope}</Chip> : null}
-        </span>
-      </>
-    ),
-  },
-  {
-    id: "year",
-    label: "Year",
-    width: 112,
-    priority: 4,
-    mobile: "hidden",
-    cell: (person) => <span className="whitespace-nowrap">{person.profile.year}</span>,
-  },
-  {
-    id: "campus",
-    label: "Campus",
-    width: 112,
-    priority: 5,
-    mobile: "hidden",
-    cell: (person) => person.profile.campus,
-  },
-  {
-    id: "since",
-    label: "Active since",
-    sortable: true,
-    width: 128,
-    priority: 5,
-    mobile: "hidden",
-    cell: (person) => <span className="whitespace-nowrap">{formatDay(person.admin.since)}</span>,
-  },
-  {
-    id: "groups",
-    label: "Groups",
-    width: 232,
-    mobile: "hidden",
-    cell: (person) =>
-      person.admin.status === "former" ? (
-        <span className="text-(--pn-fg-muted)">Ended {formatDay(person.admin.endedOn ?? "")}</span>
-      ) : person.admin.groups.length ? (
-        <ChipOverflow
-          items={person.admin.groups}
-          itemLabel={(group) => group.title}
-          renderItem={(group) => <TruncatedChip key={group.chatId} label={group.title} />}
-        />
-      ) : (
-        <span className="text-(--pn-fg-muted)">No groups</span>
-      ),
-  },
-  {
-    id: "requested",
-    label: "Requested",
-    width: 160,
-    priority: 6,
-    mobile: "hidden",
-    cell: (person) =>
-      person.admin.requested.length ? (
-        <ChipOverflow
-          items={person.admin.requested}
-          max={1}
-          itemLabel={(group) => group.title}
-          renderItem={(group) => <TruncatedChip key={group.chatId} label={group.title} />}
-        />
-      ) : (
-        <Unset />
+        </>
       ),
-  },
-  {
-    id: "representative",
-    label: "Representative",
-    width: 184,
-    priority: 6,
-    mobile: "hidden",
-    cell: (person) =>
-      person.profile.studentRepresentative ? (
-        <span className="block truncate">{person.profile.studentRepresentative}</span>
-      ) : (
-        <Unset />
-      ),
-  },
-  {
-    id: "associations",
-    label: "Other associations",
-    width: 168,
-    priority: 6,
-    mobile: "hidden",
-    cell: (person) =>
-      person.profile.otherAssociations.length ? (
-        <ChipOverflow
-          items={person.profile.otherAssociations}
-          max={1}
-          itemLabel={(association) => association}
-          renderItem={(association) => <TruncatedChip key={association} label={association} />}
-        />
-      ) : (
-        <Unset />
-      ),
-  },
-  {
-    id: "availableAsCapo",
-    label: "Available as Capo",
-    width: 144,
-    priority: 6,
-    mobile: "hidden",
-    cell: (person) => (person.admin.availableAsCapo ? "Yes" : <Unset />),
-  },
-  {
-    id: "capoOfReference",
-    label: "Capo Admin of reference",
-    width: 184,
-    priority: 3,
-    mobile: "hidden",
-    cell: (person) =>
-      person.admin.capoScope ? (
-        <TruncatedChip label={`Capo Admin · ${person.admin.capoScope}`} />
-      ) : person.admin.capoOfReference ? (
-        <span className="block truncate">{person.admin.capoOfReference.name}</span>
-      ) : (
-        <Unset />
-      ),
-  },
-  {
-    id: "member",
-    label: "Member",
-    width: 88,
-    priority: 3,
-    mobile: "hidden",
-    cell: (person) => (isMember(person) ? "Yes" : <span className="text-(--pn-fg-muted)">No</span>),
-  },
-  {
-    id: "census",
-    label: `Census ${CURRENT_YEAR}`,
-    width: 152,
-    mobile: "hidden",
-    cell: (person) => <CensusCell person={person} />,
-  },
-]
+    },
+    {
+      id: "year",
+      label: "Year",
+      width: 112,
+      priority: 4,
+      mobile: "hidden",
+      cell: (person) => <span className="whitespace-nowrap">{person.profile.year}</span>,
+    },
+    {
+      id: "campus",
+      label: "Campus",
+      width: 112,
+      priority: 5,
+      mobile: "hidden",
+      cell: (person) => person.profile.campus,
+    },
+    {
+      id: "since",
+      label: "Active since",
+      sortable: true,
+      width: 128,
+      priority: 5,
+      mobile: "hidden",
+      cell: (person) => <span className="whitespace-nowrap">{formatDay(person.admin.since)}</span>,
+    },
+    {
+      id: "groups",
+      label: "Groups",
+      width: 232,
+      mobile: "hidden",
+      cell: (person) =>
+        person.admin.status === "former" ? (
+          <span className="text-(--pn-fg-muted)">Ended {formatDay(person.admin.endedOn ?? "")}</span>
+        ) : person.admin.groups.length ? (
+          <ChipOverflow
+            items={person.admin.groups}
+            itemLabel={(group) => group.title}
+            renderItem={(group) => <TruncatedChip key={group.chatId} label={group.title} />}
+          />
+        ) : (
+          <span className="text-(--pn-fg-muted)">No groups</span>
+        ),
+    },
+    {
+      id: "requested",
+      label: "Requested",
+      width: 160,
+      priority: 6,
+      mobile: "hidden",
+      cell: (person) =>
+        person.admin.requested.length ? (
+          <ChipOverflow
+            items={person.admin.requested}
+            max={1}
+            itemLabel={(group) => group.title}
+            renderItem={(group) => <TruncatedChip key={group.chatId} label={group.title} />}
+          />
+        ) : (
+          <Unset />
+        ),
+    },
+    {
+      id: "representative",
+      label: "Representative",
+      width: 184,
+      priority: 6,
+      mobile: "hidden",
+      cell: (person) =>
+        person.profile.studentRepresentative ? (
+          <span className="block truncate">{person.profile.studentRepresentative}</span>
+        ) : (
+          <Unset />
+        ),
+    },
+    {
+      id: "associations",
+      label: "Other associations",
+      width: 168,
+      priority: 6,
+      mobile: "hidden",
+      cell: (person) =>
+        person.profile.otherAssociations.length ? (
+          <ChipOverflow
+            items={person.profile.otherAssociations}
+            max={1}
+            itemLabel={(association) => association}
+            renderItem={(association) => <TruncatedChip key={association} label={association} />}
+          />
+        ) : (
+          <Unset />
+        ),
+    },
+    {
+      id: "availableAsCapo",
+      label: "Available as Capo",
+      width: 144,
+      priority: 6,
+      mobile: "hidden",
+      cell: (person) => (person.admin.availableAsCapo ? "Yes" : <Unset />),
+    },
+    {
+      id: "capoOfReference",
+      label: "Capo Admin of reference",
+      width: 184,
+      priority: 3,
+      mobile: "hidden",
+      cell: (person) =>
+        person.admin.capoScope ? (
+          <TruncatedChip label={`Capo Admin · ${person.admin.capoScope}`} />
+        ) : person.admin.capoOfReference ? (
+          <span className="block truncate">{person.admin.capoOfReference.name}</span>
+        ) : (
+          <Unset />
+        ),
+    },
+    {
+      id: "member",
+      label: "Member",
+      width: 88,
+      priority: 3,
+      mobile: "hidden",
+      cell: (person) => (isMember(person) ? "Yes" : <span className="text-(--pn-fg-muted)">No</span>),
+    },
+    {
+      id: "census",
+      label: `Census ${year}`,
+      width: 152,
+      mobile: "hidden",
+      cell: (person) => <CensusCell person={person} />,
+    },
+  ]
+}
 
 const DEFAULT_SORT: TableSort = { column: "name", direction: "asc" }
 
@@ -259,6 +259,7 @@ const DEFAULT_SORT: TableSort = { column: "name", direction: "asc" }
 export function AdminsPage({ people }: { people: PersonRow[] }) {
   const canWrite = useCan("people:write")
   const canAppoint = useCan("people:appoint")
+  const censusYear = currentYear()
   const admins = people.filter(isAdmin)
   const active = admins.filter((person) => person.admin.status === "active")
 
@@ -273,7 +274,7 @@ export function AdminsPage({ people }: { people: PersonRow[] }) {
   const [pageSize, setPageSize] = useState(20)
   const [dialog, setDialog] = useState<AdminDialog | null>(null)
   const [dialogOpen, setDialogOpen] = useState(false)
-  const [dialogKey, setDialogKey] = useState(0)
+  const dialogKey = useOpenGeneration(dialogOpen)
 
   const inScope = admins.filter((person) => person.admin.status === scope)
   const filtered = inScope.filter(
@@ -320,7 +321,6 @@ export function AdminsPage({ people }: { people: PersonRow[] }) {
 
   function open(kind: AdminDialog["kind"], admin: Admin) {
     setDialog({ kind, admin })
-    setDialogKey((value) => value + 1)
     setDialogOpen(true)
   }
 
@@ -394,7 +394,7 @@ export function AdminsPage({ people }: { people: PersonRow[] }) {
       <PageContent>
         <DataTable
           label="Admins"
-          columns={columns}
+          columns={tableColumns(censusYear)}
           rows={rows}
           getRowId={(person) => person.id}
           rowLabel={personName}
@@ -423,50 +423,43 @@ export function AdminsPage({ people }: { people: PersonRow[] }) {
                 ) : (
                   <span aria-hidden className="size-9 max-shell:hidden" />
                 )}
-                <Menu>
-                  <MenuTrigger
-                    render={
-                      <IconButton
-                        label="More actions"
-                        ariaLabel={`More actions for ${personName(person)}`}
-                        icon={EllipsisVertical}
-                      />
-                    }
-                  />
-                  <MenuContent>
-                    <MenuItem render={<Link to="/dashboard/people/$personId" params={{ personId: person.id }} />}>
-                      <UserRound />
-                      Open record
-                    </MenuItem>
-                    {canWrite && activeAdmin && !person.admin.capoScope ? (
-                      <MenuItem onClick={() => open("capoRef", person)}>
-                        <UserRoundCog />
-                        Capo Admin of reference
-                      </MenuItem>
-                    ) : null}
-                    {canAppoint && activeAdmin ? (
-                      <MenuItem onClick={() => open("capoScope", person)}>
-                        <Crown />
-                        {person.admin.capoScope ? "Change Capo Admin scope" : "Appoint as Capo Admin"}
-                      </MenuItem>
-                    ) : null}
-                    {canAppoint && activeAdmin && person.admin.capoScope ? (
-                      <MenuItem variant="destructive" onClick={() => open("endCapo", person)}>
-                        <Crown />
-                        End Capo Admin role
-                      </MenuItem>
-                    ) : null}
-                    {canWrite && activeAdmin ? (
-                      <>
-                        <MenuSeparator />
-                        <MenuItem variant="destructive" onClick={() => open("end", person)}>
-                          <UserMinus />
-                          End admin role
-                        </MenuItem>
-                      </>
-                    ) : null}
-                  </MenuContent>
-                </Menu>
+                <ActionMenu
+                  label={`More actions for ${personName(person)}`}
+                  actions={[
+                    canWrite &&
+                      activeAdmin &&
+                      !person.admin.capoScope && {
+                        label: "Capo Admin of reference",
+                        ariaLabel: `Capo Admin of reference for ${personName(person)}`,
+                        icon: UserRoundCog,
+                        onClick: () => open("capoRef", person),
+                      },
+                    canAppoint &&
+                      activeAdmin && {
+                        label: person.admin.capoScope ? "Change Capo Admin scope" : "Appoint as Capo Admin",
+                        ariaLabel: `${person.admin.capoScope ? "Change Capo Admin scope of" : "Appoint as Capo Admin"} ${personName(person)}`,
+                        icon: Crown,
+                        onClick: () => open("capoScope", person),
+                      },
+                    canAppoint &&
+                      activeAdmin &&
+                      person.admin.capoScope !== null && {
+                        label: "End Capo Admin role",
+                        ariaLabel: `End the Capo Admin role of ${personName(person)}`,
+                        icon: Crown,
+                        destructive: true,
+                        onClick: () => open("endCapo", person),
+                      },
+                    canWrite &&
+                      activeAdmin && {
+                        label: "End admin role",
+                        ariaLabel: `End the admin role of ${personName(person)}`,
+                        icon: UserMinus,
+                        destructive: true,
+                        onClick: () => open("end", person),
+                      },
+                  ]}
+                />
               </RowActions>
             )
           }}
diff --git a/src/features/people/capo-page.tsx b/src/features/people/capo-page.tsx
index e042e97..760e15f 100644
--- a/src/features/people/capo-page.tsx
+++ b/src/features/people/capo-page.tsx
@@ -62,8 +62,7 @@ export function CapoPage({ area }: { area: CapoArea }) {
       await (approved ? approve : decline)({ data: { requestId: request.id } })
     } catch (caught) {
       console.error(caught)
-      const fallback = approved ? "The request couldn't be approved." : "The request couldn't be declined."
-      appToast.error(caught instanceof Error ? errorMessage(caught, fallback) : fallback)
+      appToast.error(errorMessage(caught, approved ? "Couldn't approve the request." : "Couldn't decline the request."))
       setPending(null)
       return
     }
diff --git a/src/features/people/census-answers-dialog.tsx b/src/features/people/census-answers-dialog.tsx
index 433b3ae..b6628b6 100644
--- a/src/features/people/census-answers-dialog.tsx
+++ b/src/features/people/census-answers-dialog.tsx
@@ -1,8 +1,9 @@
 import { useServerFn } from "@tanstack/react-start"
-import { useEffect, useState } from "react"
+import { useCallback } from "react"
 
 import { FormDialog, InlineAlert, Spinner } from "@/components/primitives"
 
+import { useLoaded } from "./people-hooks"
 import { getCensusAnswers } from "./people.functions"
 
 /** A census year's full answers, as the person gave them: HR and the Direttivo only. */
@@ -20,24 +21,9 @@ export function CensusAnswersDialog({
   year: string
 }) {
   const load = useServerFn(getCensusAnswers)
-  const [answers, setAnswers] = useState<{ question: string; answer: string }[] | null>(null)
-  const [failed, setFailed] = useState(false)
-
-  useEffect(() => {
-    let current = true
-    load({ data: { personId, year } }).then(
-      (result) => {
-        if (current) setAnswers(result)
-      },
-      (caught) => {
-        console.error(caught)
-        if (current) setFailed(true)
-      }
-    )
-    return () => {
-      current = false
-    }
-  }, [load, personId, year])
+  const { data: answers, failed } = useLoaded(
+    useCallback(() => load({ data: { personId, year } }), [load, personId, year])
+  )
 
   return (
     <FormDialog
diff --git a/src/features/people/census-page.tsx b/src/features/people/census-page.tsx
index ea57945..34ba555 100644
--- a/src/features/people/census-page.tsx
+++ b/src/features/people/census-page.tsx
@@ -1,6 +1,5 @@
-import { Link } from "@tanstack/react-router"
 import { useServerFn } from "@tanstack/react-start"
-import { Archive, Bell, ClipboardList, EllipsisVertical, FileText, Upload, UserRound } from "lucide-react"
+import { Archive, Bell, ClipboardList, FileText, Upload } from "lucide-react"
 import { useDeferredValue, useState } from "react"
 
 import {
@@ -10,17 +9,15 @@ import {
   DataTable,
   type DataTableColumn,
   EmptyState,
+  FilterMenu,
   IconButton,
-  Menu,
-  MenuContent,
-  MenuItem,
-  MenuTrigger,
   RecordHeader,
   RowActions,
   SectionCard,
   SegmentedControl,
   type TableSort,
   Unset,
+  useOpenGeneration,
 } from "@/components/primitives"
 import { appToast, Count, PageBar, PageContent, Toolbar, useCan } from "@/components/shell"
 import { Button } from "@/components/ui/button"
@@ -42,7 +39,7 @@ import {
   roleLabels,
 } from "./people-format"
 import { errorMessage, useRefreshAfter } from "./people-hooks"
-import { FilterMenu, PersonCell, StateBadge, TruncatedChip } from "./people-ui"
+import { PersonCell, StateBadge, TruncatedChip } from "./people-ui"
 import type { Campaign, CampaignDetail, CensusEntry, PersonRow } from "./people.contract"
 
 const percent = (part: number, whole: number) => (whole ? Math.round((part / whole) * 100) : 0)
@@ -232,7 +229,7 @@ export function CampaignPage({ detail }: { detail: CampaignDetail }) {
   const [confirm, setConfirm] = useState<"remind" | "close" | null>(null)
   const [confirmOpen, setConfirmOpen] = useState(false)
   const [importOpen, setImportOpen] = useState(false)
-  const [importKey, setImportKey] = useState(0)
+  const importKey = useOpenGeneration(importOpen)
   const [answers, setAnswers] = useState<CampaignRow | null>(null)
   const [answersOpen, setAnswersOpen] = useState(false)
 
@@ -268,11 +265,7 @@ export function CampaignPage({ detail }: { detail: CampaignDetail }) {
       await refresh(result.sent ? `Reminder sent to ${personName(row)}.` : `${personName(row)} was reminded recently.`)
     } catch (caught) {
       console.error(caught)
-      appToast.error(
-        caught instanceof Error
-          ? errorMessage(caught, "The reminder couldn't be sent.")
-          : "The reminder couldn't be sent."
-      )
+      appToast.error(errorMessage(caught, "Couldn't send the reminder."))
     }
   }
 
@@ -353,6 +346,7 @@ export function CampaignPage({ detail }: { detail: CampaignDetail }) {
         right={
           canAct ? (
             <>
+              {/* Phones keep the full width for Import responses: Send reminders becomes an icon there. */}
               <Button
                 size="sm"
                 variant="outline"
@@ -362,30 +356,24 @@ export function CampaignPage({ detail }: { detail: CampaignDetail }) {
                 <Bell data-icon="inline-start" />
                 Send reminders
               </Button>
-              <Button
-                size="sm"
-                className={buttonMotion}
-                onClick={() => {
-                  setImportKey((value) => value + 1)
-                  setImportOpen(true)
-                }}
-              >
+              <IconButton
+                label="Send reminders"
+                icon={Bell}
+                appearance="boxed"
+                className="size-10 flex-none shell:hidden"
+                onClick={() => ask("remind")}
+              />
+              <Button size="sm" className={buttonMotion} onClick={() => setImportOpen(true)}>
                 <Upload data-icon="inline-start" />
                 Import responses
               </Button>
-              <Menu>
-                <MenuTrigger render={<IconButton label="More actions" appearance="boxed" icon={EllipsisVertical} />} />
-                <MenuContent>
-                  <MenuItem className="shell:hidden" onClick={() => ask("remind")}>
-                    <Bell />
-                    Send reminders
-                  </MenuItem>
-                  <MenuItem onClick={() => ask("close")}>
-                    <Archive />
-                    Close campaign
-                  </MenuItem>
-                </MenuContent>
-              </Menu>
+              <IconButton
+                label="Close campaign"
+                icon={Archive}
+                appearance="boxed"
+                className="size-10 max-shell:flex-none"
+                onClick={() => ask("close")}
+              />
             </>
           ) : undefined
         }
@@ -512,49 +500,32 @@ export function CampaignPage({ detail }: { detail: CampaignDetail }) {
               canAct
                 ? (row) => (
                     <RowActions>
-                      {row.entry?.answer ? (
-                        <span aria-hidden className="size-9 max-shell:hidden" />
-                      ) : (
+                      {/* Answered rows open the answers; the others can be reminded. */}
+                      {!row.entry?.answer ? (
                         <IconButton
                           label="Send reminder"
                           ariaLabel={`Send reminder to ${personName(row)}`}
                           icon={Bell}
                           onClick={() => remindOne(row)}
                         />
-                      )}
-                      <Menu>
-                        <MenuTrigger
-                          render={
-                            <IconButton
-                              label="More actions"
-                              ariaLabel={`More actions for ${personName(row)}`}
-                              icon={EllipsisVertical}
-                            />
-                          }
+                      ) : canRead ? (
+                        <IconButton
+                          label="View answers"
+                          ariaLabel={`View the answers of ${personName(row)}`}
+                          icon={FileText}
+                          onClick={() => {
+                            setAnswers(row)
+                            setAnswersOpen(true)
+                          }}
                         />
-                        <MenuContent>
-                          {row.entry?.answer && canRead ? (
-                            <MenuItem
-                              onClick={() => {
-                                setAnswers(row)
-                                setAnswersOpen(true)
-                              }}
-                            >
-                              <FileText />
-                              View answers
-                            </MenuItem>
-                          ) : null}
-                          <MenuItem render={<Link to="/dashboard/people/$personId" params={{ personId: row.id }} />}>
-                            <UserRound />
-                            Open record
-                          </MenuItem>
-                        </MenuContent>
-                      </Menu>
+                      ) : (
+                        <span aria-hidden className="size-9 shrink-0" />
+                      )}
                     </RowActions>
                   )
                 : undefined
             }
-            actionsWidth={96}
+            actionsWidth={60}
             pagination={{
               page,
               pageSize,
diff --git a/src/features/people/fee-dialogs.tsx b/src/features/people/fee-dialogs.tsx
new file mode 100644
index 0000000..2330483
--- /dev/null
+++ b/src/features/people/fee-dialogs.tsx
@@ -0,0 +1,534 @@
+import { useServerFn } from "@tanstack/react-start"
+import { Bell, ExternalLink, FileText } from "lucide-react"
+import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react"
+
+import {
+  buttonMotion,
+  ConfirmDialog,
+  DateField,
+  fieldControl,
+  fieldHintId,
+  FormDialog,
+  FormField,
+  Hint,
+  InlineAlert,
+  KeyValueList,
+  SegmentedControl,
+  Spinner,
+} from "@/components/primitives"
+import { appToast } from "@/components/shell"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { formatDateTime, pluralize } from "@/lib/format"
+import { cn } from "@/lib/utils"
+
+import { PdfPages } from "./pdf-pages"
+import { centsToInput, formatCents, parseEuros } from "./people-fees"
+import {
+  approveFee,
+  getFeeReview,
+  getFeeUpload,
+  markFeePaid,
+  rejectFee,
+  sendFeeReminders,
+} from "./people-fees.functions"
+import { fileBlob } from "./people-files"
+import { FEE_STATUS, formatDay, PAYMENT_METHOD, todayIso } from "./people-format"
+import { errorMessage, useLoaded, useRefreshAfter } from "./people-hooks"
+import { MonoChip, StateBadge } from "./people-ui"
+import type { FilePayload, PaymentMethod } from "./people.contract"
+
+/** Reasons offered as one-click starts for Reject; the admin can edit the text. */
+const COMMON_REASONS = [
+  {
+    label: "Wrong amount",
+    text: "The amount on the receipt isn't the fee. Transfer the rest and upload both receipts.",
+  },
+  {
+    label: "Not a transfer receipt",
+    text: "The file is a screenshot of the payment page, not the transfer receipt. Upload the receipt your bank issued.",
+  },
+  { label: "Unreadable file", text: "The file can't be read. Upload a clearer PDF or photo of the transfer receipt." },
+]
+
+export type FeeTarget = { id: string; name: string; number: string }
+
+/** Loads the member's current fee year once per opening. */
+function useFeeReview(personId: string) {
+  const load = useServerFn(getFeeReview)
+  const { data: review, failed } = useLoaded(useCallback(() => load({ data: { personId } }), [load, personId]))
+  return { review, failed }
+}
+
+function Loading({ children }: { children: ReactNode }) {
+  return (
+    <p role="status" className="flex items-center gap-2 text-[13px] text-(--pn-fg-muted)">
+      <Spinner />
+      {children}
+    </p>
+  )
+}
+
+const PREVIEW_LABEL = "The uploaded transfer receipt"
+
+/** The uploaded transfer receipt: a PDF's pages or the image itself, with a link to open it in a new tab. */
+function UploadPreview({ file, size }: { file: FilePayload | null; size: number }) {
+  const blob = useMemo(() => (file ? fileBlob(file) : null), [file])
+  const [url, setUrl] = useState<string | null>(null)
+  useEffect(() => {
+    if (!blob) return
+    const next = URL.createObjectURL(blob)
+    setUrl(next)
+    return () => URL.revokeObjectURL(next)
+  }, [blob])
+  const image = file?.contentType.startsWith("image/") ?? false
+  return (
+    <figure className="m-0 flex flex-col overflow-hidden rounded-(--pn-r-4) border border-(--pn-line) bg-(--pn-sunken)">
+      <figcaption className="flex h-11 items-center gap-2 border-b border-(--pn-line) bg-(--pn-surface) pr-1 pl-3 text-[13px]">
+        <FileText aria-hidden strokeWidth={1.75} className="size-4 shrink-0 text-(--pn-fg-muted)" />
+        {file ? (
+          <Hint overflowOnly label={file.fileName}>
+            <span className="min-w-0 flex-1 truncate font-mono text-[12px]">{file.fileName}</span>
+          </Hint>
+        ) : (
+          <span className="min-w-0 flex-1 text-(--pn-fg-muted)">Loading…</span>
+        )}
+        <span className="text-xs text-(--pn-fg-muted) tabular-nums">{Math.max(1, Math.round(size / 1024))} KB</span>
+        {url ? (
+          <Button
+            size="sm"
+            variant="ghost"
+            className={buttonMotion}
+            nativeButton={false}
+            render={<a href={url} target="_blank" rel="noreferrer" />}
+          >
+            <ExternalLink data-icon="inline-start" />
+            Open
+          </Button>
+        ) : null}
+      </figcaption>
+      {blob && url && image ? (
+        <img src={url} alt={PREVIEW_LABEL} className="max-h-80 w-full object-contain" />
+      ) : blob && !image ? (
+        <PdfPages file={blob} label={PREVIEW_LABEL} />
+      ) : (
+        <div className="grid h-80 place-items-center">
+          <Loading>Loading the file…</Loading>
+        </div>
+      )}
+    </figure>
+  )
+}
+
+/**
+ * Review receipt: the member's uploaded transfer receipt next to their fee year. Approve marks the fee Paid and issues
+ * the next receipt to sign; Reject asks for a reason the member reads in My area and in the email.
+ */
+export function ReviewReceiptDialog({
+  open,
+  onOpenChange,
+  person,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  person: FeeTarget
+}) {
+  const { review, failed } = useFeeReview(person.id)
+  const loadFile = useServerFn(getFeeUpload)
+  const { data: file, failed: fileFailed } = useLoaded(
+    useCallback(() => loadFile({ data: { personId: person.id } }), [loadFile, person.id])
+  )
+  const approve = useServerFn(approveFee)
+  const reject = useServerFn(rejectFee)
+  const refresh = useRefreshAfter()
+  const [mode, setMode] = useState<"review" | "reject">("review")
+  const [reason, setReason] = useState("")
+  const [submitted, setSubmitted] = useState(false)
+  const firstName = person.name.split(" ")[0] ?? person.name
+
+  const upload = review?.fee.upload ?? null
+  const reasonError = submitted && !reason.trim() ? "Say why, so the member knows what to fix." : undefined
+
+  async function submit() {
+    if (!review || !upload) return
+    if (mode === "review") {
+      let issued: string
+      try {
+        issued = (await approve({ data: { personId: person.id } })).receipt
+      } catch (caught) {
+        console.error(caught)
+        throw new Error(errorMessage(caught, "Couldn't approve the receipt. Try again."), { cause: caught })
+      }
+      await refresh(`Fee marked as paid. Receipt ${issued} is ready to sign.`)
+      onOpenChange(false)
+      return
+    }
+    setSubmitted(true)
+    if (!reason.trim()) return
+    try {
+      await reject({ data: { personId: person.id, reason: reason.trim() } })
+    } catch (caught) {
+      console.error(caught)
+      throw new Error(errorMessage(caught, "Couldn't reject the receipt. Try again."), { cause: caught })
+    }
+    await refresh(`Transfer receipt rejected. ${firstName} can upload a new one.`)
+    onOpenChange(false)
+  }
+
+  return (
+    <FormDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      size="lg"
+      title="Review receipt"
+      description={
+        <>
+          {person.name} uploaded a transfer receipt for the <span className="font-mono">{review?.fee.year ?? ""}</span>{" "}
+          fee.
+        </>
+      }
+      noun="review"
+      dirty={reason.trim() !== ""}
+      submitLabel={mode === "review" ? "Approve" : "Reject receipt"}
+      submitTone={mode === "review" ? "primary" : "danger"}
+      canSubmit={review !== null && upload !== null}
+      onSubmit={submit}
+      footerStart={
+        review && upload ? (
+          mode === "review" ? (
+            <Button
+              type="button"
+              variant="outline"
+              className={cn(buttonMotion, "h-10 text-(--pn-danger-fg)")}
+              onClick={() => setMode("reject")}
+            >
+              Reject
+            </Button>
+          ) : (
+            <Button
+              type="button"
+              variant="ghost"
+              className={cn(buttonMotion, "h-10")}
+              onClick={() => {
+                setMode("review")
+                setSubmitted(false)
+              }}
+            >
+              Back
+            </Button>
+          )
+        ) : undefined
+      }
+      notice={
+        review && upload && mode === "review" ? (
+          <InlineAlert tone="info">
+            Approving marks the fee Paid and issues receipt <span className="font-mono">{review.nextReceipt}</span> for
+            the President to sign.
+          </InlineAlert>
+        ) : undefined
+      }
+    >
+      {failed ? <InlineAlert>Couldn't load the fee. Close and try again.</InlineAlert> : null}
+      {!review && !failed ? <Loading>Loading the receipt…</Loading> : null}
+      {review && !upload ? (
+        <InlineAlert tone="neutral">
+          There is no transfer receipt to review: someone may have just handled it.
+        </InlineAlert>
+      ) : null}
+      {review && upload ? (
+        <div className="flex flex-col gap-4">
+          {fileFailed ? (
+            <InlineAlert>Couldn't load the file. The details below come from the upload.</InlineAlert>
+          ) : (
+            <UploadPreview file={file} size={upload.size} />
+          )}
+          {upload.amountCents !== review.fee.amountCents ? (
+            <InlineAlert tone="warning">
+              The declared amount is {formatCents(upload.amountCents)}, but the fee is{" "}
+              {formatCents(review.fee.amountCents)}.
+            </InlineAlert>
+          ) : null}
+          <KeyValueList
+            items={[
+              {
+                key: "Member",
+                value: (
+                  <span className="flex flex-wrap items-center gap-2">
+                    {review.person.name} <MonoChip>{review.memberNumber}</MonoChip>
+                  </span>
+                ),
+              },
+              {
+                key: "Microsoft 365",
+                value: <span className="font-mono text-[13px] [overflow-wrap:anywhere]">{review.m365Email}</span>,
+              },
+              {
+                key: `Fee ${review.fee.year}`,
+                value: <StateBadge state={FEE_STATUS[review.fee.status]} />,
+              },
+              { key: "Amount due", value: <span className="tabular-nums">{formatCents(review.fee.amountCents)}</span> },
+              {
+                key: "Transfer",
+                value: (
+                  <span className="tabular-nums">
+                    {formatCents(upload.amountCents)} on {formatDay(upload.transferDate)}{" "}
+                    <span className="text-xs text-(--pn-fg-muted)">as declared</span>
+                  </span>
+                ),
+              },
+              { key: "Uploaded", value: formatDateTime(new Date(upload.uploadedAt)) },
+              {
+                key: "Earlier rejections",
+                value: review.rejections.length ? (
+                  <span className="flex flex-col gap-1">
+                    {review.rejections.map((rejection) => (
+                      <span key={rejection.at} className="text-[13px]">
+                        {formatDay(rejection.at.slice(0, 10))}: “{rejection.reason}”
+                      </span>
+                    ))}
+                  </span>
+                ) : null,
+              },
+            ]}
+          />
+          {mode === "reject" ? (
+            <div className="flex flex-col gap-3">
+              <div className="flex flex-col gap-2">
+                <span className="text-[14px] font-medium">Common reasons</span>
+                <div className="flex flex-wrap gap-2">
+                  {COMMON_REASONS.map((option) => (
+                    <Button
+                      key={option.label}
+                      type="button"
+                      size="sm"
+                      variant="outline"
+                      aria-pressed={reason === option.text}
+                      className={cn(
+                        buttonMotion,
+                        reason === option.text &&
+                          "border-[color-mix(in_oklab,var(--pn-accent)_45%,transparent)] bg-(--pn-accent-soft) text-(--pn-accent)"
+                      )}
+                      onClick={() => setReason(option.text)}
+                    >
+                      {option.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+              <FormField
+                label="Reason"
+                htmlFor="review-reason"
+                hint={`${firstName} reads this in My area and in the email, then uploads a new receipt.`}
+                error={reasonError}
+              >
+                <Textarea
+                  id="review-reason"
+                  value={reason}
+                  onChange={(event) => setReason(event.target.value)}
+                  maxLength={500}
+                  autoFocus
+                  aria-invalid={reasonError ? true : undefined}
+                  aria-describedby={fieldHintId("review-reason")}
+                  className={cn(fieldControl, "min-h-24")}
+                />
+              </FormField>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </FormDialog>
+  )
+}
+
+/** A fee paid without an uploaded receipt (cash at an event, or a transfer seen on the statement). */
+export function MarkPaidDialog({
+  open,
+  onOpenChange,
+  person,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  person: FeeTarget
+}) {
+  const { review, failed } = useFeeReview(person.id)
+  const save = useServerFn(markFeePaid)
+  const refresh = useRefreshAfter()
+  const [paidOn, setPaidOn] = useState(todayIso())
+  const [amount, setAmount] = useState<string | null>(null)
+  const [method, setMethod] = useState<PaymentMethod>("transfer")
+  const [note, setNote] = useState("")
+  const [submitted, setSubmitted] = useState(false)
+
+  const amountText = amount ?? (review ? centsToInput(review.fee.amountCents) : "")
+  const cents = parseEuros(amountText)
+  const amountError = submitted && cents === null ? "Enter the amount, such as 10.00." : undefined
+  const dateError = submitted && !paidOn ? "Choose the payment date." : undefined
+
+  async function submit() {
+    setSubmitted(true)
+    if (!review || cents === null || !paidOn) return
+    let issued: string
+    try {
+      issued = (await save({ data: { personId: person.id, paidOn, amountCents: cents, method, note: note.trim() } }))
+        .receipt
+    } catch (caught) {
+      console.error(caught)
+      throw new Error(errorMessage(caught, "Couldn't mark the fee as paid. Try again."), { cause: caught })
+    }
+    await refresh(`Fee marked as paid. Receipt ${issued} is ready to sign.`)
+    onOpenChange(false)
+  }
+
+  return (
+    <FormDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Mark as paid"
+      description="For a fee paid without an uploaded receipt, such as cash at an event. A receipt is issued for signing."
+      noun="payment"
+      dirty={note.trim() !== "" || amount !== null || method !== "transfer" || paidOn !== todayIso()}
+      submitLabel="Mark as paid"
+      canSubmit={review !== null}
+      onSubmit={submit}
+      notice={
+        review ? (
+          <InlineAlert tone="info">
+            Issues receipt <span className="font-mono">{review.nextReceipt}</span> for the President to sign.
+          </InlineAlert>
+        ) : undefined
+      }
+    >
+      {failed ? <InlineAlert>Couldn't load the fee. Close and try again.</InlineAlert> : null}
+      {!review && !failed ? <Loading>Loading the fee…</Loading> : null}
+      {review ? (
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-3 rounded-(--pn-r-4) border border-(--pn-line) bg-(--pn-sunken) px-3 py-2.5">
+            <span className="min-w-0 flex-1">
+              <span className="block truncate text-[14px] font-medium">{person.name}</span>
+              <span className="text-xs text-(--pn-fg-muted)">
+                <span className="font-mono">{person.number}</span> · Fee{" "}
+                <span className="font-mono">{review.fee.year}</span>
+              </span>
+            </span>
+            <StateBadge state={FEE_STATUS[review.fee.status]} />
+          </div>
+          <div className="grid grid-cols-1 gap-4 min-[420px]:grid-cols-2">
+            <FormField label="Payment date" htmlFor="paid-on" error={dateError}>
+              <DateField
+                id="paid-on"
+                value={paidOn}
+                onChange={setPaidOn}
+                invalid={!!dateError}
+                describedBy={dateError ? fieldHintId("paid-on") : undefined}
+              />
+            </FormField>
+            <FormField
+              label="Amount"
+              htmlFor="paid-amount"
+              hint={`The ${review.fee.year} fee is ${formatCents(review.fee.amountCents)}.`}
+              error={amountError}
+            >
+              <div className="relative">
+                <span
+                  aria-hidden
+                  className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-sm text-(--pn-fg-muted)"
+                >
+                  €
+                </span>
+                <Input
+                  id="paid-amount"
+                  value={amountText}
+                  onChange={(event) => setAmount(event.target.value)}
+                  inputMode="decimal"
+                  autoComplete="off"
+                  aria-invalid={amountError ? true : undefined}
+                  aria-describedby={fieldHintId("paid-amount")}
+                  className={cn(fieldControl, "pl-7 tabular-nums")}
+                />
+              </div>
+            </FormField>
+          </div>
+          <FormField label="Method" htmlFor="paid-method">
+            <SegmentedControl<PaymentMethod>
+              id="paid-method"
+              label="Method"
+              items={[
+                { value: "transfer", label: PAYMENT_METHOD.transfer },
+                { value: "cash", label: PAYMENT_METHOD.cash },
+              ]}
+              value={method}
+              onValueChange={setMethod}
+              className="w-full [&>*]:flex-1"
+            />
+          </FormField>
+          <FormField
+            label="Note"
+            htmlFor="paid-note"
+            optional
+            hint="Kept in the record's activity, not printed on the receipt."
+          >
+            <Textarea
+              id="paid-note"
+              value={note}
+              onChange={(event) => setNote(event.target.value)}
+              maxLength={500}
+              aria-describedby={fieldHintId("paid-note")}
+              className={cn(fieldControl, "min-h-20")}
+            />
+          </FormField>
+        </div>
+      ) : null}
+    </FormDialog>
+  )
+}
+
+/** Confirms the page's Send reminders: every Due and Unpaid fee, except members reminded in the last 3 days. */
+export function SendFeeRemindersDialog({
+  open,
+  onOpenChange,
+  count,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Members with a Due or Unpaid fee. */
+  count: number
+}) {
+  const remind = useServerFn(sendFeeReminders)
+  const refresh = useRefreshAfter()
+  return (
+    <ConfirmDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      tone="primary"
+      icon={Bell}
+      title="Send reminders?"
+      description={`${pluralize(count, "member")} with a Due or Unpaid fee get an email with the bank details and a link to My area. Members reminded in the last 3 days are skipped; automatic reminders also go out 14 and 3 days before the deadline.`}
+      confirmLabel="Send reminders"
+      onConfirm={async () => {
+        const result = await remind({ data: { personId: null } })
+        await refresh(
+          result.skipped
+            ? `${pluralize(result.sent, "reminder")} sent, ${result.skipped} skipped (reminded in the last 3 days).`
+            : `${pluralize(result.sent, "reminder")} sent.`
+        )
+      }}
+    />
+  )
+}
+
+/** Send reminder on one row or record: no confirmation, as it only sends an email. */
+export function useSendFeeReminder() {
+  const remind = useServerFn(sendFeeReminders)
+  const refresh = useRefreshAfter()
+  return async (person: { id: string; name: string }) => {
+    try {
+      await remind({ data: { personId: person.id } })
+    } catch (caught) {
+      console.error(caught)
+      appToast.error(errorMessage(caught, `Couldn't send the reminder to ${person.name}.`))
+      return
+    }
+    await refresh(`Reminder sent to ${person.name}.`)
+  }
+}
diff --git a/src/features/people/import-wizard.tsx b/src/features/people/import-wizard.tsx
index fe4bfa8..cdcc2a5 100644
--- a/src/features/people/import-wizard.tsx
+++ b/src/features/people/import-wizard.tsx
@@ -10,6 +10,8 @@ import {
   IconButton,
   InlineAlert,
   PlatformGlyph,
+  RadioCard,
+  RadioCardGroup,
   SegmentedControl,
   StatusBadge,
   Unset,
@@ -21,7 +23,7 @@ import { cn } from "@/lib/utils"
 import { commitCensusImport, previewCensusImport } from "./people-census.functions"
 import { CENSUS_ANSWER } from "./people-format"
 import { errorMessage, useRefreshAfter } from "./people-hooks"
-import { RadioCard, StateBadge } from "./people-ui"
+import { StateBadge } from "./people-ui"
 import { type Campaign, IMPORT_TABS, type ImportPreview, type ImportTab } from "./people.contract"
 
 type Step = "upload" | "review" | "duplicates" | "telegram" | "confirm"
@@ -171,8 +173,9 @@ export function ImportWizard({
         result = await upload({ data: form })
       } catch (caught) {
         console.error(caught)
-        const fallback = "The file couldn't be read. Check it's the Forms export and try again."
-        throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+        throw new Error(errorMessage(caught, "Couldn't read the file. Check it's the Forms export and try again."), {
+          cause: caught,
+        })
       }
       setPreview(result)
       setDuplicates({})
@@ -196,8 +199,9 @@ export function ImportWizard({
       imported = result.imported
     } catch (caught) {
       console.error(caught)
-      const fallback = "The responses couldn't be imported. Nothing was saved; try again."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Couldn't import the responses. Nothing was saved; try again."), {
+        cause: caught,
+      })
     }
     await refresh(`${pluralize(imported, "row")} imported.`)
     onOpenChange(false)
@@ -562,31 +566,23 @@ export function ImportWizard({
           ))}
         </div>
         <p className="text-[13px] text-(--pn-fg-muted)">Highlighted values differ.</p>
-        <fieldset className="grid grid-cols-1 gap-2 shell:grid-cols-2">
-          <legend className="sr-only">Same person or different people</legend>
+        <RadioCardGroup<Choice>
+          label="Same person or different people"
+          hideLabel
+          value={choice ?? null}
+          onValueChange={(next) => {
+            setDuplicates((current) => ({ ...current, [item.pairId]: next }))
+            if (pair < preview.duplicates.length - 1) setPair(pair + 1)
+          }}
+          className="grid grid-cols-1 gap-2 shell:grid-cols-2"
+        >
           <RadioCard
-            name={`pair-${item.pairId}`}
             value="same"
-            checked={choice === "same"}
-            onSelect={() => {
-              setDuplicates((current) => ({ ...current, [item.pairId]: "same" }))
-              if (pair < preview.duplicates.length - 1) setPair(pair + 1)
-            }}
             label="Same person"
             description={`The answer goes on ${item.recordId}; the file's values update the record.`}
           />
-          <RadioCard
-            name={`pair-${item.pairId}`}
-            value="different"
-            checked={choice === "different"}
-            onSelect={() => {
-              setDuplicates((current) => ({ ...current, [item.pairId]: "different" }))
-              if (pair < preview.duplicates.length - 1) setPair(pair + 1)
-            }}
-            label="Different people"
-            description="The row is added as a new person."
-          />
-        </fieldset>
+          <RadioCard value="different" label="Different people" description="The row is added as a new person." />
+        </RadioCardGroup>
       </>
     )
   }
diff --git a/src/features/people/link-account-dialog.tsx b/src/features/people/link-account-dialog.tsx
index 6218f8d..ed874ea 100644
--- a/src/features/people/link-account-dialog.tsx
+++ b/src/features/people/link-account-dialog.tsx
@@ -1,5 +1,5 @@
 import { useServerFn } from "@tanstack/react-start"
-import { useDeferredValue, useEffect, useState } from "react"
+import { useDeferredValue, useMemo, useState } from "react"
 
 import {
   fieldControl,
@@ -7,6 +7,8 @@ import {
   FormDialog,
   FormField,
   PlatformGlyph,
+  RadioCard,
+  RadioCardGroup,
   Spinner,
   StatusBadge,
 } from "@/components/primitives"
@@ -14,10 +16,9 @@ import { SearchField } from "@/components/shell"
 import { Textarea } from "@/components/ui/textarea"
 import { cn } from "@/lib/utils"
 
-import { errorMessage, useRefreshAfter } from "./people-hooks"
+import { errorMessage, useLoaded, useRefreshAfter } from "./people-hooks"
 import { PersonAvatar } from "./people-ui"
 import { linkPersonAccount } from "./people-write.functions"
-import type { AccountMatch } from "./people.contract"
 import { searchPeopleAccounts } from "./people.functions"
 
 const LINK_ERROR = "Couldn't link account."
@@ -43,29 +44,18 @@ export function LinkAccountDialog({
   const refresh = useRefreshAfter()
   const [query, setQuery] = useState("")
   const deferredQuery = useDeferredValue(query.trim())
-  const [accounts, setAccounts] = useState<AccountMatch[] | null>(null)
-  const [loadError, setLoadError] = useState<string | null>(null)
   const [selected, setSelected] = useState<string | null>(null)
   const [reason, setReason] = useState("")
   const [submitted, setSubmitted] = useState(false)
 
-  useEffect(() => {
-    if (!open) return
-    let current = true
-    setLoadError(null)
-    search({ data: { personId: person.id, query: deferredQuery } }).then(
-      (result) => {
-        if (current) setAccounts(result)
-      },
-      (caught) => {
-        console.error(caught)
-        if (current) setLoadError("Couldn't load accounts. Try again.")
-      }
-    )
-    return () => {
-      current = false
-    }
-  }, [open, person.id, deferredQuery, search])
+  const { data: accounts, failed } = useLoaded(
+    useMemo(
+      () => (open ? () => search({ data: { personId: person.id, query: deferredQuery } }) : null),
+      [open, person.id, deferredQuery, search]
+    ),
+    true
+  )
+  const loadError = failed ? "Couldn't load accounts. Try again." : null
 
   const reasonError = submitted && !reason.trim() ? "Enter a reason." : undefined
 
@@ -77,9 +67,7 @@ export function LinkAccountDialog({
       await link({ data: { personId: person.id, accountId: selected, reason: reason.trim() } })
     } catch (caught) {
       console.error(caught)
-      throw new Error(caught instanceof Error ? `${LINK_ERROR} ${errorMessage(caught, "")}`.trim() : LINK_ERROR, {
-        cause: caught,
-      })
+      throw new Error(`${LINK_ERROR} ${errorMessage(caught, "")}`.trim(), { cause: caught })
     }
     await refresh("Account linked.")
     onOpenChange(false)
@@ -105,8 +93,7 @@ export function LinkAccountDialog({
           placeholder="Search accounts by name, email or Telegram…"
           className="w-full max-w-none"
         />
-        <fieldset className="flex flex-col gap-2">
-          <legend className="mb-2 text-[13px] font-medium">{deferredQuery ? "Accounts" : "Suggested matches"}</legend>
+        <div className="flex flex-col gap-2">
           {loadError ? <p className="text-[13px] text-(--pn-danger-fg)">{loadError}</p> : null}
           {accounts === null && !loadError ? <Spinner className="size-4" /> : null}
           {accounts?.length === 0 ? (
@@ -114,41 +101,39 @@ export function LinkAccountDialog({
               No accounts match. Check the spelling, or send an invite.
             </p>
           ) : null}
-          {accounts?.map((account) => (
-            <label
-              key={account.id}
-              className={cn(
-                "flex cursor-pointer items-start gap-3 rounded-(--pn-r-4) border border-(--pn-line-strong) p-3 transition-[background-color,border-color] duration-120 hover:border-(--pn-hover-line) hover:bg-(--pn-hover)",
-                selected === account.id && "border-(--pn-accent) bg-(--pn-accent-soft) hover:bg-(--pn-accent-soft)"
-              )}
+          {accounts?.length ? (
+            <RadioCardGroup
+              label={deferredQuery ? "Accounts" : "Suggested matches"}
+              value={selected}
+              onValueChange={setSelected}
             >
-              <input
-                type="radio"
-                name="link-account"
-                value={account.id}
-                checked={selected === account.id}
-                onChange={() => setSelected(account.id)}
-                className="mt-1 size-4 accent-(--pn-accent-solid)"
-              />
-              <PersonAvatar name={account.name} />
-              <span className="flex min-w-0 flex-1 flex-col gap-0.5">
-                <span className="font-medium">{account.name}</span>
-                <span className="font-mono text-xs [overflow-wrap:anywhere] text-(--pn-fg-muted)">{account.email}</span>
-                <span className="flex flex-wrap items-center gap-1.5 text-xs text-(--pn-fg-muted)">
-                  {account.telegram ? (
-                    <>
-                      <PlatformGlyph platform="tg" className="size-3" />
-                      <span className="font-mono">{account.telegram}</span>
-                      <span aria-hidden>·</span>
-                    </>
-                  ) : null}
-                  {account.linkedTo ? `Linked to ${account.linkedTo.name} (${account.linkedTo.id})` : account.via}
-                </span>
-              </span>
-              <StatusBadge tone={REASONS[account.reason].tone}>{REASONS[account.reason].label}</StatusBadge>
-            </label>
-          ))}
-        </fieldset>
+              {accounts.map((account) => (
+                <RadioCard
+                  key={account.id}
+                  value={account.id}
+                  lead={<PersonAvatar name={account.name} />}
+                  label={account.name}
+                  description={
+                    <span className="flex flex-col gap-0.5">
+                      <span className="font-mono [overflow-wrap:anywhere]">{account.email}</span>
+                      <span className="flex flex-wrap items-center gap-1.5">
+                        {account.telegram ? (
+                          <>
+                            <PlatformGlyph platform="tg" className="size-3" />
+                            <span className="font-mono">{account.telegram}</span>
+                            <span aria-hidden>·</span>
+                          </>
+                        ) : null}
+                        {account.linkedTo ? `Linked to ${account.linkedTo.name} (${account.linkedTo.id})` : account.via}
+                      </span>
+                    </span>
+                  }
+                  end={<StatusBadge tone={REASONS[account.reason].tone}>{REASONS[account.reason].label}</StatusBadge>}
+                />
+              ))}
+            </RadioCardGroup>
+          ) : null}
+        </div>
         <FormField label="Reason" htmlFor="link-reason" hint="Saved in the record's activity." error={reasonError}>
           <Textarea
             id="link-reason"
diff --git a/src/features/people/linking-page.tsx b/src/features/people/linking-page.tsx
index 167c482..5e680da 100644
--- a/src/features/people/linking-page.tsx
+++ b/src/features/people/linking-page.tsx
@@ -15,9 +15,12 @@ import {
   IconButton,
   InlineAlert,
   PlatformGlyph,
+  RadioCard,
+  RadioCardGroup,
   RowActions,
   SegmentedControl,
   StatusBadge,
+  useOpenGeneration,
 } from "@/components/primitives"
 import { appToast, Count, PageBar, PageContent, Toolbar, useCan } from "@/components/shell"
 import { Button } from "@/components/ui/button"
@@ -27,7 +30,7 @@ import { cn } from "@/lib/utils"
 import { type AccountAction, AccountActionDialog } from "./account-action-dialog"
 import { formatDay, isExpired } from "./people-format"
 import { errorMessage, useRefreshAfter } from "./people-hooks"
-import { PersonCell, RadioCard } from "./people-ui"
+import { PersonCell } from "./people-ui"
 import { dismissLinkingReview, resolveLinkingReview } from "./people-write.functions"
 import type { Invite, Review } from "./people.contract"
 
@@ -160,8 +163,7 @@ function ResolveDialog({
       await resolve({ data: { reviewId: review.id, resolution: choice, reason: reason.trim() } })
     } catch (caught) {
       console.error(caught)
-      const fallback = "The review couldn't be resolved."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Couldn't resolve the review."), { cause: caught })
     }
     await refresh("Resolved.")
     onOpenChange(false)
@@ -254,21 +256,29 @@ function ResolveDialog({
             <span className="font-medium">Their message:</span> {review.message}
           </InlineAlert>
         ) : null}
-        <fieldset className="flex flex-col gap-2">
-          <legend className="mb-2 text-[13px] font-medium">Resolution</legend>
-          {options.map((option) => (
-            <RadioCard
-              key={option.value}
-              name="resolution"
-              value={option.value}
-              checked={choice === option.value}
-              onSelect={() => setChoice(option.value)}
-              label={option.label}
-              description={option.description}
-            />
-          ))}
-          {choiceError ? <p className="text-[13px] text-(--pn-danger-fg)">{choiceError}</p> : null}
-        </fieldset>
+        <div className="flex flex-col gap-2">
+          <RadioCardGroup
+            label="Resolution"
+            value={choice}
+            onValueChange={setChoice}
+            invalid={!!choiceError}
+            describedBy={choiceError ? "resolve-choice-error" : undefined}
+          >
+            {options.map((option) => (
+              <RadioCard
+                key={option.value}
+                value={option.value}
+                label={option.label}
+                description={option.description}
+              />
+            ))}
+          </RadioCardGroup>
+          {choiceError ? (
+            <p id="resolve-choice-error" className="text-[13px] text-(--pn-danger-fg)">
+              {choiceError}
+            </p>
+          ) : null}
+        </div>
         <FormField label="Reason" htmlFor="resolve-reason" hint="Saved in the record's activity." error={reasonError}>
           <Textarea
             id="resolve-reason"
@@ -295,7 +305,7 @@ export function LinkingPage({ reviews, invites }: { reviews: Review[]; invites:
   const deferredQuery = useDeferredValue(query.trim().toLocaleLowerCase())
   const [resolving, setResolving] = useState<Review | null>(null)
   const [resolveOpen, setResolveOpen] = useState(false)
-  const [resolveKey, setResolveKey] = useState(0)
+  const resolveKey = useOpenGeneration(resolveOpen)
   const [accountAction, setAccountAction] = useState<AccountAction | null>(null)
   const [accountOpen, setAccountOpen] = useState(false)
 
@@ -311,7 +321,7 @@ export function LinkingPage({ reviews, invites }: { reviews: Review[]; invites:
       await dismiss({ data: { reviewId: review.id } })
     } catch (caught) {
       console.error(caught)
-      appToast.error(caught instanceof Error ? errorMessage(caught, "Couldn't dismiss it.") : "Couldn't dismiss it.")
+      appToast.error(errorMessage(caught, "Couldn't dismiss it."))
       return
     }
     await refresh("Review dismissed.")
@@ -464,7 +474,6 @@ export function LinkingPage({ reviews, invites }: { reviews: Review[]; invites:
                         className={buttonMotion}
                         onClick={() => {
                           setResolving(review)
-                          setResolveKey((value) => value + 1)
                           setResolveOpen(true)
                         }}
                       >
diff --git a/src/features/people/member-dialogs.tsx b/src/features/people/member-dialogs.tsx
index 70d6a80..0f13961 100644
--- a/src/features/people/member-dialogs.tsx
+++ b/src/features/people/member-dialogs.tsx
@@ -2,17 +2,29 @@ import { useServerFn } from "@tanstack/react-start"
 import { Download } from "lucide-react"
 import { useState } from "react"
 
-import { ConfirmDialog, fieldControl, fieldHintId, FormDialog, FormField, InlineAlert } from "@/components/primitives"
+import {
+  ConfirmDialog,
+  DateField,
+  fieldControl,
+  fieldHintId,
+  FormDialog,
+  FormField,
+  InlineAlert,
+  RadioCard,
+  RadioCardGroup,
+  SelectField,
+} from "@/components/primitives"
 import { appToast } from "@/components/shell"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
+import { pluralize } from "@/lib/format"
 import { cn } from "@/lib/utils"
 
-import { DateField } from "./date-field"
-import { CURRENT_YEAR, FEE_STATUS, MEMBER_STATUS, todayIso } from "./people-format"
+import { saveBlob } from "./people-files"
+import { currentYear, FEE_STATUS, MEMBER_STATUS, todayIso } from "./people-format"
 import { errorMessage, useRefreshAfter } from "./people-hooks"
 import { createMember, exportMembers, setMemberNumber, setMemberStatus } from "./people-members.functions"
-import { type PersonOption, PersonPicker, RadioCard, SelectField } from "./people-ui"
+import { type PersonOption, PersonPicker } from "./people-ui"
 import { MEMBER_STATUSES, type MemberStatus } from "./people.contract"
 
 type NewFee = "due" | "receipt" | "paid"
@@ -69,12 +81,7 @@ export function AddMemberDialog({
       await create({ data: { personId: person.id, number: trimmed, admittedOn, fee } })
     } catch (caught) {
       console.error(caught)
-      throw new Error(
-        caught instanceof Error
-          ? errorMessage(caught, "The member could not be added. Try again.")
-          : "The member could not be added. Try again.",
-        { cause: caught }
-      )
+      throw new Error(errorMessage(caught, "Couldn't add the member. Try again."), { cause: caught })
     }
     await refresh(`${person.name} added as member ${trimmed}.`)
     onOpenChange(false)
@@ -136,7 +143,7 @@ export function AddMemberDialog({
             />
           </FormField>
         </div>
-        <FormField label={`Fee ${CURRENT_YEAR}`} htmlFor="member-fee">
+        <FormField label={`Fee ${currentYear()}`} htmlFor="member-fee">
           <SelectField<NewFee>
             id="member-fee"
             value={fee}
@@ -175,12 +182,7 @@ export function MemberStatusDialog({
       await save({ data: { personId: member.personId, status, reason: reason.trim() } })
     } catch (caught) {
       console.error(caught)
-      throw new Error(
-        caught instanceof Error
-          ? errorMessage(caught, "The status could not be changed. Try again.")
-          : "The status could not be changed. Try again.",
-        { cause: caught }
-      )
+      throw new Error(errorMessage(caught, "Couldn't change the status. Try again."), { cause: caught })
     }
     await refresh("Member status changed.")
     onOpenChange(false)
@@ -198,20 +200,16 @@ export function MemberStatusDialog({
       onSubmit={submit}
     >
       <div className="flex flex-col gap-4">
-        <fieldset className="flex flex-col gap-2">
-          <legend className="sr-only">Status</legend>
+        <RadioCardGroup label="Status" hideLabel value={status} onValueChange={setStatus}>
           {MEMBER_STATUSES.map((value) => (
             <RadioCard
               key={value}
-              name="member-status"
               value={value}
-              checked={status === value}
-              onSelect={() => setStatus(value)}
               label={MEMBER_STATUS[value].label}
               description={MEMBER_STATUS[value].description}
             />
           ))}
-        </fieldset>
+        </RadioCardGroup>
         <FormField label="Reason" htmlFor="member-status-reason" optional hint="Shown in the record's activity.">
           <Textarea
             id="member-status-reason"
@@ -264,12 +262,7 @@ export function MemberNumberDialog({
       await save({ data: { personId: member.personId, number: trimmed } })
     } catch (caught) {
       console.error(caught)
-      throw new Error(
-        caught instanceof Error
-          ? errorMessage(caught, "The member number could not be changed. Try again.")
-          : "The member number could not be changed. Try again.",
-        { cause: caught }
-      )
+      throw new Error(errorMessage(caught, "Couldn't change the member number. Try again."), { cause: caught })
     }
     await refresh("Member number changed.")
     onOpenChange(false)
@@ -314,15 +307,6 @@ export function MemberNumberDialog({
   )
 }
 
-function download(filename: string, contents: string) {
-  const url = URL.createObjectURL(new Blob([contents], { type: "text/csv;charset=utf-8" }))
-  const link = document.createElement("a")
-  link.href = url
-  link.download = filename
-  link.click()
-  URL.revokeObjectURL(url)
-}
-
 /** Confirms first: the file holds personal data. */
 export function ExportMembersDialog({
   open,
@@ -341,11 +325,11 @@ export function ExportMembersDialog({
       tone="primary"
       icon={Download}
       title="Export member register?"
-      description={`The file holds personal data of ${count} ${count === 1 ? "member" : "members"}: names, numbers, emails and fee status. Keep it in the association's OneDrive and delete local copies.`}
+      description={`The file holds personal data of ${pluralize(count, "member")}: names, numbers, emails and fee status. Keep it in the association's OneDrive and delete local copies.`}
       confirmLabel="Export register"
       onConfirm={async () => {
         const file = await exportRegister()
-        download(file.filename, file.csv)
+        saveBlob(new Blob([file.csv], { type: "text/csv;charset=utf-8" }), file.filename)
         appToast.success("Member register exported.")
       }}
     />
diff --git a/src/features/people/members-page.tsx b/src/features/people/members-page.tsx
index 628ad1f..5317ad1 100644
--- a/src/features/people/members-page.tsx
+++ b/src/features/people/members-page.tsx
@@ -1,5 +1,4 @@
-import { Link } from "@tanstack/react-router"
-import { Download, EllipsisVertical, IdCard, Pencil, Plus, UserRound } from "lucide-react"
+import { Banknote, Bell, Download, FileSearch, IdCard, Pencil, Plus } from "lucide-react"
 import { useDeferredValue, useState } from "react"
 
 import {
@@ -7,11 +6,8 @@ import {
   DataTable,
   type DataTableColumn,
   EmptyState,
+  FilterMenu,
   IconButton,
-  Menu,
-  MenuContent,
-  MenuItem,
-  MenuTrigger,
   RowActions,
   SegmentedControl,
   type TableSort,
@@ -21,6 +17,13 @@ import { Count, PageBar, PageContent, Toolbar, useCan } from "@/components/shell
 import { Button } from "@/components/ui/button"
 import { pluralize } from "@/lib/format"
 
+import {
+  type FeeTarget,
+  MarkPaidDialog,
+  ReviewReceiptDialog,
+  SendFeeRemindersDialog,
+  useSendFeeReminder,
+} from "./fee-dialogs"
 import {
   AddMemberDialog,
   ExportMembersDialog,
@@ -28,8 +31,9 @@ import {
   MemberStatusDialog,
   nextMemberNumber,
 } from "./member-dialogs"
-import { ACCOUNT_STATUS, CURRENT_YEAR, FEE_STATUS, formatDay, MEMBER_STATUS, personName } from "./people-format"
-import { FilterMenu, MonoChip, PersonCell, StateBadge } from "./people-ui"
+import { ACCOUNT_STATUS, currentYear, FEE_STATUS, formatDay, MEMBER_STATUS, personName } from "./people-format"
+import { useDialog, useDialogState } from "./people-hooks"
+import { ActionMenu, MonoChip, PersonCell, StateBadge } from "./people-ui"
 import {
   FEE_STATUSES,
   type FeeStatus,
@@ -42,6 +46,7 @@ import {
 type Member = PersonRow & { member: Membership }
 type Scope = "all" | MemberStatus
 type MemberDialog = { kind: "status" | "number"; member: Member }
+type FeeDialog = { kind: "review" | "paid"; person: FeeTarget }
 
 function isRegistered(person: PersonRow): person is Member {
   return person.member !== null
@@ -66,78 +71,81 @@ function sortKey(column: string) {
   return SORTERS.number
 }
 
-const columns: DataTableColumn<Member>[] = [
-  {
-    id: "number",
-    label: "Number",
-    sortable: true,
-    width: 96,
-    mobile: "hidden",
-    cell: (person) => <MonoChip>{person.member.number}</MonoChip>,
-  },
-  {
-    id: "name",
-    label: "Name",
-    sortable: true,
-    fill: true,
-    minWidth: 200,
-    mobile: "main",
-    cell: (person) => (
-      <>
-        <PersonCell name={personName(person)} muted={person.member.status === "former"} />
-        {/* Mobile cards: the number, status and fee on one labelled line. */}
-        <span className="mt-2 hidden flex-wrap items-center gap-1.5 pl-11 max-shell:flex">
-          <MonoChip>{person.member.number}</MonoChip>
-          <StateBadge state={MEMBER_STATUS[person.member.status]} />
-          {person.member.fee ? (
-            <span className="text-xs text-(--pn-fg-muted)">
-              Fee {FEE_STATUS[person.member.fee].label.toLocaleLowerCase()}
-            </span>
-          ) : null}
-        </span>
-      </>
-    ),
-  },
-  {
-    id: "status",
-    label: "Status",
-    width: 120,
-    mobile: "hidden",
-    cell: (person) => <StateBadge state={MEMBER_STATUS[person.member.status]} />,
-  },
-  {
-    id: "admitted",
-    label: "Admitted on",
-    sortable: true,
-    width: 128,
-    priority: 3,
-    mobile: "hidden",
-    cell: (person) => <span className="whitespace-nowrap">{formatDay(person.member.admittedOn)}</span>,
-  },
-  {
-    id: "fee",
-    label: `Fee ${CURRENT_YEAR}`,
-    width: 152,
-    mobile: "hidden",
-    cell: (person) => (person.member.fee ? <StateBadge state={FEE_STATUS[person.member.fee]} /> : <Unset />),
-  },
-  {
-    id: "m365",
-    label: "Microsoft 365",
-    width: 264,
-    priority: 4,
-    mobile: "hidden",
-    cell: (person) => <span className="block truncate font-mono text-[13px]">{person.member.m365Email}</span>,
-  },
-  {
-    id: "account",
-    label: "Account",
-    width: 128,
-    priority: 5,
-    mobile: "hidden",
-    cell: (person) => <StateBadge state={ACCOUNT_STATUS[person.account.status]} />,
-  },
-]
+/** The table's columns; the census and fee columns name the current academic year. */
+function tableColumns(year: string): DataTableColumn<Member>[] {
+  return [
+    {
+      id: "number",
+      label: "Number",
+      sortable: true,
+      width: 96,
+      mobile: "hidden",
+      cell: (person) => <MonoChip>{person.member.number}</MonoChip>,
+    },
+    {
+      id: "name",
+      label: "Name",
+      sortable: true,
+      fill: true,
+      minWidth: 200,
+      mobile: "main",
+      cell: (person) => (
+        <>
+          <PersonCell name={personName(person)} muted={person.member.status === "former"} />
+          {/* Mobile cards: the number, status and fee on one labelled line. */}
+          <span className="mt-2 hidden flex-wrap items-center gap-1.5 pl-11 max-shell:flex">
+            <MonoChip>{person.member.number}</MonoChip>
+            <StateBadge state={MEMBER_STATUS[person.member.status]} />
+            {person.member.fee ? (
+              <span className="text-xs text-(--pn-fg-muted)">
+                Fee {FEE_STATUS[person.member.fee].label.toLocaleLowerCase()}
+              </span>
+            ) : null}
+          </span>
+        </>
+      ),
+    },
+    {
+      id: "status",
+      label: "Status",
+      width: 120,
+      mobile: "hidden",
+      cell: (person) => <StateBadge state={MEMBER_STATUS[person.member.status]} />,
+    },
+    {
+      id: "admitted",
+      label: "Admitted on",
+      sortable: true,
+      width: 128,
+      priority: 3,
+      mobile: "hidden",
+      cell: (person) => <span className="whitespace-nowrap">{formatDay(person.member.admittedOn)}</span>,
+    },
+    {
+      id: "fee",
+      label: `Fee ${year}`,
+      width: 168,
+      mobile: "hidden",
+      cell: (person) => (person.member.fee ? <StateBadge state={FEE_STATUS[person.member.fee]} /> : <Unset />),
+    },
+    {
+      id: "m365",
+      label: "Microsoft 365",
+      width: 264,
+      priority: 4,
+      mobile: "hidden",
+      cell: (person) => <span className="block truncate font-mono text-[13px]">{person.member.m365Email}</span>,
+    },
+    {
+      id: "account",
+      label: "Account",
+      width: 128,
+      priority: 5,
+      mobile: "hidden",
+      cell: (person) => <StateBadge state={ACCOUNT_STATUS[person.account.status]} />,
+    },
+  ]
+}
 
 const DEFAULT_SORT: TableSort = { column: "number", direction: "asc" }
 
@@ -153,6 +161,9 @@ export function MembersPage({
   onAddHandled: () => void
 }) {
   const canWrite = useCan("people:members:write")
+  const canFees = useCan("people:fees:write")
+  const year = currentYear()
+  const sendReminder = useSendFeeReminder()
   const members = people.filter(isRegistered)
   const candidates = people
     .filter((person) => !isRegistered(person))
@@ -170,12 +181,11 @@ export function MembersPage({
   const [sort, setSort] = useState(DEFAULT_SORT)
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
-  const [addOpen, setAddOpen] = useState(canWrite && requested !== null)
-  const [addKey, setAddKey] = useState(0)
-  const [exportOpen, setExportOpen] = useState(false)
-  const [dialog, setDialog] = useState<MemberDialog | null>(null)
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const [dialogKey, setDialogKey] = useState(0)
+  const add = useDialogState(canWrite && requested !== null)
+  const exportDialog = useDialogState()
+  const reminders = useDialogState()
+  const memberDialog = useDialog<MemberDialog>()
+  const feeDialog = useDialog<FeeDialog>()
 
   const inScope = scope === "all" ? members : members.filter((person) => person.member.status === scope)
   const filtered = inScope.filter(
@@ -189,16 +199,13 @@ export function MembersPage({
   const current = members.filter((person) => person.member.status !== "former").length
   const byStatus = (status: MemberStatus) => members.filter((person) => person.member.status === status).length
 
-  function openAdd() {
-    setAddKey((value) => value + 1)
-    setAddOpen(true)
+  function openFee(kind: FeeDialog["kind"], member: Member) {
+    feeDialog.show({ kind, person: { id: member.id, name: personName(member), number: member.member.number } })
   }
 
-  function openDialog(kind: MemberDialog["kind"], member: Member) {
-    setDialog({ kind, member })
-    setDialogKey((value) => value + 1)
-    setDialogOpen(true)
-  }
+  const owing = members.filter(
+    (person) => person.member.status !== "former" && (person.member.fee === "due" || person.member.fee === "unpaid")
+  ).length
 
   function clearFilters() {
     setQuery("")
@@ -206,6 +213,7 @@ export function MembersPage({
     setPage(1)
   }
 
+  const dialog = memberDialog.target
   const target = dialog
     ? {
         personId: dialog.member.id,
@@ -221,16 +229,30 @@ export function MembersPage({
       <PageBar
         description={`${pluralize(current, "member")} · ${byStatus("former")} former`}
         right={
-          canWrite ? (
+          canWrite || canFees ? (
             <>
-              <Button size="sm" variant="outline" className={buttonMotion} onClick={() => setExportOpen(true)}>
-                <Download data-icon="inline-start" />
-                Export
-              </Button>
-              <Button size="sm" className={buttonMotion} onClick={openAdd}>
-                <Plus data-icon="inline-start" />
-                Add member
-              </Button>
+              {/* One outline action (Send reminders); Export is an icon so it stays in the same place for everyone. */}
+              {canFees ? (
+                <Button size="sm" variant="outline" className={buttonMotion} onClick={reminders.show}>
+                  <Bell data-icon="inline-start" />
+                  Send reminders
+                </Button>
+              ) : null}
+              {canWrite ? (
+                <>
+                  <Button size="sm" className={buttonMotion} onClick={add.show}>
+                    <Plus data-icon="inline-start" />
+                    Add member
+                  </Button>
+                  <IconButton
+                    label="Export register"
+                    icon={Download}
+                    appearance="boxed"
+                    className="size-10 max-shell:flex-none"
+                    onClick={exportDialog.show}
+                  />
+                </>
+              ) : null}
             </>
           ) : undefined
         }
@@ -281,7 +303,7 @@ export function MembersPage({
                   />
                 </span>
                 <FilterMenu<FeeStatus>
-                  label={`Fee ${CURRENT_YEAR}`}
+                  label={`Fee ${year}`}
                   allLabel="Any fee status"
                   value={fee}
                   onChange={(value) => {
@@ -307,7 +329,7 @@ export function MembersPage({
       <PageContent>
         <DataTable
           label="Member register"
-          columns={columns}
+          columns={tableColumns(year)}
           rows={rows}
           getRowId={(person) => person.id}
           rowLabel={personName}
@@ -321,41 +343,64 @@ export function MembersPage({
             setPage(1)
           }}
           actions={
-            canWrite
+            canWrite || canFees
               ? (person) => (
                   <RowActions>
-                    <IconButton
-                      label="Change status"
-                      ariaLabel={`Change status of ${personName(person)}`}
-                      icon={Pencil}
-                      onClick={() => openDialog("status", person)}
-                    />
-                    <Menu>
-                      <MenuTrigger
-                        render={
-                          <IconButton
-                            label="More actions"
-                            ariaLabel={`More actions for ${personName(person)}`}
-                            icon={EllipsisVertical}
-                          />
-                        }
+                    {/* The fee's own action, by state; Paid and former members keep an empty slot so icons align. */}
+                    {canFees ? (
+                      person.member.status !== "former" && person.member.fee === "receipt" ? (
+                        <IconButton
+                          label="Review receipt"
+                          ariaLabel={`Review the receipt of ${personName(person)}`}
+                          icon={FileSearch}
+                          onClick={() => openFee("review", person)}
+                        />
+                      ) : person.member.status !== "former" &&
+                        (person.member.fee === "due" || person.member.fee === "unpaid") ? (
+                        <IconButton
+                          label="Send reminder"
+                          ariaLabel={`Send a fee reminder to ${personName(person)}`}
+                          icon={Bell}
+                          onClick={() => void sendReminder({ id: person.id, name: personName(person) })}
+                        />
+                      ) : (
+                        <span aria-hidden className="size-9 shrink-0" />
+                      )
+                    ) : null}
+                    {canWrite ? (
+                      <IconButton
+                        label="Change status"
+                        ariaLabel={`Change status of ${personName(person)}`}
+                        icon={Pencil}
+                        onClick={() => memberDialog.show({ kind: "status", member: person })}
                       />
-                      <MenuContent>
-                        <MenuItem onClick={() => openDialog("number", person)}>
-                          <IdCard />
-                          Change member number
-                        </MenuItem>
-                        <MenuItem render={<Link to="/dashboard/people/$personId" params={{ personId: person.id }} />}>
-                          <UserRound />
-                          Open record
-                        </MenuItem>
-                      </MenuContent>
-                    </Menu>
+                    ) : null}
+                    <ActionMenu
+                      keepSlot
+                      label={`More actions for ${personName(person)}`}
+                      actions={[
+                        canFees &&
+                          person.member.status !== "former" &&
+                          person.member.fee !== null &&
+                          person.member.fee !== "paid" && {
+                            label: "Mark as paid",
+                            ariaLabel: `Mark the fee of ${personName(person)} as paid`,
+                            icon: Banknote,
+                            onClick: () => openFee("paid", person),
+                          },
+                        canWrite && {
+                          label: "Change member number",
+                          ariaLabel: `Change the member number of ${personName(person)}`,
+                          icon: IdCard,
+                          onClick: () => memberDialog.show({ kind: "number", member: person }),
+                        },
+                      ]}
+                    />
                   </RowActions>
                 )
               : undefined
           }
-          actionsWidth={96}
+          actionsWidth={(canFees ? 38 : 0) + (canWrite ? 38 : 0) + 40}
           pagination={{
             page,
             pageSize,
@@ -385,7 +430,7 @@ export function MembersPage({
                 text="Members appear here once the Direttivo admits them."
                 action={
                   canWrite ? (
-                    <Button size="sm" variant="outline" className={buttonMotion} onClick={openAdd}>
+                    <Button size="sm" variant="outline" className={buttonMotion} onClick={add.show}>
                       <Plus data-icon="inline-start" />
                       Add member
                     </Button>
@@ -402,34 +447,58 @@ export function MembersPage({
           }
         />
       </PageContent>
+      {canFees ? (
+        <SendFeeRemindersDialog open={reminders.open} onOpenChange={reminders.onOpenChange} count={owing} />
+      ) : null}
+      {canFees && feeDialog.target ? (
+        feeDialog.target.kind === "review" ? (
+          <ReviewReceiptDialog
+            key={`review-${feeDialog.key}`}
+            open={feeDialog.open}
+            onOpenChange={feeDialog.onOpenChange}
+            person={feeDialog.target.person}
+          />
+        ) : (
+          <MarkPaidDialog
+            key={`paid-${feeDialog.key}`}
+            open={feeDialog.open}
+            onOpenChange={feeDialog.onOpenChange}
+            person={feeDialog.target.person}
+          />
+        )
+      ) : null}
       {canWrite ? (
         <>
           <AddMemberDialog
-            key={`add-${addKey}`}
-            open={addOpen}
+            key={`add-${add.key}`}
+            open={add.open}
             onOpenChange={(open) => {
-              setAddOpen(open)
+              add.onOpenChange(open)
               if (!open && addPersonId) onAddHandled()
             }}
             candidates={candidates}
-            initialPerson={addKey === 0 ? requested : null}
+            initialPerson={add.key === 0 ? requested : null}
             nextNumber={nextNumber}
             takenNumbers={takenNumbers}
           />
-          <ExportMembersDialog open={exportOpen} onOpenChange={setExportOpen} count={members.length} />
+          <ExportMembersDialog
+            open={exportDialog.open}
+            onOpenChange={exportDialog.onOpenChange}
+            count={members.length}
+          />
           {dialog && target ? (
             dialog.kind === "status" ? (
               <MemberStatusDialog
-                key={`status-${dialogKey}`}
-                open={dialogOpen}
-                onOpenChange={setDialogOpen}
+                key={`status-${memberDialog.key}`}
+                open={memberDialog.open}
+                onOpenChange={memberDialog.onOpenChange}
                 member={target}
               />
             ) : (
               <MemberNumberDialog
-                key={`number-${dialogKey}`}
-                open={dialogOpen}
-                onOpenChange={setDialogOpen}
+                key={`number-${memberDialog.key}`}
+                open={memberDialog.open}
+                onOpenChange={memberDialog.onOpenChange}
                 member={target}
                 nextNumber={nextNumber}
                 takenNumbers={takenNumbers}
diff --git a/src/features/people/my-area-dialogs.tsx b/src/features/people/my-area-dialogs.tsx
index 433ee39..5a5dc8c 100644
--- a/src/features/people/my-area-dialogs.tsx
+++ b/src/features/people/my-area-dialogs.tsx
@@ -1,14 +1,14 @@
 import { useServerFn } from "@tanstack/react-start"
 import { useState } from "react"
 
-import { fieldControl, fieldHintId, FormDialog, FormField } from "@/components/primitives"
+import { fieldControl, fieldHintId, FormDialog, FormField, SelectField } from "@/components/primitives"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { cn } from "@/lib/utils"
 
 import { errorMessage, useRefreshAfter } from "./people-hooks"
 import { answerMyCensus, askToBeAdded, requestCorrection } from "./people-self.functions"
-import { ChoiceChips, SelectField } from "./people-ui"
+import { ChoiceChips } from "./people-ui"
 import {
   type AnswerCensusInput,
   CORRECTION_FIELDS,
@@ -46,8 +46,7 @@ export function LeavingDialog({
       await save({ data: { ...answer, answer: "leaving", reason, note: note.trim() } })
     } catch (caught) {
       console.error(caught)
-      const fallback = "Your answer couldn't be saved. Try again."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Your answer couldn't be saved. Try again."), { cause: caught })
     }
     await refresh("Answer saved.")
     onOpenChange(false)
@@ -109,8 +108,7 @@ export function CorrectionDialog({ open, onOpenChange }: { open: boolean; onOpen
       await send({ data: { field, value: value.trim(), note: note.trim() } })
     } catch (caught) {
       console.error(caught)
-      const fallback = "The request couldn't be sent. Try again."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Couldn't send the request. Try again."), { cause: caught })
     }
     await refresh("Correction requested.")
     onOpenChange(false)
@@ -198,8 +196,7 @@ export function AskToBeAddedDialog({ open, onOpenChange }: { open: boolean; onOp
       await send({ data: { roles, groupsOrTeam: groupsOrTeam.trim(), telegramUsername: telegram.trim() } })
     } catch (caught) {
       console.error(caught)
-      const fallback = "The request couldn't be sent. Try again."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Couldn't send the request. Try again."), { cause: caught })
     }
     await refresh("Request sent.")
     onOpenChange(false)
diff --git a/src/features/people/my-area-page.tsx b/src/features/people/my-area-page.tsx
index 955ab3a..cd97b65 100644
--- a/src/features/people/my-area-page.tsx
+++ b/src/features/people/my-area-page.tsx
@@ -29,13 +29,15 @@ import {
   FormField,
   IconButton,
   InlineAlert,
-  KeyValueList,
   type KeyValueItem,
+  KeyValueList,
   PlatformGlyph,
   SectionCard,
   SectionHeading,
+  SelectField,
   StatusBadge,
   Unset,
+  useOpenGeneration,
 } from "@/components/primitives"
 import { appToast, PageBar, PageContent } from "@/components/shell"
 import { Button } from "@/components/ui/button"
@@ -43,6 +45,7 @@ import { pluralize } from "@/lib/format"
 import { cn } from "@/lib/utils"
 
 import { AskToBeAddedDialog, CorrectionDialog, LeavingDialog } from "./my-area-dialogs"
+import { MyFeeCard } from "./my-fee-card"
 import {
   activeTeams,
   CENSUS_ANSWER,
@@ -53,23 +56,14 @@ import {
   MEMBER_STATUS,
   nextYear,
   personName,
+  PHOTO_CONSENT,
   teamName,
   telegramUrl,
   yearOf,
 } from "./people-format"
 import { errorMessage, useRefreshAfter } from "./people-hooks"
 import { answerMyCensus, confirmMyMatch, rejectMyMatch, revokePhotoConsent } from "./people-self.functions"
-import {
-  ChoiceChips,
-  MonoChip,
-  PersonAvatar,
-  PersonCell,
-  Row,
-  RowIcon,
-  Rows,
-  SelectField,
-  StateBadge,
-} from "./people-ui"
+import { ChoiceChips, MonoChip, PersonAvatar, PersonCell, Row, RowIcon, Rows, StateBadge } from "./people-ui"
 import { CAMPUSES, type Campus, COURSES, type MyArea, type TeamId, YEARS } from "./people.contract"
 
 type Linked = Extract<MyArea, { state: "linked" }>
@@ -96,8 +90,7 @@ function MatchView({ area }: { area: Match }) {
       await (yes ? confirm : reject)()
     } catch (caught) {
       console.error(caught)
-      const fallback = "That didn't work. Try again."
-      appToast.error(caught instanceof Error ? errorMessage(caught, fallback) : fallback)
+      appToast.error(errorMessage(caught, "That didn't work. Try again."))
       setPending(null)
       return
     }
@@ -159,7 +152,7 @@ function MatchView({ area }: { area: Match }) {
 
 function NoRecordView({ sentOn }: { sentOn: string | null }) {
   const [askOpen, setAskOpen] = useState(false)
-  const [askKey, setAskKey] = useState(0)
+  const askKey = useOpenGeneration(askOpen)
   return (
     <>
       <PageBar width="settings" />
@@ -180,7 +173,6 @@ function NoRecordView({ sentOn }: { sentOn: string | null }) {
               <Button
                 className={buttonMotion}
                 onClick={() => {
-                  setAskKey((value) => value + 1)
                   setAskOpen(true)
                 }}
               >
@@ -214,7 +206,7 @@ function CensusCard({ area }: { area: Linked }) {
   const [keepTeams, setKeepTeams] = useState<TeamId[]>(teams)
   const [saving, setSaving] = useState(false)
   const [leavingOpen, setLeavingOpen] = useState(false)
-  const [leavingKey, setLeavingKey] = useState(0)
+  const leavingKey = useOpenGeneration(leavingOpen)
 
   if (!campaign) return null
   const answer = { course, year, campus, keepGroups, keepTeams }
@@ -251,8 +243,7 @@ function CensusCard({ area }: { area: Linked }) {
       await save({ data: { ...answer, answer: "continues", reason: "", note: "" } })
     } catch (caught) {
       console.error(caught)
-      const fallback = "Your answer couldn't be saved. Try again."
-      appToast.error(caught instanceof Error ? errorMessage(caught, fallback) : fallback)
+      appToast.error(errorMessage(caught, "Your answer couldn't be saved. Try again."))
       setSaving(false)
       return
     }
@@ -282,7 +273,6 @@ function CensusCard({ area }: { area: Linked }) {
             className={buttonMotion}
             disabled={saving}
             onClick={() => {
-              setLeavingKey((value) => value + 1)
               setLeavingOpen(true)
             }}
           >
@@ -374,7 +364,7 @@ function LinkedView({ area }: { area: Linked }) {
   const revoke = useServerFn(revokePhotoConsent)
   const refresh = useRefreshAfter()
   const [correctionOpen, setCorrectionOpen] = useState(false)
-  const [correctionKey, setCorrectionKey] = useState(0)
+  const correctionKey = useOpenGeneration(correctionOpen)
   const [revokeOpen, setRevokeOpen] = useState(false)
   const { profile, member, admin, consents } = person
   const teams = activeTeams(person)
@@ -467,6 +457,8 @@ function LinkedView({ area }: { area: Linked }) {
         <div className="flex flex-col gap-6">
           <CensusCard key={person.census.map((entry) => `${entry.year}:${entry.answer}`).join()} area={area} />
 
+          {person.fees ? <MyFeeCard fees={person.fees} instructions={area.feeInstructions} /> : null}
+
           <div className="grid items-start gap-4 min-[1100px]:grid-cols-2">
             <div className="flex min-w-0 flex-col gap-4">
               <SectionCard title="My roles" padding="flush">
@@ -480,7 +472,7 @@ function LinkedView({ area }: { area: Linked }) {
                             Member <MonoChip>{member.number}</MonoChip>
                           </>
                         }
-                        meta={`Admitted ${formatDay(member.admittedOn)}${member.fee ? ` · Fee: ${FEE_STATUS[member.fee].label}` : ""}`}
+                        meta={`Admitted ${formatDay(member.admittedOn)}${member.fee && !person.fees ? ` · Fee: ${FEE_STATUS[member.fee].label}` : ""}`}
                         end={<StateBadge state={MEMBER_STATUS[member.status]} />}
                       />
                     ) : null}
@@ -590,7 +582,6 @@ function LinkedView({ area }: { area: Linked }) {
                     size="sm"
                     className={buttonMotion}
                     onClick={() => {
-                      setCorrectionKey((value) => value + 1)
                       setCorrectionOpen(true)
                     }}
                   >
@@ -617,13 +608,13 @@ function LinkedView({ area }: { area: Linked }) {
                     title="Photo and video"
                     meta={
                       consents.photo
-                        ? `${photoGranted ? "Granted" : consents.photo.status === "denied" ? "Denied" : "Revoked"} ${formatDay(consents.photo.on)}`
+                        ? `${PHOTO_CONSENT[consents.photo.status].label} ${formatDay(consents.photo.on)}`
                         : "Not granted"
                     }
                     end={
                       photoGranted ? (
                         <>
-                          <StatusBadge tone="success">Granted</StatusBadge>
+                          <StateBadge state={PHOTO_CONSENT.granted} />
                           <Button
                             size="sm"
                             variant="outline"
@@ -634,9 +625,9 @@ function LinkedView({ area }: { area: Linked }) {
                           </Button>
                         </>
                       ) : (
-                        <StatusBadge tone="neutral">
-                          {consents.photo?.status === "revoked" ? "Revoked" : "Denied"}
-                        </StatusBadge>
+                        <StateBadge
+                          state={PHOTO_CONSENT[consents.photo?.status === "revoked" ? "revoked" : "denied"]}
+                        />
                       )
                     }
                   />
diff --git a/src/features/people/my-fee-card.tsx b/src/features/people/my-fee-card.tsx
new file mode 100644
index 0000000..b9ca9f0
--- /dev/null
+++ b/src/features/people/my-fee-card.tsx
@@ -0,0 +1,303 @@
+import { useServerFn } from "@tanstack/react-start"
+import { FileDown, FileText, Hourglass, Upload } from "lucide-react"
+import { useState } from "react"
+
+import {
+  buttonMotion,
+  CopyableText,
+  DateField,
+  fieldControl,
+  fieldHintId,
+  FileButton,
+  FormDialog,
+  FormField,
+  InlineAlert,
+  KeyValueList,
+  LoadingButton,
+  SectionCard,
+  StatusBadge,
+  useOpenGeneration,
+} from "@/components/primitives"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { formatDateTime } from "@/lib/format"
+import { cn } from "@/lib/utils"
+
+import { centsToInput, formatCents, parseEuros } from "./people-fees"
+import { FEE_STATUS, formatDay, todayIso } from "./people-format"
+import { errorMessage, useFileDownload, useRefreshAfter } from "./people-hooks"
+import { downloadMyReceipt, uploadMyTransferReceipt } from "./people-self.functions"
+import { Row, RowIcon, Rows, StateBadge, SubHeading } from "./people-ui"
+import type { FeeDetail, FeeInstructions, Fees } from "./people.contract"
+
+const TRANSFER_TYPES = ".pdf,.jpg,.jpeg,.png,application/pdf,image/jpeg,image/png"
+
+/**
+ * My area's fee card: how to pay and the upload while the fee is due, the review while a receipt is uploaded, the
+ * receipt being signed once paid, and every signed receipt to download.
+ */
+export function MyFeeCard({ fees, instructions }: { fees: Fees; instructions: FeeInstructions | null }) {
+  const download = useServerFn(downloadMyReceipt)
+  const [uploadOpen, setUploadOpen] = useState(false)
+  const uploadKey = useOpenGeneration(uploadOpen)
+  const { busy, download: downloadFile } = useFileDownload()
+  const fee = fees.current
+  // Voided receipts were replaced by another; one still to sign shows as Being signed.
+  const receipts = fees.receipts.filter((receipt) => receipt.status !== "voided")
+  const signing = fee ? receipts.find((receipt) => receipt.year === fee.year && receipt.status === "toSign") : undefined
+  const owing = fee?.status === "due" || fee?.status === "unpaid"
+
+  function openUpload() {
+    setUploadOpen(true)
+  }
+
+  return (
+    <SectionCard
+      title={fee ? `Membership fee ${fee.year}` : "Membership fees"}
+      action={fee ? <StateBadge state={FEE_STATUS[fee.status]} /> : undefined}
+      padding="flush"
+    >
+      {fee ? (
+        <div className="flex flex-col gap-4 border-b border-(--pn-line) p-4">
+          {owing && fee.rejection ? (
+            <InlineAlert>
+              <span className="font-medium">Your transfer receipt was rejected</span> on{" "}
+              {formatDay(fee.rejection.at.slice(0, 10))}: “{fee.rejection.reason}”
+            </InlineAlert>
+          ) : null}
+          {owing && instructions ? (
+            <>
+              <p className="text-[14px] text-pretty">
+                {fee.status === "unpaid" ? `The deadline was ${formatDay(fee.dueOn)}. ` : ""}Pay{" "}
+                <span className="font-medium tabular-nums">{formatCents(fee.amountCents)}</span> by bank transfer
+                {fee.status === "due" ? ` by ${formatDay(fee.dueOn)}` : ""}, then upload the transfer receipt here. You
+                get the signed receipt by email.
+              </p>
+              <div className="rounded-(--pn-r-4) border border-(--pn-line) bg-(--pn-sunken) px-3.5 py-3">
+                <KeyValueList
+                  items={[
+                    { key: "Beneficiary", value: <CopyableText value={instructions.beneficiary} what="Beneficiary" /> },
+                    {
+                      key: "IBAN",
+                      value: <CopyableText value={instructions.iban} what="IBAN" className="font-mono text-[13px]" />,
+                    },
+                    { key: "Amount", value: <span className="tabular-nums">{formatCents(fee.amountCents)}</span> },
+                    {
+                      key: "Reference",
+                      value: (
+                        <CopyableText
+                          value={instructions.reference}
+                          what="Reference"
+                          className="font-mono text-[13px]"
+                        />
+                      ),
+                    },
+                  ]}
+                />
+              </div>
+              <div>
+                <Button className={cn(buttonMotion, "h-10 max-shell:w-full")} onClick={openUpload}>
+                  <Upload data-icon="inline-start" />
+                  {fee.rejection ? "Upload a new receipt" : "Upload transfer receipt"}
+                </Button>
+              </div>
+            </>
+          ) : null}
+          {fee.status === "receipt" && fee.upload ? (
+            <>
+              <div className="flex items-center gap-3 rounded-(--pn-r-4) border border-(--pn-line) px-3 py-2.5">
+                <span className="grid size-9 shrink-0 place-items-center rounded-(--pn-r-3) bg-(--pn-muted) text-(--pn-fg-muted)">
+                  <FileText aria-hidden strokeWidth={1.75} className="size-4" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate font-mono text-[13px]">{fee.upload.fileName}</span>
+                  <span className="text-xs text-(--pn-fg-muted)">
+                    Uploaded {formatDateTime(new Date(fee.upload.uploadedAt))} · transfer of{" "}
+                    {formatDay(fee.upload.transferDate)}
+                  </span>
+                </span>
+              </div>
+              <p className="text-[14px] text-(--pn-fg-muted)">
+                An admin checks your receipt, usually within a few days. Once it's approved the fee turns Paid and the
+                signed receipt reaches you by email.
+              </p>
+              <div>
+                <Button variant="outline" className={cn(buttonMotion, "h-10 max-shell:w-full")} onClick={openUpload}>
+                  <Upload data-icon="inline-start" />
+                  Replace file
+                </Button>
+              </div>
+            </>
+          ) : null}
+          {fee.status === "paid" ? (
+            <InlineAlert tone="neutral">
+              {fee.payment ? `Paid on ${formatDay(fee.payment.paidOn)}. ` : "Paid. "}
+              {signing ? (
+                <>
+                  Receipt <span className="font-mono">{signing.number}</span> is waiting for a signature; it reaches you
+                  by email once signed.
+                </>
+              ) : (
+                "Your receipt is below."
+              )}
+            </InlineAlert>
+          ) : null}
+        </div>
+      ) : null}
+      <Rows>
+        <SubHeading>Your receipts</SubHeading>
+        {receipts.length === 0 ? (
+          <li className="px-4 pb-3 text-[13px] text-(--pn-fg-muted)">None yet. Each paid fee gets a signed receipt.</li>
+        ) : null}
+        {receipts.map((receipt) => (
+          <Row
+            key={receipt.id}
+            lead={<RowIcon icon={FileText} />}
+            title={
+              <>
+                <span className="font-mono">{receipt.number}</span>
+                <span className="text-[13px] font-normal text-(--pn-fg-muted)">
+                  Fee <span className="font-mono">{receipt.year}</span>
+                </span>
+              </>
+            }
+            meta={
+              receipt.status === "toSign" || !receipt.signedOn
+                ? `Issued ${formatDay(receipt.issuedOn)}`
+                : `Signed ${formatDay(receipt.signedOn)}`
+            }
+            end={
+              receipt.status === "toSign" ? (
+                <StatusBadge tone="neutral">
+                  <Hourglass aria-hidden className="size-3" />
+                  Being signed
+                </StatusBadge>
+              ) : (
+                <LoadingButton
+                  size="sm"
+                  variant="outline"
+                  icon={FileDown}
+                  pending={busy === receipt.id}
+                  aria-label={`Download receipt ${receipt.number}`}
+                  onClick={() =>
+                    void downloadFile(
+                      receipt.id,
+                      () => download({ data: { receiptId: receipt.id } }),
+                      `Couldn't download receipt ${receipt.number}.`
+                    )
+                  }
+                >
+                  PDF
+                </LoadingButton>
+              )
+            }
+          />
+        ))}
+      </Rows>
+      {fee && (owing || fee.status === "receipt") ? (
+        <UploadTransferDialog key={`upload-${uploadKey}`} open={uploadOpen} onOpenChange={setUploadOpen} fee={fee} />
+      ) : null}
+    </SectionCard>
+  )
+}
+
+/** The member's bank receipt for the fee, with the transfer date and amount as written on it. */
+function UploadTransferDialog({
+  open,
+  onOpenChange,
+  fee,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  fee: FeeDetail
+}) {
+  const upload = useServerFn(uploadMyTransferReceipt)
+  const refresh = useRefreshAfter()
+  const [file, setFile] = useState<File | null>(null)
+  const [date, setDate] = useState(todayIso())
+  const [amount, setAmount] = useState(centsToInput(fee.amountCents))
+  const [submitted, setSubmitted] = useState(false)
+  const cents = parseEuros(amount)
+  const fileError = submitted && !file ? "Choose the transfer receipt." : undefined
+  const dateError = submitted && !date ? "Choose the transfer date." : undefined
+  const amountError = submitted && cents === null ? "Enter the amount, such as 10.00." : undefined
+
+  async function submit() {
+    setSubmitted(true)
+    if (!file || !date || cents === null) return
+    const form = new FormData()
+    form.set("file", file)
+    form.set("transferDate", date)
+    form.set("amountCents", String(cents))
+    try {
+      await upload({ data: form })
+    } catch (caught) {
+      console.error(caught)
+      throw new Error(errorMessage(caught, "Couldn't upload the receipt. Try again."), { cause: caught })
+    }
+    await refresh("Transfer receipt uploaded.")
+    onOpenChange(false)
+  }
+
+  return (
+    <FormDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Upload transfer receipt"
+      description={`The receipt your bank issued for the ${formatCents(fee.amountCents)} transfer. An admin checks it, then the fee turns Paid.`}
+      noun="upload"
+      dirty={file !== null}
+      submitLabel="Upload receipt"
+      onSubmit={submit}
+      notice={
+        fee.status === "receipt" ? (
+          <InlineAlert tone="info">The new file replaces the one you uploaded before.</InlineAlert>
+        ) : undefined
+      }
+    >
+      <div className="flex flex-col gap-4">
+        <FormField label="File" htmlFor="transfer-file" error={fileError}>
+          <FileButton
+            id="transfer-file"
+            file={file}
+            onChange={setFile}
+            accept={TRANSFER_TYPES}
+            hint="PDF, JPG or PNG, up to 10 MB. A screenshot of the payment page isn't enough."
+            invalid={!!fileError}
+          />
+        </FormField>
+        <div className="grid grid-cols-1 gap-4 min-[420px]:grid-cols-2">
+          <FormField label="Transfer date" htmlFor="transfer-date" error={dateError}>
+            <DateField
+              id="transfer-date"
+              value={date}
+              onChange={setDate}
+              invalid={!!dateError}
+              describedBy={dateError ? fieldHintId("transfer-date") : undefined}
+            />
+          </FormField>
+          <FormField label="Amount" htmlFor="transfer-amount" hint="As written on the receipt." error={amountError}>
+            <div className="relative">
+              <span
+                aria-hidden
+                className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-sm text-(--pn-fg-muted)"
+              >
+                €
+              </span>
+              <Input
+                id="transfer-amount"
+                value={amount}
+                onChange={(event) => setAmount(event.target.value)}
+                inputMode="decimal"
+                autoComplete="off"
+                aria-invalid={amountError ? true : undefined}
+                aria-describedby={fieldHintId("transfer-amount")}
+                className={cn(fieldControl, "pl-7 tabular-nums")}
+              />
+            </div>
+          </FormField>
+        </div>
+      </div>
+    </FormDialog>
+  )
+}
diff --git a/src/features/people/notes-dialog.tsx b/src/features/people/notes-dialog.tsx
index 04e6b20..0ad4e4c 100644
--- a/src/features/people/notes-dialog.tsx
+++ b/src/features/people/notes-dialog.tsx
@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils"
 import { errorMessage, useRefreshAfter } from "./people-hooks"
 import { setPersonNote } from "./people-write.functions"
 
-const SAVE_ERROR = "The note could not be saved. Try again."
+const SAVE_ERROR = "Couldn't save the note. Try again."
 
 /** HR notes on a record: visible to the Direttivo and HR only. */
 export function NotesDialog({
@@ -31,7 +31,7 @@ export function NotesDialog({
       await save({ data: { id: personId, note: value.trim() } })
     } catch (caught) {
       console.error(caught)
-      throw new Error(caught instanceof Error ? errorMessage(caught, SAVE_ERROR) : SAVE_ERROR, { cause: caught })
+      throw new Error(errorMessage(caught, SAVE_ERROR), { cause: caught })
     }
     await refresh("Note saved.")
     onOpenChange(false)
diff --git a/src/features/people/overview-page.tsx b/src/features/people/overview-page.tsx
index 3e02864..99af80e 100644
--- a/src/features/people/overview-page.tsx
+++ b/src/features/people/overview-page.tsx
@@ -1,5 +1,4 @@
-import { Link } from "@tanstack/react-router"
-import { EllipsisVertical, Link2, Mail, Plus, UserRound, UsersRound } from "lucide-react"
+import { Link2, Mail, Plus, UsersRound } from "lucide-react"
 import { useDeferredValue, useState } from "react"
 
 import {
@@ -9,14 +8,12 @@ import {
   DataTable,
   type DataTableColumn,
   EmptyState,
+  FilterMenu,
   IconButton,
-  Menu,
-  MenuContent,
-  MenuItem,
-  MenuTrigger,
   RowActions,
   type TableSort,
   Unset,
+  useOpenGeneration,
 } from "@/components/primitives"
 import { Count, PageBar, PageContent, Toolbar, useCan } from "@/components/shell"
 import { Button } from "@/components/ui/button"
@@ -29,7 +26,7 @@ import {
   activeTeams,
   CENSUS_ANSWER,
   censusEntry,
-  CURRENT_YEAR,
+  currentYear,
   hasNoRoles,
   isActiveAdmin,
   isMember,
@@ -38,7 +35,7 @@ import {
   roleLabels,
   teamName,
 } from "./people-format"
-import { FilterMenu, MonoChip, PersonCell, StateBadge, TruncatedChip } from "./people-ui"
+import { ActionMenu, MonoChip, PersonCell, StateBadge, TruncatedChip } from "./people-ui"
 import {
   ACCOUNT_STATUSES,
   type AccountStatus,
@@ -75,7 +72,7 @@ function matchesFilters(person: PersonRow, filters: Filters) {
   if (filters.campus && person.profile.campus !== filters.campus) return false
   if (filters.account && person.account.status !== filters.account) return false
   if (filters.census) {
-    const entry = censusEntry(person, CURRENT_YEAR)
+    const entry = censusEntry(person, currentYear())
     if (filters.census === "none" ? !entry || entry.answer !== null : entry?.answer !== filters.census) return false
   }
   return true
@@ -205,11 +202,12 @@ export function PeopleOverviewPage({ people }: { people: PersonRow[] }) {
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
   const [addOpen, setAddOpen] = useState(false)
-  const [addKey, setAddKey] = useState(0)
+  const addKey = useOpenGeneration(addOpen)
   const [accountAction, setAccountAction] = useState<AccountAction | null>(null)
   const [accountOpen, setAccountOpen] = useState(false)
   const [linkTarget, setLinkTarget] = useState<PersonRow | null>(null)
   const [linkOpen, setLinkOpen] = useState(false)
+  const linkKey = useOpenGeneration(linkOpen)
 
   const filtered = people.filter((person) => matchesFilters(person, filters) && matchesQuery(person, deferredQuery))
   const sign = sort.direction === "asc" ? 1 : -1
@@ -229,7 +227,6 @@ export function PeopleOverviewPage({ people }: { people: PersonRow[] }) {
   }
 
   function openAdd() {
-    setAddKey((key) => key + 1)
     setAddOpen(true)
   }
 
@@ -312,9 +309,9 @@ export function PeopleOverviewPage({ people }: { people: PersonRow[] }) {
                   value={filters.census}
                   onChange={(value) => setFilter("census", value)}
                   options={[
-                    { value: "continues", label: `Continues in ${CURRENT_YEAR}` },
-                    { value: "leaving", label: `Leaving in ${CURRENT_YEAR}` },
-                    { value: "none", label: `No ${CURRENT_YEAR} answer` },
+                    { value: "continues", label: `Continues in ${currentYear()}` },
+                    { value: "leaving", label: `Leaving in ${currentYear()}` },
+                    { value: "none", label: `No ${currentYear()} answer` },
                   ]}
                 />
               </>
@@ -355,34 +352,21 @@ export function PeopleOverviewPage({ people }: { people: PersonRow[] }) {
                     ) : (
                       <span aria-hidden className="size-9 max-shell:hidden" />
                     )}
-                    <Menu>
-                      <MenuTrigger
-                        render={
-                          <IconButton
-                            label="More actions"
-                            ariaLabel={`More actions for ${personName(person)}`}
-                            icon={EllipsisVertical}
-                          />
-                        }
-                      />
-                      <MenuContent>
-                        <MenuItem render={<Link to="/dashboard/people/$personId" params={{ personId: person.id }} />}>
-                          <UserRound />
-                          Open record
-                        </MenuItem>
-                        {person.account.status !== "linked" ? (
-                          <MenuItem
-                            onClick={() => {
-                              setLinkTarget(person)
-                              setLinkOpen(true)
-                            }}
-                          >
-                            <Link2 />
-                            Link account
-                          </MenuItem>
-                        ) : null}
-                      </MenuContent>
-                    </Menu>
+                    <ActionMenu
+                      keepSlot
+                      label={`More actions for ${personName(person)}`}
+                      actions={[
+                        person.account.status !== "linked" && {
+                          label: "Link account",
+                          ariaLabel: `Link an account to ${personName(person)}`,
+                          icon: Link2,
+                          onClick: () => {
+                            setLinkTarget(person)
+                            setLinkOpen(true)
+                          },
+                        },
+                      ]}
+                    />
                   </RowActions>
                 )
               : undefined
@@ -434,7 +418,7 @@ export function PeopleOverviewPage({ people }: { people: PersonRow[] }) {
           <AccountActionDialog action={accountAction} open={accountOpen} onOpenChange={setAccountOpen} />
           {linkTarget ? (
             <LinkAccountDialog
-              key={linkTarget.id}
+              key={`${linkTarget.id}-${linkKey}`}
               open={linkOpen}
               onOpenChange={setLinkOpen}
               person={{ id: linkTarget.id, name: personName(linkTarget), firstName: linkTarget.profile.firstName }}
diff --git a/src/features/people/pdf-pages.tsx b/src/features/people/pdf-pages.tsx
new file mode 100644
index 0000000..c5227e4
--- /dev/null
+++ b/src/features/people/pdf-pages.tsx
@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from "react"
+
+import { Spinner } from "@/components/primitives"
+
+/** Pages drawn at most: transfer receipts are one or two pages. */
+const MAX_PAGES = 4
+
+/**
+ * A PDF's pages drawn on canvases with pdf.js, loaded on first use. Browsers' own viewers don't render PDFs inside a
+ * page on Android and show only the first page on iOS, so the preview looks the same everywhere this way.
+ */
+export function PdfPages({ file, label }: { file: Blob; label: string }) {
+  const pagesRef = useRef<HTMLDivElement>(null)
+  const [state, setState] = useState<"loading" | "ready" | "failed">("loading")
+
+  useEffect(() => {
+    const pages = pagesRef.current
+    if (!pages) return
+    let cancelled = false
+    let destroy: (() => Promise<void>) | null = null
+
+    async function draw(target: HTMLDivElement) {
+      const [pdfjs, worker] = await Promise.all([
+        import("pdfjs-dist"),
+        import("pdfjs-dist/build/pdf.worker.min.mjs?url"),
+      ])
+      pdfjs.GlobalWorkerOptions.workerSrc = worker.default
+      const task = pdfjs.getDocument({ data: new Uint8Array(await file.arrayBuffer()) })
+      destroy = () => task.destroy()
+      const pdf = await task.promise
+      const width = target.clientWidth
+      for (let number = 1; number <= Math.min(pdf.numPages, MAX_PAGES); number++) {
+        const page = await pdf.getPage(number)
+        if (cancelled) return
+        const viewport = page.getViewport({ scale: (width / page.getViewport({ scale: 1 }).width) * devicePixelRatio })
+        const canvas = document.createElement("canvas")
+        canvas.width = Math.floor(viewport.width)
+        canvas.height = Math.floor(viewport.height)
+        canvas.className = "block w-full bg-white"
+        await page.render({ canvas, viewport }).promise
+        if (cancelled) return
+        target.append(canvas)
+      }
+      setState("ready")
+    }
+
+    setState("loading")
+    draw(pages).catch((caught) => {
+      console.error(caught)
+      if (!cancelled) setState("failed")
+    })
+    return () => {
+      cancelled = true
+      pages.replaceChildren()
+      destroy?.().catch((caught) => console.error(caught))
+    }
+  }, [file])
+
+  return (
+    <div className="relative max-h-80 min-h-40 overflow-y-auto">
+      <div ref={pagesRef} role="img" aria-label={label} className="flex flex-col gap-2" />
+      {state === "loading" ? (
+        <p
+          role="status"
+          className="absolute inset-0 flex items-center justify-center gap-2 text-[13px] text-(--pn-fg-muted)"
+        >
+          <Spinner />
+          Loading the file…
+        </p>
+      ) : null}
+      {state === "failed" ? (
+        <p className="absolute inset-0 grid place-items-center px-4 text-center text-[13px] text-(--pn-fg-muted)">
+          This PDF can't be previewed. Open it to check it.
+        </p>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/features/people/people-fees.functions.ts b/src/features/people/people-fees.functions.ts
new file mode 100644
index 0000000..f980c9e
--- /dev/null
+++ b/src/features/people/people-fees.functions.ts
@@ -0,0 +1,61 @@
+import { createServerFn } from "@tanstack/react-start"
+
+import { peopleFeesWriteMiddleware } from "@/server/auth.middleware"
+
+import { peopleApi } from "./people.api.server"
+import {
+  feePersonInputSchema,
+  feeRemindInputSchema,
+  markPaidInputSchema,
+  receiptInputSchema,
+  rejectFeeInputSchema,
+  voidReceiptInputSchema,
+} from "./people.contract"
+
+/** Review receipt: the member, their current fee year and the number approving would issue. */
+export const getFeeReview = createServerFn({ method: "GET" })
+  .middleware([peopleFeesWriteMiddleware])
+  .validator(feePersonInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).getFeeReview(data))
+
+/** The member's uploaded transfer receipt, for the preview. */
+export const getFeeUpload = createServerFn({ method: "GET" })
+  .middleware([peopleFeesWriteMiddleware])
+  .validator(feePersonInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).getFeeUpload(data))
+
+/** Marks the fee paid and issues the next receipt for the President to sign. */
+export const approveFee = createServerFn({ method: "POST" })
+  .middleware([peopleFeesWriteMiddleware])
+  .validator(feePersonInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).approveFee(data))
+
+/** Sends the receipt back: the member sees the reason in My area and by email. */
+export const rejectFee = createServerFn({ method: "POST" })
+  .middleware([peopleFeesWriteMiddleware])
+  .validator(rejectFeeInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).rejectFee(data))
+
+/** A fee paid without an uploaded receipt (cash, or a transfer checked on the bank statement). */
+export const markFeePaid = createServerFn({ method: "POST" })
+  .middleware([peopleFeesWriteMiddleware])
+  .validator(markPaidInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).markFeePaid(data))
+
+/** One member, or every Due and Unpaid fee; the backend skips people reminded in the last 3 days. */
+export const sendFeeReminders = createServerFn({ method: "POST" })
+  .middleware([peopleFeesWriteMiddleware])
+  .validator(feeRemindInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).remindFees(data))
+
+/** Emails a signed receipt again after the first attempt failed. */
+export const retryReceipt = createServerFn({ method: "POST" })
+  .middleware([peopleFeesWriteMiddleware])
+  .validator(receiptInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).retryReceipt(data))
+
+/** Receipts are never deleted: voiding keeps the number and the file, with the reason. */
+export const voidReceipt = createServerFn({ method: "POST" })
+  .middleware([peopleFeesWriteMiddleware])
+  .validator(voidReceiptInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).voidReceipt(data))
diff --git a/src/features/people/people-fees.ts b/src/features/people/people-fees.ts
new file mode 100644
index 0000000..feb064f
--- /dev/null
+++ b/src/features/people/people-fees.ts
@@ -0,0 +1,127 @@
+/**
+ * Membership fees and receipts: pure helpers shared by the pages, the agent-mode API and the tests. No `@/` imports,
+ * so `node --test` loads this file as it is.
+ */
+
+/** "€10.00": amounts travel as integer cents. */
+export function formatCents(cents: number) {
+  return new Intl.NumberFormat("en-GB", { style: "currency", currency: "EUR" }).format(cents / 100)
+}
+
+/** "10", "10.5", "10,50" or "€ 10.00" as cents; `null` for anything else, zero or negative. */
+export function parseEuros(text: string): number | null {
+  const match = /^\s*€?\s*(\d{1,5})(?:[.,](\d{1,2}))?\s*$/.exec(text)
+  if (!match) return null
+  const cents = Number(match[1]) * 100 + Number((match[2] ?? "0").padEnd(2, "0"))
+  return cents > 0 ? cents : null
+}
+
+/** "10.00" for an amount input. */
+export function centsToInput(cents: number) {
+  return (cents / 100).toFixed(2)
+}
+
+/** Receipt numbers are the fee year's first calendar year and a three-digit sequence: "2026/042". */
+export const RECEIPT_NUMBER_PATTERN = /^\d{4}\/\d{3,}$/
+
+/** The receipt number written in a file name ("Ricevuta_2026-042_firmata.pdf" → "2026/042"), or `null`. */
+export function receiptNumberFromFileName(fileName: string): string | null {
+  const match = /(?:^|\D)(20\d{2})[\s_./-]?(\d{3})(?!\d)/.exec(fileName)
+  return match ? `${match[1]}/${match[2]}` : null
+}
+
+/** The file name a receipt is downloaded under, which `receiptNumberFromFileName` reads back. */
+export function receiptFileName(number: string, signed = false) {
+  return `Ricevuta_${number.replace("/", "-")}${signed ? "_firmata" : ""}.pdf`
+}
+
+/** The first calendar year of a fee year: "2026/27" → "2026". */
+export function receiptYearPrefix(feeYear: string) {
+  return feeYear.slice(0, 4)
+}
+
+/** The next receipt number of a fee year: numbers are never reused, voided ones included. */
+export function nextReceiptNumber(feeYear: string, numbers: readonly string[]) {
+  const prefix = receiptYearPrefix(feeYear)
+  const highest = numbers
+    .filter((number) => number.startsWith(`${prefix}/`))
+    .reduce((max, number) => Math.max(max, Number(number.slice(5))), 0)
+  return `${prefix}/${String(highest + 1).padStart(3, "0")}`
+}
+
+const UNITS = [
+  "zero",
+  "uno",
+  "due",
+  "tre",
+  "quattro",
+  "cinque",
+  "sei",
+  "sette",
+  "otto",
+  "nove",
+  "dieci",
+  "undici",
+  "dodici",
+  "tredici",
+  "quattordici",
+  "quindici",
+  "sedici",
+  "diciassette",
+  "diciotto",
+  "diciannove",
+]
+const TENS = ["", "", "venti", "trenta", "quaranta", "cinquanta", "sessanta", "settanta", "ottanta", "novanta"]
+
+function belowHundred(value: number): string {
+  if (value < 20) return UNITS[value] ?? ""
+  const tens = TENS[Math.floor(value / 10)] ?? ""
+  const unit = value % 10
+  if (unit === 0) return tens
+  // "ventuno", "trentotto": the tens drop their vowel before uno and otto.
+  const stem = unit === 1 || unit === 8 ? tens.slice(0, -1) : tens
+  return stem + (unit === 3 ? "tré" : (UNITS[unit] ?? ""))
+}
+
+function belowThousand(value: number): string {
+  const hundreds = Math.floor(value / 100)
+  const rest = value % 100
+  const head = hundreds === 0 ? "" : hundreds === 1 ? "cento" : `${UNITS[hundreds] ?? ""}cento`
+  if (rest === 0) return head || "zero"
+  // "centotto", "centottanta": cento keeps its o only before a consonant.
+  const tail = belowHundred(rest)
+  return head && tail.startsWith("o") ? head.slice(0, -1) + tail : head + tail
+}
+
+/** The amount in Italian words, as receipts write it: 1000 → "dieci/00", 2550 → "venticinque/50". */
+export function amountInWords(cents: number) {
+  const euros = Math.floor(cents / 100)
+  const rest = String(cents % 100).padStart(2, "0")
+  if (euros >= 1_000_000) return `${euros}/${rest}`
+  const thousands = Math.floor(euros / 1000)
+  const below = euros % 1000
+  const head = thousands === 0 ? "" : thousands === 1 ? "mille" : `${belowThousand(thousands)}mila`
+  const words = thousands > 0 && below === 0 ? head : head + belowThousand(below)
+  return `${words}/${rest}`
+}
+
+/** What happens to one signed file in Upload signed receipts. */
+export type SignedFileOutcome = "ready" | "noReceipt" | "duplicate" | "notToSign" | "otherSigner" | "notSigned"
+
+/**
+ * A signed file is sent only when it points at a receipt waiting for a signature, no other file points there, the
+ * receipt is the viewer's to sign (the Vice-president signs the President's own) and the file carries a signature.
+ */
+export function signedFileOutcome(input: {
+  signed: boolean
+  receipt: { status: string; signer: string } | null
+  viewerSigner: string | null
+  duplicate: boolean
+}): SignedFileOutcome {
+  if (!input.receipt) return "noReceipt"
+  if (input.duplicate) return "duplicate"
+  if (input.receipt.status !== "toSign") return "notToSign"
+  if (input.receipt.signer !== input.viewerSigner) return "otherSigner"
+  if (!input.signed) return "notSigned"
+  return "ready"
+}
diff --git a/src/features/people/people-files.ts b/src/features/people/people-files.ts
new file mode 100644
index 0000000..87a66a5
--- /dev/null
+++ b/src/features/people/people-files.ts
@@ -0,0 +1,25 @@
+import type { FilePayload } from "./people.contract"
+
+/** A file the server sent as base64, as a Blob the browser can show or save. */
+export function fileBlob(file: FilePayload) {
+  const binary = atob(file.base64)
+  const bytes = new Uint8Array(binary.length)
+  for (let index = 0; index < binary.length; index++) bytes[index] = binary.charCodeAt(index)
+  return new Blob([bytes], { type: file.contentType })
+}
+
+/** Saves the file under its own name. */
+export function saveFile(file: FilePayload) {
+  saveBlob(fileBlob(file), file.fileName)
+}
+
+/** Saves data built in the browser, such as a CSV export. */
+export function saveBlob(blob: Blob, fileName: string) {
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = fileName
+  link.click()
+  // Revoked later: some browsers start the download after the click handler returns.
+  window.setTimeout(() => URL.revokeObjectURL(url), 10_000)
+}
diff --git a/src/features/people/people-format.ts b/src/features/people/people-format.ts
index fe880f6..d3c2f99 100644
--- a/src/features/people/people-format.ts
+++ b/src/features/people/people-format.ts
@@ -1,4 +1,5 @@
 import type { StatusTone } from "@/components/primitives"
+import { academicYear, dateOnlyValue } from "@/lib/date-only"
 import { formatDate } from "@/lib/format"
 
 import {
@@ -7,14 +8,20 @@ import {
   type CensusEntry,
   type FeeStatus,
   type MemberStatus,
+  type PaymentMethod,
   type PersonRow,
+  type PhotoConsent,
+  type ReceiptStatus,
+  type Signer,
   TEAMS,
   type TeamId,
   YEARS,
 } from "./people.contract"
 
-/** The academic year whose census is current; the census campaign list names it too. */
-export const CURRENT_YEAR = "2026/27"
+/** The academic year whose census and fees are current. */
+export function currentYear() {
+  return academicYear(todayIso())
+}
 
 export function personName(person: Pick<PersonRow, "profile">) {
   return `${person.profile.firstName} ${person.profile.lastName}`
@@ -85,8 +92,9 @@ export function formatDay(value: string) {
   return formatDate(new Date(value.length === 10 ? `${value}T12:00:00Z` : value))
 }
 
+/** Today in the browser's timezone, as an ISO date: date inputs start from it. */
 export function todayIso() {
-  return new Date().toISOString().slice(0, 10)
+  return dateOnlyValue(new Date())
 }
 
 export function isExpired(date: string) {
@@ -102,6 +110,12 @@ export const ACCOUNT_STATUS = {
   review: { label: "Needs review", tone: "warning" },
 } satisfies Record<AccountStatus, Tone>
 
+export const PHOTO_CONSENT = {
+  granted: { label: "Granted", tone: "success" },
+  denied: { label: "Denied", tone: "neutral" },
+  revoked: { label: "Revoked", tone: "neutral" },
+} satisfies Record<PhotoConsent, Tone>
+
 export const MEMBER_STATUS = {
   active: { label: "Active", tone: "success", description: "Full member for the current year." },
   suspended: { label: "Suspended", tone: "danger", description: "Rights paused by the Direttivo; keeps the number." },
@@ -116,6 +130,18 @@ export const FEE_STATUS = {
   unpaid: { label: "Unpaid", tone: "danger" },
 } satisfies Record<FeeStatus, Tone>
 
+export const RECEIPT_STATUS = {
+  toSign: { label: "To sign", tone: "warning" },
+  signed: { label: "Signed", tone: "brand" },
+  sent: { label: "Sent", tone: "success" },
+  failed: { label: "Send failed", tone: "danger" },
+  voided: { label: "Voided", tone: "neutral" },
+} satisfies Record<ReceiptStatus, Tone>
+
+export const SIGNER_LABEL = { president: "President", vicePresident: "Vice-president" } satisfies Record<Signer, string>
+
+export const PAYMENT_METHOD = { transfer: "Bank transfer", cash: "Cash" } satisfies Record<PaymentMethod, string>
+
 export const CENSUS_ANSWER = {
   continues: { label: "Continues", tone: "success" },
   leaving: { label: "Leaving", tone: "warning" },
diff --git a/src/features/people/people-hooks.ts b/src/features/people/people-hooks.ts
index 14395ef..1c54d36 100644
--- a/src/features/people/people-hooks.ts
+++ b/src/features/people/people-hooks.ts
@@ -1,6 +1,12 @@
 import { useRouter } from "@tanstack/react-router"
+import { useEffect, useState } from "react"
 
+import { useOpenGeneration } from "@/components/primitives"
 import { appToast } from "@/components/shell"
+import { errorMessage as backendMessage } from "@/lib/errors"
+
+import { saveFile } from "./people-files"
+import type { FilePayload } from "./people.contract"
 
 /**
  * After a successful mutation: reload every loader, then confirm. A failed reload is not a failed mutation, so it
@@ -8,7 +14,7 @@ import { appToast } from "@/components/shell"
  */
 export function useRefreshAfter() {
   const router = useRouter()
-  return async (message: string) => {
+  return async (message: string, tone: "success" | "warning" = "success") => {
     try {
       await router.invalidate({ sync: true })
     } catch (caught) {
@@ -16,11 +22,86 @@ export function useRefreshAfter() {
       appToast.warning(`${message.replace(/\.$/, "")}, but the page couldn't refresh.`)
       return
     }
-    appToast.success(message)
+    appToast[tone](message)
+  }
+}
+
+/** The message to show for a failed call: the backend's own words, or the fallback (also for a bare UNAUTHORIZED). */
+export function errorMessage(cause: unknown, fallback: string) {
+  const message = backendMessage(cause, fallback)
+  return message === "UNAUTHORIZED" ? fallback : message
+}
+
+/**
+ * A dialog's open state. Key the dialog with `key`, which changes on every opening, so each one starts clean while the
+ * closing animation keeps its content.
+ */
+export function useDialogState(initiallyOpen = false) {
+  const [open, setOpen] = useState(initiallyOpen)
+  const key = useOpenGeneration(open)
+  return { open, key, onOpenChange: setOpen, show: () => setOpen(true) }
+}
+
+/** A dialog opened from a row or a record: `show(target)` remembers what it acts on and opens it. */
+export function useDialog<T>() {
+  const [target, setTarget] = useState<T | null>(null)
+  const state = useDialogState()
+  return {
+    ...state,
+    target,
+    show: (next: T) => {
+      setTarget(next)
+      state.show()
+    },
   }
 }
 
-/** The message to show for a failed call: the backend's own words, or a generic fallback. */
-export function errorMessage(caught: Error, fallback: string) {
-  return caught.message === "" || caught.message === "UNAUTHORIZED" ? fallback : caught.message
+/**
+ * Loads data for a dialog while it is mounted, again whenever `load` changes (memoize it with its inputs), and not at
+ * all while it is `null`. A late answer from an earlier `load` is ignored. While a new `load` runs, `data` is `null`,
+ * or the previous answer with `keepPrevious` (search results that stay on screen while the next ones arrive).
+ */
+export function useLoaded<T>(load: (() => Promise<T>) | null, keepPrevious = false) {
+  const [result, setResult] = useState<{ load: (() => Promise<T>) | null; data: T | null; failed: boolean }>({
+    load: null,
+    data: null,
+    failed: false,
+  })
+  useEffect(() => {
+    if (!load) return
+    let current = true
+    load().then(
+      (data) => {
+        if (current) setResult({ load, data, failed: false })
+      },
+      (caught) => {
+        console.error(caught)
+        if (current) setResult({ load, data: null, failed: true })
+      }
+    )
+    return () => {
+      current = false
+    }
+  }, [load])
+  if (load && result.load === load) return { data: result.data, failed: result.failed }
+  return { data: keepPrevious ? result.data : null, failed: false }
+}
+
+/** Downloads one file at a time; `busy` names the one in flight so its button shows a spinner. */
+export function useFileDownload() {
+  const [busy, setBusy] = useState<string | null>(null)
+  async function download(id: string, load: () => Promise<FilePayload>, failure: string) {
+    setBusy(id)
+    try {
+      saveFile(await load())
+      return true
+    } catch (caught) {
+      console.error(caught)
+      appToast.error(errorMessage(caught, failure))
+      return false
+    } finally {
+      setBusy(null)
+    }
+  }
+  return { busy, download }
 }
diff --git a/src/features/people/people-receipts.functions.ts b/src/features/people/people-receipts.functions.ts
new file mode 100644
index 0000000..d7ba8e2
--- /dev/null
+++ b/src/features/people/people-receipts.functions.ts
@@ -0,0 +1,63 @@
+import { createServerFn } from "@tanstack/react-start"
+
+import {
+  esignSignWriteMiddleware,
+  peopleMembersReadMiddleware,
+  peopleReceiptsSignMiddleware,
+} from "@/server/auth.middleware"
+
+import { peopleApi } from "./people.api.server"
+import {
+  MAX_SIGNED_FILES,
+  prepareReceiptSignaturesInputSchema,
+  receiptInputSchema,
+  receiptsInputSchema,
+  sendSignedInputSchema,
+} from "./people.contract"
+
+const SIGNED_MAX_SIZE = 10 * 1024 * 1024
+const SIGNED_EXTENSIONS = /\.(pdf|p7m)$/i
+
+/** People › Receipts: one fee year (the current one for `null`) and the viewer's signing office. */
+export const getReceipts = createServerFn({ method: "GET" })
+  .middleware([peopleMembersReadMiddleware])
+  .validator(receiptsInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).listReceipts(data))
+
+/** One receipt's PDF: the signed copy once there is one. */
+export const downloadReceipt = createServerFn({ method: "GET" })
+  .middleware([peopleMembersReadMiddleware])
+  .validator(receiptInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).downloadReceipt(data))
+
+/** A ZIP of the receipts waiting for the viewer's signature. */
+export const downloadReceiptsToSign = createServerFn({ method: "POST" })
+  .middleware([peopleReceiptsSignMiddleware])
+  .handler(async ({ context }) => (await peopleApi(context)).downloadReceiptsToSign())
+
+/** Reads signed files and matches them to receipts; nothing is saved or sent yet. */
+export const previewSignedReceipts = createServerFn({ method: "POST" })
+  .middleware([peopleReceiptsSignMiddleware])
+  .validator((data: FormData) => {
+    const files = data.getAll("files").filter((file): file is File => file instanceof File && file.size > 0)
+    if (files.length === 0) throw new Error("Choose the signed files.")
+    if (files.length > MAX_SIGNED_FILES) throw new Error(`Upload at most ${MAX_SIGNED_FILES} files at a time.`)
+    const wrongType = files.find((file) => !SIGNED_EXTENSIONS.test(file.name))
+    if (wrongType) throw new Error(`${wrongType.name} isn't a PDF or .p7m file.`)
+    const tooLarge = files.find((file) => file.size > SIGNED_MAX_SIZE)
+    if (tooLarge) throw new Error(`${tooLarge.name} is larger than 10 MB.`)
+    return files
+  })
+  .handler(async ({ data, context }) => (await peopleApi(context)).previewSignedReceipts(data))
+
+/** Saves the signed files on their receipts and emails each to its member. */
+export const sendSignedReceipts = createServerFn({ method: "POST" })
+  .middleware([peopleReceiptsSignMiddleware])
+  .validator(sendSignedInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).sendSignedReceipts(data))
+
+/** Creates or reuses durable eSign requests for these receipts; the backend fixes the PDF and the officer. */
+export const prepareReceiptSignatures = createServerFn({ method: "POST" })
+  .middleware([peopleReceiptsSignMiddleware, esignSignWriteMiddleware])
+  .validator(prepareReceiptSignaturesInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).prepareReceiptSignatures(data))
diff --git a/src/features/people/people-self.functions.ts b/src/features/people/people-self.functions.ts
index d65ad5a..872c907 100644
--- a/src/features/people/people-self.functions.ts
+++ b/src/features/people/people-self.functions.ts
@@ -3,7 +3,16 @@ import { createServerFn } from "@tanstack/react-start"
 import { peopleSelfMiddleware } from "@/server/auth.middleware"
 
 import { peopleApi } from "./people.api.server"
-import { answerCensusInputSchema, askToBeAddedInputSchema, correctionInputSchema } from "./people.contract"
+import {
+  answerCensusInputSchema,
+  askToBeAddedInputSchema,
+  correctionInputSchema,
+  receiptInputSchema,
+  transferInputSchema,
+} from "./people.contract"
+
+const TRANSFER_MAX_SIZE = 10 * 1024 * 1024
+const TRANSFER_TYPES = /\.(pdf|jpe?g|png)$/i
 
 /** Account › My area: the signed-in person's record, a first-sign-in match, or nothing yet. */
 export const getMyArea = createServerFn({ method: "GET" })
@@ -39,3 +48,28 @@ export const requestCorrection = createServerFn({ method: "POST" })
 export const revokePhotoConsent = createServerFn({ method: "POST" })
   .middleware([peopleSelfMiddleware])
   .handler(async ({ context }) => (await peopleApi(context)).revokePhotoConsent())
+
+/** The member's bank receipt for this year's fee; an admin reviews it. */
+export const uploadMyTransferReceipt = createServerFn({ method: "POST" })
+  .middleware([peopleSelfMiddleware])
+  .validator((data: FormData) => {
+    const file = data.get("file")
+    if (!(file instanceof File) || file.size === 0) throw new Error("Choose the transfer receipt.")
+    if (!TRANSFER_TYPES.test(file.name)) throw new Error("Choose a PDF, JPG or PNG file.")
+    if (file.size > TRANSFER_MAX_SIZE) throw new Error("The file is larger than 10 MB.")
+    const fields = transferInputSchema.safeParse({
+      transferDate: data.get("transferDate"),
+      amountCents: Number(data.get("amountCents")),
+    })
+    if (!fields.success) throw new Error("Enter the transfer date and amount.")
+    return { file, ...fields.data }
+  })
+  .handler(async ({ data: { file, ...input }, context }) =>
+    (await peopleApi(context)).uploadTransferReceipt(file, input)
+  )
+
+/** One of the member's own signed receipts. */
+export const downloadMyReceipt = createServerFn({ method: "GET" })
+  .middleware([peopleSelfMiddleware])
+  .validator(receiptInputSchema)
+  .handler(async ({ data, context }) => (await peopleApi(context)).downloadMyReceipt(data))
diff --git a/src/features/people/people-ui.tsx b/src/features/people/people-ui.tsx
index c5ac573..4155008 100644
--- a/src/features/people/people-ui.tsx
+++ b/src/features/people/people-ui.tsx
@@ -1,8 +1,7 @@
-import { Check, ChevronDown, type LucideIcon } from "lucide-react"
+import { Check, EllipsisVertical, type LucideIcon } from "lucide-react"
 import type { ReactNode } from "react"
 
 import {
-  buttonMotion,
   Chip,
   Combobox,
   ComboboxContent,
@@ -10,23 +9,18 @@ import {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
+  fieldHintId,
+  IconButton,
   initialsOf,
   Menu,
   MenuContent,
-  MenuRadioGroup,
-  MenuRadioItem,
+  MenuItem,
   MenuSeparator,
   MenuTrigger,
-  fieldHintId,
-  floatingMotion,
-  raisedSurface,
   StatusBadge,
   type StatusTone,
 } from "@/components/primitives"
 import { Hint } from "@/components/primitives/hint"
-import { Button } from "@/components/ui/button"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Toggle } from "@/components/ui/toggle"
 import { cn } from "@/lib/utils"
 
 /** 32px initials avatar, name and an optional 12px secondary line; muted when the person has no roles left. */
@@ -108,141 +102,57 @@ export function MonoChip({ children }: { children: ReactNode }) {
   return <Chip className="font-mono tabular-nums">{children}</Chip>
 }
 
-export type FilterOption<T extends string> = { value: T; label: string; count?: number }
+export type MenuAction = {
+  label: string
+  /** Names the record for screen readers when the action stands alone ("Void receipt 2026/042"). */
+  ariaLabel?: string
+  icon: LucideIcon
+  onClick: () => void
+  /** Destructive actions go last, after a separator. */
+  destructive?: boolean
+}
 
 /**
- * Single-choice filter: a 40px outline button naming the filter ("Role", or "Role: Member" once set) and a radio menu
- * with "All …" first.
+ * The secondary actions of a row or card: nothing when none apply, the action itself as an icon button when only one
+ * does, otherwise a ⋮ menu with the destructive actions last. Pass `false` for an action the viewer can't take.
  */
-export function FilterMenu<T extends string>({
+export function ActionMenu({
   label,
-  allLabel,
-  options,
-  value,
-  onChange,
+  actions,
+  keepSlot = false,
 }: {
+  /** The ⋮ button's accessible name ("More actions for Giulia Rossi"). */
   label: string
-  allLabel: string
-  options: readonly FilterOption<T>[]
-  value: T | null
-  onChange: (value: T | null) => void
+  actions: readonly (MenuAction | false)[]
+  /** In tables: an empty 36px slot when no action applies, so the icons of every row stay aligned. */
+  keepSlot?: boolean
 }) {
-  const selected = options.find((option) => option.value === value)
+  const available = actions.filter((action) => action !== false)
+  const regular = available.filter((action) => !action.destructive)
+  const destructive = available.filter((action) => action.destructive)
+  const [only] = available
+  if (!only) return keepSlot ? <span aria-hidden className="size-9 shrink-0" /> : null
+  if (available.length === 1) {
+    return <IconButton label={only.label} ariaLabel={only.ariaLabel} icon={only.icon} onClick={only.onClick} />
+  }
+  const item = (action: MenuAction) => (
+    <MenuItem key={action.label} variant={action.destructive ? "destructive" : undefined} onClick={action.onClick}>
+      <action.icon />
+      {action.label}
+    </MenuItem>
+  )
   return (
     <Menu>
-      <MenuTrigger
-        render={
-          <Button
-            variant="outline"
-            className={cn(
-              buttonMotion,
-              "h-10 shrink-0 gap-1.5 rounded-[9px] border-(--pn-line-strong) bg-(--pn-surface) px-3 text-[14px] font-medium",
-              selected && "border-[color-mix(in_oklab,var(--pn-accent)_40%,transparent)]"
-            )}
-          />
-        }
-      >
-        <span>{label}</span>
-        {selected ? <span className="text-(--pn-accent)">{selected.label}</span> : null}
-        <ChevronDown aria-hidden strokeWidth={1.75} className="size-4 text-(--pn-fg-muted)" />
-      </MenuTrigger>
-      <MenuContent align="start" className="min-w-52">
-        <MenuRadioGroup
-          value={value ?? ""}
-          onValueChange={(next: string) => onChange(options.find((option) => option.value === next)?.value ?? null)}
-        >
-          <MenuRadioItem value="">{allLabel}</MenuRadioItem>
-          <MenuSeparator />
-          {options.map((option) => (
-            <MenuRadioItem key={option.value} value={option.value}>
-              <span className="flex-1">{option.label}</span>
-              {option.count !== undefined ? (
-                <span className="font-mono text-xs text-(--pn-fg-muted) tabular-nums">{option.count}</span>
-              ) : null}
-            </MenuRadioItem>
-          ))}
-        </MenuRadioGroup>
+      <MenuTrigger render={<IconButton label="More actions" ariaLabel={label} icon={EllipsisVertical} />} />
+      <MenuContent>
+        {regular.map(item)}
+        {regular.length && destructive.length ? <MenuSeparator /> : null}
+        {destructive.map(item)}
       </MenuContent>
     </Menu>
   )
 }
 
-/** On/off filter in the toolbar ("No groups"), with its count. */
-export function ToggleFilter({
-  label,
-  count,
-  pressed,
-  onPressedChange,
-}: {
-  label: string
-  count?: number
-  pressed: boolean
-  onPressedChange: (pressed: boolean) => void
-}) {
-  return (
-    <Toggle
-      variant="outline"
-      size="lg"
-      pressed={pressed}
-      onPressedChange={onPressedChange}
-      className="h-10 shrink-0 gap-2 rounded-[9px] border-(--pn-line-strong) bg-(--pn-surface) px-3.5 text-[14px] font-medium text-(--pn-fg) transition-[background-color,color,border-color] duration-120 hover:bg-(--pn-hover) aria-pressed:border-[color-mix(in_oklab,var(--pn-accent)_40%,transparent)] aria-pressed:bg-(--pn-accent-soft) aria-pressed:text-(--pn-accent) aria-pressed:hover:bg-(--pn-accent-soft-hover)"
-    >
-      {pressed ? <Check aria-hidden strokeWidth={2} className="size-4" /> : null}
-      {label}
-      {count !== undefined ? (
-        <span className="font-mono text-xs font-normal text-(--pn-fg-muted) tabular-nums">{count}</span>
-      ) : null}
-    </Toggle>
-  )
-}
-
-/** A form select over a list of labels, full width, styled like the inputs around it. */
-export function SelectField<T extends string>({
-  id,
-  value,
-  options,
-  onChange,
-  placeholder,
-  invalid = false,
-}: {
-  id: string
-  value: T | null
-  options: readonly { value: T; label: string }[]
-  onChange: (value: T) => void
-  placeholder?: string
-  invalid?: boolean
-}) {
-  return (
-    <Select
-      value={value}
-      onValueChange={(next) => {
-        const option = options.find((candidate) => candidate.value === next)
-        if (option) onChange(option.value)
-      }}
-      items={options}
-    >
-      <SelectTrigger
-        id={id}
-        aria-invalid={invalid || undefined}
-        className="h-9 w-full border-(--pn-line-strong) bg-(--pn-surface) text-sm text-(--pn-fg) shadow-none aria-invalid:border-(--pn-danger-solid) pointer-coarse:text-base dark:bg-(--pn-surface)"
-      >
-        <SelectValue placeholder={placeholder} />
-      </SelectTrigger>
-      <SelectContent className={cn(raisedSurface, floatingMotion)}>
-        {options.map((option) => (
-          <SelectItem
-            key={option.value}
-            value={option.value}
-            className="h-9 text-[13px] focus:bg-(--pn-hover) focus:text-(--pn-fg) not-data-[variant=destructive]:focus:**:text-(--pn-fg)"
-          >
-            {option.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  )
-}
-
 export type PersonOption = { id: string; name: string }
 
 /** Searchable person field for dialogs that pick one record (Add member, Add to team). */
@@ -294,48 +204,6 @@ export function PersonPicker({
   )
 }
 
-/** One choice in a radio group of cards: a bold label and a muted line explaining it. */
-export function RadioCard({
-  name,
-  value,
-  checked,
-  onSelect,
-  label,
-  description,
-  end,
-}: {
-  name: string
-  value: string
-  checked: boolean
-  onSelect: () => void
-  label: ReactNode
-  description?: ReactNode
-  end?: ReactNode
-}) {
-  return (
-    <label
-      className={cn(
-        "flex cursor-pointer items-start gap-3 rounded-(--pn-r-4) border border-(--pn-line-strong) p-3 transition-[background-color,border-color] duration-120 hover:border-(--pn-hover-line) hover:bg-(--pn-hover)",
-        checked && "border-(--pn-accent) bg-(--pn-accent-soft) hover:bg-(--pn-accent-soft)"
-      )}
-    >
-      <input
-        type="radio"
-        name={name}
-        value={value}
-        checked={checked}
-        onChange={onSelect}
-        className="mt-0.5 size-4 shrink-0 accent-(--pn-accent-solid)"
-      />
-      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
-        <span className="text-[14px] font-medium">{label}</span>
-        {description ? <span className="text-xs text-(--pn-fg-muted)">{description}</span> : null}
-      </span>
-      {end}
-    </label>
-  )
-}
-
 /** Multi-select options as pressable pills, for team fields such as Areas or Languages. */
 export function ChoiceChips({
   id,
diff --git a/src/features/people/people.api.server.ts b/src/features/people/people.api.server.ts
index e77f6c5..21559fb 100644
--- a/src/features/people/people.api.server.ts
+++ b/src/features/people/people.api.server.ts
@@ -3,6 +3,9 @@ import type { z } from "zod"
 import { createUntypedBackendClient } from "@/server/backend.server"
 
 import {
+  type PrepareReceiptSignaturesInput,
+  type ReceiptSignature,
+  receiptSignaturesSchema,
   type AddTeamMemberInput,
   type AnswerCensusInput,
   type AnswersInput,
@@ -25,6 +28,22 @@ import {
   type EndAdminInput,
   type EndTeamInput,
   exportResultSchema,
+  type FeeRemindInput,
+  type FeeReview,
+  feeReviewSchema,
+  type FilePayload,
+  fileSchema,
+  issuedSchema,
+  type MarkPaidInput,
+  type ReceiptsPage,
+  receiptsPageSchema,
+  type RejectFeeInput,
+  type SendSignedInput,
+  sendResultSchema,
+  type SignedUpload,
+  signedUploadSchema,
+  type TransferInput,
+  type VoidReceiptInput,
   type ImportCommitInput,
   importedSchema,
   type ImportPreview,
@@ -107,6 +126,22 @@ export type PeopleApi = {
   answerCensus: (input: AnswerCensusInput) => Promise<void>
   requestCorrection: (input: CorrectionInput) => Promise<void>
   revokePhotoConsent: () => Promise<void>
+  getFeeReview: (input: { personId: string }) => Promise<FeeReview>
+  getFeeUpload: (input: { personId: string }) => Promise<FilePayload>
+  approveFee: (input: { personId: string }) => Promise<{ receipt: string }>
+  rejectFee: (input: RejectFeeInput) => Promise<void>
+  markFeePaid: (input: MarkPaidInput) => Promise<{ receipt: string }>
+  remindFees: (input: FeeRemindInput) => Promise<{ sent: number; skipped: number }>
+  listReceipts: (input: { year: string | null }) => Promise<ReceiptsPage>
+  downloadReceipt: (input: { receiptId: string }) => Promise<FilePayload>
+  prepareReceiptSignatures: (input: PrepareReceiptSignaturesInput) => Promise<ReceiptSignature[]>
+  downloadReceiptsToSign: () => Promise<FilePayload>
+  previewSignedReceipts: (files: File[]) => Promise<SignedUpload>
+  sendSignedReceipts: (input: SendSignedInput) => Promise<{ sent: number; failed: number }>
+  retryReceipt: (input: { receiptId: string }) => Promise<void>
+  voidReceipt: (input: VoidReceiptInput) => Promise<void>
+  uploadTransferReceipt: (file: File, input: TransferInput) => Promise<void>
+  downloadMyReceipt: (input: { receiptId: string }) => Promise<FilePayload>
 }
 
 /**
@@ -173,6 +208,32 @@ function backendPeopleApi(accessToken: string | null): PeopleApi {
     answerCensus: (input) => mutate("me.answerCensus", input),
     requestCorrection: (input) => mutate("me.requestCorrection", input),
     revokePhotoConsent: () => mutate("me.revokePhotoConsent"),
+    getFeeReview: (input) => query("fees.review", input, feeReviewSchema),
+    getFeeUpload: (input) => query("fees.upload", input, fileSchema),
+    approveFee: (input) => mutateParsed("fees.approve", input, issuedSchema),
+    rejectFee: (input) => mutate("fees.reject", input),
+    markFeePaid: (input) => mutateParsed("fees.markPaid", input, issuedSchema),
+    remindFees: (input) => mutateParsed("fees.remind", input, remindResultSchema),
+    listReceipts: (input) => query("receipts.list", input, receiptsPageSchema),
+    downloadReceipt: (input) => query("receipts.download", input, fileSchema),
+    prepareReceiptSignatures: (input) => mutateParsed("receipts.prepareSignatures", input, receiptSignaturesSchema),
+    downloadReceiptsToSign: () => mutateParsed("receipts.toSign", undefined, fileSchema),
+    previewSignedReceipts: (files) => {
+      const form = new FormData()
+      for (const file of files) form.append("files", file)
+      return mutateParsed("receipts.previewSigned", form, signedUploadSchema)
+    },
+    sendSignedReceipts: (input) => mutateParsed("receipts.sendSigned", input, sendResultSchema),
+    retryReceipt: (input) => mutate("receipts.retry", input),
+    voidReceipt: (input) => mutate("receipts.void", input),
+    uploadTransferReceipt: (file, input) => {
+      const form = new FormData()
+      form.set("file", file)
+      form.set("transferDate", input.transferDate)
+      form.set("amountCents", String(input.amountCents))
+      return mutate("me.uploadTransferReceipt", form)
+    },
+    downloadMyReceipt: (input) => query("me.receipt", input, fileSchema),
   }
 }
 
diff --git a/src/features/people/people.contract.ts b/src/features/people/people.contract.ts
index e782972..a1704d3 100644
--- a/src/features/people/people.contract.ts
+++ b/src/features/people/people.contract.ts
@@ -33,6 +33,12 @@ export const FEE_STATUSES = ["due", "receipt", "paid", "unpaid"] as const
 export const ACCOUNT_STATUSES = ["none", "invite", "linked", "review"] as const
 export const CENSUS_ANSWERS = ["continues", "leaving"] as const
 export const REVIEW_KINDS = ["telegram-conflict", "ask-to-be-added", "two-records", "not-me", "name-only"] as const
+/** A receipt's pipeline: issued unsigned, signed by an officer, emailed to the member; or the email failed, or voided. */
+export const RECEIPT_STATUSES = ["toSign", "signed", "sent", "failed", "voided"] as const
+export const PAYMENT_METHODS = ["transfer", "cash"] as const
+export const PHOTO_CONSENTS = ["granted", "denied", "revoked"] as const
+/** Who signs a receipt: the President, or the Vice-president for the President's own. */
+export const SIGNERS = ["president", "vicePresident"] as const
 
 export const teamIdSchema = z.enum(TEAM_IDS)
 export const campusSchema = z.enum(CAMPUSES)
@@ -47,6 +53,10 @@ export type FeeStatus = z.infer<typeof feeStatusSchema>
 export type CensusAnswer = z.infer<typeof censusAnswerSchema>
 export type AccountStatus = (typeof ACCOUNT_STATUSES)[number]
 export type ReviewKind = (typeof REVIEW_KINDS)[number]
+export type ReceiptStatus = (typeof RECEIPT_STATUSES)[number]
+export type PaymentMethod = (typeof PAYMENT_METHODS)[number]
+export type PhotoConsent = (typeof PHOTO_CONSENTS)[number]
+export type Signer = (typeof SIGNERS)[number]
 
 const personRefSchema = z.object({ id: z.string(), name: z.string() })
 const groupSchema = z.object({ chatId: z.string(), title: z.string() })
@@ -130,7 +140,7 @@ export const accountSchema = z.discriminatedUnion("status", [
 
 export const consentsSchema = z.object({
   privacy: z.object({ version: z.string(), acceptedOn: z.string() }).nullable(),
-  photo: z.object({ status: z.enum(["granted", "denied", "revoked"]), on: z.string() }).nullable(),
+  photo: z.object({ status: z.enum(PHOTO_CONSENTS), on: z.string() }).nullable(),
 })
 
 /** One row of the People lists: everything but notes, activity and discrepancies. */
@@ -156,11 +166,75 @@ export const discrepancySchema = z.object({
 
 export const activitySchema = z.object({ actor: z.string(), text: z.string(), at: z.string() })
 
+/** A transfer receipt the member uploaded, waiting for an admin. */
+export const feeUploadSchema = z.object({
+  fileName: z.string(),
+  size: z.number().int(),
+  uploadedAt: z.string(),
+  /** As the member declared it. */
+  transferDate: z.string(),
+  amountCents: z.number().int(),
+})
+
+/** The current fee year of one member: what is due, what was uploaded, rejected or paid. */
+export const feeDetailSchema = z.object({
+  year: z.string(),
+  status: feeStatusSchema,
+  amountCents: z.number().int(),
+  dueOn: z.string(),
+  upload: feeUploadSchema.nullable(),
+  /** The last rejection, kept until the member uploads again. */
+  rejection: z.object({ reason: z.string(), by: z.string(), at: z.string() }).nullable(),
+  payment: z
+    .object({
+      paidOn: z.string(),
+      method: z.enum(PAYMENT_METHODS),
+      amountCents: z.number().int(),
+      transferDate: z.string().nullable(),
+    })
+    .nullable(),
+  /** The last reminder email, automatic or sent by hand. */
+  lastReminder: z.string().nullable(),
+})
+
+export const receiptSchema = z.object({
+  id: z.string(),
+  /** "2026/042": the fee year's first calendar year and a sequence never reused. */
+  number: z.string(),
+  /** The fee year, "2026/27". */
+  year: z.string(),
+  person: personRefSchema,
+  memberNumber: z.string(),
+  amountCents: z.number().int(),
+  issuedOn: z.string(),
+  paidOn: z.string(),
+  method: z.enum(PAYMENT_METHODS),
+  transferDate: z.string().nullable(),
+  status: z.enum(RECEIPT_STATUSES),
+  signer: z.enum(SIGNERS),
+  signedBy: z.string().nullable(),
+  signedOn: z.string().nullable(),
+  sentAt: z.string().nullable(),
+  sentTo: z.string().nullable(),
+  /** Why the last email failed, while `failed`. */
+  failure: z.string().nullable(),
+  voided: z.object({ reason: z.string(), by: z.string(), on: z.string() }).nullable(),
+})
+
+export const feesSchema = z.object({
+  /** The current fee year; `null` for former members. */
+  current: feeDetailSchema.nullable(),
+  /** Every receipt issued to the person, newest first. Receipts are never deleted, only voided. */
+  receipts: z.array(receiptSchema),
+})
+
 export const personRecordSchema = personRowSchema.extend({
   /** `null` without `people:read`. */
   notes: z.string().nullable(),
   discrepancies: z.array(discrepancySchema),
   activity: z.array(activitySchema),
+  /** `null` when the person was never a member, or without `people:members:read` (except on their own record). */
+  fees: feesSchema.nullable(),
 })
 
 export type Profile = z.infer<typeof profileSchema>
@@ -174,6 +248,10 @@ export type Consents = z.infer<typeof consentsSchema>
 export type PersonRow = z.infer<typeof personRowSchema>
 export type PersonRecord = z.infer<typeof personRecordSchema>
 export type Discrepancy = z.infer<typeof discrepancySchema>
+export type FeeUpload = z.infer<typeof feeUploadSchema>
+export type FeeDetail = z.infer<typeof feeDetailSchema>
+export type Receipt = z.infer<typeof receiptSchema>
+export type Fees = z.infer<typeof feesSchema>
 
 export const teamSummarySchema = z.object({
   id: teamIdSchema,
@@ -314,10 +392,20 @@ const contactSchema = z.object({
   team: teamIdSchema.nullable(),
 })
 
+/** How a member pays: the bank details and the reference to write on the transfer. */
+export const feeInstructionsSchema = z.object({
+  beneficiary: z.string(),
+  iban: z.string(),
+  reference: z.string(),
+})
+export type FeeInstructions = z.infer<typeof feeInstructionsSchema>
+
 export const myAreaSchema = z.discriminatedUnion("state", [
   z.object({
     state: z.literal("linked"),
     person: personRecordSchema,
+    /** Set while the signed-in person is a current member. */
+    feeInstructions: feeInstructionsSchema.nullable(),
     campaign: z.object({ id: z.string(), year: z.string(), closesOn: z.string() }).nullable(),
     contacts: z.array(contactSchema),
     roster: z
@@ -351,6 +439,55 @@ export const myAreaSchema = z.discriminatedUnion("state", [
 ])
 export type MyArea = z.infer<typeof myAreaSchema>
 
+/** People › Receipts: one fee year's receipts and who signs them. */
+export const receiptsPageSchema = z.object({
+  year: z.string(),
+  /** Fee years with receipts, newest first. */
+  years: z.array(z.string()),
+  /** The signed-in person's office, when they hold `people:receipts:sign`; `null` otherwise. */
+  viewerSigner: z.enum(SIGNERS).nullable(),
+  officers: z.object({ president: personRefSchema.nullable(), vicePresident: personRefSchema.nullable() }),
+  receipts: z.array(receiptSchema),
+})
+export type ReceiptsPage = z.infer<typeof receiptsPageSchema>
+
+/** What Review receipt shows: the member and their current fee year. */
+export const feeReviewSchema = z.object({
+  person: personRefSchema,
+  memberNumber: z.string(),
+  m365Email: z.string(),
+  fee: feeDetailSchema,
+  /** Earlier rejections this fee year, newest first. */
+  rejections: z.array(z.object({ reason: z.string(), by: z.string(), at: z.string() })),
+  /** The number approving would issue. */
+  nextReceipt: z.string(),
+})
+export type FeeReview = z.infer<typeof feeReviewSchema>
+
+/** A file passed through JSON: an uploaded transfer receipt, a receipt PDF or a ZIP of them. */
+export const fileSchema = z.object({ fileName: z.string(), contentType: z.string(), base64: z.string() })
+export type FilePayload = z.infer<typeof fileSchema>
+
+/** Signed files read by the backend, before anything is saved or sent. */
+export const signedUploadSchema = z.object({
+  uploadId: z.string(),
+  files: z.array(
+    z.object({
+      fileId: z.string(),
+      fileName: z.string(),
+      size: z.number().int(),
+      /** Matched by the receipt number in the file name; `null` when there is none, or no such receipt. */
+      receiptId: z.string().nullable(),
+      /** A valid digital signature (PAdES in the PDF, or a CAdES .p7m envelope) and the name on its certificate. */
+      signature: z.object({ valid: z.boolean(), signer: z.string().nullable() }),
+    })
+  ),
+})
+export type SignedUpload = z.infer<typeof signedUploadSchema>
+
+export const sendResultSchema = z.object({ sent: z.number().int(), failed: z.number().int() })
+export const issuedSchema = z.object({ receipt: z.string() })
+
 /** The team-specific fields, in display order. */
 export type TeamField = { key: string; label: string; kind: "text" | "multi"; mono?: boolean; options?: string[] }
 
@@ -534,6 +671,60 @@ export const correctionInputSchema = z.object({
   note: z.string().trim().max(500),
 })
 
+export const feePersonInputSchema = z.object({ personId: personIdSchema })
+export const rejectFeeInputSchema = z.object({ personId: personIdSchema, reason: reasonSchema })
+/** Amounts in cents: the fee is small, so anything above €1,000 is a typo. */
+const amountCentsSchema = z.number().int().min(1).max(100_000)
+export const markPaidInputSchema = z.object({
+  personId: personIdSchema,
+  paidOn: dateSchema,
+  amountCents: amountCentsSchema,
+  method: z.enum(PAYMENT_METHODS),
+  note: z.string().trim().max(500),
+})
+export const feeRemindInputSchema = z.object({ personId: personIdSchema.nullable() })
+const receiptIdSchema = z.string().min(1).max(40)
+/** The existing eSign agent accepts at most ten documents with one PIN. */
+export const RECEIPT_SIGN_BATCH = 10
+export const prepareReceiptSignaturesInputSchema = z.object({
+  receiptIds: z
+    .array(receiptIdSchema)
+    .min(1)
+    .max(RECEIPT_SIGN_BATCH)
+    .refine((ids) => new Set(ids).size === ids.length, "Choose each receipt once."),
+})
+export const receiptSignaturesSchema = z
+  .array(
+    z.object({
+      receiptId: receiptIdSchema,
+      requestId: z.uuid(),
+      title: z.string().min(1).max(300),
+    })
+  )
+  .min(1)
+  .max(RECEIPT_SIGN_BATCH)
+export type PrepareReceiptSignaturesInput = z.infer<typeof prepareReceiptSignaturesInputSchema>
+export type ReceiptSignature = z.infer<typeof receiptSignaturesSchema>[number]
+
+export const receiptInputSchema = z.object({ receiptId: receiptIdSchema })
+export const voidReceiptInputSchema = z.object({ receiptId: receiptIdSchema, reason: reasonSchema })
+export const receiptsInputSchema = z.object({
+  year: z
+    .string()
+    .regex(/^\d{4}\/\d{2}$/)
+    .nullable(),
+})
+/** At most one batch of signed files per upload. */
+export const MAX_SIGNED_FILES = 100
+export const sendSignedInputSchema = z.object({
+  uploadId: z.string().min(1).max(64),
+  /** File → receipt, after the matches were checked and corrected. */
+  assignments: z
+    .record(z.string().min(1).max(64), receiptIdSchema)
+    .refine((choices) => Object.keys(choices).length <= MAX_SIGNED_FILES, "Too many files."),
+})
+export const transferInputSchema = z.object({ transferDate: dateSchema, amountCents: amountCentsSchema })
+
 export type CreatePersonInput = z.infer<typeof createPersonInputSchema>
 export type UpdatePersonInput = z.infer<typeof updatePersonInputSchema>
 export type SetNoteInput = z.infer<typeof setNoteInputSchema>
@@ -556,6 +747,12 @@ export type LinkAccountInput = z.infer<typeof linkAccountInputSchema>
 export type AskToBeAddedInput = z.infer<typeof askToBeAddedInputSchema>
 export type AnswerCensusInput = z.infer<typeof answerCensusInputSchema>
 export type CorrectionInput = z.infer<typeof correctionInputSchema>
+export type RejectFeeInput = z.infer<typeof rejectFeeInputSchema>
+export type MarkPaidInput = z.infer<typeof markPaidInputSchema>
+export type FeeRemindInput = z.infer<typeof feeRemindInputSchema>
+export type VoidReceiptInput = z.infer<typeof voidReceiptInputSchema>
+export type SendSignedInput = z.infer<typeof sendSignedInputSchema>
+export type TransferInput = z.infer<typeof transferInputSchema>
 
 export const remindResultSchema = z.object({ sent: z.number().int(), skipped: z.number().int() })
 export const exportResultSchema = z.object({ filename: z.string(), csv: z.string() })
diff --git a/src/features/people/people.fake.server.ts b/src/features/people/people.fake.server.ts
index 9b762e0..db95f0b 100644
--- a/src/features/people/people.fake.server.ts
+++ b/src/features/people/people.fake.server.ts
@@ -1,3 +1,4 @@
+import { nextReceiptNumber, receiptFileName, receiptNumberFromFileName } from "./people-fees"
 import type { PeopleApi, PeopleViewer } from "./people.api.server"
 import {
   type AccountMatch,
@@ -5,10 +6,16 @@ import {
   type CampaignDetail,
   type CapoArea,
   type Discrepancy,
+  type FeeDetail,
+  type Fees,
+  type FilePayload,
   type ImportPreview,
   type MyArea,
   type PersonRecord,
   type PersonRow,
+  type Receipt,
+  type Signer,
+  type SignedUpload,
   TEAM_IDS,
   TEAMS,
   type TeamId,
@@ -17,13 +24,22 @@ import {
 import {
   addDays,
   buildPeopleStore,
+  emptyFeeState,
   FAMILIES,
   FAMILY_IDS,
+  FEE_AMOUNT_CENTS,
+  FEE_BENEFICIARY,
+  FEE_DUE_ON,
+  FEE_IBAN,
+  FEE_YEAR,
   GROUP_IDS,
   m365Address,
+  OFFICERS,
+  receiptId,
   type PeopleStore,
   type StoredPerson,
 } from "./people.fixtures.server"
+import { downloadName, looksSigned, receiptPdf, sampleTransferPdf, zipFiles } from "./receipt-files.server"
 
 /**
  * Agent mode's stand-in for the backend's `people.*` procedures, over `people.fixtures.server.ts`. State lives for the
@@ -38,6 +54,12 @@ const self: SelfState = { matchConfirmed: false, matchRejected: false, askedOn:
 const importedFiles = new Set<string>()
 const previews = new Map<string, ImportPreview>()
 const closedCampaigns = new Set<string>()
+/** Signed copies uploaded by an officer, by receipt ID. Receipts without one are generated on download. */
+const signedFiles = new Map<string, Uint8Array>()
+/** Members' uploaded transfer receipts, by person ID. Seeded uploads have no file and preview a sample. */
+const transferFiles = new Map<string, { name: string; type: string; bytes: Uint8Array }>()
+/** Signed files read by Upload signed receipts, until they are sent. */
+const signedUploads = new Map<string, { fileId: string; name: string; bytes: Uint8Array; signed: boolean }[]>()
 
 function data() {
   store ??= buildPeopleStore()
@@ -120,11 +142,133 @@ function row(person: StoredPerson, viewer: PeopleViewer, withContacts: boolean):
 
 function record(person: StoredPerson, viewer: PeopleViewer): PersonRecord {
   const canRead = viewer.permissions.includes("people:read")
+  const ownRecord = linkedRecord(viewer)?.id === person.id
   return {
-    ...row(person, viewer, canRead || linkedRecord(viewer)?.id === person.id),
+    ...row(person, viewer, canRead || ownRecord),
     notes: canRead ? person.notes : null,
     discrepancies: discrepancies(person),
     activity: [...person.activity].sort((a, b) => (a.at < b.at ? 1 : -1)),
+    fees: ownRecord || viewer.permissions.includes("people:members:read") ? fees(person) : null,
+  }
+}
+
+/** Due before the deadline, Unpaid after it. */
+function unpaidStatus() {
+  return today() > FEE_DUE_ON ? "unpaid" : "due"
+}
+
+function feeDetail(person: StoredPerson): FeeDetail | null {
+  const state = person.feeState
+  const status = person.member?.fee
+  if (!state || !status) return null
+  return {
+    year: FEE_YEAR,
+    status,
+    amountCents: FEE_AMOUNT_CENTS,
+    dueOn: FEE_DUE_ON,
+    upload: state.upload,
+    rejection: state.rejection,
+    payment: state.payment,
+    lastReminder: state.lastReminder,
+  }
+}
+
+function fees(person: StoredPerson): Fees | null {
+  if (!person.member) return null
+  const receipts = data()
+    .receipts.filter((receipt) => receipt.person.id === person.id)
+    .sort((a, b) => (a.number < b.number ? 1 : -1))
+  return { current: feeDetail(person), receipts }
+}
+
+function officerName(id: string) {
+  const person = data().byId.get(id)
+  return person ? fullName(person) : "—"
+}
+
+/** The office the signed-in person signs receipts for: they need `people:receipts:sign` and to hold it. */
+function viewerSigner(viewer: PeopleViewer): Signer | null {
+  if (!viewer.permissions.includes("people:receipts:sign")) return null
+  const me = linkedRecord(viewer)?.id
+  return me === OFFICERS.president ? "president" : me === OFFICERS.vicePresident ? "vicePresident" : null
+}
+
+function findReceipt(id: string) {
+  const receipt = data().receipts.find((candidate) => candidate.id === id)
+  if (!receipt) throw new Error("This receipt no longer exists.")
+  return receipt
+}
+
+function currentMember(personId: string) {
+  const person = find(personId)
+  const member = person.member
+  if (!member || member.status === "former" || !member.fee) throw new Error("This person isn't a current member.")
+  person.feeState ??= emptyFeeState()
+  return { person, member, state: person.feeState }
+}
+
+/** Issues the next receipt of the fee year, waiting for the President's signature (the Vice-president's for theirs). */
+function issueReceipt(person: StoredPerson, payment: NonNullable<FeeDetail["payment"]>) {
+  const member = person.member
+  if (!member) throw new Error("This person isn't a member.")
+  const number = nextReceiptNumber(
+    FEE_YEAR,
+    data().receipts.map((receipt) => receipt.number)
+  )
+  const receipt: Receipt = {
+    id: receiptId(number),
+    number,
+    year: FEE_YEAR,
+    person: { id: person.id, name: fullName(person) },
+    memberNumber: member.number,
+    amountCents: payment.amountCents,
+    issuedOn: today(),
+    paidOn: payment.paidOn,
+    method: payment.method,
+    transferDate: payment.transferDate,
+    status: "toSign",
+    signer: person.id === OFFICERS.president ? "vicePresident" : "president",
+    signedBy: null,
+    signedOn: null,
+    sentAt: null,
+    sentTo: null,
+    failure: null,
+    voided: null,
+  }
+  data().receipts.push(receipt)
+  log(person, "System", `issued receipt ${number} for the ${FEE_YEAR} fee`)
+  return receipt
+}
+
+/** Emails a signed receipt to the member's Microsoft 365 address; a mailbox flagged in the sample data refuses it. */
+function sendReceipt(receipt: Receipt) {
+  const person = find(receipt.person.id)
+  const email = person.member?.m365Email ?? ""
+  receipt.sentTo = email
+  if (person.feeState?.mailFails) {
+    receipt.status = "failed"
+    receipt.failure = "The mail server rejected the address: mailbox unavailable."
+    log(person, "System", `couldn't email receipt ${receipt.number}`)
+    return false
+  }
+  receipt.status = "sent"
+  receipt.sentAt = nowStamp()
+  receipt.failure = null
+  log(person, "System", `emailed receipt ${receipt.number} to ${email}`)
+  return true
+}
+
+function receiptFile(receipt: Receipt): FilePayload {
+  const bytes =
+    signedFiles.get(receipt.id) ??
+    receiptPdf(receipt, {
+      president: officerName(OFFICERS.president),
+      vicePresident: officerName(OFFICERS.vicePresident),
+    })
+  return {
+    fileName: downloadName(receipt),
+    contentType: "application/pdf",
+    base64: Buffer.from(bytes).toString("base64"),
   }
 }
 
@@ -382,7 +526,7 @@ export function fakePeopleApi(viewer: PeopleViewer): PeopleApi {
         profile: {
           firstName: input.firstName,
           lastName: input.lastName,
-          personalEmail: input.personalEmail,
+          personalEmail: input.personalEmail || null,
           phone: input.phone || null,
           telegramUsername: input.telegramUsername || null,
           telegramId: null,
@@ -412,6 +556,7 @@ export function fakePeopleApi(viewer: PeopleViewer): PeopleApi {
         account: { status: "none" },
         notes: null,
         activity: [],
+        feeState: null,
         start: input.admin ? today() : null,
         censusTelegram: null,
         expected: false,
@@ -427,7 +572,7 @@ export function fakePeopleApi(viewer: PeopleViewer): PeopleApi {
       Object.assign(person.profile, {
         firstName: input.firstName,
         lastName: input.lastName,
-        personalEmail: input.personalEmail,
+        personalEmail: input.personalEmail || null,
         phone: input.phone || null,
         telegramUsername: input.telegramUsername || null,
         course: input.course,
@@ -455,7 +600,18 @@ export function fakePeopleApi(viewer: PeopleViewer): PeopleApi {
         fee: input.fee,
         m365Email: m365Address(person.profile.firstName, person.profile.lastName),
       }
+      person.feeState = emptyFeeState()
       log(person, actor, `admitted ${person.profile.firstName} as member ${input.number}`)
+      if (input.fee === "paid") {
+        const payment = {
+          paidOn: input.admittedOn,
+          method: "transfer" as const,
+          amountCents: FEE_AMOUNT_CENTS,
+          transferDate: input.admittedOn,
+        }
+        person.feeState.payment = payment
+        issueReceipt(person, payment)
+      }
     },
     setMemberStatus: async (input) => {
       require(viewer, "people:members:write")
@@ -966,9 +1122,17 @@ export function fakePeopleApi(viewer: PeopleViewer): PeopleApi {
               .sort((a, b) => (a.role === b.role ? a.name.localeCompare(b.name) : a.role === "lead" ? -1 : 1)),
           }
         : null
+      const current = me.member && me.member.status !== "former" ? me.member : null
       return {
         state: "linked",
         person: { ...record(me, { ...viewer, personId: me.id }), notes: null },
+        feeInstructions: current
+          ? {
+              beneficiary: FEE_BENEFICIARY,
+              iban: FEE_IBAN,
+              reference: `Quota ${FEE_YEAR} ${current.number} ${fullName(me)}`,
+            }
+          : null,
         campaign: me.expected ? { id: "2026", year: "2026/27", closesOn: "2026-10-31" } : null,
         contacts,
         roster,
@@ -1027,5 +1191,285 @@ export function fakePeopleApi(viewer: PeopleViewer): PeopleApi {
       me.consents.photo = { status: "revoked", on: today() }
       log(me, fullName(me), "revoked the photo and video consent")
     },
+    getFeeReview: async (input) => {
+      require(viewer, "people:fees:write")
+      const { person, member, state } = currentMember(input.personId)
+      const fee = feeDetail(person)
+      if (!fee) throw new Error("This person isn't a current member.")
+      return {
+        person: { id: person.id, name: fullName(person) },
+        memberNumber: member.number,
+        m365Email: member.m365Email,
+        fee,
+        rejections: state.rejections,
+        nextReceipt: nextReceiptNumber(
+          FEE_YEAR,
+          data().receipts.map((receipt) => receipt.number)
+        ),
+      }
+    },
+    getFeeUpload: async (input) => {
+      require(viewer, "people:fees:write")
+      const { person, member, state } = currentMember(input.personId)
+      if (!state.upload) throw new Error("There is no transfer receipt to show.")
+      const file = transferFiles.get(person.id)
+      const bytes =
+        file?.bytes ??
+        sampleTransferPdf({
+          name: fullName(person),
+          memberNumber: member.number,
+          date: state.upload.transferDate,
+          amountCents: state.upload.amountCents,
+        })
+      return {
+        fileName: state.upload.fileName,
+        contentType: file?.type ?? "application/pdf",
+        base64: Buffer.from(bytes).toString("base64"),
+      }
+    },
+    approveFee: async (input) => {
+      require(viewer, "people:fees:write")
+      const { person, member, state } = currentMember(input.personId)
+      if (member.fee !== "receipt" || !state.upload) throw new Error("There is no transfer receipt to review.")
+      const payment = {
+        paidOn: state.upload.transferDate,
+        method: "transfer" as const,
+        amountCents: state.upload.amountCents,
+        transferDate: state.upload.transferDate,
+      }
+      member.fee = "paid"
+      state.payment = payment
+      state.upload = null
+      state.rejection = null
+      transferFiles.delete(person.id)
+      log(person, actor, `approved the transfer receipt for ${FEE_YEAR}`)
+      return { receipt: issueReceipt(person, payment).number }
+    },
+    rejectFee: async (input) => {
+      require(viewer, "people:fees:write")
+      const { person, member, state } = currentMember(input.personId)
+      if (member.fee !== "receipt" || !state.upload) throw new Error("There is no transfer receipt to review.")
+      const rejection = { reason: input.reason, by: actor, at: nowStamp() }
+      member.fee = unpaidStatus()
+      state.upload = null
+      state.rejection = rejection
+      state.rejections.unshift(rejection)
+      transferFiles.delete(person.id)
+      log(person, actor, `rejected the transfer receipt for ${FEE_YEAR}: “${input.reason}”`)
+    },
+    markFeePaid: async (input) => {
+      require(viewer, "people:fees:write")
+      const { person, member, state } = currentMember(input.personId)
+      if (member.fee === "paid") throw new Error(`The ${FEE_YEAR} fee is already paid.`)
+      const payment = {
+        paidOn: input.paidOn,
+        method: input.method,
+        amountCents: input.amountCents,
+        transferDate: input.method === "transfer" ? input.paidOn : null,
+      }
+      member.fee = "paid"
+      state.payment = payment
+      state.upload = null
+      state.rejection = null
+      transferFiles.delete(person.id)
+      const how = input.method === "cash" ? "cash" : "bank transfer"
+      log(person, actor, `marked the ${FEE_YEAR} fee as paid (${how})${input.note ? `: “${input.note}”` : ""}`)
+      return { receipt: issueReceipt(person, payment).number }
+    },
+    remindFees: async (input) => {
+      require(viewer, "people:fees:write")
+      const recently = new Date(Date.now() - 3 * 86_400_000).toISOString()
+      const targets =
+        input.personId === null
+          ? data().people.filter(
+              (person) =>
+                person.feeState &&
+                person.member?.status !== "former" &&
+                (person.member?.fee === "due" || person.member?.fee === "unpaid")
+            )
+          : [currentMember(input.personId).person]
+      let sent = 0
+      let skipped = 0
+      for (const person of targets) {
+        const state = person.feeState
+        if (!state) continue
+        if (person.member?.fee !== "due" && person.member?.fee !== "unpaid") {
+          throw new Error(`${fullName(person)}'s fee isn't due.`)
+        }
+        if (input.personId === null && state.lastReminder && new Date(state.lastReminder).toISOString() > recently) {
+          skipped++
+          continue
+        }
+        state.lastReminder = nowStamp()
+        log(person, actor, `sent a reminder for the ${FEE_YEAR} fee`)
+        sent++
+      }
+      return { sent, skipped }
+    },
+    listReceipts: async (input) => {
+      require(viewer, "people:members:read")
+      const all = data().receipts
+      const years = [...new Set(all.map((receipt) => receipt.year))].sort().reverse()
+      const year = input.year ?? FEE_YEAR
+      const ref = (id: string) => {
+        const person = data().byId.get(id)
+        return person ? { id, name: fullName(person) } : null
+      }
+      return {
+        year,
+        years: years.includes(FEE_YEAR) ? years : [FEE_YEAR, ...years],
+        viewerSigner: viewerSigner(viewer),
+        officers: { president: ref(OFFICERS.president), vicePresident: ref(OFFICERS.vicePresident) },
+        receipts: all.filter((receipt) => receipt.year === year).sort((a, b) => (a.number < b.number ? 1 : -1)),
+      }
+    },
+    downloadReceipt: async (input) => {
+      require(viewer, "people:members:read")
+      return receiptFile(findReceipt(input.receiptId))
+    },
+    prepareReceiptSignatures: async (input) => {
+      require(viewer, "people:receipts:sign")
+      require(viewer, "esign:sign")
+      const signer = viewerSigner(viewer)
+      if (!signer) throw new Error("Only the President and the Vice-president sign receipts.")
+      for (const id of input.receiptIds) {
+        const receipt = findReceipt(id)
+        if (receipt.status !== "toSign") throw new Error(`Receipt ${receipt.number} is already signed.`)
+        if (receipt.signer !== signer) throw new Error(`Receipt ${receipt.number} needs another signer.`)
+      }
+      // Sample people have no backend identities or real eSign documents. Never simulate a valid CIE signature.
+      throw new Error(
+        "CIE signing needs the People backend and PoliNetwork eSign. Use Download to sign in this preview."
+      )
+    },
+    downloadReceiptsToSign: async () => {
+      require(viewer, "people:receipts:sign")
+      const signer = viewerSigner(viewer)
+      if (!signer) throw new Error("Only the President and the Vice-president sign receipts.")
+      const waiting = data().receipts.filter((receipt) => receipt.status === "toSign" && receipt.signer === signer)
+      if (waiting.length === 0) throw new Error("No receipts are waiting for your signature.")
+      const zip = zipFiles(
+        waiting.map((receipt) => ({
+          name: receiptFileName(receipt.number),
+          bytes: Buffer.from(receiptFile(receipt).base64, "base64"),
+        }))
+      )
+      return {
+        fileName: `Ricevute_da_firmare_${today()}.zip`,
+        contentType: "application/zip",
+        base64: zip.toString("base64"),
+      }
+    },
+    previewSignedReceipts: async (files) => {
+      require(viewer, "people:receipts:sign")
+      const uploadId = `su-${Date.now().toString(36)}`
+      const read = await Promise.all(
+        files.map(async (file, index) => {
+          const bytes = new Uint8Array(await file.arrayBuffer())
+          return { fileId: `f${index + 1}`, name: file.name, bytes, signed: looksSigned(file.name, bytes) }
+        })
+      )
+      signedUploads.set(uploadId, read)
+      return {
+        uploadId,
+        files: read.map((file) => {
+          const number = receiptNumberFromFileName(file.name)
+          const receipt = number ? data().receipts.find((candidate) => candidate.number === number) : undefined
+          return {
+            fileId: file.fileId,
+            fileName: file.name,
+            size: file.bytes.length,
+            receiptId: receipt?.id ?? null,
+            signature: { valid: file.signed, signer: file.signed ? actor : null },
+          }
+        }),
+      } satisfies SignedUpload
+    },
+    sendSignedReceipts: async (input) => {
+      require(viewer, "people:receipts:sign")
+      const signer = viewerSigner(viewer)
+      if (!signer) throw new Error("Only the President and the Vice-president sign receipts.")
+      const upload = signedUploads.get(input.uploadId)
+      if (!upload) throw new Error("This upload expired. Add the files again.")
+      const chosen = Object.entries(input.assignments).map(([fileId, id]) => {
+        const file = upload.find((candidate) => candidate.fileId === fileId)
+        if (!file) throw new Error("This upload changed. Add the files again.")
+        const receipt = findReceipt(id)
+        if (!file.signed) throw new Error(`${file.name} isn't signed.`)
+        if (receipt.status !== "toSign") throw new Error(`Receipt ${receipt.number} is already signed.`)
+        if (receipt.signer !== signer) throw new Error(`Receipt ${receipt.number} needs another signer.`)
+        return { file, receipt }
+      })
+      const ids = chosen.map(({ receipt }) => receipt.id)
+      if (new Set(ids).size !== ids.length) throw new Error("Two files point at the same receipt.")
+      let sent = 0
+      let failed = 0
+      for (const { file, receipt } of chosen) {
+        receipt.status = "signed"
+        receipt.signedBy = actor
+        receipt.signedOn = today()
+        signedFiles.set(receipt.id, file.bytes)
+        log(find(receipt.person.id), actor, `uploaded receipt ${receipt.number}, signed`)
+        if (sendReceipt(receipt)) sent++
+        else failed++
+      }
+      signedUploads.delete(input.uploadId)
+      return { sent, failed }
+    },
+    retryReceipt: async (input) => {
+      require(viewer, "people:fees:write")
+      const receipt = findReceipt(input.receiptId)
+      if (receipt.status !== "failed") throw new Error(`Receipt ${receipt.number} isn't waiting for a retry.`)
+      // In the sample data the address gets fixed before anyone retries.
+      const person = find(receipt.person.id)
+      if (person.feeState) person.feeState.mailFails = false
+      if (!sendReceipt(receipt)) throw new Error(receipt.failure ?? "The receipt couldn't be sent.")
+    },
+    voidReceipt: async (input) => {
+      require(viewer, "people:fees:write")
+      const receipt = findReceipt(input.receiptId)
+      if (receipt.status === "voided") throw new Error(`Receipt ${receipt.number} is already voided.`)
+      receipt.status = "voided"
+      receipt.voided = { reason: input.reason, by: actor, on: today() }
+      const person = find(receipt.person.id)
+      log(person, actor, `voided receipt ${receipt.number}: “${input.reason}”`)
+      const stillValid = data().receipts.some(
+        (other) => other.person.id === person.id && other.year === receipt.year && other.status !== "voided"
+      )
+      // Voiding this year's only receipt reopens the fee, so the admin can issue a correct one.
+      if (receipt.year === FEE_YEAR && !stillValid && person.member?.fee === "paid" && person.feeState) {
+        person.member.fee = unpaidStatus()
+        person.feeState.payment = null
+      }
+    },
+    uploadTransferReceipt: async (file, input) => {
+      require(viewer, "people:self")
+      const me = linkedRecord(viewer)
+      if (!me) throw new Error("There is no record to upload for.")
+      const { member, state } = currentMember(me.id)
+      if (member.fee === "paid") throw new Error(`Your ${FEE_YEAR} fee is already paid.`)
+      const bytes = new Uint8Array(await file.arrayBuffer())
+      transferFiles.set(me.id, { name: file.name, type: file.type || "application/pdf", bytes })
+      state.upload = {
+        fileName: file.name,
+        size: bytes.length,
+        uploadedAt: nowStamp(),
+        transferDate: input.transferDate,
+        amountCents: input.amountCents,
+      }
+      state.rejection = null
+      member.fee = "receipt"
+      log(me, fullName(me), `uploaded a transfer receipt for ${FEE_YEAR}`)
+    },
+    downloadMyReceipt: async (input) => {
+      require(viewer, "people:self")
+      const me = linkedRecord(viewer)
+      const receipt = findReceipt(input.receiptId)
+      // Members get their own receipts once signed; anything else reads as missing.
+      if (!me || receipt.person.id !== me.id || receipt.status === "toSign" || receipt.status === "voided") {
+        throw new Error("This receipt no longer exists.")
+      }
+      return receiptFile(receipt)
+    },
   }
 }
diff --git a/src/features/people/people.fixtures.server.ts b/src/features/people/people.fixtures.server.ts
index 1728449..0eeaecf 100644
--- a/src/features/people/people.fixtures.server.ts
+++ b/src/features/people/people.fixtures.server.ts
@@ -4,7 +4,10 @@ import {
   CAMPUSES,
   type CensusEntry,
   type FeeStatus,
+  type FeeUpload,
+  type FeeDetail,
   type PersonRecord,
+  type Receipt,
   type Review,
   type TeamFields,
   type TeamId,
@@ -21,7 +24,9 @@ export const SAMPLE_TODAY = "2026-10-14"
 export type FamilyId = "inf" | "ges" | "ind" | "ele" | "des" | "arc"
 
 /** A record as the fake backend stores it: the contract's record plus what it derives views from. */
-export type StoredPerson = Omit<PersonRecord, "discrepancies" | "isMember"> & {
+export type StoredPerson = Omit<PersonRecord, "discrepancies" | "isMember" | "fees"> & {
+  /** The current fee year beyond `member.fee`, which stays the status; `null` for people who aren't members. */
+  feeState: FeeState | null
   family: FamilyId
   /** The first day of any role, for the census history. */
   start: string | null
@@ -31,6 +36,18 @@ export type StoredPerson = Omit<PersonRecord, "discrepancies" | "isMember"> & {
   expected: boolean
 }
 
+/** What the fake keeps about a member's current fee year; `member.fee` is its status. */
+export type FeeState = {
+  upload: FeeUpload | null
+  rejection: FeeDetail["rejection"]
+  /** Every rejection this fee year, newest first. */
+  rejections: NonNullable<FeeDetail["rejection"]>[]
+  payment: FeeDetail["payment"]
+  lastReminder: string | null
+  /** The member's mailbox rejects email, so sending their receipt fails (until someone retries). */
+  mailFails: boolean
+}
+
 export type JoinRequest = { id: string; personId: string; group: string; requestedOn: string }
 
 export type PeopleStore = {
@@ -38,6 +55,8 @@ export type PeopleStore = {
   byId: Map<string, StoredPerson>
   reviews: Review[]
   joinRequests: JoinRequest[]
+  /** Every receipt ever issued, voided ones included. */
+  receipts: Receipt[]
 }
 
 const FIRST = [
@@ -554,6 +573,7 @@ export function buildPeopleStore(): PeopleStore {
       account: { status: "none" },
       notes: random() < 0.1 ? pick(NOTES) : null,
       activity: [],
+      feeState: null,
       start: null,
       censusTelegram: null,
       expected: false,
@@ -1172,5 +1192,235 @@ export function buildPeopleStore(): PeopleStore {
     { id: "j3", personId: (informatics[1] ?? giulia).id, group: "Basi di Dati", requestedOn: "2026-10-12" },
   ]
 
-  return { people, byId, reviews, joinRequests }
+  return { people, byId, reviews, joinRequests, receipts: seedFees(people, byId) }
+}
+
+/** The fee year People › Receipts opens on, and the one My area asks to pay. */
+export const FEE_YEAR = "2026/27"
+export const FEE_AMOUNT_CENTS = 1000
+export const FEE_DUE_ON = "2026-10-31"
+/** Automatic reminders go out this many days before `FEE_DUE_ON`. */
+export const REMINDER_DAYS = [14, 3] as const
+/** The association's officers who sign receipts: Marta Colombo and Davide Russo in the sample data. */
+export const OFFICERS = { president: "P-0007", vicePresident: "P-0098" } as const
+export const FEE_BENEFICIARY = "PoliNetwork"
+/** A placeholder: the real IBAN is configuration on the backend. */
+export const FEE_IBAN = "IT00 X000 0000 0000 0000 0000 000"
+
+export function receiptId(number: string) {
+  return `rcp-${number.replace("/", "-")}`
+}
+
+export function emptyFeeState(): FeeState {
+  return { upload: null, rejection: null, rejections: [], payment: null, lastReminder: null, mailFails: false }
+}
+
+/**
+ * Fee years and receipts on top of the members, from their own seed so the rest of the sample data is unchanged:
+ * a sent 2025/26 receipt for members admitted before it, and 2026/27 receipts for this year's paid fees, the newest
+ * still to sign. Alessia Fontana (`P-0045`) has a receipt to review, Luca Ferri (`P-0021`) a rejected one, and the
+ * President's own receipt waits for the Vice-president.
+ */
+function seedFees(people: StoredPerson[], byId: Map<string, StoredPerson>): Receipt[] {
+  const random = mulberry32(2627)
+  const between = (from: string, to: string) => {
+    const days = Math.round((Date.parse(`${to}T12:00:00Z`) - Date.parse(`${from}T12:00:00Z`)) / 86_400_000)
+    return addDays(from, Math.floor(random() * (days + 1)))
+  }
+  const name = (person: StoredPerson) => `${person.profile.firstName} ${person.profile.lastName}`
+  const at = (date: string, hour: number) => `${date}T${pad(hour, 2)}:${pad(Math.floor(random() * 60), 2)}:00+02:00`
+  const members = people.filter((person) => person.member)
+  for (const person of members) if (person.member?.status !== "former") person.feeState = emptyFeeState()
+
+  const force = (id: string, fee: FeeStatus) => {
+    const member = byId.get(id)?.member
+    if (member && member.status === "active") member.fee = fee
+  }
+  force("P-0045", "receipt")
+  force("P-0021", "due")
+  force("P-0052", "due")
+  force(OFFICERS.president, "paid")
+  force(OFFICERS.vicePresident, "paid")
+
+  const receipts: Receipt[] = []
+  const issue = (
+    person: StoredPerson,
+    number: string,
+    year: string,
+    paidOn: string,
+    method: Receipt["method"],
+    status: Receipt["status"]
+  ): Receipt => {
+    const member = person.member
+    if (!member) throw new Error(`${person.id} isn't a member`)
+    const issuedOn = addDays(paidOn, 1)
+    const signed = status !== "toSign"
+    const signer = person.id === OFFICERS.president ? "vicePresident" : "president"
+    const officer = byId.get(signer === "president" ? OFFICERS.president : OFFICERS.vicePresident)
+    const signedOn = signed ? addDays(issuedOn, 1) : null
+    const receipt: Receipt = {
+      id: receiptId(number),
+      number,
+      year,
+      person: { id: person.id, name: name(person) },
+      memberNumber: member.number,
+      amountCents: FEE_AMOUNT_CENTS,
+      issuedOn,
+      paidOn,
+      method,
+      transferDate: method === "transfer" ? paidOn : null,
+      status,
+      signer,
+      signedBy: signed && officer ? name(officer) : null,
+      signedOn,
+      sentAt: status === "sent" && signedOn ? at(signedOn, 22) : null,
+      sentTo: status === "sent" || status === "failed" ? member.m365Email : null,
+      failure: status === "failed" ? "The mail server rejected the address: mailbox unavailable." : null,
+      voided: null,
+    }
+    receipts.push(receipt)
+    person.activity.push({ actor: "System", text: `issued receipt ${number} for the ${year} fee`, at: at(issuedOn, 9) })
+    if (receipt.signedBy && signedOn) {
+      person.activity.push({
+        actor: receipt.signedBy,
+        text: `uploaded receipt ${number}, signed`,
+        at: at(signedOn, 21),
+      })
+    }
+    if (receipt.sentAt && receipt.sentTo) {
+      person.activity.push({
+        actor: "System",
+        text: `emailed receipt ${number} to ${receipt.sentTo}`,
+        at: receipt.sentAt,
+      })
+    }
+    if (status === "failed" && signedOn) {
+      person.activity.push({ actor: "System", text: `couldn't email receipt ${number}`, at: at(signedOn, 22) })
+    }
+    return receipt
+  }
+
+  // 2025/26: everyone admitted before that fee year paid it and got a sent receipt.
+  const lastYear = members
+    .filter((person) => (person.member?.admittedOn ?? "9999") < "2025-10-01")
+    .map((person) => ({ person, paidOn: between("2025-09-20", "2025-10-31") }))
+    .sort((a, b) => (a.paidOn < b.paidOn ? -1 : 1))
+  lastYear.forEach(({ person, paidOn }, index) => {
+    issue(person, `2025/${pad(index + 1, 3)}`, "2025/26", paidOn, random() < 0.9 ? "transfer" : "cash", "sent")
+  })
+
+  // 2026/27: paid fees in payment order; the newest seven wait for a signature, two wait to be emailed.
+  const paid = members
+    .filter((person) => person.member?.fee === "paid" && person.feeState)
+    .map((person) => ({ person, paidOn: between("2026-09-20", "2026-10-12") }))
+    .sort((a, b) => (a.paidOn < b.paidOn ? -1 : 1))
+  // The President pays late enough that their receipt still waits, for the Vice-president.
+  const president = paid.find((entry) => entry.person.id === OFFICERS.president)
+  if (president) president.paidOn = "2026-10-11"
+  paid.sort((a, b) => (a.paidOn < b.paidOn ? -1 : 1))
+  const voidAt = 4
+  let sequence = 0
+  paid.forEach(({ person, paidOn }, index) => {
+    const fromEnd = paid.length - index
+    const method = random() < 0.9 ? "transfer" : "cash"
+    if (index === voidAt) {
+      // Issued with the wrong amount, voided, and issued again.
+      sequence++
+      const wrong = issue(person, `2026/${pad(sequence, 3)}`, FEE_YEAR, paidOn, method, "sent")
+      wrong.voided = {
+        reason: "Wrong amount on the receipt; issued again.",
+        by: "Davide Russo",
+        on: addDays(paidOn, 3),
+      }
+      wrong.status = "voided"
+      person.activity.push({
+        actor: "Davide Russo",
+        text: `voided receipt ${wrong.number}: “Wrong amount on the receipt; issued again.”`,
+        at: at(addDays(paidOn, 3), 10),
+      })
+    }
+    sequence++
+    const status =
+      person.id === OFFICERS.president || fromEnd <= 6
+        ? "toSign"
+        : fromEnd <= 8
+          ? "signed"
+          : index === Math.floor(paid.length / 2)
+            ? "failed"
+            : "sent"
+    const receipt = issue(person, `2026/${pad(sequence, 3)}`, FEE_YEAR, paidOn, method, status)
+    if (status === "failed" && person.feeState) person.feeState.mailFails = true
+    if (person.feeState) {
+      person.feeState.payment = {
+        paidOn,
+        method,
+        amountCents: FEE_AMOUNT_CENTS,
+        transferDate: receipt.transferDate,
+      }
+      person.activity.push({
+        actor: "Davide Russo",
+        text:
+          method === "transfer"
+            ? `approved the transfer receipt for ${FEE_YEAR}`
+            : `marked the ${FEE_YEAR} fee as paid (cash)`,
+        at: at(paidOn, 18),
+      })
+    }
+  })
+
+  // Receipts waiting for review: the member's upload.
+  for (const person of members) {
+    const state = person.feeState
+    if (!state || person.member?.fee !== "receipt") continue
+    const transferDate = between("2026-10-05", "2026-10-12")
+    state.upload = {
+      fileName: `bonifico_${slug(person.profile.lastName)}.pdf`,
+      size: 120_000 + Math.floor(random() * 120_000),
+      uploadedAt: at(addDays(transferDate, 1), 21),
+      transferDate,
+      amountCents: FEE_AMOUNT_CENTS,
+    }
+    person.activity.push({
+      actor: name(person),
+      text: `uploaded a transfer receipt for ${FEE_YEAR}`,
+      at: state.upload.uploadedAt,
+    })
+  }
+
+  // Reminders: the automatic one 14 days before the deadline has not gone out yet; some were sent by hand.
+  for (const person of members) {
+    const state = person.feeState
+    if (!state || (person.member?.fee !== "due" && person.member?.fee !== "unpaid")) continue
+    if (random() < 0.4) {
+      state.lastReminder = at(between("2026-10-01", "2026-10-13"), 10)
+      person.activity.push({
+        actor: "Davide Russo",
+        text: `sent a reminder for the ${FEE_YEAR} fee`,
+        at: state.lastReminder,
+      })
+    }
+  }
+
+  const rejected = byId.get("P-0021")
+  if (rejected?.feeState) {
+    const rejection = {
+      reason:
+        "The file is a screenshot of the payment page, not the transfer receipt. Upload the receipt your bank issued.",
+      by: "Davide Russo",
+      at: "2026-10-13T18:40:00+02:00",
+    }
+    rejected.feeState.rejection = rejection
+    rejected.feeState.rejections = [rejection]
+    rejected.activity.push({
+      actor: name(rejected),
+      text: `uploaded a transfer receipt for ${FEE_YEAR}`,
+      at: "2026-10-12T22:05:00+02:00",
+    })
+    rejected.activity.push({
+      actor: "Davide Russo",
+      text: `rejected the transfer receipt for ${FEE_YEAR}: “${rejection.reason}”`,
+      at: rejection.at,
+    })
+  }
+  return receipts
 }
diff --git a/src/features/people/person-dialog.tsx b/src/features/people/person-dialog.tsx
index aecdde9..de78a2e 100644
--- a/src/features/people/person-dialog.tsx
+++ b/src/features/people/person-dialog.tsx
@@ -2,20 +2,19 @@ import { useNavigate } from "@tanstack/react-router"
 import { useServerFn } from "@tanstack/react-start"
 import { type ChangeEvent, useState } from "react"
 
-import { checkboxControl, fieldControl, fieldHintId, FormDialog, FormField } from "@/components/primitives"
+import { checkboxControl, fieldControl, fieldHintId, FormDialog, FormField, SelectField } from "@/components/primitives"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
 
 import { yearOf } from "./people-format"
 import { errorMessage, useRefreshAfter } from "./people-hooks"
-import { SelectField } from "./people-ui"
 import { createPerson, updatePerson } from "./people-write.functions"
 import { CAMPUSES, type Campus, COURSES, type PersonRow, TELEGRAM_USERNAME_PATTERN, YEARS } from "./people.contract"
 
 type Year = (typeof YEARS)[number]
 
-const SAVE_ERROR = "The person could not be saved. Check the values and try again."
+const SAVE_ERROR = "Couldn't save the person. Check the values and try again."
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 
 function validTelegram(value: string) {
@@ -105,7 +104,7 @@ export function PersonDialog({
       }
     } catch (caught) {
       console.error(caught)
-      throw new Error(caught instanceof Error ? errorMessage(caught, SAVE_ERROR) : SAVE_ERROR, { cause: caught })
+      throw new Error(errorMessage(caught, SAVE_ERROR), { cause: caught })
     }
     await refresh("Profile saved.")
     onOpenChange(false)
diff --git a/src/features/people/person-page.tsx b/src/features/people/person-page.tsx
index fed9c45..d742d0d 100644
--- a/src/features/people/person-page.tsx
+++ b/src/features/people/person-page.tsx
@@ -1,10 +1,14 @@
 import { Link } from "@tanstack/react-router"
 import { useServerFn } from "@tanstack/react-start"
 import {
+  Banknote,
+  Bell,
   Camera,
   ClipboardList,
   Crown,
   EllipsisVertical,
+  FileDown,
+  FileSearch,
   FileText,
   IdCard,
   Link2,
@@ -28,10 +32,10 @@ import {
   InlineAlert,
   KeyValueList,
   type KeyValueItem,
+  LoadingButton,
   Menu,
   MenuContent,
   MenuItem,
-  MenuSeparator,
   MenuTrigger,
   PlatformGlyph,
   RecordHeader,
@@ -42,33 +46,39 @@ import {
 } from "@/components/primitives"
 import { appToast, PageBar, PageContent, useCan } from "@/components/shell"
 import { Button } from "@/components/ui/button"
-import { formatDateTime } from "@/lib/format"
+import { formatDateTime, pluralize } from "@/lib/format"
 
 import { type AccountAction, AccountActionDialog } from "./account-action-dialog"
 import { CapoOfReferenceDialog, CapoScopeDialog, EndAdminDialog, EndCapoDialog } from "./admin-dialogs"
 import { CensusAnswersDialog } from "./census-answers-dialog"
+import { type FeeTarget, MarkPaidDialog, ReviewReceiptDialog, useSendFeeReminder } from "./fee-dialogs"
 import { LinkAccountDialog } from "./link-account-dialog"
 import { MemberNumberDialog, MemberStatusDialog } from "./member-dialogs"
 import { NotesDialog } from "./notes-dialog"
+import { formatCents } from "./people-fees"
 import {
   ACCOUNT_STATUS,
   activeTeams,
   CENSUS_ANSWER,
   CENSUS_SOURCE,
-  CURRENT_YEAR,
+  currentYear,
   FEE_STATUS,
   formatDay,
   hasNoRoles,
+  PAYMENT_METHOD,
+  RECEIPT_STATUS,
   isExpired,
   MEMBER_STATUS,
   NO_ANSWER,
   personName,
+  PHOTO_CONSENT,
   roleLabels,
   teamName,
   yearOf,
 } from "./people-format"
-import { useRefreshAfter } from "./people-hooks"
-import { MonoChip, PersonAvatar, Row, RowIcon, Rows, StateBadge, SubHeading } from "./people-ui"
+import { errorMessage, useDialog, useDialogState, useFileDownload, useRefreshAfter } from "./people-hooks"
+import { downloadReceipt } from "./people-receipts.functions"
+import { ActionMenu, MonoChip, PersonAvatar, Row, RowIcon, Rows, StateBadge, SubHeading } from "./people-ui"
 import { updatePerson } from "./people-write.functions"
 import { type PersonRecord, TEAM_IDS, type TeamMembership, teamFields } from "./people.contract"
 import { PersonDialog } from "./person-dialog"
@@ -84,6 +94,9 @@ export function PersonPage({ person }: { person: PersonRecord }) {
   const canRead = useCan("people:read")
   const canWriteMembers = useCan("people:members:write")
   const canAppoint = useCan("people:appoint")
+  const canFees = useCan("people:fees:write")
+  const sendReminder = useSendFeeReminder()
+  const download = useServerFn(downloadReceipt)
   const update = useServerFn(updatePerson)
   const refresh = useRefreshAfter()
   const name = personName(person)
@@ -92,58 +105,32 @@ export function PersonPage({ person }: { person: PersonRecord }) {
   const { profile, admin, member, account } = person
   const adminTarget = { personId: person.id, name, groups: admin?.groups.length ?? 0 }
 
-  const [editOpen, setEditOpen] = useState(false)
-  const [editKey, setEditKey] = useState(0)
-  const [notesOpen, setNotesOpen] = useState(false)
-  const [notesKey, setNotesKey] = useState(0)
-  const [answersYear, setAnswersYear] = useState<string | null>(null)
-  const [answersOpen, setAnswersOpen] = useState(false)
-  const [accountAction, setAccountAction] = useState<AccountAction | null>(null)
-  const [accountOpen, setAccountOpen] = useState(false)
-  const [linkOpen, setLinkOpen] = useState(false)
-  const [linkKey, setLinkKey] = useState(0)
-  const [memberDialog, setMemberDialog] = useState<"status" | "number" | null>(null)
-  const [memberOpen, setMemberOpen] = useState(false)
-  const [memberKey, setMemberKey] = useState(0)
-
-  const [adminDialog, setAdminDialog] = useState<AdminDialogKind | null>(null)
-  const [adminOpen, setAdminOpen] = useState(false)
-  const [adminKey, setAdminKey] = useState(0)
-
-  function openAdmin(kind: AdminDialogKind) {
-    setAdminDialog(kind)
-    setAdminKey((value) => value + 1)
-    setAdminOpen(true)
-  }
-
-  const [teamDialog, setTeamDialog] = useState<{ kind: "fields" | "end"; target: TeamMemberTarget } | null>(null)
-  const [teamOpen, setTeamOpen] = useState(false)
-  const [teamKey, setTeamKey] = useState(0)
-  const [addTeamOpen, setAddTeamOpen] = useState(false)
+  const { busy: downloading, download: downloadFile } = useFileDownload()
+  const edit = useDialogState()
+  const notes = useDialogState()
+  const link = useDialogState()
+  const addTeam = useDialogState()
+  const answers = useDialog<string>()
+  const accountDialog = useDialog<AccountAction>()
+  const memberDialog = useDialog<"status" | "number">()
+  const feeDialog = useDialog<"review" | "paid">()
+  const adminDialog = useDialog<AdminDialogKind>()
+  const teamDialog = useDialog<{ kind: "fields" | "end"; target: TeamMemberTarget }>()
+  const [applyingTelegram, setApplyingTelegram] = useState(false)
+  // A person already on the register (even one whose details this viewer can't read) isn't offered Add member.
+  const canAddMember = canWriteMembers && !member && !person.isMember
+  const feeTarget: FeeTarget | null = member ? { id: person.id, name, number: member.number } : null
 
   function openTeam(kind: "fields" | "end", membership: TeamMembership) {
-    setTeamDialog({ kind, target: { personId: person.id, name, team: membership.team, fields: membership.fields } })
-    setTeamKey((value) => value + 1)
-    setTeamOpen(true)
-  }
-
-  function openAddToTeam() {
-    setTeamKey((value) => value + 1)
-    setAddTeamOpen(true)
-  }
-
-  function openMember(kind: "status" | "number") {
-    setMemberDialog(kind)
-    setMemberKey((value) => value + 1)
-    setMemberOpen(true)
+    teamDialog.show({ kind, target: { personId: person.id, name, team: membership.team, fields: membership.fields } })
   }
 
   function openAccount(kind: AccountAction["kind"], email: string) {
-    setAccountAction({ kind, personId: person.id, name, email })
-    setAccountOpen(true)
+    accountDialog.show({ kind, personId: person.id, name, email })
   }
 
   async function applyCensusTelegram(username: string) {
+    setApplyingTelegram(true)
     try {
       await update({
         data: {
@@ -160,8 +147,10 @@ export function PersonPage({ person }: { person: PersonRecord }) {
       })
     } catch (caught) {
       console.error(caught)
-      appToast.error("Couldn't update the Telegram username.")
+      appToast.error(errorMessage(caught, "Couldn't update the Telegram username."))
       return
+    } finally {
+      setApplyingTelegram(false)
     }
     await refresh("Telegram username updated.")
   }
@@ -219,7 +208,8 @@ export function PersonPage({ person }: { person: PersonRecord }) {
             }
             chips={roles.length ? roles.map((role) => <Chip key={role}>{role}</Chip>) : undefined}
             actions={
-              canWrite || (canWriteMembers && !member) ? (
+              // A menu only when both roles can be added; one role is a plain button.
+              canAddMember && canWrite ? (
                 <Menu>
                   <MenuTrigger
                     render={
@@ -230,20 +220,27 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                     }
                   />
                   <MenuContent>
-                    {canWriteMembers && !member && !person.isMember ? (
-                      <MenuItem render={<Link to="/dashboard/people/members" search={{ add: person.id }} />}>
-                        <IdCard />
-                        Member
-                      </MenuItem>
-                    ) : null}
-                    {canWrite ? (
-                      <MenuItem onClick={openAddToTeam}>
-                        <Users />
-                        Team member
-                      </MenuItem>
-                    ) : null}
+                    <MenuItem render={<Link to="/dashboard/people/members" search={{ add: person.id }} />}>
+                      <IdCard />
+                      Member
+                    </MenuItem>
+                    <MenuItem onClick={addTeam.show}>
+                      <Users />
+                      Team member
+                    </MenuItem>
                   </MenuContent>
                 </Menu>
+              ) : canAddMember ? (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className={buttonMotion}
+                  nativeButton={false}
+                  render={<Link to="/dashboard/people/members" search={{ add: person.id }} />}
+                >
+                  <IdCard data-icon="inline-start" />
+                  Add member
+                </Button>
               ) : undefined
             }
           />
@@ -262,14 +259,14 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                   tone="warning"
                   action={
                     discrepancy.kind === "telegram-mismatch" && discrepancy.suggestedTelegram && canWrite ? (
-                      <Button
+                      <LoadingButton
                         size="sm"
                         variant="ghost"
-                        className={buttonMotion}
-                        onClick={() => applyCensusTelegram(discrepancy.suggestedTelegram ?? "")}
+                        pending={applyingTelegram}
+                        onClick={() => void applyCensusTelegram(discrepancy.suggestedTelegram ?? "")}
                       >
                         Use @{discrepancy.suggestedTelegram}
-                      </Button>
+                      </LoadingButton>
                     ) : discrepancy.kind === "declared-member" && canWriteMembers ? (
                       <Button
                         size="sm"
@@ -305,15 +302,7 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                 title="Profile"
                 action={
                   canWrite ? (
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className={buttonMotion}
-                      onClick={() => {
-                        setEditKey((key) => key + 1)
-                        setEditOpen(true)
-                      }}
-                    >
+                    <Button size="sm" variant="ghost" className={buttonMotion} onClick={edit.show}>
                       <Pencil data-icon="inline-start" />
                       Edit
                     </Button>
@@ -328,43 +317,36 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                   title="Admin"
                   padding="flush"
                   action={
-                    admin.status === "active" && (canWrite || canAppoint) ? (
-                      <Menu>
-                        <MenuTrigger
-                          render={
-                            <IconButton label="Admin actions" ariaLabel="Admin actions" icon={EllipsisVertical} />
-                          }
-                        />
-                        <MenuContent>
-                          {canWrite && !admin.capoScope ? (
-                            <MenuItem onClick={() => openAdmin("capoRef")}>
-                              <UserRoundCog />
-                              Capo Admin of reference
-                            </MenuItem>
-                          ) : null}
-                          {canAppoint ? (
-                            <MenuItem onClick={() => openAdmin("capoScope")}>
-                              <Crown />
-                              {admin.capoScope ? "Change Capo Admin scope" : "Appoint as Capo Admin"}
-                            </MenuItem>
-                          ) : null}
-                          {canAppoint && admin.capoScope ? (
-                            <MenuItem variant="destructive" onClick={() => openAdmin("endCapo")}>
-                              <Crown />
-                              End Capo Admin role
-                            </MenuItem>
-                          ) : null}
-                          {canWrite ? (
-                            <>
-                              <MenuSeparator />
-                              <MenuItem variant="destructive" onClick={() => openAdmin("end")}>
-                                <UserMinus />
-                                End admin role
-                              </MenuItem>
-                            </>
-                          ) : null}
-                        </MenuContent>
-                      </Menu>
+                    admin.status === "active" ? (
+                      <ActionMenu
+                        label="Admin actions"
+                        actions={[
+                          canWrite &&
+                            !admin.capoScope && {
+                              label: "Capo Admin of reference",
+                              icon: UserRoundCog,
+                              onClick: () => adminDialog.show("capoRef"),
+                            },
+                          canAppoint && {
+                            label: admin.capoScope ? "Change Capo Admin scope" : "Appoint as Capo Admin",
+                            icon: Crown,
+                            onClick: () => adminDialog.show("capoScope"),
+                          },
+                          canAppoint &&
+                            admin.capoScope !== null && {
+                              label: "End Capo Admin role",
+                              icon: Crown,
+                              destructive: true,
+                              onClick: () => adminDialog.show("endCapo"),
+                            },
+                          canWrite && {
+                            label: "End admin role",
+                            icon: UserMinus,
+                            destructive: true,
+                            onClick: () => adminDialog.show("end"),
+                          },
+                        ]}
+                      />
                     ) : undefined
                   }
                 >
@@ -450,7 +432,7 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                   padding="flush"
                   action={
                     canWrite ? (
-                      <Button variant="ghost" size="sm" className={buttonMotion} onClick={openAddToTeam}>
+                      <Button variant="ghost" size="sm" className={buttonMotion} onClick={addTeam.show}>
                         <UserPlus data-icon="inline-start" />
                         Add to team
                       </Button>
@@ -500,32 +482,24 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                         }
                         end={
                           canWrite && !membership.endedOn ? (
-                            <Menu>
-                              <MenuTrigger
-                                render={
-                                  <IconButton
-                                    label="Team actions"
-                                    ariaLabel={`${teamName(membership.team)} actions`}
-                                    icon={EllipsisVertical}
-                                  />
-                                }
-                              />
-                              <MenuContent>
-                                <MenuItem onClick={() => openTeam("fields", membership)}>
-                                  <Pencil />
-                                  Edit team fields
-                                </MenuItem>
-                                {membership.role !== "lead" || canAppoint ? (
-                                  <>
-                                    <MenuSeparator />
-                                    <MenuItem variant="destructive" onClick={() => openTeam("end", membership)}>
-                                      <UserMinus />
-                                      End membership
-                                    </MenuItem>
-                                  </>
-                                ) : null}
-                              </MenuContent>
-                            </Menu>
+                            <ActionMenu
+                              label={`${teamName(membership.team)} actions`}
+                              actions={[
+                                {
+                                  label: "Edit team fields",
+                                  ariaLabel: `Edit the ${teamName(membership.team)} team fields`,
+                                  icon: Pencil,
+                                  onClick: () => openTeam("fields", membership),
+                                },
+                                (membership.role !== "lead" || canAppoint) && {
+                                  label: "End membership",
+                                  ariaLabel: `End the ${teamName(membership.team)} membership`,
+                                  icon: UserMinus,
+                                  destructive: true,
+                                  onClick: () => openTeam("end", membership),
+                                },
+                              ]}
+                            />
                           ) : undefined
                         }
                       />
@@ -547,8 +521,8 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                         meta={
                           entry.answer && entry.source && entry.answeredOn
                             ? `${CENSUS_SOURCE[entry.source]} · ${formatDay(entry.answeredOn)}`
-                            : entry.year === CURRENT_YEAR
-                              ? `Open until 31 Oct 2026${entry.reminders ? ` · ${entry.reminders} reminder${entry.reminders === 1 ? "" : "s"} sent` : ""}`
+                            : entry.year === currentYear()
+                              ? `Waiting for an answer${entry.reminders ? ` · ${pluralize(entry.reminders, "reminder")} sent` : ""}`
                               : "No answer"
                         }
                         end={
@@ -558,10 +532,7 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                                 size="sm"
                                 variant="ghost"
                                 className={buttonMotion}
-                                onClick={() => {
-                                  setAnswersYear(entry.year)
-                                  setAnswersOpen(true)
-                                }}
+                                onClick={() => answers.show(entry.year)}
                               >
                                 View answers
                               </Button>
@@ -604,15 +575,7 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                         </Button>
                       ) : null}
                       {account.status !== "linked" ? (
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          className={buttonMotion}
-                          onClick={() => {
-                            setLinkKey((key) => key + 1)
-                            setLinkOpen(true)
-                          }}
-                        >
+                        <Button size="sm" variant="outline" className={buttonMotion} onClick={link.show}>
                           <Link2 data-icon="inline-start" />
                           Link account
                         </Button>
@@ -715,11 +678,11 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                           }
                         />
                         <MenuContent>
-                          <MenuItem onClick={() => openMember("status")}>
+                          <MenuItem onClick={() => memberDialog.show("status")}>
                             <Pencil />
                             Change status
                           </MenuItem>
-                          <MenuItem onClick={() => openMember("number")}>
+                          <MenuItem onClick={() => memberDialog.show("number")}>
                             <IdCard />
                             Change member number
                           </MenuItem>
@@ -733,10 +696,15 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                       { key: "Member number", value: <MonoChip>{member.number}</MonoChip> },
                       { key: "Status", value: <StateBadge state={MEMBER_STATUS[member.status]} /> },
                       { key: "Admitted on", value: formatDay(member.admittedOn) },
-                      {
-                        key: `Fee ${CURRENT_YEAR}`,
-                        value: member.fee ? <StateBadge state={FEE_STATUS[member.fee]} /> : null,
-                      },
+                      // With the fees in their own card, the fee status is said there only.
+                      ...(person.fees
+                        ? []
+                        : [
+                            {
+                              key: `Fee ${currentYear()}`,
+                              value: member.fee ? <StateBadge state={FEE_STATUS[member.fee]} /> : null,
+                            },
+                          ]),
                       {
                         key: "Microsoft 365",
                         value: (
@@ -751,7 +719,27 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                     ]}
                   />
                 </SectionCard>
-              ) : person.isMember ? (
+              ) : null}
+
+              {person.fees ? (
+                <FeesCard
+                  fees={person.fees}
+                  canFees={canFees && member !== null && member.status !== "former"}
+                  onReview={() => feeDialog.show("review")}
+                  onMarkPaid={() => feeDialog.show("paid")}
+                  onRemind={() => void sendReminder({ id: person.id, name })}
+                  downloading={downloading}
+                  onDownload={(receipt) =>
+                    void downloadFile(
+                      receipt.id,
+                      () => download({ data: { receiptId: receipt.id } }),
+                      `Couldn't download receipt ${receipt.number}.`
+                    )
+                  }
+                />
+              ) : null}
+
+              {member ? null : person.isMember ? (
                 <SectionCard title="Member">
                   <p className="text-sm text-(--pn-fg-muted)">
                     Current member. The number, fee and Microsoft 365 account are in the member register.
@@ -774,16 +762,8 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                       <Row
                         lead={<RowIcon icon={Camera} />}
                         title="Photo and video"
-                        meta={`${person.consents.photo.status === "granted" ? "Granted" : person.consents.photo.status === "denied" ? "Denied" : "Revoked"} ${formatDay(person.consents.photo.on)} · revocable from My area`}
-                        end={
-                          <StatusBadge tone={person.consents.photo.status === "granted" ? "success" : "neutral"}>
-                            {person.consents.photo.status === "granted"
-                              ? "Granted"
-                              : person.consents.photo.status === "denied"
-                                ? "Denied"
-                                : "Revoked"}
-                          </StatusBadge>
-                        }
+                        meta={`${PHOTO_CONSENT[person.consents.photo.status].label} ${formatDay(person.consents.photo.on)} · revocable from My area`}
+                        end={<StateBadge state={PHOTO_CONSENT[person.consents.photo.status]} />}
                       />
                     ) : null}
                   </Rows>
@@ -797,15 +777,7 @@ export function PersonPage({ person }: { person: PersonRecord }) {
                   title="HR notes"
                   action={
                     canWrite ? (
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        className={buttonMotion}
-                        onClick={() => {
-                          setNotesKey((key) => key + 1)
-                          setNotesOpen(true)
-                        }}
-                      >
+                      <Button size="sm" variant="ghost" className={buttonMotion} onClick={notes.show}>
                         <NotebookPen data-icon="inline-start" />
                         {person.notes ? "Edit" : "Add note"}
                       </Button>
@@ -847,106 +819,254 @@ export function PersonPage({ person }: { person: PersonRecord }) {
 
       {canWrite ? (
         <>
-          <PersonDialog key={`edit-${editKey}`} open={editOpen} onOpenChange={setEditOpen} person={person} />
+          <PersonDialog key={`edit-${edit.key}`} open={edit.open} onOpenChange={edit.onOpenChange} person={person} />
           <NotesDialog
-            key={`notes-${notesKey}`}
-            open={notesOpen}
-            onOpenChange={setNotesOpen}
+            key={`notes-${notes.key}`}
+            open={notes.open}
+            onOpenChange={notes.onOpenChange}
             personId={person.id}
             notes={person.notes}
           />
-          <AccountActionDialog action={accountAction} open={accountOpen} onOpenChange={setAccountOpen} />
+          <AccountActionDialog
+            action={accountDialog.target}
+            open={accountDialog.open}
+            onOpenChange={accountDialog.onOpenChange}
+          />
           <LinkAccountDialog
-            key={`link-${linkKey}`}
-            open={linkOpen}
-            onOpenChange={setLinkOpen}
+            key={`link-${link.key}`}
+            open={link.open}
+            onOpenChange={link.onOpenChange}
             person={{ id: person.id, name, firstName: profile.firstName }}
           />
+          <AddToTeamDialog
+            key={`add-team-${addTeam.key}`}
+            open={addTeam.open}
+            onOpenChange={addTeam.onOpenChange}
+            teams={TEAM_IDS.filter((team) => !activeTeams(person).some((membership) => membership.team === team))}
+            person={{ id: person.id, name }}
+            canAppoint={canAppoint}
+          />
         </>
       ) : null}
-      {canWrite ? (
-        <AddToTeamDialog
-          key={`add-team-${teamKey}`}
-          open={addTeamOpen}
-          onOpenChange={setAddTeamOpen}
-          teams={TEAM_IDS.filter((team) => !activeTeams(person).some((membership) => membership.team === team))}
-          person={{ id: person.id, name }}
-          canAppoint={canAppoint}
-        />
-      ) : null}
-      {teamDialog ? (
-        teamDialog.kind === "fields" ? (
+      {teamDialog.target ? (
+        teamDialog.target.kind === "fields" ? (
           <EditTeamFieldsDialog
-            key={`fields-${teamKey}`}
-            open={teamOpen}
-            onOpenChange={setTeamOpen}
-            target={teamDialog.target}
+            key={`fields-${teamDialog.key}`}
+            open={teamDialog.open}
+            onOpenChange={teamDialog.onOpenChange}
+            target={teamDialog.target.target}
           />
         ) : (
           <EndTeamMembershipDialog
-            key={`end-team-${teamKey}`}
-            open={teamOpen}
-            onOpenChange={setTeamOpen}
-            target={teamDialog.target}
+            key={`end-team-${teamDialog.key}`}
+            open={teamDialog.open}
+            onOpenChange={teamDialog.onOpenChange}
+            target={teamDialog.target.target}
           />
         )
       ) : null}
-      {admin && adminDialog ? (
-        adminDialog === "end" ? (
-          <EndAdminDialog key={`end-${adminKey}`} open={adminOpen} onOpenChange={setAdminOpen} target={adminTarget} />
-        ) : adminDialog === "capoRef" ? (
+      {admin && adminDialog.target ? (
+        adminDialog.target === "end" ? (
+          <EndAdminDialog
+            key={`end-${adminDialog.key}`}
+            open={adminDialog.open}
+            onOpenChange={adminDialog.onOpenChange}
+            target={adminTarget}
+          />
+        ) : adminDialog.target === "capoRef" ? (
           <CapoOfReferenceDialog
-            key={`ref-${adminKey}`}
-            open={adminOpen}
-            onOpenChange={setAdminOpen}
+            key={`ref-${adminDialog.key}`}
+            open={adminDialog.open}
+            onOpenChange={adminDialog.onOpenChange}
             target={adminTarget}
             current={admin.capoOfReference?.id ?? null}
           />
-        ) : adminDialog === "capoScope" ? (
+        ) : adminDialog.target === "capoScope" ? (
           <CapoScopeDialog
-            key={`scope-${adminKey}`}
-            open={adminOpen}
-            onOpenChange={setAdminOpen}
+            key={`scope-${adminDialog.key}`}
+            open={adminDialog.open}
+            onOpenChange={adminDialog.onOpenChange}
             target={adminTarget}
             scope={admin.capoScope}
           />
         ) : (
           <EndCapoDialog
-            key={`end-capo-${adminKey}`}
-            open={adminOpen}
-            onOpenChange={setAdminOpen}
+            key={`end-capo-${adminDialog.key}`}
+            open={adminDialog.open}
+            onOpenChange={adminDialog.onOpenChange}
             target={adminTarget}
             scope={admin.capoScope ?? ""}
           />
         )
       ) : null}
-      {canWriteMembers && member && memberDialog ? (
-        memberDialog === "status" ? (
+      {canWriteMembers && member && memberDialog.target ? (
+        memberDialog.target === "status" ? (
           <MemberStatusDialog
-            key={`status-${memberKey}`}
-            open={memberOpen}
-            onOpenChange={setMemberOpen}
+            key={`status-${memberDialog.key}`}
+            open={memberDialog.open}
+            onOpenChange={memberDialog.onOpenChange}
             member={{ personId: person.id, name, ...member }}
           />
         ) : (
           <MemberNumberDialog
-            key={`number-${memberKey}`}
-            open={memberOpen}
-            onOpenChange={setMemberOpen}
+            key={`number-${memberDialog.key}`}
+            open={memberDialog.open}
+            onOpenChange={memberDialog.onOpenChange}
             member={{ personId: person.id, name, ...member }}
           />
         )
       ) : null}
-      {canRead && answersYear ? (
+      {canFees && feeTarget && feeDialog.target ? (
+        feeDialog.target === "review" ? (
+          <ReviewReceiptDialog
+            key={`review-${feeDialog.key}`}
+            open={feeDialog.open}
+            onOpenChange={feeDialog.onOpenChange}
+            person={feeTarget}
+          />
+        ) : (
+          <MarkPaidDialog
+            key={`paid-${feeDialog.key}`}
+            open={feeDialog.open}
+            onOpenChange={feeDialog.onOpenChange}
+            person={feeTarget}
+          />
+        )
+      ) : null}
+      {canRead && answers.target ? (
         <CensusAnswersDialog
-          key={answersYear}
-          open={answersOpen}
-          onOpenChange={setAnswersOpen}
+          key={`answers-${answers.key}`}
+          open={answers.open}
+          onOpenChange={answers.onOpenChange}
           personId={person.id}
           name={name}
-          year={answersYear}
+          year={answers.target}
         />
       ) : null}
     </>
   )
 }
+
+/** The current fee year, what to do about it, and every receipt ever issued (voided ones too). */
+function FeesCard({
+  fees,
+  canFees,
+  onReview,
+  onMarkPaid,
+  onRemind,
+  downloading,
+  onDownload,
+}: {
+  fees: NonNullable<PersonRecord["fees"]>
+  canFees: boolean
+  onReview: () => void
+  onMarkPaid: () => void
+  onRemind: () => void
+  /** The receipt being downloaded. */
+  downloading: string | null
+  onDownload: (receipt: NonNullable<PersonRecord["fees"]>["receipts"][number]) => void
+}) {
+  const fee = fees.current
+  const owing = fee?.status === "due" || fee?.status === "unpaid"
+  const items: KeyValueItem[] = fee
+    ? [
+        { key: `Fee ${fee.year}`, value: <StateBadge state={FEE_STATUS[fee.status]} /> },
+        { key: "Amount", value: <span className="tabular-nums">{formatCents(fee.amountCents)}</span> },
+        ...(fee.status === "paid" && fee.payment
+          ? [
+              {
+                key: "Paid on",
+                value: `${formatDay(fee.payment.paidOn)} · ${PAYMENT_METHOD[fee.payment.method]}${fee.payment.amountCents !== fee.amountCents ? ` · ${formatCents(fee.payment.amountCents)}` : ""}`,
+              },
+            ]
+          : [{ key: "Due by", value: formatDay(fee.dueOn) }]),
+        ...(fee.upload
+          ? [
+              {
+                key: "Transfer receipt",
+                value: `${fee.upload.fileName} · uploaded ${formatDateTime(new Date(fee.upload.uploadedAt))}`,
+              },
+            ]
+          : []),
+        ...(fee.rejection && owing
+          ? [
+              {
+                key: "Rejected",
+                value: `${formatDay(fee.rejection.at.slice(0, 10))} by ${fee.rejection.by}: “${fee.rejection.reason}”`,
+              },
+            ]
+          : []),
+        ...(owing
+          ? [{ key: "Last reminder", value: fee.lastReminder ? formatDateTime(new Date(fee.lastReminder)) : null }]
+          : []),
+      ]
+    : []
+  return (
+    <SectionCard
+      title="Fees and receipts"
+      padding="flush"
+      action={
+        canFees && fee?.status === "receipt" ? (
+          <Button size="sm" variant="outline" className={buttonMotion} onClick={onReview}>
+            <FileSearch data-icon="inline-start" />
+            Review receipt
+          </Button>
+        ) : canFees && owing ? (
+          <span className="flex items-center gap-1">
+            <IconButton label="Send reminder" icon={Bell} onClick={onRemind} />
+            <Button size="sm" variant="outline" className={buttonMotion} onClick={onMarkPaid}>
+              <Banknote data-icon="inline-start" />
+              Mark as paid
+            </Button>
+          </span>
+        ) : undefined
+      }
+    >
+      {fee ? (
+        <div className="border-b border-(--pn-line) px-4 py-3">
+          <KeyValueList items={items} />
+        </div>
+      ) : null}
+      <Rows>
+        <SubHeading>Receipts</SubHeading>
+        {fees.receipts.length === 0 ? (
+          <li className="px-4 pb-3 text-[13px] text-(--pn-fg-muted)">
+            None yet. A receipt is issued when the fee is paid.
+          </li>
+        ) : null}
+        {fees.receipts.map((receipt) => (
+          <Row
+            key={receipt.id}
+            lead={<RowIcon icon={FileText} />}
+            title={
+              <>
+                <span className={receipt.status === "voided" ? "font-mono line-through" : "font-mono"}>
+                  {receipt.number}
+                </span>
+                <StateBadge state={RECEIPT_STATUS[receipt.status]} />
+              </>
+            }
+            meta={
+              receipt.voided
+                ? `Voided ${formatDay(receipt.voided.on)}: ${receipt.voided.reason}`
+                : receipt.status === "sent" && receipt.sentAt
+                  ? `Fee ${receipt.year} · sent ${formatDay(receipt.sentAt.slice(0, 10))}`
+                  : receipt.status === "failed"
+                    ? `Fee ${receipt.year} · ${receipt.failure ?? "the email failed"}`
+                    : `Fee ${receipt.year} · issued ${formatDay(receipt.issuedOn)}`
+            }
+            end={
+              <IconButton
+                label="Download PDF"
+                ariaLabel={`Download ${receipt.number}`}
+                icon={FileDown}
+                pending={downloading === receipt.id}
+                onClick={() => onDownload(receipt)}
+              />
+            }
+          />
+        ))}
+      </Rows>
+    </SectionCard>
+  )
+}
diff --git a/src/features/people/receipt-dialogs.tsx b/src/features/people/receipt-dialogs.tsx
new file mode 100644
index 0000000..de0aced
--- /dev/null
+++ b/src/features/people/receipt-dialogs.tsx
@@ -0,0 +1,309 @@
+import { useServerFn } from "@tanstack/react-start"
+import { FileText, X } from "lucide-react"
+import { useId, useState } from "react"
+
+import {
+  fieldControl,
+  fieldHintId,
+  FilePickerButton,
+  FormDialog,
+  FormField,
+  Hint,
+  IconButton,
+  InlineAlert,
+  SelectField,
+  StatusBadge,
+  type StatusTone,
+} from "@/components/primitives"
+import { Textarea } from "@/components/ui/textarea"
+import { pluralize } from "@/lib/format"
+import { cn } from "@/lib/utils"
+
+import { type SignedFileOutcome, signedFileOutcome } from "./people-fees"
+import { voidReceipt } from "./people-fees.functions"
+import { currentYear, SIGNER_LABEL } from "./people-format"
+import { errorMessage, useRefreshAfter } from "./people-hooks"
+import { previewSignedReceipts, sendSignedReceipts } from "./people-receipts.functions"
+import type { Receipt, ReceiptsPage, SignedUpload } from "./people.contract"
+
+const OUTCOME = {
+  ready: { label: "Signed", tone: "success" },
+  notSigned: { label: "Not signed", tone: "danger" },
+  otherSigner: { label: "Needs another signer", tone: "warning" },
+  noReceipt: { label: "No receipt", tone: "neutral" },
+  notToSign: { label: "Already signed", tone: "neutral" },
+  duplicate: { label: "Duplicate", tone: "neutral" },
+} satisfies Record<SignedFileOutcome, { label: string; tone: StatusTone }>
+
+function outcomeNote(outcome: SignedFileOutcome, receipt: Receipt | null, page: ReceiptsPage) {
+  if (outcome === "notSigned") return "No digital signature found. Sign it with the CIE app and add it again."
+  if (outcome === "noReceipt") return "No receipt number in the name. Pick the receipt this file belongs to."
+  if (outcome === "duplicate") return "Another file is matched to the same receipt."
+  if (outcome === "notToSign") return "This receipt isn't waiting for a signature."
+  if (outcome === "otherSigner" && receipt) {
+    const officer = receipt.signer === "president" ? page.officers.president : page.officers.vicePresident
+    const own = receipt.person.id === page.officers.president?.id
+    const office = `the ${SIGNER_LABEL[receipt.signer]}`
+    return `${own ? "Your own receipt: " : ""}${officer ? `${officer.name}, ${office},` : office} signs it.`
+  }
+  return null
+}
+
+/**
+ * Upload signed receipts: the backend reads the files and matches each by the receipt number in its name; the
+ * signer checks the matches, corrects any by hand and sends the ones that are signed and theirs to sign.
+ */
+export function UploadSignedDialog({
+  open,
+  onOpenChange,
+  page,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  page: ReceiptsPage
+}) {
+  const preview = useServerFn(previewSignedReceipts)
+  const send = useServerFn(sendSignedReceipts)
+  const refresh = useRefreshAfter()
+  const inputId = useId()
+  const [upload, setUpload] = useState<SignedUpload | null>(null)
+  const [assigned, setAssigned] = useState<Record<string, string | null>>({})
+  const [reading, setReading] = useState(false)
+  const [readError, setReadError] = useState<string | null>(null)
+
+  const byId = new Map(page.receipts.map((receipt) => [receipt.id, receipt]))
+  const choices = page.receipts
+    .filter((receipt) => receipt.status === "toSign")
+    .map((receipt) => ({ value: receipt.id, label: `${receipt.number} · ${receipt.person.name}` }))
+
+  const rows = (upload?.files ?? []).map((file, index, files) => {
+    const receiptId = assigned[file.fileId] ?? null
+    const receipt = receiptId ? (byId.get(receiptId) ?? null) : null
+    const duplicate =
+      receiptId !== null && files.slice(0, index).some((other) => (assigned[other.fileId] ?? null) === receiptId)
+    const outcome = signedFileOutcome({
+      signed: file.signature.valid,
+      receipt,
+      viewerSigner: page.viewerSigner,
+      duplicate,
+    })
+    const options =
+      receipt && !choices.some((choice) => choice.value === receipt.id)
+        ? [{ value: receipt.id, label: `${receipt.number} · ${receipt.person.name}` }, ...choices]
+        : choices
+    return { file, receipt, outcome, options, matchedByHand: receiptId !== file.receiptId && receiptId !== null }
+  })
+  const ready = rows.filter((row) => row.outcome === "ready")
+  const tally = (outcome: SignedFileOutcome) => rows.filter((row) => row.outcome === outcome).length
+
+  async function read(files: File[]) {
+    if (files.length === 0) return
+    const form = new FormData()
+    for (const file of files) form.append("files", file)
+    setReading(true)
+    setReadError(null)
+    try {
+      const result = await preview({ data: form })
+      setUpload(result)
+      setAssigned(Object.fromEntries(result.files.map((file) => [file.fileId, file.receiptId])))
+    } catch (caught) {
+      console.error(caught)
+      setReadError(errorMessage(caught, "Couldn't read the files. Try again."))
+    } finally {
+      setReading(false)
+    }
+  }
+
+  function remove(fileId: string) {
+    if (!upload) return
+    const files = upload.files.filter((file) => file.fileId !== fileId)
+    setUpload(files.length ? { ...upload, files } : null)
+  }
+
+  async function submit() {
+    if (!upload || ready.length === 0) return
+    let result: { sent: number; failed: number }
+    try {
+      result = await send({
+        data: {
+          uploadId: upload.uploadId,
+          assignments: Object.fromEntries(ready.map((row) => [row.file.fileId, row.receipt?.id ?? ""])),
+        },
+      })
+    } catch (caught) {
+      console.error(caught)
+      throw new Error(errorMessage(caught, "Couldn't send the receipts. Try again."), { cause: caught })
+    }
+    if (result.failed === 0) await refresh(`${pluralize(result.sent, "receipt")} sent.`)
+    else
+      await refresh(
+        `${pluralize(result.sent, "receipt")} sent, but ${pluralize(result.failed, "email")} failed. Check Send failed.`,
+        "warning"
+      )
+    onOpenChange(false)
+  }
+
+  return (
+    <FormDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      size="lg"
+      title="Upload signed receipts"
+      description="Add the files you signed with the CIE app. Each is matched by the receipt number in its name; check the matches, then send."
+      noun="upload"
+      dirty={upload !== null}
+      submitLabel={`Send ${pluralize(ready.length, "receipt")}`}
+      canSubmit={ready.length > 0}
+      onSubmit={submit}
+      footerStart={
+        upload ? (
+          <span className="hidden text-xs text-(--pn-fg-muted) shell:inline">Files that aren't ready are skipped.</span>
+        ) : undefined
+      }
+      error={readError ?? undefined}
+    >
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-wrap items-center gap-3 rounded-(--pn-r-4) border border-dashed border-(--pn-line-strong) bg-(--pn-sunken) px-4 py-3.5">
+          <FilePickerButton
+            id={inputId}
+            multiple
+            accept=".pdf,.p7m,application/pdf,application/pkcs7-mime"
+            label={upload ? "Choose other files" : "Choose files"}
+            pending={reading}
+            describedBy={`${inputId}-hint`}
+            onFiles={(files) => void read(files)}
+          />
+          <span id={`${inputId}-hint`} className="text-xs text-(--pn-fg-muted)">
+            PDF or .p7m, up to 10 MB each. Choosing files again replaces the list.
+          </span>
+        </div>
+
+        {upload ? (
+          <>
+            <p className="flex flex-wrap items-center gap-2 text-[13px]" aria-live="polite">
+              <span className="font-medium tabular-nums">{pluralize(rows.length, "file")}</span>
+              {(["ready", "notSigned", "otherSigner", "noReceipt", "duplicate", "notToSign"] as const).map((outcome) =>
+                tally(outcome) ? (
+                  <StatusBadge key={outcome} tone={OUTCOME[outcome].tone}>
+                    {tally(outcome)} {OUTCOME[outcome].label.toLocaleLowerCase()}
+                  </StatusBadge>
+                ) : null
+              )}
+            </p>
+            <ul className="divide-y divide-(--pn-line) rounded-(--pn-r-4) border border-(--pn-line)">
+              {rows.map((row) => {
+                const note = outcomeNote(row.outcome, row.receipt, page)
+                const selectId = `signed-${row.file.fileId}`
+                return (
+                  <li key={row.file.fileId} className="flex flex-col gap-2.5 px-3 py-3 shell:px-4">
+                    <div className="flex min-w-0 items-center gap-2">
+                      <FileText aria-hidden strokeWidth={1.75} className="size-4 shrink-0 text-(--pn-fg-muted)" />
+                      <Hint overflowOnly label={row.file.fileName}>
+                        <span className="min-w-0 flex-1 truncate font-mono text-[12px]">{row.file.fileName}</span>
+                      </Hint>
+                      <IconButton
+                        label="Remove file"
+                        ariaLabel={`Remove ${row.file.fileName}`}
+                        icon={X}
+                        onClick={() => remove(row.file.fileId)}
+                      />
+                    </div>
+                    <div className="grid grid-cols-1 items-center gap-2 shell:grid-cols-[minmax(0,1fr)_auto]">
+                      <div className="flex min-w-0 flex-col gap-1">
+                        <label htmlFor={selectId} className="sr-only">
+                          Receipt for {row.file.fileName}
+                        </label>
+                        <SelectField
+                          id={selectId}
+                          value={row.receipt?.id ?? null}
+                          options={row.options}
+                          placeholder="Choose receipt"
+                          onChange={(receiptId) =>
+                            setAssigned((current) => ({ ...current, [row.file.fileId]: receiptId }))
+                          }
+                        />
+                        {row.matchedByHand ? (
+                          <span className="text-xs text-(--pn-fg-muted)">Matched by hand</span>
+                        ) : null}
+                      </div>
+                      <span className="flex flex-col items-start gap-1 shell:items-end">
+                        <StatusBadge tone={OUTCOME[row.outcome].tone}>{OUTCOME[row.outcome].label}</StatusBadge>
+                      </span>
+                    </div>
+                    {note ? <p className="text-xs text-(--pn-fg-muted)">{note}</p> : null}
+                  </li>
+                )
+              })}
+            </ul>
+          </>
+        ) : (
+          <InlineAlert tone="info">
+            Download the receipts to sign, sign each PDF with the CIE app, then add the signed files here. Keep the
+            receipt number in the file names, as in <span className="font-mono">Ricevuta_2026-042_firmata.pdf</span>.
+          </InlineAlert>
+        )}
+      </div>
+    </FormDialog>
+  )
+}
+
+/** Voids a receipt with a reason. Receipts are never deleted; this year's fee goes back to Due. */
+export function VoidReceiptDialog({
+  open,
+  onOpenChange,
+  receipt,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  receipt: Receipt
+}) {
+  const save = useServerFn(voidReceipt)
+  const refresh = useRefreshAfter()
+  const [reason, setReason] = useState("")
+  const [submitted, setSubmitted] = useState(false)
+  const error = submitted && !reason.trim() ? "Say why the receipt is voided." : undefined
+
+  async function submit() {
+    setSubmitted(true)
+    if (!reason.trim()) return
+    try {
+      await save({ data: { receiptId: receipt.id, reason: reason.trim() } })
+    } catch (caught) {
+      console.error(caught)
+      throw new Error(errorMessage(caught, "Couldn't void the receipt. Try again."), { cause: caught })
+    }
+    await refresh(`Receipt ${receipt.number} voided.`)
+    onOpenChange(false)
+  }
+
+  return (
+    <FormDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={`Void receipt ${receipt.number}?`}
+      description={`${receipt.person.name}'s receipt stays in the list with its number, marked Voided.${receipt.year === currentYear() ? " The fee goes back to Due, so it can be marked as paid again with the right details." : ""}`}
+      noun="void"
+      dirty={reason.trim() !== ""}
+      submitLabel="Void receipt"
+      submitTone="danger"
+      onSubmit={submit}
+    >
+      <FormField
+        label="Reason"
+        htmlFor="void-reason"
+        hint="Shown on the receipt and in the record's activity."
+        error={error}
+      >
+        <Textarea
+          id="void-reason"
+          value={reason}
+          onChange={(event) => setReason(event.target.value)}
+          maxLength={500}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={fieldHintId("void-reason")}
+          className={cn(fieldControl, "min-h-20")}
+        />
+      </FormField>
+    </FormDialog>
+  )
+}
diff --git a/src/features/people/receipt-files.server.ts b/src/features/people/receipt-files.server.ts
new file mode 100644
index 0000000..49fb2e4
--- /dev/null
+++ b/src/features/people/receipt-files.server.ts
@@ -0,0 +1,287 @@
+import { amountInWords, receiptFileName } from "./people-fees"
+import type { Receipt } from "./people.contract"
+
+/**
+ * Agent mode's files: the receipt PDF the backend generates, a sample transfer receipt and the ZIP of receipts to
+ * sign. The backend owns the real ones; these follow the same template (docs/people/contract.md, "Receipt PDF") so the
+ * downloads work without it. Plain PDF 1.4 with the standard Helvetica fonts, and a stored (uncompressed) ZIP.
+ */
+
+/** The association's details printed on receipts; placeholders until the backend has the real ones. */
+export const ASSOCIATION = {
+  name: "PoliNetwork",
+  legalForm: "[Forma giuridica dell'associazione]",
+  address: "[Indirizzo della sede legale], Milano",
+  taxCode: "[codice fiscale]",
+} as const
+
+const MONTHS = [
+  "gennaio",
+  "febbraio",
+  "marzo",
+  "aprile",
+  "maggio",
+  "giugno",
+  "luglio",
+  "agosto",
+  "settembre",
+  "ottobre",
+  "novembre",
+  "dicembre",
+]
+
+/** "14 ottobre 2026" for `2026-10-14`. */
+export function italianDate(date: string) {
+  const [year, month, day] = date.split("-").map(Number)
+  return `${day} ${MONTHS[(month ?? 1) - 1]} ${year}`
+}
+
+/** "€ 10,00", as Italian documents write amounts. */
+function italianAmount(cents: number) {
+  return `€ ${Math.floor(cents / 100).toLocaleString("it-IT")},${String(cents % 100).padStart(2, "0")}`
+}
+
+// WinAnsi bytes for the few characters outside Latin-1 that Italian text uses.
+const WIN_ANSI = new Map([
+  ["€", 0x80],
+  ["‘", 0x91],
+  ["’", 0x92],
+  ["“", 0x93],
+  ["”", 0x94],
+  ["–", 0x96],
+  ["—", 0x97],
+])
+
+/** A PDF string literal in WinAnsi encoding. */
+function pdfText(text: string) {
+  let out = "("
+  for (const char of text) {
+    const code = WIN_ANSI.get(char) ?? char.codePointAt(0) ?? 63
+    if (char === "(" || char === ")" || char === "\\") out += `\\${char}`
+    else if (code < 128) out += char
+    else if (code < 256) out += `\\${code.toString(8).padStart(3, "0")}`
+    else out += "?"
+  }
+  return `${out})`
+}
+
+type Op =
+  | {
+      kind: "text"
+      x: number
+      y: number
+      size: number
+      text: string
+      bold?: boolean
+      grey?: boolean
+      white?: boolean
+      mono?: boolean
+    }
+  | { kind: "line"; x1: number; y1: number; x2: number; y2: number; width?: number }
+  | { kind: "rect"; x: number; y: number; w: number; h: number; fill?: boolean }
+
+/** One A4 page (595 × 842 pt) drawn from text, lines and rectangles. */
+function pdfDocument(ops: Op[], title: string) {
+  let stream = ""
+  for (const op of ops) {
+    if (op.kind === "text") {
+      const font = op.mono ? "/F3" : op.bold ? "/F2" : "/F1"
+      const colour = op.white ? "1 1 1 rg" : op.grey ? "0.35 0.38 0.42 rg" : "0.07 0.11 0.15 rg"
+      stream += `BT ${colour} ${font} ${op.size} Tf ${op.x} ${op.y} Td ${pdfText(op.text)} Tj ET\n`
+    } else if (op.kind === "line") {
+      stream += `0.8 0.84 0.86 RG ${op.width ?? 0.75} w ${op.x1} ${op.y1} m ${op.x2} ${op.y2} l S\n`
+    } else {
+      stream += op.fill
+        ? `0.07 0.34 0.68 rg ${op.x} ${op.y} ${op.w} ${op.h} re f\n`
+        : `0.8 0.84 0.86 RG 0.75 w ${op.x} ${op.y} ${op.w} ${op.h} re S\n`
+    }
+  }
+  const objects = [
+    "<< /Type /Catalog /Pages 2 0 R >>",
+    "<< /Type /Pages /Kids [3 0 R] /Count 1 >>",
+    "<< /Type /Page /Parent 2 0 R /MediaBox [0 0 595 842] /Resources << /Font << /F1 4 0 R /F2 5 0 R /F3 6 0 R >> >> /Contents 7 0 R >>",
+    "<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica /Encoding /WinAnsiEncoding >>",
+    "<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding >>",
+    "<< /Type /Font /Subtype /Type1 /BaseFont /Courier /Encoding /WinAnsiEncoding >>",
+    `<< /Length ${stream.length} >>\nstream\n${stream}endstream`,
+    `<< /Title ${pdfText(title)} /Producer (PoliNetwork Admin, agent mode) >>`,
+  ]
+  // Every character above is one byte (latin1), so string lengths are byte offsets.
+  let out = "%PDF-1.4\n%âãÏÓ\n"
+  const offsets: number[] = []
+  objects.forEach((body, index) => {
+    offsets.push(out.length)
+    out += `${index + 1} 0 obj\n${body}\nendobj\n`
+  })
+  const xref = out.length
+  out += `xref\n0 ${objects.length + 1}\n0000000000 65535 f \n`
+  for (const offset of offsets) out += `${String(offset).padStart(10, "0")} 00000 n \n`
+  out += `trailer\n<< /Size ${objects.length + 1} /Root 1 0 R /Info ${objects.length} 0 R >>\nstartxref\n${xref}\n%%EOF\n`
+  return Buffer.from(out, "latin1")
+}
+
+/** Rough Helvetica width, enough to right-align short labels. */
+function widthOf(text: string, size: number, mono = false) {
+  return text.length * size * (mono ? 0.6 : 0.52)
+}
+
+/**
+ * The receipt as the backend generates it, ready for the President's signature: association, number and date, the
+ * member, the amount in figures and words, the reason, how and when it was paid, and the space for "Il Presidente".
+ */
+export function receiptPdf(receipt: Receipt, officers: { president: string; vicePresident: string }) {
+  const left = 54
+  const right = 541
+  const ops: Op[] = []
+  const text = (
+    x: number,
+    y: number,
+    size: number,
+    value: string,
+    style: Partial<Extract<Op, { kind: "text" }>> = {}
+  ) => ops.push({ kind: "text", x, y, size, text: value, ...style })
+  const row = (y: number, label: string, value: string, mono = false) => {
+    text(left, y, 11, label, { grey: true })
+    text(left + 140, y, 11, value, { mono })
+  }
+
+  ops.push({ kind: "rect", x: left, y: 752, w: 34, h: 34, fill: true })
+  text(left + 8, 765, 11, "PN", { bold: true, white: true })
+  text(left + 46, 776, 13, ASSOCIATION.name, { bold: true })
+  text(left + 46, 762, 9, ASSOCIATION.legalForm, { grey: true })
+  text(left + 46, 750, 9, ASSOCIATION.address, { grey: true })
+  text(left + 46, 738, 9, `C.F. ${ASSOCIATION.taxCode}`, { grey: true })
+  text(right - widthOf("Ricevuta n.", 9), 776, 9, "Ricevuta n.", { grey: true })
+  text(right - widthOf(receipt.number, 18, true), 756, 18, receipt.number, { mono: true })
+  const place = `Milano, ${italianDate(receipt.issuedOn)}`
+  text(right - widthOf(place, 9), 740, 9, place, { grey: true })
+  ops.push({ kind: "line", x1: left, y1: 722, x2: right, y2: 722 })
+
+  text(left, 690, 17, "Ricevuta di pagamento della quota associativa", { bold: true })
+
+  text(left, 656, 9, "Ricevuto da", { bold: true, grey: true })
+  row(636, "Nome e cognome", receipt.person.name)
+  row(618, "Codice fiscale", "[codice fiscale del socio]", true)
+  row(600, "Numero socio", receipt.memberNumber, true)
+
+  ops.push({ kind: "rect", x: left, y: 530, w: right - left, h: 50 })
+  text(left + 16, 560, 9, "La somma di", { grey: true })
+  text(left + 16, 543, 11, `${amountInWords(receipt.amountCents)} euro`)
+  const amount = italianAmount(receipt.amountCents)
+  text(right - 16 - widthOf(amount, 20), 547, 20, amount, { bold: true })
+
+  text(left, 500, 9, "A titolo di", { bold: true, grey: true })
+  row(480, "Causale", `Quota associativa per l'anno sociale ${receipt.year}`)
+  row(462, "Metodo di pagamento", receipt.method === "transfer" ? "Bonifico bancario" : "Contanti")
+  row(
+    444,
+    receipt.method === "transfer" ? "Data del bonifico" : "Data del pagamento",
+    italianDate(receipt.transferDate ?? receipt.paidOn)
+  )
+  text(left, 414, 9, "[Nota fiscale, se prevista: regime della quota ed eventuale imposta di bollo.]", { grey: true })
+
+  const signer = receipt.signer === "president" ? "Il Presidente" : "Il Vicepresidente"
+  const signerName = receipt.signer === "president" ? officers.president : officers.vicePresident
+  text(right - 100 - widthOf(signer, 11) / 2, 220, 11, signer)
+  ops.push({ kind: "line", x1: right - 200, y1: 160, x2: right, y2: 160 })
+  text(right - 100 - widthOf(signerName, 9) / 2, 146, 9, signerName, { grey: true })
+
+  ops.push({ kind: "line", x1: left, y1: 76, x2: right, y2: 76 })
+  text(left, 60, 8, `${ASSOCIATION.name} · ${ASSOCIATION.address} · C.F. ${ASSOCIATION.taxCode}`, { grey: true })
+  const footer = `Ricevuta ${receipt.number} · pagina 1 di 1`
+  text(right - widthOf(footer, 8, true), 60, 8, footer, { mono: true, grey: true })
+  return pdfDocument(ops, `Ricevuta ${receipt.number}`)
+}
+
+/** A stand-in for a member's uploaded bank receipt, for the review preview in agent mode. */
+export function sampleTransferPdf(input: { name: string; memberNumber: string; date: string; amountCents: number }) {
+  const left = 72
+  const ops: Op[] = []
+  const line = (y: number, label: string, value: string) => {
+    ops.push({ kind: "text", x: left, y, size: 11, text: label, grey: true })
+    ops.push({ kind: "text", x: left + 150, y, size: 11, text: value, mono: true })
+  }
+  ops.push({ kind: "text", x: left, y: 760, size: 16, text: "Bonifico SEPA eseguito", bold: true })
+  ops.push({ kind: "text", x: left, y: 740, size: 9, text: "Sample file in agent mode", grey: true })
+  ops.push({ kind: "line", x1: left, y1: 726, x2: 523, y2: 726 })
+  line(700, "Ordinante", input.name)
+  line(680, "Beneficiario", "PoliNetwork")
+  line(660, "IBAN beneficiario", "[IBAN]")
+  line(640, "Importo", `${(input.amountCents / 100).toFixed(2).replace(".", ",")} EUR`)
+  line(620, "Data esecuzione", input.date.split("-").reverse().join("/"))
+  line(600, "Causale", `Quota 2026/27 ${input.memberNumber} ${input.name}`)
+  line(580, "TRN", "[TRN]")
+  return pdfDocument(ops, "Bonifico")
+}
+
+const CRC_TABLE = Array.from({ length: 256 }, (_, index) => {
+  let value = index
+  for (let bit = 0; bit < 8; bit++) value = value & 1 ? 0xedb88320 ^ (value >>> 1) : value >>> 1
+  return value >>> 0
+})
+
+function crc32(bytes: Uint8Array) {
+  let crc = 0xffffffff
+  for (const byte of bytes) crc = (CRC_TABLE[(crc ^ byte) & 0xff] ?? 0) ^ (crc >>> 8)
+  return (crc ^ 0xffffffff) >>> 0
+}
+
+/** 1 January 1980, the earliest date ZIP can hold: the files have no meaningful timestamp. */
+const DOS_DATE = (1 << 5) | 1
+
+/** A ZIP of the given files, stored without compression (PDFs barely compress). */
+export function zipFiles(files: { name: string; bytes: Uint8Array }[]) {
+  const parts: Buffer[] = []
+  const central: Buffer[] = []
+  let offset = 0
+  for (const file of files) {
+    const name = Buffer.from(file.name, "utf8")
+    const crc = crc32(file.bytes)
+    const local = Buffer.alloc(30)
+    local.writeUInt32LE(0x04034b50, 0)
+    local.writeUInt16LE(20, 4)
+    local.writeUInt16LE(0x0800, 6) // UTF-8 names
+    local.writeUInt16LE(DOS_DATE, 12)
+    local.writeUInt32LE(crc, 14)
+    local.writeUInt32LE(file.bytes.length, 18)
+    local.writeUInt32LE(file.bytes.length, 22)
+    local.writeUInt16LE(name.length, 26)
+    parts.push(local, name, Buffer.from(file.bytes))
+    const entry = Buffer.alloc(46)
+    entry.writeUInt32LE(0x02014b50, 0)
+    entry.writeUInt16LE(20, 4)
+    entry.writeUInt16LE(20, 6)
+    entry.writeUInt16LE(0x0800, 8)
+    entry.writeUInt16LE(DOS_DATE, 14)
+    entry.writeUInt32LE(crc, 16)
+    entry.writeUInt32LE(file.bytes.length, 20)
+    entry.writeUInt32LE(file.bytes.length, 24)
+    entry.writeUInt16LE(name.length, 28)
+    entry.writeUInt32LE(offset, 42)
+    central.push(entry, name)
+    offset += local.length + name.length + file.bytes.length
+  }
+  const directory = Buffer.concat(central)
+  const end = Buffer.alloc(22)
+  end.writeUInt32LE(0x06054b50, 0)
+  end.writeUInt16LE(files.length, 8)
+  end.writeUInt16LE(files.length, 10)
+  end.writeUInt32LE(directory.length, 12)
+  end.writeUInt32LE(offset, 16)
+  return Buffer.concat([...parts, directory, end])
+}
+
+/** The file name of a receipt download: the signed copy once there is one. */
+export function downloadName(receipt: Receipt) {
+  return receiptFileName(receipt.number, receipt.status !== "toSign")
+}
+
+/**
+ * Whether a file carries a digital signature, as far as agent mode can tell: a CAdES `.p7m` envelope, a PDF with a
+ * signature dictionary (`/ByteRange`, what the CIE app's PAdES signature adds), or a name that says it was signed.
+ * The backend verifies the signature and its certificate for real.
+ */
+export function looksSigned(fileName: string, bytes: Uint8Array) {
+  if (/\.p7m$/i.test(fileName) || /(signed|firmat[ao])/i.test(fileName)) return true
+  return Buffer.from(bytes).includes("/ByteRange")
+}
diff --git a/src/features/people/receipts-page.tsx b/src/features/people/receipts-page.tsx
new file mode 100644
index 0000000..6c27344
--- /dev/null
+++ b/src/features/people/receipts-page.tsx
@@ -0,0 +1,445 @@
+import { useRouter } from "@tanstack/react-router"
+import { useServerFn } from "@tanstack/react-start"
+import { Ban, FileArchive, FileDown, Receipt as ReceiptIcon, RotateCw, Search, Upload } from "lucide-react"
+import { useDeferredValue, useState } from "react"
+
+import {
+  buttonMotion,
+  Chip,
+  DataTable,
+  type DataTableColumn,
+  EmptyState,
+  FilterMenu,
+  IconButton,
+  InlineAlert,
+  LoadingButton,
+  RowActions,
+  SegmentedControl,
+  useOpenGeneration,
+} from "@/components/primitives"
+import { appToast, Count, PageBar, PageContent, Toolbar, useCan } from "@/components/shell"
+import { Button } from "@/components/ui/button"
+import { SignWithCie } from "@/features/esign/sign-with-cie"
+import { pluralize } from "@/lib/format"
+import { cn } from "@/lib/utils"
+
+import { formatCents } from "./people-fees"
+import { retryReceipt } from "./people-fees.functions"
+import { formatDay, RECEIPT_STATUS, SIGNER_LABEL } from "./people-format"
+import { errorMessage, useFileDownload, useRefreshAfter } from "./people-hooks"
+import { downloadReceipt, downloadReceiptsToSign, prepareReceiptSignatures } from "./people-receipts.functions"
+import { ActionMenu, MonoChip, PersonCell, StateBadge } from "./people-ui"
+import {
+  RECEIPT_SIGN_BATCH,
+  RECEIPT_STATUSES,
+  type Receipt,
+  type ReceiptsPage as ReceiptsData,
+  type ReceiptStatus,
+} from "./people.contract"
+import { UploadSignedDialog, VoidReceiptDialog } from "./receipt-dialogs"
+
+type Scope = "all" | ReceiptStatus
+
+function matchesQuery(receipt: Receipt, query: string) {
+  if (!query) return true
+  return [receipt.number, receipt.person.name, receipt.memberNumber].some((value) =>
+    value.toLocaleLowerCase().includes(query)
+  )
+}
+
+/** The receipts waiting for the other officer, after the viewer's own: the President's own goes to the Vice-president. */
+function othersNote(others: readonly Receipt[]) {
+  const [first] = others
+  if (!first) return ""
+  if (others.length > 1) return ` ${others.length} receipts are for the other officer to sign.`
+  return ` Receipt ${first.number} is for the ${SIGNER_LABEL[first.signer]} to sign.`
+}
+
+/** People › Receipts: the fee year's receipts as a queue, To sign → Signed → Sent, with Send failed and Voided. */
+export function ReceiptsPage({ page, onYear }: { page: ReceiptsData; onYear: (year: string) => void }) {
+  const canSign = useCan("people:receipts:sign") && page.viewerSigner !== null
+  const canEsign = useCan("esign:sign")
+  const canWebSign = canSign && canEsign
+  const router = useRouter()
+  const prepareSignatures = useServerFn(prepareReceiptSignatures)
+  const canFees = useCan("people:fees:write")
+  const download = useServerFn(downloadReceipt)
+  const downloadToSign = useServerFn(downloadReceiptsToSign)
+  const retry = useServerFn(retryReceipt)
+  const refresh = useRefreshAfter()
+
+  const mine = page.receipts.filter((receipt) => receipt.status === "toSign" && receipt.signer === page.viewerSigner)
+  const batch = mine.slice(0, RECEIPT_SIGN_BATCH)
+  // Receipts waiting for the other officer: the President's own, for the Vice-president.
+  const others = page.receipts.filter((receipt) => receipt.status === "toSign" && receipt.signer !== page.viewerSigner)
+  const failed = page.receipts.filter((receipt) => receipt.status === "failed")
+  const byStatus = (status: ReceiptStatus) => page.receipts.filter((receipt) => receipt.status === status).length
+
+  const [scope, setScope] = useState<Scope>(canSign && mine.length > 0 ? "toSign" : "all")
+  const [query, setQuery] = useState("")
+  const deferredQuery = useDeferredValue(query.trim().toLocaleLowerCase())
+  const [pageNumber, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(20)
+  const [uploadOpen, setUploadOpen] = useState(false)
+  const uploadKey = useOpenGeneration(uploadOpen)
+  const [voiding, setVoiding] = useState<Receipt | null>(null)
+  const [voidOpen, setVoidOpen] = useState(false)
+  const voidKey = useOpenGeneration(voidOpen)
+  const { busy: downloading, download: downloadFile } = useFileDownload()
+  const [retrying, setRetrying] = useState<string | null>(null)
+
+  const inScope = scope === "all" ? page.receipts : page.receipts.filter((receipt) => receipt.status === scope)
+  const filtered = inScope.filter((receipt) => matchesQuery(receipt, deferredQuery))
+  const rows = filtered.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)
+  const narrowed = deferredQuery !== ""
+
+  const signerName = (receipt: Receipt) => {
+    if (receipt.signer === page.viewerSigner) return "You"
+    const officer = receipt.signer === "president" ? page.officers.president : page.officers.vicePresident
+    return officer?.name ?? SIGNER_LABEL[receipt.signer]
+  }
+
+  async function prepareSigning() {
+    const prepared = await prepareSignatures({ data: { receiptIds: batch.map((receipt) => receipt.id) } })
+    // The requests are already saved; a reload failure must not ask the officer to create them again.
+    try {
+      await router.invalidate({ sync: true })
+    } catch (caught) {
+      console.error(caught)
+      appToast.warning("Signing requests prepared, but the page couldn't refresh.")
+    }
+    return prepared.map(({ requestId, title }) => ({ requestId, title }))
+  }
+
+  async function saveToSign() {
+    const saved = await downloadFile("toSign", downloadToSign, "Couldn't download the receipts to sign.")
+    if (saved)
+      appToast.success(`${pluralize(mine.length, "receipt")} downloaded. Sign them, then upload the signed files.`)
+  }
+
+  async function resend(receipt: Receipt) {
+    setRetrying(receipt.id)
+    try {
+      await retry({ data: { receiptId: receipt.id } })
+    } catch (caught) {
+      console.error(caught)
+      appToast.error(errorMessage(caught, `Couldn't send receipt ${receipt.number}.`))
+      return
+    } finally {
+      setRetrying(null)
+    }
+    await refresh(`Receipt ${receipt.number} sent to ${receipt.person.name}.`)
+  }
+
+  function openVoid(receipt: Receipt) {
+    setVoiding(receipt)
+    setVoidOpen(true)
+  }
+
+  const columns: DataTableColumn<Receipt>[] = [
+    {
+      id: "number",
+      label: "Receipt",
+      width: 116,
+      mobile: "hidden",
+      cell: (receipt) => (
+        <span className={cn(receipt.status === "voided" && "line-through")}>
+          <MonoChip>{receipt.number}</MonoChip>
+        </span>
+      ),
+    },
+    {
+      id: "member",
+      label: "Member",
+      fill: true,
+      minWidth: 200,
+      mobile: "main",
+      cell: (receipt) => (
+        <>
+          <PersonCell name={receipt.person.name} muted={receipt.status === "voided"} />
+          {/* Mobile cards: number, status, amount and signer on one labelled line. */}
+          <span className="mt-2 hidden flex-wrap items-center gap-1.5 pl-11 text-xs text-(--pn-fg-muted) max-shell:flex">
+            <MonoChip>{receipt.number}</MonoChip>
+            <StateBadge state={RECEIPT_STATUS[receipt.status]} />
+            <span className="tabular-nums">{formatCents(receipt.amountCents)}</span>
+            {receipt.status === "toSign" && receipt.signer !== page.viewerSigner ? (
+              <span>
+                Signed by {signerName(receipt)} <Chip>{SIGNER_LABEL[receipt.signer]}</Chip>
+              </span>
+            ) : null}
+          </span>
+        </>
+      ),
+    },
+    {
+      id: "amount",
+      label: "Amount",
+      width: 96,
+      align: "end",
+      priority: 3,
+      mobile: "hidden",
+      cell: (receipt) => <span className="tabular-nums">{formatCents(receipt.amountCents)}</span>,
+    },
+    {
+      id: "issued",
+      label: "Issued on",
+      width: 124,
+      priority: 2,
+      mobile: "hidden",
+      cell: (receipt) => <span className="whitespace-nowrap tabular-nums">{formatDay(receipt.issuedOn)}</span>,
+    },
+    {
+      id: "signer",
+      label: "Signer",
+      width: 248,
+      priority: 4,
+      mobile: "hidden",
+      cell: (receipt) =>
+        receipt.status === "voided" ? null : (
+          <span className="flex min-w-0 items-center gap-1.5">
+            <span className="truncate">{receipt.signedBy ?? signerName(receipt)}</span>
+            {receipt.signer === "vicePresident" ? <Chip>{SIGNER_LABEL.vicePresident}</Chip> : null}
+          </span>
+        ),
+    },
+    {
+      id: "status",
+      label: "Status",
+      width: 136,
+      mobile: "hidden",
+      cell: (receipt) => <StateBadge state={RECEIPT_STATUS[receipt.status]} />,
+    },
+  ]
+
+  const scopeEmpty = {
+    all: {
+      title: "No receipts yet",
+      text: "Receipts appear here when an admin approves a transfer receipt or marks a fee as paid.",
+    },
+    toSign: { title: "No receipts to sign", text: "New receipts wait here for the President's signature." },
+    signed: {
+      title: "No receipts waiting to be emailed",
+      text: "Signed receipts are emailed to the member right away.",
+    },
+    sent: { title: "No receipts sent yet", text: "Receipts appear here once they're signed and emailed." },
+    failed: { title: "No failed emails", text: "When a receipt can't be emailed, it waits here for a retry." },
+    voided: { title: "No voided receipts", text: "Voided receipts keep their number and stay here." },
+  } satisfies Record<Scope, { title: string; text: string }>
+
+  return (
+    <>
+      <PageBar
+        description={
+          <>
+            Fee receipts for <span className="font-mono">{page.year}</span>, numbered in issue order
+          </>
+        }
+        right={
+          canSign ? (
+            <div className="flex min-w-0 items-start gap-2 [&>button]:h-10">
+              {canWebSign && batch.length > 0 ? (
+                <div className="flex min-w-0 flex-1 flex-col shell:max-w-sm [&>button]:w-full">
+                  <SignWithCie prepare={prepareSigning}>Sign {pluralize(batch.length, "receipt")} with CIE</SignWithCie>
+                </div>
+              ) : null}
+              {!canWebSign && mine.length > 0 ? (
+                <LoadingButton
+                  size="sm"
+                  icon={FileArchive}
+                  pending={downloading === "toSign"}
+                  onClick={() => void saveToSign()}
+                >
+                  Download to sign ({mine.length})
+                </LoadingButton>
+              ) : null}
+              <ActionMenu
+                label="Receipt signing options"
+                actions={[
+                  canWebSign &&
+                    mine.length > 0 && {
+                      label: "Download to sign",
+                      icon: FileArchive,
+                      onClick: () => {
+                        if (downloading !== "toSign") void saveToSign()
+                      },
+                    },
+                  { label: "Upload signed", icon: Upload, onClick: () => setUploadOpen(true) },
+                ]}
+              />
+            </div>
+          ) : undefined
+        }
+        left={
+          <Toolbar
+            lead={
+              page.years.length > 1 ? (
+                <FilterMenu
+                  label="Fee year"
+                  mono
+                  value={page.year}
+                  options={page.years.map((year) => ({ value: year, label: year }))}
+                  onChange={onYear}
+                />
+              ) : undefined
+            }
+            search={{
+              value: query,
+              onChange: (value) => {
+                setQuery(value)
+                setPage(1)
+              },
+              placeholder: "Search by name or receipt number…",
+            }}
+            filters={
+              <SegmentedControl<Scope>
+                label="Receipt status"
+                items={[
+                  { value: "all", label: "All", count: page.receipts.length },
+                  ...RECEIPT_STATUSES.map((status) => ({
+                    value: status,
+                    label: RECEIPT_STATUS[status].label,
+                    count: byStatus(status),
+                  })),
+                ]}
+                value={scope}
+                onValueChange={(next) => {
+                  setScope(next)
+                  setPage(1)
+                }}
+              />
+            }
+            count={
+              narrowed ? (
+                <Count value={filtered.length} total={inScope.length} noun="receipt" plural="receipts" />
+              ) : undefined
+            }
+          />
+        }
+      />
+      <PageContent>
+        <div className="flex flex-col gap-4">
+          {canSign && mine.length > 0 ? (
+            <InlineAlert tone="info">
+              <span className="font-medium">
+                {pluralize(mine.length, "receipt")} {mine.length === 1 ? "is" : "are"} waiting for your signature.
+              </span>{" "}
+              {canWebSign
+                ? `Sign here with CIE and PoliNetwork eSign, up to ${RECEIPT_SIGN_BATCH} receipts at a time. You can also download them and upload the signed files from the signing options.`
+                : "Download them, sign each PDF with the CIE app, then upload the signed files."}
+              {othersNote(others)}
+            </InlineAlert>
+          ) : null}
+          {canFees && failed.length > 0 && scope !== "failed" ? (
+            <InlineAlert
+              tone="danger"
+              action={
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className={buttonMotion}
+                  onClick={() => {
+                    setScope("failed")
+                    setPage(1)
+                  }}
+                >
+                  Show
+                </Button>
+              }
+            >
+              {pluralize(failed.length, "receipt")} couldn't be emailed. Check the member's address, then retry.
+            </InlineAlert>
+          ) : null}
+          <DataTable
+            label="Receipts"
+            columns={columns}
+            rows={rows}
+            getRowId={(receipt) => receipt.id}
+            rowLabel={(receipt) => `${receipt.number}, ${receipt.person.name}`}
+            rowHref={(receipt) => `/dashboard/people/${receipt.person.id}`}
+            rowProps={(receipt) => ({
+              className: receipt.status === "voided" ? "text-(--pn-fg-muted)" : undefined,
+            })}
+            actions={(receipt) => (
+              <RowActions>
+                {canFees ? (
+                  receipt.status === "failed" ? (
+                    <IconButton
+                      label="Retry sending"
+                      ariaLabel={`Retry sending ${receipt.number}`}
+                      icon={RotateCw}
+                      pending={retrying === receipt.id}
+                      onClick={() => void resend(receipt)}
+                    />
+                  ) : (
+                    <span aria-hidden className="size-9 shrink-0" />
+                  )
+                ) : null}
+                <IconButton
+                  label="Download PDF"
+                  ariaLabel={`Download ${receipt.number}`}
+                  icon={FileDown}
+                  pending={downloading === receipt.id}
+                  onClick={() =>
+                    void downloadFile(
+                      receipt.id,
+                      () => download({ data: { receiptId: receipt.id } }),
+                      `Couldn't download receipt ${receipt.number}.`
+                    )
+                  }
+                />
+                {canFees ? (
+                  <ActionMenu
+                    keepSlot
+                    label={`More actions for ${receipt.number}`}
+                    actions={[
+                      receipt.status !== "voided" && {
+                        label: "Void receipt",
+                        ariaLabel: `Void receipt ${receipt.number}`,
+                        icon: Ban,
+                        destructive: true,
+                        onClick: () => openVoid(receipt),
+                      },
+                    ]}
+                  />
+                ) : null}
+              </RowActions>
+            )}
+            actionsWidth={canFees ? 132 : 60}
+            pagination={{
+              page: pageNumber,
+              pageSize,
+              total: filtered.length,
+              onPage: setPage,
+              onPageSize: (size) => {
+                setPageSize(size)
+                setPage(1)
+              },
+            }}
+            empty={
+              narrowed ? (
+                <EmptyState
+                  icon={Search}
+                  title="No receipts match"
+                  text={`No receipt in ${page.year} has that number or member name.`}
+                  action={
+                    <Button size="sm" variant="ghost" className={buttonMotion} onClick={() => setQuery("")}>
+                      Clear search
+                    </Button>
+                  }
+                />
+              ) : (
+                <EmptyState icon={ReceiptIcon} title={scopeEmpty[scope].title} text={scopeEmpty[scope].text} />
+              )
+            }
+          />
+        </div>
+      </PageContent>
+      {canSign ? (
+        <UploadSignedDialog key={`upload-${uploadKey}`} open={uploadOpen} onOpenChange={setUploadOpen} page={page} />
+      ) : null}
+      {canFees && voiding ? (
+        <VoidReceiptDialog key={`void-${voidKey}`} open={voidOpen} onOpenChange={setVoidOpen} receipt={voiding} />
+      ) : null}
+    </>
+  )
+}
diff --git a/src/features/people/team-dialogs.tsx b/src/features/people/team-dialogs.tsx
index 5973afd..0d42c09 100644
--- a/src/features/people/team-dialogs.tsx
+++ b/src/features/people/team-dialogs.tsx
@@ -1,16 +1,25 @@
 import { useServerFn } from "@tanstack/react-start"
-import { useEffect, useState } from "react"
+import { useMemo, useState } from "react"
 
-import { fieldControl, fieldHintId, FormDialog, FormField, Spinner } from "@/components/primitives"
+import {
+  DateField,
+  fieldControl,
+  fieldHintId,
+  FormDialog,
+  FormField,
+  RadioCard,
+  RadioCardGroup,
+  SelectField,
+  Spinner,
+} from "@/components/primitives"
 import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { cn } from "@/lib/utils"
 
-import { DateField } from "./date-field"
 import { teamName, todayIso } from "./people-format"
-import { errorMessage, useRefreshAfter } from "./people-hooks"
+import { errorMessage, useLoaded, useRefreshAfter } from "./people-hooks"
 import { addTeamMember, endTeamMembership, getTeamCandidates, updateTeamFields } from "./people-teams.functions"
-import { ChoiceChips, type PersonOption, PersonPicker, RadioCard, SelectField } from "./people-ui"
+import { ChoiceChips, type PersonOption, PersonPicker } from "./people-ui"
 import { TEAM_IDS, type TeamFields, teamFields, type TeamId } from "./people.contract"
 
 type Role = "member" | "lead"
@@ -98,31 +107,18 @@ export function AddToTeamDialog({
   const refresh = useRefreshAfter()
   const [team, setTeam] = useState<TeamId | null>(fixedTeam ?? null)
   const [person, setPerson] = useState<PersonOption | null>(fixedPerson ?? null)
-  const [candidates, setCandidates] = useState<PersonOption[] | null>(null)
-  const [candidatesError, setCandidatesError] = useState(false)
   const [role, setRole] = useState<Role>("member")
   const [since, setSince] = useState(todayIso())
   const [fields, setFields] = useState<TeamFields>(fixedTeam ? emptyFields(fixedTeam) : {})
   const [submitted, setSubmitted] = useState(false)
 
-  useEffect(() => {
-    if (!open || fixedPerson || !team) return
-    let active = true
-    setCandidates(null)
-    setCandidatesError(false)
-    loadCandidates({ data: { teamId: team } }).then(
-      (rows) => {
-        if (active) setCandidates(rows.map((row) => ({ id: row.id, name: row.name })))
-      },
-      (caught) => {
-        console.error(caught)
-        if (active) setCandidatesError(true)
-      }
+  const { data: candidateRows, failed: candidatesError } = useLoaded(
+    useMemo(
+      () => (open && !fixedPerson && team ? () => loadCandidates({ data: { teamId: team } }) : null),
+      [open, fixedPerson, team, loadCandidates]
     )
-    return () => {
-      active = false
-    }
-  }, [open, fixedPerson, team, loadCandidates])
+  )
+  const candidates = candidateRows?.map((row) => ({ id: row.id, name: row.name })) ?? null
 
   const teamError = submitted && !team ? "Choose a team." : undefined
   const personError = submitted && !person ? "Choose a person." : undefined
@@ -136,8 +132,7 @@ export function AddToTeamDialog({
       await add({ data: { teamId: team, personId: person.id, role, since, fields: cleanFields(fields) } })
     } catch (caught) {
       console.error(caught)
-      const fallback = "The person could not be added to the team."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Couldn't add the person to the team."), { cause: caught })
     }
     await refresh(`${person.name} added to ${teamName(team)}.`)
     onOpenChange(false)
@@ -199,26 +194,17 @@ export function AddToTeamDialog({
         )}
         <div className="grid grid-cols-1 gap-4 shell:grid-cols-2">
           {canAppoint ? (
-            <fieldset className="flex flex-col gap-2 shell:col-span-2">
-              <legend className="mb-2 text-[13px] font-medium">Role</legend>
-              <div className="grid grid-cols-1 gap-2 shell:grid-cols-2">
-                <RadioCard
-                  name="team-role"
-                  value="member"
-                  checked={role === "member"}
-                  onSelect={() => setRole("member")}
-                  label="Member"
-                />
-                <RadioCard
-                  name="team-role"
-                  value="lead"
-                  checked={role === "lead"}
-                  onSelect={() => setRole("lead")}
-                  label="Team Lead"
-                  description="Manages the team's members from Teams."
-                />
-              </div>
-            </fieldset>
+            <div className="shell:col-span-2">
+              <RadioCardGroup
+                label="Role"
+                value={role}
+                onValueChange={setRole}
+                className="grid grid-cols-1 gap-2 shell:grid-cols-2"
+              >
+                <RadioCard value="member" label="Member" />
+                <RadioCard value="lead" label="Team Lead" description="Manages the team's members from Teams." />
+              </RadioCardGroup>
+            </div>
           ) : null}
           <FormField label="Since" htmlFor="team-add-since" error={sinceError}>
             <DateField
@@ -257,8 +243,7 @@ export function EditTeamFieldsDialog({
       await save({ data: { teamId: target.team, personId: target.personId, fields: cleanFields(fields) } })
     } catch (caught) {
       console.error(caught)
-      const fallback = "The team fields could not be saved."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Couldn't save the team fields."), { cause: caught })
     }
     await refresh("Team fields saved.")
     onOpenChange(false)
@@ -326,8 +311,7 @@ export function EndTeamMembershipDialog({
       })
     } catch (caught) {
       console.error(caught)
-      const fallback = "The membership could not be ended."
-      throw new Error(caught instanceof Error ? errorMessage(caught, fallback) : fallback, { cause: caught })
+      throw new Error(errorMessage(caught, "Couldn't end the membership."), { cause: caught })
     }
     await refresh("Membership ended.")
     onOpenChange(false)
diff --git a/src/features/people/teams-page.tsx b/src/features/people/teams-page.tsx
index 1127007..feffca4 100644
--- a/src/features/people/teams-page.tsx
+++ b/src/features/people/teams-page.tsx
@@ -1,5 +1,5 @@
 import { Link } from "@tanstack/react-router"
-import { EllipsisVertical, Pencil, UserMinus, UserPlus, UserRound, Users } from "lucide-react"
+import { Pencil, UserMinus, UserPlus, Users } from "lucide-react"
 import { type ReactNode, useDeferredValue, useState } from "react"
 
 import {
@@ -9,12 +9,8 @@ import {
   DataTable,
   type DataTableColumn,
   EmptyState,
+  FilterMenu,
   IconButton,
-  Menu,
-  MenuContent,
-  MenuItem,
-  MenuSeparator,
-  MenuTrigger,
   NavCard,
   PlatformGlyph,
   RecordHeader,
@@ -28,8 +24,18 @@ import { Count, PageBar, PageContent, Toolbar, useCan, usePeopleRoles } from "@/
 import { Button } from "@/components/ui/button"
 import { pluralize } from "@/lib/format"
 
-import { CENSUS_ANSWER, censusEntry, CURRENT_YEAR, formatDay, NO_ANSWER, personName, teamName } from "./people-format"
-import { FilterMenu, PersonCell, StateBadge } from "./people-ui"
+import {
+  CENSUS_ANSWER,
+  censusEntry,
+  currentYear,
+  formatDay,
+  NO_ANSWER,
+  personName,
+  PHOTO_CONSENT,
+  teamName,
+} from "./people-format"
+import { useDialog, useDialogState } from "./people-hooks"
+import { ActionMenu, PersonCell, StateBadge } from "./people-ui"
 import { type PersonRow, type TeamId, type TeamMembership, type TeamSummary, teamFields } from "./people.contract"
 import { AddToTeamDialog, EditTeamFieldsDialog, EndTeamMembershipDialog, type TeamMemberTarget } from "./team-dialogs"
 
@@ -68,7 +74,7 @@ function matchesQuery(row: TeamRow, query: string) {
 }
 
 function CensusBadge({ person }: { person: PersonRow }) {
-  const entry = censusEntry(person, CURRENT_YEAR)
+  const entry = censusEntry(person, currentYear())
   if (!entry) return <Unset />
   return <StateBadge state={entry.answer ? CENSUS_ANSWER[entry.answer] : NO_ANSWER} />
 }
@@ -76,15 +82,7 @@ function CensusBadge({ person }: { person: PersonRow }) {
 function PhotoBadge({ person }: { person: PersonRow }) {
   const photo = person.consents.photo
   if (!photo) return <Unset />
-  return (
-    <StateBadge
-      state={
-        photo.status === "granted"
-          ? { label: "Granted", tone: "success" }
-          : { label: photo.status === "denied" ? "Denied" : "Revoked", tone: "neutral" }
-      }
-    />
-  )
+  return <StateBadge state={PHOTO_CONSENT[photo.status]} />
 }
 
 function RoleChip({ role }: { role: Role }) {
@@ -94,12 +92,10 @@ function RoleChip({ role }: { role: Role }) {
 /** Edit fields as the row icon, the rest in ⋮. */
 function MemberActions({
   row,
-  canOpenRecord,
   canAppoint,
   onOpen,
 }: {
   row: TeamRow
-  canOpenRecord: boolean
   /** Ending a Team Lead's membership is an appointment change: `people:appoint` only. */
   canAppoint: boolean
   onOpen: (dialog: TeamDialog) => void
@@ -114,64 +110,44 @@ function MemberActions({
         icon={Pencil}
         onClick={() => onOpen({ kind: "fields", target: targetOf(row) })}
       />
-      <Menu>
-        <MenuTrigger
-          render={<IconButton label="More actions" ariaLabel={`More actions for ${name}`} icon={EllipsisVertical} />}
-        />
-        <MenuContent>
-          {canOpenRecord ? (
-            <MenuItem render={<Link to="/dashboard/people/$personId" params={{ personId: row.person.id }} />}>
-              <UserRound />
-              Open record
-            </MenuItem>
-          ) : null}
-          {canOpenRecord && canEnd ? <MenuSeparator /> : null}
-          {canEnd ? (
-            <MenuItem variant="destructive" onClick={() => onOpen({ kind: "end", target: targetOf(row) })}>
-              <UserMinus />
-              End membership
-            </MenuItem>
-          ) : null}
-        </MenuContent>
-      </Menu>
+      <ActionMenu
+        keepSlot
+        label={`More actions for ${name}`}
+        actions={[
+          canEnd && {
+            label: "End membership",
+            ariaLabel: `End the team membership of ${name}`,
+            icon: UserMinus,
+            destructive: true,
+            onClick: () => onOpen({ kind: "end", target: targetOf(row) }),
+          },
+        ]}
+      />
     </RowActions>
   )
 }
 
 /** The Edit fields / End membership dialog of the row it was opened from. */
 function useTeamDialog() {
-  const [dialog, setDialog] = useState<TeamDialog | null>(null)
-  const [open, setOpen] = useState(false)
-  const [key, setKey] = useState(0)
-  const element: ReactNode = dialog ? (
-    dialog.kind === "fields" ? (
-      <EditTeamFieldsDialog key={`fields-${key}`} open={open} onOpenChange={setOpen} target={dialog.target} />
+  const dialog = useDialog<TeamDialog>()
+  const element: ReactNode = dialog.target ? (
+    dialog.target.kind === "fields" ? (
+      <EditTeamFieldsDialog
+        key={`fields-${dialog.key}`}
+        open={dialog.open}
+        onOpenChange={dialog.onOpenChange}
+        target={dialog.target.target}
+      />
     ) : (
-      <EndTeamMembershipDialog key={`end-${key}`} open={open} onOpenChange={setOpen} target={dialog.target} />
+      <EndTeamMembershipDialog
+        key={`end-${dialog.key}`}
+        open={dialog.open}
+        onOpenChange={dialog.onOpenChange}
+        target={dialog.target.target}
+      />
     )
   ) : null
-  return {
-    element,
-    show: (next: TeamDialog) => {
-      setDialog(next)
-      setKey((value) => value + 1)
-      setOpen(true)
-    },
-  }
-}
-
-function useAddDialog() {
-  const [open, setOpen] = useState(false)
-  const [key, setKey] = useState(0)
-  return {
-    open,
-    setOpen,
-    key,
-    show: () => {
-      setKey((value) => value + 1)
-      setOpen(true)
-    },
-  }
+  return { element, show: dialog.show }
 }
 
 const DEFAULT_SORT: TableSort = { column: "name", direction: "asc" }
@@ -198,7 +174,7 @@ export function TeamsPage({ teams }: { teams: TeamSummary[] }) {
   const [sort, setSort] = useState(DEFAULT_SORT)
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(20)
-  const add = useAddDialog()
+  const add = useDialogState()
   const rowDialog = useTeamDialog()
 
   const filtered = all.filter(
@@ -256,7 +232,7 @@ export function TeamsPage({ teams }: { teams: TeamSummary[] }) {
     },
     {
       id: "census",
-      label: `Census ${CURRENT_YEAR}`,
+      label: `Census ${currentYear()}`,
       width: 152,
       priority: 4,
       mobile: "hidden",
@@ -290,7 +266,7 @@ export function TeamsPage({ teams }: { teams: TeamSummary[] }) {
           <nav aria-label="Teams" className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
             {teams.map((summary) => {
               const active = rowsOf(summary, false)
-              const missing = active.filter((row) => !censusEntry(row.person, CURRENT_YEAR)?.answer).length
+              const missing = active.filter((row) => !censusEntry(row.person, currentYear())?.answer).length
               return (
                 <NavCard
                   key={summary.id}
@@ -362,7 +338,7 @@ export function TeamsPage({ teams }: { teams: TeamSummary[] }) {
               }}
               actions={
                 canWrite
-                  ? (row) => <MemberActions row={row} canOpenRecord canAppoint={canAppoint} onOpen={rowDialog.show} />
+                  ? (row) => <MemberActions row={row} canAppoint={canAppoint} onOpen={rowDialog.show} />
                   : undefined
               }
               actionsWidth={96}
@@ -410,7 +386,7 @@ export function TeamsPage({ teams }: { teams: TeamSummary[] }) {
         <AddToTeamDialog
           key={`add-${add.key}`}
           open={add.open}
-          onOpenChange={add.setOpen}
+          onOpenChange={add.onOpenChange}
           teams={teams.map((summary) => summary.id)}
           canAppoint={canAppoint}
         />
@@ -444,7 +420,7 @@ export function TeamPage({ team, asSection = false }: { team: TeamSummary; asSec
   const [query, setQuery] = useState("")
   const deferredQuery = useDeferredValue(query.trim().toLocaleLowerCase())
   const [sort, setSort] = useState(DEFAULT_SORT)
-  const add = useAddDialog()
+  const add = useDialogState()
   const rowDialog = useTeamDialog()
 
   const inScope = scope === "active" ? active : former
@@ -557,7 +533,7 @@ export function TeamPage({ team, asSection = false }: { team: TeamSummary; asSec
             : []),
           {
             id: "census",
-            label: `Census ${CURRENT_YEAR}`,
+            label: `Census ${currentYear()}`,
             width: 152,
             priority: 4,
             mobile: "hidden",
@@ -628,7 +604,7 @@ export function TeamPage({ team, asSection = false }: { team: TeamSummary; asSec
       onSort={setSort}
       actions={
         canEdit && scope === "active"
-          ? (row) => <MemberActions row={row} canOpenRecord={canRead} canAppoint={canAppoint} onOpen={rowDialog.show} />
+          ? (row) => <MemberActions row={row} canAppoint={canAppoint} onOpen={rowDialog.show} />
           : undefined
       }
       actionsWidth={96}
@@ -697,7 +673,7 @@ export function TeamPage({ team, asSection = false }: { team: TeamSummary; asSec
         <AddToTeamDialog
           key={`add-${add.key}`}
           open={add.open}
-          onOpenChange={add.setOpen}
+          onOpenChange={add.onOpenChange}
           team={team.id}
           canAppoint={canAppoint}
         />
diff --git a/src/lib/date-only.ts b/src/lib/date-only.ts
index 1419945..baf4c62 100644
--- a/src/lib/date-only.ts
+++ b/src/lib/date-only.ts
@@ -13,3 +13,10 @@ export function dateOnlyValue(date: Date) {
   const pad = (value: number) => String(value).padStart(2, "0")
   return `${String(date.getFullYear()).padStart(4, "0")}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
 }
+
+/** The academic year a calendar date (`YYYY-MM-DD`) falls in. Years start on 1 September: "2026-10-17" → "2026/27". */
+export function academicYear(date: string) {
+  const year = Number(date.slice(0, 4))
+  const start = Number(date.slice(5, 7)) >= 9 ? year : year - 1
+  return `${start}/${String(start + 1).slice(-2)}`
+}
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index 6ea8f89..96f422c 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -31,6 +31,7 @@ import { Route as DashboardTelegramGrantsRouteImport } from './routes/dashboard/
 import { Route as DashboardTelegramCapoRouteImport } from './routes/dashboard/telegram/capo'
 import { Route as DashboardReportsResolvedRouteImport } from './routes/dashboard/reports/resolved'
 import { Route as DashboardReportsGroupLinksRouteImport } from './routes/dashboard/reports/group-links'
+import { Route as DashboardPeopleReceiptsRouteImport } from './routes/dashboard/people/receipts'
 import { Route as DashboardPeopleMembersRouteImport } from './routes/dashboard/people/members'
 import { Route as DashboardPeopleLinkingRouteImport } from './routes/dashboard/people/linking'
 import { Route as DashboardPeopleAdminsRouteImport } from './routes/dashboard/people/admins'
@@ -169,6 +170,11 @@ const DashboardReportsGroupLinksRoute =
     path: '/reports/group-links',
     getParentRoute: () => DashboardRoute,
   } as any)
+const DashboardPeopleReceiptsRoute = DashboardPeopleReceiptsRouteImport.update({
+  id: '/people/receipts',
+  path: '/people/receipts',
+  getParentRoute: () => DashboardRoute,
+} as any)
 const DashboardPeopleMembersRoute = DashboardPeopleMembersRouteImport.update({
   id: '/people/members',
   path: '/people/members',
@@ -322,6 +328,7 @@ export interface FileRoutesByFullPath {
   '/dashboard/people/admins': typeof DashboardPeopleAdminsRoute
   '/dashboard/people/linking': typeof DashboardPeopleLinkingRoute
   '/dashboard/people/members': typeof DashboardPeopleMembersRoute
+  '/dashboard/people/receipts': typeof DashboardPeopleReceiptsRoute
   '/dashboard/reports/group-links': typeof DashboardReportsGroupLinksRoute
   '/dashboard/reports/resolved': typeof DashboardReportsResolvedRoute
   '/dashboard/telegram/capo': typeof DashboardTelegramCapoRoute
@@ -369,6 +376,7 @@ export interface FileRoutesByTo {
   '/dashboard/people/admins': typeof DashboardPeopleAdminsRoute
   '/dashboard/people/linking': typeof DashboardPeopleLinkingRoute
   '/dashboard/people/members': typeof DashboardPeopleMembersRoute
+  '/dashboard/people/receipts': typeof DashboardPeopleReceiptsRoute
   '/dashboard/reports/group-links': typeof DashboardReportsGroupLinksRoute
   '/dashboard/reports/resolved': typeof DashboardReportsResolvedRoute
   '/dashboard/telegram/capo': typeof DashboardTelegramCapoRoute
@@ -418,6 +426,7 @@ export interface FileRoutesById {
   '/dashboard/people/admins': typeof DashboardPeopleAdminsRoute
   '/dashboard/people/linking': typeof DashboardPeopleLinkingRoute
   '/dashboard/people/members': typeof DashboardPeopleMembersRoute
+  '/dashboard/people/receipts': typeof DashboardPeopleReceiptsRoute
   '/dashboard/reports/group-links': typeof DashboardReportsGroupLinksRoute
   '/dashboard/reports/resolved': typeof DashboardReportsResolvedRoute
   '/dashboard/telegram/capo': typeof DashboardTelegramCapoRoute
@@ -468,6 +477,7 @@ export interface FileRouteTypes {
     | '/dashboard/people/admins'
     | '/dashboard/people/linking'
     | '/dashboard/people/members'
+    | '/dashboard/people/receipts'
     | '/dashboard/reports/group-links'
     | '/dashboard/reports/resolved'
     | '/dashboard/telegram/capo'
@@ -515,6 +525,7 @@ export interface FileRouteTypes {
     | '/dashboard/people/admins'
     | '/dashboard/people/linking'
     | '/dashboard/people/members'
+    | '/dashboard/people/receipts'
     | '/dashboard/reports/group-links'
     | '/dashboard/reports/resolved'
     | '/dashboard/telegram/capo'
@@ -563,6 +574,7 @@ export interface FileRouteTypes {
     | '/dashboard/people/admins'
     | '/dashboard/people/linking'
     | '/dashboard/people/members'
+    | '/dashboard/people/receipts'
     | '/dashboard/reports/group-links'
     | '/dashboard/reports/resolved'
     | '/dashboard/telegram/capo'
@@ -757,6 +769,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardReportsGroupLinksRouteImport
       parentRoute: typeof DashboardRoute
     }
+    '/dashboard/people/receipts': {
+      id: '/dashboard/people/receipts'
+      path: '/people/receipts'
+      fullPath: '/dashboard/people/receipts'
+      preLoaderRoute: typeof DashboardPeopleReceiptsRouteImport
+      parentRoute: typeof DashboardRoute
+    }
     '/dashboard/people/members': {
       id: '/dashboard/people/members'
       path: '/people/members'
@@ -969,6 +988,7 @@ interface DashboardRouteChildren {
   DashboardPeopleAdminsRoute: typeof DashboardPeopleAdminsRoute
   DashboardPeopleLinkingRoute: typeof DashboardPeopleLinkingRoute
   DashboardPeopleMembersRoute: typeof DashboardPeopleMembersRoute
+  DashboardPeopleReceiptsRoute: typeof DashboardPeopleReceiptsRoute
   DashboardReportsGroupLinksRoute: typeof DashboardReportsGroupLinksRoute
   DashboardReportsResolvedRoute: typeof DashboardReportsResolvedRoute
   DashboardTelegramCapoRoute: typeof DashboardTelegramCapoRoute
@@ -1002,6 +1022,7 @@ const DashboardRouteChildren: DashboardRouteChildren = {
   DashboardPeopleAdminsRoute: DashboardPeopleAdminsRoute,
   DashboardPeopleLinkingRoute: DashboardPeopleLinkingRoute,
   DashboardPeopleMembersRoute: DashboardPeopleMembersRoute,
+  DashboardPeopleReceiptsRoute: DashboardPeopleReceiptsRoute,
   DashboardReportsGroupLinksRoute: DashboardReportsGroupLinksRoute,
   DashboardReportsResolvedRoute: DashboardReportsResolvedRoute,
   DashboardTelegramCapoRoute: DashboardTelegramCapoRoute,
diff --git a/src/routes/dashboard.tsx b/src/routes/dashboard.tsx
index 5692b7f..dd95a34 100644
--- a/src/routes/dashboard.tsx
+++ b/src/routes/dashboard.tsx
@@ -5,6 +5,7 @@ import { canOpenPage, DashboardShell, documentTitle, matchPath, NO_PEOPLE_ROLES
 import { getDashboardAccess } from "@/features/auth/auth.functions"
 import { getEsignPendingCount } from "@/features/esign/esign.functions"
 import { getPendingGroupLinkReports } from "@/features/group-link-reports/reports.functions"
+import { getReceipts } from "@/features/people/people-receipts.functions"
 import { getLinkingReviews, getMyPeopleRoles } from "@/features/people/people.functions"
 import { signInRedirect } from "@/lib/sign-in"
 import { hasPermission } from "@/server/permissions"
@@ -35,6 +36,23 @@ export const Route = createFileRoute("/dashboard")({
   // permission as managing them.
   loader: ({ context }) => ({
     pending: {
+      receipts:
+        hasPermission(context.permissions, "admin:access") &&
+        hasPermission(context.permissions, "people:receipts:sign") &&
+        hasPermission(context.permissions, "people:members:read")
+          ? getReceipts({ data: { year: null } }).then(
+              (page) =>
+                page.viewerSigner
+                  ? page.receipts.filter(
+                      (receipt) => receipt.status === "toSign" && receipt.signer === page.viewerSigner
+                    ).length
+                  : null,
+              (error) => {
+                console.error(error)
+                return null
+              }
+            )
+          : Promise.resolve(null),
       linking:
         hasPermission(context.permissions, "admin:access") && hasPermission(context.permissions, "people:read")
           ? getLinkingReviews().then(
diff --git a/src/routes/dashboard/people/receipts.tsx b/src/routes/dashboard/people/receipts.tsx
new file mode 100644
index 0000000..875c6ff
--- /dev/null
+++ b/src/routes/dashboard/people/receipts.tsx
@@ -0,0 +1,41 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { z } from "zod"
+
+import { TableSkeleton } from "@/components/primitives"
+import { PageBar, PageContent } from "@/components/shell"
+import { getReceipts } from "@/features/people/people-receipts.functions"
+import { ReceiptsPage } from "@/features/people/receipts-page"
+
+export const Route = createFileRoute("/dashboard/people/receipts")({
+  validateSearch: z.object({
+    year: z
+      .string()
+      .regex(/^\d{4}\/\d{2}$/)
+      .optional(),
+  }),
+  loaderDeps: ({ search }) => ({ year: search.year ?? null }),
+  loader: ({ deps }) => getReceipts({ data: { year: deps.year } }),
+  pendingComponent: () => (
+    <>
+      <PageBar />
+      <PageContent>
+        <TableSkeleton columns={6} label="Loading receipts…" />
+      </PageContent>
+    </>
+  ),
+  component: ReceiptsRoute,
+})
+
+function ReceiptsRoute() {
+  const navigate = Route.useNavigate()
+  const page = Route.useLoaderData()
+  return (
+    <ReceiptsPage
+      key={page.year}
+      page={page}
+      onYear={(year) => {
+        navigate({ search: year === page.years[0] ? {} : { year } }).catch((error) => console.error(error))
+      }}
+    />
+  )
+}
diff --git a/src/server/auth.middleware.ts b/src/server/auth.middleware.ts
index 9520a00..48e4234 100644
--- a/src/server/auth.middleware.ts
+++ b/src/server/auth.middleware.ts
@@ -126,6 +126,22 @@ export const peopleMembersWriteMiddleware = createMiddleware({ type: "function"
     return next()
   })
 
+/** People › fees: review transfer receipts, mark fees as paid, send reminders, retry and void receipts. */
+export const peopleFeesWriteMiddleware = createMiddleware({ type: "function" })
+  .middleware([adminMiddleware])
+  .server(({ next, context }) => {
+    requirePermission(context.permissions, "people:fees:write")
+    return next()
+  })
+
+/** People › Receipts: download receipts to sign and upload them signed (the President and Vice-president). */
+export const peopleReceiptsSignMiddleware = createMiddleware({ type: "function" })
+  .middleware([adminMiddleware])
+  .server(({ next, context }) => {
+    requirePermission(context.permissions, "people:receipts:sign")
+    return next()
+  })
+
 /** People: appoint Capo Admins and Team Leads. */
 export const peopleAppointMiddleware = createMiddleware({ type: "function" })
   .middleware([adminMiddleware])
diff --git a/src/server/permissions.ts b/src/server/permissions.ts
index d3939a6..1eaaa7c 100644
--- a/src/server/permissions.ts
+++ b/src/server/permissions.ts
@@ -24,6 +24,8 @@ export const PERMISSIONS = [
   "people:members:read",
   "people:members:write",
   "people:appoint",
+  "people:fees:write",
+  "people:receipts:sign",
   "esign:sign",
   "esign:requests:manage",
   "esign:drives:manage",
diff --git a/tests/date-only.test.mjs b/tests/date-only.test.mjs
index 4c3ed5c..cc18f81 100644
--- a/tests/date-only.test.mjs
+++ b/tests/date-only.test.mjs
@@ -1,7 +1,7 @@
 import assert from "node:assert/strict"
 import test from "node:test"
 
-import { dateOnlyValue, parseDateOnly } from "../src/lib/date-only.ts"
+import { academicYear, dateOnlyValue, parseDateOnly } from "../src/lib/date-only.ts"
 
 void test("calendar dates reject impossible days and retain the selected day across time zones", () => {
   const original = process.env.TZ
@@ -19,3 +19,11 @@ void test("calendar dates reject impossible days and retain the selected day acr
     else process.env.TZ = original
   }
 })
+
+void test("academic years start on 1 September", () => {
+  assert.equal(academicYear("2026-08-31"), "2025/26")
+  assert.equal(academicYear("2026-09-01"), "2026/27")
+  assert.equal(academicYear("2026-12-31"), "2026/27")
+  assert.equal(academicYear("2027-01-01"), "2026/27")
+  assert.equal(academicYear("2099-10-01"), "2099/00")
+})
diff --git a/tests/people-esign.test.mjs b/tests/people-esign.test.mjs
new file mode 100644
index 0000000..2e991fb
--- /dev/null
+++ b/tests/people-esign.test.mjs
@@ -0,0 +1,188 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import { registerHooks } from "node:module"
+import test from "node:test"
+import { setImmediate } from "node:timers/promises"
+import { runInNewContext } from "node:vm"
+
+import ts from "typescript"
+
+registerHooks({
+  resolve(specifier, context, nextResolve) {
+    if (specifier.startsWith(".") && !/\.[cm]?[jt]s$/.test(specifier)) {
+      return nextResolve(new URL(`${specifier}.ts`, context.parentURL).href, context)
+    }
+    return nextResolve(specifier, context)
+  },
+})
+
+const { fakePeopleApi } = await import("../src/features/people/people.fake.server.ts")
+const { OFFICERS } = await import("../src/features/people/people.fixtures.server.ts")
+const { prepareReceiptSignaturesInputSchema, receiptSignaturesSchema } =
+  await import("../src/features/people/people.contract.ts")
+const permissions = ["people:members:read", "people:receipts:sign", "esign:sign"]
+const president = fakePeopleApi({ permissions, personId: OFFICERS.president })
+
+void test("CIE receipt batches reject empty, duplicate and oversized input and malformed request IDs", () => {
+  for (const receiptIds of [[], ["r1", "r1"], Array.from({ length: 11 }, (_, i) => `r${i}`), [""]]) {
+    assert.equal(prepareReceiptSignaturesInputSchema.safeParse({ receiptIds }).success, false)
+  }
+  assert.equal(prepareReceiptSignaturesInputSchema.safeParse({ receiptIds: ["r1"] }).success, true)
+  assert.equal(
+    receiptSignaturesSchema.safeParse([{ receiptId: "r1", requestId: "r1", title: "Receipt" }]).success,
+    false
+  )
+})
+
+void test("CIE preparation requires both permissions and the correct confirmed officer", async () => {
+  const { receipts } = await president.listReceipts({ year: null })
+  const own = receipts.find((receipt) => receipt.person.id === OFFICERS.president && receipt.status === "toSign")
+  assert.ok(own)
+  for (const missing of ["people:receipts:sign", "esign:sign"]) {
+    const api = fakePeopleApi({ permissions: permissions.filter((p) => p !== missing), personId: OFFICERS.president })
+    await assert.rejects(api.prepareReceiptSignatures({ receiptIds: [own.id] }), { message: "UNAUTHORIZED" })
+  }
+  for (const personId of ["P-0034", `match:${OFFICERS.president}`, "none"]) {
+    const api = fakePeopleApi({ permissions, personId })
+    await assert.rejects(api.prepareReceiptSignatures({ receiptIds: [own.id] }), {
+      message: "Only the President and the Vice-president sign receipts.",
+    })
+  }
+  await assert.rejects(president.prepareReceiptSignatures({ receiptIds: [own.id] }), {
+    message: `Receipt ${own.number} needs another signer.`,
+  })
+  const sent = receipts.find((receipt) => receipt.status === "sent")
+  assert.ok(sent)
+  await assert.rejects(president.prepareReceiptSignatures({ receiptIds: [sent.id] }), {
+    message: `Receipt ${sent.number} is already signed.`,
+  })
+})
+
+void test("agent mode never invents real eSign jobs or changes receipt state through CIE preparation", async () => {
+  const before = structuredClone(await president.listReceipts({ year: null }))
+  const receipt = before.receipts.find((r) => r.status === "toSign" && r.signer === "president")
+  assert.ok(receipt)
+  await assert.rejects(president.prepareReceiptSignatures({ receiptIds: [receipt.id] }), /needs the People backend/)
+  assert.deepEqual(await president.listReceipts({ year: null }), before)
+  assert.equal((await president.downloadReceiptsToSign()).contentType, "application/zip")
+})
+
+async function prepareHandler(dependencies) {
+  const path = "src/features/people/receipts-page.tsx"
+  const source = ts.createSourceFile(
+    path,
+    await readFile(path, "utf8"),
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX
+  )
+  let found
+  function visit(node) {
+    if (ts.isFunctionDeclaration(node) && node.name?.text === "prepareSigning") found = node
+    if (!found) ts.forEachChild(node, visit)
+  }
+  visit(source)
+  assert.ok(found)
+  const compiled = ts.transpileModule(`const handler = ${found.getText()}`, {
+    compilerOptions: { target: ts.ScriptTarget.ESNext, module: ts.ModuleKind.None },
+  }).outputText
+  return runInNewContext(`${compiled}; handler`, dependencies)
+}
+
+void test("receipt preparation waits for every loader before starting the shared CIE flow", async () => {
+  const events = []
+  let finishReload
+  const reload = new Promise((resolve) => {
+    finishReload = resolve
+  })
+  const prepare = await prepareHandler({
+    batch: [{ id: "r1" }],
+    prepareSignatures: async ({ data }) => {
+      assert.equal(data.receiptIds.join(), "r1")
+      events.push("prepare")
+      return [{ receiptId: "r1", requestId: "request-1", title: "Receipt 1" }]
+    },
+    router: {
+      invalidate: ({ sync }) => {
+        assert.equal(sync, true)
+        events.push("reload")
+        return reload
+      },
+    },
+    console: { error: () => assert.fail("unexpected reload error") },
+    appToast: { warning: () => assert.fail("unexpected warning") },
+  })
+  const pending = prepare().then((items) => {
+    events.push("ready")
+    return items
+  })
+  await setImmediate()
+  assert.deepEqual(events, ["prepare", "reload"])
+  finishReload()
+  const items = await pending
+  assert.equal(items[0].requestId, "request-1")
+  assert.deepEqual(events, ["prepare", "reload", "ready"])
+})
+
+void test("a failed reload after preparation keeps the saved requests usable without preparing twice", async () => {
+  const events = []
+  const prepare = await prepareHandler({
+    batch: [{ id: "r1" }],
+    prepareSignatures: async () => {
+      events.push("prepare")
+      return [{ requestId: "request-1", title: "Receipt 1" }]
+    },
+    router: {
+      invalidate: async () => {
+        throw new Error("offline")
+      },
+    },
+    console: { error: (error) => events.push(error.message) },
+    appToast: { warning: (message) => events.push(message) },
+  })
+  assert.equal((await prepare())[0].requestId, "request-1")
+  assert.deepEqual(events, ["prepare", "offline", "Signing requests prepared, but the page couldn't refresh."])
+})
+
+void test("merged navigation keeps People and eSign routes, permission gates and independent counts", async () => {
+  const source = await readFile("src/components/shell/nav.ts", "utf8")
+  const compiled = ts.transpileModule(source, {
+    compilerOptions: { target: ts.ScriptTarget.ESNext, module: ts.ModuleKind.CommonJS },
+  }).outputText
+  const exports = {}
+  runInNewContext(compiled, {
+    exports,
+    require: (name) =>
+      name.endsWith("permissions")
+        ? { hasPermission: (available, permission) => available.includes(permission) }
+        : new Proxy({}, { get: (_, property) => String(property) }),
+  })
+  const roles = { capoScope: null, leads: [] }
+  for (const [path, service, permission] of [
+    ["/dashboard/people", "people", "people:read"],
+    ["/dashboard/people/receipts", "people", "people:members:read"],
+    ["/dashboard/esign/inbox", "esign", "esign:sign"],
+    ["/dashboard/esign/sign", "esign", "esign:sign"],
+  ]) {
+    const match = exports.matchPath(path)
+    assert.equal(exports.serviceFor(match).id, service)
+    assert.equal(exports.canOpenPage(match, ["admin:access", permission], roles), true)
+    assert.equal(exports.canOpenPage(match, ["people:self"], roles), false)
+  }
+  assert.equal(exports.canOpenPage(exports.matchPath("/dashboard/account/me"), ["people:self"], roles), true)
+  const counts = {
+    reports: Promise.resolve(1),
+    signatures: Promise.resolve(2),
+    linking: Promise.resolve(3),
+    receipts: Promise.resolve(4),
+  }
+  for (const [service, section, key] of [
+    ["reports", "open", "reports"],
+    ["esign", "inbox", "signatures"],
+    ["people", "linking", "linking"],
+    ["people", "receipts", "receipts"],
+  ]) {
+    assert.equal(exports.sectionPending(service, section, counts), counts[key])
+  }
+  assert.equal(exports.isRailService(exports.serviceById("account")), false)
+})
diff --git a/tests/people-fees.test.mjs b/tests/people-fees.test.mjs
new file mode 100644
index 0000000..9f09d4d
--- /dev/null
+++ b/tests/people-fees.test.mjs
@@ -0,0 +1,181 @@
+import assert from "node:assert/strict"
+import { registerHooks } from "node:module"
+import test from "node:test"
+
+// Run the agent-mode People API under Node, resolving the same extensionless source imports as Vite.
+registerHooks({
+  resolve(specifier, context, nextResolve) {
+    if (specifier.startsWith(".") && !/\.[cm]?[jt]s$/.test(specifier)) {
+      return nextResolve(new URL(`${specifier}.ts`, context.parentURL).href, context)
+    }
+    return nextResolve(specifier, context)
+  },
+})
+
+const fees = await import("../src/features/people/people-fees.ts")
+const { fakePeopleApi } = await import("../src/features/people/people.fake.server.ts")
+const { OFFICERS } = await import("../src/features/people/people.fixtures.server.ts")
+
+const ALL = [
+  "people:read",
+  "people:write",
+  "people:members:read",
+  "people:members:write",
+  "people:appoint",
+  "people:self",
+  "people:fees:write",
+  "people:receipts:sign",
+]
+const president = fakePeopleApi({ permissions: ALL, personId: OFFICERS.president })
+const vicePresident = fakePeopleApi({ permissions: ALL, personId: OFFICERS.vicePresident })
+const unauthorized = { message: "UNAUTHORIZED" }
+
+const fileOf = (name, text = "%PDF-1.4") => new File([text], name, { type: "application/pdf" })
+
+void test("amounts are written in Italian words, as receipts print them", () => {
+  assert.equal(fees.amountInWords(1000), "dieci/00")
+  assert.equal(fees.amountInWords(2550), "venticinque/50")
+  assert.equal(fees.amountInWords(2100), "ventuno/00")
+  assert.equal(fees.amountInWords(2300), "ventitré/00")
+  assert.equal(fees.amountInWords(10800), "centotto/00")
+  assert.equal(fees.amountInWords(18000), "centottanta/00")
+  assert.equal(fees.amountInWords(100000), "mille/00")
+  assert.equal(fees.amountInWords(123456), "milleduecentotrentaquattro/56")
+  assert.equal(fees.amountInWords(300000), "tremila/00")
+})
+
+void test("euro amounts parse from what people type, in cents", () => {
+  assert.equal(fees.parseEuros("10"), 1000)
+  assert.equal(fees.parseEuros("10.5"), 1050)
+  assert.equal(fees.parseEuros("€ 10,00"), 1000)
+  assert.equal(fees.parseEuros("0"), null)
+  assert.equal(fees.parseEuros("ten"), null)
+  assert.equal(fees.formatCents(1000), "€10.00")
+})
+
+void test("signed files are matched by the receipt number in their name", () => {
+  assert.equal(fees.receiptNumberFromFileName("Ricevuta_2026-042_firmata.pdf"), "2026/042")
+  assert.equal(fees.receiptNumberFromFileName("ricevuta 2026_007.pdf.p7m"), "2026/007")
+  assert.equal(fees.receiptNumberFromFileName("2026042.pdf"), "2026/042")
+  assert.equal(fees.receiptNumberFromFileName("Scansione 14-10.pdf"), null)
+  assert.equal(fees.receiptNumberFromFileName(fees.receiptFileName("2026/120", true)), "2026/120")
+  assert.equal(fees.nextReceiptNumber("2026/27", ["2025/090", "2026/041", "2026/009"]), "2026/042")
+  assert.equal(fees.nextReceiptNumber("2027/28", ["2026/041"]), "2027/001")
+})
+
+void test("approving a transfer receipt marks the fee paid and issues a receipt to sign", async () => {
+  const people = await president.listPeople()
+  const member = people.find((person) => person.member?.fee === "receipt")
+  assert.ok(member, "the fixtures hold a receipt to review")
+  const review = await president.getFeeReview({ personId: member.id })
+  assert.ok(review.fee.upload)
+  const { receipt } = await president.approveFee({ personId: member.id })
+  assert.equal(receipt, review.nextReceipt)
+
+  const record = await president.getPerson(member.id)
+  assert.equal(record.member?.fee, "paid")
+  assert.equal(record.fees?.current?.upload, null)
+  assert.equal(record.fees?.receipts[0]?.number, receipt)
+  assert.equal(record.fees?.receipts[0]?.status, "toSign")
+  assert.ok(record.activity.some((entry) => entry.text.includes(`issued receipt ${receipt}`)))
+})
+
+void test("a rejected receipt goes back to the member with the reason", async () => {
+  const member = (await president.listPeople()).find((person) => person.member?.fee === "receipt")
+  assert.ok(member)
+  await president.rejectFee({ personId: member.id, reason: "The amount is €1.00." })
+  const record = await president.getPerson(member.id)
+  assert.ok(record.member?.fee === "due" || record.member?.fee === "unpaid")
+  assert.equal(record.fees?.current?.rejection?.reason, "The amount is €1.00.")
+  await assert.rejects(president.approveFee({ personId: member.id }), {
+    message: "There is no transfer receipt to review.",
+  })
+})
+
+void test("the President's own receipt is signed by the Vice-president", async () => {
+  const { receipts, viewerSigner } = await president.listReceipts({ year: null })
+  assert.equal(viewerSigner, "president")
+  const own = receipts.find((receipt) => receipt.person.id === OFFICERS.president && receipt.status === "toSign")
+  assert.ok(own, "the President's receipt waits for a signature")
+  assert.equal(own.signer, "vicePresident")
+
+  const upload = await president.previewSignedReceipts([fileOf(fees.receiptFileName(own.number, true))])
+  assert.equal(upload.files[0]?.receiptId, own.id)
+  await assert.rejects(president.sendSignedReceipts({ uploadId: upload.uploadId, assignments: { f1: own.id } }), {
+    message: `Receipt ${own.number} needs another signer.`,
+  })
+  const again = await vicePresident.previewSignedReceipts([fileOf(fees.receiptFileName(own.number, true))])
+  const result = await vicePresident.sendSignedReceipts({ uploadId: again.uploadId, assignments: { f1: own.id } })
+  assert.deepEqual(result, { sent: 1, failed: 0 })
+})
+
+void test("unsigned files are refused and signed ones are emailed", async () => {
+  const { receipts } = await president.listReceipts({ year: null })
+  const waiting = receipts.filter((receipt) => receipt.status === "toSign" && receipt.signer === "president")
+  assert.ok(waiting.length >= 2)
+  const [first, second] = waiting
+  const upload = await president.previewSignedReceipts([
+    fileOf(fees.receiptFileName(first.number)),
+    fileOf("Scansione.pdf", "%PDF-1.4 /ByteRange [0 1 2 3]"),
+  ])
+  assert.equal(upload.files[0]?.signature.valid, false)
+  assert.equal(upload.files[1]?.receiptId, null)
+  assert.equal(upload.files[1]?.signature.valid, true)
+  await assert.rejects(president.sendSignedReceipts({ uploadId: upload.uploadId, assignments: { f1: first.id } }), {
+    message: `${fees.receiptFileName(first.number)} isn't signed.`,
+  })
+  const sent = await president.sendSignedReceipts({ uploadId: upload.uploadId, assignments: { f2: second.id } })
+  assert.equal(sent.sent + sent.failed, 1)
+  const after = (await president.listReceipts({ year: null })).receipts.find((receipt) => receipt.id === second.id)
+  assert.ok(after?.status === "sent" || after?.status === "failed")
+  assert.equal(after?.signedBy, "Marta Colombo")
+})
+
+void test("fee actions need their permissions", async () => {
+  const reader = fakePeopleApi({ permissions: ["people:read", "people:members:read"], personId: null })
+  const someone = (await president.listPeople()).find((person) => person.member?.fee === "due")
+  assert.ok(someone)
+  await assert.rejects(reader.remindFees({ personId: someone.id }), unauthorized)
+  await assert.rejects(reader.downloadReceiptsToSign(), unauthorized)
+  const page = await reader.listReceipts({ year: null })
+  assert.equal(page.viewerSigner, null)
+  // Signing needs the office too, not just the permission.
+  const officerless = fakePeopleApi({ permissions: ALL, personId: "P-0034" })
+  await assert.rejects(officerless.downloadReceiptsToSign(), {
+    message: "Only the President and the Vice-president sign receipts.",
+  })
+})
+
+void test("members download only their own signed receipts", async () => {
+  const { receipts } = await president.listReceipts({ year: null })
+  const sent = receipts.find((receipt) => receipt.status === "sent")
+  const other = receipts.find((receipt) => receipt.status === "sent" && receipt.person.id !== sent?.person.id)
+  assert.ok(sent && other)
+  const member = fakePeopleApi({ permissions: ["people:self"], personId: sent.person.id })
+  const file = await member.downloadMyReceipt({ receiptId: sent.id })
+  assert.equal(file.contentType, "application/pdf")
+  assert.ok(Buffer.from(file.base64, "base64").toString("latin1").startsWith("%PDF-1.4"))
+  await assert.rejects(member.downloadMyReceipt({ receiptId: other.id }), {
+    message: "This receipt no longer exists.",
+  })
+})
+
+void test("reminders skip members reminded in the last three days", async () => {
+  const first = await president.remindFees({ personId: null })
+  assert.ok(first.sent > 0)
+  const second = await president.remindFees({ personId: null })
+  assert.equal(second.sent, 0)
+  assert.equal(second.skipped, first.sent + first.skipped)
+})
+
+void test("a signed file is sent only when its receipt is the viewer's to sign", () => {
+  const toSign = { status: "toSign", signer: "president" }
+  const outcome = (overrides) =>
+    fees.signedFileOutcome({ signed: true, receipt: toSign, viewerSigner: "president", duplicate: false, ...overrides })
+  assert.equal(outcome({}), "ready")
+  assert.equal(outcome({ receipt: null }), "noReceipt")
+  assert.equal(outcome({ duplicate: true }), "duplicate")
+  assert.equal(outcome({ receipt: { status: "sent", signer: "president" } }), "notToSign")
+  assert.equal(outcome({ receipt: { status: "toSign", signer: "vicePresident" } }), "otherSigner")
+  assert.equal(outcome({ signed: false }), "notSigned")
+})
diff --git a/tests/server-security.test.mjs b/tests/server-security.test.mjs
index d4872e5..777f54a 100644
--- a/tests/server-security.test.mjs
+++ b/tests/server-security.test.mjs
@@ -197,6 +197,8 @@ test("dashboard server functions attach their scoped authorization middleware",
     "src/features/people/people-census.functions.ts",
     "src/features/people/people-capo.functions.ts",
     "src/features/people/people-self.functions.ts",
+    "src/features/people/people-fees.functions.ts",
+    "src/features/people/people-receipts.functions.ts",
   ]
 
   for (const file of adminFunctionFiles) {
@@ -207,7 +209,9 @@ test("dashboard server functions attach their scoped authorization middleware",
       assert.ok(serverFunction.isExported, `${file}:${serverFunction.name} must be exported`)
       assert.ok(
         serverFunction.middleware.includes("adminMiddleware") ||
-          serverFunction.middleware.some((name) => /(?:Read|Write|Manage|Create|Self|Appoint)Middleware$/.test(name)),
+          serverFunction.middleware.some((name) =>
+            /(?:Read|Write|Manage|Create|Self|Appoint|Sign)Middleware$/.test(name)
+          ),
         `${file}:${serverFunction.name} must authorize access`
       )
     }
@@ -215,6 +219,13 @@ test("dashboard server functions attach their scoped authorization middleware",
 })
 
 test("dashboard mutations enforce their exact write scope", async () => {
+  // Receipt preparation joins two domains; manual signing keeps its original People scope.
+  const combinedScopes = {
+    "src/features/people/people-receipts.functions.ts:prepareReceiptSignatures": [
+      "peopleReceiptsSignMiddleware",
+      "esignSignWriteMiddleware",
+    ],
+  }
   const entries = [
     ["azureMembersCreateMiddleware", ["src/features/azure/azure.functions.ts"]],
     ["azureGroupsWriteMiddleware", ["src/features/azure/groups.functions.ts"]],
@@ -240,6 +251,8 @@ test("dashboard mutations enforce their exact write scope", async () => {
       ["src/features/people/people-write.functions.ts", "src/features/people/people-census.functions.ts"],
     ],
     ["peopleMembersWriteMiddleware", ["src/features/people/people-members.functions.ts"]],
+    ["peopleFeesWriteMiddleware", ["src/features/people/people-fees.functions.ts"]],
+    ["peopleReceiptsSignMiddleware", ["src/features/people/people-receipts.functions.ts"]],
     ["peopleAppointMiddleware", ["src/features/people/people-appoint.functions.ts"]],
     ["peopleTeamWriteMiddleware", ["src/features/people/people-teams.functions.ts"]],
     [
@@ -256,7 +269,7 @@ test("dashboard mutations enforce their exact write scope", async () => {
       for (const mutation of mutations) {
         assert.deepEqual(
           mutation.middleware,
-          [expectedMiddleware],
+          combinedScopes[`${file}:${mutation.name}`] ?? [expectedMiddleware],
           `${file}:${mutation.name} must use its dedicated middleware`
         )
       }
@@ -288,12 +301,19 @@ test("dashboard mutation controls use their server's write scope", async () => {
     "src/features/guides/guides-page.tsx": "web:content:write",
     "src/features/projects/projects-page.tsx": "web:content:write",
     "src/features/people/overview-page.tsx": "people:write",
-    "src/features/people/person-page.tsx": ["people:write", "people:read", "people:members:write", "people:appoint"],
+    "src/features/people/person-page.tsx": [
+      "people:write",
+      "people:read",
+      "people:members:write",
+      "people:appoint",
+      "people:fees:write",
+    ],
     "src/features/people/admins-page.tsx": ["people:write", "people:appoint"],
     "src/features/people/teams-page.tsx": ["people:read", "people:write", "people:appoint"],
     "src/features/people/census-page.tsx": ["people:write", "people:read"],
     "src/features/people/linking-page.tsx": "people:write",
-    "src/features/people/members-page.tsx": "people:members:write",
+    "src/features/people/members-page.tsx": ["people:members:write", "people:fees:write"],
+    "src/features/people/receipts-page.tsx": ["people:receipts:sign", "people:fees:write", "esign:sign"],
   }
   const directory = new URL("../src", import.meta.url).pathname
   const checked = new Set()
@@ -347,6 +367,10 @@ test("event handlers integrate protected server-function redirects with the rout
     "src/features/people/team-dialogs.tsx": ["addTeamMember", "updateTeamFields", "endTeamMembership"],
     "src/features/people/admin-dialogs.tsx": ["endAdminRole", "setCapoOfReference", "setCapoScope"],
     "src/features/people/member-dialogs.tsx": ["createMember", "setMemberStatus", "setMemberNumber", "exportMembers"],
+    "src/features/people/fee-dialogs.tsx": ["approveFee", "rejectFee", "markFeePaid", "sendFeeReminders"],
+    "src/features/people/receipts-page.tsx": ["downloadReceiptsToSign", "retryReceipt", "prepareReceiptSignatures"],
+    "src/features/people/receipt-dialogs.tsx": ["previewSignedReceipts", "sendSignedReceipts", "voidReceipt"],
+    "src/features/people/my-fee-card.tsx": ["uploadMyTransferReceipt"],
     "src/features/azure/membership-dialog.tsx": ["addAzureGroupMember", "removeAzureGroupMember"],
     "src/features/esign/new-request-page.tsx": [
       "uploadEsignDocument",