Component library

Dashboard

• <FinanceOverviewCard>

  financeStatsChartDashboard

  Two-column financial headline: left block (title, date range, total revenue with optional delta and footnote), right block (product condition headline, optional trend pill, year selector, multi-series monotone area chart), plus a three-column footer row for supporting metrics.

  When to use: Use for executive-style revenue or adoption snapshots in report readouts. Pass `chartMonths` and aligned `chartSeries[].values`; include at least one series (empty shows a muted placeholder). Keep series count to 2–4 for clarity. Footer `stats` should contain exactly three items.

  Preview

  Financial income

  1 Aug 2025 – 1 Nov 2025

  Total revenue+9.78%

  £8,240.00

  Increased 15% from last month

  Product condition

  75%2.8%

  Year202420252026

  Selling product

  £335,000

  Followers

  1,500

  Campaign

  560

  Prop	Type	Notes
  dateRange	string	Required. Human-readable range under the income title.Example: 1 Aug 2025 – 1 Nov 2025
  totalRevenueValue	string	Required. Large headline currency string.Example: £8,240.00
  incomeTitle	string	Optional. Default: "Financial income". Left column title.
  totalRevenueLabel	string	Optional. Default: "Total revenue". Label above the headline figure.
  totalRevenueDelta	string	Optional. Optional percentage chip; leading + uses success colour, leading − uses error.
  totalRevenueFootnote	string	Optional. Muted line under the revenue figure.
  conditionValue	string	Required. Large headline next to the chart header.Example: 75%
  conditionTitle	string	Optional. Default: "Product condition". Muted label above the condition value.
  conditionBadgeText	string	Optional. Pill text beside the condition value.Example: 2.8%
  conditionBadgeTrend	"up" | "down"	Optional. Default: down. Arrow direction inside the pill.Values: up, down
  years	string[]	Optional. Default: ["2025"]. Year `<select>` options.
  chartMonths	string[]	Required. X-axis labels in order (e.g. Jan … Jul).
  chartSeries	{ name: string; values: number[]; colorKey: "brand"|"sky"|"slate" }[]	Required. One or more series; each `values` array must match `chartMonths` length. If empty, a muted placeholder is shown instead of the chart.
  stats	{ label: string; value: string; labelTone?: "brand"|"sky"|"emerald" }[]	Required. Exactly three footer metrics.

  Examples

  <FinanceOverviewCard
      dateRange="1 Aug 2025 – 1 Nov 2025"
      totalRevenueDelta="+9.78%"
      totalRevenueValue="£8,240.00"
      totalRevenueFootnote="Increased 15% from last month"
      conditionValue="75%"
      conditionBadgeText="2.8%"
      years={["2024", "2025", "2026"]}
      chartMonths={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
      chartSeries={[
          { name: "Series A", values: [1200, 1800, 2200, 2600, 3000, 3400, 3800], colorKey: "sky" },
          { name: "Series B", values: [800, 1100, 1400, 1700, 2100, 2500, 2900], colorKey: "brand" },
          { name: "Series C", values: [400, 500, 600, 700, 800, 900, 1000], colorKey: "slate" }
      ]}
      stats={[
          { label: "Selling product", value: "£335,000", labelTone: "sky" },
          { label: "Followers", value: "1,500", labelTone: "sky" },
          { label: "Campaign", value: "560", labelTone: "emerald" }
      ]}
  />

• <PortfolioSummaryCard>

  financeStatsDataDashboard

  Headline portfolio card: NAV or AUM with optional delta pill and a grid of supporting metrics (returns, volatility, tracking error, cash, etc.).

  When to use: Use at the top of a portfolio or rebalancing report for the headline snapshot. Pair with `<AllocationDriftChart>` and `<RebalanceTradeList>` in the sections below.

  Often with: KPIKPIGridFinanceOverviewCardAnalyticsCard

  Preview

  Balanced growth portfolio

  As of 31 May 2026

  NAV

  £24.6m

  +1.8% MTD

  YTD return

  +4.2%

  Volatility (1y)

  9.1%

  Tracking error

  42 bps

  Cash

  8.2%

  Prop	Type	Notes
  title	string	Optional. Default: "Portfolio summary". Card heading.
  asOf	string	Optional. Valuation date label.
  navLabel	string	Optional. Default: "NAV". Label above the headline figure.
  navValue	string	Required. Headline NAV or AUM (include currency).
  navDelta	string	Optional. Optional change pill, e.g. "+1.8% MTD".
  navDeltaTone	"up" | "down" | "flat"	Optional. Default: up. Colours the delta pill.Values: up, down, flat
  metrics	{ label: string; value: string; tone?: "up" | "down" | "flat" }[]	Optional. Supporting metrics in a responsive grid (typically 3–4 items).

  Examples

  <PortfolioSummaryCard
    title="Balanced growth portfolio"
    asOf="31 May 2026"
    navValue="£24.6m"
    navDelta="+1.8% MTD"
    navDeltaTone="up"
    metrics={[
      { label: "YTD return", value: "+4.2%", tone: "up" },
      { label: "Volatility (1y)", value: "9.1%" },
      { label: "Tracking error", value: "42 bps" },
      { label: "Cash", value: "8.2%" }
    ]}
  />