Solopreneur Overview

Solopreneur Overview Page.

This view provides an out of the box overview dashboard tailored to solopreneurs. It leads with cash flow: the summary tiles at the top default to the cashflow reporting variant (money in, money out, and net cash flow), each with a categorized vs. uncategorized breakdown.

The page consists of an onboarding banner (prompting the user to link bank accounts and set up their tax profile), the cashflow summary tiles, and a grid of summary cards for profit & loss, expenses, tax estimates, and mileage tracking.

import { SolopreneurOverview } from '@layerfi/components'

<SolopreneurOverview
    interactionProps={{
        banner: {
            onSetupTaxProfile: () => navigate('../tax-profile'),
        },
        cashflowSummaries: {
            onTransactionsToReviewClick: () => navigate('../bank-transactions'),
        },
    }}
/>

Properties

chartColorsList · string[]

List of colors to use for the expenses breakdown chart. Specified in hex strings, i.e. ['#FF0000', '#00FF00', '#0000FF'].

stringOverrides · SolopreneurOverviewStringOverrides

Customize text and labels throughout the page.

Show SolopreneurOverviewStringOverrides properties

title · string

Override the page title. Defaults to 'Overview'.

profitAndLossSummaries · ProfitAndLossSummariesStringOverrides

Labels for the summary tiles at the top of the page.

Show ProfitAndLossSummariesStringOverrides properties

revenueLabel · string

Label for the revenue summary tile.

expensesLabel · string

Label for the expenses summary tile.

netProfitLabel · string

Label for the net profit summary tile.

moneyInLabel · string

Label for the money in summary tile when using the cashflow reporting variant. Defaults to 'Money in'.

moneyOutLabel · string

Label for the money out summary tile when using the cashflow reporting variant. Defaults to 'Money out'.

netCashFlowLabel · string

Label for the net cash flow summary tile when using the cashflow reporting variant. Defaults to 'Net cash flow'.

summaryCards · object

Titles for the summary cards in the grid below the summary tiles.

Show summaryCards properties

profitAndLoss · SummaryCardStringOverrides

Show SummaryCardStringOverrides properties

title · string

Override the title of the profit & loss summary card.

expenses · SummaryCardStringOverrides

Show SummaryCardStringOverrides properties

title · string

Override the title of the expenses summary card.

taxEstimates · SummaryCardStringOverrides

Show SummaryCardStringOverrides properties

title · string

Override the title of the tax estimates summary card.

mileageTracking · SummaryCardStringOverrides

Show SummaryCardStringOverrides properties

title · string

Override the title of the mileage tracking summary card.

interactionProps · SolopreneurOverviewInteractionProps

Callbacks invoked when the user interacts with elements of the page.

Show SolopreneurOverviewInteractionProps properties

banner · object

Show banner properties

onSetupTaxProfile · () => void

A function which navigates to the tax profile setup page of your app. This will be triggered when clicking the “Set up your tax profile” button on the onboarding banner. If omitted, the button is not shown.

cashflowSummaries · object

Show cashflowSummaries properties

onTransactionsToReviewClick · () => 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 in the summary tiles.

summaryCards · object

Interaction callbacks for the summary cards in the grid. Each card accepts the same shape.

Show summaryCards properties

profitAndLoss · SummaryCardInteractionProps

Show SummaryCardInteractionProps properties

onClickExpand · () => void

Called when the user clicks the expand button on the profit & loss summary card. The expand button is only rendered when this callback is provided.

expenses · SummaryCardInteractionProps

Show SummaryCardInteractionProps properties

onClickExpand · () => void

Called when the user clicks the expand button on the expenses summary card. The expand button is only rendered when this callback is provided.

taxEstimates · SummaryCardInteractionProps

Show SummaryCardInteractionProps properties

onClickExpand · () => void

Called when the user clicks the expand button on the tax estimates summary card. The expand button is only rendered when this callback is provided.

mileageTracking · SummaryCardInteractionProps

Show SummaryCardInteractionProps properties

onClickExpand · () => void

Called when the user clicks the expand button on the mileage tracking summary card. The expand button is only rendered when this callback is provided.

slotProps · object

Configuration passed through to components within the page layout.

Show slotProps properties

profitAndLoss · object

Show profitAndLoss properties

summaries · ProfitAndLossSummariesSlotProps

Configuration for the summary tiles at the top of the page.

Show ProfitAndLossSummariesSlotProps properties

chartConfig · ProfitAndLossChartConfig

Optional styling overrides for the mini donut charts and swatch colors on the summary tiles. Takes precedence over chartColorsList where both are supplied.

Show ProfitAndLossChartConfig properties

colors · object

Show colors properties

revenue · string[]

Ordered palette for the revenue tile’s mini chart and swatch. Cycles with reduced opacity once exhausted.

expenses · string[]

Ordered palette for the expenses tile’s mini chart and swatch. Cycles with reduced opacity once exhausted.

uncategorized · string

Color for the uncategorized portion of each tile’s mini chart and swatch. Omit to keep the default neutral color.

reportingVariant · ProfitAndLossSummariesReportingVariant

Controls which reporting mode the summary tiles display. On this page, defaults to cashflow.

Show ProfitAndLossSummariesReportingVariant properties

type · 'profitAndLoss' | 'cashflow' · default: "cashflow"

With 'cashflow' (the default on this page), the tiles show money in, money out, and net cash flow. With 'profitAndLoss', the tiles show revenue, expenses, and net profit.

showProfitAndLossBreakdown · boolean · default: "true"

Only applies when type is 'cashflow'. Controls whether the money in and money out tiles include a categorized vs. uncategorized breakdown footer.

summaryCards · object

Configuration for the summary cards in the grid below the summary tiles.

Show summaryCards properties

profitAndLoss · object

Show profitAndLoss properties

chartConfig · ProfitAndLossChartConfig

Optional styling overrides for the trend chart on the profit & loss summary card.

Show ProfitAndLossChartConfig properties

barChart · object

Show barChart properties

barWidth · number · default: "20"

Width of the bars, in pixels.

compactBarWidth · number

Width of the bars when the chart renders in its compact layout (below 620px wide). Defaults to half of barWidth.

expenses · object

Show expenses properties

chartConfig · ProfitAndLossChartConfig

Optional styling overrides for the donut chart on the expenses summary card. Takes precedence over the page-level chartColorsList where both are supplied.

Show ProfitAndLossChartConfig properties

colors · object

Show colors properties

expenses · 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.

uncategorized · string

Color for the uncategorized slice and its legend swatch. Omit to keep the default dot-pattern donut fill and neutral swatch color.

donutChart · object

Show donutChart properties

innerRadius · string | number · default: "'91%'"

Inner radius of the donut chart.

outerRadius · string | number · default: "'100%'"

Outer radius of the donut chart.

plaidHostedLinkConfig · PlaidHostedLinkConfig

Configuration for using Plaid Hosted Link instead of the embedded Plaid modal when linking bank accounts from the onboarding banner. When provided, account linking opens a Plaid-owned page in the browser rather than displaying an embedded modal.

Show PlaidHostedLinkConfig properties

isMobileApp · boolean

Set to true when the user will open the hosted link in an ASWebAuthenticationSession (iOS) or Android Custom Tab. This tells Plaid to use the correct redirect handling for mobile contexts.

redirectUri · string

Universal Link (iOS) or App Link (Android) that opens your app. Used when Plaid redirects from a third-party OAuth app (e.g., a bank’s app) back to your app during app-to-app authentication.

completionRedirectUri · string

URI to redirect to after the user completes the Plaid hosted link flow (e.g., myapp://plaid-complete). Recommended for mobile apps to automatically close the hosted link session and return to your app. If not provided, the user sees a “Return to app” message and must navigate back manually.

navigateToHostedLink · (hostedLinkUrl: string) => void | Promise<void> · required

Callback function that navigates the user to the Plaid Hosted Link URL. This function receives the Plaid-owned URL and should open it in the device’s browser or an in-app browser. Required for all hosted link configurations.