今日總計 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.

2.7 KiB Raw Blame History