@firedrill-tools/quickbooks 0.1.2

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

@@ -0,0 +1,116 @@
+// Batch action menus for the invoice, customer and product lists. Every simulated action runs one call per selected row.
+import { call, confirmDialog, describe, dialog, el, newKey, notSimulated, toast } from "../ui.js";
+import { runBatch } from "./batch.js";
+
+function resultDialog(title, rows) {
+  const holder = el("div");
+  const { close } = dialog({ title, wide: true, body: holder, actions: [{ label: "Close", kind: "primary", run: (c) => c() }] });
+  void rows;
+  return { holder, close };
+}
+
+const invLabel = (inv) => `Invoice ${inv.DocNumber ?? inv.Id} · ${inv.CustomerRef?.name ?? ""}`;
+
+async function batchPrint(rows) {
+  const { holder } = resultDialog(`Print or download ${rows.length} transaction${rows.length > 1 ? "s" : ""}`, rows);
+  await runBatch({
+    box: holder, rows, label: invLabel, describeError: describe,
+    run: async (inv) => {
+      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" }));
+      return el("a", { href: url, download: `Invoice_${inv.DocNumber ?? inv.Id}.pdf`, text: `Download PDF (${Math.ceil(out.size_bytes / 1024)} KB)` });
+    },
+  });
+}
+
+async function batchSend(rows, refresh) {
+  const ok = await confirmDialog(
+    `Send ${rows.length} transaction${rows.length > 1 ? "s" : ""}?`,
+    `QuickBooks will email ${rows.length} invoice${rows.length > 1 ? "s" : ""} to the address on each one. Firedrill records a synthetic send; no e-mail is delivered.`,
+    "Send", "primary",
+  );
+  if (!ok) return;
+  const { holder } = resultDialog(`Send ${rows.length} transaction${rows.length > 1 ? "s" : ""}`, rows);
+  const sent = await runBatch({
+    box: holder, rows, label: invLabel, describeError: describe,
+    run: async (inv) => { await call("invoices.send", { invoice_id: inv.Id }, newKey()); return `Sent to ${inv.BillEmail?.Address ?? "the customer"}`; },
+  });
+  if (sent) toast(`${sent} of ${rows.length} invoice${rows.length > 1 ? "s" : ""} sent`);
+  refresh?.();
+}
+
+async function batchDelete(rows, refresh) {
+  const ok = await confirmDialog(
+    `Delete ${rows.length} transaction${rows.length > 1 ? "s" : ""}?`,
+    `Are you sure you want to delete ${rows.length} invoice${rows.length > 1 ? "s" : ""}? This can't be undone. Any payments applied to them are left unapplied.`,
+    "Yes, delete", "danger",
+  );
+  if (!ok) return;
+  const { holder } = resultDialog(`Delete ${rows.length} transaction${rows.length > 1 ? "s" : ""}`, rows);
+  const gone = await runBatch({
+    box: holder, rows, label: invLabel, describeError: describe,
+    run: async (inv) => { await call("invoices.post", { operation: "delete", body: { Id: inv.Id, SyncToken: inv.SyncToken } }, newKey()); return "Deleted"; },
+  });
+  if (gone) toast(`${gone} of ${rows.length} invoice${rows.length > 1 ? "s" : ""} deleted`);
+  refresh?.();
+}
+
+export function invoiceBatchActions(rows, refresh) {
+  return [
+    { label: `Print transactions (${rows.length})`, run: () => batchPrint(rows) },
+    { label: `Send transactions (${rows.length})`, run: () => batchSend(rows, refresh) },
+    { label: `Delete (${rows.length})`, run: () => batchDelete(rows, refresh) },
+    { label: "Print packing slip", title: "Not simulated by this Tool", run: () => notSimulated("Packing slips") },
+  ];
+}
+
+async function batchInactive(rows, refresh) {
+  const ok = await confirmDialog(
+    `Make ${rows.length} customer${rows.length > 1 ? "s" : ""} inactive?`,
+    "Inactive customers are hidden from lists but their past transactions stay in your books. A customer with an open balance can't be made inactive.",
+    "Yes, make inactive", "primary",
+  );
+  if (!ok) return;
+  const { holder } = resultDialog(`Make ${rows.length} customer${rows.length > 1 ? "s" : ""} inactive`, rows);
+  const done = await runBatch({
+    box: holder, rows, label: (c) => c.DisplayName, describeError: describe,
+    run: async (c) => { await call("customers.post", { body: { Id: c.Id, SyncToken: c.SyncToken, sparse: true, Active: false } }, newKey()); return "Made inactive"; },
+  });
+  if (done) toast(`${done} of ${rows.length} customer${rows.length > 1 ? "s" : ""} made inactive`);
+  refresh?.();
+}
+
+export function customerBatchActions(rows, refresh) {
+  return [
+    { label: `Make inactive (${rows.length})`, run: () => batchInactive(rows, refresh) },
+    { label: "Email", title: "Not simulated by this Tool", run: () => notSimulated("Batch email") },
+    { label: "Create statements", title: "Not simulated by this Tool", run: () => notSimulated("Statements") },
+  ];
+}
+
+async function setItemsActive(rows, active, refresh) {
+  const verb = active ? "active" : "inactive";
+  const ok = await confirmDialog(
+    `Make ${rows.length} product${rows.length > 1 ? "s" : ""} or service${rows.length > 1 ? "s" : ""} ${verb}?`,
+    active ? "They will appear again on invoices and in lists." : "Inactive products and services stay on past transactions but can't be added to new ones.",
+    `Yes, make ${verb}`, "primary",
+  );
+  if (!ok) return;
+  const { holder } = resultDialog(`Make ${rows.length} item${rows.length > 1 ? "s" : ""} ${verb}`, rows);
+  const done = await runBatch({
+    box: holder, rows, label: (it) => it.Name, describeError: describe,
+    run: async (it) => { await call("items.post", { body: { Id: it.Id, SyncToken: it.SyncToken, sparse: true, Name: it.Name, Type: it.Type, Active: active } }, newKey()); return `Now ${verb}`; },
+  });
+  if (done) toast(`${done} of ${rows.length} now ${verb}`);
+  refresh?.();
+}
+
+export function itemBatchActions(rows, refresh) {
+  return [
+    { label: `Make active (${rows.length})`, run: () => setItemsActive(rows, true, refresh) },
+    { label: `Make inactive (${rows.length})`, run: () => setItemsActive(rows, false, refresh) },
+    { label: "Reclassify", title: "Not simulated by this Tool", run: () => notSimulated("Reclassify") },
+    { label: "Assign category", title: "Not simulated by this Tool", run: () => notSimulated("Categories") },
+  ];
+}

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

@@ -0,0 +1,91 @@
+// Row selection and the "N selected / Batch actions" bar that QuickBooks shows above a list grid.
+import { el, icon, openMenu } from "../ui.js";
+
+/**
+ * Creates the header checkbox, the per-row checkbox cells and the batch bar.
+ * `actionsFor(rows)` returns openMenu items for the currently selected rows.
+ */
+export function createSelection({ noun, actionsFor, labelFor }) {
+  const entries = new Map(); // id -> { row, box }
+  const count = el("span", { class: "batch-count" });
+  const head = el("input", { type: "checkbox", "aria-label": `Select all ${noun}`, disabled: true });
+  const menuBtn = el("button", { type: "button", class: "btn", "aria-haspopup": "menu", "aria-expanded": "false" }, [
+    el("span", { text: "Batch actions" }), icon("chevronDown"),
+  ]);
+  const clearBtn = el("button", { type: "button", class: "link-btn", text: "Clear selection" });
+  const bar = el("div", { class: "batch-bar", role: "region", "aria-label": `Selected ${noun}`, hidden: true }, [
+    count, menuBtn, el("div", { class: "grow" }), clearBtn,
+  ]);
+
+  const chosen = () => [...entries.values()].filter((e) => e.box.checked).map((e) => e.row);
+  function sync() {
+    const n = chosen().length;
+    const total = entries.size;
+    count.textContent = `${n} selected`;
+    bar.hidden = n === 0;
+    head.disabled = total === 0;
+    head.checked = total > 0 && n === total;
+    head.indeterminate = n > 0 && n < total;
+    head.title = total === 0 ? "" : head.checked ? `Clear all ${noun} on this page` : `Select all ${noun} on this page`;
+  }
+  head.addEventListener("change", () => {
+    for (const e of entries.values()) e.box.checked = head.checked;
+    sync();
+  });
+  clearBtn.addEventListener("click", () => {
+    for (const e of entries.values()) e.box.checked = false;
+    sync();
+    head.focus();
+  });
+  menuBtn.addEventListener("click", () => {
+    const rows = chosen();
+    if (rows.length === 0) return;
+    openMenu(menuBtn, actionsFor(rows));
+  });
+
+  return {
+    head,
+    bar,
+    /** Resets the bar for a freshly rendered page of rows. */
+    reset() { entries.clear(); sync(); },
+    /** Checkbox cell for one row. */
+    cell(row) {
+      const box = el("input", { type: "checkbox", "aria-label": `Select ${labelFor(row)}` });
+      box.addEventListener("click", (e) => e.stopPropagation());
+      box.addEventListener("change", sync);
+      entries.set(String(row.Id), { row, box });
+      sync();
+      return el("td", { class: "check" }, box);
+    },
+  };
+}
+
+/**
+ * Runs `run(row)` over the selected rows one at a time and shows a per-row result list.
+ * Returns the number that succeeded.
+ */
+export async function runBatch({ box, rows, label, run, describeError }) {
+  const items = new Map();
+  const list = el("ul", { class: "batch-list" }, rows.map((row) => {
+    const note = el("span", { class: "bl-note", text: "Waiting…" });
+    items.set(String(row.Id), note);
+    return el("li", {}, [el("span", { text: label(row) }), note]);
+  }));
+  box.replaceChildren(el("p", { text: `${rows.length} ${rows.length === 1 ? "transaction" : "transactions"} selected.` }), list);
+  let ok = 0;
+  for (const row of rows) {
+    const note = items.get(String(row.Id));
+    note.textContent = "Working…";
+    note.className = "bl-note";
+    try {
+      const result = (await run(row)) ?? "Done";
+      if (result instanceof Node) note.replaceChildren(result); else note.textContent = String(result);
+      note.className = "bl-note ok";
+      ok += 1;
+    } catch (error) {
+      note.textContent = describeError(error);
+      note.className = "bl-note err";
+    }
+  }
+  return ok;
+}

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

@@ -0,0 +1,87 @@
+// Shared view pieces: page header, Sales tabs, invoice status cell, pager, field helpers.
+import { invoiceStatus } from "../store.js";
+import { el, icon, notSimulated } from "../ui.js";
+
+export function pageShell(title, { actions = [], tabs = null, crumb = null } = {}) {
+  const body = el("div", { class: "page-body" });
+  const root = el("div", { class: "page-inner" }, [
+    crumb ? el("div", { class: "crumb" }, crumb) : null,
+    el("div", { class: "page-head" }, [el("h1", { text: title }), el("div", { class: "actions" }, actions)]),
+    tabs,
+    body,
+  ]);
+  return { root, body };
+}
+
+const SALES_TABS = [["Overview"], ["All sales"], ["Invoices", "#/invoices", "invoices"], ["Payments", "#/payments", "payments"], ["Customers", "#/customers", "customers"], ["Products & services", "#/items", "items"]];
+export function salesTabs(active) {
+  return el("nav", { class: "tabs", "aria-label": "Sales & Get paid" }, SALES_TABS.map(([label, href, key]) =>
+    href
+      ? el("a", { class: `tab${key === active ? " active" : ""}`, href, "aria-current": key === active ? "page" : undefined, text: label })
+      : el("button", { type: "button", class: "tab", text: label, title: "Not simulated by this Tool", onclick: () => notSimulated(label) })));
+}
+
+export function statusCell(inv, today) {
+  const st = invoiceStatus(inv, today);
+  const dot = st.key === "overdue" || st.key === "due" ? "orange" : st.key === "voided" ? "grey" : st.key === "paid" || st.key === "deposited" ? "green" : "hollow";
+  return el("div", { class: "status" }, [
+    el("span", { class: `dot ${dot}`, "aria-hidden": "true" }),
+    el("div", {}, [
+      el("div", { class: `s-main${dot === "orange" ? " orange" : ""}`, text: st.label }),
+      st.sub ? el("div", { class: "s-sub", text: st.sub }) : null,
+      st.key === "open" || st.key === "overdue" || st.key === "due" ? el("div", { class: "s-sub", text: inv.EmailStatus === "EmailSent" ? "Sent" : "Not sent" }) : null,
+    ]),
+  ]);
+}
+
+/** Pager with first/prev/next and "1-25 of 60" text. */
+export function pager({ start, size, total, onChange }) {
+  const end = Math.min(start + size - 1, total);
+  const btn = (name, label, target, disabled) => el("button", { type: "button", class: "icon-btn", "aria-label": label, title: label, disabled, onclick: () => onChange(target) }, icon(name));
+  return el("div", { class: "pager" }, [
+    el("span", { text: total === 0 ? "0 items" : `${start}-${end} of ${total}` }),
+    btn("chevronLeft", "Previous page", Math.max(1, start - size), start <= 1),
+    btn("chevronRight", "Next page", start + size, end >= total),
+  ]);
+}
+
+let fieldSeq = 0;
+/** Labelled input/select/textarea; returns { wrap, input, setError }. */
+export function field(label, control, { hint } = {}) {
+  const id = `f${(fieldSeq += 1)}`;
+  control.id = id;
+  const err = el("div", { class: "err", role: "alert" });
+  const wrap = el("div", { class: "field" }, [el("label", { for: id, text: label }), control, hint ? el("div", { class: "muted", text: hint }) : null, err]);
+  const setError = (msg) => { wrap.classList.toggle("invalid", Boolean(msg)); err.textContent = msg ?? ""; };
+  return { wrap, input: control, setError };
+}
+export const input = (attrs = {}) => el("input", { type: "text", ...attrs });
+export function select(options, value) {
+  const s = el("select");
+  for (const [v, label, disabled] of options) s.append(el("option", { value: v, text: label, disabled }));
+  if (value !== undefined) s.value = value;
+  return s;
+}
+export function emptyRow(cols, title, text) {
+  return el("tr", {}, el("td", { class: "empty", colspan: cols }, [el("div", { class: "empty-title", text: title }), text ? el("div", { text }) : null]));
+}
+/** Drawer with header, scrolling body and footer actions. */
+export function drawer(title, body, actions) {
+  const root = document.getElementById("overlay-root");
+  const previous = document.activeElement;
+  const scrim = el("div", { class: "drawer-scrim" });
+  const close = () => { scrim.remove(); panel.remove(); document.removeEventListener("keydown", onKey); previous?.focus?.(); };
+  const onKey = (e) => { if (e.key === "Escape") close(); };
+  const foot = el("div", { class: "drawer-foot" });
+  const panel = el("aside", { class: "drawer", role: "dialog", "aria-modal": "true", "aria-label": title }, [
+    el("div", { class: "drawer-head" }, [el("h2", { text: title }), el("button", { type: "button", class: "icon-btn", "aria-label": "Close", onclick: close }, icon("close"))]),
+    el("div", { class: "drawer-body" }, body),
+    foot,
+  ]);
+  for (const a of actions(close)) foot.append(a);
+  scrim.addEventListener("click", close);
+  root.append(scrim, panel);
+  document.addEventListener("keydown", onKey);
+  panel.querySelector("input, select, textarea")?.focus();
+  return { close, panel };
+}

package/firedrill/tools/quickbooks/app/site/views/customer-detail.js

@@ -0,0 +1,85 @@
+// Customer page: contact header, open/overdue totals, Transaction list and Customer details tabs.
+import { app, go, isVoided, queryAll, register } from "../store.js";
+import { call, describe, el, errorBanner, icon, isAccessDenied, loadingRows, mdY, money, newKey, notSimulated, openMenu, quote, toast, confirmDialog } from "../ui.js";
+import { emptyRow, statusCell } from "./common.js";
+import { openCustomerDrawer } from "./customer-drawer.js";
+import { rowActions } from "./invoice-actions.js";
+import { openInvoiceEditor } from "./invoice-editor.js";
+import { openReceivePayment } from "./receive-payment.js";
+
+register("customer", async (host, route) => {
+  const refresh = () => { if (host.isConnected) app.pages.customer(host, route); };
+  host.replaceChildren(el("div", { class: "loading" }, [el("span", { class: "spinner" }), el("span", { text: "Loading customer…" })]));
+  let c;
+  try {
+    c = (await call("customers.get", { id: route.id ?? "" })).Customer;
+  } catch (error) {
+    host.replaceChildren(el("div", { class: "page-inner" }, [el("div", { class: "crumb" }, el("a", { href: "#/customers", text: "Customers" })), errorBanner(error, isAccessDenied(error) ? "You don't have access to this customer" : "We couldn't find this customer")]));
+    return;
+  }
+  const tab = route.sub === "details" ? "details" : "transactions";
+  const newTxn = el("button", { type: "button", class: "btn primary", "aria-haspopup": "menu" }, ["New transaction", icon("chevronDown")]);
+  newTxn.addEventListener("click", () => openMenu(newTxn, [
+    { label: "Invoice", disabled: !c.Active, run: () => openInvoiceEditor(null, refresh, { customerId: c.Id }) },
+    { label: "Payment", run: () => openReceivePayment({ customerId: c.Id, onSaved: refresh }) },
+    { label: "Estimate", run: () => notSimulated("Estimate") }, { label: "Sales receipt", run: () => notSimulated("Sales receipt") },
+    { label: "Credit memo", run: () => notSimulated("Credit memo") }, { label: "Statement", run: () => notSimulated("Statement") },
+  ]));
+  const inactivate = async () => {
+    if (!(await confirmDialog("Make inactive?", `Are you sure you want to make ${c.DisplayName} inactive?`, "Yes, make inactive"))) return;
+    try { await call("customers.delete", { idOrEntity: { Id: c.Id, SyncToken: c.SyncToken } }, newKey()); toast(`${c.DisplayName} is now inactive`); refresh(); }
+    catch (error) { toast(describe(error), { error: true }); }
+  };
+  const reactivate = async () => {
+    try { await call("customers.post", { body: { Id: c.Id, SyncToken: c.SyncToken, sparse: true, Active: true } }, newKey()); toast(`${c.DisplayName} is active again`); refresh(); }
+    catch (error) { toast(describe(error), { error: true }); }
+  };
+  const addr = c.BillAddr ? [c.BillAddr.Line1, c.BillAddr.City && `${c.BillAddr.City}, ${c.BillAddr.CountrySubDivisionCode ?? ""} ${c.BillAddr.PostalCode ?? ""}`.trim()].filter(Boolean).join(", ") : "";
+  const overdueHost = el("div", { class: "l-amt", text: "…" });
+  const header = el("div", { class: "card widget" }, [
+    el("div", { class: "sheet-top" }, [
+      el("div", {}, [
+        el("h1", { class: "greeting", text: c.DisplayName }),
+        c.Active ? null : el("span", { class: "pill inactive", text: "Inactive" }),
+        el("div", { class: "muted", text: [c.CompanyName, c.PrimaryEmailAddr?.Address, c.PrimaryPhone?.FreeFormNumber].filter(Boolean).join(" · ") }),
+        addr ? el("div", { class: "muted", text: addr }) : null,
+        c.Notes ? el("div", { class: "muted", text: `Notes: ${c.Notes}` }) : null,
+      ]),
+      el("div", { class: "actions", style: undefined }, [
+        el("div", { class: "page-head" }, el("div", { class: "actions" }, [el("button", { type: "button", class: "btn", text: "Edit", onclick: () => openCustomerDrawer(c, refresh) }),
+          c.Active ? el("button", { type: "button", class: "btn", text: "Make inactive", onclick: inactivate }) : el("button", { type: "button", class: "btn", text: "Make active", onclick: reactivate }), newTxn])),
+        el("div", { class: "legend" }, [el("div", {}, [el("div", { class: "l-amt", text: money(c.Balance) }), el("div", { class: "muted", text: "Open balance" })]), el("div", {}, [overdueHost, el("div", { class: "muted", text: "Overdue payment" })])]),
+      ]),
+    ]),
+  ]);
+  const tabs = el("nav", { class: "tabs", "aria-label": "Customer" }, [
+    el("a", { class: `tab${tab === "transactions" ? " active" : ""}`, href: `#/customers/${encodeURIComponent(c.Id)}`, text: "Transaction list" }),
+    el("a", { class: `tab${tab === "details" ? " active" : ""}`, href: `#/customers/${encodeURIComponent(c.Id)}/details`, text: "Customer details" }),
+    el("button", { type: "button", class: "tab", text: "Statements", onclick: () => notSimulated("Statements") }),
+  ]);
+  const content = el("div", { class: "card" });
+  host.replaceChildren(el("div", { class: "page-inner" }, [el("div", { class: "crumb" }, el("a", { href: "#/customers", text: "Customers" })), header, el("br"), tabs, content]));
+
+  if (tab === "details") {
+    const row = (k, v) => el("div", { class: "field" }, [el("span", { class: "muted", text: k }), el("div", { text: v || "—" })]);
+    content.replaceChildren(el("div", { class: "widget row2" }, [row("Customer display name", c.DisplayName), row("Company", c.CompanyName), row("First name", c.GivenName), row("Last name", c.FamilyName),
+      row("Email", c.PrimaryEmailAddr?.Address), row("Phone", c.PrimaryPhone?.FreeFormNumber), row("Billing address", addr), row("Terms", c.SalesTermRef?.name), row("Notes", c.Notes), row("Customer since", mdY(c.MetaData?.CreateTime))]));
+    return;
+  }
+  const tbody = el("tbody", {}, loadingRows(8, 4));
+  content.replaceChildren(el("div", { class: "table-wrap" }, el("table", { class: "grid" }, [el("thead", {}, el("tr", {}, ["Date", "Type", "No.", "Due date", "Balance", "Total", "Status", "Action"].map((h, i) => el("th", { class: i === 4 || i === 5 ? "num" : i === 7 ? "act" : "", text: h })))), tbody])));
+  try {
+    const ref = quote(c.Id);
+    const [invoices, payments] = await Promise.all([queryAll(`select * from Invoice where CustomerRef = ${ref}`), queryAll(`select * from Payment where CustomerRef = ${ref}`)]);
+    const overdue = invoices.filter((i) => Number(i.Balance) > 0 && i.DueDate < app.today).reduce((s, i) => s + Number(i.Balance), 0);
+    overdueHost.textContent = money(overdue);
+    const all = [...invoices.map((i) => ({ kind: "Invoice", date: i.TxnDate, row: i })), ...payments.map((p) => ({ kind: "Payment", date: p.TxnDate, row: p }))].sort((a, b) => (a.date < b.date ? 1 : a.date > b.date ? -1 : 0));
+    tbody.replaceChildren(...(all.length ? all.map(({ kind, row }) => kind === "Invoice"
+      ? el("tr", { class: "clickable", onclick: (e) => { if (!e.target.closest("button")) openInvoiceEditor(row.Id, refresh); } }, [el("td", { text: mdY(row.TxnDate) }), el("td", { text: "Invoice" }), el("td", { text: row.DocNumber ?? "" }), el("td", { text: mdY(row.DueDate) }), el("td", { class: "num", text: money(row.Balance) }), el("td", { class: "num", text: isVoided(row) ? "$0.00" : money(row.TotalAmt) }), el("td", {}, statusCell(row)), el("td", { class: "act" }, rowActions(row, refresh))])
+      : el("tr", {}, [el("td", { text: mdY(row.TxnDate) }), el("td", { text: "Payment" }), el("td", { text: row.PaymentRefNum ?? "" }), el("td", { text: "" }), el("td", { class: "num", text: money(-(row.UnappliedAmt ?? 0)) }), el("td", { class: "num", text: money(-row.TotalAmt) }), el("td", { text: String(row.PrivateNote ?? "").startsWith("Voided") ? "Voided" : Number(row.UnappliedAmt ?? 0) > 0 ? "Unapplied" : "Closed" }), el("td", { class: "act" }, el("a", { href: `#/payments?customer=${encodeURIComponent(c.Id)}`, text: "View" }))]))
+      : [emptyRow(8, "No transactions yet", "Invoices and payments for this customer appear here.")]));
+  } catch (error) {
+    content.replaceChildren(errorBanner(error, "We couldn't load transactions"));
+  }
+  void go;
+});

package/firedrill/tools/quickbooks/app/site/views/customer-drawer.js

@@ -0,0 +1,71 @@
+// New / edit customer drawer (customers.post create or full update with SyncToken).
+import { go } from "../store.js";
+import { ToolError, call, describe, el, newKey, toast } from "../ui.js";
+import { drawer, field, input } from "./common.js";
+
+export function openCustomerDrawer(existing = null, onSaved) {
+  const c = existing ?? {};
+  const f = {
+    GivenName: field("First name", input({ value: c.GivenName ?? "", autocomplete: "off" })),
+    FamilyName: field("Last name", input({ value: c.FamilyName ?? "", autocomplete: "off" })),
+    CompanyName: field("Company name", input({ value: c.CompanyName ?? "" })),
+    DisplayName: field("Customer display name *", input({ value: c.DisplayName ?? "" })),
+    Email: field("Email", input({ type: "email", value: c.PrimaryEmailAddr?.Address ?? "" })),
+    Phone: field("Phone number", input({ type: "tel", value: c.PrimaryPhone?.FreeFormNumber ?? "" })),
+    Line1: field("Street address 1", input({ value: c.BillAddr?.Line1 ?? "" })),
+    City: field("City", input({ value: c.BillAddr?.City ?? "" })),
+    State: field("State", input({ value: c.BillAddr?.CountrySubDivisionCode ?? "" })),
+    Zip: field("ZIP code", input({ value: c.BillAddr?.PostalCode ?? "" })),
+    Notes: field("Notes", el("textarea", { value: c.Notes ?? "" })),
+  };
+  const display = f.DisplayName.input;
+  const suggest = () => {
+    if (display.dataset.touched) return;
+    display.value = f.CompanyName.input.value.trim() || `${f.GivenName.input.value} ${f.FamilyName.input.value}`.trim();
+  };
+  if (!existing) for (const k of ["GivenName", "FamilyName", "CompanyName"]) f[k].input.addEventListener("input", suggest);
+  display.addEventListener("input", () => { display.dataset.touched = "1"; });
+  const formError = el("div");
+  const body = [formError,
+    el("div", { class: "section-title", text: "Name and contact" }),
+    el("div", { class: "row2" }, [f.GivenName.wrap, f.FamilyName.wrap]), f.CompanyName.wrap, f.DisplayName.wrap,
+    el("div", { class: "row2" }, [f.Email.wrap, f.Phone.wrap]),
+    el("div", { class: "section-title", text: "Addresses" }), f.Line1.wrap,
+    el("div", { class: "row3" }, [f.City.wrap, f.State.wrap, f.Zip.wrap]),
+    el("div", { class: "section-title", text: "Notes and attachments" }), f.Notes.wrap];
+  const key = newKey();
+  drawer(existing ? "Customer information" : "New customer", body, (close) => {
+    const save = el("button", { type: "button", class: "btn primary", text: "Save" });
+    save.addEventListener("click", async () => {
+      for (const x of Object.values(f)) x.setError("");
+      formError.replaceChildren();
+      const v = (k) => f[k].input.value.trim();
+      if (!v("DisplayName")) { f.DisplayName.setError("Enter a customer display name."); display.focus(); return; }
+      const bodyOut = { DisplayName: v("DisplayName") };
+      const opt = (k, val) => { if (val) bodyOut[k] = val; };
+      opt("GivenName", v("GivenName")); opt("FamilyName", v("FamilyName")); opt("CompanyName", v("CompanyName")); opt("Notes", v("Notes"));
+      if (v("Email")) bodyOut.PrimaryEmailAddr = { Address: v("Email") };
+      if (v("Phone")) bodyOut.PrimaryPhone = { FreeFormNumber: v("Phone") };
+      if (v("Line1") || v("City") || v("State") || v("Zip")) {
+        bodyOut.BillAddr = {};
+        for (const [k, s] of [["Line1", "Line1"], ["City", "City"], ["CountrySubDivisionCode", "State"], ["PostalCode", "Zip"]]) if (v(s)) bodyOut.BillAddr[k] = v(s);
+      }
+      if (existing) { bodyOut.Id = existing.Id; bodyOut.SyncToken = existing.SyncToken; bodyOut.sparse = true; }
+      save.disabled = true;
+      try {
+        const out = await call("customers.post", { body: bodyOut }, key);
+        close();
+        toast(existing ? "Customer saved" : `${out.Customer?.DisplayName ?? "Customer"} added`);
+        if (onSaved) onSaved(out.Customer); else go(`#/customers/${encodeURIComponent(out.Customer.Id)}`);
+      } catch (error) {
+        save.disabled = false;
+        const map = { DisplayName: "DisplayName", PrimaryEmailAddr: "Email", PrimaryPhone: "Phone", GivenName: "GivenName", FamilyName: "FamilyName", CompanyName: "CompanyName", Notes: "Notes" };
+        const target = error instanceof ToolError ? map[error.element] : undefined;
+        if (target) f[target].setError(describe(error));
+        else formError.replaceChildren(el("div", { class: "banner error", role: "alert" }, el("div", { text: describe(error) })));
+        if (error instanceof ToolError && error.is("STALE_OBJECT")) formError.replaceChildren(el("div", { class: "banner warn", role: "alert", text: "This customer was changed elsewhere. Close and reopen it to get the latest version." }));
+      }
+    });
+    return [el("button", { type: "button", class: "btn", text: "Cancel", onclick: close }), save];
+  });
+}

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

@@ -0,0 +1,87 @@
+// Sales & Get paid > Customers: money bar, search, include-inactive, paging, row actions.
+import { app, go, query, register } from "../store.js";
+import { call, el, errorBanner, icon, isAccessDenied, loadingRows, money, notSimulated, openMenu, quote } from "../ui.js";
+import { emptyRow, pageShell, pager, salesTabs, select } from "./common.js";
+import { openCustomerDrawer } from "./customer-drawer.js";
+import { openInvoiceEditor } from "./invoice-editor.js";
+import { moneyBarData } from "./invoices.js";
+import { openReceivePayment } from "./receive-payment.js";
+import { createSelection } from "./batch.js";
+import { customerBatchActions } from "./batch-actions.js";
+
+const SIZE = 25;
+
+register("customers", async (host, route) => {
+  const p = route.params;
+  const q = p.get("q") ?? "";
+  const inactive = p.get("inactive") === "1";
+  const balance = p.get("balance") ?? "";
+  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(`#/customers?${n}`); };
+  const refresh = () => { if (host.isConnected) app.pages.customers(host, route); };
+  const { root, body } = pageShell("Customers", {
+    crumb: "Sales & Get paid",
+    actions: [el("button", { type: "button", class: "btn", text: "Customer types", onclick: () => notSimulated("Customer types") }),
+      el("div", { class: "split" }, [el("button", { type: "button", class: "btn primary", text: "New customer", onclick: () => openCustomerDrawer() }),
+        el("button", { type: "button", class: "btn primary", "aria-label": "More new customer options", onclick: () => notSimulated("Import customers") }, icon("chevronDown"))])],
+    tabs: salesTabs("customers"),
+  });
+  const bar = el("div", { class: "moneybar" }, [el("div", { class: "skeleton" }), el("div", { class: "skeleton" })]);
+  const search = el("input", { type: "search", placeholder: "Search", "aria-label": "Search customers", value: q });
+  search.addEventListener("keydown", (e) => { if (e.key === "Enter") nav({ q: search.value.trim(), start: "" }); });
+  const bal = select([["", "All customers"], ["open", "With open balance"]], balance);
+  bal.setAttribute("aria-label", "Balance filter");
+  bal.addEventListener("change", () => nav({ balance: bal.value, start: "" }));
+  const inc = el("input", { type: "checkbox", id: "cust-inactive", checked: inactive, onchange: () => nav({ inactive: inc.checked ? "1" : "", start: "" }) });
+  const sel = createSelection({ noun: "customers", labelFor: (c) => c.DisplayName, actionsFor: (rows) => customerBatchActions(rows, refresh) });
+  const tbody = el("tbody", {}, loadingRows(5));
+  const foot = el("div");
+  const card = el("div", { class: "card" }, [
+    el("div", { class: "toolbar" }, [el("div", { class: "tsearch" }, [icon("search"), search]), bal, el("label", { class: "checkline", for: "cust-inactive" }, [inc, "Include inactive"]), el("div", { class: "grow" }),
+      el("button", { type: "button", class: "icon-btn", "aria-label": "Print list", title: "Print", onclick: () => notSimulated("Print list") }, icon("print")),
+      el("button", { type: "button", class: "icon-btn", "aria-label": "Export to Excel", title: "Export", onclick: () => notSimulated("Export to Excel") }, icon("export"))]),
+    sel.bar,
+    el("div", { class: "table-wrap" }, el("table", { class: "grid" }, [el("thead", {}, el("tr", {}, [el("th", { class: "check" }, sel.head), ...["Name", "Company name", "Phone", "Open balance", "Action"].map((h, i) => el("th", { class: i === 3 ? "num" : i === 4 ? "act" : "", text: h }))])), tbody])),
+    foot,
+  ]);
+  body.append(bar, card);
+  host.replaceChildren(root);
+  moneyBarData().then((d) => bar.replaceChildren(
+    el("div", {}, [el("div", { class: "mb-group-head" }, [el("strong", { text: "Unpaid" }), el("span", { text: "Last 365 days" })]), el("div", { class: "mb-segs" }, [
+      el("a", { class: "mb-seg", href: "#/invoices?status=overdue" }, [el("div", { class: "mb-amt", text: money(d.overdue) }), el("div", { class: "mb-lbl", text: `${d.overdueN} Overdue invoices` }), el("div", { class: "mb-bar tone-orange" })]),
+      el("a", { class: "mb-seg", href: "#/invoices?status=unpaid" }, [el("div", { class: "mb-amt", text: money(d.overdue + d.notDue) }), el("div", { class: "mb-lbl", text: `${d.overdueN + d.notDueN} Open invoices` }), el("div", { class: "mb-bar tone-grey" })])])]),
+    el("div", {}, [el("div", { class: "mb-group-head" }, [el("strong", { text: "Paid" }), el("span", { text: "Last 30 days" })]), el("div", { class: "mb-segs" }, [
+      el("a", { class: "mb-seg", href: "#/payments" }, [el("div", { class: "mb-amt", text: money(d.deposited + d.notDeposited) }), el("div", { class: "mb-lbl", text: `${d.depositedN + d.notDepositedN} Paid last 30 days` }), el("div", { class: "mb-bar tone-green" })])])]),
+  )).catch((error) => (isAccessDenied(error) ? bar.remove() : bar.replaceChildren(errorBanner(error, "We couldn't load the summary"))));
+  try {
+    const where = [inactive ? "Active IN (true, false)" : "Active = true"];
+    if (q) where.push(`DisplayName LIKE ${quote(`%${q}%`)}`);
+    if (balance === "open") where.push("Balance > '0'");
+    const clause = ` where ${where.join(" AND ")}`;
+    const total = (await call("query.run", { query: `select count(*) from Customer${clause}` })).QueryResponse.totalCount ?? 0;
+    const rows = await query(`select * from Customer${clause} orderby DisplayName STARTPOSITION ${start} MAXRESULTS ${SIZE}`);
+    sel.reset();
+    tbody.replaceChildren(...(rows.length ? rows.map((c) => {
+      const open = Number(c.Balance) > 0;
+      const primary = open
+        ? el("button", { type: "button", class: "link-btn", text: "Receive payment", onclick: () => openReceivePayment({ customerId: c.Id, onSaved: refresh }) })
+        : el("button", { type: "button", class: "link-btn", text: "Create invoice", disabled: !c.Active, onclick: () => openInvoiceEditor(null, refresh, { customerId: c.Id }) });
+      const caret = el("button", { type: "button", class: "caret", "aria-label": `More actions for ${c.DisplayName}`, "aria-haspopup": "menu" }, icon("chevronDown"));
+      caret.addEventListener("click", () => openMenu(caret, [
+        { label: "Create invoice", disabled: !c.Active, run: () => openInvoiceEditor(null, refresh, { customerId: c.Id }) },
+        { label: "Receive payment", run: () => openReceivePayment({ customerId: c.Id, onSaved: refresh }) },
+        { label: "Create sales receipt", run: () => notSimulated("Sales receipt") },
+        { label: "Create estimate", run: () => notSimulated("Estimate") },
+        { label: "Edit", run: () => openCustomerDrawer(c, refresh) },
+      ]));
+      const nameLink = el("a", { href: `#/customers/${encodeURIComponent(c.Id)}`, text: c.DisplayName });
+      return el("tr", {}, [sel.cell(c),
+        el("td", {}, [nameLink, c.Active ? null : el("span", { class: "pill inactive", text: " Inactive" }), c.PrimaryEmailAddr ? el("div", { class: "s-sub muted", text: c.PrimaryEmailAddr.Address }) : null]),
+        el("td", { text: c.CompanyName ?? "" }), el("td", { text: c.PrimaryPhone?.FreeFormNumber ?? "" }), el("td", { class: "num", text: money(c.Balance) }),
+        el("td", { class: "act" }, el("div", { class: "row-actions" }, [primary, caret]))]);
+    }) : [emptyRow(6, q ? "No customers match your search" : "No customers yet", q ? "Try another name." : "Add your first customer to start invoicing.")]));
+    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 customers"));
+  }
+});

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

@@ -0,0 +1,79 @@
+// Home: business at a glance (shortcuts, Invoices, Bank accounts, Sales, Customers owing money).
+import { app, go, queryAll, register } from "../store.js";
+import { addDays, el, errorBanner, icon, isAccessDenied, money, notSimulated, quote } from "../ui.js";
+import { openCustomerDrawer } from "./customer-drawer.js";
+import { openInvoiceEditor } from "./invoice-editor.js";
+import { moneyBarData } from "./invoices.js";
+import { openReceivePayment } from "./receive-payment.js";
+
+function widget(title, sub) {
+  const content = el("div", {}, [el("div", { class: "skeleton" }), el("br"), el("div", { class: "skeleton" })]);
+  const card = el("section", { class: "card widget", "aria-label": title }, [el("h2", {}, [el("span", { text: title }), sub ? el("span", { class: "muted", text: sub }) : null]), content]);
+  return { card, content };
+}
+const failed = (content, error) => content.replaceChildren(isAccessDenied(error)
+  ? el("div", { class: "muted" }, [el("div", { class: "empty-title", text: "You don't have access" }), el("div", { text: "Your user role can't see this data. Ask your company admin for access." })])
+  : errorBanner(error, "We couldn't load this"));
+
+function hbar(parts) {
+  const total = parts.reduce((s, p) => s + p.amt, 0) || 1;
+  return el("div", { class: "hbar", "aria-hidden": "true" }, parts.map((p) => { const d = el("div", { class: p.tone }); d.style.flex = String(Math.max(p.amt / total, p.amt > 0 ? 0.02 : 0)); return d; }));
+}
+
+register("home", async (host) => {
+  const hour = Number((app.time || "T09").split("T")[1]?.slice(0, 2) ?? 9);
+  const greet = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";
+  const sc = (label, name, run) => el("button", { type: "button", class: "shortcut", onclick: run }, [el("span", { class: "sc-ico" }, icon(name)), el("span", { text: label })]);
+  const inv = widget("Invoices");
+  const bank = widget("Bank accounts", "As of today");
+  const sales = widget("Sales", "Last 30 days");
+  const owing = widget("Customers owing money");
+  const pl = widget("Profit & loss", "Last month");
+  pl.content.replaceChildren(el("p", { class: "muted", text: "Profit and loss reports are not simulated by this Tool." }), el("button", { type: "button", class: "link-btn", text: "Learn more", onclick: () => notSimulated("Profit & loss") }));
+  const expenses = widget("Expenses", "Last month");
+  expenses.content.replaceChildren(el("p", { class: "muted", text: "Expenses, bills and bank feeds are not simulated by this Tool." }), el("button", { type: "button", class: "link-btn", text: "Learn more", onclick: () => notSimulated("Expenses") }));
+  const root = el("div", { class: "page-inner" }, [
+    el("div", { class: "greeting", text: `${greet}, ${app.company?.CompanyName ?? ""}` }),
+    app.companyError ? errorBanner(app.companyError, "We couldn't load your company") : null,
+    el("div", { class: "shortcuts", role: "group", "aria-label": "Shortcuts" }, [
+      sc("Create invoice", "invoice", () => openInvoiceEditor()), sc("Receive payment", "payment", () => openReceivePayment()),
+      sc("Add customer", "customers", () => openCustomerDrawer()), sc("Record expense", "expenses", () => notSimulated("Expense")),
+      sc("Add bank deposit", "bank", () => notSimulated("Bank deposit")), sc("Create check", "edit", () => notSimulated("Check")),
+    ]),
+    el("div", { class: "home-grid" }, [inv.card, bank.card, sales.card, owing.card, pl.card, expenses.card]),
+  ]);
+  host.replaceChildren(root);
+
+  moneyBarData().then((d) => inv.content.replaceChildren(
+    el("div", { class: "legend" }, [el("span", {}, [el("strong", { text: `${money(d.overdue + d.notDue)} Unpaid` })]), el("span", { class: "muted", text: "Last 365 days" })]),
+    hbar([{ amt: d.overdue, tone: "tone-orange" }, { amt: d.notDue, tone: "tone-grey" }]),
+    el("div", { class: "legend" }, [
+      el("a", { href: "#/invoices?status=overdue" }, [el("div", { class: "l-amt", text: money(d.overdue) }), el("div", { class: "muted", text: "Overdue" })]),
+      el("a", { href: "#/invoices?status=open" }, [el("div", { class: "l-amt", text: money(d.notDue) }), el("div", { class: "muted", text: "Not due yet" })])]),
+    el("div", { class: "hr" }),
+    el("div", { class: "legend" }, [el("span", {}, [el("strong", { text: `${money(d.notDeposited + d.deposited)} Paid` })]), el("span", { class: "muted", text: "Last 30 days" })]),
+    hbar([{ amt: d.notDeposited, tone: "tone-lgreen" }, { amt: d.deposited, tone: "tone-green" }]),
+    el("div", { class: "legend" }, [
+      el("a", { href: "#/payments" }, [el("div", { class: "l-amt", text: money(d.notDeposited) }), el("div", { class: "muted", text: "Not deposited" })]),
+      el("a", { href: "#/payments" }, [el("div", { class: "l-amt", text: money(d.deposited) }), el("div", { class: "muted", text: "Deposited" })])]),
+  )).catch((e) => failed(inv.content, e));
+
+  queryAll("select * from Account where AccountType = 'Bank'").then((accts) => bank.content.replaceChildren(
+    accts.length ? el("ul", { class: "alist" }, accts.map((a) => el("li", {}, [el("span", { text: a.Name }), el("strong", { text: money(a.CurrentBalance) })])))
+      : el("p", { class: "muted", text: "No bank accounts." }),
+    el("button", { type: "button", class: "link-btn", text: "Go to registers", onclick: () => go("#/accounts") }),
+  )).catch((e) => failed(bank.content, e));
+
+  queryAll(`select * from Invoice where TxnDate >= ${quote(addDays(app.today, -30))}`).then((rows) => {
+    const total = rows.reduce((s, r) => s + Number(r.TotalAmt || 0), 0);
+    sales.content.replaceChildren(el("div", { class: "big", text: money(total) }), el("div", { class: "muted", text: `${rows.length} invoice${rows.length === 1 ? "" : "s"} created in the last 30 days` }),
+      el("a", { href: "#/invoices?dates=30", text: "View invoices" }));
+  }).catch((e) => failed(sales.content, e));
+
+  queryAll("select * from Customer where Balance > '0' orderby DisplayName").then((rows) => {
+    rows.sort((a, b) => Number(b.Balance) - Number(a.Balance));
+    owing.content.replaceChildren(rows.length
+      ? el("ul", { class: "alist" }, rows.slice(0, 6).map((c) => el("li", {}, [el("a", { href: `#/customers/${encodeURIComponent(c.Id)}`, text: c.DisplayName }), el("strong", { text: money(c.Balance) })])))
+      : el("p", { class: "muted", text: "No customers owe you money right now." }));
+  }).catch((e) => failed(owing.content, e));
+});