Form Components

1
import { Card } from "@openledger/accounting-react";
2
3
function BalanceCard() {
4
return (
5
6
<Card className="h-full p-4">
7
  <h2 className="text-lg font-medium">Cash Balance</h2>
8
  <div className="text-2xl font-semibold">$50,000</div>
9
  <p className="text-sm">As of January 31, 2023</p>
10
</Card>
11
); }

1
import { OLRuntimeProvider } from "@openledger/accounting-react";
2
import { TransactionAssistant } from "@openledger/accounting-react";
3
4
function AIEnhancedTransactions() {
5
  return (
6
    <OLRuntimeProvider>
7
      <TransactionAssistant
8
        transactions={transactions}
9
        mutate={refreshTransactions}
10
        loadingStatus="success"
11
      />
12
    </OLRuntimeProvider>
13
  );
14
}

1
import { ConnectBankAccount } from "@openledger/accounting-react";
2
3
function BankConnection() {
4
return (
5
6
<ConnectBankAccount
7
  onSuccess={(accounts) => console.log("Connected accounts:", accounts)}
8
  onExit={() => console.log("Connection flow exited")}
9
/>
10
); }

1
import { CategorizeAllButton } from "@openledger/accounting-react";
2
import { useTransactions } from "@openledger/accounting-react";
3
4
function TransactionTools() {
5
  const { transactions, mutate } = useTransactions();
6
7
  return (
8
    <CategorizeAllButton
9
      transactions={transactions || []}
10
      onComplete={() => {
11
        mutate();
12
        console.log('Categorization complete');
13
      }}
14
    />
15
  );
16
}

1
import { SyncPlaidButton } from "@openledger/accounting-react";
2
3
function SyncControls() {
4
return (
5
6
<SyncPlaidButton
7
  onSuccess={() => console.log("Sync completed")}
8
  onError={(error) => console.error("Sync error:", error)}
9
/>
10
); }

1
import { TransactionForm } from "@openledger/accounting-react";
2
import { useOpenLedgerContext } from "@openledger/accounting-react";
3
4
function EditTransaction() {
5
  const { categories } = useOpenLedgerContext();
6
7
  return (
8
    <TransactionForm
9
      transaction={selectedTransaction}
10
      categories={categories || []}
11
      onSubmit={(values) => handleUpdateTransaction(values)}
12
      isSubmitting={isLoading}
13
    />
14
  );
15
}