feat/81501: Add Range filter for all date type filters

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,
@@ -7408,6 +7409,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',
@@ -7482,6 +7484,7 @@ const CONST = {
             ON_PREFIX: 'reportFieldOn-',
             AFTER_PREFIX: 'reportFieldAfter-',
             BEFORE_PREFIX: 'reportFieldBefore-',
+            RANGE_PREFIX: 'reportFieldRange-',
         },
         TAG_EMPTY_VALUE: 'none',
         CATEGORY_EMPTY_VALUE: 'none',
@@ -7610,6 +7613,7 @@ const CONST = {
             ON: 'On',
             AFTER: 'After',
             BEFORE: 'Before',
+            RANGE: 'Range',
         },
         AMOUNT_MODIFIERS: {
             LESS_THAN: 'LessThan',

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>
     );
 }

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, {useCallback, 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,13 +180,14 @@ function CalendarPicker({
 
     const webOnlyMarginStyle = isSmallScreenWidth ? {} : styles.mh1;
     const calendarContainerStyle = isSmallScreenWidth ? [webOnlyMarginStyle, themeStyles.calendarBodyContainer] : [webOnlyMarginStyle, animatedStyle];
+    const headerPaddingStyle = headerContainerStyle ?? themeStyles.ph5;
 
     const getAccessibilityState = useCallback((isSelected: boolean) => ({selected: isSelected}), []);
 
     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

src/components/Search/FilterComponents/DateFilterBase.tsx

@@ -1,12 +1,15 @@
 import React, {useCallback, 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 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';
+import {getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
 import {getDatePresets} from '@libs/SearchUIUtils';
 import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
@@ -30,6 +33,7 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
     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 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)
@@ -43,19 +47,36 @@ 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);
 
+    const dateRangeKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
+        ? (`${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];
     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]: dateRangeValue,
         }),
-        [dateAfterValue, dateBeforeValue, dateOnValue],
+        [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;
         return getDatePresets(dateKey, hasFeed);
@@ -76,11 +97,14 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
 
         if (selectedDateModifier) {
             searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
+            setRangeDisplayText(searchDatePresetFilterBaseRef.current.getRangeDisplayText());
             setSelectedDateModifier(null);
+            setShouldShowRangeError(false);
             return;
         }
 
         searchDatePresetFilterBaseRef.current.clearDateValues();
+        setRangeDisplayText('');
     }, [selectedDateModifier]);
 
     const save = useCallback(() => {
@@ -89,58 +113,82 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         }
 
         if (selectedDateModifier) {
+            if (!searchDatePresetFilterBaseRef.current.validate()) {
+                return;
+            }
+
             searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
+            setRangeDisplayText(searchDatePresetFilterBaseRef.current.getRangeDisplayText());
             setSelectedDateModifier(null);
+            setShouldShowRangeError(false);
             return;
         }
 
         const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-
         onSubmit({
             [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) {
+                searchDatePresetFilterBaseRef.current.resetDateValuesToDefault();
+                setRangeDisplayText(searchDatePresetFilterBaseRef.current.getRangeDisplayText());
+            }
             setSelectedDateModifier(null);
+            setShouldShowRangeError(false);
             return;
         }
 
         back();
     };
 
+    const hasRangeInput = !!rangeDisplayText;
+
     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}
                     selectedDateModifier={selectedDateModifier}
                     onSelectDateModifier={setSelectedDateModifier}
                     presets={presets}
                     isSearchAdvancedFiltersFormLoading={isSearchAdvancedFiltersFormLoading}
+                    shouldShowRangeError={shouldShowRangeError}
+                    onDateValuesChange={handleDateValuesChange}
+                    onRangeValidationErrorChange={setShouldShowRangeError}
+                    forceVerticalCalendars
+                />
+                {selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE && hasRangeInput && (
+                    <Text style={[styles.textLabelSupporting, styles.mh5, styles.mt2]}>
+                        {`${translate('common.range')}: `}
+                        <Text style={[styles.textLabel]}>{rangeDisplayText}</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>
     );
 }