Skip to main content
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).
stringOverrides
AccountingOverviewStringOverrides
Customize text and labels throughout the page.