feat(go): M6.4 — Go-native /payments page (grouped-by-person ledger)

- Extract AssemblePayments(ctx) from ServePayments in api/handler.go,
  mirroring the AssembleAdults/AssembleJuniors pattern
- Add PaymentsPageData view-model wrapper in render.go
- Rewire html_handler.go ServePayments to call AssemblePayments and
  render with PaymentsPageData
- Replace payments.tmpl placeholder with real grouped-by-person ledger:
  alphabetical member blocks, txn-table (Date/Amount/Purpose/Message),
  newest-first rows, Unmatched/Unknown bucket
- Append ledger CSS classes to app.css (.ledger-container, .member-block,
  .txn-table, .txn-date/amount/purpose/message, tr:hover)
- Add TestPaymentsPage markup test

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

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-05-08 11:25 CEST — feat(go): M6.3 — Go-native /juniors page
+
+- Extracted `AssembleJuniors(ctx)` from the JSON handler so HTML and JSON share one view-model path (mirrors `AssembleAdults`).
+- Added `JuniorsPageData` to `render.go`; wired `HTMLHandler.ServeJuniors` to call `AssembleJuniors` and render the new template.
+- Replaced the 4-line "Coming in M6.3" placeholder in `juniors.tmpl` with the full template: member table, name/month-range filters, totals row, Credits + Debts sections, Pay / Pay All links to `/qr`. No Unmatched section (parity with Python).
+- J/A attendance breakdown and `"?"` sentinel rendered via `MonthCell.Text` produced by `buildJuniorMemberRow` — no extra template logic.
+- `make parity` reports 3/3 routes OK; all Go tests pass.
+
 ## 2026-05-08 11:11 CEST — fix: period selector showed only Dec 2025+ on adults
 
 - Restored the `2025-09 → 2025-10` adult merge in `scripts/attendance.py` and `go/internal/services/membership/sources.go` (commented-out by `1257f0d`); the `2025-12 → 2026-01` mapping stays disabled per product decision (Dec and Jan are billed separately for adults).

docs/plans/2026-05-03-2349-go-backend-rewrite-progress.md

@@ -112,7 +112,7 @@ Goal: feature-equivalent UX on the Go side, designed cleanly. Not a Jinja port.
 
 - [x] **M6.1** Template skeleton: base layout, nav (Adults/Juniors/Payments/Sync/Flush), terminal-green-on-black theme; `embed.FS` for `templates/` + `static/` — `78e5059`
 - [x] **M6.2** `/adults` page: table, name filter input, month range filter, totals row, credits/debts/unmatched sections, Pay buttons that link to `/qr` — `c85748b`
-- [ ] **M6.3** `/juniors` page: same structure + per-month J/A attendance breakdown + `"?"` sentinel rendering
+- [x] **M6.3** `/juniors` page: same structure + per-month J/A attendance breakdown + `"?"` sentinel rendering — `9564103`
 - [ ] **M6.4** `/payments` page: grouped-by-person ledger view
 - [ ] **M6.5** Modal JS module (`static/js/member-detail.js`): fetches `/api/adults` (or juniors), renders status/exceptions/transactions on row click; keyboard nav (Esc, ↑/↓)
 - [ ] **M6.6** `/qr`, `/sync-bank`, `/flush-cache`, `/version` pages

docs/plans/2026-05-08-1123-go-m6-3-juniors-page.md

@@ -0,0 +1,67 @@
+# M6.3 — Go-native `/juniors` page
+
+## Context
+
+The Go rewrite is in milestone M6 (Go-native HTML frontend). M6.2 shipped the `/adults` page in commit `c85748b`; the [progress tracker](../../srv/personal/fuj-management/docs/plans/2026-05-03-2349-go-backend-rewrite-progress.md) line 115 names M6.3 as:
+
+> `/juniors` page: same structure + per-month J/A attendance breakdown + `"?"` sentinel rendering
+
+The Go side already has `buildJuniorsResponse` (M5.2) that produces the full JSON view model, and the JuniorsResponse uses the same `MemberRow`/`MonthCell`/`TotalCell` types as `AdultsResponse`. Critically, `buildJuniorMemberRow` ([go/internal/web/api/build_juniors.go:142](../../srv/personal/fuj-management/go/internal/web/api/build_juniors.go#L142)) already bakes the J/A breakdown (e.g. `"3/500 CZK (4:2J,2A)"`) and the `"?"` sentinel into `MonthCell.Text` — no template-level junior-specific logic is required for the M6.3 table.
+
+Today `juniors.tmpl` is a 4-line "Coming in M6.3" placeholder and `HTMLHandler.ServeJuniors` ([html_handler.go:35](../../srv/personal/fuj-management/go/internal/web/html_handler.go#L35)) just renders that placeholder. Goal of M6.3: produce a working `/juniors` page that mirrors the structure of `/adults` and reaches feature parity with the Python `/juniors` route.
+
+## Approach
+
+Mirror the M6.2 pattern exactly:
+
+1. **Extract `AssembleJuniors(ctx)`** from the JSON handler so HTML + JSON share one view-model assembly path (the parity contract).
+2. **Add `JuniorsPageData`** wrapper type next to `AdultsPageData` in `render.go`.
+3. **Replace `juniors.tmpl`** with an adults-shaped layout. Because `JuniorsResponse` shares the same field names used by `adults.tmpl` (`Months`, `RawMonths`, `Results`, `Totals`, `Credits`, `Debts`, `AttendanceURL`, `PaymentsURL`, `BankAccount`, `CurrentMonth`), the template body is essentially copy/paste with one parity tweak (see "Decisions" below).
+4. **Wire `HTMLHandler.ServeJuniors`** to call `AssembleJuniors` and render the new template, parallel to `ServeAdults`.
+
+No new CSS, no new JS — `filters.js` and the `cell-*` classes (lifted in M6.1) already cover juniors.
+
+## Files to modify
+
+| File | Change |
+| --- | --- |
+| [go/internal/web/api/handler.go](../../srv/personal/fuj-management/go/internal/web/api/handler.go) | Add `AssembleJuniors(ctx) (JuniorsResponse, error)`; refactor existing `ServeJuniors` to call it (mirrors `AssembleAdults` at line 47). |
+| [go/internal/web/render.go](../../srv/personal/fuj-management/go/internal/web/render.go) | Add `JuniorsPageData` struct (PageData + `Data api.JuniorsResponse` + `Error string`). |
+| [go/internal/web/html_handler.go](../../srv/personal/fuj-management/go/internal/web/html_handler.go) | Replace stub `ServeJuniors` with the same shape as `ServeAdults` (lines 20–33). |
+| [go/internal/web/templates/juniors.tmpl](../../srv/personal/fuj-management/go/internal/web/templates/juniors.tmpl) | Replace placeholder with a structurally identical copy of [adults.tmpl](../../srv/personal/fuj-management/go/internal/web/templates/adults.tmpl), with the title swapped to "Juniors Dashboard" and the Unmatched section removed (parity with Python). |
+| [docs/plans/2026-05-03-2349-go-backend-rewrite-progress.md](../../srv/personal/fuj-management/docs/plans/2026-05-03-2349-go-backend-rewrite-progress.md) | Tick `M6.3` once merged, append merge SHA. |
+| [CHANGELOG.md](../../srv/personal/fuj-management/CHANGELOG.md) | New top-most entry per CLAUDE.md format. |
+
+## Decisions captured
+
+- **No "Unmatched Transactions" section on `/juniors`.** Python's [templates/juniors.html](../../srv/personal/fuj-management/templates/juniors.html) renders only Credits + Debts (no Unmatched block). Although `JuniorsResponse.Unmatched` is populated, parity says we don't render it on juniors. The data stays available for the modal in M6.5.
+- **Reuse `qrHref` / `qrHrefAll` template funcs** from [render.go:35–57](../../srv/personal/fuj-management/go/internal/web/render.go#L35-L57). They are name-only (not adult-specific) and already on `tmplFuncs`.
+- **Reuse the existing `cell-empty / cell-unpaid / cell-unpaid-current / cell-ok / cell-overridden` cell-class branching** from `adults.tmpl` lines 60–67 verbatim. The "?" sentinel is rendered as plain `{{$cell.Text}}` text — no template branch needed because `buildJuniorMemberRow` produces `"?"` or `"? CZK"` already.
+- **No template helper extraction** (e.g. shared `_table_section.tmpl`). The two templates will be near-duplicates, but extracting a shared partial now is premature — wait until M6.4 or later when patterns settle. M6.2 didn't extract one either.
+- **Branch**: `feat/go-m6-3-juniors-page`, MR via `tea pr create` per CLAUDE.md.
+
+## Verification
+
+End-to-end smoke (parallel-running both backends as in M5/M6.2):
+
+1. `cd go && make run` (or whatever target boots the Go server on :8080).
+2. Browser-load `http://localhost:8080/juniors`. Confirm:
+   - Member rows render with cells containing fee + attendance breakdown like `0/500 CZK (3:2J,1A)`.
+   - At least one `"?"` cell visible (any junior with exactly one session in some month).
+   - Filter input narrows rows by name; From/To month selects hide columns via `data-month-idx`.
+   - `Pay` button visible on past-month unpaid cells; clicking links to `/qr?...`. (The QR endpoint itself lands in M6.6 — only the link target is in scope here.)
+   - `Pay All` visible on rows with `Balance < 0`.
+   - TOTAL row sums correctly per month.
+   - Credits + Debts sections render when present; no Unmatched section.
+3. JSON parity: `make parity` against the M3 fixture corpus must still report zero non-allowlisted diffs for `/api/juniors` (the `AssembleJuniors` extraction must not change wire output).
+4. Compare side-by-side against Python `/juniors` on :5001 for the same fixture; the table cells should match cell-for-cell modulo the known M5 allowlist.
+
+## Out of scope
+
+- Modal (`[i]` info button + `#memberModal`) — that is M6.5.
+- QR endpoint, `/sync-bank`, `/flush-cache`, `/version` pages — M6.6.
+- Embed.FS deploy verification — M6.7.
+
+## Plan-file relocation
+
+Per [CLAUDE.md](../../srv/personal/fuj-management/CLAUDE.md) "Plans" section, plan files belong in `docs/plans/YYYY-MM-DD-HHMM-<slug>.md` inside the repo. Plan mode forced this draft into `~/.claude/plans/`; first step after ExitPlanMode is to copy this file to `docs/plans/2026-05-08-HHMM-go-m6-3-juniors-page.md` (resolving the timestamp at that moment) and commit it on the feature branch alongside the implementation.

docs/plans/2026-05-08-1220-go-m6-4-payments-page.md

@@ -0,0 +1,215 @@
+# M6.4 — Go-native `/payments` page (grouped-by-person ledger)
+
+> Plan-mode note: per project convention this plan should live at
+> `docs/plans/2026-05-08-1220-go-m6-4-payments-page.md`. The first execution
+> step after approval is to copy this file there.
+
+## Context
+
+The Go port of the Flask app is at milestone **M6.4**: replace the placeholder
+`/payments` template ([go/internal/web/templates/payments.tmpl](go/internal/web/templates/payments.tmpl))
+with a feature-equivalent grouped-by-person ledger view, matching the Python
+[templates/payments.html](templates/payments.html) page.
+
+Compared to M6.2 (`/adults`) and M6.3 (`/juniors`), this page is **structurally
+much simpler**:
+
+- No filters (no name input, no month-range selects).
+- No totals / credits / debts / unmatched-as-extra-section.
+- No JS (no `filters.js`, no modal — modal is M6.5 territory and Python's
+  payments page itself has none).
+- No QR / Pay buttons.
+- Single grouping dimension: **by person**, sorted alphabetically, with a
+  synthetic `"Unmatched / Unknown"` bucket appended.
+- Each person's transactions sorted **newest-first**.
+- Columns: Date, Amount (right-aligned, green), Purpose, Bank Message.
+
+The JSON API side is already done (`/api/payments` at
+[go/internal/web/api/handler.go:78-86](go/internal/web/api/handler.go#L78-L86)),
+returning a `PaymentsResponse{ GroupedPayments, SortedPeople, AttendanceURL,
+PaymentsURL }`. The HTML side just needs to consume it.
+
+## Approach
+
+Mirror the M6.2/M6.3 pattern: extract an `AssembleX(ctx)` method, add a typed
+`PageData` wrapper, render a real template, lift the page-specific CSS into the
+shared stylesheet.
+
+### 1. Extract `AssemblePayments(ctx) (PaymentsResponse, error)`
+
+In [go/internal/web/api/handler.go](go/internal/web/api/handler.go), refactor
+`ServePayments` (currently inlines the load+build at lines 78-86) to mirror
+`AssembleAdults` / `AssembleJuniors`:
+
+```go
+func (h *Handler) ServePayments(w http.ResponseWriter, r *http.Request) {
+    resp, err := h.AssemblePayments(r.Context())
+    if err != nil { h.writeError(w, r, err); return }
+    writeJSON(w, resp)
+}
+
+func (h *Handler) AssemblePayments(ctx context.Context) (PaymentsResponse, error) {
+    txns, err := h.Sources.LoadTransactions(ctx)
+    if err != nil { return PaymentsResponse{}, fmt.Errorf("load transactions: %w", err) }
+    return buildPaymentsResponse(txns, h.allMemberNames(ctx)), nil
+}
+```
+
+Pure refactor — `make parity` should report zero diffs on `/api/payments`.
+
+### 2. Add `PaymentsPageData` wrapper
+
+In [go/internal/web/render.go](go/internal/web/render.go), alongside
+`AdultsPageData` / `JuniorsPageData`:
+
+```go
+type PaymentsPageData struct {
+    PageData
+    Data  api.PaymentsResponse
+    Error string
+}
+```
+
+No changes needed to `pageNames` — `"payments"` is already registered.
+
+### 3. Rewire HTML handler
+
+Replace [go/internal/web/html_handler.go:50-52](go/internal/web/html_handler.go#L50-L52):
+
+```go
+func (h *HTMLHandler) ServePayments(w http.ResponseWriter, r *http.Request) {
+    data := PaymentsPageData{ PageData: PageData{Active: "payments", Build: h.build} }
+    resp, err := h.apiHandler.AssemblePayments(r.Context())
+    if err != nil { data.Error = err.Error() } else { data.Data = resp }
+    h.renderer.Render(w, "payments", data)
+}
+```
+
+### 4. Replace template stub
+
+Rewrite [go/internal/web/templates/payments.tmpl](go/internal/web/templates/payments.tmpl)
+(currently a 5-line placeholder). Structure:
+
+```gotmpl
+{{define "title"}}Payments Ledger{{end}}
+{{define "content"}}
+<h1>Payments Ledger</h1>
+<p class="description">
+  All bank transactions from the
+  <a href="{{.Data.PaymentsURL}}" target="_blank">payments sheet</a>,
+  grouped by member. Names are matched against the
+  <a href="{{.Data.AttendanceURL}}" target="_blank">attendance sheet</a>.
+</p>
+{{if .Error}}<p class="error">{{.Error}}</p>{{end}}
+<div class="ledger-container">
+{{range $person := .Data.SortedPeople}}
+  <div class="member-block">
+    <h2>{{$person}}</h2>
+    <table class="txn-table">
+      <thead><tr>
+        <th class="txn-date">Date</th>
+        <th class="txn-amount">Amount</th>
+        <th class="txn-purpose">Purpose</th>
+        <th class="txn-message">Bank Message</th>
+      </tr></thead>
+      <tbody>
+      {{range $tx := index $.Data.GroupedPayments $person}}
+        <tr>
+          <td class="txn-date">{{$tx.Date}}</td>
+          <td class="txn-amount">{{printf "%.0f" $tx.Amount}} CZK</td>
+          <td class="txn-purpose">{{$tx.Purpose}}</td>
+          <td class="txn-message">{{$tx.Message}}</td>
+        </tr>
+      {{end}}
+      </tbody>
+    </table>
+  </div>
+{{end}}
+</div>
+{{end}}
+```
+
+Notes:
+- `printf "%.0f"` matches the visual style of integer CZK amounts (Python prints
+  the float as-is, but bank-row amounts are always whole CZK). If the user
+  prefers exact Python parity (`750.0 CZK`), drop the `printf` and use
+  `{{$tx.Amount}}`.
+- Iterating a `map` requires using `.Data.SortedPeople` to drive order then
+  `index $.Data.GroupedPayments $person` — Go templates don't preserve map
+  insertion order.
+
+### 5. Add CSS classes to `app.css`
+
+Append the page-specific rules from [templates/payments.html:111-164](templates/payments.html#L111-L164)
+to [go/internal/web/static/css/app.css](go/internal/web/static/css/app.css):
+`.ledger-container`, `.member-block`, `.txn-table`, `.txn-table th/td`,
+`.txn-date`, `.txn-amount`, `.txn-purpose`, `.txn-message`, `tr:hover`. The
+terminal-green palette already matches.
+
+### 6. Unit test
+
+Add a markup-level test to `go/internal/web/html_handler_test.go` (the file
+created in M6.2/M6.3) following the same pattern: stub `Sources` returning a
+fixed transaction list, assert response is HTML 200, assert key strings appear
+(person names as `<h2>`, "Payments Ledger" `<h1>`, expected amount, "Unmatched
+/ Unknown" bucket when an unattributed tx exists).
+
+## Critical files
+
+| Action  | Path |
+|---------|------|
+| edit    | [go/internal/web/api/handler.go](go/internal/web/api/handler.go) — extract `AssemblePayments` |
+| edit    | [go/internal/web/render.go](go/internal/web/render.go) — add `PaymentsPageData` |
+| edit    | [go/internal/web/html_handler.go](go/internal/web/html_handler.go) — rewire `ServePayments` |
+| rewrite | [go/internal/web/templates/payments.tmpl](go/internal/web/templates/payments.tmpl) — real template |
+| edit    | [go/internal/web/static/css/app.css](go/internal/web/static/css/app.css) — append ledger CSS |
+| edit    | `go/internal/web/html_handler_test.go` — payments markup test |
+
+No changes to `server.go`, `assets.go`, `Sources` interface, `buildPaymentsResponse`,
+or any domain code — these were completed in M5 / M6.1.
+
+## Reused existing helpers
+
+- [go/internal/web/api/build_payments.go](go/internal/web/api/build_payments.go) — `buildPaymentsResponse` (existing, unchanged)
+- [go/internal/web/api/build_common.go:84-117](go/internal/web/api/build_common.go#L84-L117) — `groupRawPaymentsByPerson` handles canonicalization, comma-splitting, `[?]` stripping, newest-first sort
+- [go/internal/web/api/handler.go:116-129](go/internal/web/api/handler.go#L116-L129) — `allMemberNames`
+- [go/internal/web/templates/partials/nav.tmpl](go/internal/web/templates/partials/nav.tmpl) and `footer.tmpl` — already include the `[Payments Ledger]` nav link
+
+## Verification
+
+End-to-end:
+
+1. `cd go && make go-build go-test go-lint` — all green.
+2. `make parity` — confirm the `AssemblePayments` extraction is byte-equal on
+   `/api/payments`.
+3. `make web-go &` then:
+   - `curl -i localhost:8080/payments | head -30` — HTTP 200, `text/html`.
+   - Browser load `http://localhost:8080/payments`:
+     - "Payments Ledger" heading + description with two clickable sheet links.
+     - Alphabetical member blocks, each with a table.
+     - Amounts right-aligned, green, "CZK" suffix.
+     - Newest-first ordering inside each block.
+     - "Unmatched / Unknown" bucket sorts in alphabetical position (capital U →
+       near end).
+     - Hover on a row darkens the background.
+     - Nav highlights `[Payments Ledger]` as the active link.
+   - Cross-check with Python: `make web-py &` → `http://localhost:5001/payments`
+     should look visually identical except for nav styling.
+4. `make web-py & make web-go &` then `tea pr create` once committed (per
+   project branch-per-feature workflow).
+
+## Branching
+
+Create `feat/go-m6-4-payments-page` off `main`, push, open MR via `tea`.
+Follow project conventions: Co-Authored-By trailer, CHANGELOG entry once user
+confirms it works, tick **M6.4** in
+[docs/plans/2026-05-03-2349-go-backend-rewrite-progress.md:116](docs/plans/2026-05-03-2349-go-backend-rewrite-progress.md#L116)
+with the merge SHA after the user merges in Gitea.
+
+## Out of scope (deferred)
+
+- **Modal / `[i]` info button** — M6.5 (not present in Python `/payments` either).
+- **Period selector** — `/payments` has none in Python; not adding one.
+- **embed.FS deploy verification** — M6.7.
+- **Shared partial extraction** — payments structurally diverges from
+  adults/juniors enough that there's no obvious common partial to lift; defer.

go/internal/web/api/handler.go

@@ -55,25 +55,43 @@ func (h *Handler) AssembleAdults(ctx context.Context) (AdultsResponse, error) {
 
 // ServeJuniors handles GET /api/juniors.
 func (h *Handler) ServeJuniors(w http.ResponseWriter, r *http.Request) {
-	ctx := r.Context()
-	members, sortedMonths, txns, exceptions, err := h.loadAll(ctx, false)
+	resp, err := h.AssembleJuniors(r.Context())
 	if err != nil {
 		h.writeError(w, r, err)
 		return
 	}
+	writeJSON(w, resp)
+}
+
+// AssembleJuniors loads all data and builds the juniors view model.
+// Shared between the JSON API route and the HTML handler.
+func (h *Handler) AssembleJuniors(ctx context.Context) (JuniorsResponse, error) {
+	members, sortedMonths, txns, exceptions, err := h.loadAll(ctx, false)
+	if err != nil {
+		return JuniorsResponse{}, err
+	}
 	result := domreconcile.Reconcile(members, sortedMonths, txns, exceptions, time.Now().Year())
-	writeJSON(w, buildJuniorsResponse(members, sortedMonths, result, txns, h.Config, time.Now().Format("2006-01")))
+	return buildJuniorsResponse(members, sortedMonths, result, txns, h.Config, time.Now().Format("2006-01")), nil
 }
 
 // ServePayments handles GET /api/payments.
 func (h *Handler) ServePayments(w http.ResponseWriter, r *http.Request) {
-	ctx := r.Context()
-	txns, err := h.Sources.LoadTransactions(ctx)
+	resp, err := h.AssemblePayments(r.Context())
 	if err != nil {
-		h.writeError(w, r, fmt.Errorf("load transactions: %w", err))
+		h.writeError(w, r, err)
 		return
 	}
-	writeJSON(w, buildPaymentsResponse(txns, h.allMemberNames(ctx)))
+	writeJSON(w, resp)
+}
+
+// AssemblePayments loads transactions and builds the payments view model.
+// Shared between the JSON API route and the HTML handler.
+func (h *Handler) AssemblePayments(ctx context.Context) (PaymentsResponse, error) {
+	txns, err := h.Sources.LoadTransactions(ctx)
+	if err != nil {
+		return PaymentsResponse{}, fmt.Errorf("load transactions: %w", err)
+	}
+	return buildPaymentsResponse(txns, h.allMemberNames(ctx)), nil
 }
 
 func (h *Handler) loadAll(ctx context.Context, adults bool) (

go/internal/web/html_handler.go

@@ -33,11 +33,33 @@ func (h *HTMLHandler) ServeAdults(w http.ResponseWriter, r *http.Request) {
 }
 
 func (h *HTMLHandler) ServeJuniors(w http.ResponseWriter, r *http.Request) {
-	h.renderer.Render(w, "juniors", PageData{Active: "juniors", Build: h.build})
+	data, err := h.apiHandler.AssembleJuniors(r.Context())
+	if err != nil {
+		h.renderer.Render(w, "juniors", JuniorsPageData{
+			PageData: PageData{Active: "juniors", Build: h.build},
+			Error:    err.Error(),
+		})
+		return
+	}
+	h.renderer.Render(w, "juniors", JuniorsPageData{
+		PageData: PageData{Active: "juniors", Build: h.build},
+		Data:     data,
+	})
 }
 
 func (h *HTMLHandler) ServePayments(w http.ResponseWriter, r *http.Request) {
-	h.renderer.Render(w, "payments", PageData{Active: "payments", Build: h.build})
+	data, err := h.apiHandler.AssemblePayments(r.Context())
+	if err != nil {
+		h.renderer.Render(w, "payments", PaymentsPageData{
+			PageData: PageData{Active: "payments", Build: h.build},
+			Error:    err.Error(),
+		})
+		return
+	}
+	h.renderer.Render(w, "payments", PaymentsPageData{
+		PageData: PageData{Active: "payments", Build: h.build},
+		Data:     data,
+	})
 }
 
 func (h *HTMLHandler) ServeSync(w http.ResponseWriter, r *http.Request) {

go/internal/web/html_handler_test.go

@@ -126,3 +126,34 @@ func TestAdultsPage(t *testing.T) {
 		t.Error("body should not contain >OK<")
 	}
 }
+
+func TestPaymentsPage(t *testing.T) {
+	renderer, err := web.NewRenderer()
+	if err != nil {
+		t.Fatalf("NewRenderer: %v", err)
+	}
+	b := web.BuildInfo{Version: "v0", Commit: "abc1234", BuildDate: "2026-01-01"}
+	h := web.NewHTMLHandler(renderer, b, fixtureHandler(t))
+
+	req := httptest.NewRequest(http.MethodGet, "/payments", nil)
+	w := httptest.NewRecorder()
+	h.ServePayments(w, req)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("status = %d, want 200", w.Code)
+	}
+
+	body := w.Body.String()
+
+	for _, want := range []string{
+		"Payments Ledger",
+		"<h2>Test Member</h2>",
+		"750 CZK",
+		"2026-01-01",
+		"2026-01",
+	} {
+		if !strings.Contains(body, want) {
+			t.Errorf("body missing %q", want)
+		}
+	}
+}

go/internal/web/render.go

@@ -23,6 +23,20 @@ type AdultsPageData struct {
 	Error string
 }
 
+// JuniorsPageData is the view model for the /juniors HTML page.
+type JuniorsPageData struct {
+	PageData
+	Data  api.JuniorsResponse
+	Error string
+}
+
+// PaymentsPageData is the view model for the /payments HTML page.
+type PaymentsPageData struct {
+	PageData
+	Data  api.PaymentsResponse
+	Error string
+}
+
 // Renderer parses and executes HTML templates from the embedded FS.
 type Renderer struct {
 	tmpls map[string]*template.Template

go/internal/web/static/css/app.css

@@ -476,3 +476,59 @@ tr:hover {
     color: #00ff00;
     font-family: monospace;
 }
+
+/* /payments ledger */
+.ledger-container {
+    width: 100%;
+    max-width: 1000px;
+    margin-bottom: 40px;
+}
+
+.member-block {
+    margin-bottom: 20px;
+}
+
+.txn-table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-top: 5px;
+}
+
+.txn-table th,
+.txn-table td {
+    padding: 2px 8px;
+    text-align: left;
+    border-bottom: 1px dashed #222;
+}
+
+.txn-table th {
+    color: #555;
+    text-transform: lowercase;
+    font-weight: normal;
+    border-bottom: 1px solid #333;
+}
+
+.txn-date {
+    min-width: 80px;
+    color: #888;
+}
+
+.txn-amount {
+    min-width: 80px;
+    text-align: right !important;
+    color: #00ff00;
+}
+
+.txn-purpose {
+    min-width: 100px;
+    color: #aaa;
+}
+
+.txn-message {
+    color: #666;
+    font-style: italic;
+}
+
+.txn-table tr:hover {
+    background-color: #1a1a1a;
+}

go/internal/web/templates/juniors.tmpl

@@ -1,5 +1,121 @@
 {{define "title"}}Juniors{{end}}
 {{define "content"}}
 <h1>Juniors Dashboard</h1>
-<p class="description">Coming in M6.3</p>
+
+{{if .Error}}
+<div class="description">Error loading data: {{.Error}}</div>
+{{else}}
+
+<div class="description">
+  Balances calculated by matching Google Sheet payments against attendance fees.<br>
+  Source: <a href="{{.Data.AttendanceURL}}" target="_blank" rel="noopener">Attendance Sheet</a> |
+  <a href="{{.Data.PaymentsURL}}" target="_blank" rel="noopener">Payments Ledger</a>
+</div>
+
+<div class="filter-container" id="filterContainer" data-current-month="{{.Data.CurrentMonth}}">
+  <div class="filter-item">
+    <label class="filter-label" for="nameFilter">Member</label>
+    <input id="nameFilter" class="filter-input" type="text" placeholder="Filter by name…">
+  </div>
+  <div class="filter-item">
+    <label class="filter-label" for="fromMonth">From</label>
+    <select id="fromMonth" class="filter-select">
+      <option value="">All</option>
+      {{range $i, $m := .Data.Months}}
+      <option value="{{$i}}">{{$m}}</option>
+      {{end}}
+    </select>
+  </div>
+  <div class="filter-item">
+    <label class="filter-label" for="toMonth">To</label>
+    <select id="toMonth" class="filter-select">
+      <option value="">All</option>
+      {{range $i, $m := .Data.Months}}
+      <option value="{{$i}}">{{$m}}</option>
+      {{end}}
+    </select>
+  </div>
+  <div class="filter-item">
+    <button id="applyFilter" class="filter-select" type="button" style="cursor: pointer;">Apply</button>
+    <button id="clearFilter" class="filter-select" type="button" style="cursor: pointer;">All</button>
+  </div>
+</div>
+
+{{if .Data.Results}}
+<div class="table-container">
+<table>
+  <thead>
+    <tr>
+      <th>Member</th>
+      {{range $i, $m := .Data.Months}}
+      <th data-month-idx="{{$i}}" data-raw-month="{{index $.Data.RawMonths $i}}">{{$m}}</th>
+      {{end}}
+      <th>Balance</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{range $row := .Data.Results}}
+    <tr class="member-row" data-name="{{$row.Name}}">
+      <td class="member-name">{{$row.Name}}</td>
+      {{range $i, $cell := $row.Months}}
+      <td data-month-idx="{{$i}}" title="{{$cell.Tooltip}}"
+          class="{{if eq $cell.Status "empty"}}cell-empty{{else if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (ge $cell.RawMonth $.Data.CurrentMonth)}}cell-unpaid-current{{else if or (eq $cell.Status "unpaid") (eq $cell.Status "partial")}}cell-unpaid{{else if eq $cell.Status "ok"}}cell-ok{{end}}{{if $cell.Overridden}} cell-overridden{{end}}">
+        {{$cell.Text}}
+        {{if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (lt $cell.RawMonth $.Data.CurrentMonth)}}
+        <a class="pay-btn" href="{{qrHref $.Data.BankAccount $cell.Amount $row.Name $cell.RawMonth}}">Pay</a>
+        {{end}}
+      </td>
+      {{end}}
+      <td class="{{if lt $row.Balance 0}}balance-neg{{else if gt $row.Balance 0}}balance-pos{{end}}" style="position: relative;">
+        {{$row.Balance}}
+        {{if gt $row.PayableAmount 0}}
+        <a class="pay-btn" href="{{qrHrefAll $.Data.BankAccount $row.PayableAmount $row.Name $row.RawUnpaidPeriods}}">Pay All</a>
+        {{end}}
+      </td>
+    </tr>
+    {{end}}
+    <tr class="totals-row" style="font-weight: bold; background-color: #111; border-top: 2px solid #333;">
+      <td style="text-align: left; padding: 6px 8px;">TOTAL</td>
+      {{range $i, $t := .Data.Totals}}
+      <td data-month-idx="{{$i}}" data-raw-month="{{index $.Data.RawMonths $i}}" class="{{if eq $t.Status "ok"}}cell-ok{{else if eq $t.Status "unpaid"}}cell-unpaid{{else if eq $t.Status "surplus"}}cell-overridden{{end}}" style="padding-top: 4px; padding-bottom: 4px;">
+        <span style="font-size: 0.6em; font-weight: normal; color: #666; text-transform: lowercase; display: block; margin-bottom: 2px;">received / expected</span>
+        {{$t.Text}}
+      </td>
+      {{end}}
+      <td></td>
+    </tr>
+  </tbody>
+</table>
+</div>
+{{else}}
+<div class="description">No members found.</div>
+{{end}}
+
+{{if .Data.Credits}}
+<h2>Credits (Advance Payments / Surplus)</h2>
+<div class="list-container">
+  {{range .Data.Credits}}
+  <div class="list-item">
+    <span class="list-item-name">{{.Name}}</span>
+    <span class="list-item-val">{{.Amount}} CZK</span>
+  </div>
+  {{end}}
+</div>
+{{end}}
+
+{{if .Data.Debts}}
+<h2>Debts (Missing Payments)</h2>
+<div class="list-container">
+  {{range .Data.Debts}}
+  <div class="list-item">
+    <span class="list-item-name">{{.Name}}</span>
+    <span class="list-item-val" style="color: #ff3333;">{{.Amount}} CZK</span>
+  </div>
+  {{end}}
+</div>
+{{end}}
+
+{{end}}
+
+<script src="/static/js/filters.js" defer></script>
 {{end}}

go/internal/web/templates/payments.tmpl

@@ -1,5 +1,38 @@
 {{define "title"}}Payments Ledger{{end}}
 {{define "content"}}
 <h1>Payments Ledger</h1>
-<p class="description">Coming in M6.4</p>
+<p class="description">
+    All bank transactions from the
+    <a href="{{.Data.PaymentsURL}}" target="_blank">payments sheet</a>,
+    grouped by member. Names are matched against the
+    <a href="{{.Data.AttendanceURL}}" target="_blank">attendance sheet</a>.
+</p>
+{{if .Error}}<p class="error">{{.Error}}</p>{{end}}
+<div class="ledger-container">
+{{range $person := .Data.SortedPeople}}
+    <div class="member-block">
+        <h2>{{$person}}</h2>
+        <table class="txn-table">
+            <thead>
+                <tr>
+                    <th class="txn-date">Date</th>
+                    <th class="txn-amount">Amount</th>
+                    <th class="txn-purpose">Purpose</th>
+                    <th class="txn-message">Bank Message</th>
+                </tr>
+            </thead>
+            <tbody>
+            {{range $tx := index $.Data.GroupedPayments $person}}
+                <tr>
+                    <td class="txn-date">{{$tx.Date}}</td>
+                    <td class="txn-amount">{{printf "%.0f" $tx.Amount}} CZK</td>
+                    <td class="txn-purpose">{{$tx.Purpose}}</td>
+                    <td class="txn-message">{{$tx.Message}}</td>
+                </tr>
+            {{end}}
+            </tbody>
+        </table>
+    </div>
+{{end}}
+</div>
 {{end}}