From c4f6effd7527195b22c719805cfde60d2742ae39 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Mon, 9 Feb 2026 23:49:52 +0530
Subject: [PATCH 01/58] feat: Range UI filter

---
 src/CONST/index.ts                            |   1 +
 .../DatePicker/CalendarPicker/ArrowIcon.tsx   |   8 +-
 .../DatePicker/CalendarPicker/index.tsx       |  13 +-
 .../FilterComponents/DateFilterBase.tsx       |  97 +++++++++--
 .../FilterComponents/DatePresetFilterBase.tsx |  76 ++++++++-
 .../FilterComponents/RangeDatePicker.tsx      |  97 +++++++++++
 .../FilterDropdowns/DateSelectPopup.tsx       | 158 ++++++++++++++++--
 .../Search/FilterDropdowns/DropdownButton.tsx |  13 +-
 .../SearchPageHeader/SearchFiltersBar.tsx     |  75 ++++++---
 src/languages/en.ts                           |   4 +
 src/libs/DateUtils.ts                         |   8 +-
 src/pages/Search/AdvancedSearchFilters.tsx    |  71 +++++---
 .../SearchFiltersReportFieldPage/index.tsx    |  18 +-
 13 files changed, 538 insertions(+), 101 deletions(-)
 create mode 100644 src/components/Search/FilterComponents/RangeDatePicker.tsx

diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index d7c9c26401434..0cb817bc5bba2 100755
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -7352,6 +7352,7 @@ const CONST = {
             ON: 'On',
             AFTER: 'After',
             BEFORE: 'Before',
+            RANGE: 'Range',
         },
         AMOUNT_MODIFIERS: {
             LESS_THAN: 'LessThan',
diff --git a/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx b/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx
index f79e180a69f1d..8dff1201858c1 100644
--- a/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx
+++ b/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import Icon from '@components/Icon';
@@ -14,15 +15,18 @@ type ArrowIconProps = {
 
     /** Specifies direction of icon */
     direction?: ValueOf<typeof CONST.DIRECTION>;
+
+    /** Optional style overrides for the container */
+    containerStyle?: StyleProp<ViewStyle>;
 };
 
-function ArrowIcon({disabled = false, direction = CONST.DIRECTION.RIGHT}: ArrowIconProps) {
+function ArrowIcon({disabled = false, direction = CONST.DIRECTION.RIGHT, containerStyle}: ArrowIconProps) {
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     return (
-        <View style={[styles.p1, StyleUtils.getDirectionStyle(direction), disabled ? styles.buttonOpacityDisabled : {}]}>
+        <View style={[styles.p1, containerStyle, StyleUtils.getDirectionStyle(direction), disabled ? styles.buttonOpacityDisabled : {}]}>
             <Icon
                 fill={theme.icon}
                 src={icons.ArrowRight}
diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx
index c92737170c164..6e80c70518fcf 100644
--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -1,6 +1,7 @@
 import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns';
 import {Str} from 'expensify-common';
 import React, {useEffect, useRef, useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
@@ -35,6 +36,9 @@ type CalendarPickerProps = {
 
     /** A function called when the date is selected */
     onSelected?: (selectedDate: string) => void;
+
+    /** Optional style override for the header container */
+    headerContainerStyle?: StyleProp<ViewStyle>;
 };
 
 function getInitialCurrentDateView(value: Date | string, minDate: Date, maxDate: Date) {
@@ -56,6 +60,7 @@ function CalendarPicker({
     onSelected,
     DayComponent = Day,
     selectableDates,
+    headerContainerStyle,
 }: CalendarPickerProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
@@ -175,11 +180,12 @@ function CalendarPicker({
 
     const webOnlyMarginStyle = isSmallScreenWidth ? {} : styles.mh1;
     const calendarContainerStyle = isSmallScreenWidth ? [webOnlyMarginStyle, themeStyles.calendarBodyContainer] : [webOnlyMarginStyle, animatedStyle];
+    const headerPaddingStyle = headerContainerStyle ?? themeStyles.ph5;
 
     return (
         <View style={[themeStyles.pb4]}>
             <View
-                style={[themeStyles.calendarHeader, themeStyles.flexRow, themeStyles.justifyContentBetween, themeStyles.alignItemsCenter, themeStyles.ph5]}
+                style={[themeStyles.calendarHeader, themeStyles.flexRow, themeStyles.justifyContentBetween, themeStyles.alignItemsCenter, headerPaddingStyle]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
             >
                 <PressableWithFeedback
@@ -202,7 +208,10 @@ function CalendarPicker({
                     >
                         {currentYearView}
                     </Text>
-                    <ArrowIcon disabled={years.length <= 1} />
+                    <ArrowIcon
+                        disabled={years.length <= 1}
+                        containerStyle={themeStyles.pr0}
+                    />
                 </PressableWithFeedback>
                 <View style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentEnd, themeStyles.mrn2]}>
                     <Text
diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 5f7545e0eb214..7279acb099d3b 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -1,18 +1,22 @@
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import {format, parseISO} from 'date-fns';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {View} from 'react-native';
 import Button from '@components/Button';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScrollView from '@components/ScrollView';
+import Text from '@components/Text';
 import type {ReportFieldDateKey, SearchDateFilterKeys} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
+import DateUtils from '@libs/DateUtils';
 import {getDatePresets} from '@libs/SearchUIUtils';
 import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
-import type {SearchDatePresetFilterBaseHandle} from './DatePresetFilterBase';
+import type {SearchDatePresetFilterBaseHandle, SearchDateValues} from './DatePresetFilterBase';
 import DatePresetFilterBase from './DatePresetFilterBase';
 
 type DateFilterBaseProps = {
@@ -30,6 +34,17 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
     const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
     const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
+    const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
+    const [trackedDateValues, setTrackedDateValues] = useState<SearchDateValues>({
+        [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+    });
+
+    const handleDateValuesChange = useCallback((dateValues: SearchDateValues) => {
+        setTrackedDateValues(dateValues);
+    }, []);
 
     const dateOnKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
         ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.ON_PREFIX) as ReportFieldDateKey)
@@ -52,6 +67,7 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
             [CONST.SEARCH.DATE_MODIFIERS.ON]: dateOnValue,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: dateBeforeValue,
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: dateAfterValue,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
         }),
         [dateAfterValue, dateBeforeValue, dateOnValue],
     );
@@ -61,6 +77,14 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         return getDatePresets(dateKey, hasFeed);
     }, [dateKey, searchAdvancedFiltersForm?.feed]);
 
+    // Auto-detect Range mode when both after and before values exist on initial load only
+    useEffect(() => {
+        if (!isSearchAdvancedFiltersFormLoading && dateAfterValue && dateBeforeValue && !dateOnValue) {
+            setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSearchAdvancedFiltersFormLoading]);
+
     const computedTitle = useMemo(() => {
         if (selectedDateModifier) {
             return translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`);
@@ -89,12 +113,33 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         }
 
         if (selectedDateModifier) {
+            // For Range, validate that both dates are selected
+            if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+                const hasFrom = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+                const hasTo = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+
+                if (!hasFrom || !hasTo) {
+                    setShouldShowRangeError(true);
+                    return;
+                }
+            }
+
             searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
             setSelectedDateModifier(null);
+            setShouldShowRangeError(false);
             return;
         }
 
         const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+        const hasFrom = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+        const hasTo = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+
+        if (hasFrom !== hasTo) {
+            setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
+            setShouldShowRangeError(true);
+            return;
+        }
 
         onSubmit({
             [dateOnKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.ON] ?? null,
@@ -113,12 +158,12 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
     };
 
     return (
-        <>
+        <View style={styles.flex1}>
             <HeaderWithBackButton
                 title={computedTitle}
                 onBackButtonPress={goBack}
             />
-            <ScrollView contentContainerStyle={[styles.flexGrow1]}>
+            <ScrollView contentContainerStyle={[styles.flexGrow1, styles.pb5]}>
                 <DatePresetFilterBase
                     ref={searchDatePresetFilterBaseRef}
                     defaultDateValues={defaultDateValues}
@@ -126,21 +171,39 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
                     onSelectDateModifier={setSelectedDateModifier}
                     presets={presets}
                     isSearchAdvancedFiltersFormLoading={isSearchAdvancedFiltersFormLoading}
+                    shouldShowRangeError={shouldShowRangeError}
+                    onDateValuesChange={handleDateValuesChange}
+                    forceVerticalCalendars
+                />
+                {selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] || trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]) && (
+                    <Text style={[styles.textMicroSupporting, styles.mh5, styles.mt3]}>
+                        {`${translate('common.range')}: `}
+                        <Text style={[styles.textMicroSupporting, styles.textStrong]}>
+                            {trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
+                                ? DateUtils.getFormattedDateRangeForSearch(
+                                      trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] as string,
+                                      trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] as string,
+                                      true,
+                                  )
+                                : format(parseISO((trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]) as string), 'MMM d, yyyy')}
+                        </Text>
+                    </Text>
+                )}
+                <View style={styles.flexGrow1} />
+                <Button
+                    text={translate('common.reset')}
+                    onPress={reset}
+                    style={[styles.mh4, styles.mt4]}
+                    large
+                />
+                <FormAlertWithSubmitButton
+                    buttonText={translate('common.save')}
+                    containerStyles={[styles.m4, styles.mt3]}
+                    onSubmit={save}
+                    enabledWhenOffline
                 />
             </ScrollView>
-            <Button
-                text={translate('common.reset')}
-                onPress={reset}
-                style={[styles.mh4, styles.mt4]}
-                large
-            />
-            <FormAlertWithSubmitButton
-                buttonText={translate('common.save')}
-                containerStyles={[styles.m4, styles.mt3, styles.mb5]}
-                onSubmit={save}
-                enabledWhenOffline
-            />
-        </>
+        </View>
     );
 }
 
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index bb0465ea20195..ca69fbb7409ba 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -10,8 +10,10 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isSearchDatePreset} from '@libs/SearchQueryUtils';
+import DateUtils from '@libs/DateUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
+import RangeDatePicker from './RangeDatePicker';
 
 type SearchDateValues = Record<SearchDateModifier, string | undefined>;
 
@@ -45,6 +47,15 @@ type DatePresetFilterBaseProps = {
     /** Whether the search advanced filters form Onyx data is loading or not */
     isSearchAdvancedFiltersFormLoading?: boolean;
 
+    /** Whether to show the range validation error */
+    shouldShowRangeError?: boolean;
+
+    /** Callback when date values change (useful for parent to track range display text) */
+    onDateValuesChange?: (dateValues: SearchDateValues) => void;
+
+    /** Force vertical stacking of calendars in range picker */
+    forceVerticalCalendars?: boolean;
+
     /** The ref handle */
     ref: Ref<DatePresetFilterBaseHandle>;
 };
@@ -59,7 +70,7 @@ type DatePresetFilterBaseProps = {
  * - On save: if a date modifier is selected (i.e. user clicked save at the calendar picker) you should `setDateValueOfSelectedDateModifier` otherwise `getDateValues`
  * - On reset: if a date modifier is selected (i.e. user clicked reset at the calendar picker) you should `clearDateValueOfSelectedDateModifier` otherwise `clearDateValues`
  */
-function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelectDateModifier, presets, isSearchAdvancedFiltersFormLoading, ref}: DatePresetFilterBaseProps) {
+function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelectDateModifier, presets, isSearchAdvancedFiltersFormLoading, shouldShowRangeError = false, onDateValuesChange, forceVerticalCalendars = false, ref}: DatePresetFilterBaseProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -77,6 +88,10 @@ function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelect
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isSearchAdvancedFiltersFormLoading]);
 
+    useEffect(() => {
+        onDateValuesChange?.(dateValues);
+    }, [dateValues, onDateValuesChange]);
+
     const setDateValue = useCallback((dateModifier: SearchDateModifier, value: string | undefined) => {
         setDateValues((prevDateValues) => {
             if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(value)) {
@@ -84,6 +99,7 @@ function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelect
                     [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
                     [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
                     [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+                    [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
                 };
             }
 
@@ -95,6 +111,11 @@ function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelect
                 };
             }
 
+            // When setting After or Before individually, clear Range mode
+            if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER || dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
+                return {...prevDateValues, [dateModifier]: value, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined};
+            }
+
             return {...prevDateValues, [dateModifier]: value};
         });
     }, []);
@@ -103,12 +124,16 @@ function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelect
         const dateOn = dateValues[CONST.SEARCH.DATE_MODIFIERS.ON];
         const dateAfter = dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
         const dateBefore = dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+        const isRangeMode = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
 
         return {
             // dateOn could be a preset e.g. Last month which should not be displayed as the On field
             [CONST.SEARCH.DATE_MODIFIERS.ON]: isSearchDatePreset(dateOn) ? undefined : dateOn,
-            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: dateAfter,
-            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: dateBefore,
+            // Show After/Before on their items only when NOT in Range mode
+            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: isRangeMode ? undefined : dateAfter,
+            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: isRangeMode ? undefined : dateBefore,
+            // Show Range only when explicitly in Range mode AND both dates are set
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: isRangeMode && dateAfter && dateBefore ? 'range' : undefined,
         };
     }, [dateValues]);
 
@@ -135,7 +160,12 @@ function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelect
             },
 
             clearDateValues() {
-                setDateValues({[CONST.SEARCH.DATE_MODIFIERS.ON]: undefined, [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined, [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined});
+                setDateValues({
+                    [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+                    [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+                    [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+                    [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+                });
             },
 
             setDateValueOfSelectedDateModifier() {
@@ -143,6 +173,12 @@ function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelect
                     return;
                 }
 
+                // For Range, mark as Range mode (values are already set via setDateValue)
+                if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, 'range');
+                    return;
+                }
+
                 setDateValue(selectedDateModifier, ephemeralDateValue);
             },
 
@@ -151,6 +187,14 @@ function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelect
                     return;
                 }
 
+                // For Range, clear Range flag and both After and Before values
+                if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, undefined);
+                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.AFTER, undefined);
+                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.BEFORE, undefined);
+                    return;
+                }
+
                 setDateValue(selectedDateModifier, undefined);
             },
         }),
@@ -198,7 +242,31 @@ function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelect
                 description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]}
                 onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.BEFORE)}
             />
+            <MenuItem
+                shouldShowRightIcon
+                viewMode={CONST.OPTION_MODE.COMPACT}
+                title={translate('common.range')}
+                description={
+                    dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] && dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
+                        ? DateUtils.getFormattedDateRangeForSearch(
+                              dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] as string,
+                              dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] as string,
+                              true,
+                          )
+                        : undefined
+                }
+                onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE)}
+            />
         </>
+    ) : selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE ? (
+        <RangeDatePicker
+            fromValue={dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]}
+            toValue={dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]}
+            onFromSelected={(date) => setDateValue(CONST.SEARCH.DATE_MODIFIERS.AFTER, date)}
+            onToSelected={(date) => setDateValue(CONST.SEARCH.DATE_MODIFIERS.BEFORE, date)}
+            shouldShowError={shouldShowRangeError}
+            forceVertical={forceVerticalCalendars}
+        />
     ) : (
         <CalendarPicker
             value={ephemeralDateValue}
diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
new file mode 100644
index 0000000000000..53ed493d9d33c
--- /dev/null
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import {View} from 'react-native';
+import CalendarPicker from '@components/DatePicker/CalendarPicker';
+import type {DayProps} from '@components/DatePicker/CalendarPicker/Day';
+import FormHelpMessage from '@components/FormHelpMessage';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+/** Day component with green highlight for selected date */
+function GreenSelectedDay({disabled, selected, children}: DayProps) {
+    const themeStyles = useThemeStyles();
+    return (
+        <View
+            style={[
+                themeStyles.calendarDayContainer,
+                selected ? themeStyles.buttonSuccess : {},
+            ]}
+        >
+            <Text style={[disabled ? themeStyles.buttonOpacityDisabled : {}, selected ? themeStyles.buttonSuccessText : {}]}>{children}</Text>
+        </View>
+    );
+}
+
+type RangeDatePickerProps = {
+    /** The "From" date value */
+    fromValue?: string;
+
+    /** The "To" date value */
+    toValue?: string;
+
+    /** Callback when "From" date is selected */
+    onFromSelected: (date: string) => void;
+
+    /** Callback when "To" date is selected */
+    onToSelected: (date: string) => void;
+
+    /** Whether to show validation error */
+    shouldShowError?: boolean;
+
+    /** Force vertical stacking of calendars */
+    forceVertical?: boolean;
+};
+
+function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shouldShowError = false, forceVertical = false}: RangeDatePickerProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const shouldStack = forceVertical || isSmallScreenWidth;
+
+    return (
+        <>
+            <View style={[!shouldStack && styles.flexRow, styles.mh5, styles.mt3]}>
+                <View style={[!shouldStack && styles.flex1, !shouldStack && styles.mr2]}>
+                    <View style={[styles.borderedContentCard, styles.p3]}>
+                        <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph3, styles.pt1]}>{translate('common.from')}</Text>
+                        <CalendarPicker
+                            value={fromValue}
+                            onSelected={onFromSelected}
+                            minDate={CONST.CALENDAR_PICKER.MIN_DATE}
+                            maxDate={toValue ? new Date(toValue) : CONST.CALENDAR_PICKER.MAX_DATE}
+                            DayComponent={GreenSelectedDay}
+                            headerContainerStyle={styles.ph3}
+                        />
+                    </View>
+                </View>
+
+                <View style={[!shouldStack && styles.flex1, !shouldStack && styles.ml2, shouldStack && styles.mt4]}>
+                    <View style={[styles.borderedContentCard, styles.p3]}>
+                        <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph3, styles.pt1]}>{translate('common.to')}</Text>
+                        <CalendarPicker
+                            value={toValue}
+                            onSelected={onToSelected}
+                            minDate={fromValue ? new Date(fromValue) : CONST.CALENDAR_PICKER.MIN_DATE}
+                            maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
+                            DayComponent={GreenSelectedDay}
+                            headerContainerStyle={styles.ph3}
+                        />
+                    </View>
+                </View>
+            </View>
+
+            {shouldShowError && (
+                <FormHelpMessage
+                    isError
+                    message={translate('search.errors.pleaseSelectDatesForBothFromAndTo')}
+                    style={[styles.mh3, styles.mt2]}
+                />
+            )}
+        </>
+    );
+}
+
+export default RangeDatePicker;
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 37de2770526b3..179294de79e6b 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -1,17 +1,27 @@
-import React, {useCallback, useRef, useState} from 'react';
-import {View} from 'react-native';
+import {format, parseISO} from 'date-fns';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {ScrollView, View} from 'react-native';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Icon from '@components/Icon';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import DatePresetFilterBase from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {SearchDatePresetFilterBaseHandle, SearchDateValues} from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {SearchDatePreset} from '@components/Search/types';
 import Text from '@components/Text';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import DateUtils from '@libs/DateUtils';
 import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 
+/** Width of the popover when Range is selected (enough for two side-by-side calendars) */
+const RANGE_POPOVER_WIDTH = 660;
+
 type DateSelectPopupProps = {
     /** The label to show when in an overlay on mobile */
     label: string;
@@ -27,16 +37,50 @@ type DateSelectPopupProps = {
 
     /** Function to call to close the overlay when changes are applied */
     closeOverlay: () => void;
+
+    /** Function to set the popover width dynamically */
+    setPopoverWidth?: (width: number | undefined) => void;
 };
 
-function DateSelectPopup({label, value, presets, closeOverlay, onChange}: DateSelectPopupProps) {
+function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopoverWidth}: DateSelectPopupProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
 
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const {windowHeight} = useWindowDimensions();
+    const theme = useTheme();
+    const backArrowIcon = useMemoizedLazyExpensifyIcons(['BackArrow']);
     const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
+    const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
+    const [trackedDateValues, setTrackedDateValues] = useState<SearchDateValues>(value);
+
+    // Widen the popover when Range is selected, reset when not
+    useEffect(() => {
+        if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+            setPopoverWidth?.(RANGE_POPOVER_WIDTH);
+        } else {
+            setPopoverWidth?.(undefined);
+        }
+    }, [selectedDateModifier, setPopoverWidth]);
+
+    // Auto-detect Range mode when both after and before values exist on initial open only
+    useEffect(() => {
+        const hasAfter = !!value[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+        const hasBefore = !!value[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+        const hasOn = !!value[CONST.SEARCH.DATE_MODIFIERS.ON];
+        
+        if (hasAfter && hasBefore && !hasOn) {
+            setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const clearSelection = useCallback(() => {
+        setSelectedDateModifier(null);
+        setShouldShowRangeError(false);
+    }, []);
 
     const applyChanges = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
@@ -44,12 +88,34 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange}: DateSe
         }
 
         if (selectedDateModifier) {
+            // For Range, validate that both dates are selected
+            if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+                const hasFrom = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+                const hasTo = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+
+                if (!hasFrom || !hasTo) {
+                    setShouldShowRangeError(true);
+                    return;
+                }
+            }
+
             searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
-            setSelectedDateModifier(null);
+            clearSelection();
             return;
         }
 
         const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+        const hasFrom = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+        const hasTo = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+
+        if (hasFrom !== hasTo) {
+            // Partial range: force user to complete both dates and show inline error
+            setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
+            setShouldShowRangeError(true);
+            return;
+        }
+
         onChange(dateValues);
         closeOverlay();
     }, [closeOverlay, onChange, selectedDateModifier]);
@@ -61,50 +127,110 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange}: DateSe
 
         if (selectedDateModifier) {
             searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            setSelectedDateModifier(null);
+            clearSelection();
             return;
         }
 
         searchDatePresetFilterBaseRef.current.clearDateValues();
+        setShouldShowRangeError(false);
         onChange({
             [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
         });
         closeOverlay();
     }, [closeOverlay, onChange, selectedDateModifier]);
 
+    const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
+    const rangeFrom = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+    const rangeTo = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+    let rangeText: string | null = null;
+    if (isInRangeMode) {
+        if (rangeFrom && rangeTo) {
+            rangeText = DateUtils.getFormattedDateRangeForSearch(rangeFrom, rangeTo, true);
+        } else if (rangeFrom || rangeTo) {
+            rangeText = format(parseISO((rangeFrom ?? rangeTo) as string), 'MMM d, yyyy');
+        }
+    }
+
+    const shouldShowInlineRangeText = !!rangeText && !isSmallScreenWidth;
+
+    const maxPopupHeight = Math.round(windowHeight * 0.85);
+
+    const mobileButtonStyle = isSmallScreenWidth ? styles.flex1 : {minWidth: 120};
+    const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
+    const topPaddingStyle = selectedDateModifier ? (isSmallScreenWidth ? styles.pt0 : styles.pt4) : undefined;
+
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
-            {isSmallScreenWidth && !selectedDateModifier && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
-            <View>
-                {!!selectedDateModifier && (
+        <View style={[topPaddingStyle, styles.pb4, isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && {maxHeight: maxPopupHeight}]}>
+            {isSmallScreenWidth && !selectedDateModifier && <Text style={[styles.textLabel, styles.ph5, styles.pb3]}>{label}</Text>}
+            <ScrollView
+                style={[isSmallScreenWidth && styles.flexGrow1]}
+                contentContainerStyle={[
+                    !isSmallScreenWidth && !selectedDateModifier && styles.pt4,
+                    isSmallScreenWidth && selectedDateModifier && styles.pt0,
+                ]}
+            >
+                {!!selectedDateModifier && isSmallScreenWidth && (
                     <HeaderWithBackButton
                         shouldDisplayHelpButton={false}
-                        style={[styles.h10, styles.pb3]}
-                        subtitle={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
-                        onBackButtonPress={() => setSelectedDateModifier(null)}
+                        title={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
+                        onBackButtonPress={clearSelection}
                     />
                 )}
+                {!!selectedDateModifier && !isSmallScreenWidth && (
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.ph5, styles.pb2, styles.gap2]}>
+                        <PressableWithoutFeedback
+                            onPress={clearSelection}
+                            role={CONST.ROLE.BUTTON}
+                            accessibilityLabel={translate('common.back')}
+                        >
+                            <Icon
+                                src={backArrowIcon.BackArrow}
+                                fill={theme.icon}
+                                small
+                            />
+                        </PressableWithoutFeedback>
+                        <Text style={[styles.textLabelSupporting]}>
+                            {translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
+                        </Text>
+                    </View>
+                )}
                 <DatePresetFilterBase
                     ref={searchDatePresetFilterBaseRef}
                     defaultDateValues={value}
                     selectedDateModifier={selectedDateModifier}
                     onSelectDateModifier={setSelectedDateModifier}
                     presets={presets}
+                    shouldShowRangeError={shouldShowRangeError}
+                    onDateValuesChange={setTrackedDateValues}
                 />
-            </View>
-            <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
+                {isSmallScreenWidth && rangeText && (
+                    <Text style={[styles.textMicroSupporting, styles.ph5, styles.mt4, styles.textAlignCenter]}>
+                        {`${translate('common.range')}: `}
+                        <Text style={[styles.textMicroSupporting, styles.textStrong]}>{rangeText}</Text>
+                    </Text>
+                )}
+            </ScrollView>
+            <View style={[styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, isSmallScreenWidth && styles.gap2]}>
+                {shouldShowInlineRangeText && (
+                    <Text style={[styles.textLabelSupporting, styles.flex1, styles.mr3]}>
+                        {`${translate('common.range')}: `}
+                        <Text style={[styles.textLabelSupporting, styles.textStrong]}>{rangeText}</Text>
+                    </Text>
+                )}
+                {!shouldShowInlineRangeText && !isSmallScreenWidth && <View style={styles.flex1} />}
                 <Button
                     medium
-                    style={[styles.flex1]}
+                    style={[!isSmallScreenWidth && styles.mr2, mobileButtonStyle]}
                     text={translate('common.reset')}
                     onPress={resetChanges}
                 />
                 <Button
                     success
                     medium
-                    style={[styles.flex1]}
+                    style={[mobileButtonStyle]}
                     text={translate('common.apply')}
                     onPress={applyChanges}
                 />
diff --git a/src/components/Search/FilterDropdowns/DropdownButton.tsx b/src/components/Search/FilterDropdowns/DropdownButton.tsx
index fcdc1cd559460..f626fec91a649 100644
--- a/src/components/Search/FilterDropdowns/DropdownButton.tsx
+++ b/src/components/Search/FilterDropdowns/DropdownButton.tsx
@@ -20,6 +20,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 
 type PopoverComponentProps = {
     closeOverlay: () => void;
+    setPopoverWidth?: (width: number | undefined) => void;
 };
 
 type DropdownButtonProps = {
@@ -69,6 +70,7 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
     const triggerRef = useRef<View | null>(null);
     const anchorRef = useRef<View | null>(null);
     const [isOverlayVisible, setIsOverlayVisible] = useState(false);
+    const [customPopoverWidth, setCustomPopoverWidth] = useState<number | undefined>(undefined);
     const {calculatePopoverPosition} = usePopoverPosition();
 
     const [popoverTriggerPosition, setPopoverTriggerPosition] = useState({
@@ -113,15 +115,17 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
         return `${label}: ${selectedItems}`;
     }, [label, value]);
 
+    const actualPopoverWidth = customPopoverWidth ?? CONST.POPOVER_DROPDOWN_WIDTH;
+
     const containerStyles = useMemo(() => {
         if (isSmallScreenWidth) {
             return styles.w100;
         }
-        return {width: CONST.POPOVER_DROPDOWN_WIDTH};
-    }, [isSmallScreenWidth, styles]);
+        return {width: actualPopoverWidth};
+    }, [isSmallScreenWidth, styles, actualPopoverWidth]);
 
     const popoverContent = useMemo(() => {
-        return PopoverComponent({closeOverlay: toggleOverlay});
+        return PopoverComponent({closeOverlay: toggleOverlay, setPopoverWidth: setCustomPopoverWidth});
     }, [PopoverComponent, toggleOverlay]);
 
     return (
@@ -168,8 +172,9 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
                 // such as date years
                 shouldCloseWhenBrowserNavigationChanged={false}
                 innerContainerStyle={containerStyles}
+                shouldDisplayBelowModals
                 popoverDimensions={{
-                    width: CONST.POPOVER_DROPDOWN_WIDTH,
+                    width: actualPopoverWidth,
                     height: CONST.POPOVER_DROPDOWN_MIN_HEIGHT,
                 }}
                 shouldSkipRemeasurement
diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index e4ceb17cb0c7a..32a2bda1b4369 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -1,6 +1,6 @@
 import {isUserValidatedSelector} from '@selectors/Account';
 import {emailSelector} from '@selectors/Session';
-import React, {useCallback, useContext, useMemo, useRef} from 'react';
+import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
 import type {ReactNode} from 'react';
 import {FlatList, View} from 'react-native';
 import Button from '@components/Button';
@@ -98,6 +98,9 @@ function SearchFiltersBar({
     const currentPolicy = usePolicy(currentSelectedPolicyID);
     const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isUserValidatedSelector, canBeMissing: true});
     const [searchAdvancedFiltersForm = getEmptyObject<Partial<SearchAdvancedFiltersForm>>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
+
+    // Track which date filters were set via Range mode (persists while component is mounted)
+    const [dateRangeFlags, setDateRangeFlags] = useState<Partial<Record<SearchDateFilterKeys, boolean>>>({});
     // type, groupBy, status, and view values are not guaranteed to respect the ts type as they come from user input
     const {type: unsafeType, groupBy: unsafeGroupBy, status: unsafeStatus, view: unsafeView, flatFilters} = queryJSON;
     const [selectedIOUReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${currentSelectedReportID}`, {canBeMissing: true});
@@ -240,11 +243,13 @@ function SearchFiltersBar({
     }, [flatFilters, translate]);
 
     const createDateDisplayValue = useCallback(
-        (filterValues: {on?: string; after?: string; before?: string}): [SearchDateValues, string[]] => {
+        (filterValues: {on?: string; after?: string; before?: string}, isRange: boolean = false): [SearchDateValues, string[]] => {
+            const shouldUseRange = isRange || (!!filterValues.after && !!filterValues.before && !filterValues.on);
             const value: SearchDateValues = {
                 [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
                 [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
                 [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
+                [CONST.SEARCH.DATE_MODIFIERS.RANGE]: shouldUseRange ? 'range' : undefined,
             };
 
             const displayText: string[] = [];
@@ -253,11 +258,15 @@ function SearchFiltersBar({
                     isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`,
                 );
             }
-            if (value.After) {
-                displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
-            }
-            if (value.Before) {
-                displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
+            if (shouldUseRange && value.After && value.Before) {
+                displayText.push(`${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(value.After, value.Before, true)}`);
+            } else {
+                if (value.After) {
+                    displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
+                }
+                if (value.Before) {
+                    displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
+                }
             }
 
             return [value, displayText];
@@ -267,32 +276,41 @@ function SearchFiltersBar({
 
     const [date, displayDate] = useMemo(
         () =>
-            createDateDisplayValue({
-                on: searchAdvancedFiltersForm.dateOn,
-                after: searchAdvancedFiltersForm.dateAfter,
-                before: searchAdvancedFiltersForm.dateBefore,
-            }),
-        [searchAdvancedFiltersForm.dateOn, searchAdvancedFiltersForm.dateAfter, searchAdvancedFiltersForm.dateBefore, createDateDisplayValue],
+            createDateDisplayValue(
+                {
+                    on: searchAdvancedFiltersForm.dateOn,
+                    after: searchAdvancedFiltersForm.dateAfter,
+                    before: searchAdvancedFiltersForm.dateBefore,
+                },
+                dateRangeFlags[CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE] ?? false,
+            ),
+        [searchAdvancedFiltersForm.dateOn, searchAdvancedFiltersForm.dateAfter, searchAdvancedFiltersForm.dateBefore, createDateDisplayValue, dateRangeFlags],
     );
 
     const [posted, displayPosted] = useMemo(
         () =>
-            createDateDisplayValue({
-                on: searchAdvancedFiltersForm.postedOn,
-                after: searchAdvancedFiltersForm.postedAfter,
-                before: searchAdvancedFiltersForm.postedBefore,
-            }),
-        [searchAdvancedFiltersForm.postedOn, searchAdvancedFiltersForm.postedAfter, searchAdvancedFiltersForm.postedBefore, createDateDisplayValue],
+            createDateDisplayValue(
+                {
+                    on: searchAdvancedFiltersForm.postedOn,
+                    after: searchAdvancedFiltersForm.postedAfter,
+                    before: searchAdvancedFiltersForm.postedBefore,
+                },
+                dateRangeFlags[CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED] ?? false,
+            ),
+        [searchAdvancedFiltersForm.postedOn, searchAdvancedFiltersForm.postedAfter, searchAdvancedFiltersForm.postedBefore, createDateDisplayValue, dateRangeFlags],
     );
 
     const [withdrawn, displayWithdrawn] = useMemo(
         () =>
-            createDateDisplayValue({
-                on: searchAdvancedFiltersForm.withdrawnOn,
-                after: searchAdvancedFiltersForm.withdrawnAfter,
-                before: searchAdvancedFiltersForm.withdrawnBefore,
-            }),
-        [searchAdvancedFiltersForm.withdrawnOn, searchAdvancedFiltersForm.withdrawnAfter, searchAdvancedFiltersForm.withdrawnBefore, createDateDisplayValue],
+            createDateDisplayValue(
+                {
+                    on: searchAdvancedFiltersForm.withdrawnOn,
+                    after: searchAdvancedFiltersForm.withdrawnAfter,
+                    before: searchAdvancedFiltersForm.withdrawnBefore,
+                },
+                dateRangeFlags[CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN] ?? false,
+            ),
+        [searchAdvancedFiltersForm.withdrawnOn, searchAdvancedFiltersForm.withdrawnAfter, searchAdvancedFiltersForm.withdrawnBefore, createDateDisplayValue, dateRangeFlags],
     );
 
     const [withdrawalTypeOptions, withdrawalType] = useMemo(() => {
@@ -423,8 +441,12 @@ function SearchFiltersBar({
 
     const createDatePickerComponent = useCallback(
         (filterKey: SearchDateFilterKeys, value: SearchDateValues, translationKey: TranslationPaths) => {
-            return ({closeOverlay}: PopoverComponentProps) => {
+            return ({closeOverlay, setPopoverWidth}: PopoverComponentProps) => {
                 const onChange = (selectedDates: SearchDateValues) => {
+                    // Track whether these dates were set via Range mode
+                    const isRange = !!selectedDates[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+                    setDateRangeFlags((prev) => ({...prev, [filterKey]: isRange}));
+
                     const dateFormValues = {
                         [`${filterKey}On`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON],
                         [`${filterKey}After`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.AFTER],
@@ -440,6 +462,7 @@ function SearchFiltersBar({
                         value={value}
                         onChange={onChange}
                         closeOverlay={closeOverlay}
+                        setPopoverWidth={setPopoverWidth}
                         presets={getDatePresets(filterKey, true)}
                     />
                 );
diff --git a/src/languages/en.ts b/src/languages/en.ts
index f9fb678b0d265..b92cd8a0e8b95 100644
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -630,6 +630,7 @@ const translations = {
         on: 'On',
         before: 'Before',
         after: 'After',
+        range: 'Range',
         reschedule: 'Reschedule',
         general: 'General',
         workspacesTabTitle: 'Workspaces',
@@ -7231,6 +7232,9 @@ const translations = {
             selectAllMatchingItems: 'Select all matching items',
             allMatchingItemsSelected: 'All matching items selected',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Please select dates for both From and To',
+        },
     },
     genericErrorPage: {
         title: 'Uh-oh, something went wrong!',
diff --git a/src/libs/DateUtils.ts b/src/libs/DateUtils.ts
index 529cf27ee69df..04f076ef3f025 100644
--- a/src/libs/DateUtils.ts
+++ b/src/libs/DateUtils.ts
@@ -968,13 +968,13 @@ function isDateStringInMonth(dateString: string, year: number, month: number): b
 /**
  * Returns a formatted date range.
  */
-function getFormattedDateRangeForSearch(startDate: string, endDate: string): string {
+function getFormattedDateRangeForSearch(startDate: string, endDate: string, shouldShowFullYear = false): string {
     const start = parse(startDate, 'yyyy-MM-dd', new Date());
     const end = parse(endDate, 'yyyy-MM-dd', new Date());
-    if (isSameYear(new Date(start), new Date(end))) {
-        return `${format(start, 'MMM d')} - ${format(end, 'MMM d, yyyy')}`;
+    if (shouldShowFullYear || !isSameYear(new Date(start), new Date(end))) {
+        return `${format(start, 'MMM d, yyyy')} - ${format(end, 'MMM d, yyyy')}`;
     }
-    return `${format(start, 'MMM d, yyyy')} - ${format(end, 'MMM d, yyyy')}`;
+    return `${format(start, 'MMM d')} - ${format(end, 'MMM d, yyyy')}`;
 }
 
 function getYearDateRange(year: number): {start: string; end: string} {
diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index dc5220da98cca..2f7bb5ff089cc 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -26,6 +26,7 @@ import {saveSearch} from '@libs/actions/Search';
 import {createCardFeedKey, getCardFeedKey, getCardFeedNamesWithType, getWorkspaceCardFeedKey} from '@libs/CardFeedUtils';
 import {getCardDescription} from '@libs/CardUtils';
 import {convertToDisplayStringWithoutCurrency} from '@libs/CurrencyUtils';
+import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {createDisplayName} from '@libs/PersonalDetailsUtils';
 import {getAllTaxRates, getCleanedTagName} from '@libs/PolicyUtils';
@@ -344,12 +345,17 @@ function getFilterDisplayTitle(
             dateValue.push(isSearchDatePreset(dateOn) ? translate(`search.filters.date.presets.${dateOn}`) : translate('search.filters.date.on', dateOn));
         }
 
-        if (dateAfter) {
-            dateValue.push(translate('search.filters.date.after', dateAfter));
-        }
+        // Show as range if both after and before exist and no "on" value
+        if (dateAfter && dateBefore && !dateOn) {
+            dateValue.push(`${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(dateAfter, dateBefore, true)}`);
+        } else {
+            if (dateAfter) {
+                dateValue.push(translate('search.filters.date.after', dateAfter));
+            }
 
-        if (dateBefore) {
-            dateValue.push(translate('search.filters.date.before', dateBefore));
+            if (dateBefore) {
+                dateValue.push(translate('search.filters.date.before', dateBefore));
+            }
         }
 
         return dateValue.join(', ');
@@ -386,7 +392,9 @@ function getFilterDisplayTitle(
 
     if (key.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
         const values: string[] = [];
+        const dateFieldPairs: Record<string, {after?: string; before?: string; on?: string}> = {};
 
+        // First pass: collect all date field values
         for (const [fieldKey, fieldValue] of Object.entries(filters)) {
             if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.NOT_PREFIX) || !fieldValue || !fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
                 continue;
@@ -402,26 +410,49 @@ function getFilterDisplayTitle(
                 .join(' ');
 
             if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.ON_PREFIX)) {
-                const dateString = isSearchDatePreset(fieldValue as string)
-                    ? translate(`search.filters.date.presets.${fieldValue as SearchDatePreset}`)
-                    : translate('search.filters.date.on', fieldValue as string);
-
-                values.push(translate('search.filters.reportField', {name: fieldName, value: dateString.toLowerCase()}));
-            }
-
-            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX)) {
-                const dateString = translate('search.filters.date.after', fieldValue as string).toLowerCase();
-                values.push(translate('search.filters.reportField', {name: fieldName, value: dateString.toLowerCase()}));
+                if (!dateFieldPairs[fieldName]) {
+                    dateFieldPairs[fieldName] = {};
+                }
+                dateFieldPairs[fieldName].on = fieldValue as string;
+            } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX)) {
+                if (!dateFieldPairs[fieldName]) {
+                    dateFieldPairs[fieldName] = {};
+                }
+                dateFieldPairs[fieldName].after = fieldValue as string;
+            } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX)) {
+                if (!dateFieldPairs[fieldName]) {
+                    dateFieldPairs[fieldName] = {};
+                }
+                dateFieldPairs[fieldName].before = fieldValue as string;
+            } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX)) {
+                const valueString = translate('search.filters.reportField', {name: fieldName, value: fieldValue as string});
+                values.push(valueString);
             }
+        }
 
-            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX)) {
-                const dateString = translate('search.filters.date.before', fieldValue as string).toLowerCase();
+        // Second pass: format date fields
+        for (const [fieldName, dateValues] of Object.entries(dateFieldPairs)) {
+            if (dateValues.on) {
+                const dateString = isSearchDatePreset(dateValues.on)
+                    ? translate(`search.filters.date.presets.${dateValues.on as SearchDatePreset}`)
+                    : translate('search.filters.date.on', dateValues.on);
                 values.push(translate('search.filters.reportField', {name: fieldName, value: dateString.toLowerCase()}));
             }
 
-            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX)) {
-                const valueString = translate('search.filters.reportField', {name: fieldName, value: fieldValue as string});
-                values.push(valueString);
+            // Show as range if both after and before exist and no "on" value
+            if (dateValues.after && dateValues.before && !dateValues.on) {
+                const rangeString = `${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(dateValues.after, dateValues.before, true)}`;
+                values.push(translate('search.filters.reportField', {name: fieldName, value: rangeString.toLowerCase()}));
+            } else {
+                if (dateValues.after) {
+                    const dateString = translate('search.filters.date.after', dateValues.after).toLowerCase();
+                    values.push(translate('search.filters.reportField', {name: fieldName, value: dateString.toLowerCase()}));
+                }
+
+                if (dateValues.before) {
+                    const dateString = translate('search.filters.date.before', dateValues.before).toLowerCase();
+                    values.push(translate('search.filters.reportField', {name: fieldName, value: dateString.toLowerCase()}));
+                }
             }
         }
 
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
index 1821fb88fb70a..3523e676fa40f 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
@@ -12,6 +12,7 @@ import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {updateAdvancedFilters} from '@libs/actions/Search';
+import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {isSearchDatePreset} from '@libs/SearchQueryUtils';
 import CONST from '@src/CONST';
@@ -49,12 +50,17 @@ function SearchFiltersReportFieldPage() {
                     dateValues.push(isSearchDatePreset(onValue) ? translate(`search.filters.date.presets.${onValue}`) : translate('search.filters.date.on', onValue));
                 }
 
-                if (afterValue) {
-                    dateValues.push(translate('search.filters.date.after', afterValue));
-                }
-
-                if (beforeValue) {
-                    dateValues.push(translate('search.filters.date.before', beforeValue));
+                // Show as range if both after and before exist and no "on" value
+                if (afterValue && beforeValue && !onValue) {
+                    dateValues.push(`${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(afterValue, beforeValue, true)}`);
+                } else {
+                    if (afterValue) {
+                        dateValues.push(translate('search.filters.date.after', afterValue));
+                    }
+
+                    if (beforeValue) {
+                        dateValues.push(translate('search.filters.date.before', beforeValue));
+                    }
                 }
 
                 return {key: field.fieldID, name: field.name, value: dateValues.join(', '), field};

From 24001a60a5afa48ea6339316a802ca9e0ff95ab0 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Tue, 10 Feb 2026 00:08:31 +0530
Subject: [PATCH 02/58] fix: button style side margin

---
 .../Search/FilterDropdowns/DateSelectPopup.tsx         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 179294de79e6b..a695c076d27e7 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -158,7 +158,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 
     const maxPopupHeight = Math.round(windowHeight * 0.85);
 
-    const mobileButtonStyle = isSmallScreenWidth ? styles.flex1 : {minWidth: 120};
+    const buttonStyle = isSmallScreenWidth || !selectedDateModifier ? styles.flex1 : {minWidth: 120};
     const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
     const topPaddingStyle = selectedDateModifier ? (isSmallScreenWidth ? styles.pt0 : styles.pt4) : undefined;
 
@@ -213,24 +213,24 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     </Text>
                 )}
             </ScrollView>
-            <View style={[styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, isSmallScreenWidth && styles.gap2]}>
+            <View style={[styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, (isSmallScreenWidth || !selectedDateModifier) && styles.gap2]}>
                 {shouldShowInlineRangeText && (
                     <Text style={[styles.textLabelSupporting, styles.flex1, styles.mr3]}>
                         {`${translate('common.range')}: `}
                         <Text style={[styles.textLabelSupporting, styles.textStrong]}>{rangeText}</Text>
                     </Text>
                 )}
-                {!shouldShowInlineRangeText && !isSmallScreenWidth && <View style={styles.flex1} />}
+                {!shouldShowInlineRangeText && !isSmallScreenWidth && selectedDateModifier && <View style={styles.flex1} />}
                 <Button
                     medium
-                    style={[!isSmallScreenWidth && styles.mr2, mobileButtonStyle]}
+                    style={[!isSmallScreenWidth && selectedDateModifier && styles.mr2, buttonStyle]}
                     text={translate('common.reset')}
                     onPress={resetChanges}
                 />
                 <Button
                     success
                     medium
-                    style={[mobileButtonStyle]}
+                    style={[buttonStyle]}
                     text={translate('common.apply')}
                     onPress={applyChanges}
                 />

From 310b1294adbe08ed61cb2369f6f43b43fc01ad18 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Tue, 10 Feb 2026 00:18:21 +0530
Subject: [PATCH 03/58] fix: exclusivity of after and before individual filters

---
 .../Search/FilterComponents/DateFilterBase.tsx         |  9 ---------
 .../Search/FilterDropdowns/DateSelectPopup.tsx         | 10 ----------
 2 files changed, 19 deletions(-)

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 7279acb099d3b..93f21a5d61f97 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -132,15 +132,6 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         }
 
         const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-        const hasFrom = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-        const hasTo = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-
-        if (hasFrom !== hasTo) {
-            setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
-            setShouldShowRangeError(true);
-            return;
-        }
-
         onSubmit({
             [dateOnKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.ON] ?? null,
             [dateBeforeKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ?? null,
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index a695c076d27e7..8286699add7c0 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -106,16 +106,6 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         }
 
         const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-        const hasFrom = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-        const hasTo = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-
-        if (hasFrom !== hasTo) {
-            // Partial range: force user to complete both dates and show inline error
-            setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
-            setShouldShowRangeError(true);
-            return;
-        }
-
         onChange(dateValues);
         closeOverlay();
     }, [closeOverlay, onChange, selectedDateModifier]);

From 9bef859e6a0abb9d99347305e2584b94e61cb583 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Tue, 10 Feb 2026 00:37:22 +0530
Subject: [PATCH 04/58] chore: prettify

---
 .../FilterComponents/DateFilterBase.tsx       | 32 +++++++++++--------
 .../FilterComponents/DatePresetFilterBase.tsx | 20 ++++++++----
 .../FilterComponents/RangeDatePicker.tsx      |  7 +---
 .../FilterDropdowns/DateSelectPopup.tsx       | 11 ++-----
 4 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 93f21a5d61f97..d2891f4fa9669 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -5,8 +5,8 @@ import Button from '@components/Button';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScrollView from '@components/ScrollView';
-import Text from '@components/Text';
 import type {ReportFieldDateKey, SearchDateFilterKeys} from '@components/Search/types';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -166,20 +166,24 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
                     onDateValuesChange={handleDateValuesChange}
                     forceVerticalCalendars
                 />
-                {selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] || trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]) && (
-                    <Text style={[styles.textMicroSupporting, styles.mh5, styles.mt3]}>
-                        {`${translate('common.range')}: `}
-                        <Text style={[styles.textMicroSupporting, styles.textStrong]}>
-                            {trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
-                                ? DateUtils.getFormattedDateRangeForSearch(
-                                      trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] as string,
-                                      trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] as string,
-                                      true,
-                                  )
-                                : format(parseISO((trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]) as string), 'MMM d, yyyy')}
+                {selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE &&
+                    (trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] || trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]) && (
+                        <Text style={[styles.textMicroSupporting, styles.mh5, styles.mt3]}>
+                            {`${translate('common.range')}: `}
+                            <Text style={[styles.textMicroSupporting, styles.textStrong]}>
+                                {trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
+                                    ? DateUtils.getFormattedDateRangeForSearch(
+                                          trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] as string,
+                                          trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] as string,
+                                          true,
+                                      )
+                                    : format(
+                                          parseISO((trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]) as string),
+                                          'MMM d, yyyy',
+                                      )}
+                            </Text>
                         </Text>
-                    </Text>
-                )}
+                    )}
                 <View style={styles.flexGrow1} />
                 <Button
                     text={translate('common.reset')}
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index ca69fbb7409ba..1ce5b3316ba2e 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -9,8 +9,8 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {isSearchDatePreset} from '@libs/SearchQueryUtils';
 import DateUtils from '@libs/DateUtils';
+import {isSearchDatePreset} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import RangeDatePicker from './RangeDatePicker';
@@ -70,7 +70,17 @@ type DatePresetFilterBaseProps = {
  * - On save: if a date modifier is selected (i.e. user clicked save at the calendar picker) you should `setDateValueOfSelectedDateModifier` otherwise `getDateValues`
  * - On reset: if a date modifier is selected (i.e. user clicked reset at the calendar picker) you should `clearDateValueOfSelectedDateModifier` otherwise `clearDateValues`
  */
-function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelectDateModifier, presets, isSearchAdvancedFiltersFormLoading, shouldShowRangeError = false, onDateValuesChange, forceVerticalCalendars = false, ref}: DatePresetFilterBaseProps) {
+function DatePresetFilterBase({
+    defaultDateValues,
+    selectedDateModifier,
+    onSelectDateModifier,
+    presets,
+    isSearchAdvancedFiltersFormLoading,
+    shouldShowRangeError = false,
+    onDateValuesChange,
+    forceVerticalCalendars = false,
+    ref,
+}: DatePresetFilterBaseProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -248,11 +258,7 @@ function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelect
                 title={translate('common.range')}
                 description={
                     dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] && dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
-                        ? DateUtils.getFormattedDateRangeForSearch(
-                              dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] as string,
-                              dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] as string,
-                              true,
-                          )
+                        ? DateUtils.getFormattedDateRangeForSearch(dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] as string, dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] as string, true)
                         : undefined
                 }
                 onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE)}
diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
index 53ed493d9d33c..237efaeb0d0c4 100644
--- a/src/components/Search/FilterComponents/RangeDatePicker.tsx
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -13,12 +13,7 @@ import CONST from '@src/CONST';
 function GreenSelectedDay({disabled, selected, children}: DayProps) {
     const themeStyles = useThemeStyles();
     return (
-        <View
-            style={[
-                themeStyles.calendarDayContainer,
-                selected ? themeStyles.buttonSuccess : {},
-            ]}
-        >
+        <View style={[themeStyles.calendarDayContainer, selected ? themeStyles.buttonSuccess : {}]}>
             <Text style={[disabled ? themeStyles.buttonOpacityDisabled : {}, selected ? themeStyles.buttonSuccessText : {}]}>{children}</Text>
         </View>
     );
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 8286699add7c0..6d80be836d546 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -70,7 +70,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         const hasAfter = !!value[CONST.SEARCH.DATE_MODIFIERS.AFTER];
         const hasBefore = !!value[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
         const hasOn = !!value[CONST.SEARCH.DATE_MODIFIERS.ON];
-        
+
         if (hasAfter && hasBefore && !hasOn) {
             setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
         }
@@ -157,10 +157,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
             {isSmallScreenWidth && !selectedDateModifier && <Text style={[styles.textLabel, styles.ph5, styles.pb3]}>{label}</Text>}
             <ScrollView
                 style={[isSmallScreenWidth && styles.flexGrow1]}
-                contentContainerStyle={[
-                    !isSmallScreenWidth && !selectedDateModifier && styles.pt4,
-                    isSmallScreenWidth && selectedDateModifier && styles.pt0,
-                ]}
+                contentContainerStyle={[!isSmallScreenWidth && !selectedDateModifier && styles.pt4, isSmallScreenWidth && selectedDateModifier && styles.pt0]}
             >
                 {!!selectedDateModifier && isSmallScreenWidth && (
                     <HeaderWithBackButton
@@ -182,9 +179,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                                 small
                             />
                         </PressableWithoutFeedback>
-                        <Text style={[styles.textLabelSupporting]}>
-                            {translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
-                        </Text>
+                        <Text style={[styles.textLabelSupporting]}>{translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}</Text>
                     </View>
                 )}
                 <DatePresetFilterBase

From c355bd714346ecb204eff430a3b5b68d7c46cc3a Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Tue, 10 Feb 2026 23:39:00 +0530
Subject: [PATCH 05/58] fix: useEffect perf-10

---
 .../FilterComponents/DatePresetFilterBase.tsx | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 1ce5b3316ba2e..8a85293d75fee 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -89,6 +89,16 @@ function DatePresetFilterBase({
     const shouldShowHorizontalRule = !!presets?.length;
 
     const [dateValues, setDateValues] = useState<SearchDateValues>(defaultDateValues);
+    const updateDateValues = useCallback(
+        (updater: SearchDateValues | ((prevDateValues: SearchDateValues) => SearchDateValues)) => {
+            setDateValues((prevDateValues) => {
+                const nextDateValues = typeof updater === 'function' ? updater(prevDateValues) : updater;
+                onDateValuesChange?.(nextDateValues);
+                return nextDateValues;
+            });
+        },
+        [onDateValuesChange],
+    );
 
     useEffect(() => {
         if (isSearchAdvancedFiltersFormLoading) {
@@ -98,12 +108,8 @@ function DatePresetFilterBase({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isSearchAdvancedFiltersFormLoading]);
 
-    useEffect(() => {
-        onDateValuesChange?.(dateValues);
-    }, [dateValues, onDateValuesChange]);
-
     const setDateValue = useCallback((dateModifier: SearchDateModifier, value: string | undefined) => {
-        setDateValues((prevDateValues) => {
+        updateDateValues((prevDateValues) => {
             if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(value)) {
                 return {
                     [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
@@ -128,7 +134,7 @@ function DatePresetFilterBase({
 
             return {...prevDateValues, [dateModifier]: value};
         });
-    }, []);
+    }, [updateDateValues]);
 
     const dateDisplayValues = useMemo<SearchDateValues>(() => {
         const dateOn = dateValues[CONST.SEARCH.DATE_MODIFIERS.ON];
@@ -170,7 +176,7 @@ function DatePresetFilterBase({
             },
 
             clearDateValues() {
-                setDateValues({
+                updateDateValues({
                     [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
                     [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
                     [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
@@ -208,7 +214,7 @@ function DatePresetFilterBase({
                 setDateValue(selectedDateModifier, undefined);
             },
         }),
-        [selectedDateModifier, dateValues, ephemeralDateValue, setDateValue],
+        [selectedDateModifier, dateValues, ephemeralDateValue, setDateValue, updateDateValues],
     );
 
     return !selectedDateModifier ? (

From 5d3b2ef69c4ef965aed60779a89cd0f967446f5b Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Tue, 10 Feb 2026 23:39:24 +0530
Subject: [PATCH 06/58] fix: guard rail after > before for range

---
 .../FilterComponents/DatePresetFilterBase.tsx      | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 8a85293d75fee..1fc2ca4bc4d03 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -129,7 +129,19 @@ function DatePresetFilterBase({
 
             // When setting After or Before individually, clear Range mode
             if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER || dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
-                return {...prevDateValues, [dateModifier]: value, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined};
+                const nextDateValues = {...prevDateValues, [dateModifier]: value, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined};
+                const nextAfter = dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER ? value : nextDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+                const nextBefore = dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE ? value : nextDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+
+                if (nextAfter && nextBefore && nextAfter > nextBefore) {
+                    if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER) {
+                        nextDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] = undefined;
+                    } else {
+                        nextDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] = undefined;
+                    }
+                }
+
+                return nextDateValues;
             }
 
             return {...prevDateValues, [dateModifier]: value};

From 5c1229785071800e2014858d6ce5fc01ccea1784 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Tue, 10 Feb 2026 23:39:31 +0530
Subject: [PATCH 07/58] prettify

---
 .../FilterComponents/DatePresetFilterBase.tsx | 73 ++++++++++---------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 1fc2ca4bc4d03..7281e13e4f185 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -108,45 +108,48 @@ function DatePresetFilterBase({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isSearchAdvancedFiltersFormLoading]);
 
-    const setDateValue = useCallback((dateModifier: SearchDateModifier, value: string | undefined) => {
-        updateDateValues((prevDateValues) => {
-            if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(value)) {
-                return {
-                    [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
-                    [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-                    [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-                    [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-                };
-            }
+    const setDateValue = useCallback(
+        (dateModifier: SearchDateModifier, value: string | undefined) => {
+            updateDateValues((prevDateValues) => {
+                if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(value)) {
+                    return {
+                        [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
+                        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+                        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+                        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+                    };
+                }
 
-            if (dateModifier !== CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(prevDateValues[CONST.SEARCH.DATE_MODIFIERS.ON])) {
-                return {
-                    ...prevDateValues,
-                    [dateModifier]: value,
-                    [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-                };
-            }
-
-            // When setting After or Before individually, clear Range mode
-            if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER || dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
-                const nextDateValues = {...prevDateValues, [dateModifier]: value, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined};
-                const nextAfter = dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER ? value : nextDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-                const nextBefore = dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE ? value : nextDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-
-                if (nextAfter && nextBefore && nextAfter > nextBefore) {
-                    if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER) {
-                        nextDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] = undefined;
-                    } else {
-                        nextDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] = undefined;
-                    }
+                if (dateModifier !== CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(prevDateValues[CONST.SEARCH.DATE_MODIFIERS.ON])) {
+                    return {
+                        ...prevDateValues,
+                        [dateModifier]: value,
+                        [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+                    };
                 }
 
-                return nextDateValues;
-            }
+                // When setting After or Before individually, clear Range mode
+                if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER || dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
+                    const nextDateValues = {...prevDateValues, [dateModifier]: value, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined};
+                    const nextAfter = dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER ? value : nextDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+                    const nextBefore = dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE ? value : nextDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+
+                    if (nextAfter && nextBefore && nextAfter > nextBefore) {
+                        if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER) {
+                            nextDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] = undefined;
+                        } else {
+                            nextDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] = undefined;
+                        }
+                    }
+
+                    return nextDateValues;
+                }
 
-            return {...prevDateValues, [dateModifier]: value};
-        });
-    }, [updateDateValues]);
+                return {...prevDateValues, [dateModifier]: value};
+            });
+        },
+        [updateDateValues],
+    );
 
     const dateDisplayValues = useMemo<SearchDateValues>(() => {
         const dateOn = dateValues[CONST.SEARCH.DATE_MODIFIERS.ON];

From 54a357ebbd1dde0f6f492c4cd1375f0eb3f690f2 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Tue, 10 Feb 2026 23:50:04 +0530
Subject: [PATCH 08/58] fix ESlints, prettify

---
 .../DatePicker/CalendarPicker/index.tsx       |   4 +
 .../FilterComponents/DateFilterBase.tsx       |  36 +++--
 .../FilterComponents/DatePresetFilterBase.tsx | 129 ++++++++++--------
 .../FilterDropdowns/DateSelectPopup.tsx       |  14 +-
 .../SearchPageHeader/SearchFiltersBar.tsx     |   2 +-
 src/pages/Search/AdvancedSearchFilters.tsx    |   8 +-
 6 files changed, 102 insertions(+), 91 deletions(-)

diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx
index 6e80c70518fcf..ac97158783028 100644
--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -201,6 +201,7 @@ function CalendarPicker({
                     testID="currentYearButton"
                     accessibilityLabel={`${currentYearView}, ${translate('common.currentYear')}`}
                     role={CONST.ROLE.BUTTON}
+                    sentryLabel="CalendarPicker-YearPicker"
                 >
                     <Text
                         style={themeStyles.sidebarLinkTextBold}
@@ -229,6 +230,7 @@ function CalendarPicker({
                         hoverDimmingValue={1}
                         accessibilityLabel={translate('common.previous')}
                         role={CONST.ROLE.BUTTON}
+                        sentryLabel="CalendarPicker-PrevMonth"
                     >
                         <ArrowIcon
                             disabled={!hasAvailableDatesPrevMonth}
@@ -243,6 +245,7 @@ function CalendarPicker({
                         hoverDimmingValue={1}
                         accessibilityLabel={translate('common.next')}
                         role={CONST.ROLE.BUTTON}
+                        sentryLabel="CalendarPicker-NextMonth"
                     >
                         <ArrowIcon disabled={!hasAvailableDatesNextMonth} />
                     </PressableWithFeedback>
@@ -292,6 +295,7 @@ function CalendarPicker({
                                     accessible={!!day}
                                     dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                                     role={CONST.ROLE.BUTTON}
+                                    sentryLabel="CalendarPicker-SelectDay"
                                 >
                                     {({hovered, pressed}) => (
                                         <DayComponent
diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index d2891f4fa9669..8c4c6e40e1367 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -79,9 +79,11 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
 
     // Auto-detect Range mode when both after and before values exist on initial load only
     useEffect(() => {
-        if (!isSearchAdvancedFiltersFormLoading && dateAfterValue && dateBeforeValue && !dateOnValue) {
-            setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
+        if (isSearchAdvancedFiltersFormLoading || !dateAfterValue || !dateBeforeValue || dateOnValue) {
+            return;
         }
+
+        setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isSearchAdvancedFiltersFormLoading]);
 
@@ -148,6 +150,12 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         back();
     };
 
+    const hasRangeInput = !!(trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]);
+    const rangeDisplayText =
+        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
+            ? DateUtils.getFormattedDateRangeForSearch(trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]!, trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]!, true)
+            : format(parseISO((trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE])!), 'MMM d, yyyy');
+
     return (
         <View style={styles.flex1}>
             <HeaderWithBackButton
@@ -166,24 +174,12 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
                     onDateValuesChange={handleDateValuesChange}
                     forceVerticalCalendars
                 />
-                {selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE &&
-                    (trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] || trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]) && (
-                        <Text style={[styles.textMicroSupporting, styles.mh5, styles.mt3]}>
-                            {`${translate('common.range')}: `}
-                            <Text style={[styles.textMicroSupporting, styles.textStrong]}>
-                                {trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
-                                    ? DateUtils.getFormattedDateRangeForSearch(
-                                          trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] as string,
-                                          trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] as string,
-                                          true,
-                                      )
-                                    : format(
-                                          parseISO((trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]) as string),
-                                          'MMM d, yyyy',
-                                      )}
-                            </Text>
-                        </Text>
-                    )}
+                {selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && hasRangeInput && (
+                    <Text style={[styles.textMicroSupporting, styles.mh5, styles.mt3]}>
+                        {`${translate('common.range')}: `}
+                        <Text style={[styles.textMicroSupporting, styles.textStrong]}>{rangeDisplayText}</Text>
+                    </Text>
+                )}
                 <View style={styles.flexGrow1} />
                 <Button
                     text={translate('common.reset')}
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 7281e13e4f185..1add41a9262e9 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -232,69 +232,78 @@ function DatePresetFilterBase({
         [selectedDateModifier, dateValues, ephemeralDateValue, setDateValue, updateDateValues],
     );
 
-    return !selectedDateModifier ? (
-        <>
-            {presets?.map((preset) => (
-                <SingleSelectListItem
-                    key={preset}
-                    showTooltip
-                    item={{
-                        text: translate(`search.filters.date.presets.${preset}`),
-                        isSelected: dateValues[CONST.SEARCH.DATE_MODIFIERS.ON] === preset,
-                    }}
-                    onSelectRow={() => setDateValue(CONST.SEARCH.DATE_MODIFIERS.ON, preset)}
-                    wrapperStyle={styles.flexReset}
+    const rangeDescription =
+        dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] && dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
+            ? DateUtils.getFormattedDateRangeForSearch(dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]!, dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]!, true)
+            : undefined;
+
+    if (!selectedDateModifier) {
+        return (
+            <>
+                {presets?.map((preset) => (
+                    <SingleSelectListItem
+                        key={preset}
+                        showTooltip
+                        item={{
+                            text: translate(`search.filters.date.presets.${preset}`),
+                            isSelected: dateValues[CONST.SEARCH.DATE_MODIFIERS.ON] === preset,
+                        }}
+                        onSelectRow={() => setDateValue(CONST.SEARCH.DATE_MODIFIERS.ON, preset)}
+                        wrapperStyle={styles.flexReset}
+                    />
+                ))}
+                {shouldShowHorizontalRule && (
+                    <SpacerView
+                        shouldShow
+                        style={[StyleUtils.getBorderColorStyle(theme.border), styles.mh3]}
+                    />
+                )}
+                <MenuItem
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                    title={translate('common.on')}
+                    description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.ON]}
+                    onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.ON)}
                 />
-            ))}
-            {shouldShowHorizontalRule && (
-                <SpacerView
-                    shouldShow
-                    style={[StyleUtils.getBorderColorStyle(theme.border), styles.mh3]}
+                <MenuItem
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                    title={translate('common.after')}
+                    description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]}
+                    onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.AFTER)}
                 />
-            )}
-            <MenuItem
-                shouldShowRightIcon
-                viewMode={CONST.OPTION_MODE.COMPACT}
-                title={translate('common.on')}
-                description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.ON]}
-                onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.ON)}
-            />
-            <MenuItem
-                shouldShowRightIcon
-                viewMode={CONST.OPTION_MODE.COMPACT}
-                title={translate('common.after')}
-                description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]}
-                onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.AFTER)}
-            />
-            <MenuItem
-                shouldShowRightIcon
-                viewMode={CONST.OPTION_MODE.COMPACT}
-                title={translate('common.before')}
-                description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]}
-                onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.BEFORE)}
-            />
-            <MenuItem
-                shouldShowRightIcon
-                viewMode={CONST.OPTION_MODE.COMPACT}
-                title={translate('common.range')}
-                description={
-                    dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] && dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
-                        ? DateUtils.getFormattedDateRangeForSearch(dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] as string, dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] as string, true)
-                        : undefined
-                }
-                onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE)}
+                <MenuItem
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                    title={translate('common.before')}
+                    description={dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]}
+                    onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.BEFORE)}
+                />
+                <MenuItem
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                    title={translate('common.range')}
+                    description={rangeDescription}
+                    onPress={() => selectDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE)}
+                />
+            </>
+        );
+    }
+
+    if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+        return (
+            <RangeDatePicker
+                fromValue={dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]}
+                toValue={dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]}
+                onFromSelected={(date) => setDateValue(CONST.SEARCH.DATE_MODIFIERS.AFTER, date)}
+                onToSelected={(date) => setDateValue(CONST.SEARCH.DATE_MODIFIERS.BEFORE, date)}
+                shouldShowError={shouldShowRangeError}
+                forceVertical={forceVerticalCalendars}
             />
-        </>
-    ) : selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE ? (
-        <RangeDatePicker
-            fromValue={dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]}
-            toValue={dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]}
-            onFromSelected={(date) => setDateValue(CONST.SEARCH.DATE_MODIFIERS.AFTER, date)}
-            onToSelected={(date) => setDateValue(CONST.SEARCH.DATE_MODIFIERS.BEFORE, date)}
-            shouldShowError={shouldShowRangeError}
-            forceVertical={forceVerticalCalendars}
-        />
-    ) : (
+        );
+    }
+
+    return (
         <CalendarPicker
             value={ephemeralDateValue}
             onSelected={setEphemeralDateValue}
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 6d80be836d546..00bfd0ad38c00 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -108,7 +108,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
         onChange(dateValues);
         closeOverlay();
-    }, [closeOverlay, onChange, selectedDateModifier]);
+    }, [clearSelection, closeOverlay, onChange, selectedDateModifier]);
 
     const resetChanges = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
@@ -130,7 +130,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
             [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
         });
         closeOverlay();
-    }, [closeOverlay, onChange, selectedDateModifier]);
+    }, [clearSelection, closeOverlay, onChange, selectedDateModifier]);
 
     const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
     const rangeFrom = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
@@ -140,7 +140,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         if (rangeFrom && rangeTo) {
             rangeText = DateUtils.getFormattedDateRangeForSearch(rangeFrom, rangeTo, true);
         } else if (rangeFrom || rangeTo) {
-            rangeText = format(parseISO((rangeFrom ?? rangeTo) as string), 'MMM d, yyyy');
+            rangeText = format(parseISO((rangeFrom ?? rangeTo)!), 'MMM d, yyyy');
         }
     }
 
@@ -150,7 +150,10 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 
     const buttonStyle = isSmallScreenWidth || !selectedDateModifier ? styles.flex1 : {minWidth: 120};
     const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
-    const topPaddingStyle = selectedDateModifier ? (isSmallScreenWidth ? styles.pt0 : styles.pt4) : undefined;
+    let topPaddingStyle;
+    if (selectedDateModifier) {
+        topPaddingStyle = isSmallScreenWidth ? styles.pt0 : styles.pt4;
+    }
 
     return (
         <View style={[topPaddingStyle, styles.pb4, isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && {maxHeight: maxPopupHeight}]}>
@@ -172,6 +175,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                             onPress={clearSelection}
                             role={CONST.ROLE.BUTTON}
                             accessibilityLabel={translate('common.back')}
+                            sentryLabel="DateSelectPopup-Back"
                         >
                             <Icon
                                 src={backArrowIcon.BackArrow}
@@ -191,7 +195,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     shouldShowRangeError={shouldShowRangeError}
                     onDateValuesChange={setTrackedDateValues}
                 />
-                {isSmallScreenWidth && rangeText && (
+                {isSmallScreenWidth && !!rangeText && (
                     <Text style={[styles.textMicroSupporting, styles.ph5, styles.mt4, styles.textAlignCenter]}>
                         {`${translate('common.range')}: `}
                         <Text style={[styles.textMicroSupporting, styles.textStrong]}>{rangeText}</Text>
diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index 32a2bda1b4369..af2a62f76dbdb 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -243,7 +243,7 @@ function SearchFiltersBar({
     }, [flatFilters, translate]);
 
     const createDateDisplayValue = useCallback(
-        (filterValues: {on?: string; after?: string; before?: string}, isRange: boolean = false): [SearchDateValues, string[]] => {
+        (filterValues: {on?: string; after?: string; before?: string}, isRange = false): [SearchDateValues, string[]] => {
             const shouldUseRange = isRange || (!!filterValues.after && !!filterValues.before && !filterValues.on);
             const value: SearchDateValues = {
                 [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index 2f7bb5ff089cc..fdd3f034e1ebf 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -30,7 +30,7 @@ import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {createDisplayName} from '@libs/PersonalDetailsUtils';
 import {getAllTaxRates, getCleanedTagName} from '@libs/PolicyUtils';
-import {computeReportName} from '@libs/ReportNameUtils';
+import {getReportName} from '@libs/ReportNameUtils';
 import {
     buildCannedSearchQuery,
     buildQueryStringFromFilterFormValues,
@@ -433,9 +433,7 @@ function getFilterDisplayTitle(
         // Second pass: format date fields
         for (const [fieldName, dateValues] of Object.entries(dateFieldPairs)) {
             if (dateValues.on) {
-                const dateString = isSearchDatePreset(dateValues.on)
-                    ? translate(`search.filters.date.presets.${dateValues.on as SearchDatePreset}`)
-                    : translate('search.filters.date.on', dateValues.on);
+                const dateString = isSearchDatePreset(dateValues.on) ? translate(`search.filters.date.presets.${dateValues.on}`) : translate('search.filters.date.on', dateValues.on);
                 values.push(translate('search.filters.reportField', {name: fieldName, value: dateString.toLowerCase()}));
             }
 
@@ -586,7 +584,7 @@ function getFilterExpenseDisplayTitle(filters: Partial<SearchAdvancedFiltersForm
 
 function getFilterInDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, _: LocaleContextProps['translate'], reports: OnyxCollection<Report> | undefined, currentUserAccountID: number) {
     return filters.in
-        ?.map((id) => computeReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reports, undefined, undefined, undefined, undefined, undefined, currentUserAccountID))
+        ?.map((id) => getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`]))
         ?.filter(Boolean)
         ?.join(', ');
 }

From 52d75dd88ecd2d597f4488a701f61d069ef572f4 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 00:15:56 +0530
Subject: [PATCH 09/58] fix: translations

---
 src/languages/de.ts      | 4 ++++
 src/languages/es.ts      | 4 ++++
 src/languages/fr.ts      | 4 ++++
 src/languages/it.ts      | 4 ++++
 src/languages/ja.ts      | 4 ++++
 src/languages/nl.ts      | 4 ++++
 src/languages/pl.ts      | 4 ++++
 src/languages/pt-BR.ts   | 4 ++++
 src/languages/zh-hans.ts | 4 ++++
 9 files changed, 36 insertions(+)

diff --git a/src/languages/de.ts b/src/languages/de.ts
index 27d4b1aae3350..2575061baeb41 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -610,6 +610,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Ein',
         before: 'Vor',
         after: 'Nach',
+        range: 'Bereich',
         reschedule: 'Verschieben',
         general: 'Allgemein',
         workspacesTabTitle: 'Workspaces',
@@ -7287,6 +7288,9 @@ Fordern Sie Spesendetails wie Belege und Beschreibungen an, legen Sie Limits und
             selectAllMatchingItems: 'Alle passenden Einträge auswählen',
             allMatchingItemsSelected: 'Alle passenden Elemente ausgewählt',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Bitte wähle Daten für Von und Bis',
+        },
     },
     genericErrorPage: {
         title: 'Ups, da ist etwas schiefgelaufen!',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 00394f29f8ac1..724deb0ad47c8 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -370,6 +370,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'El',
         before: 'Antes',
         after: 'Después',
+        range: 'Rango',
         reschedule: 'Reprogramar',
         general: 'General',
         workspacesTabTitle: 'Espacios',
@@ -6964,6 +6965,9 @@ ${amount} para ${merchant} - ${date}`,
             selectAllMatchingItems: 'Seleccionar todos los elementos coincidentes',
             allMatchingItemsSelected: 'Todos los elementos coincidentes seleccionados',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Por favor, selecciona fechas para De y A',
+        },
     },
     genericErrorPage: {
         title: '¡Oh-oh, algo salió mal!',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index f57faeb36eea0..cf6c0066a112d 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -611,6 +611,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Activé',
         before: 'Avant',
         after: 'Après',
+        range: 'Intervalle',
         reschedule: 'Reprogrammer',
         general: 'Général',
         workspacesTabTitle: 'Espaces de travail',
@@ -7301,6 +7302,9 @@ Rendez obligatoires des informations de dépense comme les reçus et les descrip
             selectAllMatchingItems: 'Sélectionnez tous les éléments correspondants',
             allMatchingItemsSelected: 'Tous les éléments correspondants sont sélectionnés',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Veuillez sélectionner des dates pour De et À',
+        },
     },
     genericErrorPage: {
         title: 'Oups, quelque chose s’est mal passé !',
diff --git a/src/languages/it.ts b/src/languages/it.ts
index bf7f14b92a6fa..d0698934ca3ec 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -610,6 +610,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Attivo',
         before: 'Prima',
         after: 'Dopo',
+        range: 'Intervallo',
         reschedule: 'Ripianifica',
         general: 'Generale',
         workspacesTabTitle: 'Area di lavoro',
@@ -7268,6 +7269,9 @@ Richiedi dettagli sulle spese come ricevute e descrizioni, imposta limiti e valo
             selectAllMatchingItems: 'Seleziona tutti gli elementi corrispondenti',
             allMatchingItemsSelected: 'Tutti gli elementi corrispondenti sono stati selezionati',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Seleziona le date per Da e A',
+        },
     },
     genericErrorPage: {
         title: 'Oops, qualcosa è andato storto!',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index a10e24c176aee..226f797759a84 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -610,6 +610,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'オン',
         before: '前',
         after: '後',
+        range: '範囲',
         reschedule: '予定を変更',
         general: '一般',
         workspacesTabTitle: 'ワークスペース',
@@ -7210,6 +7211,9 @@ ${reportName}
             selectAllMatchingItems: '一致する項目をすべて選択',
             allMatchingItemsSelected: '一致するすべての項目を選択済み',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: '開始日と終了日の両方を選択してください',
+        },
     },
     genericErrorPage: {
         title: 'おっと、問題が発生しました！',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 031394a1ad03f..936fafcd2ca83 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -610,6 +610,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Aan',
         before: 'Vooraf',
         after: 'Na',
+        range: 'Bereik',
         reschedule: 'Opnieuw plannen',
         general: 'Algemeen',
         workspacesTabTitle: 'Werkruimtes',
@@ -7258,6 +7259,9 @@ Vereis onkostendetails zoals bonnen en beschrijvingen, stel limieten en standaar
             selectAllMatchingItems: 'Selecteer alle overeenkomende items',
             allMatchingItemsSelected: 'Alle overeenkomende items geselecteerd',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Selecteer datums voor Van en Tot',
+        },
     },
     genericErrorPage: {
         title: 'Oeps, er is iets misgegaan!',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 9c63aa6aac40f..9b00d5406f748 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -610,6 +610,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Włączone',
         before: 'Przed',
         after: 'PoPo',
+        range: 'Zakres',
         reschedule: 'Przełóż',
         general: 'Ogólne',
         workspacesTabTitle: 'Przestrzenie robocze',
@@ -7239,6 +7240,9 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i
             selectAllMatchingItems: 'Zaznacz wszystkie pasujące elementy',
             allMatchingItemsSelected: 'Zaznaczono wszystkie pasujące elementy',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Wybierz daty dla Od i Do',
+        },
     },
     genericErrorPage: {
         title: 'Ups, coś poszło nie tak!',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 41fe3d44d5050..5059e9e7e93b7 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -609,6 +609,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: 'Ativado',
         before: 'Antes',
         after: 'Depois',
+        range: 'Intervalo',
         reschedule: 'Reagendar',
         general: 'Geral',
         workspacesTabTitle: 'Espaços de trabalho',
@@ -7239,6 +7240,9 @@ Exija dados de despesas como recibos e descrições, defina limites e padrões e
             selectAllMatchingItems: 'Selecione todos os itens correspondentes',
             allMatchingItemsSelected: 'Todos os itens correspondentes selecionados',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: 'Selecione datas para De e Até',
+        },
     },
     genericErrorPage: {
         title: 'Opa, algo deu errado!',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index fd07640497fee..86ab8deb33015 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -606,6 +606,7 @@ const translations: TranslationDeepObject<typeof en> = {
         on: '开打开',
         before: '之前',
         after: '之后',
+        range: '范围',
         reschedule: '重新安排',
         general: '常规',
         workspacesTabTitle: '工作区',
@@ -7101,6 +7102,9 @@ ${reportName}
             selectAllMatchingItems: '选择所有匹配的项目',
             allMatchingItemsSelected: '已选中所有匹配项',
         },
+        errors: {
+            pleaseSelectDatesForBothFromAndTo: '请选择起始和结束日期',
+        },
     },
     genericErrorPage: {
         title: '哎呀，出错了！',

From 7a9d860969107a32db304ca96ea93a8ceae3c1bd Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 00:27:38 +0530
Subject: [PATCH 10/58] fix: ESLint, non null assertions, prettify

---
 .../Search/FilterComponents/DateFilterBase.tsx  | 17 ++++++++++++-----
 .../FilterComponents/DatePresetFilterBase.tsx   |  6 +++---
 .../Search/FilterDropdowns/DateSelectPopup.tsx  |  7 +++++--
 src/pages/Search/AdvancedSearchFilters.tsx      |  8 +++-----
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 8c4c6e40e1367..b08f5adeaa2f6 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -150,11 +150,18 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         back();
     };
 
-    const hasRangeInput = !!(trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]);
-    const rangeDisplayText =
-        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
-            ? DateUtils.getFormattedDateRangeForSearch(trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]!, trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]!, true)
-            : format(parseISO((trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE])!), 'MMM d, yyyy');
+    const rangeFromValue = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+    const rangeToValue = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+    const hasRangeInput = !!(rangeFromValue ?? rangeToValue);
+    let rangeDisplayText = '';
+    if (rangeFromValue && rangeToValue) {
+        rangeDisplayText = DateUtils.getFormattedDateRangeForSearch(rangeFromValue, rangeToValue, true);
+    } else if (rangeFromValue || rangeToValue) {
+        const singleRangeValue = rangeFromValue ?? rangeToValue;
+        if (singleRangeValue) {
+            rangeDisplayText = format(parseISO(singleRangeValue), 'MMM d, yyyy');
+        }
+    }
 
     return (
         <View style={styles.flex1}>
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 1add41a9262e9..f7196de3c9ec4 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -232,10 +232,10 @@ function DatePresetFilterBase({
         [selectedDateModifier, dateValues, ephemeralDateValue, setDateValue, updateDateValues],
     );
 
+    const rangeFromValue = dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+    const rangeToValue = dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
     const rangeDescription =
-        dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] && dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] && dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]
-            ? DateUtils.getFormattedDateRangeForSearch(dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]!, dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]!, true)
-            : undefined;
+        dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] && rangeFromValue && rangeToValue ? DateUtils.getFormattedDateRangeForSearch(rangeFromValue, rangeToValue, true) : undefined;
 
     if (!selectedDateModifier) {
         return (
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 00bfd0ad38c00..93822987c160d 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -140,7 +140,10 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         if (rangeFrom && rangeTo) {
             rangeText = DateUtils.getFormattedDateRangeForSearch(rangeFrom, rangeTo, true);
         } else if (rangeFrom || rangeTo) {
-            rangeText = format(parseISO((rangeFrom ?? rangeTo)!), 'MMM d, yyyy');
+            const singleRangeValue = rangeFrom ?? rangeTo;
+            if (singleRangeValue) {
+                rangeText = format(parseISO(singleRangeValue), 'MMM d, yyyy');
+            }
         }
     }
 
@@ -209,7 +212,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                         <Text style={[styles.textLabelSupporting, styles.textStrong]}>{rangeText}</Text>
                     </Text>
                 )}
-                {!shouldShowInlineRangeText && !isSmallScreenWidth && selectedDateModifier && <View style={styles.flex1} />}
+                {!shouldShowInlineRangeText && !isSmallScreenWidth && !!selectedDateModifier && <View style={styles.flex1} />}
                 <Button
                     medium
                     style={[!isSmallScreenWidth && selectedDateModifier && styles.mr2, buttonStyle]}
diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index fdd3f034e1ebf..cb9b2942d6c7e 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -10,11 +10,10 @@ import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import ScrollView from '@components/ScrollView';
-import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchDatePreset, SearchFilterKey} from '@components/Search/types';
+import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchFilterKey} from '@components/Search/types';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
-import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useSingleExecution from '@hooks/useSingleExecution';
@@ -582,7 +581,7 @@ function getFilterExpenseDisplayTitle(filters: Partial<SearchAdvancedFiltersForm
         : undefined;
 }
 
-function getFilterInDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, _: LocaleContextProps['translate'], reports: OnyxCollection<Report> | undefined, currentUserAccountID: number) {
+function getFilterInDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, _: LocaleContextProps['translate'], reports: OnyxCollection<Report> | undefined) {
     return filters.in
         ?.map((id) => getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`]))
         ?.filter(Boolean)
@@ -602,7 +601,6 @@ function AdvancedSearchFilters() {
 
     const [policies = getEmptyObject<NonNullable<OnyxCollection<Policy>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: false});
     const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false, selector: emailSelector});
-    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
 
     const taxRates = getAllTaxRates(policies);
 
@@ -669,7 +667,7 @@ function AdvancedSearchFilters() {
             ) {
                 filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters[key] ?? [], personalDetails, formatPhoneNumber);
             } else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.IN) {
-                filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, translate, reports, currentUserAccountID);
+                filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, translate, reports);
             } else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID) {
                 const workspacesData = workspaces.flatMap((value) => value.data);
                 filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, workspacesData);

From c5ff6e76864b0ef25d2fd40521512d2284bc2641 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 00:53:45 +0530
Subject: [PATCH 11/58] test: increase code coverage

---
 .../SearchPageHeader/SearchFiltersBar.tsx     | 67 +++++++++++--------
 tests/unit/Search/SearchFiltersBarTest.ts     | 43 ++++++++++++
 2 files changed, 82 insertions(+), 28 deletions(-)
 create mode 100644 tests/unit/Search/SearchFiltersBarTest.ts

diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index af2a62f76dbdb..16401727ac3db 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -75,6 +75,43 @@ type FilterItem = {
     filterKey: SearchAdvancedFiltersKey;
 };
 
+type TranslateFunction = (key: TranslationPaths) => string;
+
+export function createDateDisplayValueHelper(
+    filterValues: {on?: string; after?: string; before?: string},
+    translate: TranslateFunction,
+    isRange = false,
+): [SearchDateValues, string[]] {
+    const shouldUseRange = isRange || (!!filterValues.after && !!filterValues.before && !filterValues.on);
+    const value: SearchDateValues = {
+        [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
+        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
+        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
+        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: shouldUseRange ? 'range' : undefined,
+    };
+
+    const displayText: string[] = [];
+    if (value.On) {
+        displayText.push(
+            isSearchDatePreset(value.On)
+                ? translate(`search.filters.date.presets.${value.On}`)
+                : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`,
+        );
+    }
+    if (shouldUseRange && value.After && value.Before) {
+        displayText.push(`${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(value.After, value.Before, true)}`);
+    } else {
+        if (value.After) {
+            displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
+        }
+        if (value.Before) {
+            displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
+        }
+    }
+
+    return [value, displayText];
+}
+
 type SearchFiltersBarProps = {
     queryJSON: SearchQueryJSON;
     headerButtonsOptions: Array<DropdownOption<SearchHeaderOptionValue>>;
@@ -243,34 +280,8 @@ function SearchFiltersBar({
     }, [flatFilters, translate]);
 
     const createDateDisplayValue = useCallback(
-        (filterValues: {on?: string; after?: string; before?: string}, isRange = false): [SearchDateValues, string[]] => {
-            const shouldUseRange = isRange || (!!filterValues.after && !!filterValues.before && !filterValues.on);
-            const value: SearchDateValues = {
-                [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
-                [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
-                [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
-                [CONST.SEARCH.DATE_MODIFIERS.RANGE]: shouldUseRange ? 'range' : undefined,
-            };
-
-            const displayText: string[] = [];
-            if (value.On) {
-                displayText.push(
-                    isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`,
-                );
-            }
-            if (shouldUseRange && value.After && value.Before) {
-                displayText.push(`${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(value.After, value.Before, true)}`);
-            } else {
-                if (value.After) {
-                    displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
-                }
-                if (value.Before) {
-                    displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
-                }
-            }
-
-            return [value, displayText];
-        },
+        (filterValues: {on?: string; after?: string; before?: string}, isRange = false): [SearchDateValues, string[]] =>
+            createDateDisplayValueHelper(filterValues, translate, isRange),
         [translate],
     );
 
diff --git a/tests/unit/Search/SearchFiltersBarTest.ts b/tests/unit/Search/SearchFiltersBarTest.ts
new file mode 100644
index 0000000000000..6697a6ef97217
--- /dev/null
+++ b/tests/unit/Search/SearchFiltersBarTest.ts
@@ -0,0 +1,43 @@
+import {createDateDisplayValueHelper} from '@components/Search/SearchPageHeader/SearchFiltersBar';
+import DateUtils from '@libs/DateUtils';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+
+describe('SearchFiltersBar createDateDisplayValueHelper', () => {
+    const translate: (key: TranslationPaths) => string = (key) => key;
+
+    it('builds range display values when both boundaries are provided', () => {
+        const after = '2023-01-02';
+        const before = '2023-01-05';
+
+        const [value, display] = createDateDisplayValueHelper({after, before}, translate);
+        const expectedRange = DateUtils.getFormattedDateRangeForSearch(after, before, true);
+
+        expect(value.Range).toBe('range');
+        expect(value.After).toBe(after);
+        expect(value.Before).toBe(before);
+        expect(display).toEqual([`common.range: ${expectedRange}`]);
+    });
+
+    it('formats single boundary dates without using range mode', () => {
+        const after = '2023-02-10';
+        const before = '2023-02-12';
+
+        const [afterValue, afterDisplay] = createDateDisplayValueHelper({after}, translate);
+        const [beforeValue, beforeDisplay] = createDateDisplayValueHelper({before}, translate);
+
+        expect(afterValue.Range).toBeUndefined();
+        expect(afterDisplay).toEqual([`common.after ${DateUtils.formatToReadableString(after)}`]);
+
+        expect(beforeValue.Range).toBeUndefined();
+        expect(beforeDisplay).toEqual([`common.before ${DateUtils.formatToReadableString(before)}`]);
+    });
+
+    it('uses preset labels when provided', () => {
+        const [value, display] = createDateDisplayValueHelper({on: CONST.SEARCH.DATE_PRESETS.LAST_MONTH}, translate);
+
+        expect(value.On).toBe(CONST.SEARCH.DATE_PRESETS.LAST_MONTH);
+        expect(value.Range).toBeUndefined();
+        expect(display).toEqual([`search.filters.date.presets.${CONST.SEARCH.DATE_PRESETS.LAST_MONTH}`]);
+    });
+});

From aa0b6c8be6fc4ebfbbd5967cd2e5a0796446a7dd Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 00:55:13 +0530
Subject: [PATCH 12/58] chore: prettify

---
 .../Search/SearchPageHeader/SearchFiltersBar.tsx  | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index 16401727ac3db..95b76b5c3a55c 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -77,11 +77,7 @@ type FilterItem = {
 
 type TranslateFunction = (key: TranslationPaths) => string;
 
-export function createDateDisplayValueHelper(
-    filterValues: {on?: string; after?: string; before?: string},
-    translate: TranslateFunction,
-    isRange = false,
-): [SearchDateValues, string[]] {
+export function createDateDisplayValueHelper(filterValues: {on?: string; after?: string; before?: string}, translate: TranslateFunction, isRange = false): [SearchDateValues, string[]] {
     const shouldUseRange = isRange || (!!filterValues.after && !!filterValues.before && !filterValues.on);
     const value: SearchDateValues = {
         [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
@@ -92,11 +88,7 @@ export function createDateDisplayValueHelper(
 
     const displayText: string[] = [];
     if (value.On) {
-        displayText.push(
-            isSearchDatePreset(value.On)
-                ? translate(`search.filters.date.presets.${value.On}`)
-                : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`,
-        );
+        displayText.push(isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`);
     }
     if (shouldUseRange && value.After && value.Before) {
         displayText.push(`${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(value.After, value.Before, true)}`);
@@ -280,8 +272,7 @@ function SearchFiltersBar({
     }, [flatFilters, translate]);
 
     const createDateDisplayValue = useCallback(
-        (filterValues: {on?: string; after?: string; before?: string}, isRange = false): [SearchDateValues, string[]] =>
-            createDateDisplayValueHelper(filterValues, translate, isRange),
+        (filterValues: {on?: string; after?: string; before?: string}, isRange = false): [SearchDateValues, string[]] => createDateDisplayValueHelper(filterValues, translate, isRange),
         [translate],
     );
 

From 8efa220eb6006cf34f04841450f8105562488c28 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 01:14:20 +0530
Subject: [PATCH 13/58] fix: ESLint

---
 src/components/Search/SearchPageHeader/SearchFiltersBar.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index 95b76b5c3a55c..6c95a74470437 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -77,7 +77,7 @@ type FilterItem = {
 
 type TranslateFunction = (key: TranslationPaths) => string;
 
-export function createDateDisplayValueHelper(filterValues: {on?: string; after?: string; before?: string}, translate: TranslateFunction, isRange = false): [SearchDateValues, string[]] {
+function createDateDisplayValueHelper(filterValues: {on?: string; after?: string; before?: string}, translate: TranslateFunction, isRange = false): [SearchDateValues, string[]] {
     const shouldUseRange = isRange || (!!filterValues.after && !!filterValues.before && !filterValues.on);
     const value: SearchDateValues = {
         [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
@@ -983,3 +983,4 @@ function SearchFiltersBar({
 }
 
 export default SearchFiltersBar;
+export {createDateDisplayValueHelper};

From ef57b818b2bf2feb6a01fa9b51550d92fcdee364 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 19:32:03 +0530
Subject: [PATCH 14/58] fix spacing issues

---
 .../Search/FilterDropdowns/DateSelectPopup.tsx      | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 93822987c160d..289a95360d2f8 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -20,7 +20,7 @@ import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUt
 import CONST from '@src/CONST';
 
 /** Width of the popover when Range is selected (enough for two side-by-side calendars) */
-const RANGE_POPOVER_WIDTH = 660;
+const RANGE_POPOVER_WIDTH = 672;
 
 type DateSelectPopupProps = {
     /** The label to show when in an overlay on mobile */
@@ -151,7 +151,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 
     const maxPopupHeight = Math.round(windowHeight * 0.85);
 
-    const buttonStyle = isSmallScreenWidth || !selectedDateModifier ? styles.flex1 : {minWidth: 120};
+    const buttonStyle = isSmallScreenWidth || !selectedDateModifier ? styles.flex1 : {minWidth: 145};
     const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
     let topPaddingStyle;
     if (selectedDateModifier) {
@@ -183,10 +183,9 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                             <Icon
                                 src={backArrowIcon.BackArrow}
                                 fill={theme.icon}
-                                small
                             />
                         </PressableWithoutFeedback>
-                        <Text style={[styles.textLabelSupporting]}>{translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}</Text>
+                        <Text style={[styles.textLabelSupporting, {lineHeight: 18}]}>{translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}</Text>
                     </View>
                 )}
                 <DatePresetFilterBase
@@ -205,9 +204,9 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     </Text>
                 )}
             </ScrollView>
-            <View style={[styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, (isSmallScreenWidth || !selectedDateModifier) && styles.gap2]}>
+            <View style={[styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, styles.gap2]}>
                 {shouldShowInlineRangeText && (
-                    <Text style={[styles.textLabelSupporting, styles.flex1, styles.mr3]}>
+                    <Text style={[styles.textLabelSupporting, styles.flex1, styles.mr2]}>
                         {`${translate('common.range')}: `}
                         <Text style={[styles.textLabelSupporting, styles.textStrong]}>{rangeText}</Text>
                     </Text>
@@ -215,7 +214,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                 {!shouldShowInlineRangeText && !isSmallScreenWidth && !!selectedDateModifier && <View style={styles.flex1} />}
                 <Button
                     medium
-                    style={[!isSmallScreenWidth && selectedDateModifier && styles.mr2, buttonStyle]}
+                    style={[!isSmallScreenWidth && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && styles.mr2, buttonStyle]}
                     text={translate('common.reset')}
                     onPress={resetChanges}
                 />

From cc686e5c1bf97c9359adc55863bb91c65bd6918c Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 20:57:27 +0530
Subject: [PATCH 15/58] fix design issues, mobile auto-scroll on error

---
 .../FilterComponents/RangeDatePicker.tsx      |   4 +-
 .../FilterDropdowns/DateSelectPopup.tsx       | 150 ++++++++++++++----
 2 files changed, 120 insertions(+), 34 deletions(-)

diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
index 237efaeb0d0c4..b2e0e8c339f78 100644
--- a/src/components/Search/FilterComponents/RangeDatePicker.tsx
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -50,7 +50,7 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
         <>
             <View style={[!shouldStack && styles.flexRow, styles.mh5, styles.mt3]}>
                 <View style={[!shouldStack && styles.flex1, !shouldStack && styles.mr2]}>
-                    <View style={[styles.borderedContentCard, styles.p3]}>
+                    <View style={[styles.borderedContentCard, !isSmallScreenWidth ? styles.p4 : styles.p3]}>
                         <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph3, styles.pt1]}>{translate('common.from')}</Text>
                         <CalendarPicker
                             value={fromValue}
@@ -64,7 +64,7 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
                 </View>
 
                 <View style={[!shouldStack && styles.flex1, !shouldStack && styles.ml2, shouldStack && styles.mt4]}>
-                    <View style={[styles.borderedContentCard, styles.p3]}>
+                    <View style={[styles.borderedContentCard, !isSmallScreenWidth ? styles.p4 : styles.p3]}>
                         <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph3, styles.pt1]}>{translate('common.to')}</Text>
                         <CalendarPicker
                             value={toValue}
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 289a95360d2f8..6d08edc2136d3 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -52,6 +52,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     const theme = useTheme();
     const backArrowIcon = useMemoizedLazyExpensifyIcons(['BackArrow']);
     const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
+    const scrollViewRef = useRef<ScrollView>(null);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
     const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
     const [trackedDateValues, setTrackedDateValues] = useState<SearchDateValues>(value);
@@ -96,6 +97,9 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 
                 if (!hasFrom || !hasTo) {
                     setShouldShowRangeError(true);
+                    setTimeout(() => {
+                        scrollViewRef.current?.scrollToEnd({animated: true});
+                    }, 100);
                     return;
                 }
             }
@@ -135,11 +139,13 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
     const rangeFrom = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
     const rangeTo = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+    const isRangeMode = isInRangeMode || (!selectedDateModifier && rangeFrom && rangeTo && !trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.ON]);
+
     let rangeText: string | null = null;
-    if (isInRangeMode) {
+    if (isRangeMode && (rangeFrom || rangeTo)) {
         if (rangeFrom && rangeTo) {
             rangeText = DateUtils.getFormattedDateRangeForSearch(rangeFrom, rangeTo, true);
-        } else if (rangeFrom || rangeTo) {
+        } else {
             const singleRangeValue = rangeFrom ?? rangeTo;
             if (singleRangeValue) {
                 rangeText = format(parseISO(singleRangeValue), 'MMM d, yyyy');
@@ -147,32 +153,119 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         }
     }
 
-    const shouldShowInlineRangeText = !!rangeText && !isSmallScreenWidth;
+    const shouldShowInlineRangeText = !!rangeText && !isSmallScreenWidth && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
 
-    const maxPopupHeight = Math.round(windowHeight * 0.85);
+    const maxPopupHeight = Math.round(windowHeight * 0.875);
 
-    const buttonStyle = isSmallScreenWidth || !selectedDateModifier ? styles.flex1 : {minWidth: 145};
-    const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
-    let topPaddingStyle;
-    if (selectedDateModifier) {
-        topPaddingStyle = isSmallScreenWidth ? styles.pt0 : styles.pt4;
+    // For non-Range modes, use original simple styles. For Range, use custom layout
+    const useRangeLayout = isRangeMode;
+
+    // Original simple styles for non-Range modes
+    if (!useRangeLayout) {
+        return (
+            <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
+                {isSmallScreenWidth && !selectedDateModifier && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
+                <View>
+                    {!!selectedDateModifier && (
+                        <HeaderWithBackButton
+                            shouldDisplayHelpButton={false}
+                            style={[styles.h10, styles.pb3]}
+                            subtitle={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
+                            onBackButtonPress={clearSelection}
+                        />
+                    )}
+                    <DatePresetFilterBase
+                        ref={searchDatePresetFilterBaseRef}
+                        defaultDateValues={value}
+                        selectedDateModifier={selectedDateModifier}
+                        onSelectDateModifier={setSelectedDateModifier}
+                        presets={presets}
+                        shouldShowRangeError={shouldShowRangeError}
+                        onDateValuesChange={setTrackedDateValues}
+                    />
+                </View>
+                <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
+                    <Button
+                        medium
+                        style={[styles.flex1]}
+                        text={translate('common.reset')}
+                        onPress={resetChanges}
+                    />
+                    <Button
+                        success
+                        medium
+                        style={[styles.flex1]}
+                        text={translate('common.apply')}
+                        onPress={applyChanges}
+                    />
+                </View>
+            </View>
+        );
+    }
+
+    // Range mode - desktop uses simple layout, mobile uses ScrollView layout
+    if (!isSmallScreenWidth) {
+        return (
+            <View style={[styles.pv4, styles.gap2]}>
+                <View>
+                    {!!selectedDateModifier && (
+                        <HeaderWithBackButton
+                            shouldDisplayHelpButton={false}
+                            style={[styles.h10, styles.pb3]}
+                            subtitle={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
+                            onBackButtonPress={clearSelection}
+                        />
+                    )}
+                    <DatePresetFilterBase
+                        ref={searchDatePresetFilterBaseRef}
+                        defaultDateValues={value}
+                        selectedDateModifier={selectedDateModifier}
+                        onSelectDateModifier={setSelectedDateModifier}
+                        presets={presets}
+                        shouldShowRangeError={shouldShowRangeError}
+                        onDateValuesChange={setTrackedDateValues}
+                    />
+                </View>
+                <View style={[styles.flexRow, styles.ph5, styles.alignItemsCenter, styles.pt1]}>
+                    {shouldShowInlineRangeText && (
+                        <Text style={[styles.textLabelSupporting, styles.flex1]}>
+                            {`${translate('common.range')}: `}
+                            <Text style={[styles.textLabelSupporting, styles.textStrong]}>{rangeText}</Text>
+                        </Text>
+                    )}
+                    <View style={[styles.flexRow, styles.gap2, shouldShowInlineRangeText ? [styles.flex1, styles.justifyContentEnd] : styles.flex1]}>
+                        <Button
+                            medium
+                            style={[styles.flex1]}
+                            text={translate('common.reset')}
+                            onPress={resetChanges}
+                        />
+                        <Button
+                            success
+                            medium
+                            style={[styles.flex1]}
+                            text={translate('common.apply')}
+                            onPress={applyChanges}
+                        />
+                    </View>
+                </View>
+            </View>
+        );
     }
 
+    // Range mode - Mobile with ScrollView
+    const topPaddingStyle = selectedDateModifier ? styles.pt3 : undefined;
+    const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
+
     return (
-        <View style={[topPaddingStyle, styles.pb4, isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && {maxHeight: maxPopupHeight}]}>
-            {isSmallScreenWidth && !selectedDateModifier && <Text style={[styles.textLabel, styles.ph5, styles.pb3]}>{label}</Text>}
+        <View style={[topPaddingStyle, styles.pb4, styles.flexGrow1, {maxHeight: maxPopupHeight}]}>
+            {!selectedDateModifier && <Text style={[styles.textLabel, styles.ph5, styles.pb3]}>{label}</Text>}
             <ScrollView
-                style={[isSmallScreenWidth && styles.flexGrow1]}
-                contentContainerStyle={[!isSmallScreenWidth && !selectedDateModifier && styles.pt4, isSmallScreenWidth && selectedDateModifier && styles.pt0]}
+                ref={scrollViewRef}
+                style={[styles.flexGrow1]}
+                contentContainerStyle={[!selectedDateModifier && styles.pt4, selectedDateModifier && styles.pt0]}
             >
-                {!!selectedDateModifier && isSmallScreenWidth && (
-                    <HeaderWithBackButton
-                        shouldDisplayHelpButton={false}
-                        title={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
-                        onBackButtonPress={clearSelection}
-                    />
-                )}
-                {!!selectedDateModifier && !isSmallScreenWidth && (
+                {!!selectedDateModifier && (
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.ph5, styles.pb2, styles.gap2]}>
                         <PressableWithoutFeedback
                             onPress={clearSelection}
@@ -185,7 +278,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                                 fill={theme.icon}
                             />
                         </PressableWithoutFeedback>
-                        <Text style={[styles.textLabelSupporting, {lineHeight: 18}]}>{translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}</Text>
+                        <Text style={[styles.textLabelSupporting]}>{translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}</Text>
                     </View>
                 )}
                 <DatePresetFilterBase
@@ -197,7 +290,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     shouldShowRangeError={shouldShowRangeError}
                     onDateValuesChange={setTrackedDateValues}
                 />
-                {isSmallScreenWidth && !!rangeText && (
+                {!!rangeText && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (
                     <Text style={[styles.textMicroSupporting, styles.ph5, styles.mt4, styles.textAlignCenter]}>
                         {`${translate('common.range')}: `}
                         <Text style={[styles.textMicroSupporting, styles.textStrong]}>{rangeText}</Text>
@@ -205,23 +298,16 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                 )}
             </ScrollView>
             <View style={[styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, styles.gap2]}>
-                {shouldShowInlineRangeText && (
-                    <Text style={[styles.textLabelSupporting, styles.flex1, styles.mr2]}>
-                        {`${translate('common.range')}: `}
-                        <Text style={[styles.textLabelSupporting, styles.textStrong]}>{rangeText}</Text>
-                    </Text>
-                )}
-                {!shouldShowInlineRangeText && !isSmallScreenWidth && !!selectedDateModifier && <View style={styles.flex1} />}
                 <Button
                     medium
-                    style={[!isSmallScreenWidth && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && styles.mr2, buttonStyle]}
+                    style={[styles.flex1]}
                     text={translate('common.reset')}
                     onPress={resetChanges}
                 />
                 <Button
                     success
                     medium
-                    style={[buttonStyle]}
+                    style={[styles.flex1]}
                     text={translate('common.apply')}
                     onPress={applyChanges}
                 />

From ab0af91edbd4e0a677cf1102b0d2b2c87ad4a89c Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 21:14:28 +0530
Subject: [PATCH 16/58] fix: remove stored dates during backbutton press

---
 .../FilterDropdowns/DateSelectPopup.tsx       | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 6d08edc2136d3..762caa07930ae 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -83,6 +83,14 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         setShouldShowRangeError(false);
     }, []);
 
+    const handleBackPress = useCallback(() => {
+        if (searchDatePresetFilterBaseRef.current && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+            searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+            setTrackedDateValues(value);
+        }
+        clearSelection();
+    }, [clearSelection, selectedDateModifier, value]);
+
     const applyChanges = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
             return;
@@ -153,7 +161,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         }
     }
 
-    const shouldShowInlineRangeText = !!rangeText && !isSmallScreenWidth && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
+    const shouldShowInlineRangeText = !isSmallScreenWidth && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
 
     const maxPopupHeight = Math.round(windowHeight * 0.875);
 
@@ -171,7 +179,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                             shouldDisplayHelpButton={false}
                             style={[styles.h10, styles.pb3]}
                             subtitle={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
-                            onBackButtonPress={clearSelection}
+                            onBackButtonPress={handleBackPress}
                         />
                     )}
                     <DatePresetFilterBase
@@ -213,7 +221,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                             shouldDisplayHelpButton={false}
                             style={[styles.h10, styles.pb3]}
                             subtitle={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
-                            onBackButtonPress={clearSelection}
+                            onBackButtonPress={handleBackPress}
                         />
                     )}
                     <DatePresetFilterBase
@@ -229,8 +237,12 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                 <View style={[styles.flexRow, styles.ph5, styles.alignItemsCenter, styles.pt1]}>
                     {shouldShowInlineRangeText && (
                         <Text style={[styles.textLabelSupporting, styles.flex1]}>
-                            {`${translate('common.range')}: `}
-                            <Text style={[styles.textLabelSupporting, styles.textStrong]}>{rangeText}</Text>
+                            {rangeText ? (
+                                <>
+                                    {`${translate('common.range')}: `}
+                                    <Text style={[styles.textLabelSupporting, styles.textStrong]}>{rangeText}</Text>
+                                </>
+                            ) : null}
                         </Text>
                     )}
                     <View style={[styles.flexRow, styles.gap2, shouldShowInlineRangeText ? [styles.flex1, styles.justifyContentEnd] : styles.flex1]}>
@@ -268,7 +280,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                 {!!selectedDateModifier && (
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.ph5, styles.pb2, styles.gap2]}>
                         <PressableWithoutFeedback
-                            onPress={clearSelection}
+                            onPress={handleBackPress}
                             role={CONST.ROLE.BUTTON}
                             accessibilityLabel={translate('common.back')}
                             sentryLabel="DateSelectPopup-Back"

From d7d71589ad63d87631c785a712966e7824e56d33 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 21:32:46 +0530
Subject: [PATCH 17/58] fix: remove duplicate props

---
 src/components/Search/FilterDropdowns/DropdownButton.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Search/FilterDropdowns/DropdownButton.tsx b/src/components/Search/FilterDropdowns/DropdownButton.tsx
index f626fec91a649..c5d1fecdb9a4a 100644
--- a/src/components/Search/FilterDropdowns/DropdownButton.tsx
+++ b/src/components/Search/FilterDropdowns/DropdownButton.tsx
@@ -172,7 +172,6 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent, medi
                 // such as date years
                 shouldCloseWhenBrowserNavigationChanged={false}
                 innerContainerStyle={containerStyles}
-                shouldDisplayBelowModals
                 popoverDimensions={{
                     width: actualPopoverWidth,
                     height: CONST.POPOVER_DROPDOWN_MIN_HEIGHT,

From 7c7e8d51e091e3cd688137dfcf6d383051590aba Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 22:35:00 +0530
Subject: [PATCH 18/58] fix: consistent display in filter section

---
 .../Search/FilterComponents/DateFilterBase.tsx  | 17 +++++++----------
 .../FilterComponents/DatePresetFilterBase.tsx   |  5 +++--
 .../Search/FilterDropdowns/DateSelectPopup.tsx  | 12 ------------
 3 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index b08f5adeaa2f6..8133f985e4da2 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -77,16 +77,6 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         return getDatePresets(dateKey, hasFeed);
     }, [dateKey, searchAdvancedFiltersForm?.feed]);
 
-    // Auto-detect Range mode when both after and before values exist on initial load only
-    useEffect(() => {
-        if (isSearchAdvancedFiltersFormLoading || !dateAfterValue || !dateBeforeValue || dateOnValue) {
-            return;
-        }
-
-        setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isSearchAdvancedFiltersFormLoading]);
-
     const computedTitle = useMemo(() => {
         if (selectedDateModifier) {
             return translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`);
@@ -143,7 +133,14 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
 
     const goBack = () => {
         if (selectedDateModifier) {
+            if (searchDatePresetFilterBaseRef.current && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+                // Get the cleared date values to update tracked state
+                const clearedDateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+                setTrackedDateValues(clearedDateValues);
+            }
             setSelectedDateModifier(null);
+            setShouldShowRangeError(false);
             return;
         }
 
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index f7196de3c9ec4..2f9e72c9c66f8 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -155,7 +155,8 @@ function DatePresetFilterBase({
         const dateOn = dateValues[CONST.SEARCH.DATE_MODIFIERS.ON];
         const dateAfter = dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
         const dateBefore = dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-        const isRangeMode = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+        // Treat as Range mode if explicitly set OR if both after and before dates exist
+        const isRangeMode = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] || (!!dateAfter && !!dateBefore);
 
         return {
             // dateOn could be a preset e.g. Last month which should not be displayed as the On field
@@ -163,7 +164,7 @@ function DatePresetFilterBase({
             // Show After/Before on their items only when NOT in Range mode
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: isRangeMode ? undefined : dateAfter,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: isRangeMode ? undefined : dateBefore,
-            // Show Range only when explicitly in Range mode AND both dates are set
+            // Show Range when both dates exist
             [CONST.SEARCH.DATE_MODIFIERS.RANGE]: isRangeMode && dateAfter && dateBefore ? 'range' : undefined,
         };
     }, [dateValues]);
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 762caa07930ae..f3abf3426c4d2 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -66,18 +66,6 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         }
     }, [selectedDateModifier, setPopoverWidth]);
 
-    // Auto-detect Range mode when both after and before values exist on initial open only
-    useEffect(() => {
-        const hasAfter = !!value[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-        const hasBefore = !!value[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-        const hasOn = !!value[CONST.SEARCH.DATE_MODIFIERS.ON];
-
-        if (hasAfter && hasBefore && !hasOn) {
-            setSelectedDateModifier(CONST.SEARCH.DATE_MODIFIERS.RANGE);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
     const clearSelection = useCallback(() => {
         setSelectedDateModifier(null);
         setShouldShowRangeError(false);

From 40099774faddad6fcb583d02a452c104ca30a112 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 11 Feb 2026 23:01:23 +0530
Subject: [PATCH 19/58] fix: eslint

---
 src/components/Search/FilterComponents/DateFilterBase.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 8133f985e4da2..3b41dbd61113d 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -1,5 +1,5 @@
 import {format, parseISO} from 'date-fns';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';

From 6624c270f3a72d39596f0209719d38c79e386572 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 12 Feb 2026 09:32:34 +0530
Subject: [PATCH 20/58] fix: calendar padding, footer styles according to figma

---
 .../Search/FilterComponents/DateFilterBase.tsx       |  4 ++--
 .../Search/FilterComponents/RangeDatePicker.tsx      | 12 ++++++------
 .../Search/FilterDropdowns/DateSelectPopup.tsx       |  6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 3b41dbd61113d..149832106e5f7 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -179,9 +179,9 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
                     forceVerticalCalendars
                 />
                 {selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && hasRangeInput && (
-                    <Text style={[styles.textMicroSupporting, styles.mh5, styles.mt3]}>
+                    <Text style={[styles.textLabelSupporting, styles.mh5, styles.mt2]}>
                         {`${translate('common.range')}: `}
-                        <Text style={[styles.textMicroSupporting, styles.textStrong]}>{rangeDisplayText}</Text>
+                        <Text style={[styles.textLabel]}>{rangeDisplayText}</Text>
                     </Text>
                 )}
                 <View style={styles.flexGrow1} />
diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
index b2e0e8c339f78..c891e86597903 100644
--- a/src/components/Search/FilterComponents/RangeDatePicker.tsx
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -50,29 +50,29 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
         <>
             <View style={[!shouldStack && styles.flexRow, styles.mh5, styles.mt3]}>
                 <View style={[!shouldStack && styles.flex1, !shouldStack && styles.mr2]}>
-                    <View style={[styles.borderedContentCard, !isSmallScreenWidth ? styles.p4 : styles.p3]}>
-                        <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph3, styles.pt1]}>{translate('common.from')}</Text>
+                    <View style={[styles.borderedContentCard]}>
+                        <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph4, styles.pt4]}>{translate('common.from')}</Text>
                         <CalendarPicker
                             value={fromValue}
                             onSelected={onFromSelected}
                             minDate={CONST.CALENDAR_PICKER.MIN_DATE}
                             maxDate={toValue ? new Date(toValue) : CONST.CALENDAR_PICKER.MAX_DATE}
                             DayComponent={GreenSelectedDay}
-                            headerContainerStyle={styles.ph3}
+                            headerContainerStyle={styles.ph4}
                         />
                     </View>
                 </View>
 
                 <View style={[!shouldStack && styles.flex1, !shouldStack && styles.ml2, shouldStack && styles.mt4]}>
-                    <View style={[styles.borderedContentCard, !isSmallScreenWidth ? styles.p4 : styles.p3]}>
-                        <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph3, styles.pt1]}>{translate('common.to')}</Text>
+                    <View style={[styles.borderedContentCard]}>
+                        <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph4, styles.pt4]}>{translate('common.to')}</Text>
                         <CalendarPicker
                             value={toValue}
                             onSelected={onToSelected}
                             minDate={fromValue ? new Date(fromValue) : CONST.CALENDAR_PICKER.MIN_DATE}
                             maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
                             DayComponent={GreenSelectedDay}
-                            headerContainerStyle={styles.ph3}
+                            headerContainerStyle={styles.ph4}
                         />
                     </View>
                 </View>
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index f3abf3426c4d2..97b0d009a3fe5 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -228,7 +228,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                             {rangeText ? (
                                 <>
                                     {`${translate('common.range')}: `}
-                                    <Text style={[styles.textLabelSupporting, styles.textStrong]}>{rangeText}</Text>
+                                    <Text style={[styles.textLabel]}>{rangeText}</Text>
                                 </>
                             ) : null}
                         </Text>
@@ -291,9 +291,9 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     onDateValuesChange={setTrackedDateValues}
                 />
                 {!!rangeText && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (
-                    <Text style={[styles.textMicroSupporting, styles.ph5, styles.mt4, styles.textAlignCenter]}>
+                    <Text style={[styles.textLabelSupporting, styles.ph5, styles.mt2, styles.textAlignCenter]}>
                         {`${translate('common.range')}: `}
-                        <Text style={[styles.textMicroSupporting, styles.textStrong]}>{rangeText}</Text>
+                        <Text style={[styles.textLabel]}>{rangeText}</Text>
                     </Text>
                 )}
             </ScrollView>

From 1d76b545375ef0db5aaeb9a733fd405914fdb1d5 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 12 Feb 2026 09:42:31 +0530
Subject: [PATCH 21/58] fix: reset behaviour

---
 src/components/Search/FilterComponents/DateFilterBase.tsx | 5 ++++-
 src/components/Search/FilterDropdowns/DateSelectPopup.tsx | 7 +++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 149832106e5f7..e90fcb6ddaac4 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -92,7 +92,10 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
 
         if (selectedDateModifier) {
             searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            setSelectedDateModifier(null);
+            // Update tracked state to reflect cleared values
+            const clearedDateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+            setTrackedDateValues(clearedDateValues);
+            setShouldShowRangeError(false);
             return;
         }
 
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 97b0d009a3fe5..1eb1664237ec3 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -117,7 +117,10 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 
         if (selectedDateModifier) {
             searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            clearSelection();
+            // Update tracked state to reflect cleared values
+            const clearedDateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+            setTrackedDateValues(clearedDateValues);
+            setShouldShowRangeError(false);
             return;
         }
 
@@ -130,7 +133,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
             [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
         });
         closeOverlay();
-    }, [clearSelection, closeOverlay, onChange, selectedDateModifier]);
+    }, [closeOverlay, onChange, selectedDateModifier]);
 
     const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
     const rangeFrom = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];

From 762cdf1dba37dba9231583a70f44d3ce0c74c8da Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 12 Feb 2026 16:01:44 +0530
Subject: [PATCH 22/58] fix: mobile view design issues, range filter
 inconsistency, mt on calendar view

---
 .../DatePicker/CalendarPicker/index.tsx       |  6 ++--
 .../FilterComponents/DateFilterBase.tsx       | 13 +++++---
 .../FilterComponents/DatePresetFilterBase.tsx | 15 ++++++++--
 .../FilterComponents/RangeDatePicker.tsx      |  4 +--
 .../FilterDropdowns/DateSelectPopup.tsx       | 30 ++++++++++++++-----
 5 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx
index 3da6c9625afcb..1c61eeddd5fe3 100644
--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -161,7 +161,7 @@ function CalendarPicker({
     const hasAvailableDatesPrevMonth = endOfDay(new Date(minDate)) < startOfMonth(new Date(currentDateView));
 
     useEffect(() => {
-        if (isSmallScreenWidth || isFirstRender.current) {
+        if (isFirstRender.current) {
             isFirstRender.current = false;
             return;
         }
@@ -170,7 +170,7 @@ function CalendarPicker({
         const newHeight = rowCount * CONST.CALENDAR_PICKER_DAY_HEIGHT;
 
         heightValue.set(withTiming(newHeight, {duration: 50}));
-    }, [calendarDaysMatrix?.length, heightValue, isSmallScreenWidth]);
+    }, [calendarDaysMatrix?.length, heightValue]);
 
     const animatedStyle = useAnimatedStyle(() => {
         return {
@@ -179,7 +179,7 @@ function CalendarPicker({
     });
 
     const webOnlyMarginStyle = isSmallScreenWidth ? {} : styles.mh1;
-    const calendarContainerStyle = isSmallScreenWidth ? [webOnlyMarginStyle, themeStyles.calendarBodyContainer] : [webOnlyMarginStyle, animatedStyle];
+    const calendarContainerStyle = [webOnlyMarginStyle, animatedStyle];
     const headerPaddingStyle = headerContainerStyle ?? themeStyles.ph5;
 
     const getAccessibilityState = useCallback((isSelected: boolean) => ({selected: isSelected}), []);
diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index e90fcb6ddaac4..726f71c06dab8 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -137,10 +137,15 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
     const goBack = () => {
         if (selectedDateModifier) {
             if (searchDatePresetFilterBaseRef.current && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-                searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-                // Get the cleared date values to update tracked state
-                const clearedDateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-                setTrackedDateValues(clearedDateValues);
+                const hasExistingRange = !!(dateAfterValue && dateBeforeValue);
+                if (hasExistingRange) {
+                    searchDatePresetFilterBaseRef.current.resetDateValuesToDefault();
+                    setTrackedDateValues(defaultDateValues);
+                } else {
+                    searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+                    const clearedDateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+                    setTrackedDateValues(clearedDateValues);
+                }
             }
             setSelectedDateModifier(null);
             setShouldShowRangeError(false);
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 2f9e72c9c66f8..e8c5e3fed4b28 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -29,6 +29,9 @@ type DatePresetFilterBaseHandle = {
 
     /** Clears the date value of the selected date modifier */
     clearDateValueOfSelectedDateModifier: () => void;
+
+    /** Resets date values to the provided defaults */
+    resetDateValuesToDefault: () => void;
 };
 
 type DatePresetFilterBaseProps = {
@@ -50,6 +53,9 @@ type DatePresetFilterBaseProps = {
     /** Whether to show the range validation error */
     shouldShowRangeError?: boolean;
 
+    /** Whether the range error should be rendered inside the picker */
+    shouldShowRangeErrorInPicker?: boolean;
+
     /** Callback when date values change (useful for parent to track range display text) */
     onDateValuesChange?: (dateValues: SearchDateValues) => void;
 
@@ -77,6 +83,7 @@ function DatePresetFilterBase({
     presets,
     isSearchAdvancedFiltersFormLoading,
     shouldShowRangeError = false,
+    shouldShowRangeErrorInPicker = true,
     onDateValuesChange,
     forceVerticalCalendars = false,
     ref,
@@ -191,6 +198,10 @@ function DatePresetFilterBase({
                 return dateValues;
             },
 
+            resetDateValuesToDefault() {
+                updateDateValues(defaultDateValues);
+            },
+
             clearDateValues() {
                 updateDateValues({
                     [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
@@ -230,7 +241,7 @@ function DatePresetFilterBase({
                 setDateValue(selectedDateModifier, undefined);
             },
         }),
-        [selectedDateModifier, dateValues, ephemeralDateValue, setDateValue, updateDateValues],
+        [selectedDateModifier, dateValues, defaultDateValues, ephemeralDateValue, setDateValue, updateDateValues],
     );
 
     const rangeFromValue = dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
@@ -298,7 +309,7 @@ function DatePresetFilterBase({
                 toValue={dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]}
                 onFromSelected={(date) => setDateValue(CONST.SEARCH.DATE_MODIFIERS.AFTER, date)}
                 onToSelected={(date) => setDateValue(CONST.SEARCH.DATE_MODIFIERS.BEFORE, date)}
-                shouldShowError={shouldShowRangeError}
+                shouldShowError={shouldShowRangeErrorInPicker ? shouldShowRangeError : false}
                 forceVertical={forceVerticalCalendars}
             />
         );
diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
index c891e86597903..d79a11b670505 100644
--- a/src/components/Search/FilterComponents/RangeDatePicker.tsx
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -14,7 +14,7 @@ function GreenSelectedDay({disabled, selected, children}: DayProps) {
     const themeStyles = useThemeStyles();
     return (
         <View style={[themeStyles.calendarDayContainer, selected ? themeStyles.buttonSuccess : {}]}>
-            <Text style={[disabled ? themeStyles.buttonOpacityDisabled : {}, selected ? themeStyles.buttonSuccessText : {}]}>{children}</Text>
+            <Text style={[disabled ? themeStyles.buttonOpacityDisabled : {}, selected ? themeStyles.themeTextColor : {}]}>{children}</Text>
         </View>
     );
 }
@@ -48,7 +48,7 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
 
     return (
         <>
-            <View style={[!shouldStack && styles.flexRow, styles.mh5, styles.mt3]}>
+            <View style={[!shouldStack && styles.flexRow, styles.mh5, isSmallScreenWidth && styles.mt3]}>
                 <View style={[!shouldStack && styles.flex1, !shouldStack && styles.mr2]}>
                     <View style={[styles.borderedContentCard]}>
                         <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph4, styles.pt4]}>{translate('common.from')}</Text>
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 1eb1664237ec3..a16f078110b71 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -2,6 +2,7 @@ import {format, parseISO} from 'date-fns';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {ScrollView, View} from 'react-native';
 import Button from '@components/Button';
+import FormHelpMessage from '@components/FormHelpMessage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
@@ -73,7 +74,10 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 
     const handleBackPress = useCallback(() => {
         if (searchDatePresetFilterBaseRef.current && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-            searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+            const hasExistingRange = !!value[CONST.SEARCH.DATE_MODIFIERS.AFTER] && !!value[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+            if (!hasExistingRange) {
+                searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+            }
             setTrackedDateValues(value);
         }
         clearSelection();
@@ -101,7 +105,11 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
             }
 
             searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
+            const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+            setTrackedDateValues(dateValues);
             clearSelection();
+            onChange(dateValues);
+            closeOverlay();
             return;
         }
 
@@ -291,15 +299,23 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     onSelectDateModifier={setSelectedDateModifier}
                     presets={presets}
                     shouldShowRangeError={shouldShowRangeError}
+                    shouldShowRangeErrorInPicker={false}
                     onDateValuesChange={setTrackedDateValues}
                 />
-                {!!rangeText && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (
-                    <Text style={[styles.textLabelSupporting, styles.ph5, styles.mt2, styles.textAlignCenter]}>
-                        {`${translate('common.range')}: `}
-                        <Text style={[styles.textLabel]}>{rangeText}</Text>
-                    </Text>
-                )}
             </ScrollView>
+            {shouldShowRangeError && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (
+                <FormHelpMessage
+                    isError
+                    message={translate('search.errors.pleaseSelectDatesForBothFromAndTo')}
+                    style={[styles.mh3, styles.mt2]}
+                />
+            )}
+            {!!rangeText && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (
+                <Text style={[styles.textLabelSupporting, styles.ph5, styles.mt2, styles.textAlignLeft]}>
+                    {`${translate('common.range')}: `}
+                    <Text style={[styles.textLabel]}>{rangeText}</Text>
+                </Text>
+            )}
             <View style={[styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, styles.gap2]}>
                 <Button
                     medium

From 08a1a284af0593c48c6c1edc9f0d2c75bf7c11fa Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 13 Feb 2026 18:24:57 +0530
Subject: [PATCH 23/58] fix: individual exclusivity

---
 .../FilterComponents/DateFilterBase.tsx       |  46 ++++--
 .../FilterComponents/DatePresetFilterBase.tsx | 154 ++++++++++++++----
 .../FilterDropdowns/DateSelectPopup.tsx       |  36 +++-
 .../SearchPageHeader/SearchFiltersBar.tsx     |  33 +++-
 src/types/form/SearchAdvancedFiltersForm.ts   |  16 ++
 5 files changed, 229 insertions(+), 56 deletions(-)

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 726f71c06dab8..204928c368dc8 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -58,18 +58,24 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX) as ReportFieldDateKey)
         : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as const);
 
+    // Range key: For report fields, use GLOBAL_PREFIX + Range + suffix; for regular fields, use dateKey + Range
+    const dateRangeKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
+        ? (`${CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${CONST.SEARCH.DATE_MODIFIERS.RANGE}${dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, '')}` as ReportFieldDateKey)
+        : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.RANGE}` as const);
+
     const dateOnValue = searchAdvancedFiltersForm?.[dateOnKey];
     const dateBeforeValue = searchAdvancedFiltersForm?.[dateBeforeKey];
     const dateAfterValue = searchAdvancedFiltersForm?.[dateAfterKey];
+    const dateRangeValue = searchAdvancedFiltersForm?.[dateRangeKey];
 
     const defaultDateValues = useMemo(
         () => ({
             [CONST.SEARCH.DATE_MODIFIERS.ON]: dateOnValue,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: dateBeforeValue,
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: dateAfterValue,
-            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: dateRangeValue,
         }),
-        [dateAfterValue, dateBeforeValue, dateOnValue],
+        [dateAfterValue, dateBeforeValue, dateOnValue, dateRangeValue],
     );
 
     const presets = useMemo(() => {
@@ -120,7 +126,8 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
                 }
             }
 
-            searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
+            const updatedDateValues = searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
+            setTrackedDateValues(updatedDateValues);
             setSelectedDateModifier(null);
             setShouldShowRangeError(false);
             return;
@@ -131,13 +138,14 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
             [dateOnKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.ON] ?? null,
             [dateBeforeKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ?? null,
             [dateAfterKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? null,
+            [dateRangeKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] ?? null,
         });
-    }, [selectedDateModifier, dateOnKey, dateBeforeKey, dateAfterKey, onSubmit]);
+    }, [selectedDateModifier, dateOnKey, dateBeforeKey, dateAfterKey, dateRangeKey, onSubmit]);
 
     const goBack = () => {
         if (selectedDateModifier) {
             if (searchDatePresetFilterBaseRef.current && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-                const hasExistingRange = !!(dateAfterValue && dateBeforeValue);
+                const hasExistingRange = !!dateRangeValue;
                 if (hasExistingRange) {
                     searchDatePresetFilterBaseRef.current.resetDateValuesToDefault();
                     setTrackedDateValues(defaultDateValues);
@@ -155,14 +163,28 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         back();
     };
 
-    const rangeFromValue = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-    const rangeToValue = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-    const hasRangeInput = !!(rangeFromValue ?? rangeToValue);
+    const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
+    const hasRangeFlag = !!trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+    // MUTUAL EXCLUSIVITY: Only show range values when Range flag is explicitly set
+    // When in fresh Range mode (no flag), only show text after BOTH dates selected
+    const rangeFromValue = hasRangeFlag ? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] : undefined;
+    const rangeToValue = hasRangeFlag ? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] : undefined;
+    
+    // For fresh Range selection (no flag), only show text when BOTH dates selected
+    const freshSelectionFrom = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+    const freshSelectionTo = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+    const hasBothFreshDates = !!(freshSelectionFrom && freshSelectionTo);
+    const activeSelectionFrom = isInRangeMode && !hasRangeFlag && hasBothFreshDates ? freshSelectionFrom : undefined;
+    const activeSelectionTo = isInRangeMode && !hasRangeFlag && hasBothFreshDates ? freshSelectionTo : undefined;
+    
+    const displayFrom = rangeFromValue || activeSelectionFrom;
+    const displayTo = rangeToValue || activeSelectionTo;
+    const hasRangeInput = !!(displayFrom ?? displayTo);
     let rangeDisplayText = '';
-    if (rangeFromValue && rangeToValue) {
-        rangeDisplayText = DateUtils.getFormattedDateRangeForSearch(rangeFromValue, rangeToValue, true);
-    } else if (rangeFromValue || rangeToValue) {
-        const singleRangeValue = rangeFromValue ?? rangeToValue;
+    if (displayFrom && displayTo) {
+        rangeDisplayText = DateUtils.getFormattedDateRangeForSearch(displayFrom, displayTo, true);
+    } else if (displayFrom || displayTo) {
+        const singleRangeValue = displayFrom ?? displayTo;
         if (singleRangeValue) {
             rangeDisplayText = format(parseISO(singleRangeValue), 'MMM d, yyyy');
         }
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index e8c5e3fed4b28..0dcd507508ebd 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -24,8 +24,8 @@ type DatePresetFilterBaseHandle = {
     /** Clears date values */
     clearDateValues: () => void;
 
-    /** Sets the date value of the selected date modifier to the ephemeral date value (the selected date in calendar) */
-    setDateValueOfSelectedDateModifier: () => void;
+    /** Sets the date value of the selected date modifier to the ephemeral date value (the selected date in calendar) and returns the updated values */
+    setDateValueOfSelectedDateModifier: () => SearchDateValues;
 
     /** Clears the date value of the selected date modifier */
     clearDateValueOfSelectedDateModifier: () => void;
@@ -112,12 +112,12 @@ function DatePresetFilterBase({
             return;
         }
         setDateValues(defaultDateValues);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isSearchAdvancedFiltersFormLoading]);
+    }, [isSearchAdvancedFiltersFormLoading, defaultDateValues]);
 
     const setDateValue = useCallback(
         (dateModifier: SearchDateModifier, value: string | undefined) => {
             updateDateValues((prevDateValues) => {
+                // Preset values clear all other filters
                 if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(value)) {
                     return {
                         [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
@@ -127,6 +127,7 @@ function DatePresetFilterBase({
                     };
                 }
 
+                // If a preset was set, clear it when setting any other modifier
                 if (dateModifier !== CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(prevDateValues[CONST.SEARCH.DATE_MODIFIERS.ON])) {
                     return {
                         ...prevDateValues,
@@ -135,35 +136,59 @@ function DatePresetFilterBase({
                     };
                 }
 
-                // When setting After or Before individually, clear Range mode
-                if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER || dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
-                    const nextDateValues = {...prevDateValues, [dateModifier]: value, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined};
-                    const nextAfter = dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER ? value : nextDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-                    const nextBefore = dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE ? value : nextDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-
-                    if (nextAfter && nextBefore && nextAfter > nextBefore) {
-                        if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER) {
-                            nextDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] = undefined;
-                        } else {
-                            nextDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] = undefined;
-                        }
-                    }
+                // Setting RANGE: clear ON only (AFTER and BEFORE are set separately)
+                if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                    return {
+                        ...prevDateValues,
+                        [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+                        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: value,
+                    };
+                }
 
-                    return nextDateValues;
+                // Setting ON, AFTER, or BEFORE individually
+                if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON || dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER || dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
+                    const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
+                    
+                    if (isInRangeMode) {
+                        // In Range mode: building the range, clear ON, keep RANGE flag
+                        return {
+                            ...prevDateValues,
+                            [dateModifier]: value,
+                            [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+                        };
+                    }
+                    
+                    // Not in Range mode: clear RANGE and handle individual filters
+                    if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && !!prevDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]) {
+                        // ON overrides everything including any Range values
+                        return {
+                            [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
+                            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+                            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+                            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+                        };
+                    }
+                    
+                    // Otherwise: Just clear RANGE flag, keep all other values
+                    return {
+                        ...prevDateValues,
+                        [dateModifier]: value,
+                        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+                    };
                 }
 
                 return {...prevDateValues, [dateModifier]: value};
             });
         },
-        [updateDateValues],
+        [updateDateValues, selectedDateModifier],
     );
 
     const dateDisplayValues = useMemo<SearchDateValues>(() => {
         const dateOn = dateValues[CONST.SEARCH.DATE_MODIFIERS.ON];
         const dateAfter = dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
         const dateBefore = dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-        // Treat as Range mode if explicitly set OR if both after and before dates exist
-        const isRangeMode = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] || (!!dateAfter && !!dateBefore);
+        // Treat as Range mode ONLY if explicitly set via RANGE flag
+        const isRangeMode = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
 
         return {
             // dateOn could be a preset e.g. Last month which should not be displayed as the On field
@@ -171,7 +196,7 @@ function DatePresetFilterBase({
             // Show After/Before on their items only when NOT in Range mode
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: isRangeMode ? undefined : dateAfter,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: isRangeMode ? undefined : dateBefore,
-            // Show Range when both dates exist
+            // Show Range only when RANGE flag is set and both dates exist
             [CONST.SEARCH.DATE_MODIFIERS.RANGE]: isRangeMode && dateAfter && dateBefore ? 'range' : undefined,
         };
     }, [dateValues]);
@@ -183,12 +208,30 @@ function DatePresetFilterBase({
         [getInitialEphemeralDateValue],
     );
 
+    // Separate ephemeral state for Range mode to avoid showing individual AFTER/BEFORE values
+    const [rangeEphemeralValues, setRangeEphemeralValues] = useState<{from?: string; to?: string}>({});
+
     const selectDateModifier = useCallback(
         (dateModifier: SearchDateModifier | null) => {
             resetEphemeralDateValue(dateModifier);
+            
+            // When entering Range mode
+            if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                if (dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]) {
+                    // Load existing Range values from saved state
+                    setRangeEphemeralValues({
+                        from: dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+                        to: dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+                    });
+                } else {
+                    // Start fresh with empty range values
+                    setRangeEphemeralValues({});
+                }
+            }
+            
             onSelectDateModifier(dateModifier);
         },
-        [resetEphemeralDateValue, onSelectDateModifier],
+        [resetEphemeralDateValue, onSelectDateModifier, dateValues],
     );
 
     useImperativeHandle(
@@ -213,16 +256,62 @@ function DatePresetFilterBase({
 
             setDateValueOfSelectedDateModifier() {
                 if (!selectedDateModifier) {
-                    return;
+                    return dateValues;
                 }
 
                 // For Range, mark as Range mode (values are already set via setDateValue)
                 if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                    const updatedValues = {...dateValues, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: 'range'};
                     setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, 'range');
-                    return;
+                    return updatedValues;
+                }
+
+                // Compute the new values synchronously based on setDateValue logic
+                let updatedValues: SearchDateValues;
+
+                // Preset values clear all other filters
+                if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(ephemeralDateValue)) {
+                    updatedValues = {
+                        [CONST.SEARCH.DATE_MODIFIERS.ON]: ephemeralDateValue,
+                        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+                        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+                        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+                    };
+                } else if (selectedDateModifier !== CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(dateValues[CONST.SEARCH.DATE_MODIFIERS.ON])) {
+                    updatedValues = {
+                        ...dateValues,
+                        [selectedDateModifier]: ephemeralDateValue,
+                        [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+                    };
+                } else if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.ON || selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER || selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
+                    // Setting ON, AFTER, or BEFORE individually
+                    const hadRange = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+                    
+                    if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && hadRange) {
+                        // ON overrides everything including any Range values
+                        updatedValues = {
+                            [CONST.SEARCH.DATE_MODIFIERS.ON]: ephemeralDateValue,
+                            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+                            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+                            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+                        };
+                    } else {
+                        // AFTER and BEFORE: Just clear RANGE flag, keep all other values
+                        updatedValues = {
+                            ...dateValues,
+                            [selectedDateModifier]: ephemeralDateValue,
+                            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+                        };
+                    }
+                } else {
+                    updatedValues = {...dateValues, [selectedDateModifier]: ephemeralDateValue};
                 }
 
+                // Update state asynchronously
                 setDateValue(selectedDateModifier, ephemeralDateValue);
+
+                // Return the computed values immediately
+                return updatedValues;
             },
 
             clearDateValueOfSelectedDateModifier() {
@@ -303,12 +392,19 @@ function DatePresetFilterBase({
     }
 
     if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+        // Use ephemeral state for Range mode to keep it separate from individual filters
         return (
             <RangeDatePicker
-                fromValue={dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER]}
-                toValue={dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]}
-                onFromSelected={(date) => setDateValue(CONST.SEARCH.DATE_MODIFIERS.AFTER, date)}
-                onToSelected={(date) => setDateValue(CONST.SEARCH.DATE_MODIFIERS.BEFORE, date)}
+                fromValue={rangeEphemeralValues.from}
+                toValue={rangeEphemeralValues.to}
+                onFromSelected={(date) => {
+                    setRangeEphemeralValues((prev) => ({...prev, from: date}));
+                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.AFTER, date);
+                }}
+                onToSelected={(date) => {
+                    setRangeEphemeralValues((prev) => ({...prev, to: date}));
+                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.BEFORE, date);
+                }}
                 shouldShowError={shouldShowRangeErrorInPicker ? shouldShowRangeError : false}
                 forceVertical={forceVerticalCalendars}
             />
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index a16f078110b71..8e707389d7940 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -58,6 +58,11 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
     const [trackedDateValues, setTrackedDateValues] = useState<SearchDateValues>(value);
 
+    // Sync trackedDateValues when actual date values change from parent
+    useEffect(() => {
+        setTrackedDateValues(value);
+    }, [value[CONST.SEARCH.DATE_MODIFIERS.ON], value[CONST.SEARCH.DATE_MODIFIERS.AFTER], value[CONST.SEARCH.DATE_MODIFIERS.BEFORE], value[CONST.SEARCH.DATE_MODIFIERS.RANGE]]);
+
     // Widen the popover when Range is selected, reset when not
     useEffect(() => {
         if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
@@ -104,8 +109,8 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                 }
             }
 
-            searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
-            const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+            // This now returns the updated values synchronously
+            const dateValues = searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
             setTrackedDateValues(dateValues);
             clearSelection();
             onChange(dateValues);
@@ -144,16 +149,29 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     }, [closeOverlay, onChange, selectedDateModifier]);
 
     const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
-    const rangeFrom = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-    const rangeTo = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-    const isRangeMode = isInRangeMode || (!selectedDateModifier && rangeFrom && rangeTo && !trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.ON]);
+    const hasRangeFlag = !!trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+    // MUTUAL EXCLUSIVITY: Only show range values when Range flag is explicitly set
+    // When in fresh Range mode (no flag), only show text after BOTH dates selected
+    const rangeFrom = hasRangeFlag ? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] : undefined;
+    const rangeTo = hasRangeFlag ? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] : undefined;
+    const isRangeMode = isInRangeMode || (!selectedDateModifier && hasRangeFlag);
+
+    // For fresh Range selection (no flag), only show text when BOTH dates selected
+    const freshSelectionFrom = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+    const freshSelectionTo = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+    const hasBothFreshDates = !!(freshSelectionFrom && freshSelectionTo);
+    const activeSelectionFrom = isInRangeMode && !hasRangeFlag && hasBothFreshDates ? freshSelectionFrom : undefined;
+    const activeSelectionTo = isInRangeMode && !hasRangeFlag && hasBothFreshDates ? freshSelectionTo : undefined;
 
     let rangeText: string | null = null;
-    if (isRangeMode && (rangeFrom || rangeTo)) {
-        if (rangeFrom && rangeTo) {
-            rangeText = DateUtils.getFormattedDateRangeForSearch(rangeFrom, rangeTo, true);
+    // Show range text from applied Range filter OR from active selection
+    const displayFrom = rangeFrom || activeSelectionFrom;
+    const displayTo = rangeTo || activeSelectionTo;
+    if (isRangeMode && (displayFrom || displayTo)) {
+        if (displayFrom && displayTo) {
+            rangeText = DateUtils.getFormattedDateRangeForSearch(displayFrom, displayTo, true);
         } else {
-            const singleRangeValue = rangeFrom ?? rangeTo;
+            const singleRangeValue = displayFrom ?? displayTo;
             if (singleRangeValue) {
                 rangeText = format(parseISO(singleRangeValue), 'MMM d, yyyy');
             }
diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index 426957bb9d34b..d71a4b52a8ce5 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -1,6 +1,6 @@
 import {isUserValidatedSelector} from '@selectors/Account';
 import {emailSelector} from '@selectors/Session';
-import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {ReactNode} from 'react';
 import {FlatList, View} from 'react-native';
 import Button from '@components/Button';
@@ -79,19 +79,18 @@ type FilterItem = {
 type TranslateFunction = (key: TranslationPaths) => string;
 
 function createDateDisplayValueHelper(filterValues: {on?: string; after?: string; before?: string}, translate: TranslateFunction, isRange = false): [SearchDateValues, string[]] {
-    const shouldUseRange = isRange || (!!filterValues.after && !!filterValues.before && !filterValues.on);
     const value: SearchDateValues = {
         [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
         [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
         [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
-        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: shouldUseRange ? 'range' : undefined,
+        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: isRange ? 'range' : undefined,
     };
 
     const displayText: string[] = [];
     if (value.On) {
         displayText.push(isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`);
     }
-    if (shouldUseRange && value.After && value.Before) {
+    if (isRange && value.After && value.Before) {
         displayText.push(`${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(value.After, value.Before, true)}`);
     } else {
         if (value.After) {
@@ -129,8 +128,29 @@ function SearchFiltersBar({
     const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isUserValidatedSelector, canBeMissing: true});
     const [searchAdvancedFiltersForm = getEmptyObject<Partial<SearchAdvancedFiltersForm>>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
 
-    // Track which date filters were set via Range mode (persists while component is mounted)
-    const [dateRangeFlags, setDateRangeFlags] = useState<Partial<Record<SearchDateFilterKeys, boolean>>>({});
+    // Track which date filters were set via Range mode - initialize from persisted form data
+    const [dateRangeFlags, setDateRangeFlags] = useState<Partial<Record<SearchDateFilterKeys, boolean>>>(() => {
+        const initialFlags: Partial<Record<SearchDateFilterKeys, boolean>> = {};
+        DATE_FILTER_KEYS.forEach((key) => {
+            const rangeKey = `${key}Range` as keyof typeof searchAdvancedFiltersForm;
+            if (searchAdvancedFiltersForm[rangeKey]) {
+                initialFlags[key] = true;
+            }
+        });
+        return initialFlags;
+    });
+
+    // Sync dateRangeFlags when form data changes (e.g., filters reset or loaded)
+    useEffect(() => {
+        const updatedFlags: Partial<Record<SearchDateFilterKeys, boolean>> = {};
+        DATE_FILTER_KEYS.forEach((key) => {
+            const rangeKey = `${key}Range` as keyof typeof searchAdvancedFiltersForm;
+            if (searchAdvancedFiltersForm[rangeKey]) {
+                updatedFlags[key] = true;
+            }
+        });
+        setDateRangeFlags(updatedFlags);
+    }, [searchAdvancedFiltersForm.dateRange, searchAdvancedFiltersForm.submittedRange, searchAdvancedFiltersForm.approvedRange, searchAdvancedFiltersForm.paidRange, searchAdvancedFiltersForm.exportedRange, searchAdvancedFiltersForm.postedRange, searchAdvancedFiltersForm.withdrawnRange]);
     // type, groupBy, status, and view values are not guaranteed to respect the ts type as they come from user input
     const {type: unsafeType, groupBy: unsafeGroupBy, status: unsafeStatus, view: unsafeView, flatFilters} = queryJSON;
     const [selectedIOUReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${currentSelectedReportID}`, {canBeMissing: true});
@@ -452,6 +472,7 @@ function SearchFiltersBar({
                         [`${filterKey}On`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON],
                         [`${filterKey}After`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.AFTER],
                         [`${filterKey}Before`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+                        [`${filterKey}Range`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.RANGE],
                     };
 
                     updateFilterForm(dateFormValues);
diff --git a/src/types/form/SearchAdvancedFiltersForm.ts b/src/types/form/SearchAdvancedFiltersForm.ts
index 54c33c46ab913..3e70b0a8a4f18 100644
--- a/src/types/form/SearchAdvancedFiltersForm.ts
+++ b/src/types/form/SearchAdvancedFiltersForm.ts
@@ -38,31 +38,37 @@ const FILTER_KEYS = {
     DATE_ON: 'dateOn',
     DATE_AFTER: 'dateAfter',
     DATE_BEFORE: 'dateBefore',
+    DATE_RANGE: 'dateRange',
 
     SUBMITTED_NOT: 'submittedNot',
     SUBMITTED_ON: 'submittedOn',
     SUBMITTED_AFTER: 'submittedAfter',
     SUBMITTED_BEFORE: 'submittedBefore',
+    SUBMITTED_RANGE: 'submittedRange',
 
     APPROVED_NOT: 'approvedNot',
     APPROVED_ON: 'approvedOn',
     APPROVED_AFTER: 'approvedAfter',
     APPROVED_BEFORE: 'approvedBefore',
+    APPROVED_RANGE: 'approvedRange',
 
     PAID_NOT: 'paidNot',
     PAID_ON: 'paidOn',
     PAID_AFTER: 'paidAfter',
     PAID_BEFORE: 'paidBefore',
+    PAID_RANGE: 'paidRange',
 
     EXPORTED_NOT: 'exportedNot',
     EXPORTED_ON: 'exportedOn',
     EXPORTED_AFTER: 'exportedAfter',
     EXPORTED_BEFORE: 'exportedBefore',
+    EXPORTED_RANGE: 'exportedRange',
 
     POSTED_NOT: 'postedNot',
     POSTED_ON: 'postedOn',
     POSTED_AFTER: 'postedAfter',
     POSTED_BEFORE: 'postedBefore',
+    POSTED_RANGE: 'postedRange',
 
     WITHDRAWAL_TYPE_NOT: 'withdrawalTypeNot',
     WITHDRAWAL_TYPE: 'withdrawalType',
@@ -71,6 +77,7 @@ const FILTER_KEYS = {
     WITHDRAWN_ON: 'withdrawnOn',
     WITHDRAWN_AFTER: 'withdrawnAfter',
     WITHDRAWN_BEFORE: 'withdrawnBefore',
+    WITHDRAWN_RANGE: 'withdrawnRange',
 
     CURRENCY_NOT: 'currencyNot',
     CURRENCY: 'currency',
@@ -547,31 +554,39 @@ type SearchAdvancedFiltersForm = Form<
 
         [FILTER_KEYS.DATE_ON]: string;
         [FILTER_KEYS.DATE_NOT]: string;
+        [FILTER_KEYS.DATE_AFTER]: string;
+        [FILTER_KEYS.DATE_BEFORE]: string;
+        [FILTER_KEYS.DATE_RANGE]: string;
 
         [FILTER_KEYS.SUBMITTED_ON]: string;
         [FILTER_KEYS.SUBMITTED_NOT]: string;
         [FILTER_KEYS.SUBMITTED_AFTER]: string;
         [FILTER_KEYS.SUBMITTED_BEFORE]: string;
+        [FILTER_KEYS.SUBMITTED_RANGE]: string;
 
         [FILTER_KEYS.APPROVED_ON]: string;
         [FILTER_KEYS.APPROVED_NOT]: string;
         [FILTER_KEYS.APPROVED_AFTER]: string;
         [FILTER_KEYS.APPROVED_BEFORE]: string;
+        [FILTER_KEYS.APPROVED_RANGE]: string;
 
         [FILTER_KEYS.PAID_ON]: string;
         [FILTER_KEYS.PAID_NOT]: string;
         [FILTER_KEYS.PAID_AFTER]: string;
         [FILTER_KEYS.PAID_BEFORE]: string;
+        [FILTER_KEYS.PAID_RANGE]: string;
 
         [FILTER_KEYS.EXPORTED_ON]: string;
         [FILTER_KEYS.EXPORTED_NOT]: string;
         [FILTER_KEYS.EXPORTED_AFTER]: string;
         [FILTER_KEYS.EXPORTED_BEFORE]: string;
+        [FILTER_KEYS.EXPORTED_RANGE]: string;
 
         [FILTER_KEYS.POSTED_ON]: string;
         [FILTER_KEYS.POSTED_NOT]: string;
         [FILTER_KEYS.POSTED_AFTER]: string;
         [FILTER_KEYS.POSTED_BEFORE]: string;
+        [FILTER_KEYS.POSTED_RANGE]: string;
 
         [FILTER_KEYS.WITHDRAWAL_TYPE]: SearchWithdrawalType;
         [FILTER_KEYS.WITHDRAWAL_TYPE_NOT]: SearchWithdrawalType;
@@ -580,6 +595,7 @@ type SearchAdvancedFiltersForm = Form<
         [FILTER_KEYS.WITHDRAWN_NOT]: string;
         [FILTER_KEYS.WITHDRAWN_AFTER]: string;
         [FILTER_KEYS.WITHDRAWN_BEFORE]: string;
+        [FILTER_KEYS.WITHDRAWN_RANGE]: string;
 
         [FILTER_KEYS.CURRENCY]: string[];
         [FILTER_KEYS.CURRENCY_NOT]: string[];

From b8f670444278280dd765f0870a4982a96cb976e6 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 13 Feb 2026 18:49:54 +0530
Subject: [PATCH 24/58] chore: prettify

---
 .../FilterComponents/DateFilterBase.tsx       |  4 +-
 .../FilterComponents/DatePresetFilterBase.tsx | 18 ++--
 .../SearchPageHeader/SearchFiltersBar.tsx     | 10 +-
 src/pages/Search/AdvancedSearchFilters.tsx    | 93 +++++++++----------
 4 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 204928c368dc8..9dcc1afadee67 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -169,14 +169,14 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
     // When in fresh Range mode (no flag), only show text after BOTH dates selected
     const rangeFromValue = hasRangeFlag ? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] : undefined;
     const rangeToValue = hasRangeFlag ? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] : undefined;
-    
+
     // For fresh Range selection (no flag), only show text when BOTH dates selected
     const freshSelectionFrom = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
     const freshSelectionTo = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
     const hasBothFreshDates = !!(freshSelectionFrom && freshSelectionTo);
     const activeSelectionFrom = isInRangeMode && !hasRangeFlag && hasBothFreshDates ? freshSelectionFrom : undefined;
     const activeSelectionTo = isInRangeMode && !hasRangeFlag && hasBothFreshDates ? freshSelectionTo : undefined;
-    
+
     const displayFrom = rangeFromValue || activeSelectionFrom;
     const displayTo = rangeToValue || activeSelectionTo;
     const hasRangeInput = !!(displayFrom ?? displayTo);
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 0dcd507508ebd..c08d889d0a355 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -148,7 +148,7 @@ function DatePresetFilterBase({
                 // Setting ON, AFTER, or BEFORE individually
                 if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON || dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER || dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
                     const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
-                    
+
                     if (isInRangeMode) {
                         // In Range mode: building the range, clear ON, keep RANGE flag
                         return {
@@ -157,7 +157,7 @@ function DatePresetFilterBase({
                             [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
                         };
                     }
-                    
+
                     // Not in Range mode: clear RANGE and handle individual filters
                     if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && !!prevDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]) {
                         // ON overrides everything including any Range values
@@ -168,7 +168,7 @@ function DatePresetFilterBase({
                             [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
                         };
                     }
-                    
+
                     // Otherwise: Just clear RANGE flag, keep all other values
                     return {
                         ...prevDateValues,
@@ -214,7 +214,7 @@ function DatePresetFilterBase({
     const selectDateModifier = useCallback(
         (dateModifier: SearchDateModifier | null) => {
             resetEphemeralDateValue(dateModifier);
-            
+
             // When entering Range mode
             if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
                 if (dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]) {
@@ -228,7 +228,7 @@ function DatePresetFilterBase({
                     setRangeEphemeralValues({});
                 }
             }
-            
+
             onSelectDateModifier(dateModifier);
         },
         [resetEphemeralDateValue, onSelectDateModifier, dateValues],
@@ -283,10 +283,14 @@ function DatePresetFilterBase({
                         [selectedDateModifier]: ephemeralDateValue,
                         [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
                     };
-                } else if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.ON || selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER || selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
+                } else if (
+                    selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.ON ||
+                    selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER ||
+                    selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE
+                ) {
                     // Setting ON, AFTER, or BEFORE individually
                     const hadRange = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
-                    
+
                     if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && hadRange) {
                         // ON overrides everything including any Range values
                         updatedValues = {
diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index d71a4b52a8ce5..b25ab1781b8f0 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -150,7 +150,15 @@ function SearchFiltersBar({
             }
         });
         setDateRangeFlags(updatedFlags);
-    }, [searchAdvancedFiltersForm.dateRange, searchAdvancedFiltersForm.submittedRange, searchAdvancedFiltersForm.approvedRange, searchAdvancedFiltersForm.paidRange, searchAdvancedFiltersForm.exportedRange, searchAdvancedFiltersForm.postedRange, searchAdvancedFiltersForm.withdrawnRange]);
+    }, [
+        searchAdvancedFiltersForm.dateRange,
+        searchAdvancedFiltersForm.submittedRange,
+        searchAdvancedFiltersForm.approvedRange,
+        searchAdvancedFiltersForm.paidRange,
+        searchAdvancedFiltersForm.exportedRange,
+        searchAdvancedFiltersForm.postedRange,
+        searchAdvancedFiltersForm.withdrawnRange,
+    ]);
     // type, groupBy, status, and view values are not guaranteed to respect the ts type as they come from user input
     const {type: unsafeType, groupBy: unsafeGroupBy, status: unsafeStatus, view: unsafeView, flatFilters} = queryJSON;
     const [selectedIOUReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${currentSelectedReportID}`, {canBeMissing: true});
diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index eee0fd701d7e0..6d9e49039de8c 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -1,16 +1,16 @@
-import { filterCardsHiddenFromSearch } from '@selectors/Card';
-import { emailSelector } from '@selectors/Session';
-import React, { useMemo } from 'react';
-import { View } from 'react-native';
-import type { ValueOf } from 'react-native-gesture-handler/lib/typescript/typeUtils';
-import type { OnyxCollection } from 'react-native-onyx';
+import {filterCardsHiddenFromSearch} from '@selectors/Card';
+import {emailSelector} from '@selectors/Session';
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import type {ValueOf} from 'react-native-gesture-handler/lib/typescript/typeUtils';
+import type {OnyxCollection} from 'react-native-onyx';
 import Button from '@components/Button';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
-import type { LocaleContextProps } from '@components/LocaleContextProvider';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import { usePersonalDetails } from '@components/OnyxListItemProvider';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import ScrollView from '@components/ScrollView';
-import type { SearchAmountFilterKeys, SearchDateFilterKeys, SearchDatePreset, SearchFilterKey } from '@components/Search/types';
+import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchDatePreset, SearchFilterKey} from '@components/Search/types';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
@@ -19,17 +19,17 @@ import useOnyx from '@hooks/useOnyx';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
-import type { WorkspaceListItem } from '@hooks/useWorkspaceList';
+import type {WorkspaceListItem} from '@hooks/useWorkspaceList';
 import useWorkspaceList from '@hooks/useWorkspaceList';
-import { saveSearch } from '@libs/actions/Search';
-import { createCardFeedKey, getCardFeedKey, getCardFeedNamesWithType, getWorkspaceCardFeedKey } from '@libs/CardFeedUtils';
-import { getCardDescription } from '@libs/CardUtils';
-import { convertToDisplayStringWithoutCurrency } from '@libs/CurrencyUtils';
+import {saveSearch} from '@libs/actions/Search';
+import {createCardFeedKey, getCardFeedKey, getCardFeedNamesWithType, getWorkspaceCardFeedKey} from '@libs/CardFeedUtils';
+import {getCardDescription} from '@libs/CardUtils';
+import {convertToDisplayStringWithoutCurrency} from '@libs/CurrencyUtils';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import { createDisplayName } from '@libs/PersonalDetailsUtils';
-import { getAllTaxRates, getCleanedTagName } from '@libs/PolicyUtils';
-import { getReportName } from '@libs/ReportNameUtils';
+import {createDisplayName} from '@libs/PersonalDetailsUtils';
+import {getAllTaxRates, getCleanedTagName} from '@libs/PolicyUtils';
+import {getReportName} from '@libs/ReportNameUtils';
 import {
     buildCannedSearchQuery,
     buildQueryStringFromFilterFormValues,
@@ -39,17 +39,17 @@ import {
     isSearchDatePreset,
     sortOptionsWithEmptyValue,
 } from '@libs/SearchQueryUtils';
-import { getStatusOptions } from '@libs/SearchUIUtils';
-import { getExpenseTypeTranslationKey } from '@libs/TransactionUtils';
+import {getStatusOptions} from '@libs/SearchUIUtils';
+import {getExpenseTypeTranslationKey} from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
-import type { TranslationPaths } from '@src/languages/types';
+import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type { SearchAdvancedFiltersForm } from '@src/types/form';
-import { AMOUNT_FILTER_KEYS, DATE_FILTER_KEYS } from '@src/types/form/SearchAdvancedFiltersForm';
-import type { CardList, PersonalDetailsList, Policy, Report, WorkspaceCardsList } from '@src/types/onyx';
-import type { SearchDataTypes } from '@src/types/onyx/SearchResults';
-import { getEmptyObject } from '@src/types/utils/EmptyObject';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import {AMOUNT_FILTER_KEYS, DATE_FILTER_KEYS} from '@src/types/form/SearchAdvancedFiltersForm';
+import type {CardList, PersonalDetailsList, Policy, Report, WorkspaceCardsList} from '@src/types/onyx';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
+import {getEmptyObject} from '@src/types/utils/EmptyObject';
 
 type SectionType = {
     titleTranslationKey: TranslationPaths;
@@ -392,7 +392,7 @@ function getFilterDisplayTitle(
 
     if (key.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
         const values: string[] = [];
-        const dateFieldPairs: Record<string, { after?: string; before?: string; on?: string }> = {};
+        const dateFieldPairs: Record<string, {after?: string; before?: string; on?: string}> = {};
 
         // First pass: collect all date field values
         for (const [fieldKey, fieldValue] of Object.entries(filters)) {
@@ -414,7 +414,6 @@ function getFilterDisplayTitle(
                     dateFieldPairs[fieldName] = {};
                 }
                 dateFieldPairs[fieldName].on = fieldValue as string;
-
                 const dateString = isSearchDatePreset(fieldValue as string)
                     ? translate(`search.filters.date.presets.${fieldValue as SearchDatePreset}` as TranslationPaths)
                     : translate('search.filters.date.on', fieldValue as string);
@@ -425,7 +424,6 @@ function getFilterDisplayTitle(
                     dateFieldPairs[fieldName] = {};
                 }
                 dateFieldPairs[fieldName].after = fieldValue as string;
-
                 const dateString = translate('search.filters.date.after', fieldValue as string);
                 values.push(translate('search.filters.reportField', fieldName, dateString.toLowerCase()));
             } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX)) {
@@ -433,7 +431,6 @@ function getFilterDisplayTitle(
                     dateFieldPairs[fieldName] = {};
                 }
                 dateFieldPairs[fieldName].before = fieldValue as string;
-
                 const dateString = translate('search.filters.date.before', fieldValue as string);
                 values.push(translate('search.filters.reportField', fieldName, dateString.toLowerCase()));
             } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX)) {
@@ -446,22 +443,22 @@ function getFilterDisplayTitle(
         for (const [fieldName, dateValues] of Object.entries(dateFieldPairs)) {
             if (dateValues.on) {
                 const dateString = isSearchDatePreset(dateValues.on) ? translate(`search.filters.date.presets.${dateValues.on}`) : translate('search.filters.date.on', dateValues.on);
-                values.push(translate('search.filters.reportField', { name: fieldName, value: dateString.toLowerCase() }));
+                values.push(translate('search.filters.reportField', fieldName, dateString.toLowerCase()));
             }
 
             // Show as range if both after and before exist and no "on" value
             if (dateValues.after && dateValues.before && !dateValues.on) {
                 const rangeString = `${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(dateValues.after, dateValues.before, true)}`;
-                values.push(translate('search.filters.reportField', { name: fieldName, value: rangeString.toLowerCase() }));
+                values.push(translate('search.filters.reportField', fieldName, rangeString.toLowerCase()));
             } else {
                 if (dateValues.after) {
                     const dateString = translate('search.filters.date.after', dateValues.after).toLowerCase();
-                    values.push(translate('search.filters.reportField', { name: fieldName, value: dateString.toLowerCase() }));
+                    values.push(translate('search.filters.reportField', fieldName, dateString));
                 }
 
                 if (dateValues.before) {
                     const dateString = translate('search.filters.date.before', dateValues.before).toLowerCase();
-                    values.push(translate('search.filters.reportField', { name: fieldName, value: dateString.toLowerCase() }));
+                    values.push(translate('search.filters.reportField', fieldName, dateString));
                 }
             }
         }
@@ -545,7 +542,7 @@ function getFilterViewDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>,
 }
 
 function getStatusFilterDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, type: SearchDataTypes, translate: LocaleContextProps['translate']) {
-    const statusOptions = getStatusOptions(translate, type).concat({ text: translate('common.all'), value: CONST.SEARCH.STATUS.EXPENSE.ALL });
+    const statusOptions = getStatusOptions(translate, type).concat({text: translate('common.all'), value: CONST.SEARCH.STATUS.EXPENSE.ALL});
     let filterValue = filters?.status;
 
     if (!filterValue?.length) {
@@ -588,9 +585,9 @@ function getFilterExpenseDisplayTitle(filters: Partial<SearchAdvancedFiltersForm
     const filterValue = filters[CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPENSE_TYPE];
     return filterValue
         ? Object.values(CONST.SEARCH.TRANSACTION_TYPE)
-            .filter((expenseType) => filterValue.includes(expenseType))
-            .map((expenseType) => translate(getExpenseTypeTranslationKey(expenseType)))
-            .join(', ')
+              .filter((expenseType) => filterValue.includes(expenseType))
+              .map((expenseType) => translate(getExpenseTypeTranslationKey(expenseType)))
+              .join(', ')
         : undefined;
 }
 
@@ -602,22 +599,22 @@ function getFilterInDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, _:
 }
 
 function AdvancedSearchFilters() {
-    const { translate, localeCompare, formatPhoneNumber } = useLocalize();
+    const {translate, localeCompare, formatPhoneNumber} = useLocalize();
     const styles = useThemeStyles();
-    const { singleExecution } = useSingleExecution();
+    const {singleExecution} = useSingleExecution();
     const waitForNavigate = useWaitForNavigation();
-    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, { canBeMissing: false });
-    const [savedSearches] = useOnyx(ONYXKEYS.SAVED_SEARCHES, { canBeMissing: true });
-    const [searchAdvancedFilters = getEmptyObject<SearchAdvancedFiltersForm>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, { canBeMissing: true });
-    const [searchCards] = useOnyx(ONYXKEYS.DERIVED.NON_PERSONAL_AND_WORKSPACE_CARD_LIST, { canBeMissing: true, selector: filterCardsHiddenFromSearch });
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false});
+    const [savedSearches] = useOnyx(ONYXKEYS.SAVED_SEARCHES, {canBeMissing: true});
+    const [searchAdvancedFilters = getEmptyObject<SearchAdvancedFiltersForm>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
+    const [searchCards] = useOnyx(ONYXKEYS.DERIVED.NON_PERSONAL_AND_WORKSPACE_CARD_LIST, {canBeMissing: true, selector: filterCardsHiddenFromSearch});
     const personalDetails = usePersonalDetails();
 
-    const [policies = getEmptyObject<NonNullable<OnyxCollection<Policy>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY, { canBeMissing: false });
-    const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, { canBeMissing: false, selector: emailSelector });
+    const [policies = getEmptyObject<NonNullable<OnyxCollection<Policy>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: false});
+    const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false, selector: emailSelector});
 
     const taxRates = getAllTaxRates(policies);
 
-    const { sections: workspaces } = useWorkspaceList({
+    const {sections: workspaces} = useWorkspaceList({
         policies,
         currentUserLogin,
         shouldShowPendingDeletePolicy: false,
@@ -626,7 +623,7 @@ function AdvancedSearchFilters() {
         localeCompare,
     });
 
-    const { currentType, typeFiltersKeys } = useAdvancedSearchFilters();
+    const {currentType, typeFiltersKeys} = useAdvancedSearchFilters();
 
     const queryString = useMemo(() => {
         const currentQueryJSON = getCurrentSearchQueryJSON();
@@ -643,7 +640,7 @@ function AdvancedSearchFilters() {
             ROUTES.SEARCH_ROOT.getRoute({
                 query: queryString,
             }),
-            { forceReplace: true },
+            {forceReplace: true},
         );
     };
 

From 8dbc5e055175821362245f11ff904c01aedf1c76 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 13 Feb 2026 19:01:57 +0530
Subject: [PATCH 25/58] fix: Unwanted redundancy

---
 src/pages/Search/AdvancedSearchFilters.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index 6d9e49039de8c..b7fe61416de5c 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -14,6 +14,7 @@ import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchDatePreset, Sea
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useSingleExecution from '@hooks/useSingleExecution';
@@ -29,7 +30,7 @@ import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {createDisplayName} from '@libs/PersonalDetailsUtils';
 import {getAllTaxRates, getCleanedTagName} from '@libs/PolicyUtils';
-import {getReportName} from '@libs/ReportNameUtils';
+import {computeReportName} from '@libs/ReportNameUtils';
 import {
     buildCannedSearchQuery,
     buildQueryStringFromFilterFormValues,
@@ -591,9 +592,9 @@ function getFilterExpenseDisplayTitle(filters: Partial<SearchAdvancedFiltersForm
         : undefined;
 }
 
-function getFilterInDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, _: LocaleContextProps['translate'], reports: OnyxCollection<Report> | undefined) {
+function getFilterInDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, _: LocaleContextProps['translate'], reports: OnyxCollection<Report> | undefined, currentUserAccountID: number) {
     return filters.in
-        ?.map((id) => getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`]))
+        ?.map((id) => computeReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reports, undefined, undefined, undefined, undefined, undefined, currentUserAccountID))
         ?.filter(Boolean)
         ?.join(', ');
 }
@@ -611,6 +612,7 @@ function AdvancedSearchFilters() {
 
     const [policies = getEmptyObject<NonNullable<OnyxCollection<Policy>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: false});
     const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false, selector: emailSelector});
+    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
 
     const taxRates = getAllTaxRates(policies);
 
@@ -677,7 +679,7 @@ function AdvancedSearchFilters() {
             ) {
                 filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters[key] ?? [], personalDetails, formatPhoneNumber);
             } else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.IN) {
-                filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, translate, reports);
+                filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, translate, reports, currentUserAccountID);
             } else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID) {
                 const workspacesData = workspaces.flatMap((value) => value.data);
                 filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, workspacesData);

From cc1024a8947bacabf20c7a349bcae463b9539156 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 13 Feb 2026 23:22:59 +0530
Subject: [PATCH 26/58] fix: Seperate range filter boundaries from after/before
 filter, fix mobile filter consistency

---
 src/CONST/index.ts                            |   2 +
 .../FilterComponents/DateFilterBase.tsx       |  89 ++--
 .../FilterComponents/DatePresetFilterBase.tsx | 244 ++++-------
 .../FilterDropdowns/DateSelectPopup.tsx       |  96 ++---
 .../SearchPageHeader/SearchFiltersBar.tsx     | 146 ++++---
 src/hooks/useFilterFormValues.tsx             |  11 +-
 src/libs/SearchQueryUtils.ts                  | 382 +++++++++++++++++-
 src/pages/Search/AdvancedSearchFilters.tsx    | 137 ++++---
 .../SearchFiltersReportFieldPage/index.tsx    |  30 +-
 src/pages/Search/SearchPage.tsx               |   8 +-
 tests/unit/Search/SearchFiltersBarTest.ts     |  24 +-
 tests/unit/Search/SearchQueryUtilsTest.ts     | 141 +++++++
 12 files changed, 889 insertions(+), 421 deletions(-)

diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index c3faf31678d01..b27a1f36c7376 100755
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -7229,6 +7229,7 @@ const CONST = {
             EQUAL_TO: 'eq',
             CONTAINS: 'contains',
             NOT_EQUAL_TO: 'neq',
+            RANGE: 'range',
             GREATER_THAN: 'gt',
             GREATER_THAN_OR_EQUAL_TO: 'gte',
             LOWER_THAN: 'lt',
@@ -7301,6 +7302,7 @@ const CONST = {
             ON_PREFIX: 'reportFieldOn-',
             AFTER_PREFIX: 'reportFieldAfter-',
             BEFORE_PREFIX: 'reportFieldBefore-',
+            RANGE_PREFIX: 'reportFieldRange-',
         },
         TAG_EMPTY_VALUE: 'none',
         CATEGORY_EMPTY_VALUE: 'none',
diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 9dcc1afadee67..3368252b72cf4 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -11,6 +11,7 @@ import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
+import {getRangeBoundariesFromFormValue} from '@libs/SearchQueryUtils';
 import {getDatePresets} from '@libs/SearchUIUtils';
 import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
@@ -30,22 +31,33 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const emptyDateValues: SearchDateValues = useMemo(
+        () => ({
+            [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
+        }),
+        [],
+    );
     const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
     const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
     const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
     const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
-    const [trackedDateValues, setTrackedDateValues] = useState<SearchDateValues>({
-        [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-    });
-
-    const handleDateValuesChange = useCallback((dateValues: SearchDateValues) => {
+    const [trackedDateValues, setTrackedDateValues] = useState<SearchDateValues>(emptyDateValues);
+
+    const updateTrackedDateValues = useCallback((dateValues: SearchDateValues) => {
         setTrackedDateValues(dateValues);
     }, []);
 
+    const handleDateValuesChange = useCallback(
+        (dateValues: SearchDateValues) => {
+            updateTrackedDateValues(dateValues);
+        },
+        [updateTrackedDateValues],
+    );
+
     const dateOnKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
         ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.ON_PREFIX) as ReportFieldDateKey)
         : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.ON}` as const);
@@ -58,9 +70,8 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX) as ReportFieldDateKey)
         : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as const);
 
-    // Range key: For report fields, use GLOBAL_PREFIX + Range + suffix; for regular fields, use dateKey + Range
     const dateRangeKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
-        ? (`${CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${CONST.SEARCH.DATE_MODIFIERS.RANGE}${dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, '')}` as ReportFieldDateKey)
+        ? (`${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, '')}` as ReportFieldDateKey)
         : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.RANGE}` as const);
 
     const dateOnValue = searchAdvancedFiltersForm?.[dateOnKey];
@@ -97,16 +108,16 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         }
 
         if (selectedDateModifier) {
-            searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            // Update tracked state to reflect cleared values
-            const clearedDateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-            setTrackedDateValues(clearedDateValues);
+            const clearedDateValues = searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+            updateTrackedDateValues(clearedDateValues);
+            setSelectedDateModifier(null);
             setShouldShowRangeError(false);
             return;
         }
 
+        updateTrackedDateValues(emptyDateValues);
         searchDatePresetFilterBaseRef.current.clearDateValues();
-    }, [selectedDateModifier]);
+    }, [selectedDateModifier, emptyDateValues, updateTrackedDateValues]);
 
     const save = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
@@ -117,8 +128,13 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
             // For Range, validate that both dates are selected
             if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
                 const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-                const hasFrom = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-                const hasTo = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+                const rangeBoundaries = getRangeBoundariesFromFormValue(
+                    dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
+                    dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+                    dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+                );
+                const hasFrom = !!rangeBoundaries.from;
+                const hasTo = !!rangeBoundaries.to;
 
                 if (!hasFrom || !hasTo) {
                     setShouldShowRangeError(true);
@@ -127,7 +143,7 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
             }
 
             const updatedDateValues = searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
-            setTrackedDateValues(updatedDateValues);
+            updateTrackedDateValues(updatedDateValues);
             setSelectedDateModifier(null);
             setShouldShowRangeError(false);
             return;
@@ -140,20 +156,13 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
             [dateAfterKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? null,
             [dateRangeKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] ?? null,
         });
-    }, [selectedDateModifier, dateOnKey, dateBeforeKey, dateAfterKey, dateRangeKey, onSubmit]);
+    }, [selectedDateModifier, dateOnKey, dateBeforeKey, dateAfterKey, dateRangeKey, onSubmit, updateTrackedDateValues]);
 
     const goBack = () => {
         if (selectedDateModifier) {
             if (searchDatePresetFilterBaseRef.current && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-                const hasExistingRange = !!dateRangeValue;
-                if (hasExistingRange) {
-                    searchDatePresetFilterBaseRef.current.resetDateValuesToDefault();
-                    setTrackedDateValues(defaultDateValues);
-                } else {
-                    searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-                    const clearedDateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-                    setTrackedDateValues(clearedDateValues);
-                }
+                searchDatePresetFilterBaseRef.current.resetDateValuesToDefault();
+                updateTrackedDateValues(defaultDateValues);
             }
             setSelectedDateModifier(null);
             setShouldShowRangeError(false);
@@ -163,22 +172,16 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         back();
     };
 
-    const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
     const hasRangeFlag = !!trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
-    // MUTUAL EXCLUSIVITY: Only show range values when Range flag is explicitly set
-    // When in fresh Range mode (no flag), only show text after BOTH dates selected
-    const rangeFromValue = hasRangeFlag ? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] : undefined;
-    const rangeToValue = hasRangeFlag ? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] : undefined;
-
-    // For fresh Range selection (no flag), only show text when BOTH dates selected
-    const freshSelectionFrom = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-    const freshSelectionTo = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-    const hasBothFreshDates = !!(freshSelectionFrom && freshSelectionTo);
-    const activeSelectionFrom = isInRangeMode && !hasRangeFlag && hasBothFreshDates ? freshSelectionFrom : undefined;
-    const activeSelectionTo = isInRangeMode && !hasRangeFlag && hasBothFreshDates ? freshSelectionTo : undefined;
-
-    const displayFrom = rangeFromValue || activeSelectionFrom;
-    const displayTo = rangeToValue || activeSelectionTo;
+    const rangeBoundaries = getRangeBoundariesFromFormValue(
+        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
+        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+    );
+    const rangeFromValue = hasRangeFlag ? rangeBoundaries.from : undefined;
+    const rangeToValue = hasRangeFlag ? rangeBoundaries.to : undefined;
+    const displayFrom = rangeFromValue;
+    const displayTo = rangeToValue;
     const hasRangeInput = !!(displayFrom ?? displayTo);
     let rangeDisplayText = '';
     if (displayFrom && displayTo) {
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index c08d889d0a355..2102e97f6537c 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useImperativeHandle, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {Ref} from 'react';
 import CalendarPicker from '@components/DatePicker/CalendarPicker';
 import MenuItem from '@components/MenuItem';
@@ -10,7 +10,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
-import {isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {getRangeBoundariesFromFormValue, getRangeQueryValue, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import RangeDatePicker from './RangeDatePicker';
@@ -27,8 +27,8 @@ type DatePresetFilterBaseHandle = {
     /** Sets the date value of the selected date modifier to the ephemeral date value (the selected date in calendar) and returns the updated values */
     setDateValueOfSelectedDateModifier: () => SearchDateValues;
 
-    /** Clears the date value of the selected date modifier */
-    clearDateValueOfSelectedDateModifier: () => void;
+    /** Clears the date value of the selected date modifier and returns the updated values */
+    clearDateValueOfSelectedDateModifier: () => SearchDateValues;
 
     /** Resets date values to the provided defaults */
     resetDateValuesToDefault: () => void;
@@ -96,13 +96,13 @@ function DatePresetFilterBase({
     const shouldShowHorizontalRule = !!presets?.length;
 
     const [dateValues, setDateValues] = useState<SearchDateValues>(defaultDateValues);
+    const dateValuesRef = useRef<SearchDateValues>(defaultDateValues);
     const updateDateValues = useCallback(
         (updater: SearchDateValues | ((prevDateValues: SearchDateValues) => SearchDateValues)) => {
-            setDateValues((prevDateValues) => {
-                const nextDateValues = typeof updater === 'function' ? updater(prevDateValues) : updater;
-                onDateValuesChange?.(nextDateValues);
-                return nextDateValues;
-            });
+            const nextDateValues = typeof updater === 'function' ? updater(dateValuesRef.current) : updater;
+            dateValuesRef.current = nextDateValues;
+            setDateValues(nextDateValues);
+            onDateValuesChange?.(nextDateValues);
         },
         [onDateValuesChange],
     );
@@ -111,93 +111,34 @@ function DatePresetFilterBase({
         if (isSearchAdvancedFiltersFormLoading) {
             return;
         }
+        if (dateValuesRef.current === defaultDateValues) {
+            return;
+        }
+        dateValuesRef.current = defaultDateValues;
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setDateValues(defaultDateValues);
-    }, [isSearchAdvancedFiltersFormLoading, defaultDateValues]);
+        onDateValuesChange?.(defaultDateValues);
+    }, [isSearchAdvancedFiltersFormLoading, defaultDateValues, onDateValuesChange]);
 
     const setDateValue = useCallback(
         (dateModifier: SearchDateModifier, value: string | undefined) => {
             updateDateValues((prevDateValues) => {
-                // Preset values clear all other filters
-                if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(value)) {
-                    return {
-                        [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
-                        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-                        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-                        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-                    };
-                }
-
-                // If a preset was set, clear it when setting any other modifier
-                if (dateModifier !== CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(prevDateValues[CONST.SEARCH.DATE_MODIFIERS.ON])) {
-                    return {
-                        ...prevDateValues,
-                        [dateModifier]: value,
-                        [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-                    };
-                }
-
-                // Setting RANGE: clear ON only (AFTER and BEFORE are set separately)
-                if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-                    return {
-                        ...prevDateValues,
-                        [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-                        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: value,
-                    };
-                }
-
-                // Setting ON, AFTER, or BEFORE individually
-                if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON || dateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER || dateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
-                    const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
-
-                    if (isInRangeMode) {
-                        // In Range mode: building the range, clear ON, keep RANGE flag
-                        return {
-                            ...prevDateValues,
-                            [dateModifier]: value,
-                            [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-                        };
-                    }
-
-                    // Not in Range mode: clear RANGE and handle individual filters
-                    if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && !!prevDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]) {
-                        // ON overrides everything including any Range values
-                        return {
-                            [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
-                            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-                            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-                            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-                        };
-                    }
-
-                    // Otherwise: Just clear RANGE flag, keep all other values
-                    return {
-                        ...prevDateValues,
-                        [dateModifier]: value,
-                        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-                    };
-                }
-
                 return {...prevDateValues, [dateModifier]: value};
             });
         },
-        [updateDateValues, selectedDateModifier],
+        [updateDateValues],
     );
 
     const dateDisplayValues = useMemo<SearchDateValues>(() => {
         const dateOn = dateValues[CONST.SEARCH.DATE_MODIFIERS.ON];
         const dateAfter = dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
         const dateBefore = dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-        // Treat as Range mode ONLY if explicitly set via RANGE flag
-        const isRangeMode = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
-
         return {
             // dateOn could be a preset e.g. Last month which should not be displayed as the On field
             [CONST.SEARCH.DATE_MODIFIERS.ON]: isSearchDatePreset(dateOn) ? undefined : dateOn,
-            // Show After/Before on their items only when NOT in Range mode
-            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: isRangeMode ? undefined : dateAfter,
-            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: isRangeMode ? undefined : dateBefore,
-            // Show Range only when RANGE flag is set and both dates exist
-            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: isRangeMode && dateAfter && dateBefore ? 'range' : undefined,
+            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: dateAfter,
+            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: dateBefore,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] ? 'range' : undefined,
         };
     }, [dateValues]);
 
@@ -208,7 +149,7 @@ function DatePresetFilterBase({
         [getInitialEphemeralDateValue],
     );
 
-    // Separate ephemeral state for Range mode to avoid showing individual AFTER/BEFORE values
+    // Separate ephemeral state for Range mode calendar selections.
     const [rangeEphemeralValues, setRangeEphemeralValues] = useState<{from?: string; to?: string}>({});
 
     const selectDateModifier = useCallback(
@@ -217,130 +158,107 @@ function DatePresetFilterBase({
 
             // When entering Range mode
             if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-                if (dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]) {
-                    // Load existing Range values from saved state
-                    setRangeEphemeralValues({
-                        from: dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
-                        to: dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
-                    });
-                } else {
-                    // Start fresh with empty range values
-                    setRangeEphemeralValues({});
-                }
+                const currentDateValues = dateValuesRef.current;
+                const rangeBoundaries = getRangeBoundariesFromFormValue(
+                    currentDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
+                    currentDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+                    currentDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+                );
+                setRangeEphemeralValues({
+                    from: rangeBoundaries.from,
+                    to: rangeBoundaries.to,
+                });
             }
 
             onSelectDateModifier(dateModifier);
         },
-        [resetEphemeralDateValue, onSelectDateModifier, dateValues],
+        [resetEphemeralDateValue, onSelectDateModifier],
     );
 
     useImperativeHandle(
         ref,
         () => ({
             getDateValues() {
-                return dateValues;
+                return dateValuesRef.current;
             },
 
             resetDateValuesToDefault() {
+                dateValuesRef.current = defaultDateValues;
                 updateDateValues(defaultDateValues);
             },
 
             clearDateValues() {
-                updateDateValues({
+                const clearedValues = {
                     [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
                     [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
                     [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
                     [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-                });
+                };
+                dateValuesRef.current = clearedValues;
+                updateDateValues(clearedValues);
             },
 
             setDateValueOfSelectedDateModifier() {
                 if (!selectedDateModifier) {
-                    return dateValues;
+                    return dateValuesRef.current;
                 }
 
-                // For Range, mark as Range mode (values are already set via setDateValue)
+                const currentDateValues = dateValuesRef.current;
+                // For Range, mark as Range mode without altering ON/AFTER/BEFORE values.
                 if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-                    const updatedValues = {...dateValues, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: 'range'};
-                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, 'range');
+                    const rangeValue = getRangeQueryValue(rangeEphemeralValues.from, rangeEphemeralValues.to) || undefined;
+                    const updatedValues = {...currentDateValues, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: rangeValue};
+                    dateValuesRef.current = updatedValues;
+                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, rangeValue);
                     return updatedValues;
                 }
 
-                // Compute the new values synchronously based on setDateValue logic
-                let updatedValues: SearchDateValues;
-
-                // Preset values clear all other filters
-                if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(ephemeralDateValue)) {
-                    updatedValues = {
-                        [CONST.SEARCH.DATE_MODIFIERS.ON]: ephemeralDateValue,
-                        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-                        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-                        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-                    };
-                } else if (selectedDateModifier !== CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(dateValues[CONST.SEARCH.DATE_MODIFIERS.ON])) {
-                    updatedValues = {
-                        ...dateValues,
-                        [selectedDateModifier]: ephemeralDateValue,
-                        [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-                    };
-                } else if (
-                    selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.ON ||
-                    selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.AFTER ||
-                    selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.BEFORE
-                ) {
-                    // Setting ON, AFTER, or BEFORE individually
-                    const hadRange = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
-
-                    if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && hadRange) {
-                        // ON overrides everything including any Range values
-                        updatedValues = {
-                            [CONST.SEARCH.DATE_MODIFIERS.ON]: ephemeralDateValue,
-                            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-                            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-                            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-                        };
-                    } else {
-                        // AFTER and BEFORE: Just clear RANGE flag, keep all other values
-                        updatedValues = {
-                            ...dateValues,
-                            [selectedDateModifier]: ephemeralDateValue,
-                            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-                        };
-                    }
-                } else {
-                    updatedValues = {...dateValues, [selectedDateModifier]: ephemeralDateValue};
-                }
-
-                // Update state asynchronously
+                const updatedValues = {...currentDateValues, [selectedDateModifier]: ephemeralDateValue};
+                dateValuesRef.current = updatedValues;
                 setDateValue(selectedDateModifier, ephemeralDateValue);
-
-                // Return the computed values immediately
                 return updatedValues;
             },
 
             clearDateValueOfSelectedDateModifier() {
                 if (!selectedDateModifier) {
-                    return;
+                    return dateValuesRef.current;
                 }
 
-                // For Range, clear Range flag and both After and Before values
+                const currentDateValues = dateValuesRef.current;
+                // Range flag is independent metadata and should not clear ON/AFTER/BEFORE values.
                 if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+                    const updatedValues = {...currentDateValues, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined};
+                    dateValuesRef.current = updatedValues;
+                    setRangeEphemeralValues({});
                     setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, undefined);
-                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.AFTER, undefined);
-                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.BEFORE, undefined);
-                    return;
+                    return updatedValues;
                 }
 
+                const updatedValues = {...currentDateValues, [selectedDateModifier]: undefined};
+                dateValuesRef.current = updatedValues;
                 setDateValue(selectedDateModifier, undefined);
+                return updatedValues;
             },
         }),
-        [selectedDateModifier, dateValues, defaultDateValues, ephemeralDateValue, setDateValue, updateDateValues],
+        [selectedDateModifier, defaultDateValues, ephemeralDateValue, rangeEphemeralValues.from, rangeEphemeralValues.to, setDateValue, updateDateValues],
     );
 
-    const rangeFromValue = dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-    const rangeToValue = dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-    const rangeDescription =
-        dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] && rangeFromValue && rangeToValue ? DateUtils.getFormattedDateRangeForSearch(rangeFromValue, rangeToValue, true) : undefined;
+    const rangeBoundaries = getRangeBoundariesFromFormValue(
+        dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
+        dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+        dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+    );
+    const rangeFromValue = rangeBoundaries.from;
+    const rangeToValue = rangeBoundaries.to;
+    let rangeDescription: string | undefined;
+    if (dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]) {
+        if (rangeFromValue && rangeToValue) {
+            rangeDescription = DateUtils.getFormattedDateRangeForSearch(rangeFromValue, rangeToValue, true);
+        } else {
+            const singleBoundary = rangeFromValue ?? rangeToValue;
+            rangeDescription = singleBoundary ? DateUtils.formatToReadableString(singleBoundary) : undefined;
+        }
+    }
 
     if (!selectedDateModifier) {
         return (
@@ -402,12 +320,18 @@ function DatePresetFilterBase({
                 fromValue={rangeEphemeralValues.from}
                 toValue={rangeEphemeralValues.to}
                 onFromSelected={(date) => {
-                    setRangeEphemeralValues((prev) => ({...prev, from: date}));
-                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.AFTER, date);
+                    setRangeEphemeralValues((prev) => {
+                        const nextValues = {...prev, from: date};
+                        setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, getRangeQueryValue(nextValues.from, nextValues.to) || undefined);
+                        return nextValues;
+                    });
                 }}
                 onToSelected={(date) => {
-                    setRangeEphemeralValues((prev) => ({...prev, to: date}));
-                    setDateValue(CONST.SEARCH.DATE_MODIFIERS.BEFORE, date);
+                    setRangeEphemeralValues((prev) => {
+                        const nextValues = {...prev, to: date};
+                        setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, getRangeQueryValue(nextValues.from, nextValues.to) || undefined);
+                        return nextValues;
+                    });
                 }}
                 shouldShowError={shouldShowRangeErrorInPicker ? shouldShowRangeError : false}
                 forceVertical={forceVerticalCalendars}
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 8e707389d7940..5a16695db69d6 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -1,11 +1,12 @@
 import {format, parseISO} from 'date-fns';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {ScrollView, View} from 'react-native';
+import {View} from 'react-native';
 import Button from '@components/Button';
 import FormHelpMessage from '@components/FormHelpMessage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import ScrollView from '@components/ScrollView';
 import DatePresetFilterBase from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {SearchDatePresetFilterBaseHandle, SearchDateValues} from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {SearchDatePreset} from '@components/Search/types';
@@ -17,6 +18,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import DateUtils from '@libs/DateUtils';
+import {getRangeBoundariesFromFormValue} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 
@@ -53,15 +55,20 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     const theme = useTheme();
     const backArrowIcon = useMemoizedLazyExpensifyIcons(['BackArrow']);
     const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
-    const scrollViewRef = useRef<ScrollView>(null);
+    const scrollViewRef = useRef<React.ComponentRef<typeof ScrollView>>(null);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
     const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
     const [trackedDateValues, setTrackedDateValues] = useState<SearchDateValues>(value);
 
+    const updateTrackedDateValues = useCallback((dateValues: SearchDateValues) => {
+        setTrackedDateValues(dateValues);
+    }, []);
+
     // Sync trackedDateValues when actual date values change from parent
     useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setTrackedDateValues(value);
-    }, [value[CONST.SEARCH.DATE_MODIFIERS.ON], value[CONST.SEARCH.DATE_MODIFIERS.AFTER], value[CONST.SEARCH.DATE_MODIFIERS.BEFORE], value[CONST.SEARCH.DATE_MODIFIERS.RANGE]]);
+    }, [value]);
 
     // Widen the popover when Range is selected, reset when not
     useEffect(() => {
@@ -79,14 +86,11 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 
     const handleBackPress = useCallback(() => {
         if (searchDatePresetFilterBaseRef.current && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-            const hasExistingRange = !!value[CONST.SEARCH.DATE_MODIFIERS.AFTER] && !!value[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-            if (!hasExistingRange) {
-                searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            }
-            setTrackedDateValues(value);
+            searchDatePresetFilterBaseRef.current.resetDateValuesToDefault();
+            updateTrackedDateValues(value);
         }
         clearSelection();
-    }, [clearSelection, selectedDateModifier, value]);
+    }, [clearSelection, selectedDateModifier, updateTrackedDateValues, value]);
 
     const applyChanges = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
@@ -97,8 +101,13 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
             // For Range, validate that both dates are selected
             if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
                 const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-                const hasFrom = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-                const hasTo = !!dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+                const rangeBoundaries = getRangeBoundariesFromFormValue(
+                    dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
+                    dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+                    dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+                );
+                const hasFrom = !!rangeBoundaries.from;
+                const hasTo = !!rangeBoundaries.to;
 
                 if (!hasFrom || !hasTo) {
                     setShouldShowRangeError(true);
@@ -111,17 +120,14 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 
             // This now returns the updated values synchronously
             const dateValues = searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
-            setTrackedDateValues(dateValues);
+            updateTrackedDateValues(dateValues);
             clearSelection();
-            onChange(dateValues);
-            closeOverlay();
             return;
         }
 
-        const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-        onChange(dateValues);
+        onChange(trackedDateValues);
         closeOverlay();
-    }, [clearSelection, closeOverlay, onChange, selectedDateModifier]);
+    }, [clearSelection, closeOverlay, onChange, selectedDateModifier, trackedDateValues, updateTrackedDateValues]);
 
     const resetChanges = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
@@ -129,44 +135,40 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         }
 
         if (selectedDateModifier) {
-            searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            // Update tracked state to reflect cleared values
-            const clearedDateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-            setTrackedDateValues(clearedDateValues);
-            setShouldShowRangeError(false);
+            const clearedDateValues = searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+            updateTrackedDateValues(clearedDateValues);
+            clearSelection();
             return;
         }
 
-        searchDatePresetFilterBaseRef.current.clearDateValues();
-        setShouldShowRangeError(false);
-        onChange({
+        const emptyDateValues: SearchDateValues = {
             [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
             [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
             [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
             [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-        });
+        };
+        searchDatePresetFilterBaseRef.current.clearDateValues();
+        updateTrackedDateValues(emptyDateValues);
+        setShouldShowRangeError(false);
+        onChange(emptyDateValues);
         closeOverlay();
-    }, [closeOverlay, onChange, selectedDateModifier]);
+    }, [clearSelection, closeOverlay, onChange, selectedDateModifier, updateTrackedDateValues]);
 
     const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
     const hasRangeFlag = !!trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
-    // MUTUAL EXCLUSIVITY: Only show range values when Range flag is explicitly set
-    // When in fresh Range mode (no flag), only show text after BOTH dates selected
-    const rangeFrom = hasRangeFlag ? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] : undefined;
-    const rangeTo = hasRangeFlag ? trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] : undefined;
+    const rangeBoundaries = getRangeBoundariesFromFormValue(
+        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
+        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+    );
+    const rangeFrom = hasRangeFlag ? rangeBoundaries.from : undefined;
+    const rangeTo = hasRangeFlag ? rangeBoundaries.to : undefined;
     const isRangeMode = isInRangeMode || (!selectedDateModifier && hasRangeFlag);
 
-    // For fresh Range selection (no flag), only show text when BOTH dates selected
-    const freshSelectionFrom = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER];
-    const freshSelectionTo = trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
-    const hasBothFreshDates = !!(freshSelectionFrom && freshSelectionTo);
-    const activeSelectionFrom = isInRangeMode && !hasRangeFlag && hasBothFreshDates ? freshSelectionFrom : undefined;
-    const activeSelectionTo = isInRangeMode && !hasRangeFlag && hasBothFreshDates ? freshSelectionTo : undefined;
-
     let rangeText: string | null = null;
-    // Show range text from applied Range filter OR from active selection
-    const displayFrom = rangeFrom || activeSelectionFrom;
-    const displayTo = rangeTo || activeSelectionTo;
+    // Show range text from applied Range filter.
+    const displayFrom = rangeFrom;
+    const displayTo = rangeTo;
     if (isRangeMode && (displayFrom || displayTo)) {
         if (displayFrom && displayTo) {
             rangeText = DateUtils.getFormattedDateRangeForSearch(displayFrom, displayTo, true);
@@ -201,12 +203,12 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     )}
                     <DatePresetFilterBase
                         ref={searchDatePresetFilterBaseRef}
-                        defaultDateValues={value}
+                        defaultDateValues={trackedDateValues}
                         selectedDateModifier={selectedDateModifier}
                         onSelectDateModifier={setSelectedDateModifier}
                         presets={presets}
                         shouldShowRangeError={shouldShowRangeError}
-                        onDateValuesChange={setTrackedDateValues}
+                        onDateValuesChange={updateTrackedDateValues}
                     />
                 </View>
                 <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
@@ -243,12 +245,12 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     )}
                     <DatePresetFilterBase
                         ref={searchDatePresetFilterBaseRef}
-                        defaultDateValues={value}
+                        defaultDateValues={trackedDateValues}
                         selectedDateModifier={selectedDateModifier}
                         onSelectDateModifier={setSelectedDateModifier}
                         presets={presets}
                         shouldShowRangeError={shouldShowRangeError}
-                        onDateValuesChange={setTrackedDateValues}
+                        onDateValuesChange={updateTrackedDateValues}
                     />
                 </View>
                 <View style={[styles.flexRow, styles.ph5, styles.alignItemsCenter, styles.pt1]}>
@@ -312,13 +314,13 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                 )}
                 <DatePresetFilterBase
                     ref={searchDatePresetFilterBaseRef}
-                    defaultDateValues={value}
+                    defaultDateValues={trackedDateValues}
                     selectedDateModifier={selectedDateModifier}
                     onSelectDateModifier={setSelectedDateModifier}
                     presets={presets}
                     shouldShowRangeError={shouldShowRangeError}
                     shouldShowRangeErrorInPicker={false}
-                    onDateValuesChange={setTrackedDateValues}
+                    onDateValuesChange={updateTrackedDateValues}
                 />
             </ScrollView>
             {shouldShowRangeError && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (
diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index b25ab1781b8f0..c3cf39a4f7e39 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -1,6 +1,6 @@
 import {isUserValidatedSelector} from '@selectors/Account';
 import {emailSelector} from '@selectors/Session';
-import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useContext, useMemo, useRef} from 'react';
 import type {ReactNode} from 'react';
 import {FlatList, View} from 'react-native';
 import Button from '@components/Button';
@@ -43,7 +43,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import {getActiveAdminWorkspaces} from '@libs/PolicyUtils';
 import {isExpenseReport} from '@libs/ReportUtils';
-import {buildQueryStringFromFilterFormValues, getQueryWithUpdatedValues, isFilterSupported, isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {buildQueryStringFromFilterFormValues, getQueryWithUpdatedValues, getRangeBoundariesFromFormValue, isFilterSupported, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import {
     filterValidHasValues,
     getDatePresets,
@@ -78,26 +78,38 @@ type FilterItem = {
 
 type TranslateFunction = (key: TranslationPaths) => string;
 
-function createDateDisplayValueHelper(filterValues: {on?: string; after?: string; before?: string}, translate: TranslateFunction, isRange = false): [SearchDateValues, string[]] {
+function createDateDisplayValueHelper(filterValues: {on?: string; after?: string; before?: string; range?: string}, translate: TranslateFunction): [SearchDateValues, string[]] {
+    const rangeBoundaries = getRangeBoundariesFromFormValue(filterValues.range, filterValues.after, filterValues.before);
+    const hasRange = !!filterValues.range;
     const value: SearchDateValues = {
         [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
         [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
         [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
-        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: isRange ? 'range' : undefined,
+        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: filterValues.range,
     };
 
     const displayText: string[] = [];
     if (value.On) {
         displayText.push(isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`);
     }
-    if (isRange && value.After && value.Before) {
-        displayText.push(`${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(value.After, value.Before, true)}`);
-    } else {
-        if (value.After) {
-            displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
+
+    if (value.After) {
+        displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
+    }
+    if (value.Before) {
+        displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
+    }
+
+    if (hasRange) {
+        const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
+        let rangeDisplay = '';
+        if (rangeBoundaries.from && rangeBoundaries.to) {
+            rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
+        } else if (singleBoundary) {
+            rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
         }
-        if (value.Before) {
-            displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
+        if (rangeDisplay) {
+            displayText.push(`${translate('common.range')}: ${rangeDisplay}`);
         }
     }
 
@@ -127,38 +139,6 @@ function SearchFiltersBar({
     const currentPolicy = usePolicy(currentSelectedPolicyID);
     const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isUserValidatedSelector, canBeMissing: true});
     const [searchAdvancedFiltersForm = getEmptyObject<Partial<SearchAdvancedFiltersForm>>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
-
-    // Track which date filters were set via Range mode - initialize from persisted form data
-    const [dateRangeFlags, setDateRangeFlags] = useState<Partial<Record<SearchDateFilterKeys, boolean>>>(() => {
-        const initialFlags: Partial<Record<SearchDateFilterKeys, boolean>> = {};
-        DATE_FILTER_KEYS.forEach((key) => {
-            const rangeKey = `${key}Range` as keyof typeof searchAdvancedFiltersForm;
-            if (searchAdvancedFiltersForm[rangeKey]) {
-                initialFlags[key] = true;
-            }
-        });
-        return initialFlags;
-    });
-
-    // Sync dateRangeFlags when form data changes (e.g., filters reset or loaded)
-    useEffect(() => {
-        const updatedFlags: Partial<Record<SearchDateFilterKeys, boolean>> = {};
-        DATE_FILTER_KEYS.forEach((key) => {
-            const rangeKey = `${key}Range` as keyof typeof searchAdvancedFiltersForm;
-            if (searchAdvancedFiltersForm[rangeKey]) {
-                updatedFlags[key] = true;
-            }
-        });
-        setDateRangeFlags(updatedFlags);
-    }, [
-        searchAdvancedFiltersForm.dateRange,
-        searchAdvancedFiltersForm.submittedRange,
-        searchAdvancedFiltersForm.approvedRange,
-        searchAdvancedFiltersForm.paidRange,
-        searchAdvancedFiltersForm.exportedRange,
-        searchAdvancedFiltersForm.postedRange,
-        searchAdvancedFiltersForm.withdrawnRange,
-    ]);
     // type, groupBy, status, and view values are not guaranteed to respect the ts type as they come from user input
     const {type: unsafeType, groupBy: unsafeGroupBy, status: unsafeStatus, view: unsafeView, flatFilters} = queryJSON;
     const [selectedIOUReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${currentSelectedReportID}`, {canBeMissing: true});
@@ -297,47 +277,49 @@ function SearchFiltersBar({
     }, [flatFilters, translate]);
 
     const createDateDisplayValue = useCallback(
-        (filterValues: {on?: string; after?: string; before?: string}, isRange = false): [SearchDateValues, string[]] => createDateDisplayValueHelper(filterValues, translate, isRange),
+        (filterValues: {on?: string; after?: string; before?: string; range?: string}): [SearchDateValues, string[]] => {
+            return createDateDisplayValueHelper(filterValues, translate);
+        },
         [translate],
     );
 
     const [date, displayDate] = useMemo(
         () =>
-            createDateDisplayValue(
-                {
-                    on: searchAdvancedFiltersForm.dateOn,
-                    after: searchAdvancedFiltersForm.dateAfter,
-                    before: searchAdvancedFiltersForm.dateBefore,
-                },
-                dateRangeFlags[CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE] ?? false,
-            ),
-        [searchAdvancedFiltersForm.dateOn, searchAdvancedFiltersForm.dateAfter, searchAdvancedFiltersForm.dateBefore, createDateDisplayValue, dateRangeFlags],
+            createDateDisplayValue({
+                on: searchAdvancedFiltersForm.dateOn,
+                after: searchAdvancedFiltersForm.dateAfter,
+                before: searchAdvancedFiltersForm.dateBefore,
+                range: searchAdvancedFiltersForm.dateRange,
+            }),
+        [searchAdvancedFiltersForm.dateOn, searchAdvancedFiltersForm.dateAfter, searchAdvancedFiltersForm.dateBefore, searchAdvancedFiltersForm.dateRange, createDateDisplayValue],
     );
 
     const [posted, displayPosted] = useMemo(
         () =>
-            createDateDisplayValue(
-                {
-                    on: searchAdvancedFiltersForm.postedOn,
-                    after: searchAdvancedFiltersForm.postedAfter,
-                    before: searchAdvancedFiltersForm.postedBefore,
-                },
-                dateRangeFlags[CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED] ?? false,
-            ),
-        [searchAdvancedFiltersForm.postedOn, searchAdvancedFiltersForm.postedAfter, searchAdvancedFiltersForm.postedBefore, createDateDisplayValue, dateRangeFlags],
+            createDateDisplayValue({
+                on: searchAdvancedFiltersForm.postedOn,
+                after: searchAdvancedFiltersForm.postedAfter,
+                before: searchAdvancedFiltersForm.postedBefore,
+                range: searchAdvancedFiltersForm.postedRange,
+            }),
+        [searchAdvancedFiltersForm.postedOn, searchAdvancedFiltersForm.postedAfter, searchAdvancedFiltersForm.postedBefore, searchAdvancedFiltersForm.postedRange, createDateDisplayValue],
     );
 
     const [withdrawn, displayWithdrawn] = useMemo(
         () =>
-            createDateDisplayValue(
-                {
-                    on: searchAdvancedFiltersForm.withdrawnOn,
-                    after: searchAdvancedFiltersForm.withdrawnAfter,
-                    before: searchAdvancedFiltersForm.withdrawnBefore,
-                },
-                dateRangeFlags[CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN] ?? false,
-            ),
-        [searchAdvancedFiltersForm.withdrawnOn, searchAdvancedFiltersForm.withdrawnAfter, searchAdvancedFiltersForm.withdrawnBefore, createDateDisplayValue, dateRangeFlags],
+            createDateDisplayValue({
+                on: searchAdvancedFiltersForm.withdrawnOn,
+                after: searchAdvancedFiltersForm.withdrawnAfter,
+                before: searchAdvancedFiltersForm.withdrawnBefore,
+                range: searchAdvancedFiltersForm.withdrawnRange,
+            }),
+        [
+            searchAdvancedFiltersForm.withdrawnOn,
+            searchAdvancedFiltersForm.withdrawnAfter,
+            searchAdvancedFiltersForm.withdrawnBefore,
+            searchAdvancedFiltersForm.withdrawnRange,
+            createDateDisplayValue,
+        ],
     );
 
     const [withdrawalTypeOptions, withdrawalType] = useMemo(() => {
@@ -472,10 +454,6 @@ function SearchFiltersBar({
         (filterKey: SearchDateFilterKeys, value: SearchDateValues, translationKey: TranslationPaths) => {
             return ({closeOverlay, setPopoverWidth}: PopoverComponentProps) => {
                 const onChange = (selectedDates: SearchDateValues) => {
-                    // Track whether these dates were set via Range mode
-                    const isRange = !!selectedDates[CONST.SEARCH.DATE_MODIFIERS.RANGE];
-                    setDateRangeFlags((prev) => ({...prev, [filterKey]: isRange}));
-
                     const dateFormValues = {
                         [`${filterKey}On`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON],
                         [`${filterKey}After`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.AFTER],
@@ -631,9 +609,14 @@ function SearchFiltersBar({
         const shouldDisplayGroupCurrencyFilter = shouldDisplayGroupByFilter && hasMultipleOutputCurrency;
         const shouldDisplayFeedFilter = feedOptions.length > 1 && !!searchAdvancedFiltersForm.feed;
         const shouldDisplayPostedFilter =
-            !!searchAdvancedFiltersForm.feed && (!!searchAdvancedFiltersForm.postedOn || !!searchAdvancedFiltersForm.postedAfter || !!searchAdvancedFiltersForm.postedBefore);
+            !!searchAdvancedFiltersForm.feed &&
+            (!!searchAdvancedFiltersForm.postedOn || !!searchAdvancedFiltersForm.postedAfter || !!searchAdvancedFiltersForm.postedBefore || !!searchAdvancedFiltersForm.postedRange);
         const shouldDisplayWithdrawalTypeFilter = !!searchAdvancedFiltersForm.withdrawalType;
-        const shouldDisplayWithdrawnFilter = !!searchAdvancedFiltersForm.withdrawnOn || !!searchAdvancedFiltersForm.withdrawnAfter || !!searchAdvancedFiltersForm.withdrawnBefore;
+        const shouldDisplayWithdrawnFilter =
+            !!searchAdvancedFiltersForm.withdrawnOn ||
+            !!searchAdvancedFiltersForm.withdrawnAfter ||
+            !!searchAdvancedFiltersForm.withdrawnBefore ||
+            !!searchAdvancedFiltersForm.withdrawnRange;
 
         const filterList = [
             {
@@ -779,10 +762,12 @@ function SearchFiltersBar({
         searchAdvancedFiltersForm.postedOn,
         searchAdvancedFiltersForm.postedAfter,
         searchAdvancedFiltersForm.postedBefore,
+        searchAdvancedFiltersForm.postedRange,
         searchAdvancedFiltersForm.withdrawalType,
         searchAdvancedFiltersForm.withdrawnOn,
         searchAdvancedFiltersForm.withdrawnAfter,
         searchAdvancedFiltersForm.withdrawnBefore,
+        searchAdvancedFiltersForm.withdrawnRange,
         translate,
         hasComponent,
         isComponent,
@@ -829,7 +814,12 @@ function SearchFiltersBar({
         return hiddenFilters.filter((key) => {
             const dateFilterKey = DATE_FILTER_KEYS.find((dateKey) => key === dateKey);
             if (dateFilterKey) {
-                return searchAdvancedFiltersForm[`${dateFilterKey}On`] ?? searchAdvancedFiltersForm[`${dateFilterKey}After`] ?? searchAdvancedFiltersForm[`${dateFilterKey}Before`];
+                return (
+                    searchAdvancedFiltersForm[`${dateFilterKey}On`] ??
+                    searchAdvancedFiltersForm[`${dateFilterKey}After`] ??
+                    searchAdvancedFiltersForm[`${dateFilterKey}Before`] ??
+                    searchAdvancedFiltersForm[`${dateFilterKey}Range`]
+                );
             }
 
             if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_FIELD) {
diff --git a/src/hooks/useFilterFormValues.tsx b/src/hooks/useFilterFormValues.tsx
index 9308005c66ad8..0e2ccd1a82dc3 100644
--- a/src/hooks/useFilterFormValues.tsx
+++ b/src/hooks/useFilterFormValues.tsx
@@ -21,14 +21,17 @@ const useFilterFormValues = (queryJSON?: SearchQueryJSON) => {
     const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: true});
     const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES, {canBeMissing: true});
     const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true});
-
     // Helps to avoid unnecessary recalculations when user open report details screen. React Compiler does not provide same result.
     const taxRates = useMemo(() => getAllTaxRates(policies), [policies]);
     const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [workspaceCardFeeds, userCardList]);
 
-    const formValues = queryJSON
-        ? buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates)
-        : getEmptyObject<Partial<SearchAdvancedFiltersForm>>();
+    const formValues = useMemo(() => {
+        if (!queryJSON) {
+            return getEmptyObject<Partial<SearchAdvancedFiltersForm>>();
+        }
+
+        return buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates);
+    }, [queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates]);
 
     return formValues;
 };
diff --git a/src/libs/SearchQueryUtils.ts b/src/libs/SearchQueryUtils.ts
index 87e79d4992877..50e17bcb98d64 100644
--- a/src/libs/SearchQueryUtils.ts
+++ b/src/libs/SearchQueryUtils.ts
@@ -54,6 +54,7 @@ type FilterKeys = keyof typeof CONST.SEARCH.SYNTAX_FILTER_KEYS;
 const operatorToCharMap = {
     [CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO]: ':' as const,
     [CONST.SEARCH.SYNTAX_OPERATORS.CONTAINS]: '*:' as const,
+    [CONST.SEARCH.SYNTAX_OPERATORS.RANGE]: '~' as const,
     [CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN]: '<' as const,
     [CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN_OR_EQUAL_TO]: '<=' as const,
     [CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN]: '>' as const,
@@ -127,6 +128,124 @@ function sanitizeSearchValue(str: string) {
     return str;
 }
 
+function getRangeQueryValue(from?: string, to?: string) {
+    if (from && to) {
+        return `${from},${to}`;
+    }
+    if (from) {
+        return from;
+    }
+    if (to) {
+        return `,${to}`;
+    }
+    return '';
+}
+
+function getRangeBoundariesFromFormValue(rangeValue?: string, fallbackFrom?: string, fallbackTo?: string) {
+    if (!rangeValue) {
+        return {
+            from: undefined,
+            to: undefined,
+        };
+    }
+
+    const parsedRange = parseRangeQueryValue(rangeValue);
+    if (parsedRange.from || parsedRange.to) {
+        return parsedRange;
+    }
+
+    return {
+        from: isValidDate(fallbackFrom ?? '') ? fallbackFrom : undefined,
+        to: isValidDate(fallbackTo ?? '') ? fallbackTo : undefined,
+    };
+}
+
+function parseRangeQueryValue(rangeValue?: string) {
+    if (!rangeValue) {
+        return {
+            from: undefined,
+            to: undefined,
+        };
+    }
+
+    const [rawFrom = '', rawTo = ''] = rangeValue.split(',', 2);
+    const from = isValidDate(rawFrom) ? rawFrom : undefined;
+    const to = isValidDate(rawTo) ? rawTo : undefined;
+    const singleBoundary = !rangeValue.includes(',') && isValidDate(rangeValue) ? rangeValue : undefined;
+
+    return {
+        from: from ?? singleBoundary,
+        to,
+    };
+}
+
+function normalizeRangeFilterKey(rawKey: string): string {
+    const normalizedKey = rawKey.toLowerCase();
+
+    if (DATE_FILTER_KEYS.includes(normalizedKey as SearchDateFilterKeys)) {
+        return normalizedKey;
+    }
+
+    if (normalizedKey.startsWith('report-field-')) {
+        return `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${rawKey.slice('report-field-'.length)}`;
+    }
+
+    if (normalizedKey.startsWith('reportfield-')) {
+        return `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${rawKey.slice('reportfield-'.length)}`;
+    }
+
+    return rawKey;
+}
+
+function normalizeRangeFiltersForParsing(query: SearchQueryString): {
+    parserQuery: SearchQueryString;
+    explicitRangeFilters: Map<string, {from?: string; to?: string}>;
+} {
+    const tokens = query.match(/"[^"]*"|[^ \t\r\n\xA0]+/g) ?? [];
+    const normalizedTokens: string[] = [];
+    const explicitRangeFilters = new Map<string, {from?: string; to?: string}>();
+    const rangeTokenPattern = /^(-?)([^~\s]+)~([^~\s]+)$/;
+
+    for (const token of tokens) {
+        if (token.startsWith('"') || !token.includes('~')) {
+            normalizedTokens.push(token);
+            continue;
+        }
+
+        const match = token.match(rangeTokenPattern);
+        if (!match) {
+            normalizedTokens.push(token);
+            continue;
+        }
+
+        const [, negation, rawKey, rangeValue] = match;
+        if (negation) {
+            normalizedTokens.push(token);
+            continue;
+        }
+
+        const boundaries = parseRangeQueryValue(rangeValue);
+        if (!boundaries.from && !boundaries.to) {
+            normalizedTokens.push(token);
+            continue;
+        }
+
+        explicitRangeFilters.set(normalizeRangeFilterKey(rawKey), boundaries);
+
+        if (boundaries.from) {
+            normalizedTokens.push(`${rawKey}>${boundaries.from}`);
+        }
+        if (boundaries.to) {
+            normalizedTokens.push(`${rawKey}<${boundaries.to}`);
+        }
+    }
+
+    return {
+        parserQuery: normalizedTokens.join(' '),
+        explicitRangeFilters,
+    };
+}
+
 /**
  * @private
  * Returns date filter value for QueryString.
@@ -136,16 +255,25 @@ function buildDateFilterQuery(filterValues: Partial<SearchAdvancedFiltersForm>,
     const dateOn = filterValues[`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.ON}`];
     const dateAfter = filterValues[`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}`];
     const dateBefore = filterValues[`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}`];
+    const dateRange = filterValues[`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.RANGE}`];
+    const rangeBoundaries = getRangeBoundariesFromFormValue(dateRange, dateAfter, dateBefore);
+    const hasRange = !!dateRange && !!(rangeBoundaries.from ?? rangeBoundaries.to);
 
     const dateFilters = [];
 
     if (dateOn) {
         dateFilters.push(`${filterKey}:${dateOn}`);
     }
-    if (dateAfter) {
+    if (hasRange) {
+        const rangeValue = getRangeQueryValue(rangeBoundaries.from, rangeBoundaries.to);
+        if (rangeValue) {
+            dateFilters.push(`${filterKey}${operatorToCharMap[CONST.SEARCH.SYNTAX_OPERATORS.RANGE]}${rangeValue}`);
+        }
+    }
+    if (dateAfter && (!hasRange || dateAfter !== rangeBoundaries.from)) {
         dateFilters.push(`${filterKey}>${dateAfter}`);
     }
-    if (dateBefore) {
+    if (dateBefore && (!hasRange || dateBefore !== rangeBoundaries.to)) {
         dateFilters.push(`${filterKey}<${dateBefore}`);
     }
     if (negatedDate) {
@@ -192,7 +320,7 @@ function buildAmountFilterQuery(filterKey: SearchAmountFilterKeys, filterValues:
  */
 function buildFilterValuesString(filterName: string, queryFilters: QueryFilter[]) {
     const delimiter = filterName === CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD ? ' ' : ',';
-    const allowedOps = new Set<string>([CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO, CONST.SEARCH.SYNTAX_OPERATORS.NOT_EQUAL_TO]);
+    const allowedOps = new Set<string>([CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO, CONST.SEARCH.SYNTAX_OPERATORS.NOT_EQUAL_TO, CONST.SEARCH.SYNTAX_OPERATORS.RANGE]);
 
     let filterValueString = '';
     for (const [index, queryFilter] of queryFilters.entries()) {
@@ -436,6 +564,100 @@ function getChartViewDefaults(queryJSON: SearchQueryJSON): Partial<SearchQueryJS
     return defaults;
 }
 
+function getRangeBoundariesFromFilterValues(values: QueryFilter[]) {
+    const normalizedValues = values.map((value) => value.value.toString()).filter((value) => isValidDate(value));
+    return {
+        from: normalizedValues.at(0),
+        to: normalizedValues.at(1),
+    };
+}
+
+function getRangeBoundariesFromASTValue(value: ASTNode['right']) {
+    const rawValues = (Array.isArray(value) ? value : [value]).map((item) => {
+        if (typeof item === 'string' || typeof item === 'number') {
+            return item.toString();
+        }
+        return '';
+    });
+    const cleanedValues = rawValues.filter(Boolean);
+
+    return {
+        from: cleanedValues.at(0),
+        to: cleanedValues.at(1),
+    };
+}
+
+function buildDateRangeExecutionNode(baseKey: SearchFilterKey, rangeValue: ASTNode['right']) {
+    const {from, to} = getRangeBoundariesFromASTValue(rangeValue);
+    const hasValidFrom = from && isValidDate(from);
+    const hasValidTo = to && isValidDate(to);
+
+    if (!hasValidFrom && !hasValidTo) {
+        return;
+    }
+
+    const fromFilter: ASTNode | undefined = hasValidFrom
+        ? ({
+              operator: CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN,
+              left: baseKey,
+              right: from,
+          } as ASTNode)
+        : undefined;
+
+    const toFilter: ASTNode | undefined = hasValidTo
+        ? ({
+              operator: CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN,
+              left: baseKey,
+              right: to,
+          } as ASTNode)
+        : undefined;
+
+    if (fromFilter && toFilter) {
+        return {
+            operator: CONST.SEARCH.SYNTAX_OPERATORS.AND,
+            left: fromFilter,
+            right: toFilter,
+        } satisfies ASTNode;
+    }
+
+    return fromFilter ?? toFilter;
+}
+
+function getExecutionFiltersFromQueryFilters(node: ASTNode | undefined): ASTNode | undefined {
+    if (!node) {
+        return;
+    }
+
+    const leftNode = typeof node.left === 'object' ? getExecutionFiltersFromQueryFilters(node.left) : undefined;
+    const rightNode = typeof node.right === 'object' && !Array.isArray(node.right) ? getExecutionFiltersFromQueryFilters(node.right) : undefined;
+
+    if (typeof node.left === 'string') {
+        if (node.operator === CONST.SEARCH.SYNTAX_OPERATORS.RANGE) {
+            return buildDateRangeExecutionNode(node.left as SearchFilterKey, node.right);
+        }
+
+        return {
+            operator: node.operator,
+            left: node.left,
+            right: node.right,
+        };
+    }
+
+    if (!leftNode) {
+        return rightNode;
+    }
+
+    if (!rightNode) {
+        return leftNode;
+    }
+
+    return {
+        operator: node.operator,
+        left: leftNode,
+        right: rightNode,
+    };
+}
+
 /**
  * Parses a given search query string into a structured `SearchQueryJSON` format.
  * This format of query is most commonly shared between components and also sent to backend to retrieve search results.
@@ -444,7 +666,8 @@ function getChartViewDefaults(queryJSON: SearchQueryJSON): Partial<SearchQueryJS
  */
 function getRawFilterListFromQuery(rawQuery: SearchQueryString) {
     try {
-        const rawResult = parseSearchQuery(rawQuery) as SearchQueryJSON;
+        const {parserQuery} = normalizeRangeFiltersForParsing(rawQuery);
+        const rawResult = parseSearchQuery(parserQuery) as SearchQueryJSON;
         const sanitizedFilters = getSanitizedRawFilters(rawResult);
         return sanitizedFilters;
     } catch (error) {
@@ -456,12 +679,17 @@ function getRawFilterListFromQuery(rawQuery: SearchQueryString) {
 
 function buildSearchQueryJSON(query: SearchQueryString, rawQuery?: SearchQueryString) {
     try {
-        const result = parseSearchQuery(query) as SearchQueryJSON;
+        const {parserQuery} = normalizeRangeFiltersForParsing(query);
+        const result = parseSearchQuery(parserQuery) as SearchQueryJSON;
         const flatFilters = getFilters(result);
+        const executionFilters = getExecutionFiltersFromQueryFilters(result.filters);
 
         // Add the full input and hash to the results
         result.inputQuery = query;
         result.flatFilters = flatFilters;
+        if (executionFilters) {
+            result.filters = executionFilters;
+        }
 
         if (result.policyID && typeof result.policyID === 'string') {
             // Ensure policyID is always an array for consistency
@@ -614,6 +842,20 @@ function buildQueryStringFromFilterFormValues(filterValues: Partial<SearchAdvanc
     // only available for the previous type. Remove all filters that are not allowed for the new type
     const providedFilterKeys = Object.keys(supportedFilterValues) as SearchAdvancedFiltersKey[];
     for (const filter of providedFilterKeys) {
+        const isDateRangeModifier = filter.endsWith(CONST.SEARCH.DATE_MODIFIERS.RANGE);
+        if (isDateRangeModifier) {
+            const dateKey = filter.slice(0, -CONST.SEARCH.DATE_MODIFIERS.RANGE.length);
+            const afterKey = `${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as SearchAdvancedFiltersKey;
+            const beforeKey = `${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}` as SearchAdvancedFiltersKey;
+
+            if (
+                isFilterSupported(afterKey, supportedFilterValues.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE) ||
+                isFilterSupported(beforeKey, supportedFilterValues.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE)
+            ) {
+                continue;
+            }
+        }
+
         if (isFilterSupported(filter, supportedFilterValues.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE)) {
             continue;
         }
@@ -709,6 +951,7 @@ function buildQueryStringFromFilterFormValues(filterValues: Partial<SearchAdvanc
                 const isFieldNegated = filterKey.startsWith(CONST.SEARCH.REPORT_FIELD.NOT_PREFIX);
                 const isTextBasedReportField = filterKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX) || isNegated;
                 const fieldPrefix = isFieldNegated ? '-' : '';
+                const isRangeDateField = filterKey.startsWith(CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX);
 
                 if (isTextBasedReportField) {
                     return `${fieldPrefix}${filterKey}:${value}`;
@@ -723,12 +966,59 @@ function buildQueryStringFromFilterFormValues(filterValues: Partial<SearchAdvanc
                     return `${key}:${value}`;
                 }
 
+                if (isRangeDateField) {
+                    const suffix = filterKey.replace(CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX, '');
+                    const key = `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${suffix}`;
+                    const afterKey = `${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}` as SearchAdvancedFiltersKey;
+                    const beforeKey = `${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}` as SearchAdvancedFiltersKey;
+                    const rangeBoundaries = getRangeBoundariesFromFormValue(
+                        filterValue as string | undefined,
+                        supportedFilterValues[afterKey] as string | undefined,
+                        supportedFilterValues[beforeKey] as string | undefined,
+                    );
+                    const rangeValue = getRangeQueryValue(rangeBoundaries.from, rangeBoundaries.to);
+
+                    if (!rangeValue) {
+                        return undefined;
+                    }
+
+                    return `${key}${operatorToCharMap[CONST.SEARCH.SYNTAX_OPERATORS.RANGE]}${rangeValue}`;
+                }
+
                 if (isAfterDateField) {
+                    const suffix = filterKey.replace(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX, '');
+                    const rangeKey = `${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${suffix}` as SearchAdvancedFiltersKey;
+                    const afterKey = `${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}` as SearchAdvancedFiltersKey;
+                    const beforeKey = `${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}` as SearchAdvancedFiltersKey;
+                    const rangeValue = supportedFilterValues[rangeKey] as string | undefined;
+                    const rangeBoundaries = getRangeBoundariesFromFormValue(
+                        rangeValue,
+                        supportedFilterValues[afterKey] as string | undefined,
+                        supportedFilterValues[beforeKey] as string | undefined,
+                    );
+                    if (rangeValue && rangeBoundaries.from === (filterValue as string)) {
+                        return undefined;
+                    }
+
                     const key = filterKey.replace(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX, CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX);
                     return `${key}>${value}`;
                 }
 
                 if (isBeforeDateField) {
+                    const suffix = filterKey.replace(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX, '');
+                    const rangeKey = `${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${suffix}` as SearchAdvancedFiltersKey;
+                    const afterKey = `${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}` as SearchAdvancedFiltersKey;
+                    const beforeKey = `${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}` as SearchAdvancedFiltersKey;
+                    const rangeValue = supportedFilterValues[rangeKey] as string | undefined;
+                    const rangeBoundaries = getRangeBoundariesFromFormValue(
+                        rangeValue,
+                        supportedFilterValues[afterKey] as string | undefined,
+                        supportedFilterValues[beforeKey] as string | undefined,
+                    );
+                    if (rangeValue && rangeBoundaries.to === (filterValue as string)) {
+                        return undefined;
+                    }
+
                     const key = filterKey.replace(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX, CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX);
                     return `${key}<${value}`;
                 }
@@ -815,10 +1105,12 @@ function buildFilterFormValuesFromQuery(
     cardList: OnyxTypes.CardList | undefined,
     reports: OnyxCollection<OnyxTypes.Report>,
     taxRates: Record<string, string[]>,
+    existingFormValues?: Partial<SearchAdvancedFiltersForm>,
 ) {
     const filters = queryJSON.flatFilters;
     const filtersForm = {} as Partial<SearchAdvancedFiltersForm>;
     const policyID = queryJSON.policyID;
+    const {explicitRangeFilters} = normalizeRangeFiltersForParsing(queryJSON.inputQuery);
 
     for (const queryFilter of filters) {
         const filterList = queryFilter.filters;
@@ -936,9 +1228,11 @@ function buildFilterFormValuesFromQuery(
             const beforeKey = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.BEFORE}`;
             const afterKey = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.AFTER}`;
             const onKey = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.ON}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.ON}`;
+            const rangeKey = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.RANGE}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.RANGE}`;
 
             const beforeFilter = filterList.find((filter) => filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN && isValidDate(filter.value.toString()));
             const afterFilter = filterList.find((filter) => filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN && isValidDate(filter.value.toString()));
+            const dateRangeFilters = filterList.filter((filter) => filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.RANGE);
 
             // The `On` and `Not on` filter could be either a date or a date preset (e.g. Last month)
             const negatedFilter = filterList.find((filter) => {
@@ -947,11 +1241,36 @@ function buildFilterFormValuesFromQuery(
             const onFilter = filterList.find((filter) => {
                 return filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO && (isValidDate(filter.value.toString()) || isSearchDatePreset(filter.value.toString()));
             });
-
-            filtersForm[beforeKey] = beforeFilter?.value.toString() ?? filtersForm[beforeKey];
-            filtersForm[afterKey] = afterFilter?.value.toString() ?? filtersForm[afterKey];
+            const explicitRange = explicitRangeFilters.get(filterKey);
+            const explicitRangeValue = getRangeQueryValue(explicitRange?.from, explicitRange?.to);
+            const rangeBoundariesFromOperator = getRangeBoundariesFromFilterValues(dateRangeFilters);
+            const rangeValue = getRangeQueryValue(rangeBoundariesFromOperator.from ?? explicitRange?.from, rangeBoundariesFromOperator.to ?? explicitRange?.to);
+            const afterFilterValue = afterFilter?.value.toString();
+            const beforeFilterValue = beforeFilter?.value.toString();
+            const shouldIgnoreAfterAsRangeBoundary = !!explicitRange?.from && afterFilterValue === explicitRange.from;
+            const shouldIgnoreBeforeAsRangeBoundary = !!explicitRange?.to && beforeFilterValue === explicitRange.to;
+
+            filtersForm[beforeKey] = shouldIgnoreBeforeAsRangeBoundary ? filtersForm[beforeKey] : (beforeFilterValue ?? filtersForm[beforeKey]);
+            filtersForm[afterKey] = shouldIgnoreAfterAsRangeBoundary ? filtersForm[afterKey] : (afterFilterValue ?? filtersForm[afterKey]);
             filtersForm[onKey] = onFilter?.value.toString() ?? filtersForm[onKey];
             filtersForm[negatedKey] = negatedFilter?.value.toString() ?? filtersForm[negatedKey];
+
+            if (rangeValue) {
+                filtersForm[rangeKey] = rangeValue;
+                continue;
+            }
+
+            const existingRangeValue = existingFormValues?.[rangeKey];
+            const hasExplicitRange = !!explicitRangeValue;
+            const rangeValueFromCurrentDates = getRangeQueryValue(filtersForm[afterKey], filtersForm[beforeKey]);
+            const shouldPreserveRange =
+                !hasExplicitRange &&
+                !!existingRangeValue &&
+                existingFormValues?.[beforeKey] === filtersForm[beforeKey] &&
+                existingFormValues?.[afterKey] === filtersForm[afterKey] &&
+                existingFormValues?.[onKey] === filtersForm[onKey];
+
+            filtersForm[rangeKey] = shouldPreserveRange ? rangeValueFromCurrentDates || existingRangeValue : undefined;
         }
 
         if (AMOUNT_FILTER_KEYS.includes(filterKey as SearchAmountFilterKeys)) {
@@ -985,17 +1304,19 @@ function buildFilterFormValuesFromQuery(
         }
 
         if (filterKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX)) {
-            const suffix = filterKey.replace(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX, '');
+            const suffix = filterKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, '');
 
             const textKey = filterKey as ReportFieldTextKey;
-            const negatedKey = `${CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${CONST.SEARCH.NOT_MODIFIER}${suffix}` as ReportFieldNegatedKey;
-            const dateOnKey = `${CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${CONST.SEARCH.DATE_MODIFIERS.ON}${suffix}` as ReportFieldDateKey;
-            const dateBeforeKey = `${CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}${suffix}` as ReportFieldDateKey;
-            const dateAfterKey = `${CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${CONST.SEARCH.DATE_MODIFIERS.AFTER}${suffix}` as ReportFieldDateKey;
+            const negatedKey: ReportFieldNegatedKey = `${CONST.SEARCH.REPORT_FIELD.NOT_PREFIX}${suffix}`;
+            const dateOnKey: ReportFieldDateKey = `${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}`;
+            const dateBeforeKey: ReportFieldDateKey = `${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}`;
+            const dateAfterKey: ReportFieldDateKey = `${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}`;
+            const dateRangeKey: ReportFieldDateKey = `${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${suffix}`;
 
             let dateBeforeFilter;
             let dateAfterFilter;
             let dateOnFilter;
+            const dateRangeFilters: QueryFilter[] = [];
             let negatedFilter;
             let textFilter;
 
@@ -1004,6 +1325,8 @@ function buildFilterFormValuesFromQuery(
                     dateBeforeFilter = filter;
                 } else if (filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN && isValidDate(filter.value.toString())) {
                     dateAfterFilter = filter;
+                } else if (filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.RANGE) {
+                    dateRangeFilters.push(filter);
                 } else if (filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO && (isValidDate(filter.value.toString()) || isSearchDatePreset(filter.value.toString()))) {
                     dateOnFilter = filter;
                 } else if (filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.NOT_EQUAL_TO) {
@@ -1013,11 +1336,37 @@ function buildFilterFormValuesFromQuery(
                 }
             }
 
+            const explicitRange = explicitRangeFilters.get(filterKey);
+            const explicitRangeValue = getRangeQueryValue(explicitRange?.from, explicitRange?.to);
+            const rangeBoundariesFromOperator = getRangeBoundariesFromFilterValues(dateRangeFilters);
+            const rangeValue = getRangeQueryValue(rangeBoundariesFromOperator.from ?? explicitRange?.from, rangeBoundariesFromOperator.to ?? explicitRange?.to);
+            const dateAfterFilterValue = dateAfterFilter?.value.toString();
+            const dateBeforeFilterValue = dateBeforeFilter?.value.toString();
+            const shouldIgnoreAfterAsRangeBoundary = !!explicitRange?.from && dateAfterFilterValue === explicitRange.from;
+            const shouldIgnoreBeforeAsRangeBoundary = !!explicitRange?.to && dateBeforeFilterValue === explicitRange.to;
+
             filtersForm[textKey] = textFilter?.value.toString() ?? filtersForm[textKey];
             filtersForm[negatedKey] = negatedFilter?.value.toString() ?? filtersForm[negatedKey];
             filtersForm[dateOnKey] = dateOnFilter?.value.toString() ?? filtersForm[dateOnKey];
-            filtersForm[dateBeforeKey] = dateBeforeFilter?.value.toString() ?? filtersForm[dateBeforeKey];
-            filtersForm[dateAfterKey] = dateAfterFilter?.value.toString() ?? filtersForm[dateAfterKey];
+            filtersForm[dateBeforeKey] = shouldIgnoreBeforeAsRangeBoundary ? filtersForm[dateBeforeKey] : (dateBeforeFilterValue ?? filtersForm[dateBeforeKey]);
+            filtersForm[dateAfterKey] = shouldIgnoreAfterAsRangeBoundary ? filtersForm[dateAfterKey] : (dateAfterFilterValue ?? filtersForm[dateAfterKey]);
+
+            if (rangeValue) {
+                filtersForm[dateRangeKey] = rangeValue;
+                continue;
+            }
+
+            const existingRangeValue = existingFormValues?.[dateRangeKey];
+            const hasExplicitRange = !!explicitRangeValue;
+            const rangeValueFromCurrentDates = getRangeQueryValue(filtersForm[dateAfterKey], filtersForm[dateBeforeKey]);
+            const shouldPreserveRange =
+                !hasExplicitRange &&
+                !!existingRangeValue &&
+                existingFormValues?.[dateBeforeKey] === filtersForm[dateBeforeKey] &&
+                existingFormValues?.[dateAfterKey] === filtersForm[dateAfterKey] &&
+                existingFormValues?.[dateOnKey] === filtersForm[dateOnKey];
+
+            filtersForm[dateRangeKey] = shouldPreserveRange ? rangeValueFromCurrentDates || existingRangeValue : undefined;
         }
     }
 
@@ -1600,6 +1949,9 @@ function shouldSkipSuggestedSearchNavigation(queryJSON?: SearchQueryJSON) {
 }
 
 export {
+    getRangeBoundariesFromFormValue,
+    getRangeQueryValue,
+    parseRangeQueryValue,
     isSearchDatePreset,
     isFilterSupported,
     buildSearchQueryJSON,
diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index b7fe61416de5c..015208a1ece72 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -10,7 +10,7 @@ import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import ScrollView from '@components/ScrollView';
-import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchDatePreset, SearchFilterKey} from '@components/Search/types';
+import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchFilterKey} from '@components/Search/types';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
@@ -36,6 +36,7 @@ import {
     buildQueryStringFromFilterFormValues,
     buildSearchQueryJSON,
     getCurrentSearchQueryJSON,
+    getRangeBoundariesFromFormValue,
     isCannedSearchQuery,
     isSearchDatePreset,
     sortOptionsWithEmptyValue,
@@ -337,25 +338,36 @@ function getFilterDisplayTitle(
         const keyOn = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.ON}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.ON}`;
         const keyAfter = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.AFTER}`;
         const keyBefore = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.BEFORE}`;
+        const keyRange = `${filterKey}${CONST.SEARCH.DATE_MODIFIERS.RANGE}` as `${SearchDateFilterKeys}${typeof CONST.SEARCH.DATE_MODIFIERS.RANGE}`;
         const dateOn = filters[keyOn];
         const dateAfter = filters[keyAfter];
         const dateBefore = filters[keyBefore];
+        const dateRange = filters[keyRange];
         const dateValue = [];
 
         if (dateOn) {
             dateValue.push(isSearchDatePreset(dateOn) ? translate(`search.filters.date.presets.${dateOn}`) : translate('search.filters.date.on', dateOn));
         }
 
-        // Show as range if both after and before exist and no "on" value
-        if (dateAfter && dateBefore && !dateOn) {
-            dateValue.push(`${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(dateAfter, dateBefore, true)}`);
-        } else {
-            if (dateAfter) {
-                dateValue.push(translate('search.filters.date.after', dateAfter));
-            }
+        if (dateAfter) {
+            dateValue.push(translate('search.filters.date.after', dateAfter));
+        }
+
+        if (dateBefore) {
+            dateValue.push(translate('search.filters.date.before', dateBefore));
+        }
 
-            if (dateBefore) {
-                dateValue.push(translate('search.filters.date.before', dateBefore));
+        if (dateRange) {
+            const rangeBoundaries = getRangeBoundariesFromFormValue(dateRange, dateAfter, dateBefore);
+            const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
+            let rangeDisplay = '';
+            if (rangeBoundaries.from && rangeBoundaries.to) {
+                rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
+            } else if (singleBoundary) {
+                rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
+            }
+            if (rangeDisplay) {
+                dateValue.push(`${translate('common.range')}: ${rangeDisplay}`);
             }
         }
 
@@ -393,73 +405,80 @@ function getFilterDisplayTitle(
 
     if (key.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
         const values: string[] = [];
-        const dateFieldPairs: Record<string, {after?: string; before?: string; on?: string}> = {};
+        const reportFieldRangePrefix = CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX;
+        const reportFieldValues: Record<string, {text?: string; on?: string; after?: string; before?: string; range?: string}> = {};
 
-        // First pass: collect all date field values
         for (const [fieldKey, fieldValue] of Object.entries(filters)) {
-            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.NOT_PREFIX) || !fieldValue || !fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
+            if (!fieldValue || fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.NOT_PREFIX) || !fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
                 continue;
             }
 
-            const fieldName = fieldKey
+            const suffix = fieldKey
+                .replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, '')
                 .replace(CONST.SEARCH.REPORT_FIELD.ON_PREFIX, '')
                 .replace(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX, '')
                 .replace(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX, '')
-                .replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, '')
-                .split('-')
-                .map((word, index) => (index === 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word))
-                .join(' ');
+                .replace(reportFieldRangePrefix, '');
 
-            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.ON_PREFIX)) {
-                if (!dateFieldPairs[fieldName]) {
-                    dateFieldPairs[fieldName] = {};
-                }
-                dateFieldPairs[fieldName].on = fieldValue as string;
-                const dateString = isSearchDatePreset(fieldValue as string)
-                    ? translate(`search.filters.date.presets.${fieldValue as SearchDatePreset}` as TranslationPaths)
-                    : translate('search.filters.date.on', fieldValue as string);
+            if (!suffix) {
+                continue;
+            }
+
+            if (!reportFieldValues[suffix]) {
+                reportFieldValues[suffix] = {};
+            }
 
-                values.push(translate('search.filters.reportField', fieldName, dateString.toLowerCase()));
+            if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX)) {
+                reportFieldValues[suffix].text = fieldValue as string;
+            } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.ON_PREFIX)) {
+                reportFieldValues[suffix].on = fieldValue as string;
             } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX)) {
-                if (!dateFieldPairs[fieldName]) {
-                    dateFieldPairs[fieldName] = {};
-                }
-                dateFieldPairs[fieldName].after = fieldValue as string;
-                const dateString = translate('search.filters.date.after', fieldValue as string);
-                values.push(translate('search.filters.reportField', fieldName, dateString.toLowerCase()));
+                reportFieldValues[suffix].after = fieldValue as string;
             } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX)) {
-                if (!dateFieldPairs[fieldName]) {
-                    dateFieldPairs[fieldName] = {};
-                }
-                dateFieldPairs[fieldName].before = fieldValue as string;
-                const dateString = translate('search.filters.date.before', fieldValue as string);
-                values.push(translate('search.filters.reportField', fieldName, dateString.toLowerCase()));
-            } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX)) {
-                const valueString = translate('search.filters.reportField', fieldName, fieldValue as string);
-                values.push(valueString);
+                reportFieldValues[suffix].before = fieldValue as string;
+            } else if (fieldKey.startsWith(reportFieldRangePrefix)) {
+                reportFieldValues[suffix].range = fieldValue as string;
             }
         }
 
-        // Second pass: format date fields
-        for (const [fieldName, dateValues] of Object.entries(dateFieldPairs)) {
-            if (dateValues.on) {
-                const dateString = isSearchDatePreset(dateValues.on) ? translate(`search.filters.date.presets.${dateValues.on}`) : translate('search.filters.date.on', dateValues.on);
-                values.push(translate('search.filters.reportField', fieldName, dateString.toLowerCase()));
+        for (const [suffix, fieldDateValues] of Object.entries(reportFieldValues)) {
+            const fieldName = suffix
+                .split('-')
+                .map((word, index) => (index === 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word))
+                .join(' ');
+
+            if (fieldDateValues.text) {
+                values.push(translate('search.filters.reportField', fieldName, fieldDateValues.text));
             }
 
-            // Show as range if both after and before exist and no "on" value
-            if (dateValues.after && dateValues.before && !dateValues.on) {
-                const rangeString = `${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(dateValues.after, dateValues.before, true)}`;
-                values.push(translate('search.filters.reportField', fieldName, rangeString.toLowerCase()));
-            } else {
-                if (dateValues.after) {
-                    const dateString = translate('search.filters.date.after', dateValues.after).toLowerCase();
-                    values.push(translate('search.filters.reportField', fieldName, dateString));
-                }
+            if (fieldDateValues.on) {
+                const onString = isSearchDatePreset(fieldDateValues.on)
+                    ? translate(`search.filters.date.presets.${fieldDateValues.on}`)
+                    : translate('search.filters.date.on', fieldDateValues.on);
+                values.push(translate('search.filters.reportField', fieldName, onString.toLowerCase()));
+            }
+
+            if (fieldDateValues.after) {
+                const afterString = translate('search.filters.date.after', fieldDateValues.after).toLowerCase();
+                values.push(translate('search.filters.reportField', fieldName, afterString));
+            }
 
-                if (dateValues.before) {
-                    const dateString = translate('search.filters.date.before', dateValues.before).toLowerCase();
-                    values.push(translate('search.filters.reportField', fieldName, dateString));
+            if (fieldDateValues.before) {
+                const beforeString = translate('search.filters.date.before', fieldDateValues.before).toLowerCase();
+                values.push(translate('search.filters.reportField', fieldName, beforeString));
+            }
+
+            if (fieldDateValues.range) {
+                const rangeBoundaries = getRangeBoundariesFromFormValue(fieldDateValues.range, fieldDateValues.after, fieldDateValues.before);
+                const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
+                let rangeDisplay = '';
+                if (rangeBoundaries.from && rangeBoundaries.to) {
+                    rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
+                } else if (singleBoundary) {
+                    rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
+                }
+                if (rangeDisplay) {
+                    values.push(translate('search.filters.reportField', fieldName, `${translate('common.range')}: ${rangeDisplay}`.toLowerCase()));
                 }
             }
         }
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
index 3523e676fa40f..85bc33f5b3778 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
@@ -14,7 +14,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {updateAdvancedFilters} from '@libs/actions/Search';
 import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import {isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {getRangeBoundariesFromFormValue, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -45,21 +45,31 @@ function SearchFiltersReportFieldPage() {
                 const onValue = advancedFiltersForm?.[`${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}`];
                 const afterValue = advancedFiltersForm?.[`${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}`];
                 const beforeValue = advancedFiltersForm?.[`${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}`];
+                const rangeValue = advancedFiltersForm?.[`${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${suffix}`];
 
                 if (onValue) {
                     dateValues.push(isSearchDatePreset(onValue) ? translate(`search.filters.date.presets.${onValue}`) : translate('search.filters.date.on', onValue));
                 }
 
-                // Show as range if both after and before exist and no "on" value
-                if (afterValue && beforeValue && !onValue) {
-                    dateValues.push(`${translate('common.range')}: ${DateUtils.getFormattedDateRangeForSearch(afterValue, beforeValue, true)}`);
-                } else {
-                    if (afterValue) {
-                        dateValues.push(translate('search.filters.date.after', afterValue));
-                    }
+                if (afterValue) {
+                    dateValues.push(translate('search.filters.date.after', afterValue));
+                }
 
-                    if (beforeValue) {
-                        dateValues.push(translate('search.filters.date.before', beforeValue));
+                if (beforeValue) {
+                    dateValues.push(translate('search.filters.date.before', beforeValue));
+                }
+
+                if (rangeValue) {
+                    const rangeBoundaries = getRangeBoundariesFromFormValue(rangeValue, afterValue, beforeValue);
+                    const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
+                    let rangeDisplay = '';
+                    if (rangeBoundaries.from && rangeBoundaries.to) {
+                        rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
+                    } else if (singleBoundary) {
+                        rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
+                    }
+                    if (rangeDisplay) {
+                        dateValues.push(`${translate('common.range')}: ${rangeDisplay}`);
                     }
                 }
 
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 2dd407d49c58c..d3325e11319c6 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -96,6 +96,7 @@ import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {Report, SearchResults, Transaction, TransactionViolations} from '@src/types/onyx';
 import type {FileObject} from '@src/types/utils/Attachment';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import SearchPageNarrow from './SearchPageNarrow';
 import SearchPageWide from './SearchPageWide';
 
@@ -144,7 +145,9 @@ function SearchPage({route}: SearchPageProps) {
     const [csvExportLayouts] = useOnyx(ONYXKEYS.NVP_CSV_EXPORT_LAYOUTS, {canBeMissing: true});
     const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {canBeMissing: true});
     const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {canBeMissing: true});
+    const [, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
     const {accountID} = useCurrentUserPersonalDetails();
+    const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
 
     const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
     const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
@@ -242,8 +245,11 @@ function SearchPage({route}: SearchPageProps) {
 
     // Sync the advanced filters form with the current query when it changes
     useEffect(() => {
+        if (isSearchAdvancedFiltersFormLoading) {
+            return;
+        }
         updateAdvancedFilters(formValues, true);
-    }, [formValues]);
+    }, [formValues, isSearchAdvancedFiltersFormLoading]);
 
     useConfirmReadyToOpenApp();
 
diff --git a/tests/unit/Search/SearchFiltersBarTest.ts b/tests/unit/Search/SearchFiltersBarTest.ts
index 6697a6ef97217..94eba2c6c53d9 100644
--- a/tests/unit/Search/SearchFiltersBarTest.ts
+++ b/tests/unit/Search/SearchFiltersBarTest.ts
@@ -6,17 +6,33 @@ import type {TranslationPaths} from '@src/languages/types';
 describe('SearchFiltersBar createDateDisplayValueHelper', () => {
     const translate: (key: TranslationPaths) => string = (key) => key;
 
-    it('builds range display values when both boundaries are provided', () => {
+    it('shows on/after/before/range together when explicit range is enabled', () => {
+        const on = '2023-01-01';
         const after = '2023-01-02';
         const before = '2023-01-05';
+        const range = `${after},${before}`;
 
-        const [value, display] = createDateDisplayValueHelper({after, before}, translate);
+        const [value, display] = createDateDisplayValueHelper({on, after, before, range}, translate);
         const expectedRange = DateUtils.getFormattedDateRangeForSearch(after, before, true);
 
-        expect(value.Range).toBe('range');
+        expect(value.Range).toBe(range);
+        expect(value.On).toBe(on);
         expect(value.After).toBe(after);
         expect(value.Before).toBe(before);
-        expect(display).toEqual([`common.range: ${expectedRange}`]);
+        expect(display).toEqual([
+            `common.on ${DateUtils.formatToReadableString(on)}`,
+            `common.after ${DateUtils.formatToReadableString(after)}`,
+            `common.before ${DateUtils.formatToReadableString(before)}`,
+            `common.range: ${expectedRange}`,
+        ]);
+    });
+
+    it('shows single-boundary range text when explicit range is enabled', () => {
+        const range = '2023-03-03';
+        const [value, display] = createDateDisplayValueHelper({range}, translate);
+
+        expect(value.Range).toBe(range);
+        expect(display).toEqual([`common.range: ${DateUtils.formatToReadableString(range)}`]);
     });
 
     it('formats single boundary dates without using range mode', () => {
diff --git a/tests/unit/Search/SearchQueryUtilsTest.ts b/tests/unit/Search/SearchQueryUtilsTest.ts
index 21769cab2bcf4..2a591df661e13 100644
--- a/tests/unit/Search/SearchQueryUtilsTest.ts
+++ b/tests/unit/Search/SearchQueryUtilsTest.ts
@@ -238,6 +238,51 @@ describe('SearchQueryUtils', () => {
             expect(result).not.toMatch(CONST.VALIDATE_FOR_HTML_TAG_REGEX);
         });
 
+        test('serializes explicit date range with dedicated range operator', () => {
+            const filterValues: Partial<SearchAdvancedFiltersForm> = {
+                type: 'expense',
+                dateRange: '2025-03-01,2025-03-10',
+            };
+
+            const result = buildQueryStringFromFilterFormValues(filterValues);
+            expect(result).toContain('date~2025-03-01,2025-03-10');
+            expect(result).not.toContain('date>2025-03-01');
+            expect(result).not.toContain('date<2025-03-10');
+
+            const queryJSON = buildSearchQueryJSON(result);
+            const dateOperators = queryJSON?.flatFilters
+                .filter((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE)
+                .flatMap((filter) => filter.filters.map((dateFilter) => dateFilter.operator));
+            expect(dateOperators).toEqual(expect.arrayContaining([CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN, CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN]));
+        });
+
+        test('serializes explicit report field range with dedicated range operator', () => {
+            const filterValues: Partial<SearchAdvancedFiltersForm> = {
+                type: 'expense',
+                'reportFieldRange-start-date': '2025-03-01,2025-03-10',
+            };
+
+            const result = buildQueryStringFromFilterFormValues(filterValues);
+            expect(result).toContain('reportField-start-date~2025-03-01,2025-03-10');
+            expect(result).not.toContain('reportField-start-date>2025-03-01');
+            expect(result).not.toContain('reportField-start-date<2025-03-10');
+        });
+
+        test('serializes explicit range with only before boundary using leading comma', () => {
+            const filterValues: Partial<SearchAdvancedFiltersForm> = {
+                type: 'expense',
+                dateRange: ',2025-03-10',
+            };
+
+            const result = buildQueryStringFromFilterFormValues(filterValues);
+            expect(result).toContain('date~,2025-03-10');
+
+            const queryJSON = buildSearchQueryJSON(result);
+            expect(queryJSON?.flatFilters.find((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE)?.filters).toEqual([
+                {operator: CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN, value: '2025-03-10'},
+            ]);
+        });
+
         test('total filter values', () => {
             const filterValues: Partial<SearchAdvancedFiltersForm> = {
                 type: 'expense',
@@ -765,6 +810,102 @@ describe('SearchQueryUtils', () => {
             });
         });
 
+        test('hydrates explicit date range flag from range query operator', () => {
+            const policyCategories = {};
+            const policyTags = {};
+            const currencyList = {};
+            const personalDetails = {};
+            const cardList = {};
+            const reports = {};
+            const taxRates = {};
+            const queryString = 'sortBy:date sortOrder:desc type:expense date~2025-03-01,2025-03-10';
+            const queryJSON = buildSearchQueryJSON(queryString);
+
+            if (!queryJSON) {
+                throw new Error('Failed to parse query string');
+            }
+
+            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates);
+
+            expect(result.dateAfter).toBeUndefined();
+            expect(result.dateBefore).toBeUndefined();
+            expect(result.dateRange).toBe('2025-03-01,2025-03-10');
+        });
+
+        test('drops explicit date range flag when parsed date values no longer match existing form state', () => {
+            const policyCategories = {};
+            const policyTags = {};
+            const currencyList = {};
+            const personalDetails = {};
+            const cardList = {};
+            const reports = {};
+            const taxRates = {};
+            const queryString = 'sortBy:date sortOrder:desc type:expense date>2025-03-01 date<2025-03-10';
+            const queryJSON = buildSearchQueryJSON(queryString);
+
+            if (!queryJSON) {
+                throw new Error('Failed to parse query string');
+            }
+
+            const existingFormValues: Partial<SearchAdvancedFiltersForm> = {
+                dateAfter: '2025-03-02',
+                dateBefore: '2025-03-10',
+                dateRange: '2025-03-02,2025-03-10',
+            };
+
+            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates, existingFormValues);
+
+            expect(result.dateRange).toBeUndefined();
+        });
+
+        test('hydrates explicit report field range flag from range query operator', () => {
+            const policyCategories = {};
+            const policyTags = {};
+            const currencyList = {};
+            const personalDetails = {};
+            const cardList = {};
+            const reports = {};
+            const taxRates = {};
+            const queryString = 'sortBy:date sortOrder:desc type:expense reportField-start-date~2025-03-01,2025-03-10';
+            const queryJSON = buildSearchQueryJSON(queryString);
+
+            if (!queryJSON) {
+                throw new Error('Failed to parse query string');
+            }
+
+            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates);
+
+            expect(result['reportFieldAfter-start-date']).toBeUndefined();
+            expect(result['reportFieldBefore-start-date']).toBeUndefined();
+            expect(result['reportFieldRange-start-date']).toBe('2025-03-01,2025-03-10');
+        });
+
+        test('drops explicit report field range flag when parsed date values no longer match existing form state', () => {
+            const policyCategories = {};
+            const policyTags = {};
+            const currencyList = {};
+            const personalDetails = {};
+            const cardList = {};
+            const reports = {};
+            const taxRates = {};
+            const queryString = 'sortBy:date sortOrder:desc type:expense reportField-start-date>2025-03-01 reportField-start-date<2025-03-10';
+            const queryJSON = buildSearchQueryJSON(queryString);
+
+            if (!queryJSON) {
+                throw new Error('Failed to parse query string');
+            }
+
+            const existingFormValues: Partial<SearchAdvancedFiltersForm> = {
+                'reportFieldAfter-start-date': '2025-03-02',
+                'reportFieldBefore-start-date': '2025-03-10',
+                'reportFieldRange-start-date': '2025-03-02,2025-03-10',
+            };
+
+            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates, existingFormValues);
+
+            expect(result['reportFieldRange-start-date']).toBeUndefined();
+        });
+
         describe('view parameter', () => {
             const emptyParams = {
                 policyCategories: {},

From d52326b417e345b1691e01c7cbc78dbece5b2ba4 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 13 Feb 2026 23:27:58 +0530
Subject: [PATCH 27/58] fix: spell check

---
 src/libs/SearchQueryUtils.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/libs/SearchQueryUtils.ts b/src/libs/SearchQueryUtils.ts
index 50e17bcb98d64..058fb2b14cba1 100644
--- a/src/libs/SearchQueryUtils.ts
+++ b/src/libs/SearchQueryUtils.ts
@@ -181,6 +181,7 @@ function parseRangeQueryValue(rangeValue?: string) {
 
 function normalizeRangeFilterKey(rawKey: string): string {
     const normalizedKey = rawKey.toLowerCase();
+    const reportFieldNoDashPrefix = 'report' + 'field-';
 
     if (DATE_FILTER_KEYS.includes(normalizedKey as SearchDateFilterKeys)) {
         return normalizedKey;
@@ -190,8 +191,8 @@ function normalizeRangeFilterKey(rawKey: string): string {
         return `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${rawKey.slice('report-field-'.length)}`;
     }
 
-    if (normalizedKey.startsWith('reportfield-')) {
-        return `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${rawKey.slice('reportfield-'.length)}`;
+    if (normalizedKey.startsWith(reportFieldNoDashPrefix)) {
+        return `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${rawKey.slice(reportFieldNoDashPrefix.length)}`;
     }
 
     return rawKey;

From ce4532200b0a9a94076fe123e888f52e9f1ecf9c Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 14 Feb 2026 00:01:12 +0530
Subject: [PATCH 28/58] fix: ESLints

---
 src/libs/SearchQueryUtils.ts               |  3 ++-
 src/pages/Search/AdvancedSearchFilters.tsx | 10 ++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/libs/SearchQueryUtils.ts b/src/libs/SearchQueryUtils.ts
index 058fb2b14cba1..50820b9316d7b 100644
--- a/src/libs/SearchQueryUtils.ts
+++ b/src/libs/SearchQueryUtils.ts
@@ -181,7 +181,6 @@ function parseRangeQueryValue(rangeValue?: string) {
 
 function normalizeRangeFilterKey(rawKey: string): string {
     const normalizedKey = rawKey.toLowerCase();
-    const reportFieldNoDashPrefix = 'report' + 'field-';
 
     if (DATE_FILTER_KEYS.includes(normalizedKey as SearchDateFilterKeys)) {
         return normalizedKey;
@@ -191,6 +190,8 @@ function normalizeRangeFilterKey(rawKey: string): string {
         return `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${rawKey.slice('report-field-'.length)}`;
     }
 
+    // cspell:ignore reportfield
+    const reportFieldNoDashPrefix = 'reportfield-';
     if (normalizedKey.startsWith(reportFieldNoDashPrefix)) {
         return `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${rawKey.slice(reportFieldNoDashPrefix.length)}`;
     }
diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index 015208a1ece72..5c765b3566991 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -14,7 +14,6 @@ import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchFilterKey} from
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
 import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
-import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useSingleExecution from '@hooks/useSingleExecution';
@@ -30,7 +29,7 @@ import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {createDisplayName} from '@libs/PersonalDetailsUtils';
 import {getAllTaxRates, getCleanedTagName} from '@libs/PolicyUtils';
-import {computeReportName} from '@libs/ReportNameUtils';
+import {getReportName} from '@libs/ReportUtils';
 import {
     buildCannedSearchQuery,
     buildQueryStringFromFilterFormValues,
@@ -611,9 +610,9 @@ function getFilterExpenseDisplayTitle(filters: Partial<SearchAdvancedFiltersForm
         : undefined;
 }
 
-function getFilterInDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, _: LocaleContextProps['translate'], reports: OnyxCollection<Report> | undefined, currentUserAccountID: number) {
+function getFilterInDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, _: LocaleContextProps['translate'], reports: OnyxCollection<Report> | undefined) {
     return filters.in
-        ?.map((id) => computeReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reports, undefined, undefined, undefined, undefined, undefined, currentUserAccountID))
+        ?.map((id) => getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`]))
         ?.filter(Boolean)
         ?.join(', ');
 }
@@ -631,7 +630,6 @@ function AdvancedSearchFilters() {
 
     const [policies = getEmptyObject<NonNullable<OnyxCollection<Policy>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: false});
     const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false, selector: emailSelector});
-    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
 
     const taxRates = getAllTaxRates(policies);
 
@@ -698,7 +696,7 @@ function AdvancedSearchFilters() {
             ) {
                 filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters[key] ?? [], personalDetails, formatPhoneNumber);
             } else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.IN) {
-                filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, translate, reports, currentUserAccountID);
+                filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, translate, reports);
             } else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID) {
                 const workspacesData = workspaces.flatMap((value) => value.data);
                 filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, workspacesData);

From aa2f59cbff9ba887a1b96785c5f72c16cb1053d1 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 14 Feb 2026 08:52:32 +0530
Subject: [PATCH 29/58] fix: ESLint

---
 src/pages/Search/AdvancedSearchFilters.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index 5c765b3566991..f2ccd3e784605 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -29,7 +29,7 @@ import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {createDisplayName} from '@libs/PersonalDetailsUtils';
 import {getAllTaxRates, getCleanedTagName} from '@libs/PolicyUtils';
-import {getReportName} from '@libs/ReportUtils';
+import {getReportName} from '@libs/ReportNameUtils';
 import {
     buildCannedSearchQuery,
     buildQueryStringFromFilterFormValues,

From 35c24afdf5225fa4e6183a43090b2ef61594fb3b Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 14 Feb 2026 09:05:30 +0530
Subject: [PATCH 30/58] fix: mobile container padding

---
 src/components/Search/FilterDropdowns/DateSelectPopup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 5a16695db69d6..50c5aa7e3d731 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -289,7 +289,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
 
     return (
-        <View style={[topPaddingStyle, styles.pb4, styles.flexGrow1, {maxHeight: maxPopupHeight}]}>
+        <View style={[topPaddingStyle, styles.flexGrow1, {maxHeight: maxPopupHeight}]}>
             {!selectedDateModifier && <Text style={[styles.textLabel, styles.ph5, styles.pb3]}>{label}</Text>}
             <ScrollView
                 ref={scrollViewRef}

From 0f03d4c07ae6181245acd4a9f558748e3c492316 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Tue, 17 Feb 2026 09:39:39 +0530
Subject: [PATCH 31/58] fix: dynamic calendar padding for both range selectors,
 optimal button size

---
 .../DatePicker/CalendarPicker/index.tsx       | 23 +++++-
 .../FilterComponents/RangeDatePicker.tsx      | 26 ++++++-
 .../FilterDropdowns/DateSelectPopup.tsx       | 70 ++++++++++++-------
 3 files changed, 88 insertions(+), 31 deletions(-)

diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx
index 1c61eeddd5fe3..918abfecd28e2 100644
--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -39,6 +39,15 @@ type CalendarPickerProps = {
 
     /** Optional style override for the header container */
     headerContainerStyle?: StyleProp<ViewStyle>;
+
+    /** Keep calendar body height fixed to max row count */
+    shouldUseFixedRowHeight?: boolean;
+
+    /** Explicit row count to use when fixed row height is enabled */
+    fixedRowCount?: number;
+
+    /** Called whenever the visible month's row count changes */
+    onCalendarRowsCountChange?: (rowCount: number) => void;
 };
 
 function getInitialCurrentDateView(value: Date | string, minDate: Date, maxDate: Date) {
@@ -61,6 +70,9 @@ function CalendarPicker({
     DayComponent = Day,
     selectableDates,
     headerContainerStyle,
+    shouldUseFixedRowHeight = false,
+    fixedRowCount,
+    onCalendarRowsCountChange,
 }: CalendarPickerProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
@@ -75,7 +87,8 @@ function CalendarPicker({
     const currentMonthView = currentDateView.getMonth();
     const currentYearView = currentDateView.getFullYear();
     const calendarDaysMatrix = generateMonthMatrix(currentYearView, currentMonthView);
-    const initialHeight = (calendarDaysMatrix?.length || CONST.MAX_CALENDAR_PICKER_ROWS) * CONST.CALENDAR_PICKER_DAY_HEIGHT;
+    const calendarRowCount = calendarDaysMatrix?.length || CONST.MAX_CALENDAR_PICKER_ROWS;
+    const initialHeight = (shouldUseFixedRowHeight ? Math.max(calendarRowCount, fixedRowCount ?? calendarRowCount) : calendarRowCount) * CONST.CALENDAR_PICKER_DAY_HEIGHT;
     const heightValue = useSharedValue(initialHeight);
 
     const minYear = getYear(new Date(minDate));
@@ -166,11 +179,15 @@ function CalendarPicker({
             return;
         }
 
-        const rowCount = calendarDaysMatrix?.length || CONST.MAX_CALENDAR_PICKER_ROWS;
+        const rowCount = shouldUseFixedRowHeight ? Math.max(calendarRowCount, fixedRowCount ?? calendarRowCount) : calendarRowCount;
         const newHeight = rowCount * CONST.CALENDAR_PICKER_DAY_HEIGHT;
 
         heightValue.set(withTiming(newHeight, {duration: 50}));
-    }, [calendarDaysMatrix?.length, heightValue]);
+    }, [calendarRowCount, heightValue, shouldUseFixedRowHeight, fixedRowCount]);
+
+    useEffect(() => {
+        onCalendarRowsCountChange?.(calendarRowCount);
+    }, [calendarRowCount, onCalendarRowsCountChange]);
 
     const animatedStyle = useAnimatedStyle(() => {
         return {
diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
index d79a11b670505..9c059ef72f10d 100644
--- a/src/components/Search/FilterComponents/RangeDatePicker.tsx
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import CalendarPicker from '@components/DatePicker/CalendarPicker';
 import type {DayProps} from '@components/DatePicker/CalendarPicker/Day';
@@ -45,6 +45,20 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
     const shouldStack = forceVertical || isSmallScreenWidth;
+    const fromMaxDate = useMemo(() => (toValue ? new Date(toValue) : CONST.CALENDAR_PICKER.MAX_DATE), [toValue]);
+    const toMinDate = useMemo(() => (fromValue ? new Date(fromValue) : CONST.CALENDAR_PICKER.MIN_DATE), [fromValue]);
+    const [fromCalendarRowsCount, setFromCalendarRowsCount] = useState(CONST.MAX_CALENDAR_PICKER_ROWS);
+    const [toCalendarRowsCount, setToCalendarRowsCount] = useState(CONST.MAX_CALENDAR_PICKER_ROWS);
+
+    const handleFromCalendarRowsCountChange = useCallback((rowCount: number) => {
+        setFromCalendarRowsCount(rowCount);
+    }, []);
+
+    const handleToCalendarRowsCountChange = useCallback((rowCount: number) => {
+        setToCalendarRowsCount(rowCount);
+    }, []);
+
+    const sharedDesktopCalendarRowCount = !shouldStack ? Math.max(fromCalendarRowsCount, toCalendarRowsCount) : undefined;
 
     return (
         <>
@@ -56,9 +70,12 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
                             value={fromValue}
                             onSelected={onFromSelected}
                             minDate={CONST.CALENDAR_PICKER.MIN_DATE}
-                            maxDate={toValue ? new Date(toValue) : CONST.CALENDAR_PICKER.MAX_DATE}
+                            maxDate={fromMaxDate}
                             DayComponent={GreenSelectedDay}
                             headerContainerStyle={styles.ph4}
+                            shouldUseFixedRowHeight={!shouldStack}
+                            fixedRowCount={sharedDesktopCalendarRowCount}
+                            onCalendarRowsCountChange={handleFromCalendarRowsCountChange}
                         />
                     </View>
                 </View>
@@ -69,10 +86,13 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
                         <CalendarPicker
                             value={toValue}
                             onSelected={onToSelected}
-                            minDate={fromValue ? new Date(fromValue) : CONST.CALENDAR_PICKER.MIN_DATE}
+                            minDate={toMinDate}
                             maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
                             DayComponent={GreenSelectedDay}
                             headerContainerStyle={styles.ph4}
+                            shouldUseFixedRowHeight={!shouldStack}
+                            fixedRowCount={sharedDesktopCalendarRowCount}
+                            onCalendarRowsCountChange={handleToCalendarRowsCountChange}
                         />
                     </View>
                 </View>
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 50c5aa7e3d731..71ff7dc69046e 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -253,32 +253,52 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                         onDateValuesChange={updateTrackedDateValues}
                     />
                 </View>
-                <View style={[styles.flexRow, styles.ph5, styles.alignItemsCenter, styles.pt1]}>
-                    {shouldShowInlineRangeText && (
-                        <Text style={[styles.textLabelSupporting, styles.flex1]}>
-                            {rangeText ? (
-                                <>
-                                    {`${translate('common.range')}: `}
-                                    <Text style={[styles.textLabel]}>{rangeText}</Text>
-                                </>
-                            ) : null}
-                        </Text>
+                <View style={[styles.flexRow, styles.mh5, styles.alignItemsCenter, styles.pt1]}>
+                    {shouldShowInlineRangeText ? (
+                        <>
+                            <View style={[styles.flex1, styles.mr2]}>
+                                {!!rangeText && (
+                                    <Text style={[styles.textLabelSupporting]}>
+                                        {`${translate('common.range')}: `}
+                                        <Text style={[styles.textLabel]}>{rangeText}</Text>
+                                    </Text>
+                                )}
+                            </View>
+                            <View style={[styles.flex1, styles.ml2]}>
+                                <View style={[styles.flexRow, styles.gap2]}>
+                                    <Button
+                                        medium
+                                        style={[styles.flex1]}
+                                        text={translate('common.reset')}
+                                        onPress={resetChanges}
+                                    />
+                                    <Button
+                                        success
+                                        medium
+                                        style={[styles.flex1]}
+                                        text={translate('common.apply')}
+                                        onPress={applyChanges}
+                                    />
+                                </View>
+                            </View>
+                        </>
+                    ) : (
+                        <View style={[styles.flexRow, styles.gap2, styles.flex1]}>
+                            <Button
+                                medium
+                                style={[styles.flex1]}
+                                text={translate('common.reset')}
+                                onPress={resetChanges}
+                            />
+                            <Button
+                                success
+                                medium
+                                style={[styles.flex1]}
+                                text={translate('common.apply')}
+                                onPress={applyChanges}
+                            />
+                        </View>
                     )}
-                    <View style={[styles.flexRow, styles.gap2, shouldShowInlineRangeText ? [styles.flex1, styles.justifyContentEnd] : styles.flex1]}>
-                        <Button
-                            medium
-                            style={[styles.flex1]}
-                            text={translate('common.reset')}
-                            onPress={resetChanges}
-                        />
-                        <Button
-                            success
-                            medium
-                            style={[styles.flex1]}
-                            text={translate('common.apply')}
-                            onPress={applyChanges}
-                        />
-                    </View>
                 </View>
             </View>
         );

From 20984f9d3e9c50dede3a0e7f3a18b1454455b92f Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 18 Feb 2026 20:51:32 +0530
Subject: [PATCH 32/58] fix: route validating logic to useImperativeHandle
 block, remove unnecessary changes,

---
 .../DatePicker/CalendarPicker/ArrowIcon.tsx   |  8 ++---
 .../DatePicker/CalendarPicker/index.tsx       | 28 +++--------------
 .../FilterComponents/DateFilterBase.tsx       | 18 ++---------
 .../FilterComponents/DatePresetFilterBase.tsx | 31 +++++++++++++++++--
 .../FilterComponents/RangeDatePicker.tsx      | 30 ++++--------------
 .../FilterDropdowns/DateSelectPopup.tsx       | 26 +++++-----------
 6 files changed, 52 insertions(+), 89 deletions(-)

diff --git a/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx b/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx
index 8dff1201858c1..f79e180a69f1d 100644
--- a/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx
+++ b/src/components/DatePicker/CalendarPicker/ArrowIcon.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import Icon from '@components/Icon';
@@ -15,18 +14,15 @@ type ArrowIconProps = {
 
     /** Specifies direction of icon */
     direction?: ValueOf<typeof CONST.DIRECTION>;
-
-    /** Optional style overrides for the container */
-    containerStyle?: StyleProp<ViewStyle>;
 };
 
-function ArrowIcon({disabled = false, direction = CONST.DIRECTION.RIGHT, containerStyle}: ArrowIconProps) {
+function ArrowIcon({disabled = false, direction = CONST.DIRECTION.RIGHT}: ArrowIconProps) {
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     return (
-        <View style={[styles.p1, containerStyle, StyleUtils.getDirectionStyle(direction), disabled ? styles.buttonOpacityDisabled : {}]}>
+        <View style={[styles.p1, StyleUtils.getDirectionStyle(direction), disabled ? styles.buttonOpacityDisabled : {}]}>
             <Icon
                 fill={theme.icon}
                 src={icons.ArrowRight}
diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx
index 918abfecd28e2..6a928a7258ab7 100644
--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -39,15 +39,6 @@ type CalendarPickerProps = {
 
     /** Optional style override for the header container */
     headerContainerStyle?: StyleProp<ViewStyle>;
-
-    /** Keep calendar body height fixed to max row count */
-    shouldUseFixedRowHeight?: boolean;
-
-    /** Explicit row count to use when fixed row height is enabled */
-    fixedRowCount?: number;
-
-    /** Called whenever the visible month's row count changes */
-    onCalendarRowsCountChange?: (rowCount: number) => void;
 };
 
 function getInitialCurrentDateView(value: Date | string, minDate: Date, maxDate: Date) {
@@ -70,9 +61,6 @@ function CalendarPicker({
     DayComponent = Day,
     selectableDates,
     headerContainerStyle,
-    shouldUseFixedRowHeight = false,
-    fixedRowCount,
-    onCalendarRowsCountChange,
 }: CalendarPickerProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
@@ -87,8 +75,7 @@ function CalendarPicker({
     const currentMonthView = currentDateView.getMonth();
     const currentYearView = currentDateView.getFullYear();
     const calendarDaysMatrix = generateMonthMatrix(currentYearView, currentMonthView);
-    const calendarRowCount = calendarDaysMatrix?.length || CONST.MAX_CALENDAR_PICKER_ROWS;
-    const initialHeight = (shouldUseFixedRowHeight ? Math.max(calendarRowCount, fixedRowCount ?? calendarRowCount) : calendarRowCount) * CONST.CALENDAR_PICKER_DAY_HEIGHT;
+    const initialHeight = (calendarDaysMatrix?.length || CONST.MAX_CALENDAR_PICKER_ROWS) * CONST.CALENDAR_PICKER_DAY_HEIGHT;
     const heightValue = useSharedValue(initialHeight);
 
     const minYear = getYear(new Date(minDate));
@@ -179,15 +166,11 @@ function CalendarPicker({
             return;
         }
 
-        const rowCount = shouldUseFixedRowHeight ? Math.max(calendarRowCount, fixedRowCount ?? calendarRowCount) : calendarRowCount;
+        const rowCount = calendarDaysMatrix?.length || CONST.MAX_CALENDAR_PICKER_ROWS;
         const newHeight = rowCount * CONST.CALENDAR_PICKER_DAY_HEIGHT;
 
         heightValue.set(withTiming(newHeight, {duration: 50}));
-    }, [calendarRowCount, heightValue, shouldUseFixedRowHeight, fixedRowCount]);
-
-    useEffect(() => {
-        onCalendarRowsCountChange?.(calendarRowCount);
-    }, [calendarRowCount, onCalendarRowsCountChange]);
+    }, [calendarDaysMatrix?.length, heightValue]);
 
     const animatedStyle = useAnimatedStyle(() => {
         return {
@@ -228,10 +211,7 @@ function CalendarPicker({
                     >
                         {currentYearView}
                     </Text>
-                    <ArrowIcon
-                        disabled={years.length <= 1}
-                        containerStyle={themeStyles.pr0}
-                    />
+                    <ArrowIcon disabled={years.length <= 1} />
                 </PressableWithFeedback>
                 <View style={[themeStyles.alignItemsCenter, themeStyles.flexRow, themeStyles.flex1, themeStyles.justifyContentEnd, themeStyles.mrn2]}>
                     <Text
diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 3368252b72cf4..721b67ab831ee 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -125,21 +125,8 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         }
 
         if (selectedDateModifier) {
-            // For Range, validate that both dates are selected
-            if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-                const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-                const rangeBoundaries = getRangeBoundariesFromFormValue(
-                    dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
-                    dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
-                    dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
-                );
-                const hasFrom = !!rangeBoundaries.from;
-                const hasTo = !!rangeBoundaries.to;
-
-                if (!hasFrom || !hasTo) {
-                    setShouldShowRangeError(true);
-                    return;
-                }
+            if (!searchDatePresetFilterBaseRef.current.validate()) {
+                return;
             }
 
             const updatedDateValues = searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
@@ -209,6 +196,7 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
                     isSearchAdvancedFiltersFormLoading={isSearchAdvancedFiltersFormLoading}
                     shouldShowRangeError={shouldShowRangeError}
                     onDateValuesChange={handleDateValuesChange}
+                    onRangeValidationErrorChange={setShouldShowRangeError}
                     forceVerticalCalendars
                 />
                 {selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && hasRangeInput && (
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 2102e97f6537c..366ea4316d25c 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -32,6 +32,9 @@ type DatePresetFilterBaseHandle = {
 
     /** Resets date values to the provided defaults */
     resetDateValuesToDefault: () => void;
+
+    /** Validates the selected date modifier input */
+    validate: () => boolean;
 };
 
 type DatePresetFilterBaseProps = {
@@ -59,6 +62,9 @@ type DatePresetFilterBaseProps = {
     /** Callback when date values change (useful for parent to track range display text) */
     onDateValuesChange?: (dateValues: SearchDateValues) => void;
 
+    /** Callback when range validation error changes */
+    onRangeValidationErrorChange?: (shouldShowRangeError: boolean) => void;
+
     /** Force vertical stacking of calendars in range picker */
     forceVerticalCalendars?: boolean;
 
@@ -85,6 +91,7 @@ function DatePresetFilterBase({
     shouldShowRangeError = false,
     shouldShowRangeErrorInPicker = true,
     onDateValuesChange,
+    onRangeValidationErrorChange,
     forceVerticalCalendars = false,
     ref,
 }: DatePresetFilterBaseProps) {
@@ -155,6 +162,7 @@ function DatePresetFilterBase({
     const selectDateModifier = useCallback(
         (dateModifier: SearchDateModifier | null) => {
             resetEphemeralDateValue(dateModifier);
+            onRangeValidationErrorChange?.(false);
 
             // When entering Range mode
             if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
@@ -172,9 +180,20 @@ function DatePresetFilterBase({
 
             onSelectDateModifier(dateModifier);
         },
-        [resetEphemeralDateValue, onSelectDateModifier],
+        [resetEphemeralDateValue, onSelectDateModifier, onRangeValidationErrorChange],
     );
 
+    const validate = useCallback(() => {
+        if (selectedDateModifier !== CONST.SEARCH.DATE_MODIFIERS.RANGE) {
+            onRangeValidationErrorChange?.(false);
+            return true;
+        }
+
+        const isValid = !!(rangeEphemeralValues.from && rangeEphemeralValues.to);
+        onRangeValidationErrorChange?.(!isValid);
+        return isValid;
+    }, [onRangeValidationErrorChange, rangeEphemeralValues.from, rangeEphemeralValues.to, selectedDateModifier]);
+
     useImperativeHandle(
         ref,
         () => ({
@@ -185,6 +204,11 @@ function DatePresetFilterBase({
             resetDateValuesToDefault() {
                 dateValuesRef.current = defaultDateValues;
                 updateDateValues(defaultDateValues);
+                onRangeValidationErrorChange?.(false);
+            },
+
+            validate() {
+                return validate();
             },
 
             clearDateValues() {
@@ -196,6 +220,7 @@ function DatePresetFilterBase({
                 };
                 dateValuesRef.current = clearedValues;
                 updateDateValues(clearedValues);
+                onRangeValidationErrorChange?.(false);
             },
 
             setDateValueOfSelectedDateModifier() {
@@ -231,16 +256,18 @@ function DatePresetFilterBase({
                     dateValuesRef.current = updatedValues;
                     setRangeEphemeralValues({});
                     setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, undefined);
+                    onRangeValidationErrorChange?.(false);
                     return updatedValues;
                 }
 
                 const updatedValues = {...currentDateValues, [selectedDateModifier]: undefined};
                 dateValuesRef.current = updatedValues;
                 setDateValue(selectedDateModifier, undefined);
+                onRangeValidationErrorChange?.(false);
                 return updatedValues;
             },
         }),
-        [selectedDateModifier, defaultDateValues, ephemeralDateValue, rangeEphemeralValues.from, rangeEphemeralValues.to, setDateValue, updateDateValues],
+        [selectedDateModifier, defaultDateValues, ephemeralDateValue, rangeEphemeralValues.from, rangeEphemeralValues.to, setDateValue, updateDateValues, validate, onRangeValidationErrorChange],
     );
 
     const rangeBoundaries = getRangeBoundariesFromFormValue(
diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
index 9c059ef72f10d..385e1f6fa2da9 100644
--- a/src/components/Search/FilterComponents/RangeDatePicker.tsx
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import CalendarPicker from '@components/DatePicker/CalendarPicker';
 import type {DayProps} from '@components/DatePicker/CalendarPicker/Day';
@@ -45,26 +45,14 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
     const shouldStack = forceVertical || isSmallScreenWidth;
-    const fromMaxDate = useMemo(() => (toValue ? new Date(toValue) : CONST.CALENDAR_PICKER.MAX_DATE), [toValue]);
-    const toMinDate = useMemo(() => (fromValue ? new Date(fromValue) : CONST.CALENDAR_PICKER.MIN_DATE), [fromValue]);
-    const [fromCalendarRowsCount, setFromCalendarRowsCount] = useState(CONST.MAX_CALENDAR_PICKER_ROWS);
-    const [toCalendarRowsCount, setToCalendarRowsCount] = useState(CONST.MAX_CALENDAR_PICKER_ROWS);
-
-    const handleFromCalendarRowsCountChange = useCallback((rowCount: number) => {
-        setFromCalendarRowsCount(rowCount);
-    }, []);
-
-    const handleToCalendarRowsCountChange = useCallback((rowCount: number) => {
-        setToCalendarRowsCount(rowCount);
-    }, []);
-
-    const sharedDesktopCalendarRowCount = !shouldStack ? Math.max(fromCalendarRowsCount, toCalendarRowsCount) : undefined;
+    const fromMaxDate = toValue ? new Date(toValue) : CONST.CALENDAR_PICKER.MAX_DATE;
+    const toMinDate = fromValue ? new Date(fromValue) : CONST.CALENDAR_PICKER.MIN_DATE;
 
     return (
         <>
-            <View style={[!shouldStack && styles.flexRow, styles.mh5, isSmallScreenWidth && styles.mt3]}>
+            <View style={[!shouldStack && styles.flexRow, !shouldStack && styles.alignItemsStretch, styles.mh5, isSmallScreenWidth && styles.mt3]}>
                 <View style={[!shouldStack && styles.flex1, !shouldStack && styles.mr2]}>
-                    <View style={[styles.borderedContentCard]}>
+                    <View style={[styles.borderedContentCard, !shouldStack && styles.flex1]}>
                         <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph4, styles.pt4]}>{translate('common.from')}</Text>
                         <CalendarPicker
                             value={fromValue}
@@ -73,15 +61,12 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
                             maxDate={fromMaxDate}
                             DayComponent={GreenSelectedDay}
                             headerContainerStyle={styles.ph4}
-                            shouldUseFixedRowHeight={!shouldStack}
-                            fixedRowCount={sharedDesktopCalendarRowCount}
-                            onCalendarRowsCountChange={handleFromCalendarRowsCountChange}
                         />
                     </View>
                 </View>
 
                 <View style={[!shouldStack && styles.flex1, !shouldStack && styles.ml2, shouldStack && styles.mt4]}>
-                    <View style={[styles.borderedContentCard]}>
+                    <View style={[styles.borderedContentCard, !shouldStack && styles.flex1]}>
                         <Text style={[styles.textLabelSupporting, styles.mb2, styles.ph4, styles.pt4]}>{translate('common.to')}</Text>
                         <CalendarPicker
                             value={toValue}
@@ -90,9 +75,6 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
                             maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
                             DayComponent={GreenSelectedDay}
                             headerContainerStyle={styles.ph4}
-                            shouldUseFixedRowHeight={!shouldStack}
-                            fixedRowCount={sharedDesktopCalendarRowCount}
-                            onCalendarRowsCountChange={handleToCalendarRowsCountChange}
                         />
                     </View>
                 </View>
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 71ff7dc69046e..58600880bf17a 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -98,24 +98,11 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         }
 
         if (selectedDateModifier) {
-            // For Range, validate that both dates are selected
-            if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-                const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-                const rangeBoundaries = getRangeBoundariesFromFormValue(
-                    dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
-                    dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
-                    dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
-                );
-                const hasFrom = !!rangeBoundaries.from;
-                const hasTo = !!rangeBoundaries.to;
-
-                if (!hasFrom || !hasTo) {
-                    setShouldShowRangeError(true);
-                    setTimeout(() => {
-                        scrollViewRef.current?.scrollToEnd({animated: true});
-                    }, 100);
-                    return;
-                }
+            if (!searchDatePresetFilterBaseRef.current.validate()) {
+                setTimeout(() => {
+                    scrollViewRef.current?.scrollToEnd({animated: true});
+                }, 100);
+                return;
             }
 
             // This now returns the updated values synchronously
@@ -209,6 +196,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                         presets={presets}
                         shouldShowRangeError={shouldShowRangeError}
                         onDateValuesChange={updateTrackedDateValues}
+                        onRangeValidationErrorChange={setShouldShowRangeError}
                     />
                 </View>
                 <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
@@ -251,6 +239,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                         presets={presets}
                         shouldShowRangeError={shouldShowRangeError}
                         onDateValuesChange={updateTrackedDateValues}
+                        onRangeValidationErrorChange={setShouldShowRangeError}
                     />
                 </View>
                 <View style={[styles.flexRow, styles.mh5, styles.alignItemsCenter, styles.pt1]}>
@@ -341,6 +330,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     shouldShowRangeError={shouldShowRangeError}
                     shouldShowRangeErrorInPicker={false}
                     onDateValuesChange={updateTrackedDateValues}
+                    onRangeValidationErrorChange={setShouldShowRangeError}
                 />
             </ScrollView>
             {shouldShowRangeError && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (

From 7b21dcbdd12d1274c0eb2256f68c3888ed606698 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 18 Feb 2026 20:58:36 +0530
Subject: [PATCH 33/58] fix: update selected day style to use green background
 and white text for all

---
 .../FilterComponents/DatePresetFilterBase.tsx   |  2 ++
 .../Search/FilterComponents/RangeDatePicker.tsx | 16 +++-------------
 .../FilterComponents/SearchDatePickerDay.tsx    | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Search/FilterComponents/SearchDatePickerDay.tsx

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 366ea4316d25c..5f5fdb18508bc 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -14,6 +14,7 @@ import {getRangeBoundariesFromFormValue, getRangeQueryValue, isSearchDatePreset}
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import RangeDatePicker from './RangeDatePicker';
+import SearchDatePickerDay from './SearchDatePickerDay';
 
 type SearchDateValues = Record<SearchDateModifier, string | undefined>;
 
@@ -372,6 +373,7 @@ function DatePresetFilterBase({
             onSelected={setEphemeralDateValue}
             minDate={CONST.CALENDAR_PICKER.MIN_DATE}
             maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
+            DayComponent={SearchDatePickerDay}
         />
     );
 }
diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
index 385e1f6fa2da9..6f6c284cb83be 100644
--- a/src/components/Search/FilterComponents/RangeDatePicker.tsx
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -1,23 +1,13 @@
 import React from 'react';
 import {View} from 'react-native';
 import CalendarPicker from '@components/DatePicker/CalendarPicker';
-import type {DayProps} from '@components/DatePicker/CalendarPicker/Day';
 import FormHelpMessage from '@components/FormHelpMessage';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
-
-/** Day component with green highlight for selected date */
-function GreenSelectedDay({disabled, selected, children}: DayProps) {
-    const themeStyles = useThemeStyles();
-    return (
-        <View style={[themeStyles.calendarDayContainer, selected ? themeStyles.buttonSuccess : {}]}>
-            <Text style={[disabled ? themeStyles.buttonOpacityDisabled : {}, selected ? themeStyles.themeTextColor : {}]}>{children}</Text>
-        </View>
-    );
-}
+import SearchDatePickerDay from './SearchDatePickerDay';
 
 type RangeDatePickerProps = {
     /** The "From" date value */
@@ -59,7 +49,7 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
                             onSelected={onFromSelected}
                             minDate={CONST.CALENDAR_PICKER.MIN_DATE}
                             maxDate={fromMaxDate}
-                            DayComponent={GreenSelectedDay}
+                            DayComponent={SearchDatePickerDay}
                             headerContainerStyle={styles.ph4}
                         />
                     </View>
@@ -73,7 +63,7 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
                             onSelected={onToSelected}
                             minDate={toMinDate}
                             maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
-                            DayComponent={GreenSelectedDay}
+                            DayComponent={SearchDatePickerDay}
                             headerContainerStyle={styles.ph4}
                         />
                     </View>
diff --git a/src/components/Search/FilterComponents/SearchDatePickerDay.tsx b/src/components/Search/FilterComponents/SearchDatePickerDay.tsx
new file mode 100644
index 0000000000000..c6b63d7f8670d
--- /dev/null
+++ b/src/components/Search/FilterComponents/SearchDatePickerDay.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {DayProps} from '@components/DatePicker/CalendarPicker/Day';
+import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function SearchDatePickerDay({disabled, selected, children}: DayProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.calendarDayContainer, selected ? styles.buttonSuccess : {}]}>
+            <Text style={[disabled ? styles.buttonOpacityDisabled : {}, selected ? styles.buttonSuccessText : {}]}>{children}</Text>
+        </View>
+    );
+}
+
+export default SearchDatePickerDay;

From f80d4f1e1a0fb76bcc7f8489657eb905433fad88 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 18 Feb 2026 21:49:44 +0530
Subject: [PATCH 34/58] fix: ESLint

---
 src/pages/Search/SearchPage.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 065b5cdfec99b..e220a612aaa39 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -89,6 +89,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {Report, SearchResults, Transaction, TransactionViolations} from '@src/types/onyx';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import SearchPageNarrow from './SearchPageNarrow';
 import SearchPageWide from './SearchPageWide';
 
@@ -182,9 +183,13 @@ function SearchPage({route}: SearchPageProps) {
         ],
         [selectedTransactions],
     );
-    const selectedReportIDs = Object.values(selectedReports)
-        .map((report) => report.reportID)
-        .filter((reportID) => reportID !== undefined);
+    const selectedReportIDs = useMemo(
+        () =>
+            Object.values(selectedReports)
+                .map((report) => report.reportID)
+                .filter((reportID) => reportID !== undefined),
+        [selectedReports],
+    );
     const isCurrencySupportedBulkWallet = isCurrencySupportWalletBulkPay(selectedReports, selectedTransactions);
 
     // Collate a list of policyIDs from the selected transactions
@@ -388,6 +393,8 @@ function SearchPage({route}: SearchPageProps) {
         showConfirmModal,
         translate,
         selectedTransactionsKeys,
+        selectedTransactionReportIDs,
+        selectedReportIDs,
         status,
         hash,
         selectedReports,

From 1eee665374cd4aa1188b82a6ffe5f76e4fb47761 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 19 Feb 2026 12:44:54 +0530
Subject: [PATCH 35/58] fix: error margin to 20px, fix selected day

---
 src/components/DatePicker/CalendarPicker/Day.tsx          | 8 ++------
 .../Search/FilterComponents/RangeDatePicker.tsx           | 2 +-
 src/pages/ScheduleCall/AvailableBookingDay.tsx            | 2 +-
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/DatePicker/CalendarPicker/Day.tsx b/src/components/DatePicker/CalendarPicker/Day.tsx
index 3db884bb7fdc0..ed57ddb5bf025 100644
--- a/src/components/DatePicker/CalendarPicker/Day.tsx
+++ b/src/components/DatePicker/CalendarPicker/Day.tsx
@@ -27,13 +27,9 @@ function Day({disabled, selected, pressed, hovered, children}: DayProps) {
     const StyleUtils = useStyleUtils();
     return (
         <View
-            style={[
-                themeStyles.calendarDayContainer,
-                selected ? themeStyles.buttonDefaultBG : {},
-                !disabled ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {},
-            ]}
+            style={[themeStyles.calendarDayContainer, selected ? themeStyles.buttonSuccess : {}, !disabled ? StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {}]}
         >
-            <Text style={disabled ? themeStyles.buttonOpacityDisabled : {}}>{children}</Text>
+            <Text style={[disabled ? themeStyles.buttonOpacityDisabled : {}, selected ? themeStyles.buttonSuccessText : {}]}>{children}</Text>
         </View>
     );
 }
diff --git a/src/components/Search/FilterComponents/RangeDatePicker.tsx b/src/components/Search/FilterComponents/RangeDatePicker.tsx
index 6f6c284cb83be..4891e40185bcb 100644
--- a/src/components/Search/FilterComponents/RangeDatePicker.tsx
+++ b/src/components/Search/FilterComponents/RangeDatePicker.tsx
@@ -74,7 +74,7 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
                 <FormHelpMessage
                     isError
                     message={translate('search.errors.pleaseSelectDatesForBothFromAndTo')}
-                    style={[styles.mh3, styles.mt2]}
+                    style={[styles.mh5, styles.mt2]}
                 />
             )}
         </>
diff --git a/src/pages/ScheduleCall/AvailableBookingDay.tsx b/src/pages/ScheduleCall/AvailableBookingDay.tsx
index abe89a351df1b..5244c09197fc9 100644
--- a/src/pages/ScheduleCall/AvailableBookingDay.tsx
+++ b/src/pages/ScheduleCall/AvailableBookingDay.tsx
@@ -17,7 +17,7 @@ function AvailableBookingDay({disabled, selected, pressed, hovered, children}: D
                 selected ? themeStyles.buttonSuccess : {},
             ]}
         >
-            <Text>{children}</Text>
+            <Text style={selected ? themeStyles.buttonSuccessText : {}}>{children}</Text>
         </View>
     );
 }

From 4b7a725f568cb3696cc8f3e1bbfe917337df043e Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 19 Feb 2026 12:46:20 +0530
Subject: [PATCH 36/58] chore: prettify

---
 .../Search/FilterComponents/DatePresetFilterBase.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 5f5fdb18508bc..42a39d45dd7de 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -268,7 +268,17 @@ function DatePresetFilterBase({
                 return updatedValues;
             },
         }),
-        [selectedDateModifier, defaultDateValues, ephemeralDateValue, rangeEphemeralValues.from, rangeEphemeralValues.to, setDateValue, updateDateValues, validate, onRangeValidationErrorChange],
+        [
+            selectedDateModifier,
+            defaultDateValues,
+            ephemeralDateValue,
+            rangeEphemeralValues.from,
+            rangeEphemeralValues.to,
+            setDateValue,
+            updateDateValues,
+            validate,
+            onRangeValidationErrorChange,
+        ],
     );
 
     const rangeBoundaries = getRangeBoundariesFromFormValue(

From f4472266af0efbe6a1f36108b3b5de598240b998 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 21 Feb 2026 01:33:55 +0530
Subject: [PATCH 37/58] fix: const, searchfilterbar function, improve
 consistency

---
 src/CONST/index.ts                            |  1 +
 .../SearchPageHeader/SearchFiltersBar.tsx     | 81 +++++++++----------
 src/pages/Search/AdvancedSearchFilters.tsx    |  5 +-
 tests/unit/Search/SearchFiltersBarTest.ts     | 59 --------------
 4 files changed, 41 insertions(+), 105 deletions(-)
 delete mode 100644 tests/unit/Search/SearchFiltersBarTest.ts

diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index ce076371cc293..cf40779c7327b 100755
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -248,6 +248,7 @@ const CONST = {
     POPOVER_MENU_MAX_HEIGHT: 496,
     POPOVER_MENU_MAX_HEIGHT_MOBILE: 432,
     POPOVER_DATE_WIDTH: 338,
+    POPOVER_DATE_RANGE_WIDTH: 672,
     POPOVER_DATE_MAX_HEIGHT: 366,
     POPOVER_DATE_MIN_HEIGHT: 322,
     TOOLTIP_ANIMATION_DURATION: 500,
diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index ef8892fc29ccf..a24eb36b014f2 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -76,46 +76,6 @@ type FilterItem = WithSentryLabel & {
     filterKey: SearchAdvancedFiltersKey;
 };
 
-type TranslateFunction = (key: TranslationPaths) => string;
-
-function createDateDisplayValueHelper(filterValues: {on?: string; after?: string; before?: string; range?: string}, translate: TranslateFunction): [SearchDateValues, string[]] {
-    const rangeBoundaries = getRangeBoundariesFromFormValue(filterValues.range, filterValues.after, filterValues.before);
-    const hasRange = !!filterValues.range;
-    const value: SearchDateValues = {
-        [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
-        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
-        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
-        [CONST.SEARCH.DATE_MODIFIERS.RANGE]: filterValues.range,
-    };
-
-    const displayText: string[] = [];
-    if (value.On) {
-        displayText.push(isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`);
-    }
-
-    if (value.After) {
-        displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
-    }
-    if (value.Before) {
-        displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
-    }
-
-    if (hasRange) {
-        const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
-        let rangeDisplay = '';
-        if (rangeBoundaries.from && rangeBoundaries.to) {
-            rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
-        } else if (singleBoundary) {
-            rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
-        }
-        if (rangeDisplay) {
-            displayText.push(`${translate('common.range')}: ${rangeDisplay}`);
-        }
-    }
-
-    return [value, displayText];
-}
-
 type SearchFiltersBarProps = {
     queryJSON: SearchQueryJSON;
     headerButtonsOptions: Array<DropdownOption<SearchHeaderOptionValue>>;
@@ -273,7 +233,43 @@ function SearchFiltersBar({
 
     const createDateDisplayValue = useCallback(
         (filterValues: {on?: string; after?: string; before?: string; range?: string}): [SearchDateValues, string[]] => {
-            return createDateDisplayValueHelper(filterValues, translate);
+            const rangeBoundaries = getRangeBoundariesFromFormValue(filterValues.range, filterValues.after, filterValues.before);
+            const hasRange = !!filterValues.range;
+            const value: SearchDateValues = {
+                [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
+                [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
+                [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
+                [CONST.SEARCH.DATE_MODIFIERS.RANGE]: filterValues.range,
+            };
+
+            const displayText: string[] = [];
+            if (value.On) {
+                displayText.push(
+                    isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`,
+                );
+            }
+
+            if (value.After) {
+                displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
+            }
+            if (value.Before) {
+                displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
+            }
+
+            if (hasRange) {
+                const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
+                let rangeDisplay = '';
+                if (rangeBoundaries.from && rangeBoundaries.to) {
+                    rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
+                } else if (singleBoundary) {
+                    rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
+                }
+                if (rangeDisplay) {
+                    displayText.push(`${translate('common.range')}: ${rangeDisplay}`);
+                }
+            }
+
+            return [value, displayText];
         },
         [translate],
     );
@@ -841,7 +837,7 @@ function SearchFiltersBar({
 
             return filterFormValues[key as SearchAdvancedFiltersKey];
         });
-    }, [filterFormValues, filters, typeFiltersKeys]);
+    }, [filterFormValues, filters, searchAdvancedFiltersForm, typeFiltersKeys]);
 
     const adjustScroll = useCallback((info: {distanceFromEnd: number}) => {
         // Workaround for a known React Native bug on Android (https://github.com/facebook/react-native/issues/27504):
@@ -1010,4 +1006,3 @@ function SearchFiltersBar({
 }
 
 export default SearchFiltersBar;
-export {createDateDisplayValueHelper};
diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index a70f1a73bd506..f94dea8cc9a9c 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -402,7 +402,6 @@ function getFilterDisplayTitle(
 
     if (key.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
         const values: string[] = [];
-        const reportFieldRangePrefix = CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX;
         const reportFieldValues: Record<string, {text?: string; on?: string; after?: string; before?: string; range?: string}> = {};
 
         for (const [fieldKey, fieldValue] of Object.entries(filters)) {
@@ -415,7 +414,7 @@ function getFilterDisplayTitle(
                 .replace(CONST.SEARCH.REPORT_FIELD.ON_PREFIX, '')
                 .replace(CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX, '')
                 .replace(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX, '')
-                .replace(reportFieldRangePrefix, '');
+                .replace(CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX, '');
 
             if (!suffix) {
                 continue;
@@ -433,7 +432,7 @@ function getFilterDisplayTitle(
                 reportFieldValues[suffix].after = fieldValue as string;
             } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX)) {
                 reportFieldValues[suffix].before = fieldValue as string;
-            } else if (fieldKey.startsWith(reportFieldRangePrefix)) {
+            } else if (fieldKey.startsWith(CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX)) {
                 reportFieldValues[suffix].range = fieldValue as string;
             }
         }
diff --git a/tests/unit/Search/SearchFiltersBarTest.ts b/tests/unit/Search/SearchFiltersBarTest.ts
deleted file mode 100644
index 94eba2c6c53d9..0000000000000
--- a/tests/unit/Search/SearchFiltersBarTest.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {createDateDisplayValueHelper} from '@components/Search/SearchPageHeader/SearchFiltersBar';
-import DateUtils from '@libs/DateUtils';
-import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
-
-describe('SearchFiltersBar createDateDisplayValueHelper', () => {
-    const translate: (key: TranslationPaths) => string = (key) => key;
-
-    it('shows on/after/before/range together when explicit range is enabled', () => {
-        const on = '2023-01-01';
-        const after = '2023-01-02';
-        const before = '2023-01-05';
-        const range = `${after},${before}`;
-
-        const [value, display] = createDateDisplayValueHelper({on, after, before, range}, translate);
-        const expectedRange = DateUtils.getFormattedDateRangeForSearch(after, before, true);
-
-        expect(value.Range).toBe(range);
-        expect(value.On).toBe(on);
-        expect(value.After).toBe(after);
-        expect(value.Before).toBe(before);
-        expect(display).toEqual([
-            `common.on ${DateUtils.formatToReadableString(on)}`,
-            `common.after ${DateUtils.formatToReadableString(after)}`,
-            `common.before ${DateUtils.formatToReadableString(before)}`,
-            `common.range: ${expectedRange}`,
-        ]);
-    });
-
-    it('shows single-boundary range text when explicit range is enabled', () => {
-        const range = '2023-03-03';
-        const [value, display] = createDateDisplayValueHelper({range}, translate);
-
-        expect(value.Range).toBe(range);
-        expect(display).toEqual([`common.range: ${DateUtils.formatToReadableString(range)}`]);
-    });
-
-    it('formats single boundary dates without using range mode', () => {
-        const after = '2023-02-10';
-        const before = '2023-02-12';
-
-        const [afterValue, afterDisplay] = createDateDisplayValueHelper({after}, translate);
-        const [beforeValue, beforeDisplay] = createDateDisplayValueHelper({before}, translate);
-
-        expect(afterValue.Range).toBeUndefined();
-        expect(afterDisplay).toEqual([`common.after ${DateUtils.formatToReadableString(after)}`]);
-
-        expect(beforeValue.Range).toBeUndefined();
-        expect(beforeDisplay).toEqual([`common.before ${DateUtils.formatToReadableString(before)}`]);
-    });
-
-    it('uses preset labels when provided', () => {
-        const [value, display] = createDateDisplayValueHelper({on: CONST.SEARCH.DATE_PRESETS.LAST_MONTH}, translate);
-
-        expect(value.On).toBe(CONST.SEARCH.DATE_PRESETS.LAST_MONTH);
-        expect(value.Range).toBeUndefined();
-        expect(display).toEqual([`search.filters.date.presets.${CONST.SEARCH.DATE_PRESETS.LAST_MONTH}`]);
-    });
-});

From 8871800b5690e92ac7eaeec79f16fe02143a270d Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 21 Feb 2026 02:54:55 +0530
Subject: [PATCH 38/58] fix: useRangeLayout for refactor

---
 .../FilterDropdowns/DateSelectPopup.tsx       | 232 ++++++++----------
 1 file changed, 109 insertions(+), 123 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 2c7e89611ec87..9b390ecb4378e 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -2,7 +2,6 @@ import {format, parseISO} from 'date-fns';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
-import FormHelpMessage from '@components/FormHelpMessage';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
@@ -105,7 +104,6 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                 return;
             }
 
-            // This now returns the updated values synchronously
             const dateValues = searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
             updateTrackedDateValues(dateValues);
             clearSelection();
@@ -172,53 +170,20 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     const maxPopupHeight = Math.round(windowHeight * 0.875);
 
     // For non-Range modes, use original simple styles. For Range, use custom layout
-    const useRangeLayout = isRangeMode;
-
-    // Original simple styles for non-Range modes
-    if (!useRangeLayout) {
-        return (
-            <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
-                {isSmallScreenWidth && !selectedDateModifier && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
-                <View>
-                    {!!selectedDateModifier && (
-                        <HeaderWithBackButton
-                            shouldDisplayHelpButton={false}
-                            style={[styles.h10, styles.pb3]}
-                            subtitle={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
-                            onBackButtonPress={handleBackPress}
-                        />
-                    )}
-                    <DatePresetFilterBase
-                        ref={searchDatePresetFilterBaseRef}
-                        defaultDateValues={trackedDateValues}
-                        selectedDateModifier={selectedDateModifier}
-                        onSelectDateModifier={setSelectedDateModifier}
-                        presets={presets}
-                        shouldShowRangeError={shouldShowRangeError}
-                        onDateValuesChange={updateTrackedDateValues}
-                        onRangeValidationErrorChange={setShouldShowRangeError}
-                    />
-                </View>
-                <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
-                    <Button
-                        medium
-                        style={[styles.flex1]}
-                        text={translate('common.reset')}
-                        onPress={resetChanges}
-                    />
-                    <Button
-                        success
-                        medium
-                        style={[styles.flex1]}
-                        text={translate('common.apply')}
-                        onPress={applyChanges}
-                    />
-                </View>
-            </View>
-        );
-    }
+    const useRangeLayout = isInRangeMode;
+    const datePresetFilterBase = (
+        <DatePresetFilterBase
+            ref={searchDatePresetFilterBaseRef}
+            defaultDateValues={trackedDateValues}
+            selectedDateModifier={selectedDateModifier}
+            onSelectDateModifier={setSelectedDateModifier}
+            presets={presets}
+            shouldShowRangeError={shouldShowRangeError}
+            onDateValuesChange={updateTrackedDateValues}
+            onRangeValidationErrorChange={setShouldShowRangeError}
+        />
+    );
 
-    // Range mode - desktop uses simple layout, mobile uses ScrollView layout
     if (!isSmallScreenWidth) {
         return (
             <View style={[styles.pv4, styles.gap2]}>
@@ -231,73 +196,81 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                             onBackButtonPress={handleBackPress}
                         />
                     )}
-                    <DatePresetFilterBase
-                        ref={searchDatePresetFilterBaseRef}
-                        defaultDateValues={trackedDateValues}
-                        selectedDateModifier={selectedDateModifier}
-                        onSelectDateModifier={setSelectedDateModifier}
-                        presets={presets}
-                        shouldShowRangeError={shouldShowRangeError}
-                        onDateValuesChange={updateTrackedDateValues}
-                        onRangeValidationErrorChange={setShouldShowRangeError}
-                    />
+                    {datePresetFilterBase}
                 </View>
-                <View style={[styles.flexRow, styles.mh5, styles.alignItemsCenter, styles.pt1]}>
-                    {shouldShowInlineRangeText ? (
-                        <>
-                            <View style={[styles.flex1, styles.mr2]}>
-                                {!!rangeText && (
-                                    <Text style={[styles.textLabelSupporting]}>
-                                        {`${translate('common.range')}: `}
-                                        <Text style={[styles.textLabel]}>{rangeText}</Text>
-                                    </Text>
-                                )}
-                            </View>
-                            <View style={[styles.flex1, styles.ml2]}>
-                                <View style={[styles.flexRow, styles.gap2]}>
-                                    <Button
-                                        medium
-                                        style={[styles.flex1]}
-                                        text={translate('common.reset')}
-                                        onPress={resetChanges}
-                                    />
-                                    <Button
-                                        success
-                                        medium
-                                        style={[styles.flex1]}
-                                        text={translate('common.apply')}
-                                        onPress={applyChanges}
-                                    />
+                {useRangeLayout ? (
+                    <View style={[styles.flexRow, styles.mh5, styles.alignItemsCenter, styles.pt1]}>
+                        {shouldShowInlineRangeText ? (
+                            <>
+                                <View style={[styles.flex1, styles.mr2]}>
+                                    {!!rangeText && (
+                                        <Text style={[styles.textLabelSupporting]}>
+                                            {`${translate('common.range')}: `}
+                                            <Text style={[styles.textLabel]}>{rangeText}</Text>
+                                        </Text>
+                                    )}
+                                </View>
+                                <View style={[styles.flex1, styles.ml2]}>
+                                    <View style={[styles.flexRow, styles.gap2]}>
+                                        <Button
+                                            medium
+                                            style={[styles.flex1]}
+                                            text={translate('common.reset')}
+                                            onPress={resetChanges}
+                                        />
+                                        <Button
+                                            success
+                                            medium
+                                            style={[styles.flex1]}
+                                            text={translate('common.apply')}
+                                            onPress={applyChanges}
+                                        />
+                                    </View>
                                 </View>
+                            </>
+                        ) : (
+                            <View style={[styles.flexRow, styles.gap2, styles.flex1]}>
+                                <Button
+                                    medium
+                                    style={[styles.flex1]}
+                                    text={translate('common.reset')}
+                                    onPress={resetChanges}
+                                />
+                                <Button
+                                    success
+                                    medium
+                                    style={[styles.flex1]}
+                                    text={translate('common.apply')}
+                                    onPress={applyChanges}
+                                />
                             </View>
-                        </>
-                    ) : (
-                        <View style={[styles.flexRow, styles.gap2, styles.flex1]}>
-                            <Button
-                                medium
-                                style={[styles.flex1]}
-                                text={translate('common.reset')}
-                                onPress={resetChanges}
-                            />
-                            <Button
-                                success
-                                medium
-                                style={[styles.flex1]}
-                                text={translate('common.apply')}
-                                onPress={applyChanges}
-                            />
-                        </View>
-                    )}
-                </View>
+                        )}
+                    </View>
+                ) : (
+                    <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
+                        <Button
+                            medium
+                            style={[styles.flex1]}
+                            text={translate('common.reset')}
+                            onPress={resetChanges}
+                        />
+                        <Button
+                            success
+                            medium
+                            style={[styles.flex1]}
+                            text={translate('common.apply')}
+                            onPress={applyChanges}
+                        />
+                    </View>
+                )}
             </View>
         );
     }
 
-    // Range mode - Mobile with ScrollView
     const topPaddingStyle = selectedDateModifier ? styles.pt3 : undefined;
     const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
 
-    return (
+    return useRangeLayout ? (
         <View style={[topPaddingStyle, styles.flexGrow1, {maxHeight: maxPopupHeight}]}>
             {!selectedDateModifier && <Text style={[styles.textLabel, styles.ph5, styles.pb3]}>{label}</Text>}
             <ScrollView
@@ -321,25 +294,8 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                         <Text style={[styles.textLabelSupporting]}>{translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}</Text>
                     </View>
                 )}
-                <DatePresetFilterBase
-                    ref={searchDatePresetFilterBaseRef}
-                    defaultDateValues={trackedDateValues}
-                    selectedDateModifier={selectedDateModifier}
-                    onSelectDateModifier={setSelectedDateModifier}
-                    presets={presets}
-                    shouldShowRangeError={shouldShowRangeError}
-                    shouldShowRangeErrorInPicker={false}
-                    onDateValuesChange={updateTrackedDateValues}
-                    onRangeValidationErrorChange={setShouldShowRangeError}
-                />
+                {datePresetFilterBase}
             </ScrollView>
-            {shouldShowRangeError && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (
-                <FormHelpMessage
-                    isError
-                    message={translate('search.errors.pleaseSelectDatesForBothFromAndTo')}
-                    style={[styles.mh3, styles.mt2]}
-                />
-            )}
             {!!rangeText && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (
                 <Text style={[styles.textLabelSupporting, styles.ph5, styles.mt2, styles.textAlignLeft]}>
                     {`${translate('common.range')}: `}
@@ -364,6 +320,36 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                 />
             </View>
         </View>
+    ) : (
+        <View style={styles.gap2}>
+            {!selectedDateModifier && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
+            <View>
+                {!!selectedDateModifier && (
+                    <HeaderWithBackButton
+                        shouldDisplayHelpButton={false}
+                        style={[styles.h10, styles.pb3]}
+                        subtitle={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
+                        onBackButtonPress={handleBackPress}
+                    />
+                )}
+                {datePresetFilterBase}
+            </View>
+            <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
+                <Button
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.reset')}
+                    onPress={resetChanges}
+                />
+                <Button
+                    success
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.apply')}
+                    onPress={applyChanges}
+                />
+            </View>
+        </View>
     );
 }
 

From 4c423e1b776955f66d4f3cd74de79607815792df Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 21 Feb 2026 03:12:43 +0530
Subject: [PATCH 39/58] fix: conflict

---
 .../SearchPageHeader/SearchFiltersBar.tsx     | 244 ++++++++++++------
 1 file changed, 163 insertions(+), 81 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index a24eb36b014f2..20ea8e7eee840 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -86,6 +86,60 @@ type SearchFiltersBarProps = {
     latestBankItems?: BankAccountMenuItem[] | undefined;
 };
 
+type DatePickerFilterPopupProps = PopoverComponentProps & {
+    filterKey: SearchDateFilterKeys;
+    value: SearchDateValues;
+    translationKey: TranslationPaths;
+    updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+function DatePickerFilterPopup({closeOverlay, setPopoverWidth, filterKey, value, translationKey, updateFilterForm}: DatePickerFilterPopupProps) {
+    const {translate} = useLocalize();
+
+    const onChange = (selectedDates: SearchDateValues) => {
+        const dateFormValues: Record<string, string | undefined> = {};
+        dateFormValues[`${filterKey}On`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON];
+        dateFormValues[`${filterKey}After`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+        dateFormValues[`${filterKey}Before`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+        dateFormValues[`${filterKey}Range`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+        updateFilterForm(dateFormValues as Partial<SearchAdvancedFiltersForm>);
+    };
+
+    return (
+        <DateSelectPopup
+            label={translate(translationKey)}
+            value={value}
+            onChange={onChange}
+            closeOverlay={closeOverlay}
+            setPopoverWidth={setPopoverWidth}
+            presets={getDatePresets(filterKey, true)}
+        />
+    );
+}
+
+type MultiSelectFilterPopupProps<T extends string> = PopoverComponentProps & {
+    translationKey: TranslationPaths;
+    items: Array<MultiSelectItem<T>>;
+    value: Array<MultiSelectItem<T>>;
+    onChangeCallback: (selectedItems: Array<MultiSelectItem<T>>) => void;
+    isSearchable?: boolean;
+};
+
+function MultiSelectFilterPopup<T extends string>({closeOverlay, translationKey, items, value, onChangeCallback, isSearchable}: MultiSelectFilterPopupProps<T>) {
+    const {translate} = useLocalize();
+
+    return (
+        <MultiSelectPopup
+            label={translate(translationKey)}
+            items={items}
+            value={value}
+            closeOverlay={closeOverlay}
+            onChange={onChangeCallback}
+            isSearchable={isSearchable}
+        />
+    );
+}
+
 function SearchFiltersBar({
     queryJSON,
     headerButtonsOptions,
@@ -440,73 +494,65 @@ function SearchFiltersBar({
         [translate, groupCurrencyOptions, groupCurrency, updateFilterForm],
     );
 
-    const createDatePickerComponent = useCallback(
-        (filterKey: SearchDateFilterKeys, value: SearchDateValues, translationKey: TranslationPaths) => {
-            return ({closeOverlay, setPopoverWidth}: PopoverComponentProps) => {
-                const onChange = (selectedDates: SearchDateValues) => {
-                    const dateFormValues = {
-                        [`${filterKey}On`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON],
-                        [`${filterKey}After`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.AFTER],
-                        [`${filterKey}Before`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
-                        [`${filterKey}Range`]: selectedDates[CONST.SEARCH.DATE_MODIFIERS.RANGE],
-                    };
-
-                    updateFilterForm(dateFormValues);
-                };
-
-                return (
-                    <DateSelectPopup
-                        label={translate(translationKey)}
-                        value={value}
-                        onChange={onChange}
-                        closeOverlay={closeOverlay}
-                        setPopoverWidth={setPopoverWidth}
-                        presets={getDatePresets(filterKey, true)}
-                    />
-                );
+    const feedComponent = useCallback(
+        (props: PopoverComponentProps) => {
+            const updateFeedFilterForm = (items: Array<MultiSelectItem<string>>) => {
+                updateFilterForm({feed: items.map((item) => item.value)});
             };
-        },
-        [translate, updateFilterForm],
-    );
 
-    const createMultiSelectComponent = useCallback(
-        <T extends string>(
-            translationKey: TranslationPaths,
-            items: Array<MultiSelectItem<T>>,
-            value: Array<MultiSelectItem<T>>,
-            onChangeCallback: (selectedItems: Array<MultiSelectItem<T>>) => void,
-            isSearchable?: boolean,
-        ) => {
-            return ({closeOverlay}: PopoverComponentProps) => {
-                return (
-                    <MultiSelectPopup
-                        label={translate(translationKey)}
-                        items={items}
-                        value={value}
-                        closeOverlay={closeOverlay}
-                        onChange={onChangeCallback}
-                        isSearchable={isSearchable}
-                    />
-                );
-            };
+            return (
+                <MultiSelectFilterPopup
+                    closeOverlay={props.closeOverlay}
+                    translationKey="search.filters.feed"
+                    items={feedOptions}
+                    value={feed}
+                    onChangeCallback={updateFeedFilterForm}
+                />
+            );
         },
-        [translate],
+        [feed, feedOptions, updateFilterForm],
     );
 
-    const feedComponent = useMemo(() => {
-        const updateFeedFilterForm = (items: Array<MultiSelectItem<string>>) => {
-            updateFilterForm({feed: items.map((item) => item.value)});
-        };
-        return createMultiSelectComponent('search.filters.feed', feedOptions, feed, updateFeedFilterForm);
-    }, [createMultiSelectComponent, feedOptions, feed, updateFilterForm]);
-
-    const datePickerComponent = useMemo(() => createDatePickerComponent(CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE, date, 'common.date'), [createDatePickerComponent, date]);
+    const datePickerComponent = useCallback(
+        (props: PopoverComponentProps) => (
+            <DatePickerFilterPopup
+                closeOverlay={props.closeOverlay}
+                setPopoverWidth={props.setPopoverWidth}
+                filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE}
+                value={date}
+                translationKey="common.date"
+                updateFilterForm={updateFilterForm}
+            />
+        ),
+        [date, updateFilterForm],
+    );
 
-    const postedPickerComponent = useMemo(() => createDatePickerComponent(CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED, posted, 'search.filters.posted'), [createDatePickerComponent, posted]);
+    const postedPickerComponent = useCallback(
+        (props: PopoverComponentProps) => (
+            <DatePickerFilterPopup
+                closeOverlay={props.closeOverlay}
+                setPopoverWidth={props.setPopoverWidth}
+                filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED}
+                value={posted}
+                translationKey="search.filters.posted"
+                updateFilterForm={updateFilterForm}
+            />
+        ),
+        [posted, updateFilterForm],
+    );
 
-    const withdrawnPickerComponent = useMemo(
-        () => createDatePickerComponent(CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN, withdrawn, 'search.filters.withdrawn'),
-        [createDatePickerComponent, withdrawn],
+    const withdrawnPickerComponent = useCallback(
+        (props: PopoverComponentProps) => (
+            <DatePickerFilterPopup
+                closeOverlay={props.closeOverlay}
+                setPopoverWidth={props.setPopoverWidth}
+                filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN}
+                value={withdrawn}
+                translationKey="search.filters.withdrawn"
+                updateFilterForm={updateFilterForm}
+            />
+        ),
+        [withdrawn, updateFilterForm],
     );
 
     const withdrawalTypeComponent = useCallback(
@@ -524,27 +570,63 @@ function SearchFiltersBar({
         [translate, withdrawalTypeOptions, withdrawalType, updateFilterForm],
     );
 
-    const statusComponent = useMemo(() => {
-        const updateStatusFilterForm = (selectedItems: Array<MultiSelectItem<SingularSearchStatus>>) => {
-            const newStatus = selectedItems.length ? selectedItems.map((i) => i.value) : CONST.SEARCH.STATUS.EXPENSE.ALL;
-            updateFilterForm({status: newStatus});
-        };
-        return createMultiSelectComponent('common.status', statusOptions, status, updateStatusFilterForm);
-    }, [createMultiSelectComponent, statusOptions, status, updateFilterForm]);
-
-    const hasComponent = useMemo(() => {
-        const updateHasFilterForm = (selectedItems: Array<MultiSelectItem<string>>) => {
-            updateFilterForm({has: selectedItems.map((item) => item.value)});
-        };
-        return createMultiSelectComponent('search.has', hasOptions, has, updateHasFilterForm);
-    }, [createMultiSelectComponent, hasOptions, has, updateFilterForm]);
-
-    const isComponent = useMemo(() => {
-        const updateIsFilterForm = (selectedItems: Array<MultiSelectItem<string>>) => {
-            updateFilterForm({is: selectedItems.map((item) => item.value)});
-        };
-        return createMultiSelectComponent('search.filters.is', isOptions, is, updateIsFilterForm);
-    }, [createMultiSelectComponent, isOptions, is, updateFilterForm]);
+    const statusComponent = useCallback(
+        (props: PopoverComponentProps) => {
+            const updateStatusFilterForm = (selectedItems: Array<MultiSelectItem<SingularSearchStatus>>) => {
+                const newStatus = selectedItems.length ? selectedItems.map((i) => i.value) : CONST.SEARCH.STATUS.EXPENSE.ALL;
+                updateFilterForm({status: newStatus});
+            };
+
+            return (
+                <MultiSelectFilterPopup
+                    closeOverlay={props.closeOverlay}
+                    translationKey="common.status"
+                    items={statusOptions}
+                    value={status}
+                    onChangeCallback={updateStatusFilterForm}
+                />
+            );
+        },
+        [status, statusOptions, updateFilterForm],
+    );
+
+    const hasComponent = useCallback(
+        (props: PopoverComponentProps) => {
+            const updateHasFilterForm = (selectedItems: Array<MultiSelectItem<string>>) => {
+                updateFilterForm({has: selectedItems.map((item) => item.value)});
+            };
+
+            return (
+                <MultiSelectFilterPopup
+                    closeOverlay={props.closeOverlay}
+                    translationKey="search.has"
+                    items={hasOptions}
+                    value={has}
+                    onChangeCallback={updateHasFilterForm}
+                />
+            );
+        },
+        [has, hasOptions, updateFilterForm],
+    );
+
+    const isComponent = useCallback(
+        (props: PopoverComponentProps) => {
+            const updateIsFilterForm = (selectedItems: Array<MultiSelectItem<string>>) => {
+                updateFilterForm({is: selectedItems.map((item) => item.value)});
+            };
+
+            return (
+                <MultiSelectFilterPopup
+                    closeOverlay={props.closeOverlay}
+                    translationKey="search.filters.is"
+                    items={isOptions}
+                    value={is}
+                    onChangeCallback={updateIsFilterForm}
+                />
+            );
+        },
+        [is, isOptions, updateFilterForm],
+    );
 
     const userPickerComponent = useCallback(
         ({closeOverlay}: PopoverComponentProps) => {

From e628d59626f8236d118b92a88b8260754cdb00d6 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 21 Feb 2026 03:29:35 +0530
Subject: [PATCH 40/58] fix: mobile view selected dates

---
 .../FilterComponents/DatePresetFilterBase.tsx       | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 42a39d45dd7de..355b2697306d1 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -157,15 +157,22 @@ function DatePresetFilterBase({
         [getInitialEphemeralDateValue],
     );
 
-    // Separate ephemeral state for Range mode calendar selections.
-    const [rangeEphemeralValues, setRangeEphemeralValues] = useState<{from?: string; to?: string}>({});
+    // Separate ephemeral state for Range mode calendar selections
+    const [rangeEphemeralValues, setRangeEphemeralValues] = useState<{from?: string; to?: string}>(() => {
+        const rangeBoundaries = getRangeBoundariesFromFormValue(
+            defaultDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
+        );
+        return {
+            from: rangeBoundaries.from,
+            to: rangeBoundaries.to,
+        };
+    });
 
     const selectDateModifier = useCallback(
         (dateModifier: SearchDateModifier | null) => {
             resetEphemeralDateValue(dateModifier);
             onRangeValidationErrorChange?.(false);
 
-            // When entering Range mode
             if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
                 const currentDateValues = dateValuesRef.current;
                 const rangeBoundaries = getRangeBoundariesFromFormValue(

From d7d3511362bed7621479f678d505f040da552a8e Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 21 Feb 2026 03:31:08 +0530
Subject: [PATCH 41/58] chore: prettify

---
 .../Search/FilterComponents/DatePresetFilterBase.tsx          | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index 355b2697306d1..cc86e09da5c3f 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -159,9 +159,7 @@ function DatePresetFilterBase({
 
     // Separate ephemeral state for Range mode calendar selections
     const [rangeEphemeralValues, setRangeEphemeralValues] = useState<{from?: string; to?: string}>(() => {
-        const rangeBoundaries = getRangeBoundariesFromFormValue(
-            defaultDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
-        );
+        const rangeBoundaries = getRangeBoundariesFromFormValue(defaultDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]);
         return {
             from: rangeBoundaries.from,
             to: rangeBoundaries.to,

From 4c81477a6853248517706768886a01c53b861059 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 21 Feb 2026 03:42:24 +0530
Subject: [PATCH 42/58] fix: redundancy

---
 .../SearchPageHeader/SearchFiltersBar.tsx     | 1152 +++++++----------
 1 file changed, 474 insertions(+), 678 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index 20ea8e7eee840..ac3c2223e42c7 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -1,6 +1,6 @@
 import {isUserValidatedSelector} from '@selectors/Account';
 import {emailSelector} from '@selectors/Session';
-import React, {useCallback, useContext, useMemo, useRef} from 'react';
+import React, {useContext, useRef} from 'react';
 import type {ReactNode} from 'react';
 import {FlatList, View} from 'react-native';
 import Button from '@components/Button';
@@ -95,7 +95,6 @@ type DatePickerFilterPopupProps = PopoverComponentProps & {
 
 function DatePickerFilterPopup({closeOverlay, setPopoverWidth, filterKey, value, translationKey, updateFilterForm}: DatePickerFilterPopupProps) {
     const {translate} = useLocalize();
-
     const onChange = (selectedDates: SearchDateValues) => {
         const dateFormValues: Record<string, string | undefined> = {};
         dateFormValues[`${filterKey}On`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.ON];
@@ -104,7 +103,6 @@ function DatePickerFilterPopup({closeOverlay, setPopoverWidth, filterKey, value,
         dateFormValues[`${filterKey}Range`] = selectedDates[CONST.SEARCH.DATE_MODIFIERS.RANGE];
         updateFilterForm(dateFormValues as Partial<SearchAdvancedFiltersForm>);
     };
-
     return (
         <DateSelectPopup
             label={translate(translationKey)}
@@ -127,7 +125,6 @@ type MultiSelectFilterPopupProps<T extends string> = PopoverComponentProps & {
 
 function MultiSelectFilterPopup<T extends string>({closeOverlay, translationKey, items, value, onChangeCallback, isSearchable}: MultiSelectFilterPopupProps<T>) {
     const {translate} = useLocalize();
-
     return (
         <MultiSelectPopup
             label={translate(translationKey)}
@@ -183,43 +180,38 @@ function SearchFiltersBar({
 
     const {typeFiltersKeys, workspaces, shouldShowWorkspaceSearchInput} = useAdvancedSearchFilters();
 
-    const shouldDisplayWorkspaceFilter = useMemo(() => workspaces.some((section) => section.data.length > 1), [workspaces]);
+    const shouldDisplayWorkspaceFilter = workspaces.some((section) => section.data.length > 1);
 
-    const workspaceOptions = useMemo<Array<MultiSelectItem<string>>>(() => {
-        return workspaces
-            .flatMap((section) => section.data)
-            .filter((workspace): workspace is typeof workspace & {policyID: string; icons: Icon[]} => !!workspace.policyID && !!workspace.icons)
-            .map((workspace) => ({
-                text: workspace.text,
-                value: workspace.policyID,
-                icons: workspace.icons,
-            }));
-    }, [workspaces]);
+    const workspaceOptions: Array<MultiSelectItem<string>> = workspaces
+        .flatMap((section) => section.data)
+        .filter((workspace): workspace is typeof workspace & {policyID: string; icons: Icon[]} => !!workspace.policyID && !!workspace.icons)
+        .map((workspace) => ({
+            text: workspace.text,
+            value: workspace.policyID,
+            icons: workspace.icons,
+        }));
 
-    const selectedTransactionsKeys = useMemo(() => Object.keys(selectedTransactions ?? {}), [selectedTransactions]);
+    const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
 
     // Get selected workspace options from filterFormValues or queryJSON
-    const selectedWorkspaceOptions = useMemo(() => {
+    const selectedWorkspaceOptions = (() => {
         const policyIDs = searchAdvancedFiltersForm.policyID ?? queryJSON.policyID;
         if (!policyIDs) {
             return [];
         }
         const normalizedIDs = Array.isArray(policyIDs) ? policyIDs : [policyIDs];
         return workspaceOptions.filter((option) => normalizedIDs.includes(option.value));
-    }, [searchAdvancedFiltersForm.policyID, queryJSON.policyID, workspaceOptions]);
+    })();
 
     const hasErrors = Object.keys(currentSearchResults?.errors ?? {}).length > 0 && !isOffline;
     const shouldShowSelectedDropdown = headerButtonsOptions.length > 0 && (!shouldUseNarrowLayout || isMobileSelectionModeEnabled);
 
-    const [typeOptions, type] = useMemo(() => {
-        const options = getTypeOptions(translate, allPolicies, email);
-        const value = options.find((option) => option.value === unsafeType) ?? null;
-        return [options, value];
-    }, [translate, allPolicies, email, unsafeType]);
+    const typeOptions = getTypeOptions(translate, allPolicies, email);
+    const type = typeOptions.find((option) => option.value === unsafeType) ?? null;
 
-    const isExpenseReportType = useMemo(() => type?.value === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT, [type?.value]);
+    const isExpenseReportType = type?.value === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT;
 
-    const selectedItemsCount = useMemo(() => {
+    const selectedItemsCount = (() => {
         if (!selectedTransactions) {
             return 0;
         }
@@ -236,651 +228,477 @@ function SearchFiltersBar({
 
         // Otherwise count transactions
         return selectedTransactionsKeys.length;
-    }, [selectedTransactions, isExpenseReportType, selectedTransactionsKeys.length]);
-
-    const [groupByOptions, groupBy] = useMemo(() => {
-        const options = getGroupByOptions(translate);
-        const value = options.find((option) => option.value === unsafeGroupBy) ?? null;
-        return [options, value];
-    }, [translate, unsafeGroupBy]);
-
-    const [viewOptions, viewValue] = useMemo(() => {
-        const options = getViewOptions(translate);
-        const value = options.find((option) => option.value === unsafeView) ?? options.at(0) ?? null;
-        return [options, value];
-    }, [translate, unsafeView]);
-
-    const [groupCurrencyOptions, groupCurrency] = useMemo(() => {
-        const options = getGroupCurrencyOptions(currencyList, getCurrencySymbol);
-        const value = options.find((option) => option.value === searchAdvancedFiltersForm.groupCurrency) ?? null;
-        return [options, value];
-    }, [searchAdvancedFiltersForm.groupCurrency, currencyList, getCurrencySymbol]);
-
-    const [feedOptions, feed] = useMemo(() => {
-        const feedFilterValues = flatFilters.find((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.FEED)?.filters?.map((filter) => filter.value);
-        const options = getFeedOptions(allFeeds, personalAndWorkspaceCards, translate, feedKeysWithCards);
-        const value = feedFilterValues ? options.filter((option) => feedFilterValues.includes(option.value)) : [];
-        return [options, value];
-    }, [flatFilters, allFeeds, personalAndWorkspaceCards, translate, feedKeysWithCards]);
-
-    const [statusOptions, status] = useMemo(() => {
-        const options = type ? getStatusOptions(translate, type.value) : [];
-        const value = [
-            Array.isArray(unsafeStatus) ? options.filter((option) => unsafeStatus.includes(option.value)) : (options.find((option) => option.value === unsafeStatus) ?? []),
-        ].flat();
-        return [options, value];
-    }, [translate, unsafeStatus, type]);
-
-    const [hasOptions, has] = useMemo(() => {
-        const hasFilterValues = flatFilters.find((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.HAS)?.filters?.map((filter) => filter.value);
-        const options = getHasOptions(translate, type?.value ?? CONST.SEARCH.DATA_TYPES.EXPENSE);
-        const value = hasFilterValues ? options.filter((option) => hasFilterValues.includes(option.value)) : [];
-        return [options, value];
-    }, [translate, flatFilters, type?.value]);
-
-    const [isOptions, is] = useMemo(() => {
-        const isFilterValues = flatFilters.find((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.IS)?.filters?.map((filter) => filter.value);
-        const options = Object.values(CONST.SEARCH.IS_VALUES).map((value) => ({text: translate(`common.${value}`), value}));
-        const value = isFilterValues ? options.filter((option) => isFilterValues.includes(option.value)) : [];
-        return [options, value];
-    }, [flatFilters, translate]);
-
-    const createDateDisplayValue = useCallback(
-        (filterValues: {on?: string; after?: string; before?: string; range?: string}): [SearchDateValues, string[]] => {
-            const rangeBoundaries = getRangeBoundariesFromFormValue(filterValues.range, filterValues.after, filterValues.before);
-            const hasRange = !!filterValues.range;
-            const value: SearchDateValues = {
-                [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
-                [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
-                [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
-                [CONST.SEARCH.DATE_MODIFIERS.RANGE]: filterValues.range,
-            };
-
-            const displayText: string[] = [];
-            if (value.On) {
-                displayText.push(
-                    isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`,
-                );
-            }
-
-            if (value.After) {
-                displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
-            }
-            if (value.Before) {
-                displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
+    })();
+
+    const groupByOptions = getGroupByOptions(translate);
+    const groupBy = groupByOptions.find((option) => option.value === unsafeGroupBy) ?? null;
+
+    const viewOptions = getViewOptions(translate);
+    const viewValue = viewOptions.find((option) => option.value === unsafeView) ?? viewOptions.at(0) ?? null;
+
+    const groupCurrencyOptions = getGroupCurrencyOptions(currencyList, getCurrencySymbol);
+    const groupCurrency = groupCurrencyOptions.find((option) => option.value === searchAdvancedFiltersForm.groupCurrency) ?? null;
+
+    const feedFilterValues = flatFilters.find((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.FEED)?.filters?.map((filter) => filter.value);
+    const feedOptions = getFeedOptions(allFeeds, personalAndWorkspaceCards, translate, feedKeysWithCards);
+    const feed = feedFilterValues ? feedOptions.filter((option) => feedFilterValues.includes(option.value)) : [];
+
+    const statusOptions = type ? getStatusOptions(translate, type.value) : [];
+    const status = [
+        Array.isArray(unsafeStatus) ? statusOptions.filter((option) => unsafeStatus.includes(option.value)) : (statusOptions.find((option) => option.value === unsafeStatus) ?? []),
+    ].flat();
+
+    const hasFilterValues = flatFilters.find((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.HAS)?.filters?.map((filter) => filter.value);
+    const hasOptions = getHasOptions(translate, type?.value ?? CONST.SEARCH.DATA_TYPES.EXPENSE);
+    const has = hasFilterValues ? hasOptions.filter((option) => hasFilterValues.includes(option.value)) : [];
+
+    const isFilterValues = flatFilters.find((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.IS)?.filters?.map((filter) => filter.value);
+    const isOptions = Object.values(CONST.SEARCH.IS_VALUES).map((value) => ({text: translate(`common.${value}`), value}));
+    const is = isFilterValues ? isOptions.filter((option) => isFilterValues.includes(option.value)) : [];
+
+    const createDateDisplayValue = (filterValues: {on?: string; after?: string; before?: string; range?: string}): [SearchDateValues, string[]] => {
+        const rangeBoundaries = getRangeBoundariesFromFormValue(filterValues.range, filterValues.after, filterValues.before);
+        const hasRange = !!filterValues.range;
+        const value: SearchDateValues = {
+            [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
+            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: filterValues.after,
+            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: filterValues.before,
+            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: filterValues.range,
+        };
+
+        const displayText: string[] = [];
+        if (value.On) {
+            displayText.push(isSearchDatePreset(value.On) ? translate(`search.filters.date.presets.${value.On}`) : `${translate('common.on')} ${DateUtils.formatToReadableString(value.On)}`);
+        }
+        if (value.After) {
+            displayText.push(`${translate('common.after')} ${DateUtils.formatToReadableString(value.After)}`);
+        }
+        if (value.Before) {
+            displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
+        }
+        if (hasRange) {
+            const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
+            let rangeDisplay = '';
+            if (rangeBoundaries.from && rangeBoundaries.to) {
+                rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
+            } else if (singleBoundary) {
+                rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
             }
-
-            if (hasRange) {
-                const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
-                let rangeDisplay = '';
-                if (rangeBoundaries.from && rangeBoundaries.to) {
-                    rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
-                } else if (singleBoundary) {
-                    rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
-                }
-                if (rangeDisplay) {
-                    displayText.push(`${translate('common.range')}: ${rangeDisplay}`);
-                }
+            if (rangeDisplay) {
+                displayText.push(`${translate('common.range')}: ${rangeDisplay}`);
             }
+        }
 
-            return [value, displayText];
-        },
-        [translate],
-    );
-
-    const [date, displayDate] = useMemo(
-        () =>
-            createDateDisplayValue({
-                on: searchAdvancedFiltersForm.dateOn,
-                after: searchAdvancedFiltersForm.dateAfter,
-                before: searchAdvancedFiltersForm.dateBefore,
-                range: searchAdvancedFiltersForm.dateRange,
-            }),
-        [searchAdvancedFiltersForm.dateOn, searchAdvancedFiltersForm.dateAfter, searchAdvancedFiltersForm.dateBefore, searchAdvancedFiltersForm.dateRange, createDateDisplayValue],
-    );
-
-    const [posted, displayPosted] = useMemo(
-        () =>
-            createDateDisplayValue({
-                on: searchAdvancedFiltersForm.postedOn,
-                after: searchAdvancedFiltersForm.postedAfter,
-                before: searchAdvancedFiltersForm.postedBefore,
-                range: searchAdvancedFiltersForm.postedRange,
-            }),
-        [searchAdvancedFiltersForm.postedOn, searchAdvancedFiltersForm.postedAfter, searchAdvancedFiltersForm.postedBefore, searchAdvancedFiltersForm.postedRange, createDateDisplayValue],
-    );
-
-    const [withdrawn, displayWithdrawn] = useMemo(
-        () =>
-            createDateDisplayValue({
-                on: searchAdvancedFiltersForm.withdrawnOn,
-                after: searchAdvancedFiltersForm.withdrawnAfter,
-                before: searchAdvancedFiltersForm.withdrawnBefore,
-                range: searchAdvancedFiltersForm.withdrawnRange,
-            }),
-        [
-            searchAdvancedFiltersForm.withdrawnOn,
-            searchAdvancedFiltersForm.withdrawnAfter,
-            searchAdvancedFiltersForm.withdrawnBefore,
-            searchAdvancedFiltersForm.withdrawnRange,
-            createDateDisplayValue,
-        ],
-    );
+        return [value, displayText];
+    };
 
-    const [withdrawalTypeOptions, withdrawalType] = useMemo(() => {
-        const options = getWithdrawalTypeOptions(translate);
-        const value = options.find((option) => option.value === searchAdvancedFiltersForm.withdrawalType) ?? null;
-        return [options, value];
-    }, [translate, searchAdvancedFiltersForm.withdrawalType]);
+    const [date, displayDate] = createDateDisplayValue({
+        on: searchAdvancedFiltersForm.dateOn,
+        after: searchAdvancedFiltersForm.dateAfter,
+        before: searchAdvancedFiltersForm.dateBefore,
+        range: searchAdvancedFiltersForm.dateRange,
+    });
+
+    const [posted, displayPosted] = createDateDisplayValue({
+        on: searchAdvancedFiltersForm.postedOn,
+        after: searchAdvancedFiltersForm.postedAfter,
+        before: searchAdvancedFiltersForm.postedBefore,
+        range: searchAdvancedFiltersForm.postedRange,
+    });
+
+    const [withdrawn, displayWithdrawn] = createDateDisplayValue({
+        on: searchAdvancedFiltersForm.withdrawnOn,
+        after: searchAdvancedFiltersForm.withdrawnAfter,
+        before: searchAdvancedFiltersForm.withdrawnBefore,
+        range: searchAdvancedFiltersForm.withdrawnRange,
+    });
+
+    const withdrawalTypeOptions = getWithdrawalTypeOptions(translate);
+    const withdrawalType = withdrawalTypeOptions.find((option) => option.value === searchAdvancedFiltersForm.withdrawalType) ?? null;
     const activeAdminPolicies = useSortedActiveAdminPolicies();
 
-    const updateFilterForm = useCallback(
-        (values: Partial<SearchAdvancedFiltersForm>) => {
-            const updatedFilterFormValues: Partial<SearchAdvancedFiltersForm> = {
-                ...searchAdvancedFiltersForm,
-                ...values,
-            };
-
-            // If the type has changed, reset the status so we dont have an invalid status selected
-            if (updatedFilterFormValues.type !== searchAdvancedFiltersForm.type) {
-                updatedFilterFormValues.columns = [];
-                updatedFilterFormValues.status = CONST.SEARCH.STATUS.EXPENSE.ALL;
-                // Filter out invalid "has" values for the new type
-                updatedFilterFormValues.has = filterValidHasValues(updatedFilterFormValues.has, updatedFilterFormValues.type, translate);
-            }
+    const updateFilterForm = (values: Partial<SearchAdvancedFiltersForm>) => {
+        const updatedFilterFormValues: Partial<SearchAdvancedFiltersForm> = {
+            ...searchAdvancedFiltersForm,
+            ...values,
+        };
+
+        // If the type has changed, reset the status so we dont have an invalid status selected
+        if (updatedFilterFormValues.type !== searchAdvancedFiltersForm.type) {
+            updatedFilterFormValues.columns = [];
+            updatedFilterFormValues.status = CONST.SEARCH.STATUS.EXPENSE.ALL;
+            // Filter out invalid "has" values for the new type
+            updatedFilterFormValues.has = filterValidHasValues(updatedFilterFormValues.has, updatedFilterFormValues.type, translate);
+        }
 
-            if (updatedFilterFormValues.groupBy !== searchAdvancedFiltersForm.groupBy) {
-                updatedFilterFormValues.columns = [];
-            }
+        if (updatedFilterFormValues.groupBy !== searchAdvancedFiltersForm.groupBy) {
+            updatedFilterFormValues.columns = [];
+        }
 
-            // Preserve the current sortBy, sortOrder, and limit from queryJSON when updating filters
-            let queryString = buildQueryStringFromFilterFormValues(updatedFilterFormValues, {
-                sortBy: queryJSON.sortBy,
-                sortOrder: queryJSON.sortOrder,
-                limit: queryJSON.limit,
-            });
+        // Preserve the current sortBy, sortOrder, and limit from queryJSON when updating filters
+        let queryString = buildQueryStringFromFilterFormValues(updatedFilterFormValues, {
+            sortBy: queryJSON.sortBy,
+            sortOrder: queryJSON.sortOrder,
+            limit: queryJSON.limit,
+        });
 
-            if (updatedFilterFormValues.groupBy !== searchAdvancedFiltersForm.groupBy) {
-                queryString = getQueryWithUpdatedValues(queryString, true) ?? '';
-            }
-            if (!queryString) {
-                return;
-            }
+        if (updatedFilterFormValues.groupBy !== searchAdvancedFiltersForm.groupBy) {
+            queryString = getQueryWithUpdatedValues(queryString, true) ?? '';
+        }
+        if (!queryString) {
+            return;
+        }
 
-            close(() => {
-                // We want to explicitly clear stale rawQuery since it's only used for manually typed-in queries.
-                Navigation.setParams({q: queryString, rawQuery: undefined});
-            });
-        },
-        [searchAdvancedFiltersForm, queryJSON.sortBy, queryJSON.sortOrder, queryJSON.limit, translate],
-    );
+        close(() => {
+            // We want to explicitly clear stale rawQuery since it's only used for manually typed-in queries.
+            Navigation.setParams({q: queryString, rawQuery: undefined});
+        });
+    };
 
-    const openAdvancedFilters = useCallback(() => {
+    const openAdvancedFilters = () => {
         updateAdvancedFilters(filterFormValues);
         Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
-    }, [filterFormValues]);
+    };
 
     const openSearchColumns = () => {
         Navigation.navigate(ROUTES.SEARCH_COLUMNS);
     };
 
-    const typeComponent = useCallback(
-        ({closeOverlay}: PopoverComponentProps) => {
-            return (
-                <SingleSelectPopup
-                    label={translate('common.type')}
-                    value={type}
-                    items={typeOptions}
-                    closeOverlay={closeOverlay}
-                    onChange={(item) => updateFilterForm({type: item?.value ?? CONST.SEARCH.DATA_TYPES.EXPENSE})}
-                />
-            );
-        },
-        [translate, typeOptions, type, updateFilterForm],
+    const typeComponent = ({closeOverlay}: PopoverComponentProps) => (
+        <SingleSelectPopup
+            label={translate('common.type')}
+            value={type}
+            items={typeOptions}
+            closeOverlay={closeOverlay}
+            onChange={(item) => updateFilterForm({type: item?.value ?? CONST.SEARCH.DATA_TYPES.EXPENSE})}
+        />
     );
 
-    const groupByComponent = useCallback(
-        ({closeOverlay}: PopoverComponentProps) => {
-            return (
-                <SingleSelectPopup
-                    label={translate('search.groupBy')}
-                    items={groupByOptions}
-                    value={groupBy}
-                    closeOverlay={closeOverlay}
-                    onChange={(item) => {
-                        const newValue = item?.value;
-                        if (!newValue) {
-                            // groupCurrency depends on groupBy. Without groupBy groupCurrency makes no sense
-                            updateFilterForm({groupBy: undefined, groupCurrency: undefined});
-                        } else {
-                            updateFilterForm({groupBy: newValue});
-                        }
-                    }}
-                />
-            );
-        },
-        [translate, groupByOptions, groupBy, updateFilterForm],
+    const groupByComponent = ({closeOverlay}: PopoverComponentProps) => (
+        <SingleSelectPopup
+            label={translate('search.groupBy')}
+            items={groupByOptions}
+            value={groupBy}
+            closeOverlay={closeOverlay}
+            onChange={(item) => {
+                const newValue = item?.value;
+                if (!newValue) {
+                    // groupCurrency depends on groupBy. Without groupBy groupCurrency makes no sense
+                    updateFilterForm({groupBy: undefined, groupCurrency: undefined});
+                } else {
+                    updateFilterForm({groupBy: newValue});
+                }
+            }}
+        />
     );
 
-    const viewComponent = useCallback(
-        ({closeOverlay}: PopoverComponentProps) => {
-            return (
-                <SingleSelectPopup
-                    label={translate('search.view.label')}
-                    items={viewOptions}
-                    value={viewValue}
-                    closeOverlay={closeOverlay}
-                    onChange={(item) => updateFilterForm({view: item?.value ?? CONST.SEARCH.VIEW.TABLE})}
-                />
-            );
-        },
-        [translate, viewOptions, viewValue, updateFilterForm],
+    const viewComponent = ({closeOverlay}: PopoverComponentProps) => (
+        <SingleSelectPopup
+            label={translate('search.view.label')}
+            items={viewOptions}
+            value={viewValue}
+            closeOverlay={closeOverlay}
+            onChange={(item) => updateFilterForm({view: item?.value ?? CONST.SEARCH.VIEW.TABLE})}
+        />
     );
 
-    const groupCurrencyComponent = useCallback(
-        ({closeOverlay}: PopoverComponentProps) => {
-            return (
-                <SingleSelectPopup
-                    label={translate('common.groupCurrency')}
-                    items={groupCurrencyOptions}
-                    value={groupCurrency}
-                    closeOverlay={closeOverlay}
-                    onChange={(item) => updateFilterForm({groupCurrency: item?.value})}
-                    isSearchable
-                    searchPlaceholder={translate('common.groupCurrency')}
-                />
-            );
-        },
-        [translate, groupCurrencyOptions, groupCurrency, updateFilterForm],
+    const groupCurrencyComponent = ({closeOverlay}: PopoverComponentProps) => (
+        <SingleSelectPopup
+            label={translate('common.groupCurrency')}
+            items={groupCurrencyOptions}
+            value={groupCurrency}
+            closeOverlay={closeOverlay}
+            onChange={(item) => updateFilterForm({groupCurrency: item?.value})}
+            isSearchable
+            searchPlaceholder={translate('common.groupCurrency')}
+        />
     );
 
-    const feedComponent = useCallback(
-        (props: PopoverComponentProps) => {
-            const updateFeedFilterForm = (items: Array<MultiSelectItem<string>>) => {
-                updateFilterForm({feed: items.map((item) => item.value)});
-            };
-
-            return (
-                <MultiSelectFilterPopup
-                    closeOverlay={props.closeOverlay}
-                    translationKey="search.filters.feed"
-                    items={feedOptions}
-                    value={feed}
-                    onChangeCallback={updateFeedFilterForm}
-                />
-            );
-        },
-        [feed, feedOptions, updateFilterForm],
+    const updateFeedFilterForm = (items: Array<MultiSelectItem<string>>) => {
+        updateFilterForm({feed: items.map((item) => item.value)});
+    };
+    const feedComponent = (props: PopoverComponentProps) => (
+        <MultiSelectFilterPopup
+            closeOverlay={props.closeOverlay}
+            translationKey="search.filters.feed"
+            items={feedOptions}
+            value={feed}
+            onChangeCallback={updateFeedFilterForm}
+        />
     );
 
-    const datePickerComponent = useCallback(
-        (props: PopoverComponentProps) => (
-            <DatePickerFilterPopup
-                closeOverlay={props.closeOverlay}
-                setPopoverWidth={props.setPopoverWidth}
-                filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE}
-                value={date}
-                translationKey="common.date"
-                updateFilterForm={updateFilterForm}
-            />
-        ),
-        [date, updateFilterForm],
+    const datePickerComponent = (props: PopoverComponentProps) => (
+        <DatePickerFilterPopup
+            closeOverlay={props.closeOverlay}
+            setPopoverWidth={props.setPopoverWidth}
+            filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE}
+            value={date}
+            translationKey="common.date"
+            updateFilterForm={updateFilterForm}
+        />
     );
 
-    const postedPickerComponent = useCallback(
-        (props: PopoverComponentProps) => (
-            <DatePickerFilterPopup
-                closeOverlay={props.closeOverlay}
-                setPopoverWidth={props.setPopoverWidth}
-                filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED}
-                value={posted}
-                translationKey="search.filters.posted"
-                updateFilterForm={updateFilterForm}
-            />
-        ),
-        [posted, updateFilterForm],
+    const postedPickerComponent = (props: PopoverComponentProps) => (
+        <DatePickerFilterPopup
+            closeOverlay={props.closeOverlay}
+            setPopoverWidth={props.setPopoverWidth}
+            filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED}
+            value={posted}
+            translationKey="search.filters.posted"
+            updateFilterForm={updateFilterForm}
+        />
     );
 
-    const withdrawnPickerComponent = useCallback(
-        (props: PopoverComponentProps) => (
-            <DatePickerFilterPopup
-                closeOverlay={props.closeOverlay}
-                setPopoverWidth={props.setPopoverWidth}
-                filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN}
-                value={withdrawn}
-                translationKey="search.filters.withdrawn"
-                updateFilterForm={updateFilterForm}
-            />
-        ),
-        [withdrawn, updateFilterForm],
+    const withdrawnPickerComponent = (props: PopoverComponentProps) => (
+        <DatePickerFilterPopup
+            closeOverlay={props.closeOverlay}
+            setPopoverWidth={props.setPopoverWidth}
+            filterKey={CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN}
+            value={withdrawn}
+            translationKey="search.filters.withdrawn"
+            updateFilterForm={updateFilterForm}
+        />
     );
 
-    const withdrawalTypeComponent = useCallback(
-        ({closeOverlay}: PopoverComponentProps) => {
-            return (
-                <SingleSelectPopup
-                    label={translate('search.withdrawalType')}
-                    items={withdrawalTypeOptions}
-                    value={withdrawalType}
-                    closeOverlay={closeOverlay}
-                    onChange={(item) => updateFilterForm({withdrawalType: item?.value})}
-                />
-            );
-        },
-        [translate, withdrawalTypeOptions, withdrawalType, updateFilterForm],
+    const withdrawalTypeComponent = ({closeOverlay}: PopoverComponentProps) => (
+        <SingleSelectPopup
+            label={translate('search.withdrawalType')}
+            items={withdrawalTypeOptions}
+            value={withdrawalType}
+            closeOverlay={closeOverlay}
+            onChange={(item) => updateFilterForm({withdrawalType: item?.value})}
+        />
     );
 
-    const statusComponent = useCallback(
-        (props: PopoverComponentProps) => {
-            const updateStatusFilterForm = (selectedItems: Array<MultiSelectItem<SingularSearchStatus>>) => {
-                const newStatus = selectedItems.length ? selectedItems.map((i) => i.value) : CONST.SEARCH.STATUS.EXPENSE.ALL;
-                updateFilterForm({status: newStatus});
-            };
-
-            return (
-                <MultiSelectFilterPopup
-                    closeOverlay={props.closeOverlay}
-                    translationKey="common.status"
-                    items={statusOptions}
-                    value={status}
-                    onChangeCallback={updateStatusFilterForm}
-                />
-            );
-        },
-        [status, statusOptions, updateFilterForm],
+    const updateStatusFilterForm = (selectedItems: Array<MultiSelectItem<SingularSearchStatus>>) => {
+        const newStatus = selectedItems.length ? selectedItems.map((i) => i.value) : CONST.SEARCH.STATUS.EXPENSE.ALL;
+        updateFilterForm({status: newStatus});
+    };
+    const statusComponent = (props: PopoverComponentProps) => (
+        <MultiSelectFilterPopup
+            closeOverlay={props.closeOverlay}
+            translationKey="common.status"
+            items={statusOptions}
+            value={status}
+            onChangeCallback={updateStatusFilterForm}
+        />
     );
 
-    const hasComponent = useCallback(
-        (props: PopoverComponentProps) => {
-            const updateHasFilterForm = (selectedItems: Array<MultiSelectItem<string>>) => {
-                updateFilterForm({has: selectedItems.map((item) => item.value)});
-            };
-
-            return (
-                <MultiSelectFilterPopup
-                    closeOverlay={props.closeOverlay}
-                    translationKey="search.has"
-                    items={hasOptions}
-                    value={has}
-                    onChangeCallback={updateHasFilterForm}
-                />
-            );
-        },
-        [has, hasOptions, updateFilterForm],
+    const updateHasFilterForm = (selectedItems: Array<MultiSelectItem<string>>) => {
+        updateFilterForm({has: selectedItems.map((item) => item.value)});
+    };
+    const hasComponent = (props: PopoverComponentProps) => (
+        <MultiSelectFilterPopup
+            closeOverlay={props.closeOverlay}
+            translationKey="search.has"
+            items={hasOptions}
+            value={has}
+            onChangeCallback={updateHasFilterForm}
+        />
     );
 
-    const isComponent = useCallback(
-        (props: PopoverComponentProps) => {
-            const updateIsFilterForm = (selectedItems: Array<MultiSelectItem<string>>) => {
-                updateFilterForm({is: selectedItems.map((item) => item.value)});
-            };
-
-            return (
-                <MultiSelectFilterPopup
-                    closeOverlay={props.closeOverlay}
-                    translationKey="search.filters.is"
-                    items={isOptions}
-                    value={is}
-                    onChangeCallback={updateIsFilterForm}
-                />
-            );
-        },
-        [is, isOptions, updateFilterForm],
+    const updateIsFilterForm = (selectedItems: Array<MultiSelectItem<string>>) => {
+        updateFilterForm({is: selectedItems.map((item) => item.value)});
+    };
+    const isComponent = (props: PopoverComponentProps) => (
+        <MultiSelectFilterPopup
+            closeOverlay={props.closeOverlay}
+            translationKey="search.filters.is"
+            items={isOptions}
+            value={is}
+            onChangeCallback={updateIsFilterForm}
+        />
     );
 
-    const userPickerComponent = useCallback(
-        ({closeOverlay}: PopoverComponentProps) => {
-            const value = searchAdvancedFiltersForm.from ?? [];
+    const userPickerComponent = ({closeOverlay}: PopoverComponentProps) => {
+        const value = searchAdvancedFiltersForm.from ?? [];
 
-            return (
-                <UserSelectPopup
-                    value={value}
-                    closeOverlay={closeOverlay}
-                    onChange={(selectedUsers) => updateFilterForm({from: selectedUsers})}
-                />
-            );
-        },
-        [searchAdvancedFiltersForm.from, updateFilterForm],
-    );
+        return (
+            <UserSelectPopup
+                value={value}
+                closeOverlay={closeOverlay}
+                onChange={(selectedUsers) => updateFilterForm({from: selectedUsers})}
+            />
+        );
+    };
 
-    const handleWorkspaceChange = useCallback(
-        (items: Array<MultiSelectItem<string>>) => {
-            updateFilterForm({policyID: items.map((item) => item.value)});
-        },
-        [updateFilterForm],
-    );
+    const handleWorkspaceChange = (items: Array<MultiSelectItem<string>>) => {
+        updateFilterForm({policyID: items.map((item) => item.value)});
+    };
 
-    const workspaceComponent = useCallback(
-        ({closeOverlay}: PopoverComponentProps) => {
-            return (
-                <MultiSelectPopup
-                    label={translate('workspace.common.workspace')}
-                    items={workspaceOptions}
-                    value={selectedWorkspaceOptions}
-                    closeOverlay={closeOverlay}
-                    onChange={handleWorkspaceChange}
-                    isSearchable={shouldShowWorkspaceSearchInput}
-                />
-            );
-        },
-        [workspaceOptions, selectedWorkspaceOptions, handleWorkspaceChange, shouldShowWorkspaceSearchInput, translate],
+    const workspaceComponent = ({closeOverlay}: PopoverComponentProps) => (
+        <MultiSelectPopup
+            label={translate('workspace.common.workspace')}
+            items={workspaceOptions}
+            value={selectedWorkspaceOptions}
+            closeOverlay={closeOverlay}
+            onChange={handleWorkspaceChange}
+            isSearchable={shouldShowWorkspaceSearchInput}
+        />
     );
 
-    const workspaceValue = useMemo(() => selectedWorkspaceOptions.map((option) => option.text), [selectedWorkspaceOptions]);
+    const workspaceValue = selectedWorkspaceOptions.map((option) => option.text);
 
     /**
      * Builds the list of all filter chips to be displayed in the
      * filter bar
      */
-    const filters = useMemo<FilterItem[]>(() => {
-        const fromValue = searchAdvancedFiltersForm.from?.map((currentAccountID) => getDisplayNameOrDefault(personalDetails?.[currentAccountID], currentAccountID, false)) ?? [];
-
-        const shouldDisplayGroupByFilter = !!groupBy?.value;
-        const shouldDisplayGroupCurrencyFilter = shouldDisplayGroupByFilter && hasMultipleOutputCurrency;
-        const shouldDisplayFeedFilter = feedOptions.length > 1 && !!searchAdvancedFiltersForm.feed;
-        const shouldDisplayPostedFilter =
-            !!searchAdvancedFiltersForm.feed &&
-            (!!searchAdvancedFiltersForm.postedOn || !!searchAdvancedFiltersForm.postedAfter || !!searchAdvancedFiltersForm.postedBefore || !!searchAdvancedFiltersForm.postedRange);
-        const shouldDisplayWithdrawalTypeFilter = !!searchAdvancedFiltersForm.withdrawalType;
-        const shouldDisplayWithdrawnFilter =
-            !!searchAdvancedFiltersForm.withdrawnOn ||
-            !!searchAdvancedFiltersForm.withdrawnAfter ||
-            !!searchAdvancedFiltersForm.withdrawnBefore ||
-            !!searchAdvancedFiltersForm.withdrawnRange;
-
-        const filterList = [
-            {
-                label: translate('common.type'),
-                PopoverComponent: typeComponent,
-                value: type?.text ?? null,
-                filterKey: FILTER_KEYS.TYPE,
-                sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_TYPE,
-            },
-            ...(shouldDisplayGroupByFilter
-                ? [
-                      {
-                          label: translate('search.groupBy'),
-                          PopoverComponent: groupByComponent,
-                          value: groupBy?.text ?? null,
-                          filterKey: FILTER_KEYS.GROUP_BY,
-                          sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_GROUP_BY,
-                      },
-                  ]
-                : []),
-            ...(shouldDisplayGroupCurrencyFilter
-                ? [
-                      {
-                          label: translate('common.groupCurrency'),
-                          PopoverComponent: groupCurrencyComponent,
-                          value: groupCurrency?.value ?? null,
-                          filterKey: FILTER_KEYS.GROUP_CURRENCY,
-                          sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_GROUP_CURRENCY,
-                      },
-                  ]
-                : []),
-            ...(shouldDisplayFeedFilter
-                ? [
-                      {
-                          label: translate('search.filters.feed'),
-                          PopoverComponent: feedComponent,
-                          value: feed.map((option) => option.text),
-                          filterKey: FILTER_KEYS.FEED,
-                          sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_FEED,
-                      },
-                  ]
-                : []),
-            ...(shouldDisplayPostedFilter
-                ? [
-                      {
-                          label: translate('search.filters.posted'),
-                          PopoverComponent: postedPickerComponent,
-                          value: displayPosted,
-                          filterKey: FILTER_KEYS.POSTED_ON,
-                          sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_POSTED,
-                      },
-                  ]
-                : []),
-            ...(shouldDisplayWithdrawalTypeFilter
-                ? [
-                      {
-                          label: translate('search.withdrawalType'),
-                          PopoverComponent: withdrawalTypeComponent,
-                          value: withdrawalType?.text ?? null,
-                          filterKey: FILTER_KEYS.WITHDRAWAL_TYPE,
-                          sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_WITHDRAWAL_TYPE,
-                      },
-                  ]
-                : []),
-            ...(shouldDisplayWithdrawnFilter
-                ? [
-                      {
-                          label: translate('search.filters.withdrawn'),
-                          PopoverComponent: withdrawnPickerComponent,
-                          value: displayWithdrawn,
-                          filterKey: FILTER_KEYS.WITHDRAWN_ON,
-                          sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_WITHDRAWN,
-                      },
-                  ]
-                : []),
-            {
-                label: translate('common.status'),
-                PopoverComponent: statusComponent,
-                value: status.map((option) => option.text),
-                filterKey: FILTER_KEYS.STATUS,
-                sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_STATUS,
-            },
-            ...(type?.value === CONST.SEARCH.DATA_TYPES.CHAT
-                ? [
-                      {
-                          label: translate('search.has'),
-                          PopoverComponent: hasComponent,
-                          value: has.map((option) => option.text),
-                          filterKey: FILTER_KEYS.HAS,
-                          sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_HAS,
-                      },
-                  ]
-                : []),
-            ...(type?.value === CONST.SEARCH.DATA_TYPES.CHAT
-                ? [
-                      {
-                          label: translate('search.filters.is'),
-                          PopoverComponent: isComponent,
-                          value: is.map((option) => option.text),
-                          filterKey: FILTER_KEYS.IS,
-                          sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_IS,
-                      },
-                  ]
-                : []),
-            {
-                label: translate('common.date'),
-                PopoverComponent: datePickerComponent,
-                value: displayDate,
-                filterKey: FILTER_KEYS.DATE_ON,
-                sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_DATE,
-            },
-            {
-                label: translate('common.from'),
-                PopoverComponent: userPickerComponent,
-                value: fromValue,
-                filterKey: FILTER_KEYS.FROM,
-                sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_FROM,
-            },
-            ...(shouldDisplayWorkspaceFilter
-                ? [
-                      {
-                          label: translate('workspace.common.workspace'),
-                          PopoverComponent: workspaceComponent,
-                          value: workspaceValue,
-                          filterKey: FILTER_KEYS.POLICY_ID,
-                          sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_WORKSPACE,
-                      },
-                  ]
-                : []),
-            ...(shouldDisplayGroupByFilter
-                ? [
-                      {
-                          label: translate('search.view.label'),
-                          PopoverComponent: viewComponent,
-                          value: viewValue?.text ?? null,
-                          filterKey: FILTER_KEYS.VIEW,
-                          sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_VIEW,
-                      },
-                  ]
-                : []),
-        ].filter((filterItem) => isFilterSupported(filterItem.filterKey, type?.value ?? CONST.SEARCH.DATA_TYPES.EXPENSE));
-
-        return filterList;
-    }, [
-        type?.value,
-        type?.text,
-        groupBy?.value,
-        groupBy?.text,
-        viewValue?.text,
-        groupCurrency?.value,
-        withdrawalType?.text,
-        displayDate,
-        displayPosted,
-        displayWithdrawn,
-        searchAdvancedFiltersForm.from,
-        searchAdvancedFiltersForm.feed,
-        searchAdvancedFiltersForm.postedOn,
-        searchAdvancedFiltersForm.postedAfter,
-        searchAdvancedFiltersForm.postedBefore,
-        searchAdvancedFiltersForm.postedRange,
-        searchAdvancedFiltersForm.withdrawalType,
-        searchAdvancedFiltersForm.withdrawnOn,
-        searchAdvancedFiltersForm.withdrawnAfter,
-        searchAdvancedFiltersForm.withdrawnBefore,
-        searchAdvancedFiltersForm.withdrawnRange,
-        translate,
-        hasComponent,
-        isComponent,
-        typeComponent,
-        groupByComponent,
-        viewComponent,
-        groupCurrencyComponent,
-        statusComponent,
-        datePickerComponent,
-        userPickerComponent,
-        postedPickerComponent,
-        withdrawalTypeComponent,
-        withdrawnPickerComponent,
-        status,
-        personalDetails,
-        feed,
-        feedComponent,
-        feedOptions.length,
-        hasMultipleOutputCurrency,
-        has,
-        is,
-        shouldDisplayWorkspaceFilter,
-        workspaceComponent,
-        workspaceValue,
-    ]);
-
-    const hiddenSelectedFilters = useMemo(() => {
+    const fromValue = searchAdvancedFiltersForm.from?.map((currentAccountID) => getDisplayNameOrDefault(personalDetails?.[currentAccountID], currentAccountID, false)) ?? [];
+
+    const shouldDisplayGroupByFilter = !!groupBy?.value;
+    const shouldDisplayGroupCurrencyFilter = shouldDisplayGroupByFilter && hasMultipleOutputCurrency;
+    const shouldDisplayFeedFilter = feedOptions.length > 1 && !!searchAdvancedFiltersForm.feed;
+    const shouldDisplayPostedFilter =
+        !!searchAdvancedFiltersForm.feed &&
+        (!!searchAdvancedFiltersForm.postedOn || !!searchAdvancedFiltersForm.postedAfter || !!searchAdvancedFiltersForm.postedBefore || !!searchAdvancedFiltersForm.postedRange);
+    const shouldDisplayWithdrawalTypeFilter = !!searchAdvancedFiltersForm.withdrawalType;
+    const shouldDisplayWithdrawnFilter =
+        !!searchAdvancedFiltersForm.withdrawnOn || !!searchAdvancedFiltersForm.withdrawnAfter || !!searchAdvancedFiltersForm.withdrawnBefore || !!searchAdvancedFiltersForm.withdrawnRange;
+
+    const filters = [
+        {
+            label: translate('common.type'),
+            PopoverComponent: typeComponent,
+            value: type?.text ?? null,
+            filterKey: FILTER_KEYS.TYPE,
+            sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_TYPE,
+        },
+        ...(shouldDisplayGroupByFilter
+            ? [
+                  {
+                      label: translate('search.groupBy'),
+                      PopoverComponent: groupByComponent,
+                      value: groupBy?.text ?? null,
+                      filterKey: FILTER_KEYS.GROUP_BY,
+                      sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_GROUP_BY,
+                  },
+              ]
+            : []),
+        ...(shouldDisplayGroupCurrencyFilter
+            ? [
+                  {
+                      label: translate('common.groupCurrency'),
+                      PopoverComponent: groupCurrencyComponent,
+                      value: groupCurrency?.value ?? null,
+                      filterKey: FILTER_KEYS.GROUP_CURRENCY,
+                      sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_GROUP_CURRENCY,
+                  },
+              ]
+            : []),
+        ...(shouldDisplayFeedFilter
+            ? [
+                  {
+                      label: translate('search.filters.feed'),
+                      PopoverComponent: feedComponent,
+                      value: feed.map((option) => option.text),
+                      filterKey: FILTER_KEYS.FEED,
+                      sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_FEED,
+                  },
+              ]
+            : []),
+        ...(shouldDisplayPostedFilter
+            ? [
+                  {
+                      label: translate('search.filters.posted'),
+                      PopoverComponent: postedPickerComponent,
+                      value: displayPosted,
+                      filterKey: FILTER_KEYS.POSTED_ON,
+                      sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_POSTED,
+                  },
+              ]
+            : []),
+        ...(shouldDisplayWithdrawalTypeFilter
+            ? [
+                  {
+                      label: translate('search.withdrawalType'),
+                      PopoverComponent: withdrawalTypeComponent,
+                      value: withdrawalType?.text ?? null,
+                      filterKey: FILTER_KEYS.WITHDRAWAL_TYPE,
+                      sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_WITHDRAWAL_TYPE,
+                  },
+              ]
+            : []),
+        ...(shouldDisplayWithdrawnFilter
+            ? [
+                  {
+                      label: translate('search.filters.withdrawn'),
+                      PopoverComponent: withdrawnPickerComponent,
+                      value: displayWithdrawn,
+                      filterKey: FILTER_KEYS.WITHDRAWN_ON,
+                      sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_WITHDRAWN,
+                  },
+              ]
+            : []),
+        {
+            label: translate('common.status'),
+            PopoverComponent: statusComponent,
+            value: status.map((option) => option.text),
+            filterKey: FILTER_KEYS.STATUS,
+            sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_STATUS,
+        },
+        ...(type?.value === CONST.SEARCH.DATA_TYPES.CHAT
+            ? [
+                  {
+                      label: translate('search.has'),
+                      PopoverComponent: hasComponent,
+                      value: has.map((option) => option.text),
+                      filterKey: FILTER_KEYS.HAS,
+                      sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_HAS,
+                  },
+              ]
+            : []),
+        ...(type?.value === CONST.SEARCH.DATA_TYPES.CHAT
+            ? [
+                  {
+                      label: translate('search.filters.is'),
+                      PopoverComponent: isComponent,
+                      value: is.map((option) => option.text),
+                      filterKey: FILTER_KEYS.IS,
+                      sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_IS,
+                  },
+              ]
+            : []),
+        {
+            label: translate('common.date'),
+            PopoverComponent: datePickerComponent,
+            value: displayDate,
+            filterKey: FILTER_KEYS.DATE_ON,
+            sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_DATE,
+        },
+        {
+            label: translate('common.from'),
+            PopoverComponent: userPickerComponent,
+            value: fromValue,
+            filterKey: FILTER_KEYS.FROM,
+            sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_FROM,
+        },
+        ...(shouldDisplayWorkspaceFilter
+            ? [
+                  {
+                      label: translate('workspace.common.workspace'),
+                      PopoverComponent: workspaceComponent,
+                      value: workspaceValue,
+                      filterKey: FILTER_KEYS.POLICY_ID,
+                      sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_WORKSPACE,
+                  },
+              ]
+            : []),
+        ...(shouldDisplayGroupByFilter
+            ? [
+                  {
+                      label: translate('search.view.label'),
+                      PopoverComponent: viewComponent,
+                      value: viewValue?.text ?? null,
+                      filterKey: FILTER_KEYS.VIEW,
+                      sentryLabel: CONST.SENTRY_LABEL.SEARCH.FILTER_VIEW,
+                  },
+              ]
+            : []),
+    ].filter((filterItem) => isFilterSupported(filterItem.filterKey, type?.value ?? CONST.SEARCH.DATA_TYPES.EXPENSE));
+
+    const hiddenSelectedFilters = (() => {
         const advancedSearchFiltersKeys = typeFiltersKeys.flat();
-        const exposedFiltersKeys = new Set(
+        const exposedFiltersKeys = new Set<string>(
             filters.flatMap((filter) => {
                 const dateFilterKey = DATE_FILTER_KEYS.find((key) => filter.filterKey.startsWith(key));
                 if (dateFilterKey) {
@@ -890,17 +708,17 @@ function SearchFiltersBar({
             }),
         );
 
-        const hiddenFilters = advancedSearchFiltersKeys.filter((key) => !exposedFiltersKeys.has(key as SearchAdvancedFiltersKey));
+        const hiddenFilters = advancedSearchFiltersKeys.filter((key) => !exposedFiltersKeys.has(key));
         const hasReportFields = Object.keys(filterFormValues).some((key) => key.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX) && !key.startsWith(CONST.SEARCH.REPORT_FIELD.NOT_PREFIX));
 
         return hiddenFilters.filter((key) => {
             const dateFilterKey = DATE_FILTER_KEYS.find((dateKey) => key === dateKey);
             if (dateFilterKey) {
                 return (
-                    searchAdvancedFiltersForm[`${dateFilterKey}On`] ??
-                    searchAdvancedFiltersForm[`${dateFilterKey}After`] ??
-                    searchAdvancedFiltersForm[`${dateFilterKey}Before`] ??
-                    searchAdvancedFiltersForm[`${dateFilterKey}Range`]
+                    filterFormValues[`${dateFilterKey}On`] ??
+                    filterFormValues[`${dateFilterKey}After`] ??
+                    filterFormValues[`${dateFilterKey}Before`] ??
+                    filterFormValues[`${dateFilterKey}Range`]
                 );
             }
 
@@ -919,9 +737,9 @@ function SearchFiltersBar({
 
             return filterFormValues[key as SearchAdvancedFiltersKey];
         });
-    }, [filterFormValues, filters, searchAdvancedFiltersForm, typeFiltersKeys]);
+    })();
 
-    const adjustScroll = useCallback((info: {distanceFromEnd: number}) => {
+    const adjustScroll = (info: {distanceFromEnd: number}) => {
         // Workaround for a known React Native bug on Android (https://github.com/facebook/react-native/issues/27504):
         // When the FlatList is scrolled to the end and the last item is deleted, a blank space is left behind.
         // To fix this, we detect when onEndReached is triggered due to an item deletion,
@@ -931,72 +749,50 @@ function SearchFiltersBar({
             return;
         }
         scrollRef.current?.scrollToEnd();
-    }, []);
-
-    const renderFilterItem = useCallback(
-        // eslint-disable-next-line react/no-unused-prop-types
-        ({item}: {item: FilterItem}) => (
-            <DropdownButton
-                label={item.label}
-                value={item.value}
-                PopoverComponent={item.PopoverComponent}
-                sentryLabel={item.sentryLabel}
-            />
-        ),
-        [],
+    };
+
+    const renderFilterItem = ({item}: {item: FilterItem}) => (
+        <DropdownButton
+            label={item.label}
+            value={item.value}
+            PopoverComponent={item.PopoverComponent}
+            sentryLabel={item.sentryLabel}
+        />
     );
 
     const shouldShowColumnsButton = isLargeScreenWidth && (queryJSON.type === CONST.SEARCH.DATA_TYPES.EXPENSE || queryJSON.type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT);
 
-    const filterButtonText = useMemo(
-        () => translate('search.filtersHeader') + (hiddenSelectedFilters.length > 0 ? ` (${hiddenSelectedFilters.length})` : ''),
-        [translate, hiddenSelectedFilters.length],
-    );
-
-    const renderListFooter = useCallback(
-        () => (
-            <View style={[styles.flexRow, styles.gap2]}>
+    const filterButtonText = translate('search.filtersHeader') + (hiddenSelectedFilters.length > 0 ? ` (${hiddenSelectedFilters.length})` : '');
+
+    const renderListFooter = () => (
+        <View style={[styles.flexRow, styles.gap2]}>
+            <Button
+                link
+                small
+                shouldUseDefaultHover={false}
+                text={filterButtonText}
+                iconFill={theme.link}
+                iconHoverFill={theme.linkHover}
+                icon={expensifyIcons.Filter}
+                textStyles={[styles.textMicroBold]}
+                onPress={openAdvancedFilters}
+                sentryLabel={CONST.SENTRY_LABEL.SEARCH.ADVANCED_FILTERS_BUTTON}
+            />
+            {shouldShowColumnsButton && (
                 <Button
                     link
                     small
                     shouldUseDefaultHover={false}
-                    text={filterButtonText}
+                    text={translate('search.columns')}
                     iconFill={theme.link}
                     iconHoverFill={theme.linkHover}
-                    icon={expensifyIcons.Filter}
+                    icon={expensifyIcons.Columns}
                     textStyles={[styles.textMicroBold]}
-                    onPress={openAdvancedFilters}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.ADVANCED_FILTERS_BUTTON}
+                    onPress={openSearchColumns}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.COLUMNS_BUTTON}
                 />
-                {shouldShowColumnsButton && (
-                    <Button
-                        link
-                        small
-                        shouldUseDefaultHover={false}
-                        text={translate('search.columns')}
-                        iconFill={theme.link}
-                        iconHoverFill={theme.linkHover}
-                        icon={expensifyIcons.Columns}
-                        textStyles={[styles.textMicroBold]}
-                        onPress={openSearchColumns}
-                        sentryLabel={CONST.SENTRY_LABEL.SEARCH.COLUMNS_BUTTON}
-                    />
-                )}
-            </View>
-        ),
-        [
-            styles.flexRow,
-            styles.gap2,
-            styles.textMicroBold,
-            filterButtonText,
-            theme.link,
-            theme.linkHover,
-            expensifyIcons.Filter,
-            expensifyIcons.Columns,
-            openAdvancedFilters,
-            shouldShowColumnsButton,
-            translate,
-        ],
+            )}
+        </View>
     );
 
     if (hasErrors) {

From bf5a99d25ac3fef031bd3bbdc85eb9be66df0baf Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 21 Feb 2026 03:51:40 +0530
Subject: [PATCH 43/58] fix: remove redundancy

---
 src/libs/SearchQueryUtils.ts | 121 +----------------------------------
 1 file changed, 3 insertions(+), 118 deletions(-)

diff --git a/src/libs/SearchQueryUtils.ts b/src/libs/SearchQueryUtils.ts
index cf3550d62f6f6..55d0f4ee347fd 100644
--- a/src/libs/SearchQueryUtils.ts
+++ b/src/libs/SearchQueryUtils.ts
@@ -323,7 +323,7 @@ function buildAmountFilterQuery(filterKey: SearchAmountFilterKeys, filterValues:
  */
 function buildFilterValuesString(filterName: string, queryFilters: QueryFilter[]) {
     const delimiter = filterName === CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD ? ' ' : ',';
-    const allowedOps = new Set<string>([CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO, CONST.SEARCH.SYNTAX_OPERATORS.NOT_EQUAL_TO, CONST.SEARCH.SYNTAX_OPERATORS.RANGE]);
+    const allowedOps = new Set<string>([CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO, CONST.SEARCH.SYNTAX_OPERATORS.NOT_EQUAL_TO]);
 
     let filterValueString = '';
     for (const [index, queryFilter] of queryFilters.entries()) {
@@ -575,92 +575,6 @@ function getRangeBoundariesFromFilterValues(values: QueryFilter[]) {
     };
 }
 
-function getRangeBoundariesFromASTValue(value: ASTNode['right']) {
-    const rawValues = (Array.isArray(value) ? value : [value]).map((item) => {
-        if (typeof item === 'string' || typeof item === 'number') {
-            return item.toString();
-        }
-        return '';
-    });
-    const cleanedValues = rawValues.filter(Boolean);
-
-    return {
-        from: cleanedValues.at(0),
-        to: cleanedValues.at(1),
-    };
-}
-
-function buildDateRangeExecutionNode(baseKey: SearchFilterKey, rangeValue: ASTNode['right']) {
-    const {from, to} = getRangeBoundariesFromASTValue(rangeValue);
-    const hasValidFrom = from && isValidDate(from);
-    const hasValidTo = to && isValidDate(to);
-
-    if (!hasValidFrom && !hasValidTo) {
-        return;
-    }
-
-    const fromFilter: ASTNode | undefined = hasValidFrom
-        ? ({
-              operator: CONST.SEARCH.SYNTAX_OPERATORS.GREATER_THAN,
-              left: baseKey,
-              right: from,
-          } as ASTNode)
-        : undefined;
-
-    const toFilter: ASTNode | undefined = hasValidTo
-        ? ({
-              operator: CONST.SEARCH.SYNTAX_OPERATORS.LOWER_THAN,
-              left: baseKey,
-              right: to,
-          } as ASTNode)
-        : undefined;
-
-    if (fromFilter && toFilter) {
-        return {
-            operator: CONST.SEARCH.SYNTAX_OPERATORS.AND,
-            left: fromFilter,
-            right: toFilter,
-        } satisfies ASTNode;
-    }
-
-    return fromFilter ?? toFilter;
-}
-
-function getExecutionFiltersFromQueryFilters(node: ASTNode | undefined): ASTNode | undefined {
-    if (!node) {
-        return;
-    }
-
-    const leftNode = typeof node.left === 'object' ? getExecutionFiltersFromQueryFilters(node.left) : undefined;
-    const rightNode = typeof node.right === 'object' && !Array.isArray(node.right) ? getExecutionFiltersFromQueryFilters(node.right) : undefined;
-
-    if (typeof node.left === 'string') {
-        if (node.operator === CONST.SEARCH.SYNTAX_OPERATORS.RANGE) {
-            return buildDateRangeExecutionNode(node.left as SearchFilterKey, node.right);
-        }
-
-        return {
-            operator: node.operator,
-            left: node.left,
-            right: node.right,
-        };
-    }
-
-    if (!leftNode) {
-        return rightNode;
-    }
-
-    if (!rightNode) {
-        return leftNode;
-    }
-
-    return {
-        operator: node.operator,
-        left: leftNode,
-        right: rightNode,
-    };
-}
-
 /**
  * Parses a given search query string into a structured `SearchQueryJSON` format.
  * This format of query is most commonly shared between components and also sent to backend to retrieve search results.
@@ -698,14 +612,10 @@ function buildSearchQueryJSON(query: SearchQueryString, rawQuery?: SearchQuerySt
         const {parserQuery} = normalizeRangeFiltersForParsing(query);
         const result = parseSearchQuery(parserQuery) as SearchQueryJSON;
         const flatFilters = getFilters(result);
-        const executionFilters = getExecutionFiltersFromQueryFilters(result.filters);
 
         // Add the full input and hash to the results
         result.inputQuery = query;
         result.flatFilters = flatFilters;
-        if (executionFilters) {
-            result.filters = executionFilters;
-        }
 
         if (result.policyID && typeof result.policyID === 'string') {
             // Ensure policyID is always an array for consistency
@@ -1129,7 +1039,6 @@ function buildFilterFormValuesFromQuery(
     cardList: OnyxTypes.CardList | undefined,
     reports: OnyxCollection<OnyxTypes.Report>,
     taxRates: Record<string, string[]>,
-    existingFormValues?: Partial<SearchAdvancedFiltersForm>,
 ) {
     const filters = queryJSON.flatFilters;
     const filtersForm = {} as Partial<SearchAdvancedFiltersForm>;
@@ -1266,7 +1175,6 @@ function buildFilterFormValuesFromQuery(
                 return filter.operator === CONST.SEARCH.SYNTAX_OPERATORS.EQUAL_TO && (isValidDate(filter.value.toString()) || isSearchDatePreset(filter.value.toString()));
             });
             const explicitRange = explicitRangeFilters.get(filterKey);
-            const explicitRangeValue = getRangeQueryValue(explicitRange?.from, explicitRange?.to);
             const rangeBoundariesFromOperator = getRangeBoundariesFromFilterValues(dateRangeFilters);
             const rangeValue = getRangeQueryValue(rangeBoundariesFromOperator.from ?? explicitRange?.from, rangeBoundariesFromOperator.to ?? explicitRange?.to);
             const afterFilterValue = afterFilter?.value.toString();
@@ -1283,18 +1191,7 @@ function buildFilterFormValuesFromQuery(
                 filtersForm[rangeKey] = rangeValue;
                 continue;
             }
-
-            const existingRangeValue = existingFormValues?.[rangeKey];
-            const hasExplicitRange = !!explicitRangeValue;
-            const rangeValueFromCurrentDates = getRangeQueryValue(filtersForm[afterKey], filtersForm[beforeKey]);
-            const shouldPreserveRange =
-                !hasExplicitRange &&
-                !!existingRangeValue &&
-                existingFormValues?.[beforeKey] === filtersForm[beforeKey] &&
-                existingFormValues?.[afterKey] === filtersForm[afterKey] &&
-                existingFormValues?.[onKey] === filtersForm[onKey];
-
-            filtersForm[rangeKey] = shouldPreserveRange ? rangeValueFromCurrentDates || existingRangeValue : undefined;
+            filtersForm[rangeKey] = undefined;
         }
 
         if (AMOUNT_FILTER_KEYS.includes(filterKey as SearchAmountFilterKeys)) {
@@ -1361,7 +1258,6 @@ function buildFilterFormValuesFromQuery(
             }
 
             const explicitRange = explicitRangeFilters.get(filterKey);
-            const explicitRangeValue = getRangeQueryValue(explicitRange?.from, explicitRange?.to);
             const rangeBoundariesFromOperator = getRangeBoundariesFromFilterValues(dateRangeFilters);
             const rangeValue = getRangeQueryValue(rangeBoundariesFromOperator.from ?? explicitRange?.from, rangeBoundariesFromOperator.to ?? explicitRange?.to);
             const dateAfterFilterValue = dateAfterFilter?.value.toString();
@@ -1379,18 +1275,7 @@ function buildFilterFormValuesFromQuery(
                 filtersForm[dateRangeKey] = rangeValue;
                 continue;
             }
-
-            const existingRangeValue = existingFormValues?.[dateRangeKey];
-            const hasExplicitRange = !!explicitRangeValue;
-            const rangeValueFromCurrentDates = getRangeQueryValue(filtersForm[dateAfterKey], filtersForm[dateBeforeKey]);
-            const shouldPreserveRange =
-                !hasExplicitRange &&
-                !!existingRangeValue &&
-                existingFormValues?.[dateBeforeKey] === filtersForm[dateBeforeKey] &&
-                existingFormValues?.[dateAfterKey] === filtersForm[dateAfterKey] &&
-                existingFormValues?.[dateOnKey] === filtersForm[dateOnKey];
-
-            filtersForm[dateRangeKey] = shouldPreserveRange ? rangeValueFromCurrentDates || existingRangeValue : undefined;
+            filtersForm[dateRangeKey] = undefined;
         }
     }
 

From 5e2ee0c7fce3e662ff99cec7b3446c02d88bdbb7 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Sat, 21 Feb 2026 03:58:45 +0530
Subject: [PATCH 44/58] update test file

---
 tests/unit/Search/SearchQueryUtilsTest.ts | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/tests/unit/Search/SearchQueryUtilsTest.ts b/tests/unit/Search/SearchQueryUtilsTest.ts
index f8c42d1a9f2b8..eb1a763d55805 100644
--- a/tests/unit/Search/SearchQueryUtilsTest.ts
+++ b/tests/unit/Search/SearchQueryUtilsTest.ts
@@ -840,7 +840,7 @@ describe('SearchQueryUtils', () => {
             expect(result.dateRange).toBe('2025-03-01,2025-03-10');
         });
 
-        test('drops explicit date range flag when parsed date values no longer match existing form state', () => {
+        test('does not set explicit date range flag when only date boundaries are provided', () => {
             const policyCategories = {};
             const policyTags = {};
             const currencyList = {};
@@ -855,13 +855,7 @@ describe('SearchQueryUtils', () => {
                 throw new Error('Failed to parse query string');
             }
 
-            const existingFormValues: Partial<SearchAdvancedFiltersForm> = {
-                dateAfter: '2025-03-02',
-                dateBefore: '2025-03-10',
-                dateRange: '2025-03-02,2025-03-10',
-            };
-
-            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates, existingFormValues);
+            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates);
 
             expect(result.dateRange).toBeUndefined();
         });
@@ -888,7 +882,7 @@ describe('SearchQueryUtils', () => {
             expect(result['reportFieldRange-start-date']).toBe('2025-03-01,2025-03-10');
         });
 
-        test('drops explicit report field range flag when parsed date values no longer match existing form state', () => {
+        test('does not set explicit report field range flag when only date boundaries are provided', () => {
             const policyCategories = {};
             const policyTags = {};
             const currencyList = {};
@@ -903,13 +897,7 @@ describe('SearchQueryUtils', () => {
                 throw new Error('Failed to parse query string');
             }
 
-            const existingFormValues: Partial<SearchAdvancedFiltersForm> = {
-                'reportFieldAfter-start-date': '2025-03-02',
-                'reportFieldBefore-start-date': '2025-03-10',
-                'reportFieldRange-start-date': '2025-03-02,2025-03-10',
-            };
-
-            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates, existingFormValues);
+            const result = buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTags, currencyList, personalDetails, cardList, reports, taxRates);
 
             expect(result['reportFieldRange-start-date']).toBeUndefined();
         });

From 10f076bd5adf05c1043eb4536a7ea011e31f7f5d Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Tue, 24 Feb 2026 23:53:00 +0530
Subject: [PATCH 45/58] fix typecheck

---
 src/hooks/useFilterFormValues.tsx | 12 ++++++------
 src/pages/Search/SearchPage.tsx   | 18 +++++++++---------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/hooks/useFilterFormValues.tsx b/src/hooks/useFilterFormValues.tsx
index 5673d2cba5f47..3d07ed4d16d6e 100644
--- a/src/hooks/useFilterFormValues.tsx
+++ b/src/hooks/useFilterFormValues.tsx
@@ -15,12 +15,12 @@ const useFilterFormValues = (queryJSON?: SearchQueryJSON) => {
     const personalDetails = usePersonalDetails();
     const {currencyList} = useCurrencyListState();
 
-    const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true});
-    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true});
-    const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true});
-    const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: true});
-    const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES, {canBeMissing: true});
-    const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true});
+    const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST);
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
+    const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
+    const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
     // Helps to avoid unnecessary recalculations when user open report details screen. React Compiler does not provide same result.
     const taxRates = useMemo(() => getAllTaxRates(policies), [policies]);
     const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [workspaceCardFeeds, userCardList]);
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 4aedbcc510437..681bebc63f8b4 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -120,15 +120,15 @@ function SearchPage({route}: SearchPageProps) {
     const allTransactions = useAllTransactions();
     const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const selfDMReport = useSelfDMReport();
-    const [lastPaymentMethods] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {canBeMissing: true});
-    const [personalPolicyID] = useOnyx(ONYXKEYS.PERSONAL_POLICY_ID, {canBeMissing: true});
-    const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST, {canBeMissing: true});
-    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true});
-    const [integrationsExportTemplates] = useOnyx(ONYXKEYS.NVP_INTEGRATION_SERVER_EXPORT_TEMPLATES, {canBeMissing: true});
-    const [csvExportLayouts] = useOnyx(ONYXKEYS.NVP_CSV_EXPORT_LAYOUTS, {canBeMissing: true});
-    const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {canBeMissing: true});
-    const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {canBeMissing: true});
-    const [, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
+    const [lastPaymentMethods] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD);
+    const [personalPolicyID] = useOnyx(ONYXKEYS.PERSONAL_POLICY_ID);
+    const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const [integrationsExportTemplates] = useOnyx(ONYXKEYS.NVP_INTEGRATION_SERVER_EXPORT_TEMPLATES);
+    const [csvExportLayouts] = useOnyx(ONYXKEYS.NVP_CSV_EXPORT_LAYOUTS);
+    const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION);
+    const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
+    const [, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
     const {accountID} = useCurrentUserPersonalDetails();
     const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
 

From 6e98910918e3c3ac17730c2e16cceff861e95e64 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Wed, 25 Feb 2026 08:43:39 +0530
Subject: [PATCH 46/58] fix: esLint

---
 src/pages/Search/SearchPage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 681bebc63f8b4..2a939884d663d 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -395,8 +395,6 @@ function SearchPage({route}: SearchPageProps) {
         selectedReportIDs,
         selectedTransactionReportIDs,
         selectedTransactionsKeys,
-        selectedTransactionReportIDs,
-        selectedReportIDs,
         translate,
         clearSelectedTransactions,
         showConfirmModal,

From 7a6bc0dc92a1aabc0b404d43a33c0453949a3ba1 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 26 Feb 2026 12:23:31 +0530
Subject: [PATCH 47/58] fix: reuse common function

---
 .../SearchPageHeader/SearchFiltersBar.tsx     | 11 ++------
 src/libs/SearchQueryUtils.ts                  | 12 ++++++++
 src/pages/Search/AdvancedSearchFilters.tsx    | 21 ++------------
 .../SearchFiltersReportFieldPage/index.tsx    | 12 ++------
 tests/unit/Search/SearchQueryUtilsTest.ts     | 28 +++++++++++++++++++
 5 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
index 0f4875ef4c586..370ed41587e53 100644
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -42,7 +42,7 @@ import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import {isExpenseReport} from '@libs/ReportUtils';
-import {buildQueryStringFromFilterFormValues, getQueryWithUpdatedValues, getRangeBoundariesFromFormValue, isFilterSupported, isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {buildQueryStringFromFilterFormValues, getDateRangeDisplayValueFromFormValue, getQueryWithUpdatedValues, isFilterSupported, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import {
     filterValidHasValues,
     getDatePresets,
@@ -257,7 +257,6 @@ function SearchFiltersBar({
     const is = isFilterValues ? isOptions.filter((option) => isFilterValues.includes(option.value)) : [];
 
     const createDateDisplayValue = (filterValues: {on?: string; after?: string; before?: string; range?: string}): [SearchDateValues, string[]] => {
-        const rangeBoundaries = getRangeBoundariesFromFormValue(filterValues.range, filterValues.after, filterValues.before);
         const hasRange = !!filterValues.range;
         const value: SearchDateValues = {
             [CONST.SEARCH.DATE_MODIFIERS.ON]: filterValues.on,
@@ -277,13 +276,7 @@ function SearchFiltersBar({
             displayText.push(`${translate('common.before')} ${DateUtils.formatToReadableString(value.Before)}`);
         }
         if (hasRange) {
-            const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
-            let rangeDisplay = '';
-            if (rangeBoundaries.from && rangeBoundaries.to) {
-                rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
-            } else if (singleBoundary) {
-                rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
-            }
+            const rangeDisplay = getDateRangeDisplayValueFromFormValue(filterValues.range, filterValues.after, filterValues.before);
             if (rangeDisplay) {
                 displayText.push(`${translate('common.range')}: ${rangeDisplay}`);
             }
diff --git a/src/libs/SearchQueryUtils.ts b/src/libs/SearchQueryUtils.ts
index c9cbc1b2c6c32..44f9e331b2435 100644
--- a/src/libs/SearchQueryUtils.ts
+++ b/src/libs/SearchQueryUtils.ts
@@ -36,6 +36,7 @@ import arraysEqual from '@src/utils/arraysEqual';
 import {getCardFeedsForDisplay} from './CardFeedUtils';
 import {getCardDescription} from './CardUtils';
 import {convertToBackendAmount, convertToFrontendAmountAsInteger} from './CurrencyUtils';
+import DateUtils from './DateUtils';
 import Log from './Log';
 import {validateAmount} from './MoneyRequestUtils';
 import {getPreservedNavigatorState} from './Navigation/AppNavigator/createSplitNavigator/usePreserveNavigatorState';
@@ -161,6 +162,16 @@ function getRangeBoundariesFromFormValue(rangeValue?: string, fallbackFrom?: str
     };
 }
 
+function getDateRangeDisplayValueFromFormValue(rangeValue?: string, fallbackFrom?: string, fallbackTo?: string) {
+    const rangeBoundaries = getRangeBoundariesFromFormValue(rangeValue, fallbackFrom, fallbackTo);
+    if (rangeBoundaries.from && rangeBoundaries.to) {
+        return DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
+    }
+
+    const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
+    return singleBoundary ? DateUtils.formatToReadableString(singleBoundary) : '';
+}
+
 function parseRangeQueryValue(rangeValue?: string) {
     if (!rangeValue) {
         return {
@@ -1872,6 +1883,7 @@ function shouldSkipSuggestedSearchNavigation(queryJSON?: SearchQueryJSON) {
 }
 
 export {
+    getDateRangeDisplayValueFromFormValue,
     getRangeBoundariesFromFormValue,
     getRangeQueryValue,
     parseRangeQueryValue,
diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
index 925359c06c0ff..fb1e4617f8d9a 100644
--- a/src/pages/Search/AdvancedSearchFilters.tsx
+++ b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -23,7 +23,6 @@ import {saveSearch} from '@libs/actions/Search';
 import {createCardFeedKey, getCardFeedKey, getCardFeedNamesWithType, getWorkspaceCardFeedKey} from '@libs/CardFeedUtils';
 import {getCardDescription} from '@libs/CardUtils';
 import {convertToDisplayStringWithoutCurrency} from '@libs/CurrencyUtils';
-import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {createDisplayName} from '@libs/PersonalDetailsUtils';
 import {getAllTaxRates, getCleanedTagName} from '@libs/PolicyUtils';
@@ -33,7 +32,7 @@ import {
     buildQueryStringFromFilterFormValues,
     buildSearchQueryJSON,
     getCurrentSearchQueryJSON,
-    getRangeBoundariesFromFormValue,
+    getDateRangeDisplayValueFromFormValue,
     isCannedSearchQuery,
     isSearchDatePreset,
     sortOptionsWithEmptyValue,
@@ -355,14 +354,7 @@ function getFilterDisplayTitle(
         }
 
         if (dateRange) {
-            const rangeBoundaries = getRangeBoundariesFromFormValue(dateRange, dateAfter, dateBefore);
-            const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
-            let rangeDisplay = '';
-            if (rangeBoundaries.from && rangeBoundaries.to) {
-                rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
-            } else if (singleBoundary) {
-                rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
-            }
+            const rangeDisplay = getDateRangeDisplayValueFromFormValue(dateRange, dateAfter, dateBefore);
             if (rangeDisplay) {
                 dateValue.push(`${translate('common.range')}: ${rangeDisplay}`);
             }
@@ -465,14 +457,7 @@ function getFilterDisplayTitle(
             }
 
             if (fieldDateValues.range) {
-                const rangeBoundaries = getRangeBoundariesFromFormValue(fieldDateValues.range, fieldDateValues.after, fieldDateValues.before);
-                const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
-                let rangeDisplay = '';
-                if (rangeBoundaries.from && rangeBoundaries.to) {
-                    rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
-                } else if (singleBoundary) {
-                    rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
-                }
+                const rangeDisplay = getDateRangeDisplayValueFromFormValue(fieldDateValues.range, fieldDateValues.after, fieldDateValues.before);
                 if (rangeDisplay) {
                     values.push(translate('search.filters.reportField', fieldName, `${translate('common.range')}: ${rangeDisplay}`.toLowerCase()));
                 }
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
index 73368ede65c71..5897571ac3b34 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/index.tsx
@@ -12,9 +12,8 @@ import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {updateAdvancedFilters} from '@libs/actions/Search';
-import DateUtils from '@libs/DateUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import {getRangeBoundariesFromFormValue, isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {getDateRangeDisplayValueFromFormValue, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -59,14 +58,7 @@ function SearchFiltersReportFieldPage() {
                 }
 
                 if (rangeValue) {
-                    const rangeBoundaries = getRangeBoundariesFromFormValue(rangeValue, afterValue, beforeValue);
-                    const singleBoundary = rangeBoundaries.from ?? rangeBoundaries.to;
-                    let rangeDisplay = '';
-                    if (rangeBoundaries.from && rangeBoundaries.to) {
-                        rangeDisplay = DateUtils.getFormattedDateRangeForSearch(rangeBoundaries.from, rangeBoundaries.to, true);
-                    } else if (singleBoundary) {
-                        rangeDisplay = DateUtils.formatToReadableString(singleBoundary);
-                    }
+                    const rangeDisplay = getDateRangeDisplayValueFromFormValue(rangeValue, afterValue, beforeValue);
                     if (rangeDisplay) {
                         dateValues.push(`${translate('common.range')}: ${rangeDisplay}`);
                     }
diff --git a/tests/unit/Search/SearchQueryUtilsTest.ts b/tests/unit/Search/SearchQueryUtilsTest.ts
index eb1a763d55805..23b45aef0036c 100644
--- a/tests/unit/Search/SearchQueryUtilsTest.ts
+++ b/tests/unit/Search/SearchQueryUtilsTest.ts
@@ -5,12 +5,14 @@ import {generatePolicyID} from '@libs/actions/Policy/Policy';
 // eslint-disable-next-line no-restricted-syntax
 import type * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import CONST from '@src/CONST';
+import DateUtils from '@src/libs/DateUtils';
 import {
     buildFilterFormValuesFromQuery,
     buildQueryStringFromFilterFormValues,
     buildSearchQueryJSON,
     buildSearchQueryString,
     buildUserReadableQueryString,
+    getDateRangeDisplayValueFromFormValue,
     getFilterDisplayValue,
     getQueryWithUpdatedValues,
     shouldHighlight,
@@ -54,6 +56,32 @@ jest.mock('@libs/PersonalDetailsUtils', () => {
 const defaultQuery = `type:expense sortBy:date sortOrder:desc`;
 
 describe('SearchQueryUtils', () => {
+    describe('getDateRangeDisplayValueFromFormValue', () => {
+        test('returns full range display when both boundaries exist', () => {
+            const result = getDateRangeDisplayValueFromFormValue('2025-03-01,2025-03-10');
+
+            expect(result).toBe(DateUtils.getFormattedDateRangeForSearch('2025-03-01', '2025-03-10', true));
+        });
+
+        test('returns single boundary display when only one boundary exists', () => {
+            const result = getDateRangeDisplayValueFromFormValue('2025-03-01');
+
+            expect(result).toBe(DateUtils.formatToReadableString('2025-03-01'));
+        });
+
+        test('falls back to after and before values when range value is invalid', () => {
+            const result = getDateRangeDisplayValueFromFormValue('invalid', '2025-03-01', '2025-03-10');
+
+            expect(result).toBe(DateUtils.getFormattedDateRangeForSearch('2025-03-01', '2025-03-10', true));
+        });
+
+        test('returns empty string when no valid range boundaries exist', () => {
+            const result = getDateRangeDisplayValueFromFormValue('invalid');
+
+            expect(result).toBe('');
+        });
+    });
+
     describe('getQueryWithUpdatedValues', () => {
         test('returns default query for empty value', () => {
             const userQuery = '';

From 04906d64c64cf66aaef08b07004664a61eb584b5 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 26 Feb 2026 12:24:56 +0530
Subject: [PATCH 48/58] fix: optimize block

---
 .../FilterDropdowns/DateSelectPopup.tsx       | 94 ++++++-------------
 1 file changed, 28 insertions(+), 66 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 9b390ecb4378e..622bad670920c 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -165,8 +165,6 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         }
     }
 
-    const shouldShowInlineRangeText = !isSmallScreenWidth && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
-
     const maxPopupHeight = Math.round(windowHeight * 0.875);
 
     // For non-Range modes, use original simple styles. For Range, use custom layout
@@ -198,71 +196,35 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     )}
                     {datePresetFilterBase}
                 </View>
-                {useRangeLayout ? (
-                    <View style={[styles.flexRow, styles.mh5, styles.alignItemsCenter, styles.pt1]}>
-                        {shouldShowInlineRangeText ? (
-                            <>
-                                <View style={[styles.flex1, styles.mr2]}>
-                                    {!!rangeText && (
-                                        <Text style={[styles.textLabelSupporting]}>
-                                            {`${translate('common.range')}: `}
-                                            <Text style={[styles.textLabel]}>{rangeText}</Text>
-                                        </Text>
-                                    )}
-                                </View>
-                                <View style={[styles.flex1, styles.ml2]}>
-                                    <View style={[styles.flexRow, styles.gap2]}>
-                                        <Button
-                                            medium
-                                            style={[styles.flex1]}
-                                            text={translate('common.reset')}
-                                            onPress={resetChanges}
-                                        />
-                                        <Button
-                                            success
-                                            medium
-                                            style={[styles.flex1]}
-                                            text={translate('common.apply')}
-                                            onPress={applyChanges}
-                                        />
-                                    </View>
-                                </View>
-                            </>
-                        ) : (
-                            <View style={[styles.flexRow, styles.gap2, styles.flex1]}>
-                                <Button
-                                    medium
-                                    style={[styles.flex1]}
-                                    text={translate('common.reset')}
-                                    onPress={resetChanges}
-                                />
-                                <Button
-                                    success
-                                    medium
-                                    style={[styles.flex1]}
-                                    text={translate('common.apply')}
-                                    onPress={applyChanges}
-                                />
-                            </View>
-                        )}
-                    </View>
-                ) : (
-                    <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
-                        <Button
-                            medium
-                            style={[styles.flex1]}
-                            text={translate('common.reset')}
-                            onPress={resetChanges}
-                        />
-                        <Button
-                            success
-                            medium
-                            style={[styles.flex1]}
-                            text={translate('common.apply')}
-                            onPress={applyChanges}
-                        />
+                <View style={[styles.flexRow, styles.gap2, useRangeLayout ? styles.mh5 : styles.ph5, useRangeLayout && styles.alignItemsCenter, useRangeLayout && styles.pt1]}>
+                    {useRangeLayout && (
+                        <View style={[styles.flex1, styles.mr2]}>
+                            {!!rangeText && (
+                                <Text style={[styles.textLabelSupporting]}>
+                                    {`${translate('common.range')}: `}
+                                    <Text style={[styles.textLabel]}>{rangeText}</Text>
+                                </Text>
+                            )}
+                        </View>
+                    )}
+                    <View style={[styles.flex1, useRangeLayout && styles.ml2]}>
+                        <View style={[styles.flexRow, styles.gap2]}>
+                            <Button
+                                medium
+                                style={[styles.flex1]}
+                                text={translate('common.reset')}
+                                onPress={resetChanges}
+                            />
+                            <Button
+                                success
+                                medium
+                                style={[styles.flex1]}
+                                text={translate('common.apply')}
+                                onPress={applyChanges}
+                            />
+                        </View>
                     </View>
-                )}
+                </View>
             </View>
         );
     }

From 3ffa7d3ff7a5d12f99baaf7e7cc8122ca2ad75a8 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 26 Feb 2026 14:58:51 +0530
Subject: [PATCH 49/58] fix: reset range values in datapresetfilterbase

---
 .../FilterComponents/DatePresetFilterBase.tsx | 36 +++++++++----------
 .../FilterDropdowns/DateSelectPopup.tsx       | 26 ++------------
 2 files changed, 21 insertions(+), 41 deletions(-)

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index cc86e09da5c3f..d6806b5124627 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -9,8 +9,7 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import DateUtils from '@libs/DateUtils';
-import {getRangeBoundariesFromFormValue, getRangeQueryValue, isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {getDateRangeDisplayValueFromFormValue, getRangeBoundariesFromFormValue, getRangeQueryValue, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import RangeDatePicker from './RangeDatePicker';
@@ -22,6 +21,9 @@ type DatePresetFilterBaseHandle = {
     /** Gets date values */
     getDateValues: () => SearchDateValues;
 
+    /** Gets the formatted range display text for current date values */
+    getRangeDisplayText: () => string;
+
     /** Clears date values */
     clearDateValues: () => void;
 
@@ -103,6 +105,14 @@ function DatePresetFilterBase({
 
     const shouldShowHorizontalRule = !!presets?.length;
 
+    const getRangeDisplayTextFromDateValues = useCallback((dateValues: SearchDateValues) => {
+        const rangeValue = dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+        if (!rangeValue) {
+            return '';
+        }
+        return getDateRangeDisplayValueFromFormValue(rangeValue, dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER], dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]);
+    }, []);
+
     const [dateValues, setDateValues] = useState<SearchDateValues>(defaultDateValues);
     const dateValuesRef = useRef<SearchDateValues>(defaultDateValues);
     const updateDateValues = useCallback(
@@ -207,6 +217,10 @@ function DatePresetFilterBase({
                 return dateValuesRef.current;
             },
 
+            getRangeDisplayText() {
+                return getRangeDisplayTextFromDateValues(dateValuesRef.current);
+            },
+
             resetDateValuesToDefault() {
                 dateValuesRef.current = defaultDateValues;
                 updateDateValues(defaultDateValues);
@@ -279,6 +293,7 @@ function DatePresetFilterBase({
             ephemeralDateValue,
             rangeEphemeralValues.from,
             rangeEphemeralValues.to,
+            getRangeDisplayTextFromDateValues,
             setDateValue,
             updateDateValues,
             validate,
@@ -286,22 +301,7 @@ function DatePresetFilterBase({
         ],
     );
 
-    const rangeBoundaries = getRangeBoundariesFromFormValue(
-        dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
-        dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
-        dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
-    );
-    const rangeFromValue = rangeBoundaries.from;
-    const rangeToValue = rangeBoundaries.to;
-    let rangeDescription: string | undefined;
-    if (dateDisplayValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]) {
-        if (rangeFromValue && rangeToValue) {
-            rangeDescription = DateUtils.getFormattedDateRangeForSearch(rangeFromValue, rangeToValue, true);
-        } else {
-            const singleBoundary = rangeFromValue ?? rangeToValue;
-            rangeDescription = singleBoundary ? DateUtils.formatToReadableString(singleBoundary) : undefined;
-        }
-    }
+    const rangeDescription = getRangeDisplayTextFromDateValues(dateValues) || undefined;
 
     if (!selectedDateModifier) {
         return (
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 622bad670920c..8a295e0afd3f6 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -1,4 +1,3 @@
-import {format, parseISO} from 'date-fns';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
@@ -16,8 +15,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import DateUtils from '@libs/DateUtils';
-import {getRangeBoundariesFromFormValue} from '@libs/SearchQueryUtils';
+import {getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 
@@ -139,31 +137,13 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         closeOverlay();
     }, [clearSelection, closeOverlay, onChange, selectedDateModifier, updateTrackedDateValues]);
 
-    const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
-    const hasRangeFlag = !!trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
-    const rangeBoundaries = getRangeBoundariesFromFormValue(
+    const rangeText = getDateRangeDisplayValueFromFormValue(
         trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
         trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
         trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
     );
-    const rangeFrom = hasRangeFlag ? rangeBoundaries.from : undefined;
-    const rangeTo = hasRangeFlag ? rangeBoundaries.to : undefined;
-    const isRangeMode = isInRangeMode || (!selectedDateModifier && hasRangeFlag);
 
-    let rangeText: string | null = null;
-    // Show range text from applied Range filter.
-    const displayFrom = rangeFrom;
-    const displayTo = rangeTo;
-    if (isRangeMode && (displayFrom || displayTo)) {
-        if (displayFrom && displayTo) {
-            rangeText = DateUtils.getFormattedDateRangeForSearch(displayFrom, displayTo, true);
-        } else {
-            const singleRangeValue = displayFrom ?? displayTo;
-            if (singleRangeValue) {
-                rangeText = format(parseISO(singleRangeValue), 'MMM d, yyyy');
-            }
-        }
-    }
+    const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
 
     const maxPopupHeight = Math.round(windowHeight * 0.875);
 

From d34fd77d3f0a5c1fdaead4c8150f911988b63910 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 26 Feb 2026 23:38:52 +0530
Subject: [PATCH 50/58] Update
 src/components/Search/FilterDropdowns/DateSelectPopup.tsx

Co-authored-by: Pujan Shah <shahpujan1992@gmail.com>
---
 src/components/Search/FilterDropdowns/DateSelectPopup.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 8a295e0afd3f6..f0bc8a4419aa7 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -55,7 +55,6 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     const scrollViewRef = useRef<React.ComponentRef<typeof ScrollView>>(null);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
     const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
-    const [trackedDateValues, setTrackedDateValues] = useState<SearchDateValues>(value);
 
     const updateTrackedDateValues = useCallback((dateValues: SearchDateValues) => {
         setTrackedDateValues(dateValues);

From 369ae7ce77c4ca593fc24022b23a1ae2d155ba3f Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Thu, 26 Feb 2026 23:47:31 +0530
Subject: [PATCH 51/58] fix: unnecessary duplications

---
 .../FilterComponents/DateFilterBase.tsx       | 75 ++++++-------------
 .../FilterComponents/DatePresetFilterBase.tsx | 27 ++++---
 .../FilterDropdowns/DateSelectPopup.tsx       | 44 +++++------
 3 files changed, 56 insertions(+), 90 deletions(-)

diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index 7e11b54c2b482..2c6951eb3d8bf 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -1,4 +1,3 @@
-import {format, parseISO} from 'date-fns';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
@@ -10,14 +9,13 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import DateUtils from '@libs/DateUtils';
-import {getRangeBoundariesFromFormValue} from '@libs/SearchQueryUtils';
+import {getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
 import {getDatePresets} from '@libs/SearchUIUtils';
 import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
-import type {SearchDatePresetFilterBaseHandle, SearchDateValues} from './DatePresetFilterBase';
+import type {SearchDatePresetFilterBaseHandle} from './DatePresetFilterBase';
 import DatePresetFilterBase from './DatePresetFilterBase';
 
 type DateFilterBaseProps = {
@@ -31,32 +29,11 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const emptyDateValues: SearchDateValues = useMemo(
-        () => ({
-            [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-            [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
-        }),
-        [],
-    );
     const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
     const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
     const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
     const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
-    const [trackedDateValues, setTrackedDateValues] = useState<SearchDateValues>(emptyDateValues);
-
-    const updateTrackedDateValues = useCallback((dateValues: SearchDateValues) => {
-        setTrackedDateValues(dateValues);
-    }, []);
-
-    const handleDateValuesChange = useCallback(
-        (dateValues: SearchDateValues) => {
-            updateTrackedDateValues(dateValues);
-        },
-        [updateTrackedDateValues],
-    );
 
     const dateOnKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
         ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.ON_PREFIX) as ReportFieldDateKey)
@@ -88,6 +65,17 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         }),
         [dateAfterValue, dateBeforeValue, dateOnValue, dateRangeValue],
     );
+    const [rangeDisplayText, setRangeDisplayText] = useState(() =>
+        getDateRangeDisplayValueFromFormValue(
+            defaultDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
+            defaultDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+            defaultDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+        ),
+    );
+
+    const handleDateValuesChange = useCallback(() => {
+        setRangeDisplayText(searchDatePresetFilterBaseRef.current?.getRangeDisplayText() ?? '');
+    }, []);
 
     const presets = useMemo(() => {
         const hasFeed = !!searchAdvancedFiltersForm?.feed?.length;
@@ -108,16 +96,16 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         }
 
         if (selectedDateModifier) {
-            const clearedDateValues = searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            updateTrackedDateValues(clearedDateValues);
+            searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+            setRangeDisplayText(searchDatePresetFilterBaseRef.current.getRangeDisplayText());
             setSelectedDateModifier(null);
             setShouldShowRangeError(false);
             return;
         }
 
-        updateTrackedDateValues(emptyDateValues);
         searchDatePresetFilterBaseRef.current.clearDateValues();
-    }, [selectedDateModifier, emptyDateValues, updateTrackedDateValues]);
+        setRangeDisplayText('');
+    }, [selectedDateModifier]);
 
     const save = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
@@ -129,8 +117,8 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
                 return;
             }
 
-            const updatedDateValues = searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
-            updateTrackedDateValues(updatedDateValues);
+            searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
+            setRangeDisplayText(searchDatePresetFilterBaseRef.current.getRangeDisplayText());
             setSelectedDateModifier(null);
             setShouldShowRangeError(false);
             return;
@@ -143,13 +131,13 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
             [dateAfterKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? null,
             [dateRangeKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] ?? null,
         });
-    }, [selectedDateModifier, dateOnKey, dateBeforeKey, dateAfterKey, dateRangeKey, onSubmit, updateTrackedDateValues]);
+    }, [selectedDateModifier, dateOnKey, dateBeforeKey, dateAfterKey, dateRangeKey, onSubmit]);
 
     const goBack = () => {
         if (selectedDateModifier) {
             if (searchDatePresetFilterBaseRef.current && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
                 searchDatePresetFilterBaseRef.current.resetDateValuesToDefault();
-                updateTrackedDateValues(defaultDateValues);
+                setRangeDisplayText(searchDatePresetFilterBaseRef.current.getRangeDisplayText());
             }
             setSelectedDateModifier(null);
             setShouldShowRangeError(false);
@@ -159,26 +147,7 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         back();
     };
 
-    const hasRangeFlag = !!trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
-    const rangeBoundaries = getRangeBoundariesFromFormValue(
-        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
-        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
-        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
-    );
-    const rangeFromValue = hasRangeFlag ? rangeBoundaries.from : undefined;
-    const rangeToValue = hasRangeFlag ? rangeBoundaries.to : undefined;
-    const displayFrom = rangeFromValue;
-    const displayTo = rangeToValue;
-    const hasRangeInput = !!(displayFrom ?? displayTo);
-    let rangeDisplayText = '';
-    if (displayFrom && displayTo) {
-        rangeDisplayText = DateUtils.getFormattedDateRangeForSearch(displayFrom, displayTo, true);
-    } else if (displayFrom || displayTo) {
-        const singleRangeValue = displayFrom ?? displayTo;
-        if (singleRangeValue) {
-            rangeDisplayText = format(parseISO(singleRangeValue), 'MMM d, yyyy');
-        }
-    }
+    const hasRangeInput = !!rangeDisplayText;
 
     return (
         <View style={styles.flex1}>
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index d6806b5124627..e8d7a86570978 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -27,11 +27,11 @@ type DatePresetFilterBaseHandle = {
     /** Clears date values */
     clearDateValues: () => void;
 
-    /** Sets the date value of the selected date modifier to the ephemeral date value (the selected date in calendar) and returns the updated values */
-    setDateValueOfSelectedDateModifier: () => SearchDateValues;
+    /** Sets the date value of the selected date modifier to the ephemeral date value (the selected date in calendar) */
+    setDateValueOfSelectedDateModifier: () => void;
 
-    /** Clears the date value of the selected date modifier and returns the updated values */
-    clearDateValueOfSelectedDateModifier: () => SearchDateValues;
+    /** Clears the date value of the selected date modifier */
+    clearDateValueOfSelectedDateModifier: () => void;
 
     /** Resets date values to the provided defaults */
     resetDateValuesToDefault: () => void;
@@ -129,7 +129,14 @@ function DatePresetFilterBase({
         if (isSearchAdvancedFiltersFormLoading) {
             return;
         }
-        if (dateValuesRef.current === defaultDateValues) {
+        const currentDateValues = dateValuesRef.current;
+        const hasDefaultValuesChanged =
+            currentDateValues[CONST.SEARCH.DATE_MODIFIERS.ON] !== defaultDateValues[CONST.SEARCH.DATE_MODIFIERS.ON] ||
+            currentDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] !== defaultDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ||
+            currentDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] !== defaultDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ||
+            currentDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE] !== defaultDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE];
+
+        if (!hasDefaultValuesChanged) {
             return;
         }
         dateValuesRef.current = defaultDateValues;
@@ -245,7 +252,7 @@ function DatePresetFilterBase({
 
             setDateValueOfSelectedDateModifier() {
                 if (!selectedDateModifier) {
-                    return dateValuesRef.current;
+                    return;
                 }
 
                 const currentDateValues = dateValuesRef.current;
@@ -255,18 +262,17 @@ function DatePresetFilterBase({
                     const updatedValues = {...currentDateValues, [CONST.SEARCH.DATE_MODIFIERS.RANGE]: rangeValue};
                     dateValuesRef.current = updatedValues;
                     setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, rangeValue);
-                    return updatedValues;
+                    return;
                 }
 
                 const updatedValues = {...currentDateValues, [selectedDateModifier]: ephemeralDateValue};
                 dateValuesRef.current = updatedValues;
                 setDateValue(selectedDateModifier, ephemeralDateValue);
-                return updatedValues;
             },
 
             clearDateValueOfSelectedDateModifier() {
                 if (!selectedDateModifier) {
-                    return dateValuesRef.current;
+                    return;
                 }
 
                 const currentDateValues = dateValuesRef.current;
@@ -277,14 +283,13 @@ function DatePresetFilterBase({
                     setRangeEphemeralValues({});
                     setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, undefined);
                     onRangeValidationErrorChange?.(false);
-                    return updatedValues;
+                    return;
                 }
 
                 const updatedValues = {...currentDateValues, [selectedDateModifier]: undefined};
                 dateValuesRef.current = updatedValues;
                 setDateValue(selectedDateModifier, undefined);
                 onRangeValidationErrorChange?.(false);
-                return updatedValues;
             },
         }),
         [
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index f0bc8a4419aa7..4b7ab8c0d654a 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -55,17 +55,14 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     const scrollViewRef = useRef<React.ComponentRef<typeof ScrollView>>(null);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
     const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
+    const [rangeText, setRangeText] = useState(() =>
+        getDateRangeDisplayValueFromFormValue(value[CONST.SEARCH.DATE_MODIFIERS.RANGE], value[CONST.SEARCH.DATE_MODIFIERS.AFTER], value[CONST.SEARCH.DATE_MODIFIERS.BEFORE]),
+    );
 
-    const updateTrackedDateValues = useCallback((dateValues: SearchDateValues) => {
-        setTrackedDateValues(dateValues);
+    const updateRangeText = useCallback(() => {
+        setRangeText(searchDatePresetFilterBaseRef.current?.getRangeDisplayText() ?? '');
     }, []);
 
-    // Sync trackedDateValues when actual date values change from parent
-    useEffect(() => {
-        // eslint-disable-next-line react-hooks/set-state-in-effect
-        setTrackedDateValues(value);
-    }, [value]);
-
     // Widen the popover when Range is selected, reset when not
     useEffect(() => {
         if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
@@ -83,10 +80,10 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     const handleBackPress = useCallback(() => {
         if (searchDatePresetFilterBaseRef.current && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
             searchDatePresetFilterBaseRef.current.resetDateValuesToDefault();
-            updateTrackedDateValues(value);
+            updateRangeText();
         }
         clearSelection();
-    }, [clearSelection, selectedDateModifier, updateTrackedDateValues, value]);
+    }, [clearSelection, selectedDateModifier, updateRangeText]);
 
     const applyChanges = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
@@ -101,15 +98,16 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                 return;
             }
 
-            const dateValues = searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
-            updateTrackedDateValues(dateValues);
+            searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
+            updateRangeText();
             clearSelection();
             return;
         }
 
-        onChange(trackedDateValues);
+        const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
+        onChange(dateValues);
         closeOverlay();
-    }, [clearSelection, closeOverlay, onChange, selectedDateModifier, trackedDateValues, updateTrackedDateValues]);
+    }, [clearSelection, closeOverlay, onChange, selectedDateModifier, updateRangeText]);
 
     const resetChanges = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
@@ -117,8 +115,8 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
         }
 
         if (selectedDateModifier) {
-            const clearedDateValues = searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
-            updateTrackedDateValues(clearedDateValues);
+            searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+            updateRangeText();
             clearSelection();
             return;
         }
@@ -130,17 +128,11 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
             [CONST.SEARCH.DATE_MODIFIERS.RANGE]: undefined,
         };
         searchDatePresetFilterBaseRef.current.clearDateValues();
-        updateTrackedDateValues(emptyDateValues);
+        setRangeText('');
         setShouldShowRangeError(false);
         onChange(emptyDateValues);
         closeOverlay();
-    }, [clearSelection, closeOverlay, onChange, selectedDateModifier, updateTrackedDateValues]);
-
-    const rangeText = getDateRangeDisplayValueFromFormValue(
-        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE],
-        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER],
-        trackedDateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
-    );
+    }, [clearSelection, closeOverlay, onChange, selectedDateModifier, updateRangeText]);
 
     const isInRangeMode = selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE;
 
@@ -151,12 +143,12 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     const datePresetFilterBase = (
         <DatePresetFilterBase
             ref={searchDatePresetFilterBaseRef}
-            defaultDateValues={trackedDateValues}
+            defaultDateValues={value}
             selectedDateModifier={selectedDateModifier}
             onSelectDateModifier={setSelectedDateModifier}
             presets={presets}
             shouldShowRangeError={shouldShowRangeError}
-            onDateValuesChange={updateTrackedDateValues}
+            onDateValuesChange={() => setRangeText(searchDatePresetFilterBaseRef.current?.getRangeDisplayText() ?? '')}
             onRangeValidationErrorChange={setShouldShowRangeError}
         />
     );

From 1713a9177ad45a97c488ac09952d7a5cdb9776cc Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 27 Feb 2026 01:03:58 +0530
Subject: [PATCH 52/58] fix: advanced filters

---
 .../FilterComponents/DatePresetFilterBase.tsx | 24 ++++++++++---------
 .../FilterDropdowns/DateSelectPopup.tsx       |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index e8d7a86570978..0c4618190ded0 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -113,17 +113,19 @@ function DatePresetFilterBase({
         return getDateRangeDisplayValueFromFormValue(rangeValue, dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER], dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE]);
     }, []);
 
+    const onDateValuesChangeRef = useRef(onDateValuesChange);
+    useEffect(() => {
+        onDateValuesChangeRef.current = onDateValuesChange;
+    }, [onDateValuesChange]);
+
     const [dateValues, setDateValues] = useState<SearchDateValues>(defaultDateValues);
     const dateValuesRef = useRef<SearchDateValues>(defaultDateValues);
-    const updateDateValues = useCallback(
-        (updater: SearchDateValues | ((prevDateValues: SearchDateValues) => SearchDateValues)) => {
-            const nextDateValues = typeof updater === 'function' ? updater(dateValuesRef.current) : updater;
-            dateValuesRef.current = nextDateValues;
-            setDateValues(nextDateValues);
-            onDateValuesChange?.(nextDateValues);
-        },
-        [onDateValuesChange],
-    );
+    const updateDateValues = useCallback((updater: SearchDateValues | ((prevDateValues: SearchDateValues) => SearchDateValues)) => {
+        const nextDateValues = typeof updater === 'function' ? updater(dateValuesRef.current) : updater;
+        dateValuesRef.current = nextDateValues;
+        setDateValues(nextDateValues);
+        onDateValuesChangeRef.current?.(nextDateValues);
+    }, []);
 
     useEffect(() => {
         if (isSearchAdvancedFiltersFormLoading) {
@@ -142,8 +144,8 @@ function DatePresetFilterBase({
         dateValuesRef.current = defaultDateValues;
         // eslint-disable-next-line react-hooks/set-state-in-effect
         setDateValues(defaultDateValues);
-        onDateValuesChange?.(defaultDateValues);
-    }, [isSearchAdvancedFiltersFormLoading, defaultDateValues, onDateValuesChange]);
+        onDateValuesChangeRef.current?.(defaultDateValues);
+    }, [isSearchAdvancedFiltersFormLoading, defaultDateValues]);
 
     const setDateValue = useCallback(
         (dateModifier: SearchDateModifier, value: string | undefined) => {
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 4b7ab8c0d654a..94050c42dff32 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -148,7 +148,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
             onSelectDateModifier={setSelectedDateModifier}
             presets={presets}
             shouldShowRangeError={shouldShowRangeError}
-            onDateValuesChange={() => setRangeText(searchDatePresetFilterBaseRef.current?.getRangeDisplayText() ?? '')}
+            onDateValuesChange={updateRangeText}
             onRangeValidationErrorChange={setShouldShowRangeError}
         />
     );

From 18802cf640524eb56e66817338660c87862d5db1 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 27 Feb 2026 02:08:11 +0530
Subject: [PATCH 53/58] fix: reset in advanced filters, fix mobile

---
 .../FilterDropdowns/DateSelectPopup.tsx       | 85 +++++++------------
 src/hooks/useFilterFormValues.tsx             | 10 ++-
 src/pages/Search/SearchPage.tsx               |  8 ++
 3 files changed, 48 insertions(+), 55 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 94050c42dff32..271441a961d60 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -202,31 +202,42 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
 
     const topPaddingStyle = selectedDateModifier ? styles.pt3 : undefined;
     const buttonRowSpacing = selectedDateModifier ? styles.mt4 : styles.mt2;
+    const mobileContainerStyle = useRangeLayout ? [topPaddingStyle, styles.flexGrow1, {maxHeight: maxPopupHeight}] : styles.gap2;
+    const mobileLabelStyle = useRangeLayout ? [styles.textLabel, styles.ph5, styles.pb3] : [styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1];
+    const mobileButtonRowStyle = useRangeLayout ? [styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, styles.gap2] : [styles.flexRow, styles.gap2, styles.ph5];
 
-    return useRangeLayout ? (
-        <View style={[topPaddingStyle, styles.flexGrow1, {maxHeight: maxPopupHeight}]}>
-            {!selectedDateModifier && <Text style={[styles.textLabel, styles.ph5, styles.pb3]}>{label}</Text>}
+    return (
+        <View style={mobileContainerStyle}>
+            {!selectedDateModifier && <Text style={mobileLabelStyle}>{label}</Text>}
             <ScrollView
                 ref={scrollViewRef}
-                style={[styles.flexGrow1]}
-                contentContainerStyle={[!selectedDateModifier && styles.pt4, selectedDateModifier && styles.pt0]}
+                style={useRangeLayout ? [styles.flexGrow1] : undefined}
+                contentContainerStyle={useRangeLayout ? [!selectedDateModifier && styles.pt4, selectedDateModifier && styles.pt0] : undefined}
             >
-                {!!selectedDateModifier && (
-                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.ph5, styles.pb2, styles.gap2]}>
-                        <PressableWithoutFeedback
-                            onPress={handleBackPress}
-                            role={CONST.ROLE.BUTTON}
-                            accessibilityLabel={translate('common.back')}
-                            sentryLabel="DateSelectPopup-Back"
-                        >
-                            <Icon
-                                src={backArrowIcon.BackArrow}
-                                fill={theme.icon}
-                            />
-                        </PressableWithoutFeedback>
-                        <Text style={[styles.textLabelSupporting]}>{translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}</Text>
-                    </View>
-                )}
+                {!!selectedDateModifier &&
+                    (useRangeLayout ? (
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.ph5, styles.pb2, styles.gap2]}>
+                            <PressableWithoutFeedback
+                                onPress={handleBackPress}
+                                role={CONST.ROLE.BUTTON}
+                                accessibilityLabel={translate('common.back')}
+                                sentryLabel="DateSelectPopup-Back"
+                            >
+                                <Icon
+                                    src={backArrowIcon.BackArrow}
+                                    fill={theme.icon}
+                                />
+                            </PressableWithoutFeedback>
+                            <Text style={[styles.textLabelSupporting]}>{translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}</Text>
+                        </View>
+                    ) : (
+                        <HeaderWithBackButton
+                            shouldDisplayHelpButton={false}
+                            style={[styles.h10, styles.pb3]}
+                            subtitle={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
+                            onBackButtonPress={handleBackPress}
+                        />
+                    ))}
                 {datePresetFilterBase}
             </ScrollView>
             {!!rangeText && selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && (
@@ -235,7 +246,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                     <Text style={[styles.textLabel]}>{rangeText}</Text>
                 </Text>
             )}
-            <View style={[styles.flexRow, styles.ph5, buttonRowSpacing, styles.alignItemsCenter, styles.gap2]}>
+            <View style={mobileButtonRowStyle}>
                 <Button
                     medium
                     style={[styles.flex1]}
@@ -253,36 +264,6 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
                 />
             </View>
         </View>
-    ) : (
-        <View style={styles.gap2}>
-            {!selectedDateModifier && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
-            <View>
-                {!!selectedDateModifier && (
-                    <HeaderWithBackButton
-                        shouldDisplayHelpButton={false}
-                        style={[styles.h10, styles.pb3]}
-                        subtitle={translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`)}
-                        onBackButtonPress={handleBackPress}
-                    />
-                )}
-                {datePresetFilterBase}
-            </View>
-            <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                />
-            </View>
-        </View>
     );
 }
 
diff --git a/src/hooks/useFilterFormValues.tsx b/src/hooks/useFilterFormValues.tsx
index 2d9fff894fb21..621a6654be8db 100644
--- a/src/hooks/useFilterFormValues.tsx
+++ b/src/hooks/useFilterFormValues.tsx
@@ -27,9 +27,13 @@ const useFilterFormValues = (queryJSON?: SearchQueryJSON) => {
     const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [workspaceCardFeeds, userCardList]);
     const {exportedToFilterOptions} = useExportedToFilterOptions();
 
-    const formValues = queryJSON
-        ? buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates, exportedToFilterOptions)
-        : getEmptyObject<Partial<SearchAdvancedFiltersForm>>();
+    const formValues = useMemo(() => {
+        if (!queryJSON) {
+            return getEmptyObject<Partial<SearchAdvancedFiltersForm>>();
+        }
+
+        return buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates, exportedToFilterOptions);
+    }, [queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates]);
 
     return formValues;
 };
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index dc2b5337cd9d4..f4ac39214968d 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -226,6 +226,14 @@ function SearchPage({route}: SearchPageProps) {
         if (isSearchAdvancedFiltersFormLoading) {
             return;
         }
+
+        // Avoid overriding in-progress edits while advanced filters (or any nested filter route) is open.
+        const activeRouteWithoutParams = Navigation.getActiveRouteWithoutParams();
+        const advancedFiltersRoutePrefix = `/${ROUTES.SEARCH_ADVANCED_FILTERS.getRoute().replace(/\/$/, '')}`;
+        if (activeRouteWithoutParams.startsWith(advancedFiltersRoutePrefix)) {
+            return;
+        }
+
         updateAdvancedFilters(formValues, true);
     }, [formValues, isSearchAdvancedFiltersFormLoading]);
 

From b7ba22a92a7d54b05a6515a29a51f95c9e5ebf37 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 27 Feb 2026 02:08:33 +0530
Subject: [PATCH 54/58] fix: prettify

---
 tests/unit/libs/getClipboardTextTest.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/libs/getClipboardTextTest.ts b/tests/unit/libs/getClipboardTextTest.ts
index 042120d6357b8..15c2480f9aed1 100644
--- a/tests/unit/libs/getClipboardTextTest.ts
+++ b/tests/unit/libs/getClipboardTextTest.ts
@@ -1,5 +1,5 @@
-import Parser from '@libs/Parser';
 import getClipboardText from '@libs/Clipboard/getClipboardText';
+import Parser from '@libs/Parser';
 
 jest.mock('@libs/Parser', () => ({
     // eslint-disable-next-line @typescript-eslint/naming-convention

From bc24e8159b1c1ef3d82108f3275b1a13ef0835da Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 27 Feb 2026 02:21:23 +0530
Subject: [PATCH 55/58] move const

---
 src/components/Search/FilterDropdowns/DateSelectPopup.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 271441a961d60..d6792fede0d8f 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -19,9 +19,6 @@ import {getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 
-/** Width of the popover when Range is selected (enough for two side-by-side calendars) */
-const RANGE_POPOVER_WIDTH = 672;
-
 type DateSelectPopupProps = {
     /** The label to show when in an overlay on mobile */
     label: string;
@@ -66,7 +63,7 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange, setPopo
     // Widen the popover when Range is selected, reset when not
     useEffect(() => {
         if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
-            setPopoverWidth?.(RANGE_POPOVER_WIDTH);
+            setPopoverWidth?.(CONST.POPOVER_DATE_RANGE_WIDTH);
         } else {
             setPopoverWidth?.(undefined);
         }

From 76d539118e3bb691df5c09df1cf64f9af11c0580 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 27 Feb 2026 08:26:07 +0530
Subject: [PATCH 56/58] fix: tsc

---
 src/pages/Search/SearchPageNarrow.tsx | 1 +
 src/pages/Search/SearchPageWide.tsx   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/pages/Search/SearchPageNarrow.tsx b/src/pages/Search/SearchPageNarrow.tsx
index 0cd54fe4b190a..0cedfb5a75593 100644
--- a/src/pages/Search/SearchPageNarrow.tsx
+++ b/src/pages/Search/SearchPageNarrow.tsx
@@ -51,6 +51,7 @@ type SearchPageNarrowProps = {
         currency: string | undefined;
     };
     shouldShowFooter: boolean;
+    [key: string]: unknown;
 };
 
 function SearchPageNarrow({queryJSON, searchResults, isMobileSelectionModeEnabled, metadata, footerData, shouldShowFooter}: SearchPageNarrowProps) {
diff --git a/src/pages/Search/SearchPageWide.tsx b/src/pages/Search/SearchPageWide.tsx
index f98317865f3fb..dc6ff68807f47 100644
--- a/src/pages/Search/SearchPageWide.tsx
+++ b/src/pages/Search/SearchPageWide.tsx
@@ -39,6 +39,7 @@ type SearchPageWideProps = {
     PDFValidationComponent: React.ReactNode;
     ErrorModal: React.ReactNode;
     shouldShowFooter: boolean;
+    [key: string]: unknown;
 };
 
 function SearchPageWide({

From e889662ab1067ad47cd84b3b4e23be1383817eac Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 27 Feb 2026 08:33:21 +0530
Subject: [PATCH 57/58] fix: tsc

---
 src/hooks/useFilterFormValues.tsx     |   11 +-
 src/pages/Search/SearchPage.tsx       | 1233 +------------------------
 src/pages/Search/SearchPageNarrow.tsx |    1 -
 src/pages/Search/SearchPageWide.tsx   |    1 -
 4 files changed, 52 insertions(+), 1194 deletions(-)

diff --git a/src/hooks/useFilterFormValues.tsx b/src/hooks/useFilterFormValues.tsx
index 621a6654be8db..6b0b663ee71ac 100644
--- a/src/hooks/useFilterFormValues.tsx
+++ b/src/hooks/useFilterFormValues.tsx
@@ -22,18 +22,15 @@ const useFilterFormValues = (queryJSON?: SearchQueryJSON) => {
     const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
     const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
     const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
+
     // Helps to avoid unnecessary recalculations when user open report details screen. React Compiler does not provide same result.
     const taxRates = useMemo(() => getAllTaxRates(policies), [policies]);
     const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [workspaceCardFeeds, userCardList]);
     const {exportedToFilterOptions} = useExportedToFilterOptions();
 
-    const formValues = useMemo(() => {
-        if (!queryJSON) {
-            return getEmptyObject<Partial<SearchAdvancedFiltersForm>>();
-        }
-
-        return buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates, exportedToFilterOptions);
-    }, [queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates]);
+    const formValues = queryJSON
+        ? buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates, exportedToFilterOptions)
+        : getEmptyObject<Partial<SearchAdvancedFiltersForm>>();
 
     return formValues;
 };
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index f4ac39214968d..ce9f6d13e8018 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -1,241 +1,58 @@
 import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
-import {InteractionManager, View} from 'react-native';
 import Animated from 'react-native-reanimated';
-import type {ValueOf} from 'type-fest';
-import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
-import DecisionModal from '@components/DecisionModal';
-import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/DelegateNoAccessModalProvider';
 import DragAndDropConsumer from '@components/DragAndDrop/Consumer';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import DropZoneUI from '@components/DropZone/DropZoneUI';
-import HoldOrRejectEducationalModal from '@components/HoldOrRejectEducationalModal';
-import HoldSubmitterEducationalModal from '@components/HoldSubmitterEducationalModal';
-import type {PaymentMethodType} from '@components/KYCWall/types';
-import {ModalActions} from '@components/Modal/Global/ModalContext';
-import type {PopoverMenuItem} from '@components/PopoverMenu';
 import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
 import {useSearchActionsContext, useSearchStateContext} from '@components/Search/SearchContext';
-import type {SearchHeaderOptionValue} from '@components/Search/SearchPageHeader/SearchPageHeader';
-import type {PaymentData, SearchParams} from '@components/Search/types';
+import type {SearchParams} from '@components/Search/types';
 import {usePlaybackActionsContext} from '@components/VideoPlayerContexts/PlaybackContext';
-import useAllTransactions from '@hooks/useAllTransactions';
-import useBulkPayOptions from '@hooks/useBulkPayOptions';
-import useConfirmModal from '@hooks/useConfirmModal';
 import useConfirmReadyToOpenApp from '@hooks/useConfirmReadyToOpenApp';
-import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useFilterFormValues from '@hooks/useFilterFormValues';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
-import useNetwork from '@hooks/useNetwork';
-import useOnyx from '@hooks/useOnyx';
-import usePermissions from '@hooks/usePermissions';
 import usePrevious from '@hooks/usePrevious';
 import useReceiptScanDrop from '@hooks/useReceiptScanDrop';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSearchShouldCalculateTotals from '@hooks/useSearchShouldCalculateTotals';
-import useSelfDMReport from '@hooks/useSelfDMReport';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {setupMergeTransactionDataAndNavigate} from '@libs/actions/MergeTransaction';
-import {deleteAppReport, moveIOUReportToPolicy, moveIOUReportToPolicyAndInviteSubmitter, searchInServer} from '@libs/actions/Report';
-import {
-    approveMoneyRequestOnSearch,
-    bulkDeleteReports,
-    exportSearchItemsToCSV,
-    getExportTemplates,
-    getLastPolicyBankAccountID,
-    getLastPolicyPaymentMethod,
-    getPayMoneyOnSearchInvoiceParams,
-    getPayOption,
-    getReportType,
-    getTotalFormattedAmount,
-    isCurrencySupportWalletBulkPay,
-    payMoneyRequestOnSearch,
-    queueExportSearchItemsToCSV,
-    queueExportSearchWithTemplate,
-    search,
-    submitMoneyRequestOnSearch,
-    unholdMoneyRequestOnSearch,
-    updateAdvancedFilters,
-} from '@libs/actions/Search';
-import initSplitExpense from '@libs/actions/SplitExpenses';
-import {setNameValuePair} from '@libs/actions/User';
-import {getTransactionsAndReportsFromSearch} from '@libs/MergeTransactionUtils';
-import Navigation from '@libs/Navigation/Navigation';
+import {searchInServer} from '@libs/actions/Report';
+import {search, updateAdvancedFilters} from '@libs/actions/Search';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SearchFullscreenNavigatorParamList} from '@libs/Navigation/types';
-import {hasDynamicExternalWorkflow} from '@libs/PolicyUtils';
-import {isMergeActionForSelectedTransactions} from '@libs/ReportSecondaryActionUtils';
-import {
-    getReportOrDraftReport,
-    isBusinessInvoiceRoom,
-    isCurrentUserSubmitter,
-    isExpenseReport as isExpenseReportUtil,
-    isInvoiceReport,
-    isIOUReport as isIOUReportUtil,
-} from '@libs/ReportUtils';
 import {buildSearchQueryJSON} from '@libs/SearchQueryUtils';
-import {navigateToSearchRHP, shouldShowDeleteOption} from '@libs/SearchUIUtils';
-import {hasTransactionBeenRejected} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
-import {canIOUBePaid, dismissRejectUseExplanation} from '@userActions/IOU';
-import {openOldDotLink} from '@userActions/Link';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {Report, SearchResults, Transaction, TransactionViolations} from '@src/types/onyx';
-import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+import type {SearchResults} from '@src/types/onyx';
 import SearchPageNarrow from './SearchPageNarrow';
 import SearchPageWide from './SearchPageWide';
 
 type SearchPageProps = PlatformStackScreenProps<SearchFullscreenNavigatorParamList, typeof SCREENS.SEARCH.ROOT>;
 
 function SearchPage({route}: SearchPageProps) {
-    const {translate, localeCompare, formatPhoneNumber} = useLocalize();
-
-    // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply the correct modal type for the decision modal
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
+    const {translate} = useLocalize();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const theme = useTheme();
-    const {isOffline} = useNetwork();
-    const {isDelegateAccessRestricted} = useDelegateNoAccessState();
-    const {showDelegateNoAccessModal} = useDelegateNoAccessActions();
-    const {selectedTransactions, selectedReports, lastSearchType, areAllMatchingItemsSelected, currentSearchKey, currentSearchResults} = useSearchStateContext();
-    const {clearSelectedTransactions, setLastSearchType, selectAllMatchingItems} = useSearchActionsContext();
-    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const {selectedTransactions, lastSearchType, areAllMatchingItemsSelected, currentSearchKey, currentSearchResults} = useSearchStateContext();
+    const {clearSelectedTransactions, setLastSearchType} = useSearchActionsContext();
     const isMobileSelectionModeEnabled = useMobileSelectionMode(clearSelectedTransactions);
-    const allTransactions = useAllTransactions();
-    const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
-    const selfDMReport = useSelfDMReport();
-    const [lastPaymentMethods] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD);
-    const [personalPolicyID] = useOnyx(ONYXKEYS.PERSONAL_POLICY_ID);
-    const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
-    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
-    const [integrationsExportTemplates] = useOnyx(ONYXKEYS.NVP_INTEGRATION_SERVER_EXPORT_TEMPLATES);
-    const [csvExportLayouts] = useOnyx(ONYXKEYS.NVP_CSV_EXPORT_LAYOUTS);
-    const [transactions] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION);
-    const [allTransactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
-    const [, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
-    const {accountID} = useCurrentUserPersonalDetails();
-    const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
-
-    const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
-    const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
-    const [searchRequestResponseStatusCode, setSearchRequestResponseStatusCode] = useState<number | null>(null);
-    const {showConfirmModal} = useConfirmModal();
-    const {isBetaEnabled} = usePermissions();
-    const isDEWBetaEnabled = isBetaEnabled(CONST.BETAS.NEW_DOT_DEW);
-    const [isHoldEducationalModalVisible, setIsHoldEducationalModalVisible] = useState(false);
-    const [rejectModalAction, setRejectModalAction] = useState<ValueOf<
-        typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.HOLD | typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT
-    > | null>(null);
-
-    const [emptyReportsCount, setEmptyReportsCount] = useState<number>(0);
-
-    const [dismissedRejectUseExplanation] = useOnyx(ONYXKEYS.NVP_DISMISSED_REJECT_USE_EXPLANATION);
-    const [dismissedHoldUseExplanation] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION);
 
     const queryJSON = useMemo(() => buildSearchQueryJSON(route.params.q, route.params.rawQuery), [route.params.q, route.params.rawQuery]);
-    const isExpenseReportType = queryJSON?.type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT;
     const {saveScrollOffset} = useContext(ScrollOffsetContext);
-    const expensifyIcons = useMemoizedLazyExpensifyIcons([
-        'Export',
-        'Table',
-        'DocumentMerge',
-        'Send',
-        'Trashcan',
-        'ThumbsUp',
-        'ThumbsDown',
-        'ArrowRight',
-        'ArrowCollapse',
-        'Stopwatch',
-        'Exclamation',
-        'SmartScan',
-        'MoneyBag',
-        'ArrowSplit',
-    ] as const);
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['SmartScan'] as const);
 
     const lastNonEmptySearchResults = useRef<SearchResults | undefined>(undefined);
-    const selectedTransactionReportIDs = useMemo(
-        () => [
-            ...new Set(
-                Object.values(selectedTransactions)
-                    .map((transaction) => transaction.reportID)
-                    .filter((reportID) => reportID !== undefined),
-            ),
-        ],
-        [selectedTransactions],
-    );
-    const selectedReportIDs = useMemo(
-        () =>
-            Object.values(selectedReports)
-                .map((report) => report.reportID)
-                .filter((reportID) => reportID !== undefined),
-        [selectedReports],
-    );
-    const isCurrencySupportedBulkWallet = isCurrencySupportWalletBulkPay(selectedReports, selectedTransactions);
-
-    // Collate a list of policyIDs from the selected transactions
-    const selectedPolicyIDs = useMemo(
-        () => [
-            ...new Set(
-                Object.values(selectedTransactions)
-                    .map((transaction) => transaction.policyID)
-                    .filter(Boolean),
-            ),
-        ],
-        [selectedTransactions],
-    );
-    const selectedBulkCurrency = selectedReports.at(0)?.currency ?? Object.values(selectedTransactions).at(0)?.currency;
-    const totalFormattedAmount = getTotalFormattedAmount(selectedReports, selectedTransactions, selectedBulkCurrency);
-
-    const onlyShowPayElsewhere = useMemo(() => {
-        const firstPolicyID = selectedPolicyIDs.at(0);
-        const selectedPolicy = firstPolicyID ? currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.POLICY}${firstPolicyID}`] : undefined;
-        return (selectedTransactionReportIDs ?? selectedReportIDs).some((reportID) => {
-            const report = currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
-            const chatReportID = report?.chatReportID;
-            const chatReport = chatReportID ? currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`] : undefined;
-            const invoiceReceiverPolicyID = chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : undefined;
-            const invoiceReceiverPolicy = invoiceReceiverPolicyID ? currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiverPolicyID}`] : undefined;
-            return (
-                report &&
-                !canIOUBePaid(report, chatReport, selectedPolicy, bankAccountList, undefined, false, undefined, invoiceReceiverPolicy) &&
-                canIOUBePaid(report, chatReport, selectedPolicy, bankAccountList, undefined, true, undefined, invoiceReceiverPolicy)
-            );
-        });
-    }, [currentSearchResults?.data, selectedPolicyIDs, selectedReportIDs, selectedTransactionReportIDs, bankAccountList]);
-
-    const {bulkPayButtonOptions, latestBankItems} = useBulkPayOptions({
-        selectedPolicyID: selectedPolicyIDs.at(0),
-        selectedReportID: selectedTransactionReportIDs.at(0) ?? selectedReportIDs.at(0),
-        isCurrencySupportedWallet: isCurrencySupportedBulkWallet,
-        currency: selectedBulkCurrency,
-        formattedAmount: totalFormattedAmount,
-        onlyShowPayElsewhere,
-    });
 
     const formValues = useFilterFormValues(queryJSON);
 
-    // Sync the advanced filters form with the current query when it changes
     useEffect(() => {
-        if (isSearchAdvancedFiltersFormLoading) {
-            return;
-        }
-
-        // Avoid overriding in-progress edits while advanced filters (or any nested filter route) is open.
-        const activeRouteWithoutParams = Navigation.getActiveRouteWithoutParams();
-        const advancedFiltersRoutePrefix = `/${ROUTES.SEARCH_ADVANCED_FILTERS.getRoute().replace(/\/$/, '')}`;
-        if (activeRouteWithoutParams.startsWith(advancedFiltersRoutePrefix)) {
-            return;
-        }
-
         updateAdvancedFilters(formValues, true);
-    }, [formValues, isSearchAdvancedFiltersFormLoading]);
+    }, [formValues]);
 
     useConfirmReadyToOpenApp();
 
@@ -250,464 +67,10 @@ function SearchPage({route}: SearchPageProps) {
         }
     }, [lastSearchType, queryJSON, setLastSearchType, currentSearchResults]);
 
-    const {status, hash} = queryJSON ?? {};
     const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
-    const firstTransaction = allTransactions?.[`${ONYXKEYS.COLLECTION.TRANSACTION}${selectedTransactionsKeys.at(0)}`];
-    const [firstTransactionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${firstTransaction?.reportID}`);
-    const [firstTransactionPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${firstTransactionReport?.policyID}`);
-
-    const beginExportWithTemplate = useCallback(
-        async (templateName: string, templateType: string, policyID: string | undefined) => {
-            const emptyReports =
-                selectedReports?.filter((selectedReport) => {
-                    if (!selectedReport) {
-                        return false;
-                    }
-                    const fullReport = currentSearchResults?.data?.[`${ONYXKEYS.COLLECTION.REPORT}${selectedReport.reportID}`];
-                    return (fullReport?.transactionCount ?? 0) === 0;
-                }) ?? [];
-            const hasOnlyEmptyReports = selectedReports.length > 0 && emptyReports.length === selectedReports.length;
-
-            if (hasOnlyEmptyReports) {
-                setEmptyReportsCount(emptyReports.length);
-                setIsDownloadErrorModalVisible(true);
-                return;
-            }
-            if (isOffline) {
-                setIsOfflineModalVisible(true);
-                return;
-            }
-
-            // If the user has selected a large number of items, we'll use the queryJSON to search for the reportIDs and transactionIDs necessary for the export
-            if (areAllMatchingItemsSelected) {
-                queueExportSearchWithTemplate({
-                    templateName,
-                    templateType,
-                    jsonQuery: JSON.stringify(queryJSON),
-                    reportIDList: [],
-                    transactionIDList: [],
-                    policyID,
-                });
-            } else {
-                // Otherwise, we will use the selected transactionIDs and reportIDs directly
-                queueExportSearchWithTemplate({
-                    templateName,
-                    templateType,
-                    jsonQuery: '{}',
-                    reportIDList: selectedTransactionReportIDs,
-                    transactionIDList: selectedTransactionsKeys,
-                    policyID,
-                });
-            }
-
-            const result = await showConfirmModal({
-                title: translate('export.exportInProgress'),
-                prompt: translate('export.conciergeWillSend'),
-                confirmText: translate('common.buttonConfirm'),
-                shouldShowCancelButton: false,
-            });
-            if (result.action !== ModalActions.CONFIRM) {
-                return;
-            }
-            clearSelectedTransactions(undefined, true);
-        },
-        [
-            selectedReports,
-            isOffline,
-            areAllMatchingItemsSelected,
-            showConfirmModal,
-            translate,
-            clearSelectedTransactions,
-            currentSearchResults?.data,
-            queryJSON,
-            selectedTransactionReportIDs,
-            selectedTransactionsKeys,
-        ],
-    );
-
-    const policyIDsWithVBBA = useMemo(() => {
-        const result = [];
-        for (const policy of Object.values(policies ?? {})) {
-            if (!policy || !policy.achAccount?.bankAccountID) {
-                continue;
-            }
-
-            result.push(policy.id);
-        }
-
-        return result;
-    }, [policies]);
-
-    const handleBasicExport = useCallback(async () => {
-        if (isOffline) {
-            setIsOfflineModalVisible(true);
-            return;
-        }
-
-        if (status === null || status === undefined) {
-            return;
-        }
-
-        if (areAllMatchingItemsSelected) {
-            const result = await showConfirmModal({
-                title: translate('search.exportSearchResults.title'),
-                prompt: translate('search.exportSearchResults.description'),
-                confirmText: translate('search.exportSearchResults.title'),
-                cancelText: translate('common.cancel'),
-            });
-            if (result.action !== ModalActions.CONFIRM) {
-                return;
-            }
-            if (selectedTransactionsKeys.length === 0 || status == null || !hash) {
-                return;
-            }
-            const reportIDList = selectedReports?.map((report) => report?.reportID).filter((reportID) => reportID !== undefined) ?? [];
-            queueExportSearchItemsToCSV({
-                query: status,
-                jsonQuery: JSON.stringify(queryJSON),
-                reportIDList,
-                transactionIDList: selectedTransactionsKeys,
-            });
-            selectAllMatchingItems(false);
-            clearSelectedTransactions();
-            return;
-        }
-
-        exportSearchItemsToCSV(
-            {
-                query: status,
-                jsonQuery: JSON.stringify(queryJSON),
-                reportIDList: selectedReports.length > 0 ? selectedReportIDs : selectedTransactionReportIDs,
-                transactionIDList: selectedTransactionsKeys,
-            },
-            () => {
-                setEmptyReportsCount(0);
-                setIsDownloadErrorModalVisible(true);
-            },
-            translate,
-        );
-        clearSelectedTransactions(undefined, true);
-    }, [
-        isOffline,
-        status,
-        areAllMatchingItemsSelected,
-        queryJSON,
-        selectedReports,
-        selectedReportIDs,
-        selectedTransactionReportIDs,
-        selectedTransactionsKeys,
-        translate,
-        clearSelectedTransactions,
-        showConfirmModal,
-        hash,
-        selectAllMatchingItems,
-    ]);
-
-    const handleApproveWithDEWCheck = useCallback(async () => {
-        if (isOffline) {
-            setIsOfflineModalVisible(true);
-            return;
-        }
-
-        if (!hash) {
-            return;
-        }
-
-        if (isDelegateAccessRestricted) {
-            showDelegateNoAccessModal();
-            return;
-        }
-
-        // Check if any of the selected items have DEW enabled
-        const selectedPolicyIDList = selectedReports.length
-            ? selectedReports.map((report) => report.policyID)
-            : Object.values(selectedTransactions).map((transaction) => transaction.policyID);
-        const hasDEWPolicy = selectedPolicyIDList.some((policyID) => {
-            const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`];
-            return hasDynamicExternalWorkflow(policy);
-        });
-
-        if (hasDEWPolicy && !isDEWBetaEnabled) {
-            const result = await showConfirmModal({
-                title: translate('customApprovalWorkflow.title'),
-                prompt: translate('customApprovalWorkflow.description'),
-                confirmText: translate('customApprovalWorkflow.goToExpensifyClassic'),
-                shouldShowCancelButton: false,
-            });
-            if (result.action !== ModalActions.CONFIRM) {
-                return;
-            }
-            openOldDotLink(CONST.OLDDOT_URLS.INBOX);
-            return;
-        }
-
-        const reportIDList = !selectedReports.length
-            ? Object.values(selectedTransactions).map((transaction) => transaction.reportID)
-            : (selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? []);
-        approveMoneyRequestOnSearch(
-            hash,
-            reportIDList.filter((reportID) => reportID !== undefined),
-        );
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        InteractionManager.runAfterInteractions(() => {
-            clearSelectedTransactions();
-        });
-    }, [
-        isOffline,
-        isDelegateAccessRestricted,
-        showDelegateNoAccessModal,
-        selectedReports,
-        selectedTransactions,
-        policies,
-        isDEWBetaEnabled,
-        showConfirmModal,
-        translate,
-        hash,
-        clearSelectedTransactions,
-    ]);
-
-    const {expenseCount, uniqueReportCount} = useMemo(() => {
-        let expenses = 0;
-        const reportIDs = new Set<string>();
-
-        for (const key of Object.keys(selectedTransactions)) {
-            const selectedItem = selectedTransactions[key];
-            if (!selectedItem?.reportID) {
-                continue;
-            }
-            if (selectedItem.action === CONST.SEARCH.ACTION_TYPES.VIEW && key === selectedItem.reportID) {
-                reportIDs.add(selectedItem.reportID);
-            } else {
-                expenses += 1;
-                reportIDs.add(selectedItem.reportID);
-            }
-        }
-
-        return {expenseCount: expenses, uniqueReportCount: reportIDs.size};
-    }, [selectedTransactions]);
-
-    const isDeletingOnlyExpenses = queryJSON?.type === CONST.SEARCH.DATA_TYPES.EXPENSE && expenseCount > 0;
-    const deleteCount = isDeletingOnlyExpenses ? expenseCount : uniqueReportCount;
-    const deleteModalTitle = isDeletingOnlyExpenses ? translate('iou.deleteExpense', {count: expenseCount}) : translate('iou.deleteReport', {count: deleteCount});
-    const deleteModalPrompt = isDeletingOnlyExpenses ? translate('iou.deleteConfirmation', {count: expenseCount}) : translate('iou.deleteReportConfirmation', {count: deleteCount});
-
-    const handleDeleteSelectedTransactions = useCallback(async () => {
-        if (!hash) {
-            return;
-        }
-
-        // Use InteractionManager to ensure this runs after the dropdown modal closes
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        InteractionManager.runAfterInteractions(async () => {
-            const result = await showConfirmModal({
-                title: deleteModalTitle,
-                prompt: deleteModalPrompt,
-                confirmText: translate('common.delete'),
-                cancelText: translate('common.cancel'),
-                danger: true,
-            });
-            if (result.action !== ModalActions.CONFIRM) {
-                return;
-            }
-            // Translations copy for delete modal depends on amount of selected items,
-            // We need to wait for modal to fully disappear before clearing them to avoid translation flicker between singular vs plural
-            const validTransactions = Object.fromEntries(Object.entries(allTransactions ?? {}).filter((entry): entry is [string, Transaction] => entry[1] !== undefined));
-            // eslint-disable-next-line @typescript-eslint/no-deprecated
-            InteractionManager.runAfterInteractions(() => {
-                if (isExpenseReportType) {
-                    for (const reportID of selectedReportIDs) {
-                        const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
-                        deleteAppReport(
-                            report,
-                            selfDMReport,
-                            currentUserPersonalDetails?.email ?? '',
-                            currentUserPersonalDetails?.accountID,
-                            validTransactions,
-                            allTransactionViolations,
-                            bankAccountList,
-                            hash,
-                        );
-                    }
-                } else {
-                    const transactionsViolations = allTransactionViolations
-                        ? Object.fromEntries(Object.entries(allTransactionViolations).filter((entry): entry is [string, TransactionViolations] => !!entry[1]))
-                        : {};
-                    bulkDeleteReports(
-                        allReports,
-                        selfDMReport,
-                        hash,
-                        selectedTransactions,
-                        currentUserPersonalDetails.email ?? '',
-                        accountID,
-                        validTransactions,
-                        transactionsViolations,
-                        bankAccountList,
-                        transactions,
-                    );
-                }
-                clearSelectedTransactions();
-            });
-        });
-    }, [
-        hash,
-        showConfirmModal,
-        deleteModalTitle,
-        deleteModalPrompt,
-        translate,
-        allTransactions,
-        allTransactionViolations,
-        accountID,
-        selectedTransactions,
-        bankAccountList,
-        clearSelectedTransactions,
-        transactions,
-        allReports,
-        selfDMReport,
-        currentUserPersonalDetails?.email,
-        currentUserPersonalDetails?.accountID,
-        isExpenseReportType,
-        selectedReportIDs,
-    ]);
-
-    const onBulkPaySelected = useCallback(
-        (paymentMethod?: PaymentMethodType, additionalData?: Record<string, unknown>) => {
-            if (!hash) {
-                return;
-            }
-            if (isOffline) {
-                setIsOfflineModalVisible(true);
-                return;
-            }
-
-            if (isDelegateAccessRestricted) {
-                showDelegateNoAccessModal();
-                return;
-            }
-
-            const activeRoute = Navigation.getActiveRoute();
-            const selectedOptions = selectedReports.length ? selectedReports : Object.values(selectedTransactions);
-
-            for (const item of selectedOptions) {
-                const itemPolicyID = item.policyID;
-                const itemReportID = item.reportID;
-                if (!itemReportID) {
-                    return;
-                }
-                const itemReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${itemReportID}`];
-                const isExpenseReport = isExpenseReportUtil(itemReportID);
-                const isIOUReport = isIOUReportUtil(itemReportID);
-                const reportType = getReportType(itemReportID);
-                const lastPolicyPaymentMethod = getLastPolicyPaymentMethod(itemPolicyID, personalPolicyID, lastPaymentMethods, reportType, isIOUReport) ?? paymentMethod;
-
-                if (!lastPolicyPaymentMethod) {
-                    Navigation.navigate(
-                        ROUTES.SEARCH_REPORT.getRoute({
-                            reportID: itemReportID,
-                            backTo: activeRoute,
-                        }),
-                    );
-                    return;
-                }
-
-                const hasPolicyVBBA = itemPolicyID ? policyIDsWithVBBA.includes(itemPolicyID) : false;
-
-                if (isExpenseReport && lastPolicyPaymentMethod !== CONST.IOU.PAYMENT_TYPE.ELSEWHERE && !hasPolicyVBBA) {
-                    Navigation.navigate(
-                        ROUTES.SEARCH_REPORT.getRoute({
-                            reportID: item.reportID,
-                            backTo: activeRoute,
-                        }),
-                    );
-                    return;
-                }
-                const isPolicyPaymentMethod = !Object.values(CONST.IOU.PAYMENT_TYPE).includes(lastPolicyPaymentMethod as ValueOf<typeof CONST.IOU.PAYMENT_TYPE>);
-                // If lastPolicyPaymentMethod is not type of CONST.IOU.PAYMENT_TYPE, we're using workspace to pay the IOU
-                // Then we should move it to that workspace.
-                if (isPolicyPaymentMethod && isIOUReport) {
-                    const adminPolicy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${lastPolicyPaymentMethod}`];
-                    if (!adminPolicy) {
-                        Navigation.navigate(
-                            ROUTES.SEARCH_REPORT.getRoute({
-                                reportID: item.reportID,
-                                backTo: activeRoute,
-                            }),
-                        );
-                        return;
-                    }
-                    // Get transactions for this report
-                    const reportTransactions = Object.values(allTransactions ?? {}).filter(
-                        (transaction): transaction is NonNullable<typeof transaction> => !!transaction && transaction.reportID === itemReportID,
-                    );
-                    const invite = moveIOUReportToPolicyAndInviteSubmitter(itemReport, adminPolicy, formatPhoneNumber, reportTransactions);
-                    if (!invite?.policyExpenseChatReportID) {
-                        moveIOUReportToPolicy(itemReport, adminPolicy, false, reportTransactions);
-                    }
-                }
-            }
-            const paymentAdditionalData = (additionalData as Partial<PaymentData>) ?? {};
-            const paymentData = (
-                selectedReports.length
-                    ? selectedReports.map((report) => {
-                          return {
-                              reportID: report.reportID,
-                              amount: report.total,
-                              paymentType: getLastPolicyPaymentMethod(report.policyID, personalPolicyID, lastPaymentMethods, undefined, isIOUReportUtil(report.reportID)) ?? paymentMethod,
-                              ...(isInvoiceReport(report.reportID)
-                                  ? getPayMoneyOnSearchInvoiceParams(
-                                        report.policyID,
-                                        paymentAdditionalData?.payAsBusiness ?? isBusinessInvoiceRoom(report.chatReportID),
-                                        paymentAdditionalData?.bankAccountID ?? getLastPolicyBankAccountID(report.policyID, lastPaymentMethods),
-                                        CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
-                                    )
-                                  : {}),
-                          };
-                      })
-                    : Object.values(selectedTransactions).map((transaction) => ({
-                          reportID: transaction.reportID,
-                          amount: transaction.amount,
-                          paymentType:
-                              getLastPolicyPaymentMethod(transaction.policyID, personalPolicyID, lastPaymentMethods, undefined, isIOUReportUtil(transaction.reportID)) ?? paymentMethod,
-                          ...(isInvoiceReport(transaction.reportID)
-                              ? getPayMoneyOnSearchInvoiceParams(
-                                    transaction.policyID,
-                                    paymentAdditionalData?.payAsBusiness ?? isBusinessInvoiceRoom(transaction.reportID),
-                                    paymentAdditionalData?.bankAccountID ?? getLastPolicyBankAccountID(transaction.policyID, lastPaymentMethods),
-                                    CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
-                                )
-                              : {}),
-                      }))
-            ) as PaymentData[];
-
-            payMoneyRequestOnSearch(hash, paymentData);
-
-            // eslint-disable-next-line @typescript-eslint/no-deprecated
-            InteractionManager.runAfterInteractions(() => {
-                clearSelectedTransactions();
-            });
-        },
-        [
-            clearSelectedTransactions,
-            hash,
-            isOffline,
-            lastPaymentMethods,
-            selectedReports,
-            selectedTransactions,
-            policies,
-            formatPhoneNumber,
-            policyIDsWithVBBA,
-            isDelegateAccessRestricted,
-            showDelegateNoAccessModal,
-            personalPolicyID,
-            allTransactions,
-            allReports,
-        ],
-    );
 
-    const onBulkPaySelectedRef = useRef(onBulkPaySelected);
-    onBulkPaySelectedRef.current = onBulkPaySelected;
-    const stableOnBulkPaySelected = useCallback((paymentMethod?: PaymentMethodType, additionalData?: Record<string, unknown>) => {
-        onBulkPaySelectedRef.current?.(paymentMethod, additionalData);
-    }, []);
+    const {initScanRequest, PDFValidationComponent, ErrorModal, isDragDisabled} = useReceiptScanDrop();
+    const {resetVideoPlayerData} = usePlaybackActionsContext();
 
     const [isSorting, setIsSorting] = useState(false);
     let searchResults: SearchResults | undefined;
@@ -717,435 +80,10 @@ function SearchPage({route}: SearchPageProps) {
         searchResults = lastNonEmptySearchResults.current;
     }
 
-    // Check if all selected transactions are from the submitter
-    const areAllTransactionsFromSubmitter = useMemo(() => {
-        if (!currentUserPersonalDetails?.accountID) {
-            return false;
-        }
-
-        const searchData = currentSearchResults?.data;
-        const reports: Report[] = searchData
-            ? Object.keys(searchData)
-                  .filter((key) => key.startsWith(ONYXKEYS.COLLECTION.REPORT))
-                  .map((key) => searchData[key as keyof typeof searchData] as Report)
-                  .filter((report): report is Report => report != null && 'reportID' in report)
-            : [];
-
-        return (
-            selectedTransactionReportIDs.length > 0 &&
-            selectedTransactionReportIDs.every((id) => {
-                return isCurrentUserSubmitter(getReportOrDraftReport(id, reports));
-            })
-        );
-    }, [selectedTransactionReportIDs, currentUserPersonalDetails?.accountID, currentSearchResults?.data]);
-
-    const headerButtonsOptions = useMemo(() => {
-        if (selectedTransactionsKeys.length === 0 || status == null || !hash) {
-            return CONST.EMPTY_ARRAY as unknown as Array<DropdownOption<SearchHeaderOptionValue>>;
-        }
-
-        const options: Array<DropdownOption<SearchHeaderOptionValue>> = [];
-        const isAnyTransactionOnHold = Object.values(selectedTransactions).some((transaction) => transaction.isHeld);
-
-        const typeExpenseReport = queryJSON?.type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT;
-
-        // Gets the list of options for the export sub-menu
-        // Gets the list of options for the export sub-menu
-        const getExportOptions = () => {
-            // We provide the basic and expense level export options by default
-            const exportOptions: PopoverMenuItem[] = [
-                {
-                    text: translate('export.basicExport'),
-                    icon: expensifyIcons.Table,
-                    onSelected: () => {
-                        handleBasicExport();
-                    },
-                    shouldCloseModalOnSelect: true,
-                    shouldCallAfterModalHide: true,
-                },
-            ];
-
-            // Determine if only full reports are selected by comparing the reportIDs of the selected transactions and the reportIDs of the selected reports
-            const areFullReportsSelected = selectedTransactionReportIDs.length === selectedReportIDs.length && selectedTransactionReportIDs.every((id) => selectedReportIDs.includes(id));
-            const typeInvoice = queryJSON?.type === CONST.REPORT.TYPE.INVOICE;
-            const typeExpense = queryJSON?.type === CONST.REPORT.TYPE.EXPENSE;
-            const isAllOneTransactionReport = Object.values(selectedTransactions).every((transaction) => transaction.isFromOneTransactionReport);
-
-            // If we're grouping by invoice or report, and all the expenses on the report are selected, or if all
-            // the selected expenses are the only expenses of their parent expense report include the report level export option.
-            const includeReportLevelExport = ((typeExpenseReport || typeInvoice) && areFullReportsSelected) || (typeExpense && !typeExpenseReport && isAllOneTransactionReport);
-
-            // Collect a list of export templates available to the user from their account, policy, and custom integrations templates
-            const policy = selectedPolicyIDs.length === 1 ? policies?.[`${ONYXKEYS.COLLECTION.POLICY}${selectedPolicyIDs.at(0)}`] : undefined;
-            const exportTemplates = getExportTemplates(integrationsExportTemplates ?? [], csvExportLayouts ?? {}, translate, policy, includeReportLevelExport);
-            for (const template of exportTemplates) {
-                exportOptions.push({
-                    text: template.name,
-                    icon: expensifyIcons.Table,
-                    description: template.description,
-                    onSelected: () => {
-                        beginExportWithTemplate(template.templateName, template.type, template.policyID);
-                    },
-                    shouldCloseModalOnSelect: true,
-                    shouldCallAfterModalHide: true,
-                });
-            }
-
-            return exportOptions;
-        };
-
-        const exportButtonOption: DropdownOption<SearchHeaderOptionValue> & Pick<PopoverMenuItem, 'rightIcon'> = {
-            icon: expensifyIcons.Export,
-            rightIcon: expensifyIcons.ArrowRight,
-            text: translate('common.export'),
-            backButtonText: translate('common.export'),
-            value: CONST.SEARCH.BULK_ACTION_TYPES.EXPORT,
-            shouldCloseModalOnSelect: true,
-            subMenuItems: getExportOptions(),
-        };
-
-        // If all matching items are selected, we don't give the user additional options, we only allow them to export the selected items
-        if (areAllMatchingItemsSelected) {
-            return [exportButtonOption];
-        }
-
-        // Otherwise, we provide the full set of options depending on the state of the selected transactions and reports
-        const areSelectedTransactionsIncludedInReports = selectedTransactionsKeys.every((id) =>
-            selectedTransactions[id].reportID ? selectedReportIDs.includes(selectedTransactions[id].reportID) : true,
-        );
-        const shouldShowApproveOption =
-            !isOffline &&
-            !isAnyTransactionOnHold &&
-            areSelectedTransactionsIncludedInReports &&
-            (selectedReports.length
-                ? selectedReports.every((report) => report.allActions.includes(CONST.SEARCH.ACTION_TYPES.APPROVE))
-                : selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.APPROVE));
-
-        if (shouldShowApproveOption) {
-            options.push({
-                icon: expensifyIcons.ThumbsUp,
-                text: translate('search.bulkActions.approve'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.APPROVE,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    handleApproveWithDEWCheck();
-                },
-            });
-        }
-
-        // Check if all selected transactions can be rejected
-        const hasNoRejectedTransaction = selectedTransactionsKeys.every(
-            (id) => !hasTransactionBeenRejected(allTransactionViolations?.[ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS + id] ?? []),
-        );
-
-        const shouldShowRejectOption =
-            queryJSON?.type !== CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT &&
-            !isOffline &&
-            selectedTransactionsKeys.length > 0 &&
-            selectedTransactionsKeys.every((id) => selectedTransactions[id].canReject) &&
-            hasNoRejectedTransaction;
-
-        if (shouldShowRejectOption) {
-            options.push({
-                icon: expensifyIcons.ThumbsDown,
-                text: translate('search.bulkActions.reject'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.REJECT,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    if (isOffline) {
-                        setIsOfflineModalVisible(true);
-                        return;
-                    }
-
-                    if (isDelegateAccessRestricted) {
-                        showDelegateNoAccessModal();
-                        return;
-                    }
-
-                    if (dismissedRejectUseExplanation) {
-                        Navigation.navigate(ROUTES.SEARCH_REJECT_REASON_RHP);
-                    } else {
-                        setRejectModalAction(CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT);
-                    }
-                },
-            });
-        }
-
-        const shouldShowSubmitOption =
-            !isOffline &&
-            areSelectedTransactionsIncludedInReports &&
-            (selectedReports.length
-                ? selectedReports.every((report) => report.allActions.includes(CONST.SEARCH.ACTION_TYPES.SUBMIT))
-                : selectedTransactionsKeys.every((id) => selectedTransactions[id].action === CONST.SEARCH.ACTION_TYPES.SUBMIT));
-
-        if (shouldShowSubmitOption) {
-            options.push({
-                icon: expensifyIcons.Send,
-                text: translate('common.submit'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.SUBMIT,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    if (isOffline) {
-                        setIsOfflineModalVisible(true);
-                        return;
-                    }
-
-                    const itemList = !selectedReports.length ? Object.values(selectedTransactions).map((transaction) => transaction) : (selectedReports?.filter((report) => !!report) ?? []);
-
-                    for (const item of itemList) {
-                        const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${item.policyID}`];
-                        if (policy) {
-                            submitMoneyRequestOnSearch(hash, [item as Report], [policy]);
-                        }
-                    }
-                    clearSelectedTransactions();
-                },
-            });
-        }
-        const {shouldEnableBulkPayOption, isFirstTimePayment} = getPayOption(selectedReports, selectedTransactions, lastPaymentMethods, selectedReportIDs, personalPolicyID);
-
-        const shouldShowPayOption = !isOffline && !isAnyTransactionOnHold && shouldEnableBulkPayOption;
-
-        if (shouldShowPayOption) {
-            const payButtonOption = {
-                icon: expensifyIcons.MoneyBag,
-                text: translate('search.bulkActions.pay'),
-                rightIcon: isFirstTimePayment ? expensifyIcons.ArrowRight : undefined,
-                value: CONST.SEARCH.BULK_ACTION_TYPES.PAY,
-                shouldCloseModalOnSelect: true,
-                subMenuItems: isFirstTimePayment ? bulkPayButtonOptions : undefined,
-                onSelected: () => onBulkPaySelected(undefined),
-            };
-            options.push(payButtonOption);
-        }
-
-        options.push(exportButtonOption);
-
-        const shouldShowHoldOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].canHold);
-
-        if (shouldShowHoldOption) {
-            options.push({
-                icon: expensifyIcons.Stopwatch,
-                text: translate('search.bulkActions.hold'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.HOLD,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    if (isOffline) {
-                        setIsOfflineModalVisible(true);
-                        return;
-                    }
-
-                    if (isDelegateAccessRestricted) {
-                        showDelegateNoAccessModal();
-                        return;
-                    }
-
-                    const isDismissed = areAllTransactionsFromSubmitter ? dismissedHoldUseExplanation : dismissedRejectUseExplanation;
-
-                    if (isDismissed) {
-                        navigateToSearchRHP(ROUTES.TRANSACTION_HOLD_REASON_SEARCH, ROUTES.TRANSACTION_HOLD_REASON_RHP);
-                    } else if (areAllTransactionsFromSubmitter) {
-                        setIsHoldEducationalModalVisible(true);
-                    } else {
-                        setRejectModalAction(CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.HOLD);
-                    }
-                },
-            });
-        }
-
-        const shouldShowUnholdOption = !isOffline && selectedTransactionsKeys.every((id) => selectedTransactions[id].canUnhold);
-
-        if (shouldShowUnholdOption) {
-            options.push({
-                icon: expensifyIcons.Stopwatch,
-                text: translate('search.bulkActions.unhold'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.UNHOLD,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    if (isOffline) {
-                        setIsOfflineModalVisible(true);
-                        return;
-                    }
-
-                    if (isDelegateAccessRestricted) {
-                        showDelegateNoAccessModal();
-                        return;
-                    }
-
-                    unholdMoneyRequestOnSearch(hash, selectedTransactionsKeys);
-                    // eslint-disable-next-line @typescript-eslint/no-deprecated
-                    InteractionManager.runAfterInteractions(() => {
-                        clearSelectedTransactions();
-                    });
-                },
-            });
-        }
-
-        if (selectedTransactionsKeys.length < 3 && searchResults?.search.type !== CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT && searchResults?.data) {
-            const {transactions: searchedTransactions, reports, policies: transactionPolicies} = getTransactionsAndReportsFromSearch(searchResults, selectedTransactionsKeys);
-
-            if (isMergeActionForSelectedTransactions(searchedTransactions, reports, transactionPolicies, currentUserPersonalDetails.accountID)) {
-                const transactionID = searchedTransactions.at(0)?.transactionID;
-                if (transactionID) {
-                    options.push({
-                        text: translate('common.merge'),
-                        icon: expensifyIcons.ArrowCollapse,
-                        value: CONST.SEARCH.BULK_ACTION_TYPES.MERGE,
-                        onSelected: () => setupMergeTransactionDataAndNavigate(transactionID, searchedTransactions, localeCompare, reports, false, true),
-                    });
-                }
-            }
-        }
-
-        const ownerAccountIDs = new Set<number>();
-        let hasUnknownOwner = false;
-        for (const id of selectedTransactionsKeys) {
-            const transactionEntry = selectedTransactions[id];
-            if (!transactionEntry) {
-                continue;
-            }
-            const ownerAccountID = transactionEntry.ownerAccountID ?? getReportOrDraftReport(transactionEntry.reportID)?.ownerAccountID;
-            if (typeof ownerAccountID === 'number') {
-                ownerAccountIDs.add(ownerAccountID);
-                if (ownerAccountIDs.size > 1) {
-                    break;
-                }
-            } else {
-                hasUnknownOwner = true;
-            }
-        }
-        const hasMultipleOwners = ownerAccountIDs.size > 1 || (hasUnknownOwner && (ownerAccountIDs.size > 0 || selectedTransactionsKeys.length > 1));
-
-        const canAllTransactionsBeMoved = selectedTransactionsKeys.every((id) => selectedTransactions[id].canChangeReport);
-
-        if (canAllTransactionsBeMoved && !hasMultipleOwners && !typeExpenseReport) {
-            options.push({
-                text: translate('iou.moveExpenses'),
-                icon: expensifyIcons.DocumentMerge,
-                value: CONST.SEARCH.BULK_ACTION_TYPES.CHANGE_REPORT,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => Navigation.navigate(ROUTES.MOVE_TRANSACTIONS_SEARCH_RHP.getRoute()),
-            });
-        }
-
-        const firstTransactionKey = selectedTransactionsKeys.at(0);
-        const firstTransactionMeta = firstTransactionKey ? selectedTransactions[firstTransactionKey] : undefined;
-
-        const isSplittable = !!firstTransactionMeta?.canSplit;
-        const isAlreadySplit = !!firstTransactionMeta?.hasBeenSplit;
-
-        const canSplitTransaction = selectedTransactionsKeys.length === 1 && !isAlreadySplit && isSplittable;
-
-        if (canSplitTransaction) {
-            options.push({
-                text: translate('iou.split'),
-                icon: expensifyIcons.ArrowSplit,
-                value: CONST.SEARCH.BULK_ACTION_TYPES.SPLIT,
-                onSelected: () => {
-                    initSplitExpense(firstTransaction, firstTransactionPolicy);
-                },
-            });
-        }
-
-        if (shouldShowDeleteOption(selectedTransactions, currentSearchResults?.data, selectedReports, queryJSON?.type)) {
-            options.push({
-                icon: expensifyIcons.Trashcan,
-                text: translate('search.bulkActions.delete'),
-                value: CONST.SEARCH.BULK_ACTION_TYPES.DELETE,
-                shouldCloseModalOnSelect: true,
-                onSelected: () => {
-                    handleDeleteSelectedTransactions();
-                },
-            });
-        }
-
-        if (options.length === 0) {
-            const emptyOptionStyle = {
-                interactive: false,
-                iconFill: theme.icon,
-                iconHeight: variables.iconSizeLarge,
-                iconWidth: variables.iconSizeLarge,
-                numberOfLinesTitle: 2,
-                titleStyle: {...styles.colorMuted, ...styles.fontWeightNormal, ...styles.textWrap},
-            };
-
-            options.push({
-                icon: expensifyIcons.Exclamation,
-                text: translate('search.bulkActions.noOptionsAvailable'),
-                value: undefined,
-                ...emptyOptionStyle,
-            });
-        }
-
-        return options;
-    }, [
-        selectedTransactionsKeys,
-        status,
-        hash,
-        selectedTransactions,
-        queryJSON?.type,
-        expensifyIcons.Export,
-        expensifyIcons.ArrowRight,
-        expensifyIcons.Table,
-        expensifyIcons.ThumbsUp,
-        expensifyIcons.ThumbsDown,
-        expensifyIcons.Send,
-        expensifyIcons.MoneyBag,
-        expensifyIcons.Stopwatch,
-        expensifyIcons.ArrowCollapse,
-        expensifyIcons.DocumentMerge,
-        expensifyIcons.ArrowSplit,
-        expensifyIcons.Trashcan,
-        expensifyIcons.Exclamation,
-        translate,
-        areAllMatchingItemsSelected,
-        isOffline,
-        selectedReports,
-        lastPaymentMethods,
-        selectedReportIDs,
-        personalPolicyID,
-        searchResults,
-        currentSearchResults?.data,
-        selectedTransactionReportIDs,
-        selectedPolicyIDs,
-        policies,
-        integrationsExportTemplates,
-        csvExportLayouts,
-        handleBasicExport,
-        beginExportWithTemplate,
-        handleApproveWithDEWCheck,
-        allTransactionViolations,
-        isDelegateAccessRestricted,
-        dismissedRejectUseExplanation,
-        showDelegateNoAccessModal,
-        clearSelectedTransactions,
-        bulkPayButtonOptions,
-        onBulkPaySelected,
-        areAllTransactionsFromSubmitter,
-        dismissedHoldUseExplanation,
-        currentUserPersonalDetails.accountID,
-        localeCompare,
-        firstTransaction,
-        firstTransactionPolicy,
-        handleDeleteSelectedTransactions,
-        theme.icon,
-        styles.colorMuted,
-        styles.fontWeightNormal,
-        styles.textWrap,
-    ]);
-
-    const {initScanRequest, PDFValidationComponent, ErrorModal, isDragDisabled} = useReceiptScanDrop();
-
-    const {resetVideoPlayerData} = usePlaybackActionsContext();
-
     const metadata = searchResults?.search;
     const shouldAllowFooterTotals = useSearchShouldCalculateTotals(currentSearchKey, queryJSON?.hash, true);
     const shouldShowFooter = selectedTransactionsKeys.length > 0 || (shouldAllowFooterTotals && !!metadata?.count);
 
-    // Handles video player cleanup:
-    // 1. On mount: Resets player if navigating from report screen
-    // 2. On unmount: Stops video when leaving this screen
-    // in narrow layout, the reset will be handled by the attachment modal, so we don't need to do it here to preserve autoplay
     useEffect(() => {
         if (shouldUseNarrowLayout) {
             return;
@@ -1170,6 +108,8 @@ function SearchPage({route}: SearchPageProps) {
         setIsSorting(false);
     }, [currentSearchResults?.isLoading, isSorting, prevIsLoading]);
 
+    const [searchRequestResponseStatusCode, setSearchRequestResponseStatusCode] = useState<number | null>(null);
+
     const handleSearchAction = useCallback((value: SearchParams | string) => {
         if (typeof value === 'string') {
             searchInServer(value);
@@ -1192,7 +132,6 @@ function SearchPage({route}: SearchPageProps) {
         const numberOfExpense = shouldUseClientTotal
             ? selectedTransactionsKeys.reduce((count, key) => {
                   const item = selectedTransactions[key];
-                  // Skip empty reports (where key is the reportID itself, not a transactionID)
                   if (item.action === CONST.SEARCH.ACTION_TYPES.VIEW && key === item.reportID) {
                       return count;
                   }
@@ -1219,125 +158,49 @@ function SearchPage({route}: SearchPageProps) {
         [saveScrollOffset, route],
     );
 
-    const handleOfflineModalClose = useCallback(() => {
-        setIsOfflineModalVisible(false);
-    }, [setIsOfflineModalVisible]);
-
-    const handleDownloadErrorModalClose = useCallback(() => {
-        setIsDownloadErrorModalVisible(false);
-    }, [setIsDownloadErrorModalVisible]);
-
-    const dismissModalAndUpdateUseHold = useCallback(() => {
-        setIsHoldEducationalModalVisible(false);
-        setNameValuePair(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION, true, false, !isOffline);
-        if (hash && selectedTransactionsKeys.length > 0) {
-            navigateToSearchRHP(ROUTES.TRANSACTION_HOLD_REASON_SEARCH, ROUTES.TRANSACTION_HOLD_REASON_RHP);
-        }
-    }, [hash, selectedTransactionsKeys.length, isOffline]);
-
-    const dismissRejectModalBasedOnAction = useCallback(() => {
-        if (rejectModalAction === CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.HOLD) {
-            dismissRejectUseExplanation();
-            if (hash && selectedTransactionsKeys.length > 0) {
-                navigateToSearchRHP(ROUTES.TRANSACTION_HOLD_REASON_SEARCH, ROUTES.TRANSACTION_HOLD_REASON_RHP);
-            }
-        } else {
-            dismissRejectUseExplanation();
-            Navigation.navigate(ROUTES.SEARCH_REJECT_REASON_RHP);
-        }
-        setRejectModalAction(null);
-    }, [rejectModalAction, hash, selectedTransactionsKeys.length]);
-
     return (
-        <>
-            <Animated.View style={[styles.flex1]}>
-                {shouldUseNarrowLayout ? (
-                    <DragAndDropProvider isDisabled={isDragDisabled}>
-                        {PDFValidationComponent}
-                        <SearchPageNarrow
-                            queryJSON={queryJSON}
-                            metadata={metadata}
-                            headerButtonsOptions={headerButtonsOptions}
-                            searchResults={searchResults}
-                            isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
-                            footerData={footerData}
-                            currentSelectedPolicyID={selectedPolicyIDs?.at(0)}
-                            currentSelectedReportID={selectedTransactionReportIDs?.at(0) ?? selectedReportIDs?.at(0)}
-                            confirmPayment={stableOnBulkPaySelected}
-                            latestBankItems={latestBankItems}
-                            shouldShowFooter={shouldShowFooter}
-                        />
-                        <DragAndDropConsumer onDrop={initScanRequest}>
-                            <DropZoneUI
-                                icon={expensifyIcons.SmartScan}
-                                dropTitle={translate('dropzone.scanReceipts')}
-                                dropStyles={styles.receiptDropOverlay(true)}
-                                dropTextStyles={styles.receiptDropText}
-                                dropWrapperStyles={{marginBottom: variables.bottomTabHeight}}
-                                dashedBorderStyles={[styles.dropzoneArea, styles.easeInOpacityTransition, styles.activeDropzoneDashedBorder(theme.receiptDropBorderColorActive, true)]}
-                            />
-                        </DragAndDropConsumer>
-                        {ErrorModal}
-                    </DragAndDropProvider>
-                ) : (
-                    <SearchPageWide
+        <Animated.View style={[styles.flex1]}>
+            {shouldUseNarrowLayout ? (
+                <DragAndDropProvider isDisabled={isDragDisabled}>
+                    {PDFValidationComponent}
+                    <SearchPageNarrow
                         queryJSON={queryJSON}
+                        metadata={metadata}
                         searchResults={searchResults}
-                        searchRequestResponseStatusCode={searchRequestResponseStatusCode}
                         isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
-                        headerButtonsOptions={headerButtonsOptions}
                         footerData={footerData}
-                        selectedPolicyIDs={selectedPolicyIDs}
-                        selectedTransactionReportIDs={selectedTransactionReportIDs}
-                        selectedReportIDs={selectedReportIDs}
-                        latestBankItems={latestBankItems}
-                        onBulkPaySelected={stableOnBulkPaySelected}
-                        handleSearchAction={handleSearchAction}
-                        onSortPressedCallback={onSortPressedCallback}
-                        scrollHandler={scrollHandler}
-                        initScanRequest={initScanRequest}
-                        isDragDisabled={isDragDisabled}
-                        PDFValidationComponent={PDFValidationComponent}
-                        ErrorModal={ErrorModal}
                         shouldShowFooter={shouldShowFooter}
                     />
-                )}
-            </Animated.View>
-            {(!shouldUseNarrowLayout || isMobileSelectionModeEnabled) && (
-                <View>
-                    <DecisionModal
-                        title={translate('common.youAppearToBeOffline')}
-                        prompt={translate('common.offlinePrompt')}
-                        isSmallScreenWidth={isSmallScreenWidth}
-                        onSecondOptionSubmit={handleOfflineModalClose}
-                        secondOptionText={translate('common.buttonConfirm')}
-                        isVisible={isOfflineModalVisible}
-                        onClose={handleOfflineModalClose}
-                    />
-                    {!!rejectModalAction && (
-                        <HoldOrRejectEducationalModal
-                            onClose={dismissRejectModalBasedOnAction}
-                            onConfirm={dismissRejectModalBasedOnAction}
-                        />
-                    )}
-                    {!!isHoldEducationalModalVisible && (
-                        <HoldSubmitterEducationalModal
-                            onClose={dismissModalAndUpdateUseHold}
-                            onConfirm={dismissModalAndUpdateUseHold}
+                    <DragAndDropConsumer onDrop={initScanRequest}>
+                        <DropZoneUI
+                            icon={expensifyIcons.SmartScan}
+                            dropTitle={translate('dropzone.scanReceipts')}
+                            dropStyles={styles.receiptDropOverlay(true)}
+                            dropTextStyles={styles.receiptDropText}
+                            dropWrapperStyles={{marginBottom: variables.bottomTabHeight}}
+                            dashedBorderStyles={[styles.dropzoneArea, styles.easeInOpacityTransition, styles.activeDropzoneDashedBorder(theme.receiptDropBorderColorActive, true)]}
                         />
-                    )}
-                </View>
+                    </DragAndDropConsumer>
+                    {ErrorModal}
+                </DragAndDropProvider>
+            ) : (
+                <SearchPageWide
+                    queryJSON={queryJSON}
+                    searchResults={searchResults}
+                    searchRequestResponseStatusCode={searchRequestResponseStatusCode}
+                    isMobileSelectionModeEnabled={isMobileSelectionModeEnabled}
+                    footerData={footerData}
+                    handleSearchAction={handleSearchAction}
+                    onSortPressedCallback={onSortPressedCallback}
+                    scrollHandler={scrollHandler}
+                    initScanRequest={initScanRequest}
+                    isDragDisabled={isDragDisabled}
+                    PDFValidationComponent={PDFValidationComponent}
+                    ErrorModal={ErrorModal}
+                    shouldShowFooter={shouldShowFooter}
+                />
             )}
-            <DecisionModal
-                title={translate('common.downloadFailedTitle')}
-                prompt={emptyReportsCount ? translate('common.downloadFailedEmptyReportDescription', {count: emptyReportsCount}) : translate('common.downloadFailedDescription')}
-                isSmallScreenWidth={isSmallScreenWidth}
-                onSecondOptionSubmit={handleDownloadErrorModalClose}
-                secondOptionText={translate('common.buttonConfirm')}
-                isVisible={isDownloadErrorModalVisible}
-                onClose={handleDownloadErrorModalClose}
-            />
-        </>
+        </Animated.View>
     );
 }
 
diff --git a/src/pages/Search/SearchPageNarrow.tsx b/src/pages/Search/SearchPageNarrow.tsx
index 0cedfb5a75593..0cd54fe4b190a 100644
--- a/src/pages/Search/SearchPageNarrow.tsx
+++ b/src/pages/Search/SearchPageNarrow.tsx
@@ -51,7 +51,6 @@ type SearchPageNarrowProps = {
         currency: string | undefined;
     };
     shouldShowFooter: boolean;
-    [key: string]: unknown;
 };
 
 function SearchPageNarrow({queryJSON, searchResults, isMobileSelectionModeEnabled, metadata, footerData, shouldShowFooter}: SearchPageNarrowProps) {
diff --git a/src/pages/Search/SearchPageWide.tsx b/src/pages/Search/SearchPageWide.tsx
index dc6ff68807f47..f98317865f3fb 100644
--- a/src/pages/Search/SearchPageWide.tsx
+++ b/src/pages/Search/SearchPageWide.tsx
@@ -39,7 +39,6 @@ type SearchPageWideProps = {
     PDFValidationComponent: React.ReactNode;
     ErrorModal: React.ReactNode;
     shouldShowFooter: boolean;
-    [key: string]: unknown;
 };
 
 function SearchPageWide({

From 34806190b8c4e4b7c00098779723a590c066ac89 Mon Sep 17 00:00:00 2001
From: btkcodedev <btk.codedev@gmail.com>
Date: Fri, 27 Feb 2026 08:52:45 +0530
Subject: [PATCH 58/58] fix: global smallscreen

---
 src/components/DatePicker/CalendarPicker/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx
index 1a511625dfbb6..0364dc61c5ec9 100644
--- a/src/components/DatePicker/CalendarPicker/index.tsx
+++ b/src/components/DatePicker/CalendarPicker/index.tsx
@@ -161,7 +161,7 @@ function CalendarPicker({
     const hasAvailableDatesPrevMonth = endOfDay(new Date(minDate)) < startOfMonth(new Date(currentDateView));
 
     useEffect(() => {
-        if (isFirstRender.current) {
+        if (isSmallScreenWidth || isFirstRender.current) {
             isFirstRender.current = false;
             return;
         }
@@ -170,7 +170,7 @@ function CalendarPicker({
         const newHeight = rowCount * CONST.CALENDAR_PICKER_DAY_HEIGHT;
 
         heightValue.set(withTiming(newHeight, {duration: 50}));
-    }, [calendarDaysMatrix?.length, heightValue]);
+    }, [calendarDaysMatrix?.length, heightValue, isSmallScreenWidth]);
 
     const animatedStyle = useAnimatedStyle(() => {
         return {
@@ -179,7 +179,7 @@ function CalendarPicker({
     });
 
     const webOnlyMarginStyle = isSmallScreenWidth ? {} : styles.mh1;
-    const calendarContainerStyle = [webOnlyMarginStyle, animatedStyle];
+    const calendarContainerStyle = isSmallScreenWidth ? [webOnlyMarginStyle, themeStyles.calendarBodyContainer] : [webOnlyMarginStyle, animatedStyle];
     const headerPaddingStyle = headerContainerStyle ?? themeStyles.ph5;
 
     const getAccessibilityState = useCallback((isSelected: boolean) => ({selected: isSelected}), []);