[Due for payment 2026-03-25] Add sections within the `Group by` filters

[JmillsExpensify]

I was chatting with a customer, who found the Group by filter options quite overwhelming. Let's make a small change and add little sections to make the options easier to scan.

Changes:

• Add sections for Member, Expense details, Date, Bank reconciliation (in that order)
• The options within each section are:
  • Member
    • From
  • Expense details
    • Card, Merchant, Category, Tag,
  • Date
    • Week, Month, Quarter, Year
  • Bank reconciliation
    • Withdrawal ID

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @shubham1206agra (External)

[melvin-bot]

Triggered auto assignment to @brianlee-expensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

🚨 Edited by proposal-police: This proposal was edited at 2026-02-05 09:16:29 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Actual Result:

The Group by filter options are displayed as a flat list, making it overwhelming for users to scan and find the option they need.

What is the root cause of that problem?

The SearchFiltersGroupByPage component uses a flat SelectionList without any section headers to group related options together.

App/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx

Lines 63 to 68 in 8ed5bc1

	<SelectionList
	shouldSingleExecuteRowSelect
	data={listData}
	ListItem={SingleSelectListItem}
	onSelectRow={updateSelectedItem}
	/>

What changes do you think we should make in order to solve the problem?

1. Update SearchFiltersGroupByPage.tsx to add section header items to the SelectionList data array
2. Section headers are non-selectable items with isDisabled: true and isInteractive: false
3. Add new translation keys for section headers: Member, Expense details, Date, Bank reconciliation
4. Organize options into 4 sections:
   • Member: From
   • Expense details: Card, Merchant, Category, Tag
   • Date: Week, Month, Quarter, Year
   • Bank reconciliation: Withdrawal ID

--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx
@@ -14,8 +14,16 @@ import {updateAdvancedFilters} from '@libs/actions/Search';
 import Navigation from '@libs/Navigation/Navigation';
-import {getGroupByOptions} from '@libs/SearchUIUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import CONST from '@src/CONST';
+
+const GROUP_BY_SECTIONS = [
+    {titleKey: 'search.filters.groupBySections.member', options: [CONST.SEARCH.GROUP_BY.FROM]},
+    {titleKey: 'search.filters.groupBySections.expenseDetails', options: [CONST.SEARCH.GROUP_BY.CARD, CONST.SEARCH.GROUP_BY.MERCHANT, CONST.SEARCH.GROUP_BY.CATEGORY, CONST.SEARCH.GROUP_BY.TAG]},
+    {titleKey: 'search.filters.groupBySections.date', options: [CONST.SEARCH.GROUP_BY.WEEK, CONST.SEARCH.GROUP_BY.MONTH, CONST.SEARCH.GROUP_BY.QUARTER, CONST.SEARCH.GROUP_BY.YEAR]},
+    {titleKey: 'search.filters.groupBySections.bankReconciliation', options: [CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID]},
+];

 function SearchFiltersGroupByPage() {
     const styles = useThemeStyles();
@@ -23,11 +31,26 @@ function SearchFiltersGroupByPage() {
     const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
     const [selectedItem, setSelectedItem] = useState(searchAdvancedFiltersForm?.groupBy);

-    const listData: Array<ListItem<SearchGroupBy>> = useMemo(() => {
-        return getGroupByOptions(translate).map((groupOption) => ({
-            text: groupOption.text,
-            keyForList: groupOption.value,
-            isSelected: selectedItem === groupOption.value,
-        }));
+    const listData = useMemo(() => {
+        const data: Array<ListItem<string>> = [];
+        GROUP_BY_SECTIONS.forEach((section) => {
+            // Add section header
+            data.push({
+                text: translate(section.titleKey),
+                keyForList: `header-${section.titleKey}`,
+                isDisabled: true,
+                isInteractive: false,
+            });
+            // Add options for this section
+            section.options.forEach((value) => {
+                data.push({
+                    text: translate(`search.filters.groupBy.${value}`),
+                    keyForList: value,
+                    isSelected: selectedItem === value,
+                });
+            });
+        });
+        return data;
     }, [translate, selectedItem]);

5. Add translation keys in src/languages/en.ts:

--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -7168,6 +7168,12 @@ const translations = {
                 [CONST.SEARCH.GROUP_BY.YEAR]: 'Year',
                 [CONST.SEARCH.GROUP_BY.QUARTER]: 'Quarter',
             },
+            groupBySections: {
+                member: 'Member',
+                expenseDetails: 'Expense details',
+                date: 'Date',
+                bankReconciliation: 'Bank reconciliation',
+            },

What alternative solutions did you explore? (Optional)

N/A

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2026-02-05 09:04:30 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add sections within the Group by filters

What is the root cause of that problem?

We only display the list group by without any section

App/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx

Line 26 in 088ed06

const listData: Array<ListItem<SearchGroupBy>> = useMemo(() => {

What changes do you think we should make in order to solve the problem?

Split the group by list option into three section as the expected from the OP

const sections: Array<Section<ListItem<SearchGroupBy>>> = useMemo(() => {
        const buildItem = (value: SearchGroupBy): ListItem<SearchGroupBy> => ({
            text: translate(`search.filters.groupBy.${value}`),
            keyForList: value,
            isSelected: selectedItem === value,
        });

        return [
            {
                title: translate('common.member'),
                data: [buildItem(CONST.SEARCH.GROUP_BY.FROM)],
                sectionIndex: 0,
            },
            {
                title: `${translate('common.expense')} ${translate('common.details')}`,
                data: [
                    buildItem(CONST.SEARCH.GROUP_BY.CARD),
                    buildItem(CONST.SEARCH.GROUP_BY.MERCHANT),
                    buildItem(CONST.SEARCH.GROUP_BY.CATEGORY),
                    buildItem(CONST.SEARCH.GROUP_BY.TAG),
                ],
                sectionIndex: 1,
            },
            {
                title: translate('common.date'),
                data: [
                    buildItem(CONST.SEARCH.GROUP_BY.WEEK),
                    buildItem(CONST.SEARCH.GROUP_BY.MONTH),
                    buildItem(CONST.SEARCH.GROUP_BY.QUARTER),
                    buildItem(CONST.SEARCH.GROUP_BY.YEAR),
                ],
                sectionIndex: 2,
            },
            {
                title: translate('search.reconciliation'),
                data: [buildItem(CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID)],
                sectionIndex: 3,
            },
        ];
    }, [translate, selectedItem]);

App/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx

Line 26 in 088ed06

const listData: Array<ListItem<SearchGroupBy>> = useMemo(() => {

What alternative solutions did you explore? (Optional)

We can do this in getGroupByOptions function if we also want to do this for the list in SearchFilterBar

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[dmkt9]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add sections within the Group by filters

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

We can change the section as requested here:

App/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx

Lines 26 to 32 in 088ed06

	const listData: Array<ListItem<SearchGroupBy>> = useMemo(() => {
	return getGroupByOptions(translate).map((groupOption) => ({
	text: groupOption.text,
	keyForList: groupOption.value,
	isSelected: selectedItem === groupOption.value,
	}));
	}, [translate, selectedItem]);

App/src/libs/SearchUIUtils.ts

Lines 3797 to 3799 in 088ed06

	function getGroupByOptions(translate: LocalizedTranslate) {
	return Object.values(CONST.SEARCH.GROUP_BY).map<SingleSelectItem<SearchGroupBy>>((value) => ({text: translate(`search.filters.groupBy.${value}`), value}));
	}

App/src/CONST/index.ts

Lines 6879 to 6890 in 088ed06

	GROUP_BY: {
	FROM: 'from',
	CARD: 'card',
	WITHDRAWAL_ID: 'withdrawal-id',
	CATEGORY: 'category',
	MERCHANT: 'merchant',
	TAG: 'tag',
	MONTH: 'month',
	WEEK: 'week',
	YEAR: 'year',
	QUARTER: 'quarter',
	},

What alternative solutions did you explore? (Optional)

N/A

[shubham1206agra]

@JmillsExpensify Can you confirm if we want the same structure here too?

[twinkle-react]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The Group by page must visually group the Group by options into four clear sections, shown in this order: Member, Expense details, Date, and Bank reconciliation.

What is the root cause of that problem?

In this implementation, SearchFiltersGroupByPage.tsx builds listData by mapping the flat result of getGroupByOptions(translate) directly to rows inside the useMemo, which assumes that options alone are enough for structure; this is wrong because no visual headers are inserted, so the list cannot show grouped sections.

What changes do you think we should make in order to solve the problem?

• Make a local, presentation-only change in the Group by page.
• Build a local sectionsConfig inside the existing useMemo.
• Flatten it into the same listData shape used by SelectionList.
• Insert disabled, non-interactive header rows between groups.
• Keep getGroupByOptions unchanged.
• Do not change shared components or APIs.

Files changed and scope

• src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx
  Replace the listData useMemo only.
• src/languages/en.ts
  Add four translation keys.

**Exact code change to apply **

// src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx
// Ensure this import exists near the top of the file
import {getGroupByOptions} from '@libs/SearchUIUtils';

// ...
const listData: Array<ListItem<SearchGroupBy>> = useMemo(() => {
    // Localized section config with stable ids — defined inside the memo because it depends on translate
    const sectionsConfig = [
        {id: 'member', title: translate('search.filters.groupBy.sections.member'), items: [CONST.SEARCH.GROUP_BY.FROM]},
        {
            id: 'expenseDetails',
            title: translate('search.filters.groupBy.sections.expenseDetails'),
            items: [CONST.SEARCH.GROUP_BY.CARD, CONST.SEARCH.GROUP_BY.MERCHANT, CONST.SEARCH.GROUP_BY.CATEGORY, CONST.SEARCH.GROUP_BY.TAG],
        },
        {
            id: 'date',
            title: translate('search.filters.groupBy.sections.date'),
            items: [CONST.SEARCH.GROUP_BY.WEEK, CONST.SEARCH.GROUP_BY.MONTH, CONST.SEARCH.GROUP_BY.QUARTER, CONST.SEARCH.GROUP_BY.YEAR],
        },
        {
            id: 'bankReconciliation',
            title: translate('search.filters.groupBy.sections.bankReconciliation'),
            items: [CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID],
        },
    ];

    const flatOptions = getGroupByOptions(translate);

    const optionByValue = flatOptions.reduce<Record<string, SingleSelectItem<SearchGroupBy>>>((acc, opt) => {
        acc[opt.value] = opt;
        return acc;
    }, {});

    const result: Array<ListItem<SearchGroupBy>> = [];

    for (const section of sectionsConfig) {
        // Disabled + non-interactive rows act as visual section headers
        result.push({
            text: section.title,
            keyForList: `header-${section.id}`, // stable, locale-independent key
            isDisabled: true,
            isInteractive: false,
        });

        for (const value of section.items) {
            const opt = optionByValue[String(value)];
            if (!opt) {
                continue;
            }

            result.push({
                text: opt.text,
                keyForList: opt.value,
                isSelected: selectedItem === opt.value,
            });
        }
    }

    return result;
}, [translate, selectedItem]);

Keep rendering unchanged

// src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx
<SelectionList
    shouldSingleExecuteRowSelect
    data={listData}
    ListItem={SingleSelectListItem}
    onSelectRow={updateSelectedItem}
/>

Translation keys to add (English)

// src/languages/en.ts
search: {
    filters: {
        groupBy: {
            sections: {
                member: 'Member',
                expenseDetails: 'Expense details',
                date: 'Date',
                bankReconciliation: 'Bank reconciliation',
            },
        },
    },
},

What alternative solutions did you explore? (Optional)

[github-actions]

⚠️ @twinkle-react Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.