LedgerFlow B2B accounting frontend — single-page app for POs, invoices, and EDI
Single-page B2B accounting app with PO management (import, edit), invoice creation with auto due date calculation, EDI preview/submit, Google SSO, and sign out support. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> |
||
|---|---|---|
| .gitignore | ||
| accounting-app.html | ||
| config.js | ||
| login.html | ||
| README.md | ||
| serve.js | ||
LedgerFlow Frontend
Single-page web app for LedgerFlow — a B2B accounting tool for managing purchase orders, invoices, and EDI (X12 810) submissions to Amazon.
Deployed to S3 + CloudFront at https://ledgerflow.seahaven.com
Stack
- Vanilla HTML/CSS/JS (no framework, no build step)
- Google Identity Services for SSO
- Calls the LedgerFlow backend API (Lambda + API Gateway)
Files
ledgerflow_frontend/
├── accounting-app.html Main app (dashboard, POs, invoices, EDI, settings)
├── login.html Google SSO login page
├── config.js API URL + Google Client ID configuration
├── serve.js Local dev server (Node.js)
├── .gitignore
└── README.md
Features
Purchase Orders
- Import POs from external DynamoDB table (Coupa purchase-orders)
- Add POs manually
- Edit POs after import (vendor, amount, status, dates, notes)
- Bill against POs to create invoices
Invoices
- Create invoices linked to POs
- Line items with quantity, unit price, and descriptions
- Payment terms: Net 15, Net 30, Net 45, Net 60, 90 NET, Due on Receipt
- Due date auto-calculates based on selected payment terms
- Tax rate from company settings
- Save as draft or queue for EDI submission
EDI (X12 810)
- Preview generated X12 documents before submission
- Submit invoices to AWS B2B Data Interchange
- Transaction history and status tracking
- ISA control number tracking
Settings / Connections
- Company info (name, tax ID, invoice prefix, currency)
- DynamoDB connection for external PO import
- EDI configuration (sender/receiver IDs)
- Connection status indicators in sidebar
Other
- Google SSO with domain restriction
- Sign out button in sidebar
- Real-time dashboard with recent POs, invoices, and activity log
Local Development
node serve.js
# Opens at http://localhost:3000
The frontend calls the deployed AWS backend — there is no local backend server.
Deployment
The frontend is deployed automatically as part of cdk deploy in the backend repo. CDK's BucketDeployment syncs this directory to S3 and invalidates the CloudFront cache.
# From the backend repo:
cd infra
GOOGLE_CLIENT_ID=<your-client-id> npx cdk deploy --require-approval never
Configuration
Edit config.js to set:
window.LEDGERFLOW_API_URL = "https://your-api-gateway-url.amazonaws.com";
window.GOOGLE_CLIENT_ID = "your-client-id.apps.googleusercontent.com";