37f204c18c
- Load GSI script dynamically after config.js sets GOOGLE_CLIENT_ID so data-client_id is populated before the library auto-initializes - Fall back to config.js client ID when /auth/config returns empty - Guard against null fallback-btn element in initGoogleSignIn Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
103 lines
3 KiB
Markdown
103 lines
3 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
|
|
- 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";
|
|
```
|