Bookkeeping Overview

This view provides an out of the box ready dashboard for businesses enrolled in bookkeeping services. In addition to the components of the Accounting Overview, it includes the <Tasks /> component showing all current tasks for a business. The overview page consists of the interactive P&L chart, the monthly revenue & expense breakdowns, summary cards, and a sidebar with tasks and call booking.

import { BookkeepingOverview } from '@layerfi/components'

<BookkeepingOverview
    stringOverrides={{
      title: 'MyCompany Bookkeeping',
      tasks: { header: 'Action Items' },
    }}
    onClickReconnectAccounts={() => navigate('/accounts')}
/>

Properties

boolean

default:"true"

Controls whether the page title/header is displayed.

() => void

Callback passed to the <Tasks> component, triggered when the user clicks the reconnect-accounts action.

BookkeepingOverviewSlotProps

Configuration passed through to components within the page layout.

Show BookkeepingOverviewSlotProps 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.

BookkeepingOverviewStringOverrides

Customize text and labels throughout the page.

Show BookkeepingOverviewStringOverrides properties

string

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

TasksStringOverrides

Show TasksStringOverrides properties

string

Override the header text for the tasks widget.

BookkeepingOverviewProfitAndLossStringOverrides

Show BookkeepingOverviewProfitAndLossStringOverrides properties

string

Header text for the P&L section. Defaults to 'Profit & Loss'.

ProfitAndLossDetailedChartsStringOverrides

Show ProfitAndLossDetailedChartsStringOverrides properties

DetailedChartStringOverrides

Show DetailedChartStringOverrides properties

string

Header for the expenses chart.

string

Header for the revenue chart.

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

Bookkeeping Overview

Properties

​Properties

Properties