From 28223969e74bf0f417f30014391ac3c53128df91 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 01:14:29 +0800
Subject: [PATCH 01/25] prepare new popups and hooks

---
 .../Search/FilterDropdowns/AmountPopup.tsx    | 190 +++++++++++
 .../FilterDropdowns/CardSelectPopup.tsx       | 218 +++++++++++++
 .../FilterDropdowns/CategorySelectPopup.tsx   |  92 ++++++
 .../FilterDropdowns/CurrencySelectPopup.tsx   |  33 ++
 .../FilterDropdowns/ExportedToSelectPopup.tsx | 144 +++++++++
 .../FilterDropdowns/GroupCurrencyPopup.tsx    |  45 +++
 .../Search/FilterDropdowns/InSelectPopup.tsx  | 219 +++++++++++++
 .../FilterDropdowns/ReportFieldPopup.tsx      | 297 ++++++++++++++++++
 .../Search/FilterDropdowns/TagSelectPopup.tsx |  68 ++++
 .../FilterDropdowns/TaxRateSelectPopup.tsx    |  54 ++++
 .../FilterDropdowns/WorkspaceSelectPopup.tsx  |  54 ++++
 .../Search/hooks/useFilterCardValue.tsx       |  48 +++
 .../Search/hooks/useFilterReportValue.tsx     |  20 ++
 .../Search/hooks/useFilterTaxRateValue.tsx    |  28 ++
 14 files changed, 1510 insertions(+)
 create mode 100644 src/components/Search/FilterDropdowns/AmountPopup.tsx
 create mode 100644 src/components/Search/FilterDropdowns/CardSelectPopup.tsx
 create mode 100644 src/components/Search/FilterDropdowns/CategorySelectPopup.tsx
 create mode 100644 src/components/Search/FilterDropdowns/CurrencySelectPopup.tsx
 create mode 100644 src/components/Search/FilterDropdowns/ExportedToSelectPopup.tsx
 create mode 100644 src/components/Search/FilterDropdowns/GroupCurrencyPopup.tsx
 create mode 100644 src/components/Search/FilterDropdowns/InSelectPopup.tsx
 create mode 100644 src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
 create mode 100644 src/components/Search/FilterDropdowns/TagSelectPopup.tsx
 create mode 100644 src/components/Search/FilterDropdowns/TaxRateSelectPopup.tsx
 create mode 100644 src/components/Search/FilterDropdowns/WorkspaceSelectPopup.tsx
 create mode 100644 src/components/Search/hooks/useFilterCardValue.tsx
 create mode 100644 src/components/Search/hooks/useFilterReportValue.tsx
 create mode 100644 src/components/Search/hooks/useFilterTaxRateValue.tsx

diff --git a/src/components/Search/FilterDropdowns/AmountPopup.tsx b/src/components/Search/FilterDropdowns/AmountPopup.tsx
new file mode 100644
index 000000000000..1ddca5ebd436
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/AmountPopup.tsx
@@ -0,0 +1,190 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import type {ValueOf} from 'type-fest';
+import AmountWithoutCurrencyInput from '@components/AmountWithoutCurrencyInput';
+import Button from '@components/Button';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItem from '@components/MenuItem';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {convertToBackendAmount, convertToFrontendAmountAsString} from '@libs/CurrencyUtils';
+import CONST from '@src/CONST';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import type {SearchAmountFilterKeys} from '../types';
+import type {PopoverComponentProps} from './DropdownButton';
+import Text from '@components/Text';
+
+type AmountPopupProps = PopoverComponentProps & {
+    filterKey: SearchAmountFilterKeys;
+    label: string;
+    value: Record<ValueOf<typeof CONST.SEARCH.AMOUNT_MODIFIERS>, string | undefined>;
+    updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+type AmountInputProps = {
+    title: string;
+    value: string;
+    name: string;
+    onSave: (value: string) => void;
+    onBackButtonPress: () => void;
+};
+
+function AmountInput({title, value, name, onSave, onBackButtonPress}: AmountInputProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const [amount, setAmount] = useState(value);
+
+    return (
+        <View style={[!shouldUseNarrowLayout && styles.pv4, styles.gap2]}>
+            <HeaderWithBackButton
+                shouldDisplayHelpButton={false}
+                style={[styles.h10]}
+                subtitle={title}
+                onBackButtonPress={onBackButtonPress}
+            />
+            <AmountWithoutCurrencyInput
+                containerStyles={styles.ph4}
+                defaultValue={amount}
+                onInputChange={setAmount}
+                label={title}
+                accessibilityLabel={title}
+                name={name}
+                role={CONST.ROLE.PRESENTATION}
+                inputMode={CONST.INPUT_MODE.DECIMAL}
+                shouldAllowNegative
+                autoFocus
+            />
+            <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.mt2]}>
+                <Button
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.reset')}
+                    onPress={() => onSave('')}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_AMOUNT}
+                />
+                <Button
+                    success
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.apply')}
+                    onPress={() => onSave(amount)}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_AMOUNT}
+                />
+            </View>
+        </View>
+    );
+}
+
+function AmountPopup({filterKey, label, value, closeOverlay, updateFilterForm}: AmountPopupProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const [selectedModifier, setSelectedModifier] = useState<ValueOf<typeof CONST.SEARCH.AMOUNT_MODIFIERS> | null>(null);
+    const [amountValues, setAmountValues] = useState(value);
+
+    const title = {
+        [CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO]: translate('search.filters.amount.equalTo'),
+        [CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN]: translate('search.filters.amount.greaterThan'),
+        [CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN]: translate('search.filters.amount.lessThan'),
+    };
+
+    const modifierConfig = [CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO, CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN, CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN];
+
+    const formatAmount = (amount: string | undefined) => {
+        return amount ? convertToFrontendAmountAsString(Number(amount)) : '';
+    };
+
+    if (selectedModifier) {
+        const goBack = () => {
+            setSelectedModifier(null);
+        };
+
+        const save = (rawAmount: string) => {
+            if (rawAmount.trim() === '') {
+                setAmountValues((prevAmountValues) => ({...prevAmountValues, [selectedModifier]: null}));
+                goBack();
+                return;
+            }
+
+            const newAmount = convertToBackendAmount(Number(rawAmount)).toString();
+
+            // When setting an Equal To value, clear Greater Than and Less Than to avoid conflicting filters.
+            if (selectedModifier === CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO) {
+                setAmountValues({[CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN]: '', [CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN]: '', [selectedModifier]: newAmount});
+            }
+
+            // When setting Greater Than or Less Than, clear Equal To to avoid conflicting filters.
+            if (selectedModifier === CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN || selectedModifier === CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN) {
+                setAmountValues((prevAmountValues) => ({...prevAmountValues, [CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO]: '', [selectedModifier]: newAmount}));
+            }
+            goBack();
+        };
+
+        return (
+            <AmountInput
+                title={title[selectedModifier]}
+                value={formatAmount(amountValues[selectedModifier])}
+                name={`${filterKey}${selectedModifier}`}
+                onBackButtonPress={goBack}
+                onSave={save}
+            />
+        );
+    }
+
+    const onChange = (values: Record<ValueOf<typeof CONST.SEARCH.AMOUNT_MODIFIERS>, string | undefined>) => {
+        const formValues: Record<string, string | undefined> = {};
+        formValues[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO}`] = values[CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO];
+        formValues[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN}`] = values[CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN];
+        formValues[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN}`] = values[CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN];
+        updateFilterForm(formValues);
+        closeOverlay();
+    };
+
+    const applyChanges = () => onChange(amountValues);
+
+    const resetChanges = () => {
+        onChange({
+            [CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO]: undefined,
+            [CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN]: undefined,
+            [CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN]: undefined,
+        });
+    };
+
+    return (
+        <View style={[!isSmallScreenWidth && styles.pv4]}>
+            {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
+            {modifierConfig.map((modifier) => (
+                <MenuItem
+                    key={modifier}
+                    title={title[modifier]}
+                    description={formatAmount(amountValues[modifier])}
+                    onPress={() => setSelectedModifier(modifier)}
+                    shouldShowRightIcon
+                    viewMode={CONST.OPTION_MODE.COMPACT}
+                />
+            ))}
+            <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.mt2]}>
+                <Button
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.reset')}
+                    onPress={resetChanges}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_AMOUNT}
+                />
+                <Button
+                    success
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.apply')}
+                    onPress={applyChanges}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_AMOUNT}
+                />
+            </View>
+        </View>
+    );
+}
+
+export default AmountPopup;
diff --git a/src/components/Search/FilterDropdowns/CardSelectPopup.tsx b/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
new file mode 100644
index 000000000000..f044941dc8b7
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
@@ -0,0 +1,218 @@
+import React, {useEffect, useState} from 'react';
+import {View} from 'react-native';
+import ActivityIndicator from '@components/ActivityIndicator';
+import Button from '@components/Button';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
+import CardListItem from '@components/SelectionList/ListItem/CardListItem';
+import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
+import {useCompanyCardFeedIcons} from '@hooks/useCompanyCardIcons';
+import useDebouncedState from '@hooks/useDebouncedState';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useOnyx from '@hooks/useOnyx';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
+import useThemeIllustrations from '@hooks/useThemeIllustrations';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {openSearchCardFiltersPage} from '@libs/actions/Search';
+import {buildCardFeedsData, buildCardsData, CardFilterItem, generateSelectedCards, getDomainFeedData, getSelectedCardsFromFeeds} from '@libs/CardFeedUtils';
+import {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+import type {PopoverComponentProps} from './DropdownButton';
+import Text from '@components/Text';
+
+type CardSelectPopupProps = PopoverComponentProps & {
+    updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+function CardSelectPopup({updateFilterForm, closeOverlay}: CardSelectPopupProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const illustrations = useThemeIllustrations();
+    const companyCardFeedIcons = useCompanyCardFeedIcons();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const {windowHeight} = useWindowDimensions();
+
+    const [areCardsLoaded] = useOnyx(ONYXKEYS.IS_SEARCH_FILTERS_CARD_DATA_LOADED);
+    const [userCardList, userCardListMetadata] = useOnyx(ONYXKEYS.CARD_LIST);
+    const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES);
+    const [workspaceCardFeeds, workspaceCardFeedsMetadata] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
+    const [policies, policiesMetadata] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
+    const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const personalDetails = usePersonalDetails();
+
+    const [selectedCards, setSelectedCards] = useState<string[]>([]);
+
+    useEffect(() => {
+        if (isOffline) {
+            return;
+        }
+        openSearchCardFiltersPage();
+    }, [isOffline]);
+
+    useEffect(() => {
+        const generatedCards = generateSelectedCards(userCardList, workspaceCardFeeds, searchAdvancedFiltersForm?.feed, searchAdvancedFiltersForm?.cardID);
+        setSelectedCards(generatedCards);
+    }, [searchAdvancedFiltersForm?.feed, searchAdvancedFiltersForm?.cardID, workspaceCardFeeds, userCardList]);
+
+    const individualCardsSectionData = buildCardsData(
+        workspaceCardFeeds ?? {},
+        userCardList ?? {},
+        personalDetails ?? {},
+        selectedCards,
+        illustrations,
+        companyCardFeedIcons,
+        false,
+        customCardNames,
+    );
+
+    const closedCardsSectionData = buildCardsData(
+        workspaceCardFeeds ?? {},
+        userCardList ?? {},
+        personalDetails ?? {},
+        selectedCards,
+        illustrations,
+        companyCardFeedIcons,
+        true,
+        customCardNames,
+    );
+
+    const domainFeedsData = getDomainFeedData(workspaceCardFeeds);
+
+    const cardFeedsSectionData = buildCardFeedsData(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, domainFeedsData, policies, selectedCards, translate, illustrations, companyCardFeedIcons);
+
+    const shouldShowSearchInput =
+        cardFeedsSectionData.selected.length + cardFeedsSectionData.unselected.length + individualCardsSectionData.selected.length + individualCardsSectionData.unselected.length >=
+        CONST.STANDARD_LIST_ITEM_LIMIT;
+
+    const searchFunction = (item: CardFilterItem) =>
+        !!item.text?.toLocaleLowerCase().includes(debouncedSearchTerm.toLocaleLowerCase()) ||
+        !!item.lastFourPAN?.toLocaleLowerCase().includes(debouncedSearchTerm.toLocaleLowerCase()) ||
+        !!item.cardName?.toLocaleLowerCase().includes(debouncedSearchTerm.toLocaleLowerCase()) ||
+        (item.isVirtual && translate('workspace.expensifyCard.virtual').toLocaleLowerCase().includes(debouncedSearchTerm.toLocaleLowerCase()));
+
+    const sections =
+        searchAdvancedFiltersForm === undefined
+            ? []
+            : [
+                  {
+                      title: undefined,
+                      data: [...cardFeedsSectionData.selected, ...individualCardsSectionData.selected, ...closedCardsSectionData.selected].filter(searchFunction),
+                      sectionIndex: 0,
+                  },
+                  {
+                      title: translate('search.filters.card.cardFeeds'),
+                      data: cardFeedsSectionData.unselected.filter(searchFunction),
+                      sectionIndex: 1,
+                  },
+                  {
+                      title: translate('search.filters.card.individualCards'),
+                      data: individualCardsSectionData.unselected.filter(searchFunction),
+                      sectionIndex: 2,
+                  },
+                  {
+                      title: translate('search.filters.card.closedCards'),
+                      data: closedCardsSectionData.unselected.filter(searchFunction),
+                      sectionIndex: 3,
+                  },
+              ];
+
+    const applyChanges = () => {
+        const feeds = cardFeedsSectionData.selected.map((feed) => feed.cardFeedKey);
+        const cardsFromSelectedFeed = getSelectedCardsFromFeeds(userCardList, workspaceCardFeeds, feeds);
+        const IDs = selectedCards.filter((card) => !cardsFromSelectedFeed.includes(card));
+
+        updateFilterForm({cardID: IDs, feed: feeds});
+        closeOverlay();
+    };
+
+    const resetChanges = () => {
+        updateFilterForm({feed: undefined, cardID: undefined});
+        closeOverlay();
+    };
+
+    const updateNewCards = (item: CardFilterItem) => {
+        if (!item.keyForList) {
+            return;
+        }
+
+        const isCardFeed = item?.isCardFeed && item?.correspondingCards;
+
+        if (item.isSelected) {
+            const newCardsObject = selectedCards.filter((card) => (isCardFeed ? !item.correspondingCards?.includes(card) : card !== item.keyForList));
+            setSelectedCards(newCardsObject);
+        } else {
+            const newCardsObject = isCardFeed ? [...selectedCards, ...(item?.correspondingCards ?? [])] : [...selectedCards, item.keyForList];
+            setSelectedCards(newCardsObject);
+        }
+    };
+
+    const textInputOptions = {
+        value: searchTerm,
+        label: translate('common.search'),
+        onChangeText: setSearchTerm,
+        headerMessage: debouncedSearchTerm.trim() && sections.every((section) => !section.data.length) ? translate('common.noResultsFound') : '',
+    };
+
+    const isLoadingOnyxData = isLoadingOnyxValue(userCardListMetadata, workspaceCardFeedsMetadata, searchAdvancedFiltersFormMetadata, policiesMetadata);
+    const shouldShowLoadingState = isLoadingOnyxData || (!areCardsLoaded && !isOffline);
+    const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'SearchFiltersCardPage', isLoadingFromOnyx: isLoadingOnyxData};
+
+    return (
+        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
+            {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{translate('common.card')}</Text>}
+            {!!shouldShowLoadingState && (
+                <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                    <ActivityIndicator
+                        color={theme.spinner}
+                        size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                        style={[styles.pl3]}
+                        reasonAttributes={reasonAttributes}
+                    />
+                </View>
+            )}
+            {!shouldShowLoadingState && (
+                <View style={[styles.getSelectionListPopoverHeight(sections.flatMap((section) => section.data).length || 1, windowHeight, shouldShowSearchInput)]}>
+                    <SelectionListWithSections<CardFilterItem>
+                        sections={sections}
+                        ListItem={CardListItem}
+                        onSelectRow={updateNewCards}
+                        shouldPreventDefaultFocusOnSelectRow={false}
+                        shouldShowTextInput={shouldShowSearchInput}
+                        textInputOptions={textInputOptions}
+                        shouldStopPropagation
+                        canSelectMultiple
+                    />
+                </View>
+            )}
+
+            <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
+                <Button
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.reset')}
+                    onPress={resetChanges}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_CARD}
+                />
+                <Button
+                    success
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.apply')}
+                    onPress={applyChanges}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_CARD}
+                />
+            </View>
+        </View>
+    );
+}
+
+export default CardSelectPopup;
diff --git a/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx b/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx
new file mode 100644
index 000000000000..e6f38f32ab58
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import type {OnyxCollection} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import {getDecodedCategoryName} from '@libs/CategoryUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import type {PolicyCategories, PolicyCategory} from '@src/types/onyx';
+import {getEmptyObject} from '@src/types/utils/EmptyObject';
+import MultiSelectFilterPopup from '../SearchPageHeader/MultiSelectFilterPopup';
+import type {MultiSelectItem} from './MultiSelectPopup';
+
+type CategorySelectPopupProps = {
+    closeOverlay: () => void;
+    updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+function CategorySelectPopup({closeOverlay, updateFilterForm}: CategorySelectPopupProps) {
+    const {translate} = useLocalize();
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const [personalPolicyID] = useOnyx(ONYXKEYS.PERSONAL_POLICY_ID);
+    const policyIDs = searchAdvancedFiltersForm?.policyID ?? [];
+
+    const selectedCategoriesItems = searchAdvancedFiltersForm?.category?.map((category) => {
+        if (category === CONST.SEARCH.CATEGORY_EMPTY_VALUE) {
+            return {text: translate('search.noCategory'), value: category};
+        }
+        return {text: category, value: category};
+    });
+
+    const availableNonPersonalPolicyCategoriesSelector = (policyCategories: OnyxCollection<PolicyCategories>) =>
+        Object.fromEntries(
+            Object.entries(policyCategories ?? {}).filter(([key, categories]) => {
+                if (key === `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${personalPolicyID}`) {
+                    return false;
+                }
+                const availableCategories = Object.values(categories ?? {}).filter((category) => category.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE);
+                return availableCategories.length > 0;
+            }),
+        );
+
+    const [allPolicyCategories = getEmptyObject<NonNullable<OnyxCollection<PolicyCategories>>>()] = useOnyx(
+        ONYXKEYS.COLLECTION.POLICY_CATEGORIES,
+        {
+            selector: availableNonPersonalPolicyCategoriesSelector,
+        },
+        [availableNonPersonalPolicyCategoriesSelector],
+    );
+    const selectedPoliciesCategories: PolicyCategory[] = Object.keys(allPolicyCategories ?? {})
+        .filter((key) => policyIDs?.map((policyID) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`)?.includes(key))
+        ?.map((key) => Object.values(allPolicyCategories?.[key] ?? {}))
+        .flat();
+
+    const categoryItems = [{text: translate('search.noCategory'), value: CONST.SEARCH.CATEGORY_EMPTY_VALUE as string}];
+    const uniqueCategoryNames = new Set<string>();
+    if (policyIDs?.length === 0) {
+        const categories = Object.values(allPolicyCategories ?? {}).flatMap((policyCategories) => Object.values(policyCategories ?? {}));
+        for (const category of categories) {
+            uniqueCategoryNames.add(category.name);
+        }
+    } else if (selectedPoliciesCategories.length > 0) {
+        for (const category of selectedPoliciesCategories) {
+            uniqueCategoryNames.add(category.name);
+        }
+    }
+    categoryItems.push(
+        ...Array.from(uniqueCategoryNames)
+            .filter(Boolean)
+            .map((categoryName) => {
+                const decodedCategoryName = getDecodedCategoryName(categoryName);
+                return {text: decodedCategoryName, value: categoryName};
+            }),
+    );
+
+    const updateCategoryFilterForm = (items: Array<MultiSelectItem<string>>) => {
+        updateFilterForm({category: items.map((item) => item.value)});
+    };
+
+    return (
+        <MultiSelectFilterPopup
+            closeOverlay={closeOverlay}
+            translationKey={'common.category'}
+            items={categoryItems}
+            value={selectedCategoriesItems ?? []}
+            isSearchable={categoryItems.length >= CONST.STANDARD_LIST_ITEM_LIMIT}
+            onChangeCallback={updateCategoryFilterForm}
+        />
+    );
+}
+
+export default CategorySelectPopup;
diff --git a/src/components/Search/FilterDropdowns/CurrencySelectPopup.tsx b/src/components/Search/FilterDropdowns/CurrencySelectPopup.tsx
new file mode 100644
index 000000000000..b54405c9b12c
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/CurrencySelectPopup.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {useCurrencyListActions, useCurrencyListState} from '@components/CurrencyListContextProvider';
+import {getCurrencyOptions} from '@libs/SearchUIUtils';
+import type {TranslationPaths} from '@src/languages/types';
+import MultiSelectFilterPopup from '../SearchPageHeader/MultiSelectFilterPopup';
+import type {MultiSelectItem} from './MultiSelectPopup';
+
+type CurrencySelectPopupProps = {
+    translationKey: TranslationPaths;
+    value: string[];
+    closeOverlay: () => void;
+    onChange: (item: Array<MultiSelectItem<string>>) => void;
+};
+
+function CurrencySelectPopup({translationKey, value, onChange, closeOverlay}: CurrencySelectPopupProps) {
+    const {currencyList} = useCurrencyListState();
+    const {getCurrencySymbol} = useCurrencyListActions();
+    const currencyOptions = getCurrencyOptions(currencyList, getCurrencySymbol);
+    const currencyValues = currencyOptions.filter((option) => value.includes(option.value));
+
+    return (
+        <MultiSelectFilterPopup
+            closeOverlay={closeOverlay}
+            translationKey={translationKey}
+            items={currencyOptions}
+            value={currencyValues}
+            isSearchable
+            onChangeCallback={onChange}
+        />
+    );
+}
+
+export default CurrencySelectPopup;
diff --git a/src/components/Search/FilterDropdowns/ExportedToSelectPopup.tsx b/src/components/Search/FilterDropdowns/ExportedToSelectPopup.tsx
new file mode 100644
index 000000000000..2f8aa09549c4
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/ExportedToSelectPopup.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import {View} from 'react-native';
+import {TupleToUnion} from 'type-fest';
+import Icon from '@components/Icon';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {getSearchValueForConnection} from '@libs/AccountingUtils';
+import {getExportTemplates} from '@libs/actions/Search';
+import {getConnectedIntegrationNamesForPolicies} from '@libs/PolicyUtils';
+import {getIntegrationIcon} from '@libs/ReportUtils';
+import variables from '@styles/variables';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import MultiSelectFilterPopup from '../SearchPageHeader/MultiSelectFilterPopup';
+import type {MultiSelectItem} from './MultiSelectPopup';
+
+type ExportedToSelectPopupProps = {
+    closeOverlay: () => void;
+    updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+const STANDARD_EXPORT_TEMPLATE_ID_TO_DISPLAY_LABEL: Record<string, string> = {
+    [CONST.REPORT.EXPORT_OPTIONS.REPORT_LEVEL_EXPORT]: CONST.REPORT.EXPORT_OPTION_LABELS.REPORT_LEVEL_EXPORT,
+    [CONST.REPORT.EXPORT_OPTIONS.EXPENSE_LEVEL_EXPORT]: CONST.REPORT.EXPORT_OPTION_LABELS.EXPENSE_LEVEL_EXPORT,
+};
+
+function filterExportedToSelector(searchAdvancedFiltersForm: SearchAdvancedFiltersForm | undefined) {
+    return searchAdvancedFiltersForm?.exportedTo;
+}
+
+function ExportedToSelectPopup({closeOverlay, updateFilterForm}: ExportedToSelectPopupProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const StyleUtils = useStyleUtils();
+    const theme = useTheme();
+    const expensifyIcons = useMemoizedLazyExpensifyIcons(['XeroSquare', 'QBOSquare', 'NetSuiteSquare', 'IntacctSquare', 'QBDSquare', 'CertiniaSquare', 'Table']);
+    const [exportedTo] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterExportedToSelector});
+    const [integrationsExportTemplates] = useOnyx(ONYXKEYS.NVP_INTEGRATION_SERVER_EXPORT_TEMPLATES);
+    const [csvExportLayouts] = useOnyx(ONYXKEYS.NVP_CSV_EXPORT_LAYOUTS);
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const policyIDs = searchAdvancedFiltersForm?.policyID ?? [];
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+
+    const connectedIntegrationNames = getConnectedIntegrationNamesForPolicies(policies, policyIDs.length > 0 ? policyIDs : undefined);
+
+    const integrationConnectionNames = Object.values(CONST.POLICY.CONNECTIONS.NAME);
+
+    const tableIconForExportOption = (
+        <View style={[styles.mr3, styles.alignItemsCenter, styles.justifyContentCenter, StyleUtils.getWidthAndHeightStyle(variables.w28, variables.h28)]}>
+            <Icon
+                src={expensifyIcons.Table}
+                fill={theme.icon}
+                width={variables.iconSizeNormal}
+                height={variables.iconSizeNormal}
+            />
+        </View>
+    );
+    const exportedToPickerOptions = (() => {
+        const integrationConnectionNamesSet = new Set<string>(integrationConnectionNames);
+
+        const connectedIntegrationPickerItems = integrationConnectionNames
+            .filter((connectionName) => connectedIntegrationNames.has(connectionName))
+            .map((connectionName) => {
+                const icon = getIntegrationIcon(connectionName, expensifyIcons);
+                const leftElement = icon ? (
+                    <View style={[styles.mr3, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                        <Icon
+                            src={icon}
+                            width={variables.iconSizeXLarge}
+                            height={variables.iconSizeXLarge}
+                            additionalStyles={[StyleUtils.getAvatarBorderStyle(CONST.AVATAR_SIZE.DEFAULT, CONST.ICON_TYPE_AVATAR)]}
+                        />
+                    </View>
+                ) : (
+                    tableIconForExportOption
+                );
+                return {
+                    text: CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[connectionName],
+                    value: getSearchValueForConnection(connectionName),
+                    leftElement,
+                };
+            });
+
+        const usedPickerValueKeys = new Set(connectedIntegrationPickerItems.map((item) => item.value));
+        const policiesToLoadTemplatesFrom = policyIDs.length > 0 ? policyIDs.map((id) => policies?.[`${ONYXKEYS.COLLECTION.POLICY}${id}`]).filter(Boolean) : Object.values(policies ?? {});
+        const exportTemplatesFromPolicies = policiesToLoadTemplatesFrom.flatMap((policy) => getExportTemplates([], {}, translate, policy, false));
+        const exportTemplatesFromAccount = getExportTemplates(integrationsExportTemplates ?? [], csvExportLayouts ?? {}, translate, undefined, true);
+        const allExportTemplates = [...exportTemplatesFromAccount, ...exportTemplatesFromPolicies];
+
+        const exportTemplatesByTemplateId = new Map<string, TupleToUnion<typeof allExportTemplates>>();
+        for (const template of allExportTemplates) {
+            if (template.templateName && !exportTemplatesByTemplateId.has(template.templateName)) {
+                exportTemplatesByTemplateId.set(template.templateName, template);
+            }
+        }
+        const deduplicatedExportTemplates = Array.from(exportTemplatesByTemplateId.values());
+
+        const standardAndIntegrationCustomTemplatePickerItems = [];
+
+        for (const template of deduplicatedExportTemplates) {
+            if (!template.templateName || integrationConnectionNamesSet.has(template.templateName) || template.type === CONST.EXPORT_TEMPLATE_TYPES.IN_APP) {
+                continue;
+            }
+
+            const displayName = template.name ?? template.templateName ?? '';
+            const filterValue = STANDARD_EXPORT_TEMPLATE_ID_TO_DISPLAY_LABEL[template.templateName] ?? displayName;
+            if (usedPickerValueKeys.has(filterValue)) {
+                continue;
+            }
+
+            usedPickerValueKeys.add(filterValue);
+            standardAndIntegrationCustomTemplatePickerItems.push({
+                text: displayName,
+                value: filterValue,
+                leftElement: tableIconForExportOption,
+            });
+        }
+
+        return [...connectedIntegrationPickerItems, ...standardAndIntegrationCustomTemplatePickerItems];
+    })();
+    const selectedExportedTo = exportedToPickerOptions.filter((option) => exportedTo?.includes(option.value));
+
+    const updateExportedToFilterForm = (items: Array<MultiSelectItem<string>>) => {
+        updateFilterForm({exportedTo: items.map((item) => item.value)});
+    };
+
+    return (
+        <MultiSelectFilterPopup
+            closeOverlay={closeOverlay}
+            translationKey={'search.exportedTo'}
+            items={exportedToPickerOptions}
+            value={selectedExportedTo}
+            isSearchable={exportedToPickerOptions.length >= CONST.STANDARD_LIST_ITEM_LIMIT}
+            onChangeCallback={updateExportedToFilterForm}
+        />
+    );
+}
+
+export default ExportedToSelectPopup;
diff --git a/src/components/Search/FilterDropdowns/GroupCurrencyPopup.tsx b/src/components/Search/FilterDropdowns/GroupCurrencyPopup.tsx
new file mode 100644
index 000000000000..0f3a4946ba33
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/GroupCurrencyPopup.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import {useCurrencyListActions, useCurrencyListState} from '@components/CurrencyListContextProvider';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {getCurrencyOptions} from '@libs/SearchUIUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import SingleSelectPopup from './SingleSelectPopup';
+import type {SingleSelectItem} from './SingleSelectPopup';
+
+type GroupCurrencyPopupProps = {
+    closeOverlay: () => void;
+    onChange: (item: SingleSelectItem<string> | null) => void;
+};
+
+function filterGroupCurrencySelector(searchAdvancedFiltersForm: OnyxEntry<SearchAdvancedFiltersForm>) {
+    return searchAdvancedFiltersForm?.groupCurrency;
+}
+
+function GroupCurrencyPopup({onChange, closeOverlay}: GroupCurrencyPopupProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {currencyList} = useCurrencyListState();
+    const {getCurrencySymbol} = useCurrencyListActions();
+    const groupCurrencyOptions = getCurrencyOptions(currencyList, getCurrencySymbol);
+    const [groupCurrency] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterGroupCurrencySelector});
+
+    const groupCurrencyValue = groupCurrencyOptions.find((option) => option.value === groupCurrency) ?? null;
+
+    return (
+        <SingleSelectPopup
+            style={[styles.pv0, styles.mt2]}
+            items={groupCurrencyOptions}
+            value={groupCurrencyValue}
+            closeOverlay={closeOverlay}
+            onChange={onChange}
+            isSearchable
+            searchPlaceholder={translate('common.groupCurrency')}
+        />
+    );
+}
+
+export default GroupCurrencyPopup;
diff --git a/src/components/Search/FilterDropdowns/InSelectPopup.tsx b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
new file mode 100644
index 000000000000..3a53a2f2ac38
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
@@ -0,0 +1,219 @@
+import React, {useEffect, useState} from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import {usePersonalDetails} from '@components/OnyxListItemProvider';
+import {useOptionsList} from '@components/OptionListContextProvider';
+import InviteMemberListItem from '@components/SelectionList/ListItem/InviteMemberListItem';
+import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useDebouncedState from '@hooks/useDebouncedState';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import usePrivateIsArchivedMap from '@hooks/usePrivateIsArchivedMap';
+import useReportAttributes from '@hooks/useReportAttributes';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import {searchInServer} from '@libs/actions/Report';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+import {createOptionFromReport, filterAndOrderOptions, formatSectionsFromSearchTerm, getAlternateText, getSearchOptions} from '@libs/OptionsListUtils';
+import type {Option, OptionWithKey, SelectionListSections} from '@libs/OptionsListUtils/types';
+import type {OptionData} from '@libs/ReportUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import passthroughPolicyTagListSelector from '@src/selectors/PolicyTagList';
+import {SearchAdvancedFiltersForm} from '@src/types/form';
+
+type InSelectPopupProps = {
+    closeOverlay: () => void;
+    updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+const defaultListOptions = {
+    recentReports: [],
+    personalDetails: [],
+    userToInvite: null,
+    currentUserOption: null,
+    headerMessage: '',
+};
+
+function getSelectedOptionData(option: Option & Pick<OptionData, 'reportID'>): OptionData {
+    return {...option, isSelected: true, keyForList: option.keyForList ?? option.reportID};
+}
+
+function inSelector(searchAdvancedFiltersForm: SearchAdvancedFiltersForm | undefined) {
+    return searchAdvancedFiltersForm?.in;
+}
+
+function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {windowHeight} = useWindowDimensions();
+    const personalDetails = usePersonalDetails();
+    const {options, areOptionsInitialized} = useOptionsList();
+
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE);
+    const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
+    const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const [inReportIDs] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: inSelector});
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const currentUserAccountID = currentUserPersonalDetails.accountID;
+    const currentUserEmail = currentUserPersonalDetails.email ?? '';
+
+    const [isSearchingForReports] = useOnyx(ONYXKEYS.RAM_ONLY_IS_SEARCHING_FOR_REPORTS);
+    const reportAttributesDerived = useReportAttributes();
+    const [selectedReportIDs, setSelectedReportIDs] = useState<string[]>(inReportIDs ?? []);
+    const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
+    const cleanSearchTerm = searchTerm.trim().toLowerCase();
+    const [draftComments] = useOnyx(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT);
+    const privateIsArchivedMap = usePrivateIsArchivedMap();
+    const [nvpDismissedProductTraining] = useOnyx(ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING);
+    const [policyTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {selector: passthroughPolicyTagListSelector});
+
+    const selectedOptions: OptionData[] = selectedReportIDs.map((id) => {
+        const privateIsArchived = privateIsArchivedMap[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${id}`];
+        const reportData = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`];
+        const reportPolicy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportData?.policyID}`];
+        const report = getSelectedOptionData(
+            createOptionFromReport({...reportData, reportID: id}, personalDetails, currentUserAccountID, privateIsArchived, reportPolicy, reportAttributesDerived),
+        );
+        const isReportArchived = !!privateIsArchived;
+        const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportData?.policyID}`];
+        const reportPolicyTags = policyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${getNonEmptyStringOnyxID(report?.policyID)}`];
+        const alternateText = getAlternateText(report, {}, isReportArchived, currentUserAccountID, policy, {}, undefined, undefined, reportAttributesDerived, reportPolicyTags);
+        return {...report, alternateText};
+    });
+
+    const defaultOptions = !areOptionsInitialized
+        ? defaultListOptions
+        : getSearchOptions({
+              options,
+              draftComments,
+              nvpDismissedProductTraining,
+              betas: undefined,
+              isUsedInChatFinder: false,
+              countryCode,
+              loginList,
+              currentUserAccountID,
+              currentUserEmail,
+              personalDetails,
+              policyCollection: allPolicies,
+          });
+
+    const chatOptions = filterAndOrderOptions(defaultOptions, cleanSearchTerm, countryCode, loginList, currentUserEmail, currentUserAccountID, personalDetails, {
+        selectedOptions,
+        excludeLogins: CONST.EXPENSIFY_EMAILS_OBJECT,
+    });
+
+    const sections: SelectionListSections = [];
+
+    if (areOptionsInitialized) {
+        const formattedResults = formatSectionsFromSearchTerm(
+            cleanSearchTerm,
+            selectedOptions,
+            chatOptions.recentReports,
+            chatOptions.personalDetails,
+            privateIsArchivedMap,
+            currentUserAccountID,
+            allPolicies,
+            personalDetails,
+            false,
+            undefined,
+            reportAttributesDerived,
+        );
+
+        sections.push(formattedResults.section);
+
+        const visibleReportsWhenSearchTermNonEmpty = chatOptions.recentReports.map((report) => (selectedReportIDs.includes(report.reportID) ? getSelectedOptionData(report) : report));
+        const visibleReportsWhenSearchTermEmpty = chatOptions.recentReports.filter((report) => !selectedReportIDs.includes(report.reportID));
+        const reportsFiltered = cleanSearchTerm === '' ? visibleReportsWhenSearchTermEmpty : visibleReportsWhenSearchTermNonEmpty;
+
+        sections.push({
+            data: reportsFiltered,
+            sectionIndex: 1,
+        });
+    }
+    const noResultsFound = sections.at(0)?.data.length === 0 && sections.at(1)?.data.length === 0;
+    const headerMessage = noResultsFound ? translate('common.noResultsFound') : undefined;
+
+    useEffect(() => {
+        searchInServer(debouncedSearchTerm.trim());
+    }, [debouncedSearchTerm]);
+
+    const handleParticipantSelection = (selectedOption: OptionWithKey) => {
+        const optionReportID = selectedOption.reportID;
+        if (!optionReportID) {
+            return;
+        }
+        const foundOptionIndex = selectedReportIDs.findIndex((reportID: string) => {
+            return reportID && reportID !== '' && selectedOption.reportID === reportID;
+        });
+
+        if (foundOptionIndex < 0) {
+            setSelectedReportIDs([...selectedReportIDs, optionReportID]);
+        } else {
+            const newSelectedReports = [...selectedReportIDs.slice(0, foundOptionIndex), ...selectedReportIDs.slice(foundOptionIndex + 1)];
+            setSelectedReportIDs(newSelectedReports);
+        }
+    };
+
+    const applyChanges = () => {
+        updateFilterForm({in: selectedReportIDs});
+        closeOverlay();
+    };
+
+    const resetChanges = () => {
+        updateFilterForm({in: []});
+        closeOverlay();
+    };
+
+    const isLoadingNewOptions = !!isSearchingForReports;
+    const shouldShowLoadingPlaceholder = !areOptionsInitialized || !inReportIDs || !personalDetails;
+
+    const textInputOptions = {
+        value: searchTerm,
+        label: translate('common.search'),
+        onChangeText: setSearchTerm,
+        headerMessage,
+    };
+
+    return (
+        <View style={[styles.getUserSelectionListPopoverHeight(sections.flatMap((section) => section.data).length || 1, windowHeight, shouldUseNarrowLayout, true)]}>
+            <SelectionListWithSections
+                sections={sections}
+                onSelectRow={handleParticipantSelection}
+                ListItem={InviteMemberListItem}
+                canSelectMultiple
+                style={{containerStyle: [!shouldUseNarrowLayout && styles.pt4], listStyle: styles.pb2}}
+                shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
+                textInputOptions={textInputOptions}
+                isLoadingNewOptions={isLoadingNewOptions}
+                shouldShowLoadingPlaceholder={shouldShowLoadingPlaceholder}
+                shouldShowTextInput
+            />
+
+            <View style={[styles.flexRow, styles.gap2, styles.mh5, !shouldUseNarrowLayout && styles.mb4]}>
+                <Button
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.reset')}
+                    onPress={resetChanges}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_REPORT}
+                />
+                <Button
+                    success
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.apply')}
+                    onPress={applyChanges}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_REPORT}
+                />
+            </View>
+        </View>
+    );
+}
+
+export default InSelectPopup;
diff --git a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
new file mode 100644
index 000000000000..59adae3a8437
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
@@ -0,0 +1,297 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import type {OnyxCollection} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
+import Button from '@components/Button';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import MenuItem from '@components/MenuItem';
+import ScrollView from '@components/ScrollView';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {getDatePresets} from '@libs/SearchUIUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {createAllPolicyReportFieldsSelector} from '@src/selectors/Policy';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import type {Policy, PolicyReportField} from '@src/types/onyx';
+import type {PolicyReportFieldType} from '@src/types/onyx/Policy';
+import type {SearchDateValues} from '../FilterComponents/DatePresetFilterBase';
+import type {ReportFieldDateKey, ReportFieldTextKey} from '../types';
+import DateSelectPopup from './DateSelectPopup';
+import type {PopoverComponentProps} from './DropdownButton';
+import SingleSelectPopup from './SingleSelectPopup';
+import TextInputPopup from './TextInputPopup';
+import Text from '@components/Text';
+
+type ReportFieldPopupProps = PopoverComponentProps & {
+    updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+type ReportFieldSubPopupProps = {
+    field: PolicyReportField;
+    value: string;
+    onBackButtonPress: () => void;
+    onChange: (newValue: string) => void;
+};
+
+type ReportFieldDatePopupProps = {
+    field: PolicyReportField;
+    value: SearchDateValues;
+    onBackButtonPress: () => void;
+    onChange: (newValue: SearchDateValues) => void;
+};
+
+function getFieldNameAsKey(fieldName: string) {
+    return fieldName.toLowerCase().replaceAll(' ', '-');
+}
+
+function ReportFieldListPopup({value, field, onBackButtonPress, onChange}: ReportFieldSubPopupProps) {
+    const styles = useThemeStyles();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+
+    const items = field.values.map((fieldValue) => ({
+        value: fieldValue,
+        text: fieldValue,
+    }));
+    const selectedValue = {text: value, value};
+
+    return (
+        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
+            <HeaderWithBackButton
+                shouldDisplayHelpButton={false}
+                style={[styles.h10]}
+                subtitle={field.name}
+                onBackButtonPress={onBackButtonPress}
+            />
+            <SingleSelectPopup
+                style={styles.pv0}
+                items={items}
+                value={selectedValue}
+                closeOverlay={onBackButtonPress}
+                onChange={(item) => onChange(item?.value ?? '')}
+            />
+        </View>
+    );
+}
+
+function ReportFieldDatePopup({value, field, onBackButtonPress, onChange}: ReportFieldDatePopupProps) {
+    const styles = useThemeStyles();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const filterKey = `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${getFieldNameAsKey(field.name)}` as const;
+
+    return (
+        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
+            <HeaderWithBackButton
+                shouldDisplayHelpButton={false}
+                style={[styles.h10]}
+                subtitle={field.name}
+                onBackButtonPress={onBackButtonPress}
+            />
+            <DateSelectPopup
+                style={styles.pv0}
+                value={value}
+                onChange={onChange}
+                closeOverlay={onBackButtonPress}
+                presets={getDatePresets(filterKey, true)}
+            />
+        </View>
+    );
+}
+
+function ReportFieldTextPopup({field, value, onBackButtonPress, onChange}: ReportFieldSubPopupProps) {
+    const styles = useThemeStyles();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+
+    return (
+        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
+            <HeaderWithBackButton
+                shouldDisplayHelpButton={false}
+                style={[styles.h10]}
+                subtitle={field.name}
+                onBackButtonPress={onBackButtonPress}
+            />
+            <TextInputPopup
+                style={styles.pv0}
+                placeholder={field.name}
+                defaultValue={value}
+                closeOverlay={onBackButtonPress}
+                onChange={onChange}
+            />
+        </View>
+    );
+}
+
+function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProps) {
+    const {translate, localeCompare} = useLocalize();
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const policyReportFieldsSelector = (policies: OnyxCollection<Policy>) => createAllPolicyReportFieldsSelector(policies, localeCompare);
+    const [fieldList] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {
+        selector: policyReportFieldsSelector,
+    });
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const [selectedField, setSelectedField] = useState<PolicyReportField | null>(null);
+    const [values, setValues] = useState<Record<ReportFieldTextKey | ReportFieldDateKey, string | undefined>>({});
+
+    const getValue = (fieldName: string, fieldType: PolicyReportFieldType) => {
+        const suffix = getFieldNameAsKey(fieldName);
+        if (fieldType === CONST.REPORT_FIELD_TYPES.DATE) {
+            const onKey = `${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}` as const;
+            const beforeKey = `${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}` as const;
+            const afterKey = `${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}` as const;
+            return {
+                [CONST.SEARCH.DATE_MODIFIERS.ON]: values[onKey] ?? searchAdvancedFiltersForm?.[onKey],
+                [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: values[beforeKey] ?? searchAdvancedFiltersForm?.[beforeKey],
+                [CONST.SEARCH.DATE_MODIFIERS.AFTER]: values[afterKey] ?? searchAdvancedFiltersForm?.[afterKey],
+            };
+        }
+        const filterKey = `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${suffix}` as const;
+        return values[filterKey] ?? searchAdvancedFiltersForm?.[filterKey] ?? '';
+    };
+
+    if (selectedField) {
+        const goBack = () => {
+            setSelectedField(null);
+        };
+
+        // We only support list, date, & text for report fields, no other types
+        const fieldType = selectedField.type as Exclude<ValueOf<typeof CONST.REPORT_FIELD_TYPES>, typeof CONST.REPORT_FIELD_TYPES.FORMULA>;
+        const suffix = getFieldNameAsKey(selectedField.name);
+        const filterValue = getValue(selectedField.name, selectedField.type);
+
+        if (fieldType === CONST.REPORT_FIELD_TYPES.DATE) {
+            const onKey = `${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}`;
+            const afterKey = `${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}`;
+            const beforeKey = `${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}`;
+            return (
+                <ReportFieldDatePopup
+                    field={selectedField}
+                    value={filterValue as SearchDateValues}
+                    onBackButtonPress={goBack}
+                    onChange={(newValue) =>
+                        setValues((prevValues) => ({
+                            ...prevValues,
+                            [onKey]: newValue[CONST.SEARCH.DATE_MODIFIERS.ON],
+                            [afterKey]: newValue[CONST.SEARCH.DATE_MODIFIERS.AFTER],
+                            [beforeKey]: newValue[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+                        }))
+                    }
+                />
+            );
+        }
+
+        const UpdateReportFieldComponent = {
+            [CONST.REPORT_FIELD_TYPES.LIST]: ReportFieldListPopup,
+            [CONST.REPORT_FIELD_TYPES.TEXT]: ReportFieldTextPopup,
+        }[fieldType];
+
+        const filterKey = `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${suffix}` as const;
+        return (
+            <UpdateReportFieldComponent
+                field={selectedField}
+                value={filterValue as string}
+                onBackButtonPress={goBack}
+                onChange={(newValue) => setValues((prevValues) => ({...prevValues, [filterKey]: newValue.trim()}))}
+            />
+        );
+    }
+
+    const applyChanges = () => {
+        updateFilterForm(values);
+        closeOverlay();
+    };
+
+    const resetChanges = () => {
+        const formValues = Object.values(fieldList ?? {}).reduce(
+            (acc, field) => {
+                const suffix = getFieldNameAsKey(field.name);
+                const filterKey = `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${suffix}` as const;
+                if (field.type === CONST.REPORT_FIELD_TYPES.DATE) {
+                    acc[`${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}`] = undefined;
+                    acc[`${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}`] = undefined;
+                    acc[`${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}`] = undefined;
+                } else {
+                    acc[filterKey] = undefined;
+                }
+                return acc;
+            },
+            {} as Record<ReportFieldTextKey | ReportFieldDateKey, undefined>,
+        );
+        updateFilterForm(formValues);
+        closeOverlay();
+    };
+
+    const listItems = Object.values(fieldList ?? {}).map((field) => {
+        const formValue = getValue(field.name, field.type);
+
+        if (field.type === CONST.REPORT_FIELD_TYPES.DATE) {
+            const formDateValue = formValue as SearchDateValues;
+            const dateValues: string[] = [];
+            const onValue = formDateValue?.[CONST.SEARCH.DATE_MODIFIERS.ON];
+            const afterValue = formDateValue?.[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+            const beforeValue = formDateValue?.[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+
+            if (onValue) {
+                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));
+            }
+
+            return {key: field.fieldID, name: field.name, value: dateValues.join(', '), field};
+        }
+
+        return {key: field.fieldID, name: field.name, value: formValue as string, field};
+    });
+
+    return (
+        <View style={[!isSmallScreenWidth && styles.pv4]}>
+            {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{translate('workspace.common.reportField')}</Text>}
+            <ScrollView style={[StyleUtils.getMaximumHeight(CONST.POPOVER_DROPDOWN_MAX_HEIGHT)]}>
+                {listItems.map((item) => (
+                    <MenuItem
+                        key={item.key}
+                        shouldShowRightIcon
+                        viewMode={CONST.OPTION_MODE.COMPACT}
+                        title={item.name}
+                        description={item.value}
+                        onPress={() => setSelectedField(item.field)}
+                    />
+                ))}
+            </ScrollView>
+            <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.mt2]}>
+                <Button
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.reset')}
+                    onPress={resetChanges}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_AMOUNT}
+                />
+                <Button
+                    success
+                    medium
+                    style={[styles.flex1]}
+                    text={translate('common.apply')}
+                    onPress={applyChanges}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_AMOUNT}
+                />
+            </View>
+        </View>
+    );
+}
+
+export default ReportFieldPopup;
diff --git a/src/components/Search/FilterDropdowns/TagSelectPopup.tsx b/src/components/Search/FilterDropdowns/TagSelectPopup.tsx
new file mode 100644
index 000000000000..1d01371a43a8
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/TagSelectPopup.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import type {OnyxCollection} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import {getCleanedTagName, getTagNamesFromTagsLists} from '@libs/PolicyUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import passthroughPolicyTagListSelector from '@src/selectors/PolicyTagList';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import type {PolicyTagLists} from '@src/types/onyx';
+import {getEmptyObject} from '@src/types/utils/EmptyObject';
+import MultiSelectFilterPopup from '../SearchPageHeader/MultiSelectFilterPopup';
+import type {MultiSelectItem} from './MultiSelectPopup';
+
+type TagSelectPopupProps = {
+    closeOverlay: () => void;
+    updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+function TagSelectPopup({closeOverlay, updateFilterForm}: TagSelectPopupProps) {
+    const {translate} = useLocalize();
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const policyIDs = searchAdvancedFiltersForm?.policyID ?? [];
+
+    const selectedTagsItems = searchAdvancedFiltersForm?.tag?.map((tag) => {
+        if (tag === CONST.SEARCH.TAG_EMPTY_VALUE) {
+            return {text: translate('search.noTag'), value: tag};
+        }
+        return {text: getCleanedTagName(tag), value: tag};
+    });
+
+    const [allPolicyTagLists = getEmptyObject<NonNullable<OnyxCollection<PolicyTagLists>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {selector: passthroughPolicyTagListSelector});
+    const selectedPoliciesTagLists = Object.keys(allPolicyTagLists ?? {})
+        .filter((key) => policyIDs?.map((policyID) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`)?.includes(key))
+        ?.map((key) => getTagNamesFromTagsLists(allPolicyTagLists?.[key] ?? {}))
+        .flat();
+
+    const tagItems = [{text: translate('search.noTag'), value: CONST.SEARCH.TAG_EMPTY_VALUE as string}];
+    const uniqueTagNames = new Set<string>();
+    if (policyIDs?.length === 0) {
+        const tagListsUnpacked = Object.values(allPolicyTagLists ?? {}).filter((item) => !!item);
+        for (const tag of tagListsUnpacked.map(getTagNamesFromTagsLists).flat()) {
+            uniqueTagNames.add(tag);
+        }
+    } else if (selectedPoliciesTagLists.length > 0) {
+        for (const tag of selectedPoliciesTagLists) {
+            uniqueTagNames.add(tag);
+        }
+    }
+    tagItems.push(...Array.from(uniqueTagNames).map((tagName) => ({text: getCleanedTagName(tagName), value: tagName})));
+
+    const updateTagFilterForm = (items: Array<MultiSelectItem<string>>) => {
+        updateFilterForm({tag: items.map((item) => item.value)});
+    };
+
+    return (
+        <MultiSelectFilterPopup
+            closeOverlay={closeOverlay}
+            translationKey={'common.tag'}
+            items={tagItems}
+            value={selectedTagsItems ?? []}
+            isSearchable={tagItems.length >= CONST.STANDARD_LIST_ITEM_LIMIT}
+            onChangeCallback={updateTagFilterForm}
+        />
+    );
+}
+
+export default TagSelectPopup;
diff --git a/src/components/Search/FilterDropdowns/TaxRateSelectPopup.tsx b/src/components/Search/FilterDropdowns/TaxRateSelectPopup.tsx
new file mode 100644
index 000000000000..40556c15831b
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/TaxRateSelectPopup.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import useOnyx from '@hooks/useOnyx';
+import {getAllTaxRates} from '@libs/PolicyUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import type {Policy} from '@src/types/onyx';
+import MultiSelectFilterPopup from '../SearchPageHeader/MultiSelectFilterPopup';
+import type {MultiSelectItem} from './MultiSelectPopup';
+
+type TaxRateSelectPopupProps = {
+    closeOverlay: () => void;
+    updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+function TaxRateSelectPopup({closeOverlay, updateFilterForm}: TaxRateSelectPopupProps) {
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+
+    const taxRates = searchAdvancedFiltersForm?.taxRate;
+    const policyIDs = searchAdvancedFiltersForm?.policyID;
+    const allTaxRates = getAllTaxRates(policies);
+    const selectedPoliciesMap = policyIDs?.reduce<Record<string, Policy>>((acc, policyID) => {
+        const key = `${ONYXKEYS.COLLECTION.POLICY}${policyID}`;
+        const policy = policies?.[key];
+        if (policy) {
+            acc[key] = policy;
+        }
+        return acc;
+    }, {});
+    const scopedTaxRates = !selectedPoliciesMap || Object.keys(selectedPoliciesMap).length === 0 ? allTaxRates : getAllTaxRates(selectedPoliciesMap);
+    const taxItems = Object.entries(scopedTaxRates).map(([taxRateName, taxRateKeys]) => ({
+        text: taxRateName,
+        value: taxRateKeys.toString(),
+    }));
+    const selectedTaxRates = taxItems.filter((tax) => taxRates?.includes(tax.value.toString()));
+
+    const updateTaxRateFilterForm = (items: Array<MultiSelectItem<string>>) => {
+        updateFilterForm({taxRate: items.map((item) => item.value)});
+    };
+
+    return (
+        <MultiSelectFilterPopup
+            closeOverlay={closeOverlay}
+            translationKey={'iou.taxRate'}
+            items={taxItems}
+            value={selectedTaxRates}
+            isSearchable={taxItems.length >= CONST.STANDARD_LIST_ITEM_LIMIT}
+            onChangeCallback={updateTaxRateFilterForm}
+        />
+    );
+}
+
+export default TaxRateSelectPopup;
diff --git a/src/components/Search/FilterDropdowns/WorkspaceSelectPopup.tsx b/src/components/Search/FilterDropdowns/WorkspaceSelectPopup.tsx
new file mode 100644
index 000000000000..4f8be0b07f51
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/WorkspaceSelectPopup.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import type {Icon} from '@src/types/onyx/OnyxCommon';
+import type {PopoverComponentProps} from './DropdownButton';
+import type {MultiSelectItem} from './MultiSelectPopup';
+import MultiSelectPopup from './MultiSelectPopup';
+
+type WorkspaceSelectPopupProps = PopoverComponentProps & {
+    updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
+    policyIDQuery: string[] | undefined;
+};
+
+function filterPolicyIDSelector(searchAdvancedFiltersForm: OnyxEntry<SearchAdvancedFiltersForm>) {
+    return searchAdvancedFiltersForm?.policyID;
+}
+
+function WorkspaceSelectPopup({policyIDQuery, updateFilterForm, closeOverlay}: WorkspaceSelectPopupProps) {
+    const {translate} = useLocalize();
+    const {workspaces, shouldShowWorkspaceSearchInput} = useAdvancedSearchFilters();
+    const [policyID] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterPolicyIDSelector});
+    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 policyIDs = policyID ?? policyIDQuery;
+    const selectedWorkspaceOptions = policyIDs ? workspaceOptions.filter((option) => (Array.isArray(policyIDs) ? policyIDs : [policyIDs]).includes(option.value)) : [];
+
+    const handleWorkspaceChange = (items: Array<MultiSelectItem<string>>) => {
+        updateFilterForm({policyID: items.map((item) => item.value)});
+    };
+
+    return (
+        <MultiSelectPopup
+            label={translate('workspace.common.workspace')}
+            items={workspaceOptions}
+            value={selectedWorkspaceOptions}
+            closeOverlay={closeOverlay}
+            onChange={handleWorkspaceChange}
+            isSearchable={shouldShowWorkspaceSearchInput}
+        />
+    );
+}
+
+export default WorkspaceSelectPopup;
diff --git a/src/components/Search/hooks/useFilterCardValue.tsx b/src/components/Search/hooks/useFilterCardValue.tsx
new file mode 100644
index 000000000000..006900f19e7e
--- /dev/null
+++ b/src/components/Search/hooks/useFilterCardValue.tsx
@@ -0,0 +1,48 @@
+import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import {createCardFeedKey, getCardFeedKey, getCardFeedNamesWithType, getWorkspaceCardFeedKey} from '@libs/CardFeedUtils';
+import {getCardDescription} from '@libs/CardUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {WorkspaceCardsList} from '@src/types/onyx';
+
+function useFilterCardValue(): string {
+    const {translate} = useLocalize();
+    const {policies, searchCards} = useAdvancedSearchFilters();
+
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const cardIdsFilter = searchAdvancedFiltersForm?.[CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID] ?? [];
+    const feedFilter = searchAdvancedFiltersForm?.[CONST.SEARCH.SYNTAX_FILTER_KEYS.FEED] ?? [];
+    const workspaceCardFeeds = Object.entries(searchCards ?? {}).reduce<Record<string, WorkspaceCardsList>>((workspaceCardsFeed, [cardID, card]) => {
+        const feedKey = `${createCardFeedKey(card.fundID, card.bank)}`;
+        const workspaceFeedKey = getWorkspaceCardFeedKey(feedKey);
+        if (!workspaceCardsFeed[workspaceFeedKey]) {
+            workspaceCardsFeed[workspaceFeedKey] = {};
+        }
+
+        workspaceCardsFeed[workspaceFeedKey][cardID] = card;
+        return workspaceCardsFeed;
+    }, {});
+
+    const cardFeedNamesWithType = getCardFeedNamesWithType({
+        workspaceCardFeeds,
+        policies,
+        translate,
+    });
+
+    const cardNames = Object.values(searchCards ?? {})
+        .filter((card) => cardIdsFilter.includes(card.cardID.toString()) && !feedFilter.includes(createCardFeedKey(card.fundID, card.bank)))
+        .map((card) => getCardDescription(card, translate));
+
+    const feedNames = Object.keys(cardFeedNamesWithType)
+        .filter((workspaceCardFeedKey) => {
+            const feedKey = getCardFeedKey(workspaceCardFeeds, workspaceCardFeedKey);
+            return !!feedKey && feedFilter.includes(feedKey);
+        })
+        .map((cardFeedKey) => cardFeedNamesWithType[cardFeedKey].name);
+
+    return [...feedNames, ...cardNames].join(', ');
+}
+
+export default useFilterCardValue;
diff --git a/src/components/Search/hooks/useFilterReportValue.tsx b/src/components/Search/hooks/useFilterReportValue.tsx
new file mode 100644
index 000000000000..0b1665606f2b
--- /dev/null
+++ b/src/components/Search/hooks/useFilterReportValue.tsx
@@ -0,0 +1,20 @@
+import useOnyx from '@hooks/useOnyx';
+import {getReportName} from '@libs/ReportNameUtils';
+import type {SearchFilter} from '@libs/SearchUIUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+function useFilterReportValue(reportIDs: SearchFilter['value']): string {
+    const [reportAttributes] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES);
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+
+    if (!Array.isArray(reportIDs)) {
+        return '';
+    }
+
+    return reportIDs
+        .map((id) => getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reportAttributes?.reports))
+        ?.filter(Boolean)
+        ?.join(', ');
+}
+
+export default useFilterReportValue;
diff --git a/src/components/Search/hooks/useFilterTaxRateValue.tsx b/src/components/Search/hooks/useFilterTaxRateValue.tsx
new file mode 100644
index 000000000000..dbecb60e2bc0
--- /dev/null
+++ b/src/components/Search/hooks/useFilterTaxRateValue.tsx
@@ -0,0 +1,28 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
+import useOnyx from '@hooks/useOnyx';
+import {getAllTaxRates} from '@libs/PolicyUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
+
+function taxRateSelector(searchAdvancedFiltersForm: OnyxEntry<SearchAdvancedFiltersForm>) {
+    return searchAdvancedFiltersForm?.taxRate;
+}
+
+function useFilterTaxRateValue(): string {
+    const [taxRateIDs] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: taxRateSelector});
+    const {policies} = useAdvancedSearchFilters();
+
+    const taxRates = getAllTaxRates(policies);
+    const result: string[] = [];
+    for (const [taxRateName, taxRateKeys] of Object.entries(taxRates)) {
+        if (!taxRateKeys.some((taxRateKey) => taxRateIDs?.includes(taxRateKey)) || result.includes(taxRateName)) {
+            continue;
+        }
+        result.push(taxRateName);
+    }
+
+    return result.join(', ');
+}
+
+export default useFilterTaxRateValue;

From f6d8c023af3171882a4591679223a662ec223af0 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 01:14:40 +0800
Subject: [PATCH 02/25] add style prop and make label optional

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

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 626c381eba5a..94c3748b0be9 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -1,5 +1,7 @@
 import React, {useCallback, useRef, useState} from 'react';
 import {View} from 'react-native';
+import {ViewStyle} from 'react-native';
+import {StyleProp} from 'react-native';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import DatePresetFilterBase from '@components/Search/FilterComponents/DatePresetFilterBase';
@@ -14,13 +16,14 @@ import CONST from '@src/CONST';
 
 type DateSelectPopupProps = {
     /** The label to show when in an overlay on mobile */
-    label: string;
+    label?: string;
 
     /** The current date values */
     value: SearchDateValues;
 
     /** The date presets */
     presets?: SearchDatePreset[];
+    style?: StyleProp<ViewStyle>;
 
     /** Function to call when changes are applied */
     onChange: (value: SearchDateValues) => void;
@@ -29,7 +32,7 @@ type DateSelectPopupProps = {
     closeOverlay: () => void;
 };
 
-function DateSelectPopup({label, value, presets, closeOverlay, onChange}: DateSelectPopupProps) {
+function DateSelectPopup({label, value, presets, style, closeOverlay, onChange}: DateSelectPopupProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
 
@@ -75,8 +78,8 @@ function DateSelectPopup({label, value, presets, closeOverlay, onChange}: DateSe
     }, [closeOverlay, onChange, selectedDateModifier]);
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
-            {isSmallScreenWidth && !selectedDateModifier && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
+        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2, style]}>
+            {isSmallScreenWidth && !selectedDateModifier && label && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
             <View>
                 {!!selectedDateModifier && (
                     <HeaderWithBackButton

From 1c355cd4719252f95876c3e0f190ed7db07f5e21 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 01:14:53 +0800
Subject: [PATCH 03/25] add sentry label

---
 src/CONST/index.ts                                     | 9 +++++++++
 src/components/Search/FilterDropdowns/DisplayPopup.tsx | 4 ++++
 2 files changed, 13 insertions(+)

diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 818d260256f8..292c4b9a6948 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -8691,8 +8691,10 @@ const CONST = {
             FILTER_FROM: 'Search-FilterFrom',
             FILTER_WORKSPACE: 'Search-FilterWorkspace',
             FILTER_GROUP_BY: 'Search-FilterGroupBy',
+            FILTER_SORT_BY: 'Search-FilterSortBy',
             FILTER_GROUP_CURRENCY: 'Search-FilterGroupCurrency',
             FILTER_VIEW: 'Search-FilterView',
+            FILTER_LIMIT: 'Search-FilterLimit',
             FILTER_FEED: 'Search-FilterFeed',
             FILTER_POSTED: 'Search-FilterPosted',
             FILTER_WITHDRAWN: 'Search-FilterWithdrawn',
@@ -8715,10 +8717,17 @@ const CONST = {
             FILTER_POPUP_APPLY_MULTI_SELECT: 'Search-FilterPopupApplyMultiSelect',
             FILTER_POPUP_RESET_TEXT_INPUT: 'Search-FilterPopupResetTextInput',
             FILTER_POPUP_APPLY_TEXT_INPUT: 'Search-FilterPopupApplyTextInput',
+            FILTER_POPUP_RESET_AMOUNT: 'Search-FilterPopupResetAmount',
+            FILTER_POPUP_APPLY_AMOUNT: 'Search-FilterPopupApplyAmount',
+            FILTER_POPUP_SAVE_AMOUNT: 'Search-FilterPopupSaveAmount',
             FILTER_POPUP_RESET_DATE: 'Search-FilterPopupResetDate',
             FILTER_POPUP_APPLY_DATE: 'Search-FilterPopupApplyDate',
             FILTER_POPUP_RESET_USER: 'Search-FilterPopupResetUser',
             FILTER_POPUP_APPLY_USER: 'Search-FilterPopupApplyUser',
+            FILTER_POPUP_RESET_REPORT: 'Search-FilterPopupResetReport',
+            FILTER_POPUP_APPLY_REPORT: 'Search-FilterPopupApplyReport',
+            FILTER_POPUP_RESET_CARD: 'Search-FilterPopupResetCard',
+            FILTER_POPUP_APPLY_CARD: 'Search-FilterPopupApplyCard',
             TRANSACTION_LIST_ITEM_CHECKBOX: 'Search-TransactionListItemCheckbox',
             EXPANDED_TRANSACTION_ROW: 'Search-ExpandedTransactionRow',
             EXPANDED_TRANSACTION_ROW_CHECKBOX: 'Search-ExpandedTransactionRowCheckbox',
diff --git a/src/components/Search/FilterDropdowns/DisplayPopup.tsx b/src/components/Search/FilterDropdowns/DisplayPopup.tsx
index 4cbc8bbaefca..27def71fc003 100644
--- a/src/components/Search/FilterDropdowns/DisplayPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DisplayPopup.tsx
@@ -71,6 +71,7 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
                     description={translate('search.display.sortBy')}
                     title={translate(getSearchColumnTranslationKey(sortByValue))}
                     onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.SORT_BY)}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_SORT_BY}
                 />
                 {(isExpenseType || isTripType) && (
                     <MenuItemWithTopDescription
@@ -78,6 +79,7 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
                         description={translate('search.display.groupBy')}
                         title={groupByValue ? translate(`search.filters.groupBy.${groupByValue}`) : undefined}
                         onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY)}
+                        sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_GROUP_BY}
                     />
                 )}
                 {isExpenseType && !!groupByValue && (
@@ -86,6 +88,7 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
                         description={translate('search.view.label')}
                         title={viewValue ? translate(`search.view.${viewValue}`) : undefined}
                         onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW)}
+                        sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_VIEW}
                     />
                 )}
                 {isExpenseType && (
@@ -94,6 +97,7 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
                         description={translate('search.display.limitResults')}
                         title={limitValue}
                         onPress={() => setSelectedDisplayFilter(CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT)}
+                        sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_LIMIT}
                     />
                 )}
                 {shouldShowColumnsButton && (

From 989d3d49d6fa197a91d396ad27ce94b3e7d3d603 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 01:15:04 +0800
Subject: [PATCH 04/25] add leftelement prop

---
 src/components/Search/FilterDropdowns/MultiSelectPopup.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx b/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx
index d66e146acecb..eb3b8ca61fe2 100644
--- a/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx
@@ -1,4 +1,5 @@
 import React, {useCallback, useMemo, useState} from 'react';
+import type {ReactNode} from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import SelectionList from '@components/SelectionList';
@@ -17,6 +18,7 @@ type MultiSelectItem<T> = {
     text: string;
     value: T;
     icons?: Icon[];
+    leftElement?: ReactNode;
 };
 
 type MultiSelectPopupProps<T> = {
@@ -58,6 +60,7 @@ function MultiSelectPopup<T extends string>({label, value, items, closeOverlay,
             keyForList: item.value,
             isSelected: !!selectedItems.find((i) => i.value === item.value),
             icons: item.icons,
+            leftElement: item.leftElement,
         }));
     }, [items, selectedItems, isSearchable, debouncedSearchTerm]);
 

From 8f09fae09d7e0b005cea8e66ca99837c40ee9d65 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 01:15:53 +0800
Subject: [PATCH 05/25] rename function

---
 .../Search/SearchPageHeader/useSearchActionsBar.tsx           | 4 ++--
 .../Search/SearchPageHeader/useSearchFiltersBar.tsx           | 4 ++--
 src/libs/SearchUIUtils.ts                                     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx b/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
index 5494539d8f5d..fa4467a8ad4a 100644
--- a/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
@@ -20,7 +20,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {close} from '@libs/actions/Modal';
 import Navigation from '@libs/Navigation/Navigation';
 import {buildFilterQueryWithSortDefaults} from '@libs/SearchQueryUtils';
-import {filterValidHasValues, getFeedOptions, getGroupCurrencyOptions, getHasOptions, getStatusOptions, getWithdrawalTypeOptions, mapFiltersFormToLabelValueList} from '@libs/SearchUIUtils';
+import {filterValidHasValues, getFeedOptions, getCurrencyOptions, getHasOptions, getStatusOptions, getWithdrawalTypeOptions, mapFiltersFormToLabelValueList} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
@@ -86,7 +86,7 @@ function GroupCurrencyPopup({updateFilterForm, closeOverlay}: FilterBarPopupProp
     const {translate} = useLocalize();
     const {currencyList} = useCurrencyListState();
     const {getCurrencySymbol} = useCurrencyListActions();
-    const groupCurrencyOptions = getGroupCurrencyOptions(currencyList, getCurrencySymbol);
+    const groupCurrencyOptions = getCurrencyOptions(currencyList, getCurrencySymbol);
     const [groupCurrency] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterGroupCurrencySelector});
 
     const groupCurrencyValue = groupCurrencyOptions.find((option) => option.value === groupCurrency) ?? null;
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index b3e6d461ea1e..ef9c8e0f70d8 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -35,7 +35,7 @@ import {
     getFeedOptions,
     getGroupByOptions,
     getGroupBySections,
-    getGroupCurrencyOptions,
+    getCurrencyOptions,
     getHasOptions,
     getStatusOptions,
     getTypeOptions,
@@ -173,7 +173,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     const viewOptions = getViewOptions(translate);
     const viewValue = viewOptions.find((option) => option.value === unsafeView) ?? viewOptions.at(0) ?? null;
 
-    const groupCurrencyOptions = getGroupCurrencyOptions(currencyList, getCurrencySymbol);
+    const groupCurrencyOptions = getCurrencyOptions(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);
diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts
index fee25679711f..e0cdee131a2f 100644
--- a/src/libs/SearchUIUtils.ts
+++ b/src/libs/SearchUIUtils.ts
@@ -4096,7 +4096,7 @@ function getViewOptions(translate: LocalizedTranslate) {
     return Object.values(CONST.SEARCH.VIEW).map<SingleSelectItem<SearchView>>((value) => ({text: translate(`search.view.${value}`), value}));
 }
 
-function getGroupCurrencyOptions(currencyList: OnyxTypes.CurrencyList, getCurrencySymbol: CurrencyListActionsContextType['getCurrencySymbol']) {
+function getCurrencyOptions(currencyList: OnyxTypes.CurrencyList, getCurrencySymbol: CurrencyListActionsContextType['getCurrencySymbol']) {
     return Object.keys(currencyList).reduce(
         (options, currencyCode) => {
             if (!currencyList?.[currencyCode]?.retired) {
@@ -5169,7 +5169,7 @@ export {
     getSortByOptions,
     getGroupBySections,
     getViewOptions,
-    getGroupCurrencyOptions,
+    getCurrencyOptions,
     getFeedOptions,
     getWideAmountIndicators,
     isTransactionAmountTooLong,

From acdf1e6bd96a41d11bf8d1ec301c2c8a88f3070c Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 01:16:03 +0800
Subject: [PATCH 06/25] add more type

---
 src/libs/SearchQueryUtils.ts                  |  9 ++++++--
 .../SearchFiltersExpenseTypePage.tsx          |  3 ++-
 src/types/form/SearchAdvancedFiltersForm.ts   | 21 +++++++++++--------
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/libs/SearchQueryUtils.ts b/src/libs/SearchQueryUtils.ts
index 6034927bd7da..89bb3c34bbcb 100644
--- a/src/libs/SearchQueryUtils.ts
+++ b/src/libs/SearchQueryUtils.ts
@@ -30,7 +30,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import FILTER_KEYS, {ALLOWED_TYPE_FILTERS, AMOUNT_FILTER_KEYS, DATE_FILTER_KEYS} from '@src/types/form/SearchAdvancedFiltersForm';
-import type {HasFilterValue, HasFilterValues, IsFilterValue, IsFilterValues, SearchAdvancedFiltersKey} from '@src/types/form/SearchAdvancedFiltersForm';
+import type {ExpenseTypeValue, ExpenseTypeValues, HasFilterValue, HasFilterValues, IsFilterValue, IsFilterValues, SearchAdvancedFiltersKey} from '@src/types/form/SearchAdvancedFiltersForm';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import arraysEqual from '@src/utils/arraysEqual';
@@ -860,7 +860,7 @@ function buildFilterFormValuesFromQuery(
                 actionValue && Object.values(CONST.SEARCH.ACTION_FILTERS).includes(actionValue as ValueOf<typeof CONST.SEARCH.ACTION_FILTERS>) ? actionValue : undefined;
         }
         if (filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPENSE_TYPE) {
-            filtersForm[key as typeof filterKey] = filterValues.filter((expenseType) => VALID_EXPENSE_TYPES.has(expenseType as ValueOf<typeof CONST.SEARCH.TRANSACTION_TYPE>));
+            filtersForm[key as typeof filterKey] = filterValues.filter((expenseType) => VALID_EXPENSE_TYPES.has(expenseType as ExpenseTypeValue)) as ExpenseTypeValues;
         }
         if (filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.HAS) {
             filtersForm[key as typeof filterKey] = filterValues.filter((hasType) => VALID_HAS_TYPES.has(hasType as HasFilterValue)) as HasFilterValues;
@@ -1780,6 +1780,10 @@ function serializeQueryJSONForBackend<T extends {filters?: ASTNode | null; rawFi
     return JSON.stringify({...queryData, filters: normalizedFilters, rawFilterList: normalizedRawFilterList});
 }
 
+const isAmountFilterKey = (key: SearchDateFilterKeys | SearchAmountFilterKeys): key is SearchAmountFilterKeys => {
+    return AMOUNT_FILTER_KEYS.includes(key as SearchAmountFilterKeys);
+};
+
 export {
     isSearchDatePreset,
     isFilterSupported,
@@ -1810,4 +1814,5 @@ export {
     buildOptimisticSnapshotData,
     applyContainsOperatorToTextFields,
     serializeQueryJSONForBackend,
+    isAmountFilterKey,
 };
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExpenseTypePage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExpenseTypePage.tsx
index 5cb578bd80b3..4aa2d584fa7f 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExpenseTypePage.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExpenseTypePage.tsx
@@ -13,6 +13,7 @@ import {updateAdvancedFilters} from '@userActions/Search';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {ExpenseTypeValues} from '@src/types/form/SearchAdvancedFiltersForm';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
 function SearchFiltersExpenseTypePage() {
@@ -39,7 +40,7 @@ function SearchFiltersExpenseTypePage() {
         });
     }, [allExpenseTypes, translate]);
 
-    const updateExpenseTypeFilter = useCallback((values: string[]) => updateAdvancedFilters({expenseType: values}), []);
+    const updateExpenseTypeFilter = useCallback((values: string[]) => updateAdvancedFilters({expenseType: values as ExpenseTypeValues}), []);
 
     return (
         <ScreenWrapper
diff --git a/src/types/form/SearchAdvancedFiltersForm.ts b/src/types/form/SearchAdvancedFiltersForm.ts
index c06ae0e58ec6..b9541156aef0 100644
--- a/src/types/form/SearchAdvancedFiltersForm.ts
+++ b/src/types/form/SearchAdvancedFiltersForm.ts
@@ -542,9 +542,12 @@ const ALLOWED_TYPE_FILTERS: Record<string, Set<string>> = {
 type SearchAdvancedFiltersKey = ValueOf<typeof FILTER_KEYS> | ReportFieldKey;
 
 type HasFilterValue = ValueOf<typeof CONST.SEARCH.HAS_VALUES>;
-type HasFilterValues = Array<ValueOf<typeof CONST.SEARCH.HAS_VALUES>>;
+type HasFilterValues = Array<HasFilterValue>;
 type IsFilterValue = ValueOf<typeof CONST.SEARCH.IS_VALUES>;
-type IsFilterValues = Array<ValueOf<typeof CONST.SEARCH.IS_VALUES>>;
+type IsFilterValues = Array<IsFilterValue>;
+type BooleanValue = ValueOf<typeof CONST.SEARCH.BOOLEAN>;
+type ExpenseTypeValue = ValueOf<typeof CONST.SEARCH.TRANSACTION_TYPE>;
+type ExpenseTypeValues = Array<ExpenseTypeValue>;
 
 type SearchAdvancedFiltersForm = Form<
     SearchAdvancedFiltersKey,
@@ -635,8 +638,8 @@ type SearchAdvancedFiltersForm = Form<
         [FILTER_KEYS.TAX_RATE]: string[];
         [FILTER_KEYS.TAX_RATE_NOT]: string[];
 
-        [FILTER_KEYS.EXPENSE_TYPE]: string[];
-        [FILTER_KEYS.EXPENSE_TYPE_NOT]: string[];
+        [FILTER_KEYS.EXPENSE_TYPE]: ExpenseTypeValues;
+        [FILTER_KEYS.EXPENSE_TYPE_NOT]: ExpenseTypeValues;
 
         [FILTER_KEYS.TAG]: string[];
         [FILTER_KEYS.TAG_NOT]: string[];
@@ -665,11 +668,11 @@ type SearchAdvancedFiltersForm = Form<
         [FILTER_KEYS.ASSIGNEE]: string[];
         [FILTER_KEYS.ASSIGNEE_NOT]: string[];
 
-        [FILTER_KEYS.REIMBURSABLE]: string;
-        [FILTER_KEYS.REIMBURSABLE_NOT]: string;
+        [FILTER_KEYS.REIMBURSABLE]: BooleanValue;
+        [FILTER_KEYS.REIMBURSABLE_NOT]: BooleanValue;
 
-        [FILTER_KEYS.BILLABLE]: string;
-        [FILTER_KEYS.BILLABLE_NOT]: string;
+        [FILTER_KEYS.BILLABLE]: BooleanValue;
+        [FILTER_KEYS.BILLABLE_NOT]: BooleanValue;
 
         [FILTER_KEYS.ACTION]: string;
         [FILTER_KEYS.ACTION_NOT]: string;
@@ -701,6 +704,6 @@ type SearchAdvancedFiltersForm = Form<
         Record<ReportFieldNegatedKey, string>
 >;
 
-export type {SearchAdvancedFiltersForm, SearchAdvancedFiltersKey, HasFilterValue, HasFilterValues, IsFilterValue, IsFilterValues};
+export type {SearchAdvancedFiltersForm, SearchAdvancedFiltersKey, HasFilterValue, HasFilterValues, IsFilterValue, IsFilterValues, ExpenseTypeValue, ExpenseTypeValues};
 export default FILTER_KEYS;
 export {DATE_FILTER_KEYS, ALLOWED_TYPE_FILTERS, FILTER_KEYS, AMOUNT_FILTER_KEYS};

From 6828bcd02b7b59d5314c69bd9561bd58b36caa14 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 01:30:22 +0800
Subject: [PATCH 07/25] lint

---
 .../Search/FilterDropdowns/AmountPopup.tsx           |  4 ++--
 .../Search/FilterDropdowns/CardSelectPopup.tsx       |  7 ++++---
 .../Search/FilterDropdowns/CategorySelectPopup.tsx   |  4 ++--
 .../Search/FilterDropdowns/CurrencySelectPopup.tsx   |  2 +-
 .../Search/FilterDropdowns/DateSelectPopup.tsx       |  5 ++---
 .../Search/FilterDropdowns/ExportedToSelectPopup.tsx |  6 +++---
 .../Search/FilterDropdowns/InSelectPopup.tsx         |  2 +-
 .../Search/FilterDropdowns/ReportFieldPopup.tsx      |  6 +++---
 .../Search/FilterDropdowns/TagSelectPopup.tsx        |  4 ++--
 .../Search/FilterDropdowns/TaxRateSelectPopup.tsx    |  4 ++--
 .../Search/SearchPageHeader/useSearchActionsBar.tsx  |  2 +-
 .../Search/SearchPageHeader/useSearchFiltersBar.tsx  |  2 +-
 src/components/Search/hooks/useFilterCardValue.tsx   | 12 ++++++------
 src/types/form/SearchAdvancedFiltersForm.ts          |  6 +++---
 14 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/AmountPopup.tsx b/src/components/Search/FilterDropdowns/AmountPopup.tsx
index 1ddca5ebd436..412efdd9a506 100644
--- a/src/components/Search/FilterDropdowns/AmountPopup.tsx
+++ b/src/components/Search/FilterDropdowns/AmountPopup.tsx
@@ -5,15 +5,15 @@ import AmountWithoutCurrencyInput from '@components/AmountWithoutCurrencyInput';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
+import type {SearchAmountFilterKeys} from '@components/Search/types';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {convertToBackendAmount, convertToFrontendAmountAsString} from '@libs/CurrencyUtils';
 import CONST from '@src/CONST';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
-import type {SearchAmountFilterKeys} from '../types';
 import type {PopoverComponentProps} from './DropdownButton';
-import Text from '@components/Text';
 
 type AmountPopupProps = PopoverComponentProps & {
     filterKey: SearchAmountFilterKeys;
diff --git a/src/components/Search/FilterDropdowns/CardSelectPopup.tsx b/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
index f044941dc8b7..080623071c25 100644
--- a/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
@@ -5,6 +5,7 @@ import Button from '@components/Button';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import CardListItem from '@components/SelectionList/ListItem/CardListItem';
 import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
+import Text from '@components/Text';
 import {useCompanyCardFeedIcons} from '@hooks/useCompanyCardIcons';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
@@ -16,14 +17,14 @@ import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {openSearchCardFiltersPage} from '@libs/actions/Search';
-import {buildCardFeedsData, buildCardsData, CardFilterItem, generateSelectedCards, getDomainFeedData, getSelectedCardsFromFeeds} from '@libs/CardFeedUtils';
-import {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
+import {buildCardFeedsData, buildCardsData, generateSelectedCards, getDomainFeedData, getSelectedCardsFromFeeds} from '@libs/CardFeedUtils';
+import type {CardFilterItem} from '@libs/CardFeedUtils';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import type {PopoverComponentProps} from './DropdownButton';
-import Text from '@components/Text';
 
 type CardSelectPopupProps = PopoverComponentProps & {
     updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
diff --git a/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx b/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx
index e6f38f32ab58..d78c7eb08df7 100644
--- a/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type {OnyxCollection} from 'react-native-onyx';
+import MultiSelectFilterPopup from '@components/Search/SearchPageHeader/MultiSelectFilterPopup';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import {getDecodedCategoryName} from '@libs/CategoryUtils';
@@ -8,7 +9,6 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import type {PolicyCategories, PolicyCategory} from '@src/types/onyx';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
-import MultiSelectFilterPopup from '../SearchPageHeader/MultiSelectFilterPopup';
 import type {MultiSelectItem} from './MultiSelectPopup';
 
 type CategorySelectPopupProps = {
@@ -80,7 +80,7 @@ function CategorySelectPopup({closeOverlay, updateFilterForm}: CategorySelectPop
     return (
         <MultiSelectFilterPopup
             closeOverlay={closeOverlay}
-            translationKey={'common.category'}
+            translationKey="common.category"
             items={categoryItems}
             value={selectedCategoriesItems ?? []}
             isSearchable={categoryItems.length >= CONST.STANDARD_LIST_ITEM_LIMIT}
diff --git a/src/components/Search/FilterDropdowns/CurrencySelectPopup.tsx b/src/components/Search/FilterDropdowns/CurrencySelectPopup.tsx
index b54405c9b12c..e5d74588873c 100644
--- a/src/components/Search/FilterDropdowns/CurrencySelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/CurrencySelectPopup.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import {useCurrencyListActions, useCurrencyListState} from '@components/CurrencyListContextProvider';
+import MultiSelectFilterPopup from '@components/Search/SearchPageHeader/MultiSelectFilterPopup';
 import {getCurrencyOptions} from '@libs/SearchUIUtils';
 import type {TranslationPaths} from '@src/languages/types';
-import MultiSelectFilterPopup from '../SearchPageHeader/MultiSelectFilterPopup';
 import type {MultiSelectItem} from './MultiSelectPopup';
 
 type CurrencySelectPopupProps = {
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
index 94c3748b0be9..f992dafad13b 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup.tsx
@@ -1,7 +1,6 @@
 import React, {useCallback, useRef, useState} from 'react';
 import {View} from 'react-native';
-import {ViewStyle} from 'react-native';
-import {StyleProp} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import DatePresetFilterBase from '@components/Search/FilterComponents/DatePresetFilterBase';
@@ -79,7 +78,7 @@ function DateSelectPopup({label, value, presets, style, closeOverlay, onChange}:
 
     return (
         <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2, style]}>
-            {isSmallScreenWidth && !selectedDateModifier && label && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
+            {isSmallScreenWidth && !selectedDateModifier && !!label && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
             <View>
                 {!!selectedDateModifier && (
                     <HeaderWithBackButton
diff --git a/src/components/Search/FilterDropdowns/ExportedToSelectPopup.tsx b/src/components/Search/FilterDropdowns/ExportedToSelectPopup.tsx
index 2f8aa09549c4..b95ca22e1bfb 100644
--- a/src/components/Search/FilterDropdowns/ExportedToSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/ExportedToSelectPopup.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import {View} from 'react-native';
-import {TupleToUnion} from 'type-fest';
+import type {TupleToUnion} from 'type-fest';
 import Icon from '@components/Icon';
+import MultiSelectFilterPopup from '@components/Search/SearchPageHeader/MultiSelectFilterPopup';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -16,7 +17,6 @@ import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
-import MultiSelectFilterPopup from '../SearchPageHeader/MultiSelectFilterPopup';
 import type {MultiSelectItem} from './MultiSelectPopup';
 
 type ExportedToSelectPopupProps = {
@@ -132,7 +132,7 @@ function ExportedToSelectPopup({closeOverlay, updateFilterForm}: ExportedToSelec
     return (
         <MultiSelectFilterPopup
             closeOverlay={closeOverlay}
-            translationKey={'search.exportedTo'}
+            translationKey="search.exportedTo"
             items={exportedToPickerOptions}
             value={selectedExportedTo}
             isSearchable={exportedToPickerOptions.length >= CONST.STANDARD_LIST_ITEM_LIMIT}
diff --git a/src/components/Search/FilterDropdowns/InSelectPopup.tsx b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
index 3a53a2f2ac38..b7cd467e69c3 100644
--- a/src/components/Search/FilterDropdowns/InSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
@@ -23,7 +23,7 @@ import type {OptionData} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import passthroughPolicyTagListSelector from '@src/selectors/PolicyTagList';
-import {SearchAdvancedFiltersForm} from '@src/types/form';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
 
 type InSelectPopupProps = {
     closeOverlay: () => void;
diff --git a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
index 59adae3a8437..04f4a0930453 100644
--- a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
+++ b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
@@ -6,6 +6,9 @@ import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
 import ScrollView from '@components/ScrollView';
+import type {SearchDateValues} from '@components/Search/FilterComponents/DatePresetFilterBase';
+import type {ReportFieldDateKey, ReportFieldTextKey} from '@components/Search/types';
+import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -19,13 +22,10 @@ import {createAllPolicyReportFieldsSelector} from '@src/selectors/Policy';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import type {Policy, PolicyReportField} from '@src/types/onyx';
 import type {PolicyReportFieldType} from '@src/types/onyx/Policy';
-import type {SearchDateValues} from '../FilterComponents/DatePresetFilterBase';
-import type {ReportFieldDateKey, ReportFieldTextKey} from '../types';
 import DateSelectPopup from './DateSelectPopup';
 import type {PopoverComponentProps} from './DropdownButton';
 import SingleSelectPopup from './SingleSelectPopup';
 import TextInputPopup from './TextInputPopup';
-import Text from '@components/Text';
 
 type ReportFieldPopupProps = PopoverComponentProps & {
     updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
diff --git a/src/components/Search/FilterDropdowns/TagSelectPopup.tsx b/src/components/Search/FilterDropdowns/TagSelectPopup.tsx
index 1d01371a43a8..c867d3cf66be 100644
--- a/src/components/Search/FilterDropdowns/TagSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/TagSelectPopup.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type {OnyxCollection} from 'react-native-onyx';
+import MultiSelectFilterPopup from '@components/Search/SearchPageHeader/MultiSelectFilterPopup';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import {getCleanedTagName, getTagNamesFromTagsLists} from '@libs/PolicyUtils';
@@ -9,7 +10,6 @@ import passthroughPolicyTagListSelector from '@src/selectors/PolicyTagList';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import type {PolicyTagLists} from '@src/types/onyx';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
-import MultiSelectFilterPopup from '../SearchPageHeader/MultiSelectFilterPopup';
 import type {MultiSelectItem} from './MultiSelectPopup';
 
 type TagSelectPopupProps = {
@@ -56,7 +56,7 @@ function TagSelectPopup({closeOverlay, updateFilterForm}: TagSelectPopupProps) {
     return (
         <MultiSelectFilterPopup
             closeOverlay={closeOverlay}
-            translationKey={'common.tag'}
+            translationKey="common.tag"
             items={tagItems}
             value={selectedTagsItems ?? []}
             isSearchable={tagItems.length >= CONST.STANDARD_LIST_ITEM_LIMIT}
diff --git a/src/components/Search/FilterDropdowns/TaxRateSelectPopup.tsx b/src/components/Search/FilterDropdowns/TaxRateSelectPopup.tsx
index 40556c15831b..92d34d007299 100644
--- a/src/components/Search/FilterDropdowns/TaxRateSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/TaxRateSelectPopup.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
+import MultiSelectFilterPopup from '@components/Search/SearchPageHeader/MultiSelectFilterPopup';
 import useOnyx from '@hooks/useOnyx';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import type {Policy} from '@src/types/onyx';
-import MultiSelectFilterPopup from '../SearchPageHeader/MultiSelectFilterPopup';
 import type {MultiSelectItem} from './MultiSelectPopup';
 
 type TaxRateSelectPopupProps = {
@@ -42,7 +42,7 @@ function TaxRateSelectPopup({closeOverlay, updateFilterForm}: TaxRateSelectPopup
     return (
         <MultiSelectFilterPopup
             closeOverlay={closeOverlay}
-            translationKey={'iou.taxRate'}
+            translationKey="iou.taxRate"
             items={taxItems}
             value={selectedTaxRates}
             isSearchable={taxItems.length >= CONST.STANDARD_LIST_ITEM_LIMIT}
diff --git a/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx b/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
index fa4467a8ad4a..9e0e822d9d4e 100644
--- a/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
@@ -20,7 +20,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {close} from '@libs/actions/Modal';
 import Navigation from '@libs/Navigation/Navigation';
 import {buildFilterQueryWithSortDefaults} from '@libs/SearchQueryUtils';
-import {filterValidHasValues, getFeedOptions, getCurrencyOptions, getHasOptions, getStatusOptions, getWithdrawalTypeOptions, mapFiltersFormToLabelValueList} from '@libs/SearchUIUtils';
+import {filterValidHasValues, getCurrencyOptions, getFeedOptions, getHasOptions, getStatusOptions, getWithdrawalTypeOptions, mapFiltersFormToLabelValueList} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index ef9c8e0f70d8..d0667e176b28 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -32,10 +32,10 @@ import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import {buildFilterQueryWithSortDefaults, isFilterSupported, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import {
     filterValidHasValues,
+    getCurrencyOptions,
     getFeedOptions,
     getGroupByOptions,
     getGroupBySections,
-    getCurrencyOptions,
     getHasOptions,
     getStatusOptions,
     getTypeOptions,
diff --git a/src/components/Search/hooks/useFilterCardValue.tsx b/src/components/Search/hooks/useFilterCardValue.tsx
index 006900f19e7e..eb705da2c82c 100644
--- a/src/components/Search/hooks/useFilterCardValue.tsx
+++ b/src/components/Search/hooks/useFilterCardValue.tsx
@@ -5,7 +5,7 @@ import {createCardFeedKey, getCardFeedKey, getCardFeedNamesWithType, getWorkspac
 import {getCardDescription} from '@libs/CardUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {WorkspaceCardsList} from '@src/types/onyx';
+import type {WorkspaceCardsList} from '@src/types/onyx';
 
 function useFilterCardValue(): string {
     const {translate} = useLocalize();
@@ -14,15 +14,15 @@ function useFilterCardValue(): string {
     const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
     const cardIdsFilter = searchAdvancedFiltersForm?.[CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID] ?? [];
     const feedFilter = searchAdvancedFiltersForm?.[CONST.SEARCH.SYNTAX_FILTER_KEYS.FEED] ?? [];
-    const workspaceCardFeeds = Object.entries(searchCards ?? {}).reduce<Record<string, WorkspaceCardsList>>((workspaceCardsFeed, [cardID, card]) => {
+    const workspaceCardFeeds = Object.entries(searchCards ?? {}).reduce<Record<string, WorkspaceCardsList>>((acc, [cardID, card]) => {
         const feedKey = `${createCardFeedKey(card.fundID, card.bank)}`;
         const workspaceFeedKey = getWorkspaceCardFeedKey(feedKey);
-        if (!workspaceCardsFeed[workspaceFeedKey]) {
-            workspaceCardsFeed[workspaceFeedKey] = {};
+        if (!acc[workspaceFeedKey]) {
+            acc[workspaceFeedKey] = {};
         }
 
-        workspaceCardsFeed[workspaceFeedKey][cardID] = card;
-        return workspaceCardsFeed;
+        acc[workspaceFeedKey][cardID] = card;
+        return acc;
     }, {});
 
     const cardFeedNamesWithType = getCardFeedNamesWithType({
diff --git a/src/types/form/SearchAdvancedFiltersForm.ts b/src/types/form/SearchAdvancedFiltersForm.ts
index b9541156aef0..e21a770fbdd2 100644
--- a/src/types/form/SearchAdvancedFiltersForm.ts
+++ b/src/types/form/SearchAdvancedFiltersForm.ts
@@ -542,12 +542,12 @@ const ALLOWED_TYPE_FILTERS: Record<string, Set<string>> = {
 type SearchAdvancedFiltersKey = ValueOf<typeof FILTER_KEYS> | ReportFieldKey;
 
 type HasFilterValue = ValueOf<typeof CONST.SEARCH.HAS_VALUES>;
-type HasFilterValues = Array<HasFilterValue>;
+type HasFilterValues = HasFilterValue[];
 type IsFilterValue = ValueOf<typeof CONST.SEARCH.IS_VALUES>;
-type IsFilterValues = Array<IsFilterValue>;
+type IsFilterValues = IsFilterValue[];
 type BooleanValue = ValueOf<typeof CONST.SEARCH.BOOLEAN>;
 type ExpenseTypeValue = ValueOf<typeof CONST.SEARCH.TRANSACTION_TYPE>;
-type ExpenseTypeValues = Array<ExpenseTypeValue>;
+type ExpenseTypeValues = ExpenseTypeValue[];
 
 type SearchAdvancedFiltersForm = Form<
     SearchAdvancedFiltersKey,

From bb32693ed2ed0e2df6de5aac83935020b3a7103a Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 01:51:48 +0800
Subject: [PATCH 08/25] remove isExpanded prop

---
 src/components/Search/SearchPageHeader/FeedFilterPopup.tsx    | 1 -
 .../Search/SearchPageHeader/MultiSelectFilterPopup.tsx        | 4 ++--
 .../Search/SearchPageHeader/useSearchActionsBar.tsx           | 4 ----
 .../Search/SearchPageHeader/useSearchFiltersBar.tsx           | 3 ---
 4 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/Search/SearchPageHeader/FeedFilterPopup.tsx b/src/components/Search/SearchPageHeader/FeedFilterPopup.tsx
index 7b9aba95f226..2b3723467ba3 100644
--- a/src/components/Search/SearchPageHeader/FeedFilterPopup.tsx
+++ b/src/components/Search/SearchPageHeader/FeedFilterPopup.tsx
@@ -31,7 +31,6 @@ function FeedFilterPopup({closeOverlay, items, value, isExpanded, onChangeCallba
         <MultiSelectFilterPopup
             items={items}
             value={value}
-            isExpanded={isExpanded}
             loading={shouldShowLoadingState}
             translationKey="search.filters.feed"
             closeOverlay={closeOverlay}
diff --git a/src/components/Search/SearchPageHeader/MultiSelectFilterPopup.tsx b/src/components/Search/SearchPageHeader/MultiSelectFilterPopup.tsx
index 50af2ba45032..f1f6cbe265c5 100644
--- a/src/components/Search/SearchPageHeader/MultiSelectFilterPopup.tsx
+++ b/src/components/Search/SearchPageHeader/MultiSelectFilterPopup.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import type {PopoverComponentProps} from '@components/Search/FilterDropdowns/DropdownButton';
 import type {MultiSelectItem} from '@components/Search/FilterDropdowns/MultiSelectPopup';
 import MultiSelectPopup from '@components/Search/FilterDropdowns/MultiSelectPopup';
 import useLocalize from '@hooks/useLocalize';
 import type {TranslationPaths} from '@src/languages/types';
 
-type MultiSelectFilterPopupProps<T extends string> = PopoverComponentProps & {
+type MultiSelectFilterPopupProps<T extends string> = {
     loading?: boolean;
     translationKey: TranslationPaths;
     items: Array<MultiSelectItem<T>>;
     value: Array<MultiSelectItem<T>>;
     onChangeCallback: (selectedItems: Array<MultiSelectItem<T>>) => void;
+    closeOverlay: () => void;
     isSearchable?: boolean;
 };
 
diff --git a/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx b/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
index 5416a0ed6231..76c3267b9d68 100644
--- a/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchActionsBar.tsx
@@ -132,7 +132,6 @@ function FeedPopup({updateFilterForm, closeOverlay, isExpanded}: FilterBarPopupP
 
     return (
         <MultiSelectFilterPopup
-            isExpanded={isExpanded}
             closeOverlay={closeOverlay}
             translationKey="search.filters.feed"
             items={feedOptions}
@@ -273,7 +272,6 @@ function useSearchActionsBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
                 };
                 const hasComponent = (props: PopoverComponentProps) => (
                     <MultiSelectFilterPopup
-                        isExpanded={props.isExpanded}
                         closeOverlay={props.closeOverlay}
                         translationKey="search.has"
                         items={hasOptions}
@@ -292,7 +290,6 @@ function useSearchActionsBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
                 };
                 const isComponent = (props: PopoverComponentProps) => (
                     <MultiSelectFilterPopup
-                        isExpanded={props.isExpanded}
                         closeOverlay={props.closeOverlay}
                         translationKey="search.filters.is"
                         items={isOptions}
@@ -363,7 +360,6 @@ function useSearchActionsBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
                 };
                 const statusComponent = (props: PopoverComponentProps) => (
                     <MultiSelectFilterPopup
-                        isExpanded={props.isExpanded}
                         closeOverlay={props.closeOverlay}
                         translationKey="common.status"
                         items={statusOptions}
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index 109a373275c7..1ab936fa52f2 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -387,7 +387,6 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     };
     const statusComponent = (props: PopoverComponentProps) => (
         <MultiSelectFilterPopup
-            isExpanded={props.isExpanded}
             closeOverlay={props.closeOverlay}
             translationKey="common.status"
             items={statusOptions}
@@ -401,7 +400,6 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     };
     const hasComponent = (props: PopoverComponentProps) => (
         <MultiSelectFilterPopup
-            isExpanded={props.isExpanded}
             closeOverlay={props.closeOverlay}
             translationKey="search.has"
             items={hasOptions}
@@ -415,7 +413,6 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON, isMobileSelectionModeEn
     };
     const isComponent = (props: PopoverComponentProps) => (
         <MultiSelectFilterPopup
-            isExpanded={props.isExpanded}
             closeOverlay={props.closeOverlay}
             translationKey="search.filters.is"
             items={isOptions}

From 4d5798fb2466ecf8be680db4461a9673d041a6eb Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 01:53:28 +0800
Subject: [PATCH 09/25] add new sentry label

---
 src/CONST/index.ts                                         | 2 ++
 src/components/Search/FilterDropdowns/ReportFieldPopup.tsx | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 7e4d2b646a6f..3e3e275ce8ee 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -8744,6 +8744,8 @@ const CONST = {
             FILTER_POPUP_APPLY_USER: 'Search-FilterPopupApplyUser',
             FILTER_POPUP_RESET_REPORT: 'Search-FilterPopupResetReport',
             FILTER_POPUP_APPLY_REPORT: 'Search-FilterPopupApplyReport',
+            FILTER_POPUP_RESET_REPORT_FIELD: 'Search-FilterPopupResetReportField',
+            FILTER_POPUP_APPLY_REPORT_FIELD: 'Search-FilterPopupApplyReportField',
             FILTER_POPUP_RESET_CARD: 'Search-FilterPopupResetCard',
             FILTER_POPUP_APPLY_CARD: 'Search-FilterPopupApplyCard',
             TRANSACTION_LIST_ITEM_CHECKBOX: 'Search-TransactionListItemCheckbox',
diff --git a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
index 04f4a0930453..bc41285f2742 100644
--- a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
+++ b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
@@ -279,7 +279,7 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
                     style={[styles.flex1]}
                     text={translate('common.reset')}
                     onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_AMOUNT}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_REPORT_FIELD}
                 />
                 <Button
                     success
@@ -287,7 +287,7 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
                     style={[styles.flex1]}
                     text={translate('common.apply')}
                     onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_AMOUNT}
+                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_REPORT_FIELD}
                 />
             </View>
         </View>

From 5bdd086ad8e0f9181a0717b610360eeb78a28b38 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 02:41:59 +0800
Subject: [PATCH 10/25] update for the new date range filter

---
 .../Search/FilterDropdowns/ReportFieldPopup.tsx   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
index bc41285f2742..1d432d30fda7 100644
--- a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
+++ b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
@@ -14,7 +14,7 @@ import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {getDateRangeDisplayValueFromFormValue, isSearchDatePreset} from '@libs/SearchQueryUtils';
 import {getDatePresets} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -148,10 +148,12 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
             const onKey = `${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}` as const;
             const beforeKey = `${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}` as const;
             const afterKey = `${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}` as const;
+            const rangeKey = `${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${suffix}` as const;
             return {
                 [CONST.SEARCH.DATE_MODIFIERS.ON]: values[onKey] ?? searchAdvancedFiltersForm?.[onKey],
                 [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: values[beforeKey] ?? searchAdvancedFiltersForm?.[beforeKey],
                 [CONST.SEARCH.DATE_MODIFIERS.AFTER]: values[afterKey] ?? searchAdvancedFiltersForm?.[afterKey],
+                [CONST.SEARCH.DATE_MODIFIERS.RANGE]: values[rangeKey] ?? searchAdvancedFiltersForm?.[rangeKey],
             };
         }
         const filterKey = `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${suffix}` as const;
@@ -172,6 +174,7 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
             const onKey = `${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}`;
             const afterKey = `${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}`;
             const beforeKey = `${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}`;
+            const rangeKey = `${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${suffix}`;
             return (
                 <ReportFieldDatePopup
                     field={selectedField}
@@ -183,6 +186,7 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
                             [onKey]: newValue[CONST.SEARCH.DATE_MODIFIERS.ON],
                             [afterKey]: newValue[CONST.SEARCH.DATE_MODIFIERS.AFTER],
                             [beforeKey]: newValue[CONST.SEARCH.DATE_MODIFIERS.BEFORE],
+                            [rangeKey]: newValue[CONST.SEARCH.DATE_MODIFIERS.RANGE],
                         }))
                     }
                 />
@@ -219,6 +223,7 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
                     acc[`${CONST.SEARCH.REPORT_FIELD.ON_PREFIX}${suffix}`] = undefined;
                     acc[`${CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX}${suffix}`] = undefined;
                     acc[`${CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX}${suffix}`] = undefined;
+                    acc[`${CONST.SEARCH.REPORT_FIELD.RANGE_PREFIX}${suffix}`] = undefined;
                 } else {
                     acc[filterKey] = undefined;
                 }
@@ -239,6 +244,7 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
             const onValue = formDateValue?.[CONST.SEARCH.DATE_MODIFIERS.ON];
             const afterValue = formDateValue?.[CONST.SEARCH.DATE_MODIFIERS.AFTER];
             const beforeValue = formDateValue?.[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+            const rangeValue = formDateValue?.[CONST.SEARCH.DATE_MODIFIERS.RANGE];
 
             if (onValue) {
                 dateValues.push(isSearchDatePreset(onValue) ? translate(`search.filters.date.presets.${onValue}`) : translate('search.filters.date.on', onValue));
@@ -252,6 +258,13 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
                 dateValues.push(translate('search.filters.date.before', beforeValue));
             }
 
+            if (rangeValue) {
+                const rangeDisplay = getDateRangeDisplayValueFromFormValue(rangeValue, undefined, undefined, true);
+                if (rangeDisplay) {
+                    dateValues.push(rangeDisplay);
+                }
+            }
+
             return {key: field.fieldID, name: field.name, value: dateValues.join(', '), field};
         }
 

From 1590a558974c18cb67cda24e12224d06c9ea5ec8 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 02:44:32 +0800
Subject: [PATCH 11/25] fix type error after merge

---
 src/components/Search/FilterDropdowns/InSelectPopup.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/InSelectPopup.tsx b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
index b7cd467e69c3..24f535cebfc4 100644
--- a/src/components/Search/FilterDropdowns/InSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
@@ -78,12 +78,12 @@ function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
         const reportData = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`];
         const reportPolicy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportData?.policyID}`];
         const report = getSelectedOptionData(
-            createOptionFromReport({...reportData, reportID: id}, personalDetails, currentUserAccountID, privateIsArchived, reportPolicy, reportAttributesDerived),
+            createOptionFromReport({...reportData, reportID: id}, personalDetails, privateIsArchived, reportPolicy, reportAttributesDerived),
         );
         const isReportArchived = !!privateIsArchived;
         const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportData?.policyID}`];
         const reportPolicyTags = policyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${getNonEmptyStringOnyxID(report?.policyID)}`];
-        const alternateText = getAlternateText(report, {}, isReportArchived, currentUserAccountID, policy, {}, undefined, undefined, reportAttributesDerived, reportPolicyTags);
+        const alternateText = getAlternateText(report, {}, {isReportArchived, policy, reportAttributesDerived, policyTags: reportPolicyTags});
         return {...report, alternateText};
     });
 

From 812b1859f20964d0cd219d15360fce4e9e312cb6 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 02:49:07 +0800
Subject: [PATCH 12/25] prettier

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

diff --git a/src/components/Search/FilterDropdowns/InSelectPopup.tsx b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
index 24f535cebfc4..a5b72e80c769 100644
--- a/src/components/Search/FilterDropdowns/InSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
@@ -77,9 +77,7 @@ function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
         const privateIsArchived = privateIsArchivedMap[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${id}`];
         const reportData = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`];
         const reportPolicy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportData?.policyID}`];
-        const report = getSelectedOptionData(
-            createOptionFromReport({...reportData, reportID: id}, personalDetails, privateIsArchived, reportPolicy, reportAttributesDerived),
-        );
+        const report = getSelectedOptionData(createOptionFromReport({...reportData, reportID: id}, personalDetails, privateIsArchived, reportPolicy, reportAttributesDerived));
         const isReportArchived = !!privateIsArchived;
         const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportData?.policyID}`];
         const reportPolicyTags = policyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${getNonEmptyStringOnyxID(report?.policyID)}`];

From 0a7bcacf121179b0f758ea14adb15ab7833f3bb8 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 18:22:23 +0800
Subject: [PATCH 13/25] add comment

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

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
index 6f9dc7b8df15..e181e9bfdaf2 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
@@ -26,6 +26,8 @@ type DateSelectPopupProps = {
 
     /** The date presets */
     presets?: SearchDatePreset[];
+
+    /** Additional style props */
     style?: StyleProp<ViewStyle>;
 
     /** Function to call when changes are applied */

From b533a45521d4561d7f5a7c525693896588762cff Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 18:24:26 +0800
Subject: [PATCH 14/25] use undefined instead of null

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

diff --git a/src/components/Search/FilterDropdowns/AmountPopup.tsx b/src/components/Search/FilterDropdowns/AmountPopup.tsx
index 412efdd9a506..94137fb4b88d 100644
--- a/src/components/Search/FilterDropdowns/AmountPopup.tsx
+++ b/src/components/Search/FilterDropdowns/AmountPopup.tsx
@@ -104,7 +104,7 @@ function AmountPopup({filterKey, label, value, closeOverlay, updateFilterForm}:
 
         const save = (rawAmount: string) => {
             if (rawAmount.trim() === '') {
-                setAmountValues((prevAmountValues) => ({...prevAmountValues, [selectedModifier]: null}));
+                setAmountValues((prevAmountValues) => ({...prevAmountValues, [selectedModifier]: undefined}));
                 goBack();
                 return;
             }

From 5e5b641c8cd46a5f16e9c1e364863acdd1bd2e32 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 21:15:04 +0800
Subject: [PATCH 15/25] create basepopup to DRY

---
 .../{DateSelectPopup => }/ActionButtons.tsx   |  0
 .../Search/FilterDropdowns/AmountPopup.tsx    | 79 +++++--------------
 .../Search/FilterDropdowns/BasePopup.tsx      | 49 ++++++++++++
 .../FilterDropdowns/CardSelectPopup.tsx       | 39 +++------
 .../FilterDropdowns/DateSelectPopup/index.tsx |  2 +-
 .../Search/FilterDropdowns/DisplayPopup.tsx   |  2 +-
 .../Search/FilterDropdowns/GroupByPopup.tsx   | 39 +++------
 .../Search/FilterDropdowns/InSelectPopup.tsx  | 52 +++++-------
 .../FilterDropdowns/MultiSelectPopup.tsx      | 37 +++------
 .../FilterDropdowns/ReportFieldPopup.tsx      | 39 +++------
 .../FilterDropdowns/SingleSelectPopup.tsx     | 38 +++------
 .../Search/FilterDropdowns/TextInputPopup.tsx | 41 +++-------
 .../FilterDropdowns/UserSelectPopup.tsx       | 56 ++++++-------
 13 files changed, 183 insertions(+), 290 deletions(-)
 rename src/components/Search/FilterDropdowns/{DateSelectPopup => }/ActionButtons.tsx (100%)
 create mode 100644 src/components/Search/FilterDropdowns/BasePopup.tsx

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup/ActionButtons.tsx b/src/components/Search/FilterDropdowns/ActionButtons.tsx
similarity index 100%
rename from src/components/Search/FilterDropdowns/DateSelectPopup/ActionButtons.tsx
rename to src/components/Search/FilterDropdowns/ActionButtons.tsx
diff --git a/src/components/Search/FilterDropdowns/AmountPopup.tsx b/src/components/Search/FilterDropdowns/AmountPopup.tsx
index 94137fb4b88d..3a15c6c74b13 100644
--- a/src/components/Search/FilterDropdowns/AmountPopup.tsx
+++ b/src/components/Search/FilterDropdowns/AmountPopup.tsx
@@ -1,25 +1,21 @@
 import React, {useState} from 'react';
-import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import AmountWithoutCurrencyInput from '@components/AmountWithoutCurrencyInput';
-import Button from '@components/Button';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
 import type {SearchAmountFilterKeys} from '@components/Search/types';
-import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {convertToBackendAmount, convertToFrontendAmountAsString} from '@libs/CurrencyUtils';
 import CONST from '@src/CONST';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
-import type {PopoverComponentProps} from './DropdownButton';
+import BasePopup from './BasePopup';
 
-type AmountPopupProps = PopoverComponentProps & {
+type AmountPopupProps = {
     filterKey: SearchAmountFilterKeys;
     label: string;
     value: Record<ValueOf<typeof CONST.SEARCH.AMOUNT_MODIFIERS>, string | undefined>;
     updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
+    closeOverlay: () => void;
 };
 
 type AmountInputProps = {
@@ -31,21 +27,20 @@ type AmountInputProps = {
 };
 
 function AmountInput({title, value, name, onSave, onBackButtonPress}: AmountInputProps) {
-    const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [amount, setAmount] = useState(value);
 
     return (
-        <View style={[!shouldUseNarrowLayout && styles.pv4, styles.gap2]}>
-            <HeaderWithBackButton
-                shouldDisplayHelpButton={false}
-                style={[styles.h10]}
-                subtitle={title}
-                onBackButtonPress={onBackButtonPress}
-            />
+        <BasePopup
+            label={title}
+            onReset={() => onSave('')}
+            onApply={() => onSave(amount)}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_AMOUNT}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_AMOUNT}
+            onBackButtonPress={onBackButtonPress}
+        >
             <AmountWithoutCurrencyInput
-                containerStyles={styles.ph4}
+                containerStyles={[styles.ph4, styles.mb2]}
                 defaultValue={amount}
                 onInputChange={setAmount}
                 label={title}
@@ -56,32 +51,12 @@ function AmountInput({title, value, name, onSave, onBackButtonPress}: AmountInpu
                 shouldAllowNegative
                 autoFocus
             />
-            <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.mt2]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={() => onSave('')}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_AMOUNT}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={() => onSave(amount)}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_AMOUNT}
-                />
-            </View>
-        </View>
+        </BasePopup>
     );
 }
 
 function AmountPopup({filterKey, label, value, closeOverlay, updateFilterForm}: AmountPopupProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
     const [selectedModifier, setSelectedModifier] = useState<ValueOf<typeof CONST.SEARCH.AMOUNT_MODIFIERS> | null>(null);
     const [amountValues, setAmountValues] = useState(value);
 
@@ -154,8 +129,13 @@ function AmountPopup({filterKey, label, value, closeOverlay, updateFilterForm}:
     };
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4]}>
-            {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
+        <BasePopup
+            label={label}
+            onReset={resetChanges}
+            onApply={applyChanges}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_AMOUNT}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_AMOUNT}
+        >
             {modifierConfig.map((modifier) => (
                 <MenuItem
                     key={modifier}
@@ -166,24 +146,7 @@ function AmountPopup({filterKey, label, value, closeOverlay, updateFilterForm}:
                     viewMode={CONST.OPTION_MODE.COMPACT}
                 />
             ))}
-            <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.mt2]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_AMOUNT}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_AMOUNT}
-                />
-            </View>
-        </View>
+        </BasePopup>
     );
 }
 
diff --git a/src/components/Search/FilterDropdowns/BasePopup.tsx b/src/components/Search/FilterDropdowns/BasePopup.tsx
new file mode 100644
index 000000000000..845efe384cc7
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/BasePopup.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Text from '@components/Text';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ActionButtons from './ActionButtons';
+
+type BasePopupProps = React.PropsWithChildren & {
+    label?: string;
+    applySentryLabel: string;
+    resetSentryLabel: string;
+    style?: StyleProp<ViewStyle>;
+    onApply: () => void;
+    onReset: () => void;
+    onBackButtonPress?: () => void;
+};
+
+function BasePopup({children, label, applySentryLabel, resetSentryLabel, style, onApply, onReset, onBackButtonPress}: BasePopupProps) {
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[!isSmallScreenWidth && styles.pv4, style]}>
+            {onBackButtonPress ? (
+                <HeaderWithBackButton
+                    shouldDisplayHelpButton={false}
+                    style={[styles.h10, styles.pv1, styles.mb2]}
+                    subtitle={label}
+                    onBackButtonPress={onBackButtonPress}
+                />
+            ) : (
+                isSmallScreenWidth && !!label && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1, styles.mb2]}>{label}</Text>
+            )}
+            {children}
+            <ActionButtons
+                containerStyle={[styles.flexRow, styles.gap2, styles.ph5, styles.mt2]}
+                onReset={onReset}
+                onApply={onApply}
+                applySentryLabel={applySentryLabel}
+                resetSentryLabel={resetSentryLabel}
+            />
+        </View>
+    );
+}
+
+export default BasePopup;
diff --git a/src/components/Search/FilterDropdowns/CardSelectPopup.tsx b/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
index 080623071c25..6114f3535d34 100644
--- a/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
@@ -1,17 +1,14 @@
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import ActivityIndicator from '@components/ActivityIndicator';
-import Button from '@components/Button';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import CardListItem from '@components/SelectionList/ListItem/CardListItem';
 import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
-import Text from '@components/Text';
 import {useCompanyCardFeedIcons} from '@hooks/useCompanyCardIcons';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -24,9 +21,10 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
-import type {PopoverComponentProps} from './DropdownButton';
+import BasePopup from './BasePopup';
 
-type CardSelectPopupProps = PopoverComponentProps & {
+type CardSelectPopupProps = {
+    closeOverlay: () => void;
     updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
 };
 
@@ -37,8 +35,6 @@ function CardSelectPopup({updateFilterForm, closeOverlay}: CardSelectPopupProps)
     const {isOffline} = useNetwork();
     const illustrations = useThemeIllustrations();
     const companyCardFeedIcons = useCompanyCardFeedIcons();
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
     const {windowHeight} = useWindowDimensions();
 
     const [areCardsLoaded] = useOnyx(ONYXKEYS.IS_SEARCH_FILTERS_CARD_DATA_LOADED);
@@ -168,8 +164,13 @@ function CardSelectPopup({updateFilterForm, closeOverlay}: CardSelectPopupProps)
     const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'SearchFiltersCardPage', isLoadingFromOnyx: isLoadingOnyxData};
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
-            {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{translate('common.card')}</Text>}
+        <BasePopup
+            label={translate('common.card')}
+            onReset={resetChanges}
+            onApply={applyChanges}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_CARD}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_CARD}
+        >
             {!!shouldShowLoadingState && (
                 <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsCenter]}>
                     <ActivityIndicator
@@ -194,25 +195,7 @@ function CardSelectPopup({updateFilterForm, closeOverlay}: CardSelectPopupProps)
                     />
                 </View>
             )}
-
-            <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_CARD}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_CARD}
-                />
-            </View>
-        </View>
+        </BasePopup>
     );
 }
 
diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
index e181e9bfdaf2..6c2be15c3414 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
@@ -14,7 +14,7 @@ import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import {getDateModifierTitle, getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
-import ActionButtons from './ActionButtons';
+import ActionButtons from '../ActionButtons';
 import SelectedDateModifierHeader from './SelectedDateModifierHeader';
 
 type DateSelectPopupProps = {
diff --git a/src/components/Search/FilterDropdowns/DisplayPopup.tsx b/src/components/Search/FilterDropdowns/DisplayPopup.tsx
index 27def71fc003..196e18907018 100644
--- a/src/components/Search/FilterDropdowns/DisplayPopup.tsx
+++ b/src/components/Search/FilterDropdowns/DisplayPopup.tsx
@@ -197,7 +197,7 @@ function DisplayPopup({queryJSON, searchResults, closeOverlay, onSort}: DisplayP
         <View style={[!shouldUseNarrowLayout && styles.pv4]}>
             <HeaderWithBackButton
                 shouldDisplayHelpButton={false}
-                style={[styles.h10]}
+                style={[styles.h10, styles.pv1, styles.mb2]}
                 subtitle={subtitle[selectedDisplayFilter]}
                 onBackButtonPress={() => setSelectedDisplayFilter(null)}
             />
diff --git a/src/components/Search/FilterDropdowns/GroupByPopup.tsx b/src/components/Search/FilterDropdowns/GroupByPopup.tsx
index a12e714ad25b..6b26071d2b55 100644
--- a/src/components/Search/FilterDropdowns/GroupByPopup.tsx
+++ b/src/components/Search/FilterDropdowns/GroupByPopup.tsx
@@ -1,18 +1,15 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
-import Button from '@components/Button';
 import type {SearchGroupBy} from '@components/Search/types';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
 import type {ListItem} from '@components/SelectionList/types';
-import Text from '@components/Text';
-import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import type {GroupBySection} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
+import BasePopup from './BasePopup';
 
 type GroupByPopupItem = {
     text: string;
@@ -39,10 +36,7 @@ type GroupByPopupProps = {
 };
 
 function GroupByPopup({label, value, sections, style, closeOverlay, onChange}: GroupByPopupProps) {
-    const {translate} = useLocalize();
     const styles = useThemeStyles();
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
     const {windowHeight} = useWindowDimensions();
     const [selectedItem, setSelectedItem] = useState(value);
 
@@ -86,9 +80,14 @@ function GroupByPopup({label, value, sections, style, closeOverlay, onChange}: G
     }, [closeOverlay, onChange]);
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2, style]}>
-            {isSmallScreenWidth && !!label && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
-
+        <BasePopup
+            label={label}
+            onReset={resetChanges}
+            onApply={applyChanges}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_SINGLE_SELECT}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_SINGLE_SELECT}
+            style={style}
+        >
             <View style={[styles.getSelectionListPopoverHeight(optionsCount, windowHeight, false)]}>
                 <SelectionListWithSections
                     sections={listSections}
@@ -97,25 +96,7 @@ function GroupByPopup({label, value, sections, style, closeOverlay, onChange}: G
                     onSelectRow={updateSelectedItem}
                 />
             </View>
-
-            <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_SINGLE_SELECT}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_SINGLE_SELECT}
-                />
-            </View>
-        </View>
+        </BasePopup>
     );
 }
 
diff --git a/src/components/Search/FilterDropdowns/InSelectPopup.tsx b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
index a5b72e80c769..abbce2457d42 100644
--- a/src/components/Search/FilterDropdowns/InSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
-import Button from '@components/Button';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import {useOptionsList} from '@components/OptionListContextProvider';
 import InviteMemberListItem from '@components/SelectionList/ListItem/InviteMemberListItem';
@@ -24,6 +23,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import passthroughPolicyTagListSelector from '@src/selectors/PolicyTagList';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import BasePopup from './BasePopup';
 
 type InSelectPopupProps = {
     closeOverlay: () => void;
@@ -179,38 +179,28 @@ function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
     };
 
     return (
-        <View style={[styles.getUserSelectionListPopoverHeight(sections.flatMap((section) => section.data).length || 1, windowHeight, shouldUseNarrowLayout, true)]}>
-            <SelectionListWithSections
-                sections={sections}
-                onSelectRow={handleParticipantSelection}
-                ListItem={InviteMemberListItem}
-                canSelectMultiple
-                style={{containerStyle: [!shouldUseNarrowLayout && styles.pt4], listStyle: styles.pb2}}
-                shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
-                textInputOptions={textInputOptions}
-                isLoadingNewOptions={isLoadingNewOptions}
-                shouldShowLoadingPlaceholder={shouldShowLoadingPlaceholder}
-                shouldShowTextInput
-            />
-
-            <View style={[styles.flexRow, styles.gap2, styles.mh5, !shouldUseNarrowLayout && styles.mb4]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_REPORT}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_REPORT}
+        <BasePopup
+            label={translate('common.in')}
+            onReset={resetChanges}
+            onApply={applyChanges}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_REPORT}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_REPORT}
+        >
+            <View style={[styles.getUserSelectionListPopoverHeight(sections.flatMap((section) => section.data).length || 1, windowHeight, shouldUseNarrowLayout, true)]}>
+                <SelectionListWithSections
+                    sections={sections}
+                    onSelectRow={handleParticipantSelection}
+                    ListItem={InviteMemberListItem}
+                    canSelectMultiple
+                    style={{listStyle: styles.pb2}}
+                    shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
+                    textInputOptions={textInputOptions}
+                    isLoadingNewOptions={isLoadingNewOptions}
+                    shouldShowLoadingPlaceholder={shouldShowLoadingPlaceholder}
+                    shouldShowTextInput
                 />
             </View>
-        </View>
+        </BasePopup>
     );
 }
 
diff --git a/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx b/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx
index b3968f6d9e01..5456c7b64d90 100644
--- a/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx
@@ -2,20 +2,18 @@ import React, {useCallback, useMemo, useState} from 'react';
 import type {ReactNode} from 'react';
 import {View} from 'react-native';
 import ActivityIndicator from '@components/ActivityIndicator';
-import Button from '@components/Button';
 import SelectionList from '@components/SelectionList';
 import MultiSelectListItem from '@components/SelectionList/ListItem/MultiSelectListItem';
 import type {ListItem} from '@components/SelectionList/ListItem/types';
-import Text from '@components/Text';
 import useDebouncedState from '@hooks/useDebouncedState';
 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 type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import CONST from '@src/CONST';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
+import BasePopup from './BasePopup';
 
 type MultiSelectItem<T> = {
     text: string;
@@ -54,9 +52,6 @@ function MultiSelectPopup<T extends string>({label, loading, value, items, close
     const theme = useTheme();
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
     const {windowHeight} = useWindowDimensions();
     const [selectedItems, setSelectedItems] = useState(value);
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
@@ -113,9 +108,13 @@ function MultiSelectPopup<T extends string>({label, loading, value, items, close
     const reasonAttributes: SkeletonSpanReasonAttributes = {context: 'MultiSelectPopupDataLoading'};
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
-            {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
-
+        <BasePopup
+            label={label}
+            onReset={resetChanges}
+            onApply={applyChanges}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_MULTI_SELECT}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_MULTI_SELECT}
+        >
             <View style={[styles.getSelectionListPopoverHeight(listData.length || 1, windowHeight, isSearchable ?? false)]}>
                 {!!loading && (
                     <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter]}>
@@ -137,25 +136,7 @@ function MultiSelectPopup<T extends string>({label, loading, value, items, close
                     />
                 )}
             </View>
-
-            <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_MULTI_SELECT}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_MULTI_SELECT}
-                />
-            </View>
-        </View>
+        </BasePopup>
     );
 }
 
diff --git a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
index 1d432d30fda7..cee095c86bcf 100644
--- a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
+++ b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
@@ -2,13 +2,11 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxCollection} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
-import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItem from '@components/MenuItem';
 import ScrollView from '@components/ScrollView';
 import type {SearchDateValues} from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {ReportFieldDateKey, ReportFieldTextKey} from '@components/Search/types';
-import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -22,12 +20,13 @@ import {createAllPolicyReportFieldsSelector} from '@src/selectors/Policy';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import type {Policy, PolicyReportField} from '@src/types/onyx';
 import type {PolicyReportFieldType} from '@src/types/onyx/Policy';
+import BasePopup from './BasePopup';
 import DateSelectPopup from './DateSelectPopup';
-import type {PopoverComponentProps} from './DropdownButton';
 import SingleSelectPopup from './SingleSelectPopup';
 import TextInputPopup from './TextInputPopup';
 
-type ReportFieldPopupProps = PopoverComponentProps & {
+type ReportFieldPopupProps = {
+    closeOverlay: () => void;
     updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
 };
 
@@ -120,6 +119,7 @@ function ReportFieldTextPopup({field, value, onBackButtonPress, onChange}: Repor
             <TextInputPopup
                 style={styles.pv0}
                 placeholder={field.name}
+                label={field.name}
                 defaultValue={value}
                 closeOverlay={onBackButtonPress}
                 onChange={onChange}
@@ -130,10 +130,7 @@ function ReportFieldTextPopup({field, value, onBackButtonPress, onChange}: Repor
 
 function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProps) {
     const {translate, localeCompare} = useLocalize();
-    const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
     const policyReportFieldsSelector = (policies: OnyxCollection<Policy>) => createAllPolicyReportFieldsSelector(policies, localeCompare);
     const [fieldList] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {
         selector: policyReportFieldsSelector,
@@ -272,8 +269,13 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
     });
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4]}>
-            {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{translate('workspace.common.reportField')}</Text>}
+        <BasePopup
+            label={translate('workspace.common.reportField')}
+            onReset={resetChanges}
+            onApply={applyChanges}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_REPORT_FIELD}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_REPORT_FIELD}
+        >
             <ScrollView style={[StyleUtils.getMaximumHeight(CONST.POPOVER_DROPDOWN_MAX_HEIGHT)]}>
                 {listItems.map((item) => (
                     <MenuItem
@@ -286,24 +288,7 @@ function ReportFieldPopup({closeOverlay, updateFilterForm}: ReportFieldPopupProp
                     />
                 ))}
             </ScrollView>
-            <View style={[styles.flexRow, styles.gap2, styles.ph5, styles.mt2]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_REPORT_FIELD}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_REPORT_FIELD}
-                />
-            </View>
-        </View>
+        </BasePopup>
     );
 }
 
diff --git a/src/components/Search/FilterDropdowns/SingleSelectPopup.tsx b/src/components/Search/FilterDropdowns/SingleSelectPopup.tsx
index 7e98978530b4..7365c503f14d 100644
--- a/src/components/Search/FilterDropdowns/SingleSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/SingleSelectPopup.tsx
@@ -1,17 +1,15 @@
 import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
-import Button from '@components/Button';
 import SelectionList from '@components/SelectionList';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import type {ListItem, SelectionListStyle} from '@components/SelectionList/types';
-import Text from '@components/Text';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
+import BasePopup from './BasePopup';
 
 type SingleSelectItem<T> = {
     text: string;
@@ -63,8 +61,6 @@ function SingleSelectPopup<T extends string>({
 }: SingleSelectPopupProps<T>) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
     const {windowHeight} = useWindowDimensions();
     const [selectedItem, setSelectedItem] = useState(value);
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
@@ -128,12 +124,15 @@ function SingleSelectPopup<T extends string>({
         [searchTerm, isSearchable, searchPlaceholder, translate, setSearchTerm, noResultsFound],
     );
 
-    const shouldShowLabel = isSmallScreenWidth && !!label;
-
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2, style]}>
-            {shouldShowLabel && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
-
+        <BasePopup
+            label={label}
+            onReset={resetChanges}
+            onApply={applyChanges}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_SINGLE_SELECT}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_SINGLE_SELECT}
+            style={style}
+        >
             <View style={[styles.getSelectionListPopoverHeight(options.length || 1, windowHeight, isSearchable ?? false)]}>
                 <SelectionList
                     data={options}
@@ -147,24 +146,7 @@ function SingleSelectPopup<T extends string>({
                     shouldShowLoadingPlaceholder={!noResultsFound}
                 />
             </View>
-            <View style={[styles.flexRow, styles.gap2, styles.ph5]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_SINGLE_SELECT}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_SINGLE_SELECT}
-                />
-            </View>
-        </View>
+        </BasePopup>
     );
 }
 
diff --git a/src/components/Search/FilterDropdowns/TextInputPopup.tsx b/src/components/Search/FilterDropdowns/TextInputPopup.tsx
index b3570ce3fbf0..588ed6ebb4b7 100644
--- a/src/components/Search/FilterDropdowns/TextInputPopup.tsx
+++ b/src/components/Search/FilterDropdowns/TextInputPopup.tsx
@@ -1,26 +1,21 @@
 import React, {useState} from 'react';
-import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
-import Button from '@components/Button';
 import TextInput from '@components/TextInput';
-import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
+import BasePopup from './BasePopup';
 
 type TextInputPopupProps = {
     style?: StyleProp<ViewStyle>;
     defaultValue: string;
+    label?: string;
     placeholder?: string;
     closeOverlay: () => void;
     onChange: (value: string) => void;
 };
 
-function TextInputPopup({style, defaultValue, placeholder, closeOverlay, onChange}: TextInputPopupProps) {
-    const {translate} = useLocalize();
+function TextInputPopup({style, defaultValue, label, placeholder, closeOverlay, onChange}: TextInputPopupProps) {
     const styles = useThemeStyles();
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
     const [value, setValue] = useState(defaultValue);
 
     const applyChanges = () => {
@@ -34,33 +29,23 @@ function TextInputPopup({style, defaultValue, placeholder, closeOverlay, onChang
     };
 
     return (
-        <View style={[!isSmallScreenWidth && styles.pv4, styles.ph5, styles.gap5, style]}>
+        <BasePopup
+            label={label}
+            onReset={resetChanges}
+            onApply={applyChanges}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_TEXT_INPUT}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_TEXT_INPUT}
+            style={style}
+        >
             <TextInput
                 placeholder={placeholder}
                 value={value}
                 onChangeText={setValue}
                 accessibilityLabel={placeholder}
                 role={CONST.ROLE.PRESENTATION}
-                containerStyles={[styles.mt2]}
+                containerStyles={[styles.ph5, styles.mb2]}
             />
-            <View style={[styles.flexRow, styles.gap2]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_TEXT_INPUT}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_TEXT_INPUT}
-                />
-            </View>
-        </View>
+        </BasePopup>
     );
 }
 
diff --git a/src/components/Search/FilterDropdowns/UserSelectPopup.tsx b/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
index 94d9827ea7c5..91ac3090704b 100644
--- a/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
@@ -18,11 +18,15 @@ import {getParticipantsOption} from '@libs/OptionsListUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import BasePopup from './BasePopup';
 
 type UserSelectPopupProps = {
     /** The currently selected users */
     value: string[];
 
+    /** The popup label */
+    label: string;
+
     /** Function to call to close the overlay when changes are applied */
     closeOverlay: () => void;
 
@@ -37,7 +41,7 @@ type UserSelectPopupProps = {
     isSearchable?: boolean;
 };
 
-function UserSelectPopup({value, closeOverlay, onChange, isSearchable}: UserSelectPopupProps) {
+function UserSelectPopup({value, label, closeOverlay, onChange, isSearchable}: UserSelectPopupProps) {
     const selectionListRef = useRef<SelectionListHandle<ListItem> | null>(null);
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -168,38 +172,28 @@ function UserSelectPopup({value, closeOverlay, onChange, isSearchable}: UserSele
     );
 
     return (
-        <View style={[styles.getUserSelectionListPopoverHeight(listData.length || 1, windowHeight, shouldUseNarrowLayout, shouldShowSearchInput)]}>
-            <SelectionList
-                data={listData}
-                ref={selectionListRef}
-                textInputOptions={textInputOptions}
-                canSelectMultiple
-                ListItem={UserSelectionListItem}
-                style={{containerStyle: [!shouldUseNarrowLayout && styles.pt4], listStyle: styles.pb2}}
-                onSelectRow={selectUser}
-                isLoadingNewOptions={isLoadingNewOptions}
-                shouldShowLoadingPlaceholder={!areOptionsInitialized}
-                onEndReached={onListEndReached}
-            />
-
-            <View style={[styles.flexRow, styles.gap2, styles.mh5, !shouldUseNarrowLayout && styles.mb4]}>
-                <Button
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.reset')}
-                    onPress={resetChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_USER}
-                />
-                <Button
-                    success
-                    medium
-                    style={[styles.flex1]}
-                    text={translate('common.apply')}
-                    onPress={applyChanges}
-                    sentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_USER}
+        <BasePopup
+            label={label}
+            onReset={resetChanges}
+            onApply={applyChanges}
+            resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_USER}
+            applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_USER}
+        >
+            <View style={[styles.getUserSelectionListPopoverHeight(listData.length || 1, windowHeight, shouldUseNarrowLayout, shouldShowSearchInput)]}>
+                <SelectionList
+                    data={listData}
+                    ref={selectionListRef}
+                    textInputOptions={textInputOptions}
+                    canSelectMultiple
+                    ListItem={UserSelectionListItem}
+                    style={{containerStyle: [!shouldUseNarrowLayout && styles.pt4], listStyle: styles.pb2}}
+                    onSelectRow={selectUser}
+                    isLoadingNewOptions={isLoadingNewOptions}
+                    shouldShowLoadingPlaceholder={!areOptionsInitialized}
+                    onEndReached={onListEndReached}
                 />
             </View>
-        </View>
+        </BasePopup>
     );
 }
 

From 6e9e4faf1c9f72ee45adba03463683406ec16aa8 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 21:22:33 +0800
Subject: [PATCH 16/25] minor changes

---
 src/components/Search/FilterDropdowns/CardSelectPopup.tsx     | 4 ++--
 src/components/Search/FilterDropdowns/CategorySelectPopup.tsx | 2 +-
 src/components/Search/hooks/useFilterReportValue.tsx          | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/CardSelectPopup.tsx b/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
index 6114f3535d34..1c9377d71c66 100644
--- a/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
@@ -125,9 +125,9 @@ function CardSelectPopup({updateFilterForm, closeOverlay}: CardSelectPopupProps)
     const applyChanges = () => {
         const feeds = cardFeedsSectionData.selected.map((feed) => feed.cardFeedKey);
         const cardsFromSelectedFeed = getSelectedCardsFromFeeds(userCardList, workspaceCardFeeds, feeds);
-        const IDs = selectedCards.filter((card) => !cardsFromSelectedFeed.includes(card));
+        const cardIDs = selectedCards.filter((card) => !cardsFromSelectedFeed.includes(card));
 
-        updateFilterForm({cardID: IDs, feed: feeds});
+        updateFilterForm({cardID: cardIDs, feed: feeds});
         closeOverlay();
     };
 
diff --git a/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx b/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx
index d78c7eb08df7..d23c7642e0f5 100644
--- a/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/CategorySelectPopup.tsx
@@ -49,7 +49,7 @@ function CategorySelectPopup({closeOverlay, updateFilterForm}: CategorySelectPop
     );
     const selectedPoliciesCategories: PolicyCategory[] = Object.keys(allPolicyCategories ?? {})
         .filter((key) => policyIDs?.map((policyID) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`)?.includes(key))
-        ?.map((key) => Object.values(allPolicyCategories?.[key] ?? {}))
+        .map((key) => Object.values(allPolicyCategories?.[key] ?? {}))
         .flat();
 
     const categoryItems = [{text: translate('search.noCategory'), value: CONST.SEARCH.CATEGORY_EMPTY_VALUE as string}];
diff --git a/src/components/Search/hooks/useFilterReportValue.tsx b/src/components/Search/hooks/useFilterReportValue.tsx
index 0b1665606f2b..74204a786722 100644
--- a/src/components/Search/hooks/useFilterReportValue.tsx
+++ b/src/components/Search/hooks/useFilterReportValue.tsx
@@ -13,8 +13,8 @@ function useFilterReportValue(reportIDs: SearchFilter['value']): string {
 
     return reportIDs
         .map((id) => getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reportAttributes?.reports))
-        ?.filter(Boolean)
-        ?.join(', ');
+        .filter(Boolean)
+        .join(', ');
 }
 
 export default useFilterReportValue;

From 8f02a009db0627d5fe55049a41cf20955902da5a Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 21:31:15 +0800
Subject: [PATCH 17/25] lint

---
 .../Search/FilterDropdowns/DateSelectPopup/index.tsx           | 2 +-
 src/components/Search/FilterDropdowns/UserSelectPopup.tsx      | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
index 6c2be15c3414..9250e04644bc 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
@@ -14,7 +14,7 @@ import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import {getDateModifierTitle, getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
-import ActionButtons from '../ActionButtons';
+import ActionButtons from '@components/Search/FilterDropdowns/ActionButtons';
 import SelectedDateModifierHeader from './SelectedDateModifierHeader';
 
 type DateSelectPopupProps = {
diff --git a/src/components/Search/FilterDropdowns/UserSelectPopup.tsx b/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
index 91ac3090704b..3320f6e7656e 100644
--- a/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
@@ -1,7 +1,6 @@
 import isEmpty from 'lodash/isEmpty';
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
-import Button from '@components/Button';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import SelectionList from '@components/SelectionList';
 import UserSelectionListItem from '@components/SelectionList/ListItem/UserSelectionListItem';
@@ -25,7 +24,7 @@ type UserSelectPopupProps = {
     value: string[];
 
     /** The popup label */
-    label: string;
+    label?: string;
 
     /** Function to call to close the overlay when changes are applied */
     closeOverlay: () => void;

From cfe70800d1b40ac9a55cfdea60c9b1a75c9aa35d Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 23:25:22 +0800
Subject: [PATCH 18/25] make the value generic

---
 .../Search/SearchMultipleSelectionPicker.tsx  | 26 ++++++++++-------
 .../SearchFiltersExpenseTypePage.tsx          |  2 +-
 .../SearchFiltersExportedToPage.tsx           | 28 +++++++------------
 .../SearchFiltersTaxRatePage.tsx              |  2 +-
 4 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/components/Search/SearchMultipleSelectionPicker.tsx b/src/components/Search/SearchMultipleSelectionPicker.tsx
index 7c232f345313..dafc13ca9bd5 100644
--- a/src/components/Search/SearchMultipleSelectionPicker.tsx
+++ b/src/components/Search/SearchMultipleSelectionPicker.tsx
@@ -9,28 +9,34 @@ import {sortOptionsWithEmptyValue} from '@libs/SearchQueryUtils';
 import ROUTES from '@src/ROUTES';
 import SearchFilterPageFooterButtons from './SearchFilterPageFooterButtons';
 
-type SearchMultipleSelectionPickerItem = {
+type SearchMultipleSelectionPickerItem<T> = {
     name: string;
-    value: string | string[];
+    value: T;
     leftElement?: React.ReactNode;
 };
 
-type SearchMultipleSelectionPickerProps = {
-    items: SearchMultipleSelectionPickerItem[];
-    initiallySelectedItems: SearchMultipleSelectionPickerItem[] | undefined;
+type SearchMultipleSelectionPickerProps<T> = {
+    items: SearchMultipleSelectionPickerItem<T>[];
+    initiallySelectedItems: SearchMultipleSelectionPickerItem<T>[] | undefined;
     pickerTitle?: string;
-    onSaveSelection: (values: string[]) => void;
+    onSaveSelection: (values: [T] extends [string[]] ? T : T[]) => void;
     shouldShowTextInput?: boolean;
 };
 
-function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTitle, onSaveSelection, shouldShowTextInput = true}: SearchMultipleSelectionPickerProps) {
+function SearchMultipleSelectionPicker<T extends string | string[]>({
+    items,
+    initiallySelectedItems,
+    pickerTitle,
+    onSaveSelection,
+    shouldShowTextInput = true,
+}: SearchMultipleSelectionPickerProps<T>) {
     const {translate, localeCompare} = useLocalize();
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
 
     const [selectedItemIDs, setSelectedItemIDs] = useState(() => new Set((initiallySelectedItems ?? []).map((item) => item.value.toString())));
 
     const searchLower = debouncedSearchTerm.toLowerCase();
-    const selectedSectionData: Array<{text: string; keyForList: string; isSelected: boolean; value: string | string[]; leftElement?: React.ReactNode}> = [];
+    const selectedSectionData: Array<{text: string; keyForList: string; isSelected: boolean; value: T; leftElement?: React.ReactNode}> = [];
     const remainingSectionData: typeof selectedSectionData = [];
     for (const item of items) {
         if (!item.name.toLowerCase().includes(searchLower)) {
@@ -60,7 +66,7 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit
               },
           ];
 
-    const onSelectItem = (item: Partial<OptionData & SearchMultipleSelectionPickerItem>) => {
+    const onSelectItem = (item: Partial<OptionData & SearchMultipleSelectionPickerItem<T>>) => {
         if (!item.text || !item.keyForList || !item.value) {
             return;
         }
@@ -81,7 +87,7 @@ function SearchMultipleSelectionPicker({items, initiallySelectedItems, pickerTit
     };
 
     const applyChanges = () => {
-        onSaveSelection(items.filter((item) => selectedItemIDs.has(item.value.toString())).flatMap((item) => item.value));
+        onSaveSelection(items.filter((item) => selectedItemIDs.has(item.value.toString())).flatMap((item) => item.value) as [T] extends [string[]] ? T : T[]);
         Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
     };
 
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExpenseTypePage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExpenseTypePage.tsx
index 4aa2d584fa7f..3b7e7426b8cc 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExpenseTypePage.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExpenseTypePage.tsx
@@ -40,7 +40,7 @@ function SearchFiltersExpenseTypePage() {
         });
     }, [allExpenseTypes, translate]);
 
-    const updateExpenseTypeFilter = useCallback((values: string[]) => updateAdvancedFilters({expenseType: values as ExpenseTypeValues}), []);
+    const updateExpenseTypeFilter = useCallback((values: ExpenseTypeValues) => updateAdvancedFilters({expenseType: values}), []);
 
     return (
         <ScreenWrapper
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExportedToPage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExportedToPage.tsx
index b90fc5e68708..7ab1b1ade79e 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExportedToPage.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExportedToPage.tsx
@@ -29,10 +29,6 @@ const STANDARD_EXPORT_TEMPLATE_ID_TO_DISPLAY_LABEL: Record<string, string> = {
     [CONST.REPORT.EXPORT_OPTIONS.EXPENSE_LEVEL_EXPORT]: CONST.REPORT.EXPORT_OPTION_LABELS.EXPENSE_LEVEL_EXPORT,
 };
 
-function getPickerItemValueKey(value: SearchMultipleSelectionPickerItem['value']): string {
-    return typeof value === 'string' ? value : (value.at(0) ?? '');
-}
-
 function SearchFiltersExportedToPage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -61,10 +57,10 @@ function SearchFiltersExportedToPage() {
         </View>
     );
 
-    const exportedToPickerOptions: SearchMultipleSelectionPickerItem[] = (() => {
+    const exportedToPickerOptions: SearchMultipleSelectionPickerItem<string>[] = (() => {
         const integrationConnectionNamesSet = new Set<string>(integrationConnectionNames);
 
-        const connectedIntegrationPickerItems: SearchMultipleSelectionPickerItem[] = integrationConnectionNames
+        const connectedIntegrationPickerItems: SearchMultipleSelectionPickerItem<string>[] = integrationConnectionNames
             .filter((connectionName) => connectedIntegrationNames.has(connectionName))
             .map((connectionName) => {
                 const icon = getIntegrationIcon(connectionName, expensifyIcons);
@@ -87,7 +83,7 @@ function SearchFiltersExportedToPage() {
                 };
             });
 
-        const usedPickerValueKeys = new Set(connectedIntegrationPickerItems.map((item) => getPickerItemValueKey(item.value)));
+        const usedPickerValueKeys = new Set(connectedIntegrationPickerItems.map((item) => item.value));
         const policiesToLoadTemplatesFrom = policyIDs.length > 0 ? policyIDs.map((id) => policies?.[`${ONYXKEYS.COLLECTION.POLICY}${id}`]).filter(Boolean) : Object.values(policies ?? {});
         const exportTemplatesFromPolicies = policiesToLoadTemplatesFrom.flatMap((policy) => getExportTemplates([], {}, translate, policy, false));
         const exportTemplatesFromAccount = getExportTemplates(integrationsExportTemplates ?? [], csvExportLayouts ?? {}, translate, undefined, true);
@@ -101,7 +97,7 @@ function SearchFiltersExportedToPage() {
         }
         const deduplicatedExportTemplates = Array.from(exportTemplatesByTemplateId.values());
 
-        const standardAndIntegrationCustomTemplatePickerItems: SearchMultipleSelectionPickerItem[] = [];
+        const standardAndIntegrationCustomTemplatePickerItems: SearchMultipleSelectionPickerItem<string>[] = [];
 
         for (const template of deduplicatedExportTemplates) {
             if (!template.templateName || integrationConnectionNamesSet.has(template.templateName) || template.type === CONST.EXPORT_TEMPLATE_TYPES.IN_APP) {
@@ -110,12 +106,11 @@ function SearchFiltersExportedToPage() {
 
             const displayName = template.name ?? template.templateName ?? '';
             const filterValue = STANDARD_EXPORT_TEMPLATE_ID_TO_DISPLAY_LABEL[template.templateName] ?? displayName;
-            const filterValueKey = getPickerItemValueKey(filterValue);
-            if (usedPickerValueKeys.has(filterValueKey)) {
+            if (usedPickerValueKeys.has(filterValue)) {
                 continue;
             }
 
-            usedPickerValueKeys.add(filterValueKey);
+            usedPickerValueKeys.add(filterValue);
             standardAndIntegrationCustomTemplatePickerItems.push({
                 name: displayName,
                 value: filterValue,
@@ -126,18 +121,15 @@ function SearchFiltersExportedToPage() {
         return [...connectedIntegrationPickerItems, ...standardAndIntegrationCustomTemplatePickerItems];
     })();
 
-    const initiallySelectedPickerItems: SearchMultipleSelectionPickerItem[] | undefined = (() => {
+    const initiallySelectedPickerItems: SearchMultipleSelectionPickerItem<string>[] | undefined = (() => {
         if (selectedExportedToValues.length === 0) {
             return undefined;
         }
         const normalizedSelectedValues = new Set(selectedExportedToValues);
-        const selectedOptionsPresentInCurrentList = exportedToPickerOptions.filter((option) => {
-            const optionValue = getPickerItemValueKey(option.value);
-            return normalizedSelectedValues.has(optionValue);
-        });
-        const selectedValueIdsFoundInCurrentOptions = new Set(selectedOptionsPresentInCurrentList.map((option) => getPickerItemValueKey(option.value)));
+        const selectedOptionsPresentInCurrentList = exportedToPickerOptions.filter((option) => normalizedSelectedValues.has(option.value));
+        const selectedValueIdsFoundInCurrentOptions = new Set(selectedOptionsPresentInCurrentList.map((option) => option.value));
         const unavailableSelectedValues = selectedExportedToValues.filter((value) => !selectedValueIdsFoundInCurrentOptions.has(value));
-        const unavailableSelectedOptions: SearchMultipleSelectionPickerItem[] = unavailableSelectedValues.map((value) => {
+        const unavailableSelectedOptions: SearchMultipleSelectionPickerItem<string>[] = unavailableSelectedValues.map((value) => {
             const connectionName = integrationConnectionNames.find((name) => CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[name] === value);
             const integrationIcon = connectionName ? getIntegrationIcon(connectionName, expensifyIcons) : null;
             const leftElement = integrationIcon ? (
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersTaxRatePage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersTaxRatePage.tsx
index da1882945152..21c2ba97f55d 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersTaxRatePage.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersTaxRatePage.tsx
@@ -23,7 +23,7 @@ function SearchFiltersTaxRatePage() {
     const [searchAdvancedFiltersForm, searchAdvancedFiltersFormResult] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const allTaxRates = getAllTaxRates(policies);
-    const selectedTaxesItems: SearchMultipleSelectionPickerItem[] = [];
+    const selectedTaxesItems: SearchMultipleSelectionPickerItem<string[]>[] = [];
     for (const [taxRateName, taxRateKeys] of Object.entries(allTaxRates)) {
         if (searchAdvancedFiltersForm?.taxRate) {
             for (const taxRateKey of searchAdvancedFiltersForm.taxRate) {

From 538f99b0a43074729fc4edf6c1d702c7df6f753b Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 2 Apr 2026 23:25:28 +0800
Subject: [PATCH 19/25] prettier

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

diff --git a/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx b/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
index 9250e04644bc..61812fffeea4 100644
--- a/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
+++ b/src/components/Search/FilterDropdowns/DateSelectPopup/index.tsx
@@ -4,6 +4,7 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import ScrollView from '@components/ScrollView';
 import DatePresetFilterBase from '@components/Search/FilterComponents/DatePresetFilterBase';
 import type {SearchDatePresetFilterBaseHandle} from '@components/Search/FilterComponents/DatePresetFilterBase';
+import ActionButtons from '@components/Search/FilterDropdowns/ActionButtons';
 import type {SearchDatePreset} from '@components/Search/types';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
@@ -14,7 +15,6 @@ import type {SearchDateValues} from '@libs/SearchQueryUtils';
 import {getDateModifierTitle, getDateRangeDisplayValueFromFormValue} from '@libs/SearchQueryUtils';
 import type {SearchDateModifier} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
-import ActionButtons from '@components/Search/FilterDropdowns/ActionButtons';
 import SelectedDateModifierHeader from './SelectedDateModifierHeader';
 
 type DateSelectPopupProps = {

From 8c6848eb94a29f12f8d786cb9c5e20da319f99ff Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 3 Apr 2026 20:02:59 +0800
Subject: [PATCH 20/25] call openSearchCardFiltersPage when popup is expanded

---
 src/components/Search/FilterDropdowns/CardSelectPopup.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/CardSelectPopup.tsx b/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
index 1c9377d71c66..52a6a0defeed 100644
--- a/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/CardSelectPopup.tsx
@@ -24,11 +24,12 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import BasePopup from './BasePopup';
 
 type CardSelectPopupProps = {
+    isExpanded: boolean;
     closeOverlay: () => void;
     updateFilterForm: (values: Partial<SearchAdvancedFiltersForm>) => void;
 };
 
-function CardSelectPopup({updateFilterForm, closeOverlay}: CardSelectPopupProps) {
+function CardSelectPopup({isExpanded, updateFilterForm, closeOverlay}: CardSelectPopupProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -49,11 +50,11 @@ function CardSelectPopup({updateFilterForm, closeOverlay}: CardSelectPopupProps)
     const [selectedCards, setSelectedCards] = useState<string[]>([]);
 
     useEffect(() => {
-        if (isOffline) {
+        if (isOffline || !isExpanded) {
             return;
         }
         openSearchCardFiltersPage();
-    }, [isOffline]);
+    }, [isOffline, isExpanded]);
 
     useEffect(() => {
         const generatedCards = generateSelectedCards(userCardList, workspaceCardFeeds, searchAdvancedFiltersForm?.feed, searchAdvancedFiltersForm?.cardID);

From 0f248395a945eb7ac64ea29001cd67e9393e49d9 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 3 Apr 2026 20:15:28 +0800
Subject: [PATCH 21/25] lint

---
 .../Search/SearchMultipleSelectionPicker.tsx           |  4 ++--
 .../SearchFiltersExportedToPage.tsx                    | 10 +++++-----
 .../SearchFiltersTaxRatePage.tsx                       |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Search/SearchMultipleSelectionPicker.tsx b/src/components/Search/SearchMultipleSelectionPicker.tsx
index dafc13ca9bd5..cae3e8802839 100644
--- a/src/components/Search/SearchMultipleSelectionPicker.tsx
+++ b/src/components/Search/SearchMultipleSelectionPicker.tsx
@@ -16,8 +16,8 @@ type SearchMultipleSelectionPickerItem<T> = {
 };
 
 type SearchMultipleSelectionPickerProps<T> = {
-    items: SearchMultipleSelectionPickerItem<T>[];
-    initiallySelectedItems: SearchMultipleSelectionPickerItem<T>[] | undefined;
+    items: Array<SearchMultipleSelectionPickerItem<T>>;
+    initiallySelectedItems: Array<SearchMultipleSelectionPickerItem<T>> | undefined;
     pickerTitle?: string;
     onSaveSelection: (values: [T] extends [string[]] ? T : T[]) => void;
     shouldShowTextInput?: boolean;
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExportedToPage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExportedToPage.tsx
index 7ab1b1ade79e..4c61ca3ec0be 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExportedToPage.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersExportedToPage.tsx
@@ -57,10 +57,10 @@ function SearchFiltersExportedToPage() {
         </View>
     );
 
-    const exportedToPickerOptions: SearchMultipleSelectionPickerItem<string>[] = (() => {
+    const exportedToPickerOptions: Array<SearchMultipleSelectionPickerItem<string>> = (() => {
         const integrationConnectionNamesSet = new Set<string>(integrationConnectionNames);
 
-        const connectedIntegrationPickerItems: SearchMultipleSelectionPickerItem<string>[] = integrationConnectionNames
+        const connectedIntegrationPickerItems: Array<SearchMultipleSelectionPickerItem<string>> = integrationConnectionNames
             .filter((connectionName) => connectedIntegrationNames.has(connectionName))
             .map((connectionName) => {
                 const icon = getIntegrationIcon(connectionName, expensifyIcons);
@@ -97,7 +97,7 @@ function SearchFiltersExportedToPage() {
         }
         const deduplicatedExportTemplates = Array.from(exportTemplatesByTemplateId.values());
 
-        const standardAndIntegrationCustomTemplatePickerItems: SearchMultipleSelectionPickerItem<string>[] = [];
+        const standardAndIntegrationCustomTemplatePickerItems: Array<SearchMultipleSelectionPickerItem<string>> = [];
 
         for (const template of deduplicatedExportTemplates) {
             if (!template.templateName || integrationConnectionNamesSet.has(template.templateName) || template.type === CONST.EXPORT_TEMPLATE_TYPES.IN_APP) {
@@ -121,7 +121,7 @@ function SearchFiltersExportedToPage() {
         return [...connectedIntegrationPickerItems, ...standardAndIntegrationCustomTemplatePickerItems];
     })();
 
-    const initiallySelectedPickerItems: SearchMultipleSelectionPickerItem<string>[] | undefined = (() => {
+    const initiallySelectedPickerItems: Array<SearchMultipleSelectionPickerItem<string>> | undefined = (() => {
         if (selectedExportedToValues.length === 0) {
             return undefined;
         }
@@ -129,7 +129,7 @@ function SearchFiltersExportedToPage() {
         const selectedOptionsPresentInCurrentList = exportedToPickerOptions.filter((option) => normalizedSelectedValues.has(option.value));
         const selectedValueIdsFoundInCurrentOptions = new Set(selectedOptionsPresentInCurrentList.map((option) => option.value));
         const unavailableSelectedValues = selectedExportedToValues.filter((value) => !selectedValueIdsFoundInCurrentOptions.has(value));
-        const unavailableSelectedOptions: SearchMultipleSelectionPickerItem<string>[] = unavailableSelectedValues.map((value) => {
+        const unavailableSelectedOptions: Array<SearchMultipleSelectionPickerItem<string>> = unavailableSelectedValues.map((value) => {
             const connectionName = integrationConnectionNames.find((name) => CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY[name] === value);
             const integrationIcon = connectionName ? getIntegrationIcon(connectionName, expensifyIcons) : null;
             const leftElement = integrationIcon ? (
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersTaxRatePage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersTaxRatePage.tsx
index 21c2ba97f55d..498fc852af47 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersTaxRatePage.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersTaxRatePage.tsx
@@ -23,7 +23,7 @@ function SearchFiltersTaxRatePage() {
     const [searchAdvancedFiltersForm, searchAdvancedFiltersFormResult] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const allTaxRates = getAllTaxRates(policies);
-    const selectedTaxesItems: SearchMultipleSelectionPickerItem<string[]>[] = [];
+    const selectedTaxesItems: Array<SearchMultipleSelectionPickerItem<string[]>> = [];
     for (const [taxRateName, taxRateKeys] of Object.entries(allTaxRates)) {
         if (searchAdvancedFiltersForm?.taxRate) {
             for (const taxRateKey of searchAdvancedFiltersForm.taxRate) {

From 92f3ce8cd55d8dc3663abfa485a7b848b39ac6dd Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 8 Apr 2026 13:00:59 +0800
Subject: [PATCH 22/25] fix missing param

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

diff --git a/src/components/Search/FilterDropdowns/AmountPopup.tsx b/src/components/Search/FilterDropdowns/AmountPopup.tsx
index 3a15c6c74b13..88eac1b5fbdc 100644
--- a/src/components/Search/FilterDropdowns/AmountPopup.tsx
+++ b/src/components/Search/FilterDropdowns/AmountPopup.tsx
@@ -69,7 +69,7 @@ function AmountPopup({filterKey, label, value, closeOverlay, updateFilterForm}:
     const modifierConfig = [CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO, CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN, CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN];
 
     const formatAmount = (amount: string | undefined) => {
-        return amount ? convertToFrontendAmountAsString(Number(amount)) : '';
+        return amount ? convertToFrontendAmountAsString(Number(amount), CONST.DEFAULT_CURRENCY_DECIMALS) : '';
     };
 
     if (selectedModifier) {

From d997af72bbad2120804e3daa1b8e796ffe074ec2 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 9 Apr 2026 11:16:11 +0800
Subject: [PATCH 23/25] use setState function updater

---
 .../Search/FilterDropdowns/InSelectPopup.tsx    | 17 ++++++++---------
 .../Search/FilterDropdowns/MultiSelectPopup.tsx |  6 +++---
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/InSelectPopup.tsx b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
index abbce2457d42..25757390dbb9 100644
--- a/src/components/Search/FilterDropdowns/InSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
@@ -146,16 +146,15 @@ function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
         if (!optionReportID) {
             return;
         }
-        const foundOptionIndex = selectedReportIDs.findIndex((reportID: string) => {
-            return reportID && reportID !== '' && selectedOption.reportID === reportID;
+        setSelectedReportIDs((prev) => {
+            const foundOptionIndex = prev.findIndex((reportID: string) => {
+                return reportID && reportID !== '' && selectedOption.reportID === reportID;
+            });
+            if (foundOptionIndex < 0) {
+                return [...prev, optionReportID];
+            }
+            return [...prev.slice(0, foundOptionIndex), ...prev.slice(foundOptionIndex + 1)];
         });
-
-        if (foundOptionIndex < 0) {
-            setSelectedReportIDs([...selectedReportIDs, optionReportID]);
-        } else {
-            const newSelectedReports = [...selectedReportIDs.slice(0, foundOptionIndex), ...selectedReportIDs.slice(foundOptionIndex + 1)];
-            setSelectedReportIDs(newSelectedReports);
-        }
     };
 
     const applyChanges = () => {
diff --git a/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx b/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx
index 5456c7b64d90..61433c3261eb 100644
--- a/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/MultiSelectPopup.tsx
@@ -72,17 +72,17 @@ function MultiSelectPopup<T extends string>({label, loading, value, items, close
     const updateSelectedItems = useCallback(
         (item: ListItem) => {
             if (item.isSelected) {
-                setSelectedItems(selectedItems.filter((i) => i.value !== item.keyForList));
+                setSelectedItems((prev) => prev.filter((i) => i.value !== item.keyForList));
                 return;
             }
 
             const newItem = items.find((i) => i.value === item.keyForList);
 
             if (newItem) {
-                setSelectedItems([...selectedItems, newItem]);
+                setSelectedItems((prev) => [...prev, newItem]);
             }
         },
-        [items, selectedItems],
+        [items],
     );
 
     const applyChanges = useCallback(() => {

From 01509789df61d71a0de629d8e26be201c2bfec81 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 9 Apr 2026 11:21:19 +0800
Subject: [PATCH 24/25] move the style to BasePopup

---
 .../Search/FilterDropdowns/InSelectPopup.tsx  | 27 +++++++++----------
 .../FilterDropdowns/UserSelectPopup.tsx       | 27 +++++++++----------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/InSelectPopup.tsx b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
index 25757390dbb9..e00994bc54f6 100644
--- a/src/components/Search/FilterDropdowns/InSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
@@ -184,21 +184,20 @@ function InSelectPopup({closeOverlay, updateFilterForm}: InSelectPopupProps) {
             onApply={applyChanges}
             resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_REPORT}
             applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_REPORT}
+            style={[styles.getUserSelectionListPopoverHeight(sections.flatMap((section) => section.data).length || 1, windowHeight, shouldUseNarrowLayout, true)]}
         >
-            <View style={[styles.getUserSelectionListPopoverHeight(sections.flatMap((section) => section.data).length || 1, windowHeight, shouldUseNarrowLayout, true)]}>
-                <SelectionListWithSections
-                    sections={sections}
-                    onSelectRow={handleParticipantSelection}
-                    ListItem={InviteMemberListItem}
-                    canSelectMultiple
-                    style={{listStyle: styles.pb2}}
-                    shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
-                    textInputOptions={textInputOptions}
-                    isLoadingNewOptions={isLoadingNewOptions}
-                    shouldShowLoadingPlaceholder={shouldShowLoadingPlaceholder}
-                    shouldShowTextInput
-                />
-            </View>
+            <SelectionListWithSections
+                sections={sections}
+                onSelectRow={handleParticipantSelection}
+                ListItem={InviteMemberListItem}
+                canSelectMultiple
+                style={{listStyle: styles.pb2}}
+                shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
+                textInputOptions={textInputOptions}
+                isLoadingNewOptions={isLoadingNewOptions}
+                shouldShowLoadingPlaceholder={shouldShowLoadingPlaceholder}
+                shouldShowTextInput
+            />
         </BasePopup>
     );
 }
diff --git a/src/components/Search/FilterDropdowns/UserSelectPopup.tsx b/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
index 3320f6e7656e..5a5b757b8f18 100644
--- a/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
@@ -177,21 +177,20 @@ function UserSelectPopup({value, label, closeOverlay, onChange, isSearchable}: U
             onApply={applyChanges}
             resetSentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_RESET_USER}
             applySentryLabel={CONST.SENTRY_LABEL.SEARCH.FILTER_POPUP_APPLY_USER}
+            style={[styles.getUserSelectionListPopoverHeight(listData.length || 1, windowHeight, shouldUseNarrowLayout, shouldShowSearchInput)]}
         >
-            <View style={[styles.getUserSelectionListPopoverHeight(listData.length || 1, windowHeight, shouldUseNarrowLayout, shouldShowSearchInput)]}>
-                <SelectionList
-                    data={listData}
-                    ref={selectionListRef}
-                    textInputOptions={textInputOptions}
-                    canSelectMultiple
-                    ListItem={UserSelectionListItem}
-                    style={{containerStyle: [!shouldUseNarrowLayout && styles.pt4], listStyle: styles.pb2}}
-                    onSelectRow={selectUser}
-                    isLoadingNewOptions={isLoadingNewOptions}
-                    shouldShowLoadingPlaceholder={!areOptionsInitialized}
-                    onEndReached={onListEndReached}
-                />
-            </View>
+            <SelectionList
+                data={listData}
+                ref={selectionListRef}
+                textInputOptions={textInputOptions}
+                canSelectMultiple
+                ListItem={UserSelectionListItem}
+                style={{containerStyle: [!shouldUseNarrowLayout && styles.pt4], listStyle: styles.pb2}}
+                onSelectRow={selectUser}
+                isLoadingNewOptions={isLoadingNewOptions}
+                shouldShowLoadingPlaceholder={!areOptionsInitialized}
+                onEndReached={onListEndReached}
+            />
         </BasePopup>
     );
 }

From 44a6a8572e88ae31c8adac77acf9bb89bb865e30 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 9 Apr 2026 11:31:38 +0800
Subject: [PATCH 25/25] remove unused import

---
 src/components/Search/FilterDropdowns/InSelectPopup.tsx   | 1 -
 src/components/Search/FilterDropdowns/UserSelectPopup.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/InSelectPopup.tsx b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
index e00994bc54f6..ae29a78d9e8c 100644
--- a/src/components/Search/FilterDropdowns/InSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/InSelectPopup.tsx
@@ -1,5 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import {View} from 'react-native';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import {useOptionsList} from '@components/OptionListContextProvider';
 import InviteMemberListItem from '@components/SelectionList/ListItem/InviteMemberListItem';
diff --git a/src/components/Search/FilterDropdowns/UserSelectPopup.tsx b/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
index 5a5b757b8f18..c6eb39de6a95 100644
--- a/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
+++ b/src/components/Search/FilterDropdowns/UserSelectPopup.tsx
@@ -1,6 +1,5 @@
 import isEmpty from 'lodash/isEmpty';
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {View} from 'react-native';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import SelectionList from '@components/SelectionList';
 import UserSelectionListItem from '@components/SelectionList/ListItem/UserSelectionListItem';