@arcforgelabs/flow 2026.10.46 → 2026.10.48-1

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 { 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, filterCount, filterJobs, INVOICE_COLUMNS, invoiceColumnsView } 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 { 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() {
@@ -194,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',
@@ -230,6 +250,9 @@ export async function renderInvoiceList(main, ui) {
   state.values = new Map((values?.values ?? []).map((v) => [valueKey(v, v.fieldId), v.value]));
   let body = null;
   let raw = null;
+  // Xero's status from Flow's copy, filled after the list draws. Delete on
+  // an issued invoice waits for this: it shows only while the copy says Draft.
+  let xeroById = new Map();
   const openTab = (id) => { state.status = id; state.offset = 0; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
   const alerts = alertStrip(ui, 'invoices', { onTab: openTab });
   // The tabs and search stay at the top while the rows scroll up under them;
@@ -259,17 +282,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 });
     }
   }
 
@@ -285,15 +311,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));
         },
       });
     }
@@ -301,7 +337,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({
@@ -318,6 +358,21 @@ export async function renderInvoiceList(main, ui) {
         run: () => voidAll(voidable),
       });
     }
+    // A draft that was never issued is deleted on Pending and Ready. An issued
+    // invoice is deleted only while Flow's copy of Xero says Draft. Approved
+    // or paid stays hidden. A mix runs every ticked row and reports each one.
+    const fresh = rows.filter((i) => i.status === 'draft' && i.issuedVersion === 0);
+    const issuedXero = rows.filter((i) => i.status === 'issued' && xeroById.has(i.id));
+    const xeroDraft = issuedXero.filter((i) => xeroById.get(i.id)?.state === 'draft');
+    const xeroApproved = issuedXero.filter((i) => ['approved', 'part_paid', 'paid'].includes(xeroById.get(i.id)?.state));
+    const deletable = [...fresh, ...xeroDraft, ...xeroApproved];
+    const onDraftTabs = ['pending', 'ready'].includes(state.status) && fresh.length;
+    if (context.canIssue && (onDraftTabs || xeroDraft.length)) {
+      danger.push({
+        icon: 'trash-2', label: 'Delete', iconOnly: true, tone: 'danger', title: 'Delete',
+        run: () => deleteAll(deletable, { xero: xeroDraft.length + xeroApproved.length > 0 }),
+      });
+    }
     const all = body.invoices.map((i) => i.id);
     const selection = [
       { icon: 'list-checks', label: 'Tick all shown', run: () => setTicks(all) },
@@ -393,6 +448,52 @@ export async function renderInvoiceList(main, ui) {
     alerts.refresh();
   }
 
+  // Delete, one invoice after another, as on one invoice's page. A Xero
+  // draft reports each row: deleted, or refused with the reason.
+  async function deleteAll(rows, { xero = false } = {}) {
+    const fresh = rows.some((i) => i.status === 'draft' && i.issuedVersion === 0);
+    const ok = await ui.dialog({
+      title: `Delete ${plural(rows.length, 'invoice', 'invoices')}?`,
+      body: xero
+        ? h('div', {},
+          fresh ? h('p', {}, 'A draft that was never issued is removed. Its job can be invoiced again, and the rules decide.') : null,
+          h('p', {}, 'Also deletes the draft in Xero.'))
+        : 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;
+    if (xero) {
+      const results = [];
+      for (const invoice of rows) {
+        const name = invoice.number ?? 'Draft';
+        try {
+          await flow(`/api/invoicing/invoices/${invoice.id}`, { method: 'DELETE' });
+          results.push(`${name} deleted.`);
+        } catch (error) {
+          results.push(`${name} refused: ${error.message}`);
+        }
+      }
+      const refused = results.some((line) => line.includes(' refused: '));
+      // The result stays until it is closed. A success is one short line, and
+      // a refusal names each invoice, so neither should vanish on its own.
+      toast(results.join(' '), refused ? 'danger' : 'success', { stay: true });
+    } else {
+      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', { stay: true });
+    }
+    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.
@@ -402,7 +503,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;
@@ -429,6 +530,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) {
@@ -445,6 +559,7 @@ export async function renderInvoiceList(main, ui) {
     raw = answer;
     filterMenu.draw();
     body = answer;
+    xeroById = new Map();
     // A page past the end (rows went to another tab): show the last one.
     if (!answer.invoices.length && answer.total && answer.offset) {
       state.offset = Math.max(0, Math.floor((answer.total - 1) / state.limit) * state.limit);
@@ -459,7 +574,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.'
@@ -521,7 +636,7 @@ 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 ?? '—' },
@@ -552,16 +667,22 @@ export async function renderInvoiceList(main, ui) {
         rowCells(h, columns, invoice),
         h('td', { class: 'fx-c-end' })))),
     }));
-    // Issued and void invoices also show Xero's status, from Flow's copy:
-    // in the Linked column every one gets an icon, so one not in Xero
-    // stands out.
-    if (numbered) {
+    // Issued invoices carry Xero's status on every tab, so Delete can follow
+    // Flow's copy. A draft that is out of sync sits on Pending, which has no
+    // number column, and is still a draft there. Icons stay on the numbered
+    // tabs, where one invoice not in Xero stands out.
+    const issuedIds = body.invoices.filter((i) => i.issuedVersion > 0).map((i) => i.id);
+    if (numbered || issuedIds.length) {
       const shownBody = body;
-      const statuses = await xeroStatuses(ui, context.organisations?.[0]?.id, body.invoices.map((i) => i.id));
+      const statuses = await xeroStatuses(ui, context.organisations?.[0]?.id, numbered ? body.invoices.map((i) => i.id) : issuedIds);
       if (shownBody !== body) return;
-      for (const [invoiceId, status] of statuses) {
-        if (linked) { if (accountingSystem) statusCells.get(invoiceId)?.append(accountingIcon(ui, accountingSystem, status)); }
-        else if (status.state !== 'not_sent' || status.finding) statusCells.get(invoiceId)?.append(' ', xeroTag(ui, status));
+      xeroById = statuses;
+      if (state.ticked.size) drawBar();
+      if (numbered) {
+        for (const [invoiceId, status] of statuses) {
+          if (linked) { if (accountingSystem) statusCells.get(invoiceId)?.append(accountingIcon(ui, accountingSystem, status)); }
+          else if (status.state !== 'not_sent' || status.finding) statusCells.get(invoiceId)?.append(' ', xeroTag(ui, status));
+        }
       }
     }
   }
@@ -596,26 +717,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;
@@ -627,7 +759,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
@@ -933,7 +1118,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.
@@ -957,7 +1146,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;
@@ -1004,6 +1193,11 @@ 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, unless its Xero copy is a
+  // draft: that Delete is added on the issued page after the copy loads.
+  const deleteButton = !isNew && context.canIssue && invoice.status === 'draft' && invoice.issuedVersion === 0
+    ? deleteControl(ui, invoice, { xeroDraft: false }) : 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.
@@ -1011,13 +1205,44 @@ function draftView(invoice, ui, context, redraw) {
   // The job changed after the invoice was made: its own banner shows what
   // changed. Other problems stay one line.
   const otherProblems = (invoice?.problems ?? []).filter((p) => !(jobChange && p.code === 'job_review'));
+  const offer = otherProblems.find((p) => p.code === 'xero_contact_missing' && p.offerCreate);
+  const problemNotice = otherProblems.length
+    ? notice([...new Set(otherProblems.map((p) => brief(p.message)))].join(' '), 'danger', 'Problem.')
+    : null;
+  const organisationId = context.organisations[0]?.id;
+  const createClient = offer && context.canIssue && invoice?.contact?.id && organisationId
+    ? h('button', {
+      class: 'fx-btn fx-btn--primary', type: 'button', title: 'Create this client in Xero',
+      onclick: async (event) => {
+        const button = event.currentTarget;
+        const name = invoice.contact.name;
+        const confirmed = await ui.dialog({
+          title: `Create ${name} in Xero?`,
+          body: h('p', {}, 'Flow adds this client to Xero from the contact.'),
+          confirm: 'Create',
+        });
+        if (!confirmed) return;
+        button.disabled = true;
+        try {
+          await flow('/api/xero/contacts', { method: 'POST', body: JSON.stringify({ organisationId, contactId: invoice.contact.id }) });
+          toast(`${name} is in Xero.`, 'success');
+          const body = await flow(`/api/invoicing/invoices/${invoice.id}`);
+          redraw(body.invoice);
+        } catch (error) {
+          toast(error.message, error.status === 429 ? 'info' : 'danger');
+          if (error.retryAfterMs) ui.holdButton(button, error.retryAfterMs);
+          else button.disabled = false;
+        }
+      },
+    }, 'Create')
+    : null;
   const problems = [
     // Accepting changes the draft for the business: owners and admins only.
     jobChange ? jobChangeReview(ui, jobChange, { money: formatCents, canAccept: context.canIssue, unsaved: changed, done: redraw }) : null,
-    otherProblems.length ? notice([...new Set(otherProblems.map((p) => brief(p.message)))].join(' '), 'danger', 'Problem.') : null,
+    problemNotice ? (createClient ? h('div', { class: 'fx-offer' }, problemNotice, createClient) : problemNotice) : null,
   ];
   // A red field names the banner as its reason (for a screen reader).
-  const banner = problems[1];
+  const banner = problemNotice;
   if (banner) banner.id = 'fx-invoice-problem';
   for (const name of failed) {
     if (!boxes[name]) continue;
@@ -1025,11 +1250,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' },
@@ -1050,6 +1289,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));
@@ -1090,6 +1331,35 @@ function previewButton(ui, invoiceId, title = 'Shows the invoice as a PDF.') {
   }, 'Preview');
 }
 
+// Delete asks first. A Xero draft says so; a never-issued draft says the job
+// can be invoiced again. Then the list opens.
+function deleteControl(ui, invoice, { xeroDraft }) {
+  const { h, flow, toast, go } = ui;
+  return h('button', {
+    class: 'fx-btn fx-btn--ghost fx-btn--danger', type: 'button', 'data-delete': '',
+    onclick: async () => {
+      const ok = await ui.dialog({
+        title: 'Delete this invoice?',
+        body: h('p', {}, xeroDraft
+          ? 'Also deletes the draft in Xero.'
+          : 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', { stay: true });
+        sessionStorage.setItem(NAV_BACK, '1');
+        go('/invoices');
+      } catch (error) {
+        toast(error.message, 'danger', { stay: true });
+      }
+    },
+  }, 'Delete');
+}
+
 // An issued or void invoice: the document as sent, and what can happen next.
 function issuedView(invoice, ui, context, redraw) {
   const { h, flow, toast } = ui;
@@ -1111,14 +1381,28 @@ function issuedView(invoice, ui, context, redraw) {
   const linkedHost = h('div', {}, linkedCard(ui, invoice) ?? '');
   let xeroStatus = null;
   const send = invoice.status === 'issued' && context.canIssue ? sendToXero(invoice, ui, context) : null;
+  let actionBar = null;
+  let deleteButton = null;
+  let recordSync = () => {};
   const loadXero = async () => {
     if (!context.xero) return;
     xeroStatus = (await xeroStatuses(ui, organisationId, [invoice.id])).get(invoice.id) ?? null;
     xeroHost.replaceChildren(xeroCard(invoice, ui, context, xeroStatus, loadXero) ?? '');
     linkedHost.replaceChildren(linkedCard(ui, invoice, xeroStatus) ?? '');
     if (xeroStatus && xeroStatus.state !== 'not_sent') showSent(send);
+    // Delete only while Flow's copy says Draft. Approved and paid stay on Void.
+    const canDelete = invoice.status === 'issued' && context.canIssue && xeroStatus?.state === 'draft';
+    const remove = actionBar?.querySelector('[data-delete]');
+    if (canDelete && !remove && actionBar) {
+      deleteButton = deleteControl(ui, invoice, { xeroDraft: true });
+      actionBar.prepend(deleteButton);
+    }
+    if (!canDelete && remove) {
+      remove.remove();
+      deleteButton = null;
+    }
+    recordSync();
   };
-  loadXero();
   // Voiding in Flow never changes Xero: say so while Xero still holds it live.
   const voidBody = () => {
     const live = xeroStatus?.xero && !['VOIDED', 'DELETED'].includes(xeroStatus.xero.status);
@@ -1126,20 +1410,40 @@ 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);
+  actionBar = h('div', { class: 'fx-ph__actions' }, [voidButton, reviseButton, preview, send].filter(Boolean));
+  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')),
+    actionBar);
+  const chrome = mountRecord(ui, invoice, header, () => send, (skip) => [
+    menuEntry(deleteButton, 'trash-2', skip),
+    menuEntry(voidButton, 'ban', skip),
+    menuEntry(reviseButton, 'pencil', skip),
+    menuEntry(preview, 'eye', skip),
+  ]);
+  recordSync = chrome.sync;
+  loadXero();
+  const history = [
+    ...(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' })))),
+    // Void, including a delete that removed the Xero draft, sits on the same list.
+    ...(invoice.status === 'void' ? [h('li', {},
+      h('span', { class: 'fx-strong' }, 'Void'),
+      h('span', { class: 'fx-dim' }, new Date(invoice.updatedAt).toLocaleString('en-AU', { dateStyle: 'medium', timeStyle: 'short' })))] : []),
+  ];
   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' },
@@ -1160,11 +1464,11 @@ function issuedView(invoice, ui, context, redraw) {
       h('aside', { class: 'fx-invoice__aside' },
         linkedHost,
         xeroHost,
-        invoice.versions?.length ? h('section', { class: 'fx-card fx-side-card' },
+        history.length ? h('section', { class: 'fx-card fx-side-card' },
           h('h3', { class: 'fx-label' }, 'History'),
-          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)),
+          h('ol', { class: 'fx-timeline' }, history)) : null)),
+    chrome.foot,
+    chrome.menuPanel,
   ];
 }