domma-cms 0.54.2 → 0.66.0

package/plugins/invoice/admin/views/editor.js

@@ -1,51 +1,213 @@
 /**
  * Invoice plugin - editor view. Create or edit a single invoice.
+ *
+ * The screen is a reactive graph rather than a render function: one observable
+ * per field, one computed per derived number, and a single M.applyBindings to
+ * connect them to the markup. Nothing here writes to the DOM.
+ *
+ * Line items are objects of observables rather than plain objects in a Model
+ * field, because `data-model="lineItems[0].quantity"` would mutate that object
+ * in place and the field's observable would never fire - the documented trap in
+ * docs/Bindings.md. Per-field observables make every keystroke a tracked write,
+ * so the line total, the subtotal, the VAT and the total all follow it.
  */
-function escapeHtml(s) {
-    return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+import {canDownloadPdf, downloadPdf, openPrintWindow} from './print.js?v=9';
+import {disposeOnLeave} from './view-lifecycle.js?v=8';
+import {openSendDialog} from './send.js?v=8';
+import {openPaymentDialog, PAYMENT_METHODS} from './payments.js?v=8';
+import {billingProfile, contactsAvailable, openContactPicker} from './contacts-source.js?v=8';
+import {INVOICE_HELP} from './help-content.js?v=8';
+import {openHelpPanel, scanHelp} from '/plugins/_lib/admin/ui/help.js?v=8';
+
+const BASE = '/api/plugins/invoice';
+
+function round2(n) {
+    return Math.round((Number(n) + Number.EPSILON) * 100) / 100;
 }
 
-function fmt(amount, currency) {
+function money(amount, currency) {
     try {
         return new Intl.NumberFormat('en-GB', { style: 'currency', currency: currency || 'GBP' }).format(Number(amount) || 0);
     } catch {
-        return `${currency || 'GBP'} ${Number(amount).toFixed(2)}`;
+        return `${currency || 'GBP'} ${(Number(amount) || 0).toFixed(2)}`;
     }
 }
 
-function round2(n) {
-    return Math.round((Number(n) + Number.EPSILON) * 100) / 100;
+/** Ids only have to be unique within this mount - they key the rendered rows. */
+let lineSeq = 0;
+
+/**
+ * One line item as a small reactive record.
+ *
+ * @param {object} item                 `{description, quantity, unitPrice}`
+ * @param {object} currency             the form's currency observable
+ * @returns {object} observables plus the two computeds the row renders
+ */
+function makeLine(item, currency) {
+    const line = {
+        id:          `line-${++lineSeq}`,
+        description: M.observable(item?.description ?? ''),
+        quantity:    M.observable(Number(item?.quantity) || 0),
+        unitPrice:   M.observable(Number(item?.unitPrice) || 0)
+    };
+    line.lineTotal     = M.computed(() => round2((Number(line.quantity.value) || 0) * (Number(line.unitPrice.value) || 0)));
+    line.lineTotalText = M.computed(() => money(line.lineTotal.value, currency.value));
+    return line;
 }
 
-const BASE = '/api/plugins/invoice';
+/**
+ * One recorded payment as a row. The stored fields never change - the ledger is
+ * append/remove only - so the computeds exist for the one thing that can move
+ * underneath them: the invoice's currency.
+ *
+ * @param {object} payment
+ * @param {object} currency the form's currency observable
+ * @returns {object}
+ */
+function makePaymentRow(payment, currency) {
+    const row = {
+        id:        payment.id,
+        reference: payment.reference || '-',
+        amount:    Number(payment.amount) || 0,
+        date:      payment.date || '',
+        method:    payment.method || 'other'
+    };
+    row.amountText = M.computed(() => money(row.amount, currency.value));
+    row.dateText   = row.date ? D(row.date).format('DD MMM YYYY') : '-';
+    row.methodText = PAYMENT_METHODS[row.method] || row.method;
+    return row;
+}
 
 export const editorView = {
     templateUrl: '/plugins/invoice/admin/templates/editor.html',
 
     async onMount($container) {
-        const id = R.current?.params?.id ?? null;
+        // Domma's router hands onMount ONE argument and never the route params,
+        // and `R.current` is a METHOD - `R.current?.params` is undefined on the
+        // function object. Read the slug off the hash, as every core editor does.
+        const routeMatch = location.hash.match(/^#\/plugins\/invoice\/edit\/([^?#]+)/);
+        const id = routeMatch ? decodeURIComponent(routeMatch[1]) : null;
         const isEdit = Boolean(id);
-        let invoice = null;
-        let issuers = [];
-        let receivers = [];
-        let lineItems = [];
+        const today = new Date().toISOString().slice(0, 10);
+
+        const form = {
+            isEdit:     M.observable(isEdit),
+            canPdf:     M.observable(false),
+            canImport:  M.observable(false),
+            number:     M.observable(''),
+            status:     M.observable('draft'),
+            issueDate:  M.observable(today),
+            dueDate:    M.observable(''),
+            issuerId:   M.observable(''),
+            receiverId: M.observable(''),
+            currency:   M.observable('GBP'),
+            vatEnabled: M.observable(true),
+            vatRate:    M.observable(20),
+            notes:      M.observable(''),
+            issuers:    M.observable([]),
+            receivers:  M.observable([]),
+            lineItems:  M.observableArray([]),
+            payments:   M.observableArray([])
+        };
+
+        // Derived money. Each reads only what it needs, so a keystroke in one
+        // row's quantity re-runs that row's total and the three below it - not
+        // the other rows, and not the selects.
+        form.subtotal     = M.computed(() => round2(form.lineItems.value.reduce((sum, line) => sum + line.lineTotal.value, 0)));
+        form.vat          = M.computed(() => (form.vatEnabled.value ? round2(form.subtotal.value * (Number(form.vatRate.value) || 0) / 100) : 0));
+        form.total        = M.computed(() => round2(form.subtotal.value + form.vat.value));
+        form.subtotalText = M.computed(() => money(form.subtotal.value, form.currency.value));
+        form.vatText      = M.computed(() => money(form.vat.value, form.currency.value));
+        form.totalText    = M.computed(() => money(form.total.value, form.currency.value));
+
+        // The ledger. `paid` is summed here rather than taken from the server's
+        // totals so the balance follows a line item being edited, live, before
+        // anything is saved.
+        form.paid         = M.computed(() => round2(form.payments.value.reduce((sum, p) => sum + p.amount, 0)));
+        form.balance      = M.computed(() => round2(form.total.value - form.paid.value));
+        form.paidText     = M.computed(() => money(form.paid.value, form.currency.value));
+        form.balanceText  = M.computed(() => money(Math.max(0, form.balance.value), form.currency.value));
+        form.hasPayments  = M.computed(() => form.payments.value.length > 0);
+        form.noPayments   = M.computed(() => form.payments.value.length === 0);
+        form.settled      = M.computed(() => form.total.value > 0 && form.balance.value <= 0);
+        form.balanceLabel = M.computed(() => (form.settled.value ? 'Paid in full' : 'Balance due'));
+
+        // ---- data -----------------------------------------------------------
+
+        /**
+         * Reload the receiver list and keep the current selection.
+         *
+         * Rebuilding a select's options resets it, so the value is put back -
+         * which is also how a freshly imported receiver becomes the selected
+         * one without a second click.
+         *
+         * @param   {string} [select] id to select afterwards
+         * @returns {Promise<void>}
+         */
+        async function loadReceivers(select) {
+            const res = await H.get(`${BASE}/receivers`);
+            const receivers = res.data ?? res ?? [];
+            form.receivers.value = receivers.map((r) => ({ id: r.id, label: r.company || r.name || '(unnamed)' }));
+            if (select) form.receiverId.value = select;
+        }
 
         try {
             const [issRes, recRes] = await Promise.all([
                 H.get(`${BASE}/issuers`),
                 H.get(`${BASE}/receivers`)
             ]);
-            issuers   = issRes.data ?? issRes ?? [];
-            receivers = recRes.data ?? recRes ?? [];
+            const issuers   = (issRes.data ?? issRes ?? []);
+            const receivers = (recRes.data ?? recRes ?? []);
+            // data-options-text takes an expression against the item, so the
+            // label is resolved here rather than spelled out in the attribute.
+            form.issuers.value   = issuers.map((i)   => ({ id: i.id, label: i.name || '(unnamed)' }));
+            form.receivers.value = receivers.map((r) => ({ id: r.id, label: r.company || r.name || '(unnamed)' }));
         } catch {
             E.toast('Could not load issuers / receivers.', { type: 'error' });
         }
 
+        // A new invoice opens on the house defaults - the issuer we trade as,
+        // the currency, the VAT rate and the payment terms. An existing one
+        // opens on what it was saved with, so changing a default never edits
+        // an invoice that already exists.
+        if (!isEdit) {
+            try {
+                const res = await H.get(`${BASE}/settings`);
+                const settings = res.data ?? res;
+                form.currency.value   = settings.defaultCurrency ?? 'GBP';
+                form.vatEnabled.value = settings.vatEnabledByDefault !== false;
+                form.vatRate.value    = settings.defaultVatRate ?? 20;
+                if (settings.defaultIssuerId) form.issuerId.value = settings.defaultIssuerId;
+
+                const terms = Number(settings.defaultPaymentTermsDays);
+                if (Number.isFinite(terms) && terms > 0) {
+                    form.dueDate.value = D(today).add(terms, 'days').format('YYYY-MM-DD');
+                }
+            } catch {
+                // The shipped defaults already in the observables are fine.
+            }
+        }
+
         if (isEdit) {
             try {
                 const res = await H.get(`${BASE}/invoices/${id}`);
-                invoice = res.data ?? res;
-                lineItems = Array.isArray(invoice.lineItems) ? [...invoice.lineItems] : [];
+                const invoice = res.data ?? res;
+                form.number.value     = invoice.number ?? '';
+                form.status.value     = invoice.status ?? 'draft';
+                form.issueDate.value  = invoice.issueDate ?? today;
+                form.dueDate.value    = invoice.dueDate ?? '';
+                form.issuerId.value   = invoice.issuerId ?? '';
+                form.receiverId.value = invoice.receiverId ?? '';
+                form.currency.value   = invoice.currency ?? 'GBP';
+                form.vatEnabled.value = invoice.vatEnabled !== false;
+                form.vatRate.value    = invoice.vatRate ?? 20;
+                form.notes.value      = invoice.notes ?? '';
+                if (Array.isArray(invoice.lineItems)) {
+                    form.lineItems.value = invoice.lineItems.map((li) => makeLine(li, form.currency));
+                }
+                if (Array.isArray(invoice.payments)) {
+                    form.payments.value = invoice.payments.map((p) => makePaymentRow(p, form.currency));
+                }
             } catch {
                 E.toast('Invoice not found.', { type: 'error' });
                 R.navigate('#/plugins/invoice');
@@ -53,201 +215,156 @@ export const editorView = {
             }
         }
 
-        const $title       = $container.find('#editor-title');
-        const $number      = $container.find('#f-number');
-        const $status      = $container.find('#f-status');
-        const $issueDate   = $container.find('#f-issue-date');
-        const $dueDate     = $container.find('#f-due-date');
-        const $issuer      = $container.find('#f-issuer');
-        const $receiver    = $container.find('#f-receiver');
-        const $vatEnabled  = $container.find('#f-vat-enabled');
-        const $vatRate     = $container.find('#f-vat-rate');
-        const $currency    = $container.find('#f-currency');
-        const $notes       = $container.find('#f-notes');
-        const $print       = $container.find('#btn-print');
-        const $body        = $container.find('#line-items-body');
-        const $vatRow      = $container.find('#vat-row');
-        const $tSubtotal   = $container.find('#t-subtotal');
-        const $tVat        = $container.find('#t-vat');
-        const $tVatRate    = $container.find('#t-vat-rate');
-        const $tTotal      = $container.find('#t-total');
-
-        function populateSelect($select, list, valueKey, labelFn, selected) {
-            const el = $select.get(0);
-            while (el.firstChild) el.removeChild(el.firstChild);
-            const placeholder = document.createElement('option');
-            placeholder.value = '';
-            placeholder.textContent = '- select -';
-            el.appendChild(placeholder);
-            for (const item of list) {
-                const opt = document.createElement('option');
-                opt.value = item[valueKey];
-                opt.textContent = labelFn(item);
-                if (item[valueKey] === selected) opt.selected = true;
-                el.appendChild(opt);
-            }
+        if (!form.lineItems.value.length) {
+            form.lineItems.push(makeLine({ quantity: 1, unitPrice: 0 }, form.currency));
         }
 
-        populateSelect($issuer, issuers, 'id', (i) => i.name || '(unnamed)', invoice?.issuerId);
-        populateSelect($receiver, receivers, 'id', (r) => r.company || r.name || '(unnamed)', invoice?.receiverId);
-
-        const today = new Date().toISOString().slice(0, 10);
-        $title.text(isEdit ? `Edit Invoice ${invoice?.number ?? ''}` : 'New Invoice');
-        $number.val(invoice?.number ?? '');
-        $status.val(invoice?.status ?? 'draft');
-        $issueDate.val(invoice?.issueDate ?? today);
-        $dueDate.val(invoice?.dueDate ?? '');
-        $vatEnabled.prop('checked', invoice?.vatEnabled !== false);
-        $vatRate.val(invoice?.vatRate ?? 20);
-        $currency.val(invoice?.currency ?? 'GBP');
-        $notes.val(invoice?.notes ?? '');
-
-        if (isEdit) {
-            $print.attr('href', `${BASE}/invoices/${id}/print`).css('display', '');
-        }
-
-        if (!lineItems.length) {
-            lineItems.push({ description: '', quantity: 1, unitPrice: 0 });
-        }
-        renderLineItems();
-        recomputeTotals();
-
-        function makeCell(child) {
-            const td = document.createElement('td');
-            td.appendChild(child);
-            return td;
-        }
-
-        function renderLineItems() {
-            const body = $body.get(0);
-            while (body.firstChild) body.removeChild(body.firstChild);
-
-            lineItems.forEach((item, idx) => {
-                const tr = document.createElement('tr');
-
-                const desc = document.createElement('input');
-                desc.type = 'text';
-                desc.className = 'form-control li-desc';
-                desc.dataset.idx = idx;
-                desc.value = item.description ?? '';
-                desc.placeholder = 'Description';
-
-                const qty = document.createElement('input');
-                qty.type = 'number';
-                qty.className = 'form-control li-qty';
-                qty.dataset.idx = idx;
-                qty.min = '0';
-                qty.step = '0.01';
-                qty.value = Number(item.quantity) || 0;
-
-                const price = document.createElement('input');
-                price.type = 'number';
-                price.className = 'form-control li-price';
-                price.dataset.idx = idx;
-                price.min = '0';
-                price.step = '0.01';
-                price.value = Number(item.unitPrice) || 0;
-
-                const totalCell = document.createElement('td');
-                totalCell.style.cssText = 'text-align:right;font-variant-numeric:tabular-nums;';
-                totalCell.id = `line-total-${idx}`;
-                totalCell.textContent = '-';
-
-                const removeBtn = document.createElement('button');
-                removeBtn.type = 'button';
-                removeBtn.className = 'btn btn-sm btn-ghost li-remove';
-                removeBtn.dataset.idx = idx;
-                removeBtn.title = 'Remove';
-                removeBtn.textContent = '×';
-
-                tr.appendChild(makeCell(desc));
-                tr.appendChild(makeCell(qty));
-                tr.appendChild(makeCell(price));
-                tr.appendChild(totalCell);
-                tr.appendChild(makeCell(removeBtn));
-                body.appendChild(tr);
-            });
+        // ---- behaviour ------------------------------------------------------
+        //
+        // These hang off the data rather than being passed as `methods`, because
+        // inside a data-each a bare handler name does not resolve at all - a row
+        // reaches them through `$parent.removeLine($data)`, and $parent is the
+        // data object.
+
+        form.addLine = () => {
+            form.lineItems.push(makeLine({ quantity: 1, unitPrice: 0 }, form.currency));
+        };
+
+        form.removeLine = (line) => {
+            form.lineItems.remove(line);
+            if (!form.lineItems.value.length) form.addLine();
+        };
+
+        /**
+         * Move a line by one position.
+         *
+         * Through `.value =` rather than splicing in place: an observableArray
+         * notifies on assignment, and a mutated array is the same array, so
+         * `data-each` would never hear about it.
+         *
+         * @param   {object} line
+         * @param   {number} delta
+         * @returns {void}
+         */
+        form.moveLine = (line, delta) => {
+            const lines = [...form.lineItems.value];
+            const from = lines.indexOf(line);
+            const to = from + delta;
+            if (from < 0 || to < 0 || to >= lines.length) return;
+            lines.splice(to, 0, ...lines.splice(from, 1));
+            form.lineItems.value = lines;
+        };
+
+        /**
+         * @param   {object} line
+         * @returns {void}
+         */
+        form.duplicateLine = (line) => {
+            const lines = [...form.lineItems.value];
+            const at = lines.indexOf(line);
+            const copy = makeLine({
+                description: line.description.value,
+                quantity: line.quantity.value,
+                unitPrice: line.unitPrice.value
+            }, form.currency);
+            lines.splice(at + 1, 0, copy);
+            form.lineItems.value = lines;
+        };
+
+        form.showHelp = () => openHelpPanel(INVOICE_HELP);
+
+        // Contacts is optional - disabled, or not installed - so the button is
+        // only offered once the probe has answered. data-if takes the element
+        // out of the document while the answer is false, which is why its icon
+        // (if it ever gains one) would have to be scanned afterwards.
+        contactsAvailable().then((ok) => { form.canImport.value = ok; });
+
+        form.importReceiver = () => openContactPicker({
+            title: 'Bill a contact',
+            onPick: async (contact) => {
+                try {
+                    // The billing profile uses the receiver's own field names,
+                    // so it posts straight through with nothing to translate.
+                    const profile = await billingProfile(contact.id);
+                    const res = await H.post(`${BASE}/receivers`, profile);
+                    const created = res?.data ?? res;
+                    if (created?.error) throw new Error(created.error);
+                    await loadReceivers(created.id);
+                    E.toast(`${profile.company || profile.name} added as a receiver.`, { type: 'success' });
+                } catch (err) {
+                    E.toast(err?.message ?? 'Could not import that contact.', { type: 'error' });
+                }
+            }
+        });
 
-            updateLineTotals();
-        }
+        form.openPrint = () => openPrintWindow(id);
+        form.downloadPdf = () => downloadPdf(id);
 
-        function updateLineTotals() {
-            const currency = $currency.val();
-            lineItems.forEach((item, idx) => {
-                const lineTotal = round2((Number(item.quantity) || 0) * (Number(item.unitPrice) || 0));
-                const cell = $container.find(`#line-total-${idx}`).get(0);
-                if (cell) cell.textContent = fmt(lineTotal, currency);
-            });
-        }
+        /** One place to take an invoice the server just changed and follow it. */
+        const applyServerInvoice = (updated) => {
+            if (!updated) return;
+            if (updated.status) form.status.value = updated.status;
+            form.payments.value = (updated.payments ?? []).map((p) => makePaymentRow(p, form.currency));
+        };
 
-        function recomputeTotals() {
-            const currency = $currency.val();
-            const vatEnabled = $vatEnabled.prop('checked');
-            const vatRate = Number($vatRate.val()) || 0;
+        form.recordPayment = () => openPaymentDialog(id, form.balance.value, applyServerInvoice);
 
-            let subtotal = 0;
-            for (const item of lineItems) {
-                subtotal += (Number(item.quantity) || 0) * (Number(item.unitPrice) || 0);
+        form.removePayment = async (row) => {
+            const ok = await E.confirm(`Remove the ${money(row.amount, form.currency.value)} payment?`);
+            if (!ok) return;
+            try {
+                const res = await H.delete(`${BASE}/invoices/${id}/payments/${row.id}`);
+                const out = res?.data ?? res;
+                if (out?.error) throw new Error(out.error);
+                applyServerInvoice(out);
+                E.toast('Payment removed.', { type: 'success' });
+            } catch (err) {
+                E.toast(err?.message ?? 'Could not remove the payment.', { type: 'error' });
             }
-            subtotal = round2(subtotal);
-            const vat = vatEnabled ? round2(subtotal * (vatRate / 100)) : 0;
-            const total = round2(subtotal + vat);
-
-            $tSubtotal.text(fmt(subtotal, currency));
-            $tVat.text(fmt(vat, currency));
-            $tVatRate.text(vatRate);
-            $tTotal.text(fmt(total, currency));
-            $vatRow.css('display', vatEnabled ? '' : 'none');
-            updateLineTotals();
-        }
+        };
 
-        $body.on('input', '.li-desc', function () {
-            lineItems[Number(this.dataset.idx)].description = this.value;
-        });
-        $body.on('input', '.li-qty', function () {
-            lineItems[Number(this.dataset.idx)].quantity = Number(this.value) || 0;
-            recomputeTotals();
-        });
-        $body.on('input', '.li-price', function () {
-            lineItems[Number(this.dataset.idx)].unitPrice = Number(this.value) || 0;
-            recomputeTotals();
-        });
-        $body.on('click', '.li-remove', function () {
-            const idx = Number(this.dataset.idx);
-            lineItems.splice(idx, 1);
-            if (!lineItems.length) lineItems.push({ description: '', quantity: 1, unitPrice: 0 });
-            renderLineItems();
-            recomputeTotals();
+        form.sendInvoice = () => openSendDialog(id, (updated) => {
+            // Sending can move a draft to sent, so the screen has to follow.
+            if (updated?.status) form.status.value = updated.status;
         });
 
-        $container.find('#btn-add-line').on('click', () => {
-            lineItems.push({ description: '', quantity: 1, unitPrice: 0 });
-            renderLineItems();
-            recomputeTotals();
-        });
-
-        $vatEnabled.on('change', recomputeTotals);
-        $vatRate.on('input', recomputeTotals);
-        $currency.on('change', recomputeTotals);
+        // The button only exists where the host can actually render one; a
+        // button that always answers "not installed" is worse than no button.
+        //
+        // Its icon has to be scanned AFTER it appears: data-if takes the element
+        // out of the document while the answer is false, so the scan at the end
+        // of mount would run against a detached node and the span would come
+        // back empty. M.flush() settles the binding first - reading the DOM
+        // before the microtask has run would scan the old shape.
+        if (isEdit) {
+            canDownloadPdf().then((ok) => {
+                if (!ok) return;
+                form.canPdf.value = true;
+                M.flush();
+                Domma.icons.scan($container.get(0));
+            });
+        }
 
-        $container.find('#btn-save').on('click', async () => {
-            const issuerId   = $issuer.val();
-            const receiverId = $receiver.val();
-            if (!issuerId)   { E.toast('Pick an issuer.',   { type: 'error' }); return; }
-            if (!receiverId) { E.toast('Pick a receiver.', { type: 'error' }); return; }
+        form.save = async () => {
+            if (!form.issuerId.value)   { E.toast('Pick an issuer.',   { type: 'error' }); return; }
+            if (!form.receiverId.value) { E.toast('Pick a receiver.', { type: 'error' }); return; }
 
             const body = {
-                number:     $number.val()?.trim() || undefined,
-                status:     $status.val(),
-                issueDate:  $issueDate.val(),
-                dueDate:    $dueDate.val() || '',
-                issuerId,
-                receiverId,
-                vatEnabled: $vatEnabled.prop('checked'),
-                vatRate:    Number($vatRate.val()) || 0,
-                currency:   $currency.val(),
-                notes:      $notes.val() ?? '',
-                lineItems
+                number:     String(form.number.value ?? '').trim() || undefined,
+                status:     form.status.value,
+                issueDate:  form.issueDate.value,
+                dueDate:    form.dueDate.value || '',
+                issuerId:   form.issuerId.value,
+                receiverId: form.receiverId.value,
+                vatEnabled: Boolean(form.vatEnabled.value),
+                vatRate:    Number(form.vatRate.value) || 0,
+                currency:   form.currency.value,
+                notes:      form.notes.value ?? '',
+                lineItems:  form.lineItems.value.map((line) => ({
+                    description: line.description.value,
+                    quantity:    Number(line.quantity.value) || 0,
+                    unitPrice:   Number(line.unitPrice.value) || 0
+                }))
             };
 
             try {
@@ -260,8 +377,58 @@ export const editorView = {
             } catch (err) {
                 E.toast(err?.message ?? 'Save failed.', { type: 'error' });
             }
+        };
+
+        const handle = M.applyBindings(form, $container.get(0));
+
+        // A line is a row, so its actions belong on the row. The item is found
+        // by POSITION rather than by an id attribute: data-each owns this
+        // markup and stamps no id on the <tr>, and the rendered order is the
+        // array order.
+        const linesBody = $container.find('#line-items-body').get(0);
+        const lineMenu = linesBody && E.contextMenu(linesBody, {
+            match: 'tr',
+            inherit: false,
+            items: (target) => {
+                const index = [...linesBody.children].indexOf(target);
+                const line = form.lineItems.value[index];
+                if (!line) return [];
+                const last = form.lineItems.value.length - 1;
+                return [
+                    { header: line.description.value || `Line ${index + 1}` },
+                    { label: 'Duplicate', icon: 'copy', action: () => form.duplicateLine(line) },
+                    { label: 'Add a line below', icon: 'plus', action: () => form.addLine() },
+                    { type: 'divider' },
+                    { label: 'Move up', icon: 'chevron-up', disabled: index === 0,
+                        action: () => form.moveLine(line, -1) },
+                    { label: 'Move down', icon: 'chevron-down', disabled: index === last,
+                        action: () => form.moveLine(line, 1) },
+                    { type: 'divider' },
+                    { label: 'Remove', icon: 'trash', danger: true,
+                        action: () => form.removeLine(line) }
+                ];
+            }
+        });
+
+        // Domma's calendar rather than `<input type="date">`: one control in
+        // every browser, themed from --dm-* tokens, and it writes ISO into the
+        // input and fires input/change, so `data-model` hears it exactly as it
+        // hears typing. The due date cannot precede the issue date, and saying
+        // so in the picker beats validating it after the fact.
+        const issuePicker = E.datePicker($container.find('#f-issue-date').get(0), {
+            onChange: (iso) => duePicker?.setOptions({min: iso || null})
+        });
+        const duePicker = E.datePicker($container.find('#f-due-date').get(0), {
+            min: form.issueDate.value || null
         });
 
-        Domma.icons.scan();
+        disposeOnLeave($container.find('#line-items-table').get(0), handle,
+            () => lineMenu?.destroy?.(),
+            () => issuePicker?.destroy?.(),
+            () => duePicker?.destroy?.());
+
+        Domma.icons.scan($container.get(0));
+        M.flush();
+        scanHelp($container.get(0));
     }
 };