> ## 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/dOKQpcu8ul1Jxqlc/images/pages/accounting-overview.png?fit=max&auto=format&n=dOKQpcu8ul1Jxqlc&q=85&s=1a22dcfb6bc10b1147b3654374af500f" alt="Accounting Overview" width="2560" height="2940" data-path="images/pages/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="chartConfig" type="ProfitAndLossChartConfig">
              Optional styling overrides for the mini donut charts and swatch colors on the summary cards. Takes precedence over `chartColorsList` where both are supplied.

              <Expandable title="ProfitAndLossChartConfig properties">
                <ParamField body="colors" type="object">
                  <Expandable title="colors properties">
                    <ParamField body="revenue" type="string[]">
                      Ordered palette for the revenue card's mini chart and swatch. Cycles with reduced opacity once exhausted.
                    </ParamField>

                    <ParamField body="expenses" type="string[]">
                      Ordered palette for the expenses card's mini chart and swatch. Cycles with reduced opacity once exhausted.
                    </ParamField>

                    <ParamField body="uncategorized" type="string">
                      Color for the uncategorized portion of each card's mini chart and swatch. Omit to keep the default neutral color.
                    </ParamField>
                  </Expandable>
                </ParamField>
              </Expandable>
            </ParamField>

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

        <ParamField body="chart" type="object">
          Configuration for the P\&L chart.

          <Expandable title="chart properties">
            <ParamField body="chartConfig" type="ProfitAndLossChartConfig">
              Optional styling overrides for the chart.

              <Expandable title="ProfitAndLossChartConfig properties">
                <ParamField body="barChart" type="object">
                  <Expandable title="barChart properties">
                    <ParamField body="barWidth" type="number" default="20">
                      Width of the bars, in pixels.
                    </ParamField>

                    <ParamField body="compactBarWidth" type="number">
                      Width of the bars when the chart renders in its compact layout (below 620px wide). Defaults to half of `barWidth`.
                    </ParamField>
                  </Expandable>
                </ParamField>
              </Expandable>
            </ParamField>
          </Expandable>
        </ParamField>

        <ParamField body="detailedCharts" type="object">
          Configuration for the revenue and expenses breakdown charts, keyed by scope.

          <Expandable title="detailedCharts properties">
            <ParamField body="revenue" type="object">
              <Expandable title="revenue properties">
                <ParamField body="chartConfig" type="ProfitAndLossChartConfig">
                  Optional styling overrides for the revenue breakdown chart. Takes precedence over `chartColorsList` where both are supplied.

                  <Expandable title="ProfitAndLossChartConfig properties">
                    <ParamField body="colors" type="object">
                      <Expandable title="colors properties">
                        <ParamField body="revenue" type="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.
                        </ParamField>

                        <ParamField body="uncategorized" type="string">
                          Color for the uncategorized slice and its legend swatch. Omit to keep the default dot-pattern donut fill and neutral swatch color.
                        </ParamField>
                      </Expandable>
                    </ParamField>

                    <ParamField body="donutChart" type="object">
                      <Expandable title="donutChart properties">
                        <ParamField body="innerRadius" type="string | number" default="'91%'">
                          Inner radius of the donut chart.
                        </ParamField>

                        <ParamField body="outerRadius" type="string | number" default="'100%'">
                          Outer radius of the donut chart.
                        </ParamField>
                      </Expandable>
                    </ParamField>
                  </Expandable>
                </ParamField>
              </Expandable>
            </ParamField>

            <ParamField body="expenses" type="object">
              <Expandable title="expenses properties">
                <ParamField body="chartConfig" type="ProfitAndLossChartConfig">
                  Same shape as `revenue.chartConfig` (with `colors.expenses` instead of `colors.revenue`), applied to the expenses breakdown chart.
                </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>
