OnSystem — Fintech Bundle
LiveDataBadge
@onsystem-fintech/LiveDataBadgeStructurally-visible demo-vs-live indicator. Any real-time-styled component renders this next to it by convention — the live/demo distinction is a default, not an opt-in a builder can forget.
MaskedValue
@onsystem-fintech/MaskedValueShared with the Internal Tools kit (StatCard's masked prop composes this too) — one consistent reveal/hide pattern for balances and account numbers, installed once at the same shared path.
ProgressScale
@onsystem-fintech/ProgressScaleA progress bar that can never render without a stated reference scale — min/max are required props specifically so a caller has to decide the scale, and it's always labeled.
ErrorState
@onsystem-fintech/ErrorStateReassuring error presentation for money-related contexts — replaces the raw dev-error overlays the fintech audit found leaking mid-workflow, with a calm explanation that data is safe.
Money
@onsystem-fintech/MoneyA figure that will not render without a currency. Precision comes from the currency's own ISO minor units rather than a .toFixed(2) at the call site, and the sign is derived from the direction of the movement while the amount stays a magnitude, so an outgoing payment cannot be signed twice.
AccountSummary
@onsystem-fintech/AccountSummaryA row of balance cards, masked-value as a first-class variant. Composes StatCard the same fixed four-slot way Reports.tsx does for the Internal Tools kit.
Accounts
Accounts (multi-currency)
Accounts
Accounts
TransactionList
@onsystem-fintech/TransactionListFilterable, chronologically-guaranteed transaction list — initialSort locks in date order regardless of incoming row order, fixing the audit's unsorted 'Recent Expenses' failure. Reuses the same DataTable + FilterBar installed for Internal Tools.
Transactions
Ordered and totalled by booking date. Value dates may fall on a later day, so a balance here can differ from the one your bank shows until everything settles.
| Date | Merchant | Category | Amount | Balance |
|---|---|---|---|---|
| Jul 12, 2026 | Whole Foods | Groceries | -$84.21 | $6,685.74 |
| Jul 11, 2026 | Payroll deposit | Income | $3,200.00 | $6,769.95 |
| Jul 10, 2026 | Electric Co. | Utilities | -$142.50 | $3,569.95 |
| Jul 8, 2026 | Downtown Apartments | Rent | -$1,850.00 | $3,712.45 |
| Jul 6, 2026 | Transit Authority | Transport | -$62.00 | $5,562.45 |
| Jul 3, 2026 | Corner Cafe | Dining | -$18.40 | $5,624.45 |
Transactions
| Date | Merchant | Category | Amount |
|---|---|---|---|
Transactions
| Date | Merchant | Category | Amount |
|---|---|---|---|
No records yet Nothing has been added here. | |||
Transactions
| Date | Merchant | Category | Amount |
|---|---|---|---|
Failed to load records Check your connection and try again. | |||
CategoryBreakdown
@onsystem-fintech/CategoryBreakdownA donut chart with an always-labeled legend — slice colors only ever come from the five semantic roles, and every slice pairs a swatch with a text label and formatted value.
Spending by category
- Housing$1,850.0067%
- Groceries$512.0019%
- Transport$210.008%
- Dining out$184.007%
Spending by category
PriceChart
@onsystem-fintech/PriceChartA real-time price chart with an explicit live-vs-demo data state, required (not optional) — fixes the audit's 'Real-Time Chart' template whose animated last point faked liveliness with no disclosure.
InvoiceGenerator
@onsystem-fintech/InvoiceGeneratorItemized invoice with computed totals — quantity × unit price is always derived, never independently entered, so line totals and the document total can't drift apart. Fully interactive below.
TransferFlow
@onsystem-fintech/TransferFlowA payment/transfer action gated by a type-to-confirm step — moving money is at least as consequential as a permanent record delete, so a reflexive click can't complete it. Fully interactive below.