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

# Summary Cards

> Summarized Profit & Loss or cash flow metrics.

<img src="https://mintcdn.com/layerfinancialtechnologiesinc/dOKQpcu8ul1Jxqlc/images/components/pnl-cards.png?fit=max&auto=format&n=dOKQpcu8ul1Jxqlc&q=85&s=f003e7c24945ec8835c82bea2b24187c" alt="" width="2560" height="316" data-path="images/components/pnl-cards.png" />

```tsx theme={null}
import { ProfitAndLoss } from "@layerfi/components";
…
<ProfitAndLoss>
  <ProfitAndLoss.Summaries />
</ProfitAndLoss>
```

### Properties

<ParamField body="onTransactionsToReviewClick" type="() => void">
  Callback triggered when the user clicks the transactions-to-review CTA on the summary cards. Use this to navigate to the page in your app where users categorize their bank transactions.
</ParamField>

<ParamField body="chartConfig" type="ProfitAndLossChartConfig">
  Optional styling overrides for the mini donut charts and swatch colors on the 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="chartColorsList" type="string[]">
  Legacy way to override the palette shared by the revenue and expenses cards. Prefer `chartConfig.colors`, which lets you set separate palettes per card and an uncategorized color.
</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>

<ParamField body="stringOverrides" type="ProfitAndLossSummariesStringOverrides">
  Overrides for default strings in the component.

  <Expandable title="ProfitAndLossSummariesStringOverrides properties">
    <ParamField body="revenueLabel" type="string">
      Changes the label for revenue in the cards. Can pass in values such as "income" or another term. Defaults to "Revenue".
    </ParamField>

    <ParamField body="expensesLabel" type="string">
      Changes the label for expenses in the cards. Can pass in values such as "costs" or another term. Defaults to "Expenses".
    </ParamField>

    <ParamField body="netProfitLabel" type="string">
      Changes the label for net profit in the cards. Can pass in values such as "net income" or another term. Defaults to "Net Profit".
    </ParamField>

    <ParamField body="moneyInLabel" type="string">
      Changes the label for money in when using the cashflow reporting variant. Defaults to "Money in".
    </ParamField>

    <ParamField body="moneyOutLabel" type="string">
      Changes the label for money out when using the cashflow reporting variant. Defaults to "Money out".
    </ParamField>

    <ParamField body="netCashFlowLabel" type="string">
      Changes the label for net cash flow when using the cashflow reporting variant. Defaults to "Net cash flow".
    </ParamField>
  </Expandable>
</ParamField>