Background

The Filters page in Search lists the available filters in four sections, split by dividers. The first section holds the most common filters, the second expense/report details, the third dates of expense/report actions, and the fourth is a set of reimbursement filters. The second section is one very long list: 26 filters for the Expense type, 15 for Expense report, and 13 each for Invoice and Trip.

That middle section doesn't group related filters together, which makes the page hard to scan:

• Keyword, the filter we set when someone types a quick search above a table, is the last row of the middle section for each of these types.
• For Expense, Amount sits below Expense type and Date, and the card filters sit between Billable and Purchase amount.
• Posted is a card transaction date, but it sits with the report action dates.
• For Expense report, Exported to, Paid status, and Paid by sit in the middle section, apart from Exported and Paid.
• For Invoice and Trip, Total, Title, and Report ID sit in the report action dates section, after Posted.

Better grouping helps, but the lists stay long. Expense alone has 42 filters, which takes several screens to scroll through.

This issue reorders the filters for the Expense, Expense report, Invoice, and Trip types into the same set of sections, so related filters sit together and each section is in the same place across those four types. It also adds a search input at the top of Filters, so people can jump straight to the filter they want.

Product and design details

[Mock: Filter search, with results and with no results] cc @dubielzyk-expensify

Sections

For the expense, expense-report, invoice and trip types, the page uses seven sections, always in this order. Each is separated by the existing divider. The section names are for this issue only; we don't add section headers to the page.

1. Core
2. Details
3. Card transactions (new)
4. Report fields (new)
5. Report actions
6. Exports (new)
7. Withdrawals

Expense order

1. Core: Type, Status, From, To, Workspace, Keyword
2. Details: Amount, Currency, Date, Merchant, Description, Category, Tag, Reimbursable, Billable, Attendees, Tax rate, Expense type, Receipt type, Has, Purchase amount, Purchase currency
3. Card transactions: Card, Bank account, Feed, Transaction status, Posted
4. Report fields: Report ID, Report field, Custom field 1, Custom field 2
5. Report actions: Submitted, Rejected, Held, Approved, Paid, Paid by
6. Exports: Exported, Exported to
7. Withdrawals: Withdrawal ID, Withdrawal type, Withdrawal status, Withdrawn, International reimbursement IDs

Expense report order

1. Core: Type, Status, From, To, Workspace, Keyword
2. Details: Total, Currency, Created date, Title, Amount debited, Amount reimbursed
3. Card transactions: not shown for this type.
4. Report fields: Report ID, Report field, Custom field 1, Custom field 2
5. Report actions: Submitted, Rejected, Held, Approved, Paid, Paid by, Paid status
6. Exports: Exported, Exported to
7. Withdrawals: Withdrawal ID, Withdrawal type, Withdrawal status, Withdrawn, International reimbursement IDs

The details section mirrors the Expense order: amount and currency first, then date, then the descriptive field, with the secondary amounts (Amount debited, Amount reimbursed) last, like Purchase amount and Purchase currency.

Invoice order

1. Core: Type, Status, From, To, Workspace, Keyword
2. Details: Total, Amount, Currency, Created date, Title, Merchant, Description, Category, Tag, Tax rate, Purchase amount, Purchase currency
3. Card transactions: Card, Feed, Posted
4. Report fields: Report ID
5. Report actions: Submitted, Rejected, Held, Approved, Paid, Paid by
6. Exports: Exported
7. Withdrawals: Withdrawal ID, Withdrawal type, Withdrawal status, Withdrawn

Created date is today's Date filter with a new label; what it filters on doesn't change. An invoice has both invoice-level fields (Total, Title) and line-level fields (Amount, Merchant), so the details section puts the amounts and Currency first, then Created date, then the descriptive fields.

Trip order

1. Core: Type, Status, From, To, Workspace, Keyword
2. Details: Total, Amount, Currency, Date, Title, Merchant, Description, Category, Tag, Tax rate, Purchase amount, Purchase currency
3. Card transactions: Card, Feed, Posted
4. Report fields: Report ID
5. Report actions: Submitted, Rejected, Held, Approved, Paid, Paid by
6. Exports: Exported, Exported to
7. Withdrawals: Withdrawal ID, Withdrawal type, Withdrawn

The details section uses the same order as Invoice, but keeps the Date label, since trips behave like expenses.

Conditional filters

Some filters only appear when the user has the relevant setup, for example Custom field 1 and Custom field 2.

• When a filter doesn't apply, we hide it, and the rest of its section keeps the order above.
• When no filter in a section applies, we hide the whole section, including its divider. The page never shows two dividers in a row, or a divider at the top or bottom of the list.
• Each filter's own visibility rules don't change.

Filter search

We add a search input at the top of Filters, above Type. It shows on web, where Filters opens as a popover, and on mobile, where it opens full screen. It shows for every type, including Chat and Task.

• Placeholder: Search filters.
• Reuse: we reuse the existing search input from our selection lists, like the one in the Category picker. No new component.
• Matching: as the user types, we show only the filters whose name contains the text, ignoring case. For example, paid matches Paid, Paid by, and Paid status. We match filter names only, not the values set on them.
• Sections: matching filters keep their section and order. Sections with no matches are hidden.
• No matches: we show No results found in place of the list, matching our other selection lists.
• Clearing: clearing the input brings back the full list. The search text stays when the user opens a filter and comes back, and resets when Filters closes.
• Focus: on web, the input is focused when the popover opens, so the user can type right away. On mobile it isn't, so the keyboard doesn't cover the list.
• Apply filters stays at the bottom and works the same during a search.