View Components

Pre-built UI components for financial interfaces.

OpenLedgerView

A comprehensive component that integrates all financial views in a tabbed interface, giving your users access to the complete Open Ledger experience.

TypeScript
1import { OpenLedgerView } from "@openledger/accounting-react";
2
3function App() {
4return (
5<div className="app-container">
6<OpenLedgerView />
7</div>
8);
9}

DashboardView

A data visualization dashboard displaying key financial metrics including cash balance, profit/loss, revenue, and expenses.

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

TransactionsView

A component for displaying and managing financial transactions with advanced filtering and AI-powered categorization.

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

LedgerView

A double-entry accounting ledger view showing journal entries and the chart of accounts with balance calculations.

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

ReportView

A financial reporting component for generating and displaying standardized reports like Profit & Loss, Balance Sheet, and Cash Flow statements.

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

ChatView

An AI-powered financial assistant interface for natural language interaction with accounting data, with responsive design for both desktop and mobile.

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

OnboardingView

A guided onboarding experience to help users set up their financial accounts and preferences.

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

SettingsView

A component for managing application settings, account preferences, and integration configurations.

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

Context Hooks

Open Ledger provides several hooks to access financial data and functionality within your custom components.

useOpenLedgerContext

Access the OpenLedgerContext within your components.

TypeScript
1import { useOpenLedgerContext } from "@openledger/accounting-react";
2
3function EntityInfo() {
4const { auth, entityId, theme } = useOpenLedgerContext();
5
6return (
7
8<div>
9 <h2>Entity ID: {entityId}</h2>
10</div>
11); }

useTransactions

Access transaction-related data and functions.

TypeScript
1import { useTransactions } from "@openledger/accounting-react";
2
3function TransactionStats() {
4 const {
5 transactions,
6 transactionsByMonth,
7 loadingStatus,
8 mutate
9 } = useTransactions();
10
11 if (loadingStatus === "loading") return <div>Loading transactions...</div>;
12 if (loadingStatus === "error") return <div>Error loading transactions</div>;
13
14 return (
15 <div>
16 <h2>Transaction Count: {transactions?.length || 0}</h2>
17 </div>
18 );
19}

useAccounts

Access account-related data and functions.

TypeScript
1import { useAccounts } from "@openledger/accounting-react";
2
3function AccountStats() {
4const { accounts, loadingStatus } = useAccounts();
5
6if (loadingStatus === "loading") return <div>Loading accounts...</div>;
7if (loadingStatus === "error") return <div>Error loading accounts</div>;
8
9return (
10
11<div>
12 <h2>Account Count: {accounts?.length || 0}</h2>
13</div>
14); }

useGeneralLedger

Access general ledger data including journal entries and account balances.

TypeScript
1import { useGeneralLedger } from "@openledger/accounting-react";
2
3function LedgerStats() {
4 const { journalEntries, accountBalances, loadingStatus } = useGeneralLedger();
5
6 if (loadingStatus === "loading") return <div>Loading ledger data...</div>;
7
8 return (
9 <div>
10 <h2>Journal Entries: {journalEntries?.length || 0}</h2>
11 </div>
12 );
13}

useFinancialReports

Access financial report data and functions for generating reports.

TypeScript
1import { useFinancialReports } from "@openledger/accounting-react";
2
3function ReportData() {
4const {
5balanceSheet,
6incomeStatement,
7cashFlowStatement,
8loadingStatus
9} = useFinancialReports();
10
11if (loadingStatus === "loading") return <div>Loading reports...</div>;
12
13return (
14
15<div>
16 <h2>Total Assets: {balanceSheet?.totalAssets || 0}</h2>
17</div>
18); }

useChatApi

Access the financial assistant chat API for natural language interactions.

TypeScript
1import { useChatApi } from "@openledger/accounting-react";
2
3function CustomChat() {
4 const { sendMessage, messages, isLoading } = useChatApi();
5
6 return (
7 <div>
8 <button
9 onClick={() => sendMessage("Show me revenue trends")}
10 disabled={isLoading}
11 >
12 Analyze Revenue
13 </button>
14 </div>
15 );
16}

useFinancialOverview

Access key financial metrics and trend data for dashboard displays.

TypeScript
1import { useFinancialOverview } from "@openledger/accounting-react";
2
3function FinancialMetrics() {
4const {
5cashBalance,
6revenue,
7expenses,
8profit,
9trends,
10loadingStatus
11} = useFinancialOverview();
12
13if (loadingStatus === "loading") return <div>Loading data...</div>;
14
15return (
16
17<div>
18 <h2>Cash Balance: ${cashBalance.toFixed(2)}</h2>
19</div>
20); }

Customization

Open Ledger components can be customized using themes to match your application’s design. The theme object can be passed to the OpenLedgerProvider to modify colors, typography, and spacing throughout the UI.

TypeScript
1const theme = {
2 colors: {
3 primary: { hex: '#3366FF' },
4 secondary: { hex: '#FF6B3D' },
5 accent: { hex: '#00C851' },
6 text: { hex: '#212529' },
7 background: { hex: '#F8F9FA' }
8 }
9};
10
11<OpenLedgerProvider
12 entityId="your-entity-id"
13 developerId="your-developer-id"
14 developerSecret="your-api-key"
15 theme={theme}
16 apiUrl="your-api-url"
17>
18 <YourApp />
19</OpenLedgerProvider>

Next Steps

For detailed information on individual components, please refer to these sections: