@arcforgelabs/flow 2026.10.34 → 2026.10.36

package/server/ui/invoicing.js

@@ -7,21 +7,22 @@
 // (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';
+import { jobChangeBanner } from '/assets/ui/job-change.js';
 
-const STATUS_LABEL = { draft: 'Draft', issued: 'Issued', void: 'Void' };
+const STATUS_LABEL = { draft: 'Draft', issued: 'Finalised', 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; a
 // saved change keeps it there. An issued invoice that failed to send is a
 // problem.
 // 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 TABS = [['ready', 'Ready'], ['to_check', 'Drafts'], ['problem', 'Problem'], ['issued', 'Finalised'], ['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 = {
   to_check: 'No drafts to check. Press New invoice to start one.',
   problem: 'No problems.',
-  ready: 'Nothing is ready. Tick drafts and press Mark ready.',
+  ready: 'Nothing is ready. Tick drafts and press Move to Ready.',
 };
 // Tabs whose rows can be ticked, and what the ticked rows can do.
 const TICKS = { to_check: true, ready: true };
@@ -45,6 +46,35 @@ export function xeroTag(ui, status) {
     : h('span', { class: 'fx-status', 'data-tone': XERO_TONE[status.state] ?? 'mute' }, status.label);
 }
 
+// The Linked column: one icon for each connected system (linksTo), with a
+// dot for the state of this invoice's link there. An icon with a link opens
+// the record in that system. Accounting icons show on numbered invoices only.
+const LINK_TONE = {
+  not_sent: 'warn', sending: 'warn', not_copied: 'warn', draft: 'success',
+  approved: 'success', part_paid: 'success', paid: 'success', voided: 'mute', deleted: 'mute',
+};
+export function linkIcon(ui, system, { tone = null, title, url = null } = {}) {
+  const { h } = ui;
+  const kids = [h('img', { src: `/assets/ui/logos/${system.id}.svg`, alt: '' }), tone ? h('i', { class: 'fx-link__dot', 'data-tone': tone }) : null];
+  const props = { class: `fx-link${tone ? '' : ' fx-link--none'}`, title, 'aria-label': title };
+  return url
+    ? h('a', { ...props, href: url, target: '_blank', rel: 'noopener', onclick: (event) => event.stopPropagation() }, ...kids)
+    : h('span', props, ...kids);
+}
+
+function workIcon(ui, system, job) {
+  if (job?.sourceSystem !== system.id) return linkIcon(ui, system, { title: `Not linked to ${system.name}` });
+  const ref = job.caseRef ?? job.sourceJobRef;
+  return linkIcon(ui, system, { tone: 'success', title: `${system.name} ${ref}${job.link?.url ? `. Open in ${system.name}.` : ''}`, url: job.link?.url ?? null });
+}
+
+export function accountingIcon(ui, system, status) {
+  const tone = status.finding ? 'danger' : LINK_TONE[status.state] ?? 'mute';
+  const number = status.xero?.number ? ` ${status.xero.number}` : '';
+  const title = `${system.name}${number}: ${status.finding ? status.message : status.label}${status.xero?.url ? ` Open in ${system.name}.` : ''}`;
+  return linkIcon(ui, system, { tone, title, url: status.xero?.url ?? null });
+}
+
 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.
@@ -137,9 +167,9 @@ export async function renderInvoiceList(main, ui) {
     const ticked = [...state.ticked];
     const parts = [];
     if (state.status === 'to_check') {
-      parts.push(h('p', { class: 'fx-dim' }, ticked.length ? `${plural(ticked.length, 'draft', 'drafts')} ticked.` : 'Check each draft, tick it, then mark it ready.'));
+      parts.push(h('p', { class: 'fx-dim' }, ticked.length ? `${plural(ticked.length, 'draft', 'drafts')} ticked.` : 'Check each draft, tick it, then move it to Ready.'));
       if (ticked.length) {
-        parts.push(action(`Mark ${ticked.length} ready`, 'mark-ready', () => ({ invoiceIds: ticked }), (res) => (res.refused.length
+        parts.push(action(`Move ${ticked.length} to Ready`, 'mark-ready', () => ({ invoiceIds: ticked }), (res) => (res.refused.length
           ? [`${res.marked} ready. ${plural(res.refused.length, 'draft has', 'drafts have')} a problem and moved to Problem.`, 'danger']
           : [`${plural(res.marked, 'draft', 'drafts')} ready.`, 'success'])));
       }
@@ -151,14 +181,14 @@ export async function renderInvoiceList(main, ui) {
           (res) => [`${plural(res.moved, 'invoice', 'invoices')} back in Drafts.`, 'success'], 'ghost'));
       }
       if (context.canIssue && body.counts.ready > 0) {
-        buttons.push(action(to ? `Send all ${body.counts.ready} ready to ${to}` : `Issue all ${body.counts.ready} ready`, 'send-ready', () => ({ issueDate: localDate() }),
-          (res) => [`${res.issued} issued.${to ? ` They are on the way to ${to}.` : ''}${res.remaining ? ` ${res.remaining} more are ready: press again.` : ''}`, 'success']));
+        buttons.push(action(to ? `Send all ${body.counts.ready} ready to ${to}` : `Finalise all ${body.counts.ready} ready`, 'send-ready', () => ({ issueDate: localDate() }),
+          (res) => [`${res.issued} finalised.${to ? ` They are on the way to ${to}.` : ''}${res.remaining ? ` ${res.remaining} more are ready: press again.` : ''}`, 'success']));
       }
       if (buttons.length) parts.push(h('div', { class: 'fx-sendbar__actions' }, buttons));
     } else if (state.status === 'problem') {
       const failed = body.invoices.filter((i) => i.status === 'issued').length;
       if (context.canIssue && to && failed > 0) {
-        parts.push(h('p', { class: 'fx-dim' }, `${plural(failed, 'issued invoice', 'issued invoices')} did not reach ${to}. Fix the cause, then send again.`));
+        parts.push(h('p', { class: 'fx-dim' }, `${plural(failed, 'finalised invoice', 'finalised invoices')} did not reach ${to}. Fix the cause, then send again.`));
         parts.push(action('Send again', 'send-again', () => ({}), (res) => [`${res.queued} on the way to ${to} again.`, 'success']));
       }
     }
@@ -231,8 +261,12 @@ export async function renderInvoiceList(main, ui) {
     const showProblem = state.status === 'problem';
     const created = ['to_check', 'problem', 'ready'].includes(state.status);
     // An invoice gets its number when it is sent or issued, so only the
-    // Issued and Void tabs show a Number column; the others open on Client.
+    // Finalised and Void tabs show a Number column; the others open on Client.
     const numbered = !created;
+    // With an integration on, every tab has a Linked column (linkIcon).
+    const systems = body.linksTo ?? [];
+    const linked = systems.length > 0;
+    const accountingSystem = systems.find((s) => s.kind === 'accounting') ?? null;
     const boxes = [];
     const tickBox = (invoice) => {
       const box = h('input', {
@@ -257,7 +291,8 @@ export async function renderInvoiceList(main, ui) {
       h('thead', {}, h('tr', {},
         ticks ? h('th', { class: 'fx-tick-cell' }, all) : null,
         numbered ? h('th', {}, 'Number') : null, h('th', {}, 'Client'), h('th', {}, showProblem ? 'Problem' : 'Reference'),
-        h('th', {}, created ? 'Created' : 'Issued'), h('th', { class: 'fx-num' }, 'Total'), h('th', {}, 'Status'))),
+        h('th', {}, created ? 'Created' : 'Finalised'), h('th', { class: 'fx-num' }, 'Total'), h('th', {}, 'Status'),
+        linked ? h('th', {}, 'Linked') : null)),
       h('tbody', {}, body.invoices.map((invoice) => {
         const href = `/invoices/${invoice.id}`;
         const first = invoice.problems?.[0];
@@ -275,17 +310,25 @@ export async function renderInvoiceList(main, ui) {
             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]));
+            if (!linked) statusCells.set(invoice.id, cell);
+            return cell;
+          })(),
+          linked ? (() => {
+            const cell = h('td', { class: 'fx-links' }, systems.filter((s) => s.kind === 'work').map((s) => workIcon(ui, s, invoice.job)));
             statusCells.set(invoice.id, cell);
             return cell;
-          })());
+          })() : null);
       }))));
-    // Issued and void invoices also show Xero's status, from Flow's copy.
-    if (['issued', 'void'].includes(state.status)) {
+    // Finalised 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) {
       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));
+        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));
       }
     }
   }
@@ -305,12 +348,12 @@ function saveNav(nav) {
 }
 
 // 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);
+// next invoice of that list. An invoice opened from elsewhere (the job board,
+// search, a link) steps through its own tab: Drafts, Ready, Problem, Finalised
+// or Void, read once here.
+function navBar(ui, 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', {
@@ -320,15 +363,33 @@ function navBar(ui, id) {
     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);
+  const bar = h('nav', { class: 'fx-pager', 'aria-label': 'Invoices' },
+    h('button', { class: 'fx-pager__back', type: 'button', onclick: back }, '← 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')));
+    return true;
+  };
+  const tab = invoice?.status === 'void' ? 'void' : invoice?.view ?? invoice?.status;
+  if (id && !fill(readNav()?.ids ?? []) && TABS.some(([t]) => t === tab)) {
+    flow(`/api/invoicing/invoices?${new URLSearchParams({ status: tab })}`).then((body) => {
+      const ids = body.invoices.map((i) => i.id);
+      if (!fill(ids)) return;
+      saveNav({ tab, q: '', ids });
+      try { sessionStorage.setItem('flow_invoice_tab', tab); } catch { /* Back opens the last tab */ }
+    }).catch(() => { /* Back only */ });
+  }
+  return bar;
 }
 
-// After a send, the next invoice of the list opens; at its end, the list.
-// The sent invoice stays in the bar's list, so the count holds (2 of 35) and
-// Previous opens it again, now sent. Back reloads the list without it.
+// After a send, a Finalise or a Save as draft, the next invoice of the list
+// opens; at its end, the list. So a person reviews drafts one after another
+// without going back. The invoice stays in the bar's list, so the count holds
+// (2 of 35) and Previous opens it again, now done. Back reloads the list
+// without it.
 export function openNext(ui, id) {
   const ids = readNav()?.ids ?? [];
   const at = ids.indexOf(id);
@@ -393,7 +454,7 @@ function draftView(invoice, ui, context, redraw) {
   const lines = (invoice?.lines ?? []).map((line) => ({ ...line }));
   if (!lines.length) lines.push({ description: '', quantity: 1, unitAmountCents: null, taxCode: 'GST', priceItemId: null });
   let contact = invoice?.contact ?? null;
-  // Issue invoice waits for a client and a due date (syncIssue, below).
+  // Finalise invoice waits for a client and a due date (syncIssue, below).
   let onContact = () => {};
 
   // Client: type to find a customer.
@@ -545,23 +606,27 @@ 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.
+  // change since the page opened. Save as draft opens the next invoice.
+  // Save as draft: a draft that is not ready always offers it. A ready
+  // invoice offers Save changes only once something changed.
+  const keepsSave = isNew || invoice?.view !== 'ready';
   const saveButton = h('button', {
-    class: 'fx-btn', type: 'button', hidden: !isNew,
+    class: 'fx-btn', type: 'button', hidden: !keepsSave,
     onclick: async () => {
       const saved = await save();
       if (!saved) return;
-      toast(isNew ? 'Draft saved.' : 'Changes saved.', 'success');
+      toast(keepsSave ? 'Saved as a draft.' : 'Changes saved.', 'success');
       if (isNew) go(`/invoices/${saved.id}`, { replace: true });
+      else if (keepsSave) openNext(ui, invoice.id);
       else redraw(saved);
     },
-  }, isNew ? 'Save draft' : 'Save changes');
+  }, keepsSave ? 'Save as draft' : 'Save changes');
   const opened = JSON.stringify(body());
   const changed = () => !isNew && JSON.stringify(body()) !== opened;
-  const watchChanges = () => { if (!isNew) saveButton.hidden = !changed(); };
+  const watchChanges = () => { if (!keepsSave) 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.
+  // and keeps it. A draft that is not ready has no send: move it to Ready first.
   const to = invoice?.sendsTo ?? context.sendsTo ?? null;
   const ready = invoice?.view === 'ready';
   const nextNumber = `${context.organisations[0]?.invoicePrefix ?? ''}${String(context.organisations[0]?.nextInvoiceNumber ?? '').padStart(4, '0')}`;
@@ -586,33 +651,36 @@ function draftView(invoice, ui, context, redraw) {
       }
     },
   }, emails ? `Send to ${to} and email` : `Send to ${to}`) : null;
+  // With no accounting system, Finalise invoice gives the draft its number and
+  // locks it. A changed job blocks it, as it blocks Move to Ready.
   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?',
+        title: 'Finalise this invoice?',
         body: h('p', {}, `It gets the next number (${nextNumber}). Flow keeps it exactly as issued. To change it later, revise it.`),
-        confirm: 'Issue',
+        confirm: 'Finalise',
       });
       if (!ok) { if (isNew) go(`/invoices/${saved.id}`, { replace: true }); else redraw(saved); return; }
       try {
         const { invoice: issued } = await flow(`/api/invoicing/invoices/${saved.id}/issue`, { method: 'POST', body: JSON.stringify({ issueDate: localDate() }) });
-        toast(`${issued.number} issued.`, 'success');
+        toast(`${issued.number} is final.`, 'success');
         if (isNew) go(`/invoices/${issued.id}`, { replace: true });
-        else redraw(issued);
+        else openNext(ui, invoice.id);
       } catch (error) {
         toast(error.message, 'danger');
       }
     },
-  }, 'Issue invoice') : null;
+  }, 'Finalise') : null;
   // Issue needs a client and a due date: until both are set it is greyed.
+  // A changed job greys it too, as it does Move to Ready.
   const syncIssue = () => {
     if (!issueButton) return;
     const missing = [contact ? null : 'a client', dueDate.value ? null : 'a due date'].filter(Boolean);
-    issueButton.disabled = missing.length > 0;
-    issueButton.title = missing.length ? `Choose ${missing.join(' and ')} first.` : '';
+    issueButton.disabled = missing.length > 0 || Boolean(invoice?.jobChange);
+    issueButton.title = invoice?.jobChange ? 'Fix the problem first.' : missing.length ? `Choose ${missing.join(' and ')} first.` : 'Gives it the next number and locks it. Nothing is sent.';
   };
   onContact = syncIssue;
   clientInput.addEventListener('input', syncIssue);
@@ -630,23 +698,33 @@ function draftView(invoice, ui, context, redraw) {
       h('span', { class: 'fx-dim' }, 'Flow fills in the details.')),
     h('button', { class: 'fx-btn', type: 'button', onclick: () => pickJob(ui) }, 'Choose a job')) : null;
 
-  // Mark ready: the draft is saved, then Flow checks it; one with a problem
-  // stays a draft. Move to Drafts, on the Status card, undoes it.
-  const markReadyButton = isNew || ready ? null : h('button', {
-    class: 'fx-btn', type: 'button',
+  // Finalise, with an accounting system on: the draft is saved, then Flow
+  // checks it and moves it to the Ready tab, for Send all ready; nothing is
+  // sent here. A draft the draft routine made from a job ready to invoice is
+  // in Ready already (automations.js), so this is for the rest. One with a
+  // problem stays a draft. Move to Drafts, on the Status card, undoes it. A
+  // changed job is fixed at its source or adopted, so the button waits.
+  const jobChange = invoice?.jobChange ?? null;
+  const markReadyButton = isNew || ready || !to ? null : h('button', {
+    class: 'fx-btn fx-btn--primary', type: 'button', disabled: Boolean(jobChange),
+    title: jobChange ? 'Fix the problem first.' : `Checks this draft and moves it to Ready. Send all ready sends it to ${to}.`,
     onclick: async () => {
       if (!(await save())) return;
       try {
         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');
+        if (res.marked) {
+          toast(`Final. It is in Ready; Send all ready sends it to ${to}.`, 'success');
+          openNext(ui, invoice.id);
+          return;
+        }
+        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');
       }
     },
-  }, 'Mark ready');
+  }, 'Finalise');
   // 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' },
@@ -665,18 +743,41 @@ function draftView(invoice, ui, context, redraw) {
         }
       },
     }, 'Move to Drafts')) : null;
-  const problems = invoice?.problems?.length
-    ? notice(invoice.problems.map((p) => p.message).join(' '), 'danger', 'Problem.')
-    : null;
+  // 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 problems = [
+    jobChange ? jobChangeBanner(ui, jobChange, {
+      money: formatCents,
+      // Adopting changes the draft for the business: owners and admins only.
+      onAdopt: !context.canIssue ? null : async () => {
+        const system = jobChange.systemName;
+        const ok = await ui.dialog({
+          title: `Adopt the ${system} changes?`,
+          body: h('p', {}, `This invoice takes the Now in ${system} column.${changed() ? ' Your unsaved changes here are lost.' : ''} Nothing goes to ${system} or the accounting system.`),
+          confirm: 'Adopt changes',
+        });
+        if (!ok) return;
+        try {
+          const res = await flow(`/api/invoicing/jobs/${jobChange.jobId}/use-new-lines`, { method: 'POST', body: '{}' });
+          toast(`The invoice now matches ${system}.${res.invoice.view === 'ready' ? ' It is in Ready.' : ''}`, 'success');
+          redraw(res.invoice);
+        } catch (error) {
+          toast(error.message, 'danger');
+        }
+      },
+    }) : null,
+    otherProblems.length ? notice(otherProblems.map((p) => p.message).join(' '), 'danger', 'Problem.') : null,
+  ];
 
   return [
-    navBar(ui, invoice?.id ?? null),
+    navBar(ui, invoice),
     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' }, draftNote(to, invoice, ready))),
-      h('div', { class: 'fx-ph__actions' }, saveButton, markReadyButton, isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.'), sendButton ?? issueButton)),
-    problems,
+      h('div', { class: 'fx-ph__actions' }, isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.'), saveButton, markReadyButton, sendButton ?? issueButton)),
+    ...problems,
     fromJob,
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
@@ -767,7 +868,7 @@ function issuedView(invoice, ui, context, redraw) {
   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.'),
+      h('p', {}, 'The number stays used. A void invoice cannot be finalised 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 ? [
@@ -778,13 +879,13 @@ function issuedView(invoice, ui, context, redraw) {
     h('button', { class: 'fx-btn', type: 'button', onclick: () => act('revise', `${invoice.number} is a draft again.`) }, 'Revise'),
   ] : [];
   return [
-    navBar(ui, invoice.id),
+    navBar(ui, invoice),
     h('header', { class: 'fx-ph' },
       h('div', { class: 'fx-ph__text' },
         h('div', { class: 'fx-row' },
           h('h1', { class: 'fx-title' }, invoice.number),
           h('span', { class: 'fx-status', 'data-tone': STATUS_TONE[invoice.status] }, STATUS_LABEL[invoice.status])),
-        h('p', { class: 'fx-ph__sub' }, `${invoice.contact?.name ?? ''} · issued ${showDate(invoice.issueDate)}`)),
+        h('p', { class: 'fx-ph__sub' }, `${invoice.contact?.name ?? ''} · finalised ${showDate(invoice.issueDate)}`)),
       h('div', { class: 'fx-ph__actions' }, actions, previewButton(ui, invoice.id), send)),
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
@@ -792,7 +893,7 @@ function issuedView(invoice, ui, context, redraw) {
           h('dl', { class: 'fx-doc__meta' },
             h('div', {}, h('dt', { class: 'fx-label' }, 'Bill to'), h('dd', {}, invoice.contact?.name ?? '—', invoice.contact?.email ? h('span', { class: 'fx-dim' }, invoice.contact.email) : null)),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Reference'), h('dd', {}, invoice.reference ?? '—')),
-            h('div', {}, h('dt', { class: 'fx-label' }, 'Issued'), h('dd', {}, showDate(invoice.issueDate))),
+            h('div', {}, h('dt', { class: 'fx-label' }, 'Finalised'), h('dd', {}, showDate(invoice.issueDate))),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Due'), h('dd', {}, showDate(invoice.dueDate)))),
           h('table', { class: 'fx-lines__table fx-lines__table--read' },
             h('thead', {}, h('tr', {}, h('th', {}, 'Description'), h('th', { class: 'fx-num' }, 'Qty'), h('th', { class: 'fx-num' }, 'Unit price'), h('th', {}, 'Tax'), h('th', { class: 'fx-num' }, 'Amount'))),
@@ -809,7 +910,7 @@ function issuedView(invoice, ui, context, redraw) {
         invoice.versions?.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 ? 'Issued' : `Reissued (version ${v.version})`),
+            h('span', { class: 'fx-strong' }, v.version === 1 ? 'Finalised' : `Revised (version ${v.version})`),
             h('span', { class: 'fx-dim' }, new Date(v.issuedAt).toLocaleString('en-AU', { dateStyle: 'medium', timeStyle: 'short' })))))) : null)),
   ];
 }

package/server/ui/job-board.js

@@ -91,7 +91,7 @@ function reasonFix(reason, acct) {
   if (reason === 'the work system report is out of date') {
     return { label: 'Out of date', text: 'Flow has no news of this job from the work system for more than a day.', todo: 'Check the work system under Settings, Integrations.' };
   }
-  if (reason === 'the job changed after its invoice was made') return fix('Job changed', 'Compare the invoice with the job, then correct the invoice. If only the job changed, use its new lines.');
+  if (reason === 'the job changed after its invoice was made') return fix('Job changed', 'Open the invoice to see what changed. Fix the job in the work system, or adopt its changes on the draft.');
   if (reason === 'the job status moved back after its invoice was made') return fix('Status moved back', 'Check the job in the work system. Void or hold its invoice if the work is not done.');
   if (/deleted in /i.test(reason)) return fix('Deleted', 'Check the job in the work system. Void its invoice if it has one.');
   if (/^the accounting evidence is ambiguous/.test(reason)) return fix(`${acct} match unclear`, `Find the invoice for this job in ${acct}, then link it.`);

package/server/ui/job-change.js

@@ -0,0 +1,78 @@
+// The "job changed" problem on a draft invoice (server/core/ledger.js,
+// jobChangeFor): what the job was when the invoice was made and what the
+// work system has now, one row per changed fact, with "Open in <system>" to
+// fix it there and "Adopt <system> changes" to take the new values into
+// Flow's own draft. Flow never writes to the work system. Kept apart from
+// invoicing.js so tests can load it without a browser.
+
+// Rows shown before "Show all".
+export const FIRST_ROWS = 5;
+
+const lineText = (line) => [line.code, line.description].filter(Boolean).join(' · ');
+const lineFull = (line, money) => `${lineText(line)} · ${line.quantity} × ${line.unitAmountCents == null ? '—' : money(line.unitAmountCents)}`;
+
+// [{ field, was, now }] in plain words. `money` formats cents.
+export function changeRows(change, money) {
+  const rows = [];
+  if (change.contact) rows.push({ field: 'Client', was: change.contact.was ?? '—', now: change.contact.now ?? '—' });
+  for (const line of change.lines ?? []) {
+    const at = `Line ${line.position}`;
+    if (line.change === 'added') { rows.push({ field: `${at} · added`, was: '—', now: lineFull(line.now, money) }); continue; }
+    if (line.change === 'removed') { rows.push({ field: `${at} · removed`, was: lineFull(line.was, money), now: '—' }); continue; }
+    if (line.fields.includes('item')) rows.push({ field: `${at} · item`, was: lineText(line.was), now: lineText(line.now) });
+    if (line.fields.includes('description')) rows.push({ field: `${at} · description`, was: line.was.description, now: line.now.description });
+    if (line.fields.includes('quantity')) rows.push({ field: `${at} · qty`, was: String(line.was.quantity), now: String(line.now.quantity), num: true });
+    if (line.fields.includes('price')) {
+      rows.push({ field: `${at} · price`, was: line.was.unitAmountCents == null ? '—' : money(line.was.unitAmountCents), now: line.now.unitAmountCents == null ? '—' : money(line.now.unitAmountCents), num: true });
+    }
+  }
+  const { was, now } = change.total ?? {};
+  if (was != null && now != null && was !== now) rows.push({ field: 'Total', was: money(was), now: money(now), num: true });
+  return rows;
+}
+
+// The sentence after "Problem." One fact per sentence.
+export function changeSummary(change, rowCount) {
+  const system = change.systemName ?? 'the work system';
+  const count = `${rowCount} ${rowCount === 1 ? 'change' : 'changes'}.`;
+  if (change.canAdopt) return `The job changed in ${system} after this invoice was made. ${count}`;
+  if (change.sent) return `The job changed in ${system} after this invoice was sent. ${count} Fix it in ${system} or in the accounting system.`;
+  return `The job changed in ${system}, and this draft changed too. ${count} Fix it in ${system} or in this draft.`;
+}
+
+// The banner. `onAdopt` runs "Adopt changes"; it is shown only when only the
+// work system changed and the draft is not sent (ledger.js, outcome offer).
+export function jobChangeBanner(ui, change, { money, onAdopt = null }) {
+  const { h } = ui;
+  const system = change.systemName ?? 'the work system';
+  const rows = changeRows(change, money);
+  const order = change.sourceInvoiceRef ? `Order #${change.sourceInvoiceRef}` : null;
+  const link = change.link
+    ? h('a', {
+      class: 'fx-btn fx-btn--sm', href: change.link.url, target: '_blank', rel: 'noopener noreferrer',
+      title: change.link.exact ? `Opens this job in ${system}.` : `Opens ${system}. Find ${order ?? 'the job'} there.`,
+    }, `Open in ${system} ↗`)
+    : null;
+  const adopt = change.canAdopt && onAdopt
+    ? h('button', { class: 'fx-btn fx-btn--sm fx-btn--primary', type: 'button', onclick: onAdopt }, `Adopt ${system} changes`)
+    : null;
+  const body = h('tbody', {});
+  const draw = (all) => body.replaceChildren(...(all ? rows : rows.slice(0, FIRST_ROWS)).map((row) => h('tr', {},
+    h('th', { scope: 'row' }, row.field),
+    h('td', { class: `fx-change__was${row.num ? ' fx-num' : ''}` }, row.was),
+    h('td', { class: `fx-change__now${row.num ? ' fx-num' : ''}` }, row.now))));
+  draw(false);
+  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' },
+    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, adopt)),
+    adopt ? h('p', { class: 'fx-change__note' }, `Adopt: this invoice takes the Now in ${system} column. Nothing goes to ${system} or the accounting system.`) : null,
+    !change.link && order ? h('p', { class: 'fx-change__note' }, `Find ${order} in ${system} to fix it there.`) : null,
+    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);
+}

package/server/ui/job-view.js

@@ -0,0 +1,119 @@
+// A person's own view of the Jobs page: layout, group, sort and filter. It is
+// saved with their account (PUT /api/me/views/jobs, server/auth/people.js),
+// so it follows them to every device. The rules are here, with no page code,
+// so the server can check a saved view and tests can read them
+// (test/job-view.test.js). server/ui/jobs.js draws the page.
+
+export const LAYOUTS = ['board', 'list'];
+export const GROUPS = { status: 'Status', stage: 'Invoice stage', client: 'Client', practitioner: 'Practitioner' };
+export const SORTS = { board: 'Lab system order', due: 'Date', client: 'Client', practitioner: 'Practitioner', total: 'Total' };
+export const DIRS = ['asc', 'desc'];
+export const DEFAULT_VIEW = Object.freeze({ layout: 'board', group: 'status', sort: 'board', dir: 'asc', hide: [], late: false, problems: false });
+
+// Group by one of the lab's custom fields (docs/CUSTOM_FIELDS.md):
+// 'field:<field id>'. Only dropdown, person and checkbox fields make lanes.
+const FIELD_GROUP = /^field:[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+export const fieldGroup = (fieldId) => `field:${fieldId}`;
+export const fieldIdOf = (group) => (FIELD_GROUP.test(group ?? '') ? group.slice(6) : null);
+
+const MAX_HIDDEN = 100;
+const MAX_LABEL = 120;
+
+// A view as Flow stores it: only the known keys, each checked. Anything else
+// falls back to the default, so a bad saved view never breaks the page.
+export function normaliseJobsView(input) {
+  const value = input && typeof input === 'object' && !Array.isArray(input) ? input : {};
+  const pick = (key, allowed) => (allowed.includes(value[key]) ? value[key] : DEFAULT_VIEW[key]);
+  const hide = Array.isArray(value.hide)
+    ? [...new Set(value.hide.filter((label) => typeof label === 'string' && label.length > 0 && label.length <= MAX_LABEL))].slice(0, MAX_HIDDEN)
+    : [];
+  return {
+    layout: pick('layout', LAYOUTS),
+    group: FIELD_GROUP.test(value.group ?? '') ? value.group : pick('group', Object.keys(GROUPS)),
+    sort: pick('sort', Object.keys(SORTS)),
+    dir: pick('dir', DIRS),
+    hide,
+    late: value.late === true,
+    problems: value.problems === true,
+  };
+}
+
+// How many filters are on: shown on the Filter button.
+export function filterCount(view) {
+  return view.hide.length + (view.late ? 1 : 0) + (view.problems ? 1 : 0);
+}
+
+// The jobs the filter keeps. `status` is a job's status label; `late` and
+// `problem` say if a job is late or has a problem (jobs.js knows how).
+export function filterJobs(jobs, view, { status, late, problem }) {
+  const hidden = new Set(view.hide);
+  return jobs.filter((job) => !hidden.has(status(job))
+    && (!view.late || late(job))
+    && (!view.problems || problem(job)));
+}
+
+const dayOf = (job) => job.dueOn ?? job.orderedOn ?? job.jobDate ?? null;
+const text = (value) => (value ?? '').toString().toLowerCase();
+const KEYS = {
+  due: dayOf,
+  client: (job) => text(job.clientName) || null,
+  practitioner: (job) => text(job.practitioner) || null,
+  total: (job) => job.totalCents ?? null,
+};
+
+// The jobs in the view's order. "Lab system order" keeps the order the API
+// gives. A job with no value for the key goes last, in either direction.
+export function sortJobs(jobs, view) {
+  const key = KEYS[view.sort];
+  if (!key) return view.dir === 'desc' ? [...jobs].reverse() : [...jobs];
+  const sign = view.dir === 'desc' ? -1 : 1;
+  return jobs.map((job, i) => [job, key(job), i]).sort(([, a, i], [, b, j]) => {
+    if (a == null || b == null) return (a == null) - (b == null) || i - j;
+    const order = typeof a === 'number' ? a - b : String(a).localeCompare(String(b));
+    return order * sign || i - j;
+  }).map(([job]) => job);
+}
+
+// The jobs in groups: one board column, or one block of the list, per group,
+// in order. `columns` is the group labels in order (all of them, so an empty
+// status still shows); `labelOf` gives a job's label.
+export function groupJobs(jobs, columns, labelOf) {
+  const groups = new Map(columns.map((label) => [label, []]));
+  for (const job of jobs) {
+    const label = labelOf(job);
+    if (!groups.has(label)) groups.set(label, []);
+    groups.get(label).push(job);
+  }
+  return [...groups].map(([label, inGroup]) => ({ label, jobs: inGroup }));
+}
+
+// The lanes of a custom field, in order: [{ label, value, color }]. `value`
+// is what a card dropped in the lane gets (null clears it). The empty lane
+// comes first, like ClickUp's. An archived option that a job still has gets
+// a lane after the live ones. `people` is [{ id, name }] for a person field;
+// `jobs` are the jobs on the page and `valueOf` reads a job's value.
+export const NOT_SET = 'Not set';
+export function fieldLanes(field, { people = [], jobs = [], valueOf = () => null } = {}) {
+  const used = new Set(jobs.map(valueOf).filter((v) => v != null));
+  if (field.type === 'checkbox') {
+    return [{ label: 'No', value: null, color: 'gray' }, { label: 'Yes', value: true, color: 'green' }];
+  }
+  const empty = { label: NOT_SET, value: null, color: 'gray' };
+  if (field.type === 'person') {
+    const known = people.map((p) => ({ label: p.name, value: p.id, color: 'blue' }));
+    const gone = [...used].filter((id) => !people.some((p) => p.id === id))
+      .map((id, i) => ({ label: `Former person ${i + 1}`, value: id, color: 'gray' }));
+    return [empty, ...known, ...gone];
+  }
+  const options = field.options ?? [];
+  return [empty,
+    ...options.filter((o) => !o.archived).map((o) => ({ label: o.name, value: o.id, color: o.color ?? 'gray' })),
+    ...options.filter((o) => o.archived && used.has(o.id)).map((o) => ({ label: `${o.name} (archived)`, value: o.id, color: 'gray', archived: true }))];
+}
+
+// The lane label a job sits in for a field's lanes. A checkbox that is
+// false sits in "No", with the unset ones.
+export function laneOf(lanes, value) {
+  if (value === false || value == null) return lanes[0].label;
+  return (lanes.find((lane) => lane.value === value) ?? lanes[0]).label;
+}