View Components

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

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

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

1
import { useChatApi } from "@openledger/accounting-react";
2
3
function 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
}

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

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-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>