> ## Documentation Index
> Fetch the complete documentation index at: https://docs.layerfi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accounting Overview

> Accounting Overview Page.

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](/embedded-components/pages/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](https://github.com/user-attachments/assets/da9955a6-e9f7-41ef-ba25-541a3f8a3929)

```tsx theme={null}
import { AccountingOverview } from '@layerfi/components'

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

### Properties

<ParamField body="showTitle" type="boolean" default="true">
  Controls whether the page title/header is displayed.
</ParamField>

<ParamField body="enableOnboarding" type="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.
</ParamField>

<ParamField body="onboardingStepOverride" type="OnboardingStep">
  Overrides the current onboarding step. Possible values: `undefined`, `'connectAccount'`, `'complete'`.
</ParamField>

<ParamField body="onTransactionsToReviewClick" type="() => 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.
</ParamField>

<ParamField body="middleBanner" type="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.
</ParamField>

<ParamField body="chartColorsList" type="string[]">
  List of colors to use for the P\&L detail wheels. Specified in hex strings, i.e. `['#FF0000', '#00FF00', '#0000FF']`.
</ParamField>

<ParamField body="tagFilter" type="TagOption">
  Filters P\&L data by a specific tag (project/category).

  <Expandable title="TagOption properties">
    <ParamField body="label" type="string">Display label for the tag filter.</ParamField>
    <ParamField body="tagKey" type="string">The tag key to filter by.</ParamField>
    <ParamField body="tagValues" type="string[]">Tag values to include.</ParamField>
  </Expandable>
</ParamField>

<ParamField body="stringOverrides" type="AccountingOverviewStringOverrides">
  Customize text and labels throughout the page.

  <Expandable title="AccountingOverviewStringOverrides properties">
    <ParamField body="title" type="string">
      Override the page title. Defaults to `'Accounting overview'`.
    </ParamField>

    <ParamField body="header" type="string">
      Override the P\&L section header text. Defaults to `'Profit & Loss'`.
    </ParamField>

    <ParamField body="profitAndLoss" type="AccountingOverviewProfitAndLossStringOverrides">
      <Expandable title="AccountingOverviewProfitAndLossStringOverrides properties">
        <ParamField body="detailedCharts" type="ProfitAndLossDetailedChartsStringOverrides">
          <Expandable title="ProfitAndLossDetailedChartsStringOverrides properties">
            <ParamField body="detailedChartStringOverrides" type="DetailedChartStringOverrides">
              <Expandable title="DetailedChartStringOverrides properties">
                <ParamField body="expenseChartHeader" type="string">
                  Override the header for the expenses chart. Defaults to `'Expenses'`.
                </ParamField>

                <ParamField body="revenueChartHeader" type="string">
                  Override the header for the revenue chart. Defaults to `'Revenue'`.
                </ParamField>
              </Expandable>
            </ParamField>
          </Expandable>
        </ParamField>

        <ParamField body="summaries" type="ProfitAndLossSummariesStringOverrides">
          <Expandable title="ProfitAndLossSummariesStringOverrides properties">
            <ParamField body="revenueLabel" type="string">
              Label for the revenue summary card.
            </ParamField>

            <ParamField body="expensesLabel" type="string">
              Label for the expenses summary card.
            </ParamField>

            <ParamField body="netProfitLabel" type="string">
              Label for the net profit summary card.
            </ParamField>
          </Expandable>
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>