@arcforgelabs/flow 2026.10.33 → 2026.10.35

package/server/ui/invoicing.js

@@ -7,6 +7,7 @@
 // (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_TONE = { draft: 'info', issued: 'success', void: 'mute' };
@@ -21,7 +22,7 @@ const VIEW_TONE = { problem: 'danger', ready: 'success', sending: 'info', to_che
 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 };
@@ -137,9 +138,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,7 +152,7 @@ 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() }),
+        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} issued.${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));
@@ -226,9 +227,13 @@ export async function renderInvoiceList(main, ui) {
     // 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 link = (href, label) => h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, label);
     const ticks = TICKS[state.status];
     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.
+    const numbered = !created;
     const boxes = [];
     const tickBox = (invoice) => {
       const box = h('input', {
@@ -252,7 +257,7 @@ export async function renderInvoiceList(main, ui) {
     host.replaceChildren(h('table', { class: 'fx-table fx-table--rows' },
       h('thead', {}, h('tr', {},
         ticks ? h('th', { class: 'fx-tick-cell' }, all) : null,
-        h('th', {}, 'Number'), h('th', {}, 'Client'), h('th', {}, showProblem ? 'Problem' : 'Reference'),
+        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('tbody', {}, body.invoices.map((invoice) => {
         const href = `/invoices/${invoice.id}`;
@@ -260,8 +265,8 @@ export async function renderInvoiceList(main, ui) {
         const view = invoice.status === 'void' ? null : invoice.view;
         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: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, invoice.number ?? 'Draft')),
-          h('td', {}, invoice.contactName ?? '—'),
+          numbered ? h('td', {}, link(href, invoice.number ?? 'Draft')) : null,
+          h('td', {}, numbered ? (invoice.contactName ?? '—') : link(href, invoice.contactName ?? 'No client')),
           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.reference ?? '—'),
@@ -301,12 +306,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, Issued
+// 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', {
@@ -316,15 +321,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);
@@ -389,6 +412,8 @@ 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;
+  // Finalise invoice waits for a client and a due date (syncIssue, below).
+  let onContact = () => {};
 
   // Client: type to find a customer.
   const clientInput = h('input', { class: 'fx-input', type: 'text', autocomplete: 'off', placeholder: 'Type a client name', value: contact?.name ?? '', 'aria-label': 'Client' });
@@ -410,6 +435,7 @@ function draftView(invoice, ui, context, redraw) {
             contact = c;
             clientInput.value = c.name;
             clientList.hidden = true;
+            onContact();
           },
         }, c.name, c.email ? h('span', { class: 'fx-dim' }, c.email) : null)) : [h('p', { class: 'fx-dim fx-suggest__none' }, 'No client by that name.')]));
         clientList.hidden = false;
@@ -420,7 +446,7 @@ function draftView(invoice, ui, context, redraw) {
   });
   clientInput.addEventListener('blur', () => { setTimeout(() => { clientList.hidden = true; }, 120); });
 
-  const reference = h('input', { class: 'fx-input', type: 'text', value: invoice?.reference ?? '', placeholder: 'Case or order number' });
+  const reference = h('input', { class: 'fx-input', type: 'text', value: invoice?.reference ?? '', placeholder: 'Practitioner - Patient' });
   const dueDate = h('input', { class: 'fx-input', type: 'date', value: invoice?.dueDate ?? '' });
 
   // Lines.
@@ -538,24 +564,28 @@ 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.
-  const to = invoice?.sendsTo ?? null;
+  // 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')}`;
   const emails = invoice?.sendMode?.mode === 'approve_and_email';
@@ -579,45 +609,80 @@ 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;
-
-  // 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') : 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 || 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);
+  dueDate.addEventListener('input', syncIssue);
+  dueDate.addEventListener('change', syncIssue);
+  syncIssue();
+
+  // A new invoice can start from a job that has no invoice yet: a quiet
+  // strip above the form says so. Flow drafts it the way the invoicing rules
+  // do (client, Reference, lines) and links it to the job. An invoice with
+  // no job is fine too.
+  const fromJob = isNew && context.canIssue ? h('section', { class: 'fx-fromjob' },
+    h('div', { class: 'fx-fromjob__text' },
+      h('span', { class: 'fx-strong' }, 'Billing a job?'),
+      h('span', { class: 'fx-dim' }, 'Flow fills in the details.')),
+    h('button', { class: 'fx-btn', type: 'button', onclick: () => pickJob(ui) }, 'Choose a job')) : null;
+
+  // 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' },
@@ -636,18 +701,42 @@ 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' },
         h('section', { class: 'fx-card fx-invoice__head' },
@@ -748,7 +837,7 @@ 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' },
@@ -871,3 +960,51 @@ function showSent(button) {
   button.textContent = 'Sent to Xero';
   button.title = 'Flow sent this invoice to Xero.';
 }
+
+// The jobs a new invoice can start from: no invoice yet, newest first.
+const PICKABLE = new Set(['in_work', 'ready', 'pending']);
+
+async function pickJob(ui) {
+  const { h, flow, toast, go } = ui;
+  let jobs;
+  try {
+    jobs = (await flow('/api/invoicing/jobs?limit=500')).jobs.filter((job) => PICKABLE.has(job.view) && !job.invoiceId);
+  } catch (error) {
+    toast(error.message, 'danger');
+    return;
+  }
+  const search = h('input', { class: 'fx-input', type: 'search', placeholder: 'Find a client or practitioner', 'aria-label': 'Find a job' });
+  const rows = jobs.map((job) => {
+    const label = h('label', { class: 'fx-pick__row' },
+      h('input', { type: 'radio', name: 'job', value: job.id, required: true }),
+      h('span', { class: 'fx-pick__main' },
+        h('span', { class: 'fx-strong' }, job.contactName ?? 'No client yet'),
+        h('span', { class: 'fx-dim' }, [job.practitioner, job.shippedOn ? showDate(job.shippedOn) : null].filter(Boolean).join(' · '))),
+      h('span', { class: 'fx-num fx-strong' }, job.totalCents == null ? '—' : formatCents(job.totalCents)));
+    label.dataset.find = `${job.contactName ?? ''} ${job.practitioner ?? ''}`.toLowerCase();
+    return label;
+  });
+  const list = h('div', { class: 'fx-pick', role: 'radiogroup', 'aria-label': 'Jobs' },
+    rows.length ? rows : h('p', { class: 'fx-dim' }, 'Every job has an invoice already.'));
+  search.addEventListener('input', () => {
+    const q = search.value.trim().toLowerCase();
+    for (const row of rows) row.hidden = Boolean(q) && !row.dataset.find.includes(q);
+  });
+  const picked = await ui.dialog({
+    title: 'New invoice from a job',
+    body: h('div', { class: 'fx-pick__body' },
+      h('p', { class: 'fx-dim' }, 'Flow fills in the client, Reference and lines from the invoice rules, and links the invoice to the job.'),
+      search, list),
+    confirm: 'Make draft',
+  });
+  const jobId = picked?.get('job');
+  if (!jobId) return;
+  try {
+    const { invoice } = await flow(`/api/invoicing/jobs/${jobId}/draft`, { method: 'POST', body: '{}' });
+    toast('Draft invoice made from the job.', 'success');
+    go(`/invoices/${invoice.id}`, { replace: true });
+  } catch (error) {
+    const reasons = error.details?.reasons;
+    toast(reasons?.length ? `Not drafted: ${reasons.join('; ')}.` : error.message, 'danger');
+  }
+}

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;
+}