Solopreneur Overview

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

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.

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.

​Properties

Properties