diff --git a/src/CONST/index.ts b/src/CONST/index.ts
index 8d6d2aff5ef3..94a33d39969b 100644
--- a/src/CONST/index.ts
+++ b/src/CONST/index.ts
@@ -3321,6 +3321,7 @@ const CONST = {
             IMPORT_SPREADSHEET: 'importSpreadsheet',
             DOWNLOAD_CSV: 'downloadCSV',
             SETTINGS: 'settings',
+            EXPORT: 'export',
         },
         MEMBERS_BULK_ACTION_TYPES: {
             REMOVE: 'remove',
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 6971f8ec98f6..7d44c11eb4a5 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -344,6 +344,9 @@ const ONYXKEYS = {
     /** Stores information about the user's saved statements */
     WALLET_STATEMENT: 'walletStatement',
 
+    /** Stores information about the user's travel invoice statements */
+    TRAVEL_INVOICE_STATEMENT: 'travelInvoiceStatement',
+
     /** Stores information about the user's purchases */
     PURCHASE_LIST: 'purchaseList',
 
@@ -1322,6 +1325,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.FUND_LIST]: OnyxTypes.FundList;
     [ONYXKEYS.CARD_LIST]: OnyxTypes.CardList;
     [ONYXKEYS.WALLET_STATEMENT]: OnyxTypes.WalletStatement;
+    [ONYXKEYS.TRAVEL_INVOICE_STATEMENT]: OnyxTypes.TravelInvoiceStatement;
     [ONYXKEYS.PURCHASE_LIST]: OnyxTypes.PurchaseList;
     [ONYXKEYS.PERSONAL_BANK_ACCOUNT]: OnyxTypes.PersonalBankAccount;
     [ONYXKEYS.SHARE_BANK_ACCOUNT]: OnyxTypes.ShareBankAccount;
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 1927333078e2..61326be09d8a 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -2637,6 +2637,15 @@ const ROUTES = {
         route: 'workspaces/:policyID/travel/settings/account',
         getRoute: (policyID: string) => `workspaces/${policyID}/travel/settings/account` as const,
     },
+    WORKSPACE_TRAVEL_EXPORT: {
+        route: 'workspaces/:policyID/travel/export',
+        getRoute: (policyID: string | undefined) => {
+            if (!policyID) {
+                Log.warn('Invalid policyID is used to build the WORKSPACE_TRAVEL_EXPORT route');
+            }
+            return `workspaces/${policyID}/travel/export` as const;
+        },
+    },
     WORKSPACE_TRAVEL_SETTINGS_FREQUENCY: {
         route: 'workspaces/:policyID/travel/settings/frequency',
         getRoute: (policyID: string) => `workspaces/${policyID}/travel/settings/frequency` as const,
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index b88fa5ad5490..06de07836b25 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -758,6 +758,7 @@ const SCREENS = {
         TRAVEL: 'Travel',
         TRAVEL_SETTINGS_ACCOUNT: 'Workspace_Travel_Settings_Account',
         TRAVEL_SETTINGS_FREQUENCY: 'Workspace_Travel_Settings_Frequency',
+        TRAVEL_EXPORT: 'Workspace_Travel_Invoicing_Export',
         TRAVEL_MISSING_PERSONAL_DETAILS: 'Travel_Missing_Personal_Details',
         CREATE_DISTANCE_RATE: 'Create_Distance_Rate',
         CREATE_DISTANCE_RATE_UPGRADE: 'Create_Distance_Rate_Upgrade',
diff --git a/src/components/Search/FilterComponents/DateFilterBase.tsx b/src/components/Search/FilterComponents/DateFilterBase.tsx
index e4ba0d19baec..4993720b22f0 100644
--- a/src/components/Search/FilterComponents/DateFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DateFilterBase.tsx
@@ -1,75 +1,110 @@
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useImperativeHandle, useRef, useState} from 'react';
 import Button from '@components/Button';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScrollView from '@components/ScrollView';
-import type {ReportFieldDateKey, SearchDateFilterKeys} from '@components/Search/types';
+import type {SearchDatePreset} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
-import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {getDatePresets} from '@libs/SearchUIUtils';
 import type {SearchDateModifier, SearchDateModifierLower} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
-import type {SearchDatePresetFilterBaseHandle} from './DatePresetFilterBase';
+import type {SearchDatePresetFilterBaseHandle, SearchDateValues} from './DatePresetFilterBase';
 import DatePresetFilterBase from './DatePresetFilterBase';
 
+type DateFilterBaseHandle = {
+    /** Gets the current date values from the filter */
+    getDateValues: () => SearchDateValues;
+    /** Handles back navigation — closes date modifier if open, otherwise calls onBackButtonPress */
+    goBack: () => void;
+};
+
 type DateFilterBaseProps = {
-    title: string;
-    dateKey: SearchDateFilterKeys;
-    back: () => void;
-    onSubmit: (values: Record<string, string | null>) => void;
+    /** The title displayed in the header. Required when shouldShowHeader is true. */
+    title?: string;
+    /** Default date values to initialize the filter with */
+    defaultDateValues: SearchDateValues;
+    /** The date presets to display (e.g. "This month", "Last month") */
+    presets: SearchDatePreset[];
+    /** Whether the search advanced filters form Onyx data is loading or not */
+    isSearchAdvancedFiltersFormLoading?: boolean;
+    /** Callback when the back button is pressed. Required when shouldShowHeader is true. */
+    onBackButtonPress?: () => void;
+    /** Callback when the filter is submitted with the selected date values */
+    onSubmit: (values: SearchDateValues) => void;
+    /** Callback when a date value changes (e.g. preset click or calendar save) */
+    onDateValuesChange?: (values: SearchDateValues) => void;
+    /** Callback when the date modifier screen is opened or closed (on/after/before) */
+    onDateModifierChange?: (isOpen: boolean) => void;
+    /** If true, the Reset/Save buttons are only shown when a date modifier (On/After/Before) is selected. Defaults to false (always show buttons). */
+    shouldShowButtonsOnlyWithDateModifier?: boolean;
+    /** Whether to render the built-in HeaderWithBackButton. Defaults to true. Set to false when the parent provides its own header. */
+    shouldShowHeader?: boolean;
+    /** The ref handle */
+    ref?: React.Ref<DateFilterBaseHandle>;
 };
 
-function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
+// Component uses ref as a prop, which is supported in modern React
+function DateFilterBase({
+    title,
+    defaultDateValues,
+    presets,
+    isSearchAdvancedFiltersFormLoading,
+    onBackButtonPress,
+    onSubmit,
+    onDateValuesChange,
+    onDateModifierChange,
+    shouldShowButtonsOnlyWithDateModifier = false,
+    shouldShowHeader = true,
+    ref,
+}: DateFilterBaseProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
-    const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
-    const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
     const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
 
-    const dateOnKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
-        ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.ON_PREFIX) as ReportFieldDateKey)
-        : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.ON}` as const);
-
-    const dateBeforeKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
-        ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX) as ReportFieldDateKey)
-        : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}` as const);
-
-    const dateAfterKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
-        ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX) as ReportFieldDateKey)
-        : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as const);
-
-    const dateOnValue = searchAdvancedFiltersForm?.[dateOnKey];
-    const dateBeforeValue = searchAdvancedFiltersForm?.[dateBeforeKey];
-    const dateAfterValue = searchAdvancedFiltersForm?.[dateAfterKey];
-
-    const defaultDateValues = useMemo(
-        () => ({
-            [CONST.SEARCH.DATE_MODIFIERS.ON]: dateOnValue,
-            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: dateBeforeValue,
-            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: dateAfterValue,
-        }),
-        [dateAfterValue, dateBeforeValue, dateOnValue],
-    );
+    const handleSelectDateModifier = (dateModifier: SearchDateModifier | null) => {
+        setSelectedDateModifier(dateModifier);
+        onDateModifierChange?.(!!dateModifier);
+        if (onDateValuesChange) {
+            const values = searchDatePresetFilterBaseRef.current?.getDateValues() ?? {
+                [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+                [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+                [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+            };
+            onDateValuesChange(values);
+        }
+    };
+
+    const goBack = () => {
+        if (selectedDateModifier) {
+            setSelectedDateModifier(null);
+            onDateModifierChange?.(false);
+            return;
+        }
 
-    const presets = useMemo(() => {
-        const hasFeed = !!searchAdvancedFiltersForm?.feed?.length;
-        return getDatePresets(dateKey, hasFeed);
-    }, [dateKey, searchAdvancedFiltersForm?.feed]);
+        onBackButtonPress?.();
+    };
 
-    const computedTitle = useMemo(() => {
+    useImperativeHandle(ref, () => ({
+        getDateValues: () =>
+            searchDatePresetFilterBaseRef.current?.getDateValues() ?? {
+                [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+                [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+                [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+            },
+        goBack,
+    }));
+
+    function getComputedTitle() {
         if (selectedDateModifier) {
             return translate(`common.${selectedDateModifier.toLowerCase() as SearchDateModifierLower}`);
         }
 
         return title;
-    }, [selectedDateModifier, title, translate]);
+    }
 
-    const reset = useCallback(() => {
+    const reset = () => {
         if (!searchDatePresetFilterBaseRef.current) {
             return;
         }
@@ -77,13 +112,14 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         if (selectedDateModifier) {
             searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
             setSelectedDateModifier(null);
+            onDateModifierChange?.(false);
             return;
         }
 
         searchDatePresetFilterBaseRef.current.clearDateValues();
-    }, [selectedDateModifier]);
+    };
 
-    const save = useCallback(() => {
+    const save = () => {
         if (!searchDatePresetFilterBaseRef.current) {
             return;
         }
@@ -91,57 +127,56 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         if (selectedDateModifier) {
             searchDatePresetFilterBaseRef.current.setDateValueOfSelectedDateModifier();
             setSelectedDateModifier(null);
+            onDateModifierChange?.(false);
             return;
         }
 
         const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
-
-        onSubmit({
-            [dateOnKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.ON] ?? null,
-            [dateBeforeKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ?? null,
-            [dateAfterKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? null,
-        });
-    }, [selectedDateModifier, dateOnKey, dateBeforeKey, dateAfterKey, onSubmit]);
-
-    const goBack = () => {
-        if (selectedDateModifier) {
-            setSelectedDateModifier(null);
-            return;
-        }
-
-        back();
+        onSubmit(dateValues);
     };
 
-    return (
+    const computedTitle = getComputedTitle();
+
+    const content = (
         <>
-            <HeaderWithBackButton
-                title={computedTitle}
-                onBackButtonPress={goBack}
-            />
+            {shouldShowHeader && (
+                <HeaderWithBackButton
+                    title={computedTitle}
+                    onBackButtonPress={goBack}
+                />
+            )}
             <ScrollView contentContainerStyle={[styles.flexGrow1]}>
                 <DatePresetFilterBase
                     ref={searchDatePresetFilterBaseRef}
                     defaultDateValues={defaultDateValues}
                     selectedDateModifier={selectedDateModifier}
-                    onSelectDateModifier={setSelectedDateModifier}
+                    onSelectDateModifier={handleSelectDateModifier}
                     presets={presets}
                     isSearchAdvancedFiltersFormLoading={isSearchAdvancedFiltersFormLoading}
+                    onDateValueChange={onDateValuesChange}
                 />
             </ScrollView>
-            <Button
-                text={translate('common.reset')}
-                onPress={reset}
-                style={[styles.mh4, styles.mt4]}
-                large
-            />
-            <FormAlertWithSubmitButton
-                buttonText={translate('common.save')}
-                containerStyles={[styles.m4, styles.mt3, styles.mb5]}
-                onSubmit={save}
-                enabledWhenOffline
-            />
+            {(!shouldShowButtonsOnlyWithDateModifier || !!selectedDateModifier) && (
+                <>
+                    <Button
+                        text={translate('common.reset')}
+                        onPress={reset}
+                        style={[styles.mh4, styles.mt4]}
+                        large
+                    />
+                    <FormAlertWithSubmitButton
+                        buttonText={translate('common.save')}
+                        containerStyles={[styles.m4, styles.mt3, styles.mb5]}
+                        onSubmit={save}
+                        enabledWhenOffline
+                    />
+                </>
+            )}
         </>
     );
+
+    return content;
 }
 
+export type {DateFilterBaseHandle};
 export default DateFilterBase;
diff --git a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
index bb0465ea2019..08922e8a98f3 100644
--- a/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
+++ b/src/components/Search/FilterComponents/DatePresetFilterBase.tsx
@@ -45,6 +45,9 @@ type DatePresetFilterBaseProps = {
     /** Whether the search advanced filters form Onyx data is loading or not */
     isSearchAdvancedFiltersFormLoading?: boolean;
 
+    /** Callback when a date value changes (e.g. preset click or calendar save) */
+    onDateValueChange?: (values: SearchDateValues) => void;
+
     /** The ref handle */
     ref: Ref<DatePresetFilterBaseHandle>;
 };
@@ -59,7 +62,15 @@ type DatePresetFilterBaseProps = {
  * - On save: if a date modifier is selected (i.e. user clicked save at the calendar picker) you should `setDateValueOfSelectedDateModifier` otherwise `getDateValues`
  * - On reset: if a date modifier is selected (i.e. user clicked reset at the calendar picker) you should `clearDateValueOfSelectedDateModifier` otherwise `clearDateValues`
  */
-function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelectDateModifier, presets, isSearchAdvancedFiltersFormLoading, ref}: DatePresetFilterBaseProps) {
+function DatePresetFilterBase({
+    defaultDateValues,
+    selectedDateModifier,
+    onSelectDateModifier,
+    presets,
+    isSearchAdvancedFiltersFormLoading,
+    onDateValueChange,
+    ref,
+}: DatePresetFilterBaseProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -77,27 +88,35 @@ function DatePresetFilterBase({defaultDateValues, selectedDateModifier, onSelect
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isSearchAdvancedFiltersFormLoading]);
 
-    const setDateValue = useCallback((dateModifier: SearchDateModifier, value: string | undefined) => {
-        setDateValues((prevDateValues) => {
-            if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(value)) {
-                return {
-                    [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
-                    [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
-                    [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
-                };
-            }
-
-            if (dateModifier !== CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(prevDateValues[CONST.SEARCH.DATE_MODIFIERS.ON])) {
-                return {
-                    ...prevDateValues,
-                    [dateModifier]: value,
-                    [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
-                };
-            }
-
-            return {...prevDateValues, [dateModifier]: value};
-        });
-    }, []);
+    const setDateValue = useCallback(
+        (dateModifier: SearchDateModifier, value: string | undefined) => {
+            setDateValues((prevDateValues) => {
+                let newValues: SearchDateValues;
+
+                if (dateModifier === CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(value)) {
+                    newValues = {
+                        [CONST.SEARCH.DATE_MODIFIERS.ON]: value,
+                        [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+                        [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+                    };
+                } else if (dateModifier !== CONST.SEARCH.DATE_MODIFIERS.ON && isSearchDatePreset(prevDateValues[CONST.SEARCH.DATE_MODIFIERS.ON])) {
+                    newValues = {
+                        ...prevDateValues,
+                        [dateModifier]: value,
+                        [CONST.SEARCH.DATE_MODIFIERS.ON]: undefined,
+                    };
+                } else {
+                    newValues = {...prevDateValues, [dateModifier]: value};
+                }
+
+                // Call the callback immediately with the new values so parents don't need to depend on async state updates or refs
+                onDateValueChange?.(newValues);
+
+                return newValues;
+            });
+        },
+        [onDateValueChange],
+    );
 
     const dateDisplayValues = useMemo<SearchDateValues>(() => {
         const dateOn = dateValues[CONST.SEARCH.DATE_MODIFIERS.ON];
diff --git a/src/components/Search/SearchDatePresetFilterBasePage.tsx b/src/components/Search/SearchDatePresetFilterBasePage.tsx
index 7e735321b500..cd6fe83002e3 100644
--- a/src/components/Search/SearchDatePresetFilterBasePage.tsx
+++ b/src/components/Search/SearchDatePresetFilterBasePage.tsx
@@ -1,13 +1,18 @@
 import React from 'react';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {updateAdvancedFilters} from '@libs/actions/Search';
 import Navigation from '@libs/Navigation/Navigation';
+import {getDatePresets} from '@libs/SearchUIUtils';
+import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import DateFilterBase from './FilterComponents/DateFilterBase';
-import type {SearchDateFilterKeys} from './types';
+import type {ReportFieldDateKey, SearchDateFilterKeys} from './types';
 
 type SearchDatePresetFilterBasePageProps = {
     /** Key used for the date filter */
@@ -21,10 +26,45 @@ function SearchDatePresetFilterBasePage({dateKey, titleKey}: SearchDatePresetFil
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
+
+    const dateOnKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
+        ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.ON_PREFIX) as ReportFieldDateKey)
+        : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.ON}` as const);
+
+    const dateBeforeKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
+        ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX) as ReportFieldDateKey)
+        : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}` as const);
+
+    const dateAfterKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
+        ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX) as ReportFieldDateKey)
+        : (`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}` as const);
+
+    const dateOnValue = searchAdvancedFiltersForm?.[dateOnKey];
+    const dateBeforeValue = searchAdvancedFiltersForm?.[dateBeforeKey];
+    const dateAfterValue = searchAdvancedFiltersForm?.[dateAfterKey];
+
+    function getDefaultDateValues() {
+        return {
+            [CONST.SEARCH.DATE_MODIFIERS.ON]: dateOnValue,
+            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: dateBeforeValue,
+            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: dateAfterValue,
+        };
+    }
+
+    function getPresets() {
+        const hasFeed = !!searchAdvancedFiltersForm?.feed?.length;
+        return getDatePresets(dateKey, hasFeed);
+    }
+
     const goBack = () => {
         Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
     };
 
+    const defaultDateValues = getDefaultDateValues();
+    const presets = getPresets();
+
     return (
         <ScreenWrapper
             testID="SearchDatePresetFilterBasePage"
@@ -35,10 +75,16 @@ function SearchDatePresetFilterBasePage({dateKey, titleKey}: SearchDatePresetFil
         >
             <DateFilterBase
                 title={translate(titleKey)}
-                dateKey={dateKey}
-                back={goBack}
+                defaultDateValues={defaultDateValues}
+                presets={presets}
+                isSearchAdvancedFiltersFormLoading={isSearchAdvancedFiltersFormLoading}
+                onBackButtonPress={goBack}
                 onSubmit={(values) => {
-                    updateAdvancedFilters(values);
+                    updateAdvancedFilters({
+                        [dateOnKey]: values[CONST.SEARCH.DATE_MODIFIERS.ON] ?? null,
+                        [dateBeforeKey]: values[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ?? null,
+                        [dateAfterKey]: values[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? null,
+                    });
                     Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
                 }}
             />
diff --git a/src/languages/de.ts b/src/languages/de.ts
index 8a6be1581b8f..e2d52fba6ffb 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -5294,6 +5294,10 @@ _Für ausführlichere Anweisungen [besuchen Sie unsere Hilfeseite](${CONST.NETSU
                         body: 'Sie haben noch einen offenen Reisensaldo. Bitte begleichen Sie zuerst Ihren Saldo.',
                         confirm: 'Verstanden',
                     },
+                    exportToPDF: 'Als PDF exportieren',
+                    exportToCSV: 'Als CSV exportieren',
+                    selectDateRangeError: 'Bitte wählen Sie einen Datumsbereich für den Export aus',
+                    invalidDateRangeError: 'Das Startdatum muss vor dem Enddatum liegen',
                     enabled: 'Zentrale Rechnungsstellung aktiviert!',
                     enabledDescription: 'Alle Reisekosten in diesem Workspace werden nun in einer monatlichen Rechnung zentralisiert.',
                 },
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 3f10e590d6ed..77d5cb5740f4 100644
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -5269,6 +5269,10 @@ const translations = {
                         body: 'You still have an outstanding travel balance. Please pay your balance first.',
                         confirm: 'Got it',
                     },
+                    exportToPDF: 'Export to PDF',
+                    exportToCSV: 'Export to CSV',
+                    selectDateRangeError: 'Please select a date range to export',
+                    invalidDateRangeError: 'The start date must be before the end date',
                     enabled: 'Central Invoicing enabled!',
                     enabledDescription: 'All travel spend on this workspace will now be centralized in a monthly invoice.',
                 },
diff --git a/src/languages/es.ts b/src/languages/es.ts
index b415f6a0dd7f..a446bb636c47 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -5122,6 +5122,10 @@ ${amount} para ${merchant} - ${date}`,
                         body: 'Aún tienes un saldo pendiente de viajes. Por favor, paga tu saldo primero.',
                         confirm: 'Entendido',
                     },
+                    exportToPDF: 'Exportar a PDF',
+                    exportToCSV: 'Exportar a CSV',
+                    selectDateRangeError: 'Por favor, selecciona un rango de fechas para exportar',
+                    invalidDateRangeError: 'La fecha de inicio debe ser anterior a la fecha de fin',
                     enabled: '¡Facturación centralizada habilitada!',
                     enabledDescription: 'Todos los gastos de viaje en este espacio de trabajo ahora se centralizarán en una factura mensual.',
                 },
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 0b82ad790797..a9b89aa21a96 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -5312,6 +5312,10 @@ _Pour des instructions plus détaillées, [visitez notre site d’aide](${CONST.
                         body: 'Vous avez encore un solde de voyage impayé. Veuillez d’abord régler ce solde.',
                         confirm: 'Compris',
                     },
+                    exportToPDF: 'Exporter en PDF',
+                    exportToCSV: 'Exporter en CSV',
+                    selectDateRangeError: 'Veuillez sélectionner une plage de dates à exporter',
+                    invalidDateRangeError: 'La date de début doit être antérieure à la date de fin',
                     enabled: 'Facturation centralisée activée !',
                     enabledDescription: 'Toutes les dépenses de voyage sur cet espace de travail seront désormais centralisées dans une facture mensuelle.',
                 },
diff --git a/src/languages/it.ts b/src/languages/it.ts
index d273792b023f..18c2e06abb73 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -5283,6 +5283,10 @@ _Per istruzioni più dettagliate, [visita il nostro sito di assistenza](${CONST.
                         body: 'Hai ancora un saldo di viaggio in sospeso. Paga prima il tuo saldo.',
                         confirm: 'Capito',
                     },
+                    exportToPDF: 'Esporta in PDF',
+                    exportToCSV: 'Esporta in CSV',
+                    selectDateRangeError: 'Seleziona un intervallo di date da esportare',
+                    invalidDateRangeError: 'La data di inizio deve essere precedente alla data di fine',
                     enabled: 'Fatturazione centralizzata abilitata!',
                     enabledDescription: 'Tutte le spese di viaggio in questo spazio di lavoro saranno ora centralizzate in una fattura mensile.',
                 },
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 0a811ba9bb8c..a7c33707a87c 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -5226,6 +5226,10 @@ _詳しい手順については、[ヘルプサイトをご覧ください](${CO
                         confirm: 'オフにする',
                     },
                     outstandingBalanceModal: {title: 'トラベル請求書作成をオフにできません', body: '未清算の出張残高があります。先に残高を精算してください。', confirm: '了解しました'},
+                    exportToPDF: 'PDF にエクスポート',
+                    exportToCSV: 'CSV にエクスポート',
+                    selectDateRangeError: 'エクスポートする日付範囲を選択してください',
+                    invalidDateRangeError: '開始日は終了日より前でなければなりません',
                     enabled: '集中請求が有効になりました！',
                     enabledDescription: 'このワークスペースのすべての出張費は、今後、月次請求書で一元管理されます。',
                 },
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 6ffe1f3c1a21..ff118907d49c 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -5265,6 +5265,10 @@ _Voor meer gedetailleerde instructies, [bezoek onze help-site](${CONST.NETSUITE_
                         confirm: 'Uitschakelen',
                     },
                     outstandingBalanceModal: {title: 'Kan Reiskostenfacturatie niet uitschakelen', body: 'Je hebt nog een openstaand reissaldo. Betaal eerst je saldo.', confirm: 'Begrepen'},
+                    exportToPDF: 'Exporteren naar PDF',
+                    exportToCSV: 'Exporteren naar CSV',
+                    selectDateRangeError: 'Selecteer een datumbereik om te exporteren',
+                    invalidDateRangeError: 'De begindatum moet vóór de einddatum liggen',
                     enabled: 'Centraal factureren ingeschakeld!',
                     enabledDescription: 'Alle reiskosten in deze workspace worden nu gebundeld op één maandelijkse factuur.',
                 },
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index 5fac6256ad35..96105c6c3016 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -5260,6 +5260,10 @@ _Aby uzyskać bardziej szczegółowe instrukcje, [odwiedź naszą stronę pomocy
                         body: 'Masz nadal zaległe saldo za podróż. Najpierw ureguluj swoje saldo.',
                         confirm: 'Rozumiem',
                     },
+                    exportToPDF: 'Eksportuj do PDF',
+                    exportToCSV: 'Eksportuj do CSV',
+                    selectDateRangeError: 'Wybierz zakres dat do eksportu',
+                    invalidDateRangeError: 'Data początkowa musi być wcześniejsza niż data końcowa',
                     enabled: 'Centralne fakturowanie włączone!',
                     enabledDescription: 'Wszystkie wydatki podróżne w tym obszarze roboczym będą teraz rozliczane na scentralizowanej, miesięcznej fakturze.',
                 },
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index a441fe5c534c..4b8c7115086f 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -5265,6 +5265,10 @@ _Para instruções mais detalhadas, [visite nossa central de ajuda](${CONST.NETS
                         body: 'Você ainda tem um saldo de viagem pendente. Pague esse saldo primeiro.',
                         confirm: 'Entendi',
                     },
+                    exportToPDF: 'Exportar para PDF',
+                    exportToCSV: 'Exportar para CSV',
+                    selectDateRangeError: 'Selecione um intervalo de datas para exportar',
+                    invalidDateRangeError: 'A data de início deve ser anterior à data de término',
                     enabled: 'Faturamento centralizado ativado!',
                     enabledDescription: 'Todos os gastos de viagem neste workspace agora serão centralizados em uma fatura mensal.',
                 },
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index 3f3090d975a4..df4d877a64c3 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -5145,6 +5145,10 @@ _如需更详细的说明，请[访问我们的帮助网站](${CONST.NETSUITE_IM
                     },
                     disableModal: {title: '关闭差旅开票？', body: '即将到来的酒店和汽车租赁预订可能需要使用不同的付款方式重新预订，以避免被取消。', confirm: '关闭'},
                     outstandingBalanceModal: {title: '无法关闭差旅开票', body: '你仍有未结清的差旅余额。请先支付该余额。', confirm: '明白了'},
+                    exportToPDF: '导出为 PDF',
+                    exportToCSV: '导出为 CSV',
+                    selectDateRangeError: '请选择要导出的日期范围',
+                    invalidDateRangeError: '开始日期必须早于结束日期',
                     enabled: '中央开票已启用！',
                     enabledDescription: '此工作区的所有差旅支出现在将集中在一张月度发票中。',
                 },
diff --git a/src/libs/API/parameters/ExportTravelInvoiceStatementCSVParams.ts b/src/libs/API/parameters/ExportTravelInvoiceStatementCSVParams.ts
new file mode 100644
index 000000000000..c8bdb3e728df
--- /dev/null
+++ b/src/libs/API/parameters/ExportTravelInvoiceStatementCSVParams.ts
@@ -0,0 +1,7 @@
+type ExportTravelInvoiceStatementCSVParams = {
+    policyID: string;
+    startDate: string;
+    endDate: string;
+};
+
+export default ExportTravelInvoiceStatementCSVParams;
diff --git a/src/libs/API/parameters/GetTravelInvoiceStatementPDFParams.ts b/src/libs/API/parameters/GetTravelInvoiceStatementPDFParams.ts
new file mode 100644
index 000000000000..f0a6bc0bd4a1
--- /dev/null
+++ b/src/libs/API/parameters/GetTravelInvoiceStatementPDFParams.ts
@@ -0,0 +1,7 @@
+type GetTravelInvoiceStatementPDFParams = {
+    policyID: string;
+    startDate: string;
+    endDate: string;
+};
+
+export default GetTravelInvoiceStatementPDFParams;
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
index 55c35c22f8c2..318b56572535 100644
--- a/src/libs/API/parameters/index.ts
+++ b/src/libs/API/parameters/index.ts
@@ -387,6 +387,9 @@ export type {default as UpdateCardSettlementAccountParams} from './UpdateCardSet
 export type {default as ConfigureTravelInvoicingForPolicyParams} from './ConfigureTravelInvoicingForPolicyParams';
 export type {default as DeactivateTravelInvoicingParams} from './DeactivateTravelInvoicingParams';
 export type {default as SetTravelInvoicingSettlementAccountParams} from './SetTravelInvoicingSettlementAccountParams';
+export type {default as UpdateTravelInvoicingSettlementFrequencyParams} from './UpdateTravelInvoicingSettlementFrequencyParams';
+export type {default as GetTravelInvoiceStatementPDFParams} from './GetTravelInvoiceStatementPDFParams';
+export type {default as ExportTravelInvoiceStatementCSVParams} from './ExportTravelInvoiceStatementCSVParams';
 export type {default as SetCompanyCardFeedName} from './SetCompanyCardFeedName';
 export type {default as DeleteCompanyCardFeed} from './DeleteCompanyCardFeed';
 export type {default as SetCompanyCardTransactionLiability} from './SetCompanyCardTransactionLiability';
@@ -479,7 +482,6 @@ export type {default as RemoveDomainAdminParams} from './RemoveDomainAdminParams
 export type {default as DeleteDomainMemberParams} from './DeleteDomainMemberParams';
 export type {default as DeleteDomainParams} from './DeleteDomainParams';
 export type {default as GetDuplicateTransactionDetailsParams} from './GetDuplicateTransactionDetailsParams';
-export type {default as UpdateTravelInvoicingSettlementFrequencyParams} from './UpdateTravelInvoicingSettlementFrequencyParams';
 export type {default as SetPolicyCodingRuleParams} from './SetPolicyCodingRuleParams';
 export type {default as RegisterAuthenticationKeyParams} from './RegisterAuthenticationKeyParams';
 export type {default as TroubleshootMultifactorAuthenticationParams} from './TroubleshootMultifactorAuthenticationParams';
diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index d446fb90d34f..ae48f0678a78 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -1078,6 +1078,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.DEACTIVATE_TRAVEL_INVOICING]: Parameters.DeactivateTravelInvoicingParams;
     [WRITE_COMMANDS.SET_TRAVEL_INVOICING_SETTLEMENT_ACCOUNT]: Parameters.SetTravelInvoicingSettlementAccountParams;
     [WRITE_COMMANDS.UPDATE_TRAVEL_INVOICE_SETTLEMENT_FREQUENCY]: Parameters.UpdateTravelInvoicingSettlementFrequencyParams;
+
     [WRITE_COMMANDS.SET_PERSONAL_DETAILS_AND_SHIP_EXPENSIFY_CARDS]: Parameters.SetPersonalDetailsAndShipExpensifyCardsParams;
     [WRITE_COMMANDS.SELF_TOUR_VIEWED]: null;
 
@@ -1199,6 +1200,8 @@ const READ_COMMANDS = {
     OPEN_POLICY_RULES_PAGE: 'OpenPolicyRulesPage',
     OPEN_POLICY_EXPENSIFY_CARDS_PAGE: 'OpenPolicyExpensifyCardsPage',
     OPEN_POLICY_TRAVEL_PAGE: 'OpenPolicyTravelPage',
+    GET_TRAVEL_INVOICE_STATEMENT_PDF: 'GetTravelInvoiceStatementPDF',
+    EXPORT_TRAVEL_INVOICE_STATEMENT_CSV: 'ExportTravelInvoiceStatementCSV',
     OPEN_POLICY_COMPANY_CARDS_FEED: 'OpenPolicyCompanyCardsFeed',
     OPEN_ASSIGN_FEED_CARD_PAGE: 'OpenAssignFeedCardPage',
     OPEN_POLICY_COMPANY_CARDS_PAGE: 'OpenPolicyCompanyCardsPage',
@@ -1295,6 +1298,8 @@ type ReadCommandParameters = {
     [READ_COMMANDS.OPEN_POLICY_ACCOUNTING_PAGE]: Parameters.OpenPolicyAccountingPageParams;
     [READ_COMMANDS.OPEN_POLICY_EXPENSIFY_CARDS_PAGE]: Parameters.OpenPolicyExpensifyCardsPageParams;
     [READ_COMMANDS.OPEN_POLICY_TRAVEL_PAGE]: Parameters.OpenPolicyTravelPageParams;
+    [READ_COMMANDS.GET_TRAVEL_INVOICE_STATEMENT_PDF]: Parameters.GetTravelInvoiceStatementPDFParams;
+    [READ_COMMANDS.EXPORT_TRAVEL_INVOICE_STATEMENT_CSV]: Parameters.ExportTravelInvoiceStatementCSVParams;
     [READ_COMMANDS.OPEN_POLICY_COMPANY_CARDS_PAGE]: Parameters.OpenPolicyExpensifyCardsPageParams;
     [READ_COMMANDS.OPEN_POLICY_COMPANY_CARDS_FEED]: Parameters.OpenPolicyCompanyCardsFeedParams;
     [READ_COMMANDS.OPEN_ASSIGN_FEED_CARD_PAGE]: Parameters.OpenPolicyCompanyCardsFeedParams;
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
index 422034738020..750e2c569942 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -808,6 +808,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_SETTINGS_FREQUENCY]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceSettlementFrequencyPage').default,
     [SCREENS.WORKSPACE.TRAVEL_SETTINGS_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/workspace/travel/WorkspaceTravelInvoicingSettlementAccountPage').default,
     [SCREENS.WORKSPACE.TRAVEL_SETTINGS_FREQUENCY]: () => require<ReactComponentModule>('../../../../pages/workspace/travel/WorkspaceTravelInvoicingSettlementFrequencyPage').default,
+    [SCREENS.WORKSPACE.TRAVEL_EXPORT]: () => require<ReactComponentModule>('../../../../pages/workspace/travel/WorkspaceTravelInvoicingExportPage').default,
     [SCREENS.WORKSPACE.TRAVEL_MISSING_PERSONAL_DETAILS]: () => require<ReactComponentModule>('../../../../pages/Travel/TravelLegalNamePage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_SELECT_FEED]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardSelectorPage').default,
     [SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/workspace/expensifyCard/WorkspaceExpensifyCardBankAccounts').default,
diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts b/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts
index d38863497639..0e292fed8bfe 100755
--- a/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts
+++ b/src/libs/Navigation/linkingConfig/RELATIONS/WORKSPACE_TO_RHP.ts
@@ -229,7 +229,12 @@ const WORKSPACE_TO_RHP: Partial<Record<keyof WorkspaceSplitNavigatorParamList, s
         SCREENS.WORKSPACE.DISTANCE_RATE_DETAILS,
         SCREENS.WORKSPACE.CREATE_DISTANCE_RATE,
     ],
-    [SCREENS.WORKSPACE.TRAVEL]: [SCREENS.WORKSPACE.TRAVEL_SETTINGS_ACCOUNT, SCREENS.WORKSPACE.TRAVEL_SETTINGS_FREQUENCY, SCREENS.WORKSPACE.TRAVEL_MISSING_PERSONAL_DETAILS],
+    [SCREENS.WORKSPACE.TRAVEL]: [
+        SCREENS.WORKSPACE.TRAVEL_SETTINGS_ACCOUNT,
+        SCREENS.WORKSPACE.TRAVEL_SETTINGS_FREQUENCY,
+        SCREENS.WORKSPACE.TRAVEL_EXPORT,
+        SCREENS.WORKSPACE.TRAVEL_MISSING_PERSONAL_DETAILS,
+    ],
     [SCREENS.WORKSPACE.REPORTS]: [
         SCREENS.WORKSPACE.REPORTS_DEFAULT_TITLE,
         SCREENS.WORKSPACE.REPORT_FIELDS_CREATE,
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index 92d4f85a6e43..280962db9ce2 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -857,6 +857,9 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.WORKSPACE.TRAVEL_SETTINGS_FREQUENCY]: {
                             path: ROUTES.WORKSPACE_TRAVEL_SETTINGS_FREQUENCY.route,
                         },
+                        [SCREENS.WORKSPACE.TRAVEL_EXPORT]: {
+                            path: ROUTES.WORKSPACE_TRAVEL_EXPORT.route,
+                        },
                         [SCREENS.WORKSPACE.TRAVEL_MISSING_PERSONAL_DETAILS]: {
                             path: ROUTES.WORKSPACE_TRAVEL_MISSING_PERSONAL_DETAILS.route,
                         },
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 10bba5849f93..aaa68820de98 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -1290,6 +1290,9 @@ type SettingsNavigatorParamList = {
     [SCREENS.WORKSPACE.TRAVEL_SETTINGS_FREQUENCY]: {
         policyID: string;
     };
+    [SCREENS.WORKSPACE.TRAVEL_EXPORT]: {
+        policyID: string;
+    };
     [SCREENS.WORKSPACE.TRAVEL_MISSING_PERSONAL_DETAILS]: {
         policyID: string;
     };
diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts
index a9d308c87615..8b02c72e4d9a 100644
--- a/src/libs/SearchUIUtils.ts
+++ b/src/libs/SearchUIUtils.ts
@@ -4674,6 +4674,7 @@ export {
     isTransactionAmountTooLong,
     isTransactionTaxAmountTooLong,
     getDatePresets,
+    getDateRangeForPreset,
     createAndOpenSearchTransactionThread,
     getWithdrawalTypeOptions,
     getActionOptions,
diff --git a/src/libs/TravelInvoicingUtils.ts b/src/libs/TravelInvoicingUtils.ts
index 1a3b5129d6df..33ba5b192a69 100644
--- a/src/libs/TravelInvoicingUtils.ts
+++ b/src/libs/TravelInvoicingUtils.ts
@@ -1,10 +1,13 @@
 import type {OnyxEntry} from 'react-native-onyx';
+import type {LocalizedTranslate} from '@components/LocaleContextProvider';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {BankAccountList, Card, WorkspaceCardsList} from '@src/types/onyx';
 import type {ExpensifyCardSettingsBase} from '@src/types/onyx/ExpensifyCardSettings';
+import addEncryptedAuthTokenToURL from './addEncryptedAuthTokenToURL';
 import {getLastFourDigits} from './BankAccountUtils';
 import {isDevelopment, isInternalTestBuild, isStaging} from './Environment/Environment';
+import fileDownload from './fileDownload';
 
 /**
  * Feature flag to enable Travel CVV testing on Dev and Staging environments.
@@ -140,6 +143,24 @@ function getTravelInvoicingCardSettingsKey(workspaceAccountID: number): `${typeo
     return `${ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_SETTINGS}${workspaceAccountID}`;
 }
 
+/**
+ * Downloads a cached Travel Invoice Statement PDF.
+ * Constructs a secure URL with encrypted auth token and triggers the download.
+ */
+function downloadTravelInvoiceStatementPDF(
+    translate: LocalizedTranslate,
+    baseURL: string,
+    fileName: string,
+    startDate: string,
+    endDate: string,
+    currentUserEmail: string,
+    encryptedAuthToken: string,
+): Promise<void> {
+    const downloadFileName = `Travel_Statement_${startDate}_${endDate}.pdf`;
+    const pdfURL = `${baseURL}secure?secureType=pdfreport&filename=${fileName}&downloadName=${downloadFileName}&email=${encodeURIComponent(currentUserEmail)}`;
+    return fileDownload(translate, addEncryptedAuthTokenToURL(pdfURL, encryptedAuthToken, true), downloadFileName, '');
+}
+
 /**
  * Gets the user's Travel Invoicing card from the card list.
  * Returns the first card with feedCountry set to PROGRAM_TRAVEL_US.
@@ -182,6 +203,7 @@ export {
     getTravelSettlementAccount,
     getTravelSettlementFrequency,
     getTravelInvoicingCardSettingsKey,
+    downloadTravelInvoiceStatementPDF,
     getTravelInvoicingCard,
     isTravelCVVEligible,
     isTravelCVVTestingEnabled,
diff --git a/src/libs/actions/TravelInvoicing.ts b/src/libs/actions/TravelInvoicing.ts
index da5d029dac58..ba58cb833cf7 100644
--- a/src/libs/actions/TravelInvoicing.ts
+++ b/src/libs/actions/TravelInvoicing.ts
@@ -1,6 +1,7 @@
 import Onyx from 'react-native-onyx';
 import type {OnyxUpdate} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import type {LocalizedTranslate} from '@components/LocaleContextProvider';
 import * as API from '@libs/API';
 import type {
     ConfigureTravelInvoicingForPolicyParams,
@@ -10,7 +11,11 @@ import type {
     UpdateTravelInvoicingSettlementFrequencyParams,
 } from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
+import * as ApiUtils from '@libs/ApiUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
+import fileDownload from '@libs/fileDownload';
+import localFileDownload from '@libs/localFileDownload';
+import enhanceParameters from '@libs/Network/enhanceParameters';
 import {getTravelInvoicingCardSettingsKey} from '@libs/TravelInvoicingUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -376,12 +381,78 @@ function clearTravelInvoicingErrors(workspaceAccountID: number) {
     });
 }
 
+/**
+ * Generates the Travel Invoice Statement PDF for a policy and date range.
+ * Uses Onyx to track generation state and cache the filename.
+ */
+function getTravelInvoiceStatementPDF(policyID: string, startDate: string, endDate: string) {
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.TRAVEL_INVOICE_STATEMENT>> = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.TRAVEL_INVOICE_STATEMENT,
+            value: {
+                isGenerating: true,
+            },
+        },
+    ];
+    // Note: Backend returns onyxData with isGenerating: false AND the PDF filename,
+    // so we don't need successData here - the backend response handles it.
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.TRAVEL_INVOICE_STATEMENT>> = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.TRAVEL_INVOICE_STATEMENT,
+            value: {
+                isGenerating: false,
+            },
+        },
+    ];
+
+    API.read(
+        READ_COMMANDS.GET_TRAVEL_INVOICE_STATEMENT_PDF,
+        {policyID, startDate, endDate},
+        {
+            optimisticData,
+            failureData,
+        },
+    );
+}
+
+/**
+ * Exports the Travel Invoice Statement as CSV for a policy and date range.
+ * The backend returns a direct CSV file stream.
+ */
+function exportTravelInvoiceStatementCSV(policyID: string, startDate: string, endDate: string, translate: LocalizedTranslate) {
+    const finalParameters = enhanceParameters(READ_COMMANDS.EXPORT_TRAVEL_INVOICE_STATEMENT_CSV, {
+        policyID,
+        startDate,
+        endDate,
+    });
+
+    const formData = new FormData();
+    for (const [key, value] of Object.entries(finalParameters)) {
+        formData.append(key, String(value));
+    }
+
+    const commandURL = ApiUtils.getCommandURL({command: READ_COMMANDS.EXPORT_TRAVEL_INVOICE_STATEMENT_CSV});
+    const filename = `Travel_Statement_${startDate}_${endDate}.csv`;
+
+    const onDownloadFailed = () => {
+        // When no data exists for the selected date range, the backend returns a JSON error.
+        // Download an empty CSV file in this case.
+        localFileDownload(filename, translate('common.noResultsFound'), translate, undefined, true);
+    };
+
+    fileDownload(translate, commandURL, filename, '', false, formData, CONST.NETWORK.METHOD.POST, onDownloadFailed);
+}
+
 export {
     openPolicyTravelPage,
     setTravelInvoicingSettlementAccount,
     clearTravelInvoicingSettlementAccountErrors,
     clearTravelInvoicingSettlementFrequencyErrors,
     updateTravelInvoiceSettlementFrequency,
+    getTravelInvoiceStatementPDF,
+    exportTravelInvoiceStatementCSV,
     configureTravelInvoicingForPolicy,
     deactivateTravelInvoicing,
     clearTravelInvoicingErrors,
diff --git a/src/libs/fileDownload/FileUtils.ts b/src/libs/fileDownload/FileUtils.ts
index 8b48f565e7f8..d8ba834cf292 100644
--- a/src/libs/fileDownload/FileUtils.ts
+++ b/src/libs/fileDownload/FileUtils.ts
@@ -153,6 +153,23 @@ const splitExtensionFromFileName: SplitExtensionFromFileName = (fullFileName) =>
     return {fileName: splitFileName.join('.'), fileExtension: fileExtension ?? ''};
 };
 
+/**
+ * Returns the MIME type for a given file extension.
+ * Falls back to 'application/octet-stream' for unrecognized extensions.
+ */
+function getMimeType(fileExtension: string): string {
+    const ext = fileExtension.toLowerCase();
+    const MIME_TYPES: Record<string, string> = {
+        txt: CONST.SHARE_FILE_MIMETYPE.TEXT,
+        csv: CONST.SHARE_FILE_MIMETYPE.CSV,
+        pdf: CONST.SHARE_FILE_MIMETYPE.PDF,
+        html: CONST.SHARE_FILE_MIMETYPE.HTML,
+        xml: CONST.SHARE_FILE_MIMETYPE.XML,
+        zip: CONST.SHARE_FILE_MIMETYPE.ZIP,
+    };
+    return MIME_TYPES[ext] ?? 'application/octet-stream';
+}
+
 /**
  * Returns the filename replacing special characters with underscore
  */
@@ -870,6 +887,7 @@ export {
     showPermissionErrorAlert,
     showCameraPermissionsAlert,
     splitExtensionFromFileName,
+    getMimeType,
     getFileName,
     getFileType,
     cleanFileName,
diff --git a/src/libs/localFileCreate/index.native.ts b/src/libs/localFileCreate/index.native.ts
index 418701ae3ff5..d22470d29b02 100644
--- a/src/libs/localFileCreate/index.native.ts
+++ b/src/libs/localFileCreate/index.native.ts
@@ -1,5 +1,5 @@
 import RNFetchBlob from 'react-native-blob-util';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {appendTimeToFileName, splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
 import type LocalFileCreate from './types';
 
 /**
@@ -9,9 +9,11 @@ import type LocalFileCreate from './types';
  * @returns path, filename and size of the newly created file
  */
 const localFileCreate: LocalFileCreate = (fileName, textContent) => {
-    const newFileName = FileUtils.appendTimeToFileName(fileName);
+    const {fileExtension} = splitExtensionFromFileName(fileName);
+    const fileNameWithExtension = fileExtension ? fileName : `${fileName}.txt`;
+    const newFileName = appendTimeToFileName(fileNameWithExtension);
     const dir = RNFetchBlob.fs.dirs.DocumentDir;
-    const path = `${dir}/${newFileName}.txt`;
+    const path = `${dir}/${newFileName}`;
 
     return RNFetchBlob.fs.writeFile(path, textContent, 'utf8').then(() => RNFetchBlob.fs.stat(path).then(({size}) => ({path, newFileName, size})));
 };
diff --git a/src/libs/localFileCreate/index.ts b/src/libs/localFileCreate/index.ts
index 0178a6c76f7c..e3f12b1e68a3 100644
--- a/src/libs/localFileCreate/index.ts
+++ b/src/libs/localFileCreate/index.ts
@@ -1,4 +1,4 @@
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {appendTimeToFileName, getMimeType, splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
 import type LocalFileCreate from './types';
 
 /**
@@ -8,8 +8,10 @@ import type LocalFileCreate from './types';
  * @returns path, filename and size of the newly created file
  */
 const localFileCreate: LocalFileCreate = (fileName, textContent) => {
-    const newFileName = FileUtils.appendTimeToFileName(fileName);
-    const blob = new Blob([textContent], {type: 'text/plain'});
+    const {fileExtension} = splitExtensionFromFileName(fileName);
+    const fileNameWithExtension = fileExtension ? fileName : `${fileName}.txt`;
+    const newFileName = appendTimeToFileName(fileNameWithExtension);
+    const blob = new Blob([textContent], {type: getMimeType(fileExtension)});
     const url = URL.createObjectURL(blob);
 
     return Promise.resolve({path: url, newFileName, size: blob.size});
diff --git a/src/libs/localFileDownload/index.android.ts b/src/libs/localFileDownload/index.android.ts
index b8b7a653bcb8..b4b85c832ee9 100644
--- a/src/libs/localFileDownload/index.android.ts
+++ b/src/libs/localFileDownload/index.android.ts
@@ -1,5 +1,5 @@
 import RNFetchBlob from 'react-native-blob-util';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {getMimeType, showGeneralErrorAlert, showSuccessAlert, splitExtensionFromFileName} from '@libs/fileDownload/FileUtils';
 import localFileCreate from '@libs/localFileCreate';
 import type LocalFileDownload from './types';
 
@@ -10,20 +10,21 @@ import type LocalFileDownload from './types';
  */
 const localFileDownload: LocalFileDownload = (fileName, textContent, translate, successMessage) => {
     localFileCreate(fileName, textContent).then(({path, newFileName}) => {
+        const {fileExtension} = splitExtensionFromFileName(newFileName);
         RNFetchBlob.MediaCollection.copyToMediaStore(
             {
                 name: newFileName,
                 parentFolder: '', // subdirectory in the Media Store, empty goes to 'Downloads'
-                mimeType: 'text/plain',
+                mimeType: getMimeType(fileExtension),
             },
             'Download',
             path,
         )
             .then(() => {
-                FileUtils.showSuccessAlert(translate, successMessage);
+                showSuccessAlert(translate, successMessage);
             })
             .catch(() => {
-                FileUtils.showGeneralErrorAlert(translate);
+                showGeneralErrorAlert(translate);
             })
             .finally(() => {
                 RNFetchBlob.fs.unlink(path);
diff --git a/src/libs/localFileDownload/index.ios.ts b/src/libs/localFileDownload/index.ios.ts
index 778d19d9449b..7fcfe1ef5ae0 100644
--- a/src/libs/localFileDownload/index.ios.ts
+++ b/src/libs/localFileDownload/index.ios.ts
@@ -1,5 +1,6 @@
 import {Share} from 'react-native';
 import RNFetchBlob from 'react-native-blob-util';
+import {showSuccessAlert} from '@libs/fileDownload/FileUtils';
 import localFileCreate from '@libs/localFileCreate';
 import type LocalFileDownload from './types';
 
@@ -8,10 +9,13 @@ import type LocalFileDownload from './types';
  * and textContent, so we're able to share it using iOS' share API.
  * After the file is shared, it is removed from the internal dir.
  */
-const localFileDownload: LocalFileDownload = (fileName, textContent) => {
+const localFileDownload: LocalFileDownload = (fileName, textContent, translate, successMessage, shouldShowSuccessAlert) => {
     localFileCreate(fileName, textContent).then(({path, newFileName}) => {
         Share.share({url: path, title: newFileName}).finally(() => {
             RNFetchBlob.fs.unlink(path);
+            if (shouldShowSuccessAlert) {
+                showSuccessAlert(translate, successMessage);
+            }
         });
     });
 };
diff --git a/src/libs/localFileDownload/index.ts b/src/libs/localFileDownload/index.ts
index a1a20a0e3d4a..ffcf51ca9a7f 100644
--- a/src/libs/localFileDownload/index.ts
+++ b/src/libs/localFileDownload/index.ts
@@ -1,3 +1,4 @@
+import {showSuccessAlert} from '@libs/fileDownload/FileUtils';
 import localFileCreate from '@libs/localFileCreate';
 import type LocalFileDownload from './types';
 
@@ -6,12 +7,15 @@ import type LocalFileDownload from './types';
  * creates a temporary anchor, just to programmatically click it, so the file
  * is downloaded by the browser.
  */
-const localFileDownload: LocalFileDownload = (fileName, textContent) => {
-    localFileCreate(`${fileName}.txt`, textContent).then(({path, newFileName}) => {
+const localFileDownload: LocalFileDownload = (fileName, textContent, translate, successMessage, shouldShowSuccessAlert) => {
+    localFileCreate(fileName, textContent).then(({path, newFileName}) => {
         const link = document.createElement('a');
         link.download = newFileName;
         link.href = path;
         link.click();
+        if (shouldShowSuccessAlert) {
+            showSuccessAlert(translate, successMessage);
+        }
     });
 };
 
diff --git a/src/libs/localFileDownload/types.ts b/src/libs/localFileDownload/types.ts
index 182da40a11ed..0c4132cae0d9 100644
--- a/src/libs/localFileDownload/types.ts
+++ b/src/libs/localFileDownload/types.ts
@@ -1,5 +1,5 @@
 import type {LocalizedTranslate} from '@components/LocaleContextProvider';
 
-type LocalFileDownload = (fileName: string, textContent: string, translate: LocalizedTranslate, successMessage?: string) => void;
+type LocalFileDownload = (fileName: string, textContent: string, translate: LocalizedTranslate, successMessage?: string, shouldShowSuccessAlert?: boolean) => void;
 
 export default LocalFileDownload;
diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/ReportFieldDate.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/ReportFieldDate.tsx
index 13a8341b1e93..58150e8e5e0a 100644
--- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/ReportFieldDate.tsx
+++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersReportFieldPage/ReportFieldDate.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
 import DateFilterBase from '@components/Search/FilterComponents/DateFilterBase';
+import type {ReportFieldDateKey} from '@components/Search/types';
+import useOnyx from '@hooks/useOnyx';
 import {updateAdvancedFilters} from '@libs/actions/Search';
+import {getDatePresets} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type {PolicyReportField} from '@src/types/onyx';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
 type ReportFieldDateProps = {
     field: PolicyReportField;
@@ -12,16 +17,49 @@ type ReportFieldDateProps = {
 function ReportFieldDate({field, close}: ReportFieldDateProps) {
     const formKey = `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${field.name.toLowerCase().replaceAll(' ', '-')}` as const;
 
-    const updateFilter = (values: Record<string, string | null>) => {
-        updateAdvancedFilters(values);
+    const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
+
+    const dateOnKey = formKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.ON_PREFIX) as ReportFieldDateKey;
+    const dateBeforeKey = formKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.BEFORE_PREFIX) as ReportFieldDateKey;
+    const dateAfterKey = formKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.AFTER_PREFIX) as ReportFieldDateKey;
+
+    const dateOnValue = searchAdvancedFiltersForm?.[dateOnKey];
+    const dateBeforeValue = searchAdvancedFiltersForm?.[dateBeforeKey];
+    const dateAfterValue = searchAdvancedFiltersForm?.[dateAfterKey];
+
+    function getDefaultDateValues() {
+        return {
+            [CONST.SEARCH.DATE_MODIFIERS.ON]: dateOnValue,
+            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: dateBeforeValue,
+            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: dateAfterValue,
+        };
+    }
+
+    function getPresets() {
+        const hasFeed = !!searchAdvancedFiltersForm?.feed?.length;
+        return getDatePresets(formKey, hasFeed);
+    }
+
+    const updateFilter = (values: Record<string, string | undefined>) => {
+        updateAdvancedFilters({
+            [dateOnKey]: values[CONST.SEARCH.DATE_MODIFIERS.ON] ?? null,
+            [dateBeforeKey]: values[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ?? null,
+            [dateAfterKey]: values[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? null,
+        });
         close();
     };
 
+    const defaultDateValues = getDefaultDateValues();
+    const presets = getPresets();
+
     return (
         <DateFilterBase
             title={field.name}
-            dateKey={formKey}
-            back={close}
+            defaultDateValues={defaultDateValues}
+            presets={presets}
+            isSearchAdvancedFiltersFormLoading={isSearchAdvancedFiltersFormLoading}
+            onBackButtonPress={close}
             onSubmit={updateFilter}
         />
     );
diff --git a/src/pages/workspace/travel/PolicyTravelPage.tsx b/src/pages/workspace/travel/PolicyTravelPage.tsx
index db49900ad641..c93626f49f23 100644
--- a/src/pages/workspace/travel/PolicyTravelPage.tsx
+++ b/src/pages/workspace/travel/PolicyTravelPage.tsx
@@ -1,11 +1,12 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
+import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollViewWithContext from '@components/ScrollViewWithContext';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
-import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
+import {useMemoizedLazyExpensifyIcons, useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -22,6 +23,7 @@ import {getTravelStep} from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import BookOrManageYourTrip from './BookOrManageYourTrip';
 import GetStartedTravel from './GetStartedTravel';
@@ -40,6 +42,7 @@ function WorkspaceTravelPage({
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const policy = usePolicy(policyID);
+    const icons = useMemoizedLazyExpensifyIcons(['Exit'] as const);
     const illustrations = useMemoizedLazyIllustrations(['Luggage'] as const);
     const workspaceAccountID = useWorkspaceAccountID(policyID);
 
@@ -80,6 +83,15 @@ function WorkspaceTravelPage({
         }
     })();
 
+    const secondaryActions = [
+        {
+            icon: icons.Exit,
+            text: translate('common.export'),
+            value: CONST.POLICY.SECONDARY_ACTIONS.EXPORT,
+            onSelected: () => Navigation.navigate(ROUTES.WORKSPACE_TRAVEL_EXPORT.getRoute(policyID)),
+        },
+    ];
+
     return (
         <AccessOrNotFoundWrapper
             policyID={policyID}
@@ -100,7 +112,18 @@ function WorkspaceTravelPage({
                     shouldShowBackButton={shouldUseNarrowLayout}
                     shouldDisplayHelpButton
                     onBackButtonPress={Navigation.goBack}
-                />
+                >
+                    {step === CONST.TRAVEL.STEPS.BOOK_OR_MANAGE_YOUR_TRIP && (
+                        <ButtonWithDropdownMenu
+                            success={false}
+                            onPress={() => {}}
+                            customText={translate('common.more')}
+                            options={secondaryActions}
+                            isSplitButton={false}
+                            shouldUseOptionIcon
+                        />
+                    )}
+                </HeaderWithBackButton>
                 <ScrollViewWithContext addBottomSafeAreaPadding>
                     <View style={[styles.pt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>{mainContent}</View>
                 </ScrollViewWithContext>
diff --git a/src/pages/workspace/travel/WorkspaceTravelInvoicingExportPage.tsx b/src/pages/workspace/travel/WorkspaceTravelInvoicingExportPage.tsx
new file mode 100644
index 000000000000..6104bd033968
--- /dev/null
+++ b/src/pages/workspace/travel/WorkspaceTravelInvoicingExportPage.tsx
@@ -0,0 +1,265 @@
+import {endOfMonth, format, startOfMonth} from 'date-fns';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
+import Button from '@components/Button';
+import FormHelpMessage from '@components/FormHelpMessage';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import DateFilterBase from '@components/Search/FilterComponents/DateFilterBase';
+import type {DateFilterBaseHandle} from '@components/Search/FilterComponents/DateFilterBase';
+import type {SearchDateValues} from '@components/Search/FilterComponents/DatePresetFilterBase';
+import type {SearchDatePreset} from '@components/Search/types';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import usePrevious from '@hooks/usePrevious';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {exportTravelInvoiceStatementCSV, getTravelInvoiceStatementPDF} from '@libs/actions/TravelInvoicing';
+import Navigation from '@libs/Navigation/Navigation';
+import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import {isSearchDatePreset} from '@libs/SearchQueryUtils';
+import {getDateRangeForPreset} from '@libs/SearchUIUtils';
+import {downloadTravelInvoiceStatementPDF} from '@libs/TravelInvoicingUtils';
+import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+
+type WorkspaceTravelInvoicingExportPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.TRAVEL_EXPORT>;
+
+function WorkspaceTravelInvoicingExportPage({route}: WorkspaceTravelInvoicingExportPageProps) {
+    const {policyID} = route.params;
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [travelInvoiceStatement] = useOnyx(ONYXKEYS.TRAVEL_INVOICE_STATEMENT);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+
+    const isGenerating = travelInvoiceStatement?.isGenerating ?? false;
+    const prevIsGenerating = usePrevious(isGenerating);
+    const [isDownloading, setIsDownloading] = useState(isGenerating);
+    const [dateError, setDateError] = useState('');
+    const [isDateModifierOpen, setIsDateModifierOpen] = useState(false);
+
+    const baseURL = CONFIG.EXPENSIFY.DEFAULT_API_ROOT;
+
+    const dateFilterBaseRef = useRef<DateFilterBaseHandle>(null);
+
+    const presets: SearchDatePreset[] = [CONST.SEARCH.DATE_PRESETS.THIS_MONTH, CONST.SEARCH.DATE_PRESETS.LAST_MONTH];
+
+    function getDefaultDateValues() {
+        return {
+            [CONST.SEARCH.DATE_MODIFIERS.ON]: CONST.SEARCH.DATE_PRESETS.THIS_MONTH,
+            [CONST.SEARCH.DATE_MODIFIERS.BEFORE]: undefined,
+            [CONST.SEARCH.DATE_MODIFIERS.AFTER]: undefined,
+        };
+    }
+
+    /**
+     * Checks whether the user has a complete date selection.
+     * A selection is complete when either ON is set (preset or specific date),
+     * or both AFTER and BEFORE are set. A single After or Before alone is
+     * incomplete — we don't silently fill in today's date for the missing value
+     * because that can produce invalid ranges the backend rejects.
+     */
+    const hasDateSelected = (valuesToValidate?: SearchDateValues): boolean => {
+        const values = valuesToValidate ?? dateFilterBaseRef.current?.getDateValues();
+        if (!values) {
+            return false;
+        }
+
+        if (values[CONST.SEARCH.DATE_MODIFIERS.ON]) {
+            return true;
+        }
+
+        // Both after and before must be set for a complete range
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- We intentionally use logical OR (||) instead of ?? because these values are strings and we want to treat empty strings as "not set" (i.e., falsy).
+        return !!(values[CONST.SEARCH.DATE_MODIFIERS.AFTER] && values[CONST.SEARCH.DATE_MODIFIERS.BEFORE]);
+    };
+
+    /**
+     * Checks whether the selected date range is invalid (start date is after end date).
+     */
+    const isDateRangeInvalid = (valuesToValidate?: SearchDateValues): boolean => {
+        const values = valuesToValidate ?? dateFilterBaseRef.current?.getDateValues();
+        const dateAfter = values?.[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+        const dateBefore = values?.[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+
+        if (dateAfter && dateBefore && dateAfter > dateBefore) {
+            return true;
+        }
+        return false;
+    };
+
+    /**
+     * Re-validates date selection on every change.
+     * Receives the freshest values directly from the DateFilterBase callback,
+     * avoiding the need to wait for a re-render to read from the ref.
+     */
+    const handleDateValuesChange = (newValues: SearchDateValues) => {
+        if (!hasDateSelected(newValues)) {
+            setDateError(translate('workspace.moreFeatures.travel.travelInvoicing.selectDateRangeError'));
+        } else if (isDateRangeInvalid(newValues)) {
+            setDateError(translate('workspace.moreFeatures.travel.travelInvoicing.invalidDateRangeError'));
+        } else {
+            setDateError('');
+        }
+    };
+
+    /**
+     * Computes startDate and endDate in YYYY-MM-DD format from the current date selection.
+     * Callers must validate via hasDateSelected() before calling — this function
+     * assumes the selection is complete (ON is set, or both AFTER and BEFORE are set).
+     */
+    const getDateRange = useCallback((): {startDate: string; endDate: string} => {
+        const values = dateFilterBaseRef.current?.getDateValues();
+        const dateOn = values?.[CONST.SEARCH.DATE_MODIFIERS.ON];
+        const dateAfter = values?.[CONST.SEARCH.DATE_MODIFIERS.AFTER];
+        const dateBefore = values?.[CONST.SEARCH.DATE_MODIFIERS.BEFORE];
+
+        if (dateOn) {
+            if (isSearchDatePreset(dateOn)) {
+                const range = getDateRangeForPreset(dateOn);
+                return {startDate: range.start, endDate: range.end};
+            }
+            // Specific date "On" -> startDate = endDate
+            return {startDate: dateOn, endDate: dateOn};
+        }
+
+        if (dateAfter && dateBefore) {
+            return {
+                startDate: dateAfter,
+                endDate: dateBefore,
+            };
+        }
+
+        // Default: this month (only reached on initial mount before any interaction)
+        const now = new Date();
+        return {
+            startDate: format(startOfMonth(now), 'yyyy-MM-dd'),
+            endDate: format(endOfMonth(now), 'yyyy-MM-dd'),
+        };
+    }, []);
+
+    /**
+     * Handles PDF export — always requests fresh generation from the backend.
+     * The useEffect below auto-downloads the file once generation completes.
+     */
+    const processDownload = useCallback(() => {
+        if (isGenerating) {
+            return;
+        }
+
+        if (!hasDateSelected()) {
+            setDateError(translate('workspace.moreFeatures.travel.travelInvoicing.selectDateRangeError'));
+            return;
+        }
+
+        if (isDateRangeInvalid()) {
+            setDateError(translate('workspace.moreFeatures.travel.travelInvoicing.invalidDateRangeError'));
+            return;
+        }
+
+        const {startDate, endDate} = getDateRange();
+
+        setIsDownloading(true);
+        getTravelInvoiceStatementPDF(policyID, startDate, endDate);
+    }, [isGenerating, policyID, getDateRange, translate]);
+
+    useEffect(() => {
+        if (!prevIsGenerating || isGenerating) {
+            return;
+        }
+
+        // Generation just completed — download the file
+        const {startDate, endDate} = getDateRange();
+        const cacheKey = `${policyID}_${startDate}_${endDate}`;
+        const fileName = travelInvoiceStatement?.[cacheKey];
+        if (typeof fileName === 'string') {
+            downloadTravelInvoiceStatementPDF(translate, baseURL, fileName, startDate, endDate, currentUserPersonalDetails?.login ?? '', session?.encryptedAuthToken ?? '').finally(() =>
+                setIsDownloading(false),
+            );
+        } else {
+            setIsDownloading(false);
+        }
+    }, [prevIsGenerating, isGenerating, travelInvoiceStatement, policyID, getDateRange, translate, baseURL, currentUserPersonalDetails?.login, session?.encryptedAuthToken]);
+
+    const handleDownloadCSV = () => {
+        if (!hasDateSelected()) {
+            setDateError(translate('workspace.moreFeatures.travel.travelInvoicing.selectDateRangeError'));
+            return;
+        }
+        if (isDateRangeInvalid()) {
+            setDateError(translate('workspace.moreFeatures.travel.travelInvoicing.invalidDateRangeError'));
+            return;
+        }
+        const {startDate, endDate} = getDateRange();
+        exportTravelInvoiceStatementCSV(policyID, startDate, endDate, translate);
+    };
+
+    const goBack = () => dateFilterBaseRef.current?.goBack() ?? Navigation.goBack();
+
+    // Handled by the generic component automatically calling its internal exposed methods.
+    // It updates its own internal refs/states so the parent just needs to call save without doing anything else.
+    // And when it saves, the parent just needs it available in ref when export uses getDateValues.
+    const onSubmit = () => {};
+
+    const defaultDateValues = getDefaultDateValues();
+
+    return (
+        <ScreenWrapper
+            testID="WorkspaceTravelInvoicingExportPage"
+            shouldShowOfflineIndicatorInWideScreen
+            offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('common.export')}
+                onBackButtonPress={goBack}
+            />
+            <FullPageOfflineBlockingView>
+                <DateFilterBase
+                    ref={dateFilterBaseRef}
+                    defaultDateValues={defaultDateValues}
+                    presets={presets}
+                    onSubmit={onSubmit}
+                    onDateValuesChange={handleDateValuesChange}
+                    onDateModifierChange={setIsDateModifierOpen}
+                    shouldShowButtonsOnlyWithDateModifier
+                    shouldShowHeader={false}
+                />
+                {!isDateModifierOpen && (
+                    <>
+                        {!!dateError && (
+                            <FormHelpMessage
+                                style={[styles.mh4, styles.mt2, styles.mb0]}
+                                message={dateError}
+                                isError
+                            />
+                        )}
+                        <Button
+                            text={translate('workspace.moreFeatures.travel.travelInvoicing.exportToPDF')}
+                            style={[styles.mh4, styles.mt3]}
+                            onPress={processDownload}
+                            isLoading={isDownloading}
+                            large
+                        />
+                        <Button
+                            text={translate('workspace.moreFeatures.travel.travelInvoicing.exportToCSV')}
+                            style={[styles.m4, styles.mt3, styles.mb5]}
+                            onPress={handleDownloadCSV}
+                            success
+                            large
+                        />
+                    </>
+                )}
+            </FullPageOfflineBlockingView>
+        </ScreenWrapper>
+    );
+}
+
+WorkspaceTravelInvoicingExportPage.displayName = 'WorkspaceTravelInvoicingExportPage';
+
+export default WorkspaceTravelInvoicingExportPage;
diff --git a/src/types/onyx/TravelInvoiceStatement.ts b/src/types/onyx/TravelInvoiceStatement.ts
new file mode 100644
index 000000000000..708c98009237
--- /dev/null
+++ b/src/types/onyx/TravelInvoiceStatement.ts
@@ -0,0 +1,12 @@
+/** Model of travel invoice statement */
+type TravelInvoiceStatement = {
+    /** Whether we are currently generating a PDF version of the statement */
+    isGenerating: boolean;
+    /**
+     * Cache key format: "{policyID}_{startDate}_{endDate}" with filename as value.
+     * Boolean value added for isGenerating key.
+     */
+    [cacheKey: string]: string | boolean;
+};
+
+export default TravelInvoiceStatement;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index 54c77f6ccd5f..07b1e30bf1dd 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -159,6 +159,7 @@ import type TransactionPending3DSReview from './TransactionPending3DSReview';
 import type TransactionsPending3DSReview from './TransactionsPending3DSReview';
 import type {TransactionViolation, ViolationName} from './TransactionViolation';
 import type TransactionViolations from './TransactionViolation';
+import type TravelInvoiceStatement from './TravelInvoiceStatement';
 import type TravelProvisioning from './TravelProvisioning';
 import type {TravelSettings, WorkspaceTravelSettings} from './TravelSettings';
 import type TryNewDot from './TryNewDot';
@@ -306,6 +307,7 @@ export type {
     WalletAdditionalDetails,
     WalletAdditionalQuestionDetails,
     WalletOnfido,
+    TravelInvoiceStatement,
     WalletStatement,
     WalletTerms,
     WalletTransfer,
diff --git a/tests/unit/TravelInvoicingUtilsTest.ts b/tests/unit/TravelInvoicingUtilsTest.ts
index e1d56d59c97c..b2668035b159 100644
--- a/tests/unit/TravelInvoicingUtilsTest.ts
+++ b/tests/unit/TravelInvoicingUtilsTest.ts
@@ -15,7 +15,13 @@ import {
 import type {BankAccountList, WorkspaceCardsList} from '@src/types/onyx';
 import type {ExpensifyCardSettingsBase} from '@src/types/onyx/ExpensifyCardSettings';
 
-jest.mock('@src/libs/Environment/Environment');
+jest.mock('@src/libs/Environment/Environment', () => ({
+    getEnvironmentURL: jest.fn(() => Promise.resolve('https://new.expensify.com')),
+    getOldDotEnvironmentURL: jest.fn(() => Promise.resolve('https://www.expensify.com')),
+    isDevelopment: jest.fn(() => false),
+    isInternalTestBuild: jest.fn(() => false),
+    isStaging: jest.fn(() => false),
+}));
 
 describe('TravelInvoicingUtils', () => {
     let isDevelopmentSpy: jest.SpyInstance;