Explore adding Create Expense and Create Report buttons on Reports page

[puneetlath]

As discussed in this thread, we would like to explore adding a Create Expense button to the top of Reports > Expenses and a Create Report button to the top of Reports > Reports.

Very rough example mocks:

cc @dubielzyk-expensify @dannymcclain

Issue Owner

Current Issue Owner: @dubielzyk-expensify

[melvin-bot]

Triggered auto assignment to @dannymcclain (Design), see these Stack Overflow questions for more details.

[melvin-bot]

Triggered auto assignment to @lydiabarclay (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO. Remember to draft any necessary HelpDot updates by following the instructions here.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dannymcclain (NewFeature)

[dannymcclain]

While we're doing this, let's noodle on creating a flexible "action bar" at the top of tables that could potentially include things like Filters, Search, Actions, etc. for any and all tables.

[TaduJR]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Users on the Reports page (Search page) cannot quickly create expenses or reports without navigating away or using the floating action button (FAB). This requires extra steps and reduces workflow efficiency when managing expenses and reports.

What is the root cause of that problem?

The Reports page currently lacks direct action buttons for creating expenses and reports. The existing UI flow requires users to:

1. The Reports page renders via SearchPage.tsx which delegates to layout components:

   • https://github.com/Expensify/App/blob/6d6576da8e4627348fb95f582737fbf7b1faf633/src/pages/Search/SearchPage.tsx

2. The filter bar in SearchFiltersBar.tsx renders filter chips and footer buttons (Filters, Columns) but no create actions:

   • App/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

     Lines 779 to 821 in 6d6576d

     	const renderListFooter = useCallback(
     	() => (
     	<View style={[styles.flexRow, styles.gap2]}>
     	<Button
     	link
     	small
     	shouldUseDefaultHover={false}
     	text={filterButtonText}
     	iconFill={theme.link}
     	iconHoverFill={theme.linkHover}
     	icon={expensifyIcons.Filter}
     	textStyles={[styles.textMicroBold]}
     	onPress={openAdvancedFilters}
     	/>
     	{shouldShowColumnsButton && (
     	<Button
     	link
     	small
     	shouldUseDefaultHover={false}
     	text={translate('search.columns')}
     	iconFill={theme.link}
     	iconHoverFill={theme.linkHover}
     	icon={expensifyIcons.Columns}
     	textStyles={[styles.textMicroBold]}
     	onPress={openSearchColumns}
     	/>
     	)}
     	</View>
     	),
     	[
     	styles.flexRow,
     	styles.gap2,
     	styles.textMicroBold,
     	filterButtonText,
     	theme.link,
     	theme.linkHover,
     	expensifyIcons.Filter,
     	expensifyIcons.Columns,
     	openAdvancedFilters,
     	shouldShowColumnsButton,
     	translate,
     	],
     	);

3. The renderListFooter callback only renders "Filters" and "Columns" buttons:

   • App/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

     Lines 779 to 806 in 6d6576d

     	const renderListFooter = useCallback(
     	() => (
     	<View style={[styles.flexRow, styles.gap2]}>
     	<Button
     	link
     	small
     	shouldUseDefaultHover={false}
     	text={filterButtonText}
     	iconFill={theme.link}
     	iconHoverFill={theme.linkHover}
     	icon={expensifyIcons.Filter}
     	textStyles={[styles.textMicroBold]}
     	onPress={openAdvancedFilters}
     	/>
     	{shouldShowColumnsButton && (
     	<Button
     	link
     	small
     	shouldUseDefaultHover={false}
     	text={translate('search.columns')}
     	iconFill={theme.link}
     	iconHoverFill={theme.linkHover}
     	icon={expensifyIcons.Columns}
     	textStyles={[styles.textMicroBold]}
     	onPress={openSearchColumns}
     	/>
     	)}
     	</View>

4. Create actions exist only in FloatingActionButtonAndPopover.tsx:

   • Create Expense:

     App/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

     Lines 412 to 430 in 6d6576d

     	const expenseMenuItems = useMemo((): PopoverMenuItem[] => {
     	return [
     	{
     	icon: getIconForAction(CONST.IOU.TYPE.CREATE, icons),
     	text: translate('iou.createExpense'),
     	testID: 'create-expense',
     	shouldCallAfterModalHide: shouldRedirectToExpensifyClassic || shouldUseNarrowLayout,
     	onSelected: () =>
     	interceptAnonymousUser(() => {
     	if (shouldRedirectToExpensifyClassic) {
     	setModalVisible(true);
     	return;
     	}
     	startMoneyRequest(CONST.IOU.TYPE.CREATE, reportID, undefined, undefined, undefined, allTransactionDrafts);
     	}),
     	sentryLabel: CONST.SENTRY_LABEL.FAB_MENU.CREATE_EXPENSE,
     	},
     	];
     	}, [translate, shouldRedirectToExpensifyClassic, shouldUseNarrowLayout, allTransactionDrafts, reportID, icons]);

   • Create Report:

     App/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

     Lines 576 to 613 in 6d6576d

     	...(shouldShowCreateReportOption
     	? [
     	{
     	icon: icons.Document,
     	text: translate('report.newReport.createReport'),
     	shouldCallAfterModalHide: shouldUseNarrowLayout,
     	onSelected: () => {
     	interceptAnonymousUser(() => {
     	if (shouldRedirectToExpensifyClassic) {
     	setModalVisible(true);
     	return;
     	}
     	const workspaceIDForReportCreation = defaultChatEnabledPolicyID;
     	if (!workspaceIDForReportCreation || (shouldRestrictUserBillableActions(workspaceIDForReportCreation) && groupPoliciesWithChatEnabled.length > 1)) {
     	// If we couldn't guess the workspace to create the report, or a guessed workspace is past it's grace period and we have other workspaces to choose from
     	Navigation.navigate(ROUTES.NEW_REPORT_WORKSPACE_SELECTION.getRoute());
     	return;
     	}
     	if (!shouldRestrictUserBillableActions(workspaceIDForReportCreation)) {
     	// Check if empty report confirmation should be shown
     	if (shouldShowEmptyReportConfirmationForDefaultChatEnabledPolicy) {
     	openFabCreateReportConfirmation();
     	} else {
     	handleCreateWorkspaceReport(false);
     	}
     	return;
     	}
     	Navigation.navigate(ROUTES.RESTRICTED_ACTION.getRoute(workspaceIDForReportCreation));
     	});
     	},
     	sentryLabel: CONST.SENTRY_LABEL.FAB_MENU.CREATE_REPORT,
     	},
     	]
     	: []),

What changes do you think we should make in order to solve the problem?

Add conditional create buttons to SearchFiltersBar.tsx that display based on the selected type filter:

• Expense type (CONST.SEARCH.DATA_TYPES.EXPENSE) → Show "Create Expense" button
• Expense Report type (CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT) → Show "Create Report" button

Implementation Details

1. Add required imports to SearchFiltersBar.tsx:

import {startMoneyRequest} from '@libs/actions/IOU';
import {createNewReport} from '@libs/actions/Report';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import {generateReportID, hasViolations as hasViolationsReportUtils} from '@libs/ReportUtils';
import {getDefaultChatEnabledPolicy, getGroupPaidPoliciesWithExpenseChatEnabled} from '@libs/PolicyUtils';

2. Add hooks and state inside the component:

const currentUserPersonalDetails = useCurrentUserPersonalDetails();
const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, {canBeMissing: true});
const [allTransactionDrafts] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {canBeMissing: true});
const reportID = useMemo(() => generateReportID(), []);

const groupPoliciesWithChatEnabled = getGroupPaidPoliciesWithExpenseChatEnabled(allPolicies as OnyxCollection<OnyxTypes.Policy>);
const defaultChatEnabledPolicy = useMemo(
    () => getDefaultChatEnabledPolicy(groupPoliciesWithChatEnabled as Array<OnyxEntry<OnyxTypes.Policy>>, currentPolicy),
    [currentPolicy, groupPoliciesWithChatEnabled],
);
const hasViolations = hasViolationsReportUtils(undefined, transactionViolations, session?.accountID ?? CONST.DEFAULT_NUMBER_ID, session?.email ?? '');

3. Add create button handlers:

const handleCreateExpense = useCallback(() => {
    startMoneyRequest(CONST.IOU.TYPE.CREATE, reportID, undefined, undefined, undefined, allTransactionDrafts);
}, [reportID, allTransactionDrafts]);

const handleCreateReport = useCallback(() => {
    if (!defaultChatEnabledPolicy?.id) {
        Navigation.navigate(ROUTES.NEW_REPORT_WORKSPACE_SELECTION.getRoute());
        return;
    }
    const {reportID: createdReportID} = createNewReport(
        currentUserPersonalDetails,
        hasViolations,
        false, // isASAPSubmitBetaEnabled - can be added via usePermissions if needed
        defaultChatEnabledPolicy,
        false,
        false,
    );
    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(createdReportID));
}, [currentUserPersonalDetails, hasViolations, defaultChatEnabledPolicy]);

4. Modify renderListFooter to include create button:

Location:

App/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

Lines 779 to 821 in 6d6576d

	const renderListFooter = useCallback(
	() => (
	<View style={[styles.flexRow, styles.gap2]}>
	<Button
	link
	small
	shouldUseDefaultHover={false}
	text={filterButtonText}
	iconFill={theme.link}
	iconHoverFill={theme.linkHover}
	icon={expensifyIcons.Filter}
	textStyles={[styles.textMicroBold]}
	onPress={openAdvancedFilters}
	/>
	{shouldShowColumnsButton && (
	<Button
	link
	small
	shouldUseDefaultHover={false}
	text={translate('search.columns')}
	iconFill={theme.link}
	iconHoverFill={theme.linkHover}
	icon={expensifyIcons.Columns}
	textStyles={[styles.textMicroBold]}
	onPress={openSearchColumns}
	/>
	)}
	</View>
	),
	[
	styles.flexRow,
	styles.gap2,
	styles.textMicroBold,
	filterButtonText,
	theme.link,
	theme.linkHover,
	expensifyIcons.Filter,
	expensifyIcons.Columns,
	openAdvancedFilters,
	shouldShowColumnsButton,
	translate,
	],
	);

const renderListFooter = useCallback(
    () => (
        <View style={[styles.flexRow, styles.gap2]}>
            {type?.value === CONST.SEARCH.DATA_TYPES.EXPENSE && (
                <Button
                    success
                    small
                    text={translate('iou.createExpense')}
                    onPress={handleCreateExpense}
                />
            )}
            {type?.value === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT && (
                <Button
                    success
                    small
                    text={translate('report.newReport.createReport')}
                    onPress={handleCreateReport}
                />
            )}
            <Button
                link
                small
                shouldUseDefaultHover={false}
                text={filterButtonText}
                iconFill={theme.link}
                iconHoverFill={theme.linkHover}
                icon={expensifyIcons.Filter}
                textStyles={[styles.textMicroBold]}
                onPress={openAdvancedFilters}
            />
            {shouldShowColumnsButton && (
                <Button
                    link
                    small
                    shouldUseDefaultHover={false}
                    text={translate('search.columns')}
                    iconFill={theme.link}
                    iconHoverFill={theme.linkHover}
                    icon={expensifyIcons.Columns}
                    textStyles={[styles.textMicroBold]}
                    onPress={openSearchColumns}
                />
            )}
        </View>
    ),
    [
        styles.flexRow,
        styles.gap2,
        styles.textMicroBold,
        filterButtonText,
        theme.link,
        theme.linkHover,
        expensifyIcons.Filter,
        expensifyIcons.Columns,
        openAdvancedFilters,
        shouldShowColumnsButton,
        translate,
        type?.value,
        handleCreateExpense,
        handleCreateReport,
    ],
);