View Components

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

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

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

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

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

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

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

1
import { useTransactions } from "@openledger/accounting-react";
2
3
function 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
16
<div>
17
  <h2>Transaction Count: {transactions?.length || 0}</h2>
18
</div>
19
); }

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

1
const 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-company-id"
13
  developerId="your-enterprise-id"
14
  developerSecret="your-enterprise-secret"
15
  theme={theme}
16
  apiUrl="your-api-url"
17
>
18
  <YourApp />
19
</OpenLedgerProvider>