@arcforgelabs/flow 2026.10.45 → 2026.10.46

package/server/ui/flow.css

@@ -11,6 +11,9 @@
      edge, as ClickUp and HubSpot do; the title, toolbar and content start at
      one place on every page. */
   --fx-gutter: clamp(16px, 2vw, 24px);
+  /* The height of every control in a list's toolbar: chips, view tabs,
+     search, Board/List and the page's button. */
+  --fx-control-h: 32px;
   --fx-line-soft: color-mix(in srgb, var(--t-text) 7%, transparent);
   --fx-hover: color-mix(in srgb, var(--t-text) 5%, transparent);
   --fx-focus: 0 0 0 3px color-mix(in srgb, var(--t-ring) 40%, transparent);
@@ -420,7 +423,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fx-line); }
 .fx-tabs { display: flex; gap: 2px; }
 .fx-tabs button { flex: none; }
-@media (max-width: 640px) { .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } }
+@media (max-width: 639px) { .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } }
 .fx-tabs button {
   display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px;
   border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
@@ -431,14 +434,17 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-tabs__count { padding: 0 7px; border-radius: 999px; background: var(--fx-hover); color: var(--t-dim); font-size: 12px; line-height: 20px; }
 .fx-tabs button[data-tone="danger"] .fx-tabs__count { background: var(--t-danger-bg); color: var(--t-danger); }
 
-/* Saved views (saved-views.js): the row of named view tabs over a list, as
-   ClickUp's. The chosen tab is underlined; its ⋯ shows on hover and when
-   chosen. Save and Revert sit at the right while the list differs. */
-.fx-views { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 32px; margin-bottom: -8px; }
+/* Saved views (saved-views.js): named view tabs in the toolbar, at the
+   right of Group, Sort and Filter (listHead's tools). The chosen tab is a
+   filled pill; its ⋯ shows on hover and when chosen. Save and Revert follow
+   while the list differs. */
+.fx-toolbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+.fx-views { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
 .fx-views:empty { display: none; }
-.fx-views__item { display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
-.fx-views__item[data-on="true"] { border-bottom-color: var(--t-brand); }
-.fx-views__tab { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 4px 6px 8px; border: 0; background: none; color: var(--t-dim); font: 600 13px var(--t-body); cursor: pointer; }
+.fx-views__item { display: inline-flex; align-items: center; border-radius: 999px; }
+.fx-views__item:hover { background: var(--fx-hover); }
+.fx-views__item[data-on="true"] { background: var(--t-accent-bg); }
+.fx-views__tab { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; padding: 6px 4px 6px 10px; border-radius: 999px; border: 0; background: none; color: var(--t-dim); font: 600 13px var(--t-body); cursor: pointer; }
 .fx-views__tab:hover, .fx-views__item[data-on="true"] .fx-views__tab { color: var(--t-strong); }
 .fx-views__tab:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 1px; }
 .fx-views__tab .fx-lucide { width: 14px; height: 14px; flex: none; }
@@ -447,11 +453,18 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-views__item .fx-cfm__more { width: 22px; height: 22px; opacity: 0; }
 .fx-views__item:hover .fx-cfm__more, .fx-views__item[data-on="true"] .fx-cfm__more, .fx-views__item .fx-cfm__more[aria-expanded="true"], .fx-views__item .fx-cfm__more:focus-visible { opacity: 1; }
 .fx-views__item .fx-cfm__more .fx-lucide { width: 14px; height: 14px; }
-.fx-views__add { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border: 0; background: none; color: var(--t-dim); font: 500 13px var(--t-body); cursor: pointer; }
-.fx-views__add:hover { color: var(--t-strong); }
+.fx-views__add { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 9px; border: 0; border-radius: 999px; background: none; color: var(--t-dim); font: 600 13px/1.2 var(--t-body); cursor: pointer; }
+.fx-views__add:hover { background: var(--fx-hover); color: var(--t-strong); }
+.fx-views__add:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 2px; }
 .fx-views__add .fx-lucide { width: 14px; height: 14px; }
-.fx-views__end { display: inline-flex; gap: 6px; margin-left: auto; }
+.fx-views__end { display: inline-flex; gap: 6px; margin-left: 4px; }
 @media (hover: none) { .fx-views__item .fx-cfm__more { opacity: 1; } }
+/* A phone keeps the tools on one row of their own that scrolls sideways. */
+@media (max-width: 639px) {
+  .fx-toolbar__tools { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
+  .fx-toolbar__tools > *, .fx-views { flex: none; flex-wrap: nowrap; }
+  .fx-toolbar__end:has(> .fx-toolbar__tools) { flex-wrap: wrap; row-gap: 8px; }
+}
 
 /* Quiet alerts (server/ui/alerts.js): one slim line under the page header,
    only while something on the page needs this person. */
@@ -466,7 +479,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-alerts__close:hover { background: var(--fx-hover); color: var(--t-strong); }
 .fx-alerts__close svg { width: 14px; height: 14px; }
 .fx-alerts__action:focus-visible, .fx-alerts__close:focus-visible { outline: 2px solid var(--t-ring); outline-offset: 2px; }
-@media (max-width: 560px) {
+@media (max-width: 639px) {
   .fx-alerts { flex-wrap: wrap; }
   .fx-alerts__text { flex-basis: calc(100% - 52px); }
   .fx-alerts__action, .fx-alerts__more { order: 2; }
@@ -649,7 +662,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-dot--stage[data-rank="7"] { --stage: var(--t-dim); }
 .fx-pop--choices .fx-input { min-height: 32px; margin-bottom: 4px; font-size: 13px; }
 .fx-pop__end { display: inline-grid; margin-left: auto; color: var(--t-accent); }
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-pop.fx-pop--rows { min-width: 0; width: calc(100vw - 16px); }
   .fx-rows__row, .fx-rows__row--sort { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
   .fx-rows__row > .fx-rows__lead, .fx-rows__row > .fx-select:first-child, .fx-rows__row > .fx-rows__join { grid-column: 1 / -1; }
@@ -1023,13 +1036,27 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
   .fx-auth__title { font-size: 26px; max-width: none; }
 }
 
-/* A one-message page (sign-in off, an error, no access, Xero's return). */
+/* A one-message page (sign-in off, an error, no access, an OAuth return). */
 .fx-message, .fx-centre .fx-message { min-height: 100vh; place-content: center; justify-items: center; gap: 20px; padding: 32px 16px; }
 .fx-centre .fx-message { display: grid; }
 .fx-message__card { display: grid; gap: 12px; width: min(460px, 100%); padding: 28px; }
 .fx-message__card[data-tone="success"] { border-top: 3px solid var(--t-success); }
 .fx-message__card[data-tone="danger"] { border-top: 3px solid var(--t-danger); }
 .fx-message__card .fx-btn { justify-self: start; }
+.fx-message__marks {
+  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
+}
+.fx-message__marks--solo { justify-content: flex-start; }
+.fx-message__flow .fx-mark { width: 34px; height: 34px; display: block; }
+.fx-message__plus { color: var(--t-dim); font: 600 18px/1 var(--t-body); }
+.fx-message__result {
+  display: grid; place-items: center; width: 28px; height: 28px; margin-left: 4px;
+  border-radius: 50%; color: var(--t-success); background: var(--t-success-bg);
+}
+.fx-message__result[data-tone="danger"] { color: var(--t-danger); background: var(--t-danger-bg); }
+.fx-message__result .fx-lucide { width: 16px; height: 16px; }
+.fx-message__status { margin: 0; }
+.fx-message__return { margin: 0; color: var(--t-dim); font-size: 13.5px; }
 
 .fx-loading { display: none; min-height: 100vh; place-content: center; gap: 12px; color: var(--t-dim); }
 body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
@@ -1058,7 +1085,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-setting__value { font-size: 12.5px; color: var(--t-strong); overflow-wrap: anywhere; text-align: right; }
 .fx-setting--wide { grid-template-columns: minmax(0, 1fr); }
 .fx-setting--wide .fx-setting__control { display: block; }
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-setting { grid-template-columns: minmax(0, 1fr); }
   .fx-setting__control { justify-content: flex-start; }
   .fx-setting__stack { justify-items: start; }
@@ -1145,7 +1172,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 }
 
 /* ── Phones ─────────────────────────────────────────────────────────────── */
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-main { padding-top: 20px; }
   .fx-title { font-size: 22px; }
   .fx-table thead { display: none; }
@@ -1212,7 +1239,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-price { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
 .fx-price__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
 .fx-price__head .fx-search { margin: 0 0 6px; width: 260px; }
-@media (max-width: 560px) { .fx-price__head .fx-search { width: 100%; } }
+@media (max-width: 639px) { .fx-price__head .fx-search { width: 100%; } }
 .fx-price__table th { position: sticky; top: 0; z-index: 1; }
 .fx-price__table td { padding-top: 9px; padding-bottom: 9px; }
 .fx-price__table td.fx-num, .fx-price__table th.fx-num { text-align: right; white-space: nowrap; }
@@ -1405,10 +1432,10 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-rule__value { display: flex; gap: 6px; align-items: center; min-width: 0; }
 .fx-rule__many { display: grid; gap: 2px; max-height: 160px; overflow: auto; padding: 4px 8px; border: 1px solid var(--fx-line); border-radius: 8px; width: 100%; }
 .fx-rule__delete { justify-self: start; color: var(--t-danger); }
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-rule__condition { grid-template-columns: minmax(0, 1fr); }
 }
-@media (max-width: 560px) {
+@media (max-width: 639px) {
   .fx-set__row { gap: 12px; }
   .fx-set__control .fx-input { width: 140px; }
   .fx-set__control .fx-input[type="number"] { width: 72px; }
@@ -1416,7 +1443,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 }
 .fx-multi { position: relative; width: 220px; max-width: 100%; }
 .fx-multi__summary { display: flex; align-items: center; list-style: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-@media (max-width: 600px) { .fx-multi { width: 150px; } }
+@media (max-width: 639px) { .fx-multi { width: 150px; } }
 .fx-multi__summary::-webkit-details-marker { display: none; }
 .fx-multi__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; gap: 2px; min-width: 100%; max-height: 280px; overflow-y: auto; padding: 6px; background: var(--t-paper); border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow); }
 .fx-multi__option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; cursor: pointer; white-space: nowrap; }
@@ -1504,9 +1531,19 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-listhead__edge { height: 0; }
 .fx-listhead__edge + .fx-listhead[data-sticky] { margin-top: -32px; }
 .fx-listhead > .fx-toolbar > .fx-tabs button { padding-block: 9px; }
+/* Every control in the toolbar is one height (--fx-control-h). Under a
+   tab line, the controls keep 8px clear of the line; only the tabs sit on it. */
+.fx-listhead .fx-toolbar :is(.fx-btn, .fx-chip, .fx-views__add, .fx-views__tab) { min-height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-btn:not(.fx-btn--sm) { padding-block: 0; font-size: 14px; }
+.fx-listhead .fx-toolbar :is(.fx-btn, .fx-chip) { height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-find__button { width: var(--fx-control-h); height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-find__input { height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-seg { padding: 2px; }
+.fx-listhead .fx-toolbar .fx-seg__item { min-height: calc(var(--fx-control-h) - 4px); }
+.fx-listhead > .fx-toolbar:not(.fx-toolbar--plain) > :not(.fx-tabs) { margin-bottom: 8px; }
 @media (max-width: 820px) { .fx-listhead[data-sticky] { top: 60px; } }
 /* On a phone the head would hide too many rows: it scrolls away. */
-@media (max-width: 560px) { .fx-listhead[data-sticky] { position: static; } }
+@media (max-width: 639px) { .fx-listhead[data-sticky] { position: static; } }
 
 /* The bulk action bar (bulk-bar.js): floats at the foot while rows are
    ticked. "N selected ×", then icon actions in groups, then More. It takes
@@ -1540,7 +1577,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-bulk__grid { display: grid; }
 .fx-bulk__grid .fx-pop__item[data-tone="danger"] { color: var(--t-danger); }
 .fx-bulk__none { margin: 8px 10px; color: var(--t-dim); font-size: 13.5px; }
-@media (max-width: 560px) {
+@media (max-width: 639px) {
   .fx-bulk { bottom: 10px; padding: 4px; }
   .fx-bulk__count { margin-right: 2px; padding-left: 8px; }
   .fx-bulk__act { padding: 7px 6px; }
@@ -1602,3 +1639,63 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-find__input { display: none; width: min(240px, 60vw); height: 32px; padding: 0 10px; }
 .fx-find--open .fx-find__input { display: block; }
 .fx-find--open .fx-find__button { display: none; }
+
+/* Xero usage on the Xero card (server/ui/xero-usage.js). Colours are tokens. */
+.fx-xero-orgs { display: grid; gap: 18px; }
+.fx-xero-org { display: grid; gap: 12px; }
+.fx-xu { display: grid; gap: 14px; }
+.fx-xu__top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
+.fx-xu__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.fx-xu-ring { position: relative; width: 112px; height: 112px; flex: none; }
+.fx-xu-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
+.fx-xu-ring__track { fill: none; stroke: var(--fx-line); stroke-width: 3; }
+.fx-xu-ring__used { fill: none; stroke: var(--t-accent); stroke-width: 3; stroke-linecap: round; }
+.fx-xu[data-tone="warn"] .fx-xu-ring__used { stroke: var(--t-warn); }
+.fx-xu[data-tone="danger"] .fx-xu-ring__used { stroke: var(--t-danger); }
+.fx-xu-ring__label { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; }
+.fx-xu-ring__num { color: var(--t-strong); font: 650 22px/1 var(--t-body); font-variant-numeric: tabular-nums; }
+.fx-xu-ring__of { color: var(--t-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
+.fx-xu__fold { display: grid; gap: 12px; padding: 12px 14px; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); }
+.fx-xu__fold summary { cursor: pointer; color: var(--t-strong); font-weight: 650; }
+.fx-xu__fold summary:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 2px; }
+.fx-xu-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
+.fx-xu-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--t-dim); font-size: 12.5px; }
+.fx-xu-legend i, .fx-xu-lane { display: inline-block; }
+.fx-xu-legend i { width: 8px; height: 8px; border-radius: 2px; }
+.fx-xu-hours { display: flex; align-items: flex-end; gap: 3px; height: 88px; }
+.fx-xu-hour { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
+.fx-xu-hour__stack { display: flex; flex-direction: column-reverse; width: 100%; height: var(--h, 0%); border-radius: 2px 2px 0 0; overflow: hidden; }
+.fx-xu-hour__stack i { display: block; width: 100%; height: var(--part, 0%); }
+.fx-xu-lane[data-lane="writes"] { background: var(--t-accent); }
+.fx-xu-lane[data-lane="sync"] { background: var(--t-success); }
+.fx-xu-lane[data-lane="reads"] { background: var(--t-warn); }
+.fx-xu-lane[data-lane="other"] { background: color-mix(in srgb, var(--t-text) 35%, var(--t-bg)); }
+.fx-xu-budget { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--fx-hover); }
+.fx-xu-budget i { flex: none; width: var(--part, 0%); height: 100%; }
+.fx-xu-dots { display: flex; flex-wrap: wrap; gap: 12px 16px; }
+.fx-xu-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--t-dim); font-size: 12.5px; }
+.fx-xu-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t-dim); }
+.fx-xu-dot[data-tone="success"]::before { background: var(--t-success); }
+.fx-xu-dot[data-tone="warn"]::before { background: var(--t-warn); }
+.fx-xu-dot[data-tone="danger"]::before { background: var(--t-danger); }
+.fx-xu-days { position: relative; display: flex; align-items: stretch; gap: 8px; height: 108px; }
+.fx-xu-days__line { position: absolute; left: 0; right: 0; bottom: calc(16px + (100% - 20px) * var(--warn, 0.7)); height: 0; border-top: 1px dashed var(--t-warn); pointer-events: none; }
+.fx-xu-day { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.fx-xu-day__bar { flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
+.fx-xu-day b { display: block; width: 70%; max-width: 28px; height: var(--h, 0%); border-radius: 3px 3px 0 0; background: var(--t-accent); }
+.fx-xu-day[data-warning="true"] b { background: var(--t-warn); }
+.fx-xu-day[data-over="true"] b { background: var(--t-danger); }
+.fx-xu-day > span:last-child { color: var(--t-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
+.fx-xu-rows { display: grid; gap: 6px; }
+.fx-xu-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
+.fx-xu-row span { color: var(--t-text); }
+.fx-xu-row b { color: var(--t-strong); font-weight: 650; font-variant-numeric: tabular-nums; }
+.fx-xu .fx-notice { margin-top: 4px; }
+@media (max-width: 639px) {
+  .fx-xu__top { gap: 14px; }
+  .fx-xu-ring { width: 96px; height: 96px; }
+  .fx-xu-ring__num { font-size: 20px; }
+  .fx-xu-hours { overflow-x: auto; }
+  .fx-xu-hour { flex: none; width: 10px; }
+  .fx-xu__fold { padding: 12px; }
+}

package/server/ui/invoicing.js

@@ -10,8 +10,8 @@ import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
 import { caseNumber } from '/assets/ui/job-board.js';
 import { jobChangeReview } from '/assets/ui/job-change.js';
-import { columnTable, rowCells, viewSaver } from '/assets/ui/columns.js';
-import { filterCount, filterJobs, INVOICE_COLUMNS, normaliseListView } from '/assets/ui/job-view.js';
+import { columnTable, dateCell, fieldColumn, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { fieldGroup, filterCount, filterJobs, INVOICE_COLUMNS, invoiceColumnsView } from '/assets/ui/job-view.js';
 import { INVOICE_FILTER_FIELDS, invoiceFilterKind, invoiceValue, normaliseInvoicesView } from '/assets/ui/list-views.js';
 import { listPager, PAGE_SIZES } from '/assets/ui/pager.js';
 import { savedViews } from '/assets/ui/saved-views.js';
@@ -149,21 +149,25 @@ export async function renderInvoiceList(main, ui) {
     status: TABS.some(([id]) => id === saved) ? saved : 'ready', q: returning ? back?.q ?? '' : '', ticked: new Set(), view: readFilters(),
     // The page of rows shown: the server filters and cuts it (GET /invoices).
     offset: returning ? back?.offset ?? 0 : 0, limit: readSize(),
-    columns: normaliseListView(ui.me?.views?.invoices, INVOICE_COLUMNS),
+    columns: invoiceColumnsView(ui.me?.views?.invoices),
+    // The lab's custom fields, their job values and the people a person
+    // field names (GET /api/custom-fields): columns a person can add.
+    fields: [], values: new Map(), people: [],
   };
   // The list's columns: resize, move, hide, kept with the account. A tab
-  // has some of them (`available`, set as it draws).
+  // has some of them (`available`, set as it draws), each with its label.
   let available = Object.keys(INVOICE_COLUMNS);
+  const labelOf = (id) => INVOICE_COLUMNS[id] ?? state.fields.find((f) => fieldGroup(f.id) === id)?.name ?? id;
   const saveColumns = viewSaver(ui, 'invoices');
   const heads = columnTable(h, {
     order: () => state.columns.columns,
     widths: () => state.columns.widths,
     change: (patch) => {
-      state.columns = normaliseListView({ ...state.columns, ...patch }, INVOICE_COLUMNS);
+      state.columns = invoiceColumnsView({ ...state.columns, ...patch });
       saveColumns(state.columns);
       if (raw) draw(raw);
     },
-    hidden: () => available.filter((id) => !state.columns.columns.includes(id)).map((id) => ({ id, label: INVOICE_COLUMNS[id] })),
+    hidden: () => available.filter((id) => !state.columns.columns.includes(id)).map((id) => ({ id, label: labelOf(id) })),
   });
   const tabs = h('div', { class: 'fx-tabs', role: 'tablist' });
   let timer;
@@ -215,7 +219,15 @@ export async function renderInvoiceList(main, ui) {
       load();
     },
   });
-  const context = await flow('/api/invoicing/context').catch(() => ({ canIssue: false }));
+  // Custom fields are extra: the list still shows without them.
+  const [context, fields, values] = await Promise.all([
+    flow('/api/invoicing/context').catch(() => ({ canIssue: false })),
+    flow('/api/custom-fields').catch(() => null), flow('/api/custom-fields/values').catch(() => null),
+  ]);
+  state.fields = fields?.fields ?? [];
+  state.people = fields?.people ?? [];
+  const valueKey = (job, fieldId) => `${job.sourceSystem}\u0000${job.sourceJobRef}\u0000${fieldId}`;
+  state.values = new Map((values?.values ?? []).map((v) => [valueKey(v, v.fieldId), v.value]));
   let body = null;
   let raw = null;
   const openTab = (id) => { state.status = id; state.offset = 0; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
@@ -225,7 +237,7 @@ export async function renderInvoiceList(main, ui) {
   // action: tick rows (the head tick takes every row shown), then Send.
   const head = listHead('Invoices', {
     actions: [h('a', { class: 'fx-btn fx-btn--primary', href: '/invoices/new', onclick: go }, 'New invoice')],
-    views: views.element, start: tabs, end: [controls, find.element], line: true, sticky: true,
+    views: views.element, start: tabs, controls, controlsAt: 'end', end: find.element, line: true, sticky: true,
   });
   const [title, ...top] = head.nodes;
   const frame = listFrame(main, host);
@@ -513,13 +525,24 @@ export async function renderInvoiceList(main, ui) {
       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) => showDate(i.issueDate ?? i.createdAt?.slice(0, 10)) },
+      date: { label: created ? 'Created' : 'Date', kind: 'date', className: 'fx-dim', 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,
+      // 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) ?? '—' : '—') },
+      practitioner: { kind: 'text', className: 'fx-dim', cell: (i) => i.job?.practitioner ?? '—' },
+      shipped: { kind: 'date', className: 'fx-dim', cell: (i) => dateCell(h, i.job?.shippedOn ?? null) },
     };
+    // Each custom field is a column too: the value of the invoice's job.
+    for (const field of state.fields) {
+      const id = fieldGroup(field.id);
+      ALL[id] = fieldColumn(h, field, { id, valueOf: (i) => (i.job ? state.values.get(valueKey(i.job, field.id)) ?? null : null), people: state.people });
+    }
     available = Object.keys(ALL).filter((id) => ALL[id]);
-    const columns = state.columns.columns.filter((id) => ALL[id]).map((id) => ({ id, label: INVOICE_COLUMNS[id], ...ALL[id] }));
+    const columns = state.columns.columns.filter((id) => ALL[id]).map((id) => ({ id, label: labelOf(id), ...ALL[id] }));
     host.replaceChildren(heads.table({
       className: 'fx-table--rows',
       columns,

package/server/ui/job-view.js

@@ -473,7 +473,14 @@ export function inOrder(columns, ids) {
 // shows the invoice's problem; Number shows on the tabs with numbers only.
 export const INVOICE_COLUMNS = Object.freeze({
   number: 'Number', client: 'Client', reference: 'Reference', date: 'Date', total: 'Total', status: 'Status', linked: 'Linked',
+  due: 'Due', case: 'Case', practitioner: 'Practitioner', shipped: 'Shipped',
 });
+// The Invoices columns a person sees before they choose: the others (the
+// invoice's due date, its job's case, practitioner and shipped date, and
+// the lab's custom fields) wait in the + menu.
+export const INVOICE_SHOWN = Object.freeze(['number', 'client', 'reference', 'date', 'total', 'status', 'linked']);
+// A person's Invoices columns: custom fields ('field:<id>') are columns too.
+export const invoiceColumnsView = (input) => normaliseListView(input, INVOICE_COLUMNS, { shown: INVOICE_SHOWN, fields: true });
 export const PRICE_COLUMNS = Object.freeze({
   code: 'Code', name: 'Name', price: 'Price', tax: 'Tax',
 });
@@ -482,12 +489,13 @@ export const RECONCILE_COLUMNS = Object.freeze({
 });
 
 // A person's view of a list with set columns (Invoices, Reconcile, Price list): the
-// shown columns in order (every one when none is saved) and their widths.
-export function normaliseListView(input, columns) {
+// shown columns in order (`shown`, else every one, when none is saved) and
+// their widths. With `fields`, a custom field ('field:<id>') is a column too.
+export function normaliseListView(input, columns, { shown = null, fields = false } = {}) {
   const value = input && typeof input === 'object' && !Array.isArray(input) ? input : {};
   const ids = Object.keys(columns);
   return {
-    columns: cleanColumnIds(value.columns, (id) => ids.includes(id)) ?? ids,
+    columns: cleanColumnIds(value.columns, (id) => ids.includes(id) || (fields && FIELD_GROUP.test(id))) ?? [...(shown ?? ids)],
     widths: cleanWidths(value.widths),
   };
 }

package/server/ui/jobs.js

@@ -13,7 +13,7 @@
 // or with a keyboard, the job's panel has the same moves.
 
 import { bulkBar } from '/assets/ui/bulk-bar.js';
-import { columnTable, onRightButton, rowCells, viewSaver } from '/assets/ui/columns.js';
+import { columnTable, dateCell, fieldColumn, onRightButton, 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';
@@ -24,7 +24,7 @@ import {
   COLUMNS, DEFAULT_VIEW, fieldGroup, fieldIdOf, fieldLanes, FILTER_FIELDS, filterJobs, groupJobs, GROUPS, KIND_OF_TYPE, keptStatuses, laneOf,
   normaliseJobsView, NOT_SET, OPERATORS, sortJobs, SORTS,
 } from '/assets/ui/job-view.js';
-import { clipLabel, initialsOf } from '/assets/ui/person.js';
+import { clipLabel } from '/assets/ui/person.js';
 import { savedViews } from '/assets/ui/saved-views.js';
 import { sidecar } from '/assets/ui/sidecar.js';
 import { findBox, ICONS, svg, today, viewBar } from '/assets/ui/view-bar.js';
@@ -52,18 +52,6 @@ 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' });
-};
 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);
@@ -136,7 +124,7 @@ 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, start: controls, end: [find.element, toggle] }).nodes, frame.element, bulk.element);
+  main.append(...listHead('Jobs', { views: views.element, controls, end: [find.element, toggle] }).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),
@@ -799,7 +787,7 @@ export async function renderJobs(main, ui) {
   // 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 day = (iso) => dateCell(h, 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', className: 'fx-dim', cell: (job) => caseNumber(job) ?? '—' },
@@ -821,31 +809,12 @@ export async function renderJobs(main, ui) {
     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);
-      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', className: 'fx-dim', cell };
+      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) }))];
   }
 
   // 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);
-  }
+  const personBadge = (job, field) => personCell(h, field ? valueOf(job, field.id)?.value ?? null : null, state.people);
 
   // 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

package/server/ui/kit.js

@@ -63,22 +63,28 @@ export function pageHeader(title, { count = null, help = null, actions = [] } =
 
 // The top of a list page (Jobs, Invoices, Reconcile), laid out the same on
 // every list and in Board and List alike, so nothing moves when a person
-// switches: the title row, a row for saved view tabs (`views`: the page's
-// savedViews element, else an empty slot that stays hidden), then one toolbar with `start` at the left (tabs, Group,
-// Sort, Filter) and `end` at the right (search, Board/List), then the page's
-// `actions` (New invoice) last, as Claude's own lists do. `line` draws the
-// rule that tabs sit on; `sticky` keeps the toolbar at the top while the rows
-// scroll up under it, with a shadow once they do. Append `nodes` to the page.
-export function listHead(title, { count = null, help = null, actions = [], start = [], end = [], line = false, sticky = false, views: tabs = null } = {}) {
+// switches: the title row, then one toolbar with `start` at the left (tabs,
+// Group, Sort, Filter) and `end` at the right (search, Board/List), then the
+// page's `actions` (New invoice) last, as Claude's own lists do. `controls`
+// (the page's Group, Sort and Filter) sit with the saved view tabs at their
+// right (`views`: the page's savedViews element, else an empty slot that
+// stays hidden), at the end of `start`, or of `end` when `controlsAt` is
+// 'end'. `line` draws the rule that tabs sit on; `sticky` keeps the toolbar
+// at the top while the rows scroll up under it, with a shadow once they do.
+// Append `nodes` to the page.
+export function listHead(title, { count = null, help = null, actions = [], start = [], end = [], controls = null, controlsAt = 'start', line = false, sticky = false, views: tabs = null } = {}) {
   const views = tabs ?? h('div', { class: 'fx-views', role: 'group', 'aria-label': 'Views', hidden: true });
+  const tools = h('div', { class: 'fx-toolbar__tools' }, controls, views);
+  const left = controlsAt === 'end' ? [start].flat() : [start, tools].flat();
+  const right = controlsAt === 'end' ? [tools, end].flat() : [end].flat();
   const bar = h('div', { class: 'fx-listhead', 'data-sticky': sticky },
-    h('div', { class: `fx-toolbar${line ? '' : ' fx-toolbar--plain'}` }, start, h('div', { class: 'fx-toolbar__end' }, end, actions)));
+    h('div', { class: `fx-toolbar${line ? '' : ' fx-toolbar--plain'}` }, left, h('div', { class: 'fx-toolbar__end' }, right, actions)));
   const edge = sticky ? h('div', { class: 'fx-listhead__edge', 'aria-hidden': 'true' }) : null;
   if (edge && typeof IntersectionObserver === 'function') {
     const top = window.matchMedia?.('(max-width: 820px)').matches ? 61 : 1;
     new IntersectionObserver(([entry]) => bar.toggleAttribute('data-stuck', !entry.isIntersecting), { rootMargin: `-${top}px 0px 0px 0px` }).observe(edge);
   }
-  return { nodes: [pageHeader(title, { count, help }), views, edge, bar].filter(Boolean), views, bar };
+  return { nodes: [pageHeader(title, { count, help }), edge, bar].filter(Boolean), views, bar };
 }
 
 // The window a list or board sits in under listHead, as HubSpot's: on a