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.

import { AccountingOverview } from '@layerfi/components'

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

Properties

boolean

default:"true"

Controls whether the page title/header is displayed.

() => 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.

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.

string[]

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

AccountingOverviewSlotProps

Configuration passed through to components within the page layout.

Show AccountingOverviewSlotProps properties

object

Show profitAndLoss properties

ProfitAndLossSummariesSlotProps

Configuration for the P&L summary cards.

Show ProfitAndLossSummariesSlotProps properties

ProfitAndLossChartConfig

Optional styling overrides for the mini donut charts and swatch colors on the summary cards. Takes precedence over chartColorsList where both are supplied.

Show ProfitAndLossChartConfig properties

object

Show colors properties

string[]

Ordered palette for the revenue card’s mini chart and swatch. Cycles with reduced opacity once exhausted.

string[]

Ordered palette for the expenses card’s mini chart and swatch. Cycles with reduced opacity once exhausted.

string

Color for the uncategorized portion of each card’s mini chart and swatch. Omit to keep the default neutral color.

ProfitAndLossSummariesReportingVariant

Controls which reporting mode the summary cards display. Defaults to profit and loss.

Show ProfitAndLossSummariesReportingVariant properties

'profitAndLoss' | 'cashflow'

default:"profitAndLoss"

With 'profitAndLoss' (the default), the cards show revenue, expenses, and net profit. With 'cashflow', the cards show money in, money out, and net cash flow.

boolean

default:"true"

Only applies when type is 'cashflow'. Controls whether the money in and money out cards include a categorized vs. uncategorized breakdown footer.

object

Configuration for the P&L chart.

Show chart properties

ProfitAndLossChartConfig

Optional styling overrides for the chart.

Show ProfitAndLossChartConfig properties

object

Show barChart properties

number

default:"20"

Width of the bars, in pixels.

number

Width of the bars when the chart renders in its compact layout (below 620px wide). Defaults to half of barWidth.

object

Configuration for the revenue and expenses breakdown charts, keyed by scope.

Show detailedCharts properties

object

Show revenue properties

ProfitAndLossChartConfig

Optional styling overrides for the revenue breakdown chart. Takes precedence over chartColorsList where both are supplied.

Show ProfitAndLossChartConfig properties

object

Show colors properties

string[]

Ordered palette for the chart. Categories are assigned colors in alphabetical order by name; if the list is shorter than the number of categories, colors repeat with reduced opacity.

string

Color for the uncategorized slice and its legend swatch. Omit to keep the default dot-pattern donut fill and neutral swatch color.

object

Show donutChart properties

string | number

default:"'91%'"

Inner radius of the donut chart.

string | number

default:"'100%'"

Outer radius of the donut chart.

object

Show expenses properties

ProfitAndLossChartConfig

Same shape as revenue.chartConfig (with colors.expenses instead of colors.revenue), applied to the expenses breakdown chart.

TagOption

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

Show TagOption properties

string

Display label for the tag filter.

string

The tag key to filter by.

string[]

Tag values to include.

AccountingOverviewStringOverrides

Customize text and labels throughout the page.

Show AccountingOverviewStringOverrides properties

string

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

string

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

AccountingOverviewProfitAndLossStringOverrides

Show AccountingOverviewProfitAndLossStringOverrides properties

ProfitAndLossDetailedChartsStringOverrides

Show ProfitAndLossDetailedChartsStringOverrides properties

DetailedChartStringOverrides

Show DetailedChartStringOverrides properties

string

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

string

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

ProfitAndLossSummariesStringOverrides

Show ProfitAndLossSummariesStringOverrides properties

string

Label for the revenue summary card.

string

Label for the expenses summary card.

string

Label for the net profit summary card.

string

Label for the money in summary card when using the cashflow reporting variant. Defaults to 'Money in'.

string

Label for the money out summary card when using the cashflow reporting variant. Defaults to 'Money out'.

string

Label for the net cash flow summary card when using the cashflow reporting variant. Defaults to 'Net cash flow'.

Overview

Components

Layouts

Accounting Overview

Properties

​Properties

Properties