@arcforgelabs/flow 2026.10.30 → 2026.10.32-beta.1

package/server/ui/invoicing.js

@@ -5,6 +5,7 @@
 // are a preview with the same rule (GST 10% per line, rounded half away from
 // 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';
 
 const STATUS_LABEL = { draft: 'Draft', issued: 'Issued', void: 'Void' };
 const STATUS_TONE = { draft: 'info', issued: 'success', void: 'mute' };
@@ -12,7 +13,8 @@ const STATUS_TONE = { draft: 'info', issued: 'success', void: 'mute' };
 // every draft is in one of them. A person marks a checked draft ready; any
 // later change sends it back. An issued invoice that failed to send is a
 // problem.
-const TABS = [['to_check', 'Drafts'], ['problem', 'Problem'], ['ready', 'Ready'], ['issued', 'Issued'], ['void', 'Void']];
+// 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 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 = {
@@ -26,6 +28,31 @@ const TICKS = { to_check: true, ready: true };
 const money = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' });
 export const formatCents = (cents) => money.format((cents ?? 0) / 100);
 
+// Xero's status of an issued invoice, from Flow's copy of Xero (issue #132).
+// A finding (a difference, or a void on one side only) shows as Out of sync.
+const XERO_TONE = {
+  not_sent: 'mute', sending: 'info', not_copied: 'info', draft: 'info',
+  approved: 'success', part_paid: 'success', paid: 'success', voided: 'mute', deleted: 'mute',
+};
+const FIELD_LABEL = { contact: 'Client', subtotal: 'Subtotal', tax: 'GST', total: 'Total', 'line count': 'Lines', items: 'Items', date: 'Date' };
+
+export function xeroTag(ui, status) {
+  const { h } = ui;
+  if (!status) return null;
+  return status.finding
+    ? h('span', { class: 'fx-status', 'data-tone': 'danger', title: status.message }, 'Out of sync with Xero')
+    : h('span', { class: 'fx-status', 'data-tone': XERO_TONE[status.state] ?? 'mute' }, status.label);
+}
+
+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.
+async function xeroStatuses(ui, organisationId, invoiceIds) {
+  if (!organisationId || !invoiceIds.length) return new Map();
+  const res = await ui.flow('/api/xero/invoices/status', { method: 'POST', body: JSON.stringify({ organisationId, invoiceIds }) }).catch(() => null);
+  return new Map((res?.invoices ?? []).map((s) => [s.invoiceId, s]));
+}
+
 function gstCents(lineAmountCents) {
   const sign = Math.sign(lineAmountCents);
   const abs = Math.abs(lineAmountCents) * 1000;
@@ -48,22 +75,40 @@ function localDate(date = new Date()) {
 
 const showDate = (iso) => (iso ? new Date(`${iso}T00:00:00`).toLocaleDateString('en-AU', { day: 'numeric', month: 'short', year: 'numeric' }) : '—');
 
+// What happens to a ready invoice in the accounting system, one fact per
+// sentence. It follows the integration's settings: its connection, whether it
+// takes writes, and the send mode on its page.
+export function sendModeNote(to, sendMode) {
+  if (!to) return 'No accounting system is on. Flow keeps each invoice here only.';
+  if (sendMode && !sendMode.connected) return `${to} is not connected. Connect it in Integrations before you send.`;
+  if (sendMode && !sendMode.writesAllowed) return `${to} does not take invoices from Flow yet. Turn this on in Integrations, ${to}.`;
+  const text = sendMode?.mode === 'approve_and_email'
+    ? [`Flow sends each invoice to ${to} as approved.`, `${to} emails it to the customer at once.`]
+    : [`Flow sends each invoice to ${to} as a draft.`, `You approve and send it in ${to}.`];
+  const others = sendMode?.otherCustomers ?? 0;
+  if (others) text.push(`${others} ${others === 1 ? 'customer has' : 'customers have'} a different setting.`);
+  return text.join(' ');
+}
+
 // ── The list ───────────────────────────────────────────────────────────────
 
 export async function renderInvoiceList(main, ui) {
   const { h, flow, pageHeader, notice, go, toast } = ui;
   const saved = sessionStorage.getItem('flow_invoice_tab');
-  const state = { status: TABS.some(([id]) => id === saved) ? saved : 'to_check', q: '', ticked: new Set() };
+  const state = { status: TABS.some(([id]) => id === saved) ? saved : 'ready', q: '', ticked: new Set() };
   const tabs = h('div', { class: 'fx-tabs', role: 'tablist' });
   const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a number, client or reference', 'aria-label': 'Find an invoice' });
   const bar = h('div', { class: 'fx-sendbar', hidden: true });
   const host = h('div', { class: 'fx-panel' }, h('div', { class: 'fx-skeleton' }));
   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 });
   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);
@@ -85,6 +130,7 @@ export async function renderInvoiceList(main, ui) {
           toast(...done(res));
           state.ticked.clear();
           await load();
+          alerts.refresh();
         } catch (error) {
           toast(error.message, 'danger');
           el.disabled = false;
@@ -107,7 +153,7 @@ export async function renderInvoiceList(main, ui) {
           : [`${plural(res.marked, 'draft', 'drafts')} ready.`, 'success'])));
       }
     } else if (state.status === 'ready') {
-      parts.push(h('p', { class: 'fx-dim' }, to ? `Each invoice is issued, then goes to ${to}.` : 'Each invoice is issued. No accounting system is on.'));
+      parts.push(h('p', { class: 'fx-dim' }, sendModeNote(to, body.sendMode)));
       const buttons = [];
       if (ticked.length) {
         buttons.push(action(`Back to drafts (${ticked.length})`, 'mark-not-ready', () => ({ invoiceIds: ticked }),
@@ -144,7 +190,7 @@ export async function renderInvoiceList(main, ui) {
       role: 'tab',
       'aria-selected': String(state.status === id),
       ...(id === 'problem' && body.counts?.problem ? { 'data-tone': 'danger' } : {}),
-      onclick: () => { state.status = id; state.ticked.clear(); sessionStorage.setItem('flow_invoice_tab', id); load(); },
+      onclick: () => openTab(id),
     }, label, h('span', { class: 'fx-tabs__count' }, String(body.counts?.[id] ?? 0)))));
     drawBar();
     if (!body.invoices.length) {
@@ -175,6 +221,7 @@ export async function renderInvoiceList(main, ui) {
         drawBar();
       },
     });
+    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,
@@ -193,10 +240,23 @@ export async function renderInvoiceList(main, ui) {
             : h('td', { class: 'fx-dim' }, invoice.job?.caseRef ?? invoice.reference ?? '—'),
           h('td', { class: 'fx-dim' }, showDate(invoice.issueDate ?? invoice.createdAt?.slice(0, 10))),
           h('td', { class: 'fx-num fx-strong' }, formatCents(invoice.totalCents)),
-          h('td', {}, 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])));
+          (() => {
+            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]));
+            statusCells.set(invoice.id, cell);
+            return cell;
+          })());
       }))));
+    // Issued and void invoices also show Xero's status, from Flow's copy.
+    if (['issued', 'void'].includes(state.status)) {
+      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));
+      }
+    }
   }
   await load();
 }
@@ -516,10 +576,26 @@ function issuedView(invoice, ui, context, redraw) {
       toast(error.message, 'danger');
     }
   };
+  const organisationId = context.organisations?.[0]?.id;
+  const xeroHost = h('div');
+  let xeroStatus = 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) ?? '');
+  };
+  loadXero();
+  // Voiding in Flow never changes Xero: say so while Xero still holds it live.
+  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.'),
+      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 ? [
     h('button', {
       class: 'fx-btn fx-btn--ghost fx-btn--danger', type: 'button',
-      onclick: () => act('void', `${invoice.number} is void.`, { title: `Void ${invoice.number}?`, body: h('p', {}, 'The number stays used. A void invoice cannot be issued again.'), confirm: 'Void', tone: 'danger' }),
+      onclick: () => act('void', `${invoice.number} is void.`, { title: `Void ${invoice.number}?`, body: voidBody(), confirm: 'Void', tone: 'danger' }),
     }, 'Void'),
     h('button', { class: 'fx-btn', type: 'button', onclick: () => act('revise', `${invoice.number} is a draft again.`) }, 'Revise'),
     sendToXero(invoice, ui, context),
@@ -551,6 +627,7 @@ 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' },
+        xeroHost,
         jobCard(ui, invoice.job),
         invoice.versions?.length ? h('section', { class: 'fx-card fx-side-card' },
           h('h3', { class: 'fx-label' }, 'History'),
@@ -560,6 +637,42 @@ function issuedView(invoice, ui, context, redraw) {
   ];
 }
 
+// Xero's copy of this invoice: its status, any difference from what Flow
+// sent, and Mark resolved, which reads Xero's changes and checks again. It
+// 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;
+  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)),
+    h('td', { class: 'fx-num' }, showField(d.field, d.xero))));
+  const resolve = status.finding && context.canIssue ? h('button', {
+    class: 'fx-btn fx-btn--sm', type: 'button',
+    onclick: async () => {
+      resolve.disabled = true;
+      try {
+        const res = await flow(`/api/xero/invoices/${invoice.id}/recheck`, { method: 'POST', body: JSON.stringify({ organisationId: context.organisations[0].id }) });
+        toast(res.resolved ? 'Flow and Xero agree now.' : 'Still different. Fix it in Xero or in Flow, then try again.', res.resolved ? 'success' : 'danger');
+        await reload();
+      } catch (error) {
+        toast(error.message, 'danger');
+        resolve.disabled = false;
+      }
+    },
+  }, 'Mark resolved') : null;
+  return h('section', { class: 'fx-card fx-side-card' },
+    h('h3', { class: 'fx-label' }, 'Xero'),
+    h('div', { class: 'fx-row' }, xeroTag(ui, status), status.xero?.number ? h('span', { class: 'fx-dim' }, status.xero.number) : null),
+    status.finding ? h('p', { class: 'fx-problem' }, status.message) : null,
+    rows.length ? h('table', { class: 'fx-table' },
+      h('thead', {}, h('tr', {}, h('th', {}, ''), h('th', { class: 'fx-num' }, 'Flow sent'), h('th', { class: 'fx-num' }, 'Xero now'))),
+      h('tbody', {}, rows)) : null,
+    h('div', { class: 'fx-row' },
+      status.xero?.url ? h('a', { class: 'fx-btn fx-btn--sm fx-btn--ghost', href: status.xero.url, target: '_blank', rel: 'noopener' }, 'Open in Xero') : null,
+      resolve));
+}
+
 // Send to Xero (POST /api/xero/invoices/push). The customer's send mode
 // (Settings, Invoicing) decides what Xero gets: a draft that a person approves
 // there, or an approved invoice that Xero emails to the customer.

package/server/ui/line-mappings.js

@@ -28,8 +28,9 @@ export function lineMappingSection(ui) {
       return;
     }
     const waiting = labels.filter((l) => l.unmapped > 0);
+    const listLink = row('Price list', 'Your codes and prices, and their links.', h('a', { class: 'fx-btn fx-btn--ghost fx-btn--sm', href: '/price-list', onclick: (event) => ui.go(event) }, 'Open'));
     if (!waiting.length) {
-      body.replaceChildren(row('Every line has a price code', 'Lines from Seazona find their price item by themselves.', h('span', { class: 'fx-dim' }, '')));
+      body.replaceChildren(row('Every line has a price code', 'Lines from Seazona find their price item by themselves.', h('span', { class: 'fx-dim' }, '')), listLink);
       return;
     }
     const options = [h('option', { value: '' }, 'Choose a price item…'),
@@ -53,7 +54,7 @@ export function lineMappingSection(ui) {
       });
       const lines = label.unmapped === 1 ? '1 line waits' : `${label.unmapped} lines wait`;
       return row(label.sample, `${money(label.unitAmountCents)} · ${lines}`, select);
-    }));
+    }), listLink);
   }
   load();
   return section;

package/server/ui/price-list.js

@@ -0,0 +1,247 @@
+// Settings, Price list (/price-list; server/core/price-list.js,
+// docs/PRICE_LIST.md). Flow's own codes and prices, which work with no
+// integration connected. Each row is one code: its name, its price and tax,
+// and a chip for each connected system (Xero, Seazona) that says whether that
+// system's record agrees. Edit opens a dialog with the code's fields, its
+// links and, when something differs, Mark resolved. Below the list, each
+// system's records that link to no code, with a menu to link each one, and
+// the line price setting. Everyone can read it; an owner or admin changes it.
+// The caller passes in app.js's shared pieces as `ui`.
+import { alertStrip } from '/assets/ui/alerts.js';
+
+const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/PRICE_LIST.md';
+const TAX_LABELS = { GST: 'GST', GST_FREE: 'GST free' };
+const LINE_PRICES = [
+  { value: 'work', label: 'Work system amount' },
+  { value: 'list', label: 'Price list' },
+];
+
+const money = (cents) => (cents === null || cents === undefined ? '' : `$${(cents / 100).toFixed(2)}`);
+const toCents = (text) => {
+  const value = Number(String(text ?? '').replace(/[$,\s]/g, ''));
+  return Number.isFinite(value) ? Math.round(value * 100) : NaN;
+};
+
+export async function renderPriceList(main, ui) {
+  const { h, flow, toast, notice, dialog, pageHeader, me } = ui;
+  const disabled = !['owner', 'admin'].includes(me?.person.role);
+  const host = h('div', { class: 'fx-card', style: { padding: '8px 20px 16px' } }, h('div', { class: 'fx-skeleton' }));
+  const addButton = h('button', { class: 'fx-btn fx-btn--primary', type: 'button', disabled }, 'Add code');
+  const checkButton = h('button', { class: 'fx-btn fx-btn--ghost', type: 'button', disabled }, 'Check prices');
+  const alerts = alertStrip(ui, 'price-list');
+  main.append(pageHeader('Price list', { subtitle: 'The codes and prices that Flow puts on invoice lines.', actions: [checkButton, addButton] }), alerts.element, host);
+
+  let data = null;
+  let query = '';
+  const systemName = (id) => data.systems.find((s) => s.id === id)?.name ?? id;
+
+  async function send(path, method, payload, done = 'Saved.') {
+    try {
+      const body = await flow(path, { method, ...(payload ? { body: JSON.stringify(payload) } : {}) });
+      if (done) toast(done, 'success');
+      return body;
+    } catch (error) {
+      toast(error.message, 'danger');
+      return null;
+    }
+  }
+
+  const row = (name, hint, control) => h('div', { class: 'fx-set__row' },
+    h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, name), hint),
+    h('div', { class: 'fx-set__control fx-rule__controls' }, control));
+
+  // One chip for each connected system: agrees, differs (with its price), or
+  // has no record for this code.
+  function chips(item) {
+    return data.systems.map((system) => {
+      const mine = item.findings.filter((f) => f.system === system.id);
+      const linked = item.links.some((l) => l.system === system.id);
+      if (mine.some((f) => f.kind === 'not_linked')) return h('span', { class: 'fx-status', 'data-tone': 'warn' }, `Not in ${system.name}`);
+      if (!linked) return null;
+      const price = mine.find((f) => f.kind === 'price');
+      if (price) return h('span', { class: 'fx-status', 'data-tone': 'danger' }, `${system.name} ${money(price.other)}`);
+      if (mine.some((f) => f.kind === 'tax')) return h('span', { class: 'fx-status', 'data-tone': 'danger' }, `${system.name} tax`);
+      if (mine.some((f) => f.kind === 'missing')) return h('span', { class: 'fx-status', 'data-tone': 'danger' }, `${system.name} removed`);
+      return h('span', { class: 'fx-status', 'data-tone': 'success' }, system.name);
+    }).filter(Boolean);
+  }
+
+  const findingText = (f) => {
+    const name = systemName(f.system);
+    if (f.kind === 'price') return `${name} price is ${money(f.other)}. Flow price is ${money(f.flow)}.`;
+    if (f.kind === 'tax') return `${name} tax is ${TAX_LABELS[f.other] ?? f.other}. Flow tax is ${TAX_LABELS[f.flow] ?? f.flow}.`;
+    if (f.kind === 'missing') return `${name} no longer has ${f.externalCode ?? 'the linked record'}.`;
+    return `${name} has no item with this code.`;
+  };
+
+  // The dialog for a new code (item null) or an existing one.
+  async function edit(item, draft = item) {
+    const field = (label, control) => h('div', { class: 'fx-field' }, h('span', { class: 'fx-label' }, label), control);
+    const code = h('input', { class: 'fx-input', required: true, maxlength: '30', value: draft?.code ?? '', 'aria-label': 'Code' });
+    const name = h('input', { class: 'fx-input', required: true, maxlength: '200', value: draft?.name ?? '', 'aria-label': 'Name' });
+    const price = h('input', { class: 'fx-input', required: true, inputmode: 'decimal', value: draft ? (draft.unitAmountCents / 100).toFixed(2) : '', 'aria-label': 'Price' });
+    const tax = h('select', { class: 'fx-select', 'aria-label': 'Tax' }, Object.entries(TAX_LABELS).map(([value, label]) => h('option', { value }, label)));
+    tax.value = draft?.taxCode ?? 'GST';
+    const account = h('input', { class: 'fx-input', maxlength: '20', value: draft?.accountCode ?? '', 'aria-label': 'Account code', placeholder: 'Optional' });
+    const description = h('input', { class: 'fx-input', maxlength: '1000', value: draft?.description ?? '', 'aria-label': 'Invoice text', placeholder: 'Optional' });
+
+    let action = null;
+    const button = (label, value, extra = '') => {
+      const b = h('button', { class: `fx-btn fx-btn--ghost fx-btn--sm ${extra}`, type: 'button' }, label);
+      b.addEventListener('click', () => { action = value; b.closest('dialog').close(); });
+      return b;
+    };
+    const parts = [
+      field('Code', code), field('Name', name), field('Price, before tax', price), field('Tax', tax),
+      field('Invoice text', description), field('Account code', account),
+    ];
+    if (item) {
+      const findings = item.findings ?? [];
+      if (findings.length) {
+        parts.push(field('Differences', h('div', { class: 'fx-fields' },
+          ...findings.map((f) => h('span', { class: 'fx-dim' }, findingText(f))),
+          button('Mark resolved', { kind: 'resolve' }))));
+      }
+      if (item.links.length) {
+        parts.push(field('Links', h('div', { class: 'fx-fields' }, ...item.links.map((l) => h('div', { class: 'fx-rule__value' },
+          h('span', { class: 'fx-dim' }, `${systemName(l.system)} · ${l.externalCode ?? l.externalId}${l.record ? ` · ${l.record.name ?? ''} · ${money(l.record.unitAmountCents)}` : ''}`),
+          button('Remove', { kind: 'unlink', id: l.id }))))));
+      }
+      parts.push(button(item.archivedAt ? 'Bring back' : 'Archive code', { kind: 'archive', archived: !item.archivedAt }, item.archivedAt ? '' : 'fx-rule__delete'));
+    }
+    const ok = await dialog({ title: item ? `Edit ${item.code}` : 'New code', body: h('div', { class: 'fx-fields fx-rule__dialog' }, ...parts), confirm: item ? 'Save' : 'Add code' });
+
+    if (action?.kind === 'resolve') {
+      const body = await send(`/api/invoicing/price-items/${item.id}/resolve`, 'POST', {}, null);
+      if (body) toast(body.state === 'agree' ? 'Prices agree now.' : 'Marked resolved.', 'success');
+      alerts.refresh();
+      return load();
+    }
+    if (action?.kind === 'unlink') {
+      if (await send(`/api/invoicing/price-links/${action.id}`, 'DELETE', null, 'Link removed.')) return load();
+      return null;
+    }
+    if (action?.kind === 'archive') {
+      if (await send(`/api/invoicing/price-items/${item.id}/archive`, 'POST', { archived: action.archived }, action.archived ? 'Archived.' : 'Brought back.')) return load();
+      return null;
+    }
+    if (!ok) return null;
+    const payload = {
+      code: code.value, name: name.value, unitAmountCents: toCents(price.value), taxCode: tax.value,
+      accountCode: account.value || null, description: description.value || null,
+    };
+    if (!Number.isInteger(payload.unitAmountCents) || payload.unitAmountCents < 0) {
+      toast('Write the price as a number, for example 55.00.', 'danger');
+      return edit(item, { ...payload, unitAmountCents: 0 });
+    }
+    const body = item
+      ? await send(`/api/invoicing/price-items/${item.id}`, 'PUT', payload)
+      : await send('/api/invoicing/price-items', 'POST', payload);
+    if (!body) return edit(item, payload);
+    return load();
+  }
+
+  // A system's record that links to no code: a menu of codes to link it to,
+  // or "New code" to add it to the list as it is.
+  function unlinkedRow(system, record, items) {
+    const select = h('select', { class: 'fx-select fx-price__link', 'aria-label': `Code for ${record.name ?? record.code}`, disabled },
+      h('option', { value: '' }, 'Link to a code…'),
+      h('option', { value: 'new' }, 'Add as a new code'),
+      ...items.filter((i) => !i.archivedAt).map((i) => h('option', { value: i.id }, `${i.code} · ${i.name} · ${money(i.unitAmountCents)}`)));
+    select.addEventListener('change', async () => {
+      if (!select.value) return;
+      select.disabled = true;
+      let itemId = select.value;
+      if (itemId === 'new') {
+        const made = await send('/api/invoicing/price-items', 'POST', {
+          code: record.code || record.id, name: record.name || record.code || record.id,
+          unitAmountCents: record.unitAmountCents ?? 0, taxCode: record.taxCode ?? 'GST',
+        }, null);
+        itemId = made?.item.id ?? null;
+      }
+      if (itemId && await send(`/api/invoicing/price-items/${itemId}/links`, 'POST', { system: system.id, externalId: record.id }, 'Linked. Jobs with this item update in a few minutes.')) return load();
+      select.disabled = disabled;
+      select.value = '';
+      return null;
+    });
+    const hint = [record.code, money(record.unitAmountCents), TAX_LABELS[record.taxCode]].filter(Boolean).join(' · ');
+    return row(record.name ?? record.code ?? record.id, h('span', { class: 'fx-set__hint' }, hint), select);
+  }
+
+  async function linePriceRow() {
+    const select = h('select', { class: 'fx-select', 'aria-label': 'Line price from', disabled }, LINE_PRICES.map((p) => h('option', { value: p.value }, p.label)));
+    try {
+      const { automations } = await flow('/api/invoicing/automations');
+      select.value = automations.find((a) => a.key === 'map_lines')?.config.linePrice ?? 'work';
+    } catch {
+      select.value = 'work';
+    }
+    let saved = select.value;
+    select.addEventListener('change', async () => {
+      select.disabled = true;
+      if (await send('/api/invoicing/automations/map_lines', 'PUT', { config: { linePrice: select.value } })) saved = select.value;
+      else select.value = saved;
+      select.disabled = disabled;
+    });
+    return row('Line price from', h('span', { class: 'fx-set__hint' }, 'Where an invoice line takes its price.'), select);
+  }
+
+  function draw() {
+    const words = query.trim().toLowerCase();
+    const shown = data.items.filter((i) => !words || `${i.code} ${i.name}`.toLowerCase().includes(words));
+    const live = shown.filter((i) => !i.archivedAt);
+    const archived = shown.filter((i) => i.archivedAt);
+    const itemRow = (item) => {
+      const editButton = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', disabled }, 'Edit');
+      editButton.addEventListener('click', () => edit(item));
+      const hint = h('span', { class: 'fx-set__hint' }, `${money(item.unitAmountCents)} · ${TAX_LABELS[item.taxCode] ?? item.taxCode}`);
+      return row(`${item.code} · ${item.name}`, h('div', { class: 'fx-price__hint' }, hint, ...chips(item)), editButton);
+    };
+    const search = h('input', { class: 'fx-input fx-search', type: 'search', placeholder: 'Find a code', value: query, 'aria-label': 'Find a code' });
+    search.addEventListener('input', () => { query = search.value; draw(); search.focus(); search.setSelectionRange(query.length, query.length); });
+    const systems = data.systems.length
+      ? h('div', { class: 'fx-price__systems' }, ...data.systems.map((s) => h('span', { class: 'fx-chip fx-chip--static' }, `${s.name} · ${s.count} ${s.kind === 'accounting' ? 'items' : 'products'}`)))
+      : h('p', { class: 'fx-dim' }, 'No integration has a price list. Flow uses this list alone.');
+    const sections = [
+      disabled ? notice('Only an owner or admin can change these.', 'info') : null,
+      h('section', { class: 'fx-set' }, h('div', { class: 'fx-price__head' }, h('h2', { class: 'fx-set__title' }, `Codes · ${data.items.filter((i) => !i.archivedAt).length}`), search), systems,
+        ...(live.length ? live.map(itemRow) : [h('p', { class: 'fx-dim' }, words ? 'No code matches.' : 'No codes yet. Add the first one.')])),
+    ];
+    for (const { system: id, records } of data.unlinked) {
+      if (!records.length) continue;
+      const system = data.systems.find((s) => s.id === id);
+      sections.push(h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, `${system.name} · not on the list · ${records.length}`),
+        ...records.slice(0, 200).map((r) => unlinkedRow(system, r, data.items)),
+        records.length > 200 ? h('p', { class: 'fx-dim' }, `${records.length - 200} more. Link these first.`) : null));
+    }
+    if (archived.length) {
+      sections.push(h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, `Archived · ${archived.length}`), ...archived.map(itemRow)));
+    }
+    const settings = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, 'Invoice lines'), h('div', { class: 'fx-skeleton' }));
+    linePriceRow().then((r) => settings.replaceChildren(settings.firstChild, r,
+      h('p', { class: 'fx-dim', style: { margin: '8px 0 0' } }, h('a', { href: DOCS, target: '_blank', rel: 'noopener' }, 'How the price list works'))));
+    sections.push(settings);
+    host.replaceChildren(...sections.filter(Boolean));
+  }
+
+  async function load() {
+    try {
+      data = await flow('/api/invoicing/price-list');
+    } catch (error) {
+      host.replaceChildren(notice(error.message, 'danger'));
+      return;
+    }
+    draw();
+  }
+
+  addButton.addEventListener('click', () => edit(null));
+  checkButton.addEventListener('click', async () => {
+    checkButton.disabled = true;
+    const body = await send('/api/invoicing/price-list/check', 'POST', {}, null);
+    if (body) toast(body.summary.differing ? `${body.summary.differing} codes differ.` : 'Every linked price agrees.', body.summary.differing ? 'info' : 'success');
+    checkButton.disabled = disabled;
+    alerts.refresh();
+    await load();
+  });
+  await load();
+}

package/server/ui/routes.js

@@ -20,7 +20,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', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'jobs.js', 'job-board.js', 'monitoring.js', 'search.js', 'flow-mark.svg']);
+const UI_FILES = new Set(['flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'jobs.js', 'job-board.js', 'monitoring.js', 'search.js', 'alerts.js', 'flow-mark.svg']);
 const MAX_AGE = '1h';
 
 // Send one named file from dir. Passing dir as root limits the dotfile check