Add insight-switcher dropdown to the chart slot in Home

[mhawryluk]

Explanation of Change

Adds the ability to switch the Insight chart shown on the home page, where previously we would always show Spend Over Time, via a dropdown. SpendOverTimeSection is renamed to InsightsSection.

Fixed Issues

$ #96464
PROPOSAL: N/A

Tests

1. Login to an account that has a workspace in which they are an admin/auditor/approver.
2. Verify the Insights section (formerly Spend over time) is shown and there is a chevron next to the section title.
3. Click on the title, verify a popup shows up and is positioned correctly (anchored to the title on wide view, bottom-docked modal on narrow layout).
4. Change the selection.
5. Verify the title and chart changes to the new selected insight.
6. Click the three dot menu > View.
7. Verify you are navigated to the selected insight in the Spend tab.
8. Change tabs and go back Home, verify the insight selection is persisted, does not go back to the default (spend over time).
9. Log out and log back in, verify the selection is persisted for the user across sessions.
10. Verify that after clearing cache and restarting, when first opening Home (without opening Spend first) the section shows the loading state until the selected insight's search finishes, and that the dropdown lists every available insight the whole time. Confirm only that one search is requested, not all four.
11. Verify the Search command is called in the Networks tab after changing the selection.
12. Troubleshoot > Simulate failing network requests. Verify there is an error state with "Try again" button.

---

Verify that an insight is available to choose from whenever it is not hidden in Spend, regardless of whether it has data, and that a chart renders with at least 1 data point (not 2 like before). An insight with no data shows the "Chart unavailable" empty state instead of being removed.

1. Log in to a new account.
2. Create a workspace
3. Verify the Insights section IS shown on the Home page when there are no expenses, displaying the "Chart unavailable" empty state, and that the three dot menu is still available.
4. Create an expense and set its date to somewhere in the previous calendar month.
5. Go to Home and verify the section is shown and Spend over time, Top categories, Top merchants are available to choose from and show the chart when selected.
6. Disable Categories feature in workspace's More features
7. Verify Top categories is hidden (not in the dropdown) and if it was previously selected the widget falls back to showing one of the available ones.
8. Add a member to the workspace.
9. Verify Top spenders is available to choose from now and renders as a bar chart
10. Log in as the user who is not an admin/auditor/approver of any workspace, just member.
11. Verify there is no Insights section in Home.

---

Verify that Top spenders is hidden for a track-intent user whose workspaces all have Workflows disabled, both in Spend and in the Home Insights dropdown.

1. Sign up for a new account and pick a track onboarding intent ("Track and budget expenses")
2. Create a workspace and confirm More features > Workflows is off (default for a fresh workspace). Add a second member so the workspace has at least 2 members.
3. Create an expense dated in the previous calendar month.
4. Go to Search > Spend and verify Top spenders is NOT listed, while Spend over time, Top categories and Top merchants are.
5. Go to Home, open the Insights title dropdown and verify Top spenders is NOT an option there either.
6. Enable Workflows on the workspace.
7. Verify Top spenders now appears in the Home Insights dropdown, and renders a chart when selected.
8. Disable Workflows again and verify Top spenders disappears from both places.

Offline tests

1. When offline the selection should be applied optimistically.
2. The chart should show the last fetched data if there are some and "You appear to be offline" placeholder if there is no data. (Clear cache, go offline, open Home. Expect offline blocking view, dropdown with one option, no three-dot menu).

QA Steps

Same as tests.

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
• If new assets were added or existing ones were modified, I verified that:
  • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
  • The assets load correctly across all supported platforms.
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
  • I verified that all the inputs inside a form are aligned with each other.
  • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
• I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

Nagranie.z.ekranu.2026-07-23.o.17.31.52.mov

Android: mWeb Chrome

iOS: Native

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-08-03.at.11.32.32.mov

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-08-03.at.11.33.15.mov

iOS: mWeb Safari

MacOS: Chrome / Safari

Nagranie.z.ekranu.2026-07-23.o.15.06.16.mov

Nagranie.z.ekranu.2026-08-5.o.12.13.16.mov

[codecov]

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/ONYXKEYS.ts	100.00% <ø> (ø)
src/components/Icon/chunks/illustrations.chunk.ts	0.00% <ø> (ø)
src/components/WidgetContainer.tsx	100.00% <100.00%> (ø)
src/libs/ExportOnyxState/common.ts	80.35% <ø> (ø)
src/libs/SearchUIUtils.ts	65.17% <100.00%> (+0.04%)	⬆️
src/pages/home/HomePage.tsx	100.00% <ø> (ø)
src/pages/home/InsightsSection/index.tsx	83.33% <66.66%> (ø)
...ages/home/InsightsSection/useHomeInsightConfigs.ts	11.11% <11.11%> (ø)
src/pages/home/InsightsSection/useInsightData.ts	32.43% <47.05%> (ø)
...es/home/InsightsSection/InsightsSectionContent.tsx	0.00% <0.00%> (ø)
... and 1 more
... and 6 files with indirect coverage changes

[shawnborton]

Quick feedback: I think we need more padding at the bottom of the donut chart, maybe add 20-32px and see how it looks compared to the others:

[mhawryluk]

Quick feedback: I think we need more padding at the bottom of the donut chart, maybe add 20-32px and see how it looks compared to the others

okie, that's with 24px:

[shawnborton]

Nice that feels good 👍

[WojtekBoman]

LGTM 🎸 I left a few small comments, but overall the code looks solid 💪

[mhawryluk]

And should we always show all tab items? And after opening a tab, just show Chart unavailable?

Because at the moment it's a bit confusing 😅 We don't have top merchants and categories But show these tabs But in case of spenders, we hide the spenders tab

CC: @JmillsExpensify

This matches the behavior in the Spend tab. We show the "Chart unavailable" empty state when the insight is available to select, but happens to have 0 data points. But each insight also has its own visibility rules, which if are not met, then we hide that insight both in the Spend tab and on Home (based on the user/workspace settings, not search results)

[ZhenjaHorbach]

Okay then
Changes look good!

[github-actions]

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

[dannymcclain]

Did a quick test and it's working pretty well for me! Didn't run into any glaring issues.

[shawnborton]

Yup same on my end 👍

[dubielzyk-expensify]

Same. Works nicely 👍

[JmillsExpensify]

Agree with the discussion above. LGTM

[JmillsExpensify]

@grgia on to you!

[github-actions]

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

[github-actions]

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

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-a7d69234595-1868bbc-c7de1c52284c6e0bd8f070b379ab3a7ca5ee35a0/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-a7d6923-1868bbc-6d73d14aa9efa1b241912a03403c475761feb4e2/index.html

Web 🕸️
https://96625.pr-testing.expensify.com

---

👀 View the workflow run that generated this build 👀

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging by https://github.com/mountiny in version: 9.4.52-0 🚀

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

[MelvinBot]

Help site review — changes required.

This PR turns the Home "Spend over time" chart into a switchable insights section (a title dropdown to pick between Spend over time, Top categories, Top merchants, and Top spenders) and changes its availability so the section now appears even without enough data, showing a Chart unavailable empty state instead of disappearing. That contradicts the current help doc, which documents a fixed Spend over time section that only appears when the workspace has "expenses across at least two time periods."

I opened a draft help site PR updating Expensify-Home-Overview.md:

• Draft PR: [No QA] Docs updates for E/A#96625 Home Insights chart switcher #98215

What changed in the doc

• Reworked the Home chart section to document the insight title dropdown, the available insights, that the selection is saved across sessions, and the three dots (⋮) > View action that opens the selected insight on the Spend page.
• Removed the outdated "expenses across at least two time periods" requirement and documented the new Chart unavailable empty state.
• Updated the "What Home shows" list, the FAQ entry, keywords, and internalScope.

Feature/label names were verified against src/languages/en.ts and the InsightsSection component code, since the live Home insights section only renders for a Workspace Admin/Auditor/approver on a workspace with data — a state the automated test account could not reach.

@mhawryluk, please review the linked help site PR and confirm it reflects the current behavior. Then mark the linked help site PR Ready for review

[mitarachim]

@mhawryluk This PR is failing because of a regression issue #98331

The issue is reproducible in: iOS

Bug7230985_1786456192428.Crash_Test_Insight.mp4

[ZhenjaHorbach]

@mitarachim
Can you share the crash report, please?

[mitarachim]

Hello @ZhenjaHorbach tester already unavailable to provide crash report.
but i try to reproduce issue in my side and provide crash report from my side too.
account : applausetester+mr110826bpop@applause.expensifail.com

ScreenRecording_08-11-2026.23-43-58_1.MP4

Analytics-2026-08-05-070008.0005.ips.ca.synced.zip

[OSBotify]

🚀 Deployed to production by https://github.com/roryabraham in version: 9.4.52-11 🚀

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

Bundle Size Analysis (Sentry):

• Android