@arcforgelabs/flow 2026.10.32 → 2026.10.33

package/server/ui/invoicing.js

@@ -119,6 +119,7 @@ export async function renderInvoiceList(main, ui) {
           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) {
@@ -165,23 +166,56 @@ export async function renderInvoiceList(main, ui) {
     bar.hidden = !parts.length;
   }
 
+  // A tab switch shows at once: the tab is selected, the last list seen for
+  // it (if any) is drawn and dimmed, and the fresh list replaces it. Only the
+  // newest request draws, so quick clicks never show an older tab's list.
+  const seen = new Map();
+  let asked = 0;
   async function load() {
+    const query = new URLSearchParams({ status: state.status, ...(state.q ? { q: state.q } : {}) });
+    const key = String(query);
+    const mine = ++asked;
+    if (seen.has(key)) {
+      delete host.dataset.stale;
+      draw(seen.get(key));
+    } else if (body) {
+      drawTabs(body.counts);
+      bar.hidden = true;
+      host.dataset.stale = '';
+    }
+    host.setAttribute('aria-busy', 'true');
+    let answer;
     try {
-      const query = new URLSearchParams({ status: state.status, ...(state.q ? { q: state.q } : {}) });
-      body = await flow(`/api/invoicing/invoices?${query}`);
+      answer = await flow(`/api/invoicing/invoices?${query}`);
     } catch (error) {
+      if (mine !== asked) return;
+      host.removeAttribute('aria-busy');
+      delete host.dataset.stale;
       host.replaceChildren(notice(error.message, 'danger'));
       return;
     }
-    const shown = new Set(body.invoices.map((i) => i.id));
-    for (const id of state.ticked) if (!shown.has(id)) state.ticked.delete(id);
+    if (mine !== asked) return;
+    seen.set(key, answer);
+    host.removeAttribute('aria-busy');
+    delete host.dataset.stale;
+    draw(answer);
+  }
+
+  function drawTabs(counts) {
     tabs.replaceChildren(...TABS.map(([id, label]) => h('button', {
       type: 'button',
       role: 'tab',
       'aria-selected': String(state.status === id),
-      ...(id === 'problem' && body.counts?.problem ? { 'data-tone': 'danger' } : {}),
-      onclick: () => openTab(id),
-    }, label, h('span', { class: 'fx-tabs__count' }, String(body.counts?.[id] ?? 0)))));
+      ...(id === 'problem' && counts?.problem ? { 'data-tone': 'danger' } : {}),
+      onclick: () => { if (state.status !== id) openTab(id); },
+    }, label, h('span', { class: 'fx-tabs__count' }, String(counts?.[id] ?? 0)))));
+  }
+
+  async function draw(answer) {
+    body = answer;
+    const shown = new Set(body.invoices.map((i) => i.id));
+    for (const id of state.ticked) if (!shown.has(id)) state.ticked.delete(id);
+    drawTabs(body.counts);
     drawBar();
     if (!body.invoices.length) {
       host.replaceChildren(h('p', { class: 'fx-empty' }, state.q
@@ -289,12 +323,12 @@ function navBar(ui, id) {
 }
 
 // After a send, the next invoice of the list opens; at its end, the list.
-function openNext(ui, id) {
-  const nav = readNav();
-  const ids = nav?.ids ?? [];
+// The sent invoice stays in the bar's list, so the count holds (2 of 35) and
+// Previous opens it again, now sent. Back reloads the list without it.
+export function openNext(ui, id) {
+  const ids = readNav()?.ids ?? [];
   const at = ids.indexOf(id);
-  const next = at >= 0 ? (ids[at + 1] ?? ids[at - 1]) : null;
-  if (at >= 0) saveNav({ ...nav, ids: ids.filter((other) => other !== id) });
+  const next = at >= 0 ? ids[at + 1] : null;
   if (next) ui.go(`/invoices/${next}`);
   else { sessionStorage.setItem(NAV_BACK, '1'); ui.go('/invoices'); }
 }
@@ -612,7 +646,7 @@ function draftView(invoice, ui, context, redraw) {
       h('div', { class: 'fx-ph__text' },
         h('h1', { class: 'fx-title' }, isNew ? 'New invoice' : ready ? 'Ready invoice' : 'Draft invoice'),
         h('p', { class: 'fx-ph__sub' }, draftNote(to, invoice, ready))),
-      h('div', { class: 'fx-ph__actions' }, saveButton, markReadyButton, sendButton ?? issueButton)),
+      h('div', { class: 'fx-ph__actions' }, saveButton, markReadyButton, isNew ? null : previewButton(ui, invoice.id, 'Shows the saved invoice.'), sendButton ?? issueButton)),
     problems,
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
@@ -639,6 +673,39 @@ function draftView(invoice, ui, context, redraw) {
   });
 }
 
+// Preview: the invoice as a PDF in a new tab (GET /api/invoicing/invoices/:id/pdf).
+// The tab opens at once, because a browser blocks a tab opened after a wait,
+// and shows the PDF when it is ready. If Flow cannot make it, the tab closes
+// and a toast says why.
+function previewButton(ui, invoiceId, title = 'Shows the invoice as a PDF.') {
+  const { h, toast } = ui;
+  return h('button', {
+    class: 'fx-btn', type: 'button', title,
+    onclick: async () => {
+      const tab = window.open('', '_blank');
+      if (tab) {
+        tab.document.title = 'Preparing PDF';
+        tab.document.body.textContent = 'Preparing PDF…';
+      }
+      try {
+        const token = await window.Clerk.session?.getToken();
+        const res = await fetch(`/api/invoicing/invoices/${invoiceId}/pdf`, { headers: { Authorization: `Bearer ${token}` } });
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({}));
+          throw new Error(body.error || `HTTP ${res.status}`);
+        }
+        const url = URL.createObjectURL(await res.blob());
+        if (tab) tab.location.href = url;
+        else window.location.assign(url);
+        setTimeout(() => URL.revokeObjectURL(url), 60_000);
+      } catch (error) {
+        tab?.close();
+        toast(`The PDF could not be made. ${error.message}`, 'danger');
+      }
+    },
+  }, 'Preview');
+}
+
 // An issued or void invoice: the document as sent, and what can happen next.
 function issuedView(invoice, ui, context, redraw) {
   const { h, flow, toast } = ui;
@@ -658,10 +725,12 @@ function issuedView(invoice, ui, context, redraw) {
   const organisationId = context.organisations?.[0]?.id;
   const xeroHost = h('div');
   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) ?? '');
+    if (xeroStatus && xeroStatus.state !== 'not_sent') showSent(send);
   };
   loadXero();
   // Voiding in Flow never changes Xero: say so while Xero still holds it live.
@@ -677,7 +746,6 @@ function issuedView(invoice, ui, context, redraw) {
       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),
   ] : [];
   return [
     navBar(ui, invoice.id),
@@ -687,7 +755,7 @@ function issuedView(invoice, ui, context, redraw) {
           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('div', { class: 'fx-ph__actions' }, actions)),
+      h('div', { class: 'fx-ph__actions' }, actions, previewButton(ui, invoice.id), send)),
     h('div', { class: 'fx-invoice__grid' },
       h('div', { class: 'fx-invoice__main' },
         h('section', { class: 'fx-card fx-doc' },
@@ -763,6 +831,7 @@ function sendToXero(invoice, ui, context) {
     class: 'fx-btn fx-btn--primary', type: 'button',
     onclick: async () => {
       button.disabled = true;
+      let sent = false;
       try {
         const res = await flow('/api/xero/invoices/push', { method: 'POST', body: JSON.stringify({ organisationId, invoiceIds: [invoice.id] }) });
         const result = res.invoices?.[0];
@@ -772,18 +841,33 @@ function sendToXero(invoice, ui, context) {
         else if (['created', 'reconciled', 'existing'].includes(result?.outcome)) toast(`${invoice.number} is in Xero as a draft.`, 'success');
         else if (result?.outcome === 'already_in_xero') toast(`Xero already has ${invoice.number}.`, 'info');
         else toast(result?.error?.message ?? 'Xero did not take it.', 'danger');
+        sent = ['created', 'reconciled', 'existing', 'already_in_xero'].includes(result?.outcome);
       } catch (error) {
         toast(error.message, 'danger');
       } finally {
-        button.disabled = false;
+        if (sent) showSent(button);
+        else button.disabled = false;
       }
     },
   }, 'Send to Xero');
+  // Sent or on its way (Send, or Send all ready): it cannot be sent twice.
+  if (['queued', 'sent'].includes(invoice.sendState)) {
+    showSent(button);
+    return button;
+  }
   // The preview reads only Flow's copy of Xero: it costs no Xero calls.
   flow('/api/xero/invoices/preview', { method: 'POST', body: JSON.stringify({ organisationId, invoiceIds: [invoice.id] }) })
     .then((res) => {
-      if (res.invoices?.[0]?.sendMode === 'approve_and_email') button.textContent = 'Send to Xero and email';
+      if (res.invoices?.[0]?.sendMode === 'approve_and_email' && !button.disabled) button.textContent = 'Send to Xero and email';
     })
     .catch(() => {});
   return button;
 }
+
+// A sent invoice's Send button stays, greyed, and says it went.
+function showSent(button) {
+  if (!button) return;
+  button.disabled = true;
+  button.textContent = 'Sent to Xero';
+  button.title = 'Flow sent this invoice to Xero.';
+}

package/server/ui/job-board.js

@@ -91,7 +91,8 @@ function reasonFix(reason, acct) {
   if (reason === 'the work system report is out of date') {
     return { label: 'Out of date', text: 'Flow has no news of this job from the work system for more than a day.', todo: 'Check the work system under Settings, Integrations.' };
   }
-  if (reason === 'the job changed after its invoice was made') return fix('Job changed', 'Compare the invoice with the job, then correct the invoice.');
+  if (reason === 'the job changed after its invoice was made') return fix('Job changed', 'Compare the invoice with the job, then correct the invoice. If only the job changed, use its new lines.');
+  if (reason === 'the job status moved back after its invoice was made') return fix('Status moved back', 'Check the job in the work system. Void or hold its invoice if the work is not done.');
   if (/deleted in /i.test(reason)) return fix('Deleted', 'Check the job in the work system. Void its invoice if it has one.');
   if (/^the accounting evidence is ambiguous/.test(reason)) return fix(`${acct} match unclear`, `Find the invoice for this job in ${acct}, then link it.`);
   if (/^the accounting evidence is conflict/.test(reason)) return fix(`Two ${acct} invoices`, `Find the right invoice for this job in ${acct}. Void the other.`);

package/server/ui/jobs.js

@@ -18,6 +18,7 @@ const ACTIVITY = {
   in_work: 'Put back in work', drafted: 'Draft invoice made', draft_refused: 'Draft invoice refused',
   accounting_checked: 'Checked in the accounting system', payment_recorded: 'Payment recorded', paid: 'Paid in full',
   held: 'Put on hold', review: 'Sent to review', released: 'Hold removed',
+  status_moved_back: 'The job status moved back in the lab system', source_lines_used: 'New job lines used on the draft',
   writeback_sent: 'Status sent to the lab system', writeback_failed: 'Status not sent to the lab system',
   writeback_not_supported: 'The lab system does not take the status',
 };
@@ -172,7 +173,24 @@ export async function renderJobs(main, ui) {
     if (!o) return [];
     if (o.invoiceId) {
       const label = o.invoiceStatus === 'draft' ? 'Open draft invoice' : `Open invoice ${o.invoiceNumber ?? ''}`.trim();
-      return [h('a', { class: 'fx-btn', href: `/invoices/${o.invoiceId}`, onclick: (event) => { close(); ui.go(event); } }, label)];
+      const open = h('a', { class: 'fx-btn', href: `/invoices/${o.invoiceId}`, onclick: (event) => { close(); ui.go(event); } }, label);
+      // Only the job changed and the draft is not sent (ledger.js): one tap
+      // puts the job's new lines on Flow's own draft.
+      if (!o.canUseNewLines) return [open];
+      return [h('button', {
+        class: 'fx-btn fx-btn--primary', type: 'button',
+        onclick: async (event) => {
+          event.currentTarget.disabled = true;
+          try {
+            await flow(`/api/invoicing/jobs/${o.id}/use-new-lines`, { method: 'POST', body: '{}' });
+            ui.toast('The draft has the new job lines.', 'success');
+          } catch (error) {
+            ui.toast(error.message, 'danger');
+          }
+          close();
+          await load();
+        },
+      }, 'Use new lines'), open];
     }
     // Flow's own stage: a person marks a job ready to invoice, or an
     // automation does (Settings, Automations).