[$250] [Insights] [Release 3] Add group-by:tag

[neil-marcellini]

Frontend Release 3: Add group-by:tag

Implement the same pattern as other group-by options (from, card, category, merchant), but without a suggested search.

1. Add the ability to Group By Tag from Reports > Expenses (group-by:tag)

   1. Follow the pattern used for group-by:from in Top Spenders.
   2. src/CONST/index.ts - Add TAG: 'tag' to CONST.SEARCH.GROUP_BY
   3. src/languages/en.ts (and all language files) - Add [CONST.SEARCH.GROUP_BY.TAG]: 'Tag' to search.filters.groupBy

2. Add "Tag" to Group Columns on Search Columns Page (follow the same pattern as existing group columns: FROM, CARD, WITHDRAWAL_ID, CATEGORY, MERCHANT)

   1. Define the GROUP_TAG table column constant in the TABLE_COLUMNS object - src/CONST/index.ts
   2. Add a TAG entry to GROUP_CUSTOM_COLUMNS to define which group columns are available when grouping by tag. Include tag, expenses, total - src/CONST/index.ts
   3. Add a TAG entry to GROUP_DEFAULT_COLUMNS that specifies the default columns to show when grouping by tag - src/CONST/index.ts
   4. Add a user friendly name mapping for the GROUP_TAG column - src/CONST/index.ts
   5. Handle the TAG case in getCustomColumns() to return the tag custom columns - src/libs/SearchUIUtils.ts
   6. Handle the TAG case in getCustomColumnDefault() to return the default tag columns - src/libs/SearchUIUtils.ts
   7. Add TAG mappings to both the customColumns and defaultCustomColumns objects in getColumnsToShow() - src/libs/SearchUIUtils.ts
   8. Add a conditional check in getColumnsToShow() to ensure required columns (AVATAR and GROUP_TAG) are always included when grouping by tag - src/libs/SearchUIUtils.ts
   9. Add a case for GROUP_TAG in getSearchColumnTranslationKey() that returns the tag translation key - src/libs/SearchUIUtils.ts
   10. Add GROUP_TAG to the required columns set so it cannot be hidden on the Search Columns Page - src/pages/Search/SearchColumnsPage.tsx
   11. Add a case for TAG in getTransactionGroupHeaders() that returns the appropriate column header configuration - src/components/SelectionListWithSections/SearchTableHeader.tsx
   12. Update the SearchCustomColumnIds type to include the tag custom column values - src/components/Search/types.ts

Issue Owner

Current Issue Owner: @suneox

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO. Remember to draft any necessary HelpDot updates by following the instructions here.

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[PiyushChandra17]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-23 23:41:29 UTC.

Proposal

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

[Insights] [Release 3] Add group-by:tag

What is the root cause of that problem?

New Feature

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

1. Add the ability to Group By Tag from Reports > Expenses (group-by:tag)

• Follow the pattern used for group-by:from in Top Spenders

• Add TAG: 'tag' to CONST.SEARCH.GROUP_BY

App/src/CONST/index.ts

Lines 6827 to 6831 in 9c1b8c3

	return {
	EXPENSE: [
	this.TABLE_COLUMNS.RECEIPT,
	this.TABLE_COLUMNS.DATE,
	this.TABLE_COLUMNS.MERCHANT,

• Add [CONST.SEARCH.GROUP_BY.TAG]: 'Tag' to search.filters.groupBy

App/src/languages/en.ts

Lines 6771 to 6775 in 9c1b8c3

	emptyReportConfirmationPromptLink: 'Reports',
	emptyReportConfirmationDontShowAgain: "Don't show me this again",
	genericWorkspaceName: 'this workspace',
	},
	genericCreateReportFailureMessage: 'Unexpected error creating this chat. Please try again later.',

2. Add "Tag" to Group Columns on Search Columns Page (follow the same pattern as existing group columns: FROM, CARD, WITHDRAWAL_ID, CATEGORY, MERCHANT)

• Define the GROUP_TAG table column constant in the TABLE_COLUMNS object
  

  App/src/CONST/index.ts

  Lines 7012 to 7014 in 5b76720

  	GROUP_WITHDRAWN: 'groupWithdrawn',
  	GROUP_WITHDRAWAL_ID: 'groupWithdrawalID',
  	},

• Add a TAG entry to GROUP_CUSTOM_COLUMNS to define which group columns are available when grouping by tag. Include tag, expenses, total
  

  App/src/CONST/index.ts

  Lines 6858 to 6878 in 5b76720

  	get GROUP_CUSTOM_COLUMNS() {
  	return {
  	FROM: {
  	FROM: this.TABLE_COLUMNS.GROUP_FROM,
  	EXPENSES: this.TABLE_COLUMNS.GROUP_EXPENSES,
  	TOTAL: this.TABLE_COLUMNS.GROUP_TOTAL,
  	},
  	CARD: {
  	CARD: this.TABLE_COLUMNS.GROUP_CARD,
  	FEED: this.TABLE_COLUMNS.GROUP_FEED,
  	EXPENSES: this.TABLE_COLUMNS.GROUP_EXPENSES,
  	TOTAL: this.TABLE_COLUMNS.GROUP_TOTAL,
  	},
  	WITHDRAWAL_ID: {
  	BANK_ACCOUNT: this.TABLE_COLUMNS.GROUP_BANK_ACCOUNT,
  	WITHDRAWN: this.TABLE_COLUMNS.GROUP_WITHDRAWN,
  	WITHDRAWAL_ID: this.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID,
  	EXPENSES: this.TABLE_COLUMNS.GROUP_EXPENSES,
  	TOTAL: this.TABLE_COLUMNS.GROUP_TOTAL,
  	},
  	};

• Add a TAG entry to GROUP_DEFAULT_COLUMNS that specifies the default columns to show when grouping by tag

App/src/CONST/index.ts

Lines 6908 to 6919 in 5b76720

	get GROUP_DEFAULT_COLUMNS() {
	return {
	FROM: [this.TABLE_COLUMNS.GROUP_FROM, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
	CARD: [this.TABLE_COLUMNS.GROUP_CARD, this.TABLE_COLUMNS.GROUP_FEED, this.TABLE_COLUMNS.GROUP_EXPENSES, this.TABLE_COLUMNS.GROUP_TOTAL],
	WITHDRAWAL_ID: [
	this.TABLE_COLUMNS.GROUP_BANK_ACCOUNT,
	this.TABLE_COLUMNS.GROUP_WITHDRAWN,
	this.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID,
	this.TABLE_COLUMNS.GROUP_EXPENSES,
	this.TABLE_COLUMNS.GROUP_TOTAL,
	],
	};

• Add a user friendly name mapping for the GROUP_TAG column

App/src/CONST/index.ts

Lines 7180 to 7194 in 5b76720

	[this.TABLE_COLUMNS.REPORT_ID]: 'long-report-id',
	[this.TABLE_COLUMNS.BASE_62_REPORT_ID]: 'report-id',
	[this.TABLE_COLUMNS.EXPORTED_TO]: 'exported-to',
	[this.TABLE_COLUMNS.EXCHANGE_RATE]: 'exchange-rate',
	[this.TABLE_COLUMNS.REIMBURSABLE_TOTAL]: 'reimbursable-total',
	[this.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL]: 'non-reimbursable-total',
	[this.TABLE_COLUMNS.GROUP_FROM]: 'group-from',
	[this.TABLE_COLUMNS.GROUP_EXPENSES]: 'group-expenses',
	[this.TABLE_COLUMNS.GROUP_TOTAL]: 'group-total',
	[this.TABLE_COLUMNS.GROUP_CARD]: 'group-card',
	[this.TABLE_COLUMNS.GROUP_FEED]: 'group-feed',
	[this.TABLE_COLUMNS.GROUP_BANK_ACCOUNT]: 'group-bank-account',
	[this.TABLE_COLUMNS.GROUP_WITHDRAWN]: 'group-withdrawn',
	[this.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID]: 'group-withdrawal-id',
	};

• Handle the TAG case in getCustomColumns() to return the tag custom columns

App/src/libs/SearchUIUtils.ts

Lines 2578 to 2600 in 5b76720

	function getCustomColumns(value?: SearchDataTypes | SearchGroupBy): SearchCustomColumnIds[] {
	switch (value) {
	case CONST.SEARCH.DATA_TYPES.EXPENSE:
	return Object.values(CONST.SEARCH.TYPE_CUSTOM_COLUMNS.EXPENSE);
	case CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT:
	return Object.values(CONST.SEARCH.TYPE_CUSTOM_COLUMNS.EXPENSE_REPORT);
	case CONST.SEARCH.DATA_TYPES.INVOICE:
	return Object.values(CONST.SEARCH.TYPE_CUSTOM_COLUMNS.INVOICE);
	case CONST.SEARCH.DATA_TYPES.TASK:
	return Object.values(CONST.SEARCH.TYPE_CUSTOM_COLUMNS.TASK);
	case CONST.SEARCH.DATA_TYPES.TRIP:
	return Object.values(CONST.SEARCH.TYPE_CUSTOM_COLUMNS.TRIP);
	case CONST.SEARCH.DATA_TYPES.CHAT:
	return Object.values(CONST.SEARCH.TYPE_CUSTOM_COLUMNS.CHAT);
	case CONST.SEARCH.GROUP_BY.CARD:
	return Object.values(CONST.SEARCH.GROUP_CUSTOM_COLUMNS.CARD);
	case CONST.SEARCH.GROUP_BY.FROM:
	return Object.values(CONST.SEARCH.GROUP_CUSTOM_COLUMNS.FROM);
	case CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID:
	return Object.values(CONST.SEARCH.GROUP_CUSTOM_COLUMNS.WITHDRAWAL_ID);
	default:
	return [];
	}

• Handle the TAG case in getCustomColumnDefault() to return the default tag columns

App/src/libs/SearchUIUtils.ts

Lines 2603 to 2626 in 5b76720

	function getCustomColumnDefault(value?: SearchDataTypes | SearchGroupBy): SearchCustomColumnIds[] {
	switch (value) {
	case CONST.SEARCH.DATA_TYPES.EXPENSE:
	return CONST.SEARCH.TYPE_DEFAULT_COLUMNS.EXPENSE;
	case CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT:
	return CONST.SEARCH.TYPE_DEFAULT_COLUMNS.EXPENSE_REPORT;
	case CONST.SEARCH.DATA_TYPES.INVOICE:
	return CONST.SEARCH.TYPE_DEFAULT_COLUMNS.INVOICE;
	case CONST.SEARCH.DATA_TYPES.TASK:
	return CONST.SEARCH.TYPE_DEFAULT_COLUMNS.TASK;
	case CONST.SEARCH.DATA_TYPES.TRIP:
	return CONST.SEARCH.TYPE_DEFAULT_COLUMNS.TRIP;
	case CONST.SEARCH.DATA_TYPES.CHAT:
	return CONST.SEARCH.TYPE_DEFAULT_COLUMNS.CHAT;
	case CONST.SEARCH.GROUP_BY.CARD:
	return CONST.SEARCH.GROUP_DEFAULT_COLUMNS.CARD;
	case CONST.SEARCH.GROUP_BY.FROM:
	return CONST.SEARCH.GROUP_DEFAULT_COLUMNS.FROM;
	case CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID:
	return CONST.SEARCH.GROUP_DEFAULT_COLUMNS.WITHDRAWAL_ID;
	default:
	return [];
	}
	}

• Add TAG mappings to both the customColumns and defaultCustomColumns objects in getColumnsToShow()

App/src/libs/SearchUIUtils.ts

Lines 3159 to 3170 in 5b76720

	if (!isExpenseReportView && groupBy) {
	const customColumns = {
	[CONST.SEARCH.GROUP_BY.CARD]: CONST.SEARCH.GROUP_CUSTOM_COLUMNS.CARD,
	[CONST.SEARCH.GROUP_BY.FROM]: CONST.SEARCH.GROUP_CUSTOM_COLUMNS.FROM,
	[CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID]: CONST.SEARCH.GROUP_CUSTOM_COLUMNS.WITHDRAWAL_ID,
	}[groupBy];
	const defaultCustomColumns = {
	[CONST.SEARCH.GROUP_BY.CARD]: CONST.SEARCH.GROUP_DEFAULT_COLUMNS.CARD,
	[CONST.SEARCH.GROUP_BY.FROM]: CONST.SEARCH.GROUP_DEFAULT_COLUMNS.FROM,
	[CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID]: CONST.SEARCH.GROUP_DEFAULT_COLUMNS.WITHDRAWAL_ID,
	}[groupBy];

• Add a conditional check in getColumnsToShow() to ensure required columns (AVATAR and GROUP_TAG) are always included when grouping by tag

App/src/libs/SearchUIUtils.ts

Lines 3209 to 3224 in 5b76720

	if (groupBy === CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID) {
	const requiredColumns = new Set<SearchColumnType>([CONST.SEARCH.TABLE_COLUMNS.AVATAR, CONST.SEARCH.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID]);
	const result: SearchColumnType[] = [];
	for (const col of requiredColumns) {
	if (!columnsToShow.includes(col as SearchCustomColumnIds)) {
	result.push(col);
	}
	}
	for (const col of columnsToShow) {
	result.push(col);
	}
	return result;
	}

• Add a case for GROUP_TAG in getSearchColumnTranslationKey() that returns the tag translation key

App/src/libs/SearchUIUtils.ts

Lines 2628 to 2708 in 5b76720

	function getSearchColumnTranslationKey(columnId: SearchCustomColumnIds): TranslationPaths {
	// eslint-disable-next-line default-case
	switch (columnId) {
	case CONST.SEARCH.TABLE_COLUMNS.DATE:
	return 'common.date';
	case CONST.SEARCH.TABLE_COLUMNS.SUBMITTED:
	return 'common.submitted';
	case CONST.SEARCH.TABLE_COLUMNS.APPROVED:
	return 'search.filters.approved';
	case CONST.SEARCH.TABLE_COLUMNS.POSTED:
	return 'search.filters.posted';
	case CONST.SEARCH.TABLE_COLUMNS.EXPORTED:
	return 'search.filters.exported';
	case CONST.SEARCH.TABLE_COLUMNS.MERCHANT:
	return 'common.merchant';
	case CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION:
	return 'common.description';
	case CONST.SEARCH.TABLE_COLUMNS.FROM:
	return 'common.from';
	case CONST.SEARCH.TABLE_COLUMNS.TO:
	return 'common.to';
	case CONST.SEARCH.TABLE_COLUMNS.CATEGORY:
	return 'common.category';
	case CONST.SEARCH.TABLE_COLUMNS.RECEIPT:
	return 'common.receipt';
	case CONST.SEARCH.TABLE_COLUMNS.TAG:
	return 'common.tag';
	case CONST.SEARCH.TABLE_COLUMNS.ORIGINAL_AMOUNT:
	return 'common.originalAmount';
	case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE:
	return 'common.reimbursable';
	case CONST.SEARCH.TABLE_COLUMNS.BILLABLE:
	return 'common.billable';
	case CONST.SEARCH.TABLE_COLUMNS.ACTION:
	return 'common.action';
	case CONST.SEARCH.TABLE_COLUMNS.TITLE:
	return 'common.title';
	case CONST.SEARCH.TABLE_COLUMNS.STATUS:
	return 'common.status';
	case CONST.SEARCH.TABLE_COLUMNS.EXCHANGE_RATE:
	return 'common.exchangeRate';
	case CONST.SEARCH.TABLE_COLUMNS.POLICY_NAME:
	return 'workspace.common.workspace';
	case CONST.SEARCH.TABLE_COLUMNS.CARD:
	return 'common.card';
	case CONST.SEARCH.TABLE_COLUMNS.REIMBURSABLE_TOTAL:
	return 'common.reimbursableTotal';
	case CONST.SEARCH.TABLE_COLUMNS.NON_REIMBURSABLE_TOTAL:
	return 'common.nonReimbursableTotal';
	case CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT:
	return 'common.tax';
	case CONST.SEARCH.TABLE_COLUMNS.TAX_RATE:
	return 'iou.taxRate';
	case CONST.SEARCH.TABLE_COLUMNS.REPORT_ID:
	return 'common.longReportID';
	case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT:
	return 'iou.amount';
	case CONST.SEARCH.TABLE_COLUMNS.TOTAL:
	return 'common.total';
	case CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID:
	return 'common.reportID';
	case CONST.SEARCH.TABLE_COLUMNS.GROUP_BANK_ACCOUNT:
	return 'common.bankAccount';
	case CONST.SEARCH.TABLE_COLUMNS.GROUP_CARD:
	return 'common.card';
	case CONST.SEARCH.TABLE_COLUMNS.GROUP_FROM:
	return 'common.from';
	case CONST.SEARCH.TABLE_COLUMNS.GROUP_EXPENSES:
	return 'common.expenses';
	case CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL:
	return 'common.total';
	case CONST.SEARCH.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID:
	return 'common.withdrawalID';
	case CONST.SEARCH.TABLE_COLUMNS.GROUP_WITHDRAWN:
	return 'search.filters.withdrawn';
	case CONST.SEARCH.TABLE_COLUMNS.GROUP_FEED:
	return 'search.filters.feed';
	case CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO:
	return 'search.exportedTo';
	}
	}

• Add GROUP_TAG to the required columns set so it cannot be hidden on the Search Columns Page

App/src/pages/Search/SearchColumnsPage.tsx

Lines 58 to 64 in 5b76720

	const requiredColumns = new Set<SearchCustomColumnIds>([
	CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT,
	CONST.SEARCH.TABLE_COLUMNS.TOTAL,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_CARD,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_WITHDRAWAL_ID,
	CONST.SEARCH.TABLE_COLUMNS.GROUP_FROM,
	]);

• Add a case for TAG in getTransactionGroupHeaders() that returns the appropriate column header configuration

App/src/components/SelectionListWithSections/SearchTableHeader.tsx

Lines 263 to 310 in 5b76720

	const getTransactionGroupHeaders = (groupBy: SearchGroupBy, icons: SearchHeaderIcons): SearchColumnConfig[] => {
	switch (groupBy) {
	case CONST.SEARCH.GROUP_BY.FROM:
	return [
	{
	columnName: CONST.SEARCH.TABLE_COLUMNS.AVATAR,
	translationKey: undefined,
	icon: icons.Profile,
	isColumnSortable: false,
	},
	{
	columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_FROM,
	translationKey: 'common.from',
	},
	{
	columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_EXPENSES,
	translationKey: 'common.expenses',
	},
	{
	columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL,
	translationKey: 'common.total',
	},
	];
	case CONST.SEARCH.GROUP_BY.CARD:
	return [
	{
	columnName: CONST.SEARCH.TABLE_COLUMNS.AVATAR,
	translationKey: undefined,
	icon: icons.CreditCard,
	isColumnSortable: false,
	},
	{
	columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_CARD,
	translationKey: 'common.card',
	},
	{
	columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_FEED,
	translationKey: 'search.filters.feed',
	},
	{
	columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_EXPENSES,
	translationKey: 'common.expenses',
	},
	{
	columnName: CONST.SEARCH.TABLE_COLUMNS.GROUP_TOTAL,
	translationKey: 'common.total',
	},
	];

• Update the SearchCustomColumnIds type to include the tag custom column values

App/src/components/Search/types.ts

Lines 117 to 122 in 5b76720

	type SearchCustomColumnIds =
	| ValueOf<typeof CONST.SEARCH.TYPE_CUSTOM_COLUMNS.EXPENSE>
	| ValueOf<typeof CONST.SEARCH.TYPE_CUSTOM_COLUMNS.EXPENSE_REPORT>
	| ValueOf<typeof CONST.SEARCH.GROUP_CUSTOM_COLUMNS.CARD>
	| ValueOf<typeof CONST.SEARCH.GROUP_CUSTOM_COLUMNS.FROM>
	| ValueOf<typeof CONST.SEARCH.GROUP_CUSTOM_COLUMNS.WITHDRAWAL_ID>;

Test Branch

What alternative solutions did you explore? (Optional)

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.