@arcforgelabs/flow 2026.10.46 → 2026.10.48

package/server/ui/job-board.js

@@ -192,3 +192,13 @@ export function matches(job, q) {
   return [job.caseRef, job.sourceJobRef, job.clientName, job.workClientName, job.practitioner, job.obligation?.invoiceNumber]
     .some((value) => value && String(value).toLowerCase().includes(needle));
 }
+
+// How long a press on a phone card is held before Move to opens.
+export const PHONE_HOLD_MS = 500;
+
+// The lane showing when one lane fills the phone and the board snaps.
+// A lane just past halfway counts as the next. `count` is how many lanes.
+export function phoneLaneIndex(scrollLeft, laneWidth, count) {
+  if (!(laneWidth > 0) || !(count > 0)) return 0;
+  return Math.max(0, Math.min(count - 1, Math.round(scrollLeft / laneWidth)));
+}

package/server/ui/job-change.js

@@ -5,6 +5,7 @@
 // and a recheck button that reads the job from the work system again. Flow
 // never writes to the work system. Kept apart from
 // invoicing.js so tests can load it without a browser.
+import { applyPhoneRule } from './mobile.js';
 
 // Rows shown before "Show all".
 export const FIRST_ROWS = 5;
@@ -55,7 +56,7 @@ export function jobChangeBanner(ui, change, { money, onAccept = null, onRecheck
     }, `Open in ${system} ↗`)
     : null;
   const accept = change.canAccept && onAccept
-    ? h('button', { class: 'fx-btn fx-btn--sm fx-btn--primary', type: 'button', title: `This invoice takes the Now in ${system} column.`, onclick: onAccept }, 'Accept change')
+    ? h('button', { class: 'fx-btn fx-btn--sm fx-btn--primary', type: 'button', 'data-action': 'accept', title: `This invoice takes the Now in ${system} column.`, onclick: onAccept }, 'Accept change')
     : null;
   const recheck = onRecheck
     ? h('button', {
@@ -77,7 +78,7 @@ export function jobChangeBanner(ui, change, { money, onAccept = null, onRecheck
   const more = rows.length > FIRST_ROWS
     ? h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', onclick: (event) => { draw(true); event.currentTarget.remove(); } }, `Show all ${rows.length}`)
     : null;
-  return h('section', { class: 'fx-change', role: 'alert' },
+  return applyPhoneRule(h('section', { class: 'fx-change', role: 'alert' },
     h('div', { class: 'fx-change__head' },
       h('p', {}, h('strong', {}, 'Problem.'), ' ', changeSummary(change, rows.filter((row) => row.field !== 'Total').length)),
       h('div', { class: 'fx-change__acts' }, link, accept, recheck)),
@@ -85,7 +86,7 @@ export function jobChangeBanner(ui, change, { money, onAccept = null, onRecheck
     rows.length ? h('div', { class: 'fx-change__scroll' }, h('table', { class: 'fx-change__table' },
       h('thead', {}, h('tr', {}, h('th', { scope: 'col' }, 'Field'), h('th', { scope: 'col' }, 'Was'), h('th', { scope: 'col' }, `Now in ${system}`))),
       body)) : null,
-    more);
+    more), 'jobChangeBanner');
 }
 
 // The banner with Accept change and the recheck wired, for the invoice page

package/server/ui/job-view.js

@@ -304,7 +304,9 @@ export function filterJobs(jobs, view, { valueOf, kindOf = (field) => FILTER_FIE
   const live = (f) => kindOf(f.field) && Object.hasOwn(OPERATORS[kindOf(f.field)], f.op) && filterIsOn(f, kindOf(f.field));
   const groups = (view.groups ?? []).map((g) => ({ match: g.match, rows: g.filters.filter(live) })).filter((g) => g.rows.length);
   if (!groups.length) return [...jobs];
-  const pass = (job) => (f) => matchesFilter(f, valueOf(job, f.field), { today, me, kind: kindOf(f.field), late: f.field === 'due' ? () => late(job) : null });
+  // `late` is a job's own lateness (Jobs). Pass null when "due" is a date on
+  // the row, so Overdue means that day is before today (Invoices).
+  const pass = (job) => (f) => matchesFilter(f, valueOf(job, f.field), { today, me, kind: kindOf(f.field), late: f.field === 'due' && late ? () => late(job) : null });
   const passGroup = (job) => (g) => (g.match === 'any' ? g.rows.some(pass(job)) : g.rows.every(pass(job)));
   return jobs.filter((job) => (view.match === 'any' ? groups.some(passGroup(job)) : groups.every(passGroup(job))));
 }

package/server/ui/jobs.js

@@ -9,8 +9,8 @@
 // (docs/JOB_BOARD_MOVES.md). Grouped by a custom field, the move sets the
 // job's value, in Flow only. Grouped by status, the move is a stage move
 // in the work system: Seazona cannot take one through its API, so Flow
-// shows what to do there and the card waits in its new lane. On a phone,
-// or with a keyboard, the job's panel has the same moves.
+// 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 { bulkBar } from '/assets/ui/bulk-bar.js';
 import { columnTable, dateCell, fieldColumn, onRightButton, personCell, rowCells, viewSaver } from '/assets/ui/columns.js';
@@ -18,15 +18,17 @@ import { lucide } from '/assets/ui/custom-fields.js';
 import { formatCents } from '/assets/ui/invoicing.js';
 import { jobChangeReview } from '/assets/ui/job-change.js';
 import {
-  caseNumber, FINAL_RANK, fixes, INVOICE_STAGES, invoiceStage, matches, NO_STATUS, orderStatuses, problemSummary, statusRank,
+  caseNumber, FINAL_RANK, fixes, INVOICE_STAGES, invoiceStage, matches, NO_STATUS, orderStatuses, phoneLaneIndex, PHONE_HOLD_MS, problemSummary, statusRank,
 } from '/assets/ui/job-board.js';
+import { rowMenu } from '/assets/ui/kit.js';
+import { isPhone } from '/assets/ui/mobile.js';
 import {
   COLUMNS, DEFAULT_VIEW, fieldGroup, fieldIdOf, fieldLanes, FILTER_FIELDS, filterJobs, groupJobs, GROUPS, KIND_OF_TYPE, keptStatuses, laneOf,
   normaliseJobsView, NOT_SET, OPERATORS, sortJobs, SORTS,
 } from '/assets/ui/job-view.js';
 import { clipLabel } from '/assets/ui/person.js';
 import { savedViews } from '/assets/ui/saved-views.js';
-import { sidecar } from '/assets/ui/sidecar.js';
+import { recordBar, sidecar } from '/assets/ui/sidecar.js';
 import { findBox, ICONS, svg, today, viewBar } from '/assets/ui/view-bar.js';
 
 const LAYOUT_KEY = 'flow_jobs_layout';
@@ -38,7 +40,7 @@ const SYSTEM_NAME = { seazona: 'Seazona', xero: 'Xero' };
 // A job's events (server/core/ledger.js), in plain words.
 const ACTIVITY = {
   observed: 'Flow read the job', source_changed: 'The job changed in the lab system', ready: 'Marked ready to invoice',
-  in_work: 'Put back in work', drafted: 'Draft invoice made', draft_refused: 'Draft invoice refused', invoice_linked: 'Linked to an invoice',
+  in_work: 'Put back in work', drafted: 'Draft invoice made', draft_deleted: 'Draft invoice deleted', draft_refused: 'Draft invoice refused', invoice_linked: 'Linked to an invoice',
   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',
@@ -324,6 +326,7 @@ export async function renderJobs(main, ui) {
 
   function draw() {
     if (!state.jobs.length) {
+      boardTabs.hidden = true;
       main.classList.remove('fx-main--board');
       host.replaceChildren(h('div', { class: 'fx-panel fx-empty' },
         h('p', {}, 'No jobs yet. Jobs appear here once the lab system is connected under Integrations.'),
@@ -339,6 +342,7 @@ export async function renderJobs(main, ui) {
     for (const key of state.ticked) if (!shown.has(key)) state.ticked.delete(key);
     state.found = found;
     frame.count(`${found.length} ${found.length === 1 ? 'job' : 'jobs'}`);
+    if (state.view.layout !== 'board') boardTabs.hidden = true;
     host.replaceChildren(state.view.layout === 'list' ? list(groups, found.length) : board(groups));
     drawBulk();
   }
@@ -389,7 +393,7 @@ export async function renderJobs(main, ui) {
     const system = SYSTEM_NAME[job.sourceSystem] ?? job.sourceSystem;
     const card = h('article', {
       class: 'fx-job', tabindex: '0', role: 'button', 'aria-label': `${clientOf(job)}, open the job`,
-      onclick: () => { if (!dragged) openJob(job); },
+      onclick: () => { if (dragged) { dragged = false; return; } openJob(job); },
       onkeydown: (event) => { if (event.target === event.currentTarget && (event.key === 'Enter' || event.key === ' ')) { event.preventDefault(); openJob(job); } },
     },
     h('div', { class: 'fx-job__client' }, clientOf(job)),
@@ -450,19 +454,108 @@ export async function renderJobs(main, ui) {
   const totalOf = (jobs) => jobs.reduce((sum, job) => sum + (job.totalCents ?? 0), 0);
 
   function board(groups) {
-    if (!groups.length) return h('div', { class: 'fx-panel' }, h('p', { class: 'fx-empty' }, 'No job matches the search or filter.'));
+    if (!groups.length) {
+      boardTabs.hidden = true;
+      return h('div', { class: 'fx-panel' }, h('p', { class: 'fx-empty' }, 'No job matches the search or filter.'));
+    }
     const element = h('div', { class: 'fx-board' }, groups.map(({ label, jobs, rank, color }, index) => h('section', { class: 'fx-board__col', 'aria-label': label, 'data-lane': String(index) },
       h('header', { class: 'fx-board__head' },
         color ? h('span', { class: 'fx-cf__opt fx-board__lane', 'data-color': color }, label, h('span', { class: 'fx-stage__count' }, String(jobs.length))) : stagePill(label, jobs.length, rank),
         h('span', { class: 'fx-board__sum' }, jobs.length ? formatCents(totalOf(jobs)) : '')),
       h('div', { class: 'fx-board__cards' }, jobs.length ? jobs.map(jobCard) : h('p', { class: 'fx-board__none' }, 'None')))));
     if (groups.some((g) => g.drop)) enableDrag(element, groups);
+    phoneLanes(element, groups);
     // Lanes past the frame's sides, and cards past a lane's foot, fade.
     edgeFade(element, { target: frame.view, edges: ['left', 'right'] });
     element.querySelectorAll('.fx-board__cards').forEach((cards) => edgeFade(cards, { target: cards.parentElement, edges: ['top', 'bottom'] }));
     return element;
   }
 
+  // Stage tabs for the phone: one per lane, with its count. A tap brings
+  // that lane across; a swipe updates the tab. Hidden on a wider screen.
+  const boardTabs = h('div', { class: 'fx-board-tabs', role: 'tablist', 'aria-label': 'Stages', hidden: true });
+  function phoneLanes(element, groups) {
+    const bar = main.querySelector('.fx-toolbar');
+    if (bar && !boardTabs.isConnected) bar.prepend(boardTabs);
+    const buttons = groups.map((group, index) => {
+      const count = group.jobs.length;
+      const name = `${group.label}, ${count} ${count === 1 ? 'job' : 'jobs'}`;
+      return h('button', {
+        type: 'button', role: 'tab', id: `fx-lane-tab-${index}`,
+        'aria-controls': `fx-lane-${index}`, 'aria-selected': 'false', title: name,
+        onclick: () => element.scrollTo({ left: element.querySelector(`#fx-lane-${index}`)?.offsetLeft ?? 0, behavior: 'smooth' }),
+      }, h('span', {}, group.label), h('span', { class: 'fx-tabs__count' }, String(count)));
+    });
+    boardTabs.replaceChildren(...buttons);
+    boardTabs.hidden = false;
+    const cols = [...element.querySelectorAll(':scope > .fx-board__col')];
+    cols.forEach((col, index) => {
+      col.id = `fx-lane-${index}`;
+      col.setAttribute('role', 'tabpanel');
+      col.setAttribute('aria-labelledby', `fx-lane-tab-${index}`);
+    });
+    let shown = -1;
+    const mark = () => {
+      const at = phoneLaneIndex(element.scrollLeft, element.clientWidth, cols.length);
+      if (at === shown) return;
+      shown = at;
+      buttons.forEach((button, index) => {
+        const on = index === at;
+        button.setAttribute('aria-selected', String(on));
+        if (on) button.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+      });
+    };
+    element.addEventListener('scroll', () => requestAnimationFrame(mark), { passive: true });
+    mark();
+    enableHold(element, groups);
+  }
+
+  // A long press on a phone opens Move to. A drag stays a mouse or pen
+  // move on a wider screen (enableDrag). A small move cancels the press,
+  // so a swipe still changes lane.
+  function enableHold(element, groups) {
+    element.addEventListener('pointerdown', (event) => {
+      if (!isPhone() || event.pointerType !== 'touch' || event.button !== 0) return;
+      const card = event.target.closest('.fx-job');
+      if (!card || event.target.closest('button, a')) return;
+      const startX = event.clientX;
+      const startY = event.clientY;
+      let held = false;
+      const timer = setTimeout(() => {
+        held = true;
+        dragged = true;
+        const from = Number(card.closest('.fx-board__col')?.dataset.lane);
+        openMoveSheet(cardJobs.get(card), groups, from);
+      }, PHONE_HOLD_MS);
+      // The release may land outside the card (a tap still ends on the page),
+      // so the press is watched on the document.
+      const stop = (end) => {
+        if (end.type === 'pointermove' && Math.hypot(end.clientX - startX, end.clientY - startY) <= 10) return;
+        clearTimeout(timer);
+        document.removeEventListener('pointermove', stop);
+        document.removeEventListener('pointerup', stop);
+        document.removeEventListener('pointercancel', stop);
+        if (held) setTimeout(() => { dragged = false; }, 0);
+      };
+      document.addEventListener('pointermove', stop);
+      document.addEventListener('pointerup', stop);
+      document.addEventListener('pointercancel', stop);
+      card.addEventListener('contextmenu', (menu) => { if (held) menu.preventDefault(); }, { once: true });
+    });
+  }
+
+  async function openMoveSheet(job, groups, from) {
+    const choices = groups.flatMap((group, index) => {
+      if (index === from || !group.drop) return [];
+      if (group.drop.kind !== 'field' && !movesStages(job)) return [];
+      return [{ label: group.label, value: String(index), detail: group.jobs.length }];
+    });
+    if (!choices.length || !job) return;
+    const picked = await ui.dialog({ title: 'Move to', choices });
+    const target = picked == null ? null : groups[Number(picked)];
+    if (target?.drop) moveJob(job, target.drop);
+  }
+
   // ── Moves ────────────────────────────────────────────────────────────────
   // Drag with a mouse or pen: press on a card, move 6px, and a copy of the
   // card follows the pointer. A lane that takes the card lights up. Touch
@@ -486,7 +579,7 @@ export async function renderJobs(main, ui) {
       drag = null;
     };
     element.addEventListener('pointerdown', (event) => {
-      if (event.button !== 0 || event.pointerType === 'touch') return;
+      if (event.button !== 0 || event.pointerType === 'touch' || isPhone()) return;
       const card = event.target.closest('.fx-job');
       if (!card || event.target.closest('button, a')) return;
       const rect = card.getBoundingClientRect();
@@ -1091,12 +1184,15 @@ export async function renderJobs(main, ui) {
 
   // The job's page: a large panel over the board, like a task page. A
   // breadcrumb, the client's name, the stage, the job's fields, what to fix
-  // and its lines. At the side (below on a phone), the sidecar: Activity,
-  // and Fix when the job has a problem (for a changed job: what changed,
-  // and Accept change). The sidecar closes, and the main area takes its room.
-  // Esc, the X or a click outside closes the panel. `atFix` opens the
-  // Fix tab on the first problem (or scrolls to the invoice choice). The job's custom fields can
-  // be changed here (in Flow only), and its stage moved (a hand-off to the
+  // and its lines. At the side, the sidecar: Activity, and Fix when the job
+  // has a problem (for a changed job: what changed, and Accept change). The
+  // sidecar closes, and the main area takes its room. On a phone the same
+  // panel is the whole screen: back (the board stays where it was scrolled),
+  // the client, the previous and next job, a menu, the sidecar's tabs under
+  // the bar, and the main action fixed at the foot. Esc, the X or a click
+  // outside closes the panel. `atFix` opens the Fix tab on the first problem
+  // (or scrolls to the invoice choice). The job's custom fields can be
+  // changed here (in Flow only), and its stage moved (a hand-off to the
   // work system).
   function openJob(job, { atFix = false } = {}) {
     const o = job.obligation;
@@ -1131,11 +1227,9 @@ export async function renderJobs(main, ui) {
       class: 'fx-task__fixchip', type: 'button', 'aria-pressed': 'false', onclick: () => toggleFix(i),
     }, lucide(h, 'triangle-alert'), f.label));
     function toggleFix(i) {
-      if (picked === i && side.tab() === 'fix') { side.close(); return; }
+      if (!isPhone() && picked === i && side.tab() === 'fix') { side.close(); return; }
       picked = i;
       side.open('fix');
-      // On a phone the sidecar is below the job: bring it into view.
-      if (matchMedia('(max-width: 720px)').matches) side.element.scrollIntoView({ block: 'start' });
     }
     // No invoice, and the match is unclear: one line and two buttons. The
     // possible matches are compared on the Reconcile page, not here.
@@ -1221,6 +1315,7 @@ export async function renderJobs(main, ui) {
     }, lucide(h, 'panel-right'));
     const side = sidecar(h, {
       label: 'Job side panel',
+      phone: 'page',
       tabs: [
         { id: 'activity', label: 'Activity', icon: 'history', render: () => activityBody },
         hasFix ? { id: 'fix', label: 'Fix', icon: 'triangle-alert', mark: true, render: () => { picked ??= 0; return fixBody(); } } : null,
@@ -1233,7 +1328,40 @@ export async function renderJobs(main, ui) {
       },
     });
     side.element.classList.add('fx-task__side');
-    element.append(h('div', { class: 'fx-task__grid' },
+    const jobs = state.found ?? [];
+    const at = jobs.findIndex((item) => jobKey(item) === jobKey(job));
+    // Back closes the page. The board is still underneath, at the same scroll.
+    const stepTo = (delta) => {
+      const other = jobs[at + delta];
+      if (!other) return;
+      const board = document.querySelector('.fx-board');
+      const frame = document.querySelector('.fx-frame__body');
+      const saved = { y: window.scrollY, frame: frame?.scrollTop ?? 0, board: board?.scrollLeft ?? 0 };
+      close();
+      openJob(other);
+      const restore = () => {
+        window.scrollTo(0, saved.y);
+        const nextFrame = document.querySelector('.fx-frame__body');
+        const nextBoard = document.querySelector('.fx-board');
+        if (nextFrame) nextFrame.scrollTop = saved.frame;
+        if (nextBoard) nextBoard.scrollLeft = saved.board;
+      };
+      restore();
+      requestAnimationFrame(restore);
+    };
+    const menuItems = [];
+    if (choose && o?.id) menuItems.push({ icon: 'git-compare', text: 'Reconcile', run: () => { close(); ui.go(`/reconcile/${o.id}`); } });
+    if (job.link?.url) menuItems.push({ icon: 'external-link', text: `Open in ${system}`, run: () => window.open(job.link.url, '_blank', 'noopener') });
+    const menu = menuItems.length ? rowMenu('More', menuItems, { className: 'fx-record__menu' }) : null;
+    const bar = recordBar(h, {
+      title: clientOf(job),
+      label: 'Job',
+      onBack: close,
+      prev: { label: 'Previous job', disabled: at <= 0, onclick: () => stepTo(-1) },
+      next: { label: 'Next job', disabled: at < 0 || at >= jobs.length - 1, onclick: () => stepTo(1) },
+      menu: menu?.[0] ?? null,
+    });
+    element.append(bar, h('div', { class: 'fx-task__grid' },
       h('div', { class: 'fx-task__main' },
         h('header', { class: 'fx-task__head' },
           h('nav', { class: 'fx-task__crumb', 'aria-label': 'Breadcrumb' },
@@ -1276,12 +1404,15 @@ export async function renderJobs(main, ui) {
             : h('p', { class: 'fx-dim' }, 'No lines.')),
         h('div', { class: 'fx-task__actions' }, actions(job, close))),
       side.element));
+    if (menu) element.append(menu[1]);
     element.addEventListener('click', (event) => { if (event.target === element) close(); });
     element.addEventListener('close', () => element.remove());
     document.body.append(element);
     element.showModal();
     const last = readSide();
-    if (atFix && hasFix) toggleFix(0);
+    // On a phone the tabs are the page, so the sidecar stays open.
+    if (isPhone()) side.open((atFix || last === 'fix') && hasFix ? 'fix' : 'activity');
+    else if (atFix && hasFix) toggleFix(0);
     else if (last !== 'closed') side.open(last === 'fix' && hasFix ? 'fix' : 'activity');
     if (atFix && chooseBox) chooseBox.scrollIntoView({ block: 'start' });
     if (!o) return;