> ## 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.

<img src="https://mintcdn.com/layerfinancialtechnologiesinc/AL47DXJh6sGqDpvZ/images/accounting-overview.png?fit=max&auto=format&n=AL47DXJh6sGqDpvZ&q=85&s=8fdc1b23828f280af305d23f43b2b32e" alt="Accounting Overview" width="2560" height="2988" data-path="images/accounting-overview.png" />

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

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

### Properties

<ParamField body="showTitle" type="boolean" default="true">
  Controls whether the page title/header is displayed.
</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="slotProps" type="AccountingOverviewSlotProps">
  Configuration passed through to components within the page layout.

  <Expandable title="AccountingOverviewSlotProps properties">
    <ParamField body="profitAndLoss" type="object">
      <Expandable title="profitAndLoss properties">
        <ParamField body="summaries" type="ProfitAndLossSummariesSlotProps">
          Configuration for the P\&L summary cards.

          <Expandable title="ProfitAndLossSummariesSlotProps properties">
            <ParamField body="reportingVariant" type="ProfitAndLossSummariesReportingVariant">
              Controls which reporting mode the summary cards display. Defaults to profit and loss.

              <Expandable title="ProfitAndLossSummariesReportingVariant properties">
                <ParamField body="type" type="'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.
                </ParamField>

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

            <ParamField body="moneyInLabel" type="string">
              Label for the money in summary card when using the cashflow reporting variant. Defaults to `'Money in'`.
            </ParamField>

            <ParamField body="moneyOutLabel" type="string">
              Label for the money out summary card when using the cashflow reporting variant. Defaults to `'Money out'`.
            </ParamField>

            <ParamField body="netCashFlowLabel" type="string">
              Label for the net cash flow summary card when using the cashflow reporting variant. Defaults to `'Net cash flow'`.
            </ParamField>
          </Expandable>
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>
