@arcforgelabs/flow 2026.10.42 → 2026.10.44

package/server/ui/invoicing-settings.js

@@ -1,15 +1,15 @@
-// Settings, Invoicing (/invoicing-settings): payment terms, the draft
-// automation, and the lab's own rules a ready job passes before Flow drafts
-// its invoice (invoice-rules.js, docs/INVOICE_RULES.md). Invoicing needs no integration: how an invoice
-// goes to Xero is on the Xero integration page (sendModeSection).
-// Draft when ready is an automation (server/core/automations.js); the
-// Seazona integration page holds the rule that marks a job ready.
-// One row for each setting: its name, one short line, and its control. A
-// change saves at once. Everyone can read them; an owner or admin changes
-// them. The full rules are in docs/INVOICING_RULES.md. app.js passes in its
-// shared pieces as `ui`.
+// Settings, Rules (/invoicing-settings): a section of cards for each part,
+// like Claude's Customize page, and one page for each
+// (/invoicing-settings/<key>).
+// Drafts holds payment terms and the Reference; Price codes the lines with no
+// price item (line-mappings.js); Invoices the checks a ready job passes
+// before Flow drafts its invoice (invoice-rules.js, docs/INVOICE_RULES.md).
+// Automations have their own page (automations.js).
+// How an invoice goes to Xero is on the Xero integration page
+// (sendModeSection). A change saves at once. Everyone can read them; an owner
+// or admin changes them. The full rules are in docs/INVOICING_RULES.md.
+// app.js passes in its shared pieces as `ui`.
 
-import { automationSection } from '/assets/ui/automations.js';
 import { rulesSection } from '/assets/ui/invoice-rules.js';
 import { lineMappingSection } from '/assets/ui/line-mappings.js';
 
@@ -20,19 +20,73 @@ const SEND_MODES = [
   { value: 'approve_and_email', label: 'Approved and emailed' },
 ];
 
-export async function renderInvoicingSettings(main, ui) {
-  const { h, flow, toast, notice, pageHeader, me } = ui;
-  const host = h('div', { class: 'fx-card', style: { padding: '8px 20px 16px' } }, h('div', { class: 'fx-skeleton' }));
-  main.append(pageHeader('Invoice rules', { subtitle: 'The rules Flow uses to draft each invoice.' }), host);
-  let body;
-  try {
-    body = await flow('/api/invoicing/settings');
-  } catch (error) {
-    host.replaceChildren(notice(error.message, 'danger'));
+// The parts of Rules, each on its own page (/invoicing-settings/<key>).
+const PARTS = [
+  { key: 'invoices', title: 'Invoices', mount: (ui) => rulesSection(ui, 'Invoices') },
+  { key: 'drafts', title: 'Drafts', mount: (ui) => draftsSection(ui) },
+  { key: 'price-codes', title: 'Price codes', mount: (ui) => lineMappingSection(ui) },
+];
+
+// What a rule does, as its card's mark: Pending, Waits, Never drafted.
+const KIND = {
+  pending: { mark: 'flag' },
+  wait: { mark: 'clock' },
+  skip: { mark: 'ban' },
+};
+const SHOWN = 6;
+
+export function renderInvoicingSettings(main, ui, id) {
+  const { h, flow, notice, pageHeader, tileCard, tileSection, crumbs } = ui;
+  if (id) {
+    const part = PARTS.find((p) => p.key === id);
+    main.append(crumbs(['/invoicing-settings', 'Rules'], part?.title ?? 'Not found'),
+      part ? h('div', { class: 'fx-card', style: { padding: '8px 20px 16px' } }, part.mount(ui)) : notice('No such part of Rules.', 'danger'));
     return;
   }
+  // The landing is Claude's Customize page: a section for each part, one-line
+  // cards, and "Show all" to the part's own page, a list.
+  const host = h('div', { style: { display: 'grid', gap: '20px' } }, h('div', { class: 'fx-skeleton' }));
+  main.append(pageHeader('Rules'), host);
+  const page = (key) => `/invoicing-settings/${key}`;
+  (async () => {
+    let settings;
+    let labels;
+    let rules;
+    try {
+      [{ settings }, { labels }, { rules }] = await Promise.all([
+        flow('/api/invoicing/settings'), flow('/api/invoicing/line-labels'), flow('/api/invoicing/rules')]);
+    } catch (error) {
+      host.replaceChildren(notice(error.message, 'danger'));
+      return;
+    }
+    const ruleCard = (rule) => tileCard({
+      row: true, href: page('invoices'), mark: (KIND[rule.action.kind] ?? { mark: 'list-checks' }).mark, title: rule.name,
+      meta: rule.enabled ? 'On' : 'Off',
+    });
+    const waiting = labels.filter((l) => l.unmapped > 0).length;
+    host.replaceChildren(
+      tileSection('Invoices', rules.length ? rules.slice(0, SHOWN).map(ruleCard) : [h('p', { class: 'fx-dim' }, 'No rules yet.')],
+        { href: page('invoices'), more: rules.length > SHOWN ? `Show all ${rules.length}` : 'Show all' }),
+      tileSection('Drafts', [
+        tileCard({ row: true, href: page('drafts'), mark: 'calendar-clock', title: 'Payment terms', meta: `${settings.paymentTermsDays} days` }),
+        tileCard({ row: true, href: page('drafts'), mark: 'text-cursor-input', title: 'Reference' }),
+      ], { href: page('drafts') }),
+      tileSection('Price codes', [
+        tileCard({
+          row: true, href: page('price-codes'), mark: 'tag', title: 'Line labels',
+          status: waiting ? { label: `${waiting} wait`, tone: 'warn' } : { label: 'All mapped', tone: 'success' },
+        }),
+      ], { href: page('price-codes') }),
+    );
+  })();
+}
+
+// Payment terms and the Reference template.
+function draftsSection(ui) {
+  const { h, flow, toast, notice, me } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
-  let saved = body.settings;
+  const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, 'Drafts'), h('div', { class: 'fx-skeleton' }));
+  let saved;
 
   async function save(changes, control) {
     control.disabled = true;
@@ -60,19 +114,23 @@ export async function renderInvoicingSettings(main, ui) {
     });
     return input;
   };
-  const days = (key, label) => box(key, label, { type: 'number', read: Number });
 
-  const section = (title, ...rows) => h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, title), ...rows);
-  host.replaceChildren(...[
-    disabled ? notice('Only an owner or admin can change these.', 'info') : null,
-    section('Drafts',
-      row('Payment terms', 'Days from invoice to due date.', days('paymentTermsDays', 'Payment terms in days')),
+  (async () => {
+    try {
+      saved = (await flow('/api/invoicing/settings')).settings;
+    } catch (error) {
+      section.replaceChildren(h('h2', { class: 'fx-set__title' }, 'Drafts'), notice(error.message, 'danger'));
+      return;
+    }
+    section.replaceChildren(...[
+      h('h2', { class: 'fx-set__title' }, 'Drafts'),
+      disabled ? notice('Only an owner or admin can change these.', 'info') : null,
+      row('Payment terms', 'Days from invoice to due date.', box('paymentTermsDays', 'Payment terms in days', { type: 'number', read: Number })),
       row('Reference', 'The Reference on each invoice. Use {practitioner} and {patient}.',
-        box('referenceTemplate', 'Reference rule', { placeholder: '{practitioner} - {patient}' }))),
-    lineMappingSection(ui),
-    automationSection(ui, 'invoicing', 'Automations'),
-    rulesSection(ui),
-  ].filter(Boolean));
+        box('referenceTemplate', 'Reference rule', { placeholder: 'Type a reference rule' })),
+    ].filter(Boolean));
+  })();
+  return section;
 }
 
 // The Xero integration page's "Sending" section: how a checked invoice goes to
@@ -82,11 +140,10 @@ export function sendModeSection(ui) {
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const select = h('select', { class: 'fx-select', 'aria-label': 'Send to Xero as', disabled },
     SEND_MODES.map((m) => h('option', { value: m.value }, m.label)));
-  const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, 'Sending'),
+  const section = h('section', { class: 'fx-set' }, ui.sectionTitle('Sending', { href: DOCS, label: 'How sending works' }),
     h('div', { class: 'fx-set__row' },
       h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, 'Send to Xero as'), h('span', { class: 'fx-set__hint' }, 'Draft: approve in Xero. Approved: Xero emails it.')),
-      h('div', { class: 'fx-set__control' }, select)),
-    h('p', { class: 'fx-dim', style: { margin: '8px 0 0' } }, h('a', { href: DOCS, target: '_blank', rel: 'noopener' }, 'How sending works')));
+      h('div', { class: 'fx-set__control' }, select)));
   let saved = null;
   (async () => {
     try {