97 lines
2.5 KiB
Markdown
97 lines
2.5 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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.
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# From the backend repo:
|
||
|
|
cd infra
|
||
|
|
GOOGLE_CLIENT_ID=<your-client-id> npx cdk deploy --require-approval never
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Configuration
|
||
|
|
|
||
|
|
Edit `config.js` to set:
|
||
|
|
|
||
|
|
```js
|
||
|
|
window.LEDGERFLOW_API_URL = "https://your-api-gateway-url.amazonaws.com";
|
||
|
|
window.GOOGLE_CLIENT_ID = "your-client-id.apps.googleusercontent.com";
|
||
|
|
```
|