Skip to content

[Due for payment 2026-08-25] Update Workflows page to a tabbed layout #95792

Description

@JmillsExpensify

Background

The Workflows page today renders Submissions, Approvals, Payments, and Advanced as stacked sections on a single scrolling page. For workspaces with many approval workflows, the Approvals section alone can run long, as each workflow renders as its own card with expenses-from/members and an Edit action. This has the effect of pushing Payments and Advanced far down the page, such that customers with a lot of approval workflows have to scroll extensively just to reach payment or advanced settings.

Because accessing payment settings in particular is a source of customer friction, we'll update Workflows to the same tab-based pattern used elsewhere in the workspace editor (e.g. Rules). That'll help each section be reachable directly regardless of how many approval workflows exist.

This is a pure cometic restructure: no changes to the underlying settings, toggles, copy, or approval-workflow configuration in this issue.

Scope

  • Convert the Workflows page from a single stacked-section layout to a tabbed layout.
  • Add four tabs: Submissions, Approvals, Payments, Advanced, matching the existing section names and order. Submissions is the default/first tab.
  • Each tab shows only its own section's content; no cross-tab scrolling.
  • No changes to the underlying settings, toggles, or approval-workflow configuration — this is a re-presentation, not new behavior.

Product and design details

Tabs

The Workflows page header now carries four tabs: Submissions, Approvals, Payments, and Advanced, each with its existing icon (paper plane, thumbs-up, money bag, wrench respectively). Submissions is the default/first tab.

Submissions tab

Shows the existing Submissions card unchanged: the enable toggle, description copy, and Frequency row (e.g. "Daily") with its chevron into the deeper configuration.

Image

Approvals tab

Shows the existing Approvals card unchanged: the enable toggle, description copy, the informational default-workflow note, each approval workflow's Expenses from / Members rows with its Edit action, and the + Add approval workflow action at the bottom. Because this section moves to its own tab, workspaces with many approval workflows no longer push Payments and Advanced further down the page — a user only scrolls within the Approvals tab's own content.

Image

Payments tab

Shows the existing Payments card unchanged: the enable toggle, description copy, and + Add bank account action.

Image

Advanced tab

Shows the existing Advanced card unchanged: Prevent self-approvals, Auto-approve compliant reports, and Auto-pay approved reports (locked until payments are configured), each with their toggle and description.

Image

Open question

  • Deep-linking: Today, links into Workflows (from notifications, other settings pages, onboarding flows, etc.) land on the single scrolling page. With tabs, some of those links may need to be updated to land on the specific relevant tab rather than defaulting to Submissions. We'll need to audit of everything that links to Workflows as part of this initiative, so I'm flagging that now as something to look into.

Examples

  • A workspace with a single default approval workflow opens Workflows: the Approvals tab shows just that one workflow card, no scrolling needed.
  • A workspace with a dozen approval workflows opens Workflows and wants to configure Payments: they tap the Payments tab directly, rather than scrolling past all approval workflow cards.
  • A workspace navigates between Submissions, Approvals, Payments, and Advanced using the tabs; each tab loads only its own section's settings.

Assigning to @Krishna2323 and @situchan so that we can pursue this change using the rules revamp beta and more more quickly without customer impact yet.

Issue OwnerCurrent Issue Owner: @Krishna2323

Metadata

Metadata

Labels

DailyKSv2ImprovementItem broken or needs improvement.InternalRequires API changes or must be handled by Expensify staff

Type

No type

Projects

Status
No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions