domma-cms 0.15.0 → 0.16.0

package/plugins/blog/plugin.js

@@ -51,9 +51,142 @@ function toComment(entry) {
     };
 }
 
+// ---------------------------------------------------------------------------
+// Embed shortcodes — register `[blog-list]`, `[blog-grid]`, `[blog-featured]`,
+// `[blog-categories]` so users can drop blog content into any page.
+// ---------------------------------------------------------------------------
+
+function escapeHtml(str) {
+    return String(str ?? '')
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+function formatDate(iso) {
+    if (!iso) return '';
+    return new Date(iso).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+}
+
+function isVisible(post) {
+    return post.status === 'published'
+        || (post.status === 'scheduled' && post.publishedAt && new Date(post.publishedAt) <= new Date());
+}
+
+async function loadPosts() {
+    const result = await listEntries(POSTS_SLUG, { limit: 100000, sort: 'createdAt', order: 'desc' });
+    const arr = Array.isArray(result) ? result : (result?.entries || []);
+    return arr.map((e) => ({ id: e.id, ...(e.data ?? e) }));
+}
+
+async function loadCategories() {
+    const result = await listEntries(CATEGORIES_SLUG, { limit: 10000 });
+    const arr = Array.isArray(result) ? result : (result?.entries || []);
+    return arr.map((e) => ({ id: e.id, ...(e.data ?? e) }));
+}
+
+function selectPosts(posts, { limit, categorySlug, categoryMap }) {
+    let filtered = posts.filter(isVisible);
+    if (categorySlug && categoryMap) {
+        const cat = Object.values(categoryMap).find((c) => c.slug === categorySlug);
+        if (!cat) return [];
+        filtered = filtered.filter((p) => Array.isArray(p.categories) && p.categories.includes(cat.id));
+    }
+    filtered.sort((a, b) => new Date(b.publishedAt || 0) - new Date(a.publishedAt || 0));
+    if (limit) filtered = filtered.slice(0, limit);
+    return filtered;
+}
+
+function renderEmbedCard(post, base, { showImage = true } = {}) {
+    const image = showImage && post.featuredImage
+        ? `<a href="${base}/${escapeHtml(post.slug)}"><img src="${escapeHtml(post.featuredImage)}" alt="${escapeHtml(post.title)}" class="blog-embed-image"></a>`
+        : '';
+    return `<article class="card mb-3 blog-embed-card">
+  ${image}
+  <div class="card-body">
+    <h3 class="h5"><a href="${base}/${escapeHtml(post.slug)}">${escapeHtml(post.title)}</a></h3>
+    <p class="text-muted small mb-2">${formatDate(post.publishedAt)}</p>
+    ${post.excerpt ? `<p class="mb-0">${escapeHtml(post.excerpt)}</p>` : ''}
+  </div>
+</article>`;
+}
+
+function registerEmbedShortcodes(registerShortcode, basePath) {
+    registerShortcode('blog-list', async (attrStr, _body, ctx) => {
+        const attrs = ctx.parseShortcodeAttrs(attrStr);
+        const limit = parseInt(attrs.count ?? attrs.limit ?? '5', 10) || 5;
+        const [posts, categories] = await Promise.all([loadPosts(), loadCategories()]);
+        const categoryMap = Object.fromEntries(categories.map((c) => [c.id, c]));
+        const selected = selectPosts(posts, { limit, categorySlug: attrs.category, categoryMap });
+        if (!selected.length) return '<p class="text-muted">No posts to show.</p>';
+        const items = selected.map((p) => `<li class="mb-2">
+  <a href="${basePath}/${escapeHtml(p.slug)}" class="d-block">
+    <strong>${escapeHtml(p.title)}</strong>
+  </a>
+  <span class="text-muted small">${formatDate(p.publishedAt)}</span>
+</li>`).join('');
+        return `<ul class="list-unstyled blog-embed-list">${items}</ul>`;
+    });
+
+    registerShortcode('blog-grid', async (attrStr, _body, ctx) => {
+        const attrs = ctx.parseShortcodeAttrs(attrStr);
+        const limit = parseInt(attrs.count ?? attrs.limit ?? '6', 10) || 6;
+        const cols = Math.max(1, Math.min(4, parseInt(attrs.cols ?? '3', 10) || 3));
+        const [posts, categories] = await Promise.all([loadPosts(), loadCategories()]);
+        const categoryMap = Object.fromEntries(categories.map((c) => [c.id, c]));
+        const selected = selectPosts(posts, { limit, categorySlug: attrs.category, categoryMap });
+        if (!selected.length) return '<p class="text-muted">No posts to show.</p>';
+        const cards = selected.map((p) => renderEmbedCard(p, basePath, { showImage: true })).join('');
+        return `<div class="grid grid-cols-${cols} gap-3 blog-embed-grid">${cards}</div>`;
+    });
+
+    registerShortcode('blog-featured', async (attrStr, _body, ctx) => {
+        const attrs = ctx.parseShortcodeAttrs(attrStr);
+        const posts = await loadPosts();
+        let post;
+        if (attrs.slug) {
+            post = posts.find((p) => p.slug === attrs.slug && isVisible(p));
+        } else {
+            post = posts.filter(isVisible)
+                .sort((a, b) => new Date(b.publishedAt || 0) - new Date(a.publishedAt || 0))[0];
+        }
+        if (!post) return '<p class="text-muted">No featured post available.</p>';
+        const image = post.featuredImage
+            ? `<a href="${basePath}/${escapeHtml(post.slug)}"><img src="${escapeHtml(post.featuredImage)}" alt="${escapeHtml(post.title)}" class="blog-featured-image"></a>`
+            : '';
+        return `<article class="card blog-featured-card mb-4">
+  ${image}
+  <div class="card-body">
+    <h2><a href="${basePath}/${escapeHtml(post.slug)}">${escapeHtml(post.title)}</a></h2>
+    <p class="text-muted small mb-3">${formatDate(post.publishedAt)}</p>
+    ${post.excerpt ? `<p>${escapeHtml(post.excerpt)}</p>` : ''}
+    <a href="${basePath}/${escapeHtml(post.slug)}" class="btn btn-primary">Read more</a>
+  </div>
+</article>`;
+    });
+
+    registerShortcode('blog-categories', async (attrStr, _body, ctx) => {
+        const attrs = ctx.parseShortcodeAttrs(attrStr);
+        const showCounts = attrs['show-counts'] === 'true' || attrs.counts === 'true';
+        const [posts, categories] = await Promise.all([loadPosts(), loadCategories()]);
+        if (!categories.length) return '<p class="text-muted">No categories yet.</p>';
+        const visible = posts.filter(isVisible);
+        const items = categories.map((c) => {
+            const count = visible.filter((p) => Array.isArray(p.categories) && p.categories.includes(c.id)).length;
+            const countSpan = showCounts ? ` <span class="badge badge-secondary">${count}</span>` : '';
+            return `<li class="mb-2"><a href="${basePath}/category/${escapeHtml(c.slug)}">${escapeHtml(c.name)}</a>${countSpan}</li>`;
+        }).join('');
+        return `<ul class="list-unstyled blog-embed-categories">${items}</ul>`;
+    });
+}
+
 export default async function blogPlugin(fastify, options) {
     const { authenticate, requireAdmin } = options.auth;
     const settings = { ...defaultConfig, ...(options.settings || {}) };
+    const basePath = (settings.basePath ?? '/blog').replace(/\/$/, '');
+
+    if (options.hooks?.registerShortcode) {
+        registerEmbedShortcodes(options.hooks.registerShortcode, basePath);
+    }
 
     // -------------------------------------------------------------------------
     // Posts

package/plugins/blog/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "blog",
   "displayName": "Blog",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Public-facing blog with posts, categories, and comments.",
   "author": "Domma CMS",
   "date": "2026-04-07",
@@ -72,11 +72,11 @@
     ],
     "views": {
       "plugin-blog-posts": {
-        "entry": "blog/admin/views/blog.js?v=73a4a936",
+        "entry": "blog/admin/views/blog.js?v=2722ac2e",
         "exportName": "blogView"
       },
       "plugin-blog-post-editor": {
-        "entry": "blog/admin/views/post-editor.js?v=3288949c",
+        "entry": "blog/admin/views/post-editor.js?v=d3f2c327",
         "exportName": "postEditorView"
       },
       "plugin-blog-categories": {

package/plugins/blog/templates/post.html

@@ -1,10 +1,11 @@
 <main class="container" style="padding: 2rem 0;">
-  <article>
+  <article class="blog-post">
     <header class="mb-4">
       <h1>{{title}}</h1>
       <p class="text-muted">by {{authorName}} &bull; <time>{{publishedAt}}</time></p>
       <div class="mb-2">{{categories}}{{tags}}</div>
     </header>
+    {{featuredImage}}
     <div class="post-content mb-5">
       {{content}}
     </div>

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

@@ -0,0 +1,129 @@
+<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">
+      <span data-icon="save"></span> Save
+    </button>
+  </div>
+</div>
+
+<div class="d-flex gap-4" style="align-items:flex-start;">
+
+  <div style="flex:1; min-width:0;">
+
+    <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>
+          </div>
+          <div>
+            <label class="form-label">Status</label>
+            <select id="f-status" class="form-select">
+              <option value="draft">Draft</option>
+              <option value="sent">Sent</option>
+              <option value="paid">Paid</option>
+              <option value="overdue">Overdue</option>
+              <option value="cancelled">Cancelled</option>
+            </select>
+          </div>
+          <div>
+            <label class="form-label">Issue Date</label>
+            <input id="f-issue-date" type="date" class="form-control">
+          </div>
+          <div>
+            <label class="form-label">Due Date</label>
+            <input id="f-due-date" type="date" class="form-control">
+          </div>
+          <div>
+            <label class="form-label">Issuer</label>
+            <select id="f-issuer" class="form-select"></select>
+          </div>
+          <div>
+            <label class="form-label">Receiver</label>
+            <select id="f-receiver" class="form-select"></select>
+          </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">
+          <span data-icon="plus"></span> Add Line
+        </button>
+      </div>
+      <div class="card-body">
+        <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>
+            </tr>
+          </thead>
+          <tbody id="line-items-body"></tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="card mb-3">
+      <div class="card-header"><strong>Notes</strong></div>
+      <div class="card-body">
+        <textarea id="f-notes" class="form-control" rows="3" placeholder="Optional notes printed on the invoice"></textarea>
+      </div>
+    </div>
+  </div>
+
+  <div style="width:300px; flex-shrink:0;">
+
+    <div class="card mb-3">
+      <div class="card-header"><strong>Totals</strong></div>
+      <div class="card-body">
+        <div class="d-flex justify-content-between mb-2">
+          <span class="text-muted">Subtotal</span>
+          <span id="t-subtotal" style="font-variant-numeric:tabular-nums;">—</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>
+        <hr>
+        <div class="d-flex justify-content-between">
+          <strong>Total</strong>
+          <strong id="t-total" style="font-variant-numeric:tabular-nums;">—</strong>
+        </div>
+      </div>
+    </div>
+
+    <div class="card mb-3">
+      <div class="card-header"><strong>VAT</strong></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
+        </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">
+      </div>
+    </div>
+
+    <div class="card mb-3">
+      <div class="card-header"><strong>Currency</strong></div>
+      <div class="card-body">
+        <select id="f-currency" class="form-select">
+          <option value="GBP">GBP — British Pound</option>
+          <option value="EUR">EUR — Euro</option>
+          <option value="USD">USD — US Dollar</option>
+        </select>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,43 @@
+<div class="view-header d-flex align-items-center justify-content-between mb-4">
+  <h1 class="h3 mb-0"><span data-icon="file-text"></span> Invoices</h1>
+  <button id="btn-new-invoice" class="btn btn-primary">
+    <span data-icon="plus"></span> New Invoice
+  </button>
+</div>
+
+<div class="grid grid-cols-4 gap-3 mb-4">
+  <div class="card"><div class="card-body">
+    <div class="text-muted small">Total invoices</div>
+    <div class="h3 mb-0" id="kpi-total">—</div>
+  </div></div>
+  <div class="card"><div class="card-body">
+    <div class="text-muted small">Outstanding</div>
+    <div class="h3 mb-0" id="kpi-outstanding">—</div>
+  </div></div>
+  <div class="card"><div class="card-body">
+    <div class="text-muted small">Paid</div>
+    <div class="h3 mb-0" id="kpi-paid">—</div>
+  </div></div>
+  <div class="card"><div class="card-body">
+    <div class="text-muted small">Drafts</div>
+    <div class="h3 mb-0" id="kpi-drafts">—</div>
+  </div></div>
+</div>
+
+<div class="card mb-3">
+  <div class="card-body">
+    <div class="d-flex gap-2 flex-wrap">
+      <select id="filter-status" class="form-select" style="width:auto;">
+        <option value="">All statuses</option>
+        <option value="draft">Draft</option>
+        <option value="sent">Sent</option>
+        <option value="paid">Paid</option>
+        <option value="overdue">Overdue</option>
+        <option value="cancelled">Cancelled</option>
+      </select>
+      <input id="filter-search" type="search" class="form-control" style="width:240px;" placeholder="Search number or receiver…">
+    </div>
+  </div>
+</div>
+
+<div id="invoices-table"></div>

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

@@ -0,0 +1,5 @@
+<div class="view-header d-flex align-items-center justify-content-between mb-4">
+  <h1 class="h3 mb-0"><span data-icon="briefcase"></span> Issuers</h1>
+  <button id="btn-new" class="btn btn-primary"><span data-icon="plus"></span> New Issuer</button>
+</div>
+<div id="party-table"></div>

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

@@ -0,0 +1,5 @@
+<div class="view-header d-flex align-items-center justify-content-between mb-4">
+  <h1 class="h3 mb-0"><span data-icon="users"></span> Receivers</h1>
+  <button id="btn-new" class="btn btn-primary"><span data-icon="plus"></span> New Receiver</button>
+</div>
+<div id="party-table"></div>

package/plugins/invoice/admin/views/editor.js

@@ -0,0 +1,267 @@
+/**
+ * Invoice plugin — editor view. Create or edit a single invoice.
+ */
+function escapeHtml(s) {
+    return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+function fmt(amount, currency) {
+    try {
+        return new Intl.NumberFormat('en-GB', { style: 'currency', currency: currency || 'GBP' }).format(Number(amount) || 0);
+    } catch {
+        return `${currency || 'GBP'} ${Number(amount).toFixed(2)}`;
+    }
+}
+
+function round2(n) {
+    return Math.round((Number(n) + Number.EPSILON) * 100) / 100;
+}
+
+const BASE = '/api/plugins/invoice';
+
+export const editorView = {
+    templateUrl: '/plugins/invoice/admin/templates/editor.html',
+
+    async onMount($container) {
+        const id = R.current?.params?.id ?? null;
+        const isEdit = Boolean(id);
+        let invoice = null;
+        let issuers = [];
+        let receivers = [];
+        let lineItems = [];
+
+        try {
+            const [issRes, recRes] = await Promise.all([
+                H.get(`${BASE}/issuers`),
+                H.get(`${BASE}/receivers`)
+            ]);
+            issuers   = issRes.data ?? issRes ?? [];
+            receivers = recRes.data ?? recRes ?? [];
+        } catch {
+            E.toast('Could not load issuers / receivers.', { type: 'error' });
+        }
+
+        if (isEdit) {
+            try {
+                const res = await H.get(`${BASE}/invoices/${id}`);
+                invoice = res.data ?? res;
+                lineItems = Array.isArray(invoice.lineItems) ? [...invoice.lineItems] : [];
+            } catch {
+                E.toast('Invoice not found.', { type: 'error' });
+                R.navigate('#/plugins/invoice');
+                return;
+            }
+        }
+
+        const $title       = $container.find('#editor-title');
+        const $number      = $container.find('#f-number');
+        const $status      = $container.find('#f-status');
+        const $issueDate   = $container.find('#f-issue-date');
+        const $dueDate     = $container.find('#f-due-date');
+        const $issuer      = $container.find('#f-issuer');
+        const $receiver    = $container.find('#f-receiver');
+        const $vatEnabled  = $container.find('#f-vat-enabled');
+        const $vatRate     = $container.find('#f-vat-rate');
+        const $currency    = $container.find('#f-currency');
+        const $notes       = $container.find('#f-notes');
+        const $print       = $container.find('#btn-print');
+        const $body        = $container.find('#line-items-body');
+        const $vatRow      = $container.find('#vat-row');
+        const $tSubtotal   = $container.find('#t-subtotal');
+        const $tVat        = $container.find('#t-vat');
+        const $tVatRate    = $container.find('#t-vat-rate');
+        const $tTotal      = $container.find('#t-total');
+
+        function populateSelect($select, list, valueKey, labelFn, selected) {
+            const el = $select.get(0);
+            while (el.firstChild) el.removeChild(el.firstChild);
+            const placeholder = document.createElement('option');
+            placeholder.value = '';
+            placeholder.textContent = '— select —';
+            el.appendChild(placeholder);
+            for (const item of list) {
+                const opt = document.createElement('option');
+                opt.value = item[valueKey];
+                opt.textContent = labelFn(item);
+                if (item[valueKey] === selected) opt.selected = true;
+                el.appendChild(opt);
+            }
+        }
+
+        populateSelect($issuer, issuers, 'id', (i) => i.name || '(unnamed)', invoice?.issuerId);
+        populateSelect($receiver, receivers, 'id', (r) => r.company || r.name || '(unnamed)', invoice?.receiverId);
+
+        const today = new Date().toISOString().slice(0, 10);
+        $title.text(isEdit ? `Edit Invoice ${invoice?.number ?? ''}` : 'New Invoice');
+        $number.val(invoice?.number ?? '');
+        $status.val(invoice?.status ?? 'draft');
+        $issueDate.val(invoice?.issueDate ?? today);
+        $dueDate.val(invoice?.dueDate ?? '');
+        $vatEnabled.prop('checked', invoice?.vatEnabled !== false);
+        $vatRate.val(invoice?.vatRate ?? 20);
+        $currency.val(invoice?.currency ?? 'GBP');
+        $notes.val(invoice?.notes ?? '');
+
+        if (isEdit) {
+            $print.attr('href', `${BASE}/invoices/${id}/print`).css('display', '');
+        }
+
+        if (!lineItems.length) {
+            lineItems.push({ description: '', quantity: 1, unitPrice: 0 });
+        }
+        renderLineItems();
+        recomputeTotals();
+
+        function makeCell(child) {
+            const td = document.createElement('td');
+            td.appendChild(child);
+            return td;
+        }
+
+        function renderLineItems() {
+            const body = $body.get(0);
+            while (body.firstChild) body.removeChild(body.firstChild);
+
+            lineItems.forEach((item, idx) => {
+                const tr = document.createElement('tr');
+
+                const desc = document.createElement('input');
+                desc.type = 'text';
+                desc.className = 'form-control li-desc';
+                desc.dataset.idx = idx;
+                desc.value = item.description ?? '';
+                desc.placeholder = 'Description';
+
+                const qty = document.createElement('input');
+                qty.type = 'number';
+                qty.className = 'form-control li-qty';
+                qty.dataset.idx = idx;
+                qty.min = '0';
+                qty.step = '0.01';
+                qty.value = Number(item.quantity) || 0;
+
+                const price = document.createElement('input');
+                price.type = 'number';
+                price.className = 'form-control li-price';
+                price.dataset.idx = idx;
+                price.min = '0';
+                price.step = '0.01';
+                price.value = Number(item.unitPrice) || 0;
+
+                const totalCell = document.createElement('td');
+                totalCell.style.cssText = 'text-align:right;font-variant-numeric:tabular-nums;';
+                totalCell.id = `line-total-${idx}`;
+                totalCell.textContent = '—';
+
+                const removeBtn = document.createElement('button');
+                removeBtn.type = 'button';
+                removeBtn.className = 'btn btn-sm btn-ghost li-remove';
+                removeBtn.dataset.idx = idx;
+                removeBtn.title = 'Remove';
+                removeBtn.textContent = '×';
+
+                tr.appendChild(makeCell(desc));
+                tr.appendChild(makeCell(qty));
+                tr.appendChild(makeCell(price));
+                tr.appendChild(totalCell);
+                tr.appendChild(makeCell(removeBtn));
+                body.appendChild(tr);
+            });
+
+            updateLineTotals();
+        }
+
+        function updateLineTotals() {
+            const currency = $currency.val();
+            lineItems.forEach((item, idx) => {
+                const lineTotal = round2((Number(item.quantity) || 0) * (Number(item.unitPrice) || 0));
+                const cell = $container.find(`#line-total-${idx}`).get(0);
+                if (cell) cell.textContent = fmt(lineTotal, currency);
+            });
+        }
+
+        function recomputeTotals() {
+            const currency = $currency.val();
+            const vatEnabled = $vatEnabled.prop('checked');
+            const vatRate = Number($vatRate.val()) || 0;
+
+            let subtotal = 0;
+            for (const item of lineItems) {
+                subtotal += (Number(item.quantity) || 0) * (Number(item.unitPrice) || 0);
+            }
+            subtotal = round2(subtotal);
+            const vat = vatEnabled ? round2(subtotal * (vatRate / 100)) : 0;
+            const total = round2(subtotal + vat);
+
+            $tSubtotal.text(fmt(subtotal, currency));
+            $tVat.text(fmt(vat, currency));
+            $tVatRate.text(vatRate);
+            $tTotal.text(fmt(total, currency));
+            $vatRow.css('display', vatEnabled ? '' : 'none');
+            updateLineTotals();
+        }
+
+        $body.on('input', '.li-desc', function () {
+            lineItems[Number(this.dataset.idx)].description = this.value;
+        });
+        $body.on('input', '.li-qty', function () {
+            lineItems[Number(this.dataset.idx)].quantity = Number(this.value) || 0;
+            recomputeTotals();
+        });
+        $body.on('input', '.li-price', function () {
+            lineItems[Number(this.dataset.idx)].unitPrice = Number(this.value) || 0;
+            recomputeTotals();
+        });
+        $body.on('click', '.li-remove', function () {
+            const idx = Number(this.dataset.idx);
+            lineItems.splice(idx, 1);
+            if (!lineItems.length) lineItems.push({ description: '', quantity: 1, unitPrice: 0 });
+            renderLineItems();
+            recomputeTotals();
+        });
+
+        $container.find('#btn-add-line').on('click', () => {
+            lineItems.push({ description: '', quantity: 1, unitPrice: 0 });
+            renderLineItems();
+            recomputeTotals();
+        });
+
+        $vatEnabled.on('change', recomputeTotals);
+        $vatRate.on('input', recomputeTotals);
+        $currency.on('change', recomputeTotals);
+
+        $container.find('#btn-save').on('click', async () => {
+            const issuerId   = $issuer.val();
+            const receiverId = $receiver.val();
+            if (!issuerId)   { E.toast('Pick an issuer.',   { type: 'error' }); return; }
+            if (!receiverId) { E.toast('Pick a receiver.', { type: 'error' }); return; }
+
+            const body = {
+                number:     $number.val()?.trim() || undefined,
+                status:     $status.val(),
+                issueDate:  $issueDate.val(),
+                dueDate:    $dueDate.val() || '',
+                issuerId,
+                receiverId,
+                vatEnabled: $vatEnabled.prop('checked'),
+                vatRate:    Number($vatRate.val()) || 0,
+                currency:   $currency.val(),
+                notes:      $notes.val() ?? '',
+                lineItems
+            };
+
+            try {
+                const res = isEdit
+                    ? await H.put(`${BASE}/invoices/${id}`, body)
+                    : await H.post(`${BASE}/invoices`, body);
+                if (res.error) throw new Error(res.error);
+                E.toast(isEdit ? 'Invoice saved.' : 'Invoice created.', { type: 'success' });
+                R.navigate('#/plugins/invoice');
+            } catch (err) {
+                E.toast(err?.message ?? 'Save failed.', { type: 'error' });
+            }
+        });
+
+        Domma.icons.scan();
+    }
+};