feat/81501: Add Range filter for all date type filters#81897
feat/81501: Add Range filter for all date type filters#81897btkcodedev wants to merge 33 commits intoExpensify:mainfrom
Conversation
|
Hey, I noticed you changed If you want to automatically generate translations for other locales, an Expensify employee will have to:
Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running: npx ts-node ./scripts/generateTranslations.ts --helpTypically, you'd want to translate only what you changed by running |
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [isSearchAdvancedFiltersFormLoading]); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
❌ PERF-10
Reasoning: Parent-child communication should not use useEffect. Instead, lift the state up to the parent component and pass it down as props. This follows React unidirectional data flow pattern, eliminates synchronization issues, reduces unnecessary renders, and makes the data flow clearer.
Suggested fix: Instead of calling onDateValuesChange in useEffect, call it directly when setDateValues is called in setDateValue:
const setDateValue = useCallback((dateModifier: SearchDateModifier, value: string | undefined) => {
setDateValues((prevDateValues) => {
const newDateValues = {...prevDateValues, [dateModifier]: value};
// Update parent immediately with new values
onDateValuesChange?.(newDateValues);
return newDateValues;
});
}, [onDateValuesChange]);Then remove the useEffect entirely.
Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
trjExpensify
left a comment
trjExpensify
left a comment
There was a problem hiding this comment.
Looks pretty good to me. CC: @Expensify/design @JmillsExpensify
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppiOS: mWeb SafariMacOS: Chrome / Safari |
|
Good to run a test build to check it out? |
|
Approval for Spanish translation commented on Slack: |
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.
|
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
On mobile, seeing very large gaps below each calendar: We also want everything left aligned, like so: |
|
We can get rid of the marginTop:12 here: |
|
There are some strange behaviors happening when you take these steps:
CleanShot.2026-02-12.at.09.09.06.mp4 |
|
All the design issues have been addressed Removed mt:12 
Mobile view fixed 
Addressed the inconsistency between the After, Before, and On filters.
|
|
I think all of the options for date are independent of one another. If you have a range set, but then you choose to just do an "On" or "After" or "Before" filter, the new filter would take precedent once you apply. They are all separate from one another. |
|
Running a build now but you have a conflict. |
|
🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
Still feels broken, look how I can't save dates for Before/After/On: CleanShot.2026-02-13.at.08.06.06.mp4 |
|
Working on it |
…obile filter consistency
|
All the addressed issues have been resolved. This should now be ready for approval. Screen.Recording.2026-02-13.at.11.16.32.PM.mov |
|
All tests passed |
|
🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
Super minor but I think the width of these two buttons should match the calendar above: From Figma: |
|
When months have different amounts of week rows, I think I would expect both calendars to grow to the same height: |
|
Okay will do, any other comments @Pujan92, @trjExpensify? I will do it in one shot |
I will do the code review tomorrow. |
5 participants
Explanation of Change
Added a new Range date filter option with dual side-by-side calendars for easier date range selection across all search date filters (Date, Approved, Paid, Submitted, Withdrawn, Posted, Exported).
Key Improvements
New Range Mode: Users can now select date ranges using two calendars displayed side-by-side (desktop) or stacked (mobile/sidebar)
Two-Date Validation: Enforces that both From and To dates must be selected when using Range mode, preventing incomplete date ranges
Consistent Display: Date ranges are now displayed as "Range: Jan 1, 2024 - Jan 31, 2024" entries in filter lists and titles
Auto-Detection: When both After and Before dates exist on page load, it automatically switches to Range mode for better UX
Responsive Layouts:
Preserved Workflows: Individual After/Before editing still works when selected directly from menu items
Technical Changes
CONST.SEARCH.DATE_MODIFIERS.RANGERangeDatePickercomponent with dual calendarsDateFilterBase,DatePresetFilterBase, andDateSelectPopupto support Range modeAdvancedSearchFiltersandSearchFiltersReportFieldPageDropdownButtonFixed Issues
$ #81501
PROPOSAL: #81501 (comment)
Tests
Test Steps
Range Mode - Desktop Popup
Range Mode - Sidebar Filters
Two-Date Validation
Auto-Detection on Reload
Individual After/Before Editing
Mobile/Narrow Layout
Offline tests
Same as above
QA Steps
Design verification
Verify that the designs are as given in the issue section
Range Mode - Desktop Popup
Range Mode - Sidebar Filters
Two-Date Validation
Auto-Detection on Reload
Individual After/Before Editing
Mobile/Narrow Layout
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Screen_Recording_20260209_234831_New.Expensify.Dev.mp4
Android: mWeb Chrome
Screen_Recording_20260209_234141_Brave.mp4
iOS: Native
Screen.Recording.2026-02-09.at.11.30.23.PM.mov
iOS: mWeb Safari
Screen.Recording.2026-02-09.at.11.34.04.PM.mov
MacOS: Chrome / Safari
Screen.Recording.2026-02-10.at.12.04.47.AM.mov