Data Components

TransactionTable

A comprehensive table component for displaying and managing financial transactions with advanced filtering, sorting, and categorization capabilities.

TypeScript

1 import { TransactionTable } from "@openledger/accounting-react";
2 
3 function TransactionList() {
4 return (
5 
6 <TransactionTable />
7 ); }

AreaChart

A responsive area chart component for visualizing financial data trends over time, perfect for cash balances and cumulative metrics.

TypeScript

1 import { AreaChart } from "@openledger/accounting-react";
2 
3 function CashBalanceChart() {
4 return (
5 
6 <AreaChart
7   onBalanceChange={(balance) => console.log("Current balance:", balance)}
8 />
9 ); }

Props

Prop	Type	Description
`onStatsChange`	`(stats: { revenue: number; expenses: number; profit: number; revenueChange: number; expensesChange: number; profitChange: number }) => void`	Callback with financial statistics
`height`	`number`	Chart height (optional)
`width`	`number`	Chart width (optional)

BarChart

A bar chart component for comparing financial metrics across categories or time periods, ideal for profit and loss visualization.

TypeScript

1 import { BarChart } from "@openledger/accounting-react";
2 
3 function ProfitLossChart() {
4 return (
5 
6 <BarChart
7   onStatsChange={(stats) => {
8     console.log("Revenue:", stats.revenue);
9     console.log("Expenses:", stats.expenses);
10     console.log("Profit:", stats.profit);
11   }}
12 />
13 ); }

Props

Prop	Type	Description
`onStatsChange`	`(stats: { revenue: number; expenses: number; profit: number; revenueChange: number; expensesChange: number; profitChange: number }) => void`	Callback with financial statistics
`height`	`number`	Chart height (optional)
`width`	`number`	Chart width (optional)

StatCard

Component for displaying financial metrics with trend indicators and comparison data.

TypeScript

1 import { StatCard } from "@openledger/accounting-react";
2 
3 function RevenueMetric() {
4 return (
5 
6 <StatCard
7   title="Revenue"
8   value="$50,000"
9   change={12.5}
10   changeText="vs last month"
11   compact={false}
12 />
13 ); }

Props

Prop	Type	Description
`title`	`string`	Card title
`value`	`string`	Main metric value
`change`	`number`	Percentage change
`changeText`	`string`	Comparison text
`compact`	`boolean`	Display in compact mode

TaskList

Component that displays actionable financial tasks, prioritized by importance and deadline.

TypeScript

1 import { TaskList } from "@openledger/accounting-react";
2 
3 function AccountingTasks() {
4 return <TaskList />;
5 }

The TaskList intelligently suggests tasks based on:

Uncategorized transactions
Accounts that need reconciliation
Upcoming tax deadlines
Financial reports that need review

TransactionAssistant

AI-powered assistant for categorizing and managing transactions with natural language capabilities.

TypeScript

1 import { TransactionAssistant } from "@openledger/accounting-react";
2 import { useTransactions } from "@openledger/accounting-react";
3 
4 function TransactionManager() {
5 const { transactions, loadingStatus, mutate } = useTransactions();
6 
7 return (
8 
9 <TransactionAssistant
10   transactions={transactions || []}
11   mutate={mutate}
12   loadingStatus={loadingStatus as "loading" | "error" | "success"}
13 />
14 ); }

Props

Prop	Type	Description
`transactions`	`Transaction[]`	Array of transaction objects
`mutate`	`() => void`	Function to refresh transactions
`loadingStatus`	`”loading” \| “error” \| “success”`	Current loading state