Expense Report

Expense Report displays the full detail view for a single expense report, including a summary card, expense lines, approval history timeline, and action buttons for submitting, approving, posting to GL, or deleting. Route: /fa/expenses/:id.

​

Overview

The Expense Report detail page is accessible at /fa/expenses/:id and requires permission fa.expenses.view. The component (ExpenseReportDetailPage) fetches the report via useExpenseReport, its lines via useExpenseLinesByReport, pending approvals via usePendingApprovals, and approval history via useExpenseApprovalHistory. It renders:

• ExpenseReportSummaryCard — header summary with status badge (ExpenseReportStatusBadge)
• ExpenseLinesTable — tabular view of expense line items
• ApprovalHistoryTimeline — chronological approval events
• Action buttons: submit (useSubmitExpenseReport), approve (ExpenseApprovalDialog), post to GL (PostToGLDialog), edit (navigates to /fa/expenses/:id/edit), delete (useSoftDeleteExpenseReport)
• An AlertDialog confirms destructive actions

​

Who it’s for

Requires permission fa.expenses.view. To approve or post to GL, additional permissions may be required (SME: confirm). Creating expense reports requires fa.expenses.create. Editing requires fa.expenses.edit.

​

Before you start

• You must have fa.expenses.view permission to view.
• The creator must be linked to an employee record via useMyEmployee when creating.

​

Steps

1. Navigate to the expense report list and click a report, or go to /fa/expenses/:id.
2. Review ExpenseReportSummaryCard for report totals and current status.
3. Review individual lines in ExpenseLinesTable.
4. Review ApprovalHistoryTimeline for prior approval events.
5. Use available action buttons based on the report’s current status and your permissions.

​

Key concepts

​

Creating an expense report

The New Expense Report page (/fa/expenses/new) creates an expense report for reimbursement. The page requires the current user to have an associated employee record (useMyEmployee). If no employee record is found, an error state is shown. Report header (ReportPayload): report_name (required), description (optional), start_date / end_date (required), site_id (optional), default_gl_account_id (optional). The report_number is auto-generated via useGenerateExpenseReportNumber. Expense lines (ExpenseLine): each line includes expense_date, expense_category, description, amount, and optional account_id, fund_id, department_id, per-diem fields (per_diem_days, per_diem_rate), mileage fields (miles, mileage_rate), and receipt_storage_path. Save as Draft: Creates the report with status: "draft" and all lines, then navigates to the report detail. Submit for Approval: Creates the report and lines as draft, then calls useSubmitExpenseReport, then navigates to the report detail. Key concepts:

• Employee record requirement: The creator must be linked to an employee record via useMyEmployee.
• Report number: Auto-generated — not user-entered.
• Total amount: Calculated as the sum of all line item amounts.

1. Navigate to /fa/expenses/new.
2. Complete the ExpenseReportForm header section (report name, dates, optional site/account).
3. Add expense lines with date, category, description, and amount for each expense.
4. Click Save as Draft to save without submitting, or Submit for Approval to immediately submit.
5. On success, you are redirected to the new expense report’s detail page.

​

Editing an expense report

The Edit Expense Report page (/fa/expenses/:id/edit) allows updates to an existing expense report’s header information and management of individual expense line items. Requires permission fa.expenses.edit. The component (ExpenseReportEditPage) fetches the report via useExpenseReport and its lines via useExpenseLinesByReport. It renders ExpenseReportForm for header fields (report_name, description, start_date, end_date, site_id, default_gl_account_id) and manages expense lines through useCreateExpenseLine, useUpdateExpenseLine, and useSoftDeleteExpenseLine. On success, the component calls useSubmitExpenseReport if the report is ready for submission. Account options come from useAccounts; fund options from useFunds; site options from useSiteList. Before you start: the expense report must be in an editable status. Key concepts:

1. Open the expense report at /fa/expenses/:id and click Edit.
2. Update header fields (report name, date range, site, default GL account) in ExpenseReportForm.
3. Add, update, or remove individual expense lines using the line item editor.
4. Save changes via the form submit action.
5. On success, the page navigates back to the expense report detail.

​

Related

Documentation sources

• src/routes/fa.tsx
• src/cores/fa/pages/ExpenseReportDetailPage.tsx
• src/cores/fa/pages/ExpenseReportNewPage.tsx
• src/cores/fa/pages/ExpenseReportEditPage.tsx
• src/cores/fa/hooks/useExpenseReports.ts
• src/cores/fa/hooks/useExpenseLines.ts
• src/cores/fa/components/ExpenseReportForm.tsx
• src/platform/workforce/hooks/useMyEmployee.ts