@firedrill-tools/netsuite 0.1.2

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

@@ -0,0 +1,95 @@
+// Lists → Accounting → Items: the item list with a detail panel. Items are read-only in this Tool.
+import { go, listIds, expand, register } from "../store.js";
+import { call, el, errorBanner, emptyState, money, qty, mdy, skeletonRows, lit } from "../ui.js";
+import { listShell, pagerStrip, setPageTitle, toolbarButton, nsButton, fieldGroup, kv, kvColumns } from "./common.js";
+
+const COLUMNS = [
+  { label: "Item Name/Number" }, { label: "Display Name" }, { label: "Type" },
+  { label: "Base Price", numeric: true }, { label: "On Hand", numeric: true }, { label: "Inactive" },
+];
+
+register("items", async (main, route) => {
+  setPageTitle("Items");
+  const state = {
+    term: route.params.get("q") ?? "",
+    inactive: route.params.get("inactive") === "1",
+    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", {});
+  const detail = el("div", {});
+
+  function apply(patch) {
+    const next = { ...state, ...patch };
+    const params = new URLSearchParams();
+    if (next.term) params.set("q", next.term);
+    if (next.inactive) params.set("inactive", "1");
+    if (next.offset) params.set("offset", String(next.offset));
+    if (next.size !== 25) params.set("size", String(next.size));
+    const query = params.toString();
+    go(`#/items${query ? `?${query}` : ""}`);
+  }
+
+  const input = el("input", { type: "search", id: "item-filter", value: state.term, placeholder: "Item name or display name" });
+  const inactiveBox = el("input", { type: "checkbox", id: "item-inactive", checked: state.inactive });
+  inactiveBox.addEventListener("change", () => apply({ inactive: inactiveBox.checked, offset: 0 }));
+  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: "item-filter", text: "Quick Filter" }), input]),
+    el("div", { class: "field inline" }, [inactiveBox, el("label", { class: "fl", for: "item-inactive", text: "Show Inactives" })]),
+    toolbarButton("Search", () => apply({ term: input.value.trim(), offset: 0 })),
+  ]);
+
+  async function showDetail(id) {
+    detail.replaceChildren(el("p", { class: "muted", text: "Loading item…" }));
+    try {
+      const item = await call("inventory-item.get", { recordId: id });
+      detail.replaceChildren(fieldGroup(`Item — ${item.itemId}`, kvColumns(
+        [kv("Display Name", item.displayName ?? ""), kv("Description", item.description ?? ""), kv("Base Price", money(item.basePrice))],
+        [kv("Quantity On Hand", qty(item.quantityOnHand)), kv("Income Account", item.incomeAccount?.refName ?? ""),
+          kv("Tax Schedule", item.taxSchedule?.refName ?? ""), kv("Subsidiaries", (item.subsidiary?.items ?? []).map((s) => s.refName).join(", "))],
+      )));
+    } catch (error) {
+      detail.replaceChildren(errorBanner(error, "This item could not be opened"));
+    }
+  }
+
+  main.replaceChildren(listShell({
+    title: "Items",
+    subtitle: "Items are seeded by the world and are read-only in this Tool.",
+    actions: [nsButton("New Item"), nsButton("Customize View")],
+    filter,
+    columns: COLUMNS,
+    body,
+    pager: pagerHost,
+  }), detail);
+
+  try {
+    const parts = [];
+    if (!state.inactive) parts.push("isInactive IS false");
+    if (state.term !== "") parts.push(`(itemId CONTAIN ${lit(state.term)} OR displayName CONTAIN ${lit(state.term)})`);
+    const page = await listIds("inventory-item.list", { q: parts.join(" AND "), limit: state.size, offset: state.offset });
+    const rows = await expand("inventory-item.get", page.ids);
+    if (rows.length === 0) {
+      body.replaceChildren(el("tr", {}, el("td", { colspan: String(COLUMNS.length) }, emptyState("No items match this filter."))));
+    } else {
+      body.replaceChildren(...rows.map((record) => {
+        const row = el("tr", {}, [
+          el("td", {}, el("button", { type: "button", class: "btn link", text: record.itemId, onclick: () => showDetail(record.id) })),
+          el("td", { text: record.displayName ?? "" }),
+          el("td", { text: "Inventory Item" }),
+          el("td", { class: "num", text: money(record.basePrice) }),
+          el("td", { class: "num", text: qty(record.quantityOnHand) }),
+          el("td", { text: record.isInactive ? "Yes" : "No" }),
+        ]);
+        return row;
+      }));
+    }
+    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 item list could not be loaded"))));
+  }
+});

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

@@ -0,0 +1,154 @@
+// Transactions → Sales → Enter Sales Orders: the transaction entry form with the customer picker,
+// the Items line grid and live totals. Save calls sales-order.create with an idempotency key.
+import { app, can, go, register } from "../store.js";
+import { call, el, errorBanner, money, mdy, newKey, toast, describe, ToolError } from "../ui.js";
+import { recordShell, setPageTitle, toolbarButton, nsButton, totalsBlock, fieldGroup } from "./common.js";
+import { pickCustomer, pickItem } from "./pickers.js";
+
+const TERMS = [["", "— None —"], ["1", "Net 15"], ["2", "Net 30"], ["3", "Due on receipt"]];
+
+register("order-new", async (main, route) => {
+  setPageTitle("Sales Order");
+  if (!can("TRAN_SALESORD", "create")) {
+    main.replaceChildren(errorBanner(new Error("Your role cannot create sales orders."), "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: "so-date", value: app.today });
+  const memoInput = el("input", { type: "text", id: "so-memo", maxlength: "999" });
+  const poInput = el("input", { type: "text", id: "so-po", maxlength: "45" });
+  const termsSelect = el("select", { id: "so-terms" }, TERMS.map(([value, label]) => el("option", { value, text: label })));
+  for (const control of [dateInput, memoInput, poInput, termsSelect]) {
+    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() {
+    linesBody.replaceChildren(...state.lines.map((line, index) => {
+      const quantityId = `so-line-${index}-qty`;
+      const rateId = `so-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(); } })),
+      ]);
+    }));
+    if (state.lines.length === 0) {
+      linesBody.replaceChildren(el("tr", {}, el("td", { colspan: "6", class: "muted", text: "No lines yet. Add an item to this order." })));
+    }
+  }
+
+  async function addLine() {
+    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();
+  }
+
+  async function save() {
+    if (state.saving) return;
+    errorHost.replaceChildren();
+    if (state.customer === null) {
+      errorHost.replaceChildren(errorBanner(new Error("Please choose a customer for this sales order."), "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 (memoInput.value.trim() !== "") body.memo = memoInput.value.trim();
+      if (poInput.value.trim() !== "") body.otherRefNum = poInput.value.trim();
+      if (termsSelect.value !== "") body.terms = { id: termsSelect.value };
+      const result = await call("sales-order.create", { body }, state.key);
+      app.dirty = false;
+      toast(`Sales order created (internal id ${result.id}).`);
+      go(`#/orders/${encodeURIComponent(result.id)}`);
+    } catch (error) {
+      state.key = newKey();
+      const path = error instanceof ToolError ? error.details?.errorPath : undefined;
+      errorHost.replaceChildren(errorBanner(error, "This sales order could not be saved"),
+        ...(path ? [el("p", { class: "field-error", text: `Field: ${path}` })] : []));
+    } finally {
+      state.saving = false;
+    }
+  }
+
+  main.replaceChildren(recordShell({
+    title: "Sales Order",
+    subtitle: `New · ${app.session?.account?.companyName ?? ""} · ${mdy(app.today)}`,
+    actions: [
+      toolbarButton("Save", save, { kind: "primary" }),
+      toolbarButton("Cancel", () => { app.dirty = false; go("#/orders"); }),
+      nsButton("Save & New"),
+      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: "so-date", text: "Date" }), dateInput]),
+        el("div", { class: "field" }, [el("label", { class: "fl", for: "so-po", text: "PO / Check Number" }), poInput]),
+        el("div", { class: "field" }, [el("label", { class: "fl", for: "so-terms", text: "Terms" }), termsSelect]),
+        el("div", { class: "field" }, [el("label", { class: "fl", for: "so-memo", text: "Memo" }), memoInput]),
+      ])),
+      el("section", { class: "sublist" }, [
+        el("header", {}, [el("h3", { text: "Items" }), el("span", { class: "grow" }), toolbarButton("Add Item", addLine)]),
+        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();
+  if (route.params.get("entity")) {
+    try {
+      const customer = await call("customer.get", { recordId: route.params.get("entity") });
+      state.customer = customer;
+      customerLabel.textContent = `${customer.entityId} · ${customer.subsidiary?.refName ?? ""}`;
+      customerLabel.className = "";
+    } catch { /* the picker stays empty */ }
+  }
+});

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

@@ -0,0 +1,214 @@
+// The sales order record page: header band, Items sublist with its own paging, totals block and the
+// Bill action, which runs the !transform to an invoice (whole order or a partial quantity per line).
+import { can, go, register, remember } 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, nsButton, pill, currencyOf,
+} from "./common.js";
+
+const TABS = ["Items", "Shipping", "Billing", "System Information"];
+const LINES_PER_PAGE = 10;
+
+function lineRows(lines, currency) {
+  return 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) }),
+    el("td", { class: "num", text: qty(line.quantityBilled ?? 0) }),
+  ]));
+}
+
+async function itemsPanel(node, record, currency) {
+  let offset = 0;
+  async function paint() {
+    node.replaceChildren(el("p", { class: "muted", text: "Loading items…" }));
+    try {
+      const page = await call("sales-order.items.list", { recordId: record.id, limit: LINES_PER_PAGE, offset });
+      const lines = page.items ?? [];
+      node.replaceChildren(el("section", { class: "sublist" }, [
+        el("header", {}, [el("h3", { text: "Items" }), el("span", { class: "grow" }),
+          el("span", { class: "muted", text: `${offset + 1} to ${offset + lines.length} of ${page.totalResults}` }),
+          el("button", { type: "button", class: "btn", text: "Previous", disabled: offset === 0, onclick: () => { offset = Math.max(0, offset - LINES_PER_PAGE); paint(); } }),
+          el("button", { type: "button", class: "btn", text: "Next", disabled: page.hasMore !== true, onclick: () => { offset += LINES_PER_PAGE; paint(); } }),
+        ]),
+        el("div", { class: "tablewrap" }, el("table", { class: "grid" }, [
+          el("thead", {}, el("tr", {}, ["Line", "Item", "Description", "Quantity", "Rate", "Amount", "Billed"].map((label, index) =>
+            el("th", { scope: "col", class: index >= 3 ? "num" : "", text: label })))),
+          el("tbody", {}, lineRows(lines, currency)),
+        ])),
+      ]));
+    } catch (error) {
+      node.replaceChildren(errorBanner(error, "The item sublist could not be loaded"));
+    }
+  }
+  await paint();
+}
+
+/** NetSuite's Bill action: whole order, or a quantity per unbilled line. */
+function openBillDialog(record, currency, refresh) {
+  const lines = (record.item?.items ?? []).filter((line) => Number(line.quantity) > Number(line.quantityBilled ?? 0));
+  if (lines.length === 0) {
+    dialog({
+      title: "Bill Sales Order",
+      body: el("p", { text: "Every line on this sales order has already been billed." }),
+      actions: [{ label: "OK", kind: "primary", run: (close) => close() }],
+    });
+    return;
+  }
+  const inputs = new Map();
+  const errorHost = el("div", {});
+  const table = el("table", { class: "grid linegrid" }, [
+    el("thead", {}, el("tr", {}, ["Line", "Item", "Remaining", "Quantity to Bill"].map((label, index) =>
+      el("th", { scope: "col", class: index >= 2 ? "num" : "", text: label })))),
+    el("tbody", {}, lines.map((line) => {
+      const remaining = Number(line.quantity) - Number(line.quantityBilled ?? 0);
+      const id = `bill-line-${line.line}`;
+      const input = el("input", { type: "number", id, min: "0", step: "1", max: String(remaining), value: String(remaining) });
+      inputs.set(line.line, input);
+      return el("tr", {}, [
+        el("td", { class: "tight num", text: String(line.line) }),
+        el("td", {}, el("label", { class: "fl", for: id, text: line.item?.refName ?? `Line ${line.line}` })),
+        el("td", { class: "num", text: qty(remaining) }),
+        el("td", { class: "num" }, input),
+      ]);
+    })),
+  ]);
+  let key = newKey();
+  let busy = false;
+  dialog({
+    title: `Bill Sales Order ${record.tranId}`,
+    wide: true,
+    body: [errorHost, el("p", { text: "Billing transforms this sales order into an invoice. Reduce a quantity to bill part of a line." }), table],
+    actions: [
+      { label: "Cancel", run: (close) => close() },
+      {
+        label: "Bill",
+        kind: "primary",
+        run: async (close) => {
+          if (busy) return;
+          busy = true;
+          errorHost.replaceChildren();
+          const items = [];
+          for (const line of lines) {
+            const value = Number(inputs.get(line.line).value);
+            if (!Number.isFinite(value) || value < 0) {
+              errorHost.replaceChildren(el("div", { class: "banner error", role: "alert" }, el("div", { class: "banner-title", text: `Line ${line.line} needs a quantity of zero or more.` })));
+              busy = false;
+              return;
+            }
+            if (value > 0) items.push({ orderLine: line.line, quantity: value });
+          }
+          if (items.length === 0) {
+            errorHost.replaceChildren(el("div", { class: "banner error", role: "alert" }, el("div", { class: "banner-title", text: "Enter a quantity on at least one line." })));
+            busy = false;
+            return;
+          }
+          const whole = items.length === lines.length
+            && items.every((entry, index) => entry.quantity === Number(lines[index].quantity) - Number(lines[index].quantityBilled ?? 0));
+          try {
+            const result = await call("sales-order.transform", {
+              recordId: record.id,
+              target: "invoice",
+              transformMarker: "!transform",
+              body: whole ? {} : { item: { items } },
+            }, key);
+            toast(`Invoice created (internal id ${result.id}).`);
+            close();
+            go(`#/invoices/${encodeURIComponent(result.id)}`);
+          } catch (error) {
+            key = newKey();
+            errorHost.replaceChildren(el("div", { class: "banner error", role: "alert" }, [
+              el("div", {}, [el("div", { class: "banner-title", text: "This order could not be billed" }), el("div", { class: "banner-detail", text: describe(error) })]),
+            ]));
+          } finally {
+            busy = false;
+            if (refresh) refresh();
+          }
+        },
+      },
+    ],
+  });
+}
+
+register("order", async (main, route) => {
+  let record;
+  try {
+    record = await call("sales-order.get", { recordId: route.id, expandSubResources: true });
+  } catch (error) {
+    main.replaceChildren(errorBanner(error, "This sales order could not be opened"));
+    return;
+  }
+  setPageTitle(`Sales Order ${record.tranId}`);
+  remember({ label: `Sales Order: ${record.tranId}`, href: `#/orders/${encodeURIComponent(record.id)}` });
+  const currency = currencyOf(record);
+  let tab = TABS[0];
+  const panel = el("div", {});
+
+  function paint() {
+    if (tab === "Items") {
+      const host = el("div", {});
+      itemsPanel(host, record, currency);
+      panel.replaceChildren(host, totalsBlock([
+        ["Subtotal", money(record.subtotal, currency)],
+        ["Tax Total", money(record.taxTotal, currency)],
+        ["Total", money(record.total, currency), true],
+      ]));
+    } else if (tab === "Shipping") {
+      panel.replaceChildren(fieldGroup("Shipping", el("p", { class: "muted", text: "Fulfilment and shipping are not simulated by this Tool; this order's lines are billed directly." })));
+    } else if (tab === "Billing") {
+      panel.replaceChildren(fieldGroup("Billing", kvColumns(
+        [kv("Customer", el("a", { href: `#/customers/${encodeURIComponent(record.entity?.id ?? "")}`, text: record.entity?.refName ?? "" })),
+          kv("Terms", record.terms?.refName ?? "— None —")],
+        [kv("Currency", currency), kv("Subsidiary", record.subsidiary?.refName ?? "")],
+      )));
+    } else {
+      panel.replaceChildren(fieldGroup("System Information", kvColumns(
+        [kv("Internal ID", record.id), kv("Created", mdy(record.createdDate))],
+        [kv("Last Modified", mdy(record.lastModifiedDate)), kv("Record Type", "salesOrder")],
+      )));
+    }
+  }
+
+  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: "Bill", run: () => openBillDialog(record, currency, () => go(`#/orders/${encodeURIComponent(record.id)}`)), disabled: !can("TRAN_SALESORD", "edit") },
+      { label: "Fulfill" },
+      { label: "Close Order" },
+      { label: "Make Copy" },
+    ]);
+  });
+
+  main.replaceChildren(recordShell({
+    title: `Sales Order #${record.tranId}`,
+    subtitle: `${record.entity?.refName ?? ""} · ${mdy(record.tranDate)} · ${record.subsidiary?.refName ?? ""}`,
+    actions: recordButtons({
+      onEdit: () => go(`#/orders/new?copy=${encodeURIComponent(record.id)}`),
+      editLabel: "Edit",
+      editDisabled: !can("TRAN_SALESORD", "edit"),
+      onBack: () => go("#/orders"),
+      actions: [
+        toolbarButton("Bill", () => openBillDialog(record, currency, () => go(`#/orders/${encodeURIComponent(record.id)}`)), {
+          disabled: !can("TRAN_SALESORD", "edit") || !can("TRAN_CUSTINVC", "create"),
+          title: "Transform this order into an invoice",
+        }),
+        actionsButton,
+      ],
+    }),
+    subtabs: subtabStrip(TABS, tab, (next) => { tab = next; paint(); }),
+    body: [
+      el("div", { class: "fieldcols" }, [
+        el("dl", {}, [kv("Document Number", record.tranId), kv("Date", mdy(record.tranDate)), kv("Status", pill(record.status))]),
+        el("dl", {}, [kv("Customer", record.entity?.refName ?? ""), kv("Memo", record.memo ?? ""), kv("PO / Check Number", record.otherRefNum ?? "")]),
+      ]),
+      panel,
+    ],
+  }));
+  paint();
+});

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

@@ -0,0 +1,93 @@
+// Transactions → Sales → Sales Orders List: the transaction list view with a status filter and paging.
+import { app, can, go, listIds, expand, register } 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: "Customer" }, { label: "Status" },
+  { label: "Memo" }, { label: "Amount", numeric: true },
+];
+const STATUSES = [
+  ["", "— All —"],
+  ["pendingApproval", "Pending Approval"],
+  ["pendingFulfillment", "Pending Fulfillment"],
+  ["partiallyFulfilled", "Partially Fulfilled"],
+  ["pendingBilling", "Pending Billing"],
+  ["pendingBillingPartFulfilled", "Pending Billing/Partially Fulfilled"],
+  ["billed", "Billed"],
+  ["closed", "Closed"],
+];
+
+register("orders", async (main, route) => {
+  setPageTitle("Sales Orders");
+  const state = {
+    status: route.params.get("status") ?? "",
+    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.status) params.set("status", next.status);
+    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(`#/orders${query ? `?${query}` : ""}`);
+  }
+
+  const statusSelect = el("select", { id: "so-status", onchange: (event) => apply({ status: event.currentTarget.value, offset: 0 }) },
+    STATUSES.map(([value, label]) => el("option", { value, text: label, selected: value === state.status })));
+  const input = el("input", { type: "search", id: "so-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: "so-status", text: "Status" }), statusSelect]),
+    el("div", { class: "field" }, [el("label", { class: "fl", for: "so-filter", text: "Quick Filter" }), input]),
+    toolbarButton("Search", () => apply({ term: input.value.trim(), offset: 0 })),
+    toolbarButton("Reset", () => apply({ term: "", status: "", offset: 0 })),
+  ]);
+
+  main.replaceChildren(listShell({
+    title: "Sales Orders",
+    subtitle: app.session?.subsidiaryScope?.id !== "0" ? `Restricted to ${app.session.subsidiaryScope.refName}` : undefined,
+    actions: [
+      toolbarButton("New Sales Order", () => go("#/orders/new"), { kind: "primary", disabled: !can("TRAN_SALESORD", "create"), title: can("TRAN_SALESORD", "create") ? undefined : "Your role cannot create sales orders" }),
+      nsButton("Customize View"),
+      nsButton("Export"),
+    ],
+    filter,
+    columns: COLUMNS,
+    body,
+    pager: pagerHost,
+  }));
+
+  try {
+    const parts = [];
+    if (state.status !== "") parts.push(`status IS ${lit(state.status)}`);
+    if (state.term !== "") parts.push(`(tranId CONTAIN ${lit(state.term)} OR memo CONTAIN ${lit(state.term)})`);
+    const page = await listIds("sales-order.list", { q: parts.join(" AND "), limit: state.size, offset: state.offset });
+    const rows = await expand("sales-order.get", page.ids);
+    if (rows.length === 0) {
+      body.replaceChildren(el("tr", {}, el("td", { colspan: String(COLUMNS.length) },
+        emptyState("No sales orders match this filter.", "Change the status filter or enter a different search."))));
+    } else {
+      body.replaceChildren(...rows.map((record) => el("tr", {}, [
+        el("td", {}, el("a", { class: "rowlink", href: `#/orders/${encodeURIComponent(record.id)}`, text: record.tranId })),
+        el("td", { class: "tight", text: mdy(record.tranDate) }),
+        el("td", {}, el("a", { href: `#/customers/${encodeURIComponent(record.entity?.id ?? "")}`, text: record.entity?.refName ?? "" })),
+        el("td", {}, pill(record.status)),
+        el("td", { text: record.memo ?? "" }),
+        el("td", { class: "num", text: money(record.total, currencyOf(record)) }),
+      ])));
+    }
+    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 sales order list could not be loaded"))));
+  }
+});

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

@@ -0,0 +1,65 @@
+// Payments → Customers → Customer Payments: the payment list, plus the open invoices a payment can be
+// accepted against (the payment itself is recorded from the invoice, as NetSuite's transform does).
+import { app, can, go, listIds, expand, register } from "../store.js";
+import { el, errorBanner, emptyState, money, mdy, skeletonRows } from "../ui.js";
+import { listShell, pagerStrip, setPageTitle, nsButton, pill, currencyOf } from "./common.js";
+
+const COLUMNS = [
+  { label: "Document Number" }, { label: "Date" }, { label: "Customer" }, { label: "Applied To" },
+  { label: "Status" }, { label: "Amount", numeric: true }, { label: "Unapplied", numeric: true },
+];
+
+register("payments", async (main, route) => {
+  setPageTitle("Customer Payments");
+  const size = Number(route.params.get("size") ?? 25) || 25;
+  const offset = Number(route.params.get("offset") ?? 0) || 0;
+  const body = el("tbody", {}, skeletonRows(COLUMNS.length));
+  const pagerHost = el("div", {});
+
+  const apply = (patch) => {
+    const params = new URLSearchParams();
+    const next = { size, offset, ...patch };
+    if (next.offset) params.set("offset", String(next.offset));
+    if (next.size !== 25) params.set("size", String(next.size));
+    const query = params.toString();
+    go(`#/payments${query ? `?${query}` : ""}`);
+  };
+
+  main.replaceChildren(listShell({
+    title: "Customer Payments",
+    subtitle: can("TRAN_CUSTPYMT", "create") ? "Open an invoice and choose Accept Payment to record a new payment." : undefined,
+    actions: [nsButton("Customize View"), nsButton("Export")],
+    columns: COLUMNS,
+    body,
+    pager: pagerHost,
+  }));
+
+  try {
+    const page = await listIds("customer-payment.list", { limit: size, offset });
+    const rows = await expand("customer-payment.get", page.ids, { expandSubResources: true });
+    if (rows.length === 0) {
+      body.replaceChildren(el("tr", {}, el("td", { colspan: String(COLUMNS.length) },
+        emptyState("No customer payments yet.", "Accept a payment from an open invoice to create one."))));
+    } else {
+      body.replaceChildren(...rows.map((record) => {
+        const currency = currencyOf(record);
+        const applied = (record.apply?.items ?? []).map((entry) => entry.refName ?? entry.doc).join(", ");
+        return el("tr", {}, [
+          el("td", { text: record.tranId }),
+          el("td", { class: "tight", text: mdy(record.tranDate) }),
+          el("td", {}, el("a", { href: `#/customers/${encodeURIComponent(record.customer?.id ?? "")}`, text: record.customer?.refName ?? "" })),
+          el("td", { text: applied }),
+          el("td", {}, pill(record.status)),
+          el("td", { class: "num", text: money(record.payment, currency) }),
+          el("td", { class: "num", text: money(record.unapplied, currency) }),
+        ]);
+      }));
+    }
+    pagerHost.replaceChildren(pagerStrip({
+      offset: page.offset, shown: rows.length, total: page.totalResults, hasMore: page.hasMore, pageSize: size,
+      onOffset: (next) => apply({ offset: next }), onPageSize: (next) => apply({ size: next, offset: 0 }),
+    }));
+  } catch (error) {
+    body.replaceChildren(el("tr", {}, el("td", { colspan: String(COLUMNS.length) }, errorBanner(error, "The payment list could not be loaded"))));
+  }
+});