@arcforgelabs/flow 2026.10.30 → 2026.10.32

package/server/ui/invoicing.js

@@ -5,14 +5,17 @@
 // are a preview with the same rule (GST 10% per line, rounded half away from
 // zero, server/core/money.js). Data comes from /api/invoicing
 // (server/api/invoicing.js). app.js passes in its shared pieces as `ui`.
+import { alertStrip } from '/assets/ui/alerts.js';
+import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
 
 const STATUS_LABEL = { draft: 'Draft', issued: 'Issued', void: 'Void' };
 const STATUS_TONE = { draft: 'info', issued: 'success', void: 'mute' };
 // Drafts (to check), Problem and Ready are views (server/core/sending.js):
-// every draft is in one of them. A person marks a checked draft ready; any
-// later change sends it back. An issued invoice that failed to send is a
+// every draft is in one of them. A person marks a checked draft ready; a
+// saved change keeps it there. An issued invoice that failed to send is a
 // problem.
-const TABS = [['to_check', 'Drafts'], ['problem', 'Problem'], ['ready', 'Ready'], ['issued', 'Issued'], ['void', 'Void']];
+// Ready first: it opens by default, as the drafts most often wait there to send.
+const TABS = [['ready', 'Ready'], ['to_check', 'Drafts'], ['problem', 'Problem'], ['issued', 'Issued'], ['void', 'Void']];
 const VIEW_LABEL = { problem: 'Problem', ready: 'Ready', sending: 'Sending', to_check: 'Draft' };
 const VIEW_TONE = { problem: 'danger', ready: 'success', sending: 'info', to_check: 'info' };
 const EMPTY = {
@@ -26,6 +29,31 @@ const TICKS = { to_check: true, ready: true };
 const money = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' });
 export const formatCents = (cents) => money.format((cents ?? 0) / 100);
 
+// Xero's status of an issued invoice, from Flow's copy of Xero (issue #132).
+// A finding (a difference, or a void on one side only) shows as Out of sync.
+const XERO_TONE = {
+  not_sent: 'mute', sending: 'info', not_copied: 'info', draft: 'info',
+  approved: 'success', part_paid: 'success', paid: 'success', voided: 'mute', deleted: 'mute',
+};
+const FIELD_LABEL = { contact: 'Client', subtotal: 'Subtotal', tax: 'GST', total: 'Total', 'line count': 'Lines', items: 'Items', date: 'Date' };
+
+export function xeroTag(ui, status) {
+  const { h } = ui;
+  if (!status) return null;
+  return status.finding
+    ? h('span', { class: 'fx-status', 'data-tone': 'danger', title: status.message }, 'Out of sync with Xero')
+    : h('span', { class: 'fx-status', 'data-tone': XERO_TONE[status.state] ?? 'mute' }, status.label);
+}
+
+const showField = (field, value) => (['subtotal', 'tax', 'total'].includes(field) && Number.isFinite(value) ? formatCents(value) : String(value ?? '—'));
+
+// Xero's status for some invoices, or an empty map while Xero is off.
+async function xeroStatuses(ui, organisationId, invoiceIds) {
+  if (!organisationId || !invoiceIds.length) return new Map();
+  const res = await ui.flow('/api/xero/invoices/status', { method: 'POST', body: JSON.stringify({ organisationId, invoiceIds }) }).catch(() => null);
+  return new Map((res?.invoices ?? []).map((s) => [s.invoiceId, s]));
+}
+
 function gstCents(lineAmountCents) {
   const sign = Math.sign(lineAmountCents);
   const abs = Math.abs(lineAmountCents) * 1000;
@@ -53,17 +81,24 @@ const showDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString(
 export async function renderInvoiceList(main, ui) {
   const { h, flow, pageHeader, notice, go, toast } = ui;
   const saved = sessionStorage.getItem('flow_invoice_tab');
-  const state = { status: TABS.some(([id]) => id === saved) ? saved : 'to_check', q: '', ticked: new Set() };
+  // Back from an invoice comes here with the tab, search and scroll it left.
+  const back = readNav();
+  const returning = sessionStorage.getItem(NAV_BACK) === '1';
+  sessionStorage.removeItem(NAV_BACK);
+  const state = { status: TABS.some(([id]) => id === saved) ? saved : 'ready', q: returning ? back?.q ?? '' : '', ticked: new Set() };
   const tabs = h('div', { class: 'fx-tabs', role: 'tablist' });
-  const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a number, client or reference', 'aria-label': 'Find an invoice' });
+  const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a number, client or reference', 'aria-label': 'Find an invoice', value: state.q });
   const bar = h('div', { class: 'fx-sendbar', hidden: true });
   const host = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
   const context = await flow('/api/invoicing/context').catch(() => ({ canIssue: false }));
   let body = null;
+  const openTab = (id) => { state.status = id; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
+  const alerts = alertStrip(ui, 'invoices', { onTab: openTab });
   main.append(
     pageHeader('Invoices', {
       actions: [h('a', { class: 'fx-btn fx-btn--primary', href: '/invoices/new', onclick: go }, 'New invoice')],
     }),
+    alerts.element,
     h('div', { class: 'fx-toolbar' }, tabs, search),
     bar,
     host);
@@ -85,6 +120,7 @@ export async function renderInvoiceList(main, ui) {
           toast(...done(res));
           state.ticked.clear();
           await load();
+          alerts.refresh();
         } catch (error) {
           toast(error.message, 'danger');
           el.disabled = false;
@@ -107,10 +143,10 @@ export async function renderInvoiceList(main, ui) {
           : [`${plural(res.marked, 'draft', 'drafts')} ready.`, 'success'])));
       }
     } else if (state.status === 'ready') {
-      parts.push(h('p', { class: 'fx-dim' }, to ? `Each invoice is issued, then goes to ${to}.` : 'Each invoice is issued. No accounting system is on.'));
+      parts.push(h('p', { class: 'fx-dim' }, sendModeNote(to, body.sendMode)));
       const buttons = [];
       if (ticked.length) {
-        buttons.push(action(`Back to drafts (${ticked.length})`, 'mark-not-ready', () => ({ invoiceIds: ticked }),
+        buttons.push(action(`Move ${ticked.length} to Drafts`, 'mark-not-ready', () => ({ invoiceIds: ticked }),
           (res) => [`${plural(res.moved, 'invoice', 'invoices')} back in Drafts.`, 'success'], 'ghost'));
       }
       if (context.canIssue && body.counts.ready > 0) {
@@ -144,7 +180,7 @@ export async function renderInvoiceList(main, ui) {
       role: 'tab',
       'aria-selected': String(state.status === id),
       ...(id === 'problem' && body.counts?.problem ? { 'data-tone': 'danger' } : {}),
-      onclick: () => { state.status = id; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); },
+      onclick: () => openTab(id),
     }, label, h('span', { class: 'fx-tabs__count' }, String(body.counts?.[id] ?? 0)))));
     drawBar();
     if (!body.invoices.length) {
@@ -153,6 +189,9 @@ export async function renderInvoiceList(main, ui) {
         : EMPTY[state.status] ?? `No ${STATUS_LABEL[state.status].toLowerCase()} invoices yet.`));
       return;
     }
+    // The invoice page steps through this list, in this order (navBar).
+    saveNav({ tab: state.status, q: state.q, ids: body.invoices.map((i) => i.id) });
+    const open = (href) => { saveNav({ ...readNav(), scrollY: window.scrollY }); go(href); };
     const ticks = TICKS[state.status];
     const showProblem = state.status === 'problem';
     const created = ['to_check', 'problem', 'ready'].includes(state.status);
@@ -175,6 +214,7 @@ export async function renderInvoiceList(main, ui) {
         drawBar();
       },
     });
+    const statusCells = new Map();
     host.replaceChildren(h('table', { class: 'fx-table fx-table--rows' },
       h('thead', {}, h('tr', {},
         ticks ? h('th', { class: 'fx-tick-cell' }, all) : null,
@@ -184,21 +224,79 @@ export async function renderInvoiceList(main, ui) {
         const href = `/invoices/${invoice.id}`;
         const first = invoice.problems?.[0];
         const view = invoice.status === 'void' ? null : invoice.view;
-        return h('tr', { tabindex: '0', onclick: () => go(href), onkeydown: (event) => { if (event.key === 'Enter') go(href); } },
+        return h('tr', { tabindex: '0', onclick: () => open(href), onkeydown: (event) => { if (event.key === 'Enter') open(href); } },
           ticks ? h('td', { class: 'fx-tick-cell', onclick: (event) => event.stopPropagation() }, tickBox(invoice)) : null,
-          h('td', {}, h('a', { class: 'fx-strong', href, onclick: go }, invoice.number ?? 'Draft')),
+          h('td', {}, h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, invoice.number ?? 'Draft')),
           h('td', {}, invoice.contactName ?? '—'),
           showProblem
             ? h('td', { class: 'fx-problem' }, first?.message ?? '—', invoice.problems.length > 1 ? h('span', { class: 'fx-dim' }, ` +${invoice.problems.length - 1} more`) : null)
-            : h('td', { class: 'fx-dim' }, invoice.job?.caseRef ?? invoice.reference ?? '—'),
+            : h('td', { class: 'fx-dim' }, invoice.reference ?? '—'),
           h('td', { class: 'fx-dim' }, showDate(invoice.issueDate ?? invoice.createdAt?.slice(0, 10))),
           h('td', { class: 'fx-num fx-strong' }, formatCents(invoice.totalCents)),
-          h('td', {}, view
-            ? h('span', { class: 'fx-status', 'data-tone': VIEW_TONE[view] }, VIEW_LABEL[view])
-            : h('span', { class: 'fx-status', 'data-tone': STATUS_TONE[invoice.status] }, STATUS_LABEL[invoice.status])));
+          (() => {
+            const cell = h('td', { class: 'fx-status-cell' }, view
+              ? h('span', { class: 'fx-status', 'data-tone': VIEW_TONE[view] }, VIEW_LABEL[view])
+              : h('span', { class: 'fx-status', 'data-tone': STATUS_TONE[invoice.status] }, STATUS_LABEL[invoice.status]));
+            statusCells.set(invoice.id, cell);
+            return cell;
+          })());
       }))));
+    // Issued and void invoices also show Xero's status, from Flow's copy.
+    if (['issued', 'void'].includes(state.status)) {
+      const shownBody = body;
+      const statuses = await xeroStatuses(ui, context.organisations?.[0]?.id, body.invoices.map((i) => i.id));
+      if (shownBody !== body) return;
+      for (const [invoiceId, status] of statuses) {
+        if (status.state !== 'not_sent' || status.finding) statusCells.get(invoiceId)?.append(' ', xeroTag(ui, status));
+      }
+    }
   }
   await load();
+  if (returning && back?.scrollY) window.scrollTo(0, back.scrollY);
+}
+
+// The list an invoice was opened from: its tab, search, invoice ids in order,
+// and scroll. The invoice page's bar steps through it and goes back to it.
+const NAV = 'flow_invoice_nav';
+const NAV_BACK = 'flow_invoice_back';
+function readNav() {
+  try { return JSON.parse(sessionStorage.getItem(NAV) ?? 'null'); } catch { return null; }
+}
+function saveNav(nav) {
+  try { sessionStorage.setItem(NAV, JSON.stringify(nav)); } catch { /* the bar then shows Back only */ }
+}
+
+// The bar above one invoice: Back to the list as it was, and the previous and
+// next invoice of that list.
+function navBar(ui, id) {
+  const { h, go } = ui;
+  const nav = readNav();
+  const ids = nav?.ids ?? [];
+  const at = ids.indexOf(id);
+  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;
+  };
+  return h('nav', { class: 'fx-pager', 'aria-label': 'Invoices' },
+    h('button', { class: 'fx-pager__back', type: 'button', onclick: back }, '← Back'),
+    at >= 0 ? h('span', { class: 'fx-pager__count' }, `${at + 1} of ${ids.length}`) : null,
+    at >= 0 ? 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')) : null);
+}
+
+// After a send, the next invoice of the list opens; at its end, the list.
+function openNext(ui, id) {
+  const nav = readNav();
+  const ids = nav?.ids ?? [];
+  const at = ids.indexOf(id);
+  const next = at >= 0 ? (ids[at + 1] ?? ids[at - 1]) : null;
+  if (at >= 0) saveNav({ ...nav, ids: ids.filter((other) => other !== id) });
+  if (next) ui.go(`/invoices/${next}`);
+  else { sessionStorage.setItem(NAV_BACK, '1'); ui.go('/invoices'); }
 }
 
 // ── One invoice ────────────────────────────────────────────────────────────
@@ -225,17 +323,11 @@ export async function renderInvoice(main, ui, id) {
   const draw = (current) => {
     host.replaceChildren(...(current?.status && current.status !== 'draft'
       ? issuedView(current, ui, context, draw)
-      : draftView(current, ui, context, draw)));
+      : draftView(current, ui, context, draw)).filter(Boolean));
   };
   draw(invoice);
 }
 
-function crumbs(ui, label) {
-  const { h, go } = ui;
-  return h('nav', { class: 'fx-crumbs', 'aria-label': 'Breadcrumb' },
-    h('a', { href: '/invoices', onclick: go }, 'Invoices'), h('span', { 'aria-hidden': 'true' }, '/'), h('span', {}, label));
-}
-
 function totalsBox(ui, { subtotalCents, taxCents, totalCents }) {
   const { h } = ui;
   return h('dl', { class: 'fx-totals' },
@@ -244,13 +336,13 @@ function totalsBox(ui, { subtotalCents, taxCents, totalCents }) {
     h('dt', { class: 'fx-totals__grand' }, 'Total'), h('dd', { class: 'fx-totals__grand' }, formatCents(totalCents)));
 }
 
+// The job an invoice bills. The case id stays on the record, not on screen.
 function jobCard(ui, job) {
   const { h } = ui;
   if (!job) return null;
   return h('section', { class: 'fx-card fx-side-card' },
     h('h3', { class: 'fx-label' }, 'Job'),
     h('dl', { class: 'fx-facts' },
-      h('dt', {}, 'Case'), h('dd', {}, job.caseRef ?? job.sourceJobRef),
       job.practitioner ? [h('dt', {}, 'Practitioner'), h('dd', {}, job.practitioner)] : null,
       job.shippedOn ? [h('dt', {}, 'Shipped'), h('dd', {}, showDate(job.shippedOn))] : null,
       h('dt', {}, 'From'), h('dd', {}, job.sourceSystem === 'seazona' ? 'Seazona' : job.sourceSystem)));
@@ -411,24 +503,56 @@ function draftView(invoice, ui, context, redraw) {
     }
   };
 
+  // Save shows only when there is something to save: a new invoice, or a
+  // change since the page opened. Saving keeps the invoice where it is.
   const saveButton = h('button', {
-    class: 'fx-btn', type: 'button',
+    class: 'fx-btn', type: 'button', hidden: !isNew,
     onclick: async () => {
       const saved = await save();
       if (!saved) return;
-      toast('Draft saved.', 'success');
+      toast(isNew ? 'Draft saved.' : 'Changes saved.', 'success');
       if (isNew) go(`/invoices/${saved.id}`, { replace: true });
       else redraw(saved);
     },
-  }, 'Save draft');
-  const issueButton = context.canIssue ? h('button', {
+  }, isNew ? 'Save draft' : 'Save changes');
+  const opened = JSON.stringify(body());
+  const changed = () => !isNew && JSON.stringify(body()) !== opened;
+  const watchChanges = () => { if (!isNew) saveButton.hidden = !changed(); };
+  // 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 draft that is not ready has no send: mark it ready first.
+  const to = invoice?.sendsTo ?? null;
+  const ready = invoice?.view === 'ready';
+  const nextNumber = `${context.organisations[0]?.invoicePrefix ?? ''}${String(context.organisations[0]?.nextInvoiceNumber ?? '').padStart(4, '0')}`;
+  const emails = invoice?.sendMode?.mode === 'approve_and_email';
+  const sendButton = context.canIssue && to && ready ? h('button', {
+    class: 'fx-btn fx-btn--primary', type: 'button',
+    onclick: async () => {
+      if (changed() && !(await save())) return;
+      const ok = await ui.dialog({
+        title: `Send this invoice to ${to}?`,
+        body: h('p', {}, `It gets the next number (${nextNumber}). ${sendModeNote(to, invoice.sendMode, 'it')}`),
+        confirm: emails ? 'Send and email' : 'Send',
+      });
+      if (!ok) return;
+      try {
+        await flow('/api/invoicing/invoices/send-ready', { method: 'POST', body: JSON.stringify({ issueDate: localDate(), invoiceIds: [invoice.id] }) });
+        const { invoice: fresh } = await flow(`/api/invoicing/invoices/${invoice.id}`);
+        toast(`${fresh.number} is on the way to ${to}.`, 'success');
+        openNext(ui, invoice.id);
+      } catch (error) {
+        toast(error.message, 'danger');
+      }
+    },
+  }, emails ? `Send to ${to} and email` : `Send to ${to}`) : null;
+  const issueButton = context.canIssue && !to ? h('button', {
     class: 'fx-btn fx-btn--primary', type: 'button',
     onclick: async () => {
       const saved = await save();
       if (!saved) return;
       const ok = await ui.dialog({
         title: 'Issue this invoice?',
-        body: h('p', {}, `It gets the next number (${context.organisations[0]?.invoicePrefix ?? ''}${String(context.organisations[0]?.nextInvoiceNumber ?? '').padStart(4, '0')}) and is kept exactly as issued. To change it later, revise it.`),
+        body: h('p', {}, `It gets the next number (${nextNumber}). Flow keeps it exactly as issued. To change it later, revise it.`),
         confirm: 'Issue',
       });
       if (!ok) { if (isNew) go(`/invoices/${saved.id}`, { replace: true }); else redraw(saved); return; }
@@ -444,40 +568,51 @@ function draftView(invoice, ui, context, redraw) {
   }, 'Issue invoice') : null;
 
   // Mark ready: the draft is saved, then Flow checks it; one with a problem
-  // stays a draft. Back to drafts undoes it.
-  const ready = invoice?.view === 'ready';
-  const readyButton = isNew ? null : h('button', {
+  // stays a draft. Move to Drafts, on the Status card, undoes it.
+  const markReadyButton = isNew || ready ? null : h('button', {
     class: 'fx-btn', type: 'button',
     onclick: async () => {
-      const current = ready ? invoice : await save();
-      if (!current) return;
+      if (!(await save())) return;
       try {
-        if (ready) {
-          await flow('/api/invoicing/invoices/mark-not-ready', { method: 'POST', body: JSON.stringify({ invoiceIds: [invoice.id] }) });
-          toast('Back in Drafts.', 'success');
-        } else {
-          const res = await flow('/api/invoicing/invoices/mark-ready', { method: 'POST', body: JSON.stringify({ invoiceIds: [invoice.id] }) });
-          if (res.marked) toast('Ready to send.', 'success');
-          else toast(res.refused[0]?.problems.map((p) => p.message).join(' ') ?? 'It has a problem.', 'danger');
-        }
+        const res = await flow('/api/invoicing/invoices/mark-ready', { method: 'POST', body: JSON.stringify({ invoiceIds: [invoice.id] }) });
+        if (res.marked) toast('Ready to send.', 'success');
+        else toast(res.refused[0]?.problems.map((p) => p.message).join(' ') ?? 'It has a problem.', 'danger');
         const { invoice: fresh } = await flow(`/api/invoicing/invoices/${invoice.id}`);
         redraw(fresh);
       } catch (error) {
         toast(error.message, 'danger');
       }
     },
-  }, ready ? 'Back to drafts' : 'Mark ready');
+  }, 'Mark ready');
+  // A ready invoice can go back to Drafts. It is a status change, so it sits
+  // with the status, not with the page's main buttons.
+  const statusCard = ready ? h('section', { class: 'fx-card fx-side-card' },
+    h('h3', { class: 'fx-label' }, 'Status'),
+    h('p', {}, 'Ready to send.'),
+    h('button', {
+      class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button',
+      onclick: async () => {
+        try {
+          await flow('/api/invoicing/invoices/mark-not-ready', { method: 'POST', body: JSON.stringify({ invoiceIds: [invoice.id] }) });
+          toast('Moved to Drafts.', 'success');
+          const { invoice: fresh } = await flow(`/api/invoicing/invoices/${invoice.id}`);
+          redraw(fresh);
+        } catch (error) {
+          toast(error.message, 'danger');
+        }
+      },
+    }, 'Move to Drafts')) : null;
   const problems = invoice?.problems?.length
     ? notice(invoice.problems.map((p) => p.message).join(' '), 'danger', 'Problem.')
     : null;
 
   return [
-    crumbs(ui, isNew ? 'New invoice' : ready ? 'Ready' : 'Draft'),
+    navBar(ui, invoice?.id ?? null),
     h('header', { class: 'fx-ph' },
       h('div', { class: 'fx-ph__text' },
         h('h1', { class: 'fx-title' }, isNew ? 'New invoice' : ready ? 'Ready invoice' : 'Draft invoice'),
-        h('p', { class: 'fx-ph__sub' }, ready ? 'A person checked it. Send all ready issues it. A change sends it back to Drafts.' : 'The number is given when you issue it.')),
-      h('div', { class: 'fx-ph__actions' }, saveButton, readyButton, issueButton)),
+        h('p', { class: 'fx-ph__sub' }, draftNote(to, invoice, ready))),
+      h('div', { class: 'fx-ph__actions' }, saveButton, markReadyButton, sendButton ?? issueButton)),
     problems,
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
@@ -496,8 +631,12 @@ function draftView(invoice, ui, context, redraw) {
           h('div', { class: 'fx-lines__foot' },
             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' }, jobCard(ui, invoice?.job))),
-  ];
+      h('aside', { class: 'fx-invoice__aside' }, statusCard, jobCard(ui, invoice?.job))),
+  ].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));
+    return part;
+  });
 }
 
 // An issued or void invoice: the document as sent, and what can happen next.
@@ -516,16 +655,32 @@ function issuedView(invoice, ui, context, redraw) {
       toast(error.message, 'danger');
     }
   };
+  const organisationId = context.organisations?.[0]?.id;
+  const xeroHost = h('div');
+  let xeroStatus = null;
+  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) ?? '');
+  };
+  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);
+    return h('div', {},
+      h('p', {}, 'The number stays used. A void invoice cannot be issued 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: h('p', {}, 'The number stays used. A void invoice cannot be issued again.'), confirm: 'Void', tone: 'danger' }),
+      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'),
     sendToXero(invoice, ui, context),
   ] : [];
   return [
-    crumbs(ui, invoice.number),
+    navBar(ui, invoice.id),
     h('header', { class: 'fx-ph' },
       h('div', { class: 'fx-ph__text' },
         h('div', { class: 'fx-row' },
@@ -551,6 +706,7 @@ function issuedView(invoice, ui, context, redraw) {
               h('td', { class: 'fx-num fx-strong' }, formatCents(line.lineAmountCents)))))),
           h('div', { class: 'fx-lines__foot' }, h('span'), totalsBox(ui, invoice)))),
       h('aside', { class: 'fx-invoice__aside' },
+        xeroHost,
         jobCard(ui, invoice.job),
         invoice.versions?.length ? h('section', { class: 'fx-card fx-side-card' },
           h('h3', { class: 'fx-label' }, 'History'),
@@ -560,8 +716,44 @@ function issuedView(invoice, ui, context, redraw) {
   ];
 }
 
+// Xero's copy of this invoice: its status, any difference from what Flow
+// sent, and Mark resolved, which reads Xero's changes and checks again. It
+// never writes to Xero: a person fixes the difference where they choose.
+function xeroCard(invoice, ui, context, status, reload) {
+  const { h, flow, toast } = ui;
+  if (!status || (status.state === 'not_sent' && !status.finding)) return null;
+  const rows = status.differences.map((d) => h('tr', {},
+    h('td', {}, FIELD_LABEL[d.field] ?? d.field),
+    h('td', { class: 'fx-num' }, showField(d.field, d.flow)),
+    h('td', { class: 'fx-num' }, showField(d.field, d.xero))));
+  const resolve = status.finding && context.canIssue ? h('button', {
+    class: 'fx-btn fx-btn--sm', type: 'button',
+    onclick: async () => {
+      resolve.disabled = true;
+      try {
+        const res = await flow(`/api/xero/invoices/${invoice.id}/recheck`, { method: 'POST', body: JSON.stringify({ organisationId: context.organisations[0].id }) });
+        toast(res.resolved ? 'Flow and Xero agree now.' : 'Still different. Fix it in Xero or in Flow, then try again.', res.resolved ? 'success' : 'danger');
+        await reload();
+      } catch (error) {
+        toast(error.message, 'danger');
+        resolve.disabled = false;
+      }
+    },
+  }, 'Mark resolved') : null;
+  return h('section', { class: 'fx-card fx-side-card' },
+    h('h3', { class: 'fx-label' }, 'Xero'),
+    h('div', { class: 'fx-row' }, xeroTag(ui, status), status.xero?.number ? h('span', { class: 'fx-dim' }, status.xero.number) : null),
+    status.finding ? h('p', { class: 'fx-problem' }, status.message) : null,
+    rows.length ? h('table', { class: 'fx-table' },
+      h('thead', {}, h('tr', {}, h('th', {}, ''), h('th', { class: 'fx-num' }, 'Flow sent'), h('th', { class: 'fx-num' }, 'Xero now'))),
+      h('tbody', {}, rows)) : null,
+    h('div', { class: 'fx-row' },
+      status.xero?.url ? h('a', { class: 'fx-btn fx-btn--sm fx-btn--ghost', href: status.xero.url, target: '_blank', rel: 'noopener' }, 'Open in Xero') : null,
+      resolve));
+}
+
 // Send to Xero (POST /api/xero/invoices/push). The customer's send mode
-// (Settings, Invoicing) decides what Xero gets: a draft that a person approves
+// (Settings, Invoice rules) decides what Xero gets: a draft that a person approves
 // there, or an approved invoice that Xero emails to the customer.
 function sendToXero(invoice, ui, context) {
   const { h, flow, toast } = ui;

package/server/ui/line-mappings.js

@@ -28,8 +28,9 @@ export function lineMappingSection(ui) {
       return;
     }
     const waiting = labels.filter((l) => l.unmapped > 0);
+    const listLink = row('Price list', 'Your codes and prices, and their links.', h('a', { class: 'fx-btn fx-btn--ghost fx-btn--sm', href: '/price-list', onclick: (event) => ui.go(event) }, 'Open'));
     if (!waiting.length) {
-      body.replaceChildren(row('Every line has a price code', 'Lines from Seazona find their price item by themselves.', h('span', { class: 'fx-dim' }, '')));
+      body.replaceChildren(row('Every line has a price code', 'Lines from Seazona find their price item by themselves.', h('span', { class: 'fx-dim' }, '')), listLink);
       return;
     }
     const options = [h('option', { value: '' }, 'Choose a price item…'),
@@ -53,7 +54,7 @@ export function lineMappingSection(ui) {
       });
       const lines = label.unmapped === 1 ? '1 line waits' : `${label.unmapped} lines wait`;
       return row(label.sample, `${money(label.unitAmountCents)} · ${lines}`, select);
-    }));
+    }), listLink);
   }
   load();
   return section;