Data Components

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

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

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

1
import { HierarchicalTable } from "@openledger/accounting-react";
2
import { useAccounts } from "@openledger/accounting-react";
3
4
function ChartOfAccounts() {
5
  const { accounts, loadingStatus } = useAccounts();
6
7
  return (
8
    <HierarchicalTable
9
      data={accounts || []}
10
      isLoading={loadingStatus === "loading"}
11
      columns={[
12
        { header: "Account Name", accessor: "name" },
13
        { header: "Type", accessor: "type" },
14
        { header: "Balance", accessor: "balance", align: "right" }
15
      ]}
16
    />
17
  );
18
}

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
return (
8
<JournalTable
9
entries={journalEntries || []}
10
isLoading={loadingStatus === "loading"}
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 ProfitLossChart() {
4
return (
5
<BarChart
6
onStatsChange={(stats) => {
7
console.log("Revenue:", stats.revenue);
8
console.log("Expenses:", stats.expenses);
9
console.log("Profit:", stats.profit);
10
}}
11
/>
12
);
13
}

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 changed:", period)}
10
    />
11
  );
12
}

1
import { FinancialOverview } from "@openledger/accounting-react";
2
3
function Dashboard() {
4
return (
5
<FinancialOverview
6
onMetricsLoad={(metrics) => console.log("Metrics loaded:", metrics)}
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 { 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
<TransactionAssistant
9
transactions={transactions || []}
10
mutate={mutate}
11
loadingStatus={loadingStatus as "loading" | "error" | "success"}
12
/>
13
);
14
}