feat: [CFI] Add group-by report layout feature by TaduJR · Pull Request #72943 · Expensify/App

TaduJR · 2025-10-20T06:39:34Z

Explanation of Change

This PR implements a group-by report layout feature that allows users to organize expense report transactions by Category or Tag, matching the familiar OldDot functionality that NewDot customers have been requesting.

Key Changes:

Data Layer & Backend Integration

Added NVP_REPORT_LAYOUT_GROUP_BY Onyx key for storing user preference
Reuses existing OldDot NVP key (expensify_groupByOption) for backward compatibility
No new backend API needed - uses existing SetNameValuePair command
Values: 'mcc' (Category - default) or 'tag' (Tag)

Action Handler with Pattern A Offline UX

Created src/libs/actions/ReportLayout.ts with optimistic updates
Instant visual feedback via transaction regrouping (no pending/error UI needed)
Automatic rollback on API failure
Works seamlessly offline - changes queued and synced when connection restores

Business Logic - Transaction Grouping

Created src/libs/ReportLayoutUtils.ts with grouping
Groups transactions by category or tag with accurate subtotals
Sorts groups by order on the category/tag values alphabetically (A>Z)
Handles edge cases: uncategorized expenses, missing tags, multi-currency reports
Fully internationalized with translateLocal() for all user-facing text

UI Components

MoneyRequestReportGroupHeader (src/components/MoneyRequestReportView/MoneyRequestReportGroupHeader.tsx):
- Inline amount formatting: "Category - $15.00"
- Always-visible checkboxes for bulk group selection
- Responsive: 12px padding (desktop), 16px horizontal + 44px min height (mobile)
- Pixel-perfect 16px font size matching Figma specs
ReportLayoutPage (src/pages/settings/Report/ReportLayoutPage.tsx):
- Settings page with "Group by:" label and radio selection
- Category and Tag options (no "None" option per team decision)
- Opens in RHP (Right Hand Panel) modal

Navigation & Routing

Deep link support: r/:reportID/settings/report-layout
Route registered in modal stack navigator
Uses Navigation.dismissModal() (modern pattern, not deprecated goBack())

Menu Integration

Added "Report layout" option to three-dots menu (MoneyReportHeader)
Menu item only shows for expense reports with 2+ transactions
Uses Feed icon (stacked layers visual)
Positioned logically with other report customization options

Grouped Transaction Display

Modified MoneyRequestReportTransactionList.tsx to render transactions in groups
Groups always expanded (non-collapsible)
8px spacing: between header and first transaction, between each transaction, between groups
Bulk selection at group level: checkbox on header selects all transactions in group
Indeterminate checkbox state when some (not all) transactions selected
Instant regrouping when preference changes

Internationalization

Added translations for all 10 supported languages (en, es, de, fr, it, ja, nl, pl, pt-BR, zh-hans)
Translation keys: reportLayout.reportLayout, reportLayout.groupByLabel, reportLayout.groupBy.category, reportLayout.groupBy.tag, reportLayout.selectGroup

Fixed Issues

$ #72100
PROPOSAL: #72100 (comment)

Tests

Desktop Testing

Category Grouping:

Open an expense report with 5+ transactions across multiple categories (e.g., 2 "Gas" transactions, 3 "Office Supplies" transactions)
Click More button
Click "Report layout" in the menu
Verify RHP opens with header "Report layout" and "Group by:" label
Verify "Category" is selected by default (green checkmark)
Verify transactions are grouped by category with group headers showing "Category Name - $Amount"
Verify groups are sorted order on the category/tag values alphabetically (A>Z)
Verify each group header has a checkbox
Click a group header checkbox
Verify all transactions in that group are selected
Click individual transaction to deselect
Verify group checkbox shows indeterminate state

Tag Grouping:

With report still open, click More → "Report layout"
Select "Tag" option
Verify modal dismisses
Verify transactions instantly regroup by tag
Verify group headers now show tag names with subtotals
Verify untagged transactions show in separate group

Preference Persistence:

Navigate to a different expense report
Verify tag grouping is still active (preference persisted)
Change back to category grouping
Open a third report
Verify category grouping is active

Offline Mode:

Enable airplane mode (disconnect internet)
Change grouping preference from category to tag
Verify transactions regroup instantly (optimistic update)
Disable airplane mode (reconnect internet)
Wait ~5 seconds
Verify preference remains as tag (synced to server)

Edge Cases:

Open a report with only 1 transaction
Verify "Report layout" option does NOT appear in More menu
Open a report where all transactions have the same category
Verify only one group appears
Open a report with 0 transactions
Verify "Report layout" option does NOT appear in three-dots menu

Mobile Testing (iOS/Android)

Category Grouping:

Open an expense report with 5+ transactions on mobile device
Tap More menu
Verify "Report layout" option appears
Tap "Report layout"
Verify RHP opens with "Report layout" header and back button
Verify "Group by:" label is visible
Verify "Category" is selected by default
Tap "Tag" option
Verify modal dismisses and transactions regroup by tag
Verify checkboxes are visible on group headers

Group Selection:

Tap a group header checkbox
Verify all transactions in that group are selected
Verify group checkbox shows checked state
Tap individual transaction checkbox to deselect one
Verify group checkbox shows indeterminate state
Tap group checkbox again
Verify all transactions in group are deselected

Verify that no errors appear in the JS console

Offline tests

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."
Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Screenshot 2025-11-22 at 3 42 14 in the afternoon

Screenshot 2025-11-22 at 3 42 06 in the afternoon

Screenshot 2025-11-22 at 3 41 45 in the afternoon

Screenshot 2025-11-22 at 3 41 36 in the afternoon

Screenshot 2025-11-22 at 3 41 30 in the afternoon

Screenshot 2025-11-22 at 3 41 25 in the afternoon

Screenshot 2025-11-22 at 3 41 18 in the afternoon

Android: mWeb Chrome

Screenshot 2025-11-22 at 3 37 59 in the afternoon

Screenshot 2025-11-22 at 3 37 53 in the afternoon

Screenshot 2025-11-22 at 3 37 44 in the afternoon

Screenshot 2025-11-22 at 3 37 37 in the afternoon

Screenshot 2025-11-22 at 3 37 31 in the afternoon

iOS: Native

Screenshot 2025-11-22 at 3 53 33 in the afternoon

Screenshot 2025-11-22 at 3 53 24 in the afternoon

Screenshot 2025-11-22 at 3 53 10 in the afternoon

Screenshot 2025-11-22 at 3 53 05 in the afternoon

Screenshot 2025-11-22 at 3 53 01 in the afternoon

Screenshot 2025-11-22 at 3 52 57 in the afternoon

iOS: mWeb Safari

Screenshot 2025-11-22 at 3 56 54 in the afternoon

Screenshot 2025-11-22 at 3 56 36 in the afternoon

Screenshot 2025-11-22 at 3 56 30 in the afternoon

Screenshot 2025-11-22 at 3 56 25 in the afternoon

Screenshot 2025-11-22 at 3 56 15 in the afternoon

MacOS: Chrome / Safari

Screenshot 2025-11-22 at 3 59 05 in the afternoon

Screenshot 2025-11-22 at 3 58 53 in the afternoon

Screenshot 2025-11-22 at 3 58 48 in the afternoon

Screenshot 2025-11-22 at 3 58 44 in the afternoon

Screenshot 2025-11-22 at 3 58 33 in the afternoon

MacOS: Desktop

Screenshot 2025-11-22 at 4 01 25 in the afternoon

Screenshot 2025-11-22 at 4 01 15 in the afternoon

Screenshot 2025-11-22 at 4 01 11 in the afternoon

Screenshot 2025-11-22 at 4 01 04 in the afternoon

Screenshot 2025-11-22 at 4 00 52 in the afternoon

melvin-bot · 2025-10-20T06:39:40Z

@shubham1206agra Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

codecov · 2025-10-20T07:09:48Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
src/CONST/index.ts	`85.84% <ø> (ø)`
src/ONYXKEYS.ts	`100.00% <ø> (ø)`
src/SCREENS.ts	`100.00% <ø> (ø)`
src/libs/Navigation/linkingConfig/config.ts	`75.00% <ø> (ø)`
src/libs/ReportSecondaryActionUtils.ts	`91.00% <100.00%> (+0.17%)`	⬆️
src/styles/index.ts	`45.65% <ø> (ø)`
src/ROUTES.ts	`12.15% <0.00%> (-0.13%)`	⬇️
...gation/AppNavigator/ModalStackNavigators/index.tsx	`8.42% <0.00%> (-0.02%)`	⬇️
src/components/MoneyReportHeader.tsx	`0.17% <0.00%> (-0.01%)`	⬇️
src/libs/actions/ReportLayout.ts	`0.00% <0.00%> (ø)`
... and 4 more
... and 11 files with indirect coverage changes

TaduJR · 2025-10-20T08:34:06Z

Working on the unit tests. I will add them today/tomorrow. Until then @shubham1206agra can review how the is code looking with the feature request.

trjExpensify · 2025-10-20T10:20:10Z

@TaduJR did you forget the video recording as well?

TaduJR · 2025-10-21T07:57:03Z

@TaduJR did you forget the video recording as well?

@trjExpensify 👋

Oh no I didn't. I am working on the tests steps since I will recording on based on the test steps I wanted a confirmation from you to see if it is sufficient after I finished writing it

github-actions · 2025-10-21T11:53:25Z

🚧 @trjExpensify has triggered a test Expensify/App build. You can view the workflow run here.

trjExpensify · 2025-10-21T11:53:35Z

Okay, can you please write the test steps and record he vids for the OP today? We're keen to get this shipped and out the door as customers are asking for it.

@Expensify/design I'm kicking off a build in case you want to review in the meantime to speed up any design feedback.

github-actions · 2025-10-21T12:27:12Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪
Built from App PR #72943.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/72943/index.html	❌ FAILED ❌
	The QR code can't be generated, because the iOS build failed

Desktop 💻	Web 🕸️
❌ FAILED ❌	https://72943.pr-testing.expensify.com
The QR code can't be generated, because the Desktop build failed

👀 View the workflow run that generated this build 👀

JmillsExpensify · 2025-10-21T13:03:15Z

Btw, I just tested the adhoc build. I'm curious for design feedback, though I'm I found the category totals a little odd to experience in practice.

For instance, it looks totally fine for this case, where they aren't too many expenses within a given category grouping.

On the other hand, when you have a lot of expenses within a given category, it's really easy to lose the context of the total.

Now in the interest of urgency, this is fine for now, but I think it's something we should probably explore in future PRs. Do we show a summary of the category totals somewhere so it's easy to see them all and compare them? Do we "freeze" a given category total at the top of the expense table when it goes out of view? Those are things worth considering down the road to help make the groupings a bit more useful.

Again though, I think this is fine for now. I'd rather get this out and then tweak from there.

trjExpensify · 2025-10-21T13:11:48Z

Took it for a quick spin myself as well. One thing functionally, it doesn't seem like the layout selected is persisting after simulating clearing the cache.

2025-10-21_14-07-05.mp4

I don't see the NVP in Applications > OnyxDB:

Interestingly, when I then switched over to Classic, I can see the tag value was remembered and stored in the layout NVP.

2025-10-21_14-22-18.mp4

shubham1206agra · 2025-10-21T13:58:51Z

Took it for a quick spin myself as well. One thing functionally, it doesn't seem like the layout selected is persisting after simulating clearing the cache.
2025-10-21_14-07-05.mp4

I don't see the NVP in Applications > OnyxDB:

Interestingly, when I then switched over to Classic, I can see the tag value was remembered and stored in the layout NVP.
2025-10-21_14-22-18.mp4

@trjExpensify This is problem with BE. BE needs to send the Onyx key in OpenApp call.

trjExpensify · 2025-10-21T16:32:14Z

Ah gotcha, so:

We're writing to and storing the mcc || tag value correctly in the expensify_groupByOption accountNVP when the user changes the setting. That explains why when I switch over to Classic, it's remembered.
We aren't include expensify_groupByOption in OpenApp yet, so if you sign-out and back in again, we don't add that NVP to your onyx data, and therefore revert back to the category layout which is the default without it set.

I'm cool to not block this PR on that, but we'll want to get that rectified pronto. Discussing that internally here with @nkuoch and @mountiny.

dannymcclain · 2025-10-21T16:37:51Z

The build is looking as expected to me - though I will admit I don't love it. I think it certainly accomplishes the goal for now, but I'm not sure how I feel about this being the default report layout forever haha. Not a blocker, just something I'm going to keep in mind to explore down the line.

I also agree with Jason's point about finding a solution for totals, but ultimately feel the same as him here:

I think this is fine for now. I'd rather get this out and then tweak from there.

TaduJR · 2025-10-21T20:02:33Z

@trjExpensify

Wrote the test steps. Let me know what you think, and see if I missed case accidentally.

trjExpensify · 2025-10-21T20:15:21Z

Great tests overall!

Verify groups are sorted by total amount (highest first)

On Classic we order on the category/tag values alphabetically (A>Z). We should do the same here.

JmillsExpensify · 2025-10-21T21:00:22Z

@dannymcclain yeah maybe let's prioritize some explorations back in the lab? In the meantime, let's merge what we have and give our users what they want.

dubielzyk-expensify · 2025-10-21T22:26:14Z

The build is looking as expected to me - though I will admit I don't love it. I think it certainly accomplishes the goal for now, but I'm not sure how I feel about this being the default report layout forever haha. Not a blocker, just something I'm going to keep in mind to explore down the line.

100%. This feels overkill to me when you're looking at a report with 2-4 expenses especially given the repetitive categories:

From a visual perspective it looks good on desktop, but I kinda feel like mobile looks a bit unpolished. Wonder if we should drop the font size a bit on mobile given how quickly it truncates!?

trjExpensify · 2025-10-21T22:33:29Z

From a visual perspective it looks good on desktop, but I kinda feel like mobile looks a bit unpolished. Wonder if we should drop the font size a bit on mobile given how quickly it truncates!?

Yeah, really good point. It feels pretty redundant on mobile when you can't see the totals. I feel like we need to show it all or not bother. FWIW, OldApp doesn't have this report layout stuff.

dubielzyk-expensify · 2025-10-22T00:36:46Z

Also, multi-select on mobile gives me this weird red checkbox and the checkboxes aren't aligned:

We could not truncate on mobile and tighten the spacing a bit:

Still think it makes a normal report look way too overwhelming, but if we believe this is needed, then I think the above is a good tweak

dubielzyk-expensify · 2025-10-22T00:38:43Z

Sorry I guess the red checkbox should actually look like the one at the top given it's partially selected:

TaduJR · 2025-10-22T05:39:11Z

Great tests overall!

Thank you for your feedback!

On Classic we order on the category/tag values alphabetically (A>Z). We should do the same here.

On it.

Also, multi-select on mobile gives me this weird red checkbox and the checkboxes aren't aligned:

Will do that ASAP.

We could not truncate on mobile and tighten the spacing a bit:

Awesome, I like this a lot.

Sorry I guess the red checkbox should actually look like the one at the top given it's partially selected

Will do that as well.

What have decided on this comment?

JS00001 · 2025-11-24T17:56:38Z

@nkuoch Do you want to review this or do you want me to take this issue to the finish line?

TaduJR · 2025-11-25T06:23:17Z

I think this is good to merge, thanks for the hard work!

My pleasure 🙏.

Thank you for your review.

OSBotify · 2025-11-26T03:52:36Z

🚀 Deployed to staging by https://github.com/nkuoch in version: 9.2.64-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

…roup-by-report-layout-feature" This reverts commit 13420bc, reversing changes made to 5717a04.

OSBotify · 2025-11-27T01:21:17Z

🚀 Deployed to production by https://github.com/marcaaron in version: 9.2.64-5 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

OSBotify · 2025-11-27T01:40:09Z

🚀 Deployed to staging by https://github.com/nkuoch in version: 9.2.65-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

OSBotify · 2025-11-28T18:29:35Z

🚀 Deployed to production by https://github.com/marcaaron in version: 9.2.65-6 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

TaduJR requested review from a team as code owners October 20, 2025 06:39

melvin-bot Bot assigned TaduJR Oct 20, 2025

melvin-bot Bot requested review from shubham1206agra and removed request for a team October 20, 2025 06:39

TaduJR closed this Oct 20, 2025

TaduJR force-pushed the feat-CFI-Add-group-by-report-layout-feature branch from f61de24 to adab45b Compare October 20, 2025 06:53

TaduJR reopened this Oct 20, 2025

This comment has been minimized.

Sign in to view

nkuoch approved these changes Nov 25, 2025

View reviewed changes

nkuoch merged commit 13420bc into Expensify:main Nov 25, 2025
32 checks passed

This was referenced Nov 25, 2025

Investigate workflow job failing on main: lint / ESLint check #75994

Closed

Investigate workflow job failing on main: test / test (job 5) #75995

Closed

situchan reviewed Nov 25, 2025

View reviewed changes

Comment thread src/libs/ReportLayoutUtils.ts

OSBotify mentioned this pull request Nov 26, 2025

Deploy Checklist: New Expensify 2025-11-26 #76071

Closed

70 tasks

TaduJR added a commit to TaduJR/App that referenced this pull request Nov 26, 2025

Revert "Merge pull request Expensify#72943 from TaduJR/feat-CFI-Add-g…

000c059

…roup-by-report-layout-feature" This reverts commit 13420bc, reversing changes made to 5717a04.

This was referenced Nov 26, 2025

[CP Staging] revert: feat: [CFI] Add group-by report layout feature #76098

Merged

feat: [CFI] Add group-by report layout feature #76169

Merged

melvin-bot Bot mentioned this pull request Nov 27, 2025

[$500] [CFI] Add group-by report layout feature #72100

Closed

NikkiWines mentioned this pull request Nov 27, 2025

Expenses - Category checkbox isn't shown disabled when deleting relevant expenses offline #76191

Closed

8 tasks

Conversation

TaduJR commented Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Oct 20, 2025

Uh oh!

codecov Bot commented Oct 20, 2025 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

TaduJR commented Oct 20, 2025

Uh oh!

trjExpensify commented Oct 20, 2025

Uh oh!

TaduJR commented Oct 21, 2025

Uh oh!

This comment has been minimized.

github-actions Bot commented Oct 21, 2025

Uh oh!

trjExpensify commented Oct 21, 2025

Uh oh!

github-actions Bot commented Oct 21, 2025

Uh oh!

JmillsExpensify commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

trjExpensify commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shubham1206agra commented Oct 21, 2025

Uh oh!

trjExpensify commented Oct 21, 2025

Uh oh!

dannymcclain commented Oct 21, 2025

Uh oh!

TaduJR commented Oct 21, 2025

Uh oh!

trjExpensify commented Oct 21, 2025

Uh oh!

JmillsExpensify commented Oct 21, 2025

Uh oh!

dubielzyk-expensify commented Oct 21, 2025

Uh oh!

trjExpensify commented Oct 21, 2025

Uh oh!

dubielzyk-expensify commented Oct 22, 2025

Uh oh!

dubielzyk-expensify commented Oct 22, 2025

Uh oh!

TaduJR commented Oct 22, 2025

Uh oh!

JS00001 commented Nov 24, 2025

Uh oh!

TaduJR commented Nov 25, 2025

Uh oh!

Uh oh!

Uh oh!

OSBotify commented Nov 26, 2025

Uh oh!

OSBotify commented Nov 27, 2025

Uh oh!

OSBotify commented Nov 27, 2025

Uh oh!

OSBotify commented Nov 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

12 participants

TaduJR commented Oct 20, 2025 •

edited

Loading

codecov Bot commented Oct 20, 2025 •

edited by github-actions Bot

Loading

JmillsExpensify commented Oct 21, 2025 •

edited

Loading

trjExpensify commented Oct 21, 2025 •

edited

Loading