ledgerflow-frontend/README.md

# 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
- POs auto-sync from external DynamoDB table via DynamoDB Streams (near-real-time)
- Paginated table (20 per page) with page navigation controls
- Search/filter across all POs (resets to page 1)
- Add POs manually
- Edit POs after import (vendor, amount, status, dates, notes)
- Bill against POs to create invoices

### Invoices
- Create invoices linked to POs
- Edit invoices (pre-filled modal with line items, totals recalculated in real-time)
- Delete individual invoices from the detail view, or bulk-select and delete multiple at once
- "Modified After Send" EDI status badge when an invoice is edited after EDI submission
- Paid and EDI-submitted invoices are protected from selection/deletion
- 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
- PO remaining balance updates in real-time during edit (accounts for current invoice)
- 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";
```