Thredfi Embedded App

Embeddable accounting platform for SaaS applications

Built with Vite + React + TypeScript + TailwindCSS

📦 Quick Install

npm install thredfi-embedded-app
# or
yarn add thredfi-embedded-app

🚀 Quick Start (30 seconds)

import { ThredfiProvider, BankTransactionsPage } from 'thredfi-embedded-app';
import 'thredfi-embedded-app/style.css';

function App() {
  const token = 'your-oauth2-token-from-backend'; // Fetch from your backend

  return (
    <ThredfiProvider token={token} businessId="business-123">
      <BankTransactionsPage />
    </ThredfiProvider>
  );
}

Note: Pass an OAuth2 access token (not an API key) to ThredfiProvider. See INTEGRATION.md for secure token fetching from your backend.

📚 Documentation

👉 INTEGRATION.md - Complete Integration Guide

This guide covers:

• ✅ NPM Package Integration (Recommended)
• ✅ UMD Script Integration (Legacy)
• ✅ Backend Token Generation
• ✅ Business Selector Implementation
• ✅ NPM vs UMD Comparison
• ✅ Step-by-step examples for both methods

📖 Available Components

// Provider (required)
import { ThredfiProvider } from 'thredfi-embedded-app';

// Page Components
import {
  AccountingDashboard,      // Overview with metrics & charts
  BankTransactionsPage,     // Transaction management
  ReportsPage,              // P&L, Balance Sheet, Cash Flow
  GeneralLedgerPage,        // Chart of accounts
  AccountsPayablePage,      // Bills & payments
} from 'thredfi-embedded-app';

// Hooks (optional)
import {
  useTheme,                 // Access/modify theme
  useNotifications,         // Show notifications
} from 'thredfi-embedded-app';

🛠️ Development Scripts

yarn dev          # Start development server
yarn build        # Build for production (ESM, CJS, UMD, types)
yarn preview      # Preview production build
yarn lint         # Run ESLint

🏗️ Project Structure

frontend/
├── src/
│   ├── components/       # Reusable components
│   ├── pages/            # Page components
│   ├── context/          # React contexts
│   ├── lib/              # Utilities
│   └── types/            # TypeScript types
├── public/               # Static assets
└── dist/                 # Build output

📝 Environment Variables (for development)

Create a .env file in the frontend directory:

VITE_API_URL=https://your-api-url.com
VITE_AUTH_TOKEN=your-auth-token
VITE_APP_ENV=development

🌐 Tech Stack

• ⚡ Vite - Build tool
• ⚛️ React 19 - UI framework
• 🟦 TypeScript - Type safety
• 🎨 TailwindCSS - Styling
• 🧭 React Router - Routing
• 🌍 i18next - Internationalization

📄 License

UNLICENSED - Proprietary software for Thredfi integration partners