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

# Bookkeeping Overview

> Bookkeeping Overview Page.

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](/embedded-components/pages/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.

<img src="https://mintcdn.com/layerfinancialtechnologiesinc/dOKQpcu8ul1Jxqlc/images/pages/bookkeeping-overview.png?fit=max&auto=format&n=dOKQpcu8ul1Jxqlc&q=85&s=4c442de21b5a4af228edefdab58be3df" alt="Bookkeeping Overview" width="2560" height="3460" data-path="images/pages/bookkeeping-overview.png" />

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

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

### Properties

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

<ParamField body="onClickReconnectAccounts" type="() => void">
  Callback passed to the `<Tasks>` component, triggered when the user clicks the reconnect-accounts action.
</ParamField>

<ParamField body="slotProps" type="BookkeepingOverviewSlotProps">
  Configuration passed through to components within the page layout.

  <Expandable title="BookkeepingOverviewSlotProps 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="stringOverrides" type="BookkeepingOverviewStringOverrides">
  Customize text and labels throughout the page.

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

    <ParamField body="tasks" type="TasksStringOverrides">
      <Expandable title="TasksStringOverrides properties">
        <ParamField body="header" type="string">
          Override the header text for the tasks widget.
        </ParamField>
      </Expandable>
    </ParamField>

    <ParamField body="profitAndLoss" type="BookkeepingOverviewProfitAndLossStringOverrides">
      <Expandable title="BookkeepingOverviewProfitAndLossStringOverrides properties">
        <ParamField body="header" type="string">
          Header text for the P\&L section. Defaults to `'Profit & Loss'`.
        </ParamField>

        <ParamField body="detailedCharts" type="ProfitAndLossDetailedChartsStringOverrides">
          <Expandable title="ProfitAndLossDetailedChartsStringOverrides properties">
            <ParamField body="detailedChartStringOverrides" type="DetailedChartStringOverrides">
              <Expandable title="DetailedChartStringOverrides properties">
                <ParamField body="expenseChartHeader" type="string">
                  Header for the expenses chart.
                </ParamField>

                <ParamField body="revenueChartHeader" type="string">
                  Header for the revenue chart.
                </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>
