# 今日總計 Dialog — Design

**Date:** 2026-06-20
**Component:** `APP/src/app/features/giving/pages/offering-entry-mobile-page`
**Scope:** Frontend only. No backend or DTO changes (the bootstrap summary already returns every line with `paymentMethod`, `checkNumber`, `amount`).

## Goal

When the volunteer taps the **今日總額 · Total** tally item on the mobile offering-entry
page, open a dialog that breaks down today's giving by **payment method** and lists
**each check's number and amount**.

> Note: the original request also mentioned a per-category total block. The user
> explicitly chose to omit it; this dialog shows payment-method + check breakdowns only.

## Trigger

Make the `oe__tally-item` wrapping `systemTotal` clickable → `openTotals()`. Add a
pointer cursor and a small affordance hint so it reads as tappable.

## Data

On open, refetch `api.bootstrap(today)` and read `summary.lines` — a fresh
cross-phone snapshot rather than the page-load list (which only stays live for
`systemTotal` / `lineCount`, not the lines array). Show a "載入中… · Loading" state
while in flight; on error, show a toast and close.

## Compute (client-side, from the refetched lines)

- **methodSubtotals** — group lines by `paymentMethod`, sum `amount`. Render in fixed
  order Cash → Check → Zelle → PayPal → Other, skipping methods with no entries.
  Labels from `PAYMENT_METHOD_OPTIONS` (bilingual).
- **checkLines** — lines where `paymentMethod === 'Check'`: `{ checkNumber, amount }`.
  `checkTotal` = sum of their amounts.
- **grandTotal** — sum of all refetched line amounts (the snapshot's system total).

## Dialog (new `kendo-dialog *ngIf="showTotals"`, styled like quick-add/paper-proof)

- Title: **今日總計 · Today's Totals**
- Loading state: "載入中… · Loading" while the refetch is pending.
- Section A — **各付款方式 · By method**: rows of `label … amount` (currency pipe).
- Section B — **各支票 · Checks**: rows of `# checkNumber … amount`, with a **支票合計**
  footer. Empty → "今日無支票 · No checks". Blank number → "(無號碼 · no #)".
- Footer: **今日總計 · Total** = grandTotal.
- Close button.

## Files touched

- `*.component.html` — clickable trigger + new dialog.
- `*.component.ts` — `showTotals` / `totalsLoading` / `totalsLines` state, `openTotals()`,
  `closeTotals()`, and `methodSubtotals` / `checkLines` / `checkTotal` / `grandTotal` getters.
- `*.component.scss` — totals list styles (reuse `oe__qa` body).

## Testing

Manual: enter a mix of cash + check + Zelle lines, tap 今日總額, confirm method
subtotals and check list match; confirm empty-checks and blank-check-number cases.