// account.jsx — Invoices, Payment methods, Team users const { useState: useStateAcc } = React; /* ============== INVOICES ============== */ function InvoiceDoc({ inv, account, currency }) { const sub = inv.amount / 1.1, gst = inv.amount - sub; const cell = { padding: "10px 0", fontSize: 13.5 }; return (
Tax Invoice
{inv.id}
Issued {window.FX.fmtDate(inv.date)}
Billed to
{account ? account.name : window.FX.COMPANY}
{account ? account.number : ""}
Due date
{window.FX.fmtDate(inv.due)}
{inv.status}
DescriptionAmount
Same-day deliveries — {inv.period} ({inv.deliveries} jobs) {window.FX.money(sub, currency)}
GST (10%){window.FX.money(gst, currency)}
Total {currency} {window.FX.money(inv.amount, currency)}
Fedex Australia Pty Ltd · ABN 12 345 678 901 · 12 Coward St, Mascot NSW 2020
); } function Invoices({ currency, account }) { const [view, setView] = useStateAcc(null); const all = window.FX.INVOICES.filter(i => !account || i.accountId === account.id); const outstanding = all.filter(i => i.status === "Due").reduce((s, i) => s + i.amount, 0); function download(inv) { const win = window.open("", "_blank"); const node = document.getElementById("invoice-print-root"); if (!win || !node) { window.print(); return; } win.document.write(`${inv.id}${node.innerHTML}`); win.document.close(); setTimeout(() => win.print(), 300); } return (
Outstanding
0 ? "var(--accent-700)" : "var(--fg-strong)", marginTop: 8 }}>{window.FX.money(outstanding, currency)}
{all.filter(i => i.status === "Due").length} invoice due
Account
{account ? account.name : "—"}
{account ? account.number : ""}
Billing cycle
Monthly
Net 30 · direct debit
InvoicePeriodJobsAmountStatusActions
{all.map((inv, i) => (
{inv.id} {inv.period} {inv.deliveries} {window.FX.money(inv.amount, currency)} {inv.status}
))} {all.length === 0 &&
No invoices for this account yet.
} {view && ( setView(null)} title={"Invoice " + view.id} width={640}>
)}
); } /* ============== PAYMENT METHODS ============== */ function brandOf(num) { const n = num.replace(/\s/g, ""); if (/^4/.test(n)) return "Visa"; if (/^5[1-5]/.test(n) || /^2[2-7]/.test(n)) return "Mastercard"; if (/^3[47]/.test(n)) return "Amex"; return "Card"; } function PaymentMethods({ methods, onAdd, onRemove, onSetPrimary }) { const [adding, setAdding] = useStateAcc(false); const [num, setNum] = useStateAcc(""); const [name, setName] = useStateAcc(""); const [exp, setExp] = useStateAcc(""); const [cvc, setCvc] = useStateAcc(""); const fmtNum = v => v.replace(/\D/g, "").slice(0, 16).replace(/(.{4})/g, "$1 ").trim(); const valid = num.replace(/\s/g, "").length >= 15 && name && /^\d{2}\/\d{2}$/.test(exp) && cvc.length >= 3; function save() { if (!valid) return; onAdd({ id: "pm" + Date.now(), brand: brandOf(num), last4: num.replace(/\s/g, "").slice(-4), exp, name, primary: methods.length === 0 }); setNum(""); setName(""); setExp(""); setCvc(""); setAdding(false); } return (
setAdding(true)}>Add card} />
{methods.map(m => (
{m.brand}
•••• •••• •••• {m.last4}
{m.name} · exp {m.exp}
{m.primary ? Primary : }
))}
Pay on account — direct debit on the 30th. Active.
On
{adding && (
Add a credit card
setNum(fmtNum(v))} placeholder="4242 4242 4242 4242" mono />
setExp(v.replace(/[^\d]/g, "").slice(0,4).replace(/(\d{2})(\d)/, "$1/$2"))} placeholder="MM/YY" mono /> setCvc(v.replace(/\D/g, "").slice(0,4))} placeholder="123" mono />
Encrypted · we never store the full number
 )}
); } /* ============== USERS ============== */ const ROLES = ["Admin", "Booking", "View only"]; function Users({ users, onAdd, onRemove }) { const [open, setOpen] = useStateAcc(false); const [name, setName] = useStateAcc(""); const [email, setEmail] = useStateAcc(""); const [role, setRole] = useStateAcc("Booking"); function add() { if (!name || !email) return; const initials = name.trim().split(/\s+/).map(p => p[0]).slice(0, 2).join("").toUpperCase(); onAdd({ id: "u" + Date.now(), name, email, role, status: "Invited", initials }); setName(""); setEmail(""); setRole("Booking"); setOpen(false); } const roleTone = r => r === "Admin" ? "brand" : r === "Booking" ? "accent" : "neutral"; return (
setOpen(true)}>Add user} />
UserRoleStatus
{users.map((u, i) => (
{u.initials} {u.name} {u.email} {u.role} {u.status}
))} setOpen(false)} title="Invite a user" width={480}>