@arcforgelabs/flow 2026.10.37 → 2026.10.38

package/server/ui/bulk-bar.js

@@ -5,7 +5,8 @@
 // its name on hover and to a screen reader. More opens every action, with a
 // search box, grouped under small heads.
 //
-// bulkBar(ui) answers { element, draw(state) }. state = { count, onClear,
+// bulkBar(ui, { label }) answers { element, draw(state) }. label names the
+// bar for a screen reader ("Ticked invoices", "Ticked jobs"). state = { count, onClear,
 // groups: [[action]], more: [{ head, actions: [action] }] }; an action is
 // { icon, label, title?, run, primary?, iconOnly?, tone? }. title is the
 // long name, for the hover tip and the More menu. A count of 0 hides the
@@ -14,10 +15,10 @@ import { lucide } from '/assets/ui/custom-fields.js';
 
 let barCount = 0;
 
-export function bulkBar(ui) {
+export function bulkBar(ui, { label = 'Ticked invoices' } = {}) {
   const { h } = ui;
   const id = `fx-bulk-more-${++barCount}`;
-  const element = h('div', { class: 'fx-bulk', role: 'toolbar', 'aria-label': 'Ticked invoices', hidden: true });
+  const element = h('div', { class: 'fx-bulk', role: 'toolbar', 'aria-label': label, hidden: true });
   const panel = h('div', { class: 'fx-pop fx-bulk__more', id, popover: 'auto', role: 'menu' });
   let current = null;
   let busy = false;

package/server/ui/flow.css

@@ -512,6 +512,24 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-table tbody tr.fx-table__group:hover td { background: var(--t-s1); }
 .fx-table__group-row { display: flex; align-items: center; gap: 12px; }
 .fx-table__group-row .fx-board__sum { margin-left: 0; }
+/* The Jobs list's group head folds its rows (jobs.js, list): a click on the
+   head or its chevron. */
+.fx-table--jobs .fx-table__group { cursor: pointer; }
+.fx-table--jobs .fx-table__group td.fx-tick-cell { padding-right: 0; }
+.fx-table__fold { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 2px 0; border: 0; background: none; color: var(--t-dim); font: inherit; cursor: pointer; }
+.fx-table__fold > svg { flex: none; transition: transform .15s; }
+.fx-table__fold[aria-expanded="true"] > svg { transform: rotate(90deg); }
+.fx-table__fold:hover, .fx-table__fold:focus-visible { color: var(--t-strong); outline: none; }
+.fx-table__fold:focus-visible .fx-stage, .fx-table__fold:focus-visible .fx-cf__opt { box-shadow: 0 0 0 2px var(--t-accent); }
+.fx-table__group--folded td { padding-bottom: 14px; }
+/* A Jobs list column head opens the column's menu (a click or a
+   right-click); + at the end shows a hidden column. */
+.fx-th { margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: var(--t-radius); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
+.fx-th:hover, .fx-th:focus-visible { background: var(--fx-hover); color: var(--t-strong); outline: none; }
+.fx-th-add { width: 36px; text-align: right; }
+.fx-th--add { font-size: 16px; line-height: 1; }
+.fx-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
+.fx-c-date time { font-variant-numeric: tabular-nums; }
 .fx-stage[data-rank="plain"] { --stage: var(--t-dim); }
 /* The board is one row of lanes (one per group), each about a phone wide.
    Lanes share the width when they fit; more lanes scroll sideways inside
@@ -613,6 +631,70 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-task__fix h3 { padding: 12px 14px 4px; color: var(--t-warn); }
 .fx-task__fixrow { padding: 9px 14px; border-top: 1px solid var(--fx-line-soft); color: var(--t-strong); font-size: 13.5px; }
 .fx-task__fixrow:first-of-type { border-top: 0; }
+.fx-task__choose { scroll-margin-top: 16px; margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--t-warn-brd, var(--t-warn)); border-radius: var(--t-radius); background: var(--t-warn-bg); color: var(--t-strong); font-size: 13.5px; }
+.fx-task__choose > svg { flex: none; width: 20px; height: 20px; color: var(--t-warn); }
+.fx-task__choose > span { flex: 1 1 200px; }
+.fx-task__choices { display: flex; flex-wrap: wrap; gap: 10px; }
+.fx-task__none { display: inline-flex; align-items: center; gap: 6px; color: var(--t-warn); }
+.fx-task__none svg { width: 16px; height: 16px; }
+
+/* Reconcile: the queue left, one job and its possible invoices right. */
+.fx-rec { display: grid; grid-template-columns: 280px minmax(0, 1fr); border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); min-height: 420px; }
+.fx-rec > .fx-empty, .fx-rec > .fx-dim { grid-column: 1 / -1; }
+.fx-rec__queue { display: flex; flex-direction: column; border-right: 1px solid var(--fx-line); max-height: 75vh; overflow-y: auto; }
+.fx-rec__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--fx-line); }
+.fx-rec__tab { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--fx-line); border-radius: 999px; color: var(--t-text); font-size: 12.5px; font-weight: 600; text-decoration: none; }
+.fx-rec__tab[aria-selected="true"] { border-color: var(--t-primary); background: var(--t-primary); color: var(--t-on-primary); }
+.fx-rec__search { width: 100%; min-width: 0; }
+.fx-rec__results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+.fx-rec__item { display: grid; gap: 3px; min-height: 44px; padding: 12px 16px; border-bottom: 1px solid var(--fx-line-soft); border-left: 3px solid transparent; color: var(--t-text); text-decoration: none; }
+.fx-rec__item:hover { background: var(--fx-hover); }
+.fx-rec__item[aria-current="true"] { border-left-color: var(--t-accent); background: var(--t-s1); }
+.fx-rec__item-top { display: flex; justify-content: space-between; gap: 8px; }
+.fx-rec__item .fx-num { font-family: var(--t-data); font-variant-numeric: tabular-nums; }
+.fx-rec__detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px 24px; }
+.fx-rec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
+.fx-rec__head > div { display: grid; gap: 2px; }
+.fx-rec__back { display: none; color: var(--t-accent); text-decoration: none; font-size: 13px; }
+.fx-rec__title { margin: 0; font-family: var(--t-display); font-weight: var(--t-display-weight); color: var(--t-strong); font-size: 24px; }
+.fx-rec__table { display: grid; grid-template-columns: 110px minmax(150px, 1fr) repeat(var(--cols), minmax(170px, 1fr)); border: 1px solid var(--fx-line); border-radius: var(--t-radius); overflow-x: auto; }
+.fx-rec__row { display: contents; }
+.fx-rec__row > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-top: 1px solid var(--fx-line-soft); font-size: 13.5px; color: var(--t-strong); }
+.fx-rec__row:first-child > span { border-top: 0; background: var(--t-s1); }
+.fx-rec__row > span[role="cell"]:not(.fx-rec__job) { flex-direction: row; align-items: flex-start; gap: 6px; }
+.fx-rec__row > span[role="cell"].fx-rec__acts { flex-direction: column; align-items: stretch; gap: 8px; }
+.fx-rec__acts > .fx-task__link, .fx-rec__card > .fx-task__link { align-self: flex-start; }
+.fx-rec__job { background: color-mix(in srgb, var(--t-accent) 5%, transparent); }
+.fx-rec__row:first-child > .fx-rec__job { background: color-mix(in srgb, var(--t-accent) 10%, var(--t-s1)); }
+.fx-rec__lines { display: flex; flex-direction: column; font-family: var(--t-data); font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1.6; }
+.fx-rec__mark { flex: none; font-weight: 800; }
+[data-mark="same"] > .fx-rec__mark { color: var(--t-success); }
+[data-mark="differs"], [data-mark="differs"] > .fx-rec__mark { color: var(--t-warn); }
+.fx-rec__best { color: var(--t-success); font-size: 12px; font-weight: 700; }
+.fx-rec__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
+.fx-rec__foot-acts { display: flex; gap: 10px; flex-wrap: wrap; }
+.fx-rec__cards { display: none; }
+.fx-rec__card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); font-size: 13.5px; color: var(--t-strong); }
+.fx-rec__card.fx-rec__job { border-color: transparent; }
+.fx-rec__card--best { border-color: var(--t-success); }
+.fx-rec__card-top { display: flex; justify-content: space-between; gap: 8px; }
+.fx-rec__label { color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.fx-rec__checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
+@media (max-width: 1100px) {
+  .fx-rec { grid-template-columns: minmax(0, 1fr); min-height: 0; }
+  .fx-rec__queue { border-right: 0; max-height: none; }
+  .fx-rec--open .fx-rec__queue { display: none; }
+  .fx-rec:not(.fx-rec--open) .fx-rec__detail { display: none; }
+  .fx-rec__back { display: inline; }
+}
+@media (max-width: 820px) {
+  .fx-rec__detail { padding: 16px; }
+  .fx-rec__table { display: none; }
+  .fx-rec__cards { display: flex; flex-direction: column; gap: 12px; }
+  .fx-rec__cards .fx-btn, .fx-rec__foot .fx-btn { min-height: 44px; }
+  .fx-rec__foot-acts { width: 100%; }
+  .fx-rec__foot-acts .fx-btn { flex: 1 1 auto; }
+}
 .fx-task__custom { margin-top: 24px; }
 .fx-task__custom h3 { margin: 0 0 4px; color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
 .fx-task__input { width: 100%; min-width: 0; }
@@ -838,6 +920,20 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-people td:nth-child(2) .fx-select { width: 100%; }
   .fx-people td:nth-child(3) { grid-area: 3 / 1 / 4 / -1; }
   .fx-people td:nth-child(3):empty { display: none; }
+  /* Jobs list: the tick at the left of each row and group head; the client
+     and total on the first line, then each other column on its own line,
+     with its name. */
+  .fx-table--jobs tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
+  .fx-table--jobs td, .fx-table--jobs td:nth-child(2), .fx-table--jobs td:nth-child(3) { display: block; width: auto; margin: 0; padding: 0; }
+  .fx-table--jobs tr > td.fx-tick-cell { grid-column: 1; grid-row: 1; align-self: start; padding-top: 2px; }
+  .fx-table--jobs tr.fx-row-link > td:not(.fx-tick-cell) { grid-column: 2 / -1; }
+  .fx-table--jobs tr.fx-row-link > td.fx-c-client { grid-area: 1 / 2; }
+  .fx-table--jobs tr.fx-row-link > td.fx-c-total { grid-area: 1 / 3; }
+  .fx-table--jobs td.fx-c-end { display: none; }
+  .fx-table--jobs tr.fx-row-link > td[data-label]:not(.fx-c-total, .fx-c-stage)::before { content: attr(data-label) " "; color: var(--t-dim); font-size: 12px; }
+  .fx-table--jobs tr.fx-table__group { grid-template-columns: 28px minmax(0, 1fr); background: var(--t-s1); }
+  .fx-table--jobs tr.fx-table__group > td.fx-tick-cell { grid-row: 1; align-self: center; padding: 0; }
+  .fx-table--jobs tr.fx-table__group > td { background: none; }
 }
 
 @keyframes fx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@@ -1092,3 +1188,48 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-bulk__sep { margin: 0 2px; }
   .fx-bulk__act:not(.fx-bulk__act--primary) .fx-bulk__word { display: none; }
 }
+
+/* Xero › Import (server/ui/xero-import.js): Review compares one fact per row
+   with ✓ or ≠ between the sides; the list and history tick rows for the bulk
+   bar. */
+.fx-xi { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 980px; }
+.fx-xi .fx-lucide { width: 16px; height: 16px; }
+.fx-xi__views { display: inline-flex; border: 1px solid var(--fx-line); }
+.fx-xi__view { display: inline-grid; place-items: center; width: 40px; height: 36px; border: 0; background: transparent; color: var(--t-dim); cursor: pointer; }
+.fx-xi__view[aria-selected="true"] { background: var(--t-primary); color: var(--t-on-primary); }
+.fx-xi__count { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
+.fx-xi__progress { display: inline-block; width: 120px; height: 4px; background: var(--fx-line); }
+.fx-xi__progress > span { display: block; height: 100%; background: var(--t-primary); }
+.fx-xi__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--t-primary); background: color-mix(in srgb, var(--t-primary) 6%, transparent); color: var(--t-strong); font-size: 13.5px; }
+.fx-xi__bulk-text { margin-right: auto; }
+.fx-xi__bulk .fx-btn { display: inline-flex; align-items: center; gap: 6px; }
+.fx-xi__bulk .fx-xi__search { flex: 1; min-width: 0; margin-right: 0; }
+.fx-xi-cmp { width: 100%; border-collapse: collapse; border: 1px solid var(--fx-line); background: var(--t-s1); }
+.fx-xi-cmp th, .fx-xi-cmp td { padding: 11px 16px; border-top: 1px solid var(--fx-line-soft); text-align: left; font-size: 14px; color: var(--t-strong); }
+.fx-xi-cmp thead th { border-top: 0; padding: 14px 16px; }
+.fx-xi-cmp tbody th { width: 44px; color: var(--t-dim); }
+.fx-xi-cmp td:nth-child(2), .fx-xi-cmp th:nth-child(2) { width: 42%; }
+.fx-xi-cmp__mid { width: 48px; text-align: center !important; }
+.fx-xi__mark { height: 22px; width: auto; vertical-align: middle; }
+.fx-xi-cmp thead th:last-child { display: flex; align-items: center; gap: 10px; color: var(--t-dim); }
+.fx-xi__agree { display: inline-grid; place-items: center; width: 24px; height: 24px; }
+.fx-xi__agree[data-state="same"] { color: var(--t-success); }
+.fx-xi__agree[data-state="differs"] { color: var(--t-warn); }
+.fx-xi__acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
+.fx-xi__acts .fx-btn { display: inline-flex; align-items: center; gap: 6px; }
+.fx-xi__done { display: flex; align-items: center; gap: 12px; padding: 24px; border: 1px solid var(--fx-line); color: var(--t-success); }
+.fx-xi__done p { margin: 0; color: var(--t-strong); }
+.fx-xi__scroll { overflow-x: auto; }
+.fx-xi-list .fx-xi__mark { height: 18px; }
+.fx-xi-list__mid { width: 56px; text-align: center; color: var(--t-dim); white-space: nowrap; }
+.fx-xi-list__mid .fx-dim { margin-left: 4px; font-size: 12px; }
+.fx-xi-list tr[data-state="linked"] .fx-xi-list__mid { color: var(--t-success); }
+.fx-xi-list tr[data-state="invoice_fits"] .fx-xi-list__mid a, .fx-xi-list tr[data-state="job_fits"] .fx-xi-list__mid a { color: var(--t-warn); }
+@media (max-width: 820px) {
+  .fx-xi-cmp th, .fx-xi-cmp td { padding: 10px 8px; font-size: 13px; }
+  .fx-xi-cmp tbody th { width: 28px; }
+  .fx-xi-cmp__mid { width: 28px; }
+  .fx-xi__acts .fx-btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
+}
+.fx-xi-count { font-size: 18px; }
+.fx-xi-list td.fx-num:not(.fx-strong) { text-align: left; }

package/server/ui/job-board.js

@@ -97,9 +97,9 @@ function reasonFix(reason) {
   if (reason === 'the job status moved back after its invoice was made') return fix('Status moved back', 'Check the job in the work system. Void or hold its invoice if the work is not done.', 'work');
   if (/deleted in /i.test(reason)) return fix('Deleted', 'Check the job in the work system. Void its invoice if it has one.', 'work');
   // The matcher found invoices that may be this job's, but no exact link.
-  // Flow holds the job so that it is not invoiced two times.
+  // A person makes an invoice or links one (jobs.js draws the two buttons).
   if (/^the accounting evidence is ambiguous/.test(reason)) {
-    return { label: 'Invoice unclear', text: 'Flow cannot tell if this job has an invoice already.', todo: 'Check the invoice number on the job in the work system. Flow holds the job so it is not invoiced two times.', go: 'work' };
+    return { label: 'No invoice', text: 'This job has no invoice.', todo: null, go: 'choose' };
   }
   if (/^the accounting evidence is conflict/.test(reason)) {
     return { label: 'Invoice link changed', text: 'A second invoice now answers for this job, or its invoice is gone.', todo: 'Check the invoice number on the job in the work system. Void an extra invoice.', go: 'work' };
@@ -133,11 +133,13 @@ function draftFix(problem) {
   return { label: 'Invoice problem', text: 'The invoice for this job needs a fix before it can be sent.', todo: 'Open the invoice for the steps.', go: 'invoice' };
 }
 
-// Where a fix's link goes: Flow's invoice, the job in the work system, or a
-// Flow settings page (jobs.js draws the link).
-export const GO = ['invoice', 'work', 'price-list', 'invoicing-settings', 'integrations'];
+// Where a fix's link goes: Flow's invoice, the job in the work system, a
+// Flow settings page, or `choose`: Make invoice and Link invoice buttons
+// (jobs.js draws them).
+export const GO = ['invoice', 'work', 'price-list', 'invoicing-settings', 'integrations', 'choose'];
 
-// What a person must fix on a job, in order: [{ label, text, todo, go }].
+// What a person must fix on a job, in order: [{ label, text, todo, go }];
+// `todo` is null when the buttons are the instruction.
 // Empty unless invoiceStage is Problem.
 export function fixes(o) {
   if (invoiceStage(o) !== 'problem') return [];

package/server/ui/job-view.js

@@ -5,10 +5,24 @@
 // (test/job-view.test.js). server/ui/jobs.js draws the page.
 
 export const LAYOUTS = ['board', 'list'];
-export const GROUPS = { status: 'Status', stage: 'Invoice stage', client: 'Client', practitioner: 'Practitioner' };
-export const SORTS = { board: 'Lab system order', due: 'Date', client: 'Client', practitioner: 'Practitioner', total: 'Total' };
+// 'none' is one plain list with no group heads. The board has a lane per
+// group, so there it shows the status lanes.
+export const GROUPS = { status: 'Status', stage: 'Invoice stage', client: 'Client', practitioner: 'Practitioner', none: 'None' };
+export const SORTS = { board: 'Lab system order', due: 'Date', ordered: 'Requested', shipped: 'Shipped', client: 'Client', practitioner: 'Practitioner', total: 'Total' };
 export const DIRS = ['asc', 'desc'];
-export const DEFAULT_VIEW = Object.freeze({ layout: 'board', group: 'status', sort: 'board', dir: 'asc', hide: [], late: false, problems: false });
+// The list's columns, in order. Client is always the first column. One
+// column holds one field: each date has its own column. A custom field is
+// a column too ('field:<field id>'). Patient shows only when the
+// installation keeps patient names; Assignee only when the lab has a
+// person field.
+export const COLUMNS = {
+  case: 'Case', practitioner: 'Practitioner', patient: 'Patient', stage: 'Stage', assignee: 'Assignee',
+  ordered: 'Requested', due: 'Due', shipped: 'Shipped', total: 'Total',
+};
+export const DEFAULT_COLUMNS = Object.freeze(['practitioner', 'patient', 'stage', 'assignee', 'due', 'total']);
+export const DEFAULT_VIEW = Object.freeze({
+  layout: 'board', group: 'status', sort: 'board', dir: 'asc', hide: [], late: false, problems: false, mine: false, columns: DEFAULT_COLUMNS,
+});
 
 // Group by one of the lab's custom fields (docs/CUSTOM_FIELDS.md):
 // 'field:<field id>'. Only dropdown, person and checkbox fields make lanes.
@@ -17,6 +31,7 @@ export const fieldGroup = (fieldId) => `field:${fieldId}`;
 export const fieldIdOf = (group) => (FIELD_GROUP.test(group ?? '') ? group.slice(6) : null);
 
 const MAX_HIDDEN = 100;
+const MAX_COLUMNS = 40;
 const MAX_LABEL = 120;
 
 // A view as Flow stores it: only the known keys, each checked. Anything else
@@ -35,27 +50,35 @@ export function normaliseJobsView(input) {
     hide,
     late: value.late === true,
     problems: value.problems === true,
+    mine: value.mine === true,
+    columns: Array.isArray(value.columns)
+      ? [...new Set(value.columns.filter((c) => Object.hasOwn(COLUMNS, c) || FIELD_GROUP.test(c ?? '')))].slice(0, MAX_COLUMNS)
+      : [...DEFAULT_COLUMNS],
   };
 }
 
 // How many filters are on: shown on the Filter button.
 export function filterCount(view) {
-  return view.hide.length + (view.late ? 1 : 0) + (view.problems ? 1 : 0);
+  return view.hide.length + (view.late ? 1 : 0) + (view.problems ? 1 : 0) + (view.mine ? 1 : 0);
 }
 
 // The jobs the filter keeps. `status` is a job's status label; `late` and
-// `problem` say if a job is late or has a problem (jobs.js knows how).
-export function filterJobs(jobs, view, { status, late, problem }) {
+// `problem` say if a job is late or has a problem; `mine` says if it is
+// assigned to the person looking (jobs.js knows how).
+export function filterJobs(jobs, view, { status, late, problem, mine = () => true }) {
   const hidden = new Set(view.hide);
   return jobs.filter((job) => !hidden.has(status(job))
     && (!view.late || late(job))
-    && (!view.problems || problem(job)));
+    && (!view.problems || problem(job))
+    && (!view.mine || mine(job)));
 }
 
 const dayOf = (job) => job.dueOn ?? job.orderedOn ?? job.jobDate ?? null;
 const text = (value) => (value ?? '').toString().toLowerCase();
 const KEYS = {
   due: dayOf,
+  ordered: (job) => job.orderedOn ?? null,
+  shipped: (job) => job.shippedOn ?? null,
   client: (job) => text(job.clientName) || null,
   practitioner: (job) => text(job.practitioner) || null,
   total: (job) => job.totalCents ?? null,