@get-asset/react
AssetProfitLossCard
Styled card showing twelve month-by-month revenue and expense pairs for a fiscal year. Bars share a scale derived from the largest value in the set. The chart always shows 12 months — the AssetProvider's month is ignored. Pass insights(shown in the preview below) to render the AI insights panel inside the card; it answers the listed questions from the insights endpoint automatically for the year on screen. An “Ask something else” input lets people type their own question, which returns the same structured answer.
Built on the headless ProfitLossCard compound from @get-asset/sdk.
Preview
Profit & Loss
Trends are generated and may include inaccuracies.
Required scopes
The access token used by AssetProvider must include these scopes for this primitive to fetch data successfully:
report:readtag:read
API reference
Root props
| Prop | Type | Default | Description |
|---|---|---|---|
year | number | — | Fiscal year to report on. Falls back to the AssetProvider's year. The chart always shows 12 months for the year (the provider's month is ignored). |
months | ProfitLossMonthOverride[] | — | Override fetched data. Each entry: { month, revenue, expense }. Skips the API call. |
tagFields | TagFilterField[] | — | Override the fetched tag filter fields — primarily for testing/storybook. When the business has tag values, a searchable Select Tags control renders in the card header (the same grouped multi-select the transactions Tag column uses, without value creation); selecting tags refetches the chart and scopes the insights panel. |
state | "loading" | "error" | "empty" | — | Force a specific state for testing. |
insights | boolean | { questions?, ask? } | — | Render the AI insights panel inside the card. Pass `true` and it fetches answers from the profit & loss insights endpoint automatically for the year on screen. Alongside the starter questions, an “Ask something else” input lets people type their own — it runs through the same endpoint and returns the same structured answer. Optionally override the starter `questions`, or inject `ask` to mock answers in docs / tests (this preview uses it). |
locked | boolean | — | Gate the report for a viewer who isn't entitled to it. Activates the SDK's Locked state: the chart renders blurred and inert as a teaser behind a lock and the upgrade CTA; the insights panel is omitted. No live fetch runs while locked — the teaser shows built-in placeholder data (a `months` override still wins). |
upsell | { title?, description?, ctaLabel?, onUpgrade? } | — | Customize the locked state's copy and action. `ctaLabel` and `onUpgrade` are the tenant's upgrade wording and handler; `title` / `description` default per report. |
className | string | — | Forwarded to the outer card element. |
States
Loading
Profit & Loss
Loading your profit and loss data...
Success
Profit & Loss
EmptyNo P&L data for the year.
Profit & Loss
Connect your financial accounts to see your profit and loss graph here.
Error
Profit & Loss
We couldn't load your Profit & Loss. Refresh the page or click try again.
LockedViewer isn't entitled to the report — a built-in placeholder teaser renders blurred behind the upgrade prompt. Pass `upsell` to customize the copy and wire `onUpgrade`.