@arcforgelabs/flow 2026.10.48 → 2026.10.50

package/server/ui/invoicing.js

@@ -10,7 +10,7 @@ import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
 import { caseNumber } from '/assets/ui/job-board.js';
 import { jobChangeReview } from '/assets/ui/job-change.js';
-import { rowMenu } from '/assets/ui/kit.js';
+import { cardRows, rowMenu } from '/assets/ui/kit.js';
 import { isPhone, WIDTHS } from '/assets/ui/mobile.js';
 import { recordBar, watchPhonePrimary } from '/assets/ui/sidecar.js';
 import { columnTable, dateCell, fieldColumn, rowCells, viewSaver } from '/assets/ui/columns.js';
@@ -18,15 +18,17 @@ import { fieldGroup, fieldIdOf, filterCount, filterJobs, INVOICE_COLUMNS, invoic
 import { INVOICE_FILTER_FIELDS, INVOICE_FILTER_STATUSES, invoiceFilterKind, invoiceKindOf, invoiceValue, normaliseInvoicesView } from '/assets/ui/list-views.js';
 import { listPager, pager, PAGE_SIZES } from '/assets/ui/pager.js';
 import { savedViews } from '/assets/ui/saved-views.js';
+import { xeroContactActions } from '/assets/ui/xero-contact.js';
 import { findBox, today, viewBar } from '/assets/ui/view-bar.js';
 
 // The tabs, left to right (server/api/invoicing.js, TABS): Pending (a
 // person must look), Ready (checks pass), then the accounting system's
 // stages: Draft (a draft there, or on its way), Approved, Sent (to the
 // customer). With no accounting system, an issued invoice is Approved.
-const TABS = [['pending', 'Pending'], ['ready', 'Ready'], ['draft', 'Draft'], ['approved', 'Approved'], ['sent', 'Sent'], ['void', 'Void']];
+// Non-chargeable: work a lab's rule keeps in Flow and never bills.
+const TABS = [['pending', 'Pending'], ['ready', 'Ready'], ['draft', 'Draft'], ['approved', 'Approved'], ['sent', 'Sent'], ['non_chargeable', 'Non-chargeable'], ['void', 'Void']];
 const TAB_LABEL = Object.fromEntries(TABS);
-const TAB_TONE = { pending: 'danger', ready: 'success', draft: 'info', approved: 'info', sent: 'success', void: 'mute' };
+const TAB_TONE = { pending: 'danger', ready: 'success', draft: 'info', approved: 'info', sent: 'success', non_chargeable: 'mute', void: 'mute' };
 // Tab names an earlier Flow kept in this browser.
 const OLD_TAB = { problem: 'pending', to_check: 'ready', issued: 'approved' };
 const NUMBERED = ['draft', 'approved', 'sent', 'void'];
@@ -358,7 +360,8 @@ export async function renderInvoiceList(main, ui) {
         run: () => voidAll(voidable),
       });
     }
-    // A draft that was never issued is deleted on Pending and Ready. An issued
+    // A draft that was never issued is deleted on Pending, Ready and
+    // Non-chargeable. An issued
     // invoice is deleted only while Flow's copy of Xero says Draft. Approved
     // or paid stays hidden. A mix runs every ticked row and reports each one.
     const fresh = rows.filter((i) => i.status === 'draft' && i.issuedVersion === 0);
@@ -366,7 +369,7 @@ export async function renderInvoiceList(main, ui) {
     const xeroDraft = issuedXero.filter((i) => xeroById.get(i.id)?.state === 'draft');
     const xeroApproved = issuedXero.filter((i) => ['approved', 'part_paid', 'paid'].includes(xeroById.get(i.id)?.state));
     const deletable = [...fresh, ...xeroDraft, ...xeroApproved];
-    const onDraftTabs = ['pending', 'ready'].includes(state.status) && fresh.length;
+    const onDraftTabs = ['pending', 'ready', 'non_chargeable'].includes(state.status) && fresh.length;
     if (context.canIssue && (onDraftTabs || xeroDraft.length)) {
       danger.push({
         icon: 'trash-2', label: 'Delete', iconOnly: true, tone: 'danger', title: 'Delete',
@@ -553,6 +556,9 @@ export async function renderInvoiceList(main, ui) {
       ...(id === 'pending' && counts?.pending ? { 'data-tone': 'danger' } : {}),
       onclick: () => { if (state.status !== id) openTab(id); },
     }, label, h('span', { class: 'fx-tabs__count' }, String(counts?.[id] ?? 0)))));
+    // On a phone the tabs scroll, and a redraw starts them at the left: keep
+    // the selected one in view, so the page says which tab it shows.
+    tabs.children[TABS.findIndex(([id]) => id === state.status)]?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
   }
 
   async function draw(answer) {
@@ -586,7 +592,7 @@ export async function renderInvoiceList(main, ui) {
     const open = (href) => { saveNav({ ...readNav(), scrollY: window.scrollY, frameY: frame.body.scrollTop }); go(href); };
     const link = (href, label) => h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, label);
     const showProblem = state.status === 'pending';
-    const created = ['pending', 'ready'].includes(state.status);
+    const created = ['pending', 'ready', 'non_chargeable'].includes(state.status);
     // An invoice gets its number when it is sent or issued, so only the
     // Numbered tabs show a Number column; the others open on Client.
     const numbered = !created;
@@ -619,7 +625,7 @@ export async function renderInvoiceList(main, ui) {
     const statusCell = (invoice) => {
       const cell = h('span', {}, invoice.sending
         ? h('span', { class: 'fx-status', 'data-tone': 'info' }, 'Sending')
-        : h('span', { class: 'fx-status', 'data-tone': TAB_TONE[invoice.tab] ?? 'mute' }, TAB_LABEL[invoice.tab] ?? ''));
+        : h('span', { class: 'fx-status', 'data-tone': TAB_TONE[invoice.tab] ?? 'mute', title: TAB_LABEL[invoice.tab] ?? null }, TAB_LABEL[invoice.tab] ?? ''));
       if (!linked) statusCells.set(invoice.id, cell);
       return cell;
     };
@@ -914,6 +920,12 @@ function linkedCard(ui, invoice, accountingStatus = null) {
 
 // The first sentence of a problem: what is wrong. The red field shows where,
 // so the banner holds no how-to.
+// An invoice line on a phone (CardRows): Item, Qty and Remove; Description;
+// Unit price, Tax and Amount. An issued line: Description and Amount; Qty,
+// Unit price and Tax.
+const LINE_CARD = { areas: ['item item qty remove', 'desc desc desc desc', 'price gst amount amount'], columns: 'minmax(0, 1fr) minmax(0, 1fr) 72px 44px' };
+const LINE_CARD_READ = { areas: ['desc desc amount', 'qty price gst'], columns: 'repeat(3, minmax(0, 1fr))' };
+
 const brief = (text) => String(text ?? '').match(/^.*?[.!?](?=\s|$)/s)?.[0] ?? String(text ?? '');
 
 // A draft, or a new invoice before its first save.
@@ -989,7 +1001,7 @@ function draftView(invoice, ui, context, redraw) {
 
   const drawLines = () => {
     tbody.replaceChildren(...lines.map((line, index) => {
-      const amount = h('td', { class: 'fx-num fx-strong' });
+      const amount = h('td', { class: 'fx-num fx-strong', 'data-area': 'amount', 'data-label': 'Amount', 'data-end': '' });
       const showAmount = () => {
         amount.textContent = line.unitAmountCents == null || !(line.quantity > 0) ? '—' : formatCents(line.quantity * line.unitAmountCents);
       };
@@ -1027,13 +1039,13 @@ function draftView(invoice, ui, context, redraw) {
         onclick: () => { badLines.clear(); lines.splice(index, 1); if (!lines.length) lines.push({ description: '', quantity: 1, unitAmountCents: null, taxCode: 'GST', priceItemId: null }); drawLines(); preview(); },
       }, '×');
       return h('tr', {},
-        h('td', { class: 'fx-lines__item' }, item),
-        h('td', {}, description),
-        h('td', { class: 'fx-lines__qty' }, quantity),
-        h('td', { class: 'fx-lines__price' }, price),
-        h('td', { class: 'fx-lines__gst' }, gst),
+        h('td', { class: 'fx-lines__item', 'data-area': 'item', 'data-label': 'Item' }, item),
+        h('td', { 'data-area': 'desc', 'data-label': 'Description' }, description),
+        h('td', { class: 'fx-lines__qty', 'data-area': 'qty', 'data-label': 'Qty' }, quantity),
+        h('td', { class: 'fx-lines__price', 'data-area': 'price', 'data-label': 'Unit price' }, price),
+        h('td', { class: 'fx-lines__gst', 'data-area': 'gst', 'data-label': 'Tax' }, gst),
         amount,
-        h('td', {}, remove));
+        h('td', { 'data-area': 'remove' }, remove));
     }));
   };
   drawLines();
@@ -1101,7 +1113,10 @@ function draftView(invoice, ui, context, redraw) {
       if (!saved) return;
       const passes = saved.view === 'ready';
       const why = brief(saved.problems?.[0]?.message);
-      if (isNew) {
+      if (saved.view === 'non_chargeable') {
+        toast('Saved. It is Non-chargeable.', 'success');
+        if (isNew) go(`/invoices/${saved.id}`, { replace: true }); else redraw(saved);
+      } else if (isNew) {
         toast(passes ? 'Saved. It is Ready.' : `Saved. It is Pending. ${why}`, passes ? 'success' : 'warn');
         go(`/invoices/${saved.id}`, { replace: true });
       } else if (passes && keepsSave) {
@@ -1128,6 +1143,8 @@ function draftView(invoice, ui, context, redraw) {
   // and keeps it. A Pending draft has no send: fix its problem first.
   const to = invoice?.sendsTo ?? context.sendsTo ?? null;
   const ready = invoice?.view === 'ready';
+  // A lab's rule keeps a non-chargeable draft in Flow: nothing sends or approves it.
+  const nonChargeable = invoice?.view === 'non_chargeable';
   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', {
@@ -1152,7 +1169,7 @@ function draftView(invoice, ui, context, redraw) {
   }, emails ? `Send to ${to} and email` : `Send to ${to}`) : null;
   // With no accounting system, Approve gives the draft its number and locks
   // it. A changed job blocks it.
-  const issueButton = context.canIssue && !to ? h('button', {
+  const issueButton = context.canIssue && !to && !nonChargeable ? h('button', {
     class: 'fx-btn fx-btn--primary', type: 'button',
     onclick: async () => {
       const saved = await save();
@@ -1205,41 +1222,24 @@ function draftView(invoice, ui, context, redraw) {
   // The job changed after the invoice was made: its own banner shows what
   // changed. Other problems stay one line.
   const otherProblems = (invoice?.problems ?? []).filter((p) => !(jobChange && p.code === 'job_review'));
-  const offer = otherProblems.find((p) => p.code === 'xero_contact_missing' && p.offerCreate);
+  const offer = otherProblems.find((p) => ['xero_contact_missing', 'xero_contact_ambiguous'].includes(p.code) && (p.offerLink || p.offerCreate));
+  // A phone shows each problem's short name ("Client not in Xero") on one line.
+  const shorts = otherProblems.every((p) => p.short) ? [...new Set(otherProblems.map((p) => p.short))].join(', ') : null;
   const problemNotice = otherProblems.length
-    ? notice([...new Set(otherProblems.map((p) => brief(p.message)))].join(' '), 'danger', 'Problem.')
+    ? notice([...new Set(otherProblems.map((p) => brief(p.message)))].join(' '), 'danger', 'Problem.', { short: shorts })
     : null;
   const organisationId = context.organisations[0]?.id;
-  const createClient = offer && context.canIssue && invoice?.contact?.id && organisationId
-    ? h('button', {
-      class: 'fx-btn fx-btn--primary', type: 'button', title: 'Create this client in Xero',
-      onclick: async (event) => {
-        const button = event.currentTarget;
-        const name = invoice.contact.name;
-        const confirmed = await ui.dialog({
-          title: `Create ${name} in Xero?`,
-          body: h('p', {}, 'Flow adds this client to Xero from the contact.'),
-          confirm: 'Create',
-        });
-        if (!confirmed) return;
-        button.disabled = true;
-        try {
-          await flow('/api/xero/contacts', { method: 'POST', body: JSON.stringify({ organisationId, contactId: invoice.contact.id }) });
-          toast(`${name} is in Xero.`, 'success');
-          const body = await flow(`/api/invoicing/invoices/${invoice.id}`);
-          redraw(body.invoice);
-        } catch (error) {
-          toast(error.message, error.status === 429 ? 'info' : 'danger');
-          if (error.retryAfterMs) ui.holdButton(button, error.retryAfterMs);
-          else button.disabled = false;
-        }
-      },
-    }, 'Create')
-    : null;
+  // Link or Create the Xero client, then the invoice is checked again.
+  const clientActions = offer && context.canIssue && invoice?.contact?.id && organisationId
+    ? xeroContactActions(ui, {
+      organisationId, contact: invoice.contact, offerLink: offer.offerLink, offerCreate: offer.offerCreate,
+      done: async () => redraw((await flow(`/api/invoicing/invoices/${invoice.id}`)).invoice),
+    })
+    : [];
   const problems = [
     // Accepting changes the draft for the business: owners and admins only.
     jobChange ? jobChangeReview(ui, jobChange, { money: formatCents, canAccept: context.canIssue, unsaved: changed, done: redraw }) : null,
-    problemNotice ? (createClient ? h('div', { class: 'fx-offer' }, problemNotice, createClient) : problemNotice) : null,
+    problemNotice ? (clientActions.length ? h('div', { class: 'fx-offer' }, problemNotice, ...clientActions) : problemNotice) : null,
   ];
   // A red field names the banner as its reason (for a screen reader).
   const banner = problemNotice;
@@ -1252,7 +1252,7 @@ function draftView(invoice, ui, context, redraw) {
 
   const previewBtn = isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.');
   const showAccept = Boolean(jobChange?.canAccept && context.canIssue);
-  const header = ui.pageHeader(isNew ? 'New invoice' : ready ? 'Ready invoice' : 'Pending invoice', {
+  const header = ui.pageHeader(isNew ? 'New invoice' : ready ? 'Ready invoice' : nonChargeable ? 'Non-chargeable invoice' : 'Pending invoice', {
     actions: [fromJob, deleteButton, previewBtn, saveButton, sendButton ?? issueButton].filter(Boolean),
   });
   const primaryOf = () => (showAccept ? null : (sendButton ?? issueButton ?? (saveButton.hidden ? null : saveButton)));
@@ -1270,6 +1270,7 @@ function draftView(invoice, ui, context, redraw) {
     chrome.pager,
     header,
     draftNote(to, invoice) ? ui.notice(draftNote(to, invoice), 'warn') : null,
+    nonChargeable ? ui.notice(brief(invoice.nonChargeable?.[0]?.message ?? 'Non-chargeable.')) : null,
     ...problems,
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
@@ -1279,12 +1280,12 @@ function draftView(invoice, ui, context, redraw) {
           h('label', { class: 'fx-field' }, h('span', { class: 'fx-label' }, 'Due date'), dueDate)),
         h('section', { class: 'fx-card fx-lines' },
           datalist,
-          h('table', { class: 'fx-lines__table' },
+          cardRows(h('table', { class: 'fx-lines__table' },
             h('thead', {}, h('tr', {},
               h('th', {}, 'Item'), 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'),
               h('th', {}, h('span', { class: 'fx-sr' }, 'Remove')))),
-            tbody),
+            tbody), LINE_CARD),
           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))),
@@ -1452,14 +1453,14 @@ function issuedView(invoice, ui, context, redraw) {
             h('div', {}, h('dt', { class: 'fx-label' }, 'Reference'), h('dd', {}, invoice.reference ?? '—')),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Date'), 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' },
+          cardRows(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'))),
             h('tbody', {}, invoice.lines.map((line) => h('tr', {},
-              h('td', {}, line.description),
-              h('td', { class: 'fx-num' }, String(line.quantity)),
-              h('td', { class: 'fx-num' }, formatCents(line.unitAmountCents)),
-              h('td', { class: 'fx-dim' }, line.taxCode === 'GST' ? 'GST' : 'GST free'),
-              h('td', { class: 'fx-num fx-strong' }, formatCents(line.lineAmountCents)))))),
+              h('td', { 'data-area': 'desc' }, line.description),
+              h('td', { class: 'fx-num', 'data-area': 'qty', 'data-label': 'Qty' }, String(line.quantity)),
+              h('td', { class: 'fx-num', 'data-area': 'price', 'data-label': 'Unit price' }, formatCents(line.unitAmountCents)),
+              h('td', { class: 'fx-dim', 'data-area': 'gst', 'data-label': 'Tax' }, line.taxCode === 'GST' ? 'GST' : 'GST free'),
+              h('td', { class: 'fx-num fx-strong', 'data-area': 'amount', 'data-end': '' }, formatCents(line.lineAmountCents)))))), LINE_CARD_READ),
           h('div', { class: 'fx-lines__foot' }, h('span'), totalsBox(ui, invoice)))),
       h('aside', { class: 'fx-invoice__aside' },
         linkedHost,
@@ -1568,39 +1569,23 @@ function showSent(button) {
 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({
+  const { flow, toast, go } = ui;
+  const job = await ui.pickOne({
     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),
+    intro: 'Flow fills in the client, Reference and lines from the invoice rules, and links the invoice to the job.',
+    label: 'Jobs',
+    find: 'Find a client or practitioner',
+    load: async () => (await flow('/api/invoicing/jobs?limit=500')).jobs.filter((row) => PICKABLE.has(row.view) && !row.invoiceId),
+    item: (row) => ({
+      value: row.id,
+      title: row.contactName ?? 'No client yet',
+      meta: [row.practitioner, row.shippedOn ? showDate(row.shippedOn) : null].filter(Boolean).join(' · '),
+      end: row.totalCents == null ? '—' : formatCents(row.totalCents),
+    }),
+    empty: 'Every job has an invoice already.',
     confirm: 'Make draft',
   });
-  const jobId = picked?.get('job');
+  const jobId = job?.id;
   if (!jobId) return;
   try {
     const { invoice } = await flow(`/api/invoicing/jobs/${jobId}/draft`, { method: 'POST', body: '{}' });

package/server/ui/job-board.js

@@ -42,7 +42,7 @@ export function orderStatuses(statuses = [], jobs = []) {
 }
 
 export const INVOICE_STAGES = {
-  drafted: 'Drafted', problem: 'Pending', ready: 'Ready to invoice', invoiced: 'Invoiced', paid: 'Paid',
+  drafted: 'Drafted', problem: 'Pending', ready: 'Ready to invoice', invoiced: 'Invoiced', non_chargeable: 'Non-chargeable', paid: 'Paid',
 };
 
 const PROBLEM_VIEWS = ['pending', 'review_required', 'held'];
@@ -58,6 +58,7 @@ const isRule = (reason) => reason !== 'the job is not marked ready to invoice';
 //                     that stops the draft, or a problem with the draft
 //   Ready to invoice  a person marked the draft ready
 //   Invoiced          issued, sent, or in the accounting system
+//   Non-chargeable    a lab's rule keeps the draft in Flow, never billed
 //   Paid              paid in full
 export function invoiceStage(o) {
   if (!o || o.view === 'in_work') return null;
@@ -66,6 +67,7 @@ export function invoiceStage(o) {
   if (o.view === 'invoiced') return 'invoiced';
   if (o.invoiceView === 'problem' || o.invoiceStatus === 'void') return 'problem';
   if (o.invoiceStatus === 'issued') return 'invoiced';
+  if (o.invoiceView === 'non_chargeable') return 'non_chargeable';
   if (o.invoiceView === 'ready') return 'ready';
   if (o.view === 'ready') return (o.waitingFor ?? []).some(isRule) ? 'problem' : 'drafted';
   if (o.view === 'drafted') return 'drafted';

package/server/ui/jobs.js

@@ -50,7 +50,7 @@ const ACTIVITY = {
 const BY = { person: 'A person', automation: 'An automation' };
 // Grouped by invoice stage: a job with no invoice stage yet is still in work.
 const STAGE_GROUPS = { in_work: 'In work', ...INVOICE_STAGES };
-const STAGE_RANK = { 'In work': 0, Drafted: 2, Problem: 2, 'Ready to invoice': 4, Invoiced: 5, Paid: 6 };
+const STAGE_RANK = { 'In work': 0, Drafted: 2, Problem: 2, 'Ready to invoice': 4, Invoiced: 5, 'Non-chargeable': 5, Paid: 6 };
 
 const showDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short' }) : '—');
 const fullDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }) : '—');

package/server/ui/kit.js

@@ -149,10 +149,31 @@ export function sectionTitle(text, help = null) {
   return h('h2', { class: 'fx-set__title' }, text, help ? helpLink(help) : null);
 }
 
-export function notice(text, tone = 'info', title = null) {
+// With `short`, a phone shows only that one line ("Client not in Xero") in
+// place of the title and text.
+export function notice(text, tone = 'info', title = null, { short = null } = {}) {
   return applyPhoneRule(h('div', { class: 'fx-notice', 'data-tone': tone, role: tone === 'danger' ? 'alert' : 'status' },
-    title ? h('strong', {}, title) : null,
-    h('span', {}, text)), 'notice');
+    title ? h('strong', { class: short ? 'fx-notice__long' : null }, title) : null,
+    h('span', { class: short ? 'fx-notice__long' : null }, text),
+    short ? h('span', { class: 'fx-notice__short' }, short) : null), 'notice');
+}
+
+// A table that is a list of small cards on a phone (CardRows card). On a
+// tablet and desk it stays a table. `areas` places each cell on the card
+// (CSS grid-template-areas, one string per line) and `columns` sizes the
+// card's columns. A cell names its place with `data-area` and its column
+// name with `data-label` (shown above it on a phone). Rows drawn later are
+// placed too.
+export function cardRows(table, { areas, columns }) {
+  table.classList.add('fx-cardrows');
+  table.style.setProperty('--fx-cardrows-areas', areas.map((line) => `"${line}"`).join(' '));
+  table.style.setProperty('--fx-cardrows-columns', columns);
+  const place = () => {
+    for (const cell of table.querySelectorAll('td[data-area]')) cell.style.gridArea = cell.dataset.area;
+  };
+  place();
+  if (typeof MutationObserver === 'function') new MutationObserver(place).observe(table, { childList: true, subtree: true });
+  return applyPhoneRule(table, 'cardRows');
 }
 
 // A field that fails a check glows red, like a required field, until the
@@ -220,17 +241,87 @@ export function dialog({ title, body, confirm, tone = 'primary', choices = null
   });
 }
 
-// One setting, laid out the same on every settings screen: a short name, one
-// line of smaller text under it, and the control on the right. Longer help
-// lives behind a link, not here. A wide control (a grid of choices) sits on
-// its own line under the name. `tone: 'danger'` marks a row that needs a person.
-export function settingRow({ label, hint, control, wide = false, tone = null }) {
+// A dialog that picks one row of a long list (Pick card). A search box over
+// the list; `load(q)` answers the rows for its text (once with '' on open, and
+// again as the person types when `remote`; else the rows filter here).
+// `item(row)` draws a row as { value, title, meta, end }. Answers the picked
+// row, or null on Cancel.
+export async function pickOne({ title, intro = null, label, find = 'Find', load, item, empty, confirm, remote = false }) {
+  const search = h('input', { class: 'fx-input', type: 'search', placeholder: find, 'aria-label': find });
+  const list = h('div', { class: 'fx-pick', role: 'radiogroup', 'aria-label': label }, h('div', { class: 'fx-skeleton' }));
+  let rows = [];
+  const draw = (found) => {
+    rows = found.map((row) => {
+      const { value, title: name, meta = null, end = null } = item(row);
+      const element = h('label', { class: 'fx-pick__row' },
+        h('input', { type: 'radio', name: 'pick', value: String(value), required: true }),
+        h('span', { class: 'fx-pick__main' },
+          h('span', { class: 'fx-strong' }, name),
+          meta ? h('span', { class: 'fx-dim' }, meta) : null),
+        end == null ? h('span') : h('span', { class: 'fx-num fx-strong' }, end));
+      element.dataset.find = `${name} ${meta ?? ''}`.toLowerCase();
+      return { row, value: String(value), element };
+    });
+    list.replaceChildren(...(rows.length ? rows.map((r) => r.element) : [h('p', { class: 'fx-dim' }, empty)]));
+  };
+  let asked = 0;
+  const fill = async (q) => {
+    const turn = ++asked;
+    let found;
+    try {
+      found = await load(q);
+    } catch (error) {
+      found = [];
+      toast(error.message, 'danger');
+    }
+    if (turn === asked) draw(found);
+  };
+  let wait = null;
+  search.addEventListener('input', () => {
+    const q = search.value.trim().toLowerCase();
+    if (remote) {
+      clearTimeout(wait);
+      wait = setTimeout(() => fill(q), 250);
+      return;
+    }
+    for (const r of rows) r.element.hidden = Boolean(q) && !r.element.dataset.find.includes(q);
+  });
+  fill('');
+  const picked = await dialog({
+    title,
+    body: applyPhoneRule(h('div', { class: 'fx-pick__body' }, intro ? h('p', { class: 'fx-dim' }, intro) : null, search, list), 'pickOne'),
+    confirm,
+  });
+  clearTimeout(wait);
+  const value = picked?.get('pick');
+  return value ? rows.find((r) => r.value === value)?.row ?? null : null;
+}
+
+// One setting, laid out the same on every settings screen: a short name and
+// the control on the right. `hint` is a short status line under the name
+// ("3 to check"), never an explanation. `help` is the explanation: a ? beside
+// the name says it on hover, and a press shows it under the name (a phone has
+// no hover). A wide control (a grid of choices) sits on its own line under the
+// name. `tone: 'danger'` marks a row that needs a person.
+export function settingRow({ label, hint, help = null, control, wide = false, tone = null }) {
   const target = control?.matches?.('input, select, textarea') ? control : control?.querySelector?.('input:not([type=color]), select, textarea');
   const id = target ? (target.id ||= `fx-set-${++settingRow.next}`) : null;
+  const helpLine = help ? h('p', { class: 'fx-setting__hint fx-setting__help', hidden: true }, help) : null;
+  const helpButton = help ? named(h('button', {
+    class: 'fx-help', type: 'button', 'aria-expanded': 'false',
+    onclick: (event) => {
+      const open = helpLine.hidden;
+      helpLine.hidden = !open;
+      event.currentTarget.setAttribute('aria-expanded', String(open));
+    },
+  }, lucide(h, 'circle-help')), `About ${label}`, help) : null;
   return applyPhoneRule(h('div', { class: `fx-setting${wide ? ' fx-setting--wide' : ''}`, 'data-tone': tone },
     h('div', { class: 'fx-setting__text' },
-      id ? h('label', { class: 'fx-setting__name', for: id }, label) : h('span', { class: 'fx-setting__name' }, label),
-      hint ? h('p', { class: 'fx-setting__hint' }, hint) : null),
+      h('span', { class: 'fx-setting__head' },
+        id ? h('label', { class: 'fx-setting__name', for: id }, label) : h('span', { class: 'fx-setting__name' }, label),
+        helpButton),
+      hint ? h('p', { class: 'fx-setting__hint' }, hint) : null,
+      helpLine),
     h('div', { class: 'fx-setting__control' }, control)), 'settingRow');
 }
 settingRow.next = 0;

package/server/ui/line-mappings.js

@@ -9,14 +9,12 @@
 const money = (cents) => (cents === null || cents === undefined ? '' : `$${(cents / 100).toFixed(2)}`);
 
 export function lineMappingSection(ui) {
-  const { h, flow, toast, notice, me } = ui;
+  const { h, flow, toast, notice, me, settingRow } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const body = h('div', {}, h('div', { class: 'fx-skeleton' }));
   const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, 'Price codes'), body);
 
-  const row = (name, hint, control) => h('div', { class: 'fx-set__row' },
-    h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, name), h('span', { class: 'fx-set__hint' }, hint)),
-    h('div', { class: 'fx-set__control' }, control));
+  const row = (label, hint, control) => settingRow({ label, hint, control });
 
   async function load() {
     let labels;

package/server/ui/mobile.js

@@ -68,6 +68,26 @@ export const RULES = {
     "mark": false,
     "card": "Button"
   },
+  "cardRows": {
+    "component": "cardRows",
+    "direction": "card per row",
+    "phone": {
+      "layout": "cards"
+    },
+    "tablet": {
+      "layout": "table"
+    },
+    "desk": {
+      "layout": "table"
+    },
+    "touch": 44,
+    "pageOverflow": "none",
+    "screens": [
+      "invoice",
+      "invoice-issued"
+    ],
+    "card": "CardRows"
+  },
   "columnTable": {
     "component": "columnTable",
     "direction": "two-line row",
@@ -281,6 +301,7 @@ export const RULES = {
     },
     "touch": 44,
     "pageOverflow": "none",
+    "scrollX": ".fx-frame, .fx-board, .fx-board-tabs",
     "screens": [
       "jobs-board",
       "jobs-list",
@@ -308,6 +329,7 @@ export const RULES = {
     },
     "touch": 44,
     "pageOverflow": "none",
+    "scrollX": ".fx-toolbar__tools",
     "screens": [
       "jobs-board",
       "jobs-list",
@@ -366,7 +388,8 @@ export const RULES = {
     "component": "notice",
     "direction": "note",
     "phone": {
-      "layout": "note"
+      "layout": "note",
+      "short": "one line in place of the title and text"
     },
     "tablet": {
       "layout": "note"
@@ -376,7 +399,9 @@ export const RULES = {
     },
     "touch": 44,
     "pageOverflow": "none",
-    "screens": [],
+    "screens": [
+      "invoice-offer"
+    ],
     "card": "Notice"
   },
   "optionPill": {
@@ -452,6 +477,23 @@ export const RULES = {
     "selector": ".fx-pager",
     "card": "Pager"
   },
+  "pickOne": {
+    "component": "pickOne",
+    "direction": "sheet list",
+    "phone": {
+      "layout": "sheet"
+    },
+    "tablet": {
+      "layout": "dialog"
+    },
+    "desk": {
+      "layout": "dialog"
+    },
+    "touch": 44,
+    "pageOverflow": "none",
+    "screens": [],
+    "card": "Pick"
+  },
   "rowMenu": {
     "component": "rowMenu",
     "direction": "menu",
@@ -511,7 +553,9 @@ export const RULES = {
     "touch": 44,
     "pageOverflow": "none",
     "screens": [
-      "appearance"
+      "appearance",
+      "integration-xero",
+      "integration-seazona"
     ],
     "card": "SettingRow"
   },
@@ -541,13 +585,14 @@ export const RULES = {
       "layout": "scroll"
     },
     "tablet": {
-      "layout": "tabs"
+      "layout": "scroll"
     },
     "desk": {
       "layout": "tabs"
     },
     "touch": 44,
     "pageOverflow": "none",
+    "scrollX": ".fx-tabs",
     "screens": [
       "invoices-ready",
       "invoices-pending",

package/server/ui/price-list.js

@@ -34,7 +34,7 @@ const toCents = (text) => {
 };
 
 export async function renderPriceList(main, ui) {
-  const { h, flow, toast, notice, dialog, pageHeader, me } = ui;
+  const { h, flow, toast, notice, dialog, pageHeader, me, settingRow } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const host = h('div', { class: 'fx-price' }, h('div', { class: 'fx-skeleton' }));
   let view = normaliseListView(me?.views?.['price-list'], PRICE_COLUMNS);
@@ -71,9 +71,7 @@ export async function renderPriceList(main, ui) {
     }
   }
 
-  const row = (name, hint, control) => h('div', { class: 'fx-set__row' },
-    h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, name), hint),
-    h('div', { class: 'fx-set__control fx-rule__controls' }, control));
+  const row = (label, hint, control) => settingRow({ label, hint, control });
 
   const findingText = (f) => {
     const name = systemName(f.system);
@@ -165,7 +163,7 @@ export async function renderPriceList(main, ui) {
       else select.value = saved;
       select.disabled = disabled;
     });
-    return row('Line price from', h('span', { class: 'fx-set__hint' }, 'Where an invoice line takes its price.'), select);
+    return row('Line price from', 'Where an invoice line takes its price.', select);
   }
 
   function draw() {