15 — Financial Components: Transactions Family

Banking Experience System (BES) · Financial Components · v2.0.0-draft

<div class="bes-list" style="max-width:560px">
  <div class="bes-list-head">Pending</div>
  <div class="bes-item">
    <span class="main"><span class="t">Priya Kumar</span><br><span class="s">Transfer · AED → INR</span></span>
    <span class="trail"><bdi class="bes-amount bes-amount--sm">−AED 10,036.75</bdi><span class="bes-badge bes-badge--pending">Pending</span></span>
  </div>
  <div class="bes-list-head">Today</div>
  <div class="bes-item">
    <span class="main"><span class="t">Carrefour</span><br><span class="s">Groceries · Card ••8834 · 19:42</span></span>
    <span class="trail"><bdi class="bes-amount bes-amount--sm">−AED 89.50</bdi></span>
  </div>
  <div class="bes-item">
    <span class="main"><span class="t">Salary — Al Noor Trading LLC</span><br><span class="s">Incoming transfer · 09:00</span></span>
    <span class="trail"><bdi class="bes-amount bes-amount--sm bes-amount--credit">+AED 18,500.00</bdi></span>
  </div>
  <div class="bes-item">
    <span class="main"><span class="t">Noon.com</span><br><span class="s"><bdi class="bes-amount bes-amount--struck">AED 320.00</bdi> · Declined — over daily limit</span></span>
    <span class="trail"><span class="bes-badge bes-badge--error">Declined</span></span>
  </div>
</div>

Components: Transaction Item · Transaction List · Transaction Table · Transaction Detail · Transaction Status · Transaction Timeline · Receipt · Search & Filters · Statement Row.

State vocabulary and money-statements are normative from doc 07 §4.

Transaction Item

Purpose: one transaction in a list — the most-rendered financial component in any banking product.

Anatomy: leading: merchant/counterparty logo or category icon (fallback: initial avatar) · primary: counterparty/merchant display name (cleaned, not raw acquirer strings — "Carrefour MOE", not "CARREFOUR4901 DXB AE") · secondary: category + time (or account context in multi-account lists) · trailing: Amount (sm, signed) + Status Badge when non-settled · optional third line: note/reference.

Variants: card transaction (shows card ••suffix) · transfer (shows direction + counterparty bank) · remittance (corridor flag + delivery status) · recurring marker (↻) · split/shared marker · declined (struck amount + reason class).

States (rendering the machine): settled (neutral, no badge — settled is the default and stays quiet) · pending (badge + clock) · processing · failed/declined (struck amount, status.error label, money statement on the detail) · blocked/under-review (generic-safe label "Checking this payment") · refunded (link chip to original) · reversed · disputed (badge + dispute stage).

Usage: grouped by day with sticky date headers ("Today", "Yesterday", "28 August"); running daily totals optional per surface. Tap → Transaction Detail. Swipe actions (mobile): receipt, note — never dispute/report via swipe alone.

A11y: one summary name per row: "Carrefour, groceries, yesterday 19:42, minus 89 dirhams 50 fils, settled"; badges included; logo decorative.

RTL: leading/trailing swap; amount stays LTR end-aligned; cleaned merchant names may be bilingual — display per UI language with the counterparty's registered name on detail.

Transaction List

Purpose: the scrollable history surface (mobile default).

Anatomy: search trigger · filter chips row (Date · Type · Amount range · Card/Account · Status) · grouped Transaction Items · "Load more" (explicit, no infinite auto-scroll) · export action.

States: loading (skeleton rows) · incremental loading · filtered (active chips + result count + clear-all) · empty variants (first-use / filtered-empty / period-empty: "No transactions in July") · offline (cached + timestamp banner) · partial (some rails degraded: "Card transactions may be delayed").

Financial: pending transactions float in a distinct "Pending" section above settled history (they re-sort into date order on settlement); search matches amount, merchant, note, reference, in Arabic and Latin.

Transaction Table (desktop / SME / corporate)

Purpose: dense operational view.

Anatomy: Data Table specialization — columns: date+time · counterparty · reference · category/type · debit · credit · balance-after (optional, statement mode) · status · row menu. Numeric columns end-aligned tnum; debit/credit split or signed single column (per surface convention, never mixed).

States: table states (doc 11) + bulk selection with money-aware summary bar ("14 transactions — total −AED 23,410.00") · reconciliation mode (SME: matched/unmatched markers).

Financial: default sort newest-first; export respects filters and states the scope; column set configurable and persistent per user.

Transaction Detail

Purpose: the full record — the screen users screenshot for proof, check when worried, and start disputes from.

Anatomy (ordered): 1. Header: counterparty (logo + name) · Amount (lg, signed) · Status Badge 2. Money statement line for any non-settled state ("No money has left your account") 3. Timeline (see below) for multi-stage transactions 4. Facts block (label/value rows): date & time · account/card used · category (editable) · reference number (copyable) · FX facts where applicable (original amount, rate, fees — full Fee Breakdown reproduced, exactly as at authorization) · counterparty details (IBAN masked middle) 5. Note field (user memo) 6. Actions: Download receipt (PDF) · Share · Repeat/Send again · Report a problem → dispute flow · Refund status link where applicable

States: per machine — the detail is the canonical surface where every state explains itself fully.

A11y: facts as definition list; headline is a proper heading; actions in a labeled group.

RTL: label/value rows mirror (labels inline-start); values that are codes/IBANs/amounts stay LTR runs.

Transaction Status

Purpose: the state, rendered consistently (badge + optional line).

Uses the canonical vocabulary only: Draft · In review · Awaiting authentication · Processing · Pending · Completed · Failed · Checking status (UNKNOWN) · Additional checks (BLOCKED) · Reversed · Refunded · Disputed · Cancelled. Each maps to financial.* colors + shape-coded icons. Localized pairs are fixed in the glossary (doc 27) — one Arabic term per state, everywhere.

Transaction Timeline

Purpose: multi-stage progress for transfers/remittances/disputes.

Anatomy: vertical steps: done (check + timestamp) · current (pulse + expected time: "Processing — usually within 1 hour") · upcoming (grey) · terminal. Failure/hold renders the stage where it happened with its explanation and recovery inline.

Example (remittance):

✓ Sent from your account          14:32
✓ Converted AED → INR             14:32
● With recipient bank             expected by 15:30
○ Delivered to Priya Kumar

States: advancing · stalled (current stage exceeds expectation → honest note + notify-me) · unknown (dedicated stage copy: "We're confirming this stage with the partner bank — your money is safe") · complete.

A11y: ordered list semantics; current stage announced with expectation.

RTL: timeline rail at inline-start; checkmarks unmirrored.

Receipt

Purpose: shareable, durable proof — a first-class artifact (remittance proof is a real household job).

Anatomy: issuer identity (bank name + logo slot) · "Payment receipt" title · status (completed only — pending payments export a "payment instruction" doc, clearly different) · amount block (full precision) · parties (sender/recipient with masked identifiers) · facts (date, reference, rate & fees for FX) · verification element (reference + QR against issuer verification endpoint) · regulatory footer slot.

Formats: in-app view · PDF (accessible: tagged, selectable text, logical reading order — a screenshot is not a receipt) · share-sheet text summary.

Rules: receipts are immutable snapshots — they render the fees as charged, not the current schedule; bilingual layout (AR/EN dual-column or per-preference single language, institution-configurable).

Search & Filters (transactions)

Anatomy: Search (doc 09) + filter sheet/panel: date presets + custom range · type checkboxes · amount range (Currency Inputs) · account/card scope · status. Applied filters render as removable chips with a stated result count.

Rule: filters are additive-transparent — the user can always see why the list looks the way it does.

Statement Row / Statement Access

Anatomy: period label ("July 2026") · format actions (PDF · CSV/Excel) · generated-on-demand states (generating → ready → download) · older-statement request path where archives require retrieval.

Financial: statements are the audit-grade export: balance-after per line, official formatting, accessible PDF. The e-statement consent state (paper vs digital) surfaces here with its own toggle + confirmation.

All components in this family — live

Every component from this specification, rendered by the coded library. Expand "Code" to copy the markup.

<div class="bes-table-wrap">
  <table class="bes-table" data-bes-sortable>
    <thead><tr><th data-sort="text">Date</th><th>Counterparty</th><th>Reference</th><th class="num" data-sort="num">Debit</th><th class="num" data-sort="num">Credit</th><th>Status</th></tr></thead>
    <tbody>
      <tr><td>30 Aug</td><td>Gulf Star Trading LLC</td><td><bdi class="bes-amount">INV-2026-0841</bdi></td><td class="num">250,000.00</td><td class="num">—</td><td><span class="bes-badge bes-badge--warning">Awaiting approval</span></td></tr>
      <tr><td>29 Aug</td><td>DEWA</td><td><bdi class="bes-amount">CON-99231</bdi></td><td class="num">843.50</td><td class="num">—</td><td><span class="bes-badge bes-badge--success">Completed</span></td></tr>
      <tr><td>28 Aug</td><td>Falcon Media FZ</td><td><bdi class="bes-amount">RCP-1187</bdi></td><td class="num">—</td><td class="num">42,000.00</td><td><span class="bes-badge bes-badge--success">Completed</span></td></tr>
    </tbody>
  </table>
</div>

<div class="bes-card" style="max-width:420px">
  <ul class="bes-timeline">
    <li class="done"><span class="dot">✓</span><span><span class="t">Sent from your account</span><br><span class="s">Today 14:32</span></span></li>
    <li class="done"><span class="dot">✓</span><span><span class="t">Converted AED → INR</span><br><span class="s">rate ₹25.0800 locked</span></span></li>
    <li class="current"><span class="dot">●</span><span><span class="t">With recipient bank</span><br><span class="s">Usually within 1 hour · expected by 15:30</span></span></li>
    <li><span class="dot">○</span><span><span class="t">Delivered to Priya Kumar</span><br><span class="s">We'll notify you</span></span></li>
  </ul>
</div>

<div class="bes-receipt" style="max-width:420px">
  <div class="head"><span class="title">Payment receipt</span><span class="bes-badge bes-badge--success">Completed</span></div>
  <div class="bes-rows">
    <div class="bes-row"><span class="k">Reference</span><span class="v"><bdi class="bes-amount">BES-K8P2QX</bdi></span></div>
    <div class="bes-row"><span class="k">Recipient</span><span class="v">Priya Kumar · ICICI <bdi class="bes-amount">••4102</bdi></span></div>
    <div class="bes-row"><span class="k">Amount sent</span><span class="v"><bdi class="bes-amount">AED 10,000.00</bdi></span></div>
    <div class="bes-row"><span class="k">Fees + VAT</span><span class="v"><bdi class="bes-amount">AED 36.75</bdi></span></div>
  </div>
  <div class="bes-total"><span class="k">Total paid</span><span class="v"><bdi class="bes-amount">AED 10,036.75</bdi></span></div>
</div>

<div class="demo-row">
  <button class="bes-chip" aria-pressed="true">Last 90 days ✕</button>
  <button class="bes-chip" aria-pressed="true">Card ••8834 ✕</button>
  <button class="bes-chip" aria-pressed="false">+ Amount range</button>
  <span style="font-size:13px;color:var(--bes-text-secondary)">214 → 38 transactions · <a href="#">Clear all</a></span>
</div>