From 4fbd664d64b86733874fb0b7a5b698af0bf0816f Mon Sep 17 00:00:00 2001 From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com> Date: Thu, 2 Apr 2026 18:19:49 -0400 Subject: [PATCH] =?UTF-8?q?Initial=20commit=20=E2=80=94=20LedgerFlow=20fro?= =?UTF-8?q?ntend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .gitignore | 2 + README.md | 96 ++ accounting-app.html | 2250 +++++++++++++++++++++++++++++++++++++++++++ config.js | 4 + login.html | 409 ++++++++ serve.js | 39 + 6 files changed, 2800 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 accounting-app.html create mode 100644 config.js create mode 100644 login.html create mode 100644 serve.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2752eb9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules/ +.DS_Store diff --git a/README.md b/README.md new file mode 100644 index 0000000..b8c3a64 --- /dev/null +++ b/README.md @@ -0,0 +1,96 @@ +# 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= 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"; +``` diff --git a/accounting-app.html b/accounting-app.html new file mode 100644 index 0000000..8869e19 --- /dev/null +++ b/accounting-app.html @@ -0,0 +1,2250 @@ + + + + + +LedgerFlow — B2B Accounting + + + + + + + + + + + +
+
+
Dashboard
+
+ + +
+
+ +
+ + +
+
+
+
Open POs
+
0
+
Total value: $0
+
↑ 0 this month
+
+
+
Pending Invoices
+
0
+
Awaiting payment
+
● 0 overdue
+
+
+
Billed (MTD)
+
$0
+
Month to date
+
↑ 0%
+
+
+
EDI Transactions
+
0
+
Submitted today
+
● 0 processing
+
+
+ +
+
+
+ Recent Purchase Orders + +
+
+ + + +
PO NumberVendorAmountStatus
📦

No POs imported yet

+
+
+
+
+ Activity Feed +
+
+
+
📋
+

Activity will appear here

+
+
+
+
+ +
+
+ Recent Invoices + +
+
+ + + +
Invoice #PO ReferenceVendorAmountEDI StatusStatus
🧾

No invoices created yet

+
+
+
+ + +
+
+
+

Purchase Orders

+

Imported from DynamoDB · 0 records

+
+
+ + +
+
+
+
+ All Purchase Orders + +
+
+ + + + + +
PO NumberVendorIssue DateDue DateAmountBilledRemainingStatusAction
📦

No purchase orders yet. Import from DynamoDB or add manually.

+
+
+
+ + +
+
+
+

Invoices

+

0 invoices · Submit via AWS B2B EDI

+
+ +
+
+
+ All Invoices + +
+
+ + + + + +
Invoice #PO ReferenceVendorIssuedDueAmountEDI StatusStatusActions
🧾

No invoices yet. Create one against a PO.

+
+
+
+ + +
+
+
+

Billing

+

Bill against open Purchase Orders

+
+ +
+ +
+
+
Total Invoiced
+
$0.00
+
+
+
Collected
+
$0.00
+
+
+
Outstanding
+
$0.00
+
+
+ +
+
PO Utilization
+
+ + + + + +
PO NumberVendorPO TotalBilledRemainingUtilization
💳

Import POs to view billing utilization

+
+
+
+ + +
+
+

EDI Console

+

AWS B2B EDI · X12 004010 · Transaction Monitor

+
+
+
+
Submit EDI Transaction
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ Transaction Log + +
+
+
+ [SYSTEM] EDI console ready. Configure AWS connection in Settings.
+ [INFO] X12 004010 · Supported: 810, 850, 855, 856 transaction sets.
+
+
+
+
+
+
EDI Transaction History
+
+ + + + + +
TimestampTX TypeInvoice #PartnerISA Control #Status
⚡

No EDI transactions yet

+
+
+
+ + +
+
+

Connections & Settings

+

Configure AWS DynamoDB and B2B EDI integrations

+
+ +
+
+ 🗄 +
+
AWS DynamoDB
+
Import Purchase Orders from your DynamoDB table
+
+
Not Connected
+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ +
+
+ ⚡ +
+
AWS B2B EDI
+
Submit EDI transactions (810, 850, 855, 856)
+
+
Not Connected
+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ + + Found in AWS B2B Data Interchange console +
+
+ + +
+
+
+ +
+
+ 🏢 +
Company Settings
+
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + +
✓
+ + + + diff --git a/config.js b/config.js new file mode 100644 index 0000000..b3108ea --- /dev/null +++ b/config.js @@ -0,0 +1,4 @@ +// LedgerFlow frontend configuration +// Set these to your deployed API Gateway endpoint and Google OAuth client ID. +window.LEDGERFLOW_API_URL = "https://sjmuqb1p45.execute-api.us-east-1.amazonaws.com"; +window.GOOGLE_CLIENT_ID = "510349952236-eqo5crd0eiae63hifdmu58b0j8qml3ta.apps.googleusercontent.com"; diff --git a/login.html b/login.html new file mode 100644 index 0000000..3d11269 --- /dev/null +++ b/login.html @@ -0,0 +1,409 @@ + + + + + +LedgerFlow — Sign In + + + + + + + + + + + + diff --git a/serve.js b/serve.js new file mode 100644 index 0000000..502d18e --- /dev/null +++ b/serve.js @@ -0,0 +1,39 @@ +// Simple local dev server — serves frontend on http://localhost:3000 +// Usage: node serve.js + +const http = require("http"); +const fs = require("fs"); +const path = require("path"); + +const PORT = 3000; +const DIR = __dirname; + +const MIME = { + ".html": "text/html", + ".js": "application/javascript", + ".css": "text/css", + ".json": "application/json", + ".png": "image/png", + ".svg": "image/svg+xml", + ".ico": "image/x-icon", +}; + +http.createServer((req, res) => { + let url = req.url.split("?")[0]; + if (url === "/") url = "/login.html"; + + const filePath = path.join(DIR, url); + const ext = path.extname(filePath); + + fs.readFile(filePath, (err, data) => { + if (err) { + res.writeHead(404); + res.end("Not found"); + return; + } + res.writeHead(200, { "Content-Type": MIME[ext] || "application/octet-stream" }); + res.end(data); + }); +}).listen(PORT, () => { + console.log(`\n LedgerFlow frontend: http://localhost:${PORT}\n`); +});