@get-asset/react
AssetOperatingExpensesCard
Styled card showing the largest expense categories for a period with proportional bars and amounts. Period defaults to the AssetProvider's year/month. Pass insights(shown in the preview) to render the AI insights panel to the left of the categories — it answers the listed questions from the profit & loss insights endpoint automatically.
Built on the headless OperatingExpensesCard compound from @get-asset/sdk.
Preview
Operating Expenses
Trends are generated and may include inaccuracies.
$68,100.00
Total Expense
Payroll$32,000.00
Rent$18,000.00
Software$9,500.00
Marketing$6,200.00
Travel$2,400.00
Required scopes
The access token used by AssetProvider must include this scope for this primitive to fetch data successfully:
report:read
API reference
Root props
| Prop | Type | Default | Description |
|---|---|---|---|
year | number | — | Fiscal year to report on. Falls back to the AssetProvider's year. |
month | number | null | — | Month (1-12). When set the card scopes categories to that single month; null explicitly forces a whole-year range. Falls back to the AssetProvider's month (default: no month). |
limit | number | 5 | Max number of categories to display. |
categories | OperatingExpenseCategoryOverride[] | — | Override fetched data. Each entry: { name, amount }. Skips the API call. |
state | "loading" | "error" | "empty" | — | Force a specific state for testing. |
insights | boolean | { questions?, ask? } | — | Show the AI insights panel to the left of the categories (12-col grid: insights 4, categories 8). Pass `true` and it fetches answers from the profit & loss insights endpoint automatically for the period on screen. Alongside the starter questions, an “Ask something else” input lets people type their own — same endpoint, 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 categories render 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 `categories` 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
Operating Expenses
Total Expense
Success
Operating Expenses
$68,100.00
Total Expense
Payroll$32,000.00
Rent$18,000.00
Software$9,500.00
Marketing$6,200.00
Travel$2,400.00
EmptyNo categorized expenses for the year.
Operating Expenses
—
Total Expense
Connect your financial accounts to see your operating expenses here.
Error
Operating Expenses
We couldn't load your Operating Expenses. 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`.