@arcforgelabs/flow 2026.10.45 → 2026.10.47

package/server/ui/invoicing.js

@@ -10,10 +10,13 @@ import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
 import { caseNumber } from '/assets/ui/job-board.js';
 import { jobChangeReview } from '/assets/ui/job-change.js';
-import { columnTable, rowCells, viewSaver } from '/assets/ui/columns.js';
-import { filterCount, filterJobs, INVOICE_COLUMNS, normaliseListView } from '/assets/ui/job-view.js';
-import { INVOICE_FILTER_FIELDS, invoiceFilterKind, invoiceValue, normaliseInvoicesView } from '/assets/ui/list-views.js';
-import { listPager, PAGE_SIZES } from '/assets/ui/pager.js';
+import { rowMenu } from '/assets/ui/kit.js';
+import { isPhone, WIDTHS } from '/assets/ui/mobile.js';
+import { recordBar, watchPhonePrimary } from '/assets/ui/sidecar.js';
+import { columnTable, dateCell, fieldColumn, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { fieldGroup, fieldIdOf, filterCount, filterJobs, INVOICE_COLUMNS, invoiceColumnsView, KIND_OF_TYPE } from '/assets/ui/job-view.js';
+import { INVOICE_FILTER_FIELDS, INVOICE_FILTER_STATUSES, invoiceFilterKind, invoiceKindOf, invoiceValue, normaliseInvoicesView } from '/assets/ui/list-views.js';
+import { listPager, pager, PAGE_SIZES } from '/assets/ui/pager.js';
 import { savedViews } from '/assets/ui/saved-views.js';
 import { findBox, today, viewBar } from '/assets/ui/view-bar.js';
 
@@ -119,13 +122,14 @@ const showDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString(
 // views with them and filters every invoice of a tab (GET /invoices).
 const FILTER_FIELDS = INVOICE_FILTER_FIELDS;
 const PROBLEM_OPS = { yes: 'Has one', no: 'Has none' };
+const STATUS_OPS = { is: 'Is', not: 'Is not' };
 const FILTER_KEY = 'flow_invoice_filters';
 const SIZE_KEY = 'flow_invoice_page_size';
-const filterKind = invoiceFilterKind;
 export { invoiceValue };
 
-// The invoices a filter view keeps.
-export const keptInvoices = (invoices, view, now = today()) => filterJobs(invoices, view, { valueOf: invoiceValue, kindOf: filterKind, today: now });
+// The invoices a filter view keeps. `kindOf` knows the lab's custom fields;
+// `me` is the person looking, for "Me" on a person field.
+export const keptInvoices = (invoices, view, now = today(), { kindOf = invoiceFilterKind, me = null } = {}) => filterJobs(invoices, view, { valueOf: invoiceValue, kindOf, late: null, me, today: now });
 
 // Rows per page, kept on this device.
 function readSize() {
@@ -149,21 +153,25 @@ export async function renderInvoiceList(main, ui) {
     status: TABS.some(([id]) => id === saved) ? saved : 'ready', q: returning ? back?.q ?? '' : '', ticked: new Set(), view: readFilters(),
     // The page of rows shown: the server filters and cuts it (GET /invoices).
     offset: returning ? back?.offset ?? 0 : 0, limit: readSize(),
-    columns: normaliseListView(ui.me?.views?.invoices, INVOICE_COLUMNS),
+    columns: invoiceColumnsView(ui.me?.views?.invoices),
+    // The lab's custom fields, their job values and the people a person
+    // field names (GET /api/custom-fields): columns a person can add.
+    fields: [], values: new Map(), people: [],
   };
   // The list's columns: resize, move, hide, kept with the account. A tab
-  // has some of them (`available`, set as it draws).
+  // has some of them (`available`, set as it draws), each with its label.
   let available = Object.keys(INVOICE_COLUMNS);
+  const labelOf = (id) => INVOICE_COLUMNS[id] ?? state.fields.find((f) => fieldGroup(f.id) === id)?.name ?? id;
   const saveColumns = viewSaver(ui, 'invoices');
   const heads = columnTable(h, {
     order: () => state.columns.columns,
     widths: () => state.columns.widths,
     change: (patch) => {
-      state.columns = normaliseListView({ ...state.columns, ...patch }, INVOICE_COLUMNS);
+      state.columns = invoiceColumnsView({ ...state.columns, ...patch });
       saveColumns(state.columns);
       if (raw) draw(raw);
     },
-    hidden: () => available.filter((id) => !state.columns.columns.includes(id)).map((id) => ({ id, label: INVOICE_COLUMNS[id] })),
+    hidden: () => available.filter((id) => !state.columns.columns.includes(id)).map((id) => ({ id, label: labelOf(id) })),
   });
   const tabs = h('div', { class: 'fx-tabs', role: 'tablist' });
   let timer;
@@ -190,11 +198,27 @@ export async function renderInvoiceList(main, ui) {
   const opening = views.opening();
   if (opening) state.view = normaliseInvoicesView(opening);
   views.draw();
+  // The same fields the Columns menu offers: the invoice's columns, its
+  // job's columns, then the lab's custom fields (view-bar.js draws them).
+  const fieldById = (id) => state.fields.find((f) => f.id === id) ?? null;
+  const kindOf = (field) => invoiceKindOf(state.fields)(field);
+  const labels = (list) => (list ?? []).filter(Boolean).map((v) => ({ value: v, label: v }));
   const filterMenu = viewBar(h).filterMenu({
-    fields: () => Object.entries(FILTER_FIELDS).map(([value, f]) => ({ value, label: f.label, icon: f.icon })),
-    kindOf: filterKind,
-    opsOf: (field) => (field === 'problem' ? PROBLEM_OPS : null),
-    choicesOf: (field) => (field === 'client' ? (raw?.clients ?? []).map((v) => ({ value: v, label: v })) : []),
+    fields: () => [
+      ...Object.entries(FILTER_FIELDS).map(([value, f]) => ({ value, label: f.label, icon: f.icon })),
+      { group: 'Custom fields', options: state.fields.filter((f) => KIND_OF_TYPE[f.type]).map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
+    ],
+    kindOf,
+    opsOf: (field) => (field === 'problem' ? PROBLEM_OPS : field === 'status' ? STATUS_OPS : null),
+    choicesOf: (field) => {
+      if (field === 'client') return labels(raw?.clients);
+      if (field === 'status') return INVOICE_FILTER_STATUSES;
+      if (field === 'linked') return (raw?.linksTo ?? []).filter((s) => s.kind === 'work').map((s) => ({ value: s.id, label: s.name }));
+      if (field === 'practitioner') return labels(raw?.practitioners);
+      const custom = fieldById(fieldIdOf(field));
+      if (custom?.type === 'person') return [{ value: 'me', label: 'Me' }, ...state.people.map((p) => ({ value: p.id, label: p.name }))];
+      return (custom?.options ?? []).map((o) => ({ value: o.id, label: o.archived ? `${o.name} (archived)` : o.name, color: o.color }));
+    },
     view: () => state.view,
     change: setView,
     first: 'client',
@@ -215,7 +239,15 @@ export async function renderInvoiceList(main, ui) {
       load();
     },
   });
-  const context = await flow('/api/invoicing/context').catch(() => ({ canIssue: false }));
+  // Custom fields are extra: the list still shows without them.
+  const [context, fields, values] = await Promise.all([
+    flow('/api/invoicing/context').catch(() => ({ canIssue: false })),
+    flow('/api/custom-fields').catch(() => null), flow('/api/custom-fields/values').catch(() => null),
+  ]);
+  state.fields = fields?.fields ?? [];
+  state.people = fields?.people ?? [];
+  const valueKey = (job, fieldId) => `${job.sourceSystem}\u0000${job.sourceJobRef}\u0000${fieldId}`;
+  state.values = new Map((values?.values ?? []).map((v) => [valueKey(v, v.fieldId), v.value]));
   let body = null;
   let raw = null;
   const openTab = (id) => { state.status = id; state.offset = 0; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
@@ -225,7 +257,7 @@ export async function renderInvoiceList(main, ui) {
   // action: tick rows (the head tick takes every row shown), then Send.
   const head = listHead('Invoices', {
     actions: [h('a', { class: 'fx-btn fx-btn--primary', href: '/invoices/new', onclick: go }, 'New invoice')],
-    views: views.element, start: tabs, end: [controls, find.element], line: true, sticky: true,
+    views: views.element, start: tabs, controls, controlsAt: 'end', end: find.element, line: true, sticky: true,
   });
   const [title, ...top] = head.nodes;
   const frame = listFrame(main, host);
@@ -247,17 +279,20 @@ export async function renderInvoiceList(main, ui) {
   }
 
   // A bulk step on the server: on success the ticks clear and the list loads
-  // again; on a failure the ticks stay, so a person can try again.
-  async function post(path, payload, done) {
+  // again (or `then(res)` names the tab the invoices went to, and it opens);
+  // on a failure the ticks stay, so a person can try again.
+  async function post(path, payload, done, then = () => null) {
     try {
       const res = await flow(`/api/invoicing/invoices/${path}`, { method: 'POST', body: JSON.stringify(payload) });
       toast(...done(res));
       state.ticked.clear();
       seen.clear();
-      await load();
+      const tab = then(res);
+      if (tab && tab !== state.status) openTab(tab);
+      else await load();
       alerts.refresh();
     } catch (error) {
-      toast(error.message, 'danger');
+      toast(error.message, 'danger', { stay: true });
     }
   }
 
@@ -273,15 +308,25 @@ export async function renderInvoiceList(main, ui) {
       status.push({
         icon: to ? 'send' : 'circle-check-big', label: to ? `Send to ${to}` : 'Approve', primary: true,
         title: to ? `Send to ${to}` : 'Approve',
-        run: async () => {
+        run: async (working) => {
           const ok = await ui.dialog({
             title: to ? `Send ${plural(ticked.length, 'invoice', 'invoices')} to ${to}?` : `Approve ${plural(ticked.length, 'invoice', 'invoices')}?`,
             body: h('p', {}, to ? sendModeNote(to, body.sendMode, 'each one') : 'Each one gets the next number and is locked.'),
             confirm: to ? `Send ${ticked.length}` : `Approve ${ticked.length}`,
           });
           if (!ok) return;
-          await post('send-ready', { issueDate: localDate(), invoiceIds: ticked },
-            (res) => [`${to ? `${res.issued} on the way to ${to}.` : `${res.issued} approved.`}${res.held ? ` ${res.held} failed a check and went to Pending.` : ''}${res.remaining ? ` ${res.remaining} more stay in Ready: tick them and press again.` : ''}`, res.held ? 'info' : 'success']);
+          working(to ? 'Sending' : 'Approving');
+          // The sent ones show on Draft as Sending until the accounting
+          // system has them; the approved ones on Approved.
+          await post('send-ready', { issueDate: localDate(), invoiceIds: ticked }, (res) => {
+            const sent = to ? `${res.issued} on the way to ${to}.` : `${res.issued} approved.`;
+            const notes = [
+              res.held ? `${res.held} failed a check and went to Pending.` : '',
+              res.waiting ? `${res.waiting} could not be confirmed with the work system yet: press Send again.` : '',
+              res.remaining ? `${res.remaining} more stay in Ready: tick them and press again.` : '',
+            ].filter(Boolean);
+            return [`${sent}${notes.length ? ` ${notes.join(' ')}` : ''}`, res.held || res.waiting ? 'info' : 'success'];
+          }, (res) => (res.issued ? (to ? 'draft' : 'approved') : null));
         },
       });
     }
@@ -289,7 +334,11 @@ export async function renderInvoiceList(main, ui) {
     if (state.status === 'pending' && context.canIssue && to && failed.length) {
       status.push({
         icon: 'refresh-cw', label: 'Retry', primary: true, title: `Send again to ${to}`,
-        run: () => post('send-again', { invoiceIds: failed }, (res) => [`${res.queued} on the way to ${to} again.`, 'success']),
+        run: (working) => {
+          working('Sending');
+          return post('send-again', { invoiceIds: failed }, (res) => [`${res.queued} on the way to ${to} again.`, 'success'],
+            (res) => (res.queued ? 'draft' : null));
+        },
       });
     }
     apply.push({
@@ -306,6 +355,15 @@ export async function renderInvoiceList(main, ui) {
         run: () => voidAll(voidable),
       });
     }
+    // A draft that was never issued is deleted, not voided. Pending and Ready
+    // hold those drafts; an issued invoice on Pending is retried, not deleted.
+    const deletable = rows.filter((i) => i.status === 'draft' && i.issuedVersion === 0);
+    if (['pending', 'ready'].includes(state.status) && context.canIssue && deletable.length) {
+      danger.push({
+        icon: 'trash-2', label: 'Delete', iconOnly: true, tone: 'danger', title: 'Delete',
+        run: () => deleteAll(deletable),
+      });
+    }
     const all = body.invoices.map((i) => i.id);
     const selection = [
       { icon: 'list-checks', label: 'Tick all shown', run: () => setTicks(all) },
@@ -381,6 +439,29 @@ export async function renderInvoiceList(main, ui) {
     alerts.refresh();
   }
 
+  // Delete, one never-issued draft after another, as on one invoice's page.
+  async function deleteAll(rows) {
+    const ok = await ui.dialog({
+      title: `Delete ${plural(rows.length, 'invoice', 'invoices')}?`,
+      body: h('p', {}, 'A draft that was never issued is removed. Its job can be invoiced again, and the rules decide.'),
+      confirm: `Delete ${rows.length}`, tone: 'danger',
+    });
+    if (!ok) return;
+    let done = 0;
+    let error = null;
+    for (const invoice of rows) {
+      try {
+        await flow(`/api/invoicing/invoices/${invoice.id}`, { method: 'DELETE' });
+        done += 1;
+      } catch (e) { error = e; }
+    }
+    toast(error ? `${done} of ${rows.length} deleted. ${error.message}` : `${plural(done, 'invoice', 'invoices')} deleted.`, error ? 'danger' : 'success');
+    state.ticked.clear();
+    seen.clear();
+    await load();
+    alerts.refresh();
+  }
+
   // A tab switch shows at once: the tab is selected, the last list seen for
   // it (if any) is drawn and dimmed, and the fresh list replaces it. Only the
   // newest request draws, so quick clicks never show an older tab's list.
@@ -390,7 +471,7 @@ export async function renderInvoiceList(main, ui) {
     const query = new URLSearchParams({
       status: state.status, offset: String(state.offset), limit: String(state.limit), today: today(),
       ...(state.q ? { q: state.q } : {}),
-      ...(filterCount(state.view, filterKind) ? { filter: JSON.stringify(state.view) } : {}),
+      ...(filterCount(state.view, kindOf) ? { filter: JSON.stringify(state.view) } : {}),
     });
     const key = String(query);
     const mine = ++asked;
@@ -417,6 +498,19 @@ export async function renderInvoiceList(main, ui) {
     host.removeAttribute('aria-busy');
     delete host.dataset.stale;
     draw(answer);
+    watchSending(answer);
+  }
+
+  // While a shown invoice is still Sending, the list reads again every 15
+  // seconds, so a person sees it reach the accounting system.
+  let sendingTimer = null;
+  function watchSending(answer) {
+    clearTimeout(sendingTimer);
+    if (!answer.invoices?.some((i) => i.sending)) return;
+    const key = state.status;
+    sendingTimer = setTimeout(() => {
+      if (host.isConnected && state.status === key && !state.ticked.size) { seen.clear(); load(); }
+    }, 15_000);
   }
 
   function drawTabs(counts) {
@@ -447,7 +541,7 @@ export async function renderInvoiceList(main, ui) {
     drawTabs(body.counts);
     drawBar();
     if (!body.invoices.length) {
-      host.replaceChildren(h('p', { class: 'fx-empty' }, filterCount(state.view, filterKind)
+      host.replaceChildren(h('p', { class: 'fx-empty' }, filterCount(state.view, kindOf)
         ? 'No invoice in this tab passes the filter.'
         : state.q
         ? 'No invoice matches that search.'
@@ -509,17 +603,28 @@ export async function renderInvoiceList(main, ui) {
     const href = (invoice) => `/invoices/${invoice.id}`;
     const ALL = {
       number: numbered ? { kind: 'number', cell: (i) => link(href(i), i.number ?? 'Draft') } : null,
-      client: { kind: 'client', cell: (i) => (numbered ? (i.contactName ?? '—') : link(href(i), i.contactName ?? 'No client')) },
+      client: { kind: 'client', phone: 'title', cell: (i) => (numbered ? (i.contactName ?? '—') : link(href(i), i.contactName ?? 'No client')) },
       reference: showProblem
         ? { label: 'Problem', kind: 'text', cell: problemCell }
         : { kind: 'text', className: 'fx-dim', cell: (i) => i.reference ?? '—' },
-      date: { label: created ? 'Created' : 'Date', kind: 'date', className: 'fx-dim', cell: (i) => showDate(i.issueDate ?? i.createdAt?.slice(0, 10)) },
+      date: { label: created ? 'Created' : 'Date', kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.issueDate ?? i.createdAt?.slice(0, 10)) },
+      due: { kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.dueDate) },
       total: { kind: 'total', num: true, className: 'fx-strong', cell: (i) => formatCents(i.totalCents) },
       status: { kind: 'status', className: 'fx-status-cell', cell: statusCell },
       linked: linked ? { kind: 'link', cell: linkCell } : null,
+      // The invoice's job (from the work system): its case, practitioner and
+      // the day it shipped.
+      case: { kind: 'case', className: 'fx-dim', cell: (i) => (i.job ? caseNumber(i.job) ?? '—' : '—') },
+      practitioner: { kind: 'text', className: 'fx-dim', cell: (i) => i.job?.practitioner ?? '—' },
+      shipped: { kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.job?.shippedOn ?? null) },
     };
+    // Each custom field is a column too: the value of the invoice's job.
+    for (const field of state.fields) {
+      const id = fieldGroup(field.id);
+      ALL[id] = fieldColumn(h, field, { id, valueOf: (i) => (i.job ? state.values.get(valueKey(i.job, field.id)) ?? null : null), people: state.people });
+    }
     available = Object.keys(ALL).filter((id) => ALL[id]);
-    const columns = state.columns.columns.filter((id) => ALL[id]).map((id) => ({ id, label: INVOICE_COLUMNS[id], ...ALL[id] }));
+    const columns = state.columns.columns.filter((id) => ALL[id]).map((id) => ({ id, label: labelOf(id), ...ALL[id] }));
     host.replaceChildren(heads.table({
       className: 'fx-table--rows',
       columns,
@@ -573,26 +678,37 @@ function saveNav(nav) {
 // The bar above one invoice: Back to the list as it was, and the previous and
 // next invoice of that list. An invoice opened from elsewhere (the job board,
 // search, a link) steps through its own tab, read once here.
-function navBar(ui, invoice) {
+function navBar(ui, invoice, title = 'Invoice') {
   const { h, go, flow } = ui;
   const id = invoice?.id ?? null;
   const back = () => { sessionStorage.setItem(NAV_BACK, '1'); go('/invoices'); };
-  const step = (to, label, path) => {
-    const button = h('button', {
-      class: 'fx-pager__step', type: 'button', disabled: !to, 'aria-label': label, title: label,
-      onclick: () => go(`/invoices/${to}`),
-    });
-    button.innerHTML = `<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="${path}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-    return button;
-  };
-  const bar = h('nav', { class: 'fx-pager', 'aria-label': 'Invoices' },
-    h('button', { class: 'fx-pager__back', type: 'button', onclick: back }, '← Back'));
+  const ends = { prev: null, next: null };
+  const goTo = (key) => { if (ends[key]) go(`/invoices/${ends[key]}`); };
+  const record = recordBar(h, {
+    title,
+    label: 'Invoices',
+    onBack: back,
+    prev: { label: 'Previous invoice', disabled: true, onclick: () => goTo('prev') },
+    next: { label: 'Next invoice', disabled: true, onclick: () => goTo('next') },
+  });
+  const { element: bar, draw } = pager(h, { label: 'Invoices', back });
   const fill = (ids) => {
     const at = ids.indexOf(id);
     if (at < 0) return false;
-    bar.replaceChildren(bar.firstChild,
-      h('span', { class: 'fx-pager__count' }, `${at + 1} of ${ids.length}`),
-      h('span', { class: 'fx-pager__steps' }, step(ids[at - 1], 'Previous invoice', 'M14.5 6l-6 6 6 6'), step(ids[at + 1], 'Next invoice', 'M9.5 6l6 6-6 6')));
+    ends.prev = ids[at - 1] ?? null;
+    ends.next = ids[at + 1] ?? null;
+    record.setSteps(
+      { label: 'Previous invoice', disabled: !ends.prev, onclick: () => goTo('prev') },
+      { label: 'Next invoice', disabled: !ends.next, onclick: () => goTo('next') },
+    );
+    const to = (other) => (other ? () => go(`/invoices/${other}`) : null);
+    draw({
+      count: `${at + 1} of ${ids.length}`,
+      prev: to(ends.prev),
+      next: to(ends.next),
+      prevLabel: 'Previous invoice',
+      nextLabel: 'Next invoice',
+    });
     return true;
   };
   const tab = invoice?.tab ?? null;
@@ -604,7 +720,60 @@ function navBar(ui, invoice) {
       try { sessionStorage.setItem('flow_invoice_tab', tab); } catch { /* Back opens the last tab */ }
     }).catch(() => { /* Back only */ });
   }
-  return bar;
+  return { pager: bar, record };
+}
+
+// A menu entry that presses a header button. Hidden and foot actions are skipped.
+function menuEntry(button, icon, skip) {
+  if (!button || button.hidden || skip.has(button)) return null;
+  return {
+    icon,
+    text: button.textContent.trim(),
+    tone: button.classList.contains('fx-btn--danger') ? 'danger' : undefined,
+    run: () => button.click(),
+  };
+}
+
+// The phone record: the shared bar, the primary action in the foot, and the
+// other actions in ⋯. Above a phone the header and the pager stay as they
+// are; the bar and the foot are hidden by CSS. The page's h1 moves into the
+// bar so the phone suite still finds the invoice title.
+function mountRecord(ui, invoice, header, primaryOf, menuOf) {
+  const { h } = ui;
+  const titleNode = header.querySelector('h1');
+  const nav = navBar(ui, invoice, titleNode.textContent);
+  const slot = nav.record.querySelector('.fx-record__title');
+  const foot = h('div', { class: 'fx-record__foot', hidden: true });
+  const items = [];
+  const [menuButton, menuPanel] = rowMenu('More', items, { className: 'fx-record__menu' });
+  nav.record.setMenu(menuButton);
+  const home = header.querySelector('.fx-ph__actions');
+  // The page header is the bar's title, so the phone suite still sees it.
+  // Above a phone it stays above the invoice, and the bar is hidden.
+  const placeHeader = () => {
+    const end = nav.record.querySelector('.fx-record__end');
+    if (!isPhone()) {
+      slot.hidden = false;
+      titleNode.removeAttribute('title');
+      if (header.parentElement === nav.record) nav.pager.after(header);
+      return;
+    }
+    slot.hidden = true;
+    titleNode.title = titleNode.textContent;
+    if (header.parentElement !== nav.record) nav.record.insertBefore(header, end);
+  };
+  const placeMenu = () => {
+    const skip = new Set([primaryOf()].filter(Boolean));
+    items.length = 0;
+    if (isPhone()) for (const entry of menuOf(skip)) if (entry) items.push(entry);
+    menuButton.hidden = items.length === 0;
+  };
+  const placePrimary = home ? watchPhonePrimary(home, foot, primaryOf) : () => {};
+  const sync = () => { placeHeader(); placeMenu(); placePrimary(); };
+  sync();
+  queueMicrotask(sync);
+  if (typeof matchMedia === 'function') matchMedia(WIDTHS.phone).addEventListener('change', sync);
+  return { pager: nav.pager, record: nav.record, foot, menuPanel, sync };
 }
 
 // After a send, an Approve or a Save that makes a Pending invoice Ready, the
@@ -910,7 +1079,11 @@ function draftView(invoice, ui, context, redraw) {
   }, 'Save');
   const opened = JSON.stringify(body());
   const changed = () => !isNew && JSON.stringify(body()) !== opened;
-  const watchChanges = () => { if (!keepsSave) saveButton.hidden = !changed(); };
+  let syncRecord = () => {};
+  const watchChanges = () => {
+    if (!keepsSave) saveButton.hidden = !changed();
+    syncRecord();
+  };
   // With an accounting system on, a ready invoice is sent there: Flow issues
   // it and queues it, the same as Send all ready. With none, Flow issues it
   // and keeps it. A Pending draft has no send: fix its problem first.
@@ -934,7 +1107,7 @@ function draftView(invoice, ui, context, redraw) {
         toast(`${fresh.number} is on the way to ${to}.`, 'success');
         openNext(ui, invoice.id);
       } catch (error) {
-        toast(error.message, 'danger');
+        toast(error.message, 'danger', { stay: true });
       }
     },
   }, emails ? `Send to ${to} and email` : `Send to ${to}`) : null;
@@ -981,6 +1154,30 @@ function draftView(invoice, ui, context, redraw) {
   // fine too.
   const fromJob = isNew && context.canIssue
     ? h('button', { class: 'fx-btn fx-btn--ghost', type: 'button', onclick: () => pickJob(ui) }, 'From a job') : null;
+  // A draft that was never issued is deleted. An issued invoice, including
+  // one opened for a revision, is voided instead.
+  const deleteButton = !isNew && context.canIssue && invoice.status === 'draft' && invoice.issuedVersion === 0
+    ? h('button', {
+      class: 'fx-btn fx-btn--ghost fx-btn--danger', type: 'button',
+      onclick: async () => {
+        const ok = await ui.dialog({
+          title: 'Delete this invoice?',
+          body: h('p', {}, invoice.job
+            ? 'It was never issued. The job can be invoiced again, and the rules decide.'
+            : 'It was never issued, so it is removed.'),
+          confirm: 'Delete', tone: 'danger',
+        });
+        if (!ok) return;
+        try {
+          await flow(`/api/invoicing/invoices/${invoice.id}`, { method: 'DELETE' });
+          toast('Invoice deleted.', 'success');
+          sessionStorage.setItem(NAV_BACK, '1');
+          go('/invoices');
+        } catch (error) {
+          toast(error.message, 'danger');
+        }
+      },
+    }, 'Delete') : null;
 
   // A draft with no problem is in Ready by itself; one with a problem is
   // Pending. A changed job is fixed at its source or accepted here.
@@ -1002,11 +1199,25 @@ function draftView(invoice, ui, context, redraw) {
     if (banner) boxes[name].setAttribute('aria-describedby', banner.id);
   }
 
+  const previewBtn = isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.');
+  const showAccept = Boolean(jobChange?.canAccept && context.canIssue);
+  const header = ui.pageHeader(isNew ? 'New invoice' : ready ? 'Ready invoice' : 'Pending invoice', {
+    actions: [fromJob, deleteButton, previewBtn, saveButton, sendButton ?? issueButton].filter(Boolean),
+  });
+  const primaryOf = () => (showAccept ? null : (sendButton ?? issueButton ?? (saveButton.hidden ? null : saveButton)));
+  const chrome = mountRecord(ui, invoice, header, primaryOf, (skip) => [
+    menuEntry(fromJob, 'briefcase', skip),
+    menuEntry(deleteButton, 'trash-2', skip),
+    menuEntry(previewBtn, 'eye', skip),
+    menuEntry(saveButton, 'check', skip),
+    menuEntry(sendButton, 'mail', skip),
+    menuEntry(issueButton, 'check', skip),
+  ]);
+  syncRecord = chrome.sync;
   return [
-    navBar(ui, invoice),
-    ui.pageHeader(isNew ? 'New invoice' : ready ? 'Ready invoice' : 'Pending invoice', {
-      actions: [fromJob, isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.'), saveButton, sendButton ?? issueButton].filter(Boolean),
-    }),
+    chrome.record,
+    chrome.pager,
+    header,
     draftNote(to, invoice) ? ui.notice(draftNote(to, invoice), 'warn') : null,
     ...problems,
     h('div', { class: 'fx-invoice__grid' },
@@ -1027,6 +1238,8 @@ function draftView(invoice, ui, context, redraw) {
             h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', onclick: () => { lines.push({ description: '', quantity: 1, unitAmountCents: null, taxCode: 'GST', priceItemId: null }); drawLines(); } }, '+ Add line'),
             totalsHost))),
       h('aside', { class: 'fx-invoice__aside' }, linkedCard(ui, invoice))),
+    chrome.foot,
+    chrome.menuPanel,
   ].map((part) => {
     // Any edit on the page shows Save changes; undoing it hides it again.
     for (const kind of ['input', 'change', 'click']) part?.addEventListener?.(kind, () => setTimeout(watchChanges));
@@ -1103,20 +1316,27 @@ function issuedView(invoice, ui, context, redraw) {
       h('p', {}, 'The number stays used. A void invoice cannot be used again.'),
       live ? h('p', { class: 'fx-problem' }, `Xero still holds it as ${xeroStatus.label.replace(/ in Xero$/, '').toLowerCase()}${xeroStatus.xero.number ? ` (${xeroStatus.xero.number})` : ''}. Flow does not change Xero: void it in Xero too.`) : null);
   };
-  const actions = invoice.status === 'issued' && context.canIssue ? [
-    h('button', {
-      class: 'fx-btn fx-btn--ghost fx-btn--danger', type: 'button',
-      onclick: () => act('void', `${invoice.number} is void.`, { title: `Void ${invoice.number}?`, body: voidBody(), confirm: 'Void', tone: 'danger' }),
-    }, 'Void'),
-    h('button', { class: 'fx-btn', type: 'button', onclick: () => act('revise', `${invoice.number} is a draft again.`) }, 'Revise'),
-  ] : [];
+  const voidButton = invoice.status === 'issued' && context.canIssue ? h('button', {
+    class: 'fx-btn fx-btn--ghost fx-btn--danger', type: 'button',
+    onclick: () => act('void', `${invoice.number} is void.`, { title: `Void ${invoice.number}?`, body: voidBody(), confirm: 'Void', tone: 'danger' }),
+  }, 'Void') : null;
+  const reviseButton = invoice.status === 'issued' && context.canIssue
+    ? h('button', { class: 'fx-btn', type: 'button', onclick: () => act('revise', `${invoice.number} is a draft again.`) }, 'Revise') : null;
+  const preview = previewButton(ui, invoice.id);
+  const header = h('header', { class: 'fx-ph' },
+    h('div', { class: 'fx-ph__text' },
+      h('h1', { class: 'fx-title' }, invoice.number),
+      h('span', { class: 'fx-status', 'data-tone': TAB_TONE[invoice.tab] }, TAB_LABEL[invoice.tab] ?? 'Approved')),
+    h('div', { class: 'fx-ph__actions' }, [voidButton, reviseButton, preview, send].filter(Boolean)));
+  const chrome = mountRecord(ui, invoice, header, () => send, (skip) => [
+    menuEntry(voidButton, 'ban', skip),
+    menuEntry(reviseButton, 'pencil', skip),
+    menuEntry(preview, 'eye', skip),
+  ]);
   return [
-    navBar(ui, invoice),
-    h('header', { class: 'fx-ph' },
-      h('div', { class: 'fx-ph__text' },
-        h('h1', { class: 'fx-title' }, invoice.number),
-        h('span', { class: 'fx-status', 'data-tone': TAB_TONE[invoice.tab] }, TAB_LABEL[invoice.tab] ?? 'Approved')),
-      h('div', { class: 'fx-ph__actions' }, actions, previewButton(ui, invoice.id), send)),
+    chrome.record,
+    chrome.pager,
+    header,
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-doc' },
@@ -1142,6 +1362,8 @@ function issuedView(invoice, ui, context, redraw) {
           h('ol', { class: 'fx-timeline' }, invoice.versions.map((v) => h('li', {},
             h('span', { class: 'fx-strong' }, v.version === 1 ? 'Version 1' : `Revised (version ${v.version})`),
             h('span', { class: 'fx-dim' }, new Date(v.issuedAt).toLocaleString('en-AU', { dateStyle: 'medium', timeStyle: 'short' })))))) : null)),
+    chrome.foot,
+    chrome.menuPanel,
   ];
 }
 

package/server/ui/job-board.js

@@ -192,3 +192,13 @@ export function matches(job, q) {
   return [job.caseRef, job.sourceJobRef, job.clientName, job.workClientName, job.practitioner, job.obligation?.invoiceNumber]
     .some((value) => value && String(value).toLowerCase().includes(needle));
 }
+
+// How long a press on a phone card is held before Move to opens.
+export const PHONE_HOLD_MS = 500;
+
+// The lane showing when one lane fills the phone and the board snaps.
+// A lane just past halfway counts as the next. `count` is how many lanes.
+export function phoneLaneIndex(scrollLeft, laneWidth, count) {
+  if (!(laneWidth > 0) || !(count > 0)) return 0;
+  return Math.max(0, Math.min(count - 1, Math.round(scrollLeft / laneWidth)));
+}

package/server/ui/job-change.js

@@ -5,6 +5,7 @@
 // and a recheck button that reads the job from the work system again. Flow
 // never writes to the work system. Kept apart from
 // invoicing.js so tests can load it without a browser.
+import { applyPhoneRule } from './mobile.js';
 
 // Rows shown before "Show all".
 export const FIRST_ROWS = 5;
@@ -55,7 +56,7 @@ export function jobChangeBanner(ui, change, { money, onAccept = null, onRecheck
     }, `Open in ${system} ↗`)
     : null;
   const accept = change.canAccept && onAccept
-    ? h('button', { class: 'fx-btn fx-btn--sm fx-btn--primary', type: 'button', title: `This invoice takes the Now in ${system} column.`, onclick: onAccept }, 'Accept change')
+    ? h('button', { class: 'fx-btn fx-btn--sm fx-btn--primary', type: 'button', 'data-action': 'accept', title: `This invoice takes the Now in ${system} column.`, onclick: onAccept }, 'Accept change')
     : null;
   const recheck = onRecheck
     ? h('button', {
@@ -77,7 +78,7 @@ export function jobChangeBanner(ui, change, { money, onAccept = null, onRecheck
   const more = rows.length > FIRST_ROWS
     ? h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', onclick: (event) => { draw(true); event.currentTarget.remove(); } }, `Show all ${rows.length}`)
     : null;
-  return h('section', { class: 'fx-change', role: 'alert' },
+  return applyPhoneRule(h('section', { class: 'fx-change', role: 'alert' },
     h('div', { class: 'fx-change__head' },
       h('p', {}, h('strong', {}, 'Problem.'), ' ', changeSummary(change, rows.filter((row) => row.field !== 'Total').length)),
       h('div', { class: 'fx-change__acts' }, link, accept, recheck)),
@@ -85,7 +86,7 @@ export function jobChangeBanner(ui, change, { money, onAccept = null, onRecheck
     rows.length ? h('div', { class: 'fx-change__scroll' }, h('table', { class: 'fx-change__table' },
       h('thead', {}, h('tr', {}, h('th', { scope: 'col' }, 'Field'), h('th', { scope: 'col' }, 'Was'), h('th', { scope: 'col' }, `Now in ${system}`))),
       body)) : null,
-    more);
+    more), 'jobChangeBanner');
 }
 
 // The banner with Accept change and the recheck wired, for the invoice page