Expense Dashboard

Expense Dashboard is the central overview for expense management, displaying summary statistics, an approval queue widget, a category breakdown widget, and a list of recent expense reports. Route: /fa/expenses redirects to /fa/payables?tab=expenses; the ExpenseDashboardPage component is mapped to this route via the ExpenseDashboardPage export.

​

Overview

The ExpenseDashboardPage component renders summary stat cards (loaded via useExpenseDashboardStats), an approval queue widget (FAExpenseApprovalQueueWidget), a category breakdown widget (FAExpenseCategoryWidget), and a recent reports widget (FARecentExpenseReportsWidget). A New Report button is gated behind fa.expenses.create; a Policies button links to /fa/settings/expense-policies (gated behind fa.expense-policies.view). The route /fa/expenses is currently a legacy redirect to /fa/payables?tab=expenses.

​

Who it’s for

Requires fa.expenses.view (inferred from related expense routes). Create requires fa.expenses.create.

​

Before you start

• Navigate to the Payables Hub (/fa/payables?tab=expenses) or search for the expense dashboard in navigation.

​

Steps

1. Open the Expense Dashboard.
2. Review summary stat cards from useExpenseDashboardStats.
3. Check the approval queue in FAExpenseApprovalQueueWidget.
4. Review category spending in FAExpenseCategoryWidget.
5. Open a recent expense report from FARecentExpenseReportsWidget.
6. Click New Report to create a new expense report (requires fa.expenses.create).

​

Key concepts

​

Related

Documentation sources

• src/routes/fa.tsx
• src/cores/fa/pages/ExpenseDashboardPage.tsx