51 lines
2.7 KiB
HTML
51 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Accounting — customer review</title>
|
|
<style>
|
|
body { font-family: -apple-system, sans-serif; margin: 2rem; max-width: 960px; color: #171a26; }
|
|
h1 { font-size: 1.3rem; }
|
|
label { font-size: 0.8rem; font-weight: 600; display: block; margin-top: 0.6rem; }
|
|
input { padding: 0.4rem 0.55rem; }
|
|
button { margin-top: 0.8rem; padding: 0.4rem 0.8rem; }
|
|
table { border-collapse: collapse; width: 100%; margin-top: 0.6rem; }
|
|
th, td { border-bottom: 1px solid #e5e7f0; padding: 0.4rem 0.5rem; text-align: left; font-size: 0.88rem; }
|
|
.muted { color: #6b7186; }
|
|
.card { border: 1px solid #e5e7f0; border-radius: 10px; padding: 1rem; margin: 1rem 0; }
|
|
.stat { font-size: 1.4rem; font-weight: 800; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Accounting</h1>
|
|
<p class="muted">Review payments, usage, credits, and balances. Export invoices to QuickBooks IIF / CSV.</p>
|
|
<div class="card">
|
|
<label>Customer id</label>
|
|
<input id="id" value="cust_1" />
|
|
<button onclick="review()">Review</button>
|
|
<p class="muted"><a href="/export/quickbooks.iif">QuickBooks IIF</a> · <a href="/export/accounting.csv">CSV</a></p>
|
|
</div>
|
|
<div id="out"></div>
|
|
<script>
|
|
const fmt = (c) => (c < 0 ? '-$' : '$') + (Math.abs(c || 0) / 100).toFixed(2);
|
|
const rows = (list, cols) =>
|
|
(list || [])
|
|
.map((r) => '<tr>' + cols.map((c) => `<td>${r[c] ?? ''}</td>`).join('') + '</tr>')
|
|
.join('') || '<tr><td colspan="8" class="muted">none</td></tr>';
|
|
async function review() {
|
|
const id = document.getElementById('id').value.trim();
|
|
const st = await (await fetch('/review/' + encodeURIComponent(id))).json();
|
|
document.getElementById('out').innerHTML = `
|
|
<div class="card"><div class="muted">Prepaid</div><div class="stat">${fmt(st.prepaidCents)}</div>
|
|
<p class="muted">source ${st.source || 'unknown'}</p></div>
|
|
<div class="card"><h3>Credits</h3><table><thead><tr><th>cents</th><th>reason</th><th>agent</th><th>at</th></tr></thead>
|
|
<tbody>${rows(st.credits, ['cents','reason','agent','at'])}</tbody></table></div>
|
|
<div class="card"><h3>Usage</h3><table><thead><tr><th>endpoint</th><th>cents</th><th>at</th></tr></thead>
|
|
<tbody>${rows(st.usage, ['endpointId','cents','at'])}</tbody></table></div>
|
|
<div class="card"><h3>Payments</h3><table><thead><tr><th>cents</th><th>kind</th><th>reason</th><th>at</th></tr></thead>
|
|
<tbody>${rows(st.payments, ['cents','kind','reason','at'])}</tbody></table></div>`;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|