@firedrill-tools/netsuite 0.1.2

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

@@ -0,0 +1,162 @@
+// Home dashboard: the NetSuite portlet grid (Reminders, Recent Records, Navigation, Tasks | Key Performance
+// Indicators, Trend Graphs, Report Snapshots, Settings | Shortcuts, Custom Search, Calendar, Phone Calls, Tips).
+// Every number is computed from this Tool's own record collections; portlets whose feature is outside the
+// Tool's scope say so instead of showing invented rows.
+import { app, can, listIds, expand, register } from "../store.js";
+import { el, icon, money, addDays, errorBanner, emptyState, describe, isDenied } from "../ui.js";
+import { notSimulated } from "../overlay.js";
+import { setPageTitle, nsButton } from "./common.js";
+import { MAX_KPI_ROWS, trendBody, snapshotBody, searchBody } from "./home-data.js";
+import { navigationBody, calendarBody, activityBody } from "./home-chrome.js";
+
+function portlet(title, body, { menu = true } = {}) {
+  return el("section", { class: "portlet" }, [
+    el("header", {}, [
+      el("h2", { text: title }),
+      el("span", { class: "phead-actions" }, menu
+        ? [el("button", { type: "button", class: "icon-btn", "aria-label": `${title} portlet menu`, onclick: () => notSimulated(`${title} portlet setup`) }, icon("chevron", 14))]
+        : []),
+    ]),
+    el("div", { class: "pbody" }, body),
+  ]);
+}
+
+function loading() { return el("div", { class: "muted", text: "Loading…" }); }
+
+async function countOf(operationId, q) {
+  const page = await listIds(operationId, { q, limit: 10, offset: 0 });
+  return page.totalResults;
+}
+/** Sum a field over a filtered collection, paging instead of truncating; reports when the cap is reached. */
+async function sumOf(listOperation, getOperation, q, field) {
+  let total = 0;
+  let counted = 0;
+  let capped = false;
+  for (let offset = 0; ; offset += 50) {
+    const page = await listIds(listOperation, { q, limit: 50, offset });
+    const rows = await expand(getOperation, page.ids);
+    for (const row of rows) total += Number(row[field]) || 0;
+    counted += rows.length;
+    if (!page.hasMore) break;
+    if (counted >= MAX_KPI_ROWS) { capped = true; break; }
+  }
+  return { total: Math.round(total * 100) / 100, counted, capped };
+}
+
+function reminder(label, count, href, { alert = false } = {}) {
+  return el("div", { class: "reminder" }, [
+    el("span", { class: `rcount${count === 0 ? " zero" : alert && count > 0 ? " alert" : ""}`, text: String(count) }),
+    href && count > 0 ? el("a", { href, text: label }) : el("span", { class: count === 0 ? "muted" : "", text: label }),
+  ]);
+}
+
+async function remindersBody(node) {
+  try {
+    const soon = addDays(app.today, 7);
+    const [toApprove, toFulfill, toBill, overdue, dueSoon, invToApprove, toDeposit] = await Promise.all([
+      can("TRAN_SALESORD") ? countOf("sales-order.list", 'status IS "pendingApproval"') : null,
+      can("TRAN_SALESORD") ? countOf("sales-order.list", 'status IS "pendingFulfillment"') : null,
+      can("TRAN_SALESORD") ? countOf("sales-order.list", '(status IS "pendingBilling" OR status IS "pendingBillingPartFulfilled")') : null,
+      can("TRAN_CUSTINVC") ? countOf("invoice.list", `status IS "open" AND dueDate BEFORE "${app.today}"`) : null,
+      can("TRAN_CUSTINVC") ? countOf("invoice.list", `status IS "open" AND dueDate ON_OR_AFTER "${app.today}" AND dueDate ON_OR_BEFORE "${soon}"`) : null,
+      can("TRAN_CUSTINVC") ? countOf("invoice.list", 'status IS "pendingApproval"') : null,
+      can("TRAN_CUSTPYMT") ? countOf("customer-payment.list", 'status IS "notDeposited"') : null,
+    ]);
+    const rows = [];
+    if (toApprove !== null) rows.push(reminder("Sales Orders to Approve", toApprove, "#/orders?status=pendingApproval"));
+    if (toFulfill !== null) rows.push(reminder("Sales Orders to Fulfill", toFulfill, "#/orders?status=pendingFulfillment"));
+    if (toBill !== null) rows.push(reminder("Sales Orders to Bill", toBill, "#/orders?status=pendingBilling"));
+    if (invToApprove !== null) rows.push(reminder("Invoices to Approve", invToApprove, "#/invoices?tab=All"));
+    if (overdue !== null) rows.push(reminder("Overdue Invoices", overdue, "#/invoices?tab=Overdue", { alert: true }));
+    if (dueSoon !== null) rows.push(reminder("Invoices Due Within 7 Days", dueSoon, "#/invoices?tab=Open"));
+    if (toDeposit !== null) rows.push(reminder("Payments to Deposit", toDeposit, "#/payments"));
+    node.replaceChildren(...(rows.length ? rows : [emptyState("No reminders", "This role cannot view transactions.")]));
+  } catch (error) {
+    node.replaceChildren(errorBanner(error, "Reminders could not be loaded"));
+  }
+}
+
+async function kpiBody(node) {
+  if (!can("TRAN_CUSTINVC")) {
+    node.replaceChildren(el("div", { class: "muted", text: describe(new Error("The Invoice permission is required for these indicators.")) }));
+    return;
+  }
+  try {
+    const currency = app.session?.account?.baseCurrency ?? "";
+    const open = await sumOf("invoice.list", "invoice.get", 'status IS "open"', "amountRemaining");
+    const overdue = await sumOf("invoice.list", "invoice.get", `status IS "open" AND dueDate BEFORE "${app.today}"`, "amountRemaining");
+    const unbilled = can("TRAN_SALESORD")
+      ? await sumOf("sales-order.list", "sales-order.get", '(status IS "pendingBilling" OR status IS "pendingBillingPartFulfilled" OR status IS "pendingFulfillment")', "total")
+      : null;
+    const table = el("table", { class: "kv" }, [
+      el("tr", {}, [el("td", { text: "Open Invoice Total" }), el("td", { class: "num", text: money(open.total, currency) })]),
+      el("tr", {}, [el("td", { text: "Overdue Receivables" }), el("td", { class: "num", text: money(overdue.total, currency) })]),
+      unbilled ? el("tr", {}, [el("td", { text: "Unbilled Orders" }), el("td", { class: "num", text: money(unbilled.total, currency) })]) : null,
+    ]);
+    const capped = [open, overdue, unbilled].some((result) => result?.capped === true);
+    node.replaceChildren(table, capped
+      ? el("p", { class: "muted", text: `Computed over the first ${MAX_KPI_ROWS} matching transactions.` })
+      : el("p", { class: "muted", text: `As of ${app.today}, the account date of this world.` }));
+  } catch (error) {
+    node.replaceChildren(isDenied(error) ? errorBanner(error) : errorBanner(error, "Indicators could not be computed"));
+  }
+}
+
+function recentBody() {
+  if (app.recent.length === 0) {
+    return el("p", { class: "muted", text: "Records you open appear here." });
+  }
+  return el("ul", { class: "shortcut-list" }, app.recent.map((entry) =>
+    el("li", {}, el("a", { href: entry.href, text: entry.label }))));
+}
+
+function shortcutsBody() {
+  const entries = [
+    ["Customers", "#/customers", can("LIST_CUSTJOB")],
+    ["Sales Orders", "#/orders", can("TRAN_SALESORD")],
+    ["Invoices", "#/invoices", can("TRAN_CUSTINVC")],
+    ["Customer Payments", "#/payments", can("TRAN_CUSTPYMT")],
+    ["Items", "#/items", can("LIST_ITEM")],
+    ["SuiteQL Query Tool", "#/suiteql", can("REPO_ANALYTICS")],
+  ].filter(([, , allowed]) => allowed);
+  return el("ul", { class: "shortcut-list" }, entries.map(([label, href]) => el("li", {}, el("a", { href, text: label }))));
+}
+
+register("home", async (main) => {
+  setPageTitle("Home");
+  const session = app.session;
+  const reminders = el("div", {}, loading());
+  const kpis = el("div", {}, loading());
+  const trend = el("div", {}, loading());
+  const snapshot = el("div", {}, loading());
+  const search = el("div", {}, loading());
+  main.replaceChildren(el("div", { class: "dash" }, [
+    el("div", { class: "dash-title" }, [
+      el("h1", { text: session ? `${session.account.companyName} — Home` : "Home" }),
+      el("span", { class: "muted", text: session ? `${session.user.name} · ${session.role.name} · account date ${app.today}` : "" }),
+    ]),
+    el("div", { class: "col" }, [
+      portlet("Reminders", reminders),
+      portlet("Recent Records", recentBody()),
+      portlet("Navigation", navigationBody()),
+      portlet("Tasks", activityBody("Tasks")),
+    ]),
+    el("div", { class: "col" }, [
+      portlet("Key Performance Indicators", kpis),
+      portlet("Trend Graphs", trend),
+      portlet("Report Snapshots", snapshot),
+      portlet("Settings", [
+        el("p", { class: "muted", text: "Personalization of the dashboard is not simulated by this Tool." }),
+        el("div", { class: "btn-row" }, [nsButton("Personalize Dashboard"), nsButton("Layout")]),
+      ], { menu: false }),
+    ]),
+    el("div", { class: "col" }, [
+      portlet("Shortcuts", shortcutsBody()),
+      portlet("Custom Search", search),
+      portlet("Calendar", calendarBody()),
+      portlet("Phone Calls", activityBody("Phone Calls")),
+      portlet("Tips", el("p", { class: "muted", text: "This is a synthetic NetSuite account served by a Firedrill Tool. Records written here are the same records your agent reads over SuiteTalk REST." }), { menu: false }),
+    ]),
+  ]));
+  await Promise.all([remindersBody(reminders), kpiBody(kpis), trendBody(trend), snapshotBody(snapshot), searchBody(search)]);
+});

package/firedrill/tools/netsuite/app/site/views/invoice-new.js

@@ -0,0 +1,131 @@
+// Transactions → Sales → Create Invoices: a standalone invoice entry form (an invoice billed from a sales
+// order is created by the Bill action on the order instead). Save calls invoice.create.
+import { app, can, go, register } from "../store.js";
+import { call, el, errorBanner, money, mdy, newKey, toast, ToolError } from "../ui.js";
+import { recordShell, setPageTitle, toolbarButton, nsButton, totalsBlock, fieldGroup } from "./common.js";
+import { pickCustomer, pickItem } from "./pickers.js";
+
+register("invoice-new", async (main) => {
+  setPageTitle("Invoice");
+  if (!can("TRAN_CUSTINVC", "create")) {
+    main.replaceChildren(errorBanner(new Error("Your role cannot create invoices."), "Permission Violation"));
+    return;
+  }
+  const currency = app.session?.account?.baseCurrency ?? "";
+  const state = { customer: null, lines: [], key: newKey(), saving: false };
+  const errorHost = el("div", {});
+  const linesBody = el("tbody", {});
+  const totalsHost = el("div", {});
+
+  const customerLabel = el("span", { class: "muted", text: "No customer selected" });
+  const customerButton = toolbarButton("Select Customer…", async () => {
+    const chosen = await pickCustomer();
+    if (!chosen) return;
+    state.customer = chosen;
+    customerLabel.textContent = `${chosen.entityId} · ${chosen.subsidiary?.refName ?? ""}`;
+    customerLabel.className = "";
+    app.dirty = true;
+  });
+
+  const dateInput = el("input", { type: "date", id: "inv-date", value: app.today });
+  const dueInput = el("input", { type: "date", id: "inv-due" });
+  const memoInput = el("input", { type: "text", id: "inv-memo-new", maxlength: "999" });
+  for (const control of [dateInput, dueInput, memoInput]) control.addEventListener("input", () => { app.dirty = true; });
+
+  function recalc() {
+    const subtotal = state.lines.reduce((sum, line) => sum + (Number(line.quantity) || 0) * (Number(line.rate) || 0), 0);
+    totalsHost.replaceChildren(totalsBlock([
+      ["Subtotal", money(subtotal, currency)],
+      ["Tax", "calculated on save"],
+      ["Estimated Total", money(subtotal, currency), true],
+    ]));
+  }
+  function paintLines() {
+    if (state.lines.length === 0) {
+      linesBody.replaceChildren(el("tr", {}, el("td", { colspan: "6", class: "muted", text: "No lines yet. Add an item to this invoice." })));
+      return;
+    }
+    linesBody.replaceChildren(...state.lines.map((line, index) => {
+      const quantityId = `inv-line-${index}-qty`;
+      const rateId = `inv-line-${index}-rate`;
+      const quantityInput = el("input", { type: "number", id: quantityId, min: "0", step: "1", value: String(line.quantity) });
+      const rateInput = el("input", { type: "number", id: rateId, min: "0", step: "0.01", value: String(line.rate) });
+      quantityInput.addEventListener("input", () => { line.quantity = Number(quantityInput.value); app.dirty = true; recalc(); });
+      rateInput.addEventListener("input", () => { line.rate = Number(rateInput.value); app.dirty = true; recalc(); });
+      return el("tr", {}, [
+        el("td", { class: "tight num", text: String(index + 1) }),
+        el("td", { text: line.label }),
+        el("td", { class: "num" }, [el("label", { class: "visually-hidden", for: quantityId, text: `Quantity for line ${index + 1}` }), quantityInput]),
+        el("td", { class: "num" }, [el("label", { class: "visually-hidden", for: rateId, text: `Rate for line ${index + 1}` }), rateInput]),
+        el("td", { class: "num", text: money((Number(line.quantity) || 0) * (Number(line.rate) || 0), currency) }),
+        el("td", {}, el("button", { type: "button", class: "btn", text: "Remove", onclick: () => { state.lines.splice(index, 1); paintLines(); recalc(); } })),
+      ]);
+    }));
+  }
+
+  async function save() {
+    if (state.saving) return;
+    errorHost.replaceChildren();
+    if (state.customer === null) { errorHost.replaceChildren(errorBanner(new Error("Please choose a customer for this invoice."), "Customer is required")); return; }
+    if (state.lines.length === 0) { errorHost.replaceChildren(errorBanner(new Error("Please enter at least one line item for this transaction."), "Items are required")); return; }
+    state.saving = true;
+    try {
+      const body = {
+        entity: { id: state.customer.id },
+        tranDate: dateInput.value,
+        item: { items: state.lines.map((line) => ({ item: { id: line.itemId }, quantity: Number(line.quantity), rate: Number(line.rate) })) },
+      };
+      if (dueInput.value !== "") body.dueDate = dueInput.value;
+      if (memoInput.value.trim() !== "") body.memo = memoInput.value.trim();
+      const result = await call("invoice.create", { body }, state.key);
+      app.dirty = false;
+      toast(`Invoice created (internal id ${result.id}).`);
+      go(`#/invoices/${encodeURIComponent(result.id)}`);
+    } catch (error) {
+      state.key = newKey();
+      const path = error instanceof ToolError ? error.details?.errorPath : undefined;
+      errorHost.replaceChildren(errorBanner(error, "This invoice could not be saved"), ...(path ? [el("p", { class: "field-error", text: `Field: ${path}` })] : []));
+    } finally {
+      state.saving = false;
+    }
+  }
+
+  main.replaceChildren(recordShell({
+    title: "Invoice",
+    subtitle: `New · ${app.session?.account?.companyName ?? ""} · ${mdy(app.today)}`,
+    actions: [
+      toolbarButton("Save", save, { kind: "primary" }),
+      toolbarButton("Cancel", () => { app.dirty = false; go("#/invoices"); }),
+      nsButton("Save & Print"),
+      nsButton("Reset"),
+    ],
+    body: [
+      errorHost,
+      fieldGroup("Primary Information", el("div", { class: "formgrid" }, [
+        el("div", { class: "field" }, [el("span", { class: "fl" }, "Customer"), el("div", { class: "btn-row" }, [customerButton, customerLabel])]),
+        el("div", { class: "field" }, [el("label", { class: "fl", for: "inv-date", text: "Date" }), dateInput]),
+        el("div", { class: "field" }, [el("label", { class: "fl", for: "inv-due", text: "Due Date" }), dueInput]),
+        el("div", { class: "field" }, [el("label", { class: "fl", for: "inv-memo-new", text: "Memo" }), memoInput]),
+      ])),
+      el("section", { class: "sublist" }, [
+        el("header", {}, [el("h3", { text: "Items" }), el("span", { class: "grow" }),
+          toolbarButton("Add Item", async () => {
+            const item = await pickItem();
+            if (!item) return;
+            state.lines.push({ itemId: item.id, label: `${item.itemId}${item.displayName ? ` — ${item.displayName}` : ""}`, quantity: 1, rate: Number(item.basePrice) || 0 });
+            app.dirty = true;
+            paintLines();
+            recalc();
+          })]),
+        el("div", { class: "tablewrap" }, el("table", { class: "grid linegrid" }, [
+          el("thead", {}, el("tr", {}, ["Line", "Item", "Quantity", "Rate", "Amount", ""].map((label, index) =>
+            el("th", { scope: "col", class: index >= 2 && index <= 4 ? "num" : "", text: label })))),
+          linesBody,
+        ])),
+      ]),
+      totalsHost,
+    ],
+  }));
+  paintLines();
+  recalc();
+});

package/firedrill/tools/netsuite/app/site/views/invoice.js

@@ -0,0 +1,232 @@
+// The invoice record page: totals, the Items sublist, applied payments and the Accept Payment action,
+// which runs the !transform to a customer payment.
+import { app, can, go, listIds, expand, register, remember, isOverdue } from "../store.js";
+import { call, el, errorBanner, money, qty, mdy, newKey, toast, describe } from "../ui.js";
+import { dialog, openMenu } from "../overlay.js";
+import {
+  recordShell, recordButtons, subtabStrip, fieldGroup, kvColumns, kv, totalsBlock,
+  setPageTitle, toolbarButton, pill, currencyOf,
+} from "./common.js";
+
+const TABS = ["Items", "Payments", "System Information"];
+
+function openPaymentDialog(record, currency, refresh) {
+  const remaining = Number(record.amountRemaining) || 0;
+  const amountInput = el("input", { type: "number", id: "pay-amount", min: "0", step: "0.01", max: String(remaining), value: remaining.toFixed(2) });
+  const dateInput = el("input", { type: "date", id: "pay-date", value: app.today });
+  const memoInput = el("input", { type: "text", id: "pay-memo", maxlength: "999" });
+  const errorHost = el("div", {});
+  let key = newKey();
+  let busy = false;
+  dialog({
+    title: `Accept Customer Payment — ${record.tranId}`,
+    body: [
+      errorHost,
+      el("p", { text: `${record.entity?.refName ?? "This customer"} owes ${money(remaining, currency)} on this invoice.` }),
+      el("div", { class: "formgrid" }, [
+        el("div", { class: "field" }, [el("label", { class: "fl", for: "pay-amount", text: "Payment Amount" }), amountInput]),
+        el("div", { class: "field" }, [el("label", { class: "fl", for: "pay-date", text: "Date" }), dateInput]),
+        el("div", { class: "field" }, [el("label", { class: "fl", for: "pay-memo", text: "Memo" }), memoInput]),
+      ]),
+    ],
+    actions: [
+      { label: "Cancel", run: (close) => close() },
+      {
+        label: "Save Payment",
+        kind: "primary",
+        run: async (close) => {
+          if (busy) return;
+          busy = true;
+          errorHost.replaceChildren();
+          const amount = Number(amountInput.value);
+          if (!Number.isFinite(amount) || amount <= 0) {
+            errorHost.replaceChildren(errorBanner(new Error("The payment amount must be greater than zero."), "Invalid amount"));
+            busy = false;
+            return;
+          }
+          if (amount > remaining + 0.005) {
+            errorHost.replaceChildren(errorBanner(new Error(`The applied amount cannot exceed the invoice balance of ${remaining}.`), "Amount too large"));
+            busy = false;
+            return;
+          }
+          try {
+            const body = { payment: amount, tranDate: dateInput.value };
+            if (memoInput.value.trim() !== "") body.memo = memoInput.value.trim();
+            const result = await call("invoice.transform", {
+              recordId: record.id, target: "customerPayment", transformMarker: "!transform", body,
+            }, key);
+            toast(`Customer payment recorded (internal id ${result.id}).`);
+            close();
+            refresh();
+          } catch (error) {
+            key = newKey();
+            errorHost.replaceChildren(errorBanner(error, "This payment could not be recorded"));
+          } finally {
+            busy = false;
+          }
+        },
+      },
+    ],
+  });
+}
+
+async function paymentsPanel(node, record, currency) {
+  node.replaceChildren(el("p", { class: "muted", text: "Loading payments…" }));
+  try {
+    const page = await listIds("customer-payment.list", { q: `customer ANY_OF [${record.entity?.id ?? 0}]`, limit: 25, offset: 0 });
+    const rows = await expand("customer-payment.get", page.ids, { expandSubResources: true });
+    const applied = rows.filter((payment) => (payment.apply?.items ?? []).some((entry) => String(entry.doc) === String(record.id)));
+    node.replaceChildren(el("section", { class: "sublist" }, [
+      el("header", {}, [el("h3", { text: "Payments Applied" })]),
+      el("div", { class: "tablewrap" }, el("table", { class: "grid" }, [
+        el("thead", {}, el("tr", {}, ["Payment", "Date", "Applied", "Payment Total", "Status"].map((label, index) =>
+          el("th", { scope: "col", class: index === 2 || index === 3 ? "num" : "", text: label })))),
+        el("tbody", {}, applied.length === 0
+          ? [el("tr", {}, el("td", { colspan: "5", class: "muted", text: "No payments have been applied to this invoice." }))]
+          : applied.map((payment) => {
+              const entry = (payment.apply?.items ?? []).find((item) => String(item.doc) === String(record.id));
+              return el("tr", {}, [
+                el("td", { text: payment.tranId }),
+                el("td", { class: "tight", text: mdy(payment.tranDate) }),
+                el("td", { class: "num", text: money(entry?.amount ?? 0, currency) }),
+                el("td", { class: "num", text: money(payment.payment, currency) }),
+                el("td", {}, pill(payment.status)),
+              ]);
+            })),
+      ])),
+    ]));
+  } catch (error) {
+    node.replaceChildren(errorBanner(error, "Payments could not be loaded"));
+  }
+}
+
+register("invoice", async (main, route) => {
+  let record;
+  try {
+    record = await call("invoice.get", { recordId: route.id, expandSubResources: true });
+  } catch (error) {
+    main.replaceChildren(errorBanner(error, "This invoice could not be opened"));
+    return;
+  }
+  setPageTitle(`Invoice ${record.tranId}`);
+  remember({ label: `Invoice: ${record.tranId}`, href: `#/invoices/${encodeURIComponent(record.id)}` });
+  const currency = currencyOf(record);
+  const refresh = () => go(`#/invoices/${encodeURIComponent(record.id)}`);
+  let tab = TABS[0];
+  const panel = el("div", {});
+
+  function paint() {
+    if (tab === "Items") {
+      const lines = record.item?.items ?? [];
+      panel.replaceChildren(
+        el("section", { class: "sublist" }, [
+          el("header", {}, [el("h3", { text: "Items" }), el("span", { class: "grow" }), el("span", { class: "muted", text: `${lines.length} line${lines.length === 1 ? "" : "s"}` })]),
+          el("div", { class: "tablewrap" }, el("table", { class: "grid" }, [
+            el("thead", {}, el("tr", {}, ["Line", "Item", "Description", "Quantity", "Rate", "Amount"].map((label, index) =>
+              el("th", { scope: "col", class: index >= 3 ? "num" : "", text: label })))),
+            el("tbody", {}, lines.map((line) => el("tr", {}, [
+              el("td", { class: "tight num", text: String(line.line) }),
+              el("td", { text: line.item?.refName ?? "" }),
+              el("td", { text: line.description ?? "" }),
+              el("td", { class: "num", text: qty(line.quantity) }),
+              el("td", { class: "num", text: money(line.rate, currency) }),
+              el("td", { class: "num", text: money(line.amount, currency) }),
+            ]))),
+          ])),
+        ]),
+        totalsBlock([
+          ["Subtotal", money(record.subtotal, currency)],
+          ["Tax Total", money(record.taxTotal, currency)],
+          ["Total", money(record.total, currency), true],
+          ["Amount Paid", money(record.amountPaid, currency)],
+          ["Amount Remaining", money(record.amountRemaining, currency), true],
+        ]),
+      );
+    } else if (tab === "Payments") {
+      paymentsPanel(panel, record, currency);
+    } else {
+      panel.replaceChildren(fieldGroup("System Information", kvColumns(
+        [kv("Internal ID", record.id), kv("Created", mdy(record.createdDate)), kv("Created From", record.createdFrom
+          ? el("a", { href: `#/orders/${encodeURIComponent(record.createdFrom.id)}`, text: record.createdFrom.refName })
+          : "— None —")],
+        [kv("Last Modified", mdy(record.lastModifiedDate)), kv("Record Type", "invoice")],
+      )));
+    }
+  }
+
+  const canPay = can("TRAN_CUSTPYMT", "create") && String(record.status?.refName) === "Open" && Number(record.amountRemaining) > 0;
+  const actionsButton = el("button", { type: "button", class: "btn", "aria-haspopup": "true", "aria-expanded": "false", text: "Actions ▾" });
+  actionsButton.addEventListener("click", (event) => {
+    event.stopPropagation();
+    openMenu(actionsButton, [
+      { label: "Accept Payment", run: () => openPaymentDialog(record, currency, refresh), disabled: !canPay },
+      { label: "Void" },
+      { label: "Make Copy" },
+      { label: "Credit Memo" },
+    ]);
+  });
+
+  main.replaceChildren(recordShell({
+    title: `Invoice #${record.tranId}`,
+    subtitle: `${record.entity?.refName ?? ""} · ${mdy(record.tranDate)} · ${record.subsidiary?.refName ?? ""}`,
+    actions: recordButtons({
+      onEdit: () => openEdit(record, refresh),
+      editDisabled: !can("TRAN_CUSTINVC", "edit"),
+      onBack: () => go("#/invoices"),
+      actions: [
+        toolbarButton("Accept Payment", () => openPaymentDialog(record, currency, refresh), {
+          disabled: !canPay,
+          title: canPay ? "Record a customer payment against this invoice" : "This invoice has no remaining balance",
+        }),
+        actionsButton,
+      ],
+    }),
+    subtabs: subtabStrip(TABS, tab, (next) => { tab = next; paint(); }),
+    body: [
+      isOverdue(record)
+        ? el("div", { class: "banner warn", role: "status" }, el("div", {}, el("div", { class: "banner-title", text: `This invoice was due on ${mdy(record.dueDate)} and is overdue.` })))
+        : null,
+      el("div", { class: "fieldcols" }, [
+        el("dl", {}, [kv("Document Number", record.tranId), kv("Date", mdy(record.tranDate)), kv("Due Date", mdy(record.dueDate))]),
+        el("dl", {}, [kv("Customer", el("a", { href: `#/customers/${encodeURIComponent(record.entity?.id ?? "")}`, text: record.entity?.refName ?? "" })),
+          kv("Status", pill(record.status)), kv("Terms", record.terms?.refName ?? "— None —")]),
+      ]),
+      panel,
+    ],
+  }));
+  paint();
+});
+
+/** NetSuite lets an open invoice's memo, PO number and terms be edited; lines stay as billed. */
+function openEdit(record, refresh) {
+  const memoInput = el("input", { type: "text", id: "inv-memo", value: record.memo ?? "", maxlength: "999" });
+  const poInput = el("input", { type: "text", id: "inv-po", value: record.otherRefNum ?? "", maxlength: "45" });
+  const errorHost = el("div", {});
+  let key = newKey();
+  dialog({
+    title: `Edit Invoice — ${record.tranId}`,
+    body: [errorHost, el("div", { class: "formgrid" }, [
+      el("div", { class: "field" }, [el("label", { class: "fl", for: "inv-memo", text: "Memo" }), memoInput]),
+      el("div", { class: "field" }, [el("label", { class: "fl", for: "inv-po", text: "PO / Check Number" }), poInput]),
+    ])],
+    actions: [
+      { label: "Cancel", run: (close) => close() },
+      {
+        label: "Save",
+        kind: "primary",
+        run: async (close) => {
+          errorHost.replaceChildren();
+          try {
+            await call("invoice.update", { recordId: record.id, body: { memo: memoInput.value.trim(), otherRefNum: poInput.value.trim() } }, key);
+            toast("Invoice saved.");
+            close();
+            refresh();
+          } catch (error) {
+            key = newKey();
+            errorHost.replaceChildren(errorBanner(error, "This invoice could not be saved"));
+          }
+        },
+      },
+    ],
+  });
+}

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

@@ -0,0 +1,99 @@
+// Transactions → Sales → Invoices List: Open / Paid In Full / Overdue / All views with paging.
+import { app, can, go, listIds, expand, register, isOverdue } from "../store.js";
+import { el, errorBanner, emptyState, money, mdy, skeletonRows, lit } from "../ui.js";
+import { listShell, pagerStrip, setPageTitle, toolbarButton, nsButton, pill, currencyOf } from "./common.js";
+
+const COLUMNS = [
+  { label: "Document Number" }, { label: "Date" }, { label: "Due Date" }, { label: "Customer" },
+  { label: "Status" }, { label: "Amount", numeric: true }, { label: "Amount Remaining", numeric: true },
+];
+const TABS = ["Open", "Overdue", "Paid In Full", "All"];
+
+function filterFor(tab, term, today) {
+  const parts = [];
+  if (tab === "Open") parts.push('status IS "open"');
+  if (tab === "Paid In Full") parts.push('status IS "paidInFull"');
+  if (tab === "Overdue") parts.push(`status IS "open" AND dueDate BEFORE ${lit(today)}`);
+  if (term !== "") parts.push(`(tranId CONTAIN ${lit(term)} OR memo CONTAIN ${lit(term)})`);
+  return parts.join(" AND ");
+}
+
+register("invoices", async (main, route) => {
+  setPageTitle("Invoices");
+  const state = {
+    tab: TABS.includes(route.params.get("tab")) ? route.params.get("tab") : "Open",
+    term: route.params.get("q") ?? "",
+    offset: Number(route.params.get("offset") ?? 0) || 0,
+    size: Number(route.params.get("size") ?? 25) || 25,
+  };
+  const body = el("tbody", {}, skeletonRows(COLUMNS.length));
+  const pagerHost = el("div", {});
+
+  function apply(patch) {
+    const next = { ...state, ...patch };
+    const params = new URLSearchParams();
+    if (next.tab !== "Open") params.set("tab", next.tab);
+    if (next.term) params.set("q", next.term);
+    if (next.offset) params.set("offset", String(next.offset));
+    if (next.size !== 25) params.set("size", String(next.size));
+    const query = params.toString();
+    go(`#/invoices${query ? `?${query}` : ""}`);
+  }
+
+  const tabs = el("div", { class: "tabstrip", role: "tablist" }, TABS.map((name) =>
+    el("button", { type: "button", role: "tab", "aria-selected": String(name === state.tab), text: name, onclick: () => apply({ tab: name, offset: 0 }) })));
+  const input = el("input", { type: "search", id: "inv-filter", value: state.term, placeholder: "Document number or memo" });
+  const filter = el("form", { class: "filterbar", onsubmit: (event) => { event.preventDefault(); apply({ term: input.value.trim(), offset: 0 }); } }, [
+    el("div", { class: "field" }, [el("label", { class: "fl", for: "inv-filter", text: "Quick Filter" }), input]),
+    toolbarButton("Search", () => apply({ term: input.value.trim(), offset: 0 })),
+    toolbarButton("Reset", () => apply({ term: "", offset: 0 })),
+  ]);
+
+  main.replaceChildren(listShell({
+    title: "Invoices",
+    subtitle: app.session?.subsidiaryScope?.id !== "0" ? `Restricted to ${app.session.subsidiaryScope.refName}` : undefined,
+    actions: [
+      toolbarButton("New Invoice", () => go("#/invoices/new"), {
+        kind: "primary",
+        disabled: !can("TRAN_CUSTINVC", "create"),
+        title: can("TRAN_CUSTINVC", "create") ? undefined : "Your role cannot create invoices",
+      }),
+      nsButton("Customize View"),
+      nsButton("Export"),
+    ],
+    tabs,
+    filter,
+    columns: COLUMNS,
+    body,
+    pager: pagerHost,
+  }));
+
+  try {
+    const page = await listIds("invoice.list", { q: filterFor(state.tab, state.term, app.today), limit: state.size, offset: state.offset });
+    const rows = await expand("invoice.get", page.ids);
+    if (rows.length === 0) {
+      body.replaceChildren(el("tr", {}, el("td", { colspan: String(COLUMNS.length) },
+        emptyState(`No ${state.tab.toLowerCase()} invoices.`, "Change the view or clear the quick filter."))));
+    } else {
+      body.replaceChildren(...rows.map((record) => {
+        const currency = currencyOf(record);
+        const late = isOverdue(record);
+        return el("tr", {}, [
+          el("td", {}, el("a", { class: "rowlink", href: `#/invoices/${encodeURIComponent(record.id)}`, text: record.tranId })),
+          el("td", { class: "tight", text: mdy(record.tranDate) }),
+          el("td", { class: `tight${late ? " overdue" : ""}`, text: mdy(record.dueDate) }),
+          el("td", {}, el("a", { href: `#/customers/${encodeURIComponent(record.entity?.id ?? "")}`, text: record.entity?.refName ?? "" })),
+          el("td", {}, pill(record.status)),
+          el("td", { class: "num", text: money(record.total, currency) }),
+          el("td", { class: `num${late ? " overdue" : ""}`, text: money(record.amountRemaining, currency) }),
+        ]);
+      }));
+    }
+    pagerHost.replaceChildren(pagerStrip({
+      offset: page.offset, shown: rows.length, total: page.totalResults, hasMore: page.hasMore, pageSize: state.size,
+      onOffset: (offset) => apply({ offset }), onPageSize: (size) => apply({ size, offset: 0 }),
+    }));
+  } catch (error) {
+    body.replaceChildren(el("tr", {}, el("td", { colspan: String(COLUMNS.length) }, errorBanner(error, "The invoice list could not be loaded"))));
+  }
+});