Suggested Search & Filter Revamp

src/CONST.ts

@@ -408,6 +408,9 @@ const CONST = {
         horizontal: 12 + variables.navigationTabBarSize,
         vertical: 72,
     },
+    POPOVER_DROPDOWN_WIDTH: 336,
+    POPOVER_DROPDOWN_MIN_HEIGHT: 0,
+    POPOVER_DROPDOWN_MAX_HEIGHT: 476,
     POPOVER_DATE_WIDTH: 338,
     POPOVER_DATE_MAX_HEIGHT: 366,
     POPOVER_DATE_MIN_HEIGHT: 322,
@@ -6548,7 +6551,6 @@ const CONST = {
             TAX_AMOUNT: 'taxAmount',
             TITLE: 'title',
             ASSIGNEE: 'assignee',
-            CREATED_BY: 'createdBy',
             IN: 'in',
         },
         SYNTAX_OPERATORS: {
@@ -6592,7 +6594,6 @@ const CONST = {
             POSTED: 'posted',
             TITLE: 'title',
             ASSIGNEE: 'assignee',
-            CREATED_BY: 'createdBy',
             REIMBURSABLE: 'reimbursable',
             BILLABLE: 'billable',
             POLICY_ID: 'policyID',
@@ -6633,13 +6634,13 @@ const CONST = {
             POSTED: 'posted',
             TITLE: 'title',
             ASSIGNEE: 'assignee',
-            CREATED_BY: 'created-by',
             REIMBURSABLE: 'reimbursable',
             BILLABLE: 'billable',
         },
         DATE_MODIFIERS: {
             BEFORE: 'Before',
             AFTER: 'After',
+            ON: 'On',
         },
         SNAPSHOT_ONYX_KEYS: [
             ONYXKEYS.COLLECTION.REPORT,
@@ -6650,6 +6651,11 @@ const CONST = {
             ONYXKEYS.PERSONAL_DETAILS_LIST,
             ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS,
         ],
+        DATE_FILTERS: {
+            BEFORE: 'before',
+            AFTER: 'after',
+            ON: 'on',
+        },
     },
 
     EXPENSE: {

src/ROUTES.ts

@@ -71,7 +71,6 @@ const ROUTES = {
     SEARCH_ADVANCED_FILTERS_POSTED: 'search/filters/posted',
     SEARCH_ADVANCED_FILTERS_TITLE: 'search/filters/title',
     SEARCH_ADVANCED_FILTERS_ASSIGNEE: 'search/filters/assignee',
-    SEARCH_ADVANCED_FILTERS_CREATED_BY: 'search/filters/createdBy',
     SEARCH_ADVANCED_FILTERS_REIMBURSABLE: 'search/filters/reimbursable',
     SEARCH_ADVANCED_FILTERS_BILLABLE: 'search/filters/billable',
     SEARCH_ADVANCED_FILTERS_WORKSPACE: 'search/filters/workspace',

src/SCREENS.ts

@@ -63,7 +63,6 @@ const SCREENS = {
         ADVANCED_FILTERS_TO_RHP: 'Search_Advanced_Filters_To_RHP',
         ADVANCED_FILTERS_TITLE_RHP: 'Search_Advanced_Filters_Title_RHP',
         ADVANCED_FILTERS_ASSIGNEE_RHP: 'Search_Advanced_Filters_Assignee_RHP',
-        ADVANCED_FILTERS_CREATED_BY_RHP: 'Search_Advanced_Filters_Created_By_RHP',
         ADVANCED_FILTERS_REIMBURSABLE_RHP: 'Search_Advanced_Filters_Reimbursable_RHP',
         ADVANCED_FILTERS_BILLABLE_RHP: 'Search_Advanced_Filters_Billable_RHP',
         ADVANCED_FILTERS_WORKSPACE_RHP: 'Search_Advanced_Filters_Workspace_RHP',

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -55,6 +55,8 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
             hideModalContentWhileAnimating
             useNativeDriver
             shouldHandleNavigationBack
+            shouldUseCustomBackdrop
+            onBackdropPress={onClose}
             enableEdgeToEdgeBottomSafeAreaPadding
         >
             <ScreenWrapper

src/components/EmptyStateComponent/index.tsx

@@ -105,6 +105,7 @@ function EmptyStateComponent({
                             <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : styles.mhAuto]}>
                                 {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled, style}) => (
                                     <Button
+                                        key={buttonText}
                                         success={success}
                                         onPress={buttonAction}
                                         text={buttonText}

src/components/EmptyStateComponent/types.ts

@@ -9,15 +9,15 @@ import type IconAsset from '@src/types/utils/IconAsset';
 
 type ValidSkeletons = typeof SearchRowSkeleton | typeof TableRowSkeleton;
 type MediaTypes = ValueOf<typeof CONST.EMPTY_STATE_MEDIA>;
-type Button = {buttonText?: string; buttonAction?: () => void; success?: boolean; icon?: IconAsset; isDisabled?: boolean; style?: StyleProp<ViewStyle>};
+type EmptyStateButton = {buttonText?: string; buttonAction?: () => void; success?: boolean; icon?: IconAsset; isDisabled?: boolean; style?: StyleProp<ViewStyle>};
 
 type SharedProps<T> = {
     SkeletonComponent?: ValidSkeletons;
     title: string;
     titleStyles?: StyleProp<TextStyle>;
     subtitle?: string;
     children?: React.ReactNode;
-    buttons?: Button[];
+    buttons?: EmptyStateButton[];
     containerStyles?: StyleProp<ViewStyle>;
     cardStyles?: StyleProp<ViewStyle>;
     cardContentStyles?: StyleProp<ViewStyle>;
@@ -45,4 +45,4 @@ type VideoLoadedEventType = {
     };
 };
 
-export type {EmptyStateComponentProps, VideoLoadedEventType};
+export type {EmptyStateComponentProps, VideoLoadedEventType, EmptyStateButton};

src/components/Search/FilterDropdowns/DateSelectPopup/CalendarView.tsx

@@ -0,0 +1,66 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import type {ValueOf} from 'type-fest';
+import Button from '@components/Button';
+import CalendarPicker from '@components/DatePicker/CalendarPicker';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type CONST from '@src/CONST';
+
+type CalendarViewProps = {
+    view: ValueOf<typeof CONST.SEARCH.DATE_FILTERS>;
+    value: string | null;
+    navigateBack: () => void;
+    setValue: (key: ValueOf<typeof CONST.SEARCH.DATE_FILTERS>, value: string | null) => void;
+};
+
+function CalendarView({view, value, navigateBack, setValue}: CalendarViewProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [localDateValue, setLocalDateValue] = useState(value);
+
+    const resetChanges = () => {
+        setValue(view, null);
+        navigateBack();
+    };
+
+    const saveChanges = () => {
+        setValue(view, localDateValue);
+        navigateBack();
+    };
+
+    return (
+        <View style={[styles.pv4]}>
+            <HeaderWithBackButton
+                style={[styles.h10, styles.pb3]}
+                subtitle={translate(`common.${view}`)}
+                onBackButtonPress={navigateBack}
+            />
+
+            <CalendarPicker
+                value={localDateValue ?? undefined}
+                onSelected={setLocalDateValue}
+            />
+
+            <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.pt2]}>
+                <Button
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.reset')}
+                    onPress={resetChanges}
+                />
+                <Button
+                    success
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.save')}
+                    onPress={saveChanges}
+                />
+            </View>
+        </View>
+    );
+}
+
+CalendarView.displayName = 'CalendarView';
+export default CalendarView;

src/components/Search/FilterDropdowns/DateSelectPopup/RootView.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {ValueOf} from 'type-fest';
+import Button from '@components/Button';
+import MenuItem from '@components/MenuItem';
+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';
+import type {DateSelectPopupValue} from '.';
+
+type RootViewProps = {
+    value: DateSelectPopupValue;
+    applyChanges: () => void;
+    resetChanges: () => void;
+    setView: (view: ValueOf<typeof CONST.SEARCH.DATE_FILTERS>) => void;
+};
+
+function RootView({value, applyChanges, resetChanges, setView}: RootViewProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const label = translate('common.date');
+
+    return (
+        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
+            {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
+
+            <View>
+                {Object.values(CONST.SEARCH.DATE_FILTERS).map((dateType) => {
+                    const dateValue = value[dateType];
+                    const description = dateValue ?? undefined;
+
+                    return (
+                        <MenuItem
+                            key={dateType}
+                            shouldShowRightIcon
+                            title={translate(`common.${dateType}`)}
+                            description={description}
+                            onPress={() => setView(dateType)}
+                        />
+                    );
+                })}
+            </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>
+    );
+}
+
+RootView.displayName = 'RootView';
+export default RootView;

src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx

@@ -0,0 +1,72 @@
+import React, {useCallback, useState} from 'react';
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+import CalendarView from './CalendarView';
+import RootView from './RootView';
+
+type DateSelectPopupValue = Record<ValueOf<typeof CONST.SEARCH.DATE_FILTERS>, string | null>;
+
+type DateSelectPopupProps = {
+    /** The current value of the date */
+    value: DateSelectPopupValue;
+
+    /** Function to call to close the overlay when changes are applied */
+    closeOverlay: () => void;
+
+    /** Function to call when changes are applied */
+    onChange: (value: DateSelectPopupValue) => void;
+};
+
+function DateSelectPopup({value, closeOverlay, onChange}: DateSelectPopupProps) {
+    const [localDateValues, setLocalDateValues] = useState(value);
+    const [view, setView] = useState<ValueOf<typeof CONST.SEARCH.DATE_FILTERS> | null>(null);
+
+    const setDateValue = (key: ValueOf<typeof CONST.SEARCH.DATE_FILTERS>, dateValue: string | null) => {
+        setLocalDateValues((currentValue) => {
+            return {
+                ...currentValue,
+                [key]: dateValue,
+            };
+        });
+    };
+
+    const navigateToRootView = useCallback(() => {
+        setView(null);
+    }, []);
+
+    const resetChanges = useCallback(() => {
+        // Reset each field back to null
+        setLocalDateValues((prev) => {
+            return Object.fromEntries(Object.entries(prev).map(([key]) => [key, null])) as DateSelectPopupValue;
+        });
+    }, []);
+
+    const applyChanges = useCallback(() => {
+        closeOverlay();
+        onChange(localDateValues);
+    }, [closeOverlay, localDateValues, onChange]);
+
+    if (!view) {
+        return (
+            <RootView
+                value={localDateValues}
+                applyChanges={applyChanges}
+                resetChanges={resetChanges}
+                setView={setView}
+            />
+        );
+    }
+
+    return (
+        <CalendarView
+            view={view}
+            value={localDateValues[view]}
+            navigateBack={navigateToRootView}
+            setValue={setDateValue}
+        />
+    );
+}
+
+DateSelectPopup.displayName = 'DateSelectPopup';
+export type {DateSelectPopupValue};
+export default DateSelectPopup;