07 — Component Library (Payments)

• P1 — PaymentRow
• P2 — AmountText
• P3 — StatusBadgePayments
• P4 — ReceiptViewCard
• P5 — PaymentFormFields
• P6 — ActionsRow
• P7 — MoneyProgress

Reusable components for the payments module. Shared primitives (AppCard, AppTextField, AppDropdown, AppBadge, AppSnackbar, AppEmptyState, AppErrorState, AppSkeleton, AppFAB) come from 00-shared/03 — not re-specified here.

P1 — PaymentRow

• Purpose: list row for a payment.
• Props: payment, onTap, showInvoiceLink?.
• Variants: default; dense (accountant list).
• States: regular, selected, disabled (never — read-only).
• Contents: gateway icon, transactionReference, payerName, date, amount, status badge.
• A11y: single semantics node; status icon+label, never color-only.
• Tokens: e-0, height ≥ 72, mono reference.
• Flutter: ListTile custom; CachedNetworkImage not needed (no images).

P2 — AmountText

• Purpose: money display with currency, tabular figures.
• Props: amount, currency, size (titleMedium/headlineMedium/bodyMedium), signed?.
• States: default; strikethrough for refunded portion; dim for failed/pending.
• Validation: formats 2 decimals; locale via Intl NumberFormat.currency.
• Flutter: Text + FontFeature.tabularFigures(); util extension.

P3 — StatusBadgePayments

• Purpose: payment status visual (wraps AppBadge).
• Props: status (PaymentStatus), showLabel.
• States: 7 statuses → color+icon per 06 §S1 table.
• A11y: label always spoken.
• Flutter: Badge/custom chip.

P4 — ReceiptViewCard

• Purpose: printable receipt layout.
• Props: receipt, actions?.
• States: complete; missing invoice (still renders, invoice ref blank).
• Tokens: surfaceContainerLow, e-1, r-md, padding 24, max width 480.
• Flutter: Card + Column.

P5 — PaymentFormFields

• Purpose: the record-payment form body (extracted, reusable on S3 and as a sheet on tablet).
• Props: initialAmount, invoices (for picker), busy, onSubmit(payload).
• Variants: full (all fields) / compact (invoice context prefills).
• Validation: server-mapped errors (details) + client (amount min, email format, gateway required).
• Flutter: Form + AppTextFields.

P6 — ActionsRow

• Purpose: contextual payment actions (View receipt / Refund / Reconcile).
• Props: status, permissions, onRefund, onReconcile, onReceipt.
• States: action hidden when permission absent or status ineligible; destructive button styled error.
• Flutter: Row/Wrap of FilledButton.tonal, OutlinedButton, TextButton.

P7 — MoneyProgress

• Purpose: paidAmount vs totalAmount progress (invoice link).
• Props: paid, total, label.
• States: 0%, partial, 100% (PAID — success color).
• A11y: live summary "paid X of Y".
• Flutter: LinearProgressIndicator + Text.