@arcforgelabs/flow 2026.10.51 → 2026.10.52

package/server/ui/invoicing-settings.js

@@ -10,7 +10,7 @@
 // or admin changes them. The full rules are in docs/INVOICING_RULES.md.
 // app.js passes in its shared pieces as `ui`.
 
-import { rulesSection } from '/assets/ui/invoice-rules.js';
+import { ruleMark, rulesSection } from '/assets/ui/invoice-rules.js';
 import { lineMappingSection } from '/assets/ui/line-mappings.js';
 
 const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/INVOICING_RULES.md';
@@ -27,12 +27,6 @@ const PARTS = [
   { key: 'price-codes', title: 'Price codes', mount: (ui) => lineMappingSection(ui) },
 ];
 
-// What a rule does, as its card's mark: Pending, Waits, Never drafted.
-const KIND = {
-  pending: { mark: 'flag' },
-  wait: { mark: 'clock' },
-  skip: { mark: 'ban' },
-};
 const SHOWN = 6;
 
 export function renderInvoicingSettings(main, ui, id) {
@@ -60,7 +54,7 @@ export function renderInvoicingSettings(main, ui, id) {
       return;
     }
     const ruleCard = (rule) => tileCard({
-      row: true, href: page('invoices'), mark: (KIND[rule.action.kind] ?? { mark: 'list-checks' }).mark, title: rule.name,
+      row: true, href: page('invoices'), mark: ruleMark(rule), title: rule.name,
       meta: rule.enabled ? 'On' : 'Off',
     });
     const waiting = labels.filter((l) => l.unmapped > 0).length;

package/server/ui/invoicing.js

@@ -641,16 +641,20 @@ export async function renderInvoiceList(main, ui) {
     };
     const href = (invoice) => `/invoices/${invoice.id}`;
     const ALL = {
-      number: numbered ? { kind: 'number', cell: (i) => link(href(i), i.number ?? 'Draft') } : null,
-      client: { kind: 'client', phone: 'title', cell: (i) => (numbered ? (i.contactName ?? '—') : link(href(i), i.contactName ?? 'No client')) },
+      // The client is the row's link: on a phone it is the title, with a 44px hit area.
+      number: numbered ? { kind: 'number', phone: 'meta', className: 'fx-strong', cell: (i) => i.number ?? 'Draft' } : null,
+      client: { kind: 'client', phone: 'title', cell: (i) => link(href(i), i.contactName ?? 'No client') },
+      // A phone row: the client (and number) and total, then the problem,
+      // the reference or the status, and the date. A tab without numbers
+      // holds one status: its tab says it.
       reference: showProblem
-        ? { label: 'Problem', kind: 'text', cell: problemCell }
-        : { kind: 'text', className: 'fx-dim', cell: (i) => i.reference ?? '—' },
-      date: { label: created ? 'Created' : 'Date', kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.issueDate ?? i.createdAt?.slice(0, 10)) },
+        ? { label: 'Problem', kind: 'text', phone: 'meta', cell: problemCell }
+        : { kind: 'text', className: 'fx-dim', phone: numbered ? 'hide' : 'meta', cell: (i) => i.reference ?? '—' },
+      date: { label: created ? 'Created' : 'Date', kind: 'date', className: 'fx-dim', phone: 'meta', cell: (i) => dateCell(h, i.issueDate ?? i.createdAt?.slice(0, 10)) },
       due: { kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.dueDate) },
       total: { kind: 'total', num: true, className: 'fx-strong', cell: (i) => formatCents(i.totalCents) },
-      status: { kind: 'status', className: 'fx-status-cell', cell: statusCell },
-      linked: linked ? { kind: 'link', cell: linkCell } : null,
+      status: { kind: 'status', className: 'fx-status-cell', ...(numbered ? {} : { phone: 'hide' }), cell: statusCell },
+      linked: linked ? { kind: 'link', phone: 'hide', cell: linkCell } : null,
       // The invoice's job (from the work system): its case, practitioner and
       // the day it shipped.
       case: { kind: 'case', className: 'fx-dim', cell: (i) => (i.job ? caseNumber(i.job) ?? '—' : '—') },
@@ -1449,7 +1453,7 @@ function issuedView(invoice, ui, context, redraw) {
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-doc' },
           h('dl', { class: 'fx-doc__meta' },
-            h('div', {}, h('dt', { class: 'fx-label' }, 'Bill to'), h('dd', {}, invoice.contact?.name ?? '—', invoice.contact?.email ? h('span', { class: 'fx-dim' }, invoice.contact.email) : null)),
+            h('div', {}, h('dt', { class: 'fx-label' }, 'Bill to'), h('dd', {}, invoice.contact?.name ?? '—', invoice.contact?.email ? h('span', { class: 'fx-dim', title: invoice.contact.email }, invoice.contact.email) : null)),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Reference'), h('dd', {}, invoice.reference ?? '—')),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Date'), h('dd', {}, showDate(invoice.issueDate))),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Due'), h('dd', {}, showDate(invoice.dueDate)))),

package/server/ui/job-view.js

@@ -273,7 +273,10 @@ function inDateValue(day, want, today, late) {
 // person looking (for "Me" in a person filter); `today` is yyyy-mm-dd.
 export function matchesFilter(filter, value, { today, me = null, late = null, kind = null } = {}) {
   const want = filter.value;
-  const empty = value == null || value === '' || value === false;
+  // A field can hold many choices (the Price list's Linked): Is keeps a row
+  // with any of the wanted ones, Is not a row with none.
+  const empty = value == null || value === '' || value === false || (Array.isArray(value) && !value.length);
+  const holds = (w) => (Array.isArray(value) ? value.includes(w) : value === w);
   const day = typeof value === 'string' && ISO_DAY.test(value.slice(0, 10)) ? value.slice(0, 10) : null;
   if (kind === 'date' && ['is', 'not'].includes(filter.op)) {
     const inside = inDateValue(day, want, today, late);
@@ -284,8 +287,8 @@ export function matchesFilter(filter, value, { today, me = null, late = null, ki
     case 'unset': return empty;
     case 'yes': return value === true;
     case 'no': return value !== true;
-    case 'is': return Array.isArray(want) ? want.map((w) => (w === 'me' ? me : w)).includes(value) : !empty && text(value) === text(want).trim();
-    case 'not': return !want.map((w) => (w === 'me' ? me : w)).includes(value);
+    case 'is': return Array.isArray(want) ? want.map((w) => (w === 'me' ? me : w)).some(holds) : !empty && text(value) === text(want).trim();
+    case 'not': return !want.map((w) => (w === 'me' ? me : w)).some(holds);
     case 'has': return text(value).includes(text(want).trim());
     case 'hasnt': return !text(value).includes(text(want).trim());
     case 'eq': return typeof value === 'number' && value === want;

package/server/ui/jobs.js

@@ -13,7 +13,8 @@
 // long press opens Move to. With a keyboard, the job's panel has the same moves.
 
 import { bulkBar } from '/assets/ui/bulk-bar.js';
-import { columnTable, dateCell, fieldColumn, onRightButton, personCell, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { captureButton } from '/assets/ui/captures.js';
+import { columnTable, dateCell, fieldColumn, groupHead, personCell, rowCells, viewSaver } from '/assets/ui/columns.js';
 import { lucide } from '/assets/ui/custom-fields.js';
 import { formatCents } from '/assets/ui/invoicing.js';
 import { jobChangeReview } from '/assets/ui/job-change.js';
@@ -92,7 +93,6 @@ function saveSide(tab) {
 
 const WARN_ICON = '<svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 15 14H1z" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M8 6v3.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.6" r=".9" fill="currentColor"/></svg>';
 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 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) {
@@ -126,7 +126,9 @@ export async function renderJobs(main, ui) {
   // In the list, ticked rows get the same floating bar as Invoices.
   const bulk = bulkBar(ui, { label: 'Ticked jobs' });
   const frame = listFrame(main, host);
-  main.append(...listHead('Jobs', { views: views.element, controls, end: [find.element, toggle] }).nodes, frame.element, bulk.element);
+  // A form photo from the Jobs page; Capture lists it with its result.
+  const shoot = captureButton(ui, { icon: true, added: () => ui.toast('Sent to Capture.', 'success') });
+  main.append(...listHead('Jobs', { views: views.element, controls, end: [find.element, toggle, ...shoot.nodes] }).nodes, frame.element, 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),
@@ -170,7 +172,7 @@ export async function renderJobs(main, ui) {
   }
 
   // The chips (view-bar.js), shared with every list page.
-  const { menu, option, title, choose, bin, addButton, rowsFoot, clearAll, filterMenu: buildFilterMenu } = viewBar(h);
+  const { menu, option, groupMenu: buildGroupMenu, sortMenu: buildSortMenu, filterMenu: buildFilterMenu } = viewBar(h);
   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 };
@@ -178,54 +180,31 @@ export async function renderJobs(main, ui) {
   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;
 
-  // ── 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).
+  // ── Group by, Sort ── (view-bar.js). The board always has lanes, so only
+  // the list can take the groups away. In the list, a column's head sorts
+  // too.
   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(ICONS.group, (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(ICONS.sort, (redraw) => {
-    const { sorts } = state.view;
-    const unused = sortOptions().flatMap((o) => o.options ?? [o]).filter((o) => !sorts.some((s) => s.by === o.value));
-    return [
-      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' });
+  const isList = () => state.view.layout === 'list';
+  const groupMenu = buildGroupMenu({
+    options: groupOptions,
+    view: () => ({ group: state.view.group === 'none' && !isList() ? 'status' : state.view.group, groupDir: state.view.groupDir }),
+    change,
+    clearable: isList,
+  });
+  const sortMenu = buildSortMenu({
+    options: () => [
+      ...Object.entries(SORTS).map(([value, label]) => ({ value, label })),
+      { group: 'Custom fields', options: state.fields.map((f) => ({ value: fieldGroup(f.id), label: f.name })) },
+    ],
+    view: () => state.view,
+    change,
+    dirWords,
+    nameOf: (by) => SORTS[by] ?? fieldById(fieldIdOf(by))?.name ?? 'Custom field',
+    empty: 'No sort. Jobs show in the lab system’s order.',
+  });
 
   // ── Filters ──
   // The shared filter panel (view-bar.js), as ClickUp's: groups of rows of
@@ -301,8 +280,6 @@ export async function renderJobs(main, ui) {
   });
   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, sorts, layout } = state.view;
     const list = layout === 'list';
@@ -314,9 +291,7 @@ export async function renderJobs(main, ui) {
     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.draw();
     sortMenu.wrap.hidden = list && !sorts.length;
     filterMenu.draw();
     columnsMenu.set('Columns', false);
@@ -809,44 +784,6 @@ export async function renderJobs(main, ui) {
     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 { sorts } = state.view;
-    const flip = () => change({ sorts: sorts.map((s, n) => (n === at ? { ...s, dir: s.dir === 'asc' ? 'desc' : 'asc' } : s)) });
-    heads.menu.show([
-      h('button', { type: 'button', class: 'fx-pop__item', role: 'menuitemcheckbox', 'aria-checked': 'true', title: 'Change the direction', onclick: () => { heads.menu.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(ICONS.tick))),
-      heads.menu.item('ban', 'Clear sort', () => change({ sorts: sorts.filter((_, n) => n !== at) })),
-    ], event);
-  }
   // The list's heads (columns.js): drag an edge to resize, drag a head to
   // move it; a click or right-click opens its menu: sort by it, move it,
   // edit its custom field, hide it. Client always shows, first. + lists the
@@ -862,19 +799,9 @@ export async function renderJobs(main, ui) {
         ...customColumns().filter((f) => !shown.has(fieldGroup(f.id))).map((f) => ({ id: fieldGroup(f.id), label: f.name })),
       ];
     },
-    extra: (column, item) => {
-      const parts = [];
-      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' }));
-      }
-      if (column.id.startsWith('field:') && ['owner', 'admin'].includes(ui.me?.person?.role)) {
-        parts.push(item('settings', 'Edit custom field', () => ui.go('/custom-fields')));
-      }
-      return parts;
-    },
+    sorting: { sortOf, sorts: () => state.view.sorts, change, dirWords },
+    extra: (column, item) => (column.id.startsWith('field:') && ['owner', 'admin'].includes(ui.me?.person?.role)
+      ? [item('settings', 'Edit custom field', () => ui.go('/custom-fields'))] : []),
   });
 
   // The list's columns, in the order the person chose them. One column holds
@@ -896,14 +823,14 @@ export async function renderJobs(main, ui) {
     const allowed = new Set(builtInColumns());
     // Client is always the first column: it has no drag, Move or Hide.
     const client = {
-      id: 'client', label: 'Client', kind: 'client', fixed: true, sort: () => sortButton('client', 'Client'),
+      id: 'client', label: 'Client', kind: 'client', fixed: true,
       cell: (job) => h('span', { class: 'fx-job__cell' }, h('span', { class: 'fx-strong' }, clientOf(job)), problemMark(job)),
     };
     return [client, ...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);
       return field ? fieldColumn(h, field, { id, valueOf: (job) => valueOf(job, field.id)?.value ?? null, people: state.people }) : null;
-    }).filter(Boolean).map((c) => ({ ...c, sort: () => sortButton(c.id, c.label) }))];
+    }).filter(Boolean)];
   }
 
   // A person custom field's value as a badge (initials), the name on hover.
@@ -953,17 +880,13 @@ export async function renderJobs(main, ui) {
       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 + 1) }, h('span', { class: 'fx-table__group-row' }, toggle, h('span', { class: 'fx-board__sum' }, formatCents(totalOf(jobs))))));
-    };
+    const head = ({ label, jobs, rank, color }) => groupHead(h, {
+      label: `${label}, ${jobs.length} ${jobs.length === 1 ? 'job' : 'jobs'}`,
+      badge: 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),
+      open: !folded.has(label), onFold: () => fold(label),
+      lead: tickCell(setBox(jobs, `Tick every job in ${label}`)), span: columns.length + 1,
+      extra: h('span', { class: 'fx-board__sum' }, formatCents(totalOf(jobs))),
+    });
     return h('div', { class: 'fx-panel' }, heads.table({
       className: 'fx-table--jobs',
       columns,

package/server/ui/kit.js

@@ -1,6 +1,6 @@
 // The shared pieces every Flow page builds with: elements (h), the page
 // header, notes, toasts, dialogs, setting rows, the ⋯ row menu, the button
-// that waits between presses, cards that open a page, and the crumbs trail. app.js hands them to each view module in ui(),
+// that waits between presses, cards that open a page, the icon picker, and the crumbs trail. app.js hands them to each view module in ui(),
 // and the design system's cards (scripts/design-system/) render these same
 // functions, so a card is the real thing. Reuse one or give it an option;
 // never copy it into a page (AGENTS.md, "UI: reuse first").
@@ -499,6 +499,91 @@ export function tileSection(title, cards, { href, more = 'Show all' } = {}) {
     h('div', { class: 'fx-tiles__grid' }, cards)), 'tileSection');
 }
 
+// The icons an icon picker shows before a search. A search finds any Lucide
+// icon by its name or its words (lucide-static's tags.json).
+export const ICON_CHOICES = Object.freeze([
+  'flag', 'clock', 'ban', 'list-checks', 'circle-alert', 'triangle-alert', 'octagon-alert', 'shield-alert', 'bell', 'bell-ring',
+  'info', 'circle-help', 'circle-check', 'circle-x', 'check', 'x', 'eye', 'eye-off', 'lock', 'unlock',
+  'star', 'heart', 'bookmark', 'tag', 'tags', 'hash', 'percent', 'dollar-sign', 'banknote', 'receipt',
+  'receipt-text', 'wallet', 'credit-card', 'coins', 'calculator', 'piggy-bank', 'hand-coins', 'file-text', 'file-check', 'file-x',
+  'file-warning', 'files', 'folder', 'clipboard-list', 'clipboard-check', 'notebook-pen', 'pencil', 'pen-line', 'stamp', 'send',
+  'mail', 'inbox', 'archive', 'calendar', 'calendar-clock', 'calendar-x', 'calendar-check', 'hourglass', 'timer', 'alarm-clock',
+  'history', 'repeat', 'refresh-cw', 'user', 'user-round', 'users', 'user-check', 'user-x', 'contact', 'building',
+  'building-2', 'hospital', 'house', 'map-pin', 'truck', 'package', 'box', 'boxes', 'shopping-cart', 'store',
+  'briefcase', 'wrench', 'hammer', 'cog', 'sliders-horizontal', 'filter', 'search', 'scan-search', 'scale', 'gavel',
+  'shield', 'shield-check', 'badge-check', 'award', 'thumbs-up', 'thumbs-down', 'smile', 'frown', 'zap', 'sparkles',
+  'flame', 'snowflake', 'sun', 'moon', 'droplet', 'leaf', 'stethoscope', 'syringe', 'pill', 'microscope',
+  'test-tube', 'flask-conical', 'activity', 'heart-pulse', 'bone', 'hand', 'camera', 'image', 'printer', 'phone',
+  'message-square', 'link', 'unlink', 'globe', 'pause', 'play', 'circle-stop', 'octagon-x', 'rocket', 'target',
+  'lightbulb', 'puzzle', 'layers', 'list', 'split', 'merge', 'git-branch', 'text-cursor-input', 'type', 'skull',
+]);
+const ICON_FOUND = 96;
+let iconWords = null;
+let pickerNext = 0;
+
+// An icon picker (IconPicker card): a button that shows the icon now chosen,
+// and a panel with a search box and a grid of icons, each named on hover. On
+// a desk the panel opens under the button; on a phone it is a sheet at the
+// foot. `value` null shows `fallback`, and "Default" goes back to it.
+// `onpick(name)` gets each choice (null for Default).
+export function iconPicker({ value = null, fallback = 'circle', label = 'Icon', onpick = () => {} }) {
+  let current = value;
+  let shown = fallback;
+  const id = `fx-icons-${++pickerNext}`;
+  const button = h('button', {
+    class: 'fx-icons__button', type: 'button', 'aria-haspopup': 'dialog', popovertarget: id,
+  });
+  const find = h('input', { class: 'fx-input', type: 'search', placeholder: 'Find', 'aria-label': 'Find an icon' });
+  const grid = h('div', { class: 'fx-icons__grid', role: 'group', 'aria-label': label });
+  const reset = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button' }, 'Default');
+  const panel = applyPhoneRule(h('div', { class: 'fx-pop fx-icons__panel', id, popover: 'auto', role: 'dialog', 'aria-label': label },
+    find, grid, h('div', { class: 'fx-icons__foot' }, reset)), 'iconPicker');
+  const draw = () => {
+    named(button, `${label}: ${current ?? shown}`);
+    button.replaceChildren(lucide(h, current ?? shown), lucide(h, 'chevron-down'));
+  };
+  const choose = (name) => {
+    panel.hidePopover();
+    current = name;
+    draw();
+    onpick(name);
+  };
+  const cell = (name) => named(h('button', {
+    class: 'fx-icons__cell', type: 'button', 'aria-pressed': String(name === (current ?? shown)), onclick: () => choose(name),
+  }, lucide(h, name)), name);
+  const fill = () => {
+    const q = find.value.trim().toLowerCase();
+    const words = iconWords ?? Object.fromEntries(ICON_CHOICES.map((n) => [n, []]));
+    const names = q ? Object.keys(words).filter((n) => n.includes(q) || words[n].some((w) => w.includes(q))).slice(0, ICON_FOUND) : ICON_CHOICES;
+    grid.replaceChildren(...(names.length ? names.map(cell) : [h('p', { class: 'fx-dim' }, 'No icon.')]));
+  };
+  find.addEventListener('input', fill);
+  reset.addEventListener('click', () => choose(null));
+  panel.addEventListener('toggle', async (event) => {
+    button.setAttribute('aria-expanded', String(event.newState === 'open'));
+    if (event.newState !== 'open') return;
+    find.value = '';
+    reset.hidden = current === null;
+    fill();
+    if (panel.dataset.phoneLayout !== 'sheet') {
+      const at = button.getBoundingClientRect();
+      panel.style.top = `${Math.round(Math.max(8, Math.min(at.bottom + 6, innerHeight - panel.offsetHeight - 8)))}px`;
+      panel.style.left = `${Math.round(Math.max(8, Math.min(at.left, innerWidth - panel.offsetWidth - 8)))}px`;
+      find.focus();
+    }
+    // The words of every Lucide icon, once. Without them (the design system's
+    // page), a search reads the names here.
+    iconWords ??= await fetch('/assets/icons/tags.json').then((r) => (r.ok ? r.json() : null)).catch(() => null);
+    if (iconWords && find.value) fill();
+  });
+  draw();
+  return {
+    element: h('span', { class: 'fx-icons' }, button, panel),
+    value: () => current,
+    fallback: (name) => { shown = name; draw(); },
+  };
+}
+
 // A dialog that fills the screen has no pixel outside it, so an accessibility
 // check cannot tell it is modal and reads the page underneath. While one is
 // open, every other top-level node is inert. The attribute is what the check

package/server/ui/list-views.js

@@ -1,10 +1,11 @@
-// A person's saved views of a list page (Jobs, Invoices, Reconcile), as
+// A person's saved views of a list page (Jobs, Invoices, Reconcile, Price
+// list), as
 // ClickUp's view tabs: each has a name and the page's view (Group, Sort,
 // Filter, Columns), and one can be the person's default, which opens when
 // they go to the page. No DOM: the server checks a saved list with the same
 // rules the page uses (server/auth/people.js).
 import { caseNumber } from './job-board.js';
-import { cleanFilterView, fieldIdOf, filterJobs, KIND_OF_TYPE, normaliseJobsView } from './job-view.js';
+import { cleanFilterView, fieldIdOf, filterJobs, KIND_OF_TYPE, normaliseJobsView, normaliseListView, PRICE_COLUMNS } from './job-view.js';
 
 // The Invoices filter's fields (invoicing.js): the list's own columns, then
 // the job columns the Columns menu offers (Case, Practitioner, Shipped).
@@ -111,6 +112,48 @@ export const RECONCILE_FILTER_FIELDS = {
   match: { label: 'Match', kind: 'check', icon: 'link' },
 };
 
+// The Price list's fields (price-list.js): Filter, Group and Sort read
+// them. `group` marks the fields a person can group by.
+export const PRICE_FIELDS = {
+  code: { label: 'Code', kind: 'text', icon: 'hash' },
+  name: { label: 'Name', kind: 'text', icon: 'text' },
+  price: { label: 'Price', kind: 'number', icon: 'dollar-sign' },
+  tax: { label: 'Tax', kind: 'choice', icon: 'percent', group: true },
+  linked: { label: 'Linked', kind: 'choice', icon: 'link', group: true },
+  differs: { label: 'Differs', kind: 'check', icon: 'triangle-alert', group: true },
+};
+
+// A code's value for a Price list field, as Filter, Group and Sort compare
+// it. Linked is the systems the code links to (a list: a code can link to
+// Xero and Seazona both).
+export function priceValue(item, field) {
+  switch (field) {
+    case 'code': return item.code ?? null;
+    case 'name': return item.name ?? null;
+    case 'price': return item.unitAmountCents == null ? null : item.unitAmountCents / 100;
+    case 'tax': return item.taxCode ?? null;
+    case 'linked': return [...new Set((item.links ?? []).map((l) => l.system))];
+    case 'differs': return (item.findings?.length ?? 0) > 0;
+    default: return null;
+  }
+}
+
+// The Price list view: its columns (as before), Group, Sort and Filter.
+const PRICE_DIRS = ['asc', 'desc'];
+export function normalisePriceView(input) {
+  const value = input && typeof input === 'object' && !Array.isArray(input) ? input : {};
+  const seen = new Set();
+  return {
+    ...normaliseListView(value, PRICE_COLUMNS),
+    group: PRICE_FIELDS[value.group]?.group ? value.group : 'none',
+    groupDir: PRICE_DIRS.includes(value.groupDir) ? value.groupDir : 'asc',
+    sorts: (Array.isArray(value.sorts) ? value.sorts : [])
+      .filter((s) => s && Object.hasOwn(PRICE_FIELDS, s.by) && !seen.has(s.by) && seen.add(s.by))
+      .map((s) => ({ by: s.by, dir: PRICE_DIRS.includes(s.dir) ? s.dir : 'asc' })).slice(0, 5),
+    ...cleanFilterView(value, kindIn(PRICE_FIELDS, false)),
+  };
+}
+
 const CUSTOM_FIELD = /^field:[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 const kindIn = (fields, custom) => (field) => (Object.hasOwn(fields, field) ? fields[field].kind : custom && CUSTOM_FIELD.test(field) ? '*' : null);
 
@@ -120,12 +163,13 @@ export const normaliseReconcileView = (value) => cleanFilterView(value, kindIn(R
 
 // The pages with saved views. Each is named in a switch, never looked up
 // by the name a request sends, so a name such as "constructor" is refused.
-export const SAVED_VIEW_PAGES = Object.freeze(['jobs', 'invoices', 'reconcile']);
+export const SAVED_VIEW_PAGES = Object.freeze(['jobs', 'invoices', 'reconcile', 'price-list']);
 export function pageViewCheck(page) {
   switch (page) {
     case 'jobs': return normaliseJobsView;
     case 'invoices': return normaliseInvoicesView;
     case 'reconcile': return normaliseReconcileView;
+    case 'price-list': return normalisePriceView;
     default: return null;
   }
 }

package/server/ui/mobile.js

@@ -68,6 +68,24 @@ export const RULES = {
     "mark": false,
     "card": "Button"
   },
+  "captureButton": {
+    "component": "captureButton",
+    "direction": "button",
+    "phone": {
+      "layout": "camera"
+    },
+    "tablet": {
+      "layout": "camera"
+    },
+    "desk": {
+      "layout": "files"
+    },
+    "touch": 44,
+    "pageOverflow": "none",
+    "screens": [],
+    "mark": false,
+    "card": "CaptureButton"
+  },
   "cardRows": {
     "component": "cardRows",
     "direction": "card per row",
@@ -203,7 +221,8 @@ export const RULES = {
       "invoices-approved",
       "invoices-ticked",
       "invoices-filter",
-      "reconcile"
+      "reconcile",
+      "price-list"
     ],
     "card": "Filter"
   },
@@ -230,7 +249,8 @@ export const RULES = {
       "invoices-approved",
       "invoices-ticked",
       "invoices-filter",
-      "reconcile"
+      "reconcile",
+      "price-list"
     ],
     "card": "FindBox"
   },
@@ -270,6 +290,23 @@ export const RULES = {
     "mark": false,
     "card": "Icon"
   },
+  "iconPicker": {
+    "component": "iconPicker",
+    "direction": "sheet",
+    "phone": {
+      "layout": "sheet"
+    },
+    "tablet": {
+      "layout": "popover"
+    },
+    "desk": {
+      "layout": "popover"
+    },
+    "touch": 44,
+    "pageOverflow": "none",
+    "screens": [],
+    "card": "IconPicker"
+  },
   "jobChangeBanner": {
     "component": "jobChangeBanner",
     "direction": "banner",
@@ -311,7 +348,8 @@ export const RULES = {
       "invoices-approved",
       "invoices-ticked",
       "invoices-filter",
-      "reconcile"
+      "reconcile",
+      "price-list"
     ],
     "card": "ListFrame"
   },
@@ -339,7 +377,8 @@ export const RULES = {
       "invoices-approved",
       "invoices-ticked",
       "invoices-filter",
-      "reconcile"
+      "reconcile",
+      "price-list"
     ],
     "card": "ListHead"
   },
@@ -534,7 +573,8 @@ export const RULES = {
       "invoices-approved",
       "invoices-ticked",
       "invoices-filter",
-      "reconcile"
+      "reconcile",
+      "price-list"
     ],
     "card": "SavedViews"
   },