@arcforgelabs/flow 2026.10.37 → 2026.10.38

package/server/ui/jobs.js

@@ -12,20 +12,23 @@
 // 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, filterCount, filterJobs, groupJobs, GROUPS, laneOf, normaliseJobsView, NOT_SET, 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 +42,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 +71,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 +93,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 +115,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 +139,23 @@ 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). "Assignee: me" keeps the
+  // jobs it names the person looking at.
+  const assigneeField = () => state.fields.find((f) => f.type === 'person') ?? null;
+  const isMine = (job) => {
+    const field = assigneeField();
+    return Boolean(field && ui.me?.person?.id && valueOf(job, field.id)?.value === ui.me.person.id);
+  };
+  // 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);
@@ -157,7 +210,8 @@ export async function renderJobs(main, ui) {
     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 DATE_WORDS = ['Oldest first', 'Newest first'];
+  const DIR_WORDS = { total: ['Low to high', 'High to low'], due: DATE_WORDS, ordered: DATE_WORDS, shipped: DATE_WORDS, board: ['As the lab system has it', 'Reversed'] };
 
   const groupMenu = menu(GROUP_ICON, (_redraw, close) => [
     heading('Group by'),
@@ -182,6 +236,7 @@ export async function renderJobs(main, ui) {
       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'),
+      assigneeField() ? option(`${assigneeField().name}: me`, state.view.mine, () => { change({ mine: !state.view.mine }); redraw(); }, 'menuitemcheckbox') : null,
       h('div', { class: 'fx-pop__sep' }),
       heading('Statuses'),
       ...orderStatuses(state.statuses, state.jobs).map((label) => option(label, !hidden.has(label), () => {
@@ -191,20 +246,43 @@ export async function renderJobs(main, ui) {
         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(); },
+        type: 'button', class: 'fx-btn fx-btn--ghost fx-btn--sm', onclick: () => { change({ hide: [], late: false, problems: false, mine: false }); redraw(); },
       }, 'Clear filters')) : null,
     ];
   });
-  controls.append(...groupMenu.node, ...sortMenu.node, ...filterMenu.node);
+  // Columns (the list only): Client always shows; each other column can be
+  // shown or hidden. Custom fields are columns too.
+  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, ...columnsMenu.node);
 
   function drawControls() {
     const { group, sort, dir } = state.view;
     const field = fieldOfGroup(group);
-    groupMenu.set(`Group: ${field?.name ?? GROUPS[group] ?? GROUPS.status}`, group !== DEFAULT_VIEW.group && (Boolean(field) || Boolean(GROUPS[group])));
+    // The board has no "None": it shows the status lanes.
+    const shown = group === 'none' && state.view.layout === 'board' ? 'status' : group;
+    groupMenu.set(`Group: ${field?.name ?? GROUPS[shown] ?? GROUPS.status}`, shown !== DEFAULT_VIEW.group && (Boolean(field) || Boolean(GROUPS[shown])));
     const sorted = sort !== DEFAULT_VIEW.sort || dir !== DEFAULT_VIEW.dir;
     sortMenu.set(sorted ? `Sort: ${SORTS[sort]}${dir === 'desc' ? ' ↓' : ''}` : 'Sort', sorted);
     const count = filterCount(state.view);
     filterMenu.set(count ? `Filter · ${count}` : 'Filter', count > 0);
+    columnsMenu.set('Columns', false);
+    columnsMenu.node[0].hidden = state.view.layout !== 'list';
   }
   drawControls();
 
@@ -217,10 +295,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 });
+      { status: statusOf, late: isLate, problem: (job) => problemsOf(job).length > 0, mine: isMine });
     const groups = grouped(sortJobs(found, state.view));
     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() {
@@ -308,7 +391,8 @@ 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]) {
+    if (group === 'none' && state.view.layout === 'list') return [{ label: null, jobs, rank: 'plain' }];
+    if (group === 'status' || group === 'none' || !GROUPS[group]) {
       const hidden = new Set(state.view.hide);
       return groupJobs(jobs, orderStatuses(state.statuses, state.jobs).filter((label) => !hidden.has(label)), laneStatusOf)
         .map((g) => ({ ...g, rank: statusRank(g.label), drop: g.label === NO_STATUS ? null : { kind: 'stage', status: g.label } }));
@@ -569,27 +653,331 @@ 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.
+  const SORT_OF = { practitioner: 'practitioner', due: 'due', ordered: 'ordered', shipped: 'shipped', total: 'total' };
+  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 = SORT_OF[column.id];
+      if (sort) {
+        const [up, down] = DIR_WORDS[sort] ?? ['A to Z', 'Z to A'];
+        parts.push(item('arrow-up-narrow-wide', `Sort: ${up}`, () => change({ sort, dir: 'asc' })),
+          item('arrow-down-wide-narrow', `Sort: ${down}`, () => change({ 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);
+    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', {}, 'Client'),
+        columns.map((c) => h('th', { class: c.num ? 'fx-num' : null, oncontextmenu: (event) => { event.preventDefault(); onRightButton(event, () => columnMenu(c, event)); } },
+          h('button', { type: 'button', class: 'fx-th', 'aria-haspopup': 'menu', title: 'Column menu (or right-click)', onclick: (event) => columnMenu(c, event) }, 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 +1055,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 +1067,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 +1134,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 +1162,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 }) => {