Skip to content

Airwallex/OCBC finance UI rearrangement (sync, disconnect-dropdown, visible Make Transaction)

Goal

Owner reworks (2026-06-13): the Airwallex payment button was invisible (buried at the bottom of a scrollable card) unlike OCBC's. Re-arrange BOTH providers: 1. Remove the "Sync to Accounting" button; the web app auto-syncs to accounting when a user starts using it (trigger on app/tab usage). 2. Remove the standalone "Disconnect" button. Add a minimal down-caret on the bank logo in the TAB TITLE; a dropdown there offers disconnect/log-out. Caret shows ONLY after connected. Same for Airwallex AND OCBC. 3. Statement-sync = same auto behaviour (already auto-fires on connect — keep it). 4. Add a "Make Transaction" button in the always-visible header (mirror OCBC's fixed header row, not buried in a scrollable card).

Map (from scoping)

  • Tab labels: components/finance/FinanceApp.tsx:180-203 (Badge dot + SVG logo; getProviderStatus(id)?.connected available here → drives caret visibility + hosts the disconnect dropdown).
  • Airwallex: components/finance/BankDashboard.tsx (sync-to-acct ~801-813/1448-1480, statement auto-sync 1014-1018, disconnect 1419-1435/1619-1622) + AirwallexPayoutsSection.tsx:69-87 (Send transfer / Pay-with-WOPC in Card extra).
  • OCBC: components/finance/OCBCVelocityDashboard.tsx (header row 876-930 — "New Transfer" 890-901 is the always-visible pattern to copy; sync-to-acct 597-645/ 1176-1186; statement sync 526-559/578-581; disconnect 498-512/925-927).

Log

  • 2026-06-13 doing — scoping done (3 read-only mappers). Building the UI rework; the real payment engine is split out to T-024.
  • 2026-06-14 pt2 DONE — (1) removed the "Sync to Accounting" buttons from both dashboards; accounting-sync now auto-fires ONCE per mount when connected, SILENT (no modal/toast) + idempotent (API skipDuplicates) — Airwallex gated on connected, OCBC gated on connected + a loaded selected account. Statement auto-sync already fired on connect (kept). (4) Added a visible "Make Transaction" button in the Airwallex header (mirrors OCBC's "New Transfer" placement) → opens the transfer drawer via an openTransferSignal prop on AirwallexPayoutsSection (the buried scroll-down card is no longer the only entry point). Typecheck clean. NOT browser-verified (port 3000 held by the owner's dev server) — verify on the Finance page. The real Transfers-API engine behind the button is still T-024.
  • 2026-06-13 pt1 DONE (commit 5afd3cfc) — disconnect relocated to a caret on each bank logo in the Finance tab title (shows only when connected); removed the old toolbar Disconnect buttons + dead handlers/imports from both dashboards. FinanceApp owns disconnect + remounts the dashboard after. Typecheck clean. NOT browser-verified: port 3000 held by an existing node server (left it running); connected-state caret/disconnect needs a live bank session. REMAINING: (1) remove "Sync to Accounting" buttons + auto-sync to accounting on app usage; (4) surface a visible "Make Transaction" button (header, not buried).