Accounting Overview

This view provides an out of the box ready dashboard with an overview of the health, activity, and accounting status of the business. We recommend this layout as the entrypoint to the accounting experience for users who do not have bookkeeping services. Those with bookkeeping services should see the Bookkeeping Overview page. The overview page consists of the interactive P&L chart, the monthly revenue & expense breakdowns, and summary cards with a CTA for uncategorized transactions. Accounting Overview

import { AccountingOverview } from '@layerfi/components'

<AccountingOverview
    enableOnboarding
    onTransactionsToReviewClick={() => {
        navigate('../bank-transactions')
    }}
/>

Properties

showTitle

boolean

default:"true"

Controls whether the page title/header is displayed.

enableOnboarding

boolean

default:"false"

Flag indicating whether to include the <Onboarding /> component in the layout, which will prompt users to connect accounts and categorize transactions when they first arrive. The component is automatically hidden for businesses that have already onboarded, so it’s safe to leave on for all users.

onboardingStepOverride

OnboardingStep

Overrides the current onboarding step. Possible values: undefined, 'connectAccount', 'complete'.

onTransactionsToReviewClick

() => void

A function which navigates to the bank transactions to review page of your app. This will be triggered when clicking on the transactions-to-review CTA.

middleBanner

ReactNode

Custom content rendered between the P&L chart and the detailed charts. Use this to insert banners, CTAs, or other content into the layout.

chartColorsList

string[]

List of colors to use for the P&L detail wheels. Specified in hex strings, i.e. ['#FF0000', '#00FF00', '#0000FF'].

tagFilter

TagOption

Filters P&L data by a specific tag (project/category).

Show TagOption properties

label

string

Display label for the tag filter.

tagKey

string

The tag key to filter by.

tagValues

string[]

Tag values to include.

plaidHostedLinkConfig

PlaidHostedLinkConfig

Configuration for using Plaid Hosted Link instead of the embedded Plaid modal in the onboarding flow. When provided, account linking opens a Plaid-owned page in the browser rather than displaying an embedded modal. Only takes effect when enableOnboarding is true.

Show PlaidHostedLinkConfig properties

isMobileApp

boolean

Set to true when the user will open the hosted link in an ASWebAuthenticationSession (iOS) or Android Custom Tab. This tells Plaid to use the correct redirect handling for mobile contexts.

redirectUri

string

Universal Link (iOS) or App Link (Android) that opens your app. Used when Plaid redirects from a third-party OAuth app (e.g., a bank’s app) back to your app during app-to-app authentication.

completionRedirectUri

string

URI to redirect to after the user completes the Plaid hosted link flow (e.g., myapp://plaid-complete). Recommended for mobile apps to automatically close the hosted link session and return to your app. If not provided, the user sees a “Return to app” message and must navigate back manually.

navigateToHostedLink

(hostedLinkUrl: string) => void | Promise<void>

required

Callback function that navigates the user to the Plaid Hosted Link URL. This function receives the Plaid-owned URL and should open it in the device’s browser or an in-app browser. Required for all hosted link configurations.

stringOverrides

AccountingOverviewStringOverrides

Customize text and labels throughout the page.

Show AccountingOverviewStringOverrides properties

title

string

Override the page title. Defaults to 'Accounting overview'.

header

string

Override the P&L section header text. Defaults to 'Profit & Loss'.

profitAndLoss

AccountingOverviewProfitAndLossStringOverrides

Show AccountingOverviewProfitAndLossStringOverrides properties

detailedCharts

ProfitAndLossDetailedChartsStringOverrides

Show ProfitAndLossDetailedChartsStringOverrides properties

detailedChartStringOverrides

DetailedChartStringOverrides

Show DetailedChartStringOverrides properties

expenseChartHeader

string

Override the header for the expenses chart. Defaults to 'Expenses'.

revenueChartHeader

string

Override the header for the revenue chart. Defaults to 'Revenue'.

summaries

ProfitAndLossSummariesStringOverrides

Show ProfitAndLossSummariesStringOverrides properties

revenueLabel

string

Label for the revenue summary card.

expensesLabel

string

Label for the expenses summary card.

netProfitLabel

string

Label for the net profit summary card.

​Properties

Properties