@arcforgelabs/flow 2026.10.37 → 2026.10.39

package/server/ui/jobs.js

@@ -12,20 +12,24 @@
 // shows what to do there and the card waits in its new lane. On a phone,
 // or with a keyboard, the job's panel has the same moves.
 
+import { bulkBar } from '/assets/ui/bulk-bar.js';
+import { lucide } from '/assets/ui/custom-fields.js';
 import { formatCents } from '/assets/ui/invoicing.js';
 import {
   caseNumber, FINAL_RANK, fixes, INVOICE_STAGES, invoiceStage, matches, NO_STATUS, orderStatuses, problemSummary, statusRank,
 } from '/assets/ui/job-board.js';
 import {
-  DEFAULT_VIEW, fieldGroup, fieldIdOf, fieldLanes, filterCount, filterJobs, groupJobs, GROUPS, laneOf, normaliseJobsView, NOT_SET, sortJobs, SORTS,
+  COLUMNS, DEFAULT_VIEW, fieldGroup, fieldIdOf, fieldLanes, FILTER_FIELDS, filterCount, filterJobs, groupJobs, GROUPS, KIND_OF_TYPE, keptStatuses, laneOf,
+  normaliseJobsView, NOT_SET, OPERATORS, sortJobs, SORTS,
 } from '/assets/ui/job-view.js';
 
 const LAYOUT_KEY = 'flow_jobs_layout';
+const FOLDED_KEY = 'flow_jobs_folded';
 const SYSTEM_NAME = { seazona: 'Seazona', xero: 'Xero' };
 // A job's events (server/core/ledger.js), in plain words.
 const ACTIVITY = {
   observed: 'Flow read the job', source_changed: 'The job changed in the lab system', ready: 'Marked ready to invoice',
-  in_work: 'Put back in work', drafted: 'Draft invoice made', draft_refused: 'Draft invoice refused',
+  in_work: 'Put back in work', drafted: 'Draft invoice made', draft_refused: 'Draft invoice refused', invoice_linked: 'Linked to an invoice',
   accounting_checked: 'Checked in the accounting system', payment_recorded: 'Payment recorded', paid: 'Paid in full',
   held: 'Put on hold', review: 'Sent to review', released: 'Hold removed',
   status_moved_back: 'The job status moved back in the lab system', source_lines_used: 'New job lines used on the draft',
@@ -39,6 +43,23 @@ const STAGE_RANK = { 'In work': 0, Drafted: 2, Problem: 2, 'Ready to invoice': 4
 
 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' }) : '—');
+// A list date, short: Today, Tomorrow or Yesterday, else day/month (and
+// year when it is not this year).
+const shortDate = (iso) => {
+  if (!iso) return '—';
+  const at = new Date(`${iso}T00:00:00`);
+  const now = new Date();
+  const days = Math.round((at - new Date(now.getFullYear(), now.getMonth(), now.getDate())) / 86_400_000);
+  if (days === 0) return 'Today';
+  if (days === 1) return 'Tomorrow';
+  if (days === -1) return 'Yesterday';
+  return at.toLocaleDateString('en-AU', at.getFullYear() === now.getFullYear() ? { day: '2-digit', month: '2-digit' } : { day: '2-digit', month: '2-digit', year: '2-digit' });
+};
+// A person's badge: their initials in a circle; the name on hover.
+const initialsOf = (name) => {
+  const parts = (name ?? '?').split(/[\s._-]+/).filter(Boolean);
+  return ((parts[0]?.[0] ?? '?') + (parts[1]?.[0] ?? '')).toUpperCase();
+};
 const clientOf = (job) => job.clientName ?? 'No client';
 // The one date a card shows: when the job is due, else when it was ordered.
 const dateOf = (job) => (job.dueOn ? `Due ${showDate(job.dueOn)}` : job.orderedOn ? `Ordered ${showDate(job.orderedOn)}` : job.jobDate ? showDate(job.jobDate) : null);
@@ -51,6 +72,18 @@ function saveLayout(layout) {
   try { localStorage.setItem(LAYOUT_KEY, layout); } catch { /* the choice is only a convenience */ }
 }
 
+// The list's folded groups, by group key, in this browser only.
+function readFolded() {
+  try {
+    const value = JSON.parse(localStorage.getItem(FOLDED_KEY) ?? '{}');
+    return value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+  } catch { return {}; }
+}
+
+function saveFolded(folded) {
+  try { localStorage.setItem(FOLDED_KEY, JSON.stringify(folded)); } catch { /* a convenience only */ }
+}
+
 // The local calendar day, as yyyy-mm-dd, to mark late jobs.
 const today = () => {
   const now = new Date();
@@ -61,8 +94,10 @@ const WARN_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="
 const PERSON_ICON = '<svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="5.5" r="3" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M2.5 14c.6-2.8 2.8-4.3 5.5-4.3s4.9 1.5 5.5 4.3" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>';
 const GROUP_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.8 14.5 5 8 8.2 1.5 5z" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="m1.5 8.2 6.5 3.2 6.5-3.2M1.5 11.2 8 14.4l6.5-3.2" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>';
 const SORT_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="m4.5 6 3.5-3.5L11.5 6M4.5 10 8 13.5l3.5-3.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+const COLUMNS_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="2.5" width="12" height="11" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M6 2.5v11M10 2.5v11" stroke="currentColor" stroke-width="1.3"/></svg>';
 const FILTER_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3.5h12M4.5 8h7M7 12.5h2" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>';
 const TICK_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="m3 8.5 3.2 3L13 4.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+const CHEVRON_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="m6 3.5 4.5 4.5L6 12.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
 const CALENDAR_ICON = '<svg width="13" height="13" viewBox="0 0 16 16" aria-hidden="true"><rect x="2" y="3" width="12" height="11" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><path d="M2 6.5h12M5.5 1.5v3M10.5 1.5v3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>';
 
 export async function renderJobs(main, ui) {
@@ -81,16 +116,21 @@ export async function renderJobs(main, ui) {
     fields: [], systemFields: [], people: [], values: new Map(),
     // Each work system's "Ask before stage moves", read on the first move.
     askBefore: new Map(),
+    // The list's ticked jobs (by jobKey), and its folded groups by group key.
+    ticked: new Set(), folded: readFolded(),
   };
   const toggle = h('div', { class: 'fx-seg', role: 'radiogroup', 'aria-label': 'Layout' });
   const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a case, client or practitioner', 'aria-label': 'Find a job', value: asked });
   const host = h('div', { class: 'fx-jobs' }, h('div', { class: 'fx-skeleton' }));
   const controls = h('div', { class: 'fx-viewbar', role: 'group', 'aria-label': 'Group, sort and filter' });
+  // In the list, ticked rows get the same floating bar as Invoices.
+  const bulk = bulkBar(ui, { label: 'Ticked jobs' });
   main.classList.add('fx-main--wide');
   main.append(
     pageHeader('Jobs', { subtitle: 'Every job in the lab system, by its status there.' }),
     h('div', { class: 'fx-toolbar fx-toolbar--plain' }, controls, h('div', { class: 'fx-toolbar__end' }, search, toggle)),
-    host);
+    host,
+    bulk.element);
 
   const drawToggle = () => toggle.replaceChildren(...[['board', 'Board'], ['list', 'List']].map(([id, label]) => h('button', {
     type: 'button', role: 'radio', class: 'fx-seg__item', 'aria-checked': String(state.view.layout === id),
@@ -100,9 +140,19 @@ export async function renderJobs(main, ui) {
   search.addEventListener('input', () => { state.q = search.value.trim(); draw(); });
 
   const problemsOf = (job) => fixes(job.obligation);
+  const jobKey = (job) => `${job.sourceSystem}\u0000${job.sourceJobRef}`;
   const valueKey = (job, fieldId) => `${job.sourceSystem}\u0000${job.sourceJobRef}\u0000${fieldId}`;
   const valueOf = (job, fieldId) => state.values.get(valueKey(job, fieldId)) ?? null;
   const groupable = () => state.fields.filter((f) => f.groupable);
+  // The Assignee: the lab's first person custom field (Flow makes one,
+  // server/core/custom-fields.js ensureAssignee). The filter "Assignee is
+  // Me" keeps the jobs it names the person looking at.
+  const assigneeField = () => state.fields.find((f) => f.type === 'person') ?? null;
+  // The list's columns a person can choose: Patient only when the
+  // installation keeps patient names; Assignee only with a person field.
+  const builtInColumns = () => Object.keys(COLUMNS).filter((id) => (id !== 'patient' || state.jobs.some((job) => job.patient))
+    && (id !== 'assignee' || assigneeField()));
+  const customColumns = () => state.fields.filter((f) => f.id !== assigneeField()?.id);
   const fieldOfGroup = (group) => groupable().find((f) => f.id === fieldIdOf(group)) ?? null;
   // A work system whose stages Flow can hand a move to (Seazona).
   const movesStages = (job) => state.systemFields.some((f) => f.source === job.sourceSystem);
@@ -127,13 +177,18 @@ export async function renderJobs(main, ui) {
     }, 500);
   }
 
-  // One toolbar control: a button that opens a small menu under it. The menu
-  // is a popover, so a click outside or Escape closes it.
+  // One toolbar control: a chip that opens a small panel under it, and an ×
+  // that clears what the chip sets (as ClickUp's "Clear all filters"). The
+  // panel is a popover, so a click outside or Escape closes it.
   let menuCount = 0;
-  function menu(icon, build) {
+  function menu(icon, build, { rows = false, clearLabel = 'Clear' } = {}) {
     const id = `fx-jobs-menu-${++menuCount}`;
-    const panel = h('div', { class: 'fx-pop', id, popover: 'auto', role: 'menu' });
-    const button = h('button', { type: 'button', class: 'fx-chip', popovertarget: id, 'aria-haspopup': 'menu', 'aria-expanded': 'false' });
+    const panel = h('div', { class: `fx-pop${rows ? ' fx-pop--rows' : ''}`, id, popover: 'auto', role: rows ? 'dialog' : 'menu' });
+    const button = h('button', { type: 'button', class: 'fx-chip', popovertarget: id, 'aria-haspopup': rows ? 'dialog' : 'menu', 'aria-expanded': 'false' });
+    const clear = h('button', { type: 'button', class: 'fx-chip__clear', 'aria-label': clearLabel, title: clearLabel, hidden: true }, lucide(h, 'x'));
+    const wrap = h('span', { class: 'fx-chipset' }, button, clear);
+    let onClear = null;
+    clear.addEventListener('click', () => onClear?.());
     const fill = () => panel.replaceChildren(...build(fill, () => panel.hidePopover()).filter(Boolean));
     panel.addEventListener('toggle', (event) => {
       button.setAttribute('aria-expanded', String(event.newState === 'open'));
@@ -144,10 +199,15 @@ export async function renderJobs(main, ui) {
       panel.style.left = `${Math.round(Math.max(8, Math.min(at.left, innerWidth - panel.offsetWidth - 8)))}px`;
     });
     return {
-      node: [button, panel],
-      set(label, on) {
+      node: [wrap, panel],
+      wrap,
+      fill: () => { if (panel.matches(':popover-open')) fill(); },
+      set(label, on, clearIt = null) {
         button.replaceChildren(svg(icon), h('span', {}, label));
+        wrap.classList.toggle('fx-chipset--on', on);
         button.classList.toggle('fx-chip--on', on);
+        onClear = clearIt;
+        clear.hidden = !clearIt;
       },
     };
   }
@@ -156,55 +216,257 @@ export async function renderJobs(main, ui) {
   const option = (text, checked, onclick, role = 'menuitemradio') => h('button', {
     type: 'button', class: 'fx-pop__item', role, 'aria-checked': String(checked), onclick,
   }, h('span', { class: 'fx-pop__tick' }, checked ? svg(TICK_ICON) : null), h('span', {}, text));
-  const heading = (text) => h('p', { class: 'fx-pop__head' }, text);
-  const DIR_WORDS = { total: ['Low to high', 'High to low'], due: ['Oldest first', 'Newest first'], board: ['As the lab system has it', 'Reversed'] };
-
-  const groupMenu = menu(GROUP_ICON, (_redraw, close) => [
-    heading('Group by'),
-    ...Object.entries(GROUPS).map(([id, text]) => option(text, state.view.group === id, () => { change({ group: id }); close(); })),
-    groupable().length ? h('div', { class: 'fx-pop__sep' }) : null,
-    groupable().length ? heading('Custom fields') : null,
-    ...groupable().map((f) => option(f.name, state.view.group === fieldGroup(f.id), () => { change({ group: fieldGroup(f.id) }); close(); })),
-  ]);
+  const DATE_WORDS = ['Oldest first', 'Newest first'];
+  const NUMBER_WORDS = ['Low to high', 'High to low'];
+  const DIR_WORDS = { total: NUMBER_WORDS, due: DATE_WORDS, ordered: DATE_WORDS, shipped: DATE_WORDS };
+  const TYPE_WORDS = { date: DATE_WORDS, number: NUMBER_WORDS };
+  const dirWords = (by) => DIR_WORDS[by] ?? TYPE_WORDS[fieldById(fieldIdOf(by))?.type] ?? ['A to Z', 'Z to A'];
+  const fieldById = (id) => state.fields.find((f) => f.id === id) ?? null;
+
+  // The parts of a row panel (Group by, Sort, Filters): a title, rows of
+  // selects with a bin at the end, and a foot with "Add" and "Clear all".
+  const title = (text) => h('p', { class: 'fx-rows__title' }, text);
+  const choose = (label, value, options, onchange, extra = {}) => h('select', {
+    class: 'fx-select fx-select--sm', 'aria-label': label, onchange: (event) => onchange(event.target.value), ...extra,
+  }, options.map((o) => (o.group
+    ? (o.options.length ? h('optgroup', { label: o.group }, o.options.map((x) => h('option', { value: x.value, selected: x.value === value }, x.label))) : null)
+    : h('option', { value: o.value, selected: o.value === value, disabled: o.disabled }, o.label))));
+  const bin = (label, onclick) => h('button', { type: 'button', class: 'fx-rows__bin', 'aria-label': label, title: label, onclick }, lucide(h, 'trash-2'));
+  const addButton = (text, onclick) => h('button', { type: 'button', class: 'fx-btn fx-btn--ghost fx-btn--sm fx-rows__add', onclick }, lucide(h, 'plus'), text);
+  const rowsFoot = (...parts) => h('div', { class: 'fx-rows__foot' }, ...parts);
+  const clearAll = (onclick) => h('button', { type: 'button', class: 'fx-btn fx-btn--ghost fx-btn--sm', onclick }, 'Clear all');
+
+  // ── Group by ──
+  // One row: what to group by, the group order, and a bin that takes the
+  // groups away (the list only: the board always has lanes).
+  const groupOptions = () => [
+    ...Object.entries(GROUPS).filter(([id]) => id !== 'none').map(([value, label]) => ({ value, label })),
+    { group: 'Custom fields', options: groupable().map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
+  ];
+  const groupMenu = menu(GROUP_ICON, (redraw) => {
+    const list = state.view.layout === 'list';
+    const group = state.view.group === 'none' && !list ? 'status' : state.view.group;
+    const none = group === 'none';
+    return [
+      title('Group by'),
+      h('div', { class: 'fx-rows' }, h('div', { class: 'fx-rows__row fx-rows__row--group' },
+        choose('Group by', none ? '' : group, [...(none ? [{ value: '', label: 'Choose…', disabled: true }] : []), ...groupOptions()], (value) => { change({ group: value }); redraw(); }),
+        choose('Group order', state.view.groupDir, [{ value: 'asc', label: 'Ascending' }, { value: 'desc', label: 'Descending' }], (value) => { change({ groupDir: value }); redraw(); }, { disabled: none }),
+        list && !none ? bin('Remove the grouping', () => { change({ group: 'none' }); redraw(); }) : h('span', { class: 'fx-rows__gap' }))),
+    ];
+  }, { rows: true, clearLabel: 'Remove the grouping' });
+
+  // ── Sort ──
+  // Rows of sorts, each applied in turn. In the list, a column's head sorts
+  // too.
+  const sortOptions = () => [
+    ...Object.entries(SORTS).map(([value, label]) => ({ value, label })),
+    { group: 'Custom fields', options: state.fields.map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
+  ];
+  const setSorts = (sorts) => change({ sorts });
   const sortMenu = menu(SORT_ICON, (redraw) => {
-    const [up, down] = DIR_WORDS[state.view.sort] ?? ['A to Z', 'Z to A'];
+    const { sorts } = state.view;
+    const unused = sortOptions().flatMap((o) => o.options ?? [o]).filter((o) => !sorts.some((s) => s.by === o.value));
     return [
-      heading('Sort by'),
-      ...Object.entries(SORTS).map(([id, text]) => option(text, state.view.sort === id, () => { change({ sort: id }); redraw(); })),
-      h('div', { class: 'fx-pop__sep' }),
-      option(up, state.view.dir === 'asc', () => { change({ dir: 'asc' }); redraw(); }),
-      option(down, state.view.dir === 'desc', () => { change({ dir: 'desc' }); redraw(); }),
+      title('Sort'),
+      sorts.length ? h('div', { class: 'fx-rows' }, sorts.map((s, i) => {
+        const [up, down] = dirWords(s.by);
+        const others = sorts.filter((_, n) => n !== i).map((x) => x.by);
+        const options = sortOptions().map((o) => (o.group ? { ...o, options: o.options.filter((x) => !others.includes(x.value)) } : o)).filter((o) => o.group || !others.includes(o.value));
+        return h('div', { class: 'fx-rows__row fx-rows__row--sort' },
+          h('span', { class: 'fx-rows__lead' }, i ? 'then' : 'Sort by'),
+          choose('Sort by', s.by, options, (by) => { setSorts(sorts.map((x, n) => (n === i ? { by, dir: x.dir } : x))); redraw(); }),
+          choose('Order', s.dir, [{ value: 'asc', label: up }, { value: 'desc', label: down }], (dir) => { setSorts(sorts.map((x, n) => (n === i ? { ...x, dir } : x))); redraw(); }),
+          bin('Remove this sort', () => { setSorts(sorts.filter((_, n) => n !== i)); redraw(); }));
+      })) : h('p', { class: 'fx-rows__empty' }, 'No sort. Jobs show in the lab system’s order.'),
+      rowsFoot(
+        sorts.length < 5 && unused.length ? addButton('Add sort', () => { setSorts([...sorts, { by: unused[0].value, dir: 'asc' }]); redraw(); }) : h('span'),
+        sorts.length ? clearAll(() => { setSorts([]); redraw(); }) : null),
     ];
-  });
+  }, { rows: true, clearLabel: 'Clear the sort' });
+
+  // ── Filters ──
+  // Rows of field, operator and value, with a bin on each, "Add filter",
+  // and "Clear all". The second row's And / Or applies to every row.
+  const filterFields = () => [
+    ...Object.entries(FILTER_FIELDS).filter(([id]) => id !== 'assignee' || assigneeField())
+      .map(([value, f]) => ({ value, label: value === 'assignee' ? assigneeField().name : f.label })),
+    { group: 'Custom fields', options: customColumns().map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
+  ];
+  const kindOf = (field) => {
+    if (field === 'assignee') return assigneeField() ? 'person' : null;
+    if (Object.hasOwn(FILTER_FIELDS, field)) return FILTER_FIELDS[field].kind;
+    return KIND_OF_TYPE[fieldById(fieldIdOf(field))?.type] ?? null;
+  };
+  const PROBLEM_OPS = { yes: 'has one', no: 'has none' };
+  const opsOf = (field) => (field === 'problem' ? PROBLEM_OPS : OPERATORS[kindOf(field)] ?? {});
+  // The choices a choice or person filter offers: [{ value, label }].
+  function choicesOf(field) {
+    const people = () => [{ value: 'me', label: 'Me' }, ...state.people.map((p) => ({ value: p.id, label: p.name }))];
+    const labels = (list) => [...new Set(list.filter(Boolean))].sort((a, b) => a.localeCompare(b)).map((v) => ({ value: v, label: v }));
+    if (field === 'status') return orderStatuses(state.statuses, state.jobs).map((v) => ({ value: v, label: v }));
+    if (field === 'stage') return Object.values(STAGE_GROUPS).map((v) => ({ value: v, label: v }));
+    if (field === 'client') return labels(state.jobs.map(clientOf));
+    if (field === 'practitioner') return labels(state.jobs.map((job) => job.practitioner));
+    if (field === 'assignee') return people();
+    const custom = fieldById(fieldIdOf(field));
+    if (custom?.type === 'person') return people();
+    return (custom?.options ?? []).map((o) => ({ value: o.id, label: o.archived ? `${o.name} (archived)` : o.name }));
+  }
+  // A job's value for a filter field, as the filter compares it.
+  function filterValue(job, field) {
+    switch (field) {
+      case 'status': return statusOf(job);
+      case 'stage': return STAGE_GROUPS[invoiceStage(job.obligation) ?? 'in_work'];
+      case 'client': return clientOf(job);
+      case 'practitioner': return job.practitioner ?? null;
+      case 'assignee': return assigneeField() ? valueOf(job, assigneeField().id)?.value ?? null : null;
+      case 'due': return job.dueOn ?? null;
+      case 'ordered': return job.orderedOn ?? null;
+      case 'shipped': return job.shippedOn ?? null;
+      case 'total': return job.totalCents == null ? null : job.totalCents / 100;
+      case 'problem': return problemsOf(job).length > 0;
+      default: return valueOf(job, fieldIdOf(field))?.value ?? null;
+    }
+  }
+  // A row's value when its operator changes: kept when it still fits.
+  function valueFor(field, op, old) {
+    const kind = kindOf(field);
+    if (['is', 'not'].includes(op) && ['choice', 'person'].includes(kind)) return Array.isArray(old) ? old : [];
+    if (['before', 'after', 'on'].includes(op)) return typeof old === 'string' && /^\d{4}-/.test(old) ? old : today();
+    if (['eq', 'gt', 'lt'].includes(op)) return typeof old === 'number' ? old : null;
+    if (['has', 'is'].includes(op)) return typeof old === 'string' ? old : '';
+    return null;
+  }
+  const setFilters = (filters) => change({ filters });
+  const setRow = (i, patch) => setFilters(state.view.filters.map((f, n) => (n === i ? { ...f, ...patch } : f)));
+  // A choice row's value: a button that opens a list of choices to tick,
+  // with a search when the list is long.
+  function choiceValue(i, filter) {
+    const choices = choicesOf(filter.field);
+    const named = () => {
+      const on = choices.filter((c) => filter.value.includes(c.value)).map((c) => c.label);
+      return on.length ? on.join(', ') : 'Choose…';
+    };
+    const id = `fx-jobs-choice-${i}`;
+    const button = h('button', { type: 'button', class: 'fx-select fx-select--sm fx-rows__value', popovertarget: id, title: named() }, named());
+    const pop = h('div', { class: 'fx-pop fx-pop--choices', id, popover: 'auto', role: 'menu' });
+    const find = choices.length > 8 ? h('input', { class: 'fx-input fx-input--sm', type: 'search', placeholder: 'Find', 'aria-label': 'Find a choice' }) : null;
+    const items = h('div', {});
+    const drawItems = () => {
+      const q = find?.value.trim().toLowerCase() ?? '';
+      items.replaceChildren(...choices.filter((c) => !q || c.label.toLowerCase().includes(q)).map((c) => option(c.label, filter.value.includes(c.value), () => {
+        filter = { ...filter, value: filter.value.includes(c.value) ? filter.value.filter((v) => v !== c.value) : [...filter.value, c.value] };
+        setRow(i, { value: filter.value });
+        button.textContent = named();
+        button.title = named();
+        drawItems();
+      }, 'menuitemcheckbox')));
+    };
+    find?.addEventListener('input', drawItems);
+    pop.append(...[find, items].filter(Boolean));
+    pop.addEventListener('toggle', (event) => {
+      if (event.newState !== 'open') return;
+      drawItems();
+      const at = button.getBoundingClientRect();
+      pop.style.top = `${Math.round(at.bottom + 4)}px`;
+      pop.style.left = `${Math.round(Math.max(8, Math.min(at.left, innerWidth - pop.offsetWidth - 8)))}px`;
+      find?.focus();
+    });
+    return [button, pop];
+  }
+  function valueControl(i, filter) {
+    const kind = kindOf(filter.field);
+    const { op } = filter;
+    if (['is', 'not'].includes(op) && ['choice', 'person'].includes(kind)) return choiceValue(i, filter);
+    if (['before', 'after', 'on'].includes(op)) {
+      return h('input', { class: 'fx-input fx-input--sm fx-rows__value', type: 'date', 'aria-label': 'Date', value: filter.value ?? '', onchange: (event) => setRow(i, { value: event.target.value || null }) });
+    }
+    if (['eq', 'gt', 'lt'].includes(op)) {
+      return h('input', {
+        class: 'fx-input fx-input--sm fx-rows__value', type: 'number', step: 'any', inputmode: 'decimal', 'aria-label': 'Number', value: filter.value ?? '',
+        oninput: (event) => setRow(i, { value: event.target.value === '' ? null : Number(event.target.value) }),
+      });
+    }
+    if (['has', 'is'].includes(op)) {
+      return h('input', { class: 'fx-input fx-input--sm fx-rows__value', type: 'text', 'aria-label': 'Text', value: filter.value ?? '', oninput: (event) => setRow(i, { value: event.target.value }) });
+    }
+    return h('span', { class: 'fx-rows__value fx-rows__value--none' });
+  }
   const filterMenu = menu(FILTER_ICON, (redraw) => {
-    const hidden = new Set(state.view.hide);
+    const { filters, match } = state.view;
+    const fields = filterFields();
     return [
-      heading('Show only'),
-      option('Late jobs', state.view.late, () => { change({ late: !state.view.late }); redraw(); }, 'menuitemcheckbox'),
-      option('Jobs with a problem', state.view.problems, () => { change({ problems: !state.view.problems }); redraw(); }, 'menuitemcheckbox'),
-      h('div', { class: 'fx-pop__sep' }),
-      heading('Statuses'),
-      ...orderStatuses(state.statuses, state.jobs).map((label) => option(label, !hidden.has(label), () => {
-        const next = new Set(hidden);
-        if (next.has(label)) next.delete(label); else next.add(label);
-        change({ hide: [...next] });
-        redraw();
-      }, 'menuitemcheckbox')),
-      filterCount(state.view) ? h('div', { class: 'fx-pop__foot' }, h('button', {
-        type: 'button', class: 'fx-btn fx-btn--ghost fx-btn--sm', onclick: () => { change({ hide: [], late: false, problems: false }); redraw(); },
-      }, 'Clear filters')) : null,
+      title('Filters'),
+      filters.length ? h('div', { class: 'fx-rows' }, filters.map((filter, i) => {
+        const known = kindOf(filter.field);
+        const lead = i === 0 ? h('span', { class: 'fx-rows__lead' }, 'Where')
+          : i === 1 ? choose('Match', match, [{ value: 'all', label: 'And' }, { value: 'any', label: 'Or' }], (value) => { change({ match: value }); redraw(); })
+            : h('span', { class: 'fx-rows__lead' }, match === 'any' ? 'Or' : 'And');
+        if (!known) {
+          return h('div', { class: 'fx-rows__row' }, lead, h('span', { class: 'fx-rows__gone' }, 'A custom field that was deleted'), bin('Remove this filter', () => { setFilters(filters.filter((_, n) => n !== i)); redraw(); }));
+        }
+        const ops = opsOf(filter.field);
+        return h('div', { class: 'fx-rows__row' },
+          lead,
+          choose('Field', filter.field, fields, (field) => {
+            const op = Object.keys(opsOf(field))[0];
+            setRow(i, { field, op, value: valueFor(field, op, null) });
+            redraw();
+          }),
+          choose('Operator', filter.op, Object.entries(ops).map(([value, label]) => ({ value, label })), (op) => { setRow(i, { op, value: valueFor(filter.field, op, filter.value) }); redraw(); }),
+          valueControl(i, filter),
+          bin('Remove this filter', () => { setFilters(filters.filter((_, n) => n !== i)); redraw(); }));
+      })) : h('p', { class: 'fx-rows__empty' }, 'No filters. Every job shows.'),
+      rowsFoot(
+        filters.length < 20 ? addButton('Add filter', () => { setFilters([...filters, { field: 'status', op: 'is', value: [] }]); redraw(); }) : h('span'),
+        filters.length ? clearAll(() => { setFilters([]); redraw(); }) : null),
+    ];
+  }, { rows: true, clearLabel: 'Clear all filters' });
+
+  // Columns (the list only): Client always shows; each other column can be
+  // shown or hidden. Custom fields are columns too.
+  const heading = (text) => h('p', { class: 'fx-pop__head' }, text);
+  const columnsMenu = menu(COLUMNS_ICON, (redraw) => {
+    const on = new Set(state.view.columns);
+    const flip = (id) => {
+      const next = on.has(id) ? state.view.columns.filter((c) => c !== id) : [...state.view.columns, id];
+      change({ columns: next });
+      redraw();
+    };
+    const custom = customColumns();
+    return [
+      heading('Columns'),
+      option('Client', true, () => {}, 'menuitemcheckbox'),
+      ...builtInColumns().map((id) => option(COLUMNS[id], on.has(id), () => flip(id), 'menuitemcheckbox')),
+      custom.length ? h('div', { class: 'fx-pop__sep' }) : null,
+      custom.length ? heading('Custom fields') : null,
+      ...custom.map((f) => option(f.name, on.has(fieldGroup(f.id)), () => flip(fieldGroup(f.id)), 'menuitemcheckbox')),
     ];
   });
-  controls.append(...groupMenu.node, ...sortMenu.node, ...filterMenu.node);
+  controls.append(...groupMenu.node, ...sortMenu.node, ...filterMenu.node, ...columnsMenu.node);
 
+  // A sort's name: a built-in key or a custom field.
+  const sortName = (by) => SORTS[by] ?? fieldById(fieldIdOf(by))?.name ?? 'Custom field';
   function drawControls() {
-    const { group, sort, dir } = state.view;
+    const { group, sorts, layout } = state.view;
+    const list = layout === 'list';
     const field = fieldOfGroup(group);
-    groupMenu.set(`Group: ${field?.name ?? GROUPS[group] ?? GROUPS.status}`, group !== DEFAULT_VIEW.group && (Boolean(field) || Boolean(GROUPS[group])));
-    const sorted = sort !== DEFAULT_VIEW.sort || dir !== DEFAULT_VIEW.dir;
-    sortMenu.set(sorted ? `Sort: ${SORTS[sort]}${dir === 'desc' ? ' ↓' : ''}` : 'Sort', sorted);
+    // The board has no "None": it shows the status lanes.
+    const shown = group === 'none' && !list ? 'status' : group;
+    const label = shown === 'none' ? 'Group: None' : `Group: ${field?.name ?? GROUPS[shown] ?? GROUPS.status}`;
+    const grouped = list ? shown !== 'none' : shown !== 'status';
+    groupMenu.set(label, shown !== DEFAULT_VIEW.group, grouped ? () => change({ group: list ? 'none' : 'status' }) : null);
+    // In the list, the column heads sort; the Sort chip shows there only
+    // while a sort is on, so it can be seen and cleared.
+    const [first] = sorts;
+    sortMenu.set(sorts.length > 1 ? `Sort · ${sorts.length}` : first ? `Sort: ${sortName(first.by)} ${first.dir === 'desc' ? '↓' : '↑'}` : 'Sort', sorts.length > 0,
+      sorts.length ? () => change({ sorts: [] }) : null);
+    sortMenu.wrap.hidden = list && !sorts.length;
     const count = filterCount(state.view);
-    filterMenu.set(count ? `Filter · ${count}` : 'Filter', count > 0);
+    filterMenu.set(count ? `${count} ${count === 1 ? 'Filter' : 'Filters'}` : 'Filter', count > 0, state.view.filters.length ? () => change({ filters: [], match: 'all' }) : null);
+    columnsMenu.set('Columns', false);
+    columnsMenu.wrap.hidden = !list;
   }
   drawControls();
 
@@ -217,10 +479,15 @@ export async function renderJobs(main, ui) {
       return;
     }
     const found = filterJobs(state.jobs.filter((job) => matches(job, state.q)), state.view,
-      { status: statusOf, late: isLate, problem: (job) => problemsOf(job).length > 0 });
-    const groups = grouped(sortJobs(found, state.view));
+      { valueOf: filterValue, kindOf, late: isLate, me: ui.me?.person?.id ?? null, today: today() });
+    const groups = grouped(sortJobs(found, state.view, sortKey));
     main.classList.toggle('fx-main--board', state.view.layout === 'board');
+    // A tick on a job the search or filter now hides goes.
+    const shown = new Set(found.map(jobKey));
+    for (const key of state.ticked) if (!shown.has(key)) state.ticked.delete(key);
+    state.found = found;
     host.replaceChildren(state.view.layout === 'list' ? list(groups, found.length) : board(groups));
+    drawBulk();
   }
 
   async function load() {
@@ -296,7 +563,12 @@ export async function renderJobs(main, ui) {
   // A group's `drop` says what a card dropped in it changes: a custom
   // field's value, or the job's stage in the work system. No `drop`: cards
   // cannot be dropped there (invoice stage, client, practitioner).
+  // "Descending" shows the groups in the other order.
   function grouped(jobs) {
+    const groups = groupsOf(jobs);
+    return state.view.groupDir === 'desc' ? groups.reverse() : groups;
+  }
+  function groupsOf(jobs) {
     const { group } = state.view;
     const field = fieldOfGroup(group);
     if (field) {
@@ -308,9 +580,9 @@ export async function renderJobs(main, ui) {
         return { ...g, rank: 'plain', color: lane?.color, drop: lane && !lane.archived ? { kind: 'field', field, value: lane.value } : null };
       });
     }
-    if (group === 'status' || !GROUPS[group]) {
-      const hidden = new Set(state.view.hide);
-      return groupJobs(jobs, orderStatuses(state.statuses, state.jobs).filter((label) => !hidden.has(label)), laneStatusOf)
+    if (group === 'none' && state.view.layout === 'list') return [{ label: null, jobs, rank: 'plain' }];
+    if (group === 'status' || group === 'none' || !GROUPS[group]) {
+      return groupJobs(jobs, keptStatuses(state.view, orderStatuses(state.statuses, state.jobs)), laneStatusOf)
         .map((g) => ({ ...g, rank: statusRank(g.label), drop: g.label === NO_STATUS ? null : { kind: 'stage', status: g.label } }));
     }
     if (group === 'stage') {
@@ -569,27 +841,394 @@ export async function renderJobs(main, ui) {
     return h('div', { class: 'fx-task__move' }, wait, select);
   }
 
+  // A column's menu (a click on its head, or a right-click): sort by it,
+  // move it, hide it. Client always shows. `column` null is the + menu: the
+  // hidden columns, to add one back.
+  // What a column's head sorts by: a built-in key, or the column's custom
+  // field (Assignee is the lab's person field).
+  const SORT_OF = { client: 'client', practitioner: 'practitioner', due: 'due', ordered: 'ordered', shipped: 'shipped', total: 'total' };
+  const sortOf = (columnId) => SORT_OF[columnId]
+    ?? (columnId === 'assignee' && assigneeField() ? fieldGroup(assigneeField().id) : fieldIdOf(columnId) ? columnId : null);
+  // A custom field's sort key: a person's name, an option's place in the
+  // list, ticked first or last, or the value.
+  function sortKey(job, by) {
+    const field = fieldById(fieldIdOf(by));
+    const value = field ? valueOf(job, field.id)?.value ?? null : null;
+    if (!field || value == null) return null;
+    if (field.type === 'person') return (state.people.find((p) => p.id === value)?.name ?? '').toLowerCase() || null;
+    if (field.type === 'dropdown') {
+      const at = (field.options ?? []).findIndex((o) => o.id === value);
+      return at < 0 ? null : at;
+    }
+    if (field.type === 'checkbox') return value === true ? 1 : 0;
+    return typeof value === 'string' ? value.toLowerCase() : value;
+  }
+  // A column head's sort button, as ClickUp's: it shows on hover, or
+  // always while it sorts. A click sorts one way, again the other way, and
+  // a third time takes the sort off. A right-click on a sorting head opens
+  // a small menu: change the direction, or clear the sort.
+  function sortButton(columnId, label) {
+    const by = sortOf(columnId);
+    if (!by) return null;
+    const { sorts } = state.view;
+    const at = sorts.findIndex((s) => s.by === by);
+    const on = at >= 0 ? sorts[at] : null;
+    const [up, down] = dirWords(by);
+    const next = () => {
+      if (!on) change({ sorts: [{ by, dir: 'asc' }] });
+      else if (on.dir === 'asc') change({ sorts: sorts.map((s, n) => (n === at ? { ...s, dir: 'desc' } : s)) });
+      else change({ sorts: sorts.filter((_, n) => n !== at) });
+    };
+    const words = on ? `Sorted ${on.dir === 'asc' ? up : down}. Click to ${on.dir === 'asc' ? `sort ${down}` : 'clear the sort'}` : `Sort by ${label}`;
+    return h('button', {
+      type: 'button', class: `fx-th-sort${on ? ' fx-th-sort--on' : ''}`, 'aria-label': words, title: words,
+      onclick: (event) => { event.stopPropagation(); next(); },
+      oncontextmenu: (event) => {
+        if (!on) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onRightButton(event, () => sortMenuAt(event, by, label, on, at));
+      },
+    }, lucide(h, on ? (on.dir === 'asc' ? 'arrow-up' : 'arrow-down') : 'chevrons-up-down'),
+    on && sorts.length > 1 ? h('span', { class: 'fx-th-sort__n' }, String(at + 1)) : null);
+  }
+  function sortMenuAt(event, by, label, on, at) {
+    const close = () => columnPop.hidePopover?.();
+    const { sorts } = state.view;
+    const flip = () => change({ sorts: sorts.map((s, n) => (n === at ? { ...s, dir: s.dir === 'asc' ? 'desc' : 'asc' } : s)) });
+    columnPop.replaceChildren(
+      h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitemcheckbox', 'aria-checked': 'true', title: 'Change the direction', onclick: () => { close(); flip(); } },
+        h('span', { class: 'fx-pop__tick' }, lucide(h, on.dir === 'asc' ? 'arrow-up' : 'arrow-down')), h('span', {}, `Sort by ${label}`), h('span', { class: 'fx-pop__end' }, svg(TICK_ICON))),
+      h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', onclick: () => { close(); change({ sorts: sorts.filter((_, n) => n !== at) }); } },
+        h('span', { class: 'fx-pop__tick' }, lucide(h, 'ban')), h('span', {}, 'Clear sort')));
+    placeColumnPop(event);
+  }
+  const columnPop = h('div', { class: 'fx-pop', id: 'fx-jobs-colmenu', popover: 'auto', role: 'menu' });
+  document.body.append(columnPop);
+  // A popover opened while the right button is still down closes again on
+  // its release (light dismiss), so open it after the release.
+  function onRightButton(event, open) {
+    if (event.buttons & 2) addEventListener('pointerup', () => setTimeout(open), { once: true });
+    else open();
+  }
+  function columnMenu(column, event) {
+    const ids = state.view.columns;
+    const close = () => columnPop.hidePopover?.();
+    const item = (icon, text, run) => h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', onclick: () => { close(); run(); } },
+      h('span', { class: 'fx-pop__tick' }, lucide(h, icon)), h('span', {}, text));
+    const parts = [];
+    if (column) {
+      const sort = sortOf(column.id);
+      if (sort) {
+        const [up, down] = dirWords(sort);
+        parts.push(item('arrow-up-narrow-wide', `Sort: ${up}`, () => change({ sorts: [{ by: sort, dir: 'asc' }] })),
+          item('arrow-down-wide-narrow', `Sort: ${down}`, () => change({ sorts: [{ by: sort, dir: 'desc' }] })), h('div', { class: 'fx-pop__sep' }));
+      }
+      const rest = ids.filter((c) => c !== column.id);
+      parts.push(item('arrow-left-to-line', 'Move to start', () => change({ columns: [column.id, ...rest] })),
+        item('arrow-right-to-line', 'Move to end', () => change({ columns: [...rest, column.id] })));
+      if (column.id.startsWith('field:') && ['owner', 'admin'].includes(ui.me?.person?.role)) {
+        parts.push(item('settings', 'Edit custom field', () => ui.go('/custom-fields')));
+      }
+      parts.push(h('div', { class: 'fx-pop__sep' }), item('eye-off', 'Hide column', () => change({ columns: rest })));
+    }
+    // + lists the hidden columns: a click adds one at the end.
+    if (!column) {
+      const shown = new Set(ids);
+      const hidden = [
+        ...builtInColumns().filter((id) => !shown.has(id)).map((id) => ({ id, label: id === 'assignee' ? assigneeField().name : COLUMNS[id] })),
+        ...customColumns().filter((f) => !shown.has(fieldGroup(f.id))).map((f) => ({ id: fieldGroup(f.id), label: f.name })),
+      ];
+      parts.push(...hidden.map((c) => h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitem', onclick: () => { close(); change({ columns: [...ids, c.id] }); } }, c.label)));
+      if (!hidden.length) parts.push(h('p', { class: 'fx-pop__head' }, 'Every column shows'));
+    }
+    columnPop.replaceChildren(...parts);
+    placeColumnPop(event);
+  }
+  function placeColumnPop(event) {
+    columnPop.showPopover?.();
+    const x = event.clientX || event.currentTarget?.getBoundingClientRect?.().left || 0;
+    const y = event.clientY || event.currentTarget?.getBoundingClientRect?.().bottom || 0;
+    columnPop.style.top = `${Math.round(Math.min(y + 4, innerHeight - columnPop.offsetHeight - 8))}px`;
+    columnPop.style.left = `${Math.round(Math.max(8, Math.min(x, innerWidth - columnPop.offsetWidth - 8)))}px`;
+  }
+
+  // The list's columns, in the order the person chose them. One column holds
+  // one field; each date has its own column.
+  function listColumns() {
+    const day = (iso) => h('time', { datetime: iso ?? null, title: iso ? fullDate(iso) : null }, shortDate(iso));
+    const late = (job) => (isLate(job) ? h('span', { class: 'fx-job__date--late', title: 'Past due' }, day(job.dueOn)) : day(job.dueOn));
+    const BUILT_IN = {
+      case: { kind: 'case', dim: true, cell: (job) => caseNumber(job) ?? '—' },
+      practitioner: { kind: 'text', dim: true, cell: (job) => job.practitioner ?? '—' },
+      patient: { kind: 'text', dim: true, cell: (job) => job.patient ?? '—' },
+      stage: { kind: 'stage', cell: (job) => stagePill(statusOf(job)) },
+      assignee: { kind: 'person', cell: (job) => personBadge(job, assigneeField()) },
+      ordered: { kind: 'date', dim: true, cell: (job) => day(job.orderedOn) },
+      due: { kind: 'date', dim: true, cell: late },
+      shipped: { kind: 'date', dim: true, cell: (job) => day(job.shippedOn) },
+      total: { kind: 'total', num: true, strong: true, cell: (job) => (job.totalCents == null ? '—' : formatCents(job.totalCents)) },
+    };
+    const allowed = new Set(builtInColumns());
+    return state.view.columns.map((id) => {
+      if (BUILT_IN[id]) return allowed.has(id) ? { id, label: id === 'assignee' ? assigneeField().name : COLUMNS[id], ...BUILT_IN[id] } : null;
+      const field = customColumns().find((f) => fieldGroup(f.id) === id);
+      if (!field) return null;
+      const cell = field.type === 'person' ? (job) => personBadge(job, field)
+        : field.type === 'date' ? (job) => day(valueOf(job, field.id)?.value ?? null) : (job) => fieldText(job, field);
+      return { id, label: field.name, kind: field.type === 'date' ? 'date' : field.type === 'person' ? 'person' : field.type === 'number' ? 'total' : 'text', num: field.type === 'number', dim: true, cell };
+    }).filter(Boolean);
+  }
+
+  // A person custom field's value as a badge (initials), the name on hover.
+  function personBadge(job, field) {
+    const value = field ? valueOf(job, field.id)?.value ?? null : null;
+    if (!value) return h('span', { class: 'fx-dim' }, '—');
+    const name = state.people.find((p) => p.id === value)?.name ?? 'Former person';
+    return h('span', { class: 'fx-avatar fx-avatar--sm', role: 'img', 'aria-label': name, title: name }, initialsOf(name));
+  }
+
+  // A job's custom field value as text.
+  function fieldText(job, field) {
+    const value = field ? valueOf(job, field.id)?.value ?? null : null;
+    if (value == null || value === false) return '—';
+    if (field.type === 'checkbox') return 'Yes';
+    if (field.type === 'person') return state.people.find((p) => p.id === value)?.name ?? 'Former person';
+    if (field.type === 'dropdown') return field.options?.find((o) => o.id === value)?.name ?? '—';
+    if (field.type === 'date') return showDate(value);
+    return String(value);
+  }
+
   // The list: one block per group, with the group's label over its rows.
+  // A tick column at the left; a group's head has a tick for every job in
+  // the group, and a click on the head folds the group or opens it. Grouped
+  // by None, it is one plain list with no heads.
   function list(groups, count) {
     if (!count) return h('div', { class: 'fx-panel' }, h('p', { class: 'fx-empty' }, 'No job matches the search or filter.'));
+    const shownGroups = groups.filter((g) => g.jobs.length);
+    const folded = new Set(state.folded[state.view.group] ?? []);
+    const allJobs = shownGroups.flatMap((g) => g.jobs);
+    const boxes = [];
+    // A tick box for a set of jobs: ticked when all are, half when some are.
+    const setBox = (jobs, label) => {
+      const box = h('input', { type: 'checkbox', class: 'fx-tick', 'aria-label': label, onclick: (event) => event.stopPropagation() });
+      const sync = () => {
+        const on = jobs.filter((job) => state.ticked.has(jobKey(job))).length;
+        box.checked = on > 0 && on === jobs.length;
+        box.indeterminate = on > 0 && on < jobs.length;
+      };
+      box.addEventListener('change', () => {
+        for (const job of jobs) { if (box.checked) state.ticked.add(jobKey(job)); else state.ticked.delete(jobKey(job)); }
+        syncAll();
+      });
+      boxes.push(sync);
+      sync();
+      return box;
+    };
+    const syncAll = () => { for (const sync of boxes) sync(); drawBulk(); };
+    const tickCell = (box) => h('td', { class: 'fx-tick-cell', onclick: (event) => event.stopPropagation() }, box);
+    const columns = listColumns();
     const row = (job) => h('tr', {
       class: 'fx-row-link', tabindex: '0',
       onclick: () => openJob(job),
-      onkeydown: (event) => { if (event.key === 'Enter') openJob(job); },
+      onkeydown: (event) => { if (event.key === 'Enter' && event.target === event.currentTarget) openJob(job); },
     },
-    h('td', {}, h('span', { class: 'fx-job__cell' }, h('span', { class: 'fx-strong' }, clientOf(job)), problemMark(job))),
-    h('td', { class: 'fx-dim' }, job.practitioner ?? '—'),
-    h('td', {}, job.status ?? NO_STATUS),
-    h('td', { class: 'fx-dim' }, dateOf(job) ?? '—'),
-    h('td', { class: 'fx-num fx-strong' }, job.totalCents == null ? '—' : formatCents(job.totalCents)));
+    tickCell(setBox([job], `Tick ${clientOf(job)}${caseNumber(job) ? `, case ${caseNumber(job)}` : ''}`)),
+    h('td', { class: 'fx-c-client' }, h('span', { class: 'fx-job__cell' }, h('span', { class: 'fx-strong' }, clientOf(job)), problemMark(job))),
+    columns.map((c) => h('td', { class: `fx-c-${c.kind}${c.num ? ' fx-num' : ''}${c.dim ? ' fx-dim' : ''}${c.strong ? ' fx-strong' : ''}`, 'data-label': c.label }, c.cell(job))),
+    h('td', { class: 'fx-c-end' }));
+    const fold = (label) => {
+      const next = new Set(state.folded[state.view.group] ?? []);
+      if (next.has(label)) next.delete(label); else next.add(label);
+      state.folded = { ...state.folded, [state.view.group]: [...next] };
+      saveFolded(state.folded);
+      draw();
+    };
+    const head = ({ label, jobs, rank, color }) => {
+      const open = !folded.has(label);
+      const toggle = h('button', {
+        type: 'button', class: 'fx-table__fold', 'aria-expanded': String(open), 'aria-label': `${label}, ${jobs.length} ${jobs.length === 1 ? 'job' : 'jobs'}. ${open ? 'Fold' : 'Open'} the group`,
+        onclick: (event) => { event.stopPropagation(); fold(label); },
+      }, svg(CHEVRON_ICON),
+      color ? h('span', { class: 'fx-cf__opt fx-board__lane', 'data-color': color }, label, h('span', { class: 'fx-stage__count' }, String(jobs.length))) : stagePill(label, jobs.length, rank));
+      return h('tr', { class: `fx-table__group${open ? '' : ' fx-table__group--folded'}`, onclick: () => fold(label) },
+        tickCell(setBox(jobs, `Tick every job in ${label}`)),
+        h('td', { colspan: String(columns.length + 2) }, h('span', { class: 'fx-table__group-row' }, toggle, h('span', { class: 'fx-board__sum' }, formatCents(totalOf(jobs))))));
+    };
     return h('div', { class: 'fx-panel' }, h('table', { class: 'fx-table fx-table--jobs' },
       h('thead', {}, h('tr', {},
-        h('th', {}, 'Client'), h('th', {}, 'Practitioner'), h('th', {}, 'Stage'), h('th', {}, 'Date'),
-        h('th', { class: 'fx-num' }, 'Total'))),
-      groups.filter((g) => g.jobs.length).map(({ label, jobs, rank }) => h('tbody', {},
-        h('tr', { class: 'fx-table__group' }, h('td', { colspan: '5' },
-          h('span', { class: 'fx-table__group-row' }, stagePill(label, jobs.length, rank), h('span', { class: 'fx-board__sum' }, formatCents(totalOf(jobs)))))),
-        jobs.map(row)))));
+        h('th', { class: 'fx-tick-cell' }, setBox(allJobs, 'Tick every job shown')),
+        h('th', {}, h('span', { class: 'fx-th-cell' }, h('span', { class: 'fx-th fx-th--fixed' }, 'Client'), sortButton('client', 'Client'))),
+        columns.map((c) => h('th', { class: c.num ? 'fx-num' : null, oncontextmenu: (event) => { event.preventDefault(); onRightButton(event, () => columnMenu(c, event)); } },
+          h('span', { class: 'fx-th-cell' },
+            h('button', { type: 'button', class: 'fx-th', 'aria-haspopup': 'menu', title: 'Column menu (or right-click)', onclick: (event) => columnMenu(c, event) }, c.label),
+            sortButton(c.id, c.label)))),
+        h('th', { class: 'fx-th-add' }, h('button', {
+          type: 'button', class: 'fx-th fx-th--add', 'aria-label': 'Show a column', title: 'Show a column', onclick: (event) => columnMenu(null, event),
+        }, '+')))),
+      shownGroups.map((g) => h('tbody', {},
+        g.label == null ? null : head(g),
+        g.label != null && folded.has(g.label) ? null : g.jobs.map(row)))));
+  }
+
+  // ── Bulk actions ─────────────────────────────────────────────────────────
+  // The bar floats at the foot while list rows are ticked (bulk-bar.js, as on
+  // Invoices). Move and Ready are the main steps; Copy and Export take the
+  // ticked rows out; More has them all, a field per custom field, and the
+  // Selection steps.
+  const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+  const tickedJobs = () => (state.found ?? []).filter((job) => state.ticked.has(jobKey(job)));
+  const setTicks = (jobs) => { state.ticked = new Set(jobs.map(jobKey)); draw(); };
+
+  function drawBulk() {
+    const rows = state.view.layout === 'list' ? tickedJobs() : [];
+    bulk.draw({ count: rows.length, onClear: () => setTicks([]), ...bulkActions(rows) });
+  }
+
+  function bulkActions(rows) {
+    if (!rows.length) return { groups: [], more: [] };
+    const status = [{ icon: 'arrow-right-left', label: 'Move', title: 'Move to a stage', run: () => moveMany(rows) }];
+    if (state.fields.length) status.push({ icon: 'tag', label: 'Custom field', title: 'Set a custom field', run: () => setMany(rows) });
+    const workable = rows.filter((job) => job.obligation?.view === 'in_work');
+    if (workable.length) status.push({ icon: 'check-check', label: 'Ready', title: 'Mark ready to invoice', run: () => readyMany(workable) });
+    const draftable = state.canDraft ? rows.filter((job) => job.obligation?.view === 'ready' && !job.obligation.invoiceId) : [];
+    if (draftable.length) status.push({ icon: 'file-plus', label: 'Draft', title: 'Draft invoices', run: () => draftMany(draftable) });
+    const fields = state.fields.map((field) => ({ icon: 'tag', label: field.name, title: `Set ${field.name}`, run: () => setMany(rows, field.id) }));
+    const apply = [
+      { icon: 'copy', label: 'Copy', iconOnly: true, title: 'Copy case numbers', run: () => copyLines(rows.map((job) => caseNumber(job) ?? clientOf(job))) },
+      { icon: 'download', label: 'Export', iconOnly: true, title: 'Export CSV', run: () => exportCsv(rows) },
+    ];
+    const all = state.found ?? [];
+    const selection = [
+      { icon: 'list-checks', label: 'Tick all shown', run: () => setTicks(all) },
+      { icon: 'square-check', label: 'Invert ticks', run: () => setTicks(all.filter((job) => !state.ticked.has(jobKey(job)))) },
+      { icon: 'square-x', label: 'Clear ticks', run: () => setTicks([]) },
+    ];
+    return {
+      groups: [status, apply],
+      more: [
+        { head: 'Change stage', actions: status },
+        { head: 'Set a custom field', actions: fields },
+        { head: 'Apply an action', actions: apply },
+        { head: 'Selection', actions: selection },
+      ],
+    };
+  }
+
+  // Move the ticked jobs to one stage. A work system's own stages
+  // (Seazona) cannot be moved from Flow in bulk yet, so this says so; a
+  // lab's own stages are custom fields (Field). Someone who needs it can
+  // report it (Report a problem).
+  async function moveMany(jobs) {
+    const systems = [...new Set(jobs.map((job) => SYSTEM_NAME[job.sourceSystem] ?? job.sourceSystem))].join(' and ');
+    await ui.dialog({
+      title: 'Not yet available',
+      body: h('p', {}, `Moving ${plural(jobs.length, 'job', 'jobs')} to a ${systems} stage at once is not yet available.`),
+      confirm: 'OK',
+    });
+  }
+
+  // One step on each job's invoice record, one job after the other.
+  async function eachJob(jobs, step) {
+    let done = 0;
+    const refused = [];
+    for (const job of jobs) {
+      try { await step(job); done += 1; } catch (e) { refused.push(e); }
+    }
+    return { done, refused };
+  }
+
+  async function readyMany(jobs) {
+    const { done, refused } = await eachJob(jobs, (job) => flow(`/api/invoicing/jobs/${job.obligation.id}/ready`, { method: 'POST', body: JSON.stringify({ ready: true }) }));
+    ui.toast?.(refused.length ? `${done} ready to invoice. ${refused[0].message}` : `${plural(done, 'job', 'jobs')} ready to invoice.`, refused.length ? 'danger' : 'success');
+    state.ticked.clear();
+    await load();
+  }
+
+  async function draftMany(jobs) {
+    const ok = await ui.dialog({
+      title: `Draft ${plural(jobs.length, 'invoice', 'invoices')}?`,
+      body: h('p', {}, 'Flow makes a draft invoice for each job. The drafts stay in Flow until a person checks them.'),
+      confirm: `Draft ${jobs.length}`,
+    });
+    if (!ok) return;
+    const { done, refused } = await eachJob(jobs, (job) => flow(`/api/invoicing/jobs/${job.obligation.id}/draft`, { method: 'POST', body: '{}' }));
+    ui.toast?.(refused.length ? `${done} drafted. ${plural(refused.length, 'job was', 'jobs were')} not drafted: open ${refused.length === 1 ? 'it' : 'them'} to see why.` : `${plural(done, 'draft invoice', 'draft invoices')} made.`, refused.length ? 'danger' : 'success');
+    state.ticked.clear();
+    await load();
+  }
+
+  // Set one custom field on the ticked jobs, in Flow only: choose the
+  // custom field, then its value. `fieldId` starts on that custom field.
+  // A dropdown, person or checkbox has a list of values; a date, number or
+  // text has a box. An empty box clears the value.
+  async function setMany(jobs, fieldId = null) {
+    const fields = state.fields;
+    if (!fields.length) return;
+    const lanesOf = (field) => fieldLanes(field, { people: state.people, jobs: state.jobs, valueOf: (job) => valueOf(job, field.id)?.value ?? null }).filter((lane) => !lane.archived);
+    const listed = (field) => field.groupable;
+    const pickField = h('select', { class: 'fx-select', name: 'field', 'aria-label': 'Custom field' },
+      fields.map((f) => h('option', { value: f.id, selected: f.id === fieldId }, f.name)));
+    const valueHost = h('div', {});
+    const fieldOf = (id) => fields.find((f) => f.id === id) ?? fields[0];
+    const fillValue = () => {
+      const field = fieldOf(pickField.value);
+      const control = listed(field)
+        ? h('select', { class: 'fx-select', name: 'value', 'aria-label': 'Value' }, lanesOf(field).map((lane, i) => h('option', { value: String(i) }, lane.label)))
+        : h('input', {
+          class: 'fx-input', name: 'value', 'aria-label': 'Value',
+          type: field.type === 'date' ? 'date' : field.type === 'number' ? 'number' : 'text', step: field.type === 'number' ? 'any' : null, maxlength: field.type === 'text' ? '500' : null,
+        });
+      valueHost.replaceChildren(h('label', { class: 'fx-field' }, h('span', {}, 'Value'), control));
+    };
+    pickField.addEventListener('change', fillValue);
+    fillValue();
+    const data = await ui.dialog({
+      title: `Set a custom field on ${plural(jobs.length, 'job', 'jobs')}`,
+      body: h('div', { class: 'fx-fields' }, h('label', { class: 'fx-field' }, h('span', {}, 'Custom field'), pickField), valueHost),
+      confirm: 'Set',
+    });
+    if (!data) return;
+    const field = fields.find((f) => f.id === data.get('field'));
+    if (!field) return;
+    let value;
+    let shown;
+    if (listed(field)) {
+      const lane = lanesOf(field)[Number(data.get('value'))];
+      if (!lane) return;
+      ({ value } = lane);
+      shown = lane.label;
+    } else {
+      const raw = String(data.get('value') ?? '').trim();
+      value = raw === '' ? null : field.type === 'number' ? Number(raw) : raw;
+      shown = raw === '' ? 'empty' : field.type === 'date' ? fullDate(raw) : raw;
+    }
+    for (const job of jobs) await setValue(job, field, value);
+    ui.toast?.(`${field.name} set to ${shown} on ${plural(jobs.length, 'job', 'jobs')}.`, 'success');
+  }
+
+  async function copyLines(lines) {
+    try {
+      await navigator.clipboard.writeText(lines.join('\n'));
+      ui.toast?.(`${plural(lines.length, 'line', 'lines')} copied.`, 'success');
+    } catch {
+      ui.toast?.('The browser did not allow a copy.', 'danger');
+    }
+  }
+
+  // The ticked rows as a CSV file, with the columns on the screen.
+  function exportCsv(jobs) {
+    const cell = (v) => (/[",\n]/.test(String(v ?? '')) ? `"${String(v).replace(/"/g, '""')}"` : String(v ?? ''));
+    const lines = [['Case', 'Client', 'Practitioner', 'Stage', 'Due', 'Ordered', 'Total']]
+      .concat(jobs.map((job) => [caseNumber(job) ?? '', clientOf(job), job.practitioner ?? '', statusOf(job), job.dueOn ?? '', job.orderedOn ?? '',
+        job.totalCents == null ? '' : (job.totalCents / 100).toFixed(2)]));
+    const url = URL.createObjectURL(new Blob([lines.map((l) => l.map(cell).join(',')).join('\r\n')], { type: 'text/csv' }));
+    const a = h('a', { href: url, download: `jobs-${today()}.csv` });
+    document.body.append(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+    ui.toast?.(`${plural(jobs.length, 'job', 'jobs')} exported.`, 'success');
   }
 
   // What a person can do with the job's invoice from here.
@@ -667,6 +1306,7 @@ export async function renderJobs(main, ui) {
     const o = job.obligation;
     const stage = invoiceStage(o);
     const found = problemsOf(job);
+    const choose = found.find((f) => f.go === 'choose') ?? null;
     const system = SYSTEM_NAME[job.sourceSystem] ?? job.sourceSystem;
     const status = job.status ?? NO_STATUS;
     const late = isLate(job);
@@ -678,10 +1318,37 @@ export async function renderJobs(main, ui) {
     const invoiceText = o?.invoiceId
       ? link({ href: `/invoices/${o.invoiceId}`, onclick: (event) => { close(); ui.go(event); } },
         `${o.invoiceStatus === 'draft' ? 'Draft' : 'Invoice'} ${o.invoiceNumber ?? ''}`.trim() + (stage ? ` · ${INVOICE_STAGES[stage]}` : ''))
-      : stage ? INVOICE_STAGES[stage] : o ? 'Not ready to invoice' : 'No invoice yet';
-    const fixBox = found.length ? h('section', { class: 'fx-task__fix', 'aria-label': 'Fix' },
+      : choose ? h('span', { class: 'fx-task__none' }, svg(WARN_ICON), 'Needs invoice')
+        : stage ? INVOICE_STAGES[stage] : o ? 'Not ready to invoice' : 'No invoice yet';
+    const rest = found.filter((f) => f.go !== 'choose');
+    const fixBox = rest.length ? h('section', { class: 'fx-task__fix', 'aria-label': 'Fix' },
       h('h3', {}, 'Fix'),
-      found.map((f) => h('div', { class: 'fx-task__fixrow' }, h('span', {}, `${f.text} ${f.todo}`), fixLink(f.go)))) : null;
+      rest.map((f) => h('div', { class: 'fx-task__fixrow' }, h('span', {}, [f.text, f.todo].filter(Boolean).join(' ')), fixLink(f.go)))) : null;
+    // No invoice, and the match is unclear: one line and two buttons. The
+    // possible matches are compared on the Reconcile page, not here.
+    const chooseBox = choose ? h('section', { class: 'fx-task__choose', 'aria-label': 'Invoice' },
+      svg(WARN_ICON),
+      h('span', {}, choose.text),
+      h('div', { class: 'fx-task__choices' },
+        state.canDraft ? h('button', { class: 'fx-btn fx-btn--primary', type: 'button', onclick: (event) => makeInvoice(event.currentTarget) }, 'Make invoice') : null,
+        h('a', { class: 'fx-btn', href: `/reconcile/${o.id}`, onclick: (event) => { close(); ui.go(event); } }, 'Reconcile'))) : null;
+    // "Make invoice": the person says the job has no invoice yet, then Flow
+    // drafts it (the live check before the draft still runs).
+    async function makeInvoice(button) {
+      if (button) button.disabled = true;
+      try {
+        await flow(`/api/invoicing/jobs/${o.id}/no-invoice`, { method: 'POST', body: '{}' });
+        const { invoice } = await flow(`/api/invoicing/jobs/${o.id}/draft`, { method: 'POST', body: '{}' });
+        ui.toast('Draft invoice made.', 'success');
+        close();
+        ui.go(`/invoices/${invoice.id}`);
+      } catch (error) {
+        const reasons = error.details?.reasons;
+        ui.toast(reasons?.length ? `Not drafted: ${reasons.join('; ')}.` : error.message, 'danger');
+        close();
+        await load();
+      }
+    }
     // Each fix's link: Flow's own invoice, the job in the work system, or
     // the Flow page where the fix is made (job-board.js GO).
     function fixLink(go) {
@@ -718,9 +1385,10 @@ export async function renderJobs(main, ui) {
           // The job links to Flow's invoice only. The invoice page shows its
           // link to an accounting system (its Linked card).
           field('Invoice', invoiceText)),
+        chooseBox,
         fixBox,
         state.fields.length ? h('section', { class: 'fx-task__custom', 'aria-label': 'Custom fields' },
-          h('h3', {}, 'Fields'),
+          h('h3', {}, 'Custom fields'),
           h('dl', { class: 'fx-task__fields' }, state.fields.map((f) => h('div', {}, h('dt', {}, f.name), h('dd', {}, fieldControl(job, f)))))) : null,
         movesStages(job) ? h('section', { class: 'fx-task__custom', 'aria-label': `${system} stage` },
           h('h3', {}, `${system} stage`), stageControl(job)) : null,
@@ -745,7 +1413,7 @@ export async function renderJobs(main, ui) {
     element.addEventListener('close', () => element.remove());
     document.body.append(element);
     element.showModal();
-    if (atFix && fixBox) fixBox.scrollIntoView({ block: 'start' });
+    if (atFix && (chooseBox ?? fixBox)) (chooseBox ?? fixBox).scrollIntoView({ block: 'start' });
     if (!o) return;
     const when = (iso) => new Date(iso).toLocaleString('en-AU', { day: 'numeric', month: 'short', hour: 'numeric', minute: '2-digit' });
     flow(`/api/invoicing/jobs/${o.id}/activity`).then(({ events }) => {