Data Components

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

1
import { IntelligentTransactionTable } from "@openledger/accounting-react";
2
3
function AITransactions() {
4
  const { transactions, loadingStatus } = useTransactions();
5
6
  return (
7
    <IntelligentTransactionTable
8
      transactions={transactions || []}
9
      loadingStatus={loadingStatus}
10
    />
11
  );
12
}

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

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

1
import { BarChart } from "@openledger/accounting-react";
2
3
function RevenueExpensesChart() {
4
  return (
5
    <BarChart
6
      onStatsChange={(stats) => console.log("Stats:", stats)}
7
    />
8
  );
9
}

1
import { ThemedUnifiedDirectory } from "@openledger/accounting-react";
2
3
function AccountSelector() {
4
  return (
5
    <ThemedUnifiedDirectory
6
      items={accountsData}
7
      onSelect={(item) => setSelectedAccount(item)}
8
      title="Chart of Accounts"
9
    />
10
  );
11
}

1
import { FinancialOverview } from "@openledger/accounting-react";
2
import { useFinancialOverview } from "@openledger/accounting-react";
3
4
function Overview() {
5
  // Use useFinancialOverview hook to fetch data
6
  const { financialOverview, isLoading } = useFinancialOverview({
7
    month: "05",
8
    year: "2025",
9
    status: "all"
10
  });
11
12
  return (
13
    <FinancialOverview
14
      data={financialOverview}
15
    />
16
  );
17
}

1
import { LedgerTable } from "@openledger/accounting-react";
2
3
function GeneralLedger() {
4
  const { accountBalances, loadingStatus } = useGeneralLedger();
5
6
  return (
7
    <LedgerTable
8
      accounts={accountBalances || []}
9
      isLoading={loadingStatus === "loading"}
10
    />
11
  );
12
}

1
import { ReportWidget } from "@openledger/accounting-react";
2
3
function ProfitLossReport() {
4
  return (
5
    <ReportWidget
6
      title="Profit & Loss"
7
      period="monthly"
8
      type="profit_loss"
9
      onPeriodChange={(period) => console.log("Period:", period)}
10
    />
11
  );
12
}

1
import { HierarchicalTable } from "@openledger/accounting-react";
2
import { useGeneralLedger } from "@openledger/accounting-react";
3
4
function AccountsTable() {
5
  const { accountHierarchy, loadingStatus } = useGeneralLedger();
6
7
  const formatCurrency = (amount, useParentheses) => {
8
    const absAmount = Math.abs(amount);
9
    const formatted = new Intl.NumberFormat('en-US', {
10
      style: 'currency',
11
      currency: 'USD'
12
    }).format(absAmount);
13
14
    return amount < 0 && useParentheses ? `(${formatted})` : formatted;
15
  };
16
17
  return (
18
    <HierarchicalTable
19
      title="Chart of Accounts"
20
      hierarchy={{
21
        assets: accountHierarchy.filter(a => a.type === 'ASSET'),
22
        liabilities: accountHierarchy.filter(a => a.type === 'LIABILITY'),
23
        equity: accountHierarchy.filter(a => a.type === 'EQUITY'),
24
        revenue: accountHierarchy.filter(a => a.type === 'REVENUE'),
25
        expenses: accountHierarchy.filter(a => a.type === 'EXPENSE')
26
      }}
27
      formatCurrency={formatCurrency}
28
      period={{
29
        month: 5,
30
        year: 2025
31
      }}
32
    />
33
  );
34
}

1
import { JournalTable } from "@openledger/accounting-react";
2
import { useGeneralLedger } from "@openledger/accounting-react";
3
4
function JournalEntries() {
5
  const { journalEntries, loadingStatus } = useGeneralLedger();
6
7
  const formatAmount = (amount) => {
8
    return new Intl.NumberFormat('en-US', {
9
      style: 'currency',
10
      currency: 'USD'
11
    }).format(amount);
12
  };
13
14
  return (
15
    <JournalTable
16
      title="Journal Entries"
17
      entries={journalEntries || []}
18
      formatAmount={formatAmount}
19
      period={{
20
        month: 5,
21
        year: 2025
22
      }}
23
    />
24
  );
25
}