@firedrill-tools/quickbooks 0.1.2

package/firedrill/tools/quickbooks/app/site/views/invoice-actions.js

@@ -0,0 +1,109 @@
+// Invoice row actions: Receive payment / Send, and the row menu (Edit, Print or download, Send, Void, Delete).
+import { app, isVoided } from "../store.js";
+import { ToolError, amount, call, confirmDialog, describe, dialog, el, icon, mdY, money, newKey, openMenu, toast } from "../ui.js";
+import { field, input } from "./common.js";
+import { openInvoiceEditor } from "./invoice-editor.js";
+import { openReceivePayment } from "./receive-payment.js";
+
+async function retryable(run, label) {
+  try { return await run(); } catch (error) {
+    if (error instanceof ToolError && error.is("STALE_OBJECT")) toast("This invoice was changed elsewhere. Refresh and try again.", { error: true });
+    else toast(`${label}: ${describe(error)}`, { error: true, action: error instanceof ToolError && error.is("THROTTLE_EXCEEDED") ? { label: "Retry", run } : undefined });
+    return undefined;
+  }
+}
+
+export function sendDialog(inv, onDone) {
+  const to = field("To", input({ type: "email", value: inv.BillEmail?.Address ?? "" }));
+  const subject = `Invoice ${inv.DocNumber ?? inv.Id} from ${app.company?.CompanyName ?? "your company"}`;
+  const key = newKey();
+  const { box } = dialog({
+    title: `Send invoice ${inv.DocNumber ?? ""}`.trim(), wide: false,
+    body: [to.wrap,
+      el("div", { class: "field" }, [el("span", { class: "muted", text: "Subject" }), el("div", { text: subject })]),
+      el("div", { class: "field" }, [el("span", { class: "muted", text: "Message" }), el("div", { text: `Dear ${inv.CustomerRef?.name ?? "customer"}, here's your invoice! We appreciate your prompt payment. Balance due ${money(inv.Balance)}, due ${mdY(inv.DueDate)}.` })]),
+      el("p", { class: "muted", text: "Firedrill records a synthetic send. No e-mail is delivered." })],
+    actions: [
+      { label: "Cancel", run: (close) => close() },
+      { label: "Send invoice", kind: "primary", run: async (close) => {
+        const btn = box.querySelector(".dialog-foot .primary");
+        btn.disabled = true;
+        to.setError("");
+        const address = to.input.value.trim();
+        try {
+          await call("invoices.send", { invoice_id: inv.Id, ...(address && address !== inv.BillEmail?.Address ? { sendTo: address } : address ? { sendTo: address } : {}) }, key);
+          close();
+          toast(`Invoice ${inv.DocNumber ?? ""} sent to ${address || "the customer"}`);
+          onDone?.();
+        } catch (error) {
+          btn.disabled = false;
+          to.setError(describe(error));
+        }
+      } },
+    ],
+  });
+}
+
+export async function voidInvoice(inv, refresh) {
+  const linked = (inv.LinkedTxn ?? []).length;
+  const msg = linked ? `Invoice ${inv.DocNumber} has ${linked} payment${linked > 1 ? "s" : ""} applied. Voiding sets its amount to zero and leaves those payments unapplied. Are you sure?` : `Are you sure you want to void invoice ${inv.DocNumber}? Its amount will be set to zero.`;
+  if (!(await confirmDialog("Void invoice?", msg, "Yes, void", "primary"))) return;
+  const done = await retryable(() => call("invoices.post", { operation: "void", body: { Id: inv.Id, SyncToken: inv.SyncToken } }, newKey()), "Couldn't void the invoice");
+  if (done) { toast(`Invoice ${inv.DocNumber} voided`); refresh?.(); }
+}
+
+export async function deleteInvoice(inv, refresh) {
+  const linked = (inv.LinkedTxn ?? []).length;
+  const msg = linked ? `This invoice has payments applied. Deleting it leaves those payments unapplied. Delete invoice ${inv.DocNumber}?` : `Are you sure you want to delete invoice ${inv.DocNumber}? This can't be undone.`;
+  if (!(await confirmDialog("Delete invoice?", msg, "Yes, delete", "danger"))) return;
+  const done = await retryable(() => call("invoices.post", { operation: "delete", body: { Id: inv.Id, SyncToken: inv.SyncToken } }, newKey()), "Couldn't delete the invoice");
+  if (done) { toast(`Invoice ${inv.DocNumber} deleted`); refresh?.(); }
+}
+
+export async function pdfPreview(inv) {
+  const link = el("a", { class: "btn primary", text: "Preparing PDF…", "aria-disabled": "true" });
+  const lines = (inv.Line ?? []).filter((l) => l.DetailType === "SalesItemLineDetail");
+  const sheet = el("div", { class: "pdf-frame" }, [
+    el("div", { class: "sheet-top" }, [
+      el("div", { class: "sheet-company" }, [el("div", { class: "co-name", text: app.company?.CompanyName ?? "" }), el("div", { text: app.company?.CompanyAddr?.Line1 ?? "" }), el("div", { text: app.company?.Email?.Address ?? "" })]),
+      el("div", { class: "sheet-balance" }, [el("div", { class: "lbl", text: "Invoice" }), el("div", { text: `No. ${inv.DocNumber ?? inv.Id}` }), el("div", { text: `Due ${mdY(inv.DueDate)}` })]),
+    ]),
+    el("div", { class: "hr" }),
+    el("div", { text: `Bill to: ${inv.CustomerRef?.name ?? ""}` }),
+    el("table", { class: "lines" }, [el("thead", {}, el("tr", {}, ["Product or service", "Qty", "Rate", "Amount"].map((h, i) => el("th", { class: i ? "amt" : "", text: h })))),
+      el("tbody", {}, lines.map((l) => el("tr", {}, [el("td", { text: l.SalesItemLineDetail?.ItemRef?.name ?? "" }), el("td", { class: "amt", text: String(l.SalesItemLineDetail?.Qty ?? "") }), el("td", { class: "amt", text: amount(l.SalesItemLineDetail?.UnitPrice) }), el("td", { class: "amt", text: amount(l.Amount) })])))]),
+    el("div", { class: "totals" }, [el("div", { class: "t big" }, [el("span", { text: "Balance due" }), el("span", { text: money(inv.Balance) })])]),
+  ]);
+  const { close } = dialog({ title: `Print or download invoice ${inv.DocNumber ?? ""}`, wide: true, body: [sheet, el("div", { class: "line-actions" }, link)] });
+  try {
+    const out = await call("invoices.pdf", { invoice_id: inv.Id });
+    const bytes = Uint8Array.from(atob(out.base64), (ch) => ch.charCodeAt(0));
+    const url = URL.createObjectURL(new Blob([bytes], { type: "application/pdf" }));
+    link.textContent = `Download PDF (${Math.ceil(out.size_bytes / 1024)} KB)`;
+    link.setAttribute("href", url);
+    link.setAttribute("download", `Invoice_${inv.DocNumber ?? inv.Id}.pdf`);
+    link.removeAttribute("aria-disabled");
+  } catch (error) {
+    link.replaceWith(el("div", { class: "banner error", role: "alert", text: describe(error) }));
+  }
+  void close;
+}
+
+export function rowActions(inv, refresh) {
+  const open = Number(inv.Balance) > 0 && !isVoided(inv);
+  const primary = open
+    ? el("button", { type: "button", class: "link-btn", text: "Receive payment", onclick: (e) => { e.stopPropagation(); openReceivePayment({ customerId: inv.CustomerRef?.value, invoiceId: inv.Id, onSaved: refresh }); } })
+    : el("button", { type: "button", class: "link-btn", text: "Print", onclick: (e) => { e.stopPropagation(); pdfPreview(inv); } });
+  const caret = el("button", { type: "button", class: "caret", "aria-label": `More actions for invoice ${inv.DocNumber ?? inv.Id}`, "aria-haspopup": "menu", "aria-expanded": "false" }, icon("chevronDown"));
+  caret.addEventListener("click", (e) => {
+    e.stopPropagation();
+    openMenu(caret, [
+      { label: "Edit", run: () => openInvoiceEditor(inv.Id, refresh) },
+      { label: "Send", disabled: isVoided(inv), run: () => sendDialog(inv, refresh) },
+      { label: "Print or download", run: () => pdfPreview(inv) },
+      { label: "Void", disabled: isVoided(inv), run: () => voidInvoice(inv, refresh) },
+      { label: "Delete", run: () => deleteInvoice(inv, refresh) },
+    ]);
+  });
+  return el("div", { class: "row-actions" }, [primary, caret]);
+}

package/firedrill/tools/quickbooks/app/site/views/invoice-editor.js

@@ -0,0 +1,126 @@
+// Invoice form (new / edit): customer, terms, dates, lines, memos, totals; Save / Save and send via invoices.post.
+import { app, isVoided, queryAll } from "../store.js";
+import { ToolError, addDays, call, confirmDialog, describe, el, errorBanner, money, newKey, toast } from "../ui.js";
+import { field, input, select } from "./common.js";
+import { deleteInvoice, pdfPreview, sendDialog, voidInvoice } from "./invoice-actions.js";
+import { linesTable } from "./invoice-lines.js";
+import { txnFrame } from "./txn-frame.js";
+
+const TERMS = [["", "Select terms"], ["1", "Due on receipt", 0], ["2", "Net 15", 15], ["3", "Net 30", 30]];
+
+export async function openInvoiceEditor(invoiceId = null, onSaved, { customerId = "" } = {}) {
+  let touched = false;
+  const t = txnFrame(invoiceId ? "Invoice" : "Invoice", {
+    onClose: async (close) => { if (!touched || (await confirmDialog("Leave without saving?", "Do you want to leave without saving? Your changes will be lost.", "Yes, leave"))) close(); },
+  });
+  t.canvas.append(el("div", { class: "loading" }, [el("span", { class: "spinner" }), el("span", { text: "Loading invoice…" })]));
+  let inv = null; let customers; let items;
+  try {
+    [inv, customers, items] = await Promise.all([
+      invoiceId ? call("invoices.get", { invoice_id: invoiceId }).then((o) => o.Invoice) : null,
+      queryAll("select * from Customer where Active IN (true, false) orderby DisplayName"),
+      queryAll("select * from Item orderby Name"),
+    ]);
+  } catch (error) {
+    t.canvas.replaceChildren(errorBanner(error, "We couldn't open this invoice"));
+    return;
+  }
+  const voided = inv ? isVoided(inv) : false;
+  t.setTitle(inv ? `Invoice no.${inv.DocNumber ?? inv.Id}` : "Invoice");
+  const custOptions = [["", "Add customer"], ...customers.filter((c) => c.Active || c.Id === inv?.CustomerRef?.value).map((c) => [c.Id, c.DisplayName])];
+  const cust = field("Customer", select(custOptions, inv?.CustomerRef?.value ?? customerId));
+  const email = field("Customer email", input({ type: "email", value: inv?.BillEmail?.Address ?? "", placeholder: "Separate emails with a comma" }));
+  const terms = field("Terms", select(TERMS.map(([v, l]) => [v, l]), inv?.SalesTermRef?.value ?? ""));
+  const txnDate = field("Invoice date", input({ type: "date", value: inv?.TxnDate ?? app.today }));
+  const dueDate = field("Due date", input({ type: "date", value: inv?.DueDate ?? addDays(app.today, 30) }));
+  const docNo = field("Invoice no.", input({ value: inv?.DocNumber ?? "", placeholder: "Auto" }));
+  const message = field("Message on invoice", el("textarea", { value: inv?.CustomerMemo?.value ?? "", placeholder: "Thank you for your business and have a great day!" }));
+  const memo = field("Internal customer notes (hidden)", el("textarea", { value: inv?.PrivateNote ?? "" }));
+  const bigBalance = el("div", { class: "val" });
+  const subtotal = el("span"); const total = el("span"); const paidRow = el("span"); const balance = el("span");
+  const paidCents = inv ? Math.round((Number(inv.TotalAmt) - Number(inv.Balance)) * 100) : 0;
+  let lines = null;
+  const refreshTotals = () => {
+    if (!lines) return;
+    const c = lines.totalCents();
+    subtotal.textContent = money(c / 100); total.textContent = money(c / 100); paidRow.textContent = money(-paidCents / 100);
+    const bal = voided ? 0 : Math.max(0, c - paidCents) / 100;
+    balance.textContent = money(bal); bigBalance.textContent = money(bal);
+  };
+  lines = linesTable(items.filter((i) => i.Active), (inv?.Line ?? []).filter((l) => l.DetailType === "SalesItemLineDetail"), () => refreshTotals());
+  const applyTerms = () => { const d = TERMS.find((x) => x[0] === terms.input.value)?.[2]; if (d !== undefined && txnDate.input.value) dueDate.input.value = addDays(txnDate.input.value, d); };
+  cust.input.addEventListener("change", () => {
+    const c = customers.find((x) => x.Id === cust.input.value);
+    if (c) { email.input.value = c.PrimaryEmailAddr?.Address ?? ""; if (c.SalesTermRef?.value && TERMS.some((x) => x[0] === c.SalesTermRef.value)) { terms.input.value = c.SalesTermRef.value; applyTerms(); } }
+  });
+  terms.input.addEventListener("change", applyTerms);
+  txnDate.input.addEventListener("change", applyTerms);
+  const formError = el("div");
+  const co = app.company ?? {};
+  t.canvas.replaceChildren(el("div", { class: "sheet" }, [
+    voided ? errorBanner(new Error("This invoice has been voided. Its amounts are zero and it can't be edited."), "Voided") : null,
+    formError,
+    el("div", { class: "sheet-top" }, [
+      el("div", { class: "sheet-company" }, [el("div", { class: "co-name", text: co.CompanyName ?? "" }), el("div", { text: co.CompanyAddr ? `${co.CompanyAddr.Line1 ?? ""}, ${co.CompanyAddr.City ?? ""}, ${co.CompanyAddr.CountrySubDivisionCode ?? ""} ${co.CompanyAddr.PostalCode ?? ""}` : "" }), el("div", { text: co.Email?.Address ?? "" })]),
+      el("div", { class: "sheet-balance" }, [el("div", { class: "lbl", text: "Balance due" }), bigBalance]),
+    ]),
+    el("div", { class: "hr" }),
+    el("div", { class: "sheet-grid" }, [el("div", {}, [cust.wrap, email.wrap]), el("div", {}, [terms.wrap]), el("div", { class: "meta" }, [txnDate.wrap, dueDate.wrap, docNo.wrap])]),
+    lines.node,
+    el("div", { class: "sheet-bottom" }, [
+      el("div", { class: "notes" }, [message.wrap, memo.wrap]),
+      el("div", { class: "totals" }, [el("div", { class: "t" }, [el("span", { text: "Subtotal" }), subtotal]), el("div", { class: "t" }, [el("span", { text: "Total" }), total]),
+        inv ? el("div", { class: "t" }, [el("span", { text: "Amount received" }), paidRow]) : null, el("div", { class: "t big" }, [el("span", { text: "Balance due" }), balance])]),
+    ]),
+  ]));
+  refreshTotals();
+  t.canvas.addEventListener("input", () => { touched = true; });
+  t.canvas.addEventListener("change", () => { touched = true; });
+  t.canvas.addEventListener("click", (e) => { if (e.target.closest(".line-actions, .lines button")) touched = true; });
+  if (voided) for (const x of t.canvas.querySelectorAll("input, select, textarea, .line-actions button, .lines button")) x.disabled = true;
+
+  let key = newKey();
+  async function save(andSend, allowDuplicate = false) {
+    formError.replaceChildren();
+    for (const f of [cust, email, txnDate, dueDate, docNo]) f.setError("");
+    if (!cust.input.value) { cust.setError("Select a customer."); cust.input.focus(); return; }
+    const collected = lines.collect();
+    if (collected.error) { formError.replaceChildren(errorBanner(new Error(collected.error), "Check the product and service lines")); collected.focus?.focus(); return; }
+    const body = { CustomerRef: { value: cust.input.value }, TxnDate: txnDate.input.value, DueDate: dueDate.input.value, Line: collected.lines,
+      CustomerMemo: message.input.value.trim() ? { value: message.input.value.trim() } : null, PrivateNote: memo.input.value.trim() || null };
+    if (terms.input.value) body.SalesTermRef = { value: terms.input.value };
+    if (email.input.value.trim()) body.BillEmail = { Address: email.input.value.trim() };
+    if (docNo.input.value.trim()) body.DocNumber = docNo.input.value.trim();
+    if (inv) Object.assign(body, { Id: inv.Id, SyncToken: inv.SyncToken, sparse: true });
+    for (const b of t.foot.querySelectorAll("button")) b.disabled = true;
+    try {
+      const out = await call("invoices.post", { body, ...(allowDuplicate ? { include: "allowduplicatedocnum" } : {}) }, key);
+      key = newKey();
+      inv = out.Invoice; touched = false;
+      toast(`Invoice ${inv.DocNumber ?? ""} saved`);
+      onSaved?.();
+      if (andSend) { t.close(); sendDialog(inv, onSaved); } else t.close();
+    } catch (error) {
+      for (const b of t.foot.querySelectorAll("button")) b.disabled = false;
+      if (error instanceof ToolError && error.is("DUPLICATE_DOC_NUMBER")) {
+        key = newKey();
+        if (await confirmDialog("Duplicate invoice number", `Invoice no. ${body.DocNumber} is already used. Use it anyway?`, "Use anyway")) save(andSend, true);
+        return;
+      }
+      if (error instanceof ToolError && error.is("STALE_OBJECT")) { formError.replaceChildren(errorBanner(error, "This invoice was changed elsewhere. Close it and open it again to see the latest version")); return; }
+      const target = error instanceof ToolError ? { CustomerRef: cust, BillEmail: email, TxnDate: txnDate, DueDate: dueDate, DocNumber: docNo }[error.element] : undefined;
+      if (target) target.setError(describe(error));
+      formError.replaceChildren(errorBanner(error, "We couldn't save this invoice"));
+      if (!(error instanceof ToolError && error.is("THROTTLE_EXCEEDED"))) key = newKey();
+    }
+  }
+  const more = [];
+  if (inv) {
+    more.push(el("button", { type: "button", class: "foot-link", text: "Print or download", onclick: () => pdfPreview(inv) }));
+    if (!voided) more.push(el("button", { type: "button", class: "foot-link", text: "Void", onclick: () => voidInvoice(inv, () => { t.close(); onSaved?.(); }) }));
+    more.push(el("button", { type: "button", class: "foot-link", text: "Delete", onclick: () => deleteInvoice(inv, () => { t.close(); onSaved?.(); }) }));
+  }
+  t.foot.append(el("button", { type: "button", class: "btn", text: "Cancel", onclick: t.requestClose }), ...more, el("div", { class: "grow" }),
+    el("button", { type: "button", class: "btn", text: "Save", disabled: voided, onclick: () => save(false) }),
+    el("button", { type: "button", class: "btn primary", text: "Save and send", disabled: voided, onclick: () => save(true) }));
+}

package/firedrill/tools/quickbooks/app/site/views/invoice-lines.js

@@ -0,0 +1,92 @@
+// Invoice line table: Product or service / Description / Qty / Rate / Amount, with add and clear lines.
+import { amount, el, icon } from "../ui.js";
+
+const cents = (n) => Math.round(Number(n) * 100);
+
+export function linesTable(items, initial, onChange) {
+  const byId = new Map(items.map((i) => [i.Id, i]));
+  const tbody = el("tbody");
+  let seq = 0;
+  const rows = [];
+  const renumber = () => rows.forEach((r, i) => { r.num.textContent = String(i + 1); });
+  function addRow(line = {}) {
+    seq += 1;
+    const d = line.SalesItemLineDetail ?? {};
+    const item = el("select", { class: "cell-input", "aria-label": `Product or service, line ${seq}` }, [el("option", { value: "", text: "" })]);
+    for (const it of items) item.append(el("option", { value: it.Id, text: it.Name }));
+    if (d.ItemRef?.value && !byId.has(d.ItemRef.value)) item.append(el("option", { value: d.ItemRef.value, text: `${d.ItemRef.name ?? d.ItemRef.value} (inactive)` }));
+    item.value = d.ItemRef?.value ?? "";
+    const desc = el("input", { class: "cell-input", type: "text", "aria-label": `Description, line ${seq}`, value: line.Description ?? "" });
+    const qty = el("input", { class: "cell-input num", type: "number", step: "any", min: "0", "aria-label": `Quantity, line ${seq}`, value: d.Qty ?? "" });
+    const rate = el("input", { class: "cell-input num", type: "number", step: "0.01", "aria-label": `Rate, line ${seq}`, value: d.UnitPrice ?? "" });
+    const amt = el("td", { class: "amt" });
+    const num = el("td", { class: "n" });
+    const r = { item, desc, qty, rate, amt, num };
+    const recalc = () => {
+      const q = Number(qty.value || 0);
+      const p = Number(rate.value || 0);
+      r.amount = qty.value === "" && rate.value === "" ? 0 : Math.round(q * p * 100) / 100;
+      amt.textContent = item.value ? amount(r.amount) : "";
+      onChange?.();
+    };
+    item.addEventListener("change", () => {
+      const it = byId.get(item.value);
+      if (it) {
+        if (!desc.value) desc.value = it.Description ?? "";
+        if (qty.value === "") qty.value = "1";
+        if (rate.value === "" && it.UnitPrice !== undefined && it.UnitPrice !== null) rate.value = String(it.UnitPrice);
+      }
+      recalc();
+      if (rows[rows.length - 1] === r && item.value) addRow();
+    });
+    for (const x of [qty, rate]) x.addEventListener("input", recalc);
+    const del = el("button", { type: "button", class: "icon-btn", "aria-label": `Delete line ${seq}`, title: "Delete line", onclick: () => {
+      if (rows.length === 1) { item.value = ""; desc.value = ""; qty.value = ""; rate.value = ""; recalc(); return; }
+      rows.splice(rows.indexOf(r), 1); tr.remove(); renumber(); onChange?.();
+    } }, icon("trash"));
+    const tr = el("tr", {}, [num, el("td", {}, item), el("td", {}, desc), el("td", { style: undefined }, qty), el("td", {}, rate), amt, el("td", { class: "del" }, del)]);
+    rows.push(r);
+    tbody.append(tr);
+    renumber();
+    recalc();
+    return r;
+  }
+  for (const line of initial) addRow(line);
+  while (rows.length < 2) addRow();
+
+  const node = el("div", {}, [
+    el("div", { class: "table-wrap" }, el("table", { class: "lines" }, [
+      el("thead", {}, el("tr", {}, [el("th", { text: "#" }), el("th", { text: "Product or service" }), el("th", { text: "Description" }), el("th", { class: "amt", text: "Qty" }), el("th", { class: "amt", text: "Rate" }), el("th", { class: "amt", text: "Amount" }), el("th", {}, el("span", { class: "visually-hidden", text: "Delete" }))])),
+      tbody,
+    ])),
+    el("div", { class: "line-actions" }, [
+      el("button", { type: "button", class: "btn small", text: "Add lines", onclick: () => { addRow(); addRow(); } }),
+      el("button", { type: "button", class: "btn small", text: "Clear all lines", onclick: () => { for (const r of rows.splice(0)) r.num.parentElement.remove(); addRow(); addRow(); onChange?.(); } }),
+    ]),
+  ]);
+
+  return {
+    node,
+    totalCents: () => rows.reduce((s, r) => s + (r.item.value ? cents(r.amount) : 0), 0),
+    /** Lines for the API body, or an error message pointing at the first bad row. */
+    collect() {
+      const out = [];
+      for (const [i, r] of rows.entries()) {
+        for (const x of [r.item, r.qty, r.rate]) x.classList.remove("invalid");
+        if (!r.item.value) {
+          if (r.qty.value || r.rate.value || r.desc.value) { r.item.classList.add("invalid"); return { error: `Line ${i + 1}: select a product or service.`, focus: r.item }; }
+          continue;
+        }
+        const qty = Number(r.qty.value || 0);
+        if (!(qty > 0)) { r.qty.classList.add("invalid"); return { error: `Line ${i + 1}: enter a quantity greater than 0.`, focus: r.qty }; }
+        const rate = Number(r.rate.value || 0);
+        const line = { DetailType: "SalesItemLineDetail", Amount: Math.round(qty * rate * 100) / 100, SalesItemLineDetail: { ItemRef: { value: r.item.value }, Qty: qty, UnitPrice: rate } };
+        if (r.desc.value.trim()) line.Description = r.desc.value.trim();
+        out.push(line);
+      }
+      if (!out.length) { rows[0].item.classList.add("invalid"); return { error: "Add at least one product or service line.", focus: rows[0].item }; }
+      return { lines: out };
+    },
+    markLine(index) { const r = rows.filter((x) => x.item.value)[index]; if (r) { r.item.classList.add("invalid"); r.item.focus(); } },
+  };
+}

package/firedrill/tools/quickbooks/app/site/views/invoices.js

@@ -0,0 +1,118 @@
+// Sales & Get paid > Invoices: money bar, filters, server-side paging through query.run, row actions.
+import { app, go, isVoided, query, queryAll, register } from "../store.js";
+import { addDays, amount, call, describe, el, errorBanner, icon, isAccessDenied, loadingRows, mdY, money, notSimulated, quote, toast } from "../ui.js";
+import { emptyRow, pageShell, pager, salesTabs, select, statusCell } from "./common.js";
+import { openInvoiceEditor } from "./invoice-editor.js";
+import { rowActions } from "./invoice-actions.js";
+import { createSelection } from "./batch.js";
+import { invoiceBatchActions } from "./batch-actions.js";
+
+const SIZE = 25;
+
+/** Money bar data: unpaid (overdue / not due) over 365 days and paid (not deposited / deposited) over 30 days. */
+export async function moneyBarData() {
+  const today = app.today;
+  const [open, payments, undeposited] = await Promise.all([
+    queryAll(`select * from Invoice where Balance > '0' AND TxnDate >= ${quote(addDays(today, -365))}`),
+    queryAll(`select * from Payment where TxnDate >= ${quote(addDays(today, -30))}`),
+    queryAll("select * from Account where Active IN (true, false)").then((a) => new Set(a.filter((x) => x.AccountSubType === "UndepositedFunds").map((x) => x.Id))).catch(() => new Set()),
+  ]);
+  const d = { overdue: 0, overdueN: 0, notDue: 0, notDueN: 0, notDeposited: 0, notDepositedN: 0, deposited: 0, depositedN: 0 };
+  for (const inv of open) {
+    if (inv.DueDate < today) { d.overdue += Number(inv.Balance); d.overdueN += 1; } else { d.notDue += Number(inv.Balance); d.notDueN += 1; }
+  }
+  for (const p of payments) {
+    if (typeof p.PrivateNote === "string" && p.PrivateNote.startsWith("Voided")) continue;
+    if (undeposited.has(p.DepositToAccountRef?.value)) { d.notDeposited += Number(p.TotalAmt); d.notDepositedN += 1; } else { d.deposited += Number(p.TotalAmt); d.depositedN += 1; }
+  }
+  return d;
+}
+
+function moneyBar(d, selected, onPick) {
+  const seg = (key, amt, n, label, tone) => el("button", { type: "button", class: `mb-seg${selected === key ? " selected" : ""}`, "aria-pressed": selected === key ? "true" : "false", onclick: () => onPick(selected === key ? "" : key), style: undefined }, [
+    el("div", { class: "mb-amt", text: money(amt) }), el("div", { class: "mb-lbl", text: `${n} ${label}` }), el("div", { class: `mb-bar ${tone}` }),
+  ]);
+  return el("div", { class: "moneybar", role: "group", "aria-label": "Invoice summary" }, [
+    el("div", {}, [el("div", { class: "mb-group-head" }, [el("span", {}, [el("strong", { text: `${money(d.overdue + d.notDue)} Unpaid` })]), el("span", { text: "Last 365 days" })]),
+      el("div", { class: "mb-segs" }, [seg("overdue", d.overdue, d.overdueN, "Overdue", "tone-orange"), seg("open", d.notDue, d.notDueN, "Not due yet", "tone-grey")])]),
+    el("div", {}, [el("div", { class: "mb-group-head" }, [el("span", {}, [el("strong", { text: `${money(d.notDeposited + d.deposited)} Paid` })]), el("span", { text: "Last 30 days" })]),
+      el("div", { class: "mb-segs" }, [seg("notdeposited", d.notDeposited, d.notDepositedN, "Not deposited", "tone-lgreen"), seg("paid", d.deposited, d.depositedN, "Deposited", "tone-green")])]),
+  ]);
+}
+
+register("invoices", async (host, route) => {
+  const p = route.params;
+  const status = p.get("status") ?? "";
+  const customer = p.get("customer") ?? "";
+  const dates = p.get("dates") ?? "365";
+  const q = p.get("q") ?? "";
+  const start = Math.max(1, Number(p.get("start")) || 1);
+  const nav = (patch) => { const n = new URLSearchParams(p); for (const [k, v] of Object.entries(patch)) v ? n.set(k, v) : n.delete(k); go(`#/invoices?${n}`); };
+  const refresh = () => { if (host.isConnected) app.pages.invoices(host, route); };
+  const { root, body } = pageShell("Invoices", {
+    crumb: "Sales & Get paid",
+    actions: [
+      el("button", { type: "button", class: "btn", text: "Manage templates", onclick: () => notSimulated("Custom form styles") }),
+      el("div", { class: "split" }, [el("button", { type: "button", class: "btn primary", text: "Create invoice", onclick: () => openInvoiceEditor(null, refresh) }),
+        el("button", { type: "button", class: "btn primary", "aria-label": "More create options", onclick: () => notSimulated("Import invoices") }, icon("chevronDown"))]),
+    ],
+    tabs: salesTabs("invoices"),
+  });
+  const barHost = el("div", {}, el("div", { class: "moneybar" }, [el("div", { class: "skeleton" }), el("div", { class: "skeleton" })]));
+  const search = el("input", { type: "search", placeholder: "Search by invoice no.", "aria-label": "Search by invoice number", value: q });
+  search.addEventListener("keydown", (e) => { if (e.key === "Enter") nav({ q: search.value.trim(), start: "" }); });
+  const statusSel = select([["", "All"], ["unpaid", "Unpaid"], ["overdue", "Overdue"], ["open", "Not due yet"], ["paidall", "Paid"]], ["notdeposited", "paid"].includes(status) ? "paidall" : status);
+  statusSel.setAttribute("aria-label", "Status");
+  statusSel.addEventListener("change", () => nav({ status: statusSel.value, start: "" }));
+  const dateSel = select([["365", "Last 365 days"], ["90", "Last 90 days"], ["30", "Last 30 days"], ["all", "All dates"]], dates);
+  dateSel.setAttribute("aria-label", "Date");
+  dateSel.addEventListener("change", () => nav({ dates: dateSel.value, start: "" }));
+  const custSel = select([["", "All customers"]], "");
+  custSel.setAttribute("aria-label", "Customer");
+  custSel.addEventListener("change", () => nav({ customer: custSel.value, start: "" }));
+  const sel = createSelection({ noun: "invoices", labelFor: (inv) => `invoice ${inv.DocNumber ?? inv.Id}`, actionsFor: (rows) => invoiceBatchActions(rows, refresh) });
+  const tbody = el("tbody", {}, loadingRows(7));
+  const foot = el("div");
+  const card = el("div", { class: "card" }, [
+    el("div", { class: "toolbar" }, [el("div", { class: "tsearch" }, [icon("search"), search]), el("label", { class: "filter-label" }, ["Status", statusSel]), el("label", { class: "filter-label" }, ["Date", dateSel]), el("label", { class: "filter-label" }, ["Customer", custSel]), el("div", { class: "grow" }),
+      el("button", { type: "button", class: "icon-btn", "aria-label": "Print list", title: "Print list", onclick: () => notSimulated("Print list") }, icon("print")),
+      el("button", { type: "button", class: "icon-btn", "aria-label": "Export to Excel", title: "Export to Excel", onclick: () => notSimulated("Export to Excel") }, icon("export")),
+      el("button", { type: "button", class: "icon-btn", "aria-label": "Table settings", title: "Settings", onclick: () => notSimulated("Table settings") }, icon("gear"))]),
+    sel.bar,
+    el("div", { class: "table-wrap" }, el("table", { class: "grid" }, [el("thead", {}, el("tr", {}, [el("th", { class: "check" }, sel.head), ...["Date", "No.", "Customer", "Amount", "Status", "Action"].map((h, i) => el("th", { class: i === 3 ? "num" : i === 5 ? "act" : "", text: h }))])), tbody])),
+    foot,
+  ]);
+  body.append(barHost, card);
+  host.replaceChildren(root);
+  moneyBarData().then((d) => barHost.replaceChildren(moneyBar(d, status, (key) => nav({ status: key, start: "" })))).catch((error) => (isAccessDenied(error) ? barHost.remove() : barHost.replaceChildren(errorBanner(error, "We couldn't load the invoice summary"))));
+  queryAll("select * from Customer where Active IN (true, false) orderby DisplayName").then((cs) => { for (const c of cs) custSel.append(el("option", { value: c.Id, text: c.DisplayName })); custSel.value = customer; }).catch((error) => { if (!isAccessDenied(error)) toast(`Customer filter: ${describe(error)}`, { error: true }); });
+  try {
+    const where = [];
+    if (dates !== "all") where.push(`TxnDate >= ${quote(addDays(app.today, -Number(dates)))}`);
+    if (status === "unpaid") where.push("Balance > '0'");
+    if (status === "overdue") where.push("Balance > '0'", `DueDate < ${quote(app.today)}`);
+    if (status === "open") where.push("Balance > '0'", `DueDate >= ${quote(app.today)}`);
+    if (status === "paidall" || status === "paid" || status === "notdeposited") where.push("Balance = '0'");
+    if (customer) where.push(`CustomerRef = ${quote(customer)}`);
+    if (q) where.push(`DocNumber LIKE ${quote(`%${q}%`)}`);
+    const clause = where.length ? ` where ${where.join(" AND ")}` : "";
+    const total = (await call("query.run", { query: `select count(*) from Invoice${clause}` })).QueryResponse.totalCount ?? 0;
+    const rows = await query(`select * from Invoice${clause} orderby TxnDate desc STARTPOSITION ${start} MAXRESULTS ${SIZE}`);
+    sel.reset();
+    tbody.replaceChildren(...(rows.length ? rows.map((inv) => {
+      const tr = el("tr", { class: "clickable", tabindex: "0", "aria-label": `Invoice ${inv.DocNumber ?? inv.Id}` }, [
+        sel.cell(inv),
+        el("td", { text: mdY(inv.TxnDate) }), el("td", { text: inv.DocNumber ?? "" }), el("td", { text: inv.CustomerRef?.name ?? "" }),
+        el("td", { class: "num", text: isVoided(inv) ? "$0.00" : money(inv.TotalAmt) }), el("td", {}, statusCell(inv)), el("td", { class: "act" }, rowActions(inv, refresh)),
+      ]);
+      const open = () => openInvoiceEditor(inv.Id, refresh);
+      tr.addEventListener("click", (e) => { if (!e.target.closest("button, input, a")) open(); });
+      tr.addEventListener("keydown", (e) => { if (e.key === "Enter" && e.target === tr) open(); });
+      return tr;
+    }) : [emptyRow(7, q || status || customer ? "No invoices match these filters" : "No invoices yet", q || status || customer ? "Try changing the filters." : "Create an invoice to get paid faster.")]));
+    foot.replaceChildren(pager({ start, size: SIZE, total, onChange: (s) => nav({ start: String(s) }) }));
+  } catch (error) {
+    card.replaceWith(errorBanner(error, isAccessDenied(error) ? "You don't have access to Sales data" : "We couldn't load your invoices"));
+  }
+  void amount;
+});

package/firedrill/tools/quickbooks/app/site/views/items.js

@@ -0,0 +1,105 @@
+// Sales & Get paid > Products & services, plus the new/edit product drawer (Service and Non-inventory).
+import { app, go, query, queryAll, register } from "../store.js";
+import { ToolError, amount, call, describe, el, errorBanner, icon, isAccessDenied, loadingRows, newKey, notSimulated, openMenu, toast } from "../ui.js";
+import { drawer, emptyRow, field, input, pageShell, pager, salesTabs, select } from "./common.js";
+import { createSelection } from "./batch.js";
+import { itemBatchActions } from "./batch-actions.js";
+
+const SIZE = 25;
+const typeLabel = (t) => (t === "NonInventory" ? "Non-inventory" : t);
+
+export async function openItemDrawer(existing = null, onSaved) {
+  let accounts = [];
+  try { accounts = await queryAll("select * from Account where AccountType = 'Income'"); } catch (error) { toast(describe(error), { error: true }); return; }
+  const it = existing ?? {};
+  const type = select([["Service", "Service"], ["NonInventory", "Non-inventory"], ["Inventory", "Inventory (not simulated)", true], ["Bundle", "Bundle (not simulated)", true]], it.Type ?? "Service");
+  if (existing) type.disabled = true;
+  const f = {
+    Type: field("Item type", type),
+    Name: field("Name *", input({ value: it.Name ?? "" })),
+    Sku: field("SKU", input({ value: it.Sku ?? "" })),
+    Description: field("Description", el("textarea", { value: it.Description ?? "" }), { hint: "Description on sales forms" }),
+    UnitPrice: field("Sales price/rate", input({ type: "number", step: "0.01", min: "0", value: it.UnitPrice ?? "" })),
+    Income: field("Income account *", select([["", "Select an account"], ...accounts.map((a) => [a.Id, a.Name])], it.IncomeAccountRef?.value ?? "")),
+  };
+  const formError = el("div");
+  const key = newKey();
+  drawer(existing ? "Product/service information" : "New product/service", [formError, f.Type.wrap, f.Name.wrap, f.Sku.wrap, f.Description.wrap, el("div", { class: "row2" }, [f.UnitPrice.wrap, f.Income.wrap])], (close) => {
+    const save = el("button", { type: "button", class: "btn primary", text: "Save and close" });
+    save.addEventListener("click", async () => {
+      for (const x of Object.values(f)) x.setError("");
+      formError.replaceChildren();
+      const body = { Name: f.Name.input.value.trim(), Type: type.value };
+      if (!body.Name) return f.Name.setError("Enter a name.");
+      if (!f.Income.input.value) return f.Income.setError("Select an income account.");
+      body.IncomeAccountRef = { value: f.Income.input.value };
+      const sku = f.Sku.input.value.trim(); if (sku) body.Sku = sku;
+      const d = f.Description.input.value.trim(); if (d) body.Description = d;
+      if (f.UnitPrice.input.value !== "") body.UnitPrice = Number(f.UnitPrice.input.value);
+      if (existing) Object.assign(body, { Id: existing.Id, SyncToken: existing.SyncToken, sparse: true });
+      save.disabled = true;
+      try {
+        const out = await call("items.post", { body }, key);
+        close();
+        toast(`${out.Item.Name} saved`);
+        onSaved ? onSaved(out.Item) : go("#/items");
+      } catch (error) {
+        save.disabled = false;
+        const target = error instanceof ToolError ? { Name: "Name", Sku: "Sku", UnitPrice: "UnitPrice", IncomeAccountRef: "Income", Type: "Type", Description: "Description" }[error.element] : undefined;
+        if (target) f[target].setError(describe(error)); else formError.replaceChildren(errorBanner(error, "We couldn't save this product or service"));
+      }
+    });
+    return [el("button", { type: "button", class: "btn", text: "Cancel", onclick: close }), save];
+  });
+}
+
+register("items", async (host, route) => {
+  const q = route.params.get("q") ?? "";
+  const status = route.params.get("status") ?? "active";
+  const start = Math.max(1, Number(route.params.get("start")) || 1);
+  const nav = (patch) => { const p = new URLSearchParams(route.params); for (const [k, v] of Object.entries(patch)) v ? p.set(k, v) : p.delete(k); go(`#/items?${p}`); };
+  const { root, body } = pageShell("Products & services", {
+    crumb: "Sales & Get paid",
+    actions: [el("button", { type: "button", class: "btn", text: "More", onclick: () => notSimulated("Manage categories") }), el("button", { type: "button", class: "btn primary", text: "New", onclick: () => openItemDrawer(null, () => host.isConnected && app.pages.items(host, route)) })],
+    tabs: salesTabs("items"),
+  });
+  const search = el("input", { type: "search", placeholder: "Search", "aria-label": "Search products and services", value: q });
+  search.addEventListener("keydown", (e) => { if (e.key === "Enter") nav({ q: search.value.trim(), start: "" }); });
+  const stat = select([["active", "Active"], ["inactive", "Inactive"], ["all", "All"]], status);
+  stat.setAttribute("aria-label", "Status");
+  stat.addEventListener("change", () => nav({ status: stat.value, start: "" }));
+  const refresh = () => { if (host.isConnected) app.pages.items(host, route); };
+  const sel = createSelection({ noun: "products and services", labelFor: (it) => it.Name, actionsFor: (rows) => itemBatchActions(rows, refresh) });
+  const tbody = el("tbody", {}, loadingRows(8));
+  const foot = el("div");
+  const card = el("div", { class: "card" }, [
+    el("div", { class: "toolbar" }, [el("div", { class: "tsearch" }, [icon("search"), search]), el("label", { class: "filter-label" }, ["Status", stat]), el("div", { class: "grow" })]),
+    sel.bar,
+    el("div", { class: "table-wrap" }, el("table", { class: "grid" }, [el("thead", {}, el("tr", {}, [el("th", { class: "check" }, sel.head), ...["Name", "SKU", "Type", "Sales description", "Sales price", "Income account", "Action"].map((h, i) => el("th", { class: i === 4 ? "num" : i === 6 ? "act" : "", text: h }))])), tbody])),
+    foot,
+  ]);
+  body.append(card);
+  host.replaceChildren(root);
+  try {
+    const where = [status === "all" ? "Active IN (true, false)" : status === "inactive" ? "Active = false" : "Active = true"];
+    if (q) where.push(`Name LIKE '%${q.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}%'`);
+    const clause = ` where ${where.join(" AND ")}`;
+    const total = (await call("query.run", { query: `select count(*) from Item${clause}` })).QueryResponse.totalCount ?? 0;
+    const rows = await query(`select * from Item${clause} orderby Name STARTPOSITION ${start} MAXRESULTS ${SIZE}`);
+    sel.reset();
+    tbody.replaceChildren(...(rows.length ? rows.map((it) => {
+      const edit = el("button", { type: "button", class: "link-btn", text: "Edit", onclick: () => openItemDrawer(it, refresh) });
+      const caret = el("button", { type: "button", class: "caret", "aria-label": `More actions for ${it.Name}`, "aria-haspopup": "menu" }, icon("chevronDown"));
+      caret.addEventListener("click", () => openMenu(caret, [
+        { label: it.Active ? "Make inactive" : "Make active", run: async () => {
+          try { await call("items.post", { body: { Id: it.Id, SyncToken: it.SyncToken, sparse: true, Name: it.Name, Type: it.Type, Active: !it.Active } }, newKey()); toast(`${it.Name} is now ${it.Active ? "inactive" : "active"}`); refresh(); } catch (error) { toast(describe(error), { error: true }); }
+        } },
+        { label: "Duplicate", run: () => notSimulated("Duplicate product") },
+      ]));
+      return el("tr", {}, [sel.cell(it), el("td", {}, [el("span", { text: it.Name }), it.Active ? null : el("span", { class: "pill inactive", text: "Inactive" })]), el("td", { text: it.Sku ?? "" }), el("td", { text: typeLabel(it.Type) }), el("td", { class: "muted", text: it.Description ?? "" }), el("td", { class: "num", text: it.UnitPrice === undefined || it.UnitPrice === null ? "" : amount(it.UnitPrice) }), el("td", { text: it.IncomeAccountRef?.name ?? "" }), el("td", { class: "act" }, el("div", { class: "row-actions" }, [edit, caret]))]);
+    }) : [emptyRow(8, q ? "No products or services match your search" : "No products or services yet", q ? "Try a different name." : "Add the things you sell to use them on invoices.")]));
+    foot.replaceChildren(pager({ start, size: SIZE, total, onChange: (s) => nav({ start: String(s) }) }));
+  } catch (error) {
+    card.replaceWith(errorBanner(error, isAccessDenied(error) ? "You don't have access to products and services" : "We couldn't load products and services"));
+  }
+});