@get-asset/react
AssetProfitLossReport
Styled multi-period profit and loss table. The card header carries a period Select (Month / Quarter / Year) wired to the SDK's internal breakdown state — switching it re-fetches the report and the table re-renders with one column per period. Subtotal rows render bold; nested ledger rows are indented by depth. When the business has tags, the same searchable, grouped multi-select the transactions Tag column uses appears before the period Select — it cannot create new tag values. Checking tag values filters the report to amounts allocated to those tags (multiple tags are OR'd) and it hides itself when the business has none. The download button next to the period selector exports the same view as an XLSX file, using whatever query parameters the table is currently displaying — including the tag filter. Below the responsive breakpoint the table collapses to a single column with an arrow-picker period strip; above it, the period header sticks to the top of the page when scrolling. Pass insights (shown in the preview below) to render the AI insights panel inside the card beneath the table — it answers the listed questions from the insights endpoint automatically, using the parameters on screen, including the selected tags.
Built on the headless ProfitLossReport compound from @get-asset/sdk.
Preview
Profit & Loss Report
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 | — | Override the AssetProvider's year. The report is always scoped to the selected fiscal year; breakdown controls how that year is broken down. |
month | number | null | — | Override the AssetProvider's month (1-12). When set, the report locks to that single month — only one column is rendered and the header Select disables Quarter / Year. |
defaultBreakdown | "month" | "quarter" | "year" | — | Initial value of the Select. Defaults to "year". year → 1 column, quarter → 4 columns (Q1-Q4), month → 12 columns (Jan-Dec). Ignored when month is locked. |
records | ReportLine[] | — | Override fetched data with a single snapshot. |
tagOptions | ProfitLossTagOption[] | — | Override the fetched tag filter options ({ label, value }[], value in field:value format) — primarily for testing/storybook. Legacy — prefer tagFields. Pass [] to hide the searchable Select Tags control. |
tagFields | TagFilterField[] | — | Override the fetched tag fields ({ name, values }[]) — preferred over tagOptions for testing/storybook. Pass [] to hide the tag filter. |
state | "loading" | "error" | "empty" | — | Force a specific state for testing. |
insights | boolean | { questions?, ask? } | — | Render the AI insights panel inside the card, beneath the table. The panel is self-contained: pass `true` and it fetches answers from the profit & loss insights endpoint automatically, using the same parameters the report is showing. 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 pass an object to override the starter `questions`, or to inject `ask` — a fetcher returning a canned answer — to mock answers in docs or tests without hitting the API (this preview uses it). |
className | string | — | Forwarded to the outer card element. |