@arcforgelabs/flow 2026.10.35 → 2026.10.37

package/server/ui/invoicing.js

@@ -6,26 +6,27 @@
 // zero, server/core/money.js). Data comes from /api/invoicing
 // (server/api/invoicing.js). app.js passes in its shared pieces as `ui`.
 import { alertStrip } from '/assets/ui/alerts.js';
+import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
 import { jobChangeBanner } from '/assets/ui/job-change.js';
 
-const STATUS_LABEL = { draft: 'Draft', issued: 'Issued', void: 'Void' };
+const STATUS_LABEL = { draft: 'Draft', issued: 'Finalised', void: 'Void' };
 const STATUS_TONE = { draft: 'info', issued: 'success', void: 'mute' };
 // Drafts (to check), Problem and Ready are views (server/core/sending.js):
 // every draft is in one of them. A person marks a checked draft ready; a
 // saved change keeps it there. An issued invoice that failed to send is a
 // problem.
 // Ready first: it opens by default, as the drafts most often wait there to send.
-const TABS = [['ready', 'Ready'], ['to_check', 'Drafts'], ['problem', 'Problem'], ['issued', 'Issued'], ['void', 'Void']];
+const TABS = [['ready', 'Ready'], ['to_check', 'Drafts'], ['problem', 'Problem'], ['issued', 'Finalised'], ['void', 'Void']];
 const VIEW_LABEL = { problem: 'Problem', ready: 'Ready', sending: 'Sending', to_check: 'Draft' };
 const VIEW_TONE = { problem: 'danger', ready: 'success', sending: 'info', to_check: 'info' };
 const EMPTY = {
   to_check: 'No drafts to check. Press New invoice to start one.',
   problem: 'No problems.',
-  ready: 'Nothing is ready. Tick drafts and press Move to Ready.',
+  ready: 'Nothing is ready. In Drafts, tick drafts and press Ready.',
 };
-// Tabs whose rows can be ticked, and what the ticked rows can do.
-const TICKS = { to_check: true, ready: true };
+// Every tab's rows can be ticked; the bulk bar (bulkActions) says what the
+// ticked rows can do there.
 
 const money = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' });
 export const formatCents = (cents) => money.format((cents ?? 0) / 100);
@@ -46,6 +47,35 @@ export function xeroTag(ui, status) {
     : h('span', { class: 'fx-status', 'data-tone': XERO_TONE[status.state] ?? 'mute' }, status.label);
 }
 
+// The Linked column: one icon for each connected system (linksTo), with a
+// dot for the state of this invoice's link there. An icon with a link opens
+// the record in that system. Accounting icons show on numbered invoices only.
+const LINK_TONE = {
+  not_sent: 'warn', sending: 'warn', not_copied: 'warn', draft: 'success',
+  approved: 'success', part_paid: 'success', paid: 'success', voided: 'mute', deleted: 'mute',
+};
+export function linkIcon(ui, system, { tone = null, title, url = null } = {}) {
+  const { h } = ui;
+  const kids = [h('img', { src: `/assets/ui/logos/${system.id}.svg`, alt: '' }), tone ? h('i', { class: 'fx-link__dot', 'data-tone': tone }) : null];
+  const props = { class: `fx-link${tone ? '' : ' fx-link--none'}`, title, 'aria-label': title };
+  return url
+    ? h('a', { ...props, href: url, target: '_blank', rel: 'noopener', onclick: (event) => event.stopPropagation() }, ...kids)
+    : h('span', props, ...kids);
+}
+
+function workIcon(ui, system, job) {
+  if (job?.sourceSystem !== system.id) return linkIcon(ui, system, { title: `Not linked to ${system.name}` });
+  const ref = job.caseRef ?? job.sourceJobRef;
+  return linkIcon(ui, system, { tone: 'success', title: `${system.name} ${ref}${job.link?.url ? `. Open in ${system.name}.` : ''}`, url: job.link?.url ?? null });
+}
+
+export function accountingIcon(ui, system, status) {
+  const tone = status.finding ? 'danger' : LINK_TONE[status.state] ?? 'mute';
+  const number = status.xero?.number ? ` ${status.xero.number}` : '';
+  const title = `${system.name}${number}: ${status.finding ? status.message : status.label}${status.xero?.url ? ` Open in ${system.name}.` : ''}`;
+  return linkIcon(ui, system, { tone, title, url: status.xero?.url ?? null });
+}
+
 const showField = (field, value) => (['subtotal', 'tax', 'total'].includes(field) && Number.isFinite(value) ? formatCents(value) : String(value ?? '—'));
 
 // Xero's status for some invoices, or an empty map while Xero is off.
@@ -91,18 +121,28 @@ export async function renderInvoiceList(main, ui) {
   const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a number, client or reference', 'aria-label': 'Find an invoice', value: state.q });
   const bar = h('div', { class: 'fx-sendbar', hidden: true });
   const host = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
+  const bulk = bulkBar(ui);
   const context = await flow('/api/invoicing/context').catch(() => ({ canIssue: false }));
   let body = null;
   const openTab = (id) => { state.status = id; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); };
   const alerts = alertStrip(ui, 'invoices', { onTab: openTab });
+  // The tabs, search and send bar stay at the top while the rows scroll up
+  // under them; the bulk bar floats at the foot (ClickUp's layout).
+  const head = h('div', { class: 'fx-listhead' }, h('div', { class: 'fx-toolbar' }, tabs, search), bar);
+  const edge = h('div', { class: 'fx-listhead__edge', 'aria-hidden': 'true' });
   main.append(
     pageHeader('Invoices', {
       actions: [h('a', { class: 'fx-btn fx-btn--primary', href: '/invoices/new', onclick: go }, 'New invoice')],
     }),
     alerts.element,
-    h('div', { class: 'fx-toolbar' }, tabs, search),
-    bar,
-    host);
+    edge,
+    head,
+    host,
+    bulk.element);
+  // A shadow under the head shows once rows scroll under it.
+  if (typeof IntersectionObserver === 'function') {
+    new IntersectionObserver(([entry]) => head.toggleAttribute('data-stuck', !entry.isIntersecting), { rootMargin: `-${head.offsetTop > 0 && window.matchMedia?.('(max-width: 820px)').matches ? 61 : 1}px 0px 0px 0px` }).observe(edge);
+  }
 
   let timer;
   search.addEventListener('input', () => {
@@ -138,33 +178,180 @@ export async function renderInvoiceList(main, ui) {
     const ticked = [...state.ticked];
     const parts = [];
     if (state.status === 'to_check') {
-      parts.push(h('p', { class: 'fx-dim' }, ticked.length ? `${plural(ticked.length, 'draft', 'drafts')} ticked.` : 'Check each draft, tick it, then move it to Ready.'));
-      if (ticked.length) {
-        parts.push(action(`Move ${ticked.length} to Ready`, 'mark-ready', () => ({ invoiceIds: ticked }), (res) => (res.refused.length
-          ? [`${res.marked} ready. ${plural(res.refused.length, 'draft has', 'drafts have')} a problem and moved to Problem.`, 'danger']
-          : [`${plural(res.marked, 'draft', 'drafts')} ready.`, 'success'])));
-      }
+      parts.push(h('p', { class: 'fx-dim' }, 'Check each draft, tick it, then press Ready.'));
     } else if (state.status === 'ready') {
       parts.push(h('p', { class: 'fx-dim' }, sendModeNote(to, body.sendMode)));
       const buttons = [];
-      if (ticked.length) {
-        buttons.push(action(`Move ${ticked.length} to Drafts`, 'mark-not-ready', () => ({ invoiceIds: ticked }),
-          (res) => [`${plural(res.moved, 'invoice', 'invoices')} back in Drafts.`, 'success'], 'ghost'));
-      }
       if (context.canIssue && body.counts.ready > 0) {
         buttons.push(action(to ? `Send all ${body.counts.ready} ready to ${to}` : `Finalise all ${body.counts.ready} ready`, 'send-ready', () => ({ issueDate: localDate() }),
-          (res) => [`${res.issued} issued.${to ? ` They are on the way to ${to}.` : ''}${res.remaining ? ` ${res.remaining} more are ready: press again.` : ''}`, 'success']));
+          (res) => [`${res.issued} finalised.${to ? ` They are on the way to ${to}.` : ''}${res.remaining ? ` ${res.remaining} more are ready: press again.` : ''}`, 'success']));
       }
       if (buttons.length) parts.push(h('div', { class: 'fx-sendbar__actions' }, buttons));
     } else if (state.status === 'problem') {
       const failed = body.invoices.filter((i) => i.status === 'issued').length;
       if (context.canIssue && to && failed > 0) {
-        parts.push(h('p', { class: 'fx-dim' }, `${plural(failed, 'issued invoice', 'issued invoices')} did not reach ${to}. Fix the cause, then send again.`));
+        parts.push(h('p', { class: 'fx-dim' }, `${plural(failed, 'finalised invoice', 'finalised invoices')} did not reach ${to}. Fix the cause, then send again.`));
         parts.push(action('Send again', 'send-again', () => ({}), (res) => [`${res.queued} on the way to ${to} again.`, 'success']));
       }
     }
     bar.replaceChildren(...parts);
     bar.hidden = !parts.length;
+    bulk.draw({ count: ticked.length, onClear: () => setTicks([]), ...bulkActions(ticked) });
+  }
+
+  // Ticks changed from the bar: the rows draw again with the new ticks.
+  function setTicks(ids) {
+    state.ticked = new Set(ids);
+    if (body) draw(body);
+  }
+
+  // A bulk step on the server: on success the ticks clear and the list loads
+  // again; on a failure the ticks stay, so a person can try again.
+  async function post(path, payload, done) {
+    try {
+      const res = await flow(`/api/invoicing/invoices/${path}`, { method: 'POST', body: JSON.stringify(payload) });
+      toast(...done(res));
+      state.ticked.clear();
+      seen.clear();
+      await load();
+      alerts.refresh();
+    } catch (error) {
+      toast(error.message, 'danger');
+    }
+  }
+
+  // What the ticked rows can do on this tab. The bar shows the main ones;
+  // More shows them all, with Selection steps under them.
+  function bulkActions(ticked) {
+    const to = body.sendsTo;
+    const rows = body.invoices.filter((i) => state.ticked.has(i.id));
+    const numbered = ['issued', 'void'].includes(state.status);
+    const status = [];
+    const apply = [];
+    if (state.status === 'ready' && context.canIssue) {
+      status.push({
+        icon: 'circle-check-big', label: 'Finalise', primary: true,
+        title: to ? `Finalise and send to ${to}` : 'Finalise',
+        run: async () => {
+          const ok = await ui.dialog({
+            title: `Finalise ${plural(ticked.length, 'invoice', 'invoices')}?`,
+            body: h('p', {}, `Each one gets the next number and is locked.${to ? ` ${sendModeNote(to, body.sendMode, 'each one')}` : ''}`),
+            confirm: to ? `Finalise and send ${ticked.length}` : `Finalise ${ticked.length}`,
+          });
+          if (!ok) return;
+          await post('send-ready', { issueDate: localDate(), invoiceIds: ticked },
+            (res) => [`${plural(res.issued, 'invoice', 'invoices')} finalised.${to ? ` They are on the way to ${to}.` : ''}${res.remaining ? ` ${res.remaining} more stay in Ready: tick them and press again.` : ''}`, 'success']);
+        },
+      });
+    }
+    if (state.status === 'ready') {
+      status.push({
+        icon: 'undo-2', label: 'Drafts', title: 'Move to Drafts',
+        run: () => post('mark-not-ready', { invoiceIds: ticked }, (res) => [`${plural(res.moved, 'invoice', 'invoices')} back in Drafts.`, 'success']),
+      });
+    }
+    if (state.status === 'to_check') {
+      status.push({
+        icon: 'check-check', label: 'Ready', primary: true, title: 'Move to Ready',
+        run: () => post('mark-ready', { invoiceIds: ticked }, (res) => (res.refused.length
+          ? [`${res.marked} ready. ${plural(res.refused.length, 'draft has', 'drafts have')} a problem and moved to Problem.`, 'danger']
+          : [`${plural(res.marked, 'draft', 'drafts')} ready.`, 'success'])),
+      });
+    }
+    const failed = rows.filter((i) => i.status === 'issued').map((i) => i.id);
+    if (state.status === 'problem' && context.canIssue && to && failed.length) {
+      status.push({
+        icon: 'refresh-cw', label: 'Retry', primary: true, title: `Send again to ${to}`,
+        run: () => post('send-again', { invoiceIds: failed }, (res) => [`${res.queued} on the way to ${to} again.`, 'success']),
+      });
+    }
+    apply.push({
+      icon: 'copy', label: 'Copy', iconOnly: true, title: numbered ? 'Copy numbers' : 'Copy references',
+      run: () => copyLines(rows.map((i) => (numbered ? i.number : i.reference) ?? i.contactName ?? '')),
+    });
+    apply.push({ icon: 'download', label: 'Export', iconOnly: true, title: 'Export CSV', run: () => exportCsv(rows) });
+    if (numbered) apply.push({ icon: 'file-down', label: 'PDFs', iconOnly: true, title: 'Download PDFs', run: () => downloadPdfs(rows) });
+    const danger = [];
+    const voidable = rows.filter((i) => i.status === 'issued');
+    if (state.status === 'issued' && context.canIssue && voidable.length) {
+      danger.push({
+        icon: 'ban', label: 'Void', iconOnly: true, tone: 'danger', title: 'Void',
+        run: () => voidAll(voidable),
+      });
+    }
+    const all = body.invoices.map((i) => i.id);
+    const selection = [
+      { icon: 'list-checks', label: 'Tick all shown', run: () => setTicks(all) },
+      { icon: 'square-check', label: 'Invert ticks', run: () => setTicks(all.filter((id) => !state.ticked.has(id))) },
+      { icon: 'square-x', label: 'Clear ticks', run: () => setTicks([]) },
+    ];
+    return {
+      groups: [status, apply, danger],
+      more: [
+        { head: 'Change status', actions: [...status, ...danger] },
+        { head: 'Apply an action', actions: apply },
+        { head: 'Selection', actions: selection },
+      ],
+    };
+  }
+
+  async function copyLines(lines) {
+    try {
+      await navigator.clipboard.writeText(lines.join('\n'));
+      toast(`${plural(lines.length, 'line', 'lines')} copied.`, 'success');
+    } catch {
+      toast('The browser did not allow a copy.', 'danger');
+    }
+  }
+
+  // The ticked rows as a CSV file, with the columns on the screen.
+  function exportCsv(rows) {
+    const cell = (v) => (/[",\n]/.test(String(v ?? '')) ? `"${String(v).replace(/"/g, '""')}"` : String(v ?? ''));
+    const lines = [['Number', 'Client', 'Reference', 'Date', 'Total', 'Status']]
+      .concat(rows.map((i) => [i.number ?? '', i.contactName ?? '', i.reference ?? '', i.issueDate ?? i.createdAt?.slice(0, 10) ?? '',
+        ((i.totalCents ?? 0) / 100).toFixed(2), i.status === 'void' ? 'Void' : VIEW_LABEL[i.view] ?? STATUS_LABEL[i.status]]));
+    save(new Blob([lines.map((l) => l.map(cell).join(',')).join('\r\n')], { type: 'text/csv' }), `invoices-${state.status}-${localDate()}.csv`);
+    toast(`${plural(rows.length, 'invoice', 'invoices')} exported.`, 'success');
+  }
+
+  async function downloadPdfs(rows) {
+    const token = await window.Clerk?.session?.getToken();
+    let saved = 0;
+    for (const invoice of rows) {
+      try {
+        const res = await fetch(`/api/invoicing/invoices/${invoice.id}/pdf`, { headers: { Authorization: `Bearer ${token}` } });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        save(await res.blob(), `${invoice.number ?? invoice.id}.pdf`);
+        saved += 1;
+      } catch {
+        // The toast below counts the ones that did not save.
+      }
+    }
+    toast(saved === rows.length ? `${plural(saved, 'PDF', 'PDFs')} saved.` : `${saved} of ${rows.length} PDFs saved.`, saved === rows.length ? 'success' : 'danger');
+  }
+
+  // Void, one invoice after the other, as on one invoice's page.
+  async function voidAll(rows) {
+    const ok = await ui.dialog({
+      title: `Void ${plural(rows.length, 'invoice', 'invoices')}?`,
+      body: h('div', {}, h('p', {}, 'Their numbers stay used. A void invoice cannot be finalised again.'),
+        body.sendsTo ? h('p', { class: 'fx-problem' }, `Flow does not change ${body.sendsTo}: void them in ${body.sendsTo} too.`) : null),
+      confirm: `Void ${rows.length}`, tone: 'danger',
+    });
+    if (!ok) return;
+    let done = 0;
+    let error = null;
+    for (const invoice of rows) {
+      try {
+        await flow(`/api/invoicing/invoices/${invoice.id}/void`, { method: 'POST', body: '{}' });
+        done += 1;
+      } catch (e) { error = e; }
+    }
+    toast(error ? `${done} of ${rows.length} void. ${error.message}` : `${plural(done, 'invoice', 'invoices')} void.`, error ? 'danger' : 'success');
+    state.ticked.clear();
+    seen.clear();
+    await load();
+    alerts.refresh();
   }
 
   // A tab switch shows at once: the tab is selected, the last list seen for
@@ -228,12 +415,15 @@ export async function renderInvoiceList(main, ui) {
     saveNav({ tab: state.status, q: state.q, ids: body.invoices.map((i) => i.id) });
     const open = (href) => { saveNav({ ...readNav(), scrollY: window.scrollY }); go(href); };
     const link = (href, label) => h('a', { class: 'fx-strong', href, onclick: (event) => { event.preventDefault(); event.stopPropagation(); open(href); } }, label);
-    const ticks = TICKS[state.status];
     const showProblem = state.status === 'problem';
     const created = ['to_check', 'problem', 'ready'].includes(state.status);
     // An invoice gets its number when it is sent or issued, so only the
-    // Issued and Void tabs show a Number column; the others open on Client.
+    // Finalised and Void tabs show a Number column; the others open on Client.
     const numbered = !created;
+    // With an integration on, every tab has a Linked column (linkIcon).
+    const systems = body.linksTo ?? [];
+    const linked = systems.length > 0;
+    const accountingSystem = systems.find((s) => s.kind === 'accounting') ?? null;
     const boxes = [];
     const tickBox = (invoice) => {
       const box = h('input', {
@@ -247,6 +437,7 @@ export async function renderInvoiceList(main, ui) {
     };
     const all = h('input', {
       type: 'checkbox', class: 'fx-tick', 'aria-label': 'Tick every invoice shown',
+      ...(state.ticked.size && body.invoices.every((i) => state.ticked.has(i.id)) ? { checked: true } : {}),
       onchange: () => {
         for (const invoice of body.invoices) { if (all.checked) state.ticked.add(invoice.id); else state.ticked.delete(invoice.id); }
         for (const box of boxes) box.checked = all.checked;
@@ -256,15 +447,16 @@ export async function renderInvoiceList(main, ui) {
     const statusCells = new Map();
     host.replaceChildren(h('table', { class: 'fx-table fx-table--rows' },
       h('thead', {}, h('tr', {},
-        ticks ? h('th', { class: 'fx-tick-cell' }, all) : null,
+        h('th', { class: 'fx-tick-cell' }, all),
         numbered ? h('th', {}, 'Number') : null, h('th', {}, 'Client'), h('th', {}, showProblem ? 'Problem' : 'Reference'),
-        h('th', {}, created ? 'Created' : 'Issued'), h('th', { class: 'fx-num' }, 'Total'), h('th', {}, 'Status'))),
+        h('th', {}, created ? 'Created' : 'Finalised'), h('th', { class: 'fx-num' }, 'Total'), h('th', {}, 'Status'),
+        linked ? h('th', {}, 'Linked') : null)),
       h('tbody', {}, body.invoices.map((invoice) => {
         const href = `/invoices/${invoice.id}`;
         const first = invoice.problems?.[0];
         const view = invoice.status === 'void' ? null : invoice.view;
         return h('tr', { tabindex: '0', onclick: () => open(href), onkeydown: (event) => { if (event.key === 'Enter') open(href); } },
-          ticks ? h('td', { class: 'fx-tick-cell', onclick: (event) => event.stopPropagation() }, tickBox(invoice)) : null,
+          h('td', { class: 'fx-tick-cell', onclick: (event) => event.stopPropagation() }, tickBox(invoice)),
           numbered ? h('td', {}, link(href, invoice.number ?? 'Draft')) : null,
           h('td', {}, numbered ? (invoice.contactName ?? '—') : link(href, invoice.contactName ?? 'No client')),
           showProblem
@@ -276,17 +468,25 @@ export async function renderInvoiceList(main, ui) {
             const cell = h('td', { class: 'fx-status-cell' }, view
               ? h('span', { class: 'fx-status', 'data-tone': VIEW_TONE[view] }, VIEW_LABEL[view])
               : h('span', { class: 'fx-status', 'data-tone': STATUS_TONE[invoice.status] }, STATUS_LABEL[invoice.status]));
+            if (!linked) statusCells.set(invoice.id, cell);
+            return cell;
+          })(),
+          linked ? (() => {
+            const cell = h('td', { class: 'fx-links' }, systems.filter((s) => s.kind === 'work').map((s) => workIcon(ui, s, invoice.job)));
             statusCells.set(invoice.id, cell);
             return cell;
-          })());
+          })() : null);
       }))));
-    // Issued and void invoices also show Xero's status, from Flow's copy.
-    if (['issued', 'void'].includes(state.status)) {
+    // Finalised and void invoices also show Xero's status, from Flow's copy:
+    // in the Linked column every one gets an icon, so one not in Xero
+    // stands out.
+    if (numbered) {
       const shownBody = body;
       const statuses = await xeroStatuses(ui, context.organisations?.[0]?.id, body.invoices.map((i) => i.id));
       if (shownBody !== body) return;
       for (const [invoiceId, status] of statuses) {
-        if (status.state !== 'not_sent' || status.finding) statusCells.get(invoiceId)?.append(' ', xeroTag(ui, status));
+        if (linked) { if (accountingSystem) statusCells.get(invoiceId)?.append(accountingIcon(ui, accountingSystem, status)); }
+        else if (status.state !== 'not_sent' || status.finding) statusCells.get(invoiceId)?.append(' ', xeroTag(ui, status));
       }
     }
   }
@@ -294,6 +494,18 @@ export async function renderInvoiceList(main, ui) {
   if (returning && back?.scrollY) window.scrollTo(0, back.scrollY);
 }
 
+// A file the browser saves, from a blob made on this page.
+function save(blob, name) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name;
+  document.body.append(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}
+
 // The list an invoice was opened from: its tab, search, invoice ids in order,
 // and scroll. The invoice page's bar steps through it and goes back to it.
 const NAV = 'flow_invoice_nav';
@@ -307,7 +519,7 @@ function saveNav(nav) {
 
 // The bar above one invoice: Back to the list as it was, and the previous and
 // next invoice of that list. An invoice opened from elsewhere (the job board,
-// search, a link) steps through its own tab: Drafts, Ready, Problem, Issued
+// search, a link) steps through its own tab: Drafts, Ready, Problem, Finalised
 // or Void, read once here.
 function navBar(ui, invoice) {
   const { h, go, flow } = ui;
@@ -393,16 +605,46 @@ function totalsBox(ui, { subtotalCents, taxCents, totalCents }) {
     h('dt', { class: 'fx-totals__grand' }, 'Total'), h('dd', { class: 'fx-totals__grand' }, formatCents(totalCents)));
 }
 
-// The job an invoice bills. The case id stays on the record, not on screen.
-function jobCard(ui, job) {
+// The Linked card: this invoice's link in each connected system (linksTo).
+// A work system row names the job's order and opens it there; the
+// accounting row gives the number and state there (from Flow's copy). A
+// system with no link shows a dashed row. With no system on, the card holds
+// the job's facts only.
+function linkedCard(ui, invoice, accountingStatus = null) {
   const { h } = ui;
-  if (!job) return null;
+  const job = invoice?.job ?? null;
+  const systems = invoice?.linksTo ?? [];
+  if (!job && !systems.length) return null;
+  const facts = job && (job.practitioner || job.shippedOn) ? h('dl', { class: 'fx-facts' },
+    job.practitioner ? [h('dt', {}, 'Practitioner'), h('dd', {}, job.practitioner)] : null,
+    job.shippedOn ? [h('dt', {}, 'Shipped'), h('dd', {}, showDate(job.shippedOn))] : null) : null;
+  const row = (system, { tone = null, ref = null, state = null, url = null, none = null }) => h('div', { class: 'fx-linked__row' },
+    linkIcon(ui, system, { tone, title: none ?? `${system.name}${ref ? ` ${ref}` : ''}` }),
+    h('span', { class: 'fx-strong' }, system.name),
+    ref ? h('span', { class: 'fx-linked__ref' }, ref) : null,
+    state ? h('span', { class: 'fx-status', 'data-tone': tone ?? 'mute' }, state) : null,
+    none ? h('span', { class: 'fx-dim' }, none) : null,
+    url ? h('a', { class: 'fx-linked__open', href: url, target: '_blank', rel: 'noopener', title: `Open in ${system.name}` }, 'Open ↗') : null);
+  const rows = systems.map((system) => {
+    if (system.kind === 'work') {
+      return job?.sourceSystem === system.id
+        ? row(system, { tone: 'success', ref: job.caseRef ?? job.sourceJobRef, url: job.link?.url ?? null })
+        : row(system, { none: 'No job linked' });
+    }
+    const status = accountingStatus;
+    if (!status || (status.state === 'not_sent' && !status.finding)) {
+      return row(system, { none: invoice?.status === 'draft' ? 'Goes there when sent' : `Not in ${system.name} yet` });
+    }
+    const tone = status.finding ? 'danger' : LINK_TONE[status.state] ?? 'mute';
+    const state = status.finding ? 'Out of sync' : status.label.replace(` in ${system.name}`, '');
+    return row(system, { tone, ref: status.xero?.number ?? null, state, url: status.xero?.url ?? null });
+  });
+  const workRows = systems.some((s) => s.kind === 'work');
   return h('section', { class: 'fx-card fx-side-card' },
-    h('h3', { class: 'fx-label' }, 'Job'),
-    h('dl', { class: 'fx-facts' },
-      job.practitioner ? [h('dt', {}, 'Practitioner'), h('dd', {}, job.practitioner)] : null,
-      job.shippedOn ? [h('dt', {}, 'Shipped'), h('dd', {}, showDate(job.shippedOn))] : null,
-      h('dt', {}, 'From'), h('dd', {}, job.sourceSystem === 'seazona' ? 'Seazona' : job.sourceSystem)));
+    h('h3', { class: 'fx-label' }, 'Linked'),
+    !workRows && job ? h('p', { class: 'fx-dim' }, `Job from ${job.systemName ?? job.sourceSystem}`) : null,
+    h('div', { class: 'fx-linked' }, rows),
+    facts);
 }
 
 // A draft, or a new invoice before its first save.
@@ -754,7 +996,7 @@ function draftView(invoice, ui, context, redraw) {
           h('div', { class: 'fx-lines__foot' },
             h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', onclick: () => { lines.push({ description: '', quantity: 1, unitAmountCents: null, taxCode: 'GST', priceItemId: null }); drawLines(); } }, '+ Add line'),
             totalsHost))),
-      h('aside', { class: 'fx-invoice__aside' }, statusCard, jobCard(ui, invoice?.job))),
+      h('aside', { class: 'fx-invoice__aside' }, statusCard, linkedCard(ui, invoice))),
   ].map((part) => {
     // Any edit on the page shows Save changes; undoing it hides it again.
     for (const kind of ['input', 'change', 'click']) part?.addEventListener?.(kind, () => setTimeout(watchChanges));
@@ -813,12 +1055,14 @@ function issuedView(invoice, ui, context, redraw) {
   };
   const organisationId = context.organisations?.[0]?.id;
   const xeroHost = h('div');
+  const linkedHost = h('div', {}, linkedCard(ui, invoice) ?? '');
   let xeroStatus = null;
   const send = invoice.status === 'issued' && context.canIssue ? sendToXero(invoice, ui, context) : null;
   const loadXero = async () => {
     if (!context.xero) return;
     xeroStatus = (await xeroStatuses(ui, organisationId, [invoice.id])).get(invoice.id) ?? null;
     xeroHost.replaceChildren(xeroCard(invoice, ui, context, xeroStatus, loadXero) ?? '');
+    linkedHost.replaceChildren(linkedCard(ui, invoice, xeroStatus) ?? '');
     if (xeroStatus && xeroStatus.state !== 'not_sent') showSent(send);
   };
   loadXero();
@@ -826,7 +1070,7 @@ function issuedView(invoice, ui, context, redraw) {
   const voidBody = () => {
     const live = xeroStatus?.xero && !['VOIDED', 'DELETED'].includes(xeroStatus.xero.status);
     return h('div', {},
-      h('p', {}, 'The number stays used. A void invoice cannot be issued again.'),
+      h('p', {}, 'The number stays used. A void invoice cannot be finalised again.'),
       live ? h('p', { class: 'fx-problem' }, `Xero still holds it as ${xeroStatus.label.replace(/ in Xero$/, '').toLowerCase()}${xeroStatus.xero.number ? ` (${xeroStatus.xero.number})` : ''}. Flow does not change Xero: void it in Xero too.`) : null);
   };
   const actions = invoice.status === 'issued' && context.canIssue ? [
@@ -843,7 +1087,7 @@ function issuedView(invoice, ui, context, redraw) {
         h('div', { class: 'fx-row' },
           h('h1', { class: 'fx-title' }, invoice.number),
           h('span', { class: 'fx-status', 'data-tone': STATUS_TONE[invoice.status] }, STATUS_LABEL[invoice.status])),
-        h('p', { class: 'fx-ph__sub' }, `${invoice.contact?.name ?? ''} · issued ${showDate(invoice.issueDate)}`)),
+        h('p', { class: 'fx-ph__sub' }, `${invoice.contact?.name ?? ''} · finalised ${showDate(invoice.issueDate)}`)),
       h('div', { class: 'fx-ph__actions' }, actions, previewButton(ui, invoice.id), send)),
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
@@ -851,7 +1095,7 @@ function issuedView(invoice, ui, context, redraw) {
           h('dl', { class: 'fx-doc__meta' },
             h('div', {}, h('dt', { class: 'fx-label' }, 'Bill to'), h('dd', {}, invoice.contact?.name ?? '—', invoice.contact?.email ? h('span', { class: 'fx-dim' }, invoice.contact.email) : null)),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Reference'), h('dd', {}, invoice.reference ?? '—')),
-            h('div', {}, h('dt', { class: 'fx-label' }, 'Issued'), h('dd', {}, showDate(invoice.issueDate))),
+            h('div', {}, h('dt', { class: 'fx-label' }, 'Finalised'), h('dd', {}, showDate(invoice.issueDate))),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Due'), h('dd', {}, showDate(invoice.dueDate)))),
           h('table', { class: 'fx-lines__table fx-lines__table--read' },
             h('thead', {}, h('tr', {}, h('th', {}, 'Description'), h('th', { class: 'fx-num' }, 'Qty'), h('th', { class: 'fx-num' }, 'Unit price'), h('th', {}, 'Tax'), h('th', { class: 'fx-num' }, 'Amount'))),
@@ -863,12 +1107,12 @@ function issuedView(invoice, ui, context, redraw) {
               h('td', { class: 'fx-num fx-strong' }, formatCents(line.lineAmountCents)))))),
           h('div', { class: 'fx-lines__foot' }, h('span'), totalsBox(ui, invoice)))),
       h('aside', { class: 'fx-invoice__aside' },
+        linkedHost,
         xeroHost,
-        jobCard(ui, invoice.job),
         invoice.versions?.length ? h('section', { class: 'fx-card fx-side-card' },
           h('h3', { class: 'fx-label' }, 'History'),
           h('ol', { class: 'fx-timeline' }, invoice.versions.map((v) => h('li', {},
-            h('span', { class: 'fx-strong' }, v.version === 1 ? 'Issued' : `Reissued (version ${v.version})`),
+            h('span', { class: 'fx-strong' }, v.version === 1 ? 'Finalised' : `Revised (version ${v.version})`),
             h('span', { class: 'fx-dim' }, new Date(v.issuedAt).toLocaleString('en-AU', { dateStyle: 'medium', timeStyle: 'short' })))))) : null)),
   ];
 }
@@ -878,7 +1122,9 @@ function issuedView(invoice, ui, context, redraw) {
 // never writes to Xero: a person fixes the difference where they choose.
 function xeroCard(invoice, ui, context, status, reload) {
   const { h, flow, toast } = ui;
-  if (!status || (status.state === 'not_sent' && !status.finding)) return null;
+  // The Linked card shows Xero's number and state; this card shows only a
+  // difference to resolve.
+  if (!status?.finding) return null;
   const rows = status.differences.map((d) => h('tr', {},
     h('td', {}, FIELD_LABEL[d.field] ?? d.field),
     h('td', { class: 'fx-num' }, showField(d.field, d.flow)),