@arcforgelabs/flow 2026.10.45 → 2026.10.47

package/server/ui/kit.js

@@ -5,6 +5,7 @@
 // functions, so a card is the real thing. Reuse one or give it an option;
 // never copy it into a page (AGENTS.md, "UI: reuse first").
 import { lucide } from '/assets/ui/custom-fields.js';
+import { applyPhoneRule } from './mobile.js';
 import { named } from '/assets/ui/tip.js';
 
 // h('p', { class: 'x', onclick }, 'text', child) — children are text or nodes.
@@ -53,32 +54,38 @@ export function holdButton(button, ms) {
 // `count` is a live number beside the name (2 to check); `help` is a docs
 // link, an icon with its name as a tip.
 export function pageHeader(title, { count = null, help = null, actions = [] } = {}) {
-  return h('header', { class: 'fx-ph' },
+  return applyPhoneRule(h('header', { class: 'fx-ph' },
     h('div', { class: 'fx-ph__text' },
       h('h1', { class: 'fx-title' }, title),
       count != null ? h('span', { class: 'fx-ph__count' }, count) : null,
       help ? helpLink(help) : null),
-    actions.length ? h('div', { class: 'fx-ph__actions' }, actions) : null);
+    actions.length ? h('div', { class: 'fx-ph__actions' }, actions) : null), 'pageHeader');
 }
 
 // The top of a list page (Jobs, Invoices, Reconcile), laid out the same on
 // every list and in Board and List alike, so nothing moves when a person
-// switches: the title row, a row for saved view tabs (`views`: the page's
-// savedViews element, else an empty slot that stays hidden), then one toolbar with `start` at the left (tabs, Group,
-// Sort, Filter) and `end` at the right (search, Board/List), then the page's
-// `actions` (New invoice) last, as Claude's own lists do. `line` draws the
-// rule that tabs sit on; `sticky` keeps the toolbar at the top while the rows
-// scroll up under it, with a shadow once they do. Append `nodes` to the page.
-export function listHead(title, { count = null, help = null, actions = [], start = [], end = [], line = false, sticky = false, views: tabs = null } = {}) {
+// switches: the title row, then one toolbar with `start` at the left (tabs,
+// Group, Sort, Filter) and `end` at the right (search, Board/List), then the
+// page's `actions` (New invoice) last, as Claude's own lists do. `controls`
+// (the page's Group, Sort and Filter) sit with the saved view tabs at their
+// right (`views`: the page's savedViews element, else an empty slot that
+// stays hidden), at the end of `start`, or of `end` when `controlsAt` is
+// 'end'. `line` draws the rule that tabs sit on; `sticky` keeps the toolbar
+// at the top while the rows scroll up under it, with a shadow once they do.
+// Append `nodes` to the page.
+export function listHead(title, { count = null, help = null, actions = [], start = [], end = [], controls = null, controlsAt = 'start', line = false, sticky = false, views: tabs = null } = {}) {
   const views = tabs ?? h('div', { class: 'fx-views', role: 'group', 'aria-label': 'Views', hidden: true });
-  const bar = h('div', { class: 'fx-listhead', 'data-sticky': sticky },
-    h('div', { class: `fx-toolbar${line ? '' : ' fx-toolbar--plain'}` }, start, h('div', { class: 'fx-toolbar__end' }, end, actions)));
+  const tools = h('div', { class: 'fx-toolbar__tools' }, controls, views);
+  const left = controlsAt === 'end' ? [start].flat() : [start, tools].flat();
+  const right = controlsAt === 'end' ? [tools, end].flat() : [end].flat();
+  const bar = applyPhoneRule(h('div', { class: 'fx-listhead', 'data-sticky': sticky },
+    h('div', { class: `fx-toolbar${line ? '' : ' fx-toolbar--plain'}` }, left, h('div', { class: 'fx-toolbar__end' }, right, actions))), 'listHead');
   const edge = sticky ? h('div', { class: 'fx-listhead__edge', 'aria-hidden': 'true' }) : null;
   if (edge && typeof IntersectionObserver === 'function') {
     const top = window.matchMedia?.('(max-width: 820px)').matches ? 61 : 1;
     new IntersectionObserver(([entry]) => bar.toggleAttribute('data-stuck', !entry.isIntersecting), { rootMargin: `-${top}px 0px 0px 0px` }).observe(edge);
   }
-  return { nodes: [pageHeader(title, { count, help }), views, edge, bar].filter(Boolean), views, bar };
+  return { nodes: [pageHeader(title, { count, help }), edge, bar].filter(Boolean), views, bar };
 }
 
 // The window a list or board sits in under listHead, as HubSpot's: on a
@@ -93,7 +100,7 @@ export function listFrame(main, content) {
   const tools = h('div', { class: 'fx-frame__tools' });
   const body = h('div', { class: 'fx-frame__body' }, content);
   const view = h('div', { class: 'fx-frame__view' }, body);
-  const element = h('section', { class: 'fx-frame' }, view, h('footer', { class: 'fx-frame__foot' }, count, tools));
+  const element = applyPhoneRule(h('section', { class: 'fx-frame' }, view, h('footer', { class: 'fx-frame__foot' }, count, tools)), 'listFrame');
   edgeFade(body, { target: view, edges: ['bottom', 'left', 'right'] });
   return { element, body, view, tools, count: (text) => { count.textContent = text ?? ''; } };
 }
@@ -143,9 +150,9 @@ export function sectionTitle(text, help = null) {
 }
 
 export function notice(text, tone = 'info', title = null) {
-  return h('div', { class: 'fx-notice', 'data-tone': tone, role: tone === 'danger' ? 'alert' : 'status' },
+  return applyPhoneRule(h('div', { class: 'fx-notice', 'data-tone': tone, role: tone === 'danger' ? 'alert' : 'status' },
     title ? h('strong', {}, title) : null,
-    h('span', {}, text));
+    h('span', {}, text)), 'notice');
 }
 
 // A field that fails a check glows red, like a required field, until the
@@ -153,37 +160,63 @@ export function notice(text, tone = 'info', title = null) {
 // `on` false clears it. Answers the field.
 export function fieldError(field, on = true) {
   if (!on) { field.removeAttribute('aria-invalid'); return field; }
+  applyPhoneRule(field, 'fieldError');
   field.setAttribute('aria-invalid', 'true');
   field.addEventListener('input', () => field.removeAttribute('aria-invalid'), { once: true });
   return field;
 }
 
-export function toast(text, tone = 'info') {
+// A short result after an action. With `stay: true` it stays until the person
+// closes it (for a danger a failed press must not pass unseen).
+export function toast(text, tone = 'info', { stay = false } = {}) {
   const region = document.getElementById('toasts');
-  const item = h('div', { class: 'fx-toast', 'data-tone': tone, role: 'status' }, text);
+  const item = applyPhoneRule(h('div', {
+    class: stay ? 'fx-toast fx-toast--stay' : 'fx-toast',
+    'data-tone': tone,
+    role: tone === 'danger' ? 'alert' : 'status',
+  }, h('span', { class: 'fx-toast__text' }, text)), 'toast');
+  if (stay) {
+    item.append(h('button', {
+      type: 'button', class: 'fx-toast__close', 'aria-label': 'Close', title: 'Close',
+      onclick: () => item.remove(),
+    }, lucide(h, 'x')));
+  } else {
+    setTimeout(() => item.remove(), 4200);
+  }
   region.append(item);
-  setTimeout(() => item.remove(), 4200);
 }
 
 // A modal built on <dialog>: resolves with the button's value, or null.
-export function dialog({ title, body, confirm, tone = 'primary' }) {
+export function dialog({ title, body, confirm, tone = 'primary', choices = null }) {
   return new Promise((resolve) => {
+    const choiceList = choices
+      ? h('div', { class: 'fx-sheet__choices', role: 'group', 'aria-label': title },
+        choices.map((choice) => h('button', { class: 'fx-sheet__choice', type: 'submit', value: choice.value },
+          h('span', {}, choice.label),
+          choice.detail == null ? null : h('span', { class: 'fx-tabs__count' }, String(choice.detail)))))
+      : null;
+    const actions = choices ? null : h('div', { class: 'fx-dialog__actions' },
+      h('button', { class: 'fx-btn fx-btn--ghost', value: 'cancel', type: 'submit', formnovalidate: true }, 'Cancel'),
+      h('button', { class: `fx-btn fx-btn--${tone}`, value: 'ok', type: 'submit' }, confirm));
     const form = h('form', { method: 'dialog', class: 'fx-dialog__form' },
       h('h2', { class: 'fx-dialog__title' }, title),
-      body,
-      h('div', { class: 'fx-dialog__actions' },
-        h('button', { class: 'fx-btn fx-btn--ghost', value: 'cancel', type: 'submit', formnovalidate: true }, 'Cancel'),
-        h('button', { class: `fx-btn fx-btn--${tone}`, value: 'ok', type: 'submit' }, confirm)));
-    const element = h('dialog', { class: 'fx-dialog' }, form);
+      choiceList ?? body,
+      actions);
+    const element = applyPhoneRule(h('dialog', { class: 'fx-dialog' }, form), 'dialog');
     element.addEventListener('close', () => {
-      const ok = element.returnValue === 'ok';
-      const data = ok ? new FormData(form) : null;
+      const value = element.returnValue;
       element.remove();
-      resolve(ok ? data : null);
+      if (choices) {
+        resolve(value && value !== 'cancel' ? value : null);
+        return;
+      }
+      const ok = value === 'ok';
+      resolve(ok ? new FormData(form) : null);
     });
+    if (choices) element.addEventListener('click', (event) => { if (event.target === element) element.close(); });
     document.body.append(element);
     element.showModal();
-    element.querySelector('input, select, button[value="ok"]')?.focus();
+    element.querySelector(choices ? '.fx-sheet__choice' : 'input, select, button[value="ok"]')?.focus();
   });
 }
 
@@ -194,11 +227,11 @@ export function dialog({ title, body, confirm, tone = 'primary' }) {
 export function settingRow({ label, hint, 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;
-  return h('div', { class: `fx-setting${wide ? ' fx-setting--wide' : ''}`, 'data-tone': tone },
+  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('div', { class: 'fx-setting__control' }, control));
+    h('div', { class: 'fx-setting__control' }, control)), 'settingRow');
 }
 settingRow.next = 0;
 
@@ -206,26 +239,126 @@ settingRow.next = 0;
 
 let rowMenus = 0;
 
+function menuGlyph(icon) {
+  if (icon instanceof Node) return icon.isConnected ? icon.cloneNode(true) : icon;
+  return icon ? lucide(h, icon) : null;
+}
+
 // A row's ⋯ menu, as on the Custom fields page. The menu lines up with the
 // button's right edge; `align: 'start'` lines it up with its left edge.
-// `trigger` swaps the ⋯ icon for the given contents (the sidebar's More).
-export function rowMenu(label, items, { trigger = null, className = 'fx-cfm__more', align = 'end' } = {}) {
+// `place: 'side'` floats it to the right of the button (the sidebar's More),
+// and moves focus into the menu and back to the button on close.
+// `trigger` swaps the ⋯ icon for the given contents.
+// An item is `{ icon, text, run, tone }` or `'-'` (a line). `icon` is a Lucide
+// name or a node. `trailing` is a control at the row's end (the pin) that
+// does not close the menu: `{ icon, label, pressed, run, locked }`. `locked`
+// draws the icon and does not take a click. `items` may be a function, read
+// again each time the menu opens. `panel.refresh()` redraws it while open.
+export function rowMenu(label, items, { trigger = null, className = 'fx-cfm__more', align = 'end', place = 'below' } = {}) {
   const id = `fx-row-menu-${++rowMenus}`;
-  const button = h('button', { class: className, type: 'button', 'aria-label': label, popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, trigger ?? lucide(h, 'ellipsis'));
-  const panel = h('div', { class: 'fx-pop', id, popover: 'auto', role: 'menu' });
-  panel.addEventListener('toggle', (event) => {
-    button.setAttribute('aria-expanded', String(event.newState === 'open'));
-    if (event.newState !== 'open') return;
-    const close = () => panel.hidePopover();
-    panel.replaceChildren(...items.map((entry) => (entry === '-'
-      ? h('div', { class: 'fx-pop__sep' })
-      : h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', 'data-tone': entry.tone, onclick: () => { close(); entry.run(); } },
-        h('span', { class: 'fx-pop__tick' }, lucide(h, entry.icon)), h('span', {}, entry.text)))));
+  const button = applyPhoneRule(h('button', { class: className, type: 'button', 'aria-label': label, popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' }, trigger ?? lucide(h, 'ellipsis')), 'rowMenu');
+  const panel = h('div', { class: place === 'side' ? 'fx-pop fx-pop--side' : 'fx-pop', id, popover: 'auto', role: 'menu' });
+  const entries = () => (typeof items === 'function' ? items() : items);
+  let picking = false;
+
+  function renderEntry(entry) {
+    if (entry === '-') return h('div', { class: 'fx-pop__sep' });
+    const item = h('button', {
+      type: 'button', class: 'fx-pop__item', role: 'menuitem', 'data-tone': entry.tone,
+      onclick: () => { picking = true; panel.hidePopover(); entry.run(); },
+    }, h('span', { class: 'fx-pop__tick' }, menuGlyph(entry.icon)), h('span', {}, entry.text));
+    if (!entry.trailing) return item;
+    const trail = entry.trailing;
+    const mark = menuGlyph(trail.icon);
+    const control = trail.locked
+      ? h('span', { class: 'fx-pop__pin fx-pop__pin--fixed', role: 'img', 'aria-label': trail.label }, mark)
+      : h('button', {
+        type: 'button', class: 'fx-pop__pin', 'aria-label': trail.label, 'aria-pressed': trail.pressed ? 'true' : 'false',
+        onclick: (event) => { event.stopPropagation(); trail.run(); },
+      }, mark);
+    return h('div', { class: 'fx-pop__row', role: 'none' }, item, control);
+  }
+
+  function placePanel() {
     const at = button.getBoundingClientRect();
+    const margin = 8;
+    const narrow = place === 'side' && window.matchMedia('(max-width: 820px)').matches;
+    if (narrow) {
+      // On a phone the sidebar is the slide-out. The menu stays inside it.
+      const drawer = button.closest('.fx-nav')?.getBoundingClientRect();
+      const left = Math.round((drawer?.left ?? at.left) + margin);
+      const width = Math.max(160, Math.round((drawer?.width ?? at.width) - margin * 2));
+      panel.style.width = `${width}px`;
+      panel.style.minWidth = '0';
+      let top = Math.round(at.bottom + 6);
+      if (top + panel.offsetHeight > innerHeight - margin) top = Math.max(margin, Math.round(innerHeight - margin - panel.offsetHeight));
+      panel.style.top = `${top}px`;
+      panel.style.left = `${left}px`;
+      return;
+    }
+    panel.style.width = '';
+    panel.style.minWidth = '';
+    if (place === 'side') {
+      const gap = 8;
+      let left = Math.round(at.right + gap);
+      if (left + panel.offsetWidth > innerWidth - margin) left = Math.round(at.left - gap - panel.offsetWidth);
+      panel.style.left = `${Math.max(margin, Math.min(left, innerWidth - panel.offsetWidth - margin))}px`;
+      let top = Math.round(at.top);
+      panel.style.top = `${Math.max(margin, Math.min(top, innerHeight - panel.offsetHeight - margin))}px`;
+      return;
+    }
     panel.style.top = `${Math.round(at.bottom + 6)}px`;
     const left = align === 'start' ? at.left : at.right - panel.offsetWidth;
-    panel.style.left = `${Math.round(Math.max(8, Math.min(left, innerWidth - panel.offsetWidth - 8)))}px`;
+    panel.style.left = `${Math.round(Math.max(margin, Math.min(left, innerWidth - panel.offsetWidth - margin)))}px`;
+  }
+
+  function draw(keepFocus) {
+    const active = document.activeElement;
+    const row = active?.closest?.('.fx-pop__row');
+    const text = row?.querySelector('[role="menuitem"]')?.textContent?.trim() ?? '';
+    const onPin = Boolean(active?.classList?.contains('fx-pop__pin'));
+    panel.replaceChildren(...entries().map(renderEntry));
+    if (!keepFocus || !text) return;
+    const next = [...panel.querySelectorAll('.fx-pop__row')].find((candidate) => candidate.querySelector('[role="menuitem"]')?.textContent?.trim() === text);
+    (onPin ? next?.querySelector('.fx-pop__pin') : next?.querySelector('[role="menuitem"]'))?.focus();
+  }
+
+  panel.refresh = () => {
+    if (!panel.matches(':popover-open')) return;
+    draw(true);
+    placePanel();
+  };
+
+  panel.addEventListener('toggle', (event) => {
+    const open = event.newState === 'open';
+    button.setAttribute('aria-expanded', String(open));
+    if (!open) {
+      // A chosen row moves focus itself. Anything else (Escape, a click
+      // outside) puts focus back on the button that opened the menu.
+      if (place === 'side' && !picking) button.focus();
+      picking = false;
+      return;
+    }
+    draw(false);
+    placePanel();
+    if (place === 'side') panel.querySelector('[role="menuitem"]')?.focus();
   });
+
+  if (place === 'side') {
+    panel.addEventListener('keydown', (event) => {
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+      const stops = [...panel.querySelectorAll('button')];
+      if (!stops.length) return;
+      event.preventDefault();
+      const index = Math.max(0, stops.indexOf(document.activeElement));
+      const next = event.key === 'Home' ? 0
+        : event.key === 'End' ? stops.length - 1
+        : event.key === 'ArrowDown' ? (index + 1) % stops.length
+        : (index - 1 + stops.length) % stops.length;
+      stops[next].focus();
+    });
+  }
+
   return [button, panel];
 }
 
@@ -249,31 +382,59 @@ export function tileCard({ href, mark, title, status, blurb, meta, action = 'Man
   const logo = typeof mark === 'string' ? h('span', { class: 'fx-logo fx-logo--icon', 'aria-hidden': 'true' }, lucide(h, mark)) : mark;
   const pill = status ? h('span', { class: 'fx-status', 'data-tone': status.tone ?? 'mute' }, status.label) : null;
   if (row) {
-    return h('a', { class: 'fx-tile', href, onclick: inPlace },
+    return applyPhoneRule(h('a', { class: 'fx-tile', href, onclick: inPlace },
       logo,
       h('h3', {}, title),
-      pill ?? (meta ? h('span', { class: 'fx-tile__meta' }, meta) : null));
+      pill ?? (meta ? h('span', { class: 'fx-tile__meta' }, meta) : null)), 'tileCard');
   }
-  return h('a', { class: `fx-int-card${blurb ? '' : ' fx-int-card--bare'}`, href, onclick: inPlace },
+  return applyPhoneRule(h('a', { class: `fx-int-card${blurb ? '' : ' fx-int-card--bare'}`, href, onclick: inPlace },
     h('header', { class: 'fx-int-card__head' }, logo, h('h3', {}, title), pill),
     blurb ? h('p', { class: 'fx-int-card__blurb' }, blurb) : null,
-    h('span', { class: 'fx-int-card__btn' }, action));
+    h('span', { class: 'fx-int-card__btn' }, action)), 'tileCard');
 }
 
 // A titled group of one-line cards, three columns where they fit, with "Show all" at the right
 // when `href` is given (Claude's Customize page).
 export function tileSection(title, cards, { href, more = 'Show all' } = {}) {
-  return h('section', { class: 'fx-tiles' },
+  return applyPhoneRule(h('section', { class: 'fx-tiles' },
     h('header', { class: 'fx-tiles__head' },
       h('h2', {}, title),
       href ? h('a', { class: 'fx-tiles__more', href, onclick: inPlace }, more, lucide(h, 'chevron-right')) : null),
-    h('div', { class: 'fx-tiles__grid' }, cards));
+    h('div', { class: 'fx-tiles__grid' }, cards)), 'tileSection');
+}
+
+// A dialog that fills the screen has no pixel outside it, so an accessibility
+// check cannot tell it is modal and reads the page underneath. While one is
+// open, every other top-level node is inert. The attribute is what the check
+// reads; the browser's own modal behaviour is unchanged.
+function shieldBehindDialogs() {
+  const top = [...document.querySelectorAll('dialog[open]')].at(-1) ?? null;
+  for (const child of document.body.children) {
+    if (top && child !== top) child.setAttribute('inert', '');
+    else child.removeAttribute('inert');
+  }
+}
+// Node tests import this module and have no HTMLDialogElement. The wrap only
+// matters in the browser, where showModal and close are the three call sites.
+if (typeof HTMLDialogElement !== 'undefined') {
+  const openDialog = HTMLDialogElement.prototype.showModal;
+  const closeDialog = HTMLDialogElement.prototype.close;
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    const result = openDialog.call(this);
+    shieldBehindDialogs();
+    return result;
+  };
+  HTMLDialogElement.prototype.close = function close(...args) {
+    const result = closeDialog.apply(this, args);
+    shieldBehindDialogs();
+    return result;
+  };
 }
 
 // The trail above a page one level down: crumbs(['/integrations', 'Integrations'], 'Xero').
 export function crumbs(...trail) {
   const here = trail.pop();
-  return h('nav', { class: 'fx-crumbs', 'aria-label': 'Breadcrumb' },
+  return applyPhoneRule(h('nav', { class: 'fx-crumbs', 'aria-label': 'Breadcrumb' },
     ...trail.flatMap(([href, label]) => [h('a', { href, onclick: inPlace }, label), h('span', { 'aria-hidden': 'true' }, '›')]),
-    h('span', {}, here));
+    h('span', {}, here)), 'crumbs');
 }

package/server/ui/list-views.js

@@ -3,34 +3,74 @@
 // Filter, Columns), and one can be the person's default, which opens when
 // they go to the page. No DOM: the server checks a saved list with the same
 // rules the page uses (server/auth/people.js).
-import { cleanFilterView, filterJobs, normaliseJobsView } from './job-view.js';
+import { caseNumber } from './job-board.js';
+import { cleanFilterView, fieldIdOf, filterJobs, KIND_OF_TYPE, normaliseJobsView } from './job-view.js';
 
-// The Invoices filter's fields (invoicing.js). The tabs are the status, so
-// Status is not here. The page shows the chip (view-bar.js); the server keeps
-// the rows (GET /api/invoicing/invoices), so a filter reaches every invoice
-// of a tab.
+// The Invoices filter's fields (invoicing.js): the list's own columns, then
+// the job columns the Columns menu offers (Case, Practitioner, Shipped).
+// Custom fields ('field:<id>') are fields too; their kind comes from their
+// type. The page shows the chip (view-bar.js); the server keeps the rows
+// (GET /api/invoicing/invoices), so a filter reaches every invoice of a tab.
 export const INVOICE_FILTER_FIELDS = {
   client: { label: 'Client', kind: 'choice', icon: 'building-2' },
   number: { label: 'Number', kind: 'text', icon: 'hash' },
   reference: { label: 'Reference', kind: 'text', icon: 'text' },
   date: { label: 'Date', kind: 'date', icon: 'calendar' },
+  due: { label: 'Due', kind: 'date', icon: 'calendar' },
   total: { label: 'Total', kind: 'number', icon: 'dollar-sign' },
+  status: { label: 'Status', kind: 'choice', icon: 'circle-dot' },
+  linked: { label: 'Linked', kind: 'choice', icon: 'link' },
   problem: { label: 'Problem', kind: 'check', icon: 'triangle-alert' },
+  case: { label: 'Case', kind: 'text', icon: 'briefcase' },
+  practitioner: { label: 'Practitioner', kind: 'choice', icon: 'stethoscope' },
+  shipped: { label: 'Shipped', kind: 'date', icon: 'calendar' },
 };
 
+// What the Status column shows. `sending` replaces the tab while an invoice
+// is on its way to the accounting system.
+export const INVOICE_FILTER_STATUSES = Object.freeze([
+  { value: 'pending', label: 'Pending' },
+  { value: 'ready', label: 'Ready' },
+  { value: 'draft', label: 'Draft' },
+  { value: 'approved', label: 'Approved' },
+  { value: 'sent', label: 'Sent' },
+  { value: 'void', label: 'Void' },
+  { value: 'sending', label: 'Sending' },
+]);
+
 export const invoiceFilterKind = (field) => INVOICE_FILTER_FIELDS[field]?.kind ?? null;
 
+// A field's kind for this lab: a built-in field, or a custom field's type.
+// `fields` is the lab's custom fields ({ id, type }).
+export function invoiceKindOf(fields) {
+  const type = new Map((fields ?? []).map((f) => [f.id, f.type]));
+  return (field) => INVOICE_FILTER_FIELDS[field]?.kind ?? KIND_OF_TYPE[type.get(fieldIdOf(field) ?? '')] ?? null;
+}
+
 // An invoice's value for a filter field or a sort, as they compare it. A
-// draft has no issue date: it uses the day it was made.
+// draft has no issue date: it uses the day it was made. A job column reads
+// the invoice's job; a custom field reads that job's value (`fields`).
 export function invoiceValue(invoice, field) {
+  const job = invoice.job ?? null;
   switch (field) {
     case 'client': return invoice.contactName ?? null;
     case 'number': return invoice.number ?? null;
     case 'reference': return invoice.reference ?? null;
     case 'date': return invoice.issueDate ?? (invoice.createdAt ? new Date(invoice.createdAt).toISOString().slice(0, 10) : null);
+    case 'due': return invoice.dueDate ?? null;
     case 'total': return invoice.totalCents == null ? null : invoice.totalCents / 100;
+    case 'status': return invoice.sending ? 'sending' : invoice.tab ?? null;
+    case 'linked': return job?.sourceSystem ?? null;
     case 'problem': return (invoice.problems?.length ?? 0) > 0;
-    default: return null;
+    case 'case': return job ? caseNumber(job) : null;
+    case 'practitioner': return job?.practitioner ?? null;
+    case 'shipped': return job?.shippedOn ?? null;
+    default: {
+      const id = fieldIdOf(field);
+      if (!id) return null;
+      const value = invoice.fields?.[id];
+      return value === undefined ? null : value;
+    }
   }
 }
 
@@ -41,8 +81,8 @@ export const INVOICE_SORTS = Object.freeze(['number', 'client', 'reference', 'da
 // them (an empty value last, either way), then `offset` and `limit` cut the
 // page. `total` and `totalCents` are of every kept row. The rows come in
 // newest first; that order breaks ties.
-export function invoicePage(invoices, { view, sort = null, dir = 'asc', offset = 0, limit = 100, today }) {
-  const kept = filterJobs(invoices, view, { valueOf: invoiceValue, kindOf: invoiceFilterKind, today });
+export function invoicePage(invoices, { view, sort = null, dir = 'asc', offset = 0, limit = 100, today, kindOf = invoiceFilterKind, me = null }) {
+  const kept = filterJobs(invoices, view, { valueOf: invoiceValue, kindOf, late: null, me, today });
   const sign = dir === 'desc' ? -1 : 1;
   const ordered = INVOICE_SORTS.includes(sort)
     ? kept.map((invoice, i) => [invoice, invoiceValue(invoice, sort), i]).sort(([, x, i], [, y, j]) => {
@@ -75,7 +115,7 @@ const CUSTOM_FIELD = /^field:[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-
 const kindIn = (fields, custom) => (field) => (Object.hasOwn(fields, field) ? fields[field].kind : custom && CUSTOM_FIELD.test(field) ? '*' : null);
 
 // The Invoices and Reconcile views: their filter.
-export const normaliseInvoicesView = (value) => cleanFilterView(value, kindIn(INVOICE_FILTER_FIELDS, false));
+export const normaliseInvoicesView = (value) => cleanFilterView(value, kindIn(INVOICE_FILTER_FIELDS, true));
 export const normaliseReconcileView = (value) => cleanFilterView(value, kindIn(RECONCILE_FILTER_FIELDS, true));
 
 // The pages with saved views. Each is named in a switch, never looked up