@arcforgelabs/flow 2026.10.37 → 2026.10.39

package/server/ui/reconcile.js

@@ -0,0 +1,275 @@
+// Reconcile: Flow's jobs with no Flow invoice, and Flow invoices with no job.
+// For one of them, the possible other side beside it, each fact marked same
+// (✓) or different (≠), and a search for any other. A person links one, or
+// for a job makes its invoice. Flow's own records only: matching a Flow
+// invoice to an accounting system's is that integration's work. API:
+// /api/invoicing/reconcile, /jobs/:id/reconcile, /invoices/:id/reconcile,
+// /jobs/:id/link, /jobs/:id/no-invoice (docs/JOB_INVOICE_LINKS.md).
+import { formatCents } from '/assets/ui/invoicing.js';
+
+const STATUS = { draft: 'Draft', issued: 'Approved', void: 'Void' };
+const fullDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }) : '—');
+const shortDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short' }) : '—');
+const money = (cents) => (cents == null ? '—' : formatCents(cents));
+const lineText = (l) => `${l.code ?? l.description ?? '—'} ${money(l.amountCents)}`;
+
+// The words for how far one date is from another.
+export function dayWords(days) {
+  if (days == null) return null;
+  if (days === 0) return 'same day';
+  const n = Math.abs(days);
+  return `${n} day${n === 1 ? '' : 's'} ${days > 0 ? 'later' : 'earlier'}`;
+}
+
+export const statusWords = (status) => STATUS[status] ?? status ?? '—';
+
+const dateMark = (c) => (c.date ? (Math.abs(c.date.days) <= 3 ? 'same' : 'differs') : null);
+const othersMark = (n) => (n ? 'differs' : 'same');
+
+// The facts of a job and of each candidate Flow invoice: { label, value, mark }.
+export function jobFacts(job) {
+  return [
+    { label: 'Client', value: job.clientName ?? '—' },
+    { label: 'Reference', value: job.reference ?? '—' },
+    { label: 'Date', value: fullDate(job.jobDate) },
+    { label: 'Lines', value: job.lines.map(lineText) },
+    { label: 'Total', value: money(job.totalCents) },
+    { label: 'Other jobs', value: '—' },
+    { label: 'Status', value: job.sourceStatus ?? '—' },
+  ];
+}
+
+export function invoiceCandidateFacts(invoice) {
+  const c = invoice.checks;
+  return [
+    { label: 'Client', value: c.client === 'same' ? 'Same' : invoice.clientName ?? '—', mark: c.client },
+    { label: 'Reference', value: invoice.reference ?? '—', mark: c.reference },
+    { label: 'Date', value: [shortDate(invoice.date), dayWords(c.date?.days)].filter(Boolean).join(' · '), mark: dateMark(c) },
+    { label: 'Lines', value: invoice.lines.map(lineText), mark: c.lines },
+    { label: 'Total', value: money(invoice.totalCents), mark: c.total },
+    { label: 'Other jobs', value: c.others ? `Linked to ${c.others} other job${c.others === 1 ? '' : 's'}` : 'None', mark: othersMark(c.others) },
+    { label: 'Status', value: statusWords(invoice.status), mark: null },
+  ];
+}
+
+// The facts of a Flow invoice and of each candidate job.
+function invoiceFacts(invoice) {
+  return [
+    { label: 'Client', value: invoice.clientName ?? '—' },
+    { label: 'Reference', value: invoice.reference ?? '—' },
+    { label: 'Date', value: fullDate(invoice.date) },
+    { label: 'Lines', value: invoice.lines.map(lineText) },
+    { label: 'Total', value: money(invoice.totalCents) },
+    { label: 'Status', value: statusWords(invoice.status) },
+  ];
+}
+
+function jobCandidateFacts(job) {
+  const c = job.checks;
+  return [
+    { label: 'Client', value: c.client === 'same' ? 'Same' : job.clientName ?? '—', mark: c.client },
+    { label: 'Reference', value: job.practitioner ?? '—', mark: null },
+    { label: 'Date', value: [shortDate(job.jobDate), dayWords(c.date?.days)].filter(Boolean).join(' · '), mark: dateMark(c) },
+    { label: 'Lines', value: job.lines.map(lineText), mark: c.lines },
+    { label: 'Total', value: money(job.totalCents), mark: c.total },
+    { label: 'Status', value: job.sourceStatus ?? (job.ready ? 'Ready to invoice' : 'In work'), mark: null },
+  ];
+}
+
+export async function renderReconcile(main, ui, id = null) {
+  const { h, flow, pageHeader } = ui;
+  const canAct = ['owner', 'admin'].includes(ui.me?.person?.role);
+  const tab = new URLSearchParams(location.search).get('tab') === 'invoices' ? 'invoices' : 'jobs';
+  const host = h('div', { class: `fx-rec${id ? ' fx-rec--open' : ''}` }, h('p', { class: 'fx-dim' }, 'Loading…'));
+  main.append(pageHeader('Reconcile', { subtitle: 'Flow jobs with no invoice, and Flow invoices with no job.' }), host);
+
+  let lists;
+  try {
+    lists = await flow('/api/invoicing/reconcile');
+  } catch (error) {
+    host.replaceChildren(h('p', { class: 'fx-empty' }, error.message));
+    return;
+  }
+  const queue = tab === 'invoices' ? lists.invoices : lists.jobs;
+  const pathOf = (itemId, inTab = tab) => `/reconcile${itemId ? `/${itemId}` : ''}${inTab === 'invoices' ? '?tab=invoices' : ''}`;
+  const open = (itemId, event, inTab = tab) => {
+    if (event) event.preventDefault();
+    ui.go(pathOf(itemId, inTab));
+  };
+  const index = id ? queue.findIndex((j) => j.id === id) : -1;
+  const next = () => {
+    const rest = queue.filter((j) => j.id !== id);
+    open(rest[Math.max(0, index)]?.id ?? rest[0]?.id ?? null);
+  };
+
+  const tabs = h('div', { class: 'fx-rec__tabs', role: 'tablist' },
+    [['jobs', `Job, no invoice · ${lists.jobs.length}`], ['invoices', `Invoice, no job · ${lists.invoices.length}`]].map(([name, label]) => h('a', {
+      class: 'fx-rec__tab', role: 'tab', href: pathOf(null, name), 'aria-selected': String(name === tab), onclick: (event) => open(null, event, name),
+    }, label)));
+  const items = queue.map((item) => h('a', {
+    class: 'fx-rec__item', href: pathOf(item.id), 'aria-current': item.id === id ? 'true' : 'false', onclick: (event) => open(item.id, event),
+  },
+  h('span', { class: 'fx-rec__item-top' }, h('span', { class: 'fx-strong' }, tab === 'jobs' ? item.clientName ?? 'No client' : item.number ?? 'Draft'), h('span', { class: 'fx-num' }, money(item.totalCents))),
+  h('span', { class: 'fx-dim' }, (tab === 'jobs'
+    ? [item.practitioner, shortDate(item.jobDate)]
+    : [item.clientName, item.issueDate ? shortDate(item.issueDate) : null, statusWords(item.status)]
+  ).concat(item.possible ? `${item.possible} possible` : 'none found').filter(Boolean).join(' · '))));
+  const list = h('nav', { class: 'fx-rec__queue', 'aria-label': tab === 'jobs' ? 'Jobs with no invoice' : 'Invoices with no job' },
+    tabs, items.length ? items : h('p', { class: 'fx-empty' }, tab === 'jobs' ? 'Every ready job has an invoice.' : 'Every invoice has a job.'));
+
+  const detail = h('section', { class: 'fx-rec__detail', 'aria-label': 'Compare' });
+  host.replaceChildren(list, detail);
+  if (!id) {
+    detail.append(h('p', { class: 'fx-empty' }, queue.length ? 'Choose one.' : 'Nothing to reconcile here.'));
+    return;
+  }
+
+  const kind = tab === 'jobs' ? 'jobs' : 'invoices';
+  const search = h('input', {
+    class: 'fx-input fx-rec__search', type: 'search', autocomplete: 'off',
+    placeholder: tab === 'jobs' ? 'Search Flow invoices: number, client, Reference, amount' : 'Search jobs: client, practitioner, case',
+    'aria-label': tab === 'jobs' ? 'Search Flow invoices' : 'Search jobs',
+  });
+  const head = h('div', { class: 'fx-rec__head' });
+  const results = h('div', { class: 'fx-rec__results' }, h('p', { class: 'fx-dim' }, 'Loading…'));
+  const foot = h('div', { class: 'fx-rec__foot' });
+  detail.replaceChildren(head, search, results, foot);
+
+  let timer = null;
+  search.addEventListener('input', () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => load(search.value), 300);
+  });
+
+  async function act(run, done) {
+    for (const b of detail.querySelectorAll('button')) b.disabled = true;
+    try {
+      await run();
+      ui.toast(done, 'success');
+      next();
+    } catch (error) {
+      const reasons = error.details?.reasons;
+      ui.toast(reasons?.length ? `Not done: ${reasons.join('; ')}.` : error.message, 'danger');
+      for (const b of detail.querySelectorAll('button')) b.disabled = false;
+    }
+  }
+  const markOf = (mark) => (mark === 'same' ? h('span', { class: 'fx-rec__mark', 'data-mark': 'same', 'aria-label': 'Same' }, '✓')
+    : mark === 'differs' ? h('span', { class: 'fx-rec__mark', 'data-mark': 'differs', 'aria-label': 'Different' }, '≠') : null);
+  const valueOf = (fact) => (Array.isArray(fact.value)
+    ? h('span', { class: 'fx-rec__lines' }, fact.value.length ? fact.value.map((v) => h('span', {}, v)) : '—')
+    : h('span', {}, fact.value));
+  const inFlow = (href, label) => h('a', { class: 'fx-task__link', href, onclick: (event) => ui.go(event) }, label);
+
+  // Wide: one table, the record and each candidate a column. Narrow: cards.
+  // A candidate's `action` and `link` make a new node for each of the two.
+  function compareView({ ours, oursTitle, oursSub, candidates }) {
+    const table = h('div', { class: 'fx-rec__table', role: 'table', style: `--cols: ${candidates.length}` },
+      h('div', { class: 'fx-rec__row', role: 'row' },
+        h('span', { role: 'columnheader' }),
+        h('span', { role: 'columnheader', class: 'fx-rec__job' }, h('span', { class: 'fx-strong' }, oursTitle), h('span', { class: 'fx-dim' }, oursSub)),
+        candidates.map((c) => h('span', { role: 'columnheader' },
+          h('span', { class: 'fx-strong' }, c.title), c.best ? h('span', { class: 'fx-rec__best' }, 'Best match') : h('span', { class: 'fx-dim' }, c.sub)))),
+      ours.map((fact, row) => h('div', { class: 'fx-rec__row', role: 'row' },
+        h('span', { role: 'rowheader', class: 'fx-dim' }, fact.label),
+        h('span', { role: 'cell', class: 'fx-rec__job' }, valueOf(fact)),
+        candidates.map((c) => h('span', { role: 'cell', 'data-mark': c.facts[row].mark ?? '' }, markOf(c.facts[row].mark), valueOf(c.facts[row]))))),
+      h('div', { class: 'fx-rec__row', role: 'row' },
+        h('span', { role: 'cell' }), h('span', { role: 'cell', class: 'fx-rec__job' }),
+        candidates.map((c) => h('span', { role: 'cell', class: 'fx-rec__acts' }, c.action?.(), c.link?.()))));
+    const cards = h('div', { class: 'fx-rec__cards' },
+      h('div', { class: 'fx-rec__card fx-rec__job' },
+        h('span', { class: 'fx-rec__label' }, `${oursTitle} · ${oursSub}`),
+        ours.filter((f) => f.label !== 'Client' && f.value !== '—').map((f) => h('span', {}, Array.isArray(f.value) ? f.value.join(', ') : f.value))),
+      candidates.map((c) => h('div', { class: `fx-rec__card${c.best ? ' fx-rec__card--best' : ''}` },
+        h('span', { class: 'fx-rec__card-top' }, h('span', { class: 'fx-strong' }, c.title), c.best ? h('span', { class: 'fx-rec__best' }, 'Best match') : null),
+        h('span', { class: 'fx-rec__checks' }, c.facts.filter((f) => f.mark).map((f) => h('span', { 'data-mark': f.mark }, markOf(f.mark), ` ${f.label}`))),
+        h('span', { class: 'fx-dim' }, c.summary),
+        c.action?.(), c.link?.())));
+    return [table, cards];
+  }
+
+  async function load(q = '') {
+    let body;
+    try {
+      body = await flow(`/api/invoicing/${kind}/${id}/reconcile${q.trim() ? `?q=${encodeURIComponent(q.trim())}` : ''}`);
+    } catch (error) {
+      results.replaceChildren(h('p', { class: 'fx-empty' }, error.message));
+      return;
+    }
+    const position = index >= 0 ? `${index + 1} of ${queue.length}` : '';
+    if (tab === 'jobs') renderJob(body, position, q);
+    else renderInvoice(body, position, q);
+  }
+
+  function renderHead(position, title, link) {
+    head.replaceChildren(...[
+      h('div', {},
+        h('a', { class: 'fx-rec__back', href: pathOf(null), onclick: (event) => open(null, event) }, '← All'),
+        h('span', { class: 'fx-dim' }, position),
+        h('h2', { class: 'fx-rec__title' }, title)),
+      link,
+    ].filter(Boolean));
+  }
+
+  function renderJob({ job, invoices }, position, q) {
+    const system = job.sourceName ?? job.sourceSystem;
+    renderHead(position, job.clientName ?? 'No client', null);
+    const candidates = invoices.map((invoice) => {
+      const facts = invoiceCandidateFacts(invoice);
+      return {
+        title: invoice.number ?? 'Draft', sub: statusWords(invoice.status), best: invoice.best, facts,
+        summary: `${facts[2].value} · ${money(invoice.totalCents)} · ${statusWords(invoice.status)}`,
+        action: canAct && job.open ? () => h('button', {
+          class: `fx-btn${invoice.best ? ' fx-btn--primary' : ''}`, type: 'button',
+          onclick: () => act(() => flow(`/api/invoicing/jobs/${job.id}/link`, { method: 'POST', body: JSON.stringify({ invoiceId: invoice.id }) }),
+            `Linked to ${invoice.number ?? 'the draft'}.`),
+        }, 'Link this invoice') : null,
+        link: () => inFlow(`/invoices/${invoice.id}`, 'Open invoice'),
+      };
+    });
+    results.replaceChildren(...[
+      job.open ? null : h('p', { class: 'fx-notice' }, 'This job has an invoice already.'),
+      candidates.length ? compareView({ ours: jobFacts(job), oursTitle: 'This job', oursSub: system, candidates })
+        : h('p', { class: 'fx-empty' }, q.trim() ? 'No Flow invoice matches the search.' : 'Flow found no invoice that may be for this job. Search for one, or make it.'),
+    ].flat().filter(Boolean));
+    foot.replaceChildren(
+      h('span', { class: 'fx-dim' }, candidates.length ? 'None of these?' : ''),
+      h('div', { class: 'fx-rec__foot-acts' },
+        queue.length > 1 ? h('button', { class: 'fx-btn fx-btn--ghost', type: 'button', onclick: next }, 'Skip') : null,
+        canAct && job.open ? h('button', {
+          class: 'fx-btn', type: 'button',
+          onclick: () => act(async () => {
+            if (job.unclear) await flow(`/api/invoicing/jobs/${job.id}/no-invoice`, { method: 'POST', body: '{}' });
+            await flow(`/api/invoicing/jobs/${job.id}/draft`, { method: 'POST', body: '{}' });
+          }, 'Draft invoice made.'),
+        }, 'Make invoice') : null));
+  }
+
+  function renderInvoice({ invoice, jobs }, position, q) {
+    renderHead(position, invoice.number ?? 'Draft invoice', inFlow(`/invoices/${invoice.id}`, 'Open invoice'));
+    const candidates = jobs.map((job) => {
+      const facts = jobCandidateFacts(job);
+      return {
+        title: job.caseRef ?? shortDate(job.jobDate), sub: job.practitioner ?? '', best: job.best, facts,
+        summary: `${facts[2].value} · ${money(job.totalCents)}`,
+        action: canAct && invoice.open ? () => h('button', {
+          class: `fx-btn${job.best ? ' fx-btn--primary' : ''}`, type: 'button',
+          onclick: () => act(() => flow(`/api/invoicing/jobs/${job.id}/link`, { method: 'POST', body: JSON.stringify({ invoiceId: invoice.id }) }),
+            'Job linked.'),
+        }, 'Link this job') : null,
+        link: null,
+      };
+    });
+    results.replaceChildren(...[
+      invoice.open ? null : h('p', { class: 'fx-notice' }, 'This invoice has a job already.'),
+      candidates.length ? compareView({ ours: invoiceFacts(invoice), oursTitle: 'This invoice', oursSub: 'Flow', candidates })
+        : h('p', { class: 'fx-empty' }, q.trim() ? 'No job matches the search.' : 'Flow found no job that may be for this invoice.'),
+    ].flat().filter(Boolean));
+    foot.replaceChildren(
+      h('span', { class: 'fx-dim' }, ''),
+      h('div', { class: 'fx-rec__foot-acts' },
+        queue.length > 1 ? h('button', { class: 'fx-btn fx-btn--ghost', type: 'button', onclick: next }, 'Skip') : null));
+  }
+
+  await load();
+}

package/server/ui/routes.js

@@ -21,7 +21,7 @@ const themeDir = join(here, '..', 'theme');
 const logoDir = join(here, 'logos');
 const LOGO_FILES = new Set(['xero.svg', 'seazona.svg', 'sentry.svg']);
 const THEME_FILES = new Set(['themes.js', 'color-contrast.js', 'openclaw-palettes.js', 'font-families.js']);
-const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'custom-fields.js', 'jobs.js', 'job-board.js', 'job-view.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'flow-mark.svg']);
+const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'price-match.js', 'price-reconcile.js', 'custom-fields.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'job-view.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'flow-mark.svg']);
 const iconDir = join(dirname(require.resolve('lucide-static/package.json')), 'icons');
 const ICON_FILE = /^[a-z0-9]+(?:-[a-z0-9]+)*\.svg$/;
 const MAX_AGE = '1h';

package/server/ui/xero-import.js

@@ -0,0 +1,329 @@
+// Xero › Import › Review: each Xero invoice in Flow's copy that a Flow invoice
+// or a Flow job fits (server/integrations/xero/links.js). Two views:
+//   card  one Xero invoice beside its Flow fit, one fact per row, ✓ or ≠
+//         between them; Skip, Other match, Link.
+//   list  every one to check, ticked rows linked together from the bulk bar.
+// ?show=all is the history: every Xero invoice in the copy, with a search;
+// ticked rows with nothing in Flow get a Flow invoice from the bulk bar.
+// The settings and the counts are rows on the Xero integration page. It reads
+// Flow's database only: no Xero call.
+import { bulkBar } from '/assets/ui/bulk-bar.js';
+import { lucide } from '/assets/ui/custom-fields.js';
+import { formatCents } from '/assets/ui/invoicing.js';
+
+const XERO_STATUS = { DRAFT: 'Draft', SUBMITTED: 'Awaiting approval', AUTHORISED: 'Approved', PAID: 'Paid' };
+const XERO_TONE = { DRAFT: 'neutral', SUBMITTED: 'warn', AUTHORISED: 'info', PAID: 'success' };
+const shortDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }) : '—');
+const money = (cents) => (cents == null ? '—' : formatCents(cents));
+const daysApart = (a, b) => (a && b ? Math.abs(Math.round((Date.parse(a) - Date.parse(b)) / 86_400_000)) : 0);
+const sameSet = (a = [], b = []) => a.length === b.length && a.every((c) => b.includes(c));
+const words = (text) => String(text ?? '').trim().toLowerCase().replace(/\s+/g, ' ');
+
+export function xeroStatusWords(row) {
+  if (row.status === 'AUTHORISED' && row.amountDueCents > 0 && row.amountDueCents < row.totalCents) return 'Part paid';
+  return XERO_STATUS[row.status] ?? row.status;
+}
+
+// The Flow side of one fit: a Flow invoice, or a job with no invoice.
+export function flowFit(row, index = 0) {
+  if (row.state === 'invoice_fits') {
+    const i = row.invoices[index];
+    return { kind: 'invoice', id: i.id, name: i.number ?? 'Draft', date: i.date, totalCents: i.totalCents, reference: i.reference ?? null, itemCodes: i.itemCodes ?? [],
+      count: row.invoices.length, hard: Boolean(i.hard), path: 'link', body: { invoiceId: i.id } };
+  }
+  const j = row.jobs[index];
+  return { kind: 'job', id: j.id, name: j.caseRef ?? 'Job', date: j.jobDate, totalCents: j.totalCents, reference: j.practitioner ?? null, itemCodes: j.itemCodes ?? [],
+    count: row.jobs.length, hard: Boolean(j.tied), path: 'make', body: { jobId: j.id } };
+}
+
+// ✓ same, ≠ different, nothing when a side is empty. `tip` says how.
+export function agreement(left, right, same) {
+  if (left == null || right == null || left === '' || right === '') return null;
+  return same ? 'same' : 'differs';
+}
+
+export async function renderXeroImport(main, ui) {
+  const { h, flow } = ui;
+  const canAct = ['owner', 'admin'].includes(ui.me?.person?.role);
+  const params = new URLSearchParams(location.search);
+  const history = params.get('show') === 'all';
+  const icon = (name, label) => lucide(h, name, label);
+  const host = h('div', { class: 'fx-xi' }, h('p', { class: 'fx-dim' }, 'Loading…'));
+  const subtitle = h('span', {});
+  const actions = [];
+  let view = params.get('view') === 'list' ? 'list' : 'card';
+  if (!history) {
+    const toggle = (name, label, glyph) => h('button', {
+      class: 'fx-xi__view', type: 'button', role: 'tab', 'aria-selected': String(view === name), 'aria-label': label, title: label, 'data-view': name,
+      onclick: () => setView(name),
+    }, icon(glyph));
+    actions.push(h('div', { class: 'fx-xi__views', role: 'tablist', 'aria-label': 'View' }, toggle('card', 'One at a time', 'square'), toggle('list', 'List, tick many', 'list-checks')));
+  }
+  function setView(name) {
+    view = name;
+    window.history.replaceState(null, '', view === 'list' ? '/xero-import?view=list' : '/xero-import');
+    for (const b of main.querySelectorAll('.fx-xi__view')) b.setAttribute('aria-selected', String(b.dataset.view === view));
+    renderReview();
+  }
+  main.append(
+    h('nav', { class: 'fx-crumbs', 'aria-label': 'Breadcrumb' },
+      h('a', { href: '/integrations', onclick: (event) => ui.go(event) }, 'Integrations'), h('span', { 'aria-hidden': 'true' }, '›'),
+      h('a', { href: '/integrations/xero', onclick: (event) => ui.go(event) }, 'Xero'), h('span', { 'aria-hidden': 'true' }, '›'),
+      h('span', {}, history ? 'History' : 'Review')),
+    ui.pageHeader(history ? 'Xero history' : 'Review', { subtitle, actions }),
+    host);
+
+  let organisationId;
+  try {
+    organisationId = (await flow('/api/invoicing/context')).organisations?.[0]?.id;
+  } catch (error) {
+    host.replaceChildren(h('p', { class: 'fx-empty' }, error.message));
+    return;
+  }
+  if (!organisationId) {
+    host.replaceChildren(h('p', { class: 'fx-empty' }, 'No organisation.'));
+    return;
+  }
+  const read = (show, { q = '', offset = 0, limit = 100 } = {}) =>
+    flow(`/api/xero/import?organisationId=${organisationId}&show=${show}&limit=${limit}&offset=${offset}${q.trim() ? `&q=${encodeURIComponent(q.trim())}` : ''}`);
+  const act = (xeroInvoiceId, path, body) =>
+    flow(`/api/xero/import/${xeroInvoiceId}/${path}`, { method: 'POST', body: JSON.stringify({ organisationId, ...body }) });
+  // Runs one step for each row, one at a time; answers how many went through.
+  const each = async (rows, step) => {
+    let done = 0;
+    for (const row of rows) {
+      try { await step(row); done += 1; } catch { /* the row stays; the toast counts it */ }
+    }
+    ui.toast(done === rows.length ? `${done} done.` : `${done} of ${rows.length} done. The rest stay here.`, done === rows.length ? 'success' : 'warn');
+  };
+  const go = (href, label) => h('a', { href, onclick: (event) => ui.go(event) }, label);
+  const xeroMark = () => h('img', { class: 'fx-xi__mark', src: '/assets/ui/logos/xero.svg', alt: 'Xero' });
+  const flowMark = () => h('img', { class: 'fx-xi__mark', src: '/assets/ui/flow-mark.svg', alt: 'Flow' });
+  const pill = (row) => h('span', { class: 'fx-status', 'data-tone': XERO_TONE[row.status] ?? 'neutral' }, xeroStatusWords(row));
+  const fitIcon = (fit) => (fit.hard ? icon('link-2', 'Tied by Seazona or the matcher') : fit.kind === 'job' ? icon('briefcase', 'A job fits') : icon('receipt', 'A Flow invoice fits'));
+  const bulk = bulkBar(ui);
+  main.append(bulk.element);
+
+  if (history) return renderHistory();
+  return renderReview();
+
+  async function renderReview() {
+    bulk.draw({ count: 0 });
+    let rows;
+    try {
+      rows = (await read('check')).rows;
+    } catch (error) {
+      host.replaceChildren(h('p', { class: 'fx-empty' }, error.message));
+      return;
+    }
+    if (!rows.length) {
+      subtitle.replaceChildren('');
+      host.replaceChildren(h('div', { class: 'fx-xi__done' }, icon('check-check'), h('p', {}, 'Nothing to check.'), go('/xero-import?show=all', 'Xero history')));
+      return;
+    }
+    return view === 'list' ? reviewList(rows) : reviewCard(rows);
+  }
+
+  // One Xero invoice at a time. Skip moves on and changes nothing.
+  function reviewCard(rows) {
+    let at = 0;
+    let pick = 0;
+    const show = () => {
+      if (at >= rows.length) return renderReview();
+      const row = rows[at];
+      const fit = flowFit(row, pick);
+      const bar = h('span', { class: 'fx-xi__progress', role: 'progressbar', 'aria-valuemin': '1', 'aria-valuemax': String(rows.length), 'aria-valuenow': String(at + 1) },
+        h('span', { style: { width: `${((at + 1) / rows.length) * 100}%` } }));
+      subtitle.replaceChildren(h('span', { class: 'fx-xi__count' }, bar, `${at + 1} / ${rows.length}`));
+      const days = daysApart(row.issuedOn, fit.date);
+      const facts = [
+        ['hash', 'Number', h('span', { class: 'fx-num' }, row.number ?? '—'), h('span', { class: 'fx-num' }, fit.name), null],
+        ['building-2', 'Client', row.clientName ?? '—', row.clientName ?? '—', 'same'],
+        ['calendar', 'Date', shortDate(row.issuedOn), shortDate(fit.date), days ? 'differs' : 'same', days ? `${days} ${days === 1 ? 'day' : 'days'} apart` : null],
+        ['dollar-sign', 'Total', h('span', { class: 'fx-num' }, money(row.totalCents)), h('span', { class: 'fx-num' }, money(fit.totalCents)), agreement(row.totalCents, fit.totalCents, row.totalCents === fit.totalCents)],
+        ['list', 'Items', (row.itemCodes ?? []).join(', ') || '—', fit.itemCodes.join(', ') || '—', agreement(row.itemCodes?.length || null, fit.itemCodes.length || null, sameSet(row.itemCodes, fit.itemCodes))],
+        ['tag', fit.kind === 'job' ? 'Reference / practitioner' : 'Reference', row.reference ?? '—', fit.reference ?? '—',
+          agreement(row.reference, fit.reference, fit.kind === 'job' ? words(row.reference).includes(words(fit.reference)) : words(row.reference) === words(fit.reference))],
+        ['circle-dot', 'Status', pill(row), h('span', { class: 'fx-status', 'data-tone': 'warn' }, fit.kind === 'job' ? 'No invoice' : 'Not in Xero'), null],
+      ];
+      const mark = (state, tip) => (state === 'same' ? h('span', { class: 'fx-xi__agree', 'data-state': 'same' }, icon('equal', tip ?? 'Same'))
+        : state === 'differs' ? h('span', { class: 'fx-xi__agree', 'data-state': 'differs' }, icon('equal-not', tip ?? 'Different')) : h('span', {}));
+      const table = h('table', { class: 'fx-xi-cmp' },
+        h('thead', {}, h('tr', {}, h('th', {}), h('th', {}, xeroMark()), h('th', {}), h('th', {}, flowMark(), fitIcon(fit)))),
+        h('tbody', {}, facts.map(([glyph, label, left, right, state, tip]) => h('tr', {},
+          h('th', { scope: 'row' }, icon(glyph, label)),
+          h('td', {}, left), h('td', { class: 'fx-xi-cmp__mid' }, mark(state, tip)), h('td', {}, right)))));
+      const primary = canAct ? h('button', { class: 'fx-btn fx-btn--primary', type: 'button', onclick: async () => {
+        primary.disabled = true;
+        try {
+          await act(row.xeroInvoiceId, fit.path, fit.body);
+          ui.toast(fit.kind === 'job' ? 'Made and linked.' : 'Linked.', 'success');
+          rows.splice(at, 1);
+          pick = 0;
+          show();
+        } catch (error) {
+          ui.toast(error.message, 'danger');
+          primary.disabled = false;
+        }
+      } }, icon(fit.kind === 'job' ? 'file-plus-2' : 'link-2'), fit.kind === 'job' ? 'Make + link' : 'Link') : null;
+      host.replaceChildren(
+        bulkStrip(rows),
+        table,
+        h('div', { class: 'fx-xi__acts' },
+          fit.count > 1 ? h('button', { class: 'fx-btn fx-btn--ghost', type: 'button', title: 'Other match', 'aria-label': 'Other match', onclick: () => { pick = (pick + 1) % fit.count; show(); } },
+            icon('arrow-left-right'), `${pick + 1}/${fit.count}`) : null,
+          h('button', { class: 'fx-btn', type: 'button', onclick: () => { at += 1; pick = 0; show(); } }, icon('skip-forward'), 'Skip'),
+          primary));
+    };
+    show();
+  }
+
+  // The bulk shortcut on the card view: every sure one at once, or the list.
+  function bulkStrip(rows) {
+    const sure = rows.filter((r) => r.sure);
+    return h('div', { class: 'fx-xi__bulk' },
+      icon('list-checks'),
+      h('span', { class: 'fx-xi__bulk-text' }, `${rows.length} to check`),
+      canAct && sure.length ? h('button', { class: 'fx-btn fx-btn--sm fx-btn--primary', type: 'button', onclick: async (event) => {
+        event.currentTarget.disabled = true;
+        await each(sure, (row) => { const fit = flowFit(row); return act(row.xeroInvoiceId, fit.path, fit.body); });
+        renderReview();
+      } }, icon('check-check'), `Link ${sure.length} sure`) : null,
+      h('button', { class: 'fx-btn fx-btn--sm', type: 'button', onclick: () => setView('list') },
+        icon('list-checks'), 'Tick many'));
+  }
+
+  // Every one to check, best fit beside it; ticked rows go from the bulk bar.
+  function reviewList(rows) {
+    subtitle.replaceChildren(`${rows.length} to check`);
+    const ticked = new Set();
+    const boxes = new Map();
+    const drawBar = () => {
+      const picked = rows.filter((r) => ticked.has(r.xeroInvoiceId));
+      bulk.draw({
+        count: canAct ? picked.length : 0,
+        onClear: () => { ticked.clear(); for (const b of boxes.values()) b.checked = false; all.checked = false; drawBar(); },
+        groups: [[{ icon: 'link-2', label: 'Link', title: 'Link each to its best match', primary: true, run: async () => {
+          await each(picked, (row) => { const fit = flowFit(row); return act(row.xeroInvoiceId, fit.path, fit.body); });
+          renderReview();
+        } }]],
+      });
+    };
+    const all = h('input', { type: 'checkbox', class: 'fx-tick', 'aria-label': 'Tick all', onchange: () => {
+      for (const r of rows) { if (all.checked) ticked.add(r.xeroInvoiceId); else ticked.delete(r.xeroInvoiceId); }
+      for (const b of boxes.values()) b.checked = all.checked;
+      drawBar();
+    } });
+    const sure = rows.filter((r) => r.sure);
+    host.replaceChildren(
+      h('div', { class: 'fx-xi__bulk' }, icon('list-checks'), h('span', { class: 'fx-xi__bulk-text' }, 'Tick rows, then use the bar below.'),
+        canAct && sure.length ? h('button', { class: 'fx-btn fx-btn--sm', type: 'button', onclick: () => {
+          for (const r of sure) { ticked.add(r.xeroInvoiceId); boxes.get(r.xeroInvoiceId).checked = true; }
+          drawBar();
+        } }, icon('check-check'), `Tick ${sure.length} sure`) : null),
+      h('div', { class: 'fx-xi__scroll' }, h('table', { class: 'fx-table fx-table--rows fx-xi-list' },
+        h('thead', {}, h('tr', {},
+          canAct ? h('th', { class: 'fx-tick-cell' }, all) : null,
+          h('th', { colspan: '4' }, xeroMark()), h('th', { class: 'fx-xi-list__mid' }), h('th', { colspan: '3' }, flowMark()))),
+        h('tbody', {}, rows.map((row) => {
+          const fit = flowFit(row);
+          const box = h('input', { type: 'checkbox', class: 'fx-tick', 'aria-label': `Tick ${row.number}`, onchange: () => {
+            if (box.checked) ticked.add(row.xeroInvoiceId); else ticked.delete(row.xeroInvoiceId);
+            drawBar();
+          } });
+          boxes.set(row.xeroInvoiceId, box);
+          return h('tr', {},
+            canAct ? h('td', { class: 'fx-tick-cell' }, box) : null,
+            h('td', { class: 'fx-num' }, row.number ?? '—'),
+            h('td', {}, row.clientName ?? '—'),
+            h('td', { class: 'fx-dim' }, shortDate(row.issuedOn)),
+            h('td', { class: 'fx-num fx-strong' }, money(row.totalCents)),
+            h('td', { class: 'fx-xi-list__mid' }, row.sure ? icon('check-check', 'Sure') : fitIcon(fit), fit.count > 1 ? h('span', { class: 'fx-dim' }, `${fit.count}`) : null),
+            h('td', { class: 'fx-num' }, fit.name),
+            h('td', { class: 'fx-dim' }, shortDate(fit.date)),
+            h('td', { class: 'fx-num fx-strong' }, money(fit.totalCents)));
+        })))));
+    drawBar();
+  }
+
+  // Every Xero invoice in the copy, newest first, with a search. Ticked rows
+  // that nothing in Flow fits get a Flow invoice from the bulk bar.
+  async function renderHistory() {
+    let q = '';
+    let offset = 0;
+    let shown = [];
+    const ticked = new Set();
+    const search = h('input', { class: 'fx-input fx-xi__search', type: 'search', autocomplete: 'off', placeholder: 'Number, client, Reference or amount', 'aria-label': 'Search Xero history' });
+    const body = h('tbody', {});
+    const all = h('input', { type: 'checkbox', class: 'fx-tick', 'aria-label': 'Tick all shown', onchange: () => {
+      for (const r of shown) { if (all.checked) ticked.add(r.xeroInvoiceId); else ticked.delete(r.xeroInvoiceId); }
+      for (const b of body.querySelectorAll('.fx-tick')) b.checked = all.checked;
+      drawBar();
+    } });
+    const more = h('div', {});
+    const STATE = { linked: ['check', 'In Flow'], invoice_fits: ['receipt', 'A Flow invoice fits'], job_fits: ['briefcase', 'A job fits'], none: ['circle-dashed', 'Not in Flow'] };
+    host.replaceChildren(
+      h('div', { class: 'fx-xi__bulk' }, icon('search'), search),
+      h('div', { class: 'fx-xi__scroll' }, h('table', { class: 'fx-table fx-table--rows fx-xi-list' },
+        h('thead', {}, h('tr', {},
+          canAct ? h('th', { class: 'fx-tick-cell' }, all) : null,
+          h('th', {}, ''), h('th', {}, 'Number'), h('th', {}, 'Client'), h('th', {}, 'Date'), h('th', { class: 'fx-num' }, 'Total'), h('th', {}, xeroMark()), h('th', {}, flowMark()))),
+        body)),
+      more);
+    let timer = null;
+    search.addEventListener('input', () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => { q = search.value; offset = 0; load(); }, 300);
+    });
+    function drawBar() {
+      const picked = shown.filter((r) => ticked.has(r.xeroInvoiceId));
+      const free = picked.filter((r) => r.state === 'none');
+      bulk.draw({
+        count: canAct ? picked.length : 0,
+        onClear: () => { ticked.clear(); for (const b of body.querySelectorAll('.fx-tick')) b.checked = false; all.checked = false; drawBar(); },
+        groups: [[{ icon: 'file-plus-2', label: free.length === picked.length ? 'Make Flow invoices' : `Make ${free.length} Flow invoices`, title: 'Make a Flow invoice for each ticked one not in Flow', primary: true, run: async () => {
+          if (!free.length) { ui.toast('Each ticked one is in Flow or fits something. Use Review.', 'warn'); return; }
+          await each(free, (row) => act(row.xeroInvoiceId, 'make', {}));
+          ticked.clear();
+          offset = 0;
+          await load();
+        } }]],
+      });
+    }
+    const rowOf = (row) => {
+      const [glyph, label] = STATE[row.state];
+      const box = h('input', { type: 'checkbox', class: 'fx-tick', 'aria-label': `Tick ${row.number}`, ...(ticked.has(row.xeroInvoiceId) ? { checked: true } : {}), onchange: () => {
+        if (box.checked) ticked.add(row.xeroInvoiceId); else ticked.delete(row.xeroInvoiceId);
+        drawBar();
+      } });
+      return h('tr', { 'data-state': row.state },
+        canAct ? h('td', { class: 'fx-tick-cell' }, box) : null,
+        h('td', { class: 'fx-xi-list__mid' }, row.state === 'linked' || row.state === 'none' ? icon(glyph, label) : h('a', { href: '/xero-import', onclick: (event) => ui.go(event), 'aria-label': label, title: label }, icon(glyph))),
+        h('td', { class: 'fx-num' }, row.number ?? '—'),
+        h('td', {}, row.clientName ?? '—'),
+        h('td', { class: 'fx-dim' }, shortDate(row.issuedOn)),
+        h('td', { class: 'fx-num fx-strong' }, money(row.totalCents)),
+        h('td', {}, pill(row)),
+        h('td', { class: 'fx-num' }, row.state === 'linked' ? go(`/invoices/${row.link.invoiceId}`, row.link.number ?? 'Draft') : ''));
+    };
+    async function load() {
+      let page;
+      try {
+        page = await read('all', { q, offset, limit: 50 });
+      } catch (error) {
+        body.replaceChildren(h('tr', {}, h('td', { colspan: '8', class: 'fx-empty' }, error.message)));
+        return;
+      }
+      const total = Object.values(page.counts).reduce((a, b) => a + b, 0);
+      subtitle.replaceChildren(h('span', { class: 'fx-xi__count' }, icon('check', 'In Flow'), `${page.counts.linked} / ${total}`));
+      shown = offset === 0 ? page.rows : [...shown, ...page.rows];
+      const rows = page.rows.map(rowOf);
+      if (offset === 0) body.replaceChildren(...(rows.length ? rows : [h('tr', {}, h('td', { colspan: '8', class: 'fx-empty' }, q.trim() ? 'No match.' : 'No Xero invoices copied yet.'))]));
+      else body.append(...rows);
+      const seen = offset + page.rows.length;
+      more.replaceChildren(...(seen < page.total ? [h('button', { class: 'fx-btn fx-btn--ghost', type: 'button', onclick: () => { offset = seen; load(); } }, `Show more (${page.total - seen})`)] : []));
+      drawBar();
+    }
+    await load();
+  }
+}