@arcforgelabs/flow 2026.11.2 → 2026.11.4

package/server/ui/home.js

@@ -0,0 +1,120 @@
+// Home: the page a person lands on. One job first: send the invoices that
+// are ready. The big number is the Ready tab's count, and Send sends them
+// all with the same step as the Invoices page (POST /invoices/send-ready).
+// Beside it, at most three things that need a person most days: invoices
+// that need a look, jobs and invoices to match (Reconcile), and form photos
+// to check (Capture). Each opens its page. No calls of its own to other
+// systems: every number is its page's own.
+import { formatCents, localDate } from '/assets/ui/invoicing.js';
+import { sendModeNote } from '/assets/ui/invoice-notes.js';
+import { lucide } from '/assets/ui/custom-fields.js';
+
+const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+
+function greeting(person, now = new Date()) {
+  const hour = now.getHours();
+  const part = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+  const first = String(person?.name ?? '').trim().split(/\s+/)[0];
+  return first ? `${part}, ${first}` : part;
+}
+
+export async function renderHome(main, ui) {
+  const { h, flow, toast, notice, pageHeader, dialog, go, me } = ui;
+  const host = h('div', { class: 'fx-home' });
+  main.append(pageHeader(greeting(me?.person)), host);
+  const tabQuery = (tab) => `/api/invoicing/invoices?${new URLSearchParams({ status: tab, limit: '1' })}`;
+
+  async function load() {
+    let context;
+    let body;
+    let pending;
+    let toMatch;
+    let forms;
+    try {
+      [context, body, pending, toMatch, forms] = await Promise.all([
+        flow('/api/invoicing/context'),
+        flow(tabQuery('ready')),
+        flow(tabQuery('pending')),
+        // The two below are extras: Home still shows without them.
+        flow('/api/invoicing/reconcile').catch(() => null),
+        flow('/api/captures').catch(() => null),
+      ]);
+    } catch (error) {
+      host.replaceChildren(notice(error.message, 'danger', 'Flow could not load your invoices.'));
+      return;
+    }
+    if (!host.isConnected) return;
+    draw(context, body, [
+      { href: '/invoices?tab=pending', icon: 'circle-alert', label: 'Need a look', tone: 'danger', count: pending.total, sum: pending.totalCents },
+      toMatch && { href: '/reconcile', icon: 'link', label: 'To match', tone: 'warn', count: (toMatch.jobs?.length ?? 0) + (toMatch.invoices?.length ?? 0) },
+      forms && { href: '/captures', icon: 'camera', label: 'Forms to check', tone: 'info', count: forms.captures.filter((c) => c.state === 'ready').length },
+    ].filter(Boolean));
+  }
+
+  function draw(context, body, items) {
+    const to = body.sendsTo;
+    const counts = body.counts ?? {};
+    const ready = counts.ready ?? 0;
+    const blocked = to && body.sendMode && (!body.sendMode.connected || !body.sendMode.writesAllowed);
+    const canSend = context.canIssue && !blocked;
+
+    const hero = ready
+      ? h('section', { class: 'fx-home__send', 'aria-labelledby': 'home-ready' },
+        h('p', { class: 'fx-home__count', id: 'home-ready' }, String(ready),
+          h('span', {}, ready === 1 ? 'invoice ready' : 'invoices ready')),
+        h('p', { class: 'fx-home__sum' }, formatCents(body.totalCents)),
+        h('button', {
+          class: 'fx-btn fx-btn--primary fx-home__btn', type: 'button', disabled: !canSend,
+          onclick: (event) => send(to, ready, body.sendMode, event.currentTarget),
+        }, lucide(h, 'send'), h('span', {}, 'Send')),
+        context.canIssue ? null : h('p', { class: 'fx-home__note' }, 'An owner or admin sends.'),
+        blocked ? h('p', { class: 'fx-home__note' }, sendModeNote(to, body.sendMode)) : null)
+      : h('section', { class: 'fx-home__send', 'data-done': '', 'aria-labelledby': 'home-ready' },
+        h('span', { class: 'fx-home__done', 'aria-hidden': 'true' }, lucide(h, 'check')),
+        h('p', { class: 'fx-home__count', id: 'home-ready' }, h('span', {}, 'All caught up')),
+        h('p', { class: 'fx-home__sum' }, 'Nothing waits to be sent.'));
+
+    const needs = h('section', { class: 'fx-home__needs', 'aria-labelledby': 'home-needs' },
+      h('h2', { class: 'fx-label', id: 'home-needs' }, 'Needs you'),
+      h('ul', {}, items.map((item) => h('li', {},
+        h('a', { href: item.href, onclick: open, 'data-tone': item.count ? item.tone : 'clear' },
+          h('span', { class: 'fx-home__dot', 'aria-hidden': 'true' }, lucide(h, item.count ? item.icon : 'check')),
+          h('span', { class: 'fx-home__what' }, item.label,
+            item.count && item.sum ? h('small', {}, formatCents(item.sum)) : null),
+          h('span', { class: 'fx-home__n' }, String(item.count)))))));
+
+    host.replaceChildren(hero, needs);
+  }
+
+  function open(event) {
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;
+    event.preventDefault();
+    go(event.currentTarget.getAttribute('href'));
+  }
+
+  async function send(to, ready, sendMode, button) {
+    const ok = await dialog({
+      title: `Send ${plural(ready, 'invoice', 'invoices')}?`,
+      body: h('p', {}, to ? sendModeNote(to, sendMode, 'each one') : 'Each one gets the next number and is locked.'),
+      confirm: 'Send',
+    });
+    if (!ok) return;
+    button.disabled = true;
+    button.lastChild.textContent = 'Sending';
+    try {
+      const res = await flow('/api/invoicing/invoices/send-ready', { method: 'POST', body: JSON.stringify({ issueDate: localDate() }) });
+      const notes = [
+        to ? `${res.issued} on the way to ${to}.` : `${res.issued} approved.`,
+        res.held ? `${res.held} need a look.` : '',
+        res.waiting ? `${res.waiting} could not be checked with the work system yet: press Send again.` : '',
+        res.remaining ? `${res.remaining} more are ready: press Send again.` : '',
+      ].filter(Boolean);
+      toast(notes.join(' '), res.held || res.waiting || res.remaining ? 'info' : 'success', { stay: Boolean(res.held || res.waiting) });
+    } catch (error) {
+      toast(error.message, 'danger', { stay: true });
+    }
+    await load();
+  }
+
+  await load();
+}

package/server/ui/invoice-rules.js

@@ -41,7 +41,8 @@ export function ruleSummary(rule, meta) {
     return `${field.label} ${test} ${value}`;
   };
   const then = rule.action.kind === 'pending' ? `Pending: ${rule.action.note}` : ACTION_LABELS[rule.action.kind] ?? rule.action.kind;
-  return `${rule.conditions.map(part).join(' and ')} · ${then}`;
+  const excepted = rule.exceptions ? ` · ${rule.exceptions} ${rule.exceptions === 1 ? 'exception' : 'exceptions'}` : '';
+  return `${rule.conditions.map(part).join(' and ')} · ${then}${excepted}`;
 }
 
 export function rulesSection(ui, title = 'Rules') {
@@ -169,7 +170,13 @@ export function rulesSection(ui, title = 'Rules') {
       placeholder: 'Type a note',
     });
     const noteField = h('div', { class: 'fx-field' }, h('span', { class: 'fx-label' }, 'Note on the draft'), note);
-    const showNote = () => { noteField.hidden = action.value !== 'pending'; };
+    // Optional: a price list code the draft offers to add in one press.
+    const addItem = h('input', {
+      class: 'fx-input', maxlength: '40', value: draft?.action.addItem ?? '', 'aria-label': 'Item to add',
+      placeholder: 'Price list code',
+    });
+    const addField = h('div', { class: 'fx-field' }, h('span', { class: 'fx-label' }, 'Offer to add'), addItem);
+    const showNote = () => { noteField.hidden = action.value !== 'pending'; addField.hidden = action.value !== 'pending'; };
     action.addEventListener('change', showNote);
     showNote();
     let editors = [];
@@ -218,6 +225,7 @@ export function rulesSection(ui, title = 'Rules') {
         label('If all of these match', list, more),
         label('Then', action),
         noteField,
+        addField,
         remove),
       confirm: rule ? 'Save' : 'Add rule',
     });
@@ -231,7 +239,7 @@ export function rulesSection(ui, title = 'Rules') {
       name: name.value,
       icon: icon.value(),
       conditions: editors.map((e) => e.read()),
-      action: action.value === 'pending' ? { kind: 'pending', note: note.value } : { kind: action.value },
+      action: action.value === 'pending' ? { kind: 'pending', note: note.value, ...(addItem.value.trim() ? { addItem: addItem.value.trim() } : {}) } : { kind: action.value },
     };
     const body = rule
       ? await send(`/api/invoicing/rules/${rule.id}`, 'PUT', payload)

package/server/ui/invoicing.js

@@ -111,7 +111,7 @@ function toCents(text) {
 
 const fromCents = (cents) => (cents == null ? '' : (cents / 100).toFixed(2));
 
-function localDate(date = new Date()) {
+export function localDate(date = new Date()) {
   const pad = (n) => String(n).padStart(2, '0');
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 }
@@ -146,6 +146,13 @@ function readFilters() {
 
 export async function renderInvoiceList(main, ui) {
   const { h, flow, listHead, listFrame, notice, go, toast } = ui;
+  // A link may name the tab (/invoices?tab=draft, from Home). It is kept as
+  // the open tab, and the address goes back to /invoices.
+  const linked = new URLSearchParams(globalThis.location?.search ?? '').get('tab');
+  if (linked) {
+    sessionStorage.setItem('flow_invoice_tab', linked);
+    history.replaceState(null, '', location.pathname);
+  }
   const saved = OLD_TAB[sessionStorage.getItem('flow_invoice_tab')] ?? sessionStorage.getItem('flow_invoice_tab');
   // Back from an invoice comes here with the tab, search and scroll it left.
   const back = readNav();
@@ -933,6 +940,29 @@ const LINE_CARD_READ = { areas: ['desc desc amount', 'qty price gst'], columns:
 const brief = (text) => String(text ?? '').match(/^.*?[.!?](?=\s|$)/s)?.[0] ?? String(text ?? '');
 
 // A draft, or a new invoice before its first save.
+// Lines this invoice has that its job in the work system does not (the
+// invoice detail's sourceGap). Flow cannot add them there, so a yellow line
+// says what to add and links to the job.
+function sourceGapNotice(ui, invoice) {
+  const gap = invoice?.sourceGap ?? [];
+  if (!gap.length || !invoice.job) return null;
+  const system = invoice.job.systemName ?? 'the work system';
+  const what = gap.map((l) => `${l.description} (${formatCents(l.unitAmountCents * (l.quantity ?? 1))})`).join(', ');
+  const line = ui.notice(`This invoice has ${what}; the job in ${system} does not. Add it there so both agree.`, 'warn', `Not in ${system}.`);
+  if (!invoice.job.link?.url) return line;
+  return ui.h('div', { class: 'fx-offer' }, line,
+    ui.h('a', { class: 'fx-btn fx-btn--sm fx-btn--ghost', href: invoice.job.link.url, target: '_blank', rel: 'noopener' }, `Open in ${system}`));
+}
+
+// The exceptions people gave this job: the rule, why, and whether it still
+// holds (it ends when the job's lines or the rule's item change).
+function exceptionsNotice(ui, invoice) {
+  const list = invoice?.ruleExceptions ?? [];
+  if (!list.length) return null;
+  const text = list.map((e) => `${e.rule}: ${e.reason}${e.current ? '' : ' (ended: the job changed)'}`).join('; ');
+  return ui.notice(text, 'info', list.length === 1 ? 'Exception.' : 'Exceptions.');
+}
+
 function draftView(invoice, ui, context, redraw) {
   const { h, flow, toast, go, notice, fieldError } = ui;
   const isNew = !invoice;
@@ -1267,11 +1297,33 @@ function draftView(invoice, ui, context, redraw) {
     : [];
   // Every matching rule links to its own conditions and existing controls,
   // including custom rules. The target enforces read-only roles itself.
+  // A rule with an item to add offers it in one press, and Skip records an
+  // exception with a reason (POST .../rules/:rule/add-item and /exception).
+  const ruleFix = async (path, payload, done) => {
+    try {
+      const body = await flow(`/api/invoicing/invoices/${invoice.id}/rules/${path}`, { method: 'POST', body: JSON.stringify(payload ?? {}) });
+      ui.toast(done, 'success');
+      redraw(body.invoice);
+    } catch (error) {
+      ui.toast(error.message, 'danger');
+    }
+  };
+  const skipRule = async (p) => {
+    const reason = h('textarea', { class: 'fx-input', rows: 2, maxlength: 200, 'aria-label': 'Reason' });
+    const ok = await ui.dialog({ title: `Skip ${p.short ?? 'this rule'} for this job?`, body: h('div', {}, h('p', {}, 'The rule lists this job as an exception, with your reason.'), reason), confirm: 'Skip' });
+    if (!ok) return;
+    if (!reason.value.trim()) { ui.toast('Give a reason.', 'danger'); return; }
+    await ruleFix(`${p.rule}/exception`, { reason: reason.value.trim() }, 'Skipped. The rule shows the exception.');
+  };
   const ruleActions = [...new Map(problemList.filter(hasRuleReview).map((p) => [p.rule, p])).values()]
-    .map((p) => h('a', { class: 'fx-btn fx-btn--sm',
-      href: `/invoicing-settings/invoices?rule=${encodeURIComponent(p.rule)}`,
-      onclick: (event) => go(event),
-    }, `Review ${p.short ?? 'rule'}`));
+    .flatMap((p) => [
+      p.addItem && context.canIssue ? h('button', { class: 'fx-btn fx-btn--sm fx-btn--primary', type: 'button', onclick: () => ruleFix(`${p.rule}/add-item`, null, `${p.addItem} added.`) }, `Add ${p.addItem}`) : null,
+      p.addItem && context.canIssue ? h('button', { class: 'fx-btn fx-btn--sm fx-btn--ghost', type: 'button', onclick: () => skipRule(p) }, 'Skip') : null,
+      h('a', { class: 'fx-btn fx-btn--sm',
+        href: `/invoicing-settings/invoices?rule=${encodeURIComponent(p.rule)}`,
+        onclick: (event) => go(event),
+      }, `Review ${p.short ?? 'rule'}`),
+    ].filter(Boolean));
   // Non-change holds use the Jobs workflow's existing instructions, not a
   // comparison that does not exist. Reading them never releases the hold.
   const holdSteps = fixes({ view: 'review_required', holdState: 'review',
@@ -1323,6 +1375,8 @@ function draftView(invoice, ui, context, redraw) {
     draftNote(to, invoice) ? ui.notice(draftNote(to, invoice), 'warn') : null,
     nonChargeable ? ui.notice(brief(invoice.nonChargeable?.[0]?.message ?? 'Non-chargeable.')) : null,
     ...problems,
+    sourceGapNotice(ui, invoice),
+    exceptionsNotice(ui, invoice),
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-invoice__head' },
@@ -1484,7 +1538,26 @@ function issuedView(invoice, ui, context, redraw) {
     target: '_blank',
     rel: 'noopener',
   }, 'Open in Xero') : null;
-  const problemRow = problemNotice ? (openXero ? h('div', { class: 'fx-offer' }, problemNotice, openXero) : problemNotice) : null;
+  // Send stopped it for a Xero invoice of the same client and Reference: that
+  // Xero invoice is the bill. One press voids this copy and gives the job the
+  // Xero invoice (POST /api/xero/invoices/:id/use-xero), never a bare void.
+  const useXero = matched?.code === 'xero_same_reference_different_amount' && invoice.status === 'issued' && context.canIssue && organisationId
+    ? h('button', {
+      class: 'fx-btn fx-btn--sm', type: 'button',
+      onclick: async (event) => {
+        event.currentTarget.disabled = true;
+        try {
+          const body = await ui.flow(`/api/xero/invoices/${invoice.id}/use-xero`, { method: 'POST', body: JSON.stringify({ organisationId, xeroInvoiceId: matched.xero.invoiceId }) });
+          ui.toast(`${invoice.number} is void. The job has ${matched.xero.number ?? 'the Xero invoice'}.`, 'success');
+          ui.go(`/invoices/${body.invoice.id}`);
+        } catch (error) {
+          event.currentTarget.disabled = false;
+          ui.toast(error.message, 'danger');
+        }
+      },
+    }, 'Use Xero invoice') : null;
+  const offers = [useXero, openXero].filter(Boolean);
+  const problemRow = problemNotice ? (offers.length ? h('div', { class: 'fx-offer' }, problemNotice, ...offers) : problemNotice) : null;
   const header = h('header', { class: 'fx-ph' },
     h('div', { class: 'fx-ph__text' },
       h('h1', { class: 'fx-title' }, invoice.number),
@@ -1512,6 +1585,8 @@ function issuedView(invoice, ui, context, redraw) {
     chrome.pager,
     header,
     problemRow,
+    sourceGapNotice(ui, invoice),
+    exceptionsNotice(ui, invoice),
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-doc' },

package/server/ui/job-board.js

@@ -81,7 +81,7 @@ const sentence = (text) => capital(String(text).trim().replace(/\.?$/, '.'));
 // wrong, what to do, and where to go to do it (`go`, see GO). A job's fix
 // speaks of Flow's own invoice only. How that invoice stands in an
 // accounting system is the invoice's business, on the invoice page.
-function reasonFix(reason) {
+function reasonFix(reason, o = {}) {
   const fix = (label, todo, go = null) => ({ label, text: sentence(reason), todo, go });
   if (reason === 'the accounting system was not checked') {
     return { label: 'Not checked yet', text: 'Flow did not check for an invoice for this job yet.', todo: 'Wait for the next check, a few minutes. If it stays, check Settings, Integrations.', go: 'integrations' };
@@ -111,7 +111,12 @@ function reasonFix(reason) {
   }
   if (/^invoice .* was (voided|deleted)$/.test(reason)) {
     const voided = /voided$/.test(reason);
-    return { label: `Invoice ${voided ? 'voided' : 'deleted'}`, text: `The invoice for this job was ${voided ? 'voided' : 'deleted'}.`, todo: 'Make a new invoice, or close the job.', go: 'invoice' };
+    const label = `Invoice ${voided ? 'voided' : 'deleted'}`;
+    const text = `The invoice for this job was ${voided ? 'voided' : 'deleted'}.`;
+    // No Flow invoice: the voided one is in the accounting system only, so
+    // the job's own buttons make its new invoice (jobs.js).
+    if (!o.invoiceId) return { label, text, todo: null, go: 'choose' };
+    return { label, text, todo: 'Make a new invoice, or close the job.', go: 'invoice' };
   }
   if (/^the accounting system reports /.test(reason)) {
     return { label: 'May be invoiced', text: 'Flow found an invoice that may be for this job.', todo: 'Check the invoice number on the job in the work system.', go: 'work' };
@@ -160,7 +165,7 @@ export const GO = ['invoice', 'work', 'price-list', 'rule', 'integrations', 'rev
 export function fixes(o) {
   if (invoiceStage(o) !== 'problem') return [];
   const found = [];
-  if (PROBLEM_VIEWS.includes(o.view)) found.push(...(o.reasons ?? []).map((r) => reasonFix(r)));
+  if (PROBLEM_VIEWS.includes(o.view)) found.push(...(o.reasons ?? []).map((r) => reasonFix(r, o)));
   found.push(...(o.waitingRules ?? []).map(ruleFix));
   if (o.invoiceStatus === 'void') {
     found.push({ label: 'Invoice void', text: 'The invoice for this job is void.', todo: 'Make a new invoice, or close the job.', go: 'invoice' });

package/server/ui/jobs.js

@@ -12,6 +12,7 @@
 // shows what to do there and the card waits in its new lane. On a phone a
 // long press opens Move to. With a keyboard, the job's panel has the same moves.
 
+import { alertStrip } from '/assets/ui/alerts.js';
 import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { captureButton } from '/assets/ui/captures.js';
 import { columnTable, dateCell, fieldColumn, groupHead, personCell, rowCells, viewSaver } from '/assets/ui/columns.js';
@@ -128,7 +129,10 @@ export async function renderJobs(main, ui) {
   const frame = listFrame(main, host);
   // A form photo from the Jobs page; Capture lists it with its result.
   const shoot = captureButton(ui, { icon: true, added: () => ui.toast('Sent to Capture.', 'success') });
-  main.append(...listHead('Jobs', { views: views.element, controls, end: [find.element, toggle, ...shoot.nodes] }).nodes, frame.element, bulk.element);
+  // Finished jobs that nothing is billing (server/core/alerts.js).
+  const alerts = alertStrip(ui, 'jobs');
+  const [title, ...top] = listHead('Jobs', { views: views.element, controls, end: [find.element, toggle, ...shoot.nodes] }).nodes;
+  main.append(title, alerts.element, ...top, frame.element, bulk.element);
 
   const drawToggle = () => toggle.replaceChildren(...[['board', 'Board'], ['list', 'List']].map(([id, label]) => h('button', {
     type: 'button', role: 'radio', class: 'fx-seg__item', 'aria-checked': String(state.view.layout === id),
@@ -336,6 +340,9 @@ export async function renderJobs(main, ui) {
       state.systemFields = fields?.systemFields ?? [];
       state.people = fields?.people ?? [];
       state.values = new Map((values?.values ?? []).map((v) => [valueKey(v, v.fieldId), { value: v.value, updatedAt: v.updatedAt }]));
+      // The strip loads itself once; a later load follows a change.
+      if (state.loaded) alerts.refresh();
+      state.loaded = true;
     } catch (error) {
       host.replaceChildren(notice(error.message, 'danger'));
       return;
@@ -378,7 +385,12 @@ export async function renderJobs(main, ui) {
       h('span', { class: 'fx-job__space' }),
       problemMark(job),
       h('span', { class: 'fx-job__amount' }, job.totalCents == null ? '—' : formatCents(job.totalCents))),
-    job.pendingMove ? h('span', { class: 'fx-job__wait', title: `Set the status to ${job.pendingMove.to} in ${system}. Flow then reads the change.` }, `Waiting for ${system}`) : null);
+    job.pendingMove ? h('span', { class: 'fx-job__wait', title: `Set the status to ${job.pendingMove.to} in ${system}. Flow then reads the change.` }, `Waiting for ${system}`) : null,
+    // A rule asks for an item the job lacks in the work system (job-board.js).
+    // Fix it there: the lab prints from it too.
+    ...(job.obligation?.sourceNeeds ?? []).map((need) => h('span', {
+      class: 'fx-job__wait fx-job__wait--warn', title: `${need.note} Add it in ${system}.`,
+    }, `${system} needs ${need.item}`)));
     cardJobs.set(card, job);
     return card;
   }

package/server/ui/nav-pins.js

@@ -1,9 +1,10 @@
 // Which sidebar pages a person has pinned. Stored with the account in
 // people.views.nav (PUT /api/me/views/nav). No table of its own.
-// Jobs and Invoices stay pinned: a request that leaves them out is saved
+// Home, Jobs and Invoices stay pinned: a request that leaves them out is saved
 // with them put back. A page Flow does not know is dropped.
 
 export const NAV_PAGES = Object.freeze([
+  'home',
   'jobs',
   'captures',
   'invoices',
@@ -16,12 +17,13 @@ export const NAV_PAGES = Object.freeze([
   'integrations',
 ]);
 
-export const NAV_LOCKED = Object.freeze(['jobs', 'invoices']);
+export const NAV_LOCKED = Object.freeze(['home', 'jobs', 'invoices']);
 
-// Today's sidebar, before a person has chosen: daily work (Jobs, Capture,
+// Today's sidebar, before a person has chosen: Home, daily work (Jobs, Capture,
 // Invoices, Contacts, Reconcile), Price list and Rules. Automations, Custom fields
 // and Integrations start in More.
 export const NAV_DEFAULT = Object.freeze([
+  'home',
   'jobs',
   'captures',
   'invoices',

package/server/ui/reconcile.js

@@ -470,13 +470,15 @@ async function renderGap(main, ui, id) {
       };
     });
     results.replaceChildren(...[
-      job.open ? null : h('p', { class: 'fx-notice' }, 'This job has an invoice already.'),
+      job.open || job.unclear ? 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. Find one, or make it.'),
     ].flat().filter(Boolean));
     actions.replaceChildren(...[
       skip(),
-      canAct && job.open ? h('button', {
+      // An unclear job (a voided or deleted Xero link) is not open to a link,
+      // but Make invoice settles it.
+      canAct && (job.open || job.unclear) ? h('button', {
         class: `fx-btn${candidates.some((c) => c.best) ? '' : ' fx-btn--primary'}`, type: 'button',
         onclick: () => act(async () => {
           if (job.unclear) await flow(`/api/invoicing/jobs/${job.id}/no-invoice`, { method: 'POST', body: '{}' });

package/server/ui/routes.js

@@ -22,7 +22,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']);
-export const UI_FILES = new Set(['sync-status.js', 'flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'sidecar.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'price-match.js', 'price-reconcile.js', 'custom-fields.js', 'contacts.js', 'xero-contact.js', 'jobs.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'xero-usage.js', 'xero-usage-model.js', 'job-view.js', 'list-views.js', 'saved-views.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'view-bar.js', 'tip.js', 'kit.js', 'columns.js', 'mobile.js', 'person.js', 'captures.js', 'capture-fields.js', 'pager.js', 'nav-pins.js', 'flow-mark.svg']);
+export const UI_FILES = new Set(['sync-status.js', 'flow.css', 'appearance.js', 'clerk-appearance.js', 'app.js', 'invoicing.js', 'invoice-notes.js', 'job-change.js', 'sidecar.js', 'invoicing-settings.js', 'automations.js', 'invoice-rules.js', 'line-mappings.js', 'price-list.js', 'price-match.js', 'price-reconcile.js', 'custom-fields.js', 'contacts.js', 'xero-contact.js', 'jobs.js', 'home.js', 'job-board.js', 'reconcile.js', 'xero-import.js', 'xero-usage.js', 'xero-usage-model.js', 'job-view.js', 'list-views.js', 'saved-views.js', 'monitoring.js', 'search.js', 'alerts.js', 'bulk-bar.js', 'view-bar.js', 'tip.js', 'kit.js', 'columns.js', 'mobile.js', 'person.js', 'captures.js', 'capture-fields.js', 'pager.js', 'nav-pins.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';