domma-cms 0.55.1 → 0.66.0

package/plugins/contacts/plugin.js

@@ -1,9 +1,162 @@
+import path from 'path';
+import {fileURLToPath} from 'url';
+
 import defaultConfig from './config.js';
-import {createEntry, deleteEntry, getEntry, listEntries, updateEntry} from '../../server/services/collections.js';
+import {createEntry, deleteEntry, getCollection, getEntry, listEntries, updateCollection, updateEntry} from '../../server/services/collections.js';
+import {syncPluginSchemas} from '../_lib/schemaSync.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const CONTACTS_SLUG = 'contacts-contacts';
 const GROUPS_SLUG = 'contacts-groups';
 
+/**
+ * The fields a contact carries beyond a name and a phone number.
+ *
+ * Kept as one list so the create, update and import paths cannot drift apart -
+ * they each used to spell the field set out by hand, which is how a field gets
+ * added to two of the three and quietly dropped by the other.
+ */
+const TEXT_FIELDS = [
+    'name', 'email', 'phone', 'notes',
+    'company', 'jobTitle', 'website',
+    'vatNumber', 'companyNumber', 'reference', 'billingEmail', 'currency',
+    'accountName', 'bankName', 'sortCode', 'accountNumber', 'iban', 'bic'
+];
+
+/** Repeatable lists, each a array of small objects. */
+const LIST_FIELDS = ['addresses', 'emails', 'phones'];
+
+/** Parse a value that may have been stored as JSON text by an import or the API. */
+function toArray(value) {
+    if (Array.isArray(value)) return value;
+    if (typeof value === 'string' && value.trim()) {
+        try {
+            const parsed = JSON.parse(value);
+            return Array.isArray(parsed) ? parsed : [];
+        } catch {
+            return [];
+        }
+    }
+    return [];
+}
+
+const str = (v) => (typeof v === 'string' ? v.trim() : (v === undefined || v === null ? '' : String(v)));
+
+/**
+ * One address, with every part named.
+ *
+ * Stored as parts rather than a blob because an invoice, a letter and a
+ * delivery note each want them arranged differently - and because a postcode
+ * you cannot read out separately is not much use for anything.
+ */
+function cleanAddress(raw) {
+    return {
+        label:    str(raw?.label) || 'Address',
+        line1:    str(raw?.line1),
+        line2:    str(raw?.line2),
+        city:     str(raw?.city),
+        region:   str(raw?.region),
+        postcode: str(raw?.postcode),
+        country:  str(raw?.country),
+        isBilling: raw?.isBilling === true || raw?.isBilling === 'true'
+    };
+}
+
+function cleanEmail(raw) {
+    return { label: str(raw?.label) || 'Email', address: str(raw?.address) };
+}
+
+function cleanPhone(raw) {
+    return { label: str(raw?.label) || 'Phone', number: str(raw?.number) };
+}
+
+const CLEANERS = { addresses: cleanAddress, emails: cleanEmail, phones: cleanPhone };
+
+/** Coerce a repeatable list, dropping rows with nothing in them. */
+function cleanList(field, value) {
+    const clean = CLEANERS[field];
+    return toArray(value)
+        .map(clean)
+        .filter((row) => Object.entries(row).some(([k, v]) => k !== 'label' && v !== '' && v !== false));
+}
+
+/**
+ * An address as an invoice prints it: one line per part, blanks omitted.
+ *
+ * @param   {object} address
+ * @returns {string}
+ */
+export function formatAddress(address) {
+    if (!address) return '';
+    return [address.line1, address.line2, address.city, address.region, address.postcode, address.country]
+        .map(str)
+        .filter(Boolean)
+        .join('\n');
+}
+
+/**
+ * The address to bill to: the one marked for billing, else the first.
+ *
+ * @param   {object[]} addresses
+ * @returns {object|null}
+ */
+export function billingAddress(addresses) {
+    const list = toArray(addresses);
+    return list.find((a) => a?.isBilling) ?? list[0] ?? null;
+}
+
+/**
+ * A contact projected into the shape the Invoice plugin's receivers use.
+ *
+ * This is the join between the two plugins: the field names are Invoice's, not
+ * Contacts', so the caller can post it straight at `/api/plugins/invoice/receivers`.
+ *
+ * @param   {object} contact as returned by toContact()
+ * @returns {object}
+ */
+export function toBillingProfile(contact) {
+    const address = billingAddress(contact.addresses);
+    return {
+        name:      contact.name,
+        company:   contact.company,
+        // The billing address wins over the personal one, which is the whole
+        // point of having both - invoices go to accounts, not to a mobile.
+        email:     contact.billingEmail || contact.email,
+        phone:     contact.phone,
+        address:   formatAddress(address),
+        vatNumber: contact.vatNumber,
+        reference: contact.reference,
+        // An issuer prints these so the invoice can be paid; a receiver simply
+        // has none, and an empty string is what the Invoice plugin stores anyway.
+        bankDetails: formatBankDetails(contact)
+    };
+}
+
+/**
+ * Bank details as an invoice prints them: label and value, one per line,
+ * blanks omitted. Sort code and account number ride together on one line
+ * because that is how anyone reads them off a page.
+ *
+ * @param   {object} contact
+ * @returns {string}
+ */
+export function formatBankDetails(contact) {
+    const lines = [];
+    if (contact.accountName) lines.push(contact.accountName);
+    if (contact.bankName)    lines.push(contact.bankName);
+
+    const sort = str(contact.sortCode);
+    const acct = str(contact.accountNumber);
+    if (sort && acct)      lines.push(`Sort ${sort}  Acc ${acct}`);
+    else if (sort)         lines.push(`Sort ${sort}`);
+    else if (acct)         lines.push(`Acc ${acct}`);
+
+    if (contact.iban) lines.push(`IBAN ${str(contact.iban)}`);
+    if (contact.bic)  lines.push(`BIC ${str(contact.bic)}`);
+    return lines.join('\n');
+}
+
 /** Map a collection entry to the shape the admin view expects. */
 function toContact(entry) {
     let groups = entry.data.groups;
@@ -14,18 +167,20 @@ function toContact(entry) {
             groups = [];
         }
     }
-    return {
+    const contact = {
         id: entry.id,
-        name: entry.data.name ?? '',
-        email: entry.data.email ?? '',
-        phone: entry.data.phone ?? '',
         groups: Array.isArray(groups) ? groups : [],
-        notes: entry.data.notes ?? '',
         favourite: entry.data.favourite === true || entry.data.favourite === 'true',
+        paymentTerms: entry.data.paymentTerms === '' || entry.data.paymentTerms === undefined || entry.data.paymentTerms === null
+            ? null
+            : Number(entry.data.paymentTerms),
         userId: entry.data.userId ?? null,
         createdAt: entry.meta.createdAt,
         updatedAt: entry.meta.updatedAt
     };
+    for (const field of TEXT_FIELDS) contact[field] = entry.data[field] ?? '';
+    for (const field of LIST_FIELDS) contact[field] = toArray(entry.data[field]);
+    return contact;
 }
 
 function toGroupName(entry) {
@@ -34,6 +189,11 @@ function toGroupName(entry) {
 
 export default async function contactsPlugin(fastify, options) {
     const {authenticate} = options.auth;
+
+    // A collection is created once and never revisited, so the fields added
+    // here reach a fresh install and nowhere else without this.
+    await syncPluginSchemas(path.join(__dirname, 'collections'),
+        {getCollection, updateCollection}, fastify.log);
     const config = {...defaultConfig, ...(options.settings || {})};
     const scope = config.scope ?? 'user';
 
@@ -53,6 +213,30 @@ export default async function contactsPlugin(fastify, options) {
         return entries.map(e => ({id: e.id, name: toGroupName(e)}));
     }
 
+    /**
+     * Build the stored shape from whatever a caller sent.
+     *
+     * Used by create AND import so the two cannot drift - a field added to one
+     * and forgotten in the other is the bug this exists to prevent.
+     *
+     * @param   {object} raw
+     * @param   {string|null} uid
+     * @returns {object}
+     */
+    function buildContact(raw, uid) {
+        const data = {
+            groups: Array.isArray(raw.groups) ? raw.groups : [],
+            favourite: raw.favourite === true || raw.favourite === 'true',
+            paymentTerms: raw.paymentTerms === '' || raw.paymentTerms === undefined || raw.paymentTerms === null
+                ? ''
+                : (Number(raw.paymentTerms) || 0),
+            userId: uid ?? null
+        };
+        for (const field of TEXT_FIELDS) data[field] = str(raw[field]);
+        for (const field of LIST_FIELDS) data[field] = cleanList(field, raw[field]);
+        return data;
+    }
+
     // -------------------------------------------------------------------------
     // Contacts CRUD
     // -------------------------------------------------------------------------
@@ -86,21 +270,14 @@ export default async function contactsPlugin(fastify, options) {
     /** POST /api/plugins/contacts/contacts */
     fastify.post('/contacts', {preHandler: [authenticate]}, async (request, reply) => {
         const uid = userId(request);
-        const { name, email, phone, groups, notes, favourite } = request.body ?? {};
+        const body = request.body ?? {};
 
-        if (!name || typeof name !== 'string' || !name.trim()) {
+        if (!body.name || typeof body.name !== 'string' || !body.name.trim()) {
             return reply.code(400).send({ error: 'name is required' });
         }
 
-        const entry = await createEntry(CONTACTS_SLUG, {
-            name: name.trim(),
-            email: email?.trim() ?? '',
-            phone: phone?.trim() ?? '',
-            groups: Array.isArray(groups) ? groups : [],
-            notes: notes?.trim() ?? '',
-            favourite: favourite === true,
-            userId: uid ?? null
-        }, {createdBy: uid, source: 'admin'});
+        const entry = await createEntry(CONTACTS_SLUG, buildContact(body, uid),
+            {createdBy: uid, source: 'admin'});
 
         return reply.code(201).send(toContact(entry));
     });
@@ -116,9 +293,12 @@ export default async function contactsPlugin(fastify, options) {
         if (uid && entry.data.userId !== uid) return reply.code(404).send({error: 'Contact not found'});
 
         const merged = {...entry.data};
-        for (const key of ['name', 'email', 'phone', 'groups', 'notes', 'favourite']) {
+        for (const key of [...TEXT_FIELDS, 'groups', 'favourite', 'paymentTerms']) {
             if (key in updates) merged[key] = updates[key];
         }
+        for (const key of LIST_FIELDS) {
+            if (key in updates) merged[key] = cleanList(key, updates[key]);
+        }
 
         const updated = await updateEntry(CONTACTS_SLUG, id, merged);
         return reply.send(toContact(updated));
@@ -159,6 +339,21 @@ export default async function contactsPlugin(fastify, options) {
         return reply.send({ ok: true });
     });
 
+    /**
+     * GET /api/plugins/contacts/contacts/:id/billing
+     *
+     * The contact as the Invoice plugin wants a receiver: same field names, so
+     * the body can go straight to POST /api/plugins/invoice/receivers. Nothing
+     * in the CMS calls this yet - it is the seam, put where the data is.
+     */
+    fastify.get('/contacts/:id/billing', {preHandler: [authenticate]}, async (request, reply) => {
+        const uid = userId(request);
+        const entry = await getEntry(CONTACTS_SLUG, request.params.id);
+        if (!entry) return reply.code(404).send({error: 'Contact not found'});
+        if (uid && entry.data.userId !== uid) return reply.code(404).send({error: 'Contact not found'});
+        return reply.send(toBillingProfile(toContact(entry)));
+    });
+
     // -------------------------------------------------------------------------
     // Groups CRUD
     // -------------------------------------------------------------------------
@@ -274,15 +469,7 @@ export default async function contactsPlugin(fastify, options) {
         let imported = 0;
         for (const raw of incoming) {
             if (!raw || typeof raw.name !== 'string') continue;
-            await createEntry(CONTACTS_SLUG, {
-                name: raw.name?.trim() ?? '',
-                email: raw.email?.trim() ?? '',
-                phone: raw.phone?.trim() ?? '',
-                groups: Array.isArray(raw.groups) ? raw.groups : [],
-                notes: raw.notes?.trim() ?? '',
-                favourite: raw.favourite === true,
-                userId: uid ?? null
-            }, {source: 'import'});
+            await createEntry(CONTACTS_SLUG, buildContact(raw, uid), {source: 'import'});
             imported++;
         }
 

package/plugins/contacts/plugin.json

@@ -7,6 +7,9 @@
   "date": "2026-03-24",
   "icon": "users",
   "admin": {
+    "css": [
+      "admin/css/index.css"
+    ],
     "sidebar": [
       {
         "id": "contacts",
@@ -25,7 +28,7 @@
     ],
     "views": {
       "plugin-contacts": {
-        "entry": "contacts/admin/views/contacts.js?v=b7ed0c5c",
+        "entry": "contacts/admin/views/contacts.js?v=25e5dae4",
         "exportName": "contactsView"
       }
     }

package/plugins/invoice/admin/css/index.css

@@ -0,0 +1 @@
+.invoice-hidden{display:none!important}.invoice-editor{align-items:flex-start}.invoice-editor-main{flex:1;min-width:0}.invoice-editor-side{width:300px;flex-shrink:0}@media(max-width:900px){.invoice-editor{flex-wrap:wrap}.invoice-editor-side{width:100%}}.invoice-num,.invoice-line-total{font-variant-numeric:tabular-nums}#line-items-table th{font-weight:600;font-size:.85em}#line-items-table td{vertical-align:middle}#line-items-table .form-input{padding:.35rem .5rem}#line-items-table th.invoice-col-desc{width:44%}#line-items-table th.invoice-col-qty{width:13%;text-align:right}#line-items-table th.invoice-col-price{width:17%;text-align:right}#line-items-table th.invoice-col-total{width:18%;text-align:right}#line-items-table th.invoice-col-remove{width:8%}#line-items-table td.invoice-line-total{text-align:right}#line-items-table input[type=number]{text-align:right;font-variant-numeric:tabular-nums}.li-remove{font-size:1.1em;line-height:1;padding:.15rem .5rem;min-width:1.9rem}.invoice-number-link{font-weight:600}.invoice-row-actions{display:flex;gap:.4rem}#invoices-table td .invoice-num{display:block;text-align:right}#invoices-table th:nth-child(5){text-align:right}#invoices-table th:last-child,#invoices-table td:last-child{text-align:right;width:3rem}.invoice-party-form{display:flex;flex-direction:column;gap:.75rem;padding:.5rem}.invoice-party-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:.75rem}.stat-icon--danger{background:color-mix(in srgb,var(--dm-danger) 15%,transparent);color:var(--dm-danger)}.invoice-col-date,.invoice-col-method{width:22%}#payments-table th{font-weight:600;font-size:.85em}#payments-table td{vertical-align:middle}#payments-table td.invoice-line-total,#payments-table th.invoice-col-total{text-align:right}.invoice-balance strong{color:var(--dm-warning)}.invoice-balance.is-settled strong{color:var(--dm-success)}.invoice-toolbar .card-body{padding:.75rem 1rem}.invoice-toolbar-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.invoice-toolbar-row--sub{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--dm-border);font-size:.85rem}.invoice-toolbar-spacer{flex:1 1 auto}.invoice-search{position:relative;display:flex;align-items:center;flex:1 1 260px;min-width:200px}.invoice-search>[data-icon],.invoice-search>svg{position:absolute;left:.6rem;color:var(--dm-text-muted);pointer-events:none}.invoice-search .form-input{padding-left:2rem}.invoice-filter-narrow{width:auto;min-width:9rem}.invoice-field{display:flex;align-items:center;gap:.35rem;color:var(--dm-text-muted);white-space:nowrap}.invoice-field .form-input{width:auto}.invoice-check{display:flex;align-items:center;gap:.35rem;white-space:nowrap;cursor:pointer}.invoice-matches{white-space:nowrap}.invoice-hint{margin:-.25rem 0 .75rem}.invoice-row-menu{font-size:1.1rem;line-height:1;padding:.15rem .55rem}.invoice-settings{padding:.25rem}.invoice-settings .tab-panel{padding-top:.75rem}.invoice-settings-form{margin-bottom:.5rem}.invoice-settings-inline{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.invoice-settings-inline .form-label{margin:0;white-space:nowrap}.invoice-settings-inline .form-select{width:auto;min-width:12rem}.invoice-panel-head{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap}.invoice-number-preview{font-family:var(--dm-font-mono, monospace);color:var(--dm-text-muted);margin-bottom:.25rem}.invoice-slideover-resizer{padding:0;position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:2;background:transparent}.invoice-slideover-resizer:hover,.is-resizing>.invoice-slideover-resizer{background:var(--dm-primary);opacity:.7}.is-resizing{user-select:none;transition:none!important}.invoice-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem}.invoice-media-tile{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem;border:1px solid var(--dm-border);border-radius:var(--dm-radius-md, 8px);background:var(--dm-surface);cursor:pointer}.invoice-media-tile:hover{border-color:var(--dm-primary)}.invoice-media-tile img{max-width:100%;max-height:72px;object-fit:contain}.invoice-media-tile span{font-size:.7rem;color:var(--dm-text-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.invoice-logo-frame{display:flex;align-items:center;justify-content:center;min-height:110px;padding:.75rem;border:1px dashed var(--dm-border);border-radius:var(--dm-radius-md, 8px);background:var(--dm-background-alt)}.invoice-logo-preview{max-height:90px;max-width:100%;object-fit:contain}.invoice-media-row{display:flex;gap:.5rem;align-items:center}.invoice-media-row .form-input{flex:1 1 auto;min-width:0}.invoice-media-pick{flex:0 0 auto}.invoice-picker-filters{display:flex;gap:.5rem;margin-bottom:.6rem}.invoice-picker-filters .form-input{flex:1 1 auto}.invoice-picker-filters .form-select{width:auto}.invoice-picker-list{display:flex;flex-direction:column;gap:.2rem;max-height:60vh;overflow-y:auto}.invoice-picker-row{display:flex;align-items:baseline;gap:.6rem;width:100%;padding:.4rem .6rem;border:1px solid transparent;border-radius:var(--dm-radius-sm, 6px);background:transparent;text-align:left;cursor:pointer}.invoice-picker-row:hover{background:var(--dm-hover-bg, var(--dm-background-alt))}.invoice-picker-row.is-chosen{border-color:var(--dm-primary);background:color-mix(in srgb,var(--dm-primary) 10%,transparent)}.invoice-picker-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.invoice-picker-mail{color:var(--dm-text-muted);font-size:.8rem;white-space:nowrap}.invoice-picker-count{flex:1 1 auto}.invoice-recipient-actions{display:flex;gap:.5rem;margin-top:.35rem}.invoice-receiver-row{display:flex;gap:.5rem;align-items:center}.invoice-receiver-row .form-select{flex:1 1 auto;min-width:0}#kpi-outstanding{font-size:1.4rem;line-height:1.2;font-variant-numeric:tabular-nums}@media(max-width:1500px){#kpi-outstanding{font-size:1.15rem}}.invoice-empty{margin:.75rem 0 0;padding:.85rem 1rem;border:1px dashed var(--dm-border);border-radius:var(--dm-radius-md, 8px);text-align:center}.dm-plugin-body .card-header--quiet{background:transparent;border-bottom:0;padding:.65rem 1rem 0;min-height:0}.dm-plugin-body .card-header--quiet+.card-body{padding-top:.5rem}.invoice-cap{display:inline-flex;align-items:center;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dm-text-muted)}.invoice-kpi{cursor:pointer;transition:border-color .15s,transform .15s}.invoice-kpi:hover{border-color:var(--dm-primary);transform:translateY(-1px)}.invoice-kpi:active{transform:none}.invoice-setup{border-color:var(--dm-primary);margin-bottom:.75rem}.invoice-setup .card-body{display:flex;flex-direction:column;gap:.4rem}.invoice-setup p{margin:0}#btn-new-invoice:disabled{opacity:.5;cursor:not-allowed}.invoice-template-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.5rem;margin-bottom:.75rem}.invoice-template-card{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.6rem .75rem;text-align:left;background:var(--dm-surface);border:1px solid var(--dm-border);border-radius:var(--dm-radius-md, 8px);cursor:pointer}.invoice-template-card:hover{border-color:var(--dm-primary)}.invoice-template-card.is-chosen{border-color:var(--dm-primary);background:color-mix(in srgb,var(--dm-primary) 10%,transparent)}.invoice-template-name{font-size:.85rem}.invoice-template-desc{font-size:.72rem;color:var(--dm-text-muted);line-height:1.35}.invoice-template-tag{font-size:.6rem;margin-top:.15rem}.invoice-template-preview{width:100%;height:60vh;min-height:320px;border:1px solid var(--dm-border);border-radius:var(--dm-radius-md, 8px);background:#fff}.invoice-template-preview.is-loading{opacity:.5}

package/plugins/invoice/admin/templates/editor.html

@@ -1,30 +1,43 @@
-<div class="view-header d-flex align-items-center justify-content-between mb-4">
-  <h1 class="h3 mb-0" id="editor-title">New Invoice</h1>
-  <div class="d-flex gap-2">
-    <a id="btn-print" class="btn btn-secondary" href="#" target="_blank" style="display:none;">
-      <span data-icon="printer"></span> Print / PDF
-    </a>
-    <button id="btn-save" class="btn btn-primary">
+<!--
+  Every value on this screen is bound. The view builds an observable per field
+  and one computed per derived number, then calls M.applyBindings once - there
+  is no render function, and no path by which the DOM and the totals can drift.
+  The heading is removed by the admin's plugin shell (dedupeHeading), so nothing
+  per-record is bound to it.
+-->
+<div class="view-header">
+  <h1>Invoice</h1>
+  <div class="view-header-actions">
+    <button id="btn-print" type="button" class="btn btn-secondary" data-if="isEdit.value" data-on-click="openPrint">
+      <span data-icon="printer"></span> Print
+    </button>
+    <button id="btn-pdf" type="button" class="btn btn-secondary" data-if="canPdf.value" data-on-click="downloadPdf">
+      <span data-icon="download"></span> Download PDF
+    </button>
+    <button id="btn-send" type="button" class="btn btn-secondary" data-if="isEdit.value" data-on-click="sendInvoice">
+      <span data-icon="mail"></span> Send
+    </button>
+    <button id="btn-save" type="button" class="btn btn-primary" data-on-click="save">
       <span data-icon="save"></span> Save
     </button>
   </div>
 </div>
 
-<div class="d-flex gap-4" style="align-items:flex-start;">
+<div class="flex gap-4 invoice-editor">
 
-  <div style="flex:1; min-width:0;">
+  <div class="invoice-editor-main">
 
     <div class="card mb-3">
       <div class="card-body">
         <div class="grid grid-cols-2 gap-3">
           <div>
-            <label class="form-label">Invoice Number</label>
-            <input id="f-number" type="text" class="form-control font-monospace" placeholder="auto-generated">
-            <div class="text-muted small">Leave blank to auto-number</div>
+            <label class="form-label" for="f-number" data-help="Leave it blank and one is allocated when you save - per prefix, per year, never reused.">Invoice Number</label>
+            <input id="f-number" type="text" class="form-input font-mono" data-model="number.value" placeholder="auto-generated">
+            <div class="text-muted text-sm">Leave blank to auto-number</div>
           </div>
           <div>
-            <label class="form-label">Status</label>
-            <select id="f-status" class="form-select">
+            <label class="form-label" for="f-status">Status</label>
+            <select id="f-status" class="form-select" data-model="status.value">
               <option value="draft">Draft</option>
               <option value="sent">Sent</option>
               <option value="paid">Paid</option>
@@ -33,29 +46,47 @@
             </select>
           </div>
           <div>
-            <label class="form-label">Issue Date</label>
-            <input id="f-issue-date" type="date" class="form-control">
+            <label class="form-label" for="f-issue-date">Issue Date</label>
+            <!-- E.datePicker attaches to these; it writes ISO into the input and
+                 fires input/change, so data-model keeps working. -->
+            <input id="f-issue-date" type="text" class="form-input" data-model="issueDate.value">
           </div>
           <div>
-            <label class="form-label">Due Date</label>
-            <input id="f-due-date" type="date" class="form-control">
+            <label class="form-label" for="f-due-date" data-help="Filled in from your payment terms. Past this date a sent invoice reports itself overdue.">Due Date</label>
+            <input id="f-due-date" type="text" class="form-input" data-model="dueDate.value">
           </div>
           <div>
-            <label class="form-label">Issuer</label>
-            <select id="f-issuer" class="form-select"></select>
+            <label class="form-label" for="f-issuer" data-help="Which of your businesses is raising this. Manage them under the cog, in Issuers.">Issuer</label>
+            <select id="f-issuer" class="form-select"
+                    data-options="issuers.value"
+                    data-options-text="label"
+                    data-options-value="id"
+                    data-options-caption="'- select -'"
+                    data-model="issuerId.value"></select>
           </div>
           <div>
-            <label class="form-label">Receiver</label>
-            <select id="f-receiver" class="form-select"></select>
+            <label class="form-label" for="f-receiver" data-help="Who you are billing. From Contacts imports one, with its company name, billing address and VAT number.">Receiver</label>
+            <div class="invoice-receiver-row">
+              <select id="f-receiver" class="form-select"
+                      data-options="receivers.value"
+                      data-options-text="label"
+                      data-options-value="id"
+                      data-options-caption="'- select -'"
+                      data-model="receiverId.value"></select>
+              <button type="button" class="btn btn-sm btn-outline" data-if="canImport.value"
+                      data-on-click="importReceiver" title="Create a receiver from a contact">
+                From Contacts
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="card mb-3">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <strong>Line Items</strong>
-        <button id="btn-add-line" type="button" class="btn btn-sm btn-outline">
+      <div class="card-header card-header--quiet flex justify-between items-center">
+        <span class="invoice-cap" data-help="Prices are NET - VAT is applied once, to the total. Right-click a row to duplicate, move or remove it.">Line items</span>
+        <button id="btn-add-line" type="button" class="btn btn-sm btn-outline" data-on-click="addLine">
           <span data-icon="plus"></span> Add Line
         </button>
       </div>
@@ -63,62 +94,122 @@
         <table class="table mb-0" id="line-items-table">
           <thead>
             <tr>
-              <th style="width:55%;">Description</th>
-              <th style="width:10%;">Qty</th>
-              <th style="width:15%;">Unit (net)</th>
-              <th style="width:15%; text-align:right;">Total</th>
-              <th style="width:5%;"></th>
+              <th class="invoice-col-desc">Description</th>
+              <th class="invoice-col-qty">Qty</th>
+              <th class="invoice-col-price">Unit (net)</th>
+              <th class="invoice-col-total">Total</th>
+              <th class="invoice-col-remove"></th>
+            </tr>
+          </thead>
+          <!-- key=id is required: it is what keeps a row's own input focused
+               and uncommitted while the row above it is deleted. -->
+          <tbody id="line-items-body" data-each="lineItems.value key=id">
+            <tr>
+              <td><input type="text" class="form-input" data-model="description.value" placeholder="Description"></td>
+              <td><input type="number" class="form-input" min="0" step="0.01" data-model="quantity.value"></td>
+              <td><input type="number" class="form-input" min="0" step="0.01" data-model="unitPrice.value"></td>
+              <td class="invoice-line-total" data-bind-text="lineTotalText.value"></td>
+              <td>
+                <button type="button" class="btn btn-sm btn-ghost li-remove" title="Remove"
+                        data-on-click="$parent.removeLine($data)">&times;</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="card mb-3" data-if="isEdit.value">
+      <div class="card-header card-header--quiet flex justify-between items-center">
+        <span class="invoice-cap" data-help="Money received against this invoice. Settle the balance and the status moves to paid on its own.">Payments</span>
+        <button id="btn-record-payment" type="button" class="btn btn-sm btn-outline" data-on-click="recordPayment">
+          <span data-icon="plus"></span> Record Payment
+        </button>
+      </div>
+      <div class="card-body">
+        <table class="table mb-0" id="payments-table" data-if="hasPayments.value">
+          <thead>
+            <tr>
+              <th class="invoice-col-date">Date</th>
+              <th class="invoice-col-method">Method</th>
+              <th>Reference</th>
+              <th class="invoice-col-total">Amount</th>
+              <th class="invoice-col-remove"></th>
             </tr>
           </thead>
-          <tbody id="line-items-body"></tbody>
+          <tbody id="payments-body" data-each="payments.value key=id">
+            <tr>
+              <td data-bind-text="dateText"></td>
+              <td data-bind-text="methodText"></td>
+              <td data-bind-text="reference"></td>
+              <td class="invoice-line-total" data-bind-text="amountText.value"></td>
+              <td>
+                <button type="button" class="btn btn-sm btn-ghost li-remove" title="Remove"
+                        data-on-click="$parent.removePayment($data)">&times;</button>
+              </td>
+            </tr>
+          </tbody>
         </table>
+        <p class="text-muted text-sm mb-0" data-if="noPayments.value">Nothing recorded against this invoice yet.</p>
       </div>
     </div>
 
     <div class="card mb-3">
-      <div class="card-header"><strong>Notes</strong></div>
+      <div class="card-header card-header--quiet"><span class="invoice-cap" data-help="Printed on the invoice under the totals. Payment instructions, a purchase order number, a thank you.">Notes</span></div>
       <div class="card-body">
-        <textarea id="f-notes" class="form-control" rows="3" placeholder="Optional notes printed on the invoice"></textarea>
+        <textarea id="f-notes" class="form-textarea" rows="3" data-model="notes.value"
+                  placeholder="Optional notes printed on the invoice"></textarea>
       </div>
     </div>
   </div>
 
-  <div style="width:300px; flex-shrink:0;">
+  <div class="invoice-editor-side">
 
     <div class="card mb-3">
-      <div class="card-header"><strong>Totals</strong></div>
+      <div class="card-header card-header--quiet"><span class="invoice-cap">Totals</span></div>
       <div class="card-body">
-        <div class="d-flex justify-content-between mb-2">
+        <div class="flex justify-between mb-2">
           <span class="text-muted">Subtotal</span>
-          <span id="t-subtotal" style="font-variant-numeric:tabular-nums;">-</span>
+          <span class="invoice-num" data-bind-text="subtotalText.value"></span>
         </div>
-        <div class="d-flex justify-content-between mb-2" id="vat-row">
-          <span class="text-muted">VAT (<span id="t-vat-rate">20</span>%)</span>
-          <span id="t-vat" style="font-variant-numeric:tabular-nums;">-</span>
+        <div class="flex justify-between mb-2" id="vat-row" data-if="vatEnabled.value">
+          <span class="text-muted">VAT (<span data-bind-text="vatRate.value"></span>%)</span>
+          <span class="invoice-num" data-bind-text="vatText.value"></span>
         </div>
         <hr>
-        <div class="d-flex justify-content-between">
+        <div class="flex justify-between">
           <strong>Total</strong>
-          <strong id="t-total" style="font-variant-numeric:tabular-nums;">-</strong>
+          <strong class="invoice-num" data-bind-text="totalText.value"></strong>
+        </div>
+        <div class="flex justify-between mt-2" data-if="hasPayments.value">
+          <span class="text-muted">Paid</span>
+          <span class="invoice-num" data-bind-text="paidText.value"></span>
+        </div>
+        <div class="flex justify-between mt-1 invoice-balance" data-if="hasPayments.value" data-bind-class="settled.value && 'is-settled'">
+          <strong data-bind-text="balanceLabel.value"></strong>
+          <strong class="invoice-num" data-bind-text="balanceText.value"></strong>
         </div>
       </div>
     </div>
 
     <div class="card mb-3">
-      <div class="card-header"><strong>VAT</strong></div>
+      <div class="card-header card-header--quiet"><span class="invoice-cap" data-help="One rate for the whole invoice, applied to the net total. Switch it off for a non-VAT invoice.">VAT</span></div>
       <div class="card-body">
-        <label class="d-flex align-items-center gap-2 mb-2" style="cursor:pointer;">
-          <input id="f-vat-enabled" type="checkbox" checked> Apply VAT
+        <!-- .form-checkbox is a WRAPPER in Domma; the class that styles the box
+             itself is .form-check-input (appearance:none, primary fill, tick). -->
+        <label class="form-check mb-2" for="f-vat-enabled">
+          <input id="f-vat-enabled" type="checkbox" class="form-check-input" data-model="vatEnabled.value">
+          <span class="form-check-label">Apply VAT</span>
         </label>
-        <label class="form-label">Rate %</label>
-        <input id="f-vat-rate" type="number" min="0" max="100" step="0.01" class="form-control" value="20">
+        <label class="form-label" for="f-vat-rate">Rate %</label>
+        <input id="f-vat-rate" type="number" min="0" max="100" step="0.01" class="form-input" data-model="vatRate.value">
       </div>
     </div>
 
     <div class="card mb-3">
-      <div class="card-header"><strong>Currency</strong></div>
+      <div class="card-header card-header--quiet"><span class="invoice-cap" data-help="Set per invoice. The default for new ones lives under the cog, in Defaults.">Currency</span></div>
       <div class="card-body">
-        <select id="f-currency" class="form-select">
+        <select id="f-currency" class="form-select" data-model="currency.value">
           <option value="GBP">GBP - British Pound</option>
           <option value="EUR">EUR - Euro</option>
           <option value="USD">USD - US Dollar</option>