Advanced components & charts

Wave 3–4: pickers, overlays, sortable data, security surfaces, and the accessible SVG chart set (every chart ships its table equivalent).

Theme Direction Density

Combobox

Filterable long lists — bank pickers, beneficiaries. Type to filter (try "emirates" or "icici"); arrows + Enter select.

Recipient's bank

Code

Date picker

Non-processing days blocked with the reason stated — the schedule-transfer rule from the spec. Sundays are disabled in this demo.

Code

Sortable table

Click the Amount or Date headers. Sort state is announced via aria-sort; numeric columns sort numerically.

Date	Counterparty	Amount (AED)	Status
30 Aug	Gulf Star Trading LLC	250,000.00	Awaiting approval
29 Aug	DEWA	843.50	Completed
28 Aug	Falcon Media FZ	42,000.00	Completed
27 Aug	Etisalat	399.00	Completed

Code

Drawer, accordion & PIN entry

Drawer for contextual detail beside data. Accordion elaborates — never hides obligations. PIN auto-advances; codes allow paste, PINs don't.

Why this fee?

The transfer fee covers processing through the international payment network. See the full schedule of charges (PDF).

When does the money arrive?

Transfers to India usually arrive within 1 hour. Cut-off for same-day processing is 22:00 UAE time.

App PIN

Payment reference (optional)

Code

Rate lock, delta & card art

The countdown warns at 60s and fires an expiry event (the journey uses it for re-quoting). Deltas carry arrow + sign + timeframe. Card art shows co-badged schemes and the frozen state.

▲ +AED 1,200.00 (4.8%) vs July ▼ −2.1% 1M

AL NOOR BANK

•••• •••• •••• 8834

S. KUMARJAYWAN · INTL

AL NOOR BANK

•••• •••• •••• 4521

S. KUMARJAYWAN · INTL

Risk level 2 of 7 — Low

Value moves a little; sharp falls are unlikely but possible. You could get back less than you invest.

Code

Charts

Accessible SVG, built by BES.chartBar / chartLine / chartDonut. Zero-based axes, labeled series, and a "View as table" equivalent under every chart — data is never color-only.

Spending by category — August

Income vs months (AED)

Balance trend — 6 months (AED)

Code

BES.chartDonut(el, [{label:"Groceries", value:2340}, …], {center:"AED 8.9K", centerSub:"August"});
BES.chartBar(el, [{label:"Apr", value:18500}, …], {label:"Income by month"});
BES.chartLine(el, [{label:"Mar", value:21000}, …], {label:"Balance trend"});

Session pause interruption

The z.critical security surface — no entrance animation, cannot be swiped away, never blames the user. Triggered here by button; in product, by screen-share/active-call detection.

Code

Breadcrumb & pagination

41–60 of 214

Code